FrontPage.ppt

《FrontPage.ppt》由会员分享，可在线阅读，更多相关《FrontPage.ppt（22页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、网页设计与制作第第4章章 FrontPage 2003基础知识基础知识 1网页设计与制作 4.1 FrontPage 2003概述概述 4.1.1 FrontPage 2003功能特点功能特点 和以前的版本相比，和以前的版本相比，FrontPage 2003增加增加了以下新功能。了以下新功能。1自定义浏览器分辨率预览检查自定义浏览器分辨率预览检查 2描摹图像描摹图像 3层功能层功能 4插入交互式按钮插入交互式按钮 5行为的应用行为的应用 6使用网页重定向使用网页重定向 7检查网页错误检查网页错误 8优化优化HTML代码代码 9规划页面布局规划页面布局 2网页设计与制作 4.1.2 FrontP

2、age 2003工作界面工作界面 图图4-1 FrontPage 2003的工作界面的工作界面 3网页设计与制作 4.2 网站的创建和管理网站的创建和管理 4.2.1 网站的创建网站的创建 FrontPage 2003采用了多元化的方案来方便用户创建采用了多元化的方案来方便用户创建站点。用户可以分别通过模板和向导来建立站点，也可以站点。用户可以分别通过模板和向导来建立站点，也可以抛开模板和向导，创建具有个人风格的站点。抛开模板和向导，创建具有个人风格的站点。1使用模板创建站点使用模板创建站点2使用站点向导创建站点使用站点向导创建站点 4.2.2 网站的基本操作网站的基本操作1打开站点打开站点2

3、导入站点导入站点3修改网站名称修改网站名称4删除站点删除站点4网页设计与制作 4.2.3 网站的管理网站的管理 FrontPage 2003提供了简单而强大的网站管理方案。提供了简单而强大的网站管理方案。打开一个网站后，在工作区的左下角将显示文件夹视图、打开一个网站后，在工作区的左下角将显示文件夹视图、远程网站视图、报表视图、导航视图、超链接视图、任务远程网站视图、报表视图、导航视图、超链接视图、任务视图等视图选项，通过它们可以实现对网站的管理。视图等视图选项，通过它们可以实现对网站的管理。1文件夹视图文件夹视图2远程网站视图远程网站视图3报表视图报表视图4导航视图导航视图5超链接视图超链接视

4、图6任务视图任务视图5网页设计与制作 4.2.4 网页的创建和管理网页的创建和管理 1新建网页新建网页1）新建空白网页）新建空白网页2）使用模板创建网页）使用模板创建网页2保存网页保存网页3打开网页打开网页4关闭网页关闭网页6网页设计与制作 4.3 网页的文字处理网页的文字处理 4.3.1 网页标题的建立网页标题的建立 网页标题是指显示在浏览器标题栏中的文本，如图网页标题是指显示在浏览器标题栏中的文本，如图4-21所示。所示。图图4-21 网页标题网页标题 要更改网页标题有两种方法：要更改网页标题有两种方法：（1）选择）选择“文件文件”|“属性属性”菜单项，在弹出图菜单项，在弹出图4-22的的

5、“网页属性网页属性”对话框的对话框的“常规常规”选项卡的选项卡的“标题标题”文本框文本框中，输入要更改标题的文本，然后单击中，输入要更改标题的文本，然后单击“确定确定”按钮即可。按钮即可。（2）选择）选择“文件文件”|“另存为另存为”菜单项，在弹出的对话菜单项，在弹出的对话框中，单击如图框中，单击如图4-23中的中的“更改标题更改标题”按钮，会弹出按钮，会弹出“设置设置网页标题网页标题”对话框，如图对话框，如图4-24所示。在所示。在“网页标题网页标题”文本框文本框中输入要更改标题的文本，然后单击中输入要更改标题的文本，然后单击“确定确定”按钮即可。按钮即可。7网页设计与制作 4.3.2 文字

6、的添加文字的添加 在网页中添加文字是在网页中添加文字是FrontPage中的一项最基本的中的一项最基本的操作，在操作，在FrontPage中文本的输入和中文本的输入和Word或者或者WPS的文的文字编辑功能类似，支持输入、复制、剪切、粘贴等功能。字编辑功能类似，支持输入、复制、剪切、粘贴等功能。在输入文本的时候，如果文本已经到达网页的右边界，在输入文本的时候，如果文本已经到达网页的右边界，文本会自动换行。如果需要产生一个新的行，可以按文本会自动换行。如果需要产生一个新的行，可以按Shift+Enter快捷键进行强制换行，如图快捷键进行强制换行，如图4-25所示为换行所示为换行的效果；如果需要产

