第九章网页制作

1、第九章第九章 网页制作网页制作本章内容本章内容9.1 HTML9.1 HTML概述概述9.2 FrontPage 20039.2 FrontPage 2003及应用及应用9.1 HTML概述概述 HTML简介简介 HTML文件的三个基本特征文件的三个基本特征 HTML文件结构文件结构HTML简介简介 HTMLHTML即超文本标记语言，简单易学。用即超文本标记语言，简单易学。用HTMLHTML语言语言编写的网页实际上是一种文本文件，它以编写的网页实际上是一种文本文件，它以.htm.htm或或.html.html为扩展名，我们可以使用任何文本处理软为扩展名，我们可以使用任何文本处理软件（例如：记事

2、本、写字板）编写。件（例如：记事本、写字板）编写。HTML简介简介浏览器浏览器HTML文件文件HTML文件的三个基本特征文件的三个基本特征 文件扩展名为文件扩展名为htm或或html HTML文件由标记命令和文本组成文件由标记命令和文本组成 文本内容文本内容/ 标记名写在标记名写在“”内。多数内。多数HTMLHTML标记同时具标记同时具有起始和结束标记，成对出现，但也有些有起始和结束标记，成对出现，但也有些HTMLHTML标标记没有结束标记。记没有结束标记。HTMLHTML标记不区分大小写。标记不区分大小写。 文件中含有热点文本文件中含有热点文本HTML文件结构文件结构版本信息版本信息文件开始

3、文件开始头部头部 (HTML文件标题文件标题)主题主题文件结束文件结束思考：思考：中的内容显示中的内容显示在浏览器中的什么位置？在浏览器中的什么位置？浏览器的标题栏浏览器的标题栏思考：思考：中的内容中的内容显示在浏览器中的什么显示在浏览器中的什么位置？位置？ 浏览器的工作区浏览器的工作区9.2 FrontPage2003 及应用及应用 FrontPageFrontPage基础基础 FontPageFontPage视图视图 网页制作网页制作 网页布局网页布局 创建表单页面创建表单页面 网页发布网页发布FrontPageFrontPage基础基础 自定义浏览器分辨率预览检查自定义浏览器分辨率预览检

4、查 描摹图像描摹图像 层功能层功能 行为的应用行为的应用 使用网页重定向使用网页重定向 检查页面错误检查页面错误 插入交互式按钮插入交互式按钮 优化优化HTMLHTML代码代码FrontPage 2003FrontPage 2003中的视图中的视图 FrontPage 2003FrontPage 2003提供了以下几种视图以方便用户提供了以下几种视图以方便用户对站点的管理，用户可以在不同的视图中进行相对站点的管理，用户可以在不同的视图中进行相应的操作。应的操作。FrontPageFrontPage提供提供了了7 7种视图模式种视图模式FrontPage 2003FrontPage 2003中的

5、视图中的视图网页视图网页视图 ：创建、编辑、预览网页：创建、编辑、预览网页 文件夹视图：创建、移动和删除文件和文件夹文件夹视图：创建、移动和删除文件和文件夹 报表视图报表视图 ：了解站点的文件内容、更新链接情况、：了解站点的文件内容、更新链接情况、 组建错误、所有文件列表及变化情况等组建错误、所有文件列表及变化情况等 导航视图导航视图 ：以层次结构图形式显示站点的链接结构：以层次结构图形式显示站点的链接结构 超链接视图：表示了各个网页间的链接关系超链接视图：表示了各个网页间的链接关系 任务视图任务视图 ：创建和管理任务：创建和管理任务 远程网站视图：发布网站远程网站视图：发布网站网网 页页 制

6、制 作作 创建站点创建站点 网页编辑网页编辑 插入对象插入对象 创建超链接创建超链接创建站点创建站点 使用使用FrontPage 2003FrontPage 2003的模板和向导，用户可以轻的模板和向导，用户可以轻松地创建出各种用途和风格的站点。松地创建出各种用途和风格的站点。 新建站点时，可以根据自己的需求选择不同的模新建站点时，可以根据自己的需求选择不同的模板和向导。对于不同的模板和向导，其新建站点板和向导。对于不同的模板和向导，其新建站点的步骤略有不同。的步骤略有不同。文件文件新建新建创建站点创建站点 该站点只有一个空白网页该站点只有一个空白网页index.htmindex.htm（主页

