网页制作毕业论文

《网页制作毕业论文》由会员分享，可在线阅读，更多相关《网页制作毕业论文（26页珍藏版）》请在装配图网上搜索。

1、网页制作毕业论文 姓 名: 专 业: 班 级: 学 号: 指导教师: 年 月 日摘要 互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。网页设计伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要。网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提供的信息。网站是实现网络价值的门户，设计网站和制作网页成为了这个时代崭新的设计领域。随着网站架构软件的升级，设计网站、建立网站已经不再是网页设计师的专长，个人用户也可以自己设计功能完善的网站和精美的网页。网页的内容通常是由图片和文

2、字组成。由文字构成网页的主体，而图片则能够美化和增色你的网页。那些包含了设计精美图片的网站，往往能让浏览者流连忘返。因此，有漂亮的图片是你的网页能吸引人的一个有力保证。本网页主要是以哈利波特里的人物，以及其他信息作为主题。浏览者可以通过网页了解关于魔兽世界的一些信息资料。在信息技术飞速发展的今天，人们获取信息的方式更多是来源于互联网。而吸引浏览用户的则是视觉效果出色、信息量丰富、使用起来便捷的网页，所以网页设计尤为重要。本文从网页设计的角度出发，介绍一些设计中要素和技巧，例如框架、css样式的使用等等。 关键字：网页设计，dreamweaver 8。目录摘要2第一章、绪论41.1网页设计介绍4

3、1.2开发工具的选用及介绍8第二章、网站总体设计 111.1 创意构思111.2 材料收集整理13第三章、网页制作 141.1 网页技术介绍141.2 制作步骤181.3 源代码20第四章、小结24感谢25参考文献25第一章 绪论1.1 网页设计介绍一、网页设计的原则网页作为传播信息的一种载体，同其他出版物如报纸、杂志等在设计上有许多共同之处，也要遵循一些设计的基本原则。但是，由于表现形式、运行方式和社会功能的不同，网页设计又有其自身的特殊规律。网页的艺术设计，是技术与艺术的结合，内容与形式的统一。它要求设计者必须掌握以下三个主要原则： 1.主题鲜明 视觉设计表达的是一定的意图和要求，有明确的

4、主题，并按照视觉心理规律和形式将主题主动地传达给观赏者。诉求的目的，是使主题在适当的环境里被人们即时地理解和接受，以满足人们的实用和需求，这就要求视觉设计不但要单纯、简练、清晰和精确，而且在强调艺术性的同时，更应该注重通过独特的风格和强烈的视觉冲击力，来鲜明地突出设计主题。 根据认知心理学的理论，大多数人在短期记忆中只能同时把握到条分立的信息，而对多于条的分立信息或者不分立的信息容易产生记忆上的模糊或遗忘，概括起来就是：较小而分立的信息要比较长而不分立的信息更为有效和容易浏览。这个规律蕴含在人们寻找信息和使用信息的实践活动中，它要求视觉设计者的设计活动必须自觉地掌握和遵从。作为视觉设计范畴一种

5、的网页艺术设计，其最终目的是达到最佳的主题诉求效果。这种效果的取得，一方面通过对网页主题思想运用逻辑规律进行条理性处理，使之符合浏览者获取信息的心理需求和逻辑方式，让浏览者快速地理解和吸收；另一方面通过对网页构成元素运用艺术的形式美法则进行条理性处理，更好地营造符合设计目的的视觉环境，突出主题，增强浏览者对网页的注意力，增进对网页内容的理解。只有两个方面有机地统一，才能实现最佳的主题诉求效果。 优秀的网页设计必然服务于网站的主题，就是说，什么样的网站，应该有什么样的设计。例如，设计类的个人站点与商业站点性质不同，目的也不同，所以评论的标准也不同。网页艺术设计与网站主题的关系应该是这样：首先，设

6、计是为主题服务的；其次，设计是艺术和技术结合的产物，就是说，即要“美”，又要实现“功能”；最后，“美”和“功能”都是为了更好地表达主题。当然，有些情况下，“功能”即是“主题”，还有些情况下，“美”即是主题。例如，雅虎作为一个搜索引擎，首先要实现“搜索”的“功能”。它的主题即是它的“功能”。而一个个人网站，可以只体现作者的设计思想，或者仅仅以设计出“美”的网页为目的。它的主题只有一个，就是美。 只注重主题思想的条理性而忽视网页构成元素空间关系的形式美组合，或者只重视网页形式上的条理而淡化主题思想的逻辑，都将削弱网页主题的最佳诉求效果，难以吸引浏览者的注意力，出现平庸的网页设计或使网页设计以失败而

7、告终。 要使网页从形式上获得良好的诱导力，鲜明地突出诉求主题，具体可以通过对网页的空间层次、主从关系、视觉秩序及彼此间的逻辑性的把握运用来达到。 2.形式与内容统一 任何设计都有一定的内容和形式。内容是构成设计的一切内在要素的总和，是设计存在的基础，被称为“设计的灵魂”；形式是构成内容诸要素的内部结构或内容的外部表现方式。设计的内容就是指它的主题、形象、题材等要素的总和，形式就是它的结构、风格或设计语言等表现方式。内容决定形式，形式反作用于内容。一个优秀的设计必定是形式对内容的完美表现。正如黑格尔所说：“工艺的美就不在于要求实用品的外部造型、色彩、纹样去摹拟事物，再现现实，而在于使其外部形式传

