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

PAGE PAGE 217 企业案例 静态网页制作（Dreamweaver） 所在系别： 计算机技术系 所属专业： 计算机网络技术 指导教师: 张亚静 专业负责人： 孙志成 案例十、鲜花网 一、案例整体目标及要求 （一）案例目的 通过网站制作提高学生运用所学的理论知识和技能、最终提升学生开发网站的综合能力。 （二）案例要求 在设计网站之前，一定要欣赏一些优秀的网站，从开始网站的定位，网站框架，资料收集，到具体的制作设计，再到最后的调试、发布。灵活运用DIV、CSS布局方式搭建网页布局；熟练使用网页开发工具。 二、案例解决方案 1、页面导航 分为全部商品、首页、鲜花、永生花、蛋糕、礼品、教你选花八个模块。 效果图： 2、首页 效果图: 导航条下的图片是 大图轮播的效果（利用js样式来修饰） 关键代码如下： script type=text/javascript $(window).load(function() { $(#featured).orbit(); }); /script div class=container div id=featured img src=images/top.jpg / img src=images/qixi_banner[1].jpg / img src=images/banner7[1].jpg data-caption=#htmlCaption / img src=images/u=3412581411,3974665841fm=214gp=0[1].jpg/ /div /div 效果图: 关键代码： div id=top21 div id=srxh生日鲜花-爱情篇/div div id=loveLOVE FLOWERS/div /div div id=top22 div style=height:600px;width:420px;float:left;img src=images/birthday_f1.jpg/div div id=top23 div id=top24 div id=ywqs brnbsp;nbsp;nbsp;鲜花/一往情深brnbsp;nbsp;19枝红玫瑰，勿忘我适量br nbsp;nbsp;nbsp;￥ 252 img src=images/9010966.jpg /div div id=waxs brnbsp;nbsp;鲜花/为爱相随brnbsp;nbsp;33枝红玫瑰，石竹梅围绕br nbsp;nbsp;￥ 298 img src=images/9012033.jpg /div div id=yhaq brnbsp;nbsp;鲜花/永恒的爱情brnbsp;nbsp;红玫瑰99枝brnbsp;nbsp; ￥ 599 img src=images/9010917.jpg /div /div div id=top25 div id=zarc nbsp;nbsp;nbsp;鲜花/真爱如初brnbsp;nbsp;白玫瑰11枝，勿忘我适量brnbsp;nbsp;nbsp;￥ 186 img src=images/9010947.jpg /div div id=lmbf nbsp;nbsp;鲜花/浪漫缤纷brnbsp;nbsp;戴安娜粉玫瑰50枝，石竹梅围绕一周brnbsp;nbsp;￥ 356 img src=images/9012041.jpg /div div id