静态网页制作（Dreamweaver） 静态网页制作（Dreamweaver） 企业案例2.doc

PAGE PAGE 217 企业案例 静态网页制作（Dreamweaver） 所在系别： 计算机技术系 所属专业： 计算机网络技术 指导教师: 张亚静 专业负责人： 孙志成 案例二、百度新闻 一、案例整体目标及要求 （一）案例目的 通过实践项目培养我们的动手能力，提高网页制作能力和水平，灵活运用HTML+CSS+DIV、JavaScript技术，本案例主题是百度新闻。 （二）案例要求 以CSS+DIV技术来做成静态页面，JavaScript来添加的动态特效。提升学生设计和创建网页的技能。网页以电脑官方网站为主题，采用HTML+CSS+DIV、table来网页布局，它大致分为6个模块。大体结构是上、左、右，下网页的head部分和right部分是不动的。left部分来显示不同页面的内容。 二、案例解决方案 百度新闻图标 效果图： 关键代码如下： div id=tou table width=1004 border=0 cellspacing=0 cellpadding=0 tr td width=151 height=81img src=images/dyt.png width=145 height=57 //td td width=293input name=textfield type=text id=textfield value= size=40 maxlength=1000 //td td width=386img src=images/2345截图20161129161822.png width=100 height=39 //td td width=47a href=#帮助/a/td td width=70a href=#高级有哪些信誉好的足球投注网站/a/td td width=57a href=#设置/a/td /tr tr tdnbsp;/td tdp label input type=radio name=RadioGroup1 value=单选 id=RadioGroup1_0 / 新闻全文 /label label input type=radio name=RadioGroup1 value=单选 id=RadioGroup1_1 / 新闻标题/label br / br / /p/td tdnbsp;/td tdnbsp;/td tdnbsp;/td tdnbsp;/td /tr /table /div CSS样式： #tou{ margin:0 auto; width:1000px; height:150px; } 2、页面导航 分为首页、图片信息、财经、娱乐、体育、互联网、时尚、汽车、国内、国际、军事、视频、传媒、个性推荐、房产、名站16个模块。 效果图： 3、首页内容 效果图: ①首先看到的是百度新闻首页，然后是百度新闻的各类新闻信息。 = 2 \* GB3 ②下面显示则是必威体育精装版新闻，与局部新闻。（利用js脚本，将图片放到Div盒子中，实现图片滚动的效果）。 效果图： 关键代码如下： div id=right div class=gundong div class=container div id=featured div class=content style= /div a href=img src=../12郭欣期末个人设计/images/jjj.png width=600 height=350 //a img src=../12郭欣期末个人设计/images/ggg.png width=600 height=350/ img src=../12郭欣期末个人设计/images/ffgfg.pngwidth=600 height=350 /