kj7第7章 网页制作软件介绍课件.ppt

《kj7第7章 网页制作软件介绍课件.ppt》由会员分享，可在线阅读，更多相关《kj7第7章 网页制作软件介绍课件.ppt（154页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第1页第第7章章 网页制作软件介绍网页制作软件介绍本章概述本章概述 本章的学习目标本章的学习目标主要内容主要内容第2页本章概述本章概述l Internet上丰富的信息资源大多是通过网页传递的，网页是上丰富的信息资源大多是通过网页传递的，网页是WWW网的基网的基本文档之一，网页用本文档之一，网页用HTML（超文本标记语言）书写，一个网页包含许多（超文本标记语言）书写，一个网页包含许多不同类型的不同类型的HTML标记符，使用这样的标记符构建成网页的结构、外貌和标记符，使用这样的标记符构建成网页的结构、外貌和内容。内容。l网页被保存在网页被保存在WWW服务器中，可以通过特定的服务器中，可以通过特定的

2、URL地址检索到，当你在地址检索到，当你在浏览器的地址栏中输入相应的浏览器的地址栏中输入相应的URL地址时，就可以找到相应的地址时，就可以找到相应的Homepage，并从中并从中 获取信息。获取信息。l人们在制作一个网页时，大都采用一些专门的网页制作工具，如人们在制作一个网页时，大都采用一些专门的网页制作工具，如FrontPage编辑器、编辑器、Dreamweaver编辑器等，它们将网页界面自动构建成编辑器等，它们将网页界面自动构建成对应的对应的HTML标记语言。标记语言。l人们要制作一个有特色的、动态交互的网页还需要使用人们要制作一个有特色的、动态交互的网页还需要使用Flash和和Firew

3、orks等辅助技术和动态网页语言等辅助技术和动态网页语言 ASP、JSP、PHP等制作工具。等制作工具。第3页本章的学习目标本章的学习目标l了解了解HTML语言语言l掌握网页、网站等相关概念掌握网页、网站等相关概念l掌握网站与网页创建和管理的操作掌握网站与网页创建和管理的操作l掌握网页的编辑技术掌握网页的编辑技术l掌握网页的表格操作掌握网页的表格操作l掌握网页图片操作掌握网页图片操作l掌握网页表单和框架网页操作掌握网页表单和框架网页操作l掌握网页超链接操作掌握网页超链接操作l了解网页制作的辅助技术和动态交互网页的制作工具了解网页制作的辅助技术和动态交互网页的制作工具第4页主要内容主要内容7.1

4、 HTML语言简介语言简介 7.2 FrontPage 2003的使用的使用7.3 FrontPage 2003的高级应用的高级应用7.4 Dreamweaver8.0的使用的使用7.5 网页开发辅助技术网页开发辅助技术7.6 动态交互网页的制作工具动态交互网页的制作工具7.7 本章小结本章小结 7.1 HTML语言简介语言简介l 超文本标记语言超文本标记语言HTMLl HTML标记语言的基本结构标记语言的基本结构l 几个常用的几个常用的HTML标记标记第5页第6页l HTML（Hyper Text Markup Language）是超）是超文本标记语言。文本标记语言。l同所有的编程语言一样，

5、同所有的编程语言一样，HTML语言也有一套自语言也有一套自己的符号和语法约定。己的符号和语法约定。l但它又不同于一般的编程语言，它只是一些可以但它又不同于一般的编程语言，它只是一些可以由浏览器加以解释，并具有命令标记性质的文本。由浏览器加以解释，并具有命令标记性质的文本。一、超文本标记语言一、超文本标记语言HTML第7页l例如在浏览器例如在浏览器IE中显示的是一个简单的主页（如图中显示的是一个简单的主页（如图7-1-1所示）。所示）。l该网页的文本内容如下：该网页的文本内容如下： 我的第一个我的第一个homepage，欢迎光临！，欢迎光临！ 您的到来为本站增辉！您的到来为本站增辉！ 本站全体同

6、仁欢迎您！本站全体同仁欢迎您！ 蜜蜂之家蜜蜂之家 图7-1-1 一个简单的主页超文本标记语言超文本标记语言HTML第8页二、二、HTML标记语言的基本结构标记语言的基本结构l一个网页对应于一个一个网页对应于一个HTML文件，文件，HTML文件以文件以.htm或或.html为扩展名。为扩展名。l标准的标准的HTML文件都具有一个基本的整体结构，即文件都具有一个基本的整体结构，即HTML文件的开始与结束标志、文件的开始与结束标志、HTML的头部与主体两大部分。的头部与主体两大部分。l文件头部用来设置当前文档的一些相关信息，如网页的搜文件头部用来设置当前文档的一些相关信息，如网页的搜索关键字、网页的

