网站制作与设计 .pdf

《网站制作与设计 .pdf》由会员分享，可在线阅读，更多相关《网站制作与设计 .pdf（42页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、-1-目录引言.3 第一章设计网站所要掌握的识 .-4-1.1 HTML 简介.-4-1.1.1 什么是 HTML.-4-1.1.2 HTML 文档.-4-1.2 ASP 简介.-5-1.2.1 什么是 ASP.-6-1.2.2 ASP的脚本语言.-6-1.2.3 ASP的特点.-6-1.2.4 ASP的运行环境.-7-1.2.5 ASP的工作原理.-8-1.3 数据库简介.-9-1.3.1 什么是数据库.-9-1.3.2 数据库的结构.-9-1.3.3 数据库的特点.-10-第二章网站的总体设计.-12-2.1 网站的功能.-12-2.1.1 静态模块的功能 .-12-名师资料总结-精品资料

2、欢迎下载-名师精心整理-第 1 页，共 42 页 -2-2.1.2 动态模块的功能 .-12-2.2 网站的页面设计.-13-2.2.1 网站页面的风格 .-13-2.2.2 网站页面的编排 .-14-2.3 网页的色彩处理.-15-第三章网站静态部分的制作.-19-3.1 网站的制作工具.-19-3.2 建立站点.-19-3.3 游戏视频页面的制作过程.-23-3.3.1 游戏视频页面的布局.-23-3.3.2 游戏视频页面的制作.-26-3.4 游戏新闻页面的制作过程.-31-3.4.1 游戏新闻页面的布局.-31-3.4.2 游戏新闻页面的制作.-32-第四章网站动态部分的制作.-34-

3、4.1 动态小程序.-34-结束语.-40-致谢.-41-参考文献.-42-名师资料总结-精品资料欢迎下载-名师精心整理-第 2 页，共 42 页 -3-引言随着网络科技的发展，使得网络逐渐成为人们生活与学习的工具。许多个人网站如雨后春笋般出现，个人网站开始在继大型商业网站后在网络中展现出它的特色。本文将介绍如何构建简单的个人单机游戏网站，为广大游戏爱好者提供了更加周到和人性化的服务。个性化已逐渐成为当今Web 应用的潮流。这是一种单机游戏网站，此方案与现今网上已采用的一些方案相比，具有用户使用更简单，界面更直观等优点。论文主 要讲述 如何利 用当 前主流 的 ASP,数据库 等主 流的动 态

4、网页 技术与Dreamweaver8，PhotoshopCS2等静态网页制作制作网站。第一章首先介绍了入门需要的基本知识。第二章主要是对整体规划以及对网站的总体设计，第三，四章分别讲述如果制作静态网页和动态网页。网站开发技术发展异常迅速、内容更新很快。作为论文，一方面要真实反映自己所学的知识。另一方面，要符合当今社会发展的需求，运用最新的理论和思维为社会创造财富。单机游戏网站制作就是一个不错的改进和创新,利用此设计可以理论实际相结合地学习网络通信网页制作的知识，了解社会在此方面的研究方向和发展。本论文在翟亚芳老师的精心指导下完成。由于我本人的水平和能力有限，论文必然存在不少缺点，希望各位老师提

5、出批评和建议，来弥补自己知识的不足。名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 42 页 -4-第一章设计网站所要掌握的识1.1 HTML 简介一个网站的基本组成是多个web页面，在客户端上所能看到的web页面基本上都是由 HTML 语言编写而成的。要建设一个动态的具有交互性的网站也离不开HTML的支持。1.1.1 什么是 HTML HTML 是通过按照一定的格式标记文本图像等元素，是它们在用户浏览器中显示不同风格的标记性语言。一个 HTML 页面在浏览器中显示之前并不进行编译，浏览器按照 HTML 标记解释显示其表现的内容。1.1.2 HTML 文档 HTML 文档是标准的

6、 ASCII 文本文件。一个HTML 文件就是添加了许多个标识性字符串 HTML 标记(tag)的普通文本文件。可以单击浏览器中菜单栏里的查看按钮，然后从弹出的快捷菜单中选择“源文件”选项来查看一个web页面的 HTML 文档，只要能将文件另 ASCII 纯文件格式的任何文字编辑器都可以编辑HTML。HTML 文件由各种标记元素(elements)组成。HTML 标记由一个左尖括号()组成。左尖括号是一个元素的开始标记，它与标记名之间不能由空格。大部分的元素具有起始标记(start tag)和结尾标记(end tag)，这样的元素被称为“容器”如和等。在起始标记的标记名的前面加上符号“/”便是

