当前位置：文档之家› 计算机网站设计毕业论文

计算机网站设计毕业论文

河南经贸职业学院

毕业论文

网页设计与制作

论文作者：______王聪______________

专业：______计算机多媒体技术_________

学号：______130603801237_________

班级：______13多媒体____________

指导教师:_______王艳霞_________________

答辩委员会主席____________ 评阅人______________ 论文答辩日期______________

独创性声明

本人声明所呈交的毕业论文是我个人在导师指导下进行的研究工作及取得的成果。尽我所知，除文中已经标明引用的内容外，本论文不包含任何其他个人或集体已经发表或撰写过的研究成果。对本文的研究做出贡献的个人和集体，均已在文中以明确方式标明。本人完全意识到本声明的法律结果由本人承担。

论文作者签名：

日期：年月日

毕业论文版权使用授权书

本毕业论文作者完全了解学校有关保留、使用毕业论文的规定，即：学校有权保留并向有关部门或机构送交论文的复印件和电子版，允许论文被查阅和借阅。本人授权河南经贸职业学院要以将本论文的全部或部分内容编入有关数据库进行检索，可以采用影印、缩印或扫描等复制手段保存和汇编本论文。

保密□，在________年解密后适用本授权书.

本论文属于

不保密□。

（请在以上方框内打“√”）

毕业论文作者签名：指导教师签名：

日期：年月日日期：年月日

摘要

随着网络技术的迅猛发展, 当代企业纷纷建立自己的网站,借助于互联网扩大自己的影响、推广自己的产品,同时通过互联网快速的信息传递加速自身的发展。因此我选择将公司网页的设计与制作作为我的项目。

本论文所研究的是如何建设一个符合大众化要求的企业网站及前段版面设计的过程，前端的开发中，在页面的布局时，HTML将元素进行定义，div+css对展示的元素进行定位，再通过JavaScript 实现相应的效果和交互。虽然表面看起来这些很简单，但这里面需要掌握的东西绝对不会少。在进行开发前，需要对这些概念弄清楚，弄明白，这样在开发的过程中才会得心应手

通过对企业需求的了解和对其他企业网站的参考，最终成功完成了一个虚拟的企业网站。通过这次建站的过程不仅让我对前段div+css有了更深的了解，更让我熟练的运用了Photoshop这个软件，不过还有很大的提升空间，我会继续努力。

关键词：网站设计，HTML，div+css，dreamweaver

摘要........................................................................................................... III 目录............................................................................................................ I V 第1章绪论 ............................................................................................ V

1.1 概述 ................................................................................................ V 第2章企业网站开发相关技术及工具 (7)

2.1 Dreamweaver简介 (7)

2.2 HTML语言简介 (8)

2.3 div+css简介 (9)

2.4 Photoshop简介 (10)

第3章网站整体设计 (12)

3.1需求分析 (12)

3.2网站功能结构图 (12)

3.3前台功能模块设计 (13)

第4章网站各项功能的实现及效果分析 (15)

4.1网站功能的实现 .......................................................................... XV

4.2前后台效果分析 ..................................................................... X XXII 第五章总结 (36)

参考文献 (37)

致谢 (37)

第1章绪论

1.1 概述

现在网络的发展已呈现商业化、全民化、全球化的趋势。目前，几乎世界上所有的公司都在利用网络传递商业信息，进行商业活动，从宣传企业、发布广告、招聘雇员、传递商业档乃至拓展市场、网上销售等，无所不能。如今网络已成为企业进行竞争的战略手段。企业经营的多元化拓展，企业规模的进一步扩大，对于企业的管理、业务扩展、企业品牌形象等提供了更高的要求。在以资讯技术为支撑的新经济条件下，越来越多的企业利用起网络这个有效的工具。网站早已由论证阶段进入了实质阶段，尤其为企业提供一个展示自己的舞台、为消费者创造一个了解企业的捷径。公司可以通过建立商业平台，实行全天候销售服务，借助网络推广企业的形象、宣传企业的产品、发布公司新闻，同时通过信息反馈使公司更加了解顾客的心理和需求，网站虚拟公司与实体公司的经营运作有机的结合，将会有利于公司产品销售管道的拓展，并节省大量的广告宣传和经营运营成本，更好地把握商机。随着全球信息网络的发展，Internet在世界上已不仅仅是一种技术，更重要的是它已成为一种新的经营模式。