7、标题、网页所使用的编码以及脚本语言索关键字、网页的标题、网页所使用的编码以及脚本语言等，它一般不在浏览器的窗口中显示。等，它一般不在浏览器的窗口中显示。l文件主体用来放置文件主体用来放置Web页面的主要内容，包含文字、图片、页面的主要内容，包含文字、图片、背景色、表格、表单等几乎所有关于网页的功能和效果的背景色、表格、表单等几乎所有关于网页的功能和效果的展示。展示。表表7-1-1 HTML文件构成文件构成第9页名名 称称描描 述述文件开始文件开始头部头部 标题名标题名 其他头部内容定义标记其他头部内容定义标记 主体主体 主页内容（文本、图像等）主页内容（文本、图像等） 文件结束文件结束 HTM

8、L标记语言的基本结构标记语言的基本结构lHTML文件由标记和文本组成，文件由标记和文本组成，HTML用于描述功能的符用于描述功能的符号称为号称为“标记标记”。一个标记表示为。一个标记表示为“”，中间可以，中间可以包含标记名、标记的属性等，就像编程语言中的参数一样。包含标记名、标记的属性等，就像编程语言中的参数一样。l标记标记构成一对完整的标签，并且许多构成一对完整的标签，并且许多标记是成对出现的，这也是标记是成对出现的，这也是HTML标签的特点，有一个开标签的特点，有一个开始标记，还有一个结束标记，结束标记就是在开始标记之始标记，还有一个结束标记，结束标记就是在开始标记之前加一个前加一个“/”

9、。比如下面两行：。比如下面两行：l l l它们告诉浏览器，这是它们告诉浏览器，这是Homepage的开始的开始()以及结以及结束束()。第10页HTML标记语言的基本结构标记语言的基本结构第11页三、几个常用的三、几个常用的HTML标记标记l 1 作用：表示超文本文档的开头及结束。作用：表示超文本文档的开头及结束。l 2 作用：一些有关文档的定义、说明和描述等标记包含在其中。作用：一些有关文档的定义、说明和描述等标记包含在其中。l 3 作用：其中包含的内容出现在浏览器窗口的标题栏上，作为该主页的作用：其中包含的内容出现在浏览器窗口的标题栏上，作为该主页的标题。标题。l 4 作用：要表达的正文信

10、息包含在其中。作用：要表达的正文信息包含在其中。l 说明：以上说明：以上4个标记是一个完整的个标记是一个完整的Homepage所必不可少的。所必不可少的。l 5 作用：其中作用：其中n取值取值l6，表示由大到小的，表示由大到小的6种标题文字。种标题文字。第12页l 6 作用：强行换行。作用：强行换行。 在在HTML文本中，所有包含的回车符和空格都被忽略，当一行的内容还不满屏幕文本中，所有包含的回车符和空格都被忽略，当一行的内容还不满屏幕的宽度时，下一行内容会自动接上，因此在需换行时必须使用该标记。的宽度时，下一行内容会自动接上，因此在需换行时必须使用该标记。l 7格式：格式： 作用：用于设定字

11、体的大小和所用的字体，其中包含两个属性：作用：用于设定字体的大小和所用的字体，其中包含两个属性： 属性属性size：指定字体的大小，值为：指定字体的大小，值为l7。 属性属性face：用于指定不同的字体。：用于指定不同的字体。l 8格式：格式： 作用：将图像文件嵌入到作用：将图像文件嵌入到Homepage中。其中包含中。其中包含3个属性：个属性：Src（图像来源）、（图像来源）、Width（图像宽度）和（图像宽度）和 Height（图像高度）（图像高度）l 9格式：格式： 作用：将文本的内容居中。作用：将文本的内容居中。l 10格式：格式： 作用：在其间包含的文本内容上加下划线。作用：在其间包

12、含的文本内容上加下划线。l当然，当然，HTML的标记还有很多，对于初学者来说比较难记。不过我们可以使用的标记还有很多，对于初学者来说比较难记。不过我们可以使用FrontPage2003来制作图文并茂的来制作图文并茂的Homepage。几个常用的几个常用的HTML标记标记第13页第二节第二节 FrontPage2003的使用的使用 FrontPage 2003概述概述 7.2.2 创建站点和网页操作创建站点和网页操作7.2.3 网页中的文本编辑网页中的文本编辑7.2.4 网页中图片的处理网页中图片的处理 网页中表格的使用网页中表格的使用 建立超链接建立超链接 第14页一、一、 FrontPage

13、 2003概述概述lFrontPage 2003是是 Microsoft公司最新推出的网站制作软件，是公司最新推出的网站制作软件，是 Office系列系列办公软件中的一个。办公软件中的一个。lFrontPage 2003的新特性的新特性 FrontPage 2003集中了所有集中了所有Web设计功能，并可以查看整个网络全景，增加了布设计功能，并可以查看整个网络全景，增加了布局表格和单元格、图像描摹。可以使用动态局表格和单元格、图像描摹。可以使用动态Web模板、网页标尺和布局网格。模板、网页标尺和布局网格。l（1）自定义例览器分辨率）自定义例览器分辨率 在设计网页时，可实时调节当前页面在客户端显

