实验2网页设计[2-3].docVIP

实习2 网页设计（2）_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中将出现一个空白的网页。 ② 在网页中插入一个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-9所示。 ⑦ 将“悟空自传”图片超链接到前面制作的网页“zizhuan.htm”,“我的相册”图片超链接到“xiangce.htm”，“我的母校”图片边接到“”，“与我联系”图片超链接到“mailto:sunwukong@”。 ⑧ 将网页保存到网站的根目录（d:\myweb）中，文件名为“index.htm”。 注意:本网页所用到的图片都要存入d:\myweb\images文件