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

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=activea href=index.html全部作品/a/li lia href=list.html完本/a/li lia href=list.html排行/a/li lia href=list.html免费/a/li /ul a href=about.html class=aboutimg src=image/u=3051333487,2515244586fm=21gp=0.jpg/a /div /div = 2 \* GB3 ②下面显示则是必威体育精装版小说，展示小说图片。以图片滚动的特效来显示。（利用js脚本，将图片放到表格中，实现图片滚动的效果）。 关键代码如下： div class=wrap div class=scroll ul li class=cura href=article.htmlimg src=image/0.jpg //a/li lia href=article.htmlimg src=image/0 (1).jpg //a/li lia href=article.htmlimg 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。 下午 将相应的内容，放入网页的对应位置