实验2 网页设计(2)

《实验2 网页设计(2)》由会员分享，可在线阅读，更多相关《实验2 网页设计(2)（7页珍藏版）》请在装配图网上搜索。

1、实习2 网页设计（2）一、实习目的 1. 熟悉FrontPage2003 的工作环境；2. 掌握FrontPage2003 站点管理功能；3. 掌握FrontPage2003制作网页的基本方法；4. 掌握网页制作中的常用页面布局方法。二、实习内容1. 熟悉FrontPage2003 的工作环境2. FrontPage2003管理站点功能（个人网站）；3. 制作图文混排的网页；4. 制作图片展示网页；5. 制作个人网站首页；6. 自拟主题制作包含图文混排、图片、表格、主页四个页面的网站。注：第1次实验完成1至5，第2次实验完成6三、预备知识1. 网页制作的基本知识；2. FrontPage200

2、3 的工作环境及操作方法四、实习步骤1.熟悉FrontPage 2003 的工作环境。启动FrontPage 2003，熟悉FrontPage 2003工作环境。2.FrontPage管理站点 建立站点文件夹：在D盘根目录下建立myweb文件夹。（如果D盘不存在，在C盘建立。） 创建站点打开“文件“菜单”，单击“新建”，在任务窗格中选择“其他网站模版”，打开网站模板对话框，选择“空白站点”，在指定新站点的位置中，输入D:myweb或C:myweb（即站点在本地磁盘上的位置），单击“确定”按钮，完成站点的创建。 查看站点目录结构单击“视图栏”（窗口左侧）中“文件夹”图标，即可查看站点目录结构。F

3、rontPage自动建立了images和_private等文件夹。注意：不要在如“_private”等以“_”开始的文件夹中存放你的任何文件。 创建网站其它文件夹根据要制作的网站的内容，可以建立相应的子文件夹，用以分类存放网站制作中的相关文件。在本站点中，请建立如下文件夹：xiangce和aihao，然后分别在这两个文件夹中建立文件夹images。注意：网站目录结构一般在网站创建初期就完成，但也可以在制作网站过程中，随时根据要求建立。3.制作一个图文混排的网页 打开“文件“菜单”，单击“新建”，选择“空白网页”，在FrontPage中将出现一个空白的网页。 在页面上单击右键，选择“网页属性”，

4、打开页面属性对话框，选择各选项卡进行适当配置。 在网页中输入（粘贴）一段文字（孙悟空自传，作业管理系统共享资源中下载），设置第一段（作为标题）为“黑体、6号（24磅）”，其余文字设置为“宋体、4号（14磅）”。 在网页中插入一张图片(sunwukong.jpg，作业管理系统共享资源中下载)，设置图片的对齐属性为“左对齐”。调整位置,如图2-1所示。 将保存网页到网站的根目录（d:myweb）中，文件名为zizhuan.htm。注意：1. 本网页所用到图片都要存入d:mywebimages文件夹中。2. 观察在保存网页时出现的“保存嵌入式文件”对话框(如图2-2)，并保存网页中的图片保存到正确的

5、位置。3“另存为”文件对话框中，要注意保存网页到指定的位置。图2-1 zizhuan.htm网页图2-2“保存嵌入式文件”对话框4.制作一个图片展示网页 打开“文件”，单击“新建”，选择“空白网页”，在FrontPage中将出现一个空白的网页。 在网页中插入一个7行3列的表格，在表格属性中，将表格的边框粗细设置为0，接着再将第1行的3列合并,输入文字“孙悟空的幸福生活”，设置为“标题一”格式。调整单元格行高，如图2-3所示。图2-3 制作中的xiangche.htm网页图2-4 完成的xiangce.htm网页 在表格的单元格中，插入图片和文字说明(作业管理系统共享资源中下载)。如图2-4所示

6、。 将保存网页到网站的根目录（d:mywebxiangce）中，文件名为xiangce.htm。注意:本网页所用到图片都要存入d:mywebxiangceimages文件夹中。5.制作个人主页（首页）网页设计时，网页的布局方式将直接影响页面的外观，同时也是体现设计师的水平的一个标准。在设计布局时，通常采用表格的方式。在本网站主页的制作中，我们也将使用表格方式布局。 打开“文件”，单击“新建”，选择“空白网页”，在FrontPage中将出现一个空白的网页。 在网页中插入一个7行2列的表格（宽：700像素；边框：0），然后将第2列的所有单格合并,如图2-5。图2-5 第一次布局图2-6 第二次布局

7、图2-7 插入图片图2-8 第三次布局图2-9 输入文字和插入图片图2-10 index.htm在IE中的效果 在刚合并完成后单元格中，设置单元格对齐属性为“水平：左对齐；垂直：顶端对齐”，然后在该单元格插入一个4行1列的表格（宽度：100%；边框：0）。完成的布局如图然后调整单元格行高如图2-6所示。 在左边单元格和右边第1行的单元中，插入如图2-7所示的图片（教学资源网下载）， 将右边第2行拆分为2列。在第3行中，插入一个1行3列的表格(宽：100%；高：100%，边框：0)，如图2-8所示。 接下来，在单元格中插入图片，输入文字，如图2-9所示。 将“悟空自传”图片超链接到前面制作的网页

8、“zizhuan.htm”,“我的相册”图片超链接到“xiangce.htm”，“我的母校”图片边接到“”，“与我联系”图片超链接到“mailto:sunwukongtiangong.org”。 将网页保存到网站的根目录（d:myweb）中，文件名为index.htm。注意:本网页所用到的图片都要存入d:mywebimages文件夹中。 在浏览器中打开index.htm页面，如图2-10所示。6自拟主题制作包含图文混排、图片、表格、主页四个页面的网站 自拟站点主题，规划站点内容，收集相关素材并整理。实验前自拟站点主题（如“我的班级”、“西安世园会”、“XX旅游景点”等），根据站点类型和特性设计

