游戏网页设计的设计与制作.docx

1、游戏网页设计的设计与制作网页设计的设计与制作二一年九月摘 要本论文将对网页的设计和制作进行研究和探讨。主要技术指标包括：1、制作出一个具有静态和动态技术的网页；2、在制作的过程中，加强和深化以前所学的关于网页设计的方法，同时更好的理解参考资料上的方法和理论。论文主要讲述如何利用当前主流的ASP,数据库等主流的动态网页技术与Dreamweaver8，PhotoshopCS2等静态网页制作网站。第一章首先介绍了入门需要的基本知识。第二章主要是对网页的总体设计与规划，第三，四章分别讲述如果制作静态网页和动态网页。网页规划包含的内容很多，如网页的结构、栏目的设置、网页的风格、颜色搭配、版面布局、文字图

2、片的运用等，也只有如此制作出来的网页才能有个性、有特色，具有吸引力。 关键词：网页设计 网页制作 ASP AbstractThis will be web page design and production of research and discussion. Works of the main technical indicators include: To produce a static and dynamic technology page; In the process of strengthening and deepening of previously learned ab

3、out web design methods, while a better understanding of Reference Information on the methods and theories.The thesis mainly describes how to use the ASP, database mainstream of dynamic web technology and mainstream PhotoshopCS2, Dreamweaver8 static web site. etc .The first chapter introductory first

4、 introduced the basic knowledge of need. The second chapter basically is to web design and programming, the overall number 3, 4 chapter tells how to product static page respectively and the dynamic pages.Page plan includes a great many things, such as the page structure, and column settings, web sty

5、le, color combinations, layout, text, images and other use of, and only this website in order to have produced personality characteristics, attractive.Key words: Web design Page Creator ASP 目 录摘 要 1第一章 绪论 11.1 HTML简介 11.2 ASP简介 21.3 本文的主要内容 4第二章 网页的总体设计 52.1 网页的页面设计 52.2 网页的色彩处理 6第三章 网页静态部分的制作 93.1

6、网页的制作工具 93.2 建立站点 93.3 网页页面的制作 13第四章 网页动态部分的制作 194.1 动态小程序 194.2 用户注册程序 204.3 用户登陆程序 214.4 留言板程序 224.5 数据库 23第五章 结束语 25致 谢 27参考文献 29 第一章 绪论1.1 HTML简介 一个网页的基本组成是多个web页面，在客户端上所能看到的web页面基本上都是由HTML语言编写而成的。要建设一个动态的具有交互性的网页也离不开HTML的支持。1.什么是HTML HTML是通过按照一定的格式标记文本图像等元素，是它们在用户浏览器中显示不同风格的标记性语言。一个HTML页面在浏览器中显

7、示之前并不进行编译，浏览器按照HTML标记解释显示其表现的内容。2.HTML文档 HTML文档是标准的ASCII文本文件。一个HTML文件就是添加了许多个标识性字符串HTML标记(tag)的普通文本文件。可以单击浏览器中菜单栏里的查看按钮，然后从弹出的快捷菜单中选择“源文件”选项来查看一个web页面的HTML文档，只要能将文件另ASCII纯文件格式的任何文字编辑器都可以编辑HTML。 HTML文件由各种标记元素(elements)组成。HTML标记由一个左尖括号()组成。左尖括号是一个元素的开始标记，它与标记名之间不能由空格。 大部分的元素具有起始标记(start tag)和结尾标记(end

8、tag)，这样的元素被称为“容器”如和等。在起始标记的标记名的前面加上符号“/”便是其结尾标记，如。同样，在“/”与标记名之间也不能空格。元素的起始标记与结尾标记中间的部分是元素体。 每个标记元素都有自己的属性，通过属性来标记元素体的格式。标记的属性和属性值都在起始标记内所有的HTML标记及其属性都是放置在符号“”之中。 在一个HTML文档中不区分元素的大小写。另外，为属性值所加的双引号和用16进制表示的颜色值前面的#号可以省略。3.页面结构 一个HTML文件由一个HTML元素组成，即文件以开始。以结束，文档中其他元素及其属性的声明都是HTML的元素体。HTML元素的元素体和元素体由两大部分组

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

