网页制作软件ront. Page 2003 1
HTML文件的结构 一个HTML文件大体分为以下几部分： <HTML> <HEAD> <TITLE>网页标题</TITLE> </HEAD> <BODY> 网页的内容 </BODY> </HTML> 2
HTML文件的结构 < HTML >和< /HTML >：超文本的开始和结束。 < HEAD >和< /HEAD >：超文本标题的开始和结束。 < TITLE >和< /TITLE >：超文本窗口标题的开始和结束， 它被显示在浏览器顶端的标题栏中。 < META >：是用来描述HTML文档的元信息，即文档文 档自身的信息。 < BODY >和< /BODY >：正文的开始和结束，它被显示 在浏览器中。其中可以包含许多元素，是HTML语言 的核心部分。 3
HTML命令 • 页面 • 字体 • 文字布局 • 图象 • 表单 • 表格 • 多媒体 4
• 用记事本，输入以下内容 <HTML> <HEAD> <TITLE>李正新的网页</TITLE> </HEAD> <BODY> 李正新欢迎您浏览 网页的内容…… </BODY> </HTML> • 文件——另存为 lzx. html • 一个简单的网页就制作好了，可以浏览。 5
本课要点 1. 站点的创建与发布。 2. 网页的基本编辑。 3. 表格的操作和利用表格布局。 4. 文本的设置。 5. 网页元素的插入 。 6. 超链接的基本操作。 7. 表单的基本概念和操作。 8. 框架式网页的制作。 9. 几种特殊动态效果的制作。 6
目 录 • 7. 1 认识Front. Page 2003 • 7. 2 案例1――茶文化网页制作 • 7. 3 案例2――调查表的制作 • 7. 4 案例3――个人就职网站 7
7. 1 认识Front. Page 2003 • Front. Page 2003的特点： 1. 更容易建立专业、精确的网站。 2. Front. Page 2003不仅可以用来制作网页，用户可 以使用它来建设和维护整个网站，更简单的检 测、更新你的网站。 作组用户可以通过 Front. Page 2003使分布在世界各地的子公司一起 作。 3. Front. Page 2003与其他 Office组件的整合性更加 提高，打开和运行的速度比Front. Page 2000更快。 8
一、 Front. Page 2003概述 Front. Page 2003是Office 2003组件之 一，运行与启动Office其他软件相同。 启动成功后，出现的初始画面可能因机 器使用情况的不同而不同，一般的界面 如图 7 -1所示，菜单部分与Office中的其 他软件相似，最大区别是 作区的左端 有一个视图栏，包含：网页、文件夹、 报表、导航、超链接、任务。 9
图 7 -1 Front. Page 2003启动后显示页面 10
二、视图栏 1．网页。编辑网页需在“网页”视图中进行。在“ 网页”视图中，有“设计”、“拆分”、“代码”和“预 览” 4张选项卡。 2．远程网站视图。同步此网站和远程网站之间的 文件。 3．文件夹视图。用于管理站点中的文件和文件夹。 11
4．报表视图。分析网站并管理其内容。 5．导航视图。显示站点的导航结构，用于 对站点结构的管理。 6．超链接视图。用于显示站点中每一页的 超链接。 7．任务视图。用于创建和管理站点中的任 务。 12
7. 2 案例1――茶文化网页制作 任务要求：为一茶吧制作一个个性化主页， 用于介绍茶知识、茶文化以及趣闻等， 其效果如图 28 -1所示 13
14
28. 3. 1新建网页 • ⑴ 启动Front. Page 2003。 • ⑵ 新建一张空白网页。 15
28. 3. 2设置网页属性 • ⑴ 单击快捷菜单中的“网页属性”对话框 选项，弹出“网页属性”对话框。 • ⑵ 在“网页属性”对话框中单击“格式”选项。 • ⑶ 在“背景”栏中选择“背景图片”选项。 • ⑷ 单击“浏览”按钮，选择“．．/素材 /image/house. jpg”文件，再单击“确定”按 钮，效果如图 28 -2。 16
17
28. 3. 3 表格设置 • 1．插入主表格并编辑 。 • ⑴ 单击“表格”菜单，选择“插入”子菜单 下的“表格”选项，弹出“插入表格”对话框。 在表格的“大小”栏中的“行数”选项设置为 “ 2”，列数设置为“ 1”，“边框”栏中的“粗 细”选项设置为“ 0”，其它参数设置如图 28 -3所示。 18
19
• ⑵ 单击“确定”按钮。 • ⑶ 选中第 1行，单击快捷菜单中的“拆分 单元格”选项，弹出“拆分单元格”对话框。 • ⑷ 在“拆分单元格”对话框中，选择“拆分 成列”选项，“列数”设置为“ 2”，如图 28 -4 所示。 20
21
• ⑸ 单击“确定”按钮。 • ⑹ 选择第 2列，单击快捷菜单中的“拆分 单元格”选项，弹出“拆分单元格”对话框。 • ⑺ 在“拆分单元格”对话框中选择“拆分成 行”选项，“行数”设置为“ 2”。 • ⑻ 单击“确定”按钮，主表格的效果如图 28 -5所示。 22
23
• 2．在第 1行第 1列的单元格中插入表格。 • 单击“表格”菜单，选择“插入”子菜单下的 “表格”选项，弹出“插入表格”对话框。在 “插入表格”对话框中，“行数”选项设置为 “ 1”，“列数”选项设置为“ 1”，“单元格衬 距”设置为“ 0”，“单元格间距”设置为“ 0”， “边框”栏中的“颜色”设置为“棕红色”，其 它参数如图 28 -6所示。 24
25
• 3．在第 1列插入表格并编辑。 • ⑴ 选择第 1列，单击“表格”菜单选择“插 入”子菜单下的“表格”选项，弹出“插入表 格”对话框。 • ⑵ 在“插入表格”对话框中“行数”选项设 置为“ 1”，“列数”选项设置为“ 1”，“粗细” 选项设置为“ 0”，其它参数如图 28 -7所示。 26
• ⑶ 单击“确定”按钮。 • ⑷ 单击快捷菜单的“表格属性”选项，弹出“表 格属性”对话框。 • ⑸ 选择“背景”栏中的“使用背景图片”选项。 • ⑹ 单击“浏览”按钮，选择“. . /素材 /image/house 1. jpg”图像文件。 • ⑺ 单击“打开”按钮，“表格属性”对话框属性设 置如图 28 -8所示。 • ⑻ 单击“确定”按钮 27
• 4．第 3行插入表格并编辑。 • ⑴ 单击“表格”菜单，选择“插入”子菜单 下的“表格”选项，弹出“插入表格”对话框。 • ⑵ 在“插入表格”对话框中“行数”选项设 置为“ 3”，“列数”选项设置为“ 6”，“单元 格衬距”选项设置为“ 1”，“单元格间距”选 项设置为“ 2”，在“边框”栏中的“粗细”选 项设置为“ 1”， “颜色”选项设置为“棕红 色”， 28
• ⑶ 单击“确定”按钮。 • ⑷ 选中第 1列的第 1、第 2、第 3行，单击 快捷菜单中的“合并单元格”命令；选中 第 3列的第 1、第 2、第 3行，单击快捷菜 单中的“合并单元格”命令；选中第 5列的 第 1、第 2、第 3行，单击快捷菜单中的“ 合并单元格”命令 29
28. 3. 4输入文本并编辑 ⑴ 在第 1列的嵌套表格中输入“广东人的茶 饮风俗、茶逢知已、苏轼与茶、新茶与 旧茶的鉴别、茶的分类、闽人钟情茶文 化、喝茶并不能解酒、中国古代‘斗茶’” 等文字，字体为宋体，字号 4号，颜色为 黑色， 30
⑵ 在第 3个表格的相应单元格内输入“茶知 识、茶的分类、饮茶的方式、新茶与旧 茶的鉴别、茶与人生、茶人逸事、茶逢 知已、品茶与心灵净化……”等文字，字 体为宋体，字号 4号，颜色为黑色， 31
⑶ 在主表格的第 2行输入文本（文字内容 保存于“. . 素材中国茶文化拾趣. doc”）， 字体为宋体，字号 4号，颜色为棕红色 32
• 2．保存网页。 • ⑴ 单击“文件”菜单下的“另存为”选项， 弹出“另存为”对话框。在“另存为”对话框 中，在“文件名”的文本框中输入文件名， 例如：indextea，文件类型为“网页”，或 html文件。 • ⑵ 单击“保存”按钮。 33
28. 3. 5插入图片 • ⑴ 选择主表格的右侧的第 1行。 • ⑵ 单击“插入”菜单，选择“图片”子菜单下的“ 来自文件”选项，选择“. . /素材/image/bgc. gif”图 像文件。 • ⑶ 单击“插入”按钮。 • ⑷ 选择图像，调整大小直至充满整个单元格。 34
28. 3. 6调试预览并保存网页 • 1．调试预览网页。 • 总体调试网页，在布局上还有不合理的 地方重新进行调整，并且边调整边预览， 直至达到满意的效果， 35
7. 3 案例2――茶文化网页制作 任务 2： 创建一读者调查表，如下图 30 -1所示， 把一Flash动画文件插入到学校主页. htm 文件中，增加网页的动感效果，最后把 制作好的网页进行发布。 36
37
30. 3. 1插入表单并设置 • 1．新建一个空白网页。 • 2．单击“插入”菜单，选择“表单”子菜单 下的“表单”选项，新建一个空白表单，“ 空白表单” • 3．在表单中插入一个表格 38
4．在表格的第 1行插入艺术字 • ⑴ 把光标定位在图片栏中的第 1行，单击“插入” 菜单，选择“图片”子菜单下的“来自文件”选项， 弹出“图片”对话框。 • ⑵ 在“图片”对话框中选择“. . /素材 /image 001. gif”图像文件，再单击“插入”按钮。 • 5．在表格的第 2行输入文字“基本信息调查：”， 字体格式设置为“宋体”，“ 3号”，“黑色”。 39
• 6．在表格的第 3行先输入文字“姓名：”， 再单击“插入”菜单，选择“表单”子菜单下 的“文本框”命令。 • 7．选择文本框，把鼠标指针移到控制点 处进行大小调整，直到一个比较适合的 大小 40
• 8．在表格的第 4行插入单选钮，效果如图 30 -5 所示。 • ⑴ 输入文字“性别：”。 • ⑵ 单击“插入”菜单，选择“表单”子菜单下的“ 选项按钮”命令。 • ⑶ 输入文字“男”。 • ⑷ 单击“插入”菜单，选择“表单”子菜单下的“ 选项按钮”命令。 • ⑸ 输入文字“女”。 41
• 9．在表格的第 5行插入下拉框 • ⑴ 输入文字“职业：”。 • ⑵ 单击“插入”菜单，选择“表单”子菜单下的“ 下拉框”命令。 • ⑶ 双击网页中新创建的下拉框，弹出“下拉框” 属性框。 • ⑷ 单击“添加”按钮，弹出“添加选项”对话框。 • ⑸ 在“添加选项”对话框中的“选项”文本框中输 入“学生”。 42
• ⑹ 单击“确定”按钮。 • ⑺ 重复⑷～⑹的操作，分别输入选项值 为“公司职员、教师、其他”。 • ⑻ 单击“确定”按钮。 43
• 10．在表格的第 6行创建复选框 • ⑴ 输入文字“喜欢本书哪里：”。 • ⑵ 单击“插入”菜单，选择“表单”中的“复 选框”命令。 • ⑶ 输入文字“封面”。 • ⑷ 重复第⑵～⑶的操作，输入的文字分 别为“案例、版式、内容、印刷”，直至 所有选项设置完成。 44
• 11．在表格的第 7行输入文字“意见与建议：”。 • 12．创建多行滚动文本框。 • ⑴ 把光标定位在表格的第 8行。 • ⑵ 单击“插入”菜单，选择“表单”子菜单下的“ 文本区”命令。 • ⑶ 双击新建的文本框，弹出“文本区属性”对话 框。 • ⑷ 在初始值的文本框中输入文字“不喜欢本书 的哪几个方面、改进意见：”，属性设置如图 30 -8所示。 45
46
• ⑸ 单击“确定”按钮。 • ⑹ 单击选中新创建的文本区，调节控制点，把 文本区调整到一个合适的大小，文本区设置完成。 • 13．在表格的第 9行输入文字“注册成为我 们的会员：”。 • 14．在表格的第 10行输入文字“用户名：”。 • 15．单击“插入”菜单，选择“表单”子菜单 下的“文本框”命令。 47
• 16．在表格的第 11行输入文字“密码：”。 • 17．插入一个密码框。 • ⑴ 单击“插入”菜单，选择子菜单下的“表单”下 的“文本框”。 • ⑶ 双击新创建的文本框，弹出“文本框属性”对 话框。 • ⑷ 单击密码域的值“是（Y）”的单选钮，该文 本框设置为密码域， 48
• 18．网页属性设置，设置网页的背景图 片为“. . /素材/image/bg. jpg”。 • 19．调试预览并保存网页 49
30. 3. 2建立超链接 • 1．打开“. . 素材index. htm”网页。 • 2．在网页的左下角的“读者调查”上创建 超链接。 • ⑴ 选择文字“读者调查”。 • ⑵ 单击快捷菜单中的“超链接”选项，弹 出“插入超链接”对话框 50
• ⑶ 在“插入超链接”对话框中选择“. . 素材 读者问卷调查表. htm”文件。 • ⑷ 单击“确定”按钮，超链接创建完成。 • 3．在导航栏中的“娱乐”选项上创建超链 接。 • ⑴ 选择文字“娱乐”。 • ⑵ 单击快捷菜单中的“超链接”选项，弹 出“插入超链接”对话框。 51
• ⑶ 在“插入超链接”窗口中选择“. . 素材 indextea. htm”文件。 • ⑷ 单击“确定”按钮，超链接创建完成。 52
30. 3. 3 插入组件 • ⑴ 打开“. . 素材index. htm”。 • ⑵ 把光标定位在网页右下的图像，删除 图像。 • ⑶ 单击“插入”菜单下的“Web组件”选项， 弹出“插入Web组件”对话框，如图 30 -11 所示。 53
54
• ⑷ 在“组件类型”窗口中选择“高级控件”， 在“选择一个控件”窗口中选择插件（也 可选择Flash影片）。 • ⑸ 单击“完成”按钮，弹出如图 30 -12的“ 插件属性”对话框。 55
56
• ⑹ 单击“浏览”按钮，选择“. . 素材fj. swf” 文件，单击“打开”按钮。 • ⑺ 单击“确定”按钮。 • ⑻ 单击新创建的组件框，拖动控制点， 把组件调整到一个合适的大小。 57
7. 4案例1――个人就业网站 本章案例“个人就业网站”， 该网站的主页上有5个板块，分别 是：学习经历、求职简历、求职须 知、课程成绩、作品图片。学生个 人就职网站结构图如图 7. 4 -1所示。 58
图 7. 4 -1学生个人就职网站结构图 59
7. 4. 1案例综述 案例中用到的知识点主要有：创建站点、文本 的格式化，网页属性的设置(网页背景颜色、背景 图片、网页标题、背景音乐)，插入层，水平线与 图像的插入，表格的制作及用表格布局，超链接( 文本超链接、图像超链接、热点超链接、书签超链 接)，表单的制作，框架网页制作，几种动态效果( 字幕、交互式按钮、动态DTML、站点计数器)，插 入Flash影片等。如图 7. 4 -2是用这些知识点制作的 个人就职网站主页。 60
61 图 7. 4 -2个人就职网站主页
7. 4. 2 站点的创建 所谓站点，就是多个相关网页通过各种链接 关联起来的集合。在使用Front. Page 2003 设计网页之前， 应建立一个本地站点，用 来管理创建的网页。 用户可以选择以下三种方式创建一个新的站 点： 62
（1）站点向导。包括“导入网站向导”、“公 司展示向导”、“数据库界面向导”、“讨论 网站向导”。 （2）站点模板。包括“个人网站” 、“客户支 持网站”、“项目网站”。 （3）自定义站点。包括“只有一个网页的站点 ” 、“空白网站”、“Share. Point 作组网 站”。 63
使用“只有一个网页的站点”创建学生 个人就职网站。 在Front. Page 2003的主窗口下，单击菜 单栏上的“文件”，在弹出的下拉菜单中选 中“新建”，在窗口的右边出现“新建”面 板，在新建项中选择“其他网站模板”。在 “站点”列表框中，选中“只有一个网页的 网站”图标，并在右边“指定新网站的位置 ”框中，输入新站点的名称。如图 7 -4“网 站模板”对话框 。 64
图 7. 4 -3 “网站模板”对话 框 65
7. 2. 3网页的基本编辑 一、新建一个网页 在Front. Page 2003的主窗口中，单击“视图 ”栏上的“网页”视图，使当前处于网页视图模 式下。单击菜单栏上的“文件”，在弹出的下拉 菜单中选中“新建”，在窗口的右边出现“新建 ”面板，在新建网页项中选择“其他网页模板”。 打开如图 7 -4所示的“网站模板”对话框。单击“ 常规”选项卡，在列表框中显示了 Front. Page 2003提供的创建网页的11种模板，包 括有普通网页、表单网页向导、常见问题、目录、 确认表单等。使用各类模板可以创建不同的网页。 66
二、保存网页 当前网页是新建的网页并且尚未保存，则单 击“常用” 具栏中的“保存”按钮，在弹出的“另 存为”对话框中找到并双击要保存网页的文件夹， 然后在“文件名”下拉列表框中输入网页的文件名 “index. htm”，再单击“保存”按钮即可。 如果当前网页是从当前网站打开的，则单击“ 常用” 具栏中的“保存”按钮即可。 如果当前网页是从当前网站之外的位置打 开的，则单击“文件”|“另存为”命令，在弹 出的“另存为”对话框中找到并双击要保存网页 的文件夹，并在“文件名”下拉列表框中输入网 页的文件名，最后单击“保存”按钮即可。 67
三、网页属性设置 网页的属性包括网页的背景颜 色、图片、网页的标题和网页的页 边距等。选择菜单“文件”→“属 性” 命令或在页面空白处右键单击 选择“页面属性”命令则可以在弹 出的对话框中进行设置， 68
如图 7 -5所示，或者在没有选中任 何对象的情形下，选菜单“格式 ”→“背景”，直接进行背景颜色 图片的设置。 69
图 7 -5 网页属性对话框 70
7. 2. 4表格 一、插入表格 在“表格” 菜单“插入”级 联式菜单中选择 “表格”命令， 出现如图 7 -6所 示。单击“确定 ”就可以网页中 71 插入表格。 图 7 -6 插入表格属性对话框
二、设置表格属性 • 表格属性设置若想设置表格的边框粗细、颜 色以及表格的背景可指向表格，用鼠标右键 单击表格，在弹出快捷菜单中选择“表格属 性”命令，打开“表格属性”对话框如图 76所示 。 72
大小：设置表格的行列数目。 布局：设置表格的对齐方式、边框粗细 （无边框为 0）、单元格边距（表格内单 元边框线之间的距离）、单元格间距（ 单元格内容与边框线之间的距离）。 指定宽度：指定宽度前，则在复选框前 打上“∨”，宽度单位有两种分别为像 素和百分比，百分比是相对浏览器而言， 像素则为绝对值。 73
三、编辑表格 1. 选定表格对象 选定单元格，执行“表格”→“选定” →“单 元格”命令；选定行、列或整个表格，在“表格 ”→“选定”中选择相应的命令即可。 2. 插入、删除表格对象 插入行或列，可以使用“表格”→“插入” →“行或列”命令，也可以用鼠标右击表格后在 快捷菜单中选择相应的命令。如果要删除行或 列，只要选定行或列后单击“表格” →“删除单 元格”命令即可删除。 74
• 3. 合并、拆分单元格 • 合并、拆分单元格的操作可以通过“表格” 菜单的“合并单元格”或“拆分单元格”命令来完 成。也可以通过右击鼠标后在弹出的快捷菜单 中选择相应的命令进行。 • 4. 设置表格或单元格属性 • 将打开“表格属性”或“单元格属性”对话框， 或右击鼠标弹出快捷菜单。 75
7. 2. 5 文本设置 一、输入文本 可选择两种方式：第一种是和在Word一样，可以 直接在Front. Page 2003的普通视图中输入文字， 文字的编辑修改和Word基本一样；第二种是可 以通过复制和粘贴从其他地方复制文字。 二、设置文字及段落格式 文字格式，包括“字体”、“字型”、“大小”、“颜色”、 “效果”以及字符间距的设置，以直接在格式 具 栏中进行，也可以选择菜单“格式”→“字体”命令， 也可以选择字符后右键单击选择“字体”命令。弹 出如图 7 -7所示对话框。 76
77 图 7 -7 文字格式对话框
7. 2. 6 网页元素的插入 一、插入换行符 网页中插入换行符可将网页中的一段 网页内容断开。Front. Page中的换行分成“ 隔行换行“（两行之间有空行）和“紧凑换 行”（两行间没有空行）两种，这两种换 行符的插入方法分别是： （ 1） 插 入 “隔 行 换 行 ”。 直 接 在 插 入 点 按 Enter键。。 （2）插入“紧凑换行”。先定位插入点，选 择 “插 入 ”菜 单 “换 行 符 ”命 令 ， 或 按 78 Shift+Enter组合键。
二、插入水平线 方法：光标定位于表格第二行，单击“插入” 菜单“水平线”命令，就可以在第二行中插入 水平线。单击刚插入的水平线，右键单击 在快捷菜单中选择“水平线属性”。如图 7 -8 水平线属性对话框。 图 7 -8 水平线属性对话框 79
三、插入图片和背景图片 1．插入图片 将插入点定位欲插入图片位置，选择“ 插入”菜单上的“图片”命令。从“图片”子菜 单中选择“来自文件”命令，在对话框寻找 需要的图片文件，单击“确定”按钮插入图 片。 在图片上右键单击，在快捷菜单中选 80 择“图片属性”，在图片属性对话框中可以
81 图 7 -9 插入图片对话框
2．设置背景 背景可由“背景图片”和“背景颜色”构成，其设置 在网页属性、表格属性或单元格属性中设置： （1）背影图片的设置：在“背景”选项卡中，选中“ 背景图片”复选框，然后在与之相关的文本框中 指定图片文件的位置。单击“浏览”按钮可以快速 定位图像文件。 （2）背景颜色的设置：在“背景”框中可以设置网 页的背景颜色。如果同时使用背景颜色和背景图 片，则背景图片将覆盖背景颜色。 （3）文字和超链接的颜色：在“文本”、“超链接” 等框架中可以设置普通文本、超链接文本的颜色。 82
四、层操作 1．插入层 方法是：“插入”菜单“层”命令。然后鼠标在 1行2列上拖动即可。 2．选择层 可以单击层的选择手柄、单击层边界等方 法，选择多层时候可以使用shift键来配合 使用。 83
3．调整层大小 选中层，然后在属性面板中输入宽度和 高度值。或直接用鼠标的在层的八个 控点上拖动调整大小。 4．移动层 无论是移动一个或多个层，先选中层， 用鼠标拖住最后一个选中层的手柄随 意移动。 84
五、插入插件 操作方法：移动鼠标在层中单击，选择“插 入”菜单上的“Web组件…”，在“插入Web 组件”对话框中“组件类型”选择“高级控件” 。选择“一个控件”中选择“插件”，弹出“ 插件属性”对话框。 85
六、插入背景音乐 具体操作步骤为：在网页视图模式下， 单击“文件”菜单“属性”命令或“格式”菜 单“背景”命令或右键单击网页快捷菜 单中选择“页面属性命令”。选择“常规” 选项卡，在“背景音乐”栏下“位置”框中 输入播放的声音文件的位置，若选中“ 不限次数”复选框，表示在浏览器中该 音频文件将持续地播放。 86
7. 2. 7 超链接概念：超链接是指站点内不同网页 之间、站点与站点之间的一种链接关系， 它不仅使站点内的每一个网页有机地联系 在一起上，而且使不同的站点之间建立了 联系。 87
• 使用超链接，浏览者可以从一个网页转 到另一个网页，从一个站点转到其他的 站点。除了指向网页和和站点，超链接 还可以指向图片、电子邮件地址、多媒 体文件，甚至可以指向一个程序。 88
一、为文本创建超链接 1．链接到网页 首先选定要建立超链接的文本，单击“插入”→“ 超链接”命令，或右键单击选定的文本在快捷 菜单中选择“超链接”，打开如图 7 -10所示的“ 插入超链接”对话框。 89
• 根据超链接的目标，用户可以从列表 框中选定某个网页文件，也可以直接 在“地址”文本框（URL）中输入要链 接的目标地址，还可以单击图标，从 弹出的“选择文件”对话框中选定链接 的目标文件。选定的目标文件地址均 会出现在地址文本框（URL）中。 90
图 7 -10 插入超链接对话框 91
2．链接到其他网站的网页 方法如下： （1） 首先选定要建立超链接的文本，单击“插入 ”→“超链接”命令，或右键单击选定的文本在快 捷菜单中选择“超链接”，打开如图 7 -10所示的“ 插入超链接”对话框。 92
• （2）在“编辑超链接”对话框中的地址文 本框中输入所需要链接的其他网站的网 页如 “http: //www. myjob. edu. cn/news_files/2008 417673. htm”, 单击“确定”按钮即可完成超 链接的设置。 93
3．链接到电子邮件 方法如下： （1）选中要电子邮件链接的文本，单击 具栏中的“插入超链接”按钮，打开“插 入超链接”对话框； （2）单击“电子邮件地址”选项，对话框 变成图 7 -10所示； 94
（3）在“要显示的文字”文本框中输入要 显示的文字，在“电子邮件地址”文本 框中输入邮件地址，在“主题”文本框 中输入主题； （4）单击“确定”按钮。 95
二、为图像创建超链接 1．图像的默认超链接 先选中图片，单击鼠标右键，在弹出的快捷 菜单中选择“超链接”菜单项，会弹出一个“ 编辑超链接”对话框或者单击“插入”菜单上 的“超链接”。 96
（1）如果要链接的是当前站点中的文件或 计算机中某个目录下的文件，则从列表 框中选择网页文件，查找该文件，单击“ 确定”按钮。 （2）如果要链接的网页或文件夹来自Web， 在“插入超链接”对话框中的地址文本框 中输入所需要链接的网站, 单击“确定”按 钮。 97
• （3）如果要链接的是电子邮件，打开“ 插入超链接”对话框，单击左边的电子邮 件地址，在“电子邮件地址” 文本框中输 入邮件地址，单击“确定”按钮。 98
2．图像的热点链接 热点是图像上具有超链接的区域，一幅图片上可以包含若 干个热点，单击图片中的这些热点可以跳转到不同的目 标。热点形状可以是矩形、圆形或多边形，热点位置可 自行确定。设置热点的方法如下： （ 99 图 7 -11 图片 具栏
1）选定图片后，在编辑区的底部会自动弹出如 图 7 -11所示的图片 具栏。 （2）单击图片 具栏的热点形状按钮（例如长 方形按钮），这时鼠标变成铅笔形状，将光 标定位到需创建热点区域的左上角或右下角， 然后拖动鼠标形成一个热点区域，松开鼠标 后会自动弹出“创建超链接”对话框。 （3）在“创建超链接”对话框中设定链接目标。 100
三、书签的设置和使用 利用书签实现网页内部跳转。 （1）选定要插入书签的位置。 （2）单击“插入”→“书签”命令，弹出 “书签”对话框。在对话框内输入书签名 后单击“确定”按钮，即可创建一个书签。 （3）建立书签后，就可以创建链接到该书 签的超链接。创建的方法和建立超链接的 方法相同，只是选择书签作为超链接的目 标。 101
7. 2. 8 表单 表单是用来收集浏览者的用户名、密码、E-mail地址、 个人爱好和联系地址等用户信息的输入区域集合。 图 7 -12公司概况表单 。Front. Page 2003提供了文本 框、文本区、单选按钮、复选框、下拉框、提交按 钮和重置按钮等丰富的表单域。 图 7 -12 公司概况表单 102
103
• 一、插入表单 单击“插入” →“表 单” →“表单”命 令，在网页上插入 一个表单。在表单 内输入所需的文本， 例如“姓名”、“性别 ”等，然后在对应的 104 位置插入表单对象。 图 7 -13 表单域类型
• 二、表单域的类型 1．文本框 2．下拉菜单 3．复选框 4．选项按钮 5．文本区 6．按钮 105
7. 2. 9 框架式网页 框架网页是—种特殊的网页，它可将浏览 器窗口分成不同的区域，每个区域都可 以显示不同的网页。 1．创建框架 单击菜单栏上的“文件”，在弹出的下拉 菜单中选中“新建”，在窗口的右边出 现“新建”面板，在新建项中选择“其 他网站模板”。然后在弹出的“网页模 板”对话框中选择“框架网页”选项卡， 如图 7 -14所示。 106
2．设置框架属性 鼠标右击某个框架后，在弹出的快捷菜 单中可以设置“框架属性” 。 107
图 7 -14 新建框架网页对话框 108
二、显示或隐藏框架线 在创建网页时，有时为了达到特殊的显示 效果，可以将框架线去掉。选择“文件 ”菜单上“属性”命令，打开“网页属 性”对话框，然后选择“框架”选项卡。 用户还可以在设置每个框架的属性时， 单击“框架属性”对话框中的“框架网 页”按钮，显示边框前“√”去掉就可 以隐藏框架线。 109
三、框架网页的保存 在多框架网页中，每个框架都将单独形成一 个文件，整个网页也需要一个文件。在图 7 -15中建立的框架网页含有3个框架，将产 生 4个文件。保存时，单击“文件” →“ 保存”命令，会出现 4次“另存为”对话 框，“另存为”对话框预览区将指示所保 存的框架对象。 110
保存一个框架的网页后，Front. Page 2003 会对每一个尚未保存的新网页或框架网 页重复进行此操作，直到全部网页和框 架网页都保存为止。 111
图 7 -15 保存框架网页对话框 112
7. 2. 10 动态效果 • 二、特殊效果 Front. Page 2003 的组件功能可以为网页加入动态 效果，设计出生动活泼的Web网页。 1．字幕 2．站点计数器 3．交互式按钮 4．设置网页过渡方式 5. 设置动态HTML效果 113
7. 2. 11 站点的发布 • 一、测试网页 网页制作完成后还需要对网页进行测试，以检查 每个网页的功能是否实现，超链接是否正确等。 114
1．拼写检查是网页测试时最基本的一项检查， 可以使用Front. Page 2000自带的拼写检查 功能，它可以检查并修改整个站点所有 页面的英文拼写及语法错误。 115
2．检查网站的超链接 要检查网站中每一处超链接是否正确，其步骤如 下： （1）启动Front. Page 2000，打开站点，单击视图 栏的“超链接”按钮，切换到超链接视图。双 击其主页图标打开主页。 116
（2）单击 具栏中的“在浏览器中预览”按 钮，并把浏览器窗口最大化。依次点击网页 中的超链接，检查它们的指向是否正确。 （3）使用“ 具”栏中的“重新计算超链接 ”选项，将所有超链接状态视图变成激活状 态，能同时进行超链接验证。 若发现某个超链接出现问题，应做好记录并 到相应网页中修改。 117
• 二、发布站点 网页制作完成并经过测试后，就可以把站 点网页发布到Internet的某个Web服务器 上，使Internet上的每个用户都能访问到 该站点。 118
• 通过本课学习，应理解和掌握： 1. 站点的创建与发布。 2. 网页的基本编辑。 3. 表格的操作和利用表格布局。 4. 文本的设置。 119
• 5. 网页元素的插入 。 6. 超链接的基本操作。 7. 表单的基本概念和操作。 8. 框架式网页的制作。 9. 几种特殊动态效果的制作。 120
Скачать презентацию 网页制作软件ront Page 2003 1 HTML文件的结构 一个HTML文件大体分为以下几部分
3a42771beb5ac9ca72f8e8e5a096998b.ppt