7、）和用（主页）和用于存储图片的文件夹于存储图片的文件夹imagesimages，你可以打开，你可以打开index.htmindex.htm进行编辑，也可以进一步根据网站规划进行编辑，也可以进一步根据网站规划创建文件夹和新建其他网页。创建文件夹和新建其他网页。放置不能被站点访问者查看放置不能被站点访问者查看的用户文件的用户文件放置站点中使用的图片文件放置站点中使用的图片文件站点主页站点主页网页编辑网页编辑 新建网页新建网页 打开网页打开网页 设置文字格式设置文字格式 设置段落格式设置段落格式 设置网页属性设置网页属性 预览网页预览网页新建网页新建网页 根据根据“网页模板网页模板”创建网页，可以按

8、下面的步骤：创建网页，可以按下面的步骤： 单击单击“文件文件”菜单的菜单的“新建新建”命令，选择命令，选择“新新建网页建网页”中的中的“其他网页模板其他网页模板”。 在弹出的对话框中选择所需的网页模板。在弹出的对话框中选择所需的网页模板。 单击单击“确定确定” ，系统将新建一个基于所选模板，系统将新建一个基于所选模板的网页。的网页。打开网页打开网页 打开网页的方法有多种，常用的有以下几种：打开网页的方法有多种，常用的有以下几种： 使用使用“文件文件”菜单的菜单的“打开打开”命令，或命令，或“常用常用”工具栏的工具栏的“打开打开”按钮，在弹出的按钮，在弹出的“打开文件打开文件”对话框中选择相应的

9、网页；对话框中选择相应的网页； 如需要打开的文件已在打开的网站中，双击该如需要打开的文件已在打开的网站中，双击该网页图标即可将其打开。网页图标即可将其打开。设置文字格式设置文字格式 设置文字格式的一般操作步骤是：选中文字，单设置文字格式的一般操作步骤是：选中文字，单击击“格式格式”菜单的菜单的“字体字体”命令，在命令，在 “字体字体”对对话框中设置字体的各种属性，也可以使用话框中设置字体的各种属性，也可以使用“格式格式”工具栏中相应的命令按钮。工具栏中相应的命令按钮。格式格式字体字体设置段落格式设置段落格式 文字段落的格式编排对于一个网页的外观是至关文字段落的格式编排对于一个网页的外观是至关重

10、要的。重要的。FrontPage 2003FrontPage 2003通过按通过按EnterEnter键划分段落。键划分段落。如果只是需要换行，按如果只是需要换行，按Shift+EnterShift+Enter键即可。按键即可。按EnterEnter键在键在HTMLHTML代码中插入的是代码中插入的是标记，而按标记，而按Shift+EnterShift+Enter键则插入的是键则插入的是标记。标记。设置段落格式设置段落格式 段落格式主要包括对齐方式、缩进和段落间距等。段落格式主要包括对齐方式、缩进和段落间距等。设置段落格式的一般方法如下：设置段落格式的一般方法如下： 将插入点移动到要设置格式的

11、段落中，或是选将插入点移动到要设置格式的段落中，或是选中该段落，单击中该段落，单击“格式格式”菜单的菜单的“段落段落”命令，命令，在弹出的在弹出的“段落段落”对话框中进行各种段落格式对话框中进行各种段落格式属性的设置。属性的设置。设置网页属性设置网页属性 网页属性包括网页的标题、格式、页边距等。要网页属性包括网页的标题、格式、页边距等。要设置网页属性，用户可以使用设置网页属性，用户可以使用“文件文件”菜单的菜单的“属性属性”命令，或者在网页的任意地方单击鼠标命令，或者在网页的任意地方单击鼠标右键，在弹出的菜单中选择右键，在弹出的菜单中选择“网页属性网页属性”命令，命令，FrontPage 20