8、达和表现出一定的情绪、气氛、格调、风尚、趣味，使物质经由象征变成相似于精神生活的有关环境。”（黑格尔美学第三卷） 一方面，网页设计所追求的形式美，必须适合主题的需要，这是网页设计的前提。只讲花哨的表现形式以及过于强调“独特的设计风格”而脱离内容，或者只求内容而缺乏艺术的表现，网页设计都会变的空洞而无力。设计者只有将二者有机地统一起来，深入领会主题的精髓，再融合自己的思想感情，找到一个完美的表现形式，才能体现出网页设计独具的分量和特有的价值。另一方面，要确保网页上的每一个元素都有存在的必要性，不要为了炫耀而使用冗余的技术。那样得到的效果可能会适得其反。只有通过认真设计和充分的考虑来实现全面的功能

9、并体现美感才能实现形式与内容的统一。据有关资料所做的保守估计，目前在WWW上网页数据传输平均以每秒1.5k的速度到达客户端。假设某个网页为了丰富其艺术性而追赶时髦地大量使用图像或其它多媒体元素等，虽然达到了其静态形式美的效果，却造成多达几十K甚至更大的网页数据，使浏览者必须等待很长时间才能看到“庐山真面目”，这样的网页就不是一个优秀的网页，因为它不符合网页传播信息的突出特性之一快捷性，使网页内容不能很快地到达访问者，影响了访问效果和质量，损害了访问者的情趣和积极性，这种技术要素影响了传达信息的效果，因而不是形式与内容的完美统一。 网页具有多屏、分页、嵌套等特性，设计者可以对其进行形式上的适当变

10、化以达到多变性处理效果，丰富整个网页的形式美。这就要求设计者在注意单个页面形式与内容统一的同时，更不能忽视同一主题下多个分页面组成的整体网页的形式与整体内容的统一。 因此，在网页设计中必须注意形式与内容的高度统一。 3.强调整体 网页的整体性包括内容和形式上的整体性，这里主要讨论设计形式上的整体性。 网页是传播信息的载体，它要表达的是一定的内容、主题和意念，在适当的时间和空间环境里为人们所理解和接受，它以满足人们的实用和需求为目标。设计时强调其整体性，可以使浏览者更快捷、更准确、更全面地认识它、掌握它，并给人一种内部有机联系、外部和谐完整的美感。整体性也是体现一个站点独特风格的重要手段之一。

11、网页的结构形式是由各种视听要素组成的。在设计网页时，强调页面各组成部分的共性因素或者使诸部分共同含有某种形式特征，是求得整体的常用方法。这主要从版式、色彩、风格等方面入手。例如：在版式上，将页面中各视觉要素作通盘考虑，以周密的组织和精确的定位来获得页面的秩序感，即使运用“散”的结构，也是经过深思熟虑之后的决定；一个站点通常只使用两到三种标准色，并注意色彩搭配的和谐；对于分屏的长页面，不可设计完第一屏再考虑下一屏。同样，整个网页内部的页面，都应统一规划，统一风格，让浏览者体会到设计者完整的设计思想。从某种意义上讲，强调网页结构形式的视觉整体性必然会牺牲灵活的多变性，“物极必反”就是这个道理。因此

12、，在强调网页整体性设计的同时必须注意：过于强调整体性可能会使网页呆板、沉闷，以致影响访问者的情趣和继续浏览的欲望。“整体”是“多变”基础上的整体。 二、网页艺术设计的特点 1.交互性与持续性 网页不同于传统媒体之处，就在于信息的动态更新和即时交互性。即时的交互性是Web成为热点的主要原因，也是网页设计时必须考虑的问题。传统媒体（如广播、电视节目、报刊杂志等）都以线性方式提供信息，即按照信息提供者的感觉、体验和事先确定的格式来传播。而在Web环境下，人们不再是一个传统媒体方式的被动接受者，而是以一个主动参与者的身份加入到信息的加工处理和发布之中。这种持续的交互，使网页艺术设计不像印刷品设计那样，

13、发表之后就意味着设计的结束。网页设计人员必须根据网站各个阶段的经营目标，配合网站不同时期的经营策略，以及用户的反馈信息，经常地对网页进行调整和修改。例如，为了保持浏览者对网站的新鲜感，很多大型网站总是定期或不定期的进行改版，这就需要设计者在保持网站视觉形象一贯性的基础上，不断创作出新的网页设计作品。 2.多维性 多维性源于超级链接，主要体现在网页设计中对导航的设计上。由于超级链接的出现，网页的组织结构更加丰富，浏览者可以在各种主题之间自由跳转，从而打破了以前人们接收信息的线性方式。例如，可将页面的组织结构分为序列结构、层次结构、网状结构、复合结构等。但页面之间的关系过于复杂，不仅使浏览者检索和

