网页设计毕业论文

论文题目游郑州资讯网站的分析与设计

姓名

学院

专业

指导教师

备注

年月日

游郑州资讯网站的分析与设计

作者姓名:

指导教师:

单位名称:

专业名称:

年月

Analysis and Design about Traveling around

Zhengzhou

by

Supervisor:

毕业设计(论文)任务书

游郑州资讯网站的分析与设计

摘要

中原地区的饮食文化博大精深,风景名胜更是数不胜数。在河南省境内,围绕省会郑州的旅游胜地不胜枚举。西有古今文明的洛阳古城,东有盛名天下的开封小吃,南有人尽皆知的登封少林,北面更是有伟大的黄河翻滚不息。或许是这些地方的光芒太夺目,导致人们忽略了中原地区的另一颗明珠---郑州。

其实郑州也是一座真正的古城,商朝遗址,故里皇帝的起源均源于此地,其小吃文化更是源远流长,但是一切却鲜为人知。究其原因,我认为是没有一个很好的媒介来传播这些文化。在信息技术飞速发展的今天,人们获取信息的方式更多是来源于互联网。所以我选择通过建立一个郑州资讯网站把这一切呈现给大家。

本文以郑州的小吃与游玩为主题,以互联网为媒介,建立一个郑州资讯网站。特别针对来郑州游玩的朋友,可以通过这种方式更加快速的了解到郑州的人文风情等诸多信息。本文从该网站最初的信息采集到后期开发的整个过程加以整理,编辑成文,同时采用图文并茂的形式,不仅增加了文章的可读性,同时又可以较为直观的把网站呈现在人们眼前。

关键词:网页设计、Html、JSP、JS、Dreamweaver

Analysis and Design about Traveling around

Zhengzhou

Abstract

Zhongyuan area of the profound culture of food scenic is numerous. Territory around in Henan province, the provincial capital, Zhengzhou tourist resort to enumerate. West has ancient and modern civilization of Luoyang city, east to the fame of Kaifeng snacks, south someone everybody knows everything, the north is the Shoaling Dengfeng have great Yellow River back not stopping. Maybe these places light too dazing, leading people to ignore central plains of another pearl - Zhengzhou.

Actually Zhengzhou also is really ancient city, hometown of the Shang dynasty ruins, the origin of the emperor, the snacks are from here is of long standing, but cultural all, but little-known. Investigate its reason, I think there is no a good medium to spread the culture. In the rapid development of information technology today, the way people get information from the Internet is more. So I chose by establishing a Zhengzhou information site put it all presented to people from all walks of life.

This article take Zhengzhou snacks and play as the theme, the Internet as a medium, establish a Zhengzhou information website. Specifically to Zhengzhou play friend, can pass this way more rapid understanding to Zhengzhou humanistic amorous feelings, and many other information. And from the change of information collection site initially to post the development entire process to arrange, edit, and adopts illustrated written forms, not only increases the readability of the article, at the same time, more intuitive to present in our eyes.

Key words:Web design, Html, JSP, JS, Dreamweaver

目录

任务书............................................................................................................................................... I 摘要............................................................................................................................................. II ABSTRACT .................................................................................................................................... III 第一章绪论 (1)

1.1郑州市概况 (1)

1.2网页制作的背景和意义 (1)

第二章网页需求分析 (2)

2.1可行性分析 (2)

2.1.1网站主题的可行性 (2)

2.1.2网站页面设计的可行性 (2)

2.2网站需求分析 (2)

2.2.1建站目的 (2)

2.2.2技术需求 (3)

第三章网站开发环境 (4)

3.1网页运行环境的开发 (4)

3.2网页设计工具 (4)

3.2.1图像工具——PHOTOSHOP (4)

3.2.2页面工具——DREAMWEAVER (4)

3.3网页开发语言 (5)

3.3.1静态页与布局——HTML、DIV+CSS (5)

3.3.2动态效果实现——JS (5)

第四章网站的总体规划 (6)

4.1制作网页的一般步骤 (6)

4.2网页包括的元素 (6)

4.3网页的层次结构 (9)

4.4 网站页面的相关展示及代码 (8)

第五章网页测试 (19)

