《大学计算机基础》第9章网页设计与制作.ppt

《《大学计算机基础》第9章网页设计与制作.ppt》由会员分享，可在线阅读，更多相关《《大学计算机基础》第9章网页设计与制作.ppt（70页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、教学课件教学课件北京航空航天大学大学大学计算机基础大学计算机基础1第第9章章 网页设计与制作网页设计与制作 2本章重点本章重点n网页基本知识网页基本知识 n网站建设的基本过程网站建设的基本过程 n常用的网页制作工具常用的网页制作工具 n使用使用FrontPage 2003建立网站建立网站n使用使用FrontPage 2003 编辑网页编辑网页n级联样式表级联样式表CSSn网页布局的方法网页布局的方法n应用表单实现网页交互的方法应用表单实现网页交互的方法n网站的发布与管理网站的发布与管理39.1 9.1 网站的建设与规划网站的建设与规划 u9.1.1 网页基本知识网页基本知识 u9.1.2 HT

2、ML语言简介语言简介 u9.1.3 常用的网页制作工具常用的网页制作工具 49.1.1 网页基本知识网页基本知识 nWWW(World Wide Web)WWWWWW是是InternetInternet上多媒体信息查询的工具。上多媒体信息查询的工具。WEBWEB由互相链接在一起的网页由互相链接在一起的网页构成，这些网页是由普通文本、超文本构成，这些网页是由普通文本、超文本HypertextHypertext，以及图表、图片等构成。以及图表、图片等构成。nURL（Uniform Resource Locator）URLURL（统一资源定位器）是指向网络服务器中某个资源的地址，用字符（统一资源定位

3、器）是指向网络服务器中某个资源的地址，用字符串来表示。其中包括协议、主机域名（或串来表示。其中包括协议、主机域名（或IPIP地址）、文件名等等。地址）、文件名等等。n超级链接（超级链接（Hyperlink）超级链接是包含在网页中指向其他网页的指针。超级链接是包含在网页中指向其他网页的指针。n超文本超文本包含超链接的文本称为超文本。有时图像或图像的某部分也可以包含超包含超链接的文本称为超文本。有时图像或图像的某部分也可以包含超链接。链接。5网页基本知识网页基本知识 n超媒体超媒体当超文本网页中包含声音、动画、视频等其它媒体时，网页被称为是超当超文本网页中包含声音、动画、视频等其它媒体时，网页被称

4、为是超媒体的。浏览器一般通过外挂的帮助程序来显示这些超媒体信息。媒体的。浏览器一般通过外挂的帮助程序来显示这些超媒体信息。n浏览器浏览器用户通过称为浏览器的软件来观看网页，浏览器取回所请求的网页，解用户通过称为浏览器的软件来观看网页，浏览器取回所请求的网页，解释其中所含的文本和格式命令，并正确的显示出来。释其中所含的文本和格式命令，并正确的显示出来。n网页与网站网页与网站网页由超文本标记语言（网页由超文本标记语言（HTMLHTML，HyperText Markup LanguageHyperText Markup Language）写成，）写成，网页之间通过超链接相互组织成为反映某个主题的网站

5、。网页之间通过超链接相互组织成为反映某个主题的网站。6Web Web 工作模式工作模式HTTPHTTP协议协议协议协议用用用用HTMLHTML编写编写编写编写http requesthttp responsehttp requesthttp responseHTTPHTTP协协协协议议议议用开发工具编写用开发工具编写用开发工具编写用开发工具编写如如如如FrontPageFrontPage浏览器浏览器浏览器浏览器WebserverHomepageHomepage主页主页主页主页网页网页网页网页网页网页网页网页n第一步第一步：WEB浏览器向一个特定的服务器发送浏览器向一个特定的服务器发送WEB页页

6、面请求面请求。n第二步第二步：在每个：在每个WEB服务器上有一个服务进程在服务器上有一个服务进程在TCP的的80端口上监听由浏览器发来的建立连接请求；在连端口上监听由浏览器发来的建立连接请求；在连接建立之后，寻找所请求的接建立之后，寻找所请求的WEB页面，并将所请求的页面，并将所请求的网页传送给浏览器。浏览器和服务器之间进行信息传网页传送给浏览器。浏览器和服务器之间进行信息传输使用超文本传输协议输使用超文本传输协议HTTP协议。协议。n第三步第三步：WEB浏览器接收到所请求的网页，并按照预浏览器接收到所请求的网页，并按照预定的格式显示出来。定的格式显示出来。7网站建设的基本过程网站建设的基本过