7、其结尾标记，如 。同样，在“/”与标记名之间也不能空格。元素的起始标记个结尾标记中间的部分是元素体。每个标记元素都有自己的属性，通过属性来标记元素体的格式。标记的属性和属性值都在起始标记内所有的HTML 标记及其属性都是放置在符号“”之中。名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 42 页 -5-在一个 HTML文档中不区分元素的大小写。另外，为属性值所加的双引号和用16 进制表示的颜色值前面的#号可以省略。1.1.3 页面结构一个 HTML 文件由一个 HTML 元素组成，即文件以 开始。以 结束，文档中其他元素及其属性的声明都是HTML 的元素体。HTML元素的元素体和

8、元素体由两大部分组成，即头元素,和体元素,。头元素和体元素的元素体又由其他元素、文本和注释等组成。一个标准的 HTML 文件应该具备如下结构：标记一个 HTML 文件的开始 HTML 文件的文件头部分开始,文件头部分内容 HTML 文件的文件头部分结束 HTML文件的文件体部分开始,文件体HTML文件的文件部分结束 标记该 HTML 文件结束有些元素只能出现在头元素中，如meta、title等元素，而大多数的元素只能出现在体元素中。在头元素中的元素表示的是该HTML 文件的一般信息，比如该文件的标题、来源、作者、版本、字符集和关键字等，这些元素与书写的顺序无关，它们只是表明该HTML文件的属性

9、值。但出现在元素体中的元素则是要注意书写顺序的，改变了它们的书写顺序就会改变HTML 文件在浏览器上输出的形式。1.2 ASP 简介ASP技术是 Microsoft公司开发的一套全新的服务器端脚本程序环境。它可以根据客户端的不同请求，在服务器端经过相应的ASP程序处理生成不同的静态HTML页面并穿回给浏览器。ASP自身有很多优点，这些优点使它成为了当今世界网络上应用最多的脚本设计环境。名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 42 页 -6-1.2.1 什么是 ASP ASP的全称是 Active Server Pages,中文名称叫做动态服务器网页，其功能在于可以使用它来

10、开发运行在Windows服务器平台上的动态网页和网站。尽管我们常把“ASP脚本”挂在嘴边，但ASP既不是一种编程语言，也不是开发工具软件，同样也不是一种应用程序，它实际上是一种开发动态网页的技术。1.2.2 ASP的脚本语言ASP的脚本语言可以是VBScript 或者 Jscript，也可以是两者的结合，所以任何一种文本编辑器都能编辑ASP脚本，当然不同的编辑器开发调试效率是不一样的。和通常的 VBScript 和 Jscript应用程序不同，ASP所有的程序都是在服务器端运行的，而不是在浏览器或者客户端执行的，这样用户就不必担心自己的浏览器能否运行所编写的 ASP代码了。程序执行完毕，服务器

11、仅将执行的结果返回给客户端浏览器，这样即使客户端的浏览器不支持 VBScript 或 Jscript，但是仍然可以浏览动态的网页。VBScript 是 IIS 默认的脚本语言，当然可以在 IIS 中更改默认的脚本语言。如果改成 Jscript，那么默认的脚本语言就是Jscript。因为 VBScript 在属性和方法上的灵活表现方式更适合作为服务器的脚本，所以推荐大家用VBScript作为 ASP的默认脚本语言。1.2.3 ASP的特点ASP技术与其他动态网页编程技术相比有很多优点，这些优点使得ASP技术成为了当今世界网络上应用最多的脚本设计环境。ASP的技术特点主要有以下几点：(1)ASP语

12、法结构简单。由于ASP将程序设计的控制部分全部交给了脚本语言，名师资料总结-精品资料欢迎下载-名师精心整理-第 6 页，共 42 页 -7-自身只提供标准的组件和内置对象，所以ASP语法的结构简单。使用VBScript、Jscript等简单易懂的脚本语言，结合 HTML 代码，即可快速地创建网络的应用程序。(2)ASP 是解释性语言，不是编译性语言，可以直接在服务器执行，不需要实现编译好可执行程序。(3)ASP的脚本语言可以有多种，可与任何的ActiveX Scripting语言相兼容。除了可以使用 VBScript 和 Jscript语言来设计外，还可以通过 Plug-in的方式使用第三方所

