XHTML+CSS网页布局与美化的案例教程电子教案03图像与背景的应用与美化.docVIP

教学单元3　图像与背景的应用与美化 【教学要点】 （1）熟悉图文混排布局 （2）学会利用CSS样式设置图像样式 （3）学会灵活应用图像美化网页 （4）学会灵活应用背景颜色和背景图像美化网页 （5）学会制作全图排版网页 （6）了解利用CSS Sprites原理合成图片的方法 （7）了解利用背景图像实现圆角布局的方法 （8）了解利用CSS样式控制圆角布局的方法 （9）了解利用CSS样式设置图像阴影效果的方法 【3.1　前导训练】 【准备工作】 （1）在本地硬盘中创建文件夹 （2）启动Dreamweaver CS3 （3）创建名称为“03图像与背景的应用与美化”的本地站点 【任务3-1-1】创建网页0301.html 【任务描述】 （1）创建样式文件0301common.css和main0301.css，在这些样式文件中定义标签及选择符的样式属性。 （2）创建网页文档0301.html，且链接外部样式文件0301common.css和main0301.css。 （3）对网页0301.html的页面进行布局设计，在网页中插入图像和输入文字。 网页0301.html的浏览效果如图3-1所示。 图3-1　网页0301.html的游览效果 【实施过程】 1．操作准备 （1）创建文件夹 （2）Dreamweaver CS3初始参数设置 2．建立公共的样式文件0301common.css，定义标签样式属性 在文件夹“css”中建立样式文件0301common.css，在该样式文件中编写CSS样式代码，定义标签样式属性。 3．建立样式文件main0301.css，定义样式 在文件夹“css”中建立样式文件main0301.css，在该样式文件中编写CSS样式代码，定义所需要的样式。 4．新建网页文档0301.html 5．链接外部样式表文件main0301.css 6．对网页的页面进行布局 7．在网页中插入图像和输入文字 在网页0301.html代码区域插入图像，输入相应的文字。 8．保存网页 9．浏览网页效果 【任务3-1-2】创建网页0302.html 【任务描述】 （1）创建样式文件main0302.css，在该样式文件中定义标签及选择符的样式属性。 （2）创建网页文档0302.html，且链接外部样式文件main0302.css。 （3）对网页0302.html的页面进行布局设计，在网页中插入图像和输入文字。 网页0302.html的浏览效果如图3-5所示。 图3-5　网页0302.html的浏览效果 【实施过程】 1．新建文件夹，准备图像文件 2．建立样式文件main0302.css，定义样式 3．新建网页文档0302.html 在子文件夹“任务3-2”中，通过【新建文档】对话框或者直接使用【新建文件】快捷菜单创建一个名称为“0302.html”的网页文档。打开网页文档0302.html，在“文档”工具栏的“标题”文本框直接输入网页标题“任务3-2”。 4．链接外部样式表文件main0302.css 切换到网页文档0302.html的【代码视图】，在标签“/head”的前面输入两行链接外部样式表的代码，如下所示： link href=css/0301common.css rel=stylesheet type=text/css / link href=css/main0302.css rel=stylesheet type=text/css / 5．对网页的页面进行布局 切换到“代码视图”，在网页0302.html代码区域的body与/ body之间输入表3-7所示的XHTML代码。 表3-7　网页0302.html布局结构的XHTML代码 行号 XHTML代码 div class=m02left_con div class=m02left_t /div div class=m02left_c div class=m02left_w /div div class=m02left_r /div /div /div 6．在网页中插入图像和输入文字 在网页0302.html代码区域分别输入文字、插入图像、插入项目列表及其列表项。 7．保存网页 8．浏览网页效果 【任务3-1-3】创建网页0303.html 【任务描述】 任务3-3为考核项目，请独立完成以下操作任务：参考任务3-1所创建网页的右侧结构以及任务3-2所创建的网页，创建如图3-8所示的网页。 图3-8　网页0303.html的浏览效果 【实施过程】 1．新建文件夹，准备图像文件 2．建立样式文件main0303.css，定义样式 3．新建网页文档0303.html 4．链接外部样式表文件main030