7、程 n申请域名申请域名 有一个人们容易记住的域名，可以方便用户访问网站。域名是独一无二的，需有一个人们容易记住的域名，可以方便用户访问网站。域名是独一无二的，需要向网络信息中心申请。要向网络信息中心申请。n建立服务器主机建立服务器主机 服务器主机应该能够提供服务器主机应该能够提供7*24小时不间断联网服务，根据企业或个人的资金、小时不间断联网服务，根据企业或个人的资金、网络维护能力等不同可以选择不同的服务方式。网络维护能力等不同可以选择不同的服务方式。自己建立服务器主机自己建立服务器主机 大的企业、学校、政府部门等，有专门的技术人员大的企业、学校、政府部门等，有专门的技术人员维护。维护。主机托

8、管模式主机托管模式 将服务器主机交给专门的网络运营部门管理。将服务器主机交给专门的网络运营部门管理。虚拟主机模式虚拟主机模式 租用网络运营商服务器主机的部分存储空间。租用网络运营商服务器主机的部分存储空间。n设计网站设计网站 设计网站首先要确定网站的主题，围绕主题就可以确定网站的内容和网页的风设计网站首先要确定网站的主题，围绕主题就可以确定网站的内容和网页的风格。确定了主题和风格后就需要组织文字、图片、声音等网页素材制作网页。格。确定了主题和风格后就需要组织文字、图片、声音等网页素材制作网页。n制作网页制作网页 网页是用网页是用HTML语言写出来的文档，是纯文本文档。语言写出来的文档，是纯文本

9、文档。8网页设计网页设计1.确定网站主题确定网站主题1.主题确定网站主要传播哪些内容和提供哪些服务。主题确定网站主要传播哪些内容和提供哪些服务。2.确定网页风格确定网页风格(选择视觉外观选择视觉外观)1.网页风格决定了网页的表现形式，决定于网站的主题和内容，网页风格决定了网页的表现形式，决定于网站的主题和内容，以达到内容和形式的统一。以达到内容和形式的统一。3.设计有效的页面布局设计有效的页面布局1.合理的网页布局可以使浏览者更加方便地浏览网页。合理的网页布局可以使浏览者更加方便地浏览网页。4.组织素材组织素材1.确定了主题和风格后就需要组织文字、图片、声音等网页素确定了主题和风格后就需要组织

10、文字、图片、声音等网页素材来表现主题。材来表现主题。5.制作网页制作网页1.将各种网页素材组织到网页中将各种网页素材组织到网页中9网页设计遵循的一般原则网页设计遵循的一般原则 n主题鲜明主题鲜明一個主题鲜明、內容丰富具有特色的网站，通常要比什么都有的大杂一個主题鲜明、內容丰富具有特色的网站，通常要比什么都有的大杂烩式的网站更加吸引人。烩式的网站更加吸引人。n形式与內容统一形式与內容统一网页的排版、布局、色彩、图形的运用要与网页中欲向网友传达的有网页的排版、布局、色彩、图形的运用要与网页中欲向网友传达的有效信息相统一。效信息相统一。n风格要统一风格要统一风格的选用要尽量突出自己的个性，让浏览者有

11、一个独特的印象。风格的选用要尽量突出自己的个性，让浏览者有一个独特的印象。n栏目设计要合理栏目设计要合理倘若內容较多，栏目设计要合理、清晰，让浏览者容易找到所需的信倘若內容较多，栏目设计要合理、清晰，让浏览者容易找到所需的信息。息。n导航清晰易懂导航清晰易懂一个清晰、容易理解的导航栏，可以使新手快速了解到网站的结构，一个清晰、容易理解的导航栏，可以使新手快速了解到网站的结构，便于转到其他的页面。便于转到其他的页面。n时常更新內容时常更新內容经常更新网页内容，给网友提供最新的信息，才能使网站更有吸引力。经常更新网页内容，给网友提供最新的信息，才能使网站更有吸引力。10利用制作工具利用制作工具编写

12、编写HTMLHTML源代码源代码使用记事本等字处理软使用记事本等字处理软件直接编写代码，保存件直接编写代码，保存为为.htmhtm或或.htmlhtml的纯文本的纯文本文件文件使用所见即所得的可使用所见即所得的可视化工具软件。视化工具软件。网页制作网页制作网页文档中包含了网页元素及其显示格式，制作网页就是网页文档中包含了网页元素及其显示格式，制作网页就是将网页元素按照风格所确定的显示格式写成将网页元素按照风格所确定的显示格式写成HTML文档。文档。119.1.2 HTML语言简介语言简介 HTML是一种简单的标记语言，它主要用于是一种简单的标记语言，它主要用于描述描述Web文档的结构，文档的结

