计算机应用基础新Win98第九章(上)课件

第九章网页制作第九章网页制作1第九章网页制作

Web是Internet网上最受欢迎的一种信息服务系统主要由两部分组成：一是服务器端即信息的提供者，也称Web站点；二是客户端即信息的接收者。客户端通过浏览器来访问Web站点。Web信息是以网页的方式来组织的本章主要内容网页和站点的基本操作创建超链接插入对象和设置特殊效果使用主题、表单和框架发布站点建立Web服务器

HTML及脚本语言简介第九章网页制作Web是Inter29.1基本概念

1.站点与网页

Web（WWW）由形形式式的Web站点组成Web站点由一系列精心策划和组织的网页组成

网页文件2如Photo.htm站点视频素材图片素材网页文件1如Interest.htm主页文件Index.htm……声音素材9.1基本概念1.站点与网页网页文件2站点视频3

主页网页网页网页网页网页网页超链接主页网页网页网页网页网页网页42.Web特点

超文本、图形界面、与平台无关，分布式、交互、动态3.HTTP协议实现Web服务器与客户机之间数据交换

提供一个快速灵活的系统来发送超文本信息4.HTML语言

超文本语言（标记性语言）用来编制网页文档(也称HTML文档)。并不需要经过编译，只需要通过浏览器来打开就可以看到结果采用了标记方式，描述了每个在网页上的组件，例如文本段落、文本格式、图像、超链接等2.Web特点5

通过超文本链接能方便地进行各种信息之间切换

HTML版本

欧洲粒子物理实验室(CERN)首次提出来的HTML2.0→HTML3.0→HTML3.2→HTML4.0

DHTML（动态HTML）

动态HTML能够使网页下载到浏览器以后仍然能够随时变换包含多种技术，如JavaScript,VBScript,DocumentObjectModel(DOM,文档对象模型),Layers和CSS等通过超文本链接能方便地进行各种信息之间切换6

9

.2网页和网站的基本操作

借助于FrontPage，用户无需学会编程，就能快速地设计编制出具有专业水平的网页

9.2.1FrontPage的窗口

视图栏网页编辑区编辑控制按钮9.2网页和网站的基本操作7

在视图栏内有六个功能键

网页、文件夹、报表、导航、超链接、任务

在“网页”视图方式下，设有“普通”、“HTML”、“浏览”三个控制按钮

“普通”方式：可以利用菜单中的命令或工具栏上的按钮来编辑网页“HTML”方式：可以直接对网页的HTML代码进行编辑操作“预览”方式：可以预览当前的网页，让编制者观看自己当前所作的网页效果在视图栏内有六个功能键8

创建Internet站点的一般方法是：先在本地机中建立站点，即创建和编辑好该站点所必需的一系列按一定要求链接起来的网页文档及相关文件，再发布到指定的Web服务器，形成真正的站点1.创建新站点

主要是用站点模板和站点向导来创建站点站点模板是由一组事先经过格式化的空白网页组成的，相当于一个站点的骨架，通过它可以容易地搭起整个站点的框架

9.2.2创建、打开和删除站点创建Internet站点的一般方法是：先在9

在“我的文档”(或“MyDocuments”)文件夹下建立个人站点“Myweb”

(1)在“文件”菜单中选择“新建”，再选择“站点”，系统弹出“新建”对话框

(2)在“站点”列表中，选择用来创建新站点的模板或向导。本例要求创建个人站点，则选择“个人站点”模板(3)在“指定新站点的位置”框中，键入或选择新站点的位置及名称。本例采用“C:\MyDocuments\Myweb”例9.1

