网页设计15-超链接.pptVIP

内部培训资料,不作任何宣传用途 内部培训资料,不作任何宣传用途 P o w e r B a r 中国专业PPT设计交流论坛 授课人：何蕴婷 EMAIL：jmhyt@126.com 授课人：何蕴婷 EMAIL：jmhyt@126.com 内部培训资料,不作任何宣传用途 内部培训资料,不作任何宣传用途 网页设计与制作（15） CSS样式（9） ----超链接 知识技能目标 1、通过实训项目了解并掌握用css设置超链接样式。 实训内容 在网页中用css设置超链接样式 实训一：浮雕超链接 实训项目 通过实例了解CSS对超链接的控制效果 1、超链接实例1 课堂实践 table cellpadding=0 cellspacing=0 trtdimg src=banner1_left.jpg border=0/td/tr /table table cellpadding=0 cellspacing=0 trtda href=#首页导读/aa href=#在线用户/aa href=#查询网友/aa href=#在线好友/aa href=#好友名单/aa href=#查看讯息/aa href=#发送讯息/a/td/tr /table (1) 表格中插入带超链接的正文 课堂实践 …… style !-- a:link{ /* 超链接正常状态下的样式 */ color:#005799; /* 深蓝 */ text-decoration:none; /* 无下划线 */ } a:visited{/* 访问过的超链接 */ color:#CC66CC; /* 紫色 */ text-decoration:none; /* 无下划线 */ } a:hover{ /* 鼠标经过时的超链接 */ color:#FFFF00; /* 黄色 */ text-decoration:underline; /* 下划线 */ }…… /style (2) 设置超链接的样式 课堂实践 （1）设置统一样式： a{ /* 统一设置所有样式 */ font-family: Arial; font-size: .8em; text-align:center; margin:3px; } （2）利用边框样式模拟按钮效果 2设置按钮式的超链接样式 课堂实践 改变文字颜色、背景色、位置和边框，模拟“按下去”的效果 (3)设置鼠标经过的超链接样式 课堂实践 （1）制作背景渐变的图片做标题栏的背景 3设置浮雕式的超链接样式 课堂实践 制作浮雕的图片做超链接所在表格的行的背景 (2)制作浮雕的背景，样式table.links 课堂实践 制作按钮图片做按钮的背景图 (3)制作按钮的背景图,添加到a标记选择器中 课堂实践 制作深色浮雕图片做按钮的背景图 (4)制作鼠标经过按钮的样式,添加到a:hover选择器中 课堂实践 (5)制作鼠标的样式,添加到a.help:hover选择器中 课后作业 1. 参照课本P252-257中的例子，创建一网页15-1.htm—设计出另一种具有按钮式的超链接和荧光灯效果的菜单的网页。 The End Thanks a lot! 内部培训资料,不作任何宣传用途 内部培训资料,不作任何宣传用途 P o w e r B a r 中国专业PPT设计交流论坛 授课人：何蕴婷 EMAIL：jmhyt@126.com 授课人：何蕴婷 EMAIL：jmhyt@126.com 内部培训资料,不作任何宣传用途 内部培训资料,不作任何宣传用途