13、构，HTML代码描述超文本代码描述超文本文档的格式。文档的格式。格式格式由浏览器解释和执行。由浏览器解释和执行。标记的一般格式为：标记的一般格式为：对象对象对象对象例如：例如：我的主页我的主页 简介简介12超文本文档的结构超文本文档的结构例：例：我的第一个主页我的第一个主页 这是一个简单的例子这是一个简单的例子 文档头部文档体 文档头部定义网页的属性 文档体定义显示的文档内容和格式13图像的使用图像的使用 n网页上的图像用网页上的图像用标记表示，标记表示，src属性是必须属性是必须的，其值说明图像的位置。的，其值说明图像的位置。例如：例如：n使用图像要考虑网络传输速度，大的图像文件需要使用图像

14、要考虑网络传输速度，大的图像文件需要相对长的网络传输时间。相对长的网络传输时间。n不同格式的图像文件压缩比不同，图像质量也不同，不同格式的图像文件压缩比不同，图像质量也不同，文件大小也不同。文件大小也不同。n一般静态图像使用一般静态图像使用jpg格式，动态图像使用格式，动态图像使用gif格式。格式。149.1.3 常用网页制作工具常用网页制作工具v网页编写软件网页编写软件网页编写软件网页编写软件 FrontpageFrontpage 、D Dreamwaverreamwaver v图形图形图形图形/图像处理软件图像处理软件图像处理软件图像处理软件 PhotoshopPhotoshop、Fire

15、worksFireworks v网页动画制作软件网页动画制作软件网页动画制作软件网页动画制作软件 FlashFlashv常用网页脚本语言常用网页脚本语言常用网页脚本语言常用网页脚本语言 JavascriptJavascript 、VbscriptVbscriptvJava appletJava applet小程序小程序小程序小程序v动态网页开发工具动态网页开发工具动态网页开发工具动态网页开发工具 AspAsp、JspJsp、PhpPhp原来制作网页不是很难啊！原来制作网页不是很难啊！原来制作网页不是很难啊！原来制作网页不是很难啊！可是想做好也不简单！可是想做好也不简单！可是想做好也不简单！可是

16、想做好也不简单！159.2 9.2 使用使用FrontPage 2003FrontPage 2003制作网站制作网站 u9.2.1 建立网站建立网站 u9.2.2 编辑网页编辑网页 u9.2.3 编排网页格式编排网页格式 u9.2.4 使用图像使用图像 u9.2.5 保持网站的一致性外观保持网站的一致性外观 u9.2.6 网页的布局网页的布局 u9.2.7 网页的动态效果网页的动态效果 u9.2.8 应用表单实现交互功能应用表单实现交互功能 16FrontPage 2003FrontPage 2003界面界面设计网页设计网页自动生成的自动生成的HTML语句语句预览网页效果预览网页效果基本内容区

17、基本内容区文本文本图像图像表格表格背景声音背景声音超级链接超级链接文文件件夹夹列列表表179.2.1 建立网站建立网站 FrontPage 2003的网站管理功能强大，建的网站管理功能强大，建立网站后，其中的文件被统一管理。立网站后，其中的文件被统一管理。n使用模板建立网站使用模板建立网站 FrontPage 2003FrontPage 2003提供了多种网页模板和网站提供了多种网页模板和网站模板，用户可以很方便地建立自己的网站。模板，用户可以很方便地建立自己的网站。n自己设计网站自己设计网站 可以先建立一个空白网站或只有一个网页的可以先建立一个空白网站或只有一个网页的网站，然后在网站中添加其

18、他网页的方法自己网站，然后在网站中添加其他网页的方法自己设计。设计。18使用模板使用模板模板中预定义了网站的大致内容和布局，并使用某一种主题模板中预定义了网站的大致内容和布局，并使用某一种主题创建风格一致的网页。主题包含了采用某种配色方案的统一设创建风格一致的网页。主题包含了采用某种配色方案的统一设计元素，包括字体、图形、背景、导航栏、水平线及其他网页计元素，包括字体、图形、背景、导航栏、水平线及其他网页元素。元素。19自己设计网页自己设计网页 如果从一个空白的网页开始设计，需要进行以下如果从一个空白的网页开始设计，需要进行以下一项或多项操作：一项或多项操作：n使用框架、表格布局或绝对定位工具

19、来精确定位网页上的文使用框架、表格布局或绝对定位工具来精确定位网页上的文本和图形。本和图形。n添加文本、图形、网页横幅、表格、表单、超链接等网页元添加文本、图形、网页横幅、表格、表单、超链接等网页元素。素。n添加添加Flash内容、视频、声音或内容、视频、声音或GIF动画等动态元素。动画等动态元素。n添加可以变化的内容或功能，如字幕、计数器、时间戳、网添加可以变化的内容或功能，如字幕、计数器、时间戳、网页过渡、交互式按钮以及使用动态页过渡、交互式按钮以及使用动态HTML（DHTML）的表现方）的表现方式。式。n应用样式或使用样式表来设置文本格式。应用样式或使用样式表来设置文本格式。n使用颜色或