14、示的分辨率，以便预览在设计网页时，可实时调节当前页面在客户端显示的分辨率，以便预览当前效果。当前效果。l（2）描摹图像）描摹图像 大家在学习书法的时候，都接触过临摹吧，描摹图像的功用与其类似，大家在学习书法的时候，都接触过临摹吧，描摹图像的功用与其类似，就是通过创建一个图像（一般为网页的效果图）为参照物，以便于网页就是通过创建一个图像（一般为网页的效果图）为参照物，以便于网页的设计制作。选择菜单栏上的的设计制作。选择菜单栏上的“视图视图”、“描摹图像描摹图像”、“设置设置”命令，命令，在弹出的对话框中，选择指定图像，再设置其坐标（即在设计页面上显在弹出的对话框中，选择指定图像，再设置其坐标（即

15、在设计页面上显示的位置）。最后，设置透明度，再单击示的位置）。最后，设置透明度，再单击“确认确认”按钮即可。按钮即可。第15页l（3）层功能）层功能层在网页制作中是不可缺少的，层在网页制作中是不可缺少的，FrontPage 2003可以像可以像Dreamweaver那样使用层。通过层可以将内容重叠、交叉摆放。那样使用层。通过层可以将内容重叠、交叉摆放。l（4）行为的应用）行为的应用行为是事件和由该事件触发的动作的组合。行为代码是客户端的行为是事件和由该事件触发的动作的组合。行为代码是客户端的Javascript代码，因此它无需服务器的支持就可触发事件。代码，因此它无需服务器的支持就可触发事件。

16、行为一直是行为一直是Dreamweaver的强项，而的强项，而FrontPage 2003现在也有现在也有了这个功能。选择菜单了这个功能。选择菜单“格式格式”、“行为行为”命令，查看界面右侧命令，查看界面右侧的的“行为行为”窗格，单击窗格，单击“插入插入”向下箭头按钮，在弹出的菜单中向下箭头按钮，在弹出的菜单中可选择播放声音、弹出消息、调用脚本及弹出菜单等事件。在选可选择播放声音、弹出消息、调用脚本及弹出菜单等事件。在选择指定的插入对象后，将弹出相应的设置对话框，在其中按需操择指定的插入对象后，将弹出相应的设置对话框，在其中按需操作。所有添加的行为事件，均会显示在列表中。作。所有添加的行为事件

17、，均会显示在列表中。 FrontPage 2003新特性新特性第16页l（5）用网页重定向）用网页重定向 在在 FrontPage 2003中，选择菜单中，选择菜单“工具工具”、“中文简繁转换中文简繁转换”、“插入插入重定向代码重定向代码”命令，在弹出的对话框中，设置简体页面网址及繁体页面命令，在弹出的对话框中，设置简体页面网址及繁体页面网址。而后，插入的代码将通过测览器对支持语言的检测，实现自动转网址。而后，插入的代码将通过测览器对支持语言的检测，实现自动转向。向。l（6）检查网页错误）检查网页错误 选择菜单选择菜单“工具工具”、“辅助功能辅助功能”命令，在弹出的对话框中设置检查范命令，在弹

18、出的对话框中设置检查范围、内容及显示对象，接着单击围、内容及显示对象，接着单击“检查检查”按钮即可。利用此项功能，就按钮即可。利用此项功能，就可快速找出指定网页是否有错误，并可查看问题之所在。可快速找出指定网页是否有错误，并可查看问题之所在。l（7）规划页面布局）规划页面布局 一个成功的设计作品，大都需要事先为其规划设计布局，以便于宏观控一个成功的设计作品，大都需要事先为其规划设计布局，以便于宏观控制其内容。选择菜单制其内容。选择菜单“表格表格”、“布局表格和单元格布局表格和单元格”命令，右侧窗格命令，右侧窗格中将显示相应的属性设置。我们着重查看中将显示相应的属性设置。我们着重查看“表格布局表

19、格布局”下拉列表，在其下拉列表，在其中有若干布局样式可供选择。当我们选择一种合适的布局应用于当前页中有若干布局样式可供选择。当我们选择一种合适的布局应用于当前页面上后，可随时在设计视图中按需自行调节其布局样式。面上后，可随时在设计视图中按需自行调节其布局样式。 FrontPage 2003新特性新特性第17页lFrontPage 2003的启动与退出的方法和的启动与退出的方法和 Word 2003类似。类似。lFrontPage 2003的启动的启动双击双击Windows桌面上的桌面上的Microsoft FrontPage 2003快快捷方式图标，捷方式图标，选择选择“开始开始”、“所有程序

