欢迎来到天天文库
浏览记录
ID:52291278
大小:1.35 MB
页数:7页
时间:2020-03-26
《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">
6、/0301common.css"rel="stylesheet"type="text/css"/>5.对网页的页面进行布局切换到“代码视图”,在网页0302.html代码区域的
7、m02left_t">
8、2所创建的网页,创建如图3-8所示的网页。图3-8 网页0303.html的浏览效果【实施过程】1.新建文件夹,准备图像文件2.建立样式文件main0303.css,定义样式3.新建网页文档0303.html4.链接外部样式表文件main0303.
此文档下载收益归作者所有