13、提供的其他脚本语言。(4)ASP 程序的执行与浏览器的版本无关。用户只要使用可执行HTML 代码的浏览器，即可浏览 ASP设计的网页内容。(5)ASP 的源程序不会让客户端看到，可以避免泄漏源程序，保护程序员的技术成果。(6)ASP 的编程环境简单，随便的一个普通的文本编辑器就可以进行ASP的编辑设计，如使用 windows 的笔记本等。1.2.4 ASP的运行环境由于 ASP是一种服务器的脚本语言，所以并不是所有的Web 服务器都具有这个功能。ASP是由 Microsoft公司推出的，当然在目前页只有Microsoft公司推出的服务器能实现 ASP的强大功能，其他的一些服务器在安装了ASP组

14、件后才能实现这个功能。Microsoft公司推出的支持ASP的 Web服务器有以下几个：(1)Microsoft Internet Information Server version(IIS);(2)Microsoft Peer Web Server;(3)Microsoft Personal WebServer(PWS);名师资料总结-精品资料欢迎下载-名师精心整理-第 7 页，共 42 页 -8-其中前两个主要是为Microsoft公司的 Windowns NT/2000/XP 系统开发的，当然它们的功能以及稳定性都要强很多。目前大型的站点大多是有IIS 作为服务器，而PWS 是为一般的

15、 PC用户开发的。既然 ASP是在服务器端执行的，因此访问这些以.asp 为后缀的文件时，就不能使用实际的物理路径，而只能用虚拟路径。使用虚拟路径访问ASP最简单的方法就是将 ASP文件拷贝到 IIS 的安装目录中 (默认的安装目录为 C：Inetpubwwwroot),然后就可以通过 IE 浏览器直接访问了。访问文件名为“index.asp”的 ASP文件，如果在 IE 浏览器中用物理路径访问，本来期望的结果是不会出现的，浏览器只会显示普通的HTML页面。为此应该将“index.asp”文件拷贝到服务器目录下，然后通过虚拟路径来访问该页面。如果程序没有错的话即可看到预期的效果。1.2.5 A

16、SP的工作原理通过上述介绍，大家应该了解到一个ASP页面从服务器端传送到客户端的原理与一般静态 HTML 页面是不同的。从客户端的一 URL请求到服务器反馈一个页面给浏览器，其大致的流程如下：(1)用户在客户端浏览器中输入一个网址，与服务器建立连接。(2)服务器根据用户请求的网址在硬盘上找到相应的文件。(3)如果文件是普通的 HTML 文档，那么服务器将直接把该文件传送到客户端。(4)如果文件是服务器脚本，那么服务器将运行这个文件。如果需要查询数据库，则通过 ADO 组件连接 ODBC 或 DSN数据源访问数据库。进行了一系列的运算和解释后，将最终结果形成一个纯HTML 文档。(5)把这个文档

17、传送到客户端。名师资料总结-精品资料欢迎下载-名师精心整理-第 8 页，共 42 页 -9-(6)结束这次连接。由于最后传送给客户端的是一个纯HTML 文本文件，因此用户在浏览器上是看不到 ASP文件的源代码的。1.2.6 ASP的开发工具使用 ASP进行网路编程，选择一个合适的开发工具是很重要的。ASP对开发工具没有特殊的要求，只要具有文本编辑器功能的工具均可。因此ASP的开发工具很多，比较好的由 Visual Interdev、Dreamweaver等。Dreamweaver是一个集成的 Web应用软件开发系统，包括开发、发行以及管理数 据库 驱 动 的 Web 应用 软件 所需 的 所

18、有 的功 能，所 以 一 般 情况下 推荐 使用Dreamweaver。1.3 数据库简介1.3.1 什么是数据库数据库是存储在一起的相关数据的集合，这些数据是结构化的，无有害的或不必要的冗余，并为多种应用服务；数据的存储独立于使用它的程序；对数据库插入新数据，修改和检索原有数据均能按一种公用的和可控制的方式进行。当某个系统中存在结构上完全分开的若干个数据库时，则该系统包含一个“数据库集合”。1.3.2 数据库的结构数据库的基本结构分三个层次，反映了观察数据库的三种不同角度。(1)物理数据层。它是数据库的最内层，是物理存贮设备上实际存储的数据的集合。这些数据是原始数据，是用户加工的对象，由内部

