XHTML+CSS网页布局与美化案例教程电子教案 教学课件 ppt 作者 陈承欢 03图像与背景的应用与美化.doc

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

1、教学单元3　图像与背景的应用与美化教学单元3　图像与背景的应用与美化【教学要点】（1）熟悉图文混排布局（2）学会利用CSS样式设置图像样式（3）学会灵活应用图像美化网页（4）学会灵活应用背景颜色和背景图像美化网页（5）学会制作全图排版网页（6）了解利用CSSSprites原理合成图片的方法（7）了解利用背景图像实现圆角布局的方法（8）了解利用CSS样式控制圆角布局的方法（9）了解利用CSS样式设置图像阴影效果的方法【3.1　前导训练】【准备工作】（1）在本地硬盘中创建文件夹（2）启动DreamweaverCS3（3）创建名称为“0

2、3图像与背景的应用与美化”的本地站点【任务3-1-1】创建网页0301.html【任务描述】（1）创建样式文件0301common.css和main0301.css，在这些样式文件中定义标签及选择符的样式属性。（2）创建网页文档0301.html，且链接外部样式文件0301common.css和main0301.css。（3）对网页0301.html的页面进行布局设计，在网页中插入图像和输入文字。网页0301.html的浏览效果如图3-1所示。7教学单元3　图像与背景的应用与美化图3-1　网页0301.html的游览效果【实施过程

3、】1．操作准备（1）创建文件夹（2）DreamweaverCS3初始参数设置2．建立公共的样式文件0301common.css，定义标签样式属性在文件夹“css”中建立样式文件0301common.css，在该样式文件中编写CSS样式代码，定义标签样式属性。3．建立样式文件main0301.css，定义样式在文件夹“css”中建立样式文件main0301.css，在该样式文件中编写CSS样式代码，定义所需要的样式。4．新建网页文档0301.html5．链接外部样式表文件main0301.css6．对网页的页面进行布局7．在网页中插

4、入图像和输入文字在网页0301.html代码区域插入图像，输入相应的文字。8．保存网页9．浏览网页效果【任务3-1-2】创建网页0302.html【任务描述】（1）创建样式文件main0302.css，在该样式文件中定义标签及选择符的样式属性。（2）创建网页文档0302.html，且链接外部样式文件main0302.css。（3）对网页0302.html的页面进行布局设计，在网页中插入图像和输入文字。网页0302.html的浏览效果如图3-5所示。7教学单元3　图像与背景的应用与美化图3-5　网页0302.html的浏览效果【实施

5、过程】1．新建文件夹，准备图像文件2．建立样式文件main0302.css，定义样式3．新建网页文档0302.html在子文件夹“任务3-2”中，通过【新建文档】对话框或者直接使用【新建文件】快捷菜单创建一个名称为“0302.html”的网页文档。打开网页文档0302.html，在“文档”工具栏的“标题”文本框直接输入网页标题“任务3-2”。4．链接外部样式表文件main0302.css切换到网页文档0302.html的【代码视图】，在标签“”的前面输入两行链接外部样式表的代码，如下所示：

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

7、m02left_t">