20、所有程序”、“Microsoft office”、“Microsoft office FrontPape2003”菜单命令都可以菜单命令都可以启动启动FrontPage 2003。 FrontPage 2003的启动的启动第18页l FrontPage 2003的退出的退出（1）单击）单击FrontPage 2003窗口中的窗口中的“关闭关闭”按钮。按钮。（2）选择菜单）选择菜单“文件文件”、“退出退出”命令。命令。（3）按）按ALT十十F4。（4）单击窗口中的）单击窗口中的 FrontPage 2003控制图标，打开控制图标，打开窗口控制菜单，选择窗口控制菜单，选择“关闭关闭”命令。命令。（

21、5）双击窗口中的）双击窗口中的 FrontPage 2003控制图标。控制图标。 FrontPage 2003的退出的退出第19页lFrontPage 2003启动后启动后进入如图进入如图7-2-1所示的工所示的工作界面。在作界面。在 FrontPage 2003中提供了中提供了 7种视图模种视图模式和式和4种网页视图方式。种网页视图方式。lFrontPape 2003提供了提供了网页视图、文件夹视图、网页视图、文件夹视图、远程网站视图、报表视图、远程网站视图、报表视图、导航视图、超链接视图和导航视图、超链接视图和任务视图任务视图7种视图模式，种视图模式，l利用这些视图可以完成站利用这些视图可

22、以完成站点的创建、管理、发布等点的创建、管理、发布等任务。视图切换可以选择任务。视图切换可以选择菜单菜单“视图视图”，执行相应，执行相应的命令，也可以使用视图的命令，也可以使用视图模式标签进行切换。模式标签进行切换。图7-2-1 FrontPage 2003窗口 FrontPage 2003的工作界面的工作界面第20页l（l）网页视图）网页视图默认情况下，打开网页，就会进入网页视图，可以在该视图下编默认情况下，打开网页，就会进入网页视图，可以在该视图下编辑网页内容。辑网页内容。网页视图包括设计视图、拆分视图、代码视图和预览视图网页视图包括设计视图、拆分视图、代码视图和预览视图4种视图种视图方式

23、。方式。l（2）文件夹视图）文件夹视图文件夹视图列出了文件夹中的所有内容。文件夹视图列出了文件夹中的所有内容。可以在文件夹内容上单击右键直接对其进行删除、复制、重命名、可以在文件夹内容上单击右键直接对其进行删除、复制、重命名、移动、打开等操作。移动、打开等操作。 FrontPage 2003视图视图第21页l（3）远程网站视图）远程网站视图该视图是该视图是FrontPape 2003的新特性之一，主要功能是向互联网发布文的新特性之一，主要功能是向互联网发布文件。件。可以使用此功能将同站发布到一个网络服务提供商的服务器上。可以使用此功能将同站发布到一个网络服务提供商的服务器上。l（4）报表视图）

24、报表视图在该视图模式下，可以查看站点的各种分布情况，包括网站摘要、文在该视图模式下，可以查看站点的各种分布情况，包括网站摘要、文件、共享内容、工作流、使用率信息和网站存在的问题等。件、共享内容、工作流、使用率信息和网站存在的问题等。l（5）导航视图）导航视图导航视图中提供了网站的分层视图，可以直观地表示一个网站的组织导航视图中提供了网站的分层视图，可以直观地表示一个网站的组织关系和逻辑层次，以方便管理网站中的各个网页。关系和逻辑层次，以方便管理网站中的各个网页。 FrontPage 2003视图视图第22页l（6）超链接视图）超链接视图超链接视图可以将网站中的超链接的状态显示在一个列表中，该超

25、链接视图可以将网站中的超链接的状态显示在一个列表中，该列表中包括内部链接和外部链接。列表中包括内部链接和外部链接。图中带有加号的超链接表示该链接还链接其他站点，单击加号就图中带有加号的超链接表示该链接还链接其他站点，单击加号就可以打开它所包括的链接。可以打开它所包括的链接。l（7）任务视图）任务视图任务视图主要用来记录和分配任务，包括已完成任务和尚未完成任务视图主要用来记录和分配任务，包括已完成任务和尚未完成任务，主要信息包括状态、任务名称、分配对象、优先级等信息。任务，主要信息包括状态、任务名称、分配对象、优先级等信息。任务视图用于同站项目的管理和任务的分配。任务视图用于同站项目的管理和任务

