第1章网页设计课件.ppt

1、主讲：蒋少主讲：蒋少第第1章章 网页设计概述网页设计概述本章学习导读本章学习导读 本章主要讲解网页设计制作的基本方式、构成网页的基本章主要讲解网页设计制作的基本方式、构成网页的基本元素、编辑网页的常用工具、动态网页的支持技术和网页本元素、编辑网页的常用工具、动态网页的支持技术和网页编码的基本知识。通过本章学习，读者应该掌握以下内容：编码的基本知识。通过本章学习，读者应该掌握以下内容：网页设计的基本方式网页设计的基本方式 网页包括的常见元素网页包括的常见元素 网页元素的创作与编辑工具网页元素的创作与编辑工具 HTML语言基础知识语言基础知识 动态网页的支持技术动态网页的支持技术第第1章章 网页设

2、计概述网页设计概述1.1 网页设计的基本方式网页设计的基本方式 网页设计制作的基本方式包括：手工直接编码、利用可视化工具、网页设计制作的基本方式包括：手工直接编码、利用可视化工具、手工编码和可视化工具结合手工编码和可视化工具结合3种。种。1.1.1 手工编码方式手工编码方式 网页是由网页是由HTML（Hyper Text Markup Language）超文本标记语超文本标记语言编码的文档，设计制作网页的过程就是生成言编码的文档，设计制作网页的过程就是生成HTML代码的过程。手工代码的过程。手工编码制作网页对网页设计人员的要求较高，编码效率低，调试过程复杂。编码制作网页对网页设计人员的要求较高

3、，编码效率低，调试过程复杂。但学习一定的编码知识是网页制作的基础，而且手工编码可以灵活地制但学习一定的编码知识是网页制作的基础，而且手工编码可以灵活地制作出丰富的网页效果。作出丰富的网页效果。1.1.2 可视化工具方式可视化工具方式随着网页制作技术的不断发展，出现了诸如随着网页制作技术的不断发展，出现了诸如FrontPage、Dreamweaver等等可视化的网页编辑工具。利用这些工具人们在可视环境下编辑制作网可视化的网页编辑工具。利用这些工具人们在可视环境下编辑制作网页元素，页元素，“所见即所得所见即所得”，再由编辑工具自动生成对应的网页代码，大，再由编辑工具自动生成对应的网页代码，大大大提

4、高的网页开发的效率。提高的网页开发的效率。第第1章章 网页设计概述网页设计概述1.1 网页设计的基本方式网页设计的基本方式 网页设计制作的基本方式包括：手工直接编码、利用可视化工具、网页设计制作的基本方式包括：手工直接编码、利用可视化工具、手工编码和可视化工具结合手工编码和可视化工具结合3种。种。1.1.1 手工编码方式手工编码方式 网页是由网页是由HTML（Hyper Text Markup Language）超文本标记语超文本标记语言编码的文档，设计制作网页的过程就是生成言编码的文档，设计制作网页的过程就是生成HTML代码的过程。手工代码的过程。手工编码制作网页对网页设计人员的要求较高，编

5、码效率低，调试过程复杂。编码制作网页对网页设计人员的要求较高，编码效率低，调试过程复杂。但学习一定的编码知识是网页制作的基础，而且手工编码可以灵活地制但学习一定的编码知识是网页制作的基础，而且手工编码可以灵活地制作出丰富的网页效果。作出丰富的网页效果。1.1.2 可视化工具方式可视化工具方式随着网页制作技术的不断发展，出现了诸如随着网页制作技术的不断发展，出现了诸如FrontPage、Dreamweaver等等可视化的网页编辑工具。利用这些工具人们在可视环境下编辑制作网可视化的网页编辑工具。利用这些工具人们在可视环境下编辑制作网页元素，页元素，“所见即所得所见即所得”，再由编辑工具自动生成对应