14、查找信息增加了难度，也给设计者带来了更大的困难。为了让浏览者在网页上迅速找到所需的信息，设计者必须考虑快捷而完善的导航设计。 印刷品中导航问题不是那么突出，如果一个句子在页尾突然终止，读者会很自然地翻到下一页查找剩余部分，为了帮助读者找到他们要找的信息，出版者提供了目录、索引或脚注。如果文章从期刊中的一页跳到后面的非顺序页时，读者会看到类似于“续68页”这样的指引语句。然而，作为一名网页设计者，你以前所学的导航技术没有一种完全适合于网页导航。在替浏览者考虑得很周到的网页中，导航提供了足够的、不同角度的链接，帮助读者在网页的各个部分之间跳转，并告知浏览者现在所在的位置、当前页面和其他页面之间的关

15、系等。而且，每页都有一个返回主页的按钮或链接，如果页面是按层次结构组织的，通常还有一个返回上级页面的链接。对于网页设计者来说，面对的不是按顺序排列的印刷页面，而是自由分散的网页，因此必须考虑更多的问题。如：怎样构建合理的页面组织结构，让浏览者对你提供的巨量信息感到条理？怎样建立包括站点索引、帮助页面、查询功能在内的导航系统？这一切从哪儿开始，到哪儿结束？ 3.多种媒体的综合性 目前网页中使用的多媒体视听元素主要有文字、图像、声音、视频等，随着网络带宽的增加、芯片处理速度的提高以及跨平台的多媒体文件格式的推广，必将促使设计者综合运用多种媒体元素来设计网页，以满足和丰富浏览者对网络信息传输质量提出

16、的更高要求。目前国内网页已经出现了模拟三维的操作界面，在数据压缩技术的改进和流（Stream）技术的推动下，Internet网上出现实时的音频和视频服务，典型的有在线音乐、在线广播、网上电影、网上直播等。因此，多种媒体的综合运用是网页艺术设计的特点之一，是未来的发展方向。 4.版式的不可控性 网页版式设计与传统印刷版式设计有着极大的差异： (1) 印刷品设计者可以指定使用的纸张和油墨，而网页设计者却不能要求浏览者使用什么样的电脑或浏览器； (2)网络正处于不断发展之中，不象印刷那样基本具备了成熟的印刷标准；(3) 网页设计过程中有关Web的每一件事都可能随时发生变化。 这一切说明，网络应用尚处

17、在发展之中，关于网络应用也很难在各个方面都制订出统一的标准，这必然导致网页版式设计的不可控制性。其具体表现为： (1) 网页页面会根据当前浏览器窗口大小自动格式化输出； (2) 网页的浏览者可以控制网页页面在浏览器中的显示方式； (3) 不同种类、版本的浏览器观察同一个网页页面，效果会有所不同； (4) 用户的浏览器工作环境不同，显示效果也会有所不同。 把所有这些问题归结为一点，即网页设计者无法控制页面在用户端的最终显示效果，但这也正是网页设计的吸引人之处。 5.技术与艺术结合的紧密性 设计是主观和客观共同作用的结果，是在自由和不自由之间进行的，设计者不能超越自身已有经验和所处环境提供的客观条

18、件限制，优秀设计者正是在掌握客观规律基础上得到了完全的自由，一种想象和创造的自由。网络技术主要表现为客观因素，艺术创意主要表现为主观因素，网页设计者应该积极主动地掌握现有的各种网络技术规律，注重技术和艺术紧密结合，这样才能穷尽技术之长，实现艺术想象，满足浏览者对网页信息的高质量需求。1.2 开发工具的选用及介绍一、PhotoshopPhotoshop是Adobe公司旗下最为出名的图像处理软件之一，集图像扫描、编辑修改、图像制作、广告创意，图像输入与输出于一体的图形图像处理软件，深受广大平面设计人员和电脑美术爱好者的喜爱。Photoshop可分为图像编辑、图像合成、校色调色及特效制作部分。图像编

19、辑是图像处理的基础，可以对图像做各种变换如放大、缩小、旋转、倾斜、镜像、透视等。也可进行复制、去除斑点、修补、修饰图像的残损等。这在婚纱摄影、人像处理制作中有非常大的用场，去除人像上不满意的部分，进行美化加工，得到让人非常满意的效果。 图像合成则是将几幅图像通过图层操作、工具应用合成完整的、传达明确意义的图像，这是美术设计的必经之路。photoshop提供的绘图工具让外来图像与创意很好地融合，成为可能使图像的合成天衣无缝。 校色调色是photoshop中深具威力的功能之一，可方便快捷地对图像的颜色进行明暗、色编的调整和校正，也可在不同颜色进行切换以满足图像在不同领域如网页设计、印刷、多媒体等方

20、面应用。 特效制作在photoshop中主要由滤镜、通道及工具综合应用完成。包括图像的特效创意和特效字的制作，如油画、浮雕、石膏画、素描等常用的传统美术技巧都可藉由photoshop特效完成。而各种特效字的制作更是很多美术设计师热衷于photoshop的研究的原因。二、DreamweaverDreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver、FLASH以及在DREAMWEAVER之后推出

21、的针对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)，足见市场的反响和MACROMEDIA公司对它们的自信。说到DREAMWEAVER我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓，HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱

22、点。Dreamweaver的优点：1最佳的制作效率Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。Dremweaver能与您喜爱的设计工具，如Playback Flash，Shockwave和外挂模组等搭配，不需离开Dreamweaver便可完成，整体运用流程自然顺畅。除此之外，只要单击便可使Dreamweaver自动开启Firework或Photoshop来进行编辑与设定图档的最佳化。 2网站管理 使用网站地图

