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

PAGE PAGE 217 企业案例 静态网页制作（Dreamweaver） 所在系别： 计算机技术系 所属专业： 计算机网络技术 指导教师: 张亚静 专业负责人： 孙志成 案例十三、电脑官方网站 一、案例整体目标及要求 （一）案例目的 本案例的主要目的是通过实践案例培养我们的动手能力，提高网页制作能力和水平，灵活运用HTML+CSS+DIV、JavaScript技术，我选择的主题是电脑官方网站。 （二）案例要求 在教师的指导下进行网页制作专业技能的训练，培养学生综合应用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的培养过程。因此，加强实践教学环节，对实现本专业的培养目标，提高学生的综合素质有着重要的作用。 二、案例解决方案 1、页面导航 分为首页、出境游、自由行、特卖会、优定制、一价全含、欧洲、泰国、东南亚、魅力日本、金牌品质十一个模块。 效果图： 关键代码： div id=div11 ul listronga href=index.html首页/a/strong/li listronga href=chujingyou.html出境游/a/strong/li listronga href=#自由行/a/strong/li listronga href=temaihui.html特卖会/a/strong/li listronga href=#优定制/a/strong/li listronga href=#一价全含/a/strong/li listronga href=#欧洲/a/strong/li listronga href=#泰国/a/strong/li listronga href=#东南亚/a/strong/li listronga href=#魅力日本/a/strong/li listronga href=#金牌品质/a/strong/li /div 3、css样式代码 ul{ position:absolute; left:150px; top:120px; width:1135px;` height:35px; background:#930; margin:0 auto; font-size:16px; margin-left:165px; margin-top:-50px; } li{ float:left; list-style-type:none; width:100px; text-align:center; line-height:35px; } 大图轮播效果图 关键代码： div class=container div id=featured div class=content style= /div a href=img src=images/574a459a66de47f6bd846d5cb3eca27a.jpg //a img src=images/786ddfa644d64bc8b7d1f785ef41a8f9.jpg data-caption=#htmlCaption / img src=images/c9b3afd6932248d897bdbced9c8fd7bd.jpg / /div /div js样式代码： script type=text/javascript src=js/js/jquery-1.5.1.min.js/script script type=text/javascript src=js/js/jquery.orbit-1.2.3.js/script script type=text/javascript src=js/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=endColorst