6、的网页代码，大，再由编辑工具自动生成对应的网页代码，大大大提高的网页开发的效率。提高的网页开发的效率。第第1章章 网页设计概述网页设计概述1.1 网页设计的基本方式网页设计的基本方式 网页设计制作的基本方式包括：手工直接编码、利用可视化工具、网页设计制作的基本方式包括：手工直接编码、利用可视化工具、手工编码和可视化工具结合手工编码和可视化工具结合3种。种。1.1.1 手工编码方式手工编码方式 网页是由网页是由HTML（Hyper Text Markup Language）超文本标记语超文本标记语言编码的文档，设计制作网页的过程就是生成言编码的文档，设计制作网页的过程就是生成HTML代码的过程。

7、手工代码的过程。手工编码制作网页对网页设计人员的要求较高，编码效率低，调试过程复杂。编码制作网页对网页设计人员的要求较高，编码效率低，调试过程复杂。但学习一定的编码知识是网页制作的基础，而且手工编码可以灵活地制但学习一定的编码知识是网页制作的基础，而且手工编码可以灵活地制作出丰富的网页效果。作出丰富的网页效果。1.1.2 可视化工具方式可视化工具方式随着网页制作技术的不断发展，出现了诸如随着网页制作技术的不断发展，出现了诸如FrontPage、Dreamweaver等等可视化的网页编辑工具。利用这些工具人们在可视环境下编辑制作网可视化的网页编辑工具。利用这些工具人们在可视环境下编辑制作网页元素

8、，页元素，“所见即所得所见即所得”，再由编辑工具自动生成对应的网页代码，大，再由编辑工具自动生成对应的网页代码，大大大提高的网页开发的效率。提高的网页开发的效率。第第1章章 网页设计概述网页设计概述1.2 网页中的常见元素网页中的常见元素 文本文本 图像和动画图像和动画 声音和视频声音和视频 超级链接超级链接 表格表格 表单表单 导航栏导航栏 其他常见元素其他常见元素第第1章章 网页设计概述网页设计概述1.3 网页元素的创作与编辑工具网页元素的创作与编辑工具1.3.1 网页图像制作工具网页图像制作工具 Fireworks Photo Impact PhotoShop1.3.2 动画制作工具动画

9、制作工具 Flash Director1.3.3 网页编辑工具网页编辑工具 FrontPage 2000 Dreamweaver HotDog1.4 HTML基础知识基础知识1.4.1 HTML基本概念基本概念1HTML概念概念 HTML是一种描述语言，对是一种描述语言，对Web页面中显示内容的属性以标签的形页面中显示内容的属性以标签的形式进行描述。客户机上的浏览器（式进行描述。客户机上的浏览器（Browser）对这些描述进行解释将相对这些描述进行解释将相应页面内容正确显示在显示器上。一个应页面内容正确显示在显示器上。一个Web页面就是一个页面就是一个HTML文档。文档。2HTML文档的构成文

10、档的构成 HTML文档由三大元素构成：文档由三大元素构成：HTML元素、元素、HEAD元素和元素和BODY元素。元素。每个元素又包含各自相应的标记（属性）。每个元素又包含各自相应的标记（属性）。HTML元素是最外层的元素，元素是最外层的元素，里面包含里面包含HEAD元素和元素和BODY元素。元素。HEAD元素中包含对文档基本信息文元素中包含对文档基本信息文档标题、文档搜索关键字、文档生成器等）描述的标记。档标题、文档搜索关键字、文档生成器等）描述的标记。BODY元素是文元素是文档的主体部分，包含有对网页元素（文本、表格、图片、动画、链接等）档的主体部分，包含有对网页元素（文本、表格、图片、动画

11、、链接等）描述的标记。描述的标记。HTML中标记一般成对，如：中标记一般成对，如：和和、和和等，但也有一些不成对。等，但也有一些不成对。第第1章章 网页设计概述网页设计概述3HTML文档的编辑文档的编辑 HTML文档是普通文本（文档是普通文本（ASCII）文件，它可以用任意编缉器（如文件，它可以用任意编缉器（如Windows中的记事本、写字板中的记事本、写字板，Macintosh中的中的BBEdit等）生成。你也等）生成。你也可以使用字处理软件，不过要注意保存时文件类型要选择可以使用字处理软件，不过要注意保存时文件类型要选择“带换行符的带换行符的纯纯文本文本”，并且类型扩展名为，并且类型扩展名