26、的分配。可以选择菜单可以选择菜单“编辑编辑”、“任务任务”命令，执行添加任务、编辑任命令，执行添加任务、编辑任务、标记完成等操作。务、标记完成等操作。 FrontPage 2003视图视图第23页l选择菜单选择菜单“视图视图”、“网页网页”命令可以切换到网页视图模式。此时文命令可以切换到网页视图模式。此时文档窗口的左下方就会出现档窗口的左下方就会出现4种网页视图方式的选项卡，可以从不同的种网页视图方式的选项卡，可以从不同的角度对一个网页进行查看和处理。可以单击该选项卡实现视图方式的角度对一个网页进行查看和处理。可以单击该选项卡实现视图方式的切换。切换。 （1）设计视图。可以在该视图中设计和编辑

27、网页，以）设计视图。可以在该视图中设计和编辑网页，以“所见即所得所见即所得”的的工作方式实现网页设计和编辑。工作方式实现网页设计和编辑。 （2）代码视图。网页文件其实是）代码视图。网页文件其实是HTML标记语言编写的文本文件，可以标记语言编写的文本文件，可以采用代码视图显示和编辑网页中的采用代码视图显示和编辑网页中的HTML标记代码。标记代码。 （3）拆分视图。拆分视图可以同时访问代码视图和设计视图。该模式将）拆分视图。拆分视图可以同时访问代码视图和设计视图。该模式将工作窗口分成两部分：上面窗口是工作窗口分成两部分：上面窗口是HTML标记代码，下面窗口是网页的编标记代码，下面窗口是网页的编辑画

28、面。辑画面。 （4）预览视图。通过该视图可以在网页制作过程中随时查看网页的显示）预览视图。通过该视图可以在网页制作过程中随时查看网页的显示效果，可以看到和浏览器中一样的显示效果。效果，可以看到和浏览器中一样的显示效果。 FrontPage 2003视图视图第24页二、创建站点和网页操作二、创建站点和网页操作l创建站点创建站点网站由网页组成，小型的网站可以逐个网页创建。如网站由网页组成，小型的网站可以逐个网页创建。如果果Web站点较大，则通过站点会使管理和创建更加便站点较大，则通过站点会使管理和创建更加便捷。捷。可以使用向导和使用模板两种方式创建站点。可以使用向导和使用模板两种方式创建站点。Fr

29、ontPage 2003中的向导和模板分为两类：中的向导和模板分为两类： 一类是网页向导与模板，包括常规、框架网页和样式表一类是网页向导与模板，包括常规、框架网页和样式表3种；种； 另一类是网站向导和模板。另一类是网站向导和模板。第25页l选择菜单选择菜单“文件文件”|“新建新建”命令，打开命令，打开“新建新建”任务窗格，如图任务窗格，如图7-2-2所示，单击所示，单击“新建站点新建站点”中的一个选项，根据提示操作即可创建站点。中的一个选项，根据提示操作即可创建站点。其中其中“只有一个网页组成的网站只有一个网页组成的网站”模板将创建模板将创建包含一个空白网页的新网站，是比较常用的方包含一个空白

30、网页的新网站，是比较常用的方式，用于一般用途网站的创建。式，用于一般用途网站的创建。l网页是网站的基本组成部分，下面将介绍网页网页是网站的基本组成部分，下面将介绍网页制作的基本操作，包括新建网页、设置网页属制作的基本操作，包括新建网页、设置网页属性、保存网页、打开已有网页和预览网页等。性、保存网页、打开已有网页和预览网页等。l新建网页新建网页 新建网页一般有新建网页一般有3种方式，分别为新建空白网页、种方式，分别为新建空白网页、根据现有网页新建网页和使用网页模板新建网根据现有网页新建网页和使用网页模板新建网页。选择菜单页。选择菜单“文件文件”、“新建新建”命令，打开命令，打开“新建新建”任务窗

31、格，如图任务窗格，如图7-2-2所示。所示。图7-2-2“新建”任务窗格 创建站点和网页创建站点和网页第26页 新建空白网页。新建空白网页。 在在“新建网页新建网页”选择区域中单击选择区域中单击“空白网页空白网页”，空白网页创建后，系统自动为其命名为空白网页创建后，系统自动为其命名为“new_page_1.htm”。 根据现有网页新建网页。根据现有网页新建网页。 在在“新建网页新建网页”选择区域中单击选择区域中单击“根据现有网根据现有网页页”，打开，打开“根据现有网页新建根据现有网页新建”对话框。选择对话框。选择所需应用的网页，单击所需应用的网页，单击“创建创建”按钮即可。此时按钮即可。此时会

32、打开现有的网页，命名为会打开现有的网页，命名为“new_page_2.htm”。新建的网页。新建的网页new_page_2.htm将继承现有网页的格式，且可将继承现有网页的格式，且可以在此基础上进行编辑和修改。以在此基础上进行编辑和修改。 使用网页模板新建网页。使用网页模板新建网页。 该选项是根据该选项是根据 FrontPage 2003提供的网页模板提供的网页模板来新建网页。在来新建网页。在“新建网页新建网页”选择区域中单击选择区域中单击“其他网页模板其他网页模板”，打开，打开“网页模板网页模板”对话框，对话框，如图如图7-2-3所示。提供了常规网页模板、框架网页所示。提供了常规网页模板、框