20、图像来设置网页背景。使用颜色或图像来设置网页背景。20向网站中添加网页向网站中添加网页21FrontPage 2003FrontPage 2003的视图的视图 n设计、拆分、代码和浏览等网页视图设计、拆分、代码和浏览等网页视图。n文件夹、远程网站、报表、导航、超链接和任务等网站视图文件夹、远程网站、报表、导航、超链接和任务等网站视图。22网页视图网页视图n 网页编辑的视图，负责网站内个别网页的编辑，它提供了网页编辑的视图，负责网站内个别网页的编辑，它提供了4种显示方式。种显示方式。网页设计视图网页设计视图拆分视图拆分视图代码视图代码视图预览视图预览视图23网站视图网站视图以不同的视角来设计和观

21、察网站并方便进行管理。以不同的视角来设计和观察网站并方便进行管理。文件夹视图文件夹视图导航视图导航视图超链接视图超链接视图报表视图报表视图249.2.2 编辑网页编辑网页 n插入网页元素插入网页元素网页元素包括文本、图形、声音、视频、动画，常网页元素包括文本、图形、声音、视频、动画，常用的网页元素还有水平线、书签、日期、艺术字、自用的网页元素还有水平线、书签、日期、艺术字、自选图形等等。选图形等等。n设置网页属性设置网页属性包括网页保存位置、标题、背景音乐包括网页保存位置、标题、背景音乐/颜色颜色/图案、图案、默认显示格式、语言、边距等等。默认显示格式、语言、边距等等。n建立超链接建立超链接超

22、链接可以是文本，也可以是图像或图像的一部分。超链接可以是文本，也可以是图像或图像的一部分。注意注意:超链接不同目标超链接不同目标的位置属性。的位置属性。25设置网页属性设置网页属性 使用背景音乐使用背景音乐使用背景音乐使用背景音乐 背景颜色或图形背景颜色或图形背景颜色或图形背景颜色或图形 通过网页属性的常规标签，通过网页属性的常规标签，通过网页属性的常规标签，通过网页属性的常规标签，可以制定网页的标题。也可可以制定网页的标题。也可可以制定网页的标题。也可可以制定网页的标题。也可以给网页加上背景音乐，并以给网页加上背景音乐，并以给网页加上背景音乐，并以给网页加上背景音乐，并指定音乐播放次数。指定

23、音乐播放次数。指定音乐播放次数。指定音乐播放次数。通过网页属性的背景通过网页属性的背景通过网页属性的背景通过网页属性的背景标签，可以设置网页的标签，可以设置网页的标签，可以设置网页的标签，可以设置网页的背景颜色或将图像作为背景颜色或将图像作为背景颜色或将图像作为背景颜色或将图像作为网页的背景。网页的背景。网页的背景。网页的背景。26常用的网页元素常用的网页元素 换行符用于将网页中的一段文本断开换行符用于将网页中的一段文本断开并且是分开的两个部分保持在同一个段并且是分开的两个部分保持在同一个段落中。落中。换行符换行符换行符换行符 brbrbr符号和注释符号和注释符号和注释符号和注释特殊符号和注释

24、。注释是网页制作者在特殊符号和注释。注释是网页制作者在网页中的附加文字说明，只在网页中的附加文字说明，只在FrontpageFrontpage中编辑时作者和合作者才看到中编辑时作者和合作者才看到。水平线用来把网页分成几个部分水平线用来把网页分成几个部分.水平线水平线水平线水平线 hrhrhr日期和时间日期和时间日期和时间日期和时间在网页中插入上次编辑此页的日期，也在网页中插入上次编辑此页的日期，也可以插入上次自动更新此页的日期。这可以插入上次自动更新此页的日期。这些日期和时间是动态变化的。些日期和时间是动态变化的。插入书签插入书签插入书签插入书签书签用于为文档中的某个位置或所选文书签用于为文档

25、中的某个位置或所选文本命名，以便快速定位和用于超链接的本命名，以便快速定位和用于超链接的锚点。锚点。27建立超链接建立超链接n 超链接的实现方法：将某个文本串或某幅图像和其超链接的实现方法：将某个文本串或某幅图像和其他网页的地址（他网页的地址（URLURL）联系在一起。联系在一起。html”我的童年时代我的童年时代我的童年时代我的童年时代/A html”A28超链接到不同目标超链接到不同目标n插入书签插入书签 n链接到同一文档中的某个位置链接到同一文档中的某个位置 链接文本链接文本n链接到同一主机的另一文档链接到同一主机的另一文档 链接文本链接文本n链接到网络中的另一个主机链接到网络中的另一个