第六章结论 (20)

参考文献 (21)

致谢 (22)

第一章绪论

1.1郑州市概况

郑州是一个很古老的城市,它早在3500年前,就是商王朝的都邑。但是,由于其地处黄河中游,历史上常受到黄河水灾的威胁,所以致使郑州经济发展缓慢。一直到十七世纪,城墙也只有4.5公里长。十九世纪初,由于京广铁路和陇海铁路的建成,使郑州成为中国东西、南北大动脉的交通枢纽,它的经济地位才开始逐步上升。

郑州的风味小吃历史极其悠久,并且种类尤其繁多,有包子、烩面、烧鸡等小吃,其中郑州葛记焖饼、开封第一楼包子、郑州合记烩面、道口烧鸡、郑州老蔡记馄饨等早已被认定为"中华老子号",这些不仅仅是驰名的商标,更是一段文化的流传,历史的见证。

郑州文化灿烂,历史悠久,旅游资源丰富。裴李岗文化遗址、轩辕黄帝故里、大河村遗址、商城遗址等记载了她8000多年的文明史,以大河村遗址、黄河游览区为主的黄河有中国特色文化旅游群和以嵩山少林寺、国家森林公园为主的嵩山风景名胜区给郑州增添了无穷的魅力。

1.2网页制作的背景和意义

Internet是目前世界上最大的计算机互联网络,它遍布全球,将世界各地各种规模的网络连接成一个整体。作为Internet上一种先进的,易于被人们所接受的信息检索手段,World Wide Web(简称WWW)发展十分迅速,成为目前世界上最大的信息资源宝库。

所以我选择通过建立一个游郑州资讯网站的形式展示出中原文化的博大精深。通过网页人们可以快速的对郑州的人文风情有一个概念性的认识。不同的人,其网站上的展示方式或手法各有不同,千变万化。在网站策划中,采取动感的风格,简洁的页面,使其内容更加有条理性,方便人们浏览之后过目不忘,是我设计的重要内容。

第二章网页需求分析

2.1可行性分析

2.1.1网站主题的可行性

一般来说一个网站内容主题的选择,要做到小而精,主题定位要小,内容要精。所以本网站,仅仅针对郑州市特色小吃和游玩地方进行介绍。并没有去试图制作一个包罗万象的站点,这往往会失去网站的特色,也会带来高强度的劳动,给网站的及时更新带来困难。并且本人在郑州土生土长近20年,深知郑州的各种百年老店以及民间小吃和娱乐项目。

2.1.2网站页面设计的可行性

由于越来越多的人们开始建立自己的网站,网站除了具有传播信息的功能外,还往往代表个人的形象。虽然HTML语言提供了对常用Windows标准控件的支持,但是,由于Windows标准控件的形状和颜色十分单一,网页的视觉效果可能会很差。

因此,本文并没有单纯的采用HTML来制作网页。而是使用了DIV+CSS的方式来创建表格布局,并且在其中插入了XML已经JS等动态效果,使页面看起来更有动感。这些通过Dreamweaver与PS等软件的熟练运用都可以真正实现到网页中去。

2.2网站需求分析

2.2.1建站目的

Internet是目前世界上最大的计算机互联网络,它遍布全球,将世界各地各种规模的网络连接成一个整体。作为Internet上一种先进的,易于被人们所接受的信息检索手段,World Wide Web(简称WWW)发展十分迅速,成为目前世界上最大的信息资源宝库。

通过建立一个游郑州网站的站点,可以迅速融入到互联网中,和世界各地连成一个整体。拥有了这种传播媒介就可以方便在郑州生活的以及来郑州游玩的人们的行程安排。

2.2.2技术需求

网页的版面设计需要用Dreamweaver来实现。需要精通HTML,DIV+CSS等网页编程语言。

网站LOGO,需要用PS来设计。需要有一定的审美能力、设计能力,使其网站的主题突出鲜明。

后台管理,需要使用JSP等动态页面来实现,但由于自身水平有限,并且网站前期发布的小吃游玩等地方多是十年,甚至百年被老郑州人们所熟知的地方,并不需要过多的删改,可以先从前台进行删改。

