实验五(第12周).doc

实验五网页制作练习一 实验目的:1. 掌握HTML语言的语法规则，2. 理解CSS技术在网页制作过程中所起的重要作用，掌握CSS样式定义的方法。3. 掌握三种在网页中使用CSS样式的方法，二 实验内容:1. 掌握HTML语言的语法规则2. 掌握三种在网页中使用CSS样式的方法3. 掌握可视化操作的技术。三 实验环境准备:1. 网站2. 素材(存入images文件夹);3. 制作平台( DW8或相关软件。不必安装IIS)四 实验题:在DW8中制作个人网站的主页myindex.htm:1. 启动DW8，在站点新建一个html文件，打开修改/页面属性/设置上边距和左边距均为8，背景颜色#f6fbff。2. 从窗口/样式css中点击打开样式表面板。在css面板点击【附加样式表】的方法链接嵌入mystyle.css文件(p194),3. 打开常用工具栏/新建一个2*3宽770px的表格，居中对齐。在第一行第一个单元格中插入一个前景图片logo.jpg，并调整单元格大小。选定第一行第二、三个单元格后选属性面板中”合并”，使之合并为一个单元格，插入一个flash影片或gif动画，例如插入banner-4.swf。4. 在第二行第一个单元格处插入”e-1行日历.html”中的内容。在第二行第二个单元格代码段输入Page 23第一个水平字幕内容。第二行第三个单元格先插入一个表单，属性面板中动作(action)栏输入如下内容/search?hl=zh-CN，然后在表单中插入一个1*2宽266px，右对齐,间距和填充为0的表格，其中第一个单元格插入一个单行文本框，第二个单元格插入一个提交按钮。5. 对巳使用的文本、控件及或或等使用上述mystyle.css外部样式表进行设置。方法是:选定对象后在属性面板中选择样式于该对象。如下图所示:6. 新建一个1*1宽770px的表格，居中对齐，间距和填充为0，单元格内容顶端对齐。插入水平线条indexv1_03.gif7. 再新建一个1*5宽770px的表格，居中对齐。第一列设宽度为190px，第二、四列设宽度为8px，第5列设宽度为146px，l 第一个单元格嵌套一个宽180px，12*3表格，每一行第一、三列插入图片pearl1.jpg，第二列为链接源。l 第二、四个单元格中分别插入背景图片indexv1_15.jpg和indexv1_16.jpgl 第三个单元格中插入图片10_r1_c1.gif，并打开”学院简介.txt”复制其内容到该单元格，选中10_r1_c1.gif 使其左对齐，实现图文混排效果。并裁剪掉后部一些文字存为2.htm，在此位置加入链接源字符:”更多”，链接至2.htm。l 在第五个单元格中，设置内容为”顶湍对齐”，插入一个6*1宽146，间距、填充和边框为0的表格。然后:1.) 先插入一个表单，然后在表单中插入一个4*2宽146px，间距和填充为0，边框为1的表格，依次制作各控件,2.) 下一个中插入图片ganggao.gif3.) 下一个中的代码段输入以下上滚字幕(参照Page 24)内容: 又见一个春天. 不同的色彩,飘荡在校园上空，那是爱情的颜色。各种气息在空气中弥漫8. 新建一个1*1宽770px的表格，居中对齐，间距和填充为0，单元格内容顶端对齐。插入水平线条crystal.gif9. 新建一个2*1宽770px的表格，居中对齐，间距和填充为0，单元格内容顶端对齐。依次输入二行内容如下 通讯地址:湖南长沙 410014 Email: 版权所有 Copyright©2000-2004 Inc. All Rights Reserved 10. 打开move_image.htm（移动小精灵），在代码窗复制.间所有内容，插入到正编辑的文件的代码窗处，返回到设计窗，选中刚粘贴的图像，在属性栏修改链接。11. 对本网页所有的或或等使用上述mystyle.css外部样式表进行设置。方法是:选定对象后在属性面板中选择样式于该对象。如步骤5.所示。12. 浏览本myindex.htm文件，在:查看/文字大