XHTML+CSS网页布局与美化案例教程电子教案 教学课件 ppt 作者 陈承欢 09多列式网页的布局与美化.doc

XHTML+CSS网页布局与美化案例教程电子教案 教学课件 ppt 作者 陈承欢 09多列式网页的布局与美化.doc

ID:57761704

大小:1.30 MB

页数:8页

时间:2020-03-26

XHTML+CSS网页布局与美化案例教程电子教案 教学课件 ppt 作者 陈承欢 09多列式网页的布局与美化.doc_第1页
XHTML+CSS网页布局与美化案例教程电子教案 教学课件 ppt 作者 陈承欢 09多列式网页的布局与美化.doc_第2页
XHTML+CSS网页布局与美化案例教程电子教案 教学课件 ppt 作者 陈承欢 09多列式网页的布局与美化.doc_第3页
XHTML+CSS网页布局与美化案例教程电子教案 教学课件 ppt 作者 陈承欢 09多列式网页的布局与美化.doc_第4页
XHTML+CSS网页布局与美化案例教程电子教案 教学课件 ppt 作者 陈承欢 09多列式网页的布局与美化.doc_第5页
资源描述:

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

1、教学单元9 多列式网页的布局与美化教学单元9 多列式网页的布局与美化多列式网页布局的结构较复杂,其实现方法也是多种多样,可以采用嵌套结构、并列浮动结构和列表结构,布局结构的实现方法与两列式网页布局和三列式网页布局类似。【教学要点】(1)熟悉多列式网页布局的各种方法(2)学会多行多列混合布局网页的方法(3)学会并列浮动布局网页的方法(4)学会利用列表项布局网页的方法(5)了解CSS代码的精简与优化方法(6)了解检验网站是否符合Web标准的方法【9.1 前导训练】【准备工作】(1)在本地硬盘中创建文件夹(2)启动DreamweaverCS3(3)创建名称

2、为“09多列式网页的布局与美化”的本地站点【任务9-1-1】创建网页0901.html【任务描述】(1)创建样式文件0901common.css和main0901.css,在这些样式文件中定义标签及选择符的样式属性。(2)创建网页文档0901.html,且链接外部样式文件0901common.css和main0901.css。(3)对网页0901.html的页面进行布局设计,在网页中插入图像和输入文字。网页0901.html的浏览效果如图9-1所示。7教学单元9 多列式网页的布局与美化图9-1 网页0901.html的游览效果【实施过程】1.操作准备

3、(1)创建文件夹显示DreamweaverCS3的【文件】面板,在【文件】面板中的文件夹“0901前导训练”中建立子文件夹“任务9-1”,然后在文件夹“任务9-1”中建立子文件夹“css”和“images”,并将所需要的图像文件拷贝到“images”子文件夹中。(2)DreamweaverCS3初始参数设置打开【首选参数】对话框,在该对话框的“分类”列表项中选择“新建文档”,默认文档设置为“HTML”,默认扩展名设置为“.html”,默认编码设置为“简体中文(GB2312)”。DreamweaverCS3初始参数设置完成后,单击【确定】按钮关闭【首选

4、参数】对话框。2.建立公共样式文件0901common.css,定义标签样式属性在文件夹“css”中建立样式文件0901common.css,在该样式文件中编写CSS样式代码,定义标签样式属性。3.建立样式文件main0901.css,定义样式在文件夹“css”中建立样式文件main0901.css,在该样式文件中编写CSS样式代码,定义所需要的样式。4.新建网页文档0901.html在子文件夹“任务9-1”中,通过【新建文档】对话框或者直接使用【新建文件】快捷菜单创建一个名称为“0901.html”的网页文档。打开网页文档0901.html,在“文

5、档”工具栏的“标题”文本框直接输入网页标题“任务9-1”。5.链接外部样式文件main0901.css切换到网页文档0901.html的【代码视图】,在标签“”的前面输入两行链接外部样式表的代码,如下所示:7教学单元9 多列式网页的布局与美化6.对网页的页面进行布局切换到“代码视图”,在网页0

6、901.html代码区域的与之间输入表9-3所示的XHTML代码。表9-3 网页0901.html布局结构的XHTML代码行号XHTML代码1234

7.在网页中插入项目列表及列表项在网页0901.html中,分别在代码“
”,“”内插入项目列表及列表项。8.在网页中插入图像和输入文字在网页0901.html的“

7、ivid="article">”与“”之间各个列表项中输入文字和插入图像。9.保存网页单击DreamweaverCS3“标准”工具栏中的【保存】按钮或【全部保存】按钮,保存网页“0901.html”。10.浏览网页效果按快捷键F12,网页的浏览效果如图9-1所示。【任务9-1-2】创建网页0902.html【任务描述】(1)创建样式文件main0902.css,在该样式文件中定义标签及选择符的样式属性。(2)创建网页文档0902.html,且链接外部样式文件main0902.css。(3)对网页0902.html的页面进行布局设计,在网页

8、中插入图像和输入文字。网页0902.html的浏览效果如图9-4所示。图9-4 网页0902.html的浏览

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。