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

PAGE PAGE 217 企业案例 静态网页制作（Dreamweaver） 所在系别： 计算机技术系 所属专业： 计算机网络技术 指导教师: 张亚静 专业负责人： 孙志成 案例二十六、河北三木农业科技公司网站 一、案例整体目标及要求 （一）案例目的 通过实践项目培养我们的动手能力，提高网页制作能力和水平，灵活运用HTML+CSS+DIV、JavaScript技术，案例的主题是河北三木农业科技有限公司。。 （二）案例要求 网页以河北三木农业有限公司为主题，采用HTML+CSS+DIV来网页布局，它大致分为8个模块。第一模块是banner；第二模块是导航条；第三模块是图片；第四模块是产品展示和产品分类，大的div中设置左右各一个div，设置左右浮动；第五模块是种植优势和联系我们，布局和第四模块相同；第六模块是资质荣誉，用js设置滚动；第七模块是种植优势，还是大的div中有两个小的div;第八模块是版权信息。 二、案例解决方案 个人网页效果图 整效体果图： 二级页面效果： 2、导航条 分为网站首页、关于三木、种植优势、新闻资讯、种植知识、资质荣誉、留言反馈、人才招聘、联系我们十个模块。 效果图： 代码 div id=nav ul lia href=index.html网站首页/a/li lia href=guanyusanmu.html关于三木/a/li lia href=zhongzhiyoushi.html种植优势/a/li li新闻资讯/li li种植知识/li li产品展示/li li资质荣誉/li li留言反馈/li li人才招聘/li li联系我们/li /ul /div css模式 #nav{ width:1270px; height:35px; margin:0 auto; margin-top:-15px; background:#004F00; } #nav ul{list-style-type:none;} #nav li{float:left; line-height:35px; width:90px; margin-left:25px; color:#FFF; } 3、banner 效果图: 4、产品展示 效果截图： 代码： div id=firstdiv div id=left1 img class=img1 src=images/2345截图20161212211612.png / div id=firstline img src=images/2345截图20161206121909.png /nbsp;nbsp; img src=images/2345截图20161206121950.png /nbsp;nbsp; img src=images/2345截图20161206122131.png /nbsp;nbsp; img src=images/2345截图20161206122421.png /nbsp;nbsp; /div div id=secondline ul li杏鲍菇/li li香菇酱 /li li夹馍酱/li li金菇海带丝/li /ul /div div id=thirdline img src=images/2345截图20161206121909.png /nbsp;nbsp; img src=images/2345截图20161206121950.png /nbsp;nbsp; img src=images/2345截图20161206122421.png /nbsp;nbsp; img src=images/2345截图20161206122520.png /nbsp;nbsp; /div div id=fouthline ul