实验2 网页设计(2-3)[1]

《实验2 网页设计(2-3)[1]》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、实习2网页设计（2）一、实习目的1.熟悉FrontPage2003的工作环境；2.掌握FrontPage2003站点管理功能；3.掌握FrontPage2003制作网页的基本方法；4.掌握网页制作中的常用页面布局方法。5.掌握制作主题网站的方法。二、实习内容1.熟悉FrontPage2003的工作环境，学习FrontPage的基本功能及操作；2.学习FrontPage2003管理站点功能，进行站点目录规划（个人网站）；3.按要求制作“示例网站”，并测试浏览效果；4.制作自拟主题的网站，要求网站内容在表现形式上必须具有主页面、

2、图文混排页面、图片页面、表格页面等页面形式；5.对自拟主题的网站浏览测试。注：第1次实验完成实验步骤中1至5的任务，练习“孙悟空自传”的制作。第2次实验完成6，制作自命题个人网站。三、预备知识1.网页制作的基本知识；2.FrontPage2003的工作环境及操作方法。四、实习步骤1.熟悉FrontPage2003的工作环境。启动FrontPage2003，熟悉FrontPage2003工作环境。2.FrontPage管理站点①建立站点主目录文件夹在D盘根目录下建立名为“myweb”的文件夹，作为网页制作的站点主目录（站点主目

3、录路径为d:myweb）。（如果D盘不存在，在C盘建立。）②创建站点启动FrontPage2003，打开“文件“菜单”，单击“新建”，在右侧的任务窗格中选择新建网站列表中的“其他网站模版”；打开网站模板对话框，选择“空白站点”，然后单击“浏览”命令按钮，打开新网站位置（站点主目录）对话框，单击“查找范围”下拉列表，选择d盘，在文件夹列表中，选择“myweb”文件夹；单击“打开”命令按钮，完成站点主目录的设置，则站点的主目录为“D:myweb”；单击“确定”按钮，完成站点的创建。③查看站点目录结构单击“视图栏”（窗口左侧）

4、中“文件夹”图标，即可查看新建站点目录结构。FrontPage自动建立了images和_private等文件夹。注意：不要在如“_private”等以“_”开始的文件夹中存放你的任何文件。该文件夹是系统用于存放临时文件。④创建网站其它文件夹（目录规划）根据要制作的网站的内容，可以建立相应的子文件夹，用以分类存放网站制作中的相关文件。在本站点中，请建立如下文件夹：xiangce，然后分别在这两个文件夹中建立文件夹images。注意：网站目录结构一般在网站创建初期就完成，但也可以在制作网站过程中，随时根据要求建立。文件夹名及文件

5、名不要使用汉字，否则会在网页超链接引用和网页浏览是出现错误的情况。3.导入网页制作需要的素材①从作业管理系统共享资源中“计算机网络技术及应用”文件夹中下载“孙悟空自传.rar”素材压缩包，解压缩文件包。②在解压件后素材“孙悟空自传”文件夹中，将“images”文件夹中的所有图片导入新建站点主目录下的“images”文件家中。③在解压件后素材“孙悟空自传”文件夹中，将“xiangce”文件夹下“images”文件夹中的所有图片导入新建站点主目录下“xiangce”的“images”文件夹中。注意：不要在如“_private”等

6、以“_”开始的文件夹中存放你的任何文件。4.制作一个图文混排的网页①打开“文件“菜单”，单击“新建”，选择“空白网页”，在FrontPage中将出现一个空白的网页。②在页面上单击右键，选择“网页属性”，打开页面属性对话框，选择各选项卡进行适当配置。③在网页中输入（粘贴）一段文字（孙悟空自传素材中），设置第一段（作为标题）为“黑体、6号（24磅）”，其余文字设置为“宋体、4号（14磅）”。④在网页中插入一张图片(sunwukong.jpg)，设置图片的对齐属性为“左对齐”。调整位置,如图2-1所示。⑤将保存网页到网站的根目录（

7、d:myweb）中，文件名为“zizhuan.htm”。注意：1.本网页所用到图片都要存入d:mywebimages文件夹中。2.观察在保存网页时出现的“保存嵌入式文件”对话框(如图2-2)，并保存网页中的图片保存到正确的位置。（这种情况表明：图片素材是直接应用到当前的网页中，没有事先导入，将图片等网页中的素材保存到站点内合适的文件夹中即可）3．“另存为”文件对话框中，要注意保存网页到指定的位置。图2-1zizhuan.htm网页图2-2“保存嵌入式文件”对话框5.制作一个图片展示网页①打开“文件”，单击“新建”，选择

8、“空白网页”，在FrontPage中将出现一个空白的网页。②在网页中插入一个7行3列的表格，在表格属性中，将表格的边框粗细设置为0，接着再将第1行的3列合并,输入文字“孙悟空的幸福生活”，设置为“标题一”格式。调整单元格行高，如图2-3所示。图2-3制作中的xiangche.htm网页图2