静态网页制作（Dreamweaver） 静态网页制作（Dreamweaver） 企业案例31.doc

PAGE PAGE 217 企业案例 静态网页制作（Dreamweaver） 所在系别： 计算机技术系 所属专业： 计算机网络技术 指导教师: 张亚静 专业负责人： 孙志成 案例三十一、河北美食网网站 一、案例整体目标及要求 （一）案例目的 通过实践项目培养我们的动手能力，提高网页制作能力和水平，灵活运用HTML+CSS+DIV以及一些JS特效，本案例的主题是河北美食网网站。 （二）案例要求 通过对Dreamweaver该课程的学习，能够熟练掌握HTML、CSS和DIV的基本知识；灵活运用DIV+CSS布局方式搭建网页布局；熟练使用网页制作开发工具；掌握网站建设的基本方法和技巧，使自己能够顺利完成个人网页的制作。 二、案例解决方案 1、页面导航 分为首页，热点关注，协会之家，饮食文化，酒店管理，餐饮人物，招聘求职，投资指南，美食指南，食府推荐，美食菜谱11个模块。 效果图如下： 代码如下 div id=dh ul lia href=#a href=index.html首页/a/a/li lia href=one.html热点关注/a/li lia href=#协会之家/a/li lia href=two.html饮食文化/a/li lia href=#酒店管理/a/li lia href=#餐饮人物/a/li lia href=#招聘求职/a/li lia href=#投资指南/a/li lia href=#美食指南/a/li lia href=#食府推荐/a/li lia href=#美食菜谱/a/li /ul /div CSS样式如下： #dh{ position:absolute; width:999px; height:30px; top:120px; background:#F93; margin-left:250px; margin-top:10px; border:#F90 solid 2px;} .dh{ margin-top:8px; left:50px;} li{ width:90px; float:left; text-align:center; font-size:18px; margin-top:50px;} #dh li{font-size:18px; } 2、首页 效果图: 运用了左右滚动，关键代码如下： div class=container div id=featured div class=content style= h1Orbit does content now./h1 h3Highlight me...Im text./h3 /div a href= img src=images/dtlb1.jpg width=1010px height=200px//a img src=images/dtlb2.jpg width=1010px height=200px data-caption=#htmlCaption / img src=images/dtlb4.jpg width=1010px height=200px / /div /div CSS代码如下：.container { position: absolute; top:185px; left: 250px; } #featured { width: 1000px; height: 10px; background: #000 url(../images/loading.gif) no-repeat center center; overflow: hidden; } #featuredimg, #featureddiv, #featureda { display: none; } 3.中间部分 效果图如下： 关键代码：div id=diva div id=diva-1 img src=images/1_111026201233_1.jpg/div div id=diva-2a href=#热点关注/a/div div id=diva-