10、序的，改变了它们的书写顺序就会改变HTML文件在浏览器上输出的形式。1.2 ASP简介ASP技术是Microsoft公司开发的一套全新的服务器端脚本程序环境。它可以根据客户端的不同请求，在服务器端经过相应的ASP程序处理生成不同的静态HTML页面并穿回给浏览器。ASP自身有很多优点，这些优点使它成为了当今世界网络上应用最多的脚本设计环境。1.什么是ASPASP的全称是Active Server Pages,中文名称叫做动态服务器网页，其功能在于可以使用它来开发运行在Windows服务器平台上的动态网页和网页。尽管我们常把“ASP脚本”挂在嘴边，但ASP既不是一种编程语言，也不是开发工具软件，同

11、样也不是一种应用程序，它实际上是一种开发动态网页的技术。2.ASP的脚本语言ASP的脚本语言可以是VBScript或者Jscript，也可以是两者的结合，所以任何一种文本编辑器都能编辑ASP脚本，当然不同的编辑器开发调试效率是不一样的。和通常的VBScript和Jscript应用程序不同，ASP所有的程序都是在服务器端运行的，而不是在浏览器或者客户端执行的，这样用户就不必担心自己的浏览器能否运行所编写的ASP代码了。程序执行完毕，服务器仅将执行的结果返回给客户端浏览器，这样即使客户端的浏览器不支持VBScript或Jscript，但是仍然可以浏览动态的网页。VBScript是IIS默认的脚本语

12、言，当然可以在IIS中更改默认的脚本语言。如果改成Jscript，那么默认的脚本语言就是Jscript。因为VBScript在属性和方法上的灵活表现方式更适合作为服务器的脚本，所以推荐大家用VBScript作为ASP的默认脚本语言。3. ASP的运行环境由于ASP是一种服务器的脚本语言，所以并不是所有的Web服务器都具有这个功能。ASP是由Microsoft公司推出的，当然在目前页只有Microsoft公司推出的服务器能实现ASP的强大功能，其他的一些服务器在安装了ASP组件后才能实现这个功能。Microsoft公司推出的支持ASP的Web服务器有以下几个：Microsoft Internet

13、 Information Server version (IIS);Microsoft Peer Web Server;Microsoft Personal WebServer (PWS);其中前两个主要是为Microsoft公司的Windowns NT /2000 /XP系统开发的，当然它们的功能以及稳定性都要强很多。目前大型的站点大多是有IIS作为服务器，而PWS是为一般的PC用户开发的。既然ASP是在服务器端执行的，因此访问这些以.asp为后缀的文件时，就不能使用实际的物理路径，而只能用虚拟路径。使用虚拟路径访问ASP最简单的方法就是将ASP文件拷贝到IIS的安装目录中 (默认的安装目录

14、为C：Inetpubwwwroot),然后就可以通过IE浏览器直接访问了。访问文件名为“index.asp”的ASP文件，如果在IE浏览器中用物理路径访问，本来期望的结果是不会出现的，浏览器只会显示普通的HTML页面。为此应该将“index.asp”文件拷贝到服务器目录下，然后通过虚拟路径来访问该页面。如果程序没有错的话即可看到预期的效果。4. ASP的工作原理通过上述介绍，大家应该了解到一个ASP页面从服务器端传送到客户端的原理与一般静态HTML页面是不同的。从客户端的一URL请求到服务器反馈一个页面给浏览器，其大致的流程如下：(1) 用户在客户端浏览器中输入一个网址，与服务器建立连接。(2

15、) 服务器根据用户请求的网址在硬盘上找到相应的文件。(3) 如果文件是普通的HTML文档，那么服务器将直接把该文件传送到客户端。(4) 如果文件是服务器脚本，那么服务器将运行这个文件。如果需要查询数据库，则通过ADO组件连接ODBC或DSN数据源访问数据库。进行了一系列的运算和解释后，将最终结果形成一个纯HTML文档。 (5) 把这个文档传送到客户端。(6) 结束这次连接。由于最后传送给客户端的是一个纯HTML文本文件，因此用户在浏览器上是看不到ASP文件的源代码的。5. ASP的开发工具使用ASP进行网路编程，选择一个合适的开发工具是很重要的。ASP对开发工具没有特殊的要求，只要具有文本编辑

16、器功能的工具均可。因此ASP的开发工具很多，比较好的由Visual Interdev、Dreamweaver等。Dreamweaver是一个集成的Web应用软件开发系统，包括开发、发行以及管理数据库驱动的Web应用软件所需的所有的功能，所以一般情况下推荐使用Dreamweaver。1.3本文的主要内容本文网页的设计与制作的主要内容有:1.网页设计概述。包括网页设计与制作的工具介绍，如：HTML，ASP。2.网页的总体设计。包括网页的页面设计、网页的色彩处理等。3.网页静态部分的制作。包括网页的制作工具、建立站点、网页页面的制作。4.页面动态部分的制作。 包括动态小程序、用户注册程序、用户登录程

