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

PAGE PAGE 217 企业案例 静态网页制作（Dreamweaver） 所在系别： 计算机技术系 所属专业： 计算机网络技术 指导教师: 张亚静 专业负责人： 孙志成 案例二十七、设计和制作计算机系部网站 一、案例整体目标及要求 （一）案例目的 本案例的主要目的是通过实践项目培养我们灵活运用HTML+CSS+DIV、JavaScript技术，我选择的主题是制作一个关于电脑的网站。 （二）案例要求 网页以电脑维修与购买为主题，采用HTML+CSS+DIV来网页布局，在网页中使用了二级页面，滚动窗口。 二、案例解决方案 1、页面导航 分为主页、ZOL攒机、产品排行榜、产品价格、联系方式五个模块。 效果图： 2、首页 效果图: 先看到的是公司简介，然后是网站的特别推荐，可以链接到详细信息。 = 2 \* GB3 ②下面显示则是代表性图片。以图片滚动的特效来显示。（利用js脚本，将图片放到表格中，实现图片滚动的效果）。 关键代码如下： div class=slider article id=slider input checked type=radio name=slider id=slide1 / input type=radio name=slider id=slide2 / input type=radio name=slider id=slide3 / div id=slides div id=overflow div class=inner article img src=images/custom-computer.png alt= / /article article img src=images/computer-repair.jpg alt= / /article article img src=images/00000000000.jpg alt= height=376 / /article /div /div /div div id=controls label for=slide1/label label for=slide2/label label for=slide3/label /div div id=active label for=slide1/label label for=slide2/label label for=slide3/label /div /article /div 效果截图： = 3 \* GB3 ③中部下部显示的是电脑方面的文字信息。 效果截图： 关键代码： div class=one-col separator div class=col article h2电脑的故障/h2 p 文字 /p /article /div /div div class=three-col separator div class=col pimg src=images/laptop.png alt=laptop height=250 width=250/p /div div class=col article h4选择较好的维修商家/h4 p 文字 /p p硬件完好的同时需要一个稳定的系统. /p /article /div div class=col last pimg src=images/windows.png alt=windows-logo height=250 width=250/p /div /div div class=wide-col