Web编程基础实验五布局教学设计与实践.pdfVIP

实验五布局

班级：网络班学号：112209103138：

【实验目的】

掌握网页中布局表格的操作和排版。

【实验要求】

1、练习网页中布局表格的；

2、掌握简单表格的排版；

3、掌握复杂表格的排版。

【实验内容与步骤】

利用素材“练习案例-融通室内装饰”进行练习简单网页排版,最终效果参考“练习案例-最终效果

融通室内装饰”。

1、为“练习案例-融通室内装饰”创建相应站点。

2、设置页面属性:字体大小12px,白色加粗,背景颜色为#A4A374。

3、在布局表格中和文字,并设置相应单元格格式,第2行至第6行单元格背景颜色为

#E0E3D3。

4、进行图文混排，图像对齐方式为左对齐。

5、建立2种css文字样式分别应用于标题文字和部分正文文本,1种css单元格样式应用于文字

单元格:

.w1:黑体14px,加粗,居中对齐;

.w2:12px,颜色#899544,右对齐;

.t1:单元格右边距30像素,左边距20像素,底部边距10像素。

6、将网页以index.html为名,存于站点根目录中。

利用素材“练习案例-爱丽丝家具”进行练习简单网页排版,最终效果参考“练习案例-最终效果爱

丽丝家具”。

1、为“练习案例-爱丽丝家具”创建相应站点。

2、设置页面属性:字体大小12px,白色加粗,背景颜色为#897715。

3、在布局表格中和text中文字,并设置相应单元格格式.

4、建立2种css文字样式分别应用于标题文字和部分正文文本,1种css单元格样式应用于文字单

元格:

.w1:黑体16号字,白色;

.w2:宋体12号字,,加粗;

.t1:单元格右边距20像素。

5、将网页以index.html为名,存于站点根目录中。

Experiment5

Layout

Class:OnlineClassStudentID:112209103138Name:LiangChen

【Purposeof

experiment】

Mastertheoperationandlayoutoflayouttabi

nwebpages.

【Experimental

Requirements】

1.Practiceinsertinglayouttab

onwebpages;2.Masterthe

layoutofsimpletab;3.Master

thelayoutofcomplextab.

【Experimentalcontent

andsteps】

UsethematerialPracticeCase-RongtongInteriorDecorationtopracticesimpleweblayout,and

thefinaleffectisreferredtoPracticeCase-SeriousEffectRongtongInteriorDecoration.

1.CreateacorrespondingsiteforPracticeCases-RongtongInteriorDecoration.2.

Setpageattributes:fontsize12px,