静态网页制作（Dreamweaver） 静态网页制作（Dreamweaver） 企业案例19
时间：2020-09-06 12:18:23 来源：勤学考试网 本文已影响 人 
PAGE
PAGE 217
企业案例
静态网页制作（Dreamweaver）
所在系别： 计算机技术系
所属专业： 计算机网络技术
指导教师: 张亚静
专业负责人： 孙志成
案例十九、起点中文网
一、案例整体目标及要求
（一）案例目的
本案例以Dreamweaver、Flash和Photoshop综合运用为目标。达到全面理解、运用网页制作的知识，并使之得以融会贯通，在掌握理论的基础上再加以实践，进一步提高、加强设计、制作网站的综合能力。以HTML+CSS+DIV技术来做成静态页面，JavsScript脚本来添加的动态特效。
（二）案例要求
通过实践项目培养我们的动手能力，提高网页制作能力和水平，灵活运用HTML+CSS+DIV、JavaScript技术，本案例的主题是小说官方网站。
二、案例解决方案
1、页面导航
分为全部作品、完本、排行、免费、起点中文网五个模块。
效果图：
2、首页
效果图:
①首先看到的是全部作品，完本，起点中文网的“起”字标志。（设置超链接，创建了两个二级页面。）
关键代码如下：
<div class="nav">
<div class="wrap">
<ul>
<img src="image/下载.jpg" width="351" height="44">
</ul>
<ul>
<li class="active"><a href="index.html">全部作品</a></li>
<li><a href="list.html">完本</a></li>
<li><a href="list.html">排行</a></li>
<li><a href="list.html">免费</a></li>
</ul>
<a href="about.html" class="about"><img src="image/u=3051333487,2515244586&fm=21&gp=0.jpg"></a>
</div>
</div>
= 2 \* GB3 ②下面显示则是最新小说，展示小说图片。以图片滚动的特效来显示。（利用js脚本，将图片放到表格中，实现图片滚动的效果）。
关键代码如下：
<div class="wrap">
<div class="scroll">
<ul>
<li class="cur"><a href="article.html"><img src="image/0.jpg" /></a></li>
<li><a href="article.html"><img src="image/0 (1).jpg" /></a></li>
<li><a href="article.html"><img src="image/0 (2).jpg" /></a></li>
</ul>
</div>
</div>
效果截图：
= 3 \* GB3 ③下面显示的全部的小说及小说内容
效果截图：
④下面是小说推荐
效果截图：
⑤底部是起点中文网小说排行榜
效果截图：
⑥添加了背景音乐
关键代码：
<embed src="音频怪物 - 主宰.mp3" align="center" border="0" width="0" height="0" autostart="true" loop="true"></embed>
⑦右边是游戏推荐
效果截图：
完本
起点中文网按人气排序，靠前的小说列表及三个月内新书推荐。
效果截图：
起点中文网
起点中文网的一篇介绍及网站历史。
效果截图：
三、案例主要技术指标
利用HTML标签完成网页结构的搭建
CSS选择器及盒子模型的灵活运用
CSS+DIV布局
JavaScript实现网页动态效果
四、案例实施进度
进度安排
内容安排
第一天
上午
明确网站主题，应力求简洁，要点明确，要以简单的画面和语言告诉浏览者，站点的主题。收集网页素材，确定栏目，决定网站结构，通过小组讨论，画出网页草图。
下午
确定内容安排，将每个页面的草图设计完成。
相关的文字工作录入完毕，定义好本地站点，将资料保存。
第二天
上午
用Photoshop将网页草图实现，决定网站的配色方案，可以借鉴其他网站。对各个网页可以分工实现。
下午
制作网页中所需要的Flash。将在PS中完成的图片切片，保存。
第三天
上午
主页的设计 主要是对版面进行合理布局，利用DIV+CSS进行合理定位。通过文字图形的空间结合，表达出和谐与美。利用DW，设计网页的排版方式，把各个切片放入DW中的DIV。
下午
将相应的内容，放入网页的对应位置。完成二级页面的制作，注意与主页的和谐统一，并对各页内容进行充实；适当搜集一些网页JS特效，做出适合自己站点的特效。
第四天
上午
修改并完善已经做好的网页，同时完成网页之间超级链接的设置。多页面之间的链接，特别是关系十分密切的有上下文关系的页面，设计时一定要含有向前和向后的按钮，便于浏览者的访问
下午
完善并测试网页，
第五天
上午
对于已完成网站，进一步进行修改，完成案例报告书的书写。
下午
检查每个小组的网页，以及案例报告，并打分。