19、模式描述的指令操作处理的位串、字符和字组成。名师资料总结-精品资料欢迎下载-名师精心整理-第 9 页，共 42 页 -10-(2)概念数据层。它是数据库的中间一层，是数据库的整体逻辑表示。指出了每个数据的逻辑定义及数据间的逻辑联系，是存贮记录的集合。它所涉及的是数据库所有对象的逻辑关系，而不是它们的物理情况，是数据库管理员概念下的数据库。(3)逻辑数据层。它是用户所看到和使用的数据库，表示了一个或一些特定用户使用的数据集合，即逻辑记录的集合。1.3.3 数据库的特点 (1)实现数据共享。数据共享包含所有用户可同时存取数据库中的数据，也包括用户可以用各种方式通过接口使用数据库，并提供数据共享。(

20、2)减少数据的冗余度。同文件系统相比，由于数据库实现了数据共享，从而避免了用户各自建立应用文件。减少了大量重复数据，减少了数据冗余，维护了数据的一致性。(3)数据的独立性。数据的独立性包括数据库中数据库的逻辑结构和应用程序相互独立，也包括数据物理结构的变化不影响数据的逻辑结构。(4)数据实现集中控制。文件管理方式中，数据处于一种分散的状态，不同的用户或同一用户在不同处理中其文件之间毫无关系。利用数据库可对数据进行集中控制和管理，并通过数据模型表示各种数据的组织以及数据间的联系。名师资料总结-精品资料欢迎下载-名师精心整理-第 10 页，共 42 页 -11-(5)数据一致性和可维护性，以确保数

21、据的安全性和可靠性。主要包括：安全性控制：以防止数据丢失、错误更新和越权使用；完整性控制：保证数据的正确性、有效性和相容性；并发控制：使在同一时间周期内，允许对数据实现多路存取，又能防止用户之间的不正常交互作用；故障的发现和恢复：由数据库管理系统提供一套方法，可及时发现故障和修复故障，从而防止数据被破坏。名师资料总结-精品资料欢迎下载-名师精心整理-第 11 页，共 42 页 -12-第二章网站的总体设计2.1 网站的功能经过对大量资料认真分析并且仔细斟酌思量之后，决定做一个单机游戏网站，向大家介绍一些经典的和最新的单机游戏以及最新的游戏动态。根据是否有反馈信息将网站的功能模块分为静态模块和动

22、态模块两大模块。2.1.1 静态模块的功能静态模块，即纯 HTML 语言编写的模块。本单机游戏网站的静态模块分为：(1)首页。网站的主页，也是网站的门户页。(2)游戏截图。含有大量精美游戏图片供大家欣赏。(3)游戏视频。让用户一览经典游戏的风采。(4)游戏新闻。为用户介绍一些最新的游戏资讯。(5)游戏分类导航模块。按照游戏类别将游戏分为七类方便用户浏览。(6)制作小组。2.1.2 动态模块的功能动态模块与静态模块不同，除了含由 HTML 框架外，还得由 ASP语言编程，必要时还需加上数据库。本单机游戏网站的动态模块分为：(1)用户注册模块。会员注册。(2)会员登陆模块。会员登陆，验证登陆者身份

23、。(3)访客计数器，显示客户端IP 以及显示当前系统时间模块。名师资料总结-精品资料欢迎下载-名师精心整理-第 12 页，共 42 页 -13-(4)留言板模块。供来访者留言。2.2 网站的页面设计网站页面是浏览者对整个网站的普遍的感觉，是页面的版式、色调及图文组合的高度抽象。而网站的创意则是在设计之前对内容的选择和表现形式运用的思考，力求个性的发挥。在茫茫网海没有创意的网站很快就会被人遗忘。2.2.1 网站页面的风格页面的美化首先要考虑风格的定位。任何页面都要根据主题的内容决定其风格与形式，因为只有形式与内容的完美统一，才能达到理想的宣传效果。目前网页的应用范围日益扩大，几乎包括了所有的行业

24、，林林总总，包罗万象，但归纳起来大体有这么几个大类：新闻机构、政府机关、科教文化、娱乐艺术、电子商务、网络中心等。对于不同性质的行业，应体现出不同的页面风格，就像穿着打扮，应依不同的性别以及年龄层次而异一样。例如：政府部门的主页风格一般应比较庄重，而娱乐行业则可以活泼生动一些；商务主页则可以贴近民俗，使大众喜闻乐见；文化教育部门的主页风格应该高雅大方、格调清新，不宜太花。对于画面风格的选择：需要考虑是写实还是写意，是体现专业性还是大众化，是为儿童还是为成人。对形式的简繁的选择：是追求简洁还是花哨，不同性质的网站在这方面会有不同。如艺术网站，会不厌其烦地用各种手法来展示其创意。对于色调选择：是活

