课程名称:html网页设计
实验室名称:软件实验室
实验项目:CSS综合实例
预习时间:4.2-4.6 实验时间:4.9(软件12班4.11)
实验内容及步骤:
内容:根据给定的网页效果图,使用firework和dreamweaver做出网页。
步骤:(以下内容在预习报告中填写)
1.分析效果图
2.使用fireworks中的切片工具把效果图中网页所需的图片切出。
3.通过分析效果图使用表格规划网页的布局。
4.根据效果图内文字及图片等元素编写相应的CSS样式。
5.在网页中添加内容,并进行适当的调整。
步骤:(以下内容在实验报告中填写)
1.使用firework打开网页效果图,分析网页的结构,并使用选择工具选取每一部分,获得每一部分的实际尺寸。
2.使用dreamweaver中布局工具条中的布局工作模式,在网页中绘制布局表格,表格尺寸由上一步得到。
3.根据第一步中分析的网页效果图的各个部分中内容的在布局表格中添加相应数量的布局单元格,完成网页的布局。
4.使用firework中的切片工具把网页中的图片提取出来,统一放置到images文件夹中。
5.根据效果图中各网页元素的样式编写CSS样式,CSS样式内容全部保存在样式表文件中。
6.把编写好的CSS文件应用到相应的布局表格或布局单元格中。
7.在布局单元格中添加内容,在添加过程中经常在浏览器中预览,根据浏览器中的实际效果进行调整。
实验结果:
1.使用表格进行网页的布局,在网页完成后若某一部分因内容增加或减少会导致网页变形,会导致对部分或所有的表格进行调整。
2.把CSS样式单独放置在样式表文件中,可以使多个网页进行样式共享,让修改网页样式变得容易。
3.图片放置在单独的文件夹中便于网页中图片的管理以及更换。
实验项目:DIV+CSS网页布局
预习时间:5.7-5.11实验时间:5.11(软件12班5.13)
实验内容及步骤:
内容:使用CSS和DIV完成上中下三栏,中间栏左右两列的网页布局。
步骤:(预习报告中填写的内容)
1.编写放置网页整体的DIV(main)的CSS样式。
2.编写最上层DIV(header)的CSS样式。
3.编写放置中间两列DIV(mainconten)的CSS样式。
4.编写中间左列(left)的样式.
5. 编写中间右列(right)的样式。
6.编写下层(footer)的样式。
步骤:(以下内容在实验报告中填写)
1.编写放置网页整体的DIV(main)的CSS样式。
#main {margin:0 auto; width:900px;}
2.编写最上层DIV(header)的CSS样式。
#header { height:100px; background:#6cf; margin-bottom:5px;}
3.编写放置中间两列DIV(mainconten)的CSS样式。
#maincontent { height:500px; margin-bottom:5px;}
4.编写中间左列(left)的样式.
#left { float:right; width:200px; height:500px; background:#9ff;}
5. 编写中间右列(right)的样式。
#left { float:left; width:695px; height:500px; background:#cff;}
6.编写下层(footer)的样式。
#footer { height:60px; background:#6cf;}
实验结果:
1.DIV+CSS布局是现在web标准建议的网页布局方式,网页中部分内容的调整一般不会导致其它部分内容的改变。
2.网页中内容替换与更改更容易,便于网页的维护。
实验项目:静态网站制作
预习时间:5.28-6.1实验时间:6.4,6.11(软件12班6.13,6.20)
实验内容:制作一个静态网站
实验步骤:(预习报告中填写作业要求即可,实验报告中填写自己的实际操作步骤。)
loading