12、为“.htm”或或“.html”。早期网页制作的过程就早期网页制作的过程就是直是直接书写接书写HTML代码来定义页面元素的过程。代码来定义页面元素的过程。1.4.2 HTML的基本语法结构的基本语法结构 HTML的语法是通过标记来体现的，不同标记的符号及其属性构成了的语法是通过标记来体现的，不同标记的符号及其属性构成了该语言的语法特征。下面我们以该语言的语法特征。下面我们以HTML 4.0版为例，通过三大元素中的标版为例，通过三大元素中的标记来描述记来描述HTML的语法结构。的语法结构。1HTML元素元素 HTML标记是对整个文档属性的描述，即告诉浏览器标记是对整个文档属性的描述，即告诉浏览器

13、HTML文档的开始与结文档的开始与结束，是网页中最外层的标记。由束，是网页中最外层的标记。由和和标记对标出。标记对标出。HTML元素只元素只有有HTML一个标记。一个标记。2HEAD元素元素 （1）HEAD标记。该标记用来表示标记。该标记用来表示HEAD元素的开始和结束，其格式为：元素的开始和结束，其格式为：。（2）BASE标记（不成对标记）标记（不成对标记）。BASE标记用来确定当前初始的标记用来确定当前初始的URL，当当前文件中的链接都以所定义的初始地址为基础。它有一个前文件中的链接都以所定义的初始地址为基础。它有一个HREF属性，其值为所属性，其值为所定义的基准定义的基准URL地址，格式

14、为：地址，格式为：第第1章章 网页设计概述网页设计概述3BODY元素（可见对象的描述）元素（可见对象的描述）（1）BODY标记。该标记是标记。该标记是BODY元素开始和结束的标志，格式为：元素开始和结束的标志，格式为：元素标记元素标记 （2）DIV层标记。层是各种元素的集合，是一个活动板，便于元素定位。层标记。层是各种元素的集合，是一个活动板，便于元素定位。（3）文本标记。该标记用来标识文本属性，其属性参数比较复杂，具体格式如下：）文本标记。该标记用来标识文本属性，其属性参数比较复杂，具体格式如下：/定义文本的字体，定义文本的字体，?=宋体、楷体、隶书宋体、楷体、隶书等等 /定义文本的字号，定

15、义文本的字号，?=17的值的值 /定义文本的颜色，定义文本的颜色，?=#ffcc00等十六进制值等十六进制值 /粗体显示粗体显示 /斜体显示斜体显示 /下划线显示下划线显示 /下标显示下标显示 /上标显示上标显示第第1章章 网页设计概述网页设计概述（4）段落标记。该标记用来标识段落和列表。）段落标记。该标记用来标识段落和列表。/创建一个新的段落，两段落之间有行间空隙。创建一个新的段落，两段落之间有行间空隙。/定义段落对齐方式，定义段落对齐方式，?=right、left、center。/段内插入回车换行符，行间没有空隙段内插入回车换行符，行间没有空隙 /创建无序列表创建无序列表 /创建有序列表创

16、建有序列表（5）表格标记。该标记用来定义网页上的表格，格式如下：）表格标记。该标记用来定义网页上的表格，格式如下：/定义表格的起始、结束位置定义表格的起始、结束位置 /定义表格的边框宽度，定义表格的边框宽度，?=像素值像素值 /定义表格的宽度，定义表格的宽度，?=像素值像素值或百分比或百分比 /定义表格的对齐方式，定义表格的对齐方式，?=right、left、center /定义表格单元格之间的距离，定义表格单元格之间的距离，?=像素值像素值 /定义表格行的起始和结束位置定义表格行的起始和结束位置 /定义单元格水平对齐方式，定义单元格水平对齐方式，?=right、left、center /定义

17、表格列的起始和结束位置定义表格列的起始和结束位置 /定义单元格跨占的列数定义单元格跨占的列数?=1、2第第1章章 网页设计概述网页设计概述（6）图像标记（？号的含义参照）图像标记（？号的含义参照“表格标记表格标记“的说明，不再重复）。该标记用来的说明，不再重复）。该标记用来定义显示图像的地址、大小等属性，格式如下：定义显示图像的地址、大小等属性，格式如下：/添加图片的添加图片的URL地址和文件名地址和文件名 /图像的对齐方式图像的对齐方式 /设置围绕图像边框的大小设置围绕图像边框的大小 /设置图像下载时的说明文字设置图像下载时的说明文字 /加入一条水平线加入一条水平线 /设置水平线的高度设置水

