《网页设计---用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）所表示的不同状态。
四、教学难点：css特效文字本课难点在于灵活通过对超链接标记a和a相对应的4个伪类别的CSS规则的编辑，来制作出丰富的超链接特效。
五、教学过程：
(一)：理解a 的4个伪类别:a:link,a:hover,a:visited,a:active 对应的不同状态。
伪类别
说明
a: link
超链接的普通样式，即正常浏览状态的样式
a: visited
被点击过的超链接的样式
a: hover
鼠标指针经过超链接上时的样式
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个例子并上交服务器。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。