23、可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver 会自动更新所有连结。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。 3无可比拟的控制能力 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以

24、拖拉置放的方式进行版面配置。所见即所得 Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP， Apache，BroadVision， Cold Fusion，iCAT， Tango与自行发展的应用软体。当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XML Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版

25、正确地输入或输出XML内容。 Dreamweaver还集成了程序开发语言，对ASP、.NET、PHP、JS的基本语言和连接操作数据库，都是完全支持的。Dreamweaver的缺点：1难以精确达到与浏览器完全一致的显示效果。也就是说您在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到您真正想要的效果，这一点在结构复杂一些的网页（如分帧结构、动态网页结构）中便可以体现出来。 2.页面原始代码的难以控制性，比如您在所见即所得编辑器中制作一张表格也要几分钟，但您要它完全符合您要求可能需要几十分钟，甚至更多时间。而相比之下，非所见则所得的网页编辑器，就不存在这个问题，因为所有的HTML代码 都

26、在您的监控下产生，但是由于非所见则所得编辑器的先天条件就注定了它的工作低效率。如何实现两者的完美结合，则既产生干净、准确的HTML代码，又具备则见则所得的高效率、直观性，一直是网页设计师梦想。在DREAMWEAVER之前，FRONTPAGE98一直被人们认为是最好的所见即所得网页编辑器，但是它同样继承了所见即所得的种种劣性。但是我说过这是在DREAMWEAVER之前，现在我无意说DREAMWEAVER已经实现网页设计师的梦想，但我觉得DREAMWEAVER正在努力向这个梦想一步步走去。第二章 网站总体设计1.1 创意构思一、色彩介绍 一切色彩，不但各自具有独特的性格，而且还因为各种色彩之间的相

27、互关系，产生出另一种性格。色彩的个性就是指某一色彩单独所给人的感觉是新鲜还是混沌、是明快还是暗淡、是寒冷还是温暖等等。相关性就是指一个颜色和其它色彩相比，是比较新鲜还是比较浑浊、是比较明快还是比较暗淡、是比较寒冷还是比较温暖等等。我们可以根据三个条件决定任何一种色彩所具有的个性：色彩的明度色彩的纯度色彩的打动知觉（视觉）的程度各种色彩虽然都具有它自己的个性，但个性的成立，是由于色彩的相互关系，决不是绝对的确定不变动的。比如说某一种色彩很明亮、很显眼、很温暖、很强烈等等，主要是由于同其它品质较差的色彩相比较，然后才能肯定下来。加入和比它更明亮、更新鲜、更温暖、更强烈的另一色彩相比较，马上就会使人

28、感到暗淡，失去了一定程度的温暖和强烈的感觉着就是色彩的相关性的作用了。研究色彩的相关性，可以从两方面来进行，一种是从类似色的比较上来观察。另一种是从对比色的比较上来观察。从它们的冷。暖。明、暗、纯、浊的素质上找出区别。正式色彩具有相关性的作用，对动画作品来说，由于运用色彩的熟练与否，便会产生比较好或比较坏的色彩效果。同时，在具体表现上，假如依照色彩的个性来考虑它们的相关性作用，不仅可以忠实于对象的表现，还可以发挥色彩的表现性能，从而加强色彩表现上的现实感。为什么会这样呢？因为包括一切自然现象的色彩关系在内，各种物体的色彩，也是因为远近、明暗以及质量上的无限差别，形成一种色彩相关性的谐和，所以在

29、实际表现上善于运用色彩的相关性作用，熟悉色彩规律，也是最终自然规律，达到表现效果的嘴巧妙的办法，比如在自然现象中，同为红色的旗帜，因为远近距离不同，光的影响不同以及质量的差别，所形成的红色就绝不会完全相同，而且这种不同也是由于相互比较菜产生出来的。二、界面设计中的色彩问题1）人体工程学要求防止视觉疲劳。人机界面的色彩要求柔和以适应用户长时间面对显示屏的视觉刺激。这一思想成为我们处理长时间面对的界面，和短时间面对的界面上色彩的分界线，显然用户长时间面对的界面要求绝对的色彩柔和，而用户短时间面对的界面在色彩上可倾斜于设计者的其他意图，比如：强调性、美观等等。2）色彩对比形成的视觉识别度。在现实世界

30、中人们看到的是由色彩关系，素描关系，反射关系构成的物体。而在显示屏上我们能运用的只有色彩关系、素描关系，而他们都是通过色彩来表现。我们运用不同的色彩构造人机界面，；利用色彩的搭配形成清晰的视觉效果。我们要对用户信息进行了解，甚至要考虑各种色盲症。3）色彩对界面的装饰效果。界面设计人员作为更趋向于实用主义的艺术家而存在，利用不同的色彩，将每一幅界面都作为艺术品展示给用户。三、创意介绍1.首页：包括总体介绍，又分为职业阵营、背景故事、以及视频图片欣赏等。以黑色为背景，给人以庄严肃穆的感觉。加上首页中的黄色文字，又增添了几分生气。五彩斑斓的阵营介绍，搭配彩色的标题文字，恰好能体现主题。中间的职业介绍