18、平线的高度 /设置水平线的长度设置水平线的长度 /去掉水平线的阴影去掉水平线的阴影（7）下拉表单标记。该标记用来在网页上建立一个下拉表单，格式如下：）下拉表单标记。该标记用来在网页上建立一个下拉表单，格式如下：/创建下拉表单创建下拉表单?=1 /下拉显示，否则滚动显示下拉显示，否则滚动显示 /设置表单项目和选中时的参数值设置表单项目和选中时的参数值第第1章章 网页设计概述网页设计概述（8）链接（）链接（Linking）标记。该标记用来定义网页中超链接的热点和目标，格式标记。该标记用来定义网页中超链接的热点和目标，格式如下：如下：热点文字（图像等）热点文字（图像等）/URL.name为被链接的文

19、为被链接的文件名件名（9）多媒体标记。）多媒体标记。第第1章章 网页设计概述网页设计概述1.5 动态网页的支持技术动态网页的支持技术 动态网页此处是指浏览器和服务器数据库可以进行实时数据交流的动态交互动态网页此处是指浏览器和服务器数据库可以进行实时数据交流的动态交互网页，而不是指加上动画等效果的动感网页。随着网页，而不是指加上动画等效果的动感网页。随着Web技术的发展，动态网页已技术的发展，动态网页已成为网页制作的流行趋势。制作动态网页仅用上面的工具是不够的，还要结合下成为网页制作的流行趋势。制作动态网页仅用上面的工具是不够的，还要结合下面几种常见的支持技术，来开发服务器端的脚本应用程序。面几

20、种常见的支持技术，来开发服务器端的脚本应用程序。1.5.1 CGI技术技术 CGI（Common Gateway Interface）是用于连接主页和应用程序的接口。是用于连接主页和应用程序的接口。CGI是在服务器端运行的一个可执行程序，由网页的一个热链接激活进行调用，是在服务器端运行的一个可执行程序，由网页的一个热链接激活进行调用，并对该程序的返回结果进行处理，显示在网页上。简而言之，并对该程序的返回结果进行处理，显示在网页上。简而言之，CGI就是为了扩展就是为了扩展网页的功能而设立的。网页的功能而设立的。第第1章章 网页设计概述网页设计概述1.5.2 ASP技术技术 ASP（Microso

21、ft Active Server Pages）是一套微软开发的服务器端脚本环境，是一套微软开发的服务器端脚本环境，ASP内含于内含于IIS 3.0、4.0和和5.0之中，通过之中，通过ASP我们可以结合我们可以结合HTML网页、网页、ASP指令和指令和ActiveX元元件建立动态、交互且高效的件建立动态、交互且高效的Web服务器应用程序。服务器应用程序。1.5.3 PHP技术技术 PHP（Hypertext Preprocesso，超文本预处理器）是一种易于学习和使用的服务器端超文本预处理器）是一种易于学习和使用的服务器端脚本语脚本语PHP除了能够操作页面，还能发送除了能够操作页面，还能发送H

22、TTP的标题；它不需要特殊的开发环境和的标题；它不需要特殊的开发环境和IDE；它不仅支持多种数据库，还支持多种通信协议；另外，它不仅支持多种数据库，还支持多种通信协议；另外，PHP还具有极强的兼容性。还具有极强的兼容性。PHP是是完全免费的，可以从完全免费的，可以从PHP官方站点（官方站点（http:/）自由下载。自由下载。1.5.4 JSP技术技术 JSP(Java Server Pages)是由是由Sun Microsystems公司倡导、许多公司参与一起建立公司倡导、许多公司参与一起建立的一种动态网页技术标准。的一种动态网页技术标准。JSP技术是用技术是用JAVA语言作为脚本语言的，语言作为脚本语言的，JSP网页为整个服务网页为整个服务器端的器端的JAVA库单元提供了一个接口来服务于库单元提供了一个接口来服务于HTTP的应用程序。的应用程序。