12、03FrontPage 2003将显示将显示“网页属性网页属性”对话框。对话框。预览网页预览网页方法方法1 1：使用预览视图：使用预览视图方法方法2 2：文件菜单：文件菜单在浏览器中预览在浏览器中预览启动浏览器预览网页启动浏览器预览网页(建建议使用此种方法议使用此种方法)缺点：有时无法正常预缺点：有时无法正常预览网页效果！览网页效果！插入对象插入对象 插入水平线插入水平线 插入图片插入图片 插入字幕插入字幕 插入交互式按钮插入交互式按钮 插入水平线插入水平线 水平线将网页分割成几个部分，使得网页更具条水平线将网页分割成几个部分，使得网页更具条理性。具体操作步骤如下：理性。具体操作步骤如下： 在

13、准备插入水平线的位置设置插入点；在准备插入水平线的位置设置插入点； 单击单击“插入插入”菜单的菜单的“水平线水平线”命令，插入水命令，插入水平线。平线。 要修改水平线的外观，可以双击水平线，打开要修改水平线的外观，可以双击水平线，打开“水平线属性水平线属性”对话框。对话框。插入图片插入图片 在在WWWWWW上常用的图像文件格式是上常用的图像文件格式是JPEGJPEG和和GIFGIF，适合，适合于网络传输。于网络传输。 GIFGIF采用无损压缩方式，支持动画、透明度、图采用无损压缩方式，支持动画、透明度、图形渐进，但图像包含的颜色不能超过形渐进，但图像包含的颜色不能超过256256种。种。 JP

14、EGJPEG格式它采用有损压缩方式，支持真彩色格式它采用有损压缩方式，支持真彩色（2424位色），并且在压缩大的图像方面已被证位色），并且在压缩大的图像方面已被证明很有效。明很有效。插入图片插入图片 插入图片的步骤：插入图片的步骤： 移动光标至插入图像的位置；移动光标至插入图像的位置； 单击单击“插入插入”菜单的菜单的“图片图片”命令，在子菜单命令，在子菜单中选择中选择“来自文件来自文件”，弹出，弹出“图片图片”对话框；对话框； 利用利用“图片图片”对话框选取需要插入的图片文件，对话框选取需要插入的图片文件，单击单击“插入插入”按钮，即可将图片插入网页中。按钮，即可将图片插入网页中。插入图片插

15、入图片 设置图片属性设置图片属性 在在“图片属性图片属性”对话框的对话框的“外观外观”选项卡中，选项卡中，可以设置图片的环绕方式、布局、大小等。可以设置图片的环绕方式、布局、大小等。插入字幕插入字幕 字幕设置可以将网页中的文字做成移动的动态效字幕设置可以将网页中的文字做成移动的动态效果，使网页更加形象生动。具体操作步骤如下：果，使网页更加形象生动。具体操作步骤如下： 将插入点设置在要插入字幕的位置，单击将插入点设置在要插入字幕的位置，单击“插插入入”菜单的菜单的“WebWeb组件组件”命令，在弹出的对话框命令，在弹出的对话框的的“组件类型组件类型”列表框中选择列表框中选择“动态效果动态效果”，

16、在列表中选择在列表中选择“字幕字幕”，单击，单击“完成完成” 。插入交互式按钮插入交互式按钮 交互式按钮是一个动态按钮，当用户将鼠标指向交互式按钮是一个动态按钮，当用户将鼠标指向交互式按钮时，交互式按钮会改变颜色或形状。交互式按钮时，交互式按钮会改变颜色或形状。 将插入点设置在要插入交互式按钮的位置，单将插入点设置在要插入交互式按钮的位置，单击击“插入插入”菜单的菜单的“WebWeb组件组件”命令，在弹出对命令，在弹出对话框的话框的“组件类型组件类型”列表框中选择列表框中选择“动态效动态效果果”，在，在“选择一种效果选择一种效果”列表中选择列表中选择“交互交互式按钮式按钮”，单击，单击“完成完

