实验10  网页设计制作与发布
10.1  实验目的
①掌握在FrontPage 2003中创建网页的方法。
②掌握在FrontPage 2003中创建小型网站的基本方法。
③掌握运用FrontPage 2003发布站点的方法。
10.2  实验预备知识
① FrontPage 2003的工作窗口、网页视图模式、HTML编码和超链接。
②网站模板、网站视图模式与主题。
③网站测试、站点发布和远程Web服务器。
10.3  实验工具与环境
①微型计算机系统一套。
② Windows XP操作系统和Office FrontPage 2003应用软件。
③实验所需素材。
10.4  实验内容
FrontPage 2003提供类似于Word字处理软件的界面来帮助用户创建网页，是一种能够快速便捷地制作网页的工具。通过它提供的HTML标注视图，还可查看与编辑网页的编码。无论用户是否具有网页制作经验，通过使用其中的菜单或按钮，便可在网页上插入或编辑文本、图形、动画等信息，制作精美的网页、创建漂亮的站点。
10.4.1  创建一个网页文档
任务在FrontPage 2003中创建一个如图10-1所示“我的家园”的网页，插入素材图片文件，并在网页底部设置一个自右向左滚动的光带字幕。
实验步骤与操作参考：
(1) 启动FrontPage 2003
选择“开始/所有程序/Microsoft Office/Microsoft Office FrontPage 2003”，运行FrontPage 2003，打开FrontPage 2003工作窗口，如图10-2所示。
(2) 选择布局格式
实验10  网页设计制作与发布
177
图10-1所示网页的布局属于一种“厂”字型，因此可在网页上先用表格进行网页的布局。选择“表格/布局表格和单元格”，打开“布局表格和单元格”任务窗格，在“表格布局”列表框中选中“角部、标题、左侧和正文”布局格式，如图10-3所示。
图10-1 “我的家园”网页
图10-2  FrontPage 2003工作界面                图10-3 “布局表格”列表框
(3) 制作横幅标题
① 光标定位于左上角单元格，选择“插入/图片/来自文件”，打开“图片”对话框。插入素材文件夹中“图标.gif ”图片，调整好图片的大小和位置。
② 将光标定位于右上角单元格，选择“插入/日期和时间”，打开“日期和时间”对话框。选定显示日期的格式，在该单元格中插入日期。选中插入的日期，将字体设置为“方正舒体”、“褐”，并将日期排版在单元格底部、右对齐。
③ 插入艺术字体“欢迎进入我的家园”。
如直接在右上角单元格中插入艺术字体，则艺术字体在单元格中的大小和位置难以控制，因此，在网页上先插入一个“层”(类似于Word 环境中的图文框)对象，再在透明的“层”对象中插入艺术字体，通过悬浮层位置的调整可以很方便地调整艺术字体在网页上的位置。
大学计算机基础实践教程
178选择“插入/层”，在网页上插入层对象“layer1”。将光标定位于层中，选择“插入/图片/艺术字”，打开“编辑‘艺术字’文字”对话框。输入“欢迎进入我的家园”文字，设置字型为“华文彩云”。调整好艺术字体的样式和大小，再将层移至横幅标题区域适当的位置。
(4) 增添横幅标题背景
① 选择“插入/层”，在网页上插入层对象“layer2”。将光标定位于层中，选择“插入/图片/来自文件”，在层中插入一个背景图片“背景.jpg ”。选中层中的图片，缩小图片的尺寸，再选中层对象“layer2”，调整其大小和横幅标题区域完全吻合。
注：在调整层及层内对象的尺寸时，可以先将层内对象的尺寸调整至合适大小，再将层对象的尺寸调整至合适大小。
② 将“layer2”层设置为背景层。右键点击层对象“layer2”，
在弹出的快捷菜单中选择“层属性”，打开“层”任务窗格，如图
10-4所示。列表框中“Z ”字母下方的数字表示对应层在网页中的
相对位置，数字大的层位于数字小的层上方，正数对应的层位于网
页内容的上方，负数对应的层位于网页的下方。鼠标可直接双击
“layer2”层的“2”数字，进入数字编辑状态，将“2”改为“−1”，
再点击网页中任一位置，就可见层对象“layer2”已成为背景层。
注：也可以通过点击任务窗格中“层属性”区域的“定位”超
链接，在打开的“定位”对话框中设置“Z ”的数值。 (5) 在左边单元格中添加交互式超链接按钮
① 将光标定位于左边单元格，选择“插入/交互式按钮”，打开“交互式按钮”对话框。在“按钮”选项卡的“按钮”列表框中选择“透明胶嚢1”，在“文本”文本框中输入“首页”文字，在“链接”编辑框中，可通过“浏览”按钮在打开的“编辑超链接”对话框中设置超链接的对象，如图10-5所示。
② 在“字体”选项卡中，可对交互式按钮上的字体的格式及对齐方式进行设置，也可对交互式按钮在网页运行中不同时刻(“初始”状态、鼠标指向按钮时的“悬浮”状态以及鼠标在按钮上“按下左键”时的状态)时字体的颜进行设置，如图10-6所示。在“图像”选项卡中可以对交互式按钮图像的尺寸及背景颜进行设置。
图10-5 “交互式按钮-按钮”对话框          图10-6 “交互式按钮-字体”对话框
图10-4 “层”任务窗格
实验10  网页设计制作与发布179
③点击“确定”按钮，在左边单元格中增添了一个“透明胶囊”式的交互式按钮。按Enter键，光标下移一行，可以重复以上操作，继续创建下一个交互式按钮。也可先选中已创建的交互式按钮，按Ctrl+C组合键，将其复制到剪贴板中，再将光标下移，分别在不同位置按Ctrl+V组合键，将剪贴板中的按钮粘贴到相应的位置上，再右键点击粘贴后的交互式按钮，在弹出的快捷菜单中选择“按钮属性”，打开“交互式按钮”对话框，在“按钮”选项卡的“文本”文本框中更改按钮上的文字，在“链接”文本框中更改超链接的对象。
(6) 在右单元格中插入“我的家园”图片
鼠标点击右单元格，选择“插入/图片/来自文件”，在“图片”对话框中选中素材文件夹中的“我的家园.jpg”图片文件，将图片插入到右单元格中，选中图片，“居中”对齐，拖动四周控制点，调整尺寸至合适大小。
(7) 在网页底部插入滚动字幕
①鼠标点击网页底部，选择“插入/Web组件”，打开“插入Web组件”对话框，如图10-7所示。在对话框左边的“组件类型”列表框中选择“动态效果”，在右边的“选择一种效果”列表框中选择“字幕”。
②点击“完成”按钮，打开“字幕属性”对话框，如图10-8所示。在“文本”编辑栏中输入“欢迎进入我的家园”，设置“方向”为“左”、“速度”为默认值、“表现方式”为“滚动条”。选中“重复”区域“连续”左侧的复选项，
设置“背景”为“淡蓝”。点击“样式”按钮，打开“修改样式”对话框，再点击其中的“格式”按钮，在打开的下拉菜单中选择“字体”，打开“字体”对话框，设置字体格式为“楷体_GB2312”、“普通”、“12pt”、“红”，再点击“确定”按钮，返回“修改样式”对话框，点击“确定”按钮，返回“字幕属性”对话框，点击“确定”按钮，完成滚动字幕的设置。
图10-7 “插入Web组件”对话框图10-8 “字幕属性”对话框
(8) 拆分模式
点击“视图”栏中的“拆分”选项，打开“拆分”模式，原FrontPage窗口的编辑区分为上、下两区域，上区域显示当前文档的HTML编码，下区域显示当前文档的内容。如果在下区域用鼠标选中某内容，则上区域中该内容对应的HTML编码也被选中。例如在如图10-9中，选中下区域的图片对象，则上区域中该图片对象的HTML编码内容也同时被选中。这有助于用户学习、掌握HTML编码。
(9) 查看效果
点击“视图”栏中“预览”选项，打开“预览”模式，即可预览文档在浏览器中的运行效果。
大学计算机基础实践教程
个人网页设计模板图片 素材
180
图10-9  FrontPage 2003拆分模式窗口
(10) 保存文件
选择“文件/保存”打开“另保存”对话框，将制作好的网页命名为“我的家园.htm ”并保存到指定的文件夹中，
然后关闭FrontPage 2003，再用IE 浏览器打开指定文件夹中的“我的家园.htm ”网页文档，就可见到如图10-1所示的效果。
10.4.2  用FrontPage 2003创建网站
任务一  用FrontPage 2003提供的模板迅速创建一个网站，并通过“主题”的应用改变网站的表现风格和效果。
实验步骤与操作参考：
(1) 创建“项目网站”
① 在FrontPage 2003窗口，选择“文件/新建”，打开“新建”任务窗格，点击任务窗格中“新建网站”区域的“其他网站模板”超链接，打开“网站模板”对话框，如图10-10所示。
图10-10 “网站模板”对话框

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。