25、泼还是庄重，是素还是艳，比如食品网站应选择的色彩很艳丽，如果选择素的色彩，可能就无法体现出水果和蔬菜的那种生气，而工艺品网站的色调是以素为主，突出了手工艺品的典雅。页面风格的形成主要依赖于页面的版式设计，依赖于页面的色调处理，还有图片与文字的组合形式等。这些问题看似简单，往往需要主页的设计和制作者具有一定的美术素质和修养。要使主页设计、制作得美观大方、切合主题，必然离不开对主页进行艺术的加工和处理。名师资料总结-精品资料欢迎下载-名师精心整理-第 13 页，共 42 页 -14-由于设计经验不足，又非艺术专业学生，我们决定将页面设计为清新简洁的风格，以显其朴素大方之美。2.2.2 网站页面的编

26、排页面的设计首先涉及到的是页面的版面编排问题。“页面编排”实际上就是中国古代画论中的“经营位置”。网页作为一种版面，既有文字，又有图片。文字有大有小，还有标题和正文之分；图片也有大小，而且有横有竖之别。图片和文字都需要同时展示给观众，总不能简单地罗列在一个页面上，这样往往会搞得杂乱无章。因此必须根据内容的需要，将这些图片和文字按照一定的次序进行合理的编排和布局，使它们组成一个有机的整体，展现给广大的观众。主页，说到底，只是一个 800*600的画面，那么，我们要怎么对它进行安排才合理呢？首先，也是最重要的一点，就是先停下创作，先想好一个主题。“设 计，是一种有目的的创造”。若在动手之前并不了解

27、自己将要做什么及要怎么做，而只是一味的靠操作PHOTOSHOP的滤镜而达到一种特效的话，那么，最终做出来的东西最多局部看得觉得挺不错的，但全局就显得太复杂了。对于页面的布局我们主要依据如下几条原则来做：(1)主次分明，中心突出。在一个页面上，必然考虑视觉的中心，这个中心一般在屏幕的中央，或者在中间偏上的部位。因此，一些重要的文章和图片一般可以安排在这个部位，在视觉中心以外的地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次有别。(2)大小搭配，相互呼应。较长的文章或标题，不要编排在一起，要有一定的距离，同样，较短的文章，也不能编排在一起。对待图片的安排也是这样，要互相错开，

28、造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。(3)图文并茂，相得益彰。文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活名师资料总结-精品资料欢迎下载-名师精心整理-第 14 页，共 42 页 -15-跃页面，又使页面有丰富的内容。2.3 网页的色彩处理色彩，网站风格之魂、创意之先锋。色彩是人的视觉最敏感的东西也是最持久地给浏览者以网站形象的因素。页面的色彩处理得好，可以锦上添花，达到事半功倍的效果。其实，色彩是网站形象是营销环节中非常

29、重要的一个部分，如同人的衣着一样，信息空间的构造也需要恰如其分的包装。网站的内容不仅仅是由文字组成的，视觉元素在网站中也占有重要的位置。色彩总的应用原则应该是“总体协调，局部对比”，也就是：页面的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。因为色彩具有象征性，例如：嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色，例如：军警的橄榄绿，医疗卫生的白色等。色彩还具有明显的心理感觉，例如冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的

30、影响，对于色彩的喜好也存在着较大的差异。充分运用色彩的这些特性，可以使我们的主页具有深刻的艺术内涵，从而提升主页的文化品位。网站中的网页用色方面应用掌握或注意以下几方面；1.网页色彩搭配的原理色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。色彩的独特性。要有与众不同的色彩，使得大家对你网站的印象强烈。色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。名师资料总结-精品资料欢迎下载-名师精心整理-第 15 页，共 42 页 -16-色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。2.网页色彩搭配的技巧用

31、一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。用两种色彩。先选定一种色彩，然后选择它的对比色。用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。3.运用过多种类的颜色在网页配色中，忌讳的是不要将所有颜色都用到，尽量控制在三种色彩以内。背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)以便突出主要文字内容。4选择适合内容风格的颜色。色彩有冷暖的感觉。如儿童类站点不要用冷色系，且颜色要丰富一些。色彩有柔软和坚硬感。同色相，明度高，则有柔软感；

