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

PAGE PAGE 217 企业案例 静态网页制作（Dreamweaver） 所在系别： 计算机技术系 所属专业： 计算机网络技术 指导教师: 张亚静 专业负责人： 孙志成 案例五、保护环境网站 一、案例整体目标及要求 （一）案例目的 过实践项目培养我们的动手能力，提高网页制作能力和水平，灵活运用HTML+CSS+DIV、JavaScript技术，案例的主题是环境保护以及污染的方面。 （二）案例要求 网页以保护环境缓解污染为主题，采用HTML+CSS+DIV来网页布局，它大致分为5个模块。大体结构是上、左、右以及下，网页的head部分和bottom部分是不动的。Left和right部分来显示不同页面的内容。 二、案例解决方案 1、页面导航 分为走进环保、环境质量、污染防治、生态保护、核与辐射、信息公开、互动交流、公众服务、党风廉政九个模块。 效果图： 2、首页 效果图: 先看到的是走进环保，然后是网站的党政廉风，可以链接到详细信息。 = 2 \* GB3 ②下面显示则是最新污染天气情况，展示美好环境环保地球的图片。以图片滚动的特效来显示。（利用js脚本，将图片放到DIV中，实现图片滚动的效果）。 关键代码如下： 主要代码如下： div class=md div id=blogs_spacerank_0 div class=leftaimg style=height:250px; width:645px; src=images/water (2).jpg//div div class=righta ul li class=righta李克强会见加蓬总统邦戈/li li class=righta常万全：以扎实工作推动新疆社会稳定和长治久安/li li class=righta杨洁篪将访问墨西哥/li li class=righta总理念兹在兹“民生之本”：就业是经济最好的底色/li li class=righta刘延东：创新 合作 包容 共享?携手并肩开创孔子学院发展新局面/li li class=righta这一周，国务院定了这些大事！你的这些关切有了回应！/li li class=righta刘延东：办好中国特色社会主义高校 推动我国高等教育事业迈上新台阶/li li class=righta郭声琨会见美国总统国家安全事务助理赖斯/li /ul /div /div 样式代码如下： .md-head { PADDING-LEFT:1px; LINE-HEIGHT:30px; 导航条大小 HEIGHT:55px; width:650px; } .md-head A { FLOAT: left; MARGIN-LEFT: 5px; WIDTH:150px; BACKGROUND-COLOR: #EFEFEF;/*灰色*/ TEXT-ALIGN: center; } .md-head A.cur { COLOR: #000; BACKGROUND-COLOR:#FFF;/*白色*/ TEXT-DECORATION: none; /*border-top:solid #399;*/ } #leftxia{ height:980px; width:660px; margin-top:15px; /*background:#0F0;*/ float:left; position:relative; } #zhongjian{ margin:0px auto; text-align:center; height:1000px; width:1000px; /*background:#FF0;*/ margin-top:10px; position:relative; } 效果截图： = 3 \* GB3 ③国务要闻和环境要闻