17、成” 。创建超链接创建超链接 在网页中超链接一般有两种表现方式，即以文本在网页中超链接一般有两种表现方式，即以文本方式标注的超链接和以图片方式标注的超链接。方式标注的超链接和以图片方式标注的超链接。 选定要定义超链接的文本或图片，从选定要定义超链接的文本或图片，从“插入插入”菜单中选择菜单中选择“超链接超链接”命令；命令； 在在“插入超链接插入超链接”对话框中选择要链接的目标对话框中选择要链接的目标网页，单击网页，单击“确定确定”按钮。按钮。 插入超链接后，文本为蓝色带下划线。插入超链接后，文本为蓝色带下划线。使用书签使用书签 书签是网页中被标记的位置或被标记的文本。单书签是网页中被标记的位置

18、或被标记的文本。单击书签超链接，将直接跳转到该书签所在的位置。击书签超链接，将直接跳转到该书签所在的位置。书签能够更严格地控制用户到达网页内的某个具书签能够更严格地控制用户到达网页内的某个具体位置。体位置。Step1在要跳转到的位置在要跳转到的位置插入书签插入书签创建到书签的超链接创建到书签的超链接Step2网页布局网页布局 网页的布局设计，是将文字、图片等网页元素，网页的布局设计，是将文字、图片等网页元素，根据特定的内容和主题，在网页所限定的范围中根据特定的内容和主题，在网页所限定的范围中进行视觉的关联与配置，从而将设计意图以视觉进行视觉的关联与配置，从而将设计意图以视觉形式表现出来。网页的

19、布局一般使用表格或框架形式表现出来。网页的布局一般使用表格或框架来实现。来实现。创建和使用表格创建和使用表格 表格由单元格构成的行和列组成，单元格中可以表格由单元格构成的行和列组成，单元格中可以插入文本、图片以及其他对象。利用表格可以有插入文本、图片以及其他对象。利用表格可以有条理地排列数据或组织网页布局。表格的行、列条理地排列数据或组织网页布局。表格的行、列和单元格都可以进行复制、粘贴，在表格中还可和单元格都可以进行复制、粘贴，在表格中还可以插入表格，一层层的表格嵌套使设计更加方便。以插入表格，一层层的表格嵌套使设计更加方便。创建和使用表格创建和使用表格创创建建表表格格方方法法常用工具栏常用

20、工具栏表格菜单表格菜单手动绘制手动绘制设置表格属性设置表格属性调整表格调整表格插入行或列插入行或列删除行、列和单元格删除行、列和单元格合并单元格合并单元格拆分单元格拆分单元格设置单元格属性设置单元格属性创建和使用框架创建和使用框架 框架的使用是进行网页布局设计的一种重要手段。框架的使用是进行网页布局设计的一种重要手段。框架将浏览器窗口划分为几个区域，每个框架中框架将浏览器窗口划分为几个区域，每个框架中都可以显示一个独立的网页。浏览器窗口中显示都可以显示一个独立的网页。浏览器窗口中显示的网页实际是这些框架的集合，因此被称为框架的网页实际是这些框架的集合，因此被称为框架网页。网页。创建框架网页创建

21、框架网页文件文件新建新建每个框架中，单击每个框架中，单击“设置初始网页设置初始网页”按钮可以建立与已经存在网页的超链接，从而在按钮可以建立与已经存在网页的超链接，从而在此框架中显示该网页；单击此框架中显示该网页；单击“新建网页新建网页”按钮可以建立显示在该框架中的新网页。按钮可以建立显示在该框架中的新网页。 保存框架网页保存框架网页 保存框架网页需要保存框架和各个框架中的网页。保存框架网页需要保存框架和各个框架中的网页。 框架网页并不包含内容，只记录了该框架网页包框架网页并不包含内容，只记录了该框架网页包含几个框架、拆分方式以及每个框架中显示哪个含几个框架、拆分方式以及每个框架中显示哪个网页。