17、序、留言板程序、数据库。第二章 网页的总体设计2.1 网页的页面设计网页页面是浏览者对整个网页的普遍的感觉，是页面的版式、色调及图文组合的高度抽象。而网页的创意则是在设计之前对内容的选择和表现形式运用的思考，力求个性的发挥。在茫茫网海中没有创意的网页很快就会被人遗忘。1.网页页面的风格 页面的美化首先要考虑风格的定位。任何页面都要根据主题的内容决定其风格与形式，因为只有形式与内容的完美统一，才能达到理想的宣传效果。目前网页的应用范围日益扩大，几乎包括了所有的行业，林林总总，包罗万象，但归纳起来大体有这么几个大类：新闻机构、政府机关、科教文化、娱乐艺术、电子商务、网络中心等。对于不同性质的行业，

18、应体现出不同的页面风格，就像穿着打扮，应依不同的性别以及年龄层次而异一样。例如：政府部门的主页风格一般应比较庄重，而娱乐行业则可以活泼生动一些。对于画面风格的选择：需要考虑是写实还是写意，是体现专业性还是大众化，是为儿童还是为成人？对形式的简繁的选择：是追求简洁还是花哨？不同性质的网页在这方面会有不同。如艺术网页，会不厌其烦地用各种手法来展示其创意。对于色调选择：是活泼还是庄重，是素还是艳？比如食品网页应选择的色彩很艳丽，如果选择素的色彩，可能就无法体现出水果和蔬菜的那种生气，而工艺品网页的色调是以素为主，突出了手工艺品的典雅。页面风格的形成主要依赖于页面的版式设计，依赖于页面的色调处理，还有

19、图片与文字的组合形式等。这些问题看似简单，往往需要主页的设计和制作者具有一定的美术素质和修养。要使主页设计、制作得美观大方、切合主题，必然离不开对主页进行艺术的加工和处理。2.网页页面的编排 页面的设计首先涉及到的是页面的版面编排问题。网页作为一种版面，既有文字，又有图片。文字有大有小，还有标题和正文之分；图片也有大小，而且有横有竖之别。图片和文字都需要同时展示给观众，总不能简单地罗列在一个页面上，这样往往会搞得杂乱无章。因此必须根据内容的需要，将这些图片和文字按照一定的次序进行合理的编排和布局，使它们组成一个有机的整体，展现给广大的观众。主页，说到底，只是一个800*600的画面，那么，要怎

20、么对它进行安排才合理呢？首先，也是最重要的一点，就是先想好一个主题。“设计，是一种有目的的创造”。若在动手之前并不了解自己将要做什么及要怎么做，而只是一味的靠操作PHOTOSHOP的滤镜而达到一种特效的话，那么，最终做出来的 最多局部看得觉得挺不错的，但全局就显得太复杂了。对于页面的布局主要依据如下几条原则来做：(1)主次分明，中心突出。在一个页面上，必然考虑视觉的中心，这个中心一般在屏幕的中央，或者在中间偏上的部位。因此，一些重要的文章和图片一般可以安排在这个部位，在视觉中心以外的地方就可以安排那些稍微次要的内容，这样在页面上就突出了重点，做到了主次有别。(2)大小搭配，相互呼应。较长的文章

21、或标题，不要编排在一起，要有一定的距离，同样，较短的文章，也不能编排在一起。对待图片的安排也是这样，要互相错开，造成大小之间有一定的间隔，这样可以使页面错落有致，避免重心的偏离。(3)图文并茂，相得益彰。文字和图片具有一种相互补充的视觉关系，页面上文字太多，就显得沉闷，缺乏生气。页面上图片太多，缺少文字，必然就会减少页面的信息容量。因此，最理想的效果是文字与图片的密切配合，互为衬托，既能活跃页面，又使页面有丰富的内容。2.2 网页的色彩处理色彩，网页风格之魂、创意之先锋。色彩是人的视觉最敏感的东西也是最持久地给浏览者以网页形象的因素。页面的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩总

