Download presentation
Presentation is loading. Please wait.
1
武汉纺织大学传媒学院 cm.wtu.edu.cn
第8节 表格布局 武汉纺织大学传媒学院 cm.wtu.edu.cn 2019/2/24 传媒学院
2
网页中的表格是由若干行和列组成，每一行（或者列）又由多个单元格组成，每个单元格中又可以反复地插入表格，这样的特性可以实现网页布局
2019/2/24 传媒学院
3
1、根据需求创建表格 例子 2019/2/24 传媒学院
4
1.1、分析页面 如何把这几个区域放在表格的单元格中 2019/2/24 传媒学院
5
1.2、创建表格 创建一个4行3列的表格，其中5、6、7区域放在子表格（3行1列）中 2019/2/24 传媒学院
6
2、设置表格属性 根据版面的大小以及文字的多少和大小来设计表格、行、单元格的高度、宽度、对齐方式 表格需要边框吗？ 例子的具体参数
宽：650px 区域1高：170px 区域2宽高：500px，200px 区域2，3宽高：250px，150px 区域5，6，7高：120px，150px，60px 区域8高：70px 2019/2/24 传媒学院
7
<table align=center width=650> <tr> <td colspan=3 bgcolor=red height=170>1.Logo及菜单</td> </tr> <td colspan=2 bgcolor=red width=500 height=200>2.医院动态</td> <td rowspan=2 bgcolor=red> <table width=150> <tr><td bgcolor=gray height=120>5.公告栏</td></tr> <tr><td bgcolor=gray height=150>6.常用信息</td></tr> <tr><td bgcolor=gray height=60>7.友情链接</td></tr> </table> </td> <td bgcolor=red height=150 width=50%>3.健康教育</td> <td bgcolor=red width=50%>4.预防与保健</td> <td colspan=3 bgcolor=red height=70>8.版权</td> 2019/2/24 传媒学院
8
作业 用表格实现页面布局，每个单元格可用不用的背景颜色加以区分，并在网站标记区域(左上角)用logo图片代替文字，如下 2019/2/24
传媒学院
Similar presentations