26、主机 链接文本链接文本n链接到一个电子邮件地址链接到一个电子邮件地址 链接文本链接文本n链接到一个普通的文档链接到一个普通的文档 如：如：会议通知会议通知299.2.3 编排网页格式编排网页格式 v设置字符格式设置字符格式设置字符格式设置字符格式v设置段落格式设置段落格式设置段落格式设置段落格式v创建列表创建列表创建列表创建列表v设置边框和阴影设置边框和阴影设置边框和阴影设置边框和阴影v级联样式单级联样式单级联样式单级联样式单 v网页的特殊效果网页的特殊效果网页的特殊效果网页的特殊效果v主题的使用主题的使用主题的使用主题的使用30 在在 FrontPage 中，可以像使用中，可以像使用word

27、的方式来设置文本格式，如的方式来设置文本格式，如更改字体、大小、样式、颜色、段落间距和文本的垂直位置，以及添更改字体、大小、样式、颜色、段落间距和文本的垂直位置，以及添加诸如下划线的效果。加诸如下划线的效果。段落的格式化方法与段落的格式化方法与word类似。类似。设置文本格式设置文本格式设置文本格式设置文本格式 段落的格式化段落的格式化段落的格式化段落的格式化文本及段落的格式化文本及段落的格式化 项目符号和编号是组织数据的工具，它项目符号和编号是组织数据的工具，它可以使数据层次分明、重点突出。可以使数据层次分明、重点突出。使用项目符号和编号使用项目符号和编号使用项目符号和编号使用项目符号和编号

28、31级联样式表级联样式表CSSCSSFrontpage提供样式功能，用于对网页进行排版。为了将提供样式功能，用于对网页进行排版。为了将样式应用到站点的其他网页中，使网站的风格统一，需要创建样式应用到站点的其他网页中，使网站的风格统一，需要创建级联样式单，定义应用到网页或网页元素的样式。样式单可以级联样式单，定义应用到网页或网页元素的样式。样式单可以设定：设定：n改变文本行间距，字间距和字符间距改变文本行间距，字间距和字符间距n设置元素的左右上下边距设置元素的左右上下边距n设置元素的缩进设置元素的缩进n改变元素中文本的字体大小、格式和其他属性改变元素中文本的字体大小、格式和其他属性n设置元素边框

29、，并指定边框的大小和各种属性设置元素边框，并指定边框的大小和各种属性n设置元素的背景颜色和背景图案设置元素的背景颜色和背景图案这是保这是保持站点持站点外观统外观统一的好一的好方法哦！方法哦！32在在HTMLHTML文档中应用样式表的方法文档中应用样式表的方法n链接到样式单文件链接到样式单文件 n嵌入样式单嵌入样式单 风格单的定义内容风格单的定义内容n内联样式单内联样式单 This is the red text 用用标记符定义一个标记符定义一个HTML文档块的样式单文档块的样式单 css example This is a paragragh.It will look green in the

30、 browser 33创建样式表创建样式表n基本格式基本格式 h1color:red;font-size:12pt;text-line:centern标记符的组合定义标记符的组合定义 H2,P,LIcolor:bluen在样式表中加注释在样式表中加注释 H1color:blue;font-size:18n/*定义标题定义标题1字符的大小字符的大小 bodymargin-left:1cmn/*定义页面左边界定义页面左边界*/h2font-size:15n/*定义标题定义标题2的字符大小的字符大小*/349.2.4 使用图像使用图像 GIF JPEG PNGGIF JPEG PNG （图形交换格式

31、）（联合图像专家组）（可移植网络图形）图形交换格式）（联合图像专家组）（可移植网络图形）可用颜色数可用颜色数可用颜色数可用颜色数 16777216 16777216 16777216每幅图像的颜色每幅图像的颜色每幅图像的颜色每幅图像的颜色 256 1677721616777216压缩压缩压缩压缩 无损无损 有损有损 无损无损透明透明透明透明 单色单色 否否 Alpha通道通道半透明半透明半透明半透明 否否 否否 Alpha通道通道动画动画动画动画 是是 否否 否否FrontPageFrontPage允许用户在网页中插入多种不同类型的图片允许用户在网页中插入多种不同类型的图片对象，显示效果可以有

32、动态和静态两种。常用图片文件格对象，显示效果可以有动态和静态两种。常用图片文件格式如下表所列。式如下表所列。考虑到网页下载速度问题，一般静考虑到网页下载速度问题，一般静态图片使用态图片使用jpgjpg格式，动态图片使用格式，动态图片使用gifgif格式。格式。35图片的插入图片的插入 HTMLHTML并不能包含图像，它只是包含图像文件的名并不能包含图像，它只是包含图像文件的名称和相应的格式代码。称和相应的格式代码。”图片的插入图片的插入 直接拖拽来改变图片的大小直接拖拽来改变图片的大小 使用图片属性对话框来设置使用图片属性对话框来设置 图片的替代文字、图片边框图片的替代文字、图片边框 使用图片