31、恰如其分的链接到职业的介绍，下面的动态时间可以使浏览者方便的知道时间。主页中搭配色系相近的图片。文字、图片、图片链接。下拉菜单等组成了整个首页。2.背景故事：背景故事中仍然以黑色作为背景颜色，但是此页面中，表格的边框显示成白色，以及按钮都以白色为低，黑白分明，给人明亮的感觉。职业种族：在职业种族中，以魔兽世界游戏中风景图为背景，能让浏览者感觉到魔兽世界的宏伟，与职业种族的介绍相配合，以暗夜精灵为主的联盟用夜晚的风景图做背景，以血精灵为主的部落用比较明亮的风景画面，显示出两大阵营的对立，其中用到动态网页设计中的表单。整个组成阵营的介绍。无论是颜色选择，图片用法，以及网页的技术选择都配合得恰到好处

32、。3.人物介绍：魔兽世界中值得一写的人物多不胜数，而此处选择了伊利丹怒风和泰兰德语风进行介绍。这两位人物是具有代表性的人物，他们都是暗夜精灵，是从小一起长大的朋友，但却是一正一邪，伊利丹怒风是邪道的代表，而泰兰德语风是正道代表。运用了暗夜精灵的出生地风景作为背景，与他们相照应。此网页中主要运用到了框架结构这个知识点。4.图片视频：在视频图片欣赏中，用到了Flash，循环滚动图片，以及CSS中的行为等多种知识。在网页的顶面，运用JavaScript插入了循环滚动图片，当鼠标指向图片时图片停止滚动，点击图片链接到指定位置。又在网页中间插入了三个Flash文件供浏览者欣赏。左边的图片运用层的时间轴知

33、识。整个设计连贯优美，将所学知识一一运用。1.2 资料收集整理在整个网页设计中，资料收集和整理是非常重要的，直接关系到网页设计的好坏。在这个过程中，选择的工具是Photoshop。它是一款功能非常强大的图片设计修改器。将收集到的材料进行剪裁，修改图像大小等，做成需要的图片非常重要。在首页中的大标题魔兽世界，以及页面的两张人物画面，都是运用了Photoshop中的去背景功能，使其背景变为透明，这样使插入的图片看起来更干净，以免图片本身的背景与网页中的图片相冲突，造成不协调的因素。以及用Flash制作的动态图片，使得整个页面显得有生气。当然，在整个魔兽世界的网页中，最重要的是也是最首先的应该是介绍

34、背景，只有了解它的历史背景，才能真正体会到整个网页中所表达的情感，才能看懂整个网页制作。在收集到背景资料之后，继而进行职业种族介绍。魔兽中分为九大职业和十大种族。每个种族限定一些职业可以修炼，也拥有自己的种族技能，而每种职业也有自己的特色。在这些种族之中，分为两大阵营，部落和联盟。这两大阵营相互对立。在这些背景和职业中，选择一两个典型的人物来进行介绍，主要讲诉他们的一生，也可以看出在魔兽世界这个大背景下，有许多可歌可泣感人的故事在发生着。材料收集这一部分，主要是图片的收集，背景故事和人物故事的收集，视频的收集制作。收集主要是在网上进行，而收集完之后是整理，对于图片的整理，主要是用Photosh

35、op对图片进行修改和制作，运动一些Photoshop的知识以及少量的Flash知识对视频文件稍作修饰。 第三章 网页制作 1.1 网页技术的实现本次网页制作中用到大量的静态网页的技术，如添加网页图像、超级链接、表格、CSS、框架布局、时间轴等等。也用到少量的动态网页技术，如文字跟随鼠标移动、跳转表单、下拉列表、时间表等等。现对以上技术的实现做简单的介绍。一、网页图像几乎所有的网页都使用网页图像来点缀，一个页面只有文本是不吸引人的，网页中有了图像才显得生动。图形还具有直观、生动的特点，并且图像还能够跨越语音。编码标准。地域和年龄的限制。在Web中，通常使用的图像格式有GIF、JPG、PNG三种文

36、件格式，大多数浏览器都可以支持。网页中的图像有两种显示方式，一种是插入式图像，该图像插入网页以后，在正常的情况下不可以在相同的位置输入文本，或者再次插入图像；另一种是背景图像，该图像以背景的形式插入网页，插入背景图像后，还可以在相同的位置输入文本，或者再次插入其他图片。在网页中插入图像的方式非常简单，将光标放置在文档空白位置后，执行【插入】|【图像】命令。或者将【插入】工具切换到【常用】工具选项卡，单击其中的【图像】按钮，打开【选择图像源文件】对话框，选择图片即可将其插入到网页中。网页中另外一种图像显示方式为背景图像。好的背景不但能影响访问者对网页内容的接受程度，还能影响访问者对整个网站的印象

37、。选择背景图像不能太大，关键是简单。在新建的空白网页中，执行【修改】|【页面属性】命令或者在【属性】面板中单击【页面属性】按钮，还可以在页面中单击鼠标右键，在弹出菜单中选择【页面属性】命令，此时会弹出【页面属性】对话框。在【分类】选项中选择【外观】，然后再【背景图像】里输入要做背景的图像的路径，或者单击【浏览】按钮，则会弹出【选择图像源文件】对话框，选择要做背景的图像并保存，就可以看到设置了背景的网页。二、超级链接世界各地的资源通过超级链接串在一起，可以随时访问。链接能使网页从一个页面跳转到另一个页面，成功的运用链接可以使网页变得更方便、更清晰和更富有灵活性。所谓链接，就是当鼠标移动到某些文字

