XHTML+CSS网页布局与美化案例教程电子教案 教学课件 ppt 作者 陈承欢 05表格的应用与美化.doc

《XHTML+CSS网页布局与美化案例教程电子教案 教学课件 ppt 作者 陈承欢 05表格的应用与美化.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、教学单元5　表格的应用与美化教学单元5　表格的应用与美化【教学要点】（1）熟悉表格元素及标签（2）熟悉表格的排版属性（3）熟悉CSS中主要的表格属性（4）学会使用CSS样式美化表格，改善数据表格的显示样式（5）了解应用JavaScript代码在网页中插入Flash动画的方法【5.1　前导训练】【准备工作】（1）在本地硬盘中创建文件夹（2）启动DreamweaverCS3（3）创建名称为“05表格的应用与美化”的本地站点【任务5-1-1】创建网页0501.html【任务描述】（1）创建样式文件0501common.css和main0501.c

2、ss，在这些样式文件中定义标签及选择符的样式属性。（2）创建网页文档0501.html，且链接外部样式文件0501common.css和main0501.css。（3）对网页0501.html的页面进行布局设计，在网页中插入表格和输入文字。网页0501.html的浏览效果如图5-1所示。图5-1　网页0501.html的游览效果【页面设计】网页0501.html的设计视图的外观效果如图5-2所示，整体区块的ID选择符名称是menu，类选择符名称是w。.w+#menu图5-2　网页0501.html的主体布局结构5教学单元5　表格的应用与美化

3、【实施过程】1．操作准备（1）创建文件夹（2）DreamweaverCS3初始参数设置2．建立公共样式文件0501common.css，定义标签样式属性3．建立样式文件main0501.css，定义样式4．新建网页文档0501.html5．链接外部样式文件main0501.css切换到网页文档0501.html的【代码视图】，在标签“”的前面输入两行链接外部样式表的代码，如下所示：

4、css/main0501.css"rel="stylesheet"type="text/css"/>6．对网页的页面进行布局切换到“代码视图”，在网页0501.html代码区域的与之间输入表5-3所示的XHTML代码。表5-3　网页0501.html布局结构的XHTML代码行号XHTML代码12