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

PAGE PAGE 217 企业案例 静态网页制作（Dreamweaver） 所在系别： 计算机技术系 所属专业： 计算机网络技术 指导教师: 张亚静 专业负责人： 孙志成 案例三十五、官方网站 一、案例整体目标及要求 （一）案例目的 通过网站制作完成CSS+DIV进行布局，通过JavaScript完成网页特效的制作，使用了背景音乐、flash动画丰富了网页的内容，提升网页制作的能力。 （二）案例要求 网页以电脑官方网站为主题，采用HTML+CSS+DIV、table来网页布局，它大致分为5个模块。大体结构是上、左、右，网页的head部分和left部分是不动的。right部分来显示不同页面的内容。 二、案例解决方案 1、页面导航 分为首页导航、通栏图、主要内容、尾部四个模块。 效果图： 2、首页导航 效果图: ①首先看到的是首页，然后是导航条，可以链接到详细信息。 （利用js脚本，将图片放到表格中，实现图片滚动的效果）。 关键代码如下： 效果截图：上半部分网页代码开始： HTML代码部分： div id=top div id=toptuimg src=imager/logo.png width=110 height=65 //div div id=nav ul lia href=sunpeipei.html首页/a/li li关于华润/li li新闻中心/li lia href=zhuying.html主营业务/a/li li商务服务/li li投资者关系/li li人才发展/li li企业委任/li li交流中心/li /ul /div /div CSS代码部分： /*页眉*/ #top{ width:1350px; height:85px; position:relative;} #toptu{ width:110px; height:65px; top:12px; left:175px; position:absolute;} /*导航*/ #nav{ margin:0 auto; position:absolute; margin-left:365px;line-height:52px;} #nav li{ list-style-type:none;float:left; line-height:52px; width:95px; margin:0 auto;} 3． 通栏部分： 效果图： HTML代码部分： div id=flashimg src=imager/foc03.jpg width=1350 height=285 / /div CSS代码部分： /*通栏图像*/ #flash{ width:1350px; height:285px; } 4、内容部分： 效果图： HTML代码部分： div id=con div id=conl/div div id=conltuimg src=imager/crc_default.gif width=160 height=103 //div div id=conldz 华润获评“十大公益企业”等称号并位列首位/div div id=conlxz 12月10日，“第二届中国社会责任百人论坛暨企业公益年会”在北京举办。会议发布br / 了《企业公益蓝皮书（2016）》，同时首次发布了“年度十大公益事件”和“中国企br / 业公益品牌传播研究报告”等最新研究成果，并对在社...详细 /div div id=conlli ul /ul li华润荣获2016年“香港绿色企业大奖”多.../li p/p li罗熹总经理拜会湖北省蒋超良书记、王晓.../li p/p li罗熹总经理拜会福建省于伟国省长/li /ul/div div id=conllia