9、站点各网页内容，规划各网页之间的链接关系及文件的存储位置（文件夹）；收集或撰写文字内容，下载或拍摄图片并进行图像处理（，录制音乐和视频），设计表格，填写站点重要数据或信息。以“我的班级”主题为例首页采用很经典的文字对专业介绍和班级概况介绍，并插入班级成员合影、专业特色图片，达到主题显明的效果，在首页上再建立三个链接，分别链接到图文混排页面、图片展示页面和表格页面；图文混排页面以文字为主（班级特点、特长、成绩、成就等）插入1-2张图片配合文字描述；图片展示页面以表格布局，展示成员照片；表格页面可以制作成简单的二维表，表头包含：学号、姓名、性别、年龄、籍贯、特长等。 FrontPage管理站点 建

10、立站点文件夹：在D盘根目录下建立myweb文件夹。（如果D盘不存在，在C盘建立。） 创建站点打开“文件“菜单”，单击“新建”，选择“空白站点”，在“Web站点模版”对话框中选择“空白站点”，在指定新站点的位置中，输入D:myweb或C:myweb（即站点在本地磁盘上的位置），单击“确定”按钮，完成站点的创建。 查看站点目录结构单击“视图栏”（窗口左侧）中“文件夹”图标，即可查看站点目录结构。FrontPage自动建立了images和_private等文件夹。 建网站其它目录根据要制作的网站的内容，可以建立相应的子文件夹，用以分类存放网站制作中的相关文件。 页面布局规划 首页以表格或导航形式布局

11、；图文混排页面通过对齐方式布局；图片展示网页通过表格布局；表格页面通过表格布局并注意表格属性单元格属性设置。 制作各个页面 制作一个图文混排的网页添加文字，设置字型、字体、段落、对齐方式等，并对页面进行必要的修饰；插入图片，进行图文混排；保存在对应文件夹中。 制作一个图片展示网页建立表格，第一行合并，输入图片页面主题；第二行3-4张图片，第三行输入对第二行图片的图注；依次类推（展示图片3-4行）。保存在对应文件夹中。 制作表格网页输入表格标题，设置标题格式；建立表格，设置表格格式；添加表头文字和表格内容，设置文字格式和单元格格式。保存在对应文件夹中。 制作站点主页（首页）添加站点主题；站点概要

12、文字及图片；建立链接图文页面、图片页面、表格页面的超链接；要求页面布局合理、整洁，颜色搭配合理。页面文件保存在站点文件夹中。注：1. 以上四个页面篇幅均不超过两页；所有文件夹和文件名不能使用中文；2图文页面、图片页面、表格页面，通过链接返回主页；3自拟网站压缩包容量小于5M（大于5m视为无效）。6.测试将所设计的自拟网站压缩包拷贝到同组同学的计算机中，同组同学进行测试和评价，测试和评价的内容包括：布局是否合理、链接是否正常、色彩搭配是否得当、文件系统（文件命名、文件夹结构及命名等）是否准确、内容是否丰富完整、特色是否鲜明等。五、实习要求1. 根据指导书实例和操作步骤，独立完成步骤至的内容。2.

13、 自拟主题，完成步骤的任务。3. 实习报告中对运用FrontPage制作网页进行小结，并对思考题的命题进行简要的论述（字数500-800）。4 提交自拟主题网站的压缩包。六、思考问题1. 如何管理网站文件？2. 如何规划和设计较复杂的主页？3. 制作网站需要哪几个阶段？各阶段应完成的基本任务是什么？西北农林科技大学信息工程学院实习报告专业年级 学号 姓名 周次 完成时间 组员学号 姓名 组员学号 姓名 实习2 网页设计一、 实习目的a) 熟悉FrontPage2003 的工作环境；b) 掌握FrontPage2003 站点管理功能；c) 掌握FrontPage2003制作网页的基本方法；d)

14、掌握网页制作中的常用页面布局方法。二、 实习内容a) 熟悉FrontPage2003 的工作环境b) FrontPage2003管理站点功能（个人网站）；c) 制作图文混排的网页；d) 制作图片展示网页；e) 制作个人网站首页；f) 自拟主题制作包含图文混排、图片、表格、主页四个页面的网站。三、 实习步骤1-4步完成情况：5自拟主题制作网站 自拟站点主题： 。首页内容为： ；图文混排页介绍 等内容，插入 张图片配合文字描述；图片展示页面以表格布局，展示 等系列照片；表格页面制作成简单的二维表，表头包含： 、 、 、 、 等。管理站点站点文件夹在 盘根目录下建立了 文件夹。 创建站点打开“文件”

15、 菜单，单击“新建”，选择“空白站点”，在“Web站点模版”对话框中选择“空白站点”，在指定新站点的位置中，输入（选择） ，单击“确定”按钮，完成站点的创建。站点目录结构FrontPage自动建立了 和 等文件夹，自建了 等文件夹。 页面布局规划 制作各个页面并建立页面间的超链接。6.测试测试了 的网站，主题是 。测试和评价：布局是否合理：链接是否正常：色彩搭配是否得当：文件系统（文件命名、文件夹结构及命名等）是否准确：内容是否丰富完整：特色是否鲜明：存在的问题：建议：四、 实习总结a) 如何管理网站文件？b) 如何规划和设计较复杂的网页？c) 制作网站需要哪几个阶段？各阶段应完成的基本任务是什么？d) 其他心得