7、生一个新的段落，则可以直接按的效果；如果需要产生一个新的段落，则可以直接按Enter键，如图键，如图4-26所示为换段的效果（所示为换段的效果（FrontPage中行与中行与段之间的区别：行在段之间的区别：行在HTML语言中的标记是语言中的标记是，本，本行与上一行之间在位置上的衔接是紧密的；段在行与上一行之间在位置上的衔接是紧密的；段在HTML语言中的标记是语言中的标记是，本段与上一段之间在位置上会多，本段与上一段之间在位置上会多出一个空行的距离）。出一个空行的距离）。8网页设计与制作4.3.3 文字的修饰文字的修饰1使用格式工具栏修饰字体使用格式工具栏修饰字体2使用格式对话框使用格式对话框3

8、设置边框和底纹设置边框和底纹4其他网页元素的添加其他网页元素的添加1）插入水平线）插入水平线2）插入时间和日期）插入时间和日期3）插入特殊符号）插入特殊符号4）插入站点计数器）插入站点计数器5）插入列表）插入列表（1）创建项目符号列表。）创建项目符号列表。（2）创建编号列表。）创建编号列表。9网页设计与制作 4.4 网页图像的基本操作网页图像的基本操作 在网页制作过程中使用图像，目的是美化页面，通过在网页制作过程中使用图像，目的是美化页面，通过图像展示页面所具有的个性，可以更好地吸引浏览者。图像展示页面所具有的个性，可以更好地吸引浏览者。网页支持的图像格式主要有：网页支持的图像格式主要有：GI

9、F、JPEG、BMP、TIFF、TGA、RAS、EPS、PCX、PNG、PCD、WMF等。等。在网页设计时使用最多的图像格式是在网页设计时使用最多的图像格式是GIF和和JPEG。在。在FrontPage 2003中会自动按图像颜色的多少进行图像格式中会自动按图像颜色的多少进行图像格式转换，当图像颜色多于转换，当图像颜色多于256种颜色，转换为种颜色，转换为JPEG格式，否格式，否则转为则转为GIF格式。格式。4.4.1 图像的添加图像的添加 在在FrontPage中可以插入本地计算机上的图像也可以中可以插入本地计算机上的图像也可以插入插入FrontPage剪贴库中的图案和艺术字。剪贴库中的图案

10、和艺术字。1从本地文件夹中添加图像从本地文件夹中添加图像2插入剪贴画插入剪贴画3插入艺术字插入艺术字4插入背景图片插入背景图片10网页设计与制作 4.4.2 图像的编辑图像的编辑 在网页中，单击一幅图片，选择在网页中，单击一幅图片，选择“视图视图”|“工具栏工具栏”|“图片图片”菜单项，弹出如图菜单项，弹出如图4-49所示的所示的“图片图片”工具工具栏，通过图片工具栏可以对图像进行简单编辑。栏，通过图片工具栏可以对图像进行简单编辑。图图4-49 图片工具栏图片工具栏1图片的属性设置图片的属性设置2在图片上添加文本在图片上添加文本3设置自动缩略图设置自动缩略图4图片的裁切图片的裁切5设置图片的替

11、代文本设置图片的替代文本 4.4.3 图像的保存图像的保存 11网页设计与制作 4.5 建立超链接建立超链接 常用的超链接形式有文本超链接、图像超链接和常用的超链接形式有文本超链接、图像超链接和电子邮件超链接。电子邮件超链接。4.5.1 文本超链接文本超链接1建立文本超链接建立文本超链接2编辑文本超链接编辑文本超链接（1）设置超链接的颜色。）设置超链接的颜色。（2）设置超链接的字体。）设置超链接的字体。4.5.2 图像超链接图像超链接 在制作网页时经常会用到图像超链接。图像超链在制作网页时经常会用到图像超链接。图像超链接可分为普通图像超链接和热点链接两种。普通图像接可分为普通图像超链接和热点链

12、接两种。普通图像超链接是指一幅图像只有唯一一个超链接，而热点链超链接是指一幅图像只有唯一一个超链接，而热点链接是指在一幅图像上的不同区域各自拥有不同的链接，接是指在一幅图像上的不同区域各自拥有不同的链接，也就是说一幅图像上有多个链接。也就是说一幅图像上有多个链接。1为普通图像添加超链接为普通图像添加超链接2设置热点链接设置热点链接12网页设计与制作 4.5.3 邮件超链接邮件超链接 可以在网页中添加一个指向网站设计者电可以在网页中添加一个指向网站设计者电子邮件的超链接，方便浏览者和他联络。子邮件的超链接，方便浏览者和他联络。4.5.4 书签超链接书签超链接 书签是隐藏的书签是隐藏的HTML标记

