图文混排网页制作实验报告.doc

深圳大学
实验报告
课程名称: 网页设计与制作
实验序号:
实验名称: 图文混排网页制作
班级: 临床一班姓名: 张
同组人: 实验日期: 2014 年 4月 21 日
教师签字:
一、实验目的
(1)掌握网页布局的方法。
(2)掌握在网页中插人图片的方法。
(3)掌握网页中图文混排的排版方法
二、实验环境
制作秋天的思念网页效果
三、实验步骤
(1)新建html,在页面属性中设置,背景颜色设置为“#313884”,页面标题设置为“秋天的思念”。如下图
(2)插人一个3行1列的表格,将表格宽度设置为“558”、单元格边距、
单元格间距均设置为“0”像素,如图所示。鼠标右键可以再自动弹出的“属性”面板中设置表格的对齐方式为“居中对齐”。
(3)在“代码”视图中使用代码将第1行单元格的背景设置为图片“”(光标插到在<td后按空格键,dreamweaver自动弹出要插入的对象然后按着他的思路走就可以了,dreamweaver简直是代码盲的福音啊!)
,同时在第1行的单元格内插人图片“”,并设置为左对齐,效果如图所示。

(4)将第2行和第3行单元格的背景颜色均设置为“#FFA200”,在第3行的单元格内插人图
片“”,并将其宽度设置为“1”像素、高度设置为“10”像素。
注意:,在网页制作中经常利用这种透明图片来
“撑开”表格,使其处于固定的宽度和高度。
(5)在第2行单元格内插人一个1行、3列的表格,将其宽度设置为100%,边框粗细、单元
格边距、单元格间距均设置为“0”像素,对齐方式设置为“居中对齐”。
(6)在新插人表格的第2列单元格内插人图片“”,将第1列至第3列单元格的宽度分别设置为2%、96%、2%,同时单击代码视图,将第1列和第3列单元格内的“&nbsp;”删除,效果如图5-4所示。
(7)在表格的下面输人以下版杈信息:
关于我们/网站地图/广告指南/联系我们/招聘精英
技术支持:信息学院计算机/网络协会
Rll Rights Reserved