实验五(第12周)

网页制作练习

一 实验目的:

1. 掌握HTML语言的语法规则，

2. 理解CSS技术在网页制作过程中所起的重要作用，掌握CSS样

式定义的方法。 3.

二 实验内容:

1.掌握HTML语言的语法规则

2.掌握三种在网页中使用CSS样式的方法 3. 掌握可视化操作的技术。

三 实验环境准备: 1.网站

2.素材(存入images文件夹);

3.制作平台( DW8或相关软件。不必安装IIS)

四 实验题:在DW8中制作个人网站的主页myindex.htm:

掌握三种在网页中使用CSS样式的方法，

1. 2. 3.

启动DW8，在站点新建一个html文件，打开修改/页面属性/设置上边距和左边距均为8，背景颜色#f6fbff。 从窗口/样式css中点击打开样式表面板。在css面板点击【附加样式表】的方法链接嵌入mystyle.css文件(p194), 打开常用工具栏/新建一个2*3宽770px的表格，居中对齐。在第一行第一个单元格中插入一个前景图片logo.jpg，并调整单元格大小。选定第一行第二、三个单元格后选属性面板中”合并”，使之合并为一个单元格，插入一个flash影片或gif动画，例如插入banner-4.swf。

4.

在第二行第一个单元格处插入”e-1行日历.html”中的

内容。在第二行第二个单元格代码段输入Page 23第一个水平字幕内容。第二行第三个单元格先插入一个表单，属性面板中动作(action)栏输入如下内容http://www.google.com/search?hl=zh-CN，然后在表单中插入一个1*2宽266px，右对齐,间距和填充为0的表格，其中第一个单元格插入一个单行文本框，第二个单元格插入一个提交按钮。

5.

对巳使用的文本、控件及或或

打开move_image.htm（移动小精灵），在代码窗复制

..间所有内容，插入到正编辑的文件的代码窗处，返回到设计窗，选中刚粘贴的图像，在属性栏

11.

12.

修改链接。

对本网页所有的

等使用上述mystyle.css外部样式表进行设置。方法是:选定对象后在属性面板中选择样式于该对象。如下图所示: 6. 新建一个1*1宽770px的表格，居中对齐，间距和填充为 7.    0，单元格内容顶端对齐。插入水平线条indexv1_03.gif 再新建一个1*5宽770px的表格，居中对齐。第一列设宽度为190px，第二、四列设宽度为8px，第5列设宽度为146px， 第一个单元格嵌套一个宽180px，12*3表格，每一行第一、三列插入图片pearl1.jpg，第二列为链接源。 第二、四个单元格中分别插入背景图片indexv1_15.jpg和indexv1_16.jpg 第三个单元格中插入图片10_r1_c1.gif，并打开”学院简介.txt”复制其内容到该单元格，选中10_r1_c1.gif 使其左对齐，实现图文混排效果。并裁剪掉后部一些文字存为2.htm，在此位置加入链接源字符:”……更多”，链接至2.htm。  在第五个单元格中，设置内容为”顶湍对齐”，插入一个 6*1宽146，间距、填充和边框为0的表格。然后: 1.) 先插入一个表单，然后在表单中插入一个4*2宽146px，间 距和填充为0，边框为1的表格，依次制作各控件, 2.) 下一个	中插入图片ganggao.gif 3.) 下一个	中的代码段输入以下上滚 字幕(参照Page 24)内容: 又见一个春天. 不 同的色彩,飘荡在校园上空， 那是爱情的颜色。各种气 息在空气中弥漫 8. 新建一个1*1宽770px的表格，居中对齐，间距和填充为 0，单元格内容顶端对齐。插入水平线条crystal.gif 9. 新建一个2*1宽770px的表格，居中对齐，间距和填充为 0，单元格内容顶端对齐。依次输入二行内容如下
通讯地址:湖南长沙 410014 Email:xx@163.com
版权所有 Copyright©2000-2004 Inc. 10. All Rights Reserved

或或

等使用上述mystyle.css外部样式表进行设置。方法是:选定对象后在属性面板中选择样式于该对象。如步骤5.所示。 浏览本myindex.htm文件，在:查看/文字大小中依次选择最大和最小，应保证基本不变形。 要求: 1. 网页页宽800px 2. 表格居中对齐，间距、填充和边框设置适当 3. 单元格内容垂直方向顶端对齐。 4. 使用CSS样式表设置页面。 因篇幅问题不能全部显示，请点此查看更多更全内容 查看全文