建立个人站点在“我的文档”(或“MyD10

新创建的“个人站点”包括4个基本网页和建立了两个文件夹：_Private和ImagesWeb站点的实质是计算机硬盘上的一个文件夹新建的“个人站点”文件夹列表

“文件夹列表“按钮新建的“个人站点”“文件夹列表“按钮11

2.关闭站点3.打开站点4.删除站点删除站点时，系统会将该站点内全部内容(包括网页、图片等)删除掉

2.关闭站点12

9.2.3普通网页的制作和测试

1.新建网页

选择“文件”菜单中的“新建”，再选择“网页”命令，或单击“常用”工具栏上的“新建网页”按钮，此时在网页编辑区中即可看到新建的空白网页

.HTM或.HTML

与Word编辑文档的操作方法类似

2.打开网页3.保存网页4.关闭网页5.测试网页

“预览”选择“文件”菜单中的“在浏览器中预览”使用IE浏览器来打开指定的网页文档9.2.3普通网页的制作和测试113例10.2编制新网页“江南好”，并把网页加入到站点的导航系统中新建网页把该网页加入导航系统中例10.2编制新网页“江南好”，并把网页加入到站点14

9.3创建超链接

超链接是Web的灵魂

9.3.1

三种超链接

绝对链接（WWW超链接）相对链接（站点内的超链接）书签式超链接（网页内的超链接）

选择“插入”菜单中的“超链接”命令，系统弹出“创建超链接”对话框

建立“书签式超链接”的方法9.3创建超链接超链接是Web的15

整幅图片超链接/“热点”超链接将一幅图片分为几个区域，为每个区域单独建立各自的超链接

“热点”按钮图片热点图片热点9.3.2图片超链接整幅图片超链接/“热点”超链接“热点16

一组特定格式的超链接，可实现站点中各个网页之间切换观看

9.3.3

导航栏导航栏一组特定格式的超链接，可实现站点中各个网17

9.4

插入对象和设置特殊效果

9.4.1插入图片、横幅及声音

1.插入图片

选择“插入”菜单中的“图片”命令

插入活动图片9.4插入对象和设置特殊效果9.4.118

2.横幅

横幅是一种快速为网页添加标题的方法选择“插入”菜单中的“网页横幅”命令

3.设置声音

设置声音的两种方法：背景声音/“插件”

插入横幅及声音2.横幅插入横幅及声音19

1.插入字幕

在网页中设置移动字幕，可以使某段文字在网页上循环作水平移动2.悬停按钮

悬停按钮是个动感按钮，当访问者将鼠标指向该按钮时，按钮就会改变颜色或形状3.横幅广告管理器

在网页的同一地方轮流显示不同的图片，可以在有限的网页页面中提供尽可能多的信息4.站点计数器站点计数器通常添加在主页中，用于统计和显示站点被访问的次数9.4.2插入Web组件1.插入字幕9.4.2插入Web组件20

1.动态HTML效果设置动态HTML效果后，当打开网页、进行单击、双击或鼠标悬停等操作时，网页内指定的文本、图像、按钮、字幕、链接等对象能够实现某种动画效果，如飞出、缩放等

2.网页过渡网页过渡是指进入或离开网页时的特殊效果

例10.2

在网页“江南好”中插入滚动字幕、超链接及动态HTML效果9.4.3动态效果及网页过渡1.动态HTML效果9.4.3动态效果及21

9.5

使用主题每一个主题中都有一套设计好的背景图案、项目符号、横幅、超链接和导航栏等使用主题可以快速地建立一个美观的网页，并使网页具有统一的风格

9.5.1对站点或网页应用主题

9.5.2更改主题的颜色和图形9.5使用主题每一个主题22

9.6

使用表单

表单是网页中收集信息、与访问者进行交互的主要元素类似Windows对话框“网上报名”、“网上选课”等都是表单的具体应用

单选按钮文本框9.6使用表单表单是网页中收集23

先插入一个表单框再添加文本和插入所需的表单元素

文本框（单行文本框）文本区（滚动文本框）选项按钮（单选按钮）复选框下拉框按钮

“提交”按钮和“重置”按钮

9.6.1创建表单

先插入一个表单框9.6.1创建表单24例9.4插入一个“留言簿”多行文本框

在“江南好”网页的末尾处插入一个“留言簿”从“插入”菜单中选择“表单”，再选“表单”，在当前位置上会出现一个表单框

再次选择“插入”菜单中的“表单”，再选“滚动文本框”，则在插入点处插入一个多行文本框在“滚动文本框属性”对话框中设置在表单框内的文本框的左侧,键入文字“留言簿”例9.4插入一个“留言簿”多行文本框25

269.6.2处理表单结果

发送到文件电子邮件发送结果保存在现有的数据库发送到其他对象9.6.2处理表单结果发送到文件27第九章网页制作第九章网页制作28第九章网页制作

Web是Internet网上最受欢迎的一种信息服务系统主要由两部分组成：一是服务器端即信息的提供者，也称Web站点；二是客户端即信息的接收者。客户端通过浏览器来访问Web站点。Web信息是以网页的方式来组织的本章主要内容网页和站点的基本操作创建超链接插入对象和设置特殊效果使用主题、表单和框架发布站点建立Web服务器

HTML及脚本语言简介第九章网页制作Web是Inter299.1基本概念

1.站点与网页

Web（WWW）由形形式式的Web站点组成Web站点由一系列精心策划和组织的网页组成

网页文件2如Photo.htm站点视频素材图片素材网页文件1如Interest.htm主页文件Index.htm……声音素材9.1基本概念1.站点与网页网页文件2站点视频30

主页网页网页网页网页网页网页超链接主页网页网页网页网页网页网页312.Web特点

超文本、图形界面、与平台无关，分布式、交互、动态3.HTTP协议实现Web服务器与客户机之间数据交换

提供一个快速灵活的系统来发送超文本信息4.HTML语言

超文本语言（标记性语言）用来编制网页文档(也称HTML文档)。并不需要经过编译，只需要通过浏览器来打开就可以看到结果采用了标记方式，描述了每个在网页上的组件，例如文本段落、文本格式、图像、超链接等2.Web特点32

通过超文本链接能方便地进行各种信息之间切换

HTML版本

欧洲粒子物理实验室(CERN)首次提出来的HTML2.0→HTML3.0→HTML3.2→HTML4.0

DHTML（动态HTML）

动态HTML能够使网页下载到浏览器以后仍然能够随时变换包含多种技术，如JavaScript,VBScript,DocumentObjectModel(DOM,文档对象模型),Layers和CSS等通过超文本链接能方便地进行各种信息之间切换33

9

.2网页和网站的基本操作

借助于FrontPage，用户无需学会编程，就能快速地设计编制出具有专业水平的网页

9.2.1FrontPage的窗口

视图栏网页编辑区编辑控制按钮9.2网页和网站的基本操作34

在视图栏内有六个功能键

网页、文件夹、报表、导航、超链接、任务

在“网页”视图方式下，设有“普通”、“HTML”、“浏览”三个控制按钮

“普通”方式：可以利用菜单中的命令或工具栏上的按钮来编辑网页“HTML”方式：可以直接对网页的HTML代码进行编辑操作“预览”方式：可以预览当前的网页，让编制者观看自己当前所作的网页效果在视图栏内有六个功能键35

创建Internet站点的一般方法是：先在本地机中建立站点，即创建和编辑好该站点所必需的一系列按一定要求链接起来的网页文档及相关文件，再发布到指定的Web服务器，形成真正的站点1.创建新站点

主要是用站点模板和站点向导来创建站点站点模板是由一组事先经过格式化的空白网页组成的，相当于一个站点的骨架，通过它可以容易地搭起整个站点的框架

9.2.2创建、打开和删除站点创建Internet站点的一般方法是：先在36

在“我的文档”(或“MyDocuments”)文件夹下建立个人站点“Myweb”

(1)在“文件”菜单中选择“新建”，再选择“站点”，系统弹出“新建”对话框

(2)在“站点”列表中，选择用来创建新站点的模板或向导。本例要求创建个人站点，则选择“个人站点”模板(3)在“指定新站点的位置”框中，键入或选择新站点的位置及名称。本例采用“C:\MyDocuments\Myweb”例9.1

建立个人站点在“我的文档”(或“MyD37

新创建的“个人站点”包括4个基本网页和建立了两个文件夹：_Private和ImagesWeb站点的实质是计算机硬盘上的一个文件夹新建的“个人站点”文件夹列表

“文件夹列表“按钮新建的“个人站点”“文件夹列表“按钮38

2.关闭站点3.打开站点4.删除站点删除站点时，系统会将该站点内全部内容(包括网页、图片等)删除掉

2.关闭站点39

9.2.3普通网页的制作和测试

1.新建网页

选择“文件”菜单中的“新建”，再选择“网页”命令，或单击“常用”工具栏上的“新建网页”按钮，此时在网页编辑区中即可看到新建的空白网页

.HTM或.HTML

与Word编辑文档的操作方法类似

2.打开网页3.保存网页4.关闭网页5.测试网页

“预览”选择“文件”菜单中的“在浏览器中预览”使用IE浏览器来打开指定的网页文档9.2.3普通网页的制作和测试140例10.2编制新网页“江南好”，并把网页加入到站点的导航系统中新建网页把该网页加入导航系统中例10.2编制新网页“江南好”，并把网页加入到站点41

9.3创建超链接

超链接是Web的灵魂

9.3.1

三种超链接

绝对链接（WWW超链接）相对链接（站点内的超链接）书签式超链接（网页内的超链接）

选择“插入”菜单中的“超链接”命令，系统弹出“创建超链接”对话框

建立“书签式超链接”的方法9.3创建超链接超链接是Web的42

整幅图片超链接/“热点”超链接将一幅图片分为几个区域，为每个区域单独建立各自的超链接

“热点”按钮图片热点图片热点9.3.2图片超链接整幅图片超链接/“热点”超链接“热点43

一组特定格式的超链接，可实现站点中各个网页之间切换观看

9.3.3

导航栏导航栏一组特定格式的超链接，可实现站点中各个网44

9.4

插入对象和设置特殊效果

9.4.1插入图片、横幅及声音

1.插入图片

选择“插入”菜单中的“图片”命令

插入活动图片9.4插入对象和设置特殊效果9.4.145

2.横幅

横幅是一种快速为网页添加标题的方法选择“插入”菜单中的“网页横幅”命令

3.设置声音

设置声音的两种方法：背景声音/“插件”

插入横幅及声音2.横幅插入横幅及声音46

1.插入字幕

在网页中设置移动字幕，可以使某段文字在网页上循环作水平移动2.悬停按钮

悬停按钮是个动感按钮，当访问者将鼠标指向该按钮时，按钮就会改变颜色或形状3.横幅广告管理器

在网页的同一地方轮流显示不同的图片，可以在有限的网页页面中提供尽可能多的信息4.站点计数器站点计数器通常添加在主页中，用于统计和显示站点被访问的次数9.4.2插入Web组件1.插入字幕9.4.2插入Web组件47

1.动态HTML效果设置动态HTML效果后，当打开网页、进行单击、双击或鼠标悬停等操作时，网页内指定的文本、图像、按钮、字幕、链接等对象能够实现某种动画效果，如飞出、缩放等

2.网页过渡网页过渡是指进入或离开网页时的特殊效果

例10.2

在网页“江南好”中插入滚动字幕、超链接及动态HTML效果9.4.3动态效果及网页过渡1.动态HTML效果9.4.3动态效果及48

9.5

使用主题每一个主题中都有一套