实验2网页设计(2-3).doc

实习2 网页设计（2）一、实习目的 1. 熟悉FrontPage2003的工作环境；2. 掌握FrontPage2003站点管理功能；3. 掌握FrontPage2003制作网页的基本方法；4. 掌握网页制作中的常用页面布局方法5. 掌握制作主题网站的方法二、实习内容1. 熟悉FrontPage 2003的工作环境，学习FrontPage的基本功能及操作；2. 学习FrontPage2003管理站点功能，进行站点目录规划（个人网站）；3. 按要求制作“示例网站”，并测试浏览效果；4. 制作自拟主题的网站，要求网站内容在表现形式上必须具有主页面、图文混排页面、图片页面、表格页面等页面形式；5. 对自拟主题的网站浏览测试注：第1次实验完成实验步骤中1至5的任务，练习“孙悟空自传”的制作第2次实验完成6，制作自命题个人网站三、预备知识1. 网页制作的基本知识；2. FrontPage 2003的工作环境及操作方法四、实习步骤1.熟悉FrontPage 2003 的工作环境启动FrontPage 2003，熟悉FrontPage 2003工作环境2.FrontPage管理站点① 建立站点主目录文件夹在D盘根目录下建立名为“myweb”的文件夹，作为网页制作的站点主目录（站点主目录路径为d:\myweb）。

如果D盘不存在，在C盘建立② 创建站点启动FrontPage 2003，打开“文件“菜单”，单击“新建”，在右侧的任务窗格中选择新建网站列表中的“其他网站模版”；打开网站模板对话框，选择“空白站点”，然后单击“浏览”命令按钮，打开新网站位置（站点主目录）对话框，单击“查找范围”下拉列表，选择d盘，在文件夹列表中，选择“myweb”文件夹；单击“打开”命令按钮，完成站点主目录的设置，则站点的主目录为“D:\myweb”；单击“确定”按钮，完成站点的创建③ 查看站点目录结构单击“视图栏”（窗口左侧）中“文件夹”图标，即可查看新建站点目录结构FrontPage自动建立了images和_private等文件夹注意：不要在如“_private”等以“_”开始的文件夹中存放你的任何文件该文件夹是系统用于存放临时文件④ 创建网站其它文件夹（目录规划）根据要制作的网站的内容，可以建立相应的子文件夹，用以分类存放网站制作中的相关文件在本站点中，请建立如下文件夹：xiangce，然后分别在这两个文件夹中建立文件夹images注意：网站目录结构一般在网站创建初期就完成，但也可以在制作网站过程中，随时根据要求建立。

文件夹名及文件名不要使用汉字，否则会在网页超链接引用和网页浏览是出现错误的情况3.导入网页制作需要的素材① 从作业管理系统共享资源中“计算机网络技术及应用”文件夹中下载“孙悟空自传.rar”素材压缩包，解压缩文件包② 在解压件后素材“孙悟空自传”文件夹中，将“images”文件夹中的所有图片导入新建站点主目录下的“images”文件家中③ 在解压件后素材“孙悟空自传”文件夹中，将“xiangce”文件夹下“images”文件夹中的所有图片导入新建站点主目录下“xiangce”的“images”文件夹中注意：不要在如“_private”等以“_”开始的文件夹中存放你的任何文件4.制作一个图文混排的网页① 打开“文件“菜单”，单击“新建”，选择“空白网页”，在FrontPage中将出现一个空白的网页② 在页面上单击右键，选择“网页属性”，打开页面属性对话框，选择各选项卡进行适当配置③ 在网页中输入（粘贴）一段文字（孙悟空自传素材中），设置第一段（作为标题）为“黑体、6号（24磅）”，其余文字设置为“宋体、4号（14磅）”④ 在网页中插入一张图片(sunwukong.jpg)，设置图片的对齐属性为“左对齐”。

调整位置,如图2-1所示⑤ 将保存网页到网站的根目录（d:\myweb）中，文件名为“zizhuan.htm”注意：1. 本网页所用到图片都要存入d:\myweb\images文件夹中2. 观察在保存网页时出现的“保存嵌入式文件”对话框(如图2-2)，并保存网页中的图片保存到正确的位置这种情况表明：图片素材是直接应用到当前的网页中，没有事先导入，将图片等网页中的素材保存到站点内合适的文件夹中即可）3．“另存为”文件对话框中，要注意保存网页到指定的位置图2-1 zizhuan.htm网页图2-2“保存嵌入式文件”对话框5.制作一个图片展示网页① 打开“文件”，单击“新建”，选择“空白网页”，在FrontPage中将出现一个空白的网页② 在网页中插入一个7行3列的表格，在表格属性中，将表格的边框粗细设置为0，接着再将第1行的3列合并,输入文字“孙悟空的幸福生活”，设置为“标题一”格式调整单元格行高，如图2-3所示图2-3 制作中的xiangche.htm网页图2-4 完成的xiangce.htm网页③ 在表格的单元格中，插入“xiangce”文件夹中的图片，输入图片的文字说明如图2-4所示。

④ 将保存网页到网站的根目录（d:\myweb\xiangce）中，文件名为“xiangce.htm”注意:本网页所用到图片都要求存在d:\myweb\xiangce\images文件夹中5.制作主页（首页）网页设计时，网页的布局方式将直接影响页面的外观，同时也是体现设计师水平的一个标准在设计布局时，通常采用表格的方式在本网站主页的制作中，将使用表格方式布局① 打开“文件”，单击“新建”，选择“空白网页”，在FrontPage中将出现一个空白的网页图2-5 第1次布局 图2-6 第2次布局② 在网页中插入一个7行2列的表格（宽：700像素；边框：0），然后将第2列的所有单格合并,如图2-5③ 在刚合并完成后单元格中，设置单元格对齐属性为“水平：左对齐；垂直：顶端对齐”，然后在该单元格插入一个4行1列的表格（宽度：100%；边框：0）完成的布局如图然后调整单元格行高如图2-6所示④ 在左边单元格和右边第1行的单元中，插入如图2-7所示的图片（教学资源网下载），⑤ 将右边第2行拆分为2列在第3行中，插入一个1行3列的表格(宽：100%；高：100%，边框：0)，如图2-8所示。

