《网页制作软件FrontPage2003》由会员分享，可在线阅读，更多相关《网页制作软件FrontPage2003（63页珍藏版）》请在金锄头文库上搜索。
1、第第7章章 网页制作软件网页制作软件FrontPage 2003第第7章章 网页制作软件网页制作软件FrontPage 2003 7.1 认识中文版认识中文版FrontPage 20037.2 网站的基本操作网站的基本操作 7.3 网页的创建和编辑网页的创建和编辑7.4 表格和框架网页表格和框架网页7.5 网页动态元素网页动态元素7.6 设置网页属性设置网页属性7.7 网站发布网站发布第第7章章 网页制作软件网页制作软件FrontPage 20037.1 认识中文版认识中文版FrontPage 2003FrontPage 2003 7.1.1 中文中文FrontPage 2003的窗口界面的窗
2、口界面 执行“开始”“程序”“Microsoft Office FrontPage 2003”命令，可以启动FrontPage 2003。启动之后屏幕上就会出现如图7.1所示的中文FrontPage 2003窗口界面。它的窗口是由标题栏、菜单栏、工具栏、编辑区、状态栏和任务窗格等部分组成。 在编辑区的下方有4个标签，这是FrontPage 2003为用户编辑网页提供的4种编辑模式：“设计”、“拆分”、“代码”和“预览”。第第7章章 网页制作软件网页制作软件FrontPage 2003图7.1 中文FrontPage 2003窗口界面 第第7章章 网页制作软件网页制作软件FrontPage 20
3、03 7.1.2 中文中文FrontPage 2003FrontPage 2003的视图方式的视图方式 1.网页视图设计：该方式是系统默认的编辑模式，网页的编辑制作主要是在该方式下进行，其操作界面体现了所见即所得的风格。图7.2所示的是一个人网页在该方式下的效果。第第7章章 网页制作软件网页制作软件FrontPage 2003图7.2 “设计”视图方式 第第7章章 网页制作软件网页制作软件FrontPage 2003拆分：该方式下将编辑窗口拆分成上、下两部分：“代码”和“设计”，用户能够同时访问代码和设计网页。代码：每个网页对应于一个文件，使用FrontPage 2003编辑网页实际上是系统自
4、动生成相应的HTML文件。代码方式下，用户可以查看、编写和编辑HTML代码，如图7.3所示。第第7章章 网页制作软件网页制作软件FrontPage 2003图7.3 “代码”视图方式 第第7章章 网页制作软件网页制作软件FrontPage 2003预览：进入预览方式后，用户可以查看当前网页在浏览器中的显示效果。尽管设计方式也能显示网页的静态效果，但预览方式可以查看动态效果。第第7章章 网页制作软件网页制作软件FrontPage 2003 2文件夹视图图7.4 文件夹视图第第7章章 网页制作软件网页制作软件FrontPage 20033.远程网站视图4.报表视图图7.5 报表视图第第7章章 网页
5、制作软件网页制作软件FrontPage 20035.导航视图6.超链接视图7.任务视图图7.6 超链接视图第第7章章 网页制作软件网页制作软件FrontPage 20037.2 网站的基本操作网站的基本操作7.2.1 创建新网站创建新网站下面介绍使用模板及向导来创建网站的具体操作方法：执行“文件” “新建”命令，在出现的“新建”任务窗格中的“新建网站”选项栏下，单击“其他网站模板”选项，弹出如图7.7所示的“网站模板”对话框。在对话框的“指定新网站的位置”文本框中输入存放新网站文件的文件夹。双击要使用的模板或向导，打开模板或启动向导。在模板向导对话框中进行设置。设置完成后单击“完成”按钮即可。
6、第第7章章 网页制作软件网页制作软件FrontPage 2003图7.7 “新建”任务窗格及“网站模板”对话框第第7章章 网页制作软件网页制作软件FrontPage 20037.2.2 保存、关闭和打开网站保存、关闭和打开网站1.保存网站2.关闭网站3.打开网站第第7章章 网页制作软件网页制作软件FrontPage 2003 执行“视图” “文件夹列表”命令，在窗口中打开文件夹列表，然后在文件夹列表中指向网站，单击右键，在弹出的快捷菜单中选择“删除”命令，打开如图7.8所示的对话框，根据需要选择其中一项，单击“确定”按钮即可。7.2.3 删除网站删除网站第第7章章 网页制作软件网页制作软件Fr
7、ontPage 2003图7.8 “确认删除”对话框第第7章章 网页制作软件网页制作软件FrontPage 20037.3 网页的创建和编辑网页的创建和编辑7.3.1 创建网页创建网页1.创建网页执行“文件” “新建”命令，在“新建”任务窗格中的“新建网页”选项栏下，根据所需选择要创建的网页。如果要创建空白的网页，单击“空白网页”选项；如果要从FrontPage模板中创建网页，单击“其他网页模板”选项。在“新建”任务窗格中单击“其他网页模板”选项，打开“网页模板”对话框，在对话框中选择一个模板或向导，再单击“确定”按钮即可。第第7章章 网页制作软件网页制作软件FrontPage 20032.保
8、存、关闭和打开网页（1）保存网页（3）打开网页（2）关闭网页第第7章章 网页制作软件网页制作软件FrontPage 20031.设置字体格式 设置字体的格式时，选中要设置格式的文字，执行“格式” “字体”命令，打开 “字体”对话框，在该对话框中可以设置字体的各种属性。2.设置段落格式 设置段落格式时，选中要设置格式的段落，然后执行“格式” “段落”命令，打开 “段落”对话框。在对话框中用户可以设置对齐方式、缩进、段落间距等属性。7.3.2 编辑网页编辑网页第第7章章 网页制作软件网页制作软件FrontPage 20033.设置项目列表选中要创建列表的文本，然后执行“格式” “项目符号和编号”命
9、令，打开如图7.9（a）所示的“项目符号和编号”对话框。在该对话框的“图片项目符号”选项卡中，选中“使用当前主题中的图片”或“指定图片”单选项，可以设置图片项目符号列表，即将指定的图片显示在条目前。单击“编号”选项卡，切换到“编号”选项，如图7.9（b）所示。在该选项卡中为项目列表选择一种编号方式。单击“确定”按钮即可。第第7章章 网页制作软件网页制作软件FrontPage 2003图7.9 “项目符号和编号”对话框第第7章章 网页制作软件网页制作软件FrontPage 20031.插入水平线将插入点移到要插入水平线的位置。执行“插入” “水平线”命令，即在网页中插入一条系统默认的水平线。如果
10、要修改默认的水平线，则选中要修改的水平线后单击鼠标右键，然后从弹出的快捷菜单中选择“水平线属性”命令，或直接用鼠标双击水平线，打开如图7.10所示的“水平线属性”对话框。在此对话框中可以设置水平线的各项属性。7.3.3 插入对象插入对象第第7章章 网页制作软件网页制作软件FrontPage 2003图7.10 “水平线属性”对话框第第7章章 网页制作软件网页制作软件FrontPage 20032.插入图片将插入点移动到要插入图片的位置。执行“插入” “图片”“来自文件”命令，打开“图片”对话框。在该对话框中选择所需的图片文件，单击“插入”按钮。当关闭该网页时，FrontPage 2003会提示
11、用户保存此插入的图片，打开如图7.11所示的“保存嵌入式文件”对话框。单击“确定”按钮，新插入的图片将以独立的文件形式被默认保存到网页所在的文件夹中。第第7章章 网页制作软件网页制作软件FrontPage 2003图7.11 “保存嵌入式文件”对话框第第7章章 网页制作软件网页制作软件FrontPage 20033.插入视频 在网页中插入视频时，首先要将插入点移动到要插入视频的位置，然后执行“插入” “图片”“视频”命令，弹出 “视频”对话框，在该对话框中选择要插入的视频文件，单击“打开”按钮即可在网页中插入一个视频文件图标。如果要查看视频，可以单击网页视图编辑区下方的“预览”标签，切换到预览
12、方式。第第7章章 网页制作软件网页制作软件FrontPage 20031.网页横幅 必须先在“导航”视图中设置网站的导航结构，然后才能使用网页横幅，否则网页横幅在该网页上不可见。 在“网页”视图中，将插入点放在要添加网页横幅的位置，然后执行“插入” “网页横幅”命令，弹出如图7.12所示的“网页横幅属性”对话框。如果在该对话框中，单击选中“文本”按钮，将以文本形式显示网页的横幅；如果选中“图片”按钮，将以图片形式显示网页的横幅文本。7.3.4 插入插入Web组件组件第第7章章 网页制作软件网页制作软件FrontPage 2003图7.12 “网页横幅属性”对话框第第7章章 网页制作软件网页制作
13、软件FrontPage 20032.字幕在“网页”视图下，将鼠标移动到要创建字幕的位置。执行“插入” “Web组件”命令，弹出如图7.13所示的“插入Web组件”对话框。在该对话框的“组件类型”列表中，单击“动态效果”选项。在“选择一种效果”列表中，选中“字幕”选项。单击“完成”按钮，弹出“字幕属性”对话框，如图7.14所示。在“文本”文本框中输入字幕将要显示的文本，文本长度不限。第第7章章 网页制作软件网页制作软件FrontPage 2003图7.13 “插入Web组件”对话框第第7章章 网页制作软件网页制作软件FrontPage 2003如果要设定字幕文本的滚动方向，选中“方向”选项栏中的
14、“左”或“右”单选项。在“速度”选项栏可以设定字幕移动的速度。设置“延迟”增量框的值，调整字幕文本框每两次移动之间的时间间隔，单位为毫秒。在“数量”增量框里的值设置字幕文本每次移动的大小，单位是像素。在“表现方式”选项栏里设置字幕文本的运动方式。在“文本对齐方式”选项栏中设置字幕同四周文本的对齐方式。第第7章章 网页制作软件网页制作软件FrontPage 200311）在“大小”选项栏里可以设置字幕的大小，选中“宽度”和“高度”复选框，然后向对应的文本框里输入宽度和高度。12）在“重复”选项栏里可以设置字幕的重复次数。13）在“背景颜色”列表里设置字幕滚动文本的背景色。14）设置完成后单击“确
15、定”按钮。第第7章章 网页制作软件网页制作软件FrontPage 2003图7.14 “字幕属性”对话框第第7章章 网页制作软件网页制作软件FrontPage 20033.交互式按钮在“网页”视图中编辑窗口的底部，单击“设计”标签。将插入点移动到要添加按钮的位置。执行“插入” “交互式按钮”命令，弹出如图7.15所示的“交互式按钮”对话框。在“按钮”选项卡的“按钮”列表中，单击选择按钮样式。在“文本”框中，键入要显示在按钮上的文本。在“链接”框旁边，单击“浏览”按钮。找到并单击希望按钮所链接的文件、URL 或电子邮件地址，然后单击“确定”按钮。第第7章章 网页制作软件网页制作软件FrontPa
16、ge 2003图7.15 “交互式按钮”对话框第第7章章 网页制作软件网页制作软件FrontPage 20034.网站计数器在“网页”视图下将插入点移动到要插入网站计数器的位置。执行“插入” “Web组件”命令，弹出“Web组件”对话框。在该对话框的“组件类型”列表里选择“计数器”选项，在“选择计数器样式”列表里选择一种计数器样式，然后单击“完成”按钮，弹出如图7.16所示的“计数器属性”对话框。第第7章章 网页制作软件网页制作软件FrontPage 2003如果要将计数器设置为某个特定数字，则选中“计数器重置为”复选框，再在其后的文本框中键入数字。如果要在计数器中显示固定位数的数字，则选中“
17、设定数字位数”复选框，再在其后的文本框中键入数字。如果要使用自己定义的数字图形，则选中“自定义”按钮，再在其后的文本框中键入图形文件的相对位置。设置完成，单击“确定”按钮。第第7章章 网页制作软件网页制作软件FrontPage 2003图7.16 “计数器属性”对话框第第7章章 网页制作软件网页制作软件FrontPage 20037.3.5 创建超链接创建超链接1.创建超链接（1）创建文本超链接 在“网页”视图下，选定要建立超链接的文本，再执行“插入” “超链接”命令或单击常用工具栏上的“超链接”按钮，或单击鼠标右键，在弹出的快捷菜单中选择“超链接”命令，打开如图7.17所示的“插入超链接”对
18、话框。第第7章章 网页制作软件网页制作软件FrontPage 2003图7.17 “插入超链接”对话框第第7章章 网页制作软件网页制作软件FrontPage 2003（2）创建图片超链接 创建图片超链接的方法有两种：一种与创建文本超链接相同；另一种就是选中图片后，单击鼠标右键，在弹出的快捷菜单中选择“图片属性”命令，打开如图7.18所示的“图片属性”对话框。在“常规”选项卡的“默认超链接”栏里单击“浏览”按钮，从弹出的“编辑超链接”对话框中可以设置该图片的链接目标地址。第第7章章 网页制作软件网页制作软件FrontPage 2003图7.18 “图片属性”对话框第第7章章 网页制作软件网页制作
19、软件FrontPage 2003 还可以对图片的某一部分创建超链接，通常也称为设置热点。其方法是：选中某个要设置热点的图片，在图片工具栏中单击选择合适的热点设置按钮（ ），将鼠标定位到需要创建热点区域的左上角或右下角，然后拖动鼠标形成一个热点区域，松开鼠标后会自动弹出“插入超链接”对话框，在该对话框中设置要链接的目标地址即可。在浏览网页时，如果将鼠标移动到热点上，鼠标指针会变成手的形状，这时单击鼠标将跳转到相应的链接对象。第第7章章 网页制作软件网页制作软件FrontPage 20032. 创建和使用书签 在创建书签之前，首先将插入点定位到要创建书签的位置或者选定要创建书签的一些文本，然后执行
20、“插入” “书签”命令，打开如图7.19所示的对话框，在“书签名称”文本框中会自动显示出所选文本的内容，也可在此键入新的书签名称，最后单击“确定”按钮返回到“网页”视图，这时原来所选文本的下方出现了一条虚线，表明此处已经被建立成书签。 定义完书签之后，就可以创建链接到该书签的超链接。与前面介绍的创建超链接的方法相同，只是选择的目标地址不是网站或网页的地址，而是书签。 第第7章章 网页制作软件网页制作软件FrontPage 2003图7.19 “书签”对话框第第7章章 网页制作软件网页制作软件FrontPage 20037.3.6 使用网页主题使用网页主题在“网页”视图中打开要设置主题的网页。执
21、行“格式” “主题”命令，打开 “主题”任务窗格。在该窗格中显示了FrontPage 2003提供的所有主题图标。单击某一主题图标右侧的下拉按钮，弹出下拉菜单。如果要对整个网站使用主题，则单击“应用为默认主题”选项；如果要对所选网页使用主题，则单击“应用于所选网页”选项。如果要对所选主题进行修改，则单击“自定义”选项，在弹出的对话框中可以对主题的颜色、图形和文本进行修改。第第7章章 网页制作软件网页制作软件FrontPage 20037.4 表格和框架表格和框架1.表格操作（1）在网页中创建表格 执行“表格” “绘制表格”命令，手工绘制任意形状的表格；使用常用工具栏上的“插入表格”按钮，或执行
22、“表格” “插入”“表格”命令，快速地创建一个均匀分布的表格。第第7章章 网页制作软件网页制作软件FrontPage 2003（2）设置表格属性 在表格中单击右键，在弹出的快捷菜单中选择“表格属性”命令，打开如图7.20所示的“表格属性”对话框。 在该对话框中，可以设置表格的对齐方式、单元格填充、单元格间距、边框的粗细、边框的颜色、背景颜色以及表格三维边框的颜色等属性。需要说明的是，如果指定表格的边框粗细为0，则在浏览器中将不显示表格的边框线，但在FrontPage 2003的“网页”视图中将会用虚线来表示这些线条，当使用表格来布局页面时，一般应将表格的边框粗细设置为0。 第第7章章 网页制作
23、软件网页制作软件FrontPage 2003图7.20 “表格属性”对话框第第7章章 网页制作软件网页制作软件FrontPage 2003(3) 表格的其他操作 插入行或列 将插入点移动到想要插入行或列的位置上，执行“表格” “插入”“行或列”命令，打开如图7.21所示的“插入行或列”对话框，并在该对话框中选择要插入的是行还是列、要插入的行数或列数以及位置。 图7.21 “插入行或列”对话框第第7章章 网页制作软件网页制作软件FrontPage 2003 拆分单元格 将插入点移动到要拆分的单元格中，然后执行“表格” “拆分单元格”命令，打开如图7.22所示的“拆分单元格”对话框。在该对话框中选
24、择拆分成列还是拆分成行，以及拆分成多少列或行。图7.22 “拆分单元格”对话框第第7章章 网页制作软件网页制作软件FrontPage 2003 合并单元格 选中要合并的单元格，然后执行“表格” “合并单元格”命令即可。 删除单元格 选中要删除的单元格，然后执行“表格” “删除单元格”命令即可。 给表格添加标题 将插入点放置在表格的任意一个单元格中，然后执行“表格” “插入”“标题”命令，则系统会自动在表格的上方空出一行，并将插入点定位到该处，输入表格的标题即可。第第7章章 网页制作软件网页制作软件FrontPage 20032.创建与编辑框架网页（1）创建框架网页 可以利用FrontPage
25、2003提供的模板创建框架网页。执行“文件” “新建”命令，打开“新建”任务窗格，在该窗格中的“新建网页”选项栏下单击“其他网页模板”选项，在弹出的“网页模板”对话框中单击“框架网页”选项卡，在其中选择一个模板，如选择“横幅和目录”模板，预览其布局，在单击“确定”按钮即可创建一个基于模板的框架网页，如图7.23所示。 第第7章章 网页制作软件网页制作软件FrontPage 2003图7.23 新建框架网页第第7章章 网页制作软件网页制作软件FrontPage 2003 网页中每一个框架都有两个按钮：“设置初始网页”和“新建网页”。单击“设置初始网页”按钮将弹出如图7.24所示的“插入超链接”对
26、话框，可以在此设定该框架最初显示的网页地址；单击“新建网页”按钮，将出现一个空白网页供用户创建新的内容。图7.24 设置框架网页的初始网页地址第第7章章 网页制作软件网页制作软件FrontPage 2003（2）编辑框架网页 利用框架属性可以对框架进行调整和修改。在某个框架中单击鼠标右键，从弹出的快捷菜单中选择“框架属性”命令，或者执行“框架” “框架属性”命令，均会打开如图7.25所示的“框架属性”对话框，从中可以对该框架的名称、大小、边距以及是否显示滚动条等进行设置，直接用鼠标拖动边框也可以调节框架的大小。 框架拆分方法：先选中要拆分的框架，然后执行“框架” “拆分框架”命令，打开“拆分框
27、架”对话框，选定拆分方向后单击“确定”按钮即可。另外，将鼠标指针移动到框架边缘，按住Ctrl键的同时拖动鼠标也能完成拆分操作。 第第7章章 网页制作软件网页制作软件FrontPage 2003图7.25 “框架属性”对话框第第7章章 网页制作软件网页制作软件FrontPage 20037.5 网页动态元素网页动态元素7.5.1 网页动态（网页动态（DHTMLDHTML）效果）效果选定网页中要设置动态效果的文字，单击“DHTML效果”工具栏的“开启”下拉按钮，列表中提供了单击、双击、鼠标悬停和网页加载等四种事件，这里选择“网页加载”。单击“应用”下拉列表按钮，在其中选择一种方式。本例中选择“飞入
28、”。从“效果”下拉列表中选择一种效果方式，例如选择“从左侧”。设定好之后就可以在“预览”视图方式下看到设置的动态效果。 第第7章章 网页制作软件网页制作软件FrontPage 20037.5.2 网页过渡效果网页过渡效果 在需要设置过渡效果的网页中，执行“格式” “网页过渡”命令，打开“网页过渡”对话框，如图7.26所示。在“事件”选项栏中选择一种事件，它可以是进入网页、离开网页、进入网站和离开网站。在“过渡效果”列表框中选择一种效果，例如“从左下抽出”，最后单击“确定”按钮。第第7章章 网页制作软件网页制作软件FrontPage 2003图7.26 “网页过渡”对话框第第7章章 网页制作软件
29、网页制作软件FrontPage 20037.6 设置网页属性设置网页属性 网页属性的设置主要是在“网页属性”对话框中完成的。切换到“网页”视图，在当前编辑的网页中单击鼠标右键，从弹出的快捷菜单中选择“网页属性”命令，或者执行“文件” “属性”命令，均可打开“网页属性”对话框，如图7.27所示。第第7章章 网页制作软件网页制作软件FrontPage 2003图7.27 “网页属性”对话框第第7章章 网页制作软件网页制作软件FrontPage 20037.7 网页发布网页发布 可以使用“远程网站”视图将文件发布到任何位置，可以将网站发布到扩展Web服务器（也称为HTTP服务器，它存储的文件的URL以http:/开头）、支持文件传输协议FTP（一种通信协议，它使用户可以在网络上的远程位置之间传输文件）或基于网站的分布式创作和版本控制（WebDAV）（在万维网上发布和管理文件的应用程序协议。它为存储有关文件的信息提供支持，因此用户可以更改某个文件及其属性，而不必覆盖对于该文件进行的其它更改）的Web服务器、或文件系统上的某个位置。