在新经济条件下，商业规则已经发生了一些改变，电子商务对企业的基本构架在速度和效率上提出了更高的要求。电子商务的环境和竞争状况变化如此之快，网上商品交易系统及售后服务系统，该系统提高了社会资源利用率，同时也为个人商品交易提供了方面，所以，企业建立网站的意义如下:

一、拥有企业自己的域名，建立企业自己的网站，树立企业在科技信息时代的完美形象。作为第四媒体的互联网，其特点就是可以跨越时空，正常情况下，网站无时无刻不在工作通过企业的网站，用户可以跨越时空了解企业，利用多媒体技术，企业可以向用户展示产品、技术、经营理念、企业文化、企业形象，树立现代企业形象，增值企业无形资产。

二、宣传企业，创造销售机会据调查，有超过30%的人是通过上网查询企业的电话和地址的，这一比例和通过114查询的比例相接近，可见企业网站已成为许多人首次接触企业、了解相关信息的选择。

三、加强客户沟通宣传企业产品企业可以通过网站建立与客户沟通的便捷渠道，全面展示企业的所有产品。网络科技足以令您的产品与品牌形象更加立体地呈现在用户面前，就算企业仅仅把网站当成电子宣传册来使用，也较传统的宣传模式更加的多姿多彩、更加地易于发布与传播、更加的经济与环保。 '

四、丰富营销手段，扩大产品销售渠道企业网站可以满足一部分客户网上查询与采购的需要，抓住网络商机。企业通过网站可以开展电子营销。首先，电子营销作为传统营销的补充；其次，电子营销可以拓展新的空间，增加销售渠道，接触更大的消费群体，获得更多的新顾客，扩大市场；再次，电子营销可以减少环节，减少人员，节约费用，降低成本，有利于提高营销效率。

五、有利于了解顾客的意见，掌握顾客的需求在不干扰顾客正常工作和生活的条件下，企业通过网站上的调查表、留言薄、定制服务以及E-MAIL可以倾听顾客的意见，了解顾客的心声，加强企业与顾客间的联系建立良好的顾客关系。

六、有利于改善服务，提高企业服务质量利用网站，通过电子沟通方式，企业开展的在线服务是传统的沟通方式（如，邮件、电话、传真等）所无比拟的，在线服务能够更加及时准确地掌握用户的需求，通过网站的交互式服务使得被动提供和主动获得统一起来，从而实现售前、售中、售后的全过程和全方位的服务。

我们所处的时代是高度信息化的互联网时代，互联网正在渗透到我们生活中的方方面面，并且在以十倍甚至百倍的速度提高着我们的工作效率。互联网的发展带来了一场规模空前的行业革命，他不仅改变了许多传统行业的运作模式，同时也产生了许多新的行业，并且可以重新排定行业内各个企业的地位。可以说互联网时代是一个资源和财富再分配的时代。互联网络真正的内涵在于其内容的丰富性，几乎无所不包。对于一个企业来说，其具有网络沟通能力的标志是公司拥有自己的独立网站

第2章企业网站开发相关技术及工具

2.1 Dreamweaver简介

Adobe Dreamweaver，简称“DW”，中文名称 "梦想编织者"，是美国MACROMEDIA 公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，DW是第一套针对专

业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Macromedia公司成立于1992年，2005年被Adobe公司收购。Adobe Dreamweaver使用所见即所得的接口，亦有HTML（标准通用标记语言下的一个应用）编辑的功能。它有Mac和Windows系统的版本。Macromedia被Adobe收购后，Adobe也开始计划开发Linux版本的Dreamweaver了。 Dreamweaver自MX版本开始，使用了Opera的排版引擎"Presto" 作为网页预览