22、的应用原则应该是“总体协调，局部对比”。也就是页面的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据主页内容的需要，分别采用不同的主色调。充分运用色彩的这些特性，可以使网页具有深刻的艺术内涵，从而提升主页的文化品位。网页中的网页用色方面应用掌握或注意以下几方面；1.网页色彩搭配的原理 色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。 色彩的独特性。要有与众不同的色彩，使得大家对你网页的印象强烈。 色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。 色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红

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

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

25、果色彩而产生甜甜的味感。设计饮食类站点可以遵循以上原则。第三章 网页静态部分的制作 3.1 网页的制作工具要制作网页，工具软件是必不可少的。若要全靠手工编写代码，不单效率低下，其工作量之大也是不可想象的。下面以游戏网页设计与制作为例，网页的制作需要以下二种工具。1. Dreamweaver8Dreamweaver是美国MACROMEDIA公司开发的集网页制作和管理网页于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。它有很多优点：1.制作效率高。2.方便网页管理。3.控制能力强。深受广

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

27、如果没有申请网址，这里可以不填，或填本地地址127.0.0.1。点击下一步，弹出对话框，如图3-2所示。图3-1图3-2询问是否要用服务器技术，因为要建动态网页，所以选择“是，我想使用服务器技术” 。此时，下方会出现一个下拉菜单，询问要用哪种服务器技术，这里选择ASP VBScript选项。单击下一步，弹出对话框，如图3-3所示 。图3-3由于我们已经架设了服务器，所以这里选择“在本地进行编辑和测试(这台是我的服务器)”选项。在下面的文本框中填写网页源文件的存放位置。放在服务器目录下“C:AspWebServer单机游戏网” 单击下一步。这里问用什么URL来访问网页根目录，我们取其默认值“ht

28、tp:/localhost/”直接单击下一步。问是否要用远程服务器，如图3-4所示。由于没有远程服务器，这里选择“否” 。单击下一步，给出单机游戏网页的配置信息。如图3-5所示。若不正确，则单击上一步进行修改，若正确，则单击“完成” 。 图3-4图3-5由于没有远程服务器，这里我们选择“否” 。单击下一步，给出单机游戏网页的配置信息。如图3-5所示。若不正确，则单击上一步进行修改，若正确，则单击“完成” 。这样，站点就建立好了。3.3 网页页面的制作 用Dreamweaver8打开布局文件，切换到标准模式下，效果图如图3-9所示。 3-91制作导航条。将光标移动到导航条区域，在菜单栏里点击“插

29、入” 在弹出的快捷菜单里单“图像” ，打开事先做好的导航条图像(具体是怎么制作的，这里就不细讲了)，如图3-10所示。 这样导航条就做好了。2制作菜单栏。将光标移动至菜单栏区域，在属性区域内修改其背景，打开事先做好的菜单栏图像，如图3-11所示。 图3-10图3-11在菜单栏里依次输入首页，游戏截图，游戏视频，游戏新闻，制作小组，留言板。修改其属性，大小为12，文本颜色为黑色，并分别添加链接。如图3-12所示。图3-12这样，菜单栏就做好了。3制作侧导航栏。用鼠标将侧导航栏区域内的8个单元全部括住，在属性面板中修改其背景，打开事先做好的背景图片，如图3-13所示。图3-13图3-14在这8个方

30、框中分别写入游戏分类，角色扮演，即使战略，动作冒险，赛车竞速，体育竞技，格斗对战，休闲益智。修改字体属性，大小为12，粗体，黑色。单元格属性，水平设为居中对齐，垂直设为居中。分别为其添加链接。用鼠标将侧导航栏余下的空白部分全部括住。修改其背景。如图3-14所示。这样，侧导航栏就做好了。4制作正文部分在常规模式下，在正文部分正中顶部输入“游戏视频欣赏” ，修改其属性为:大小36，蓝色。单元格属性为:水平为居中对齐，垂直为居中。依次在下面的五个单元格里输入文本，并添加链接。做好后如图3-15所示。图 3-15这样，正文部分就做好了。5制作页脚将光标移至页脚区域，修改其背景。修改单元格属性，水平为居中对齐，垂直为据中。输入“2009”字样，大小为14。如图3-16所示。图3-16 这样，页脚就做好了。至此，游戏视频页面就制作完成了。第四章 网页动态部分的制作4.1 动态小程序1.来访者计数器文件为count.asp 程序如下：您是第位访客!2.显示客户端IP程序文件为ip.asp 程序如下：您的IP为: