第1讲 网页设计基础和HTML基础

网页制作连雁平计算机软件工程教研室1.课程简介本课程以Dreamweaver为开发环境，介绍网页制作的整个过程。主要内容：网页设计基础、HTML基础、Dreamweaver简介、站点管理文本输入、图像处理、建立超链接、表格、CSS样式、插入多媒体、模版、库项目、层、框架、行为、表单元素、IIS配置、创建动态网站、网站发布和维护、脚本应用（VBScript、JavaScriptAsp）、综合网站实例。2.预备知识计算机基础3.课程分配共72节时讲授部分，36节时实践部分，36节时4.课程目标通过本课程的学习，能够利用Dreamweaver开发一个具有一定动态功能的网站。第1章ASP.NET概述45.考核方式07应用1、2班：以团队形式开发一个网站，要求1.有开发的策划书、需求分析2.具有团队合作精神3.网站要美工且具有一定的动态功能07物流班：除了以上作品以外，需参加期末闭卷考试成绩分配：07应用1、2班07物流班期末成绩＝平时成绩*30%+作品*70%期末成绩＝平时成绩*20%+作品*20%+期末卷面*60%平时成绩包括考勤、平时提问、上机实验等。第1章ASP.NET概述5第1讲网页制作基础和HTML基础主要内容：1.网页浏览基本原理2.网页制作工具介绍3.HTML基础重点：网页浏览基本原理、HTML基础难点：HTML基础第1章ASP.NET概述61.网页浏览基本原理1.1客户机-服务器体系第1章ASP.NET概述71.2静态网页和动态网页静态网页：指一旦制作、处理以及上传以后就不能随意进行变化、修改的网页。如果要对该网页进行修改，则需要有掌握相当的网页制作技术的专业人员才能进行。制作成本高，制作时间长，对于非专业人员具有一定的难度，适合某些不需要经常变化的网页。动态网页：不是指那些包含动画、视频等带动态效果的网页，而是指有程序实时生成，可以根据不同条件生成不同内容的网页。信息量大，内容更新快。第1章ASP.NET概述8动态网页的特点：动态网页以数据库技术为基础，大大降低了网站维护的工作量采用动态网页技术的网站可以实现更多的功能动态网页并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页1.3浏览器MicrosoftIE，NetscapeNavigator，MyIE，腾讯qq等第1章ASP.NET概述91.4如何设计网页（1）网页设计的任务网页设计的任务指设计者要表现的主题和实现的功能。从形式上分为以下3类：资讯门户类站点，如新浪、搜狐、网易等门户网站，为访问者提供大量的信息而且访问量大，需注意页面的分割、结构的合理、页面的优化、界面的亲和等。第1章ASP.NET概述10网易主页第1章ASP.NET概述11资讯和形象相结合网站，如一些较大公司、国内各高校等网站，这类网站在设计上要求较高，既要保证资讯类的上述要求还要突出企业、单位的形象。第1章ASP.NET概述12武夷学院主页第1章ASP.NET概述13形象类网站，如一些中小型公司或单位的网站。这类网站一般较小，有的仅几页，需要实现的功能比较简单，此类网站主要突出企业形象。第1章ASP.NET概述14武夷山水月亭主页第1章ASP.NET概述15（2）网页设计的实现设计的实现分两个部分：第一步为站点的规划以及草图的设计，这部分可在纸上完成；第二步为网页的设计制作，这部分在计算机上完成。第1章ASP.NET概述16（3）网页设计的基本原则网页设计遵行的原则：统一、连贯、分割、对比及和谐。统一指网页的整体性，一致性，各个页面的设计风格要一致协调。连贯指注意页面的相互关系。注意各组成部分在内容上的内在联系和表现形式上的相互呼应，实现视觉和心理上的连贯，使整个页面设计的各个部分融洽得犹如一气呵成。分割指将页面分成若干个小块，小块之间有视觉上的不同。对比指通过矛盾和冲突，使设计更加富有生气。和谐指整个页面符合美的法则，浑然一体。第1章ASP.NET概述172.网页制作工具介绍HTMLCSSVBScriptJavaScriptASPPHPJSP网页制作三剑客：Dreamweaver、Flash、Fireworks微软FrontPage图像处理PhotoshopMicrosoftVisualStudio（ASP.NET）第1章ASP.NET概述183.HTML基础中文：超文本标记语言英文：HyperTextMarkupLanguageHTML语言是由一系列元素组成，用于组织文件的内容和指导文件的输出格式。元素名称不分大小写。一个元素可以有多个属性，属性及其属性值同样不分大小写，各个属性之间用空格分开。“属性=属性值”合起来构成一个完整的属性。元素有标记构成，大多数标记是成对出现的，分起始标记符号和结尾标记/符号，以便和页面的内容区分。第1章ASP.NET概述19htmlxmlns=“”headmetahttp-equiv=“Content-Type”content=“text/html;charset=gb2312”/title个人主页/titlestyletype=“text/css”!--Body{Background-image:url(“image/1.hpg”);}//--/style/headbodytablewidth=“200”height=150trtdp /p/td/tr/table/body/head第1章ASP.NET概述203.1创建html文件注意文件扩展名：.htm或.html任何文字编辑器均可，如记事本，写字板等详见演示过程第1章ASP.NET概述213.2常见的一些标记标题hn/hn,n取值为1到6换行br段落标记p/p水平线hrsize=5width=100pxcolor=“red”空格： :文字大小设置p19