XHTML+CSS网页布局与美化案例教程电子教案 教学课件 ppt 作者 陈承欢 04超链接与导航栏的美化.doc

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

1、教学单元4　超链接与导航栏的美化教学单元4　超链接与导航栏的美化【教学要点】（1）熟悉超链接标签及其伪类。（2）学会利用CSS样式定义各种不同形式的超链接（3）学会制作水平导航栏和垂直导航栏（4）学会利用背景图像制作立体导航菜单（5）了解导航栏菜单自动伸缩和超链接的悬停交换效果的实现方法【4.1　前导训练】【准备工作】（1）在本地硬盘中创建文件夹（2）启动DreamweaverCS3（3）创建名称为“04超链接与导航栏的美化”的本地站点【任务4-1-1】创建网页0401.html【任务描述】（1）创建样式文件0401comm

2、on.css和main0401.css，在这些样式文件中定义标签及选择符的样式属性。（2）创建网页文档0401.html，且链接外部样式文件0401common.css和main0401.css。（3）对网页0401.html的页面进行布局设计，在网页中插入图像、输入文字和设置必要的超链接。网页0401.html的浏览效果如图4-1所示。图4-1　网页0401.html的游览效果【实施过程】1．操作准备（1）创建文件夹7教学单元4　超链接与导航栏的美化（2）DreamweaverCS3初始参数设置2．建立公共的样式文件040

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

4、标题”文本框直接输入网页标题“任务4-1”。5．链接外部样式表文件main0401.css切换到网页文档0401.html的【代码视图】，在标签“”的前面输入两行链接外部样式表的代码，如下所示：6．对网页的页面进行布局切换到“代码视图”，在网页0401.html代码区

5、域的与之间输入表4-3所示的XHTML代码。表4-3　网页0401.html布局结构的XHTML代码行号XHTML代码1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.