32、明度低，则会有坚硬感。女性站点，适量选用柔美的粉淡色或高级灰，而男性类站点，就可使用棕色深蓝色。从色相看，暧色给人的感觉华丽；从明度看，明度高给人的感觉华丽。由此首饰类站点可以使用高雅的咖啡和金黄色，而香水类站点可以用明度高的淡绿或浅蓝色。色彩明度的高低与声音的高低相关，强烈的色彩如亮黄色、鲜红色，具有尖锐高亢的音乐感。暗浊色如海蓝色、深灰色等具有低沉浑厚的音乐感。现代音像艺术名师资料总结-精品资料欢迎下载-名师精心整理-第 16 页，共 42 页 -17-正是采用了视觉与听觉等多媒体相结合的方法，展现了丰富、新颖的视听效果。根据色彩的味觉感。绿色、黄绿色是未成熟的果实色彩，有酸、涩的味感。橙

33、色、浅黄色、浅棕色、粉红色使人想到成熟的瓜果色彩而产生甜甜的味感。设计饮食类站点可以遵循以上原则。最后，应吸取前人已有的配色经验，并应用到设计的网站中，以下为本设计小组从网上搜索并精选的几条：1确定主体色遵循主从关系，这是最稳定的处理色彩原则。红、黄、绿、紫等每一个字都代表一类具体的颜色，也就是色相，客观存在,它是指色彩的相貌，是区别色彩种类的名称。在页面上，除白色为背景色外大量使用的颜色，就是这个网页的主体颜色。如果在同一个页面内运用了多种颜色，把握不好的话，就无法确定哪个是主体色。2 相近色选择色彩相近的颜色，非常容易搭配。如在红色里面加白色，红色就会越来越亮。而加黑色，红色就越来越暗，明

34、度降低。so 色彩的明度就是指任何一种颜色的明暗度。假设在蓝色里面加黑、白、灰，或另一种颜色，就会使得蓝色不纯，不再鲜艳。那么色彩的纯度就是指色彩系中每一个颜色的鲜艳程度。同色系（同色相）的几种颜色容易搭配，如挑几种深浅不同的绿色来搭配，一般页面不会有太大问题；同一页面尽量不要多出4 种颜色。链接的色彩搭配也是遵循以上的原则。而文字颜色的搭配，则要与背景分离。这样才可以很明确的传达我们要表现的东西我们要突出的图形文字的颜色必须让它能够吸引观者的主要注意力。如果不是这样就会喧宾夺主。3 色彩均衡名师资料总结-精品资料欢迎下载-名师精心整理-第 17 页，共 42 页 -18-它是比较保险的配色互

35、补原则多种颜色同时存在的时候不容易把握好，一定要调和统一在网页设计中，如果运用了较多明度较高的颜色，就可以用黑色，或同色相的深色小面积压一下，点缀一下，使得页面不要太轻，达到色彩重量的平衡平衡的颜色较符合多数人的色彩心理根据情况，如选择黑色，可能会严肃和庄重，而用同色相的深色，则轻松些4 黑白灰运用其实黑白灰是宝贝，万不可小看它们如果在用色上遇到麻烦，可以大面积的加白，灰；小面积加加黑来调节其他颜色搭配不当遇到使用纯度很高的颜色，比如纯蓝、纯黄等，这样的搭配会很鲜艳，视觉感觉比较兴奋。把这样的颜色明度抬高或降低，搭配上灰、白色，也是调节的方法。本网站的在色彩处理上就用了绿色系。名师资料总结-精

36、品资料欢迎下载-名师精心整理-第 18 页，共 42 页 -19-第三章网站静态部分的制作3.1 网站的制作工具要制作网站，工具软件是必不可少的。若要全靠手工编写代码，不单效率低下，其工作量之大也是不可想象的。本站的制作我们用了以下三种工具。1.Dreamweaver8。Dreamweaver是美国 MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。它有很多优点：1.制作效率高。2.方便网站管理。3.控制能力强。深受广大用户的喜爱。2.

37、PhotoshopCS2。photoshop 是 Adobe公司旗下最为出名的图像处理软件之一。Photoshop CS2 是对数字图形编辑和创作专业工作标准的一次重要更新。它将作为独立软件程序或 Adobe Creative Suite 2的一个关键构件来发布。Photoshop CS2引入强大和精确的新标准，提供数字化的图形创作和控制体验。3.2 建立站点打开 Dreamweaver8，在菜单栏里单击“站点”，在弹出的快捷菜单中选择新建站点选项。弹出对话框，如图3-1 所示。在第一个文本框中填写你所要建立站点的名字。我们填写“单机游戏网”。在第二个文本框中填写你所要建立站点的网址。如果没有