33、架网页模板和样式表模板共模板和样式表模板共3类。选择所需要的网页模类。选择所需要的网页模板，单击板，单击“确定确定”按钮即可。按钮即可。图7-2-3“网页模板”对话框网页基本操作网页基本操作第27页网页属性设置网页属性设置l网页属性主要包括网页的标题、背景音乐、背景图片、网页属性主要包括网页的标题、背景音乐、背景图片、背景颜色、超链接颜色、边距和正文样式等。背景颜色、超链接颜色、边距和正文样式等。l选定网页文档区域，选择菜单选定网页文档区域，选择菜单“文件文件”、“属性属性”命令，命令，或者单击右键，在弹出的快捷菜单中选择或者单击右键，在弹出的快捷菜单中选择“网页属性网页属性”命令，打开命令，

34、打开“网页属性网页属性”对话框，如图对话框，如图7-2-4所示。共有所示。共有常规、格式、高级、自定义、语言、工作组常规、格式、高级、自定义、语言、工作组6个选项卡，个选项卡，其中：其中：l“常规常规”选项卡选项卡 设置标题。网页标题是一个网页的概括性说明文设置标题。网页标题是一个网页的概括性说明文字，该标题将会显示在字，该标题将会显示在Web测览器的标题栏中。测览器的标题栏中。 网页说明。网站访问者在网页说明。网站访问者在Web上搜索内容，则会上搜索内容，则会在搜索结果中看到此说明。在搜索结果中看到此说明。 关键字。描述网页内容的一个或多个关键宇（用关键字。描述网页内容的一个或多个关键宇（用

35、一个逗号和一个空格隔开）。一个逗号和一个空格隔开）。 背景音乐。在背景音乐。在“位置位置”文本框中输入要在打开网文本框中输入要在打开网页时播放的音乐文件的路径和文件名，或者单击页时播放的音乐文件的路径和文件名，或者单击“浏览浏览”选择文件。选择文件。 循环次数。播放音乐的次数。若要不停地播放音循环次数。播放音乐的次数。若要不停地播放音乐，选中乐，选中“不限次数不限次数”复选框。复选框。图7-2-4 “网页属性”对话框第28页网页属性设置网页属性设置l“格式格式”选项卡，可以设置网页的背景图片、背景颜色、选项卡，可以设置网页的背景图片、背景颜色、文本颜色、超链接颜色。已访问的超链接颜色、当前文本

36、颜色、超链接颜色。已访问的超链接颜色、当前超链接颜色等。如图超链接颜色等。如图7-2-5所示。所示。 背景。设置背景图片，如果图形的长或宽与网背景。设置背景图片，如果图形的长或宽与网页不同，则图形会在网页的背景中重复显示，并页不同，则图形会在网页的背景中重复显示，并与网页中的文本及其他元素一起滚动。与网页中的文本及其他元素一起滚动。 使其成为水印。把网页背景图形作为水印，固使其成为水印。把网页背景图形作为水印，固定在背景中，不会与网页中的文本及其他元素一定在背景中，不会与网页中的文本及其他元素一起滚动。起滚动。 属性。更改背景图形的格式和其他设置。只有属性。更改背景图形的格式和其他设置。只有已

37、向网页添加了背景图形，此选项才可用。已向网页添加了背景图形，此选项才可用。 颜色。设置网页的背景颜色、网页中文本的默颜色。设置网页的背景颜色、网页中文本的默认颜色。认颜色。 超链接。设置尚未访问的超链接的文本颜色。超链接。设置尚未访问的超链接的文本颜色。 已访问的超链接。设置已单击过的超链接的文已访问的超链接。设置已单击过的超链接的文本颜色。本颜色。 当前超链接。单击超链接时的文本颜色。当前超链接。单击超链接时的文本颜色。图7-2-5 “格式”选项卡第29页网页属性设置网页属性设置l“高级高级”选项卡，可以设置页面的边距、正文样选项卡，可以设置页面的边距、正文样式、超链接反转样式等，如图式、超

38、链接反转样式等，如图7-2-6所示。所示。 边距。上、下、左、右边距分别可以设置边距。上、下、左、右边距分别可以设置网页内容与浏览器窗口的距离。边距宽度可网页内容与浏览器窗口的距离。边距宽度可以设置左右边距为相同的宽度，边距高度以设置左右边距为相同的宽度，边距高度可以设置上下边距为相同的高度。可以设置上下边距为相同的高度。 样式。单击样式。单击“正文样式正文样式”弹出弹出“修改样式修改样式”对话框，如图对话框，如图7-2-7所示。可以更改网页中文所示。可以更改网页中文本的默认格式字体、段落、边框、编号方式、本的默认格式字体、段落、边框、编号方式、定位等。如果对网页中的特定文本或元素应定位等。如