Dreamweaver是一个功能强大的网页设计工具，有着方便实用的工具和所见即所得的排版功能，见面十分友好，使用方便。在不需要掌握HTML语言的情况下，即可利用其强大的功能开发出专业的网页。Dreamweaver也是一个方便的编程工具，可以方便地编写ASP、PHP、JSP代码，软件的自动提示填充功能和代码染色功能可以有效地帮助用户编写和调试各种代码。它集网页设计、网站开发和站点管理功能于一身，具有可视化、支持多平台和跨浏览器的特性，是目前网站设计、开发、制作的首选工具。借助于Dreamweaver可以快速方便地开发出各种动态或静态网站。。

发展历程：

Dreamweaver1.0发布于1997年12月，由之前的Macromedia公司发布。

Dreamweaver2.0，发布于1998年12月。

Dreamweaver3.0，发布于1999年12月。

Dreamweaver3.0不足3M，是个经典版本。无论是多破的机器，速度特快，功能够用。此时的Dreamweaver已经是一个集网页创作和站点管理两大利器于一身的超重量级的创作工具。

功能介绍：

借助共享型用户界面设计,在AdobeCreativeSuite4的不同组件之间更快、更明智地工作。使用工作区切换器可以从一个工作环境快速切换到下一个环境。

2.2 HTML语言简介

HTML（Hyper Text Markup Language 超文本置标语言）是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web上的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage的连结信息。

HTML文档（即Homepage的源文件）是一个放置了标记的ASCII文本文件，通常它带有.html或.htm的文件扩展名。生成一个HTML文档主要有以下三种途径：

1、手工直接编写（例如用你所喜爱的ASCII文本编辑器或其它HTML的编辑工具）。

2、通过某些格式转换工具将现有的其它格式文档（如WORD文档）转换成HTML文档。

3、由Web服务器（或称HTTP 服务器）一方实时动态地生成。

HTML语言是通过利用各种标记（tags）来标识文档的结构以及标识超链（Hyperlink）的信息。虽然HTML语言描述了文档的结构格式，但并不能精确地定义文档信息必须如何显示和排列，而只是建议Web浏览器（如Mosiac，Netscape 等）应该如何显示和排列这些信息，最终在用户面前的显示结果取决于Web浏览器本身的显示风格及其对标记的解释能力。这就是为什么同一文档在不同的浏览器中展示的效果会不一样。

多优秀的Web浏览器（如Netscape等）都能解释HTML3.0中的部分新标记，因此在本章中介绍的一些HTML3.0新标记均已被多数浏览器所接受。

2.3 div+css简介

HTML文档（即Homepage的源文件）是一个放置了标记的ASCII文本文件，通常它带有.html或.htm的文件扩展名。生成一个HTML文档主要有以下三种途径：

1、手工直接编写（例如用你所喜爱的ASCII文本编辑器或其它HTML的编辑工具）。

2、通过某些格式转换工具将现有的其它格式文档（如WORD文档）转换成HTML文档。

3、由Web服务器（或称HTTP 服务器）一方实时动态地生成。

目前HTML语言的版本是2.0，它是基于SGML（Standard Generalized Markup Language）标准广义置标语言，是一套用来描述数字化文档的结构并管理其内容的复杂的规范）中的一个子集演变而来的。虽然下一版本的标准HTML3.0（也称为HTML+）正在制订之中，但其中某些部分的实验性标准草案已被广泛采用，大多优秀的Web浏览器（如Netscape等）都能解释HTML3.0中的部分新标记，因此在本章中介绍的一些HTML3.0新标记均已被多数浏览器所接受。

2.4 Photoshop简介

Adobe Photoshop是一个由Adobe Systems出品的专业图像处理软件。与该公司的其它软件一样，Photoshop适用于Mac OS及Microsoft Windows两个操作系统，同时公司也发布了Unix操作系统上的版本。Google也正在透过Wine 资助Linux版Photoshop的研究。

Photoshop最初是由托马斯·诺尔（Thomas Knoll）和约翰·诺尔（John Knoll）这对兄弟于1987年制作的，但直到1990年后，这个软件才由Adobe公司首次发布。Photoshop最初用于处理那些在当时价格不菲的扫描仪扫描下来的图像。

特性：

