《网页设计---用CSS设置丰富的超链接特效》公开课教案

《网页设计---用CSS设置丰富的超链接特效》公开课教案
计算机课组黄荣悦
授课时间：2011年11月14日（第十二周周一第4节）
授课地点：科技楼四楼403室
授课班级：10计算机班
课题：用CSS设置丰富的超链接特效
一、教学目的：通过这节课的学习，在前面所学的用CSS设置文字效果、CSS设置图片效果和CSS设置网页中的背景的基础上继续深入学习CSS设置超链接效果。

本课重点理解超链接标记a和a相对应的4个伪类别（a:link,a:hover,a:visited,a:active）所表示的不同状态，在此基础上灵活通过对超链接标记a和a相对应的4个伪类别的CSS规则的编辑，来制作出丰富的超链接特效。

二、教学方法：实例演示分析教学法
三、教学重点：本课重点理解超链接标记a和a相对应的4个伪类别（a:link,a:hover,a:visited,a:active）所表示的不同状态。

四、教学难点：本课难点在于灵活通过对超链接标记a和a相对应的4个伪类别的CSS规则的编辑，来制作出丰富的超链接特效。

五、教学过程：
(一)：理解a 的4个伪类别:a:link,a:hover,a:visited,a:active 对应的不同状态。

(二)、简单修改各个伪类别的文字效果和下划线。

（以第6章的“个人主页”为例）
a: link{ /* 超链接正常状态下的样式*/
color:#005799; /* 深蓝*/
text-decoration: none; /* 无下划线*/
}
a: visited{ /* 访问过的超链接*/
color:#000000; /* 黑色*/
text-decoration: none; /* 无下划线*/
}
a: hover{ /* 鼠标经过时的超链接*/
color:#FFFF00; /* 黄色*/
text-decoration: underline; /* 下划线*/
}
(三)、进一步修改各个伪类别的CSS样式中边框线来制作按钮式特效。

（以6-2.html为例）
a: link, a: visited{ /* 超链接正常状态、被访问过的样式*/
padding:4px 10px 4px 10px; /*文字位置（上右下左）*/
border-top: 2px solid #ffffff; /* 边框实现阴影效果*/
border-left: 2px solid #ffffff;
border-bottom: 2px solid #000000;
border-right: 2px solid #000000;
}
a:hover{ /* 鼠标经过时的超链接*/
padding:6px 8px 2px 12px; /* 改变文字位置（向上左移2px）*/
border-top: 2px solid #000000; /* 边框变换，实现“按下去”的效果*/
border-left: 2px solid #000000;
border-bottom: 2px solid #ffffff;
border-right: 2px solid #ffffff;
}
(四)、配合PS制作出两张同样大小不同颜色的图片，通过修改相应伪类别的CSS样式中的背景图片来制作出浮雕式特效。

（以6-3.html为例）
a:link,a:visited{
background:url(button1.jpg) no-repeat; /*超链接正常、被访问过超链接背景图片*/
}
a:hover{
background:url(button2.jpg) no-repeat; /* 变换背景图片*/
}
（五）作业：完成以上3个例子并上交服务器。