39、果对网页中的特定文本或元素应用格式设置，则用格式设置，则“正文样式正文样式”设置对该文本设置对该文本或元素不起作用。或元素不起作用。 启用超链接翻转效果。当让指针停留在超启用超链接翻转效果。当让指针停留在超链接文本上时，将更改该文本的外观。文本链接文本上时，将更改该文本的外观。文本外观可以通过单击外观可以通过单击“翻转样式翻转样式”按钮进行设按钮进行设置。置。图7-2-6 “高级”选项卡图7-2-7 “修改样式”对话框第30页网页属性设置网页属性设置l“自定义自定义”选项卡选项卡 可以添加由可以添加由Meta属性包含的头信息变量，主要分为系属性包含的头信息变量，主要分为系统（统（HTTP-EQ

40、UIV）变量和用户（）变量和用户（User）变量。）变量。l“语言语言”选项卡。选项卡。可以设置网页语言、可以设置网页语言、HTML编码等。编码等。第31页保存网页保存网页l保存尚未保存的网页保存尚未保存的网页单击单击“常用常用”工具栏上的保存按钮。工具栏上的保存按钮。或者选择菜单或者选择菜单“文件文件”、“保存保存”命令，在打开的命令，在打开的“另存为另存为”对对话框中找到并双击要保存网页的文件夹。话框中找到并双击要保存网页的文件夹。在在“文件名文件名”框中，输入网页的文件名，然后单击框中，输入网页的文件名，然后单击“保存保存”按钮。按钮。l保存从当前站点打开的网页保存从当前站点打开的网页单

41、击单击“常用常用”工具栏上的保存按钮，工具栏上的保存按钮，或者选择菜单或者选择菜单“文件文件”、“保存保存”命令即可。命令即可。l保存从当前站点之外的位置打开的网页保存从当前站点之外的位置打开的网页选择菜单选择菜单“文件文件”、“另存为另存为”命令，命令，在弹出的在弹出的“另存为另存为”对话框中找到并双击要保存网页的文件夹，对话框中找到并双击要保存网页的文件夹，然后单击然后单击“保存保存”按钮。按钮。第32页打开网页打开网页l选择菜单选择菜单“文件文件”|“打开打开”命令，通过弹命令，通过弹出的出的“打开文件打开文件”对话框打开网页。对话框打开网页。l或者在或者在FrontPage 2003的

42、站点视图模式下，的站点视图模式下，双击网页文件名也可以打开网页。双击网页文件名也可以打开网页。第33页预览网页预览网页l网页在制作完成后，在设计视图下只能看到页面的大概形态，而动画、网页在制作完成后，在设计视图下只能看到页面的大概形态，而动画、视频、音频。视频、音频。l网页动态效果等需要在预览视图模式或者网页动态效果等需要在预览视图模式或者Web 浏览器中才能看到。浏览器中才能看到。l预览有两种方式：在预览有两种方式：在FrontPage预览视图中预览和在预览视图中预览和在Web 浏览器中浏览器中预览。预览。l预览网页首先要确定要浏览的网页处于打开状态。预览网页首先要确定要浏览的网页处于打开状

43、态。l（l）在）在FrontPage预览视图中预览预览视图中预览 单击单击FrontPage2003 窗口中左下角视图切换标签中的预览按钮，即可浏窗口中左下角视图切换标签中的预览按钮，即可浏览制作效果。览制作效果。l（2）在）在Web浏览器中预览浏览器中预览 选择菜单选择菜单“文件文件”、“在浏览器中预览在浏览器中预览”命令，选择浏览器，即可启动命令，选择浏览器，即可启动浏览器显示页面效果，其中浏览器后面的数字表示将按此大小打开浏览浏览器显示页面效果，其中浏览器后面的数字表示将按此大小打开浏览器窗口。器窗口。 或者单击或者单击“常用常用”工具栏上的工具栏上的“Microsoft Interne

44、t Explorer 6.0中的预中的预览览”按钮。按钮。第34页三、三、 网页中的文本操作网页中的文本操作 网页中大量的信息是文本，因此文本网页中大量的信息是文本，因此文本的操作是网页制作的基础。本节主要介绍的操作是网页制作的基础。本节主要介绍如何在设计视图模式下为网页输入文本，如何在设计视图模式下为网页输入文本，以及如何通过设置文本格式、段落格式、以及如何通过设置文本格式、段落格式、边框和底纹、列表等，使页面美观。边框和底纹、列表等，使页面美观。第35页文本的输入文本的输入l网页中文本和特殊字符的输入和前面讲解的方法基本一样，也有所不网页中文本和特殊字符的输入和前面讲解的方法基本一样，也有

