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

第5章 网页设计初步FrontPage 2003因特网已成为目前最主要的电子信息发布媒体，无论是政府、公司、企业、还是个人都纷纷建立自己的网站来发布和收集信息。不仅如此、越来越多的公司、企业和政府还将自己的商务、政务活动放到网站上，从而使得网站又成为信息处理的新平台。一、案例说明 本例描述：本例通过一个个人网站的建立过程来简要介绍利用FrontPage 2003建立网页的基本方法和常用功能，使得学习者对网页的设计过程有个初步的了解。 本例知识点： 站点的建立、表格及其表格布局、插入图片、背景音乐、超级链接、电子邮件链接、图片热区链接、字幕制作、站点发布二、方法指导1熟悉Microsoft FrontPage 2003界面 启动FrontPage 2003，图5.1所示的为FrontPage 2003的操作界面。菜单栏格式工具栏标题栏常用工具栏编辑区网页显示方式任务窗口图5.1 操作界面2新建站点 创建一个名为“花样年华”站点，保存在“D:my webhynh” 操作方法： 单击“文件”菜单中的“新建”命令，在弹出的“新建”任务窗口中选择“新建网站”中的“由一个网页组成的网站”，打开如图5.2所示的“网站模板”对话框。 在“指定新站点的位置”处输入“D:my webhynh”，双击“空白站点”图标，“花样年华”站点创建完毕。图5.2 “新建”对话框 FrontPage 2003自动创建了“_ private”和“images”两个文件夹。 单击“文件”菜单中的“新建”命令，在弹出的“新建”任务窗口中选择“新建网页”中的“空白网页”，创建一个名为“index.htm”的网页(新建的网页默认名称为“new_page_1.htm”，可以在保存时改为“index.htm”)。 单击“视图”菜单中的“文件夹”命令，可以发现右边窗口中增加了一个标题为“index.htm”的主页图标，如图5.3所示。 双击“index.htm”的主页图标，按保存按钮 ，保存新建网页。图5.3 新建网页样图3制作主页试在上面创建的站点基础上，创建如图5.4所示的个人主页。该主页使用63表格布局，其中第一行三个单元格合并为一个标题单元格，第三行第四行的第一个单元格合并为一个图片单元格，第二行三个单元格合并为一个滚动条单元格。在第四行单元格中建立了2个超链接，分别与2个网页相链接，第五行的第一个单元格插入一个层，并且这个单元格中的图片中建立个一个热点链接，最后一行为联系方式中建立了一个电子邮件链接，最后在主页中插入音乐。图5.4 花样年华个人主页(1) 用表格划分网页 操作方法： 启动Microsoft FrontPage 2003，在“D:my webhynh”下找到主页文件“index.htm”，双击该文件即可打开主页。图5.5 常规选项卡图5.6 高级选项卡 进行页面设计，单击“文件”菜单中的“属性”，在常规选项卡的“标题”中添入“花样年华”，在“背景音乐”中可以插入音乐，如图5.5所示;在高级选项卡“边距”的“上边距”和“下边距”分别设为0像素,如图5.6所示。图5.8 “插入表格”对话框 单击“表格”菜单中的“插入”命令，选择级联菜单中的“表格”命令，如图5.7所示，打开“插入表格”对话框。图5.7 插入表格菜单 选定表格的行数为6，列数为3，边框粗细为“0”(这样在IE浏览器或预览中就看不到表格的网格线)，如图5.8所示。 选中第一行三个单元格，单击右键，选择“合并单元格”，如图5.9所示。用同样的方法将单元格合并成如图5.10所示。图5.9 合并单元格图5.10 合并后的单元格 调整各单元格的大小(以后会不断调整)，如图5.11所示。图5.11 调整单元格(2) 设置背景 操作方法： 单击“格式”菜单，选择“背景”，打开网页属性对话框，如图5.12所示。 选中“背景图片”，单击浏览按钮选择合适的图片。(3) 输入文本及插入图片 操作方法： 在第一行中输入“花样年华”，设置字体为“华文新魏”，大小为“7”，对齐方式为“居中”。图5.13 “字幕属性”对话框图5.12 “网页属性”对话框 在第二行中插入字幕。单击“插入”菜单，选择组件菜单中的“字幕”，打开字幕属性对话框，如图5.13所示。在文本框中输入“欢迎来到花样年华个人主页”，方向为“左”，背景色为“黄色”，表现方式为“滚动条”，单击“确定”。 在其余单元格中输入文本，参照图5.4。 在合适处插入图片。单击插入菜单中的“图片”级联菜单中的“来自文件”选择一幅合适的图片。 在插入层。单击插入菜单中的“层”或单击插入层按钮，在层中输入“故乡的风景”（层中也可以插入图片这里就不再演示）。 单击保存按钮，保存文件名为“index.htm”(保存文件时最好使用英文字母)。 单击编辑窗口下的“预览”按钮，观察编辑效果。 单击“保存”按钮保存主页。提示：主页中的超链接可以在建立了其他网页以后再进行建立。4建立二级链接子网页在上面新建网站的基础上，新建一个“我的故乡”的网页。 操作方法： 设置背景（方法同前）。 输入文本“我的作品”，设置字体为“华文新魏”，大小为“7(36磅)”，颜色为“蓝色”，对齐方式为“居中”。 插入表格。插入一个行一列的表格，将第一行拆分为两列。在第一列和第二列中分别插入图片，如图5.14所示。 在最后一行中输入“返回主页”。 单击保存按钮，保存文件名为“My Town.htm”。 用类似的方法创建子网页“My University.htm”。图5.14 “我的故乡”样图5建立主页与其他各网页的链接图5.15 “超链接” 将建立主页与子网页相链接。 操作方法： 在主页中选中“我的作品”，单击鼠标右键，在弹出的快捷菜单中选择“超链接”，如图5.15所示，打开“创建超链接”对话框，如图5.16所示。也可以单击插入超链接按钮 。在名称中选择要链接的文件“My University.htm”，点击“确定”。 用同样的方法链接“我的故乡”。图5.16 “创建超链接”对话框 在“联系方式”后建立电子邮件链接，选中单击常用工具栏中的插入超链接按钮 ，在“链接到”中点击电子邮件地址，在“电子邮件地址”中输入邮箱地址（输入电子邮件地址时地址前面自动填入mailto:)，如图5.17所示。图5.17 “插入超链接”对话框图6.18 图片热区链接 在“故乡的风景”的图片上建立热区链接，单击图片工具栏中的，在所需的图片上画出需要的链接部分，如图5.18所示。 单击编辑窗口下的“预览”按钮，观察链接效果。 单击“保存”按钮保存主页。6发布站点将创建好的My Websl网站发布到Internet上或硬盘上的某个文件中(如D:my web，必须事先创建)。 操作方法：图5.19 “远程网站属性”对话框 单击工具栏上的“发布站点”按钮，打开如图5.19所示的“发布站点”对话框。 在“指定发布站点的位置(S)：”中输入要发布的网站地址或硬盘上的某个文件夹，单击“发布”。习 题一、选择题1创建空白站点，“新建”命令在 _ 。A) “文件”菜单B) “编辑”菜单C) “查看”菜单D) “插入”菜单2拆分框架时，按住 _ 键，在框架边缘向下拖动鼠标，可以水平拆分A) ShiftB) CtriC) CenterD) Alt3在FrontPage 2003中，提供了 _ 个框架结构模板A) 5个B) 6个C) 8个D) 10个4如果网页中的文字内容比较多，为了搜索段落方便可以插入 _ 。A) 图片B) 文字C) 动画D) 书签5创建电子邮件的链接地址前应该以 _ 开始。A) MallTo：B) MallToC) ToD) MallFrom6文字建立链接后通常在文件下方会产生 _ 。A) 波浪线B) 下划线C) 圆圈D) 以上都不正确7网页中可以插入 _ 。A) 图片B) 动画C) 音乐D) 以上都可以8排版漂亮的网页都会用很多 _ 来控制文本、图片、动画及视频位置。A) 表格B) 段落C) 层D) 章节9在FrontPage 2003中，一般常用的动画文件格式有 _ 格式。A) FlashB) gifC) Flash和gifD) JPG10网页中的视频文件的主要文件格式有 _ 。A) MpegB) AVIC) QuickTimeD) Mpeg、AVI、QuickTime11在网页中插入背景音乐，单击“文件”菜单中的 _ 命令。A) 属性B) 新建C) 背景D) 音乐12 _ 是WWW的灵魂A) 文字B) 图片C) 动画D) 超级链接13插入Flash动画是选择“插入”菜单中的 _ 选项。A) 高级B) 图片C) 表格D) 动画14在网页属性对话框中，下列 _ 是没有的。A) 常规B) 背景C) 边距D) 数据源15 _ 是一种独特的页面组织方式，它在一个窗口中包括了几个单独的WEB网页A) 框架网页B) 表格C) 图片D) 动画16 _ 是利用框架进行网页可见制作的基本元素A) 文字B) 图片C) 音乐D) 页面17在网页中 _ 可以建立超级链接A) 文字B) 图片C) 电子邮件D) 文字、图片、电子邮件18通过IE浏览器菜单上的 _ 按钮可以返回A) 后退B) 前进C) 停止D) 刷新19“超链接”在 _ 菜单中A) 文件B) 编辑C) 插入D) 工具20“视频”命令在“插入”菜单中的 _ 选项中A) 图片B) 表格C) 超连接D) 书签二、判断题。1网页是网络信息的载体。( )2网页是一种基于文本方式的文档。( )3没有只有一个网页的站点。( )4FrontPage 2003也有所见即所得的特点。( )5网页中最实用的工具是文字段落。( )6网页中的图片越大其浏览的速度越快。( )7在图片文件夹中，单击图片文件名可以看到预览图案。( )8声音是多媒体网页中不可缺少的元素。( )9网页中的视频文件只有AVI一种。( )10网页中可以插入动画。( )11一般不要在网页中大量使用AVI动画。( )12文字建立链接前后颜色一样。(