38、申请网址，这里可以不填，或填本地地址 127.0.0.1。点击下一步，弹出对话框，如图3-2 所示。名师资料总结-精品资料欢迎下载-名师精心整理-第 19 页，共 42 页 -20-3-1 3-2 名师资料总结-精品资料欢迎下载-名师精心整理-第 20 页，共 42 页 -21-询问我们是否要用服务器技术，因为我们要建动态网站，所以选择“是，我想使用服务器技术”。此时，下方会出现一个下拉菜单，询问我们要用哪种服务器技术，这里我们选择 ASP VBScript 选项。单击下一步，弹出对话框，如图3-3 所示。3-3 由于我们已经架设了服务器，所以这里我们选择“在本地进行编辑和测试(这台是我的服务

39、器)”选项。在下面的文本框中填写网站源文件的存放位置。我们放在服务器目录下“单机游戏网”单击下一步。这 里 问 我 们 用 什 么URL 来 访 问 网 站 根 目 录，我 们 取 其 默 认 值“http:/localhost/”直接单击下一步。问是否要用远程服务器，如图3-4 所示。由于我们没有远程服务器，这里我们选择“否”。单击下一步，给出我们的单机游戏网站的配置信息。如图3-5 所示。若不正确，则单击上一步进行修改，若正确，则单击“完成”。名师资料总结-精品资料欢迎下载-名师精心整理-第 21 页，共 42 页 -22-3-4 3-5 名师资料总结-精品资料欢迎下载-名师精心整理-第

40、22 页，共 42 页 -23-由于我们没有远程服务器，这里我们选择“否”。单击下一步，给出我们的单机游戏网站的配置信息。如图3-5 所示。若不正确，则单击上一步进行修改，若正确，则单击“完成”。这样，我们的站点就建立好了。3.3 游戏视频页面的制作过程3.3.1 游戏视频页面的布局打开 Dreamweaver8，在菜单栏里单击“文件”，在弹出的快捷菜单里选择“新建”选项，在弹出的对话框中选择“常规”标签的“动态页”，在右边的选项框中选择“ASP VBScript 选项。单击“创建”，进入网页编辑页面。如图3-6 所示。3-6 首先，在工具栏里单击“布局”按钮，进入布局页面。如图3-7 所示。

41、名师资料总结-精品资料欢迎下载-名师精心整理-第 23 页，共 42 页 -24-3-7 下面我们进行游戏截图页面的布局。1.绘制导航条区域。选中“布局表格“按钮，在布局页面的最上方画一方框，大小任意。修改其属性，宽为 985 像素，高为 105 像素。2.绘制菜单栏区域。仍然选中“布局表格”按钮，在紧贴着导航条的正下方出画一方框，大小任意。修改其属性，宽为985 像素，高位 42 像素。3.绘制侧导航栏区域。选中“布局表格”按钮，在正文区域中紧贴菜单栏的正下方最左侧绘制一方框，大小任意。修改其属性，宽为203 像素，高为 838像素。选中“绘制布局单元格”按钮，在侧导航栏布局表格区域内从上往

42、下一次画8 个方框，修改其属性，宽为 203名师资料总结-精品资料欢迎下载-名师精心整理-第 24 页，共 42 页 -25-像素，高 40 像素。4.绘制正文区域。在菜单栏、侧导航栏、页脚三处中间绘制一表格，大小任意。修改其属性，宽为 782 像素，高为 40 像素，用于输入标题。在其下方再依次绘制五个大小相同的单元格，用于输入文字。5.绘制页脚区域。选中“布局表格”按钮，在导航条的正下方绘制一方框，大小任意。修改其属性，宽为 985 像素，高为 42 像素。至此，游戏视频页面的布局工作就完成了。效果图如图3-8 所示。3-8 名师资料总结-精品资料欢迎下载-名师精心整理-第 25 页，共

43、42 页 -26-3.3.2 游戏视频页面的制作用 Dreamweaver8打开布局文件，切换到标准模式下，效果图如图 3-9 所示。3-9 1.制作导航条。将光标移动到导航条区域，在菜单栏里点击“插入”在弹出的快捷菜单里单“图像”，打开我们事先做好的导航条图像(具体是怎么制作的，这里就不细讲了)，如图 3-10 所示。这样导航条就做好了。2.制作菜单栏。将光标移动至菜单栏区域，在属性区域内修改其背景，打开我们事先做好的菜单栏图像，如图 3-11 所示。名师资料总结-精品资料欢迎下载-名师精心整理-第 26 页，共 42 页 -27-3-10 3-11 名师资料总结-精品资料欢迎下载-名师精心

