静态网页制作（Dreamweaver） 静态网页制作（Dreamweaver） 企业案例12.docVIP

PAGE PAGE 217 企业案例 静态网页制作（Dreamweaver） 所在系别： 计算机技术系 所属专业： 计算机网络技术 指导教师: 张亚静 专业负责人： 孙志成 案例十二、设计和制作计算机系部网站 一、案例整体目标及要求 （一）案例目的 本案例的主要目的是通过制作个人作品及网站，提高网页制作的能力，灵活运用DIV盒子布局和CSS样式，我选择的主题是搜狗天气。 （二）案例要求 在教师的指导下对学生进行网页制作的训练，培养学生综合运用理论知识分析和解决实际问题的能力。因此加强实践教学环节，对实现本专业的培养目标，提高学生的综合素质有着重要的作用。 二、案例解决方案 1、页面导航 分为首页、国内天气、景点天气、PM2.5、天气新闻五个模块。 效果图： 关键代码如下： 源代码： div id=div1 /div div id=dht ul li class=li1a class=lj href=#首页/a/li li class=li1a class=lj href=#国内天气/a/li li class=li1a class=lj href=#景点天气/a/li li class=li1a class=lj href=pm.htmlPM2.5/a/li li class=li1a class=lj href=tianqixinwen.html天气新闻/a/li /ul /div css样式： #div1{ position:absolute; height:40px; width:960px; background:#118ED8; margin:0 auto; top:120px; left:310px; } a.lj:link{ color:#FFF; text-decoration:none; font-size:16px; margin-top:20px; margin-left:50px; } a.lj:hover{ color:#FFF; text-decoration:none; } a.lj:active{ color:#FFF; text-decoration:none;} a.lj:visited{color:#FFF; text-decoration:none; font-size:16px; } a.lj2:link{ border:none; } a.lj3:link{ color:#FFF; text-decoration:none;} a.lj3:hover{ color:#FFF; text-decoration:none;} a.lj3:active{ color:#FFF; text-decoration:none;} #dht{ position: absolute; left: 260px; top: 120px; width: 960px; height:35px; /* background: url(../images/gyjsxy_r3_c44.jpg); */ margin: 0 auto; font-family:Arial Black, Gadget, sans-serif; } .li1{ float:left; list-style-type:none; width:150px; text-align:center; line-height:5px; margin-top:10px; color:#FFF; font-size:16px; } 2、首页 效果图: 我们看到的是首页大体的效果，天气预报是以图片滚动的大图轮播特效来显示。（利用js样式来修饰，实现图片滚动的效果）。 关键代码如下： .container { position: absolute; top: 50%; left: 50%; /