第八章网页制作课件

第第 八八 章章 网网 页页 制制 作作 目 录上一页下一页 结 束第八章 网页制作8.1 概述概述8.2 HTML简介简介 8.3 网页制作网页制作 8.4 网页布局网页布局 8.5 创建表单页面创建表单页面 8.6 网页的发布网页的发布 7/14/20241计算机文化基础 目 录上一页下一页 结 束8.1 8.1 概概 述述8.1.1 网站网站8.1.2 服务器与浏览器服务器与浏览器8.1.3 网页网页8.1.4 网页制作工具网页制作工具8.1.5 网页设计的相关计算机语言网页设计的相关计算机语言7/14/20242计算机文化基础 目 录上一页下一页 结 束8.1.1 网站网站 网网站站是是一一组组相相关关网网页页和和有有关关文文件件的的集集合合，一一般般有有一一个个特特殊殊的的网网页页作作为为浏浏览览的的起起始始点点，称称为为主主页页（Homepage），用用来来引引导导用用户户访访问问其其他网页。他网页。网网站站中中的的内内容容通通常常包包括括网网页页和和相相关关的的文文件件，一一般般被被存存储储在在同同一一个个目目录录中中，并并根根据据网网站站栏栏目目或或资资源源类类型型进进行行分分类类，分分别别存存放放在在不不同同的的子子目目录录中中。本本地地网网站站在在制制作作完完成成后后，不不经经过过发发布布是是不不能能被被其其他他浏浏览览者者访访问问的的。发发布布就就是是将将本本地地网网站站的的内内容容传传输输到到连连接接Internet的的Web服服务务器上。网站发布后，即获得一个网站地址。器上。网站发布后，即获得一个网站地址。7/14/20243计算机文化基础 目 录上一页下一页 结 束8.1.2 服务器与浏览器服务器与浏览器 网网站站通通常常位位于于Web服服务务器器上上，Web服服务务器器又又称称WWW服服务务器器、网网站站服服务务器器或或站站点点服服务务器器。从从本本质质上上讲讲，Web服服务务器器就就是是一一个个软软件件系系统统，它它通通过过网网络络接接收收HTTP请请求求，然然后后提提供供HTTP响响应应给给请请求求者者。HTTP响响应应一一般般包包含含一一个个HTML文文件件，但但也也可可以以包包含含文文本本文文件件、图图像像或或其其他他类类型型的的文文件件。要要使使一一台台计计算算机机成成为为一一台台Web服务器，就需要安装专门的服务程序服务器，就需要安装专门的服务程序。要要浏浏览览Web页页面面，必必须须在在本本地地计计算算机机上上安安装装浏浏览览器器软软件件。浏浏览览器器就就是是Web客客户户端端，它它是是一一个个应应用用程程序序，用用于于与与Web服服务务器器建建立连接，并与之进行通信。立连接，并与之进行通信。浏浏览览器器和和服服务务器器之之间间通通过过超超文文本本传传送送协协议议（HyperText Transfer Protocol，HTTP）进行通信。）进行通信。7/14/20244计算机文化基础 目 录上一页下一页 结 束8.1.3 网页网页 网网页页一一般般又又称称为为HTML文文件件，是是一一种种可可以以在在WWW上上传传输输，能能被被浏浏览览器器认认识识和和翻翻译译成成页页面面并并显显示示出出来来的的文文件件。通通常常用用户户看看到到的的网网页页大大多多是是以以.htm和和.html为为扩扩展展名名的的文件。文件。7/14/20245计算机文化基础 目 录上一页下一页 结 束8.1.3 网页网页1.网页内容网页内容 一一般般来来说说，网网页页主主要要由由文文字字、图图片片、动动画画、超超链接和特殊组件等元素构成。链接和特殊组件等元素构成。2.静态网页和动态网页静态网页和动态网页 根根据据网网页页的的生生成成方方式式，大大致致可可以以分分为为静静态态网网页页和动态网页两种。和动态网页两种。7/14/20246计算机文化基础 目 录上一页下一页 结 束8.1.4 网页制作工具网页制作工具1.网页制作三剑客网页制作三剑客Dreamweaver、Flash、Fireworks被被称称为为网网页页制制作作“三三剑剑客客”。（1）Dreamweaver是是美美国国著著名名的的软软件件开开发发商商Macromedia公公司司推推出出的的一一个个所所见见即即所所得得的的可可视视化化网网站站开开发发工工具具，该该软软件件同同时时适用于初学者和专业网页设计师。适用于初学者和专业网页设计师。（2）Fireworks也也是是由由Macromedia公公司司开开发发的的一一种种工工具具，它它以以处理网页图片为特长，并可以轻松创造处理网页图片为特长，并可以轻松创造GIF动画。动画。（3）Flash是是当当今今Internet最最流流行行的的动动画画作作品品的的制制作作工工具具，并并成成为事实上的交互式矢量动画标准。为事实上的交互式矢量动画标准。7/14/20247计算机文化基础 目 录上一页下一页 结 束8.1.4 网页制作工具网页制作工具2.Microsoft FrontPage 2003 FrontPage 2003是是微微软软公公司司推推出出的的Microsoft Office 2003家家族族的的成成员员之之一一，与与Office的的其其他他组组件件高高度度融融合合，界界面面友友好好，功功能能强强大大，易易学学易易用用。FrontPage 2003的的主主要要功功能能是是设设计计、制制作作、管管理理网网页或站点。页或站点。7/14/20248计算机文化基础 目 录上一页下一页 结 束8.1.5 网页设计的相关计算机语言网页设计的相关计算机语言1.HTML HTML是是Hypertext Markup Language的的缩缩写写，是是WWW技技术术的的基基础础，它它使使用用一一些些约约定定的的标标记记（Tag）对对文文本本进进行行标标注注，定定义义网网页页的的数数据据格格式式，描述描述Web页中的信息，控制文本的显示。页中的信息，控制文本的显示。我我们们把把用用HTML语语言言编编写写的的文文件件称称为为HTML文文件件，把把HTML文文档档称称为为网网页页（Web Page）。用用HTML语语言言编编写写的的网网页页实实际际上上是是一一种种文文本本文文件件，它它以以.htm或或.html为扩展名。为扩展名。7/14/20249计算机文化基础 目 录上一页下一页 结 束8.1.5 网页设计的相关计算机语言网页设计的相关计算机语言2.XML XML是是Extensible Markup Language的缩写，的缩写，中文名为可扩展标记语言。其主要用途是在中文名为可扩展标记语言。其主要用途是在Internet上传递或处理数据。上传递或处理数据。XML与与HTML不是并不是并列的概念，它可以说是列的概念，它可以说是HTML的补丁，以弥补的补丁，以弥补HTML的不足。比如，在的不足。比如，在HTML中不允许用户自中不允许用户自定义控制标识符，而在定义控制标识符，而在XML中允许用户这样做。中允许用户这样做。XML文件的扩展名为文件的扩展名为.xml。7/14/202410计算机文化基础 目 录上一页下一页 结 束8.1.5 网页设计的相关计算机语言网页设计的相关计算机语言3.CSS CSS是是Cascading Style Sheets的的缩缩写写，中中文文名名为为层层叠叠样样式式表表，主主要要用用来来对对网网页页数数据据进进行行编编排排、格格式式化化、显显示示、特特效效等等。传传统统的的HTML不不能能对对网网页页数数据据进进行行随随心心所所欲欲的的格格式式化化，而而CSS语语言言却却满满足足了了这这种种要要求求，它它对对网网页页的的特特殊殊显显示示、特特殊殊效效果果提提供了很大的帮助。目前，大多数网页都用了供了很大的帮助。目前，大多数网页都用了CSS。7/14/202411计算机文化基础 目 录上一页下一页 结 束8.1.5 网页设计的相关计算机语言网页设计的相关计算机语言4.DHTML DHTML是是动动态态的的HTML，这这种种技技术术要要求求网网页页具具备备动动态态功功能能，如如动动态态交交互互、动动态态更更新新等等。事事实实上上，这这是是要要求求我我们们应应该该掌掌握握Web中中所所包包含含的的对对象象、对对象象集集，以以及及对对象象的的属属性性、方方法法、事事件件等等，然然后后用用程程序序处处理理这这些些对对象象相相关关的的属属性性、方方法法，让让事事件件去去完完成成一一定定的的处处理理程程序序，以以达达到到网网页页的的动动态态效果。效果。7/14/202412计算机文化基础 目 录上一页下一页 结 束8.1.5 网页设计的相关计算机语言网页设计的相关计算机语言5.脚本语言脚本语言 脚脚本本（Script）语语言言是是嵌嵌入入到到HTML代代码码中中的的程程序序，根根据据运运行行的的位位置置不不同同把把它它分分为为客客户户端端脚脚本本和和服服务务器器端端脚脚本本。客客户户端端脚脚本本是是运运行行在在客客户户端端的的程程序序，服服务务器器端端脚脚本本是是运运行行在在服服务务器器端端的的程程序序。这这里里所所说说的的客客户户端端指指的的是是浏浏览览器器，服服务务器器端端指指的的是是Web服服务务器。器。目目前前较较为为流流行行的的脚脚本本语语言言有有JavaScript和和VBScript。7/14/202413计算机文化基础 目 录上一页下一页 结 束8.2 HTML简介简介 HTML文文件件是是一一种种纯纯文文本本文文件件，我我们们可可以以使使用用任任何何文文本本处处理理软软件件（如如记记事事本本）来来创创建建或或处处理理HTML文件。文件。8.2.1 HTML语言概述语言概述 8.2.2 常用的常用的HTML标记标记7/14/202414计算机文化基础 目 录上一页下一页 结 束8.2.1 HTML语言概述HTML语语 言言 是是 由由 世世 界界 性性 的的 标标 准准 化化 组组 织织W3C（World Wide Web Consortium）制制定定的的，通通过过浏浏览览http:/www.w3.org可可以以了了解解到到HTML标标准的最新动态。准的最新动态。下面介绍下面介绍HTML文件的基本构成和层次结构。文件的基本构成和层次结构。7/14/202415计算机文化基础 目 录上一页下一页 结 束1.HTML文件标记文件标记Internet中中的的每每一一个个HTML文文件件都都包包括括文文本本内内容容和和HTML标标记记两两部部分分。其其中中，HTML标标记记负负责责控控制制文文本本显显示示的的外外观观和和版版式式，并并为为浏浏览览器器指指定定各各种种链链接接的的图图像像、声声音音和和其其他他对对象象的的位位置置。多多数数HTML标记的书写格式如下：标记的书写格式如下：文本内容文本内容标标记记名名写写在在“”内内。多多数数HTML标标记记同同时时具具有有起起始始和和结结束束标标记记，并并且且成成对对出出现现，但但也也有有些些HTML标标记记没没有有结结束束标标记记。另另外外，HTML标标记记不不区分大小写。区分大小写。8.2.1 HTML语言概述语言概述7/14/202416计算机文化基础 目 录上一页下一页 结 束 某某些些HTML标标记记还还具具有有一一些些属属性性，这这些些属属性性指指定定对对象象的的特特性性，如如背背景景颜颜色色、文文本本字字体体及及大大小小、对对齐齐方方式等。属性一般放在式等。属性一般放在“起始标记起始标记”中，格式如下：中，格式如下：文文本本内内容容 其其中中标标记记名名和和属属性性之之间间用用空空格格分分隔隔。如如果果标标记记有有多种属性，属性之间也要用空格分隔。多种属性，属性之间也要用空格分隔。8.2.1 HTML语言概述语言概述7/14/202417计算机文化基础 目 录上一页下一页 结 束2.HTML网页的结构网页的结构 现现在在我我们们先先看看一一个个简简单单的的HTML文文件件，从从中中体体会会用用HTML语言编写网页时的层次结构。语言编写网页时的层次结构。【例例8-1】用用HTML语言编写一个简单的网页。语言编写一个简单的网页。我的第一个我的第一个Web页页欢迎进入欢迎进入HTML世界！世界！这这里里我我们们首首先先介介绍绍HTML语语言言的的基基本本知知识识和和语语法法。然然后后，讲讲授授如如何何使使用用HTML语语言言编编写写您您的的Web页页面面。8.2.1 HTML语言概述语言概述7/14/202418计算机文化基础 目 录上一页下一页 结 束 将将上上述述代代码码用用文文本本编编辑辑器器编编辑辑并并保保存存为为一一个个扩扩展展名名为为.htm的的文文件件，双双击击该该文文件件图图标标，在在浏浏览览器器中看到如下图所示的结果。中看到如下图所示的结果。图9-18.2.1 HTML语言概述语言概述7/14/202419计算机文化基础 目 录上一页下一页 结 束 从从上上例例可可以以看看出出，一一般般HTML文文件件都都是是以以开开头头，以以结结束束。其其文文件件结结构构由由以以下下两部分组成：两部分组成：1）头部（）头部（Head）HTML文文件件的的头头部部由由和和标标记记定定义义。通通常常情情况况下下，文文件件的的标标题题、语语言言字字符符集集信信息息等等 都都 放放 在在 头头 部部 信信 息息 中中。最最 常常 用用 到到 的的 标标 记记 是是，它它用用于于定定义义网网页页文文件件的的标标题题，当当该该网网页页文文件件被被打打开开后后，网网页页文文件件的的标标题题将将出出现现在浏览器的标题栏中。在浏览器的标题栏中。8.2.1 HTML语言概述语言概述7/14/202420计算机文化基础 目 录上一页下一页 结 束2）正文主体（）正文主体（Body）正正文文主主体体是是HTML文文件件的的核核心心内内容容，由由和和标标记记定定义义。标标记记具具有有一一些些常常用用的的属属性性，格式如下：格式如下：其其中中，bgcolor为为背背景景颜颜色色，color为为文文本本颜颜色色。n为为六六位十六进制数。位十六进制数。如果网页使用背景图像，格式如下：如果网页使用背景图像，格式如下：HTML对对格格式式的的要要求求并并不不严严格格，当当HTML文文件件被被浏浏览览器器扫扫描描时时，所所有有包包含含在在文文件件中中的的空空格格、回回车车等等均均被被忽忽略略。因因此此你你可可以以将将一一行行写写成成两两行行或或多多行行，在在浏浏览览器中结果是相同的。器中结果是相同的。返 回8.2.1 HTML语言概述语言概述7/14/202421计算机文化基础 目 录上一页下一页 结 束8.2.2 常用的常用的HTML标记标记1.文本布局文本布局1）段落标记）段落标记标标记记指指定定文文档档中中一一个个独独立立的的段段落落。通通过过设设置置align属属性性，控控制制段段落落的的对对齐齐方方式式，其其值值可可以以是是left、center、right、justify，分分别别表表示示左左对对齐齐、居居中中、右右对对齐和两端对齐，默认值为左对齐。齐和两端对齐，默认值为左对齐。使用格式如下：使用格式如下：2）换行标记换行标记 标记可以强制文本换行。该标记只有起始标记。标记可以强制文本换行。该标记只有起始标记。3）水平线标记）水平线标记水平线标记水平线标记用于在网页中插入一条水平线。用于在网页中插入一条水平线。7/14/202422计算机文化基础 目 录上一页下一页 结 束2.文字格式文字格式 HTML语言中用于文字格式化的标记有：语言中用于文字格式化的标记有：1）标题标记）标题标记 格式为：格式为：标题文字内容标题文字内容 其其中中n说说明明大大小小级级别别，取取值值范范围围为为1到到6的的数数字字。把把标标题题分分为为 6级级，即即h1h6，其其中中h1文文字字最最大大，h6文文字最小。字最小。7/14/202423计算机文化基础 目 录上一页下一页 结 束2）字体标记）字体标记 字体标记用来对文字格式进行设置，主要具有以下属性：字体标记用来对文字格式进行设置，主要具有以下属性：（1）size属性：控制文字的大小，格式如下：属性：控制文字的大小，格式如下：其中其中n的取值范围为的取值范围为17的数字，默认值为的数字，默认值为3。标标记记和和标标记记都都可可以以控控制制文文字字的的大大小小。一一般般情情况况下下，文文章章的的标标题题最最好好由由标标记记控控制制，而而其其余余的的文文字字由由标标记控制。相比较而言，记控制。相比较而言，对字体的控制更加灵活。对字体的控制更加灵活。（2）color属性：控制文字的颜色，格式如下：属性：控制文字的颜色，格式如下：其中其中n是一个十六进制的六位数。是一个十六进制的六位数。（3）face属性：指明文字使用的字体，格式如下：属性：指明文字使用的字体，格式如下：其中字体名的选择由其中字体名的选择由Windows操作系统安装的字体决定。如：操作系统安装的字体决定。如：宋体、楷体宋体、楷体_GB2312、Times New Roman、Arial等。等。7/14/202424计算机文化基础 目 录上一页下一页 结 束3）字形标记）字形标记 字字形形标标记记用用于于设设置置文文字字的的粗粗体体、斜斜体体、下划线、上标、下标等，如表所示：下划线、上标、下标等，如表所示：标记格式标记格式字形字形粗体粗体斜体斜体下划线下划线上标上标下标下标7/14/202425计算机文化基础 目 录上一页下一页 结 束3.图片图片 标标记记将将图图片片插插入入网网页页中中，用用于于设设置置图图片片的的大大小小以以及及相邻文字的排列方式。该标记具有以下属性：相邻文字的排列方式。该标记具有以下属性：（1）src属性：指明图片文件所在的位置。格式如下：属性：指明图片文件所在的位置。格式如下：其中其中URL指图片文件存放的位置。指图片文件存放的位置。（2）alt属属性性：图图片片的的文文字字说说明明，当当鼠鼠标标指指针针指指向向图图片片时时，该图片的说明性文字弹出。格式如下：该图片的说明性文字弹出。格式如下：（3）width和和height属属性性：设设置置图图片片显显示示区区域域的的宽宽度度和和高高度度。格式如下：格式如下：其其中中width和和height属属性性的的取取值值n1和和n2，可可以以是是像像素素数数或或百百分比。分比。7/14/202426计算机文化基础 目 录上一页下一页 结 束（4）border属属性性：设设置置图图片片文文件件的的边边框框。格格式式如下：如下：其中其中n为像素数。为像素数。（5）align属属性性：设设置置图图片片相相对对于于文文本本的的位位置置关关系。格式为：系。格式为：对对 齐齐 方方 式式 可可 以以 是是：top（顶顶 端端 对对 齐齐）、middle（相相对对垂垂直直居居中中）、bottom（相相对对底底边边对对齐齐）、left（左左对对齐齐）、right（右右对对齐齐）、texttop（文本上方）等。文本上方）等。7/14/202427计算机文化基础 目 录上一页下一页 结 束4.超链接超链接 在在HTML语语言言中中，和和标标记记用用于于设设置置网网页页中中的的超超链链接接，href属属性性指指明明被被超超链链接接的的文文件件地地址址。格格式式如下：如下：超链接文本超链接文本 用用于于表表示示超超链链接接的的文文本本一一般般显显示示为为蓝蓝色色并并且且加加下下划划线线。在在浏浏览览器器中中，当当鼠鼠标标指指针针指指向向该该文文本本时时，箭箭头头变变为为手手形形，并并在在浏浏览览器器的的状状态态栏栏中中显显示示该该超超链链接接的地址。的地址。若使用图片做超链接，可使用如下格式完成：若使用图片做超链接，可使用如下格式完成：7/14/202428计算机文化基础 目 录上一页下一页 结 束5.表格表格 在在网网页页中中插插入入一一个个表表格格，需需要要用用到到一一组组HTML标记。定义表格的有关标记如下：标记。定义表格的有关标记如下：定义表格区域定义表格区域。定义表格标题定义表格标题。定义表格头定义表格头。定义表格行定义表格行。定义表格单元格定义表格单元格。返 回7/14/202429计算机文化基础 目 录上一页下一页 结 束 常常用用的的标标记记属属性性中中，border属属性性用用于于设设置置表表格格边边框框的的宽宽度度；width、height属属性性用用于于设设置置表表格格或或单单元元格格的的宽宽度度、高高度度；cellspacing和和cellpadding属属性性分分别别用用于于设设置置单单元元格格之之间间的的间间隙隙和和单单元元格格内内部部空空白白；align属属性性用用于于设设置置表表格格或或单单元元格格的的对对齐齐方方式式；bgcolor和和background属属性性分分别别用用于于设设置置表表格格的的背背景景颜颜色色和和背背景景图图像像。表格属性表格属性7/14/202430计算机文化基础 目 录上一页下一页 结 束8.3 网网 页页 制制 作作8.3.1 FrontPage 2003概述概述8.3.2 创建站点创建站点8.3.3 网页编辑网页编辑8.3.4 插入对象插入对象8.3.5 创建超链接创建超链接7/14/202431计算机文化基础 目 录上一页下一页 结 束8.3.1 FrontPage 2003概述概述 FrontPage 2003可可以以按按下下列列方方法法启启动动：单单击击“开开始始”按按钮钮，在在“开开始始”菜菜单单中中指指向向“程程序序”“Microsoft Office”“Microsoft Office FrontPage 2003”；通通过过创创建建FrontPage 2003的的快快捷方式启动。捷方式启动。FrontPage 2003的的退退出出可可以以使使用用以以下下几几种种方方式式：选选取取“文文件件”菜菜单单中中的的“退退出出”；单单击击窗窗口口右上角的右上角的“关闭关闭”按钮；按快捷键按钮；按快捷键Alt+F4等。等。7/14/202432计算机文化基础 目 录上一页下一页 结 束8.3.1 FrontPage 2003概述概述 启启动动FrontPage 2003后后，可可以以看看到到以以下下几几种种视视图图，用用户户可可以以在在不不同同的视图中进行相应的操作。的视图中进行相应的操作。1.网页视图网页视图 网页视图是FrontPage 2003中最常用的工作界面，网页的创建、编辑、预览等基本操作都是在此视图中进行的。FrontPage 2003提供了四种网页视图模式，即设计、拆分、代码、预览。2.文件夹视图文件夹视图 文件夹视图用于管理文件和文件夹，使用它可以直接处理文件和文件夹以及组织网站内容。在此视图中，可以创建、删除、复制和移动文件夹，具体操作与在Windows资源管理器中类似。3.远程网站视图远程网站视图 远程网站视图用于站点和站点内文件的发布。在远程网站视图中查看文件时，文件将用图标和描述性文字进行标记以表示发布状态。7/14/202433计算机文化基础 目 录上一页下一页 结 束8.3.1 FrontPage 2003概述概述4.报表视图报表视图 报表视图用于查看站点的各种情况，如文件内容、更新链接、文件列表及变化情况等。5.导航视图导航视图 利用导航视图可以清晰地看到当前站点的主页和其他网页的链接关系，也可以设置站点的导航结构或添加、删除网页。6.超链接视图超链接视图 超链接视图将当前站点显示为链接文件的一个网络，它们表示了站点中各个网页之间的相互链接关系。利用超链接视图可以管理站点中各个网页的超链接。7.任务视图任务视图 任务视图主要用于创建和管理任务。任务视图以列格式显示网站中的所有任务，并在各个标题下提供有关各项任务的当前信息。7/14/202434计算机文化基础 目 录上一页下一页 结 束8.3.2 创建站点创建站点 使使用用FrontPage 2003的的模模板板和和向向导导，用用户户可可以以轻轻松松地地创创建出各种用途和风格的站点。建出各种用途和风格的站点。新新建建站站点点时时，可可以以根根据据自自己己的的需需求求选选择择不不同同的的模模板板和和向向导导。对对于于不不同同的的模模板板和和向向导导，其其新新建建站站点点的的步步骤骤略略有有不同。不同。下下面面以以“由由一一个个网网页页组组成成的的网网站站”模模板板为为例例，介介绍绍新新建站点的方法。建站点的方法。（1）单单击击“文文件件”菜菜单单的的“新新建建”命命令令，在在“新新建建”任任务务窗窗格格中中选选择择“新新建建网网站站”中中的的“由由一一个个网网页页组组成成的的网网站站”；（2）在在弹弹出出的的“网网站站模模板板”对对话话框框的的“指指定定新新网网站站的的位位置置”框框中中输输入入新新站站点点要要保保存存的的位位置置，也也可可使使用用“浏浏览览”按钮指定新站点的位置；按钮指定新站点的位置；7/14/202435计算机文化基础 目 录上一页下一页 结 束（3）单击）单击“确定确定”按钮，新建站点如下图所示按钮，新建站点如下图所示返 回该站点只有一个空白网页该站点只有一个空白网页index.htmindex.htm（主页）和用主页）和用于存储图片的文件夹于存储图片的文件夹imagesimages，你可以打开你可以打开index.htmindex.htm进行编辑，也可以进一步根据网站规划进行编辑，也可以进一步根据网站规划创建文件夹和新建其他网页。创建文件夹和新建其他网页。选择选择“文件文件”菜单的菜单的“退出退出”命令，可以关闭命令，可以关闭FrontPage 2003FrontPage 2003。7/14/202436计算机文化基础 目 录上一页下一页 结 束1.新建网页新建网页 要要根根据据“网网页页模模板板”创创建建一一个个新新的的网网页页，可可以以按按下下面的步骤：面的步骤：（1）单单击击“文文件件”菜菜单单的的“新新建建”命命令令，在在“新新建建”任任务务窗窗格格中中选选择择“新新建建网网页页”中中的的“其其他他网网页页模模板板”。（2）在在弹弹出出的的“网网页页模模板板”对对话话框框中中选选择择所所需需的的网网页页模模板板，可可以以在在“说说明明”及及“预预览览”区区域域查查看看该该模模板板的说明及预览图。的说明及预览图。（3）单单击击“确确定定”按按钮钮，系系统统新新建建一一个个基基于于所所选选模模板的网页。板的网页。（4）单单击击“文文件件”菜菜单单，选选择择“保保存存”命命令令，弹弹出出“另另存存为为”对对话话框框。在在此此对对话话框框中中，输输入入文文件件名名进进行行保存。保存。返 回8.3.3 网页编辑网页编辑7/14/202437计算机文化基础 目 录上一页下一页 结 束 2.打开打开/保存网页保存网页 FrontPage 2003中中，编编辑辑某某个个网网页页之之前前，需需要要先先打打开开该该网网页页。打打开开网网页页的的方方法法有有多多种种，常常用用的的有有以以下几种：下几种：（1）使使用用“文文件件”菜菜单单的的“打打开开”命命令令，或或“常常用用”工工具具栏栏的的“打打开开”按按钮钮，在在弹弹出出的的“打打开开文文件件”对话框中选择相应的网页；对话框中选择相应的网页；（2）如如需需要要打打开开的的文文件件已已在在打打开开的的网网站站中中，在在文文件件夹夹视视图图中中双双击击该该网网页页图图标标即即可可将将其其打打开开。实实际际上上，在其他视图中双击网页图标，同样会打开指定网页。在其他视图中双击网页图标，同样会打开指定网页。要要保保存存一一个个网网页页，可可以以使使用用“文文件件”菜菜单单的的“保保存存”命命令令，或或“常常用用”工工具具栏栏的的“保保存存”按按钮钮，如如需另存可使用需另存可使用“文件文件”菜单的菜单的“另存为另存为”命令。命令。返 回8.3.3 网页编辑网页编辑7/14/202438计算机文化基础 目 录上一页下一页 结 束3.预览网页预览网页网网页页制制作作过过程程中中，用用户户可可以以切切换换到到“预预览览”视视图图预预览览网网页页，也也可可以以使使用用“文文件件”菜菜单单的的“在在浏浏览览器器中中预预览览”命命令令预预览览网网页页。使使用用后后者者，系系统统会会打打开开浏浏览览器器显显示示网网页页，如如果果该该网网页页尚尚未未保保存存，会会弹弹出出对对话话框框提提示示用用户保存网页。户保存网页。返 回8.3.3 网页编辑网页编辑7/14/202439计算机文化基础 目 录上一页下一页 结 束8.3.3 网页编辑网页编辑4.设置文字格式设置文字格式 同同其其他他Microsoft Office组组件件一一样样，在在网网页页中中可可以以输输入入文文字字，复制、剪切和粘贴文字，设置文字格式，查找和替换文字等。复制、剪切和粘贴文字，设置文字格式，查找和替换文字等。在在FrontPage 2003中中，对对文文字字的的格格式式提提供供了了相相当当完完整整的的设设定定功功能能，文文字字格格式式的的变变化化也也因因此此多多种种多多样样。可可以以使使用用工工具具栏栏上上的的工工具具按钮或菜单命令快速地改变文字的外观。按钮或菜单命令快速地改变文字的外观。设设置置文文字字格格式式的的一一般般操操作作步步骤骤是是：选选中中文文字字，单单击击“格格式式”菜菜单单的的“字字体体”命命令令，在在弹弹出出的的“字字体体”对对话话框框中中设设置置字字体体的的各各种属性，也可以使用种属性，也可以使用“格式格式”工具栏中相应的命令按钮。工具栏中相应的命令按钮。虽虽然然可可以以设设置置各各种种美美观观的的字字体体，但但是是由由于于用用户户只只能能使使用用本本地地计算机中安装的字体显示网页，因此还是使用常见的字体为好。计算机中安装的字体显示网页，因此还是使用常见的字体为好。返 回7/14/202440计算机文化基础 目 录上一页下一页 结 束8.3.3 网页编辑网页编辑5.设置段落格式设置段落格式 文文字字段段落落的的格格式式编编排排对对于于一一个个网网页页的的外外观观是是至至关关重重要要的的。FrontPage 2003通通过过按按Enter键键划划分分段段落落。值值得得注注意意的的是是，段段落落之之间间插插入入了了一一个个空空行行。如如果果只只是是需需要要换换行行，而而不不是是另另起起一一个个段段落落，按按Shift+Enter键键即即可可。实实际际上上，按按Enter键键在在HTML代代码码中中插插入入的的是是标标记记，而而按按Shift+Enter键则插入的是键则插入的是标记。标记。段段落落格格式式主主要要包包括括对对齐齐方方式式、缩缩进进和和段段落落间间距距等等。设置段落格式的一般方法如下：设置段落格式的一般方法如下：将将插插入入点点移移动动到到要要设设置置格格式式的的段段落落中中，或或是是选选中中该该段段落落，单单击击“格格式式”菜菜单单的的“段段落落”命命令令，在在弹弹出出的的“段落段落”对话框中进行各种段落格式属性的设置。对话框中进行各种段落格式属性的设置。返 回7/14/202441计算机文化基础 目 录上一页下一页 结 束8.3.3 网页编辑网页编辑6.设置网页属性设置网页属性网网页页属属性性包包括括网网页页的的标标题题、格格式式、页页边边距距等等。要要设设置置网网页页属属性性，用用户户可可以以使使用用“文文件件”菜菜单单的的“属属性性”命命令令，或或者者在在网网页页的的任任意意地地方方单单击击鼠鼠标标右右键键，在在弹弹出出的的右右键键菜菜单单中中选选择择“网网页页属属性性”命命令令，FrontPage 2003将显示将显示“网页属性网页属性”对话框。对话框。7/14/202442计算机文化基础 目 录上一页下一页 结 束6.设置网页属性设置网页属性 1）“常规常规”属性属性 要要设设置置网网页页的的“常常规规”属属性性，单单击击“网网页页属属性性”对对话话框框的的“常常规规”选选项项卡卡。“标标题题”框框用用于于给给出出网网页页的的标标题题，网网页页标标题题将将显显示示在在浏浏览览器器的的标标题题栏栏中中。“背背景景音音乐乐”框框用用于于指指定定网网页页的的背背景景音音乐乐，当当用用浏浏览览器器打打开开网网页页时时，将将自自动动播播放放背背景景音音乐乐。背背景景音音乐乐区区域域的的“位位置置”框框用用于于指指定定声声音音文文件件的的位位置置，用用户户可可以以使使用用“浏浏览览”按按钮钮选选择择一一个个声声音音文文件件；“循循环环次次数数”框框用用于于指指定定声声音音要要反反复复播播放放的的次次数数，如如果果选选中中“不不限限次次数数”复选框，表示一直不停地播放。复选框，表示一直不停地播放。7/14/202443计算机文化基础 目 录上一页下一页 结 束6.设置网页属性设置网页属性 2）“格式格式”属性属性要要设设置置网网页页的的背背景景、颜颜色色，可可以以使使用用“网网页页属属性性”对对话框的话框的“格式格式”选项卡。选项卡。用用户户可可以以选选中中“背背景景图图片片”复复选选框框，指指定定一一个个图图片片作作为为网网页页的的背背景景图图片片。如如果果要要将将图图片片按按水水印印形形式式添添加加，需需要要选选中中“使使其其成成为为水水印印”复复选选框框。通通过过单单击击相相应应的的下下拉拉列列表表框框，可可以以设设置置网网页页的的背背景景颜颜色色、文文本本颜颜色色以以及及超超链链接接文文字字的的颜颜色色。当当同同时时设设置置背背景景图图片片和和背背景景颜颜色时，背景图片将覆盖背景色。色时，背景图片将覆盖背景色。返 回7/14/202444计算机文化基础 目 录上一页下一页 结 束8.3.4 插入对象插入对象 1.插入水平线插入水平线 在在网网页页中中输输入入文文本本内内容容后后，还还可可在在不不同同的的段段落落、行行之之间间添添加加水水平平线线，水水平平线线将将网网页页分分割割成成几几个个部部分分，使得网页更具条理性。具体操作步骤如下：使得网页更具条理性。具体操作步骤如下：（1）在准备插入水平线的位置设置插入点；）在准备插入水平线的位置设置插入点；（2）单单击击“插插入入”菜菜单单的的“水水平平线线”命命令令，插插入入水水平线。平线。要要修修改改水水平平线线的的外外观观，可可以以双双击击水水平平线线，打打开开“水水平平线线属属性性”对对话话框框。“宽宽度度”框框用用于于设设置置水水平平线线的的宽宽度度，“高高度度”框框用用于于设设置置水水平平线线的的高高度度，“对对齐齐方方式式”用用于于设设置置水水平平线线在在网网页页内内水水平平对对齐齐的的方方式式，“颜颜色色”列列表表框框用用于于设设置置水水平平线线的的颜颜色色，选选中中“实实线线（无无阴阴影影）”复复选选框框时时，水水平平线线将将被被设设成成实实心心线线。要要为为线线条条指指定定自自定定义义样样式式或或其其他他格格式式，可可以以使使用用“样样式式”按按钮进行设置。钮进行设置。返 回7/14/202445计算机文化基础 目 录上一页下一页 结 束8.3.4 插入对象插入对象 2.插入图片插入图片 图片可以使网页变得生动活泼，并能吸引用户的注意。图片可以使网页变得生动活泼，并能吸引用户的注意。1）图片文件的格式）图片文件的格式 在在WWW上上常常用用的的图图像像文文件件格格式式是是JPEG和和GIF，它它们们都都是是压压缩缩的的图图像像格格式式，文文件件的的信信息息量量小小，适适合合于于网网络络传传输输，因因此此被被广广泛泛地地应用在应用在Web站点的设计中。站点的设计中。GIF（Graphical Interchange Format，图图形形交交换换格格式式）采采用用无无损损压压缩缩方方式式，其其主主要要特特征征是是支支持持动动画画、透透明明度度、图图形形渐渐进进，但但GIF图像包含的颜色不能超过图像包含的颜色不能超过256种。种。JPEG（Joint Photograph Expert Group，联联合合图图像像专专家家组组）格格式式是是专专为为有有几几百百万万种种颜颜色色的的照照片片和和图图形形设设计计的的，它它采采用用有有损损压压缩缩方方式式，以以牺牺牲牲图图片片质质量量换换取取大大的的压压缩缩比比例例。JPEG格格式式支支持持真真彩彩色（色（24位色），并且在压缩大的图像方面已被证明很有效。位色），并且在压缩大的图像方面已被证明很有效。7/14/202446计算机文化基础 目 录上一页下一页 结 束2.插入图片插入图片2）插入图片和设置图片属性（方法同）插入图片和设置图片属性（方法同Word）3）编辑图片）编辑图片 利利用用“图图片片”工工具具栏栏能能够够完完成成一一些些常常用用的的图图像像编编辑功能。辑功能。4）保存图片）保存图片 插插入入图图片片后后保保存存网网页页，如如果果图图片片不不在在网网站站文文件件夹夹中中，将将出出现现“保保存存嵌嵌入入式式文文件件”对对话话框框。如如果果图图片片在网站文件夹中，就不会出现此对话框。在网站文件夹中，就不会出现此对话框。7/14/202447计算机文化基础 目 录上一页下一页 结 束8.3.4 插入对象插入对象3.插入字幕插入字幕 在在制制作作网网页页时时，可可以以将将网网页页中中的的文文字字做做成成由由左左至至右右，或或由由右右至至左左移移动动的的动动态态效效果果，使使网网页页更更加加形形象象生生动动。具体操作步骤如下：具体操作步骤如下：（1）将将插插入入点点设设置置在在要要插插入入移移动动字字幕幕的的位位置置或或者者选选中中作作为为移移动动字字幕幕的的文文本本，单单击击“插插入入”菜菜单单的的“Web组组件件”命命令令，弹弹出出“插插入入Web组组件件”对对话话框框，在在对对话话框框的的“组组件件类类型型”列列表表框框中中选选择择“动动态态效效果果”，在在“选选择择一一种种效效果果”列列表表中中选选择择“字字幕幕”，单单击击“完完成成”按钮，按钮，打开打开“字幕属性字幕属性”对话框。对话框。7/14/202448计算机文化基础 目 录上一页下一页 结 束（2）如如果果已已经经选选择择了了作作为为移移动动字字幕幕的的文文本本，此此文文本本就就会会出出现现在在“文文本本”框框中中，如如果果没没有有选选择择文文本本，可可在在“文文本本”框框中中输输入入作作为为移动字幕的文本。移动字幕的文本。（3）“方方向向”区区域域用用于于指指定定文文本本的的移移动动方方向向。“速速度度”区区域域用用于于指指定定文文字字的的滚滚动动速速度度，“延延迟迟”框框中中的的数数值值表表示示字字幕幕滚滚动动一一步步的的时时间间间间隔隔是是多多少少毫毫秒秒，“数数量量”框框中中的的数数值值表表示示字字幕幕滚滚动动一一步步的的距距离离是是多多少少像像素素。“表表现现方方式式”区区域域用用于于指指定定文文字字的的表表现现方方式式。选选中中“重重复复”区区域域的的“连连续续”复复选选框框，移移动动字字幕幕将将连连续续滚滚动动；若若要要设设置置字字幕幕滚滚动动有有限限次次，可可以以取取消消选选中中“连连续续”复复选选框框并并输输入入字字幕幕重重复复的的次次数数。“背背景景色色”列列表表框框用用于于设设置置移移动动字字幕幕的的背背景景颜颜色色。“大小大小”区域用于设置字幕的宽度与高度。区域用于设置字幕的宽度与高度。（4）单击）单击“确定确定”按钮，即可插入字幕。按钮，即可插入字幕。3.插入字幕插入字幕7/14/202449计算机文化基础 目 录上一页下一页 结 束8.3.4 插入对象插入对象4.插入交互式按钮插入交互式按钮 交交互互式式按按钮钮是是一一个个动动态态按按钮钮，当当用用户户将将鼠鼠标标指指向向交交互互式式按按钮钮时时，交交互互式式按按钮钮会会改改变变颜颜色色或或形形状状。默默认认情情况况下下，交交互互式式按按钮钮是是一一个带有彩色方框的文字按钮，也可以应用图片创建交互式按钮。个带有彩色方框的文字按钮，也可以应用图片创建交互式按钮。（1）将将插插入入点点设设置置在在要要插插入入交交互互式式按按钮钮的的位位置置，单单击击“插插入入”菜菜单单的的“Web组组件件”命命令令，打打开开“插插入入Web组组件件”对对话话框框，在在对对话话框框的的“组组件件类类型型”列列表表框框中中选选择择“动动态态效效果果”，在在“选选择择一一种种效效果果”列列表表中中选选择择“交交互互式式按按钮钮”，单单击击“完完成成”按按钮钮，打打开开“交交互互式按钮式按钮”属性对话框。属性对话框。（2）设置）设置按钮按钮字体字体图像图像（3）单击）单击“确定确定”按钮，即可插入交互式按钮。按钮，即可插入交互式按钮。7/14/202450计算机文化基础 目 录上一页下一页 结 束8.3.4 插入对象插入对象 5.插入站点计数器插入站点计数器 （1）单单击击“插插入入”菜菜单单的的“Web组组件件”命命令令，打打开开“插插入入Web组组件件”对对话话框框，在在对对话话框框的的“组组件件类类型型”列列表表框框中中选选择择“计计数数器器”，在在“选选择择计计数数器器样样式式”列列表表中中选选择择一一种种样样式式，单单击击“完完成成”按钮，打开按钮，打开“计数器属性计数器属性”对话框；对话框；（2）设置计数器属性；）设置计数器属性；（3）单击）单击“确定确定”按钮，插入站点计数器。按钮，插入站点计数器。返 回7/14/202451计算机文化基础 目 录上一页下一页 结 束8.3.5 创建超链接Web网网页页的的强强大大之之处处就就在在于于其其超超链链接接，使使用用超超链链接接能能够够将将Internet中中的的信信息息有有机机地地组组织织起起来来，使使人人们们在在丰丰富富多多彩彩的的WWW世世界界轻轻松松地地漫漫游游。超超链链接接是是指指从从一一个个网网页页指指向向一一个个目目标标的的链链接接关关系系，这这个个目目标标可可以以是是另另一一个个网网页页，也也可可以以是是相相同同网网页页上上的的不不同同位置，还可以是图片、文件、电子邮件地址等。位置，还可以是图片、文件、电子邮件地址等。超链接由链接载体和链接目标两部分组成。超链接由链接载体和链接目标两部分组成。根根据据链链接接载载体体的的特特点点，可可以以把把链链接接分分为为文文本本超超链接与图片超链接两大类。链接与图片超链接两大类。7/14/202452计算机文化基础 目 录上一页下一页 结 束8.3.5 创建超链接创建超链接1.创建文本超链接创建文本超链接 文文本本超超链链接接是是指指在在文文本本上上定定义义的的超超链链接接，单单击击文文本本超超链链接接，会会自自动动跳跳转转到到指指向向的的链链接接目目标标。创创建建文文本本超超链链接接的的具具体体操操作作步步骤如下：骤如下：（1）选选定定要要定定义义超超链链接接的的文文本本，从从“插插入入”菜菜单单中中选选择择“超超链链接接”命命令令，或或单单击击“常常用用”工工具具栏栏上上的的“超超链链接接”按按钮钮，打打开开“插入超链接插入超链接”对话框，如下图所示；对话框，如下图所示；7/14/202453计算机文化基础 目 录上一页下一页 结 束1.创建文本超链接创建文本超链接（2）在在“插插入入超超链链接接”对对话话框框中中选选择择要要链链接接的的目目标标网网页页，单单击击“确确定定”按按钮钮，插插入入超超链链接接，可可以以看看到到所所选选定定的的文文本本变变为为蓝蓝色色，并并且且带带有有下下划划线线，说明选定的文本已经被设置为超链接文本。说明选定的文本已经被设置为超链接文本。保保存存网网页页，在在浏浏览览器器中中预预览览效效果果。当当鼠鼠标标移移至至链链接接文文字字时时，鼠鼠标标指指针针变变成成手手形形，此此时时单单击击鼠鼠标就跳转到目标网页。标就跳转到目标网页。7/14/202454计算机文化基础 目 录上一页下一页 结 束 图图片片超超链链接接是是指指在在图图片片上上创创建建的的超超链链接接，图图片片超超链链接接比比文文本本超超链链接接显显得得更更加加生生动动活活泼泼，单单击击图图片片超超链链接接，会会自自动动跳跳转转到到指指向向的的链链接接目目标标。可可以以将将整整个个图图片片设设置置为为超超链链接接，也也可可以以为为图图片片分分配配一一个个或或多多个个热热点点。热热点点是是图图片片上上的的超超链链接接区区域域，包包含含热热点点的的图图片片称称为为图图像像映映射射，用用户户单单击击热热点点区区域可以转到相应的链接目标。域可以转到相应的链接目标。2.创建图片超链接创建图片超链接7/14/202455计算机文化基础 目 录上一页下一页 结 束 （1）选选定定要要定定义义超超链链接接的的图图片片，从从“插插入入”菜菜单单中中选选择择“超超链链接接”命命令令，或或单单击击“常常用用”工工具具栏栏上上的的“超超链链接接”按按钮钮，打打开开“插插入入超超链链接接”对话框；对话框；（2）在在对对话话框框中中选选择择要要链链接接的的目目标标网网页页，单单击击“确定确定”按钮，即可插入超链接。按钮，即可插入超链接。保保存存网网页页，在在浏浏览览器器中中预预览览效效果果，当当鼠鼠标标移移至至链链接接图图片片时时，鼠鼠标标指指针针变变成成手手形形，此此时时单单击击鼠鼠标就跳转到目标网页。标就跳转到目标网页。1）创建图片超链接）创建图片超链接7/14/202456计算机文化基础 目 录上一页下一页 结 束 热热点点可可以以是是图图片片上上具具有有某某种种形形状状的的一一块块区区域域或或文文本本，当当用用户户单单击击该该区区域域或或文文本本时时，超超链链接接目目标标会会显显示示在在Web浏浏览览器器中中。在在FrontPage 2003中中，热点的形状可以是长方形、圆形或多边形。热点的形状可以是长方形、圆形或多边形。例例如如我我们们通通过过山山东东省省地地图图浏浏览览山山东东省省各各城城市市的的民民俗俗风风情情，当当鼠鼠标标移移至至地地图图上上的的各各个个城城市市时时，鼠鼠标标指指针针变变为为手手形形，单单击击后后打打开开描描述述该该城城市市民民俗俗风风情的页面。情的页面。2）为图片添加热点）为图片添加热点7/14/202457计算机文化基础 目 录上一页下一页 结 束为图片添加热点，具体操作步骤如下：为图片添加热点，具体操作步骤如下：（1）选择需要添加热点的图片；）选择需要添加热点的图片；（2）在在“图图片片”工工具具栏栏中中，单单击击长长方方形形、圆圆形形或多边形热点按钮匹配需要的形状；或多边形热点按钮匹配需要的形状；（3）在在图图片片上上，采采用用鼠鼠标标拖拖动动操操作作画画出出所所选选形形状状（画画多多边边形形时时，可可单单击击多多边边形形的的第第一一个个角角，然然后后依依次次单单击击多多边边形形其其他他角角的的位位置置，最最后后双双击击完完成成多多边边形）；形）；（4）释释放放鼠鼠标标，弹弹出出“插插入入超超链链接接”对对话话框框，按照插入超链接中所讲方法创建超链接即可。按照插入超链接中所讲方法创建超链接即可。7/14/202458计算机文化基础 目 录上一页下一页 结 束为图片添加热点 重重复复步步骤骤（2）、（3）、（4），在在图图片片上上依依次次创创建建超超链链接接到到其其他他网网页页。当当鼠鼠标标移移动动到到热热点点区区域域时时，光光标标变变为为手手形形，如如下下图图所所示示。单单击击鼠鼠标标，超超链链接接的的目目标标网网页就会显示在页就会显示在Web浏览器窗口中。浏览器窗口中。返 回7/14/202459计算机文化基础 目 录上一页下一页 结 束3.使用书签超链接对对于于网网页页的的超超链链接接，往往往往使使用用户户跳跳转转到到目目标标网网页页的的顶顶端端，应应用用书书签签能能够够更更严严格格地地控控制制用用户户到到达达网网页页内内的的某某个个具具体体位位置置。书书签签是是网网页页中中被标记的位置或被标记的文本。被标记的位置或被标记的文本。1）插入书签）插入书签（1）选中作为书签的文本，或）选中作为书签的文本，或将光标定位在要插入书签的位置。将光标定位在要插入书签的位置。（2）选择）选择“插入插入”菜单的菜单的“