发布站点,通过IIS,APACHE等来发布。需要对互联网技术有一定的理解,并熟悉发布流程。

第三章网站开发环境

3.1网页运行环境的开发

本系统可以被运行在IIS服务下。使用 Microsoft Internet Information Server (IIS),运行 Windows Server的计算机便成为容量和功能强大的Web服务器。除了这种方法,我们还可以通过配置网络环境来发布站点,可以在Linux 或者Unix主机下,配置Apache环境进行发布,具体建立站点的过程本文会在第五章提到。

3.2网页设计工具

3.2.1图像工具——Photoshop

由Adobe公司开发的,专门处理图形图像的设计软件。DTP和图像软件的结合,使设计师可在电脑上直接完成文字的排版、录入、图像处理和分色制板的全过程,开创了“电脑平面设计”的时代。 Photoshop软件的专长在于图形的处理,并不是图形创作。这两个概念有必要区分一下。图像处理是对以有的图像进行加工编辑处理及运用一些特殊效果,它的重点在于对图像的处理加工;图形创作软件是按照自己的构思创意,并且来设计图形,这类软件主要有Adobe公司的另一个著名软件Illustrator和Macromedia公司的Freehand。Photoshop系列中使用最广泛的有Photoshop5.0版本和Photoshop7.0。

3.2.2页面工具——Dreamweaver

Macromedia 公司的产品,是一款“所见即所得”的网页编辑软件。与FrontPage 不同,它对于初学者来说可能会感到不适应,因为Dreamweaver采用的是Mac机浮动面版的设计风格。但当你习惯了其操作方式后,会发现Dreamweaver拥有FrontPage所无法比拟的直观性与高效性。

Dreamweaver 对于HTML的支持非常好,可以轻而易举地做出很多眩目的页面效果。并且插件式的程序设计使得其功能可以无限的延伸。Dreamweaver 与Firework、Flash并称为网页制作的三剑客,由于是同一公司的产品,因而在功能上有着一个非常紧密的结合。它最新推出的Dreamweaver UltraDev更支持Asp

与JSP语言。因此,Dreamweaver是高级网页制作的首选无庸置疑。它常见的版本有Dreamweaver4、Dreamweaver5、Dreamweaver MX、Dreamweaver8.x、Dreamweaver CS.

3.3网页开发语言

3.3.1静态页与布局——HTML、Div+CSS

HTML语言是目前网络上应用最为广泛的网页语言,即是构成网页文档的主要语言,也是超文本链接标示语言或超文本标记语言。HTML文本是一种描述性文本,是由HTML命令组成的。HTML命令可以说明图形、表格、声音、动画、文字、链接等。HTML语言的结构包括头部(Head)、主体(Body)两大部分,其中头部描述浏览器所需的信息,而主体则包含所要说明的具体内容。

DIV+CSS是标准网页(或称它为“WEB标准”)中的常用术语之一,Div+CSS 是一种新的网页的布局方法,这一种网页布局方法和传统的HTML网页设计语言中的表格(table)定位方式并不一样,真正地达到了w3c内容与表现相分离。HTML 语言在HTML4.01之后,不再发布新版本,因为HTML语言正变得越来越复杂化、专用化。XHTML语言可以将HTML语言标准化,用XHTML语言重写后的HTML页面可以应用于更多的XML技术,使得网页更加容易扩展,更加适合自动数据交换,并更加规整。在XHTML网站设计标准中,早就不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。

3.3.2动态效果实现——JS

JS就是JavaScript,是一种计算机脚本语言,主要在web浏览器(客户端)解释执行,由网景公司研发。

通过 JavaScript 可以做到回应使用者的需求事件而不用任何的网路。来回传输资料,所以当一位使用者输入一项资料时,它不用经过传给服务器端处理,再传回来的过程,而直接可以被客户端的应用程式所处理。

第四章网站的总体规划

4.1制作网页的一般步骤

建立网站要先明确建立网站的需求和目标。例如本文的建站目的就是让人们通过本文的网站来了解郑州,面向群体就是来郑州游玩或在郑州生活的人。