图2-7 插入图片 图2-8 第三次布局⑥ 接下来，在单元格中插入图片，输入文字，如图2-9所示图2-9 输入文字和插入图片 图2-10 index.htm在IE中的效果⑦ 将“悟空自传”图片超链接到前面制作的网页“zizhuan.htm”,“我的相册”图片超链接到“xiangce.htm”，“我的母校”图片边接到“”，“与我联系”图片超链接到“mailto:sunwukong@tiangong.org”⑧ 将网页保存到网站的根目录（d:\myweb）中，文件名为“index.htm”注意:本网页所用到的图片都要存入d:\myweb\images文件夹中⑨ 在浏览器中打开index.htm页面，如图2-10所示请注意：将制作好的网站内容保存好，在以后的服务器架设实验中使用记录实习任务完成情况，对本次实习进行总结（主要说明实习任务完成情况和结果、实习中存在的问题、实习收获与体会），在3次网页设计实习结束后，将本次实习任务完成情况和实习总结写入实习报告并提交6．自拟主题制作包含图文混排、图片、表格、主页等页面的网站（第2次完成）（1）自拟站点主题，规划站点内容，收集相关素材并整理实验前自拟站点主题（如“我的班级”、“西安世园会”、“XX旅游景点”等），根据站点类型和特性设计站点各网页内容，规划各网页之间的链接关系。

收集或撰写文字内容，下载或拍摄图片并进行图像处理（也可录制音乐和视频，多媒体素材文件不宜太大，一般不超过5MB），设计表格，填写站点重要数据或信息以“我的班级”主题为例，基本要求如下：首页采用很经典的文字对专业介绍和班级概况介绍，并插入班级成员合影、专业特色图片，达到主题显明的效果，在首页上再建立三个链接，分别链接到图文混排页面、图片展示页面和表格页面；图文混排页面以文字为主（班级特点、特长、成绩、成就等）插入1-2张图片配合文字描述；图片展示页面以表格布局，展示成员照片；表格页面可以制作成简单的二维表，表头包含：学号、姓名、性别、年龄、籍贯、特长等2）FrontPage管理站点① 建立站点文件夹：在磁盘根目录下建立站点主目录文件夹（如WWWroot）②创建站点打开“文件“菜单”，单击“新建”，选择“空白站点”，指定新站点的位置为“WWWroot”③进行站点内目录规划根据要制作的网站的内容，规划并建立站点内的子文件夹，用以分类存放网站制作中的相关素材及网页文件④.导入网页制作需要的素材将准备好的素材文件，分别导入站点中相应的文件夹中注意：不要将文件存放在 “_private”文件夹中若在网页设计过程中使用站点文件夹以外的素材文件，请注意：在保存网页时出现“保存嵌入式文件”对话框（如图2-2所示），务必将素材文件保存到站点内合适的文件夹中。

3）页面布局规划首页以表格或导航形式布局；图文混排页面通过对齐方式布局；图片展示网页通过表格布局；表格页面通过表格布局并注意表格属性单元格属性设置4）制作各个页面 ①制作图文混排的网页新建一个空白网页，添加文字，设置字型、字体、段落、对齐方式等，并对页面进行必要的修饰；插入图片，进行图文混排；将该网页保存到站点内合适的文件夹中 ②制作图片展示网页新建一个空白网页，建立表格，第一行合并，输入图片页面主题；第二行插入图片，第三行输入对第二行图片的文字说明（图注）；依次类推将该网页保存到站点内合适的文件夹中 ③制作表格网页新建一个空白网页，输入表格标题，设置标题格式；插入一个表格，设置表格格式；添加表头文字和表格内容，设置文字格式和单元格格式将该网页保存到站点内合适的文件夹中 ④制作站点主页（首页）新建一个空白网页，进行首页布局设计（使用表格布局）；添加站点主题，站点概要文字及图片；建立链接图文页面、图片页面、表格页面的超链接；设计要求：页面布局合理、内容排版整洁，颜色搭配合理将该网页保存到站点主目录下，首页文件名为“index.htm”5）请注意：①所有文件夹和文件名不能使用中文；②图文页面、图片页面、表格页面，通过链接返回主页；③网页素材文件不宜过大，网站压缩包容量尽量在10M以内。

7.测试与评价将设计的自拟网站压缩包拷贝到同组同学的计算机中，同组同学进行测试和评价，测试和评价的内容包括：布局是否合理、链接是否正常、色彩搭配是否得当、文件系统（文件命名、文件夹结构及命名等）是否准确、内容是否丰富完整、特色是否鲜明，以及评分等五、实习要求1. 根据指导书实例和操作步骤，独立完成步骤1-5的内容2. 独立完成自拟主题，完成步骤6的任务3. 按要求进行步骤7测试与评价：通过组内独立测试；评价要以客观、公正、精炼、全面为基准；评价要反馈给同组成员；同组成员应根据这些评价进行必要的修改4． 提交自拟主题网站的压缩包5. 撰写实习总结报告六、思考问题1. 如何管理网站文件？2. 如何规划和设计较复杂的主页？3. 制作网站需。