《静态网页设计实训》.docVIP

《静态网页设计实训》 专业：软件技术 班级：0931班 学号：08 姓名：闫冰 前 言 随着信息时代的来临，信息技术不断的迅猛发展。网络已成为我们身边必不可少的一项重要工具。我们每天都会从各个渠道获取大量的信息。而网络已经成为一个主要的载体。而我们通过学习Dreamweaver这门课程。我们已经初步学会了制作简单的静态网页。因此我们不仅仅要把这种知识停留在理论上。要把知识加以实践。制作出一个具有一定功能的静态网页。而实训设计则是重要的实践性环节。通过理论与实践的相结合，提高我们自身的综合素质。为我们更深一步学习网络知识打下坚实的基础。一、实训目的 运用已经掌握的dreamweaver知识完成某个自选网站的设计工作。通过此次的设计可以达到全面理解，运用网页制作的知识，并使之可以融会贯通。 掌握规划网站的内容结构，目录结构，连接结构的方法。 熟练掌握网页制作软件dreamweaver cs3的基本操作和使用技能。 掌握页面的整体控制和头部内容设置的方法。 熟练掌握网页页面布局的各种方法。 熟练掌握在网页中输入，设置标题和正文文字的方法。 熟练掌握在网页中插入图像，flash动画和背景音乐的方法。 熟练建立各种形式的超级连接的方法。 掌握表单网页制作方法。 掌握页面特效制作方法。 二、实训题目与实训环境 1实训题目 三国志11 2实训环境 （1）硬件环境 主机上要求安装有Dreamweaver CS3、Flash CS4、Photoshop CS2等软件。主机能与互联网相连，以便学生能够游览优秀的网站，搜集相关的材料等。将主机配置成WEB服务器。 （2）软件环境 安装有Dreamweaver CS3、Flash CS4、Photo、shop CS2等软件。三、功能概述 （用语言进行功能概述，实现哪些功能。） 主题：三国志11 功能：本网站主要介绍了光荣公司制作并发行的一款以三国为背景的策略性游戏。本网站一共分为以下几个板块：首页，剧本剧情，任务特色，武将特技，官职爵位，兵种战法，技巧研究。 首页主要运用了AP Div层。内容包括关于三国志11的图像以及对三国志11的背景介绍。还在AP Div层中插入flash使得网站的主题更加立体直观。以及在首页创建了各个板块的相关链接。 而在其他板块中根据所呈现的内容分别插入了Spry选项卡式面板和Spry可折叠式面板。是内容变得富有层次。浏览变得方便。在几个页面中还加入了相应的特效。 鼠标跟随效果，雪花飘落效果。使网站不至于很单调，变得活泼生动。在建立大体框架的基础上，再加以表格，布局对象，特效的添加。在具体内容发面，共分成几个主要板块详细进行介绍。 剧本剧情主要介绍了三国的几个主要时期。分别用文字配以图片加以说明。人物特色主要列举了三股票的几位著名谋臣武将，附上人物图片和任务列传仔细进行说明。武将特技运用表格以及AP Div层可折叠式面板进行列举，大致分成几个部分使之更加清晰。官职爵位则使用表格将各种官职进行排列。再配以特效。飘落的雪花和浮动图片。感官上更为立体。而其他方面则是根据不同的板块赋予不同的主题在用文字进行描绘。通过这个网站我的主要功能是将三国志11这款游戏进行介绍，而在介绍游戏的基础上则对三国这一时期的历史有更深刻的认识。各时期的介绍。人物的传记。三国时期官职的介绍让人们清楚三国时期的历史。这就是我的网站的主要功能。 四、功能实现 特效1：页面飘落的樱花 html body script language=JavaScript1.2 var snowsrc=flower.gif ; var no = 10; var ns4up = (document.layers) ? 1 : 0; var ie4up = (document.all) ? 1 : 0; var dx, xp, yp; var am, stx, sty; var i, doc_width = 800, doc_height = 600; if (ns4up) { doc_width = self.innerWidth; doc_height = self.innerHeight; } else if (ie4up) { doc_width = document.body.clientWidth; doc_height = document.body.clientHeight; } dx = new Array(); xp = new Array(); yp = new Array(); am = new Array(); stx = new Array(); sty = new Array(); for (i = 0; i no; ++ i) { dx[i