38、或者图片上时，单击救护跳转到其他的页面。这些文字或者图片称为热点，跳转到的页面称为链接目标，热点与链接目标相联系的就是链接路径。网页中除了装饰性图片不用添加链接以外，其他图片比如产品图片添加可以放大查看的链接，或者添加进入该产品的详细介绍页面，或者是图片性质的导航栏目添加该栏目的内容链接等。普通链接就是当鼠标移动到某些图片上时，单击就会跳转到其他的页面。方法是在Dreamweaver的新建文档中插入并且单击选中该图片后，在【属性面板】的【链接】文本框的右侧单击【浏览文件】按钮，打开【选择文件】对话框，选择文件或者图片均可，然后选择【目标】下拉列表中的_blank选项，在【替换】文本框中输入替换

39、信息即可完成图像的链接。三、表格使用表格可以清楚明了的显示列表的数据，例如我们比较熟悉的excel中的表格，但是在Dreamweaver中，表格的作用愿意不止显示数据，它更重要的作用是在定位排版中的使用。当然，也可以用表格在网页中显示数据，但是，使用表格排版时最常见的用途。要创建表格，首先将光标定位在编辑文档中要插入的表格的位置，在默认的新网页上是定位在页面的左上角。执行【插入】|【表格】命令，或者将【插入】工具栏切换为【常用】选项卡，单击【表格】图标命令按钮，即可打开表格对话框。在对话框中可设置表格选项，设置好后单击【确定】按钮，即可在页面中插入表格。在制作网页时，可能会遇到表格错位的问题，

40、即使已经有足够的单元格来输入文本或者插入图像、Flash动画，制作导航条等，但还是不理想。这时就会运用到嵌套表格。因为嵌套表格既不影响所在单元格宽度和高度，还可以独立编辑和添加内容。网页的排版有时会很复杂，在外部需要有一个表格控制总体布局。如果这时一些内部排版的细节也能通过总表格来实现，容易引起行高列宽等的冲突，给表格制作带来困难。或者是浏览器在解析网页的时候，是将整个表格的结构下载完毕之后才显示表格。如果不使用嵌套，表格非常复杂，浏览者要等待很长时间才能看到网页的内容。出于这些原因，引入嵌套表格。由总表格负责整体的排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置中。这样一来各

41、司其职，互不冲突。嵌套表格，顾名思义就是在表格中插入表格。方法是将光标放置在表格内，单击【插入】工具栏中【常用】选项卡上的【表格】图标按钮，在打开的【表格】对话框中，设置边框粗细、单元格边距和单元格间距均为0像素，设置完毕后，单击【确定】按钮，就为表格插入了嵌套表格。四、CSSCSS即为级联样式活层叠样式表，通常名字或者HTML标签标示，在HTML文档中的CSS样式可以控制大多数传统的文本格式，比如字体、字号以及对齐方式，还可以指定特殊的HTML属性，例如定位、表格样式和特殊效果灯。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS样式在几乎

42、所有的浏览器上都可以使用。编辑CSS样式时，可以新建一个CSS样式，也可以对已经存在的样式进行编辑。当一个编辑已经存在文件中的文本样式时，会立即将该文本重新格式化。信的标准CSS面板中可以直接在属性窗格中编辑已经存在的样式，还可以单击【添加属性】为当前文档添加新的CSS规则属性。还可以单击新建CSS规则面板上右下侧的按钮，直接切换到CSS规则定义面板进行编辑。在【新建CSS规则】对话框中无论设置什么样参数，单击【确定】按钮后都会弹出具有CSS名称的【CSS规则定义】对话框，其中包括8个选项，例如类型、背景、区块、方块、边框、列表、定位和扩展。在每个选项中，都可以设置该类型的属性值。定义CSS样

43、式的属性操作时相同的，只要在【分类】列表框中选择一种类型，然后再右侧的属性中进行相关设置，最后单击【确定】按钮即可。五、框架布局框架网页有框架集和框架两个部分组成。框架集市在一个文档内定义一组框架结构的HTML网页。框架集定义了页面显示的框架数、框架的大小、载入框架的网页源和其他可以定义的属性等。单个框架是指在网页上定义的一个区域。在Dreamweaver中，创建框架集是非常简单的。可以在制作之前，单击【查看】|【可视化助理】|【框架边框】命令，将框架的边框属性设置为可见，这样【设计】视图窗口就会显示边框。创建框架集，可以通过3种方法来实现：第一种是在【文档】窗口中，确定要插入框架的位置，然后

44、单击【插入】|【HTML】|【框架】命令，从弹出的子菜单中，选择想要的框架格式；第二种是执行【修改】|【框架页】命令，在弹出的子菜单中，选择框架的格式；第三种是在【插入】工具栏的【布局】选项卡中，单击【框架】按钮，然后在弹出的下拉菜单中，单击合适的框架按钮。或者拖动所需的【框架】按钮到【文档】窗口，即可以创建框架。在预览页面之前，框架集文件与之相关的框架文件都必须保存。框架页面由多个文档组成，保存它们需要多个步骤。如果只按下Ctrl + S组合键，只能保存当前激活的页面或者是框架集，无法确保保存所有的页面，因为Dreamweaver的保存框架对话框不提供区别标志。由于各文档都是独立的，因此需要