33、工具栏编辑图片使用图片工具栏编辑图片36图片文件的来源图片文件的来源当前站点中的图片当前站点中的图片来自磁盘上文件的图片来自磁盘上文件的图片插入其他网页中的图片插入其他网页中的图片插入扫描图片插入扫描图片插入剪贴画插入剪贴画插入视频插入视频37图片的基本操作图片的基本操作改变图片大小改变图片大小将图片转换成将图片转换成GIF、JPEG或或PNG格式格式指定图片的低分辨率版本指定图片的低分辨率版本指定代替图片的显示文字指定代替图片的显示文字设置图片的边框属性设置图片的边框属性编辑图片编辑图片在图片上添加文本在图片上添加文本图片的定位图片的定位保存图片对象保存图片对象38图片的特殊效果图片的特殊效

34、果n创建图片的缩略图创建图片的缩略图n图片的翻转和旋转图片的翻转和旋转n图片的亮度和对比度图片的亮度和对比度n剪裁图片剪裁图片n设置图片的透明色设置图片的透明色n图片的颜色冲蚀图片的颜色冲蚀n图片的黑白模式图片的黑白模式n添加凸凹边框效果添加凸凹边框效果n重新取样图片重新取样图片39图像映射图像映射图像映射就是包含超链接的图像。通过单击图像或图片的某图像映射就是包含超链接的图像。通过单击图像或图片的某个部分，链接到相应内容个部分，链接到相应内容。创建图像映射的最常用方法就是在创建图像映射的最常用方法就是在图片上放入热点。图片上放入热点。热点是一个不可见的区域，单击后可以将站热点是一个不可见的区

35、域，单击后可以将站点访问者带到用户定义的点访问者带到用户定义的URLURL中。中。vv设置图片的默认超链接设置图片的默认超链接设置图片的默认超链接设置图片的默认超链接vv创建热点创建热点创建热点创建热点vv创建文本热点创建文本热点创建文本热点创建文本热点vv编辑热点编辑热点编辑热点编辑热点创建热点创建热点409.2.5 保持网站的一致性外观保持网站的一致性外观 41主题主题主题主题主题主题是一组可应用在网页上的设计元素和颜色方案，其中包括字体、图是一组可应用在网页上的设计元素和颜色方案，其中包括字体、图形、背景、导航栏、水平线和其他网页元素。类似于形、背景、导航栏、水平线和其他网页元素。类似于

36、powerpointpowerpoint中的模板。中的模板。在站点或网页中应用某个主题后，可以影响到网页外观的多个方面：在站点或网页中应用某个主题后，可以影响到网页外观的多个方面：v颜色：颜色：主题使用颜色方案设置正文、标题、超链接、网页横幅文本、导主题使用颜色方案设置正文、标题、超链接、网页横幅文本、导航览标签、表格边框以及网页背景的颜色。航览标签、表格边框以及网页背景的颜色。v图形图形:主题使用图形作为网页元素，用户可以使用普通或动态图形集。主题使用图形作为网页元素，用户可以使用普通或动态图形集。v样式样式:主题使用本身指定的样式作为文本或标题的样式。主题使用本身指定的样式作为文本或标题的

37、样式。42应用主题应用主题单击右侧选择单击右侧选择主题窗格中的主题主题窗格中的主题就可以应用选中的就可以应用选中的主题。主题。43 修改主题修改主题修改主题修改主题的颜色的颜色修改主题的样式修改主题的样式修改主题修改主题的图形的图形44共享边框共享边框n共享边框共享边框是站点上一个或多个网页共享的区域。是站点上一个或多个网页共享的区域。n共享边框可以出现在一个网页的顶端（类似于网页页眉）、底端（类似共享边框可以出现在一个网页的顶端（类似于网页页眉）、底端（类似于网页页脚）、左边或右边的区域。于网页页脚）、左边或右边的区域。在共享边框中只需修改一次内在共享边框中只需修改一次内容，就可以将相同的内

38、容放入多个网页中。容，就可以将相同的内容放入多个网页中。45应用共享边框应用共享边框n设置共享边框后，用户可以设置共享边框后，用户可以添加如下内容：添加如下内容：网页横幅网页横幅公司徽标公司徽标导航栏导航栏版权注意事项版权注意事项站点上一次修改或更新站点上一次修改或更新的日期和时间的日期和时间46链接栏链接栏链接栏是一组文本或按钮超链接，通过它们浏览者可以到达链接栏是一组文本或按钮超链接，通过它们浏览者可以到达站点中的某一个网页。放到共享边框中以后，每个页面都会有站点中的某一个网页。放到共享边框中以后，每个页面都会有同样的链接信息。同样的链接信息。链链接接栏栏47使用链接栏使用链接栏n典型的导

