静态网页制作（Dreamweaver） 静态网页制作（Dreamweaver） 企业案例8.docxVIP

企业案例 静态网页制作（Dreamweaver） 所在系别： 计算机技术系 所属专业： 计算机网络技术 指导教师: 张亚静 专业负责人： 孙志成 案例八、青少年新闻网 一、案例整体目标及要求 （一）案例目的 本案例背景主要以中国青年为主题，还有一些国家政策和当时新闻，能让大学生更加了解当前国家动态，，提升学生网站案例开发经验。 （二）案例要求 在教师的指导下对学生进行网页制作专业技能的训练，培养学生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的培养过程，通过CSS+DIV技术实现页面的整体布局和页面效果。 二、案例解决方案 1、页面导航 分为首页、国内、时政、社会、国际、娱乐、图片等16个模块。 效果图 关键代码：ul id=ul li id=lia href=#首页/a/li li id=lia href=#国内/a/li li id=lia href=shizheng.html时政/a/li li id=lia href=#社会/a/li li id=lia href=#国际/a/li li id=lia href=#娱乐/a/li li id=lia href=#图片/a/li li id=lia href=#军事/a/li li id=lia href=#健康/a/li li id=lia href=#时尚/a/li li id=lia href=#科技/a/li li id=lia href=#体育/a/li li id=lia href=jiaoyu.html教育/a/li li id=lia href=#专题/a/li li id=lia href=#原创/a/li li id=lia href=#策划/a/li /ul 样式：#ul{ list-style:none; } #li{ float:left; line-height:40px; width:60px; vertical-align:middle; } 2、首页 效果图: 先看到的是网站简介，然后是网站的特别推荐，可以链接到详细信息。 = 2 \* GB3 ②下面显示则是最新消息，以图片滚动的特效来显示。（利用js脚本，实现图片无缝滚动的效果）。 关键代码如下： div id=div7 DIV id=demo style=OVERFLOW: hidden; WIDTH:1000px; HEIGHT:200px TABLE cellPadding=0 align=left border=0 cellspace=0 TBODY TR TD id=demo1 vAlign=top TABLE cellSpacing=0 cellPadding=0 width=1000px border=0 id=tupian TBODY TR TD align=middle class=a1 IMG src=images/W020161202306423812974.jpg style=margin-top:2px; margin-left:4px;BR/TD TD align=middle class=a1 IMG src=images/W020161202306933520290.jpg style=margin-top:2px; margin-left:4px;BR/TD TD align=middle class=a1 IMG src=images/W020161202307274219792.jpg style=margin-top:2px; margin-left:4px;BR/TD TD align=middle class=a1 IMG src=images/W020161202307747572130.jpg style=margin-top:2px; margin-le