45、对它们逐一进行保存。对于任何原先保存过的、附加到框架集的页面、可以跳过这些步骤。保存框架文件，首先要在文档中选中要保持的框架，然后执行【文件】|【保持框架】命令，在弹出的【保持为】对话框中的【文件名】文本框中输入适当的文件名，单击【保存】按钮就可以保存框架文件了。要保存所有框架集文件和框架文件，就要执行【文件】|【保存全部】命令，保存所有文件。该命令将保存在框架集中打开的所有文档，包括框架集文件和所有带框架的文档。如果该框架集文件未保存过，则在【设计】视图中框架集的周围将出现粗边框，并且出现一个对话框，可从中选中文件名。对于尚未保存的每一个框架，在框架的周围都将显示粗边框。设计视图中的选择线业

46、会自动移到对应的被保存的框架中，据此可以知道正在保存的是哪个框架文件。单击【保存】按钮，一直到所有文件保存完为止。六、时间轴【时间轴】行为可以构建丰富多彩的动态网页，实现极具魅力的网页效果。时间轴用通俗的话说是一条贯穿时间的轴，用于表示网页活动时间中发生的各种状态。通过往这条时间轴上不同的时间部位放置不同的内容或者是添加相应的行为，就可以让对应得时间发生对于事件，从而实现网页的动态效果。【时间轴】面板显示的是层和图像的属性在一段时间内的更改。如果要打开【时间轴】面板，执行【窗口】|【时间轴】命令，打开时间轴面板。在时间轴面板中单击右键，会弹出快捷菜单，该菜单中包括了所有与时间轴相关的命令。并在

47、时间轴面板中单击右上角的按钮，也可以打开同一个菜单，利用该菜单中的命令，可以快速地对时间轴面板进行相应的操作。时间轴可以改变图片的源文件，并且通过改变层的位置、大小、可见性和叠放顺序来创建动画。时间轴只能够移动层，如果需要移动图片或文字，首先要创建一个层，然后在层中插入图片或者文本。如果要创建时间轴，首先在页面中绘制一个层，在层中插入图片或文字，然后将层拖动到动画开始时所处的位置。执行【窗口】|【时间轴】命令，打开时间轴面板。在页面选中要创建动画的层，这是创建动画层很关键的一步。确定以及选中了该对象。执行【修改】|【时间轴】|【添加对象到时间轴】命令，或者直接把选中的对象推入时间轴面板中。一个

48、动画条将显示在时间轴面板中的动画通道中，同时动画条中显示了层的名字。单击动画条末尾的关键帧，选中层，并将其移位置，释放鼠标后，显示层移动路径。在时间轴面板中可以单击并按住时间轴面板中的【播放】按钮，查看层沿拖放路径移动。这与在浏览器中预览的效果相同。如果希望浏览时动画连续播放，可以启动【时间轴】面板中的【循环】复选框。七、表单表单时网页与浏览者的一种相互界面。表单的目的是让用户输入数据，这些输入传送到页面服务器供查询或登录。有了表单后，才能够输入会员资料，提供站点反馈意见、调查报告等信息、从而使服务器能够处理表单输入的数据。单纯的表单网页只是一个输入数据的前端界面，也可以说是服务器的窗口，实际

49、的数据处理时在网页服务器的相关程序和数据库。使用表单可以收集来自用户的信息，是网站管理者与浏览者之间进行沟通的桥梁。利用表单处理程序，可以收集、分析用户的反馈意见，做出科学、合理的决策，是一个网站成功的重要因素。有个表单，网站不仅是信息的提供者，同时也是信息的收集者。表单通常用来做调查表、订单和搜索界面等。使用Dreamweaver8可以创建表单、向表单中添加对象以及使用行为来验证用户输入的信息等。表单对象包含在表单域中，表单域定义了一个表单的开始和结束。在网页编辑窗口插入表单的方法是：将光标定位于要插入表单的位置，单击【插入】工具栏中的【表单】选项卡，在【表单】选项卡中单击【表单】按钮，表单

50、出现在编辑窗口中。在定义表单域后，就可以为表单添加各种表单对象，方法是：在表单域中，将光标定位在摇插入表单对象的位置，然后执行【插入】|【表单】命令，在弹出的下拉菜单中，选择要插入的表单对象。或者在【插入】工具栏中的【表单】选项卡中，单击要插入的表单对象按钮，还可以直接将【表单】选项卡中的表单对象按钮拖放到文档编辑窗口的表单区域中。1.2 制作步骤一、主页主页首先是插入标题图片，将用Photoshop处理过的图片插入居中。再运用层，在层中写出分页的标题，调整大小做好链接。然后选择行为中的弹出菜单命令，进行设置修改，可以修改弹出菜单。直接插入标题图片而不能把图片置于层中，就是因为如果将标题图片置

