第5章 网页设计初步-FrontPage 2003

《第5章 网页设计初步-FrontPage 2003》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第5章网页设计初步－FrontPage2003因特网已成为目前最主要的电子信息发布媒体，无论是政府、公司、企业、还是个人都纷纷建立自己的网站来发布和收集信息。不仅如此、越来越多的公司、企业和政府还将自己的商务、政务活动放到网站上，从而使得网站又成为信息处理的新平台。一、案例说明本例描述：本例通过一个个人网站的建立过程来简要介绍利用FrontPage2003建立网页的基本方法和常用功能，使得学习者对网页的设计过程有个初步的了解。本例知识点：站点的建立、表格及其表格布局、插入图片、背景音乐、超级链接、电子邮件链接、图片热区链接、字幕制作、站点发布

2、二、方法指导1．熟悉MicrosoftFrontPage2003界面①启动FrontPage2003，图5.1所示的为FrontPage2003的操作界面。菜单栏格式工具栏标题栏常用工具栏编辑区网页显示方式任务窗口图5.1操作界面2．新建站点创建一个名为“花样年华”站点，保存在“D:mywebhynh”操作方法：①单击“文件”菜单中的“新建”命令，在弹出的“新建”任务窗口中选择“新建网站”中的“由一个网页组成的网站”，打开如图5.2所示的“网站模板”对话框。②在“指定新站点的位置”处输入“D:mywebhynh”，双击“空白站点”图标

3、，“花样年华”站点创建完毕。图5.2“新建”对话框③FrontPage2003自动创建了“_private”和“images”两个文件夹。④单击“文件”菜单中的“新建”命令，在弹出的“新建”任务窗口中选择“新建网页”中的“空白网页”，创建一个名为“index.htm”的网页(新建的网页默认名称为“new_page_1.htm”，可以在保存时改为“index.htm”)。⑤单击“视图”菜单中的“文件夹”命令，可以发现右边窗口中增加了一个标题为“index.htm”的主页图标，如图5.3所示。⑥双击“index.htm”的主页图标，按保存按钮，保

4、存新建网页。图5.3新建网页样图3．制作主页试在上面创建的站点基础上，创建如图5.4所示的个人主页。该主页使用6×3表格布局，其中第一行三个单元格合并为一个标题单元格，第三行第四行的第一个单元格合并为一个图片单元格，第二行三个单元格合并为一个滚动条单元格。在第四行单元格中建立了2个超链接，，分别与2个网页相链接，第五行的第一个单元格插入一个层，并且这个单元格中的图片中建立个一个热点链接，最后一行为联系方式中建立了一个电子邮件链接，最后在主页中插入音乐。图5.4花样年华个人主页(1)用表格划分网页操作方法：①启动MicrosoftFrontPa

5、ge2003，在“D:mywebhynh”下找到主页文件“index.htm”，双击该文件即可打开主页。图5.5常规选项卡图5.6高级选项卡②进行页面设计，单击“文件”菜单中的“属性”，在常规选项卡的“标题”中添入“花样年华”，在“背景音乐”中可以插入音乐，如图5.5所示;在高级选项卡“边距”的“上边距”和“下边距”分别设为0像素,如图5.6所示。图5.8“插入表格”对话框③单击“表格”菜单中的“插入”命令，选择级联菜单中的“表格”命令，如图5.7所示，打开“插入表格”对话框。图5.7插入表格菜单④选定表格的行数为6，列数为3，边框粗细为

6、“0”(这样在IE浏览器或预览中就看不到表格的网格线)，如图5.8所示。⑤选中第一行三个单元格，单击右键，选择“合并单元格”，如图5.9所示。用同样的方法将单元格合并成如图5.10所示。图5.9合并单元格图5.10合并后的单元格⑥调整各单元格的大小(以后会不断调整)，如图5.11所示。图5.11调整单元格(2)设置背景操作方法：①单击“格式”菜单，选择“背景”，打开网页属性对话框，如图5.12所示。②选中“背景图片”，单击浏览按钮选择合适的图片。(3)输入文本及插入图片操作方法：①在第一行中输入“花样年华”，设置字体为“华文新魏”，大小为“7

7、”，对齐方式为“居中”。图5.13“字幕属性”对话框图5.12“网页属性”对话框②在第二行中插入字幕。单击“插入”菜单，选择组件菜单中的“字幕”，打开字幕属性对话框，如图5.13所示。在文本框中输入“欢迎来到花样年华个人主页”，方向为“左”，背景色为“黄色”，表现方式为“滚动条”，单击“确定”。③在其余单元格中输入文本，参照图5.4。④在合适处插入图片。单击插入菜单中的“图片”级联菜单中的“来自文件”选择一幅合适的图片。⑤在插入层。单击插入菜单中的“层”或单击插入层按钮，在层中输入“故乡的风景”（层中也可以插入图片这里就不再演示）。⑥单击保存

8、按钮，保存文件名为“index.htm”(保存文件时最好使用英文字母)。⑦单击编辑窗口下的“预览”按钮，观察编辑效果。⑧单击“保存”按钮保存主页。提示：主页中的超链