13、，因为它对浏览标记，因为它对浏览者来说是不可视的，而在者来说是不可视的，而在FrontPage编辑状态下编辑状态下是可视的。使用书签超链接在浏览网页时可以是可视的。使用书签超链接在浏览网页时可以快速实现内容的跳转，在页面中先创建书签，快速实现内容的跳转，在页面中先创建书签，再创建指向当前页面不同书签的超链接，就可再创建指向当前页面不同书签的超链接，就可以实现在同一个页面里快速跳转到指定内容的以实现在同一个页面里快速跳转到指定内容的功能，当然也可以在多个网页之间进行跳转。功能，当然也可以在多个网页之间进行跳转。13网页设计与制作 4.6 建立表格建立表格 表格是网页设计中使用最频繁、最重要的元素

14、之表格是网页设计中使用最频繁、最重要的元素之一，通常使用表格来排列数据、布局版面。用表格布一，通常使用表格来排列数据、布局版面。用表格布局网页，便于网页元素的编辑和插入，提高网页的有局网页，便于网页元素的编辑和插入，提高网页的有序性、条理性、规划性；没有用表格布局的页面，在序性、条理性、规划性；没有用表格布局的页面，在向页面中添加网页元素的时候往往会出现定位错误；向页面中添加网页元素的时候往往会出现定位错误；使用表格布局还具有随意性，可以根据自己的喜好，使用表格布局还具有随意性，可以根据自己的喜好，自由地将表格拆分、合并和定位。自由地将表格拆分、合并和定位。4.6.1 表格的创建表格的创建 在

15、在FrontPage 2003中插入表格的方法有很多种，中插入表格的方法有很多种，如使用如使用“插入表格插入表格”按钮、使用菜单项、使用手绘表按钮、使用菜单项、使用手绘表格等。格等。1使用使用“插入表格插入表格”按钮创建表格按钮创建表格2使用菜单项创建表格使用菜单项创建表格3使用使用“手绘表格手绘表格”创建网页创建网页14网页设计与制作 4.6.2 表格的基本操作表格的基本操作1表格的基本操作表格的基本操作1）选择表格）选择表格2）插入行或列）插入行或列3）删除行或列）删除行或列2单元格的基本操作单元格的基本操作1）选择单元格）选择单元格2）删除单元格）删除单元格3）合并单元格）合并单元格4）

16、拆分单元格）拆分单元格3表格的嵌套表格的嵌套4.6.3 表格的设置表格的设置1设置表格属性设置表格属性2设置单元格的属性设置单元格的属性15网页设计与制作 4.6.4 表格的网页布局功能表格的网页布局功能 表格的一个重要作用就是表格的布局功能，表格的一个重要作用就是表格的布局功能，在以往的在以往的FrontPage版本中一般是利用普通的版本中一般是利用普通的表格来布局页面，在表格来布局页面，在FrontPage 2003中引入了中引入了一些新的布局功能。一些新的布局功能。1使用表格布局使用表格布局2使用布局表格布局使用布局表格布局3手工绘制创建布局表格布局页面手工绘制创建布局表格布局页面16网

17、页设计与制作 4.7 建立表单建立表单 网站的交互性一般是通过表单程序来实现的，网页浏网站的交互性一般是通过表单程序来实现的，网页浏览者将信息通过表单发送到览者将信息通过表单发送到Web服务器端，服务器端，Web服务器接收服务器接收后做出相应的回应，最终将反馈信息返回到个人的浏览器。后做出相应的回应，最终将反馈信息返回到个人的浏览器。4.7.1 表单的构成表单的构成 表单由表单域组成，表单域的主要构成如下。表单由表单域组成，表单域的主要构成如下。文本框文本框：提供输入单行的文本，如：姓名、密码等。：提供输入单行的文本，如：姓名、密码等。文本区文本区：提供输入多行的文本，如：论坛中的签名、：提供

18、输入多行的文本，如：论坛中的签名、个人简介等。个人简介等。选项按钮选项按钮：提供单项选择，如：性别选择、学历选择：提供单项选择，如：性别选择、学历选择等。等。复选框复选框：提供多项选择，如：个人爱好、性格选项等。：提供多项选择，如：个人爱好、性格选项等。下拉框下拉框：提供下拉式菜单，如：国籍、属性等。：提供下拉式菜单，如：国籍、属性等。按钮按钮：提供提交表单和重置表单等功能。：提供提交表单和重置表单等功能。图片图片：提供图片用作提交按钮，如：论坛注册中的头：提供图片用作提交按钮，如：论坛注册中的头像选择等。像选择等。17网页设计与制作4.7.2 使用模板创建表单使用模板创建表单4.7.3 使用

19、向导创建表单使用向导创建表单4.7.4 自定义表单自定义表单18网页设计与制作 4.8 框架的使用框架的使用 框架是一种特殊的网页布局，之所以说特殊是因为框架是一种特殊的网页布局，之所以说特殊是因为它并不是真正意义上的网页布局工具。表格和布局表格它并不是真正意义上的网页布局工具。表格和布局表格是在现有的一个页面上将网页进行区块的划分，然后在是在现有的一个页面上将网页进行区块的划分，然后在这些区块中填入网页元素，而这些区块中填入网页元素，而“框架框架”只给网页分区，只给网页分区，而不提供实际内容，每个框架都可以显示独立内容的网而不提供实际内容，每个框架都可以显示独立内容的网页，也就是说有框架的网

20、页可以根据框架数同时显示多页，也就是说有框架的网页可以根据框架数同时显示多个独立内容的网页。个独立内容的网页。4.8.1 框架的创建与保存框架的创建与保存1框架的创建框架的创建2框架的保存框架的保存 4.8.2 框架的基本操作框架的基本操作1拆分框架拆分框架2删除框架删除框架3设置框架链接设置框架链接 4.8.3 框架的属性设置框架的属性设置19网页设计与制作 4.9 一些特殊效果的运用一些特殊效果的运用 4.9.1 制作不断弹出提示窗口的页面制作不断弹出提示窗口的页面 这种类似于恶作剧的页面效果，是通过这种类似于恶作剧的页面效果，是通过JAVA小程序小程序来实现的，但是很多网页设计的爱好者对

21、于编程并不是来实现的，但是很多网页设计的爱好者对于编程并不是十分了解。基于这种原因，十分了解。基于这种原因，FrontPage 2003提供了能够在提供了能够在网页中直接插入网页中直接插入JAVA脚本程序的脚本程序的“行为行为”功能，使用起功能，使用起来十分简单方便，使网页设计爱好者能够在不精通编程来十分简单方便，使网页设计爱好者能够在不精通编程的情况下也能够使用这些网页特效。的情况下也能够使用这些网页特效。4.9.2 插入滚动字幕插入滚动字幕 滚动字幕是用来显示滚动文本的，如站点更新内容滚动字幕是用来显示滚动文本的，如站点更新内容的公告等。的公告等。4.9.3 创建交互式按钮创建交互式按钮

22、交互式按钮是一种具有动态效果的按钮，当鼠标悬交互式按钮是一种具有动态效果的按钮，当鼠标悬停在按钮上时，按钮的样式就会发生变化停在按钮上时，按钮的样式就会发生变化。4.9.4 消除超链接的下划线消除超链接的下划线 在网页中对文字设置完超链接后，超链接文字下会在网页中对文字设置完超链接后，超链接文字下会出现一条下划线，有时候为了页面风格的统一和美观，出现一条下划线，有时候为了页面风格的统一和美观，需要将超链接文字下面的下划线去掉。需要将超链接文字下面的下划线去掉。20网页设计与制作 4.10 网站的测试与发布网站的测试与发布 一个网站在发布前应该先对其进行一系列的测试和一个网站在发布前应该先对其进

23、行一系列的测试和修改，以确保发布后能正常工作。修改，以确保发布后能正常工作。4.10.1 网站的测试网站的测试 （1）在）在FrontPage 2003中打开要测试的站点。中打开要测试的站点。（2）选择）选择“视图视图”|“报表报表”|“网站摘要网站摘要”菜单项，菜单项，单击报表视图。在报表视图中可以显示所有文件的数量、单击报表视图。在报表视图中可以显示所有文件的数量、大小、未链接的文件和断开的链接等信息，如图大小、未链接的文件和断开的链接等信息，如图4-157所所示。示。（3）单击）单击“报表报表”中的某一项内容查看具体信息。中的某一项内容查看具体信息。（4）根据）根据“报表报表”视图提供的信息找出网页存在的视图提供的信息找出网页存在的问题并立即修改。如：断开的超链接、无效的超链接、问题并立即修改。如：断开的超链接、无效的超链接、组件错误等。组件错误等。4.10.2 网站的发布网站的发布21网页设计与制作 4.11 综合实例综合实例 利用利用FrontPage 2003来制作一个网站的首页。来制作一个网站的首页。详见书上。详见书上。22