39、航栏具有指向站点主页和主要上层网页的按钮。当典型的导航栏具有指向站点主页和主要上层网页的按钮。当我们在网页中添加一个导航栏时，我们在网页中添加一个导航栏时，FrontPage 将根据导航将根据导航视图下设置的导航结构自动生成导航超链接。视图下设置的导航结构自动生成导航超链接。导导航航栏栏属属性性489.2.6 网页的布局网页的布局表格表格在网页制作中的作用已经超越了传统意义上的存放在网页制作中的作用已经超越了传统意义上的存放数据，表格已成为组织数据、排列网页元素空间位置最为数据，表格已成为组织数据、排列网页元素空间位置最为灵活的方法。灵活的方法。表格和框架是网页布局的常用工具。表格和框架是网页

40、布局的常用工具。文字、图形、视频文字、图形、视频框架框架也是一种常用的网页布局方法，它将浏览器窗口也是一种常用的网页布局方法，它将浏览器窗口划分为功能独立的多个区域，每个框架显示一个网页划分为功能独立的多个区域，每个框架显示一个网页内容，并且通过框架中的超链接可以更改显示在另一内容，并且通过框架中的超链接可以更改显示在另一个框架中的网页文件。个框架中的网页文件。49两种常用布局方法两种常用布局方法表格表格框架框架50布局表格布局表格n布局表格和单元格共同表示用户可添加到网页的水平与垂直布局表格和单元格共同表示用户可添加到网页的水平与垂直区域，这些区域可以为内容提供复杂的可视结构。区域，这些区域

41、可以为内容提供复杂的可视结构。n我们可以选择预定义的布局表格模板，也可以创建自己的布我们可以选择预定义的布局表格模板，也可以创建自己的布局表格。局表格。51设置布局表格和单元格的属性设置布局表格和单元格的属性n调整表格的大小调整表格的大小n对选中单元格的高度、宽度、背景颜色、边框、边距等项进对选中单元格的高度、宽度、背景颜色、边框、边距等项进行相应的设置。行相应的设置。n添加圆角图片、设置阴影来修饰网页。添加圆角图片、设置阴影来修饰网页。52框架布局框架布局n 框架是一种将浏览器窗口划分为功能独立的多个区域的常用框架是一种将浏览器窗口划分为功能独立的多个区域的常用方法。框架集定义每个框架的大小

42、、位置、名称和初始网页，方法。框架集定义每个框架的大小、位置、名称和初始网页，普通网页提供每个框架（子窗口）的内容。一个框架的超链普通网页提供每个框架（子窗口）的内容。一个框架的超链接可以更改显示在另一个框架中的网页。接可以更改显示在另一个框架中的网页。n框架集是一种特殊的网页，该网页定义了整体的框架布局，框架集是一种特殊的网页，该网页定义了整体的框架布局，但不提供实际内容。但不提供实际内容。53框架的创建和保存框架的创建和保存新建框架网页新建框架网页框架组成框架组成在框架中加入网页在框架中加入网页 边框、滚动条、网页边框、滚动条、网页1）建立新网页）建立新网页2）指定已经存在的网页）指定已经

43、存在的网页保存框架页保存框架页【文件文件】|【另存为另存为】【文件文件】|新建新建|【网页网页】，选择选择“框架网页框架网页”标签标签54框架属性设置框架属性设置框架框架/框架属性框架属性网页名称网页名称初始网页初始网页框架大小框架大小边距边距滚动条滚动条框架的可调整性框架的可调整性间距间距30%70%80%20%相对大小：相对大小：1 1和和4 4相对大小：相对大小：3 3和和7 755框架之间的超链接框架之间的超链接在框架网页中，单击某框架内网页上的超链接时，被超链接在框架网页中，单击某框架内网页上的超链接时，被超链接所指定的网页通常在另一个框架中打开，这个框架称为目标框所指定的网页通常在

44、另一个框架中打开，这个框架称为目标框架。架。n命名命名:n链接链接:点击这里跳到点击这里跳到main框架框架56嵌入式框架嵌入式框架 在网在网页的页的内部内部也可以插也可以插入框架入框架来来显示单独显示单独的网页。的网页。57使用层来定位元素使用层来定位元素n层是一个可以应用层是一个可以应用CSS来进行绝对定位的工具。来进行绝对定位的工具。n利用层的绝对定位功能，也可以实现网页的布局。利用层的绝对定位功能，也可以实现网页的布局。589.2.7 网页的动态效果网页的动态效果n网页元素的动态效果网页元素的动态效果可以将动态可以将动态 HTML(DHTML)的动画效果应用到网页上的的动画效果应用到网