51、于层中，这个层会挡住链接里的下拉菜单，使界面变得不整洁。插入层，在层中插入图片，可以使图片随意移动，改变图片的位置。整体布局，使页面看起来更协调。在右上角插入表单，可搜索需要的信息。而在右下角插入时间，再对代码进行修改，可将时间改为动态，便于随时查看时间。根据需要在图片中插入链接，可以根据提示链接到其他页面。最后，运用JavaScript修改代码，得到页面中，字体跟随鼠标移动的效果。主页的制作就基本完成。二、游戏背景游戏背景中的英文标题其实是一张被抠去背景的图片，在标题之下插入五个按钮，每个按钮设置链接，链接到对应的故事阶段。在页面中插入表格，将故事内容插入表格。按照不同的阶段的故事，用表格将

52、其隔开，以显示清晰有序。每个阶段之前加上小标题，就更明了了。此处内容颇多，可以使用锚记链接来做。以第一个标题为例：在泰坦创世的第一段文字之前标记锚记链接，命名为ttcs。选择小标题泰坦创世，在链接出输入#ttcs，意为将小标题链接到锚记链接ttcs。当点击泰坦创世之后，页面跳到锚记链接的地方去，也就是泰坦创世第一段文字的开头。再在泰坦创世前加入锚记链接HOME，在此段文字末尾处输入返回，链接到HOME。点击时即可回到页顶。以此类推，可以将所有文字都运用锚记链接。使阅读者更清楚，不会给人混乱的感觉。三、职业种族这个页面主要介绍九大职业和十大种族，运用表格定位。要注意将表格边框设置为透明。此中用到

53、跳转表单，在顶部插入跳转表单，在表单中分别输入十大职业和九大种族的名字，当选择种族时跳转到部落页面或联盟的页面，当选择职业时跳转到各个职业的页面。在这个页面中需要链接到其他的页面，阵营页面部落和联盟，职业介绍的页面。部落和联盟的设计运用相似的结构组织，只是改变其风格。部落使用较为暗淡的色调，显示部落的野性和在黑夜出没的特性。联盟为人类，则选择比较明亮的色调，显示人类特性。先进行框架拆分，在上面的框架中插入标题背景等。在主框架中插入表格，运用介绍背景的方式，介绍各个种族的特点。在文字中穿插图片，使整个页面更丰富不单调。设置图片为左对齐或者右对齐，调整文字大小以及位置。使表格里的文字看起来整齐，一

54、目了然。做好这个两个网页之后，返回职业种族的主页面，将种族介绍的表单分别链接到这两个页面。再运用简单的图片和表格，制作职业介绍，介绍各个职业的特点。把职业种族中职业介绍的跳转表单链接到职业介绍。这样，职业种族的介绍就完成了。四、视频图片欣赏视频图片的页面主要以视频和图片为主。首先加入代码，使页顶面有一排循环滚动的图片，再用代码实现滚动图片的链接。再在右边插入七个层，层中加入图片。因为我们需要运用层的时间轴来实现图片的移动。先插入第一个层，此层为定位，为第一张图片，不需要移动。再插入第二层，加入图片，将层加入时间轴，调整时间轴使在一定时间内运行到第一张图片的下方，与第一张图片对齐。再在第一个层的

55、同样位置插入第三个层，加入图片，将层加入时间轴，调整为与第二个层相同的运动时间（起始时间和运动时间都相同）。调整层的运动，使其在同一时间运动到第二张图片的下方，与第二张图片对齐。以同样的方式，插入七张图片，将会得到我们要的效果。在页面的中间插入事先准备好的视频，三个视频以列的方式排列。设置自动播放第一个视频，其他的手动播放。这样在打开网页的时候会自动播放第一个视频，当第一个视频播放完之后，根据用户需要，可以选择播放后面的视频。到此，网页的大体结构基本完成。再返回首页，将表单里的内容，链接到相对应的页面，将logo设置链接。再插入一个层，在里面加入文字，介绍魔兽故事的大概，将字体设置为橙色，再修

56、改代码，使字体循环滚动，这样使整个页面看起来更有动感，不会出现死气沉沉的样子。1.3 源代码一、滚动文字： 故事发生在艾泽拉斯大陆之上,自从联盟和部落共同抗击天灾军团的进攻，已经过去了100多年，现在战火又将重新燃起. 二、文字跟随数遍移动代码： !- var message=欢 迎 来 到 魔 兽 世 界； var x,y; var step=12; var flag=0; message=message.split(); var xpos=new Array(); for (i=0;i=message.length-1;i+) xposi=-50; var ypos=new Array()

57、; for (i=0;i=1;i-) xposi=xposi-1+step; yposi=yposi-1; xpos0=x+step; ypos0=y; for (i=0;i=1;i-) xposi=xposi-1+step; yposi=yposi-1; xpos0=x+step; ypos0=y; for (i=0;i !-for (i=0;i=message.length-1;i+)document.write();document.write(messagei);document.write();if (document.layers) document.captureEvents(E

58、vent.MOUSEMOVE)document.onmousemove = handlerMM;/-三、时间代码：function number(index1) var numberstring=一二三四五六七八九; if(index1 =0) return(日) if(index1 10) return(numberstring.substring(0+(index1-1),index1) else if(index1 20 ) return(十+numberstring.substring(0+(index1-11),(index1-10) else if(index1 30 ) return(二十+numberstring.substring(0+(index1-21),(index1-20) else return(三十+numberstring.sub