45、所不同。同。 如果要产生一个新行，需要按下如果要产生一个新行，需要按下“ShiftEnter”键，换行标记为键，换行标记为“”“”。 要产生一个新的段落，直接按要产生一个新的段落，直接按“Enter”键，段落标记为键，段落标记为“”“”。l插入水平线。插入水平线。 当页面中内容比较多时，为了使网页内容结构清晰，可以通过插入水平当页面中内容比较多时，为了使网页内容结构清晰，可以通过插入水平线分隔内容。线分隔内容。 操作步骤为：选择插入位置，选择菜单操作步骤为：选择插入位置，选择菜单“插入插入”、“水平线水平线”命令。命令。l设置水平线。设置水平线。 双击水平线，在弹出的双击水平线，在弹出的“水平

46、线属性水平线属性”对话框，可以设置水平线的宽度、对话框，可以设置水平线的宽度、高度、对齐方式、颜色等。高度、对齐方式、颜色等。第36页文本的格式化文本的格式化l设置字体格式设置字体格式 网页中最重要的内容是文本，因此文本的格式化是网页网页中最重要的内容是文本，因此文本的格式化是网页制作的关键步骤之一。包括设置字体、字号、字体颜色制作的关键步骤之一。包括设置字体、字号、字体颜色和字符间距等。和字符间距等。 设置字体格式首先选中要设置字体的文本，选择方法与设置字体格式首先选中要设置字体的文本，选择方法与 Word 2003中的选定方式类似。中的选定方式类似。l颜色吸管颜色吸管 FrontPage

47、2003除了提供前面介绍的颜色选择方法外，除了提供前面介绍的颜色选择方法外，还可以使用颜色吸管选择页面文本或图片的颜色作为文还可以使用颜色吸管选择页面文本或图片的颜色作为文本的设定颜色本的设定颜色. 方法如下：选择菜单方法如下：选择菜单“格式格式”、“字体字体”命令，在打开命令，在打开的的“字体字体”对话框中，单击对话框中，单击“颜色颜色”下拉列表框，在弹下拉列表框，在弹出的下拉列表中选择出的下拉列表中选择“其他颜色其他颜色”，打开，打开“其他颜色其他颜色”对话框，如图对话框，如图7- 2 -8 所示。所示。 单击颜色选择按钮，鼠标就会变成颜色吸管。移动鼠标，单击颜色选择按钮，鼠标就会变成颜色

48、吸管。移动鼠标，在需要的颜色处单击鼠标，就会在在需要的颜色处单击鼠标，就会在“其他颜色其他颜色”对话框对话框中的中的“新建新建”颜色窗口中显示吸取的颜色，单击颜色窗口中显示吸取的颜色，单击“确定确定”按钮即可使用吸取的颜色。按钮即可使用吸取的颜色。图7-2-8 “其他颜色”对话框 第37页文本的格式化文本的格式化l设置字符间距设置字符间距 为了增加网页中文字与文字间的距离，需为了增加网页中文字与文字间的距离，需要设置字符间距。要设置字符间距。 首先选择要设置字符间距的文本，选择菜首先选择要设置字符间距的文本，选择菜单单“格式格式”、“字体字体”命令，弹出命令，弹出“字体字体”对话框，选择对话框

49、，选择“字符间距字符间距”选项卡，如图选项卡，如图7- 2 -9 所示。所示。 在在“间距间距”下拉列表框中可以设置间距方下拉列表框中可以设置间距方式：普通、加宽和紧缩。式：普通、加宽和紧缩。 在在“间距大小间距大小”微调框中输入以像素为单微调框中输入以像素为单位的间距大小。位的间距大小。 在在“定位定位”下拉列表框中可以设置字符高下拉列表框中可以设置字符高度相对于本行基线的高度，然后单击度相对于本行基线的高度，然后单击“确确定定”按钮。按钮。图7-2-9 “字符间距”选项卡第38页文本的格式化文本的格式化l设置标题级设置标题级 标题级可以用来设置不同的字体大标题级可以用来设置不同的字体大小，

50、在网页中可分为小，在网页中可分为6级不同大小的级不同大小的标题。标题。 1级标题字体最大，级标题字体最大，6级标题字体最级标题字体最小。小。 各级标题用来显示不同层次的主题，各级标题用来显示不同层次的主题，以区分各个主题的层次关系。以区分各个主题的层次关系。 设置标题级的方法为：选中需要设设置标题级的方法为：选中需要设置的标题，打开置的标题，打开“格式格式”工具栏上工具栏上的的“样式样式”下拉列表框，如图下拉列表框，如图7- 2 -10（a）所示，选择相应的标题。）所示，选择相应的标题。 在在 IE浏览器中浏览，显示效果如图浏览器中浏览，显示效果如图 7- 2 - 10（b）所示。）所示。图7