44、整理-第 27 页，共 42 页 -28-在菜单栏里依次输入首页，游戏截图，游戏视频，游戏新闻，制作小组，留言板。修改其属性，大小为12，文本颜色为黑色，并分别添加链接。如图3-12所示。3-12 这样，菜单栏就做好了。3.制作侧导航栏。用鼠标将侧导航栏区域内的8 个单元全部括住，在属性面板中修改其背景，打开我们事先做好的背景图片，如图3-13 所示。名师资料总结-精品资料欢迎下载-名师精心整理-第 28 页，共 42 页 -29-3-13 3-14 名师资料总结-精品资料欢迎下载-名师精心整理-第 29 页，共 42 页 -30-在这 8 个方框中分别写入游戏分类，角色扮演，即使战略，动作冒

45、险，赛车竞速，体育竞技，格斗对战，休闲益智。修改字体属性，大小为12，粗体，黑色。单元格属性，水平设为居中对齐，垂直设为居中。分别为其添加链接。用鼠标将侧导航栏余下的空白部分全部括住。修改其背景。如图3-14 所示。这样，侧导航栏就做好了。4.制作正文部分在常规模式下，在正文部分正中顶部输入“游戏视频欣赏”，修改其属性为，大小 36，蓝色。单元格属性为，水平为居中对齐，垂直为居中。依次在下面的五个单元格里输入文本，并添加链接。做好后如图3-15 所示。3-15 这样，正文部分就做好了。5制作页脚名师资料总结-精品资料欢迎下载-名师精心整理-第 30 页，共 42 页 -31-将光标移至页脚区域

46、，修改其背景。修改单元格属性，水平为居中对齐，垂直为据中。输入“2009”字样，大小为14。如图 3-16 所示。3-16 这样，页脚就做好了。至此，游戏视频页面就制作完成了。3.4 游戏新闻页面的制作过程3.4.1 游戏新闻页面的布局游戏新闻页面导航栏、菜单栏、侧导航栏、页脚的布局与游戏视频页面中的完全相同，正文部分的布局方法也很简单，具体的制作方法这里就不再赘述了。完成后，如图 3-17 所示。名师资料总结-精品资料欢迎下载-名师精心整理-第 31 页，共 42 页 -32-3-17 3.4.2 游戏新闻页面的制作按照 3.3.2 中所述的方法将导航条，菜单栏，页脚都做好。下面开始做正文部

47、分。首先，在标准模式下，在正文部分的第一个单元格中输入“游戏新闻”，大小为36，蓝色，粗体，修改单元格属性，垂直为默认，水平为居中对齐。在第二个到第六个格单元格里输入文本，字体颜色为蓝色和黑色，大小为14，添加链接，设置单元格属性，水平为默认，垂直为居中。将光标移至最右边的方框中，插入预先找好的图片。全做好后，如图3-18 所示。名师资料总结-精品资料欢迎下载-名师精心整理-第 32 页，共 42 页 -33-3-18 这样，游戏新闻页面就做好了。名师资料总结-精品资料欢迎下载-名师精心整理-第 33 页，共 42 页 -34-第四章网站动态部分的制作4.1 动态小程序1.来访者计数器文件为

48、count.asp 程序如下：您是第 位访客!2.显示客户端 IP 程序文件为 ip.asp 程序如下：您的 IP 为:3.显示当前日期和时间程序文件为 time.asp 程序如下：4.2 用户注册程序文件为 zc.asp，程序如下：名师资料总结-精品资料欢迎下载-名师精心整理-第 34 页，共 42 页 -35-%B1=Request.Form(xm)B2=Request.Form(pws1)B3=Request.Form(pws2)B4=Request.Form(xb)session(xb)=B4 If Request.Form(xm)=Then Response.Write(请输入用户名

49、)End if If Request.Form(pws1)=Or Request.Form(pws2)=Or Request.Form(pws1)Request.Form(pws2)Then Response.write(密码输入不正确)Else Set conn=Server.CreateObject(ADODB.Connection)conn.Open dbq=&Server.MapPath(/db/zc.mdb)&;driver=Microsoft Access Driver(*.mdb)SQL=Insert Into biao3(lxm,lpws1,lpws2,lxb)Values(&

50、B1&,&B2&,&B3&,&B4&)conn.Execute SQL conn.Close Set conn=Nothing Response.Redirect gongxi.asp End If%4.3 用户登陆程序文件为 dl.asp，程序如下：%C1=Request.Form(用户名)C2=Request.Form(密码)session(用户名)=C1 名师资料总结-精品资料欢迎下载-名师精心整理-第 35 页，共 42 页 -36-Set conn=Server.CreateObject(ADODB.Connection)conn.Open dbq=&Server.MapPath(/