22、网页。拆分框架拆分框架 框架结构不能满足需要时，可以通过拆分框架制框架结构不能满足需要时，可以通过拆分框架制作出更为复杂的框架网页。具体操作步骤如下：作出更为复杂的框架网页。具体操作步骤如下： 选择要拆分的框架，在选择要拆分的框架，在“框架框架”菜单中选择菜单中选择“拆分框架拆分框架”命令；命令； 根据需要选择根据需要选择“拆分为列拆分为列”或或“拆分成行拆分成行”选选项，单击项，单击“确定确定”完成拆分。完成拆分。删除框架删除框架 可以从框架结构中删除指定的框架。此时系统只是把可以从框架结构中删除指定的框架。此时系统只是把框架从框架网页中删去，而此框架中的网页文件仍然框架从框架网页中删去，而

23、此框架中的网页文件仍然存在。删除了一个框架后，其余框架会加宽以填充删存在。删除了一个框架后，其余框架会加宽以填充删除框架留下的空间。若框架网页只有一个框架，则不除框架留下的空间。若框架网页只有一个框架，则不能删除该框架。删除框架的具体操作方法是：选择要能删除该框架。删除框架的具体操作方法是：选择要删除的框架，在删除的框架，在“框架框架”菜单中选择菜单中选择“删除框架删除框架”命命令。令。设置框架属性设置框架属性 在框架网页中可以设置框架的大小、框架的边距在框架网页中可以设置框架的大小、框架的边距和在框架中是否显示滚动条等属性。具体操作方和在框架中是否显示滚动条等属性。具体操作方法是：选择框架，

24、从法是：选择框架，从“框架框架”菜单中选择菜单中选择“框架框架属性属性”命令，弹出命令，弹出“框架属性框架属性”对话框，设置框对话框，设置框架属性。架属性。创建框架超链接创建框架超链接 创建框架超链接创建框架超链接选择要创建超链接的文字或图片，从选择要创建超链接的文字或图片，从“插入插入”菜单中选择菜单中选择“超链接超链接”命令；命令；在对话框中选择要链接的目标网页，单击在对话框中选择要链接的目标网页，单击“目标框架目标框架”；在在“当前框架网页当前框架网页”区域中单击要用作目标的框架，单击区域中单击要用作目标的框架，单击“确定确定”，返回到，返回到“插入超链接插入超链接”对话框，在对话框底部

25、对话框，在对话框底部标签标签“目标框架目标框架”后显示设置的目标框架名称；后显示设置的目标框架名称；单击单击“确定确定”，完成框架超链接的创建。，完成框架超链接的创建。创建框架超链接创建框架超链接 使用特殊的目标框架使用特殊的目标框架 在指定目标框架时，除了当前框架外，还提供在指定目标框架时，除了当前框架外，还提供了一些特殊的框架来创建不同效果的目标框架。了一些特殊的框架来创建不同效果的目标框架。这些特殊框架位于这些特殊框架位于“目标框架目标框架”对话框的对话框的“公用公用的目标区的目标区”区域中，有以下几种：区域中，有以下几种：创建框架超链接创建框架超链接 相同框架：将链接的网页显示在包含该

26、超链接的相同框架：将链接的网页显示在包含该超链接的同一个框架内。同一个框架内。 整页：将框架展开为整个窗口显示链接网页。整页：将框架展开为整个窗口显示链接网页。 新建窗口：打开另外一个新窗口显示链接网页。新建窗口：打开另外一个新窗口显示链接网页。 父框架：在当前框架的上层框架内显示链接网页。父框架：在当前框架的上层框架内显示链接网页。创建表单页面创建表单页面 表单是表单是Web服务器与客户交互的手段。表单的作服务器与客户交互的手段。表单的作用就是收集用户的输入信息，从而实现网站与用用就是收集用户的输入信息，从而实现网站与用户的交互。户的交互。 表单作用：使表单作用：使Web服务器与客户进行交互。服务器与客户进行交互。 收集浏览者的输入信息，从而实现网站与浏览收集浏览者的输入信息，从而实现网站与浏览者的交互。者的交互。创建表单页面创建表单页面 表单组成表单组成 表单由表单域组成，表单域是客户输入信息的表单由表单域组成，表单域是客户输入信息的区域。常用的表单域有；单行文本框、滚动文区域