其次,网页设计总体方案主题要鲜明。试想,如果你把自己的照片和内容都堆在一起,别人将无法明白你想干什么,说不定,连你自己都糊涂了。一般来说,建立好网站的关键是要对网页内容建立条理清晰、层次分明的结构图。脑子里有了这样的一张结构图,就会对网页内容和结构很清楚。

而后,要确定你的网页所具有的特色和外观。目的是为了让用户被你的网页所吸引。如果只是把很多漂亮的页面堆在一起,而不管内容,那将会吸引不了人。所以就要让你的网页不仅漂亮,而且更重要的是实用。把自己的图片和内容有机的结合在一起,这也正是本文的网页特色。

然后,就可以开始制作页面了。制作时候要条理清晰,合理结合自身的技术。

最后,等网页做好了,就可以发布站点并访问。

4.2网页包括的元素

无论是经常上网冲浪的老手,还是初次领略Internet风光的新手,在初次页面设计之前,都必须先认识一下构成网页的基本元素。只有这样,才能真正的在设计工作中得心应手,还根据需要合理的组织和安排网页上的内容,从而达到期望的目标。

网页设计的目的主要是发布信息。因此,文本和图像作为信息载体也就成了网页的基本组成部分,其Web的核心超级链接,使它将互联网网中无数的网页链接在了一起,如果没有它,Web就无从谈起。除此之外,还有动画、表格、音乐和交互表单等信息的组织、表现,以及交互元素在网页中也具有举足轻重的地位,但是在此我们就不做过多阐述。

(1)文本

文本一直是人类最重要的交流工具和信息载体,网页中的信息大多也以文本为主,与图像相比,文字虽然不如图像那样能够很快的引起浏览者的注意,但却

能够准确的表达消息的含义和内容,同时为了克服文字固有的缺点,人们就赋予了网页中文本更多的属性,例如字号、字形、底纹、颜色和边框等,通过不同格式的区别,突出显示重要的内容,此外,用户还可以在网页中设计各种样式的文字列表来清晰表达一系列项目,这些功能都给网页中的文本赋予了新的生命力。

(2)图像

图像在网页中具有展示作品、提供信息、装饰网页、表达个人风格和情调的作用。用户可以在网页中使用GIF、JPEG、PNG 3种格式的图像文件,其中使用最广泛的是JPEG和GIF两种格式。

(3)超级链接

超级链接技术可以说是互联网流行起来的最主要的因素,它是从一个起始页面指向另一个目的端的链接,例如指向另一个网页或相同网页上的不同位置。这个目的端通常是另一个网页,但也可以是一个电子邮件地址,一幅图片,一个文件,一个程序或本网页中的其他位置,其载体通常是图片、文本或图片中的区域,也可以是一些不可见的脚本程序。

当浏览者点击超级链接时,其目的端将显示在Web浏览器上,并根据目的端的类型以不同的方式链接。例如,当指向一个网页的超级链接,则该网页将显示在Web浏览器上;但是,如果指向一个AVI文件的超级链接被单击后,该文件将在媒体播放软件中打开。

4.3网页层次结构

本网站由首页、小吃、游玩和关于我们,四个板块组成。具体页面层次结构如下图:

图 4.1 页面的层次结构

4.4网站页面的相关展示及代码

(1)主页部分

本网页主要由HTML 静态页面组成,采用DIV 标签的布局方式。

郑州的人文风情,城市概况,旅游业、小吃业的起源,对网站有一个总体的介绍。

介绍主要的河南小吃,各种有名的店铺、种类、地址、分类、联系方式。

介绍比较出名的游玩圣地,以及他们的图片简介,联系方式等。

我们的简介,我们的理念,我们的宗旨,我们的目标。

图 4.2 网站首页

导航栏鼠标指向会变色:

图 4.3 网站导航栏

代码为:

#background #main #top #dh a {

text-decoration: none;

color: #ccba90;

}

#background #main #top #dh a:hover {

color: #3D3418;

}

网站的LOGO:

图 4.4 网站LOGO 首页图片会翻滚:

图 4.5 翻滚页面

续图 4.5 翻滚页面

续图 4.5 翻滚页面

动态翻滚JS代码:

(2)小吃、游玩模块部分

次级页面,主要介绍店面:

图4.6 游玩页面

次级页面布局CSS代码: