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

PAGE PAGE 217 企业案例 静态网页制作（Dreamweaver） 所在系别： 计算机技术系 所属专业： 计算机网络技术 指导教师: 张亚静 专业负责人： 孙志成 案例十一、中国日报网 一、案例整体目标及要求 （一）案例目的 本案例的主要目的是通过制作个人网站培养我们对这门课程掌握的熟练程度，提高网页制作能力和水平，灵活运用HTML+CSS+DIV、JavaScript技术，我选择的主题是中国日报网。 （二）案例要求 网页设计与制作综合案例是教学过程中重要的实践性教学环节，它是根据HTML+CSS+DIV教学计划的要求，在教师的指导下对学生进行网页制作专业技能的训练，培养学生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能的培养过程。因此加强实践教学环节。 二、案例解决方案 1、图标及页面导航 分为首页、时政、资讯、财经、生活、图片、视频、专栏、双语九个模块。 效果图： 关键代码如下： div id=hs div id=tb img src=images/图标.jpg width=1012 height=94 / /div div class=xian/div div id=dla href=denglu.html登录/a/div /div div id=dht ul lia href=#首页/a/li lia href=#时政/a/li lia href=#资讯/a/li lia href=#财经/a/li lia href=#生活/a/li lia href=#图片/a/li lia href=#视频/a/li lia href=#专栏/a/li lia href=#双语/a/li /ul /div 新闻特别推荐 可以链接到二级页面的详细信息。 效果图: 关键代码如下： div id=hz1 a href=#img src=images/大图轮播2.jpg width=636 height=360 / id=imgD1/a div id=wz1ba href=hongshan.html冬季到四明湖来赏红杉 /a/b/div /div 二级页面 利用js脚本，实现图片滚动的效果。设置文字图片及其CSS样式 效果截图： 关键代码如下： div id=zh div id=hh1 div id=z1冬季到四明湖来赏红杉/div div id=z2作者：史小凤 来源：中国新闻网 2016-12-12 19:56:03/div img src=images/分享.jpg / id=tu1 div class=x1/div /div div class=container div id=featured !-- div class=content style= h1Orbit does content now./h1 h3Highlight me...Im text./h3 /div-- img src=images/红杉.jpg height=600 width=900 / img src=images/红杉1.jpg height=600 width=900 / img src=images/hs2.jpg height=600 width=900 / /div !--span class=orbit-caption id=htmlCap