45、页上的任何相关组件任何相关组件;例如文本、段落、图片、按钮和字幕等等例如文本、段落、图片、按钮和字幕等等，并，并将这些效果链接到单击鼠标、鼠标悬停和加载网页等事件上。将这些效果链接到单击鼠标、鼠标悬停和加载网页等事件上。n网页过渡的动态效果网页过渡的动态效果 网页过渡指进入网页或离开网页等触发事件发生时，网页从网页过渡指进入网页或离开网页等触发事件发生时，网页从当前屏幕刷新到新的屏幕采取什么样的过渡效果。触发事件包当前屏幕刷新到新的屏幕采取什么样的过渡效果。触发事件包括进入网页、离开网页、进入网站、离开网站等。括进入网页、离开网页、进入网站、离开网站等。59网页元素的动态效果网页元素的动态效果

46、n利用利用“DHTML”效果工具栏可以在网页的任何组件元素中添效果工具栏可以在网页的任何组件元素中添加动态效果，并将这些动态效果链接到鼠标的单击、双击、加动态效果，并将这些动态效果链接到鼠标的单击、双击、悬停或加载网页等事件上。悬停或加载网页等事件上。当鼠标指向图当鼠标指向图片时，会更换另一片时，会更换另一张图片。张图片。DHTML动态效果工具栏动态效果工具栏60 网页的过渡效果网页的过渡效果n网页过渡指进入网页或离开网页等触发事件发生时，网页从网页过渡指进入网页或离开网页等触发事件发生时，网页从当前屏幕刷新到新的屏幕采取什么样的过渡效果。这就像幻当前屏幕刷新到新的屏幕采取什么样的过渡效果。这

47、就像幻灯片切换过程的过渡效果一样。灯片切换过程的过渡效果一样。61 每个网页可以包含一每个网页可以包含一个或多个表单，每个表个或多个表单，每个表单占据网页中的一个特单占据网页中的一个特定区域。定区域。表单中必须有一个元素表单中必须有一个元素作为作为“提交提交”按钮。按钮。9.2.8 创建交互式网页创建交互式网页n创建网页不仅是为了在创建网页不仅是为了在web服务器上向站点访问者提供各种服务器上向站点访问者提供各种服务、信息以及软件下载等，有时也需要收集站点访问者对服务、信息以及软件下载等，有时也需要收集站点访问者对站点的反馈意见。网页中插入表单来收集访问者信息，利用站点的反馈意见。网页中插入表

48、单来收集访问者信息，利用表单我们还可以创建讨论组。表单我们还可以创建讨论组。创建表单创建表单插入表单域插入表单域讨论组的应用讨论组的应用插入网页的高级内容插入网页的高级内容62创建表单创建表单n创建表单页面创建表单页面n单行文本框单行文本框 textn密码框密码框 passwordn多行文本框多行文本框 textarean下拉列表框下拉列表框 selectn复选框复选框 checkboxn单选按钮单选按钮 radion按钮按钮 buttonn表单的提交表单的提交 submitn要掌握收集什么样的信息要掌握收集什么样的信息使用哪个表单域更合适。使用哪个表单域更合适。63表单的处理表单的处理一个表

49、单必须有一个提交按钮。一个表单必须有一个提交按钮。单单击提交按钮后，表单的结果击提交按钮后，表单的结果l l可以送可以送到一个文件、电子邮件地址、数据到一个文件、电子邮件地址、数据库、表单处理程序以及自定义库、表单处理程序以及自定义（ISAPIISAPI、CGICGI、ASPASP等）表单处理等）表单处理程序。程序。649.3 9.3 网站的发布和管理网站的发布和管理 n发布一个站点就是要将站点上的网页及素材文件复制发布一个站点就是要将站点上的网页及素材文件复制到一个公共的到一个公共的Web服务器。服务器。n网站发布的步骤网站发布的步骤申请网页空间申请网页空间 上传网页及素材文件上传网页及素材

50、文件 更新网站更新网站 宣传网站宣传网站 65 网站发布之前网站发布之前n站点分析站点分析 指出未链接的文件指出未链接的文件 找出慢速网页找出慢速网页 找出没有连接到任何网页的超链接找出没有连接到任何网页的超链接 检查断开的超链接检查断开的超链接 检查网页元素错误检查网页元素错误 检查未用主题的文件以及完成的任务检查未用主题的文件以及完成的任务n网页测试网页测试测试超链接是否可用测试超链接是否可用图片是否正常显示图片是否正常显示其他媒体素材是否正确播放其他媒体素材是否正确播放66 网上有一些免费的个人主页空间。要拥网上有一些免费的个人主页空间。要拥有自己的个人主页，首先要到提供建立有自己的个人