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

PAGE PAGE 217 企业案例 静态网页制作（Dreamweaver） 所在系别： 计算机技术系 所属专业： 计算机网络技术 指导教师: 张亚静 专业负责人： 孙志成 案例十三、电脑官方网站 一、案例整体目标及要求 （一）案例目的 以HTML+CSS+DIV技术来做成静态页面，JavsScript脚本来添加的动态特效，采用HTML+CSS+DIV来网页布局。 （二）案例要求 在教师的指导下进行网页制作专业技能的训练，培养学生综合应用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的培养过程。因此，加强实践教学环节，对实现本专业的培养目标，提高学生的综合素质有着重要的作用。 二、案例解决方案 1、页面导航 分为首页、白羊座、金牛座、双子座等13个模块。 效果图： 2、首页 效果图: 先看到的是网站logo，然后是网站的导航条，可以链接到详细信息。 中间显示的则是星空的图片。以图片滚动的特效来显示。（利用js脚本，将图片放到表格中，实现图片滚动的效果）。然后是星座的意义和起源。 关键代码如下： link rel=stylesheet href=css/orbit-1.2.3.css link rel=stylesheet href=css/lanrenzhijia.css script type=text/javascript src=js/jquery-1.5.1.min.js/script script type=text/javascript src=js/jquery.orbit-1.2.3.min.js/script !--[if IE] style type=text/css .timer { display: none !important; } div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=endColorstr=;zoom: 1; } /style ![endif]-- !-- Run the plugin -- script type=text/javascript $(window).load(function() { $(#featured).orbit(); }); /script div class=dtlb div class=container div id=featured img src=images/dt1.jpg / img src=images/dt2.jpg data-caption=#htmlCaption / img src=images/dt3.jpg / /div /div /div .dtlb{ position:absolute; top:190px; left:100px; width:965px; height:530px;} div.slider-nav span.right { background: url(../images/right-arrow.png); left:905px; top:300px; } div.slider-nav span.left { background: url(../images/left-arrow.png); left:25px; top:300px; } 效果截图： = 3 \* GB3 ③底部则显示的是版权信息。 效果截图： 关键代码： ul class=bu li class=bia class=a5 href=#手机版/a|/li li class=bia class=a5 href=#关于我们/a|/li li class=bia class=a5 href=#联系我们/a|/li li class=bia class=a5 href=#法律声明/a|/li li class=bia class=a5 href=#收藏本站/a|/li li class=bia class=a5 href=#设为首页/a|/li li class=bia class=a5 href=#欢迎投稿/a|/li li class=b