Photoshop主要处理以像素（Pixels）所构成的数字图像。利用其广泛的编修与绘图工具，可以更有效的进行图片编辑工作。独特的历史纪录浮动视窗和可编辑的图层效果功能使用户可以方便的测试效果。对各种滤镜的支持更令使用者能够轻松创造出各种奇幻的效果。目前，Photoshop也正在被更多的用于处理网络图片。Photoshop的几个后续版本中捆绑了一个独立的软件ImageReady，加强了Photoshop对网络图像（主要是GIF图像文件）的支持功能。而在CS3中ImageReady被Fireworks所代替。Photoshop CS3允许用户更容易升级到最新的硬件平台，支持苹果的Intel为内核的系统。

Photoshop被人们认为是最好的图像处理软件，但与著名的3D Studio Max 一样，昂贵的价格使其难以普及。这也令Jasc Software公司的Paint Shop Pro，GIMP小组的GIMP和友立信息的Ulead PhotoImpact占领了相当的市场份额。为了争夺市场，Adobe发布了一个Photoshop的简易版本Photoshop Elements。虽然它对很多功能都作了限定，但继承了原软件的多数优秀功能，价格比Photoshop便宜不少。

Photoshop CS是一款图形、图像编辑软件，在网页设计领域被广泛得应用。以下是其10大最新功能：

1、改进的文件浏览器

使用功能强大文件浏览器的可以快速预览、标注和排序图片；搜索或编辑图像的数据元或关键词；并且可以自动批量共享文件。

2、匹配颜色命令

可以迅速从一张图片的颜色校正另外一张图像的颜色。

3、直方图调色板

随时根据对图像的调整更新直方图调色板(Histogram Palette)。

4、阴影/加亮区修正

使用“阴影/加亮区修正(hadow/Highlight correction)”可以快速调整照片中曝光过渡或欠缺的区域。

5、沿路径放置文本

可以像在Illustrator中一样把文本沿着路径放置，并且你还可以在Illustrator直接编辑文本。

6、支持数码相机的raw模式

支持多款数码相机得raw模式，让用户可以得到更真实的图像输入。

7、全面支持16位图像

可以在主要功能、层、比刷、文字、图形等中精确的编辑、润饰16位的图像。

8、Layer Comps

可以在一个文件中保存不同层的合并效果，以便对各种效果进行快速察看。

9、输入Flash文件

使用ImageReady可以创建flash矢量文件。

10、自定义快捷键

用户可以按照自己的习惯定义Photoshop的快捷键。

第3章网站整体设计

3.1需求分析

如今，互连网对企业来说已经不再是新鲜的事物了，大多数的企业都已经建立了自己的网站。随着互连网的快速发展，网路已成为人们生活的一部分。电子商务、网路行销已不在只是被炒做的概念，人们对其的认识也在深入。不仅仅是大企业需要网站来开展电子商务，中小企业一样也迫切需要自己的企业网站用以实现宣传和联系客户等许多传统媒介无法完成的目标

3.2网站功能结构图

根据业务流程，需要将网站划分为前台、后台和数据库。前台中，客户在登录网站主页后即可链接查看到产品信息等，还可以给企业留言。数据库将要作为网站后台重要的组成部分，管理员的主要操作几乎全部围绕数据库，最后将更新的数据要显示给前台网站总体结构图如图

图3-1 网站整体结构图

由于中小型企业网站的目标重点在于展示企业的信息。因此系统的功能模块相对单一，就是提供信息的显示。前台功能主要包括首页、产品展示、新闻中心、技术讨论、客户留言这五个主要模块；后台包括：系统配置、公司简介、产品管理、新闻管理、留言管理这五个主要模块。各主要模块包括几个子模块，如下：

(1)新闻公告：标题、公告时间、公告内容。

(2)产品展示：产品名称、产品介绍、产品特点、图像档、发布时间。

(3)客户留言：姓名、性别、电话、通讯地址Email、主题、留言内容。

3.3前台功能模块设计

容图3-2 前台功能结构图

网站前台是面向网站访问用户的，通俗的说也就是给访问网站的人看的内和页面，网站前台访问可以浏览公开发布的内容，如产品信息、公告信息、企业介绍、企业联系方式、提交留言等操作，管理可以通过密码进到后台的网页，来发布新闻、查看留言等操作。

主要功能模块介绍

（1）首页功能模块