网页设计与制作毕业论文.doc 35页

'河南经贸职业学院毕业论文网页设计与制作毕业论文目录摘要III目录IV第1章绪论V1.1概述6第2章企业网站开发相关技术及工具72.1Dreamweaver简介72.2HTML语言简介82.3div+css简介92.4Photoshop简介10第3章网站整体设计123.1需求分析123.2网站功能结构图123.3前台功能模块设计13第4章网站各项功能的实现及效果分析154.1网站功能的实现164.2前后台效果分析16第五章总结36参考文献37XXXV 河南经贸职业学院毕业论文致谢37第1章绪论1.1概述现在网络的发展已呈现商业化、全民化、全球化的趋势。目前，几乎世界上所有的公司都在利用网络传递商业信息，进行商业活动，从宣传企业、发布广告、招聘雇员、传递商业档乃至拓展市场、网上销售等，无所不能。如今网络已成为企业进行竞争的战略手段。企业经营的多元化拓展，企业规模的进一步扩大，对于企业的管理、业务扩展、企业品牌形象等提供了更高的要求。在以资讯技术为支撑的新经济条件下，越来越多的企业利用起网络这个有效的工具。网站早已由论证阶段进入了实质阶段，尤其为企业提供一个展示自己的舞台、为消费者创造一个了解企业的捷径。公司可以通过建立商业平台，实行全天候销售服务，借助网络推广企业的形象、宣传企业的产品、发布公司新闻，同时通过信息反馈使公司更加了解顾客的心理和需求，网站虚拟公司与实体公司的经营运作有机的结合，将会有利于公司产品销售管道的拓展，并节省大量的广告宣传和经营运营成本，更好地把握商机。随着全球信息网络的发展，Internet在世界上已不仅仅是一种技术，更重要的是它已成为一种新的经营模式。在新经济条件下，商业规则已经发生了一些改变，电子商务对企业的基本构架在速度和效率上提出了更高的要求。电子商务的环境和竞争状况变化如此之快，网上商品交易系统及售后服务系统，该系统提高了社会资源利用率，同时也为个人商品交易提供了方面，所以，企业建立网站的意义如下:一、拥有企业自己的域名，建立企业自己的网站，树立企业在科技信息时代的完美形象。作为第四媒体的互联网，其特点就是可以跨越时空，正常情况下，网站无时无刻XXXV 河南经贸职业学院毕业论文不在工作通过企业的网站，用户可以跨越时空了解企业，利用多媒体技术，企业可以向用户展示产品、技术、经营理念、企业文化、企业形象，树立现代企业形象，增值企业无形资产。二、宣传企业，创造销售机会据调查，有超过30%的人是通过上网查询企业的电话和地址的，这一比例和通过114查询的比例相接近，可见企业网站已成为许多人首次接触企业、了解相关信息的选择。三、加强客户沟通宣传企业产品企业可以通过网站建立与客户沟通的便捷渠道，全面展示企业的所有产品。网络科技足以令您的产品与品牌形象更加立体地呈现在用户面前，就算企业仅仅把网站当成电子宣传册来使用，也较传统的宣传模式更加的多姿多彩、更加地易于发布与传播、更加的经济与环保。"四、丰富营销手段，扩大产品销售渠道企业网站可以满足一部分客户网上查询与采购的需要，抓住网络商机。企业通过网站可以开展电子营销。首先，电子营销作为传统营销的补充；其次，电子营销可以拓展新的空间，增加销售渠道，接触更大的消费群体，获得更多的新顾客，扩大市场；再次，电子营销可以减少环节，减少人员，节约费用，降低成本，有利于提高营销效率。五、有利于了解顾客的意见，掌握顾客的需求在不干扰顾客正常工作和生活的条件下，企业通过网站上的调查表、留言薄、定制服务以及E-MAIL可以倾听顾客的意见，了解顾客的心声，加强企业与顾客间的联系建立良好的顾客关系。六、有利于改善服务，提高企业服务质量利用网站，通过电子沟通方式，企业开展的在线服务是传统的沟通方式（如，邮件、电话、传真等）所无比拟的，在线服务能够更加及时准确地掌握用户的需求，通过网站的交互式服务使得被动提供和主动获得统一起来，从而实现售前、售中、售后的全过程和全方位的服务。我们所处的时代是高度信息化的互联网时代，互联网正在渗透到我们生活中的方方面面，并且在以十倍甚至百倍的速度提高着我们的工作效率。互联网的发展带来了一场规模空前的行业革命，他不仅改变了许多传统行业的运作模式，同时也产生了许多新的行业，并且可以重新排定行业内各个企业的地位。可以说互联网时代是一个资源和财富再分配的时代。互联网络真正的内涵在于其内容的丰富性，几乎无所不包。对于一个企业来说，其具有网络沟通能力的标志是公司拥有自己的独立网站XXXV 河南经贸职业学院毕业论文第2章企业网站开发相关技术及工具2.1Dreamweaver简介AdobeDreamweaver，简称“DW”，中文名称"梦想编织者"，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，DW是第一套针对专 业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Macromedia公司成立于1992年，2005年被Adobe公司收购。AdobeDreamweaver使用所见即所得的接口，亦有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月。XXXV 河南经贸职业学院毕业论文Dreamweaver3.0不足3M，是个经典版本。无论是多破的机器，速度特快，功能够用。此时的Dreamweaver已经是一个集网页创作和站点管理两大利器于一身的超重量级的创作工具。功能介绍：借助共享型用户界面设计,在AdobeCreativeSuite4的不同组件之间更快、更明智地工作。使用工作区切换器可以从一个工作环境快速切换到下一个环境。2.2HTML语言简介HTML（HyperTextMarkupLanguage超文本置标语言）是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作WorldWideWeb上的信息表示语言，用于描述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浏览器本身的显示风格及其对标记的解释能力。这就是为什么同一文档在不同的浏览器中展示的效果会不一样。XXXV 河南经贸职业学院毕业论文目前HTML语言的版本是2.0，它是基于SGML（StandardGeneralizedMarkupLanguage）标准广义置标语言，是一套用来描述数字化文档的结构并管理其内容的复杂的规范）中的一个子集演变而来的。虽然下一版本的标准HTML3.0（也称为HTML+）正在制订之中，但其中某些部分的实验性标准草案已被广泛采用，大多优秀的Web浏览器（如Netscape等）都能解释HTML3.0中的部分新标记，因此在本章中介绍的一些HTML3.0新标记均已被多数浏览器所接受。2.3div+css简介HTML（HyperTextMarkupLanguage超文本置标语言）是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作WorldWideWeb上的信息表示语言，用于描述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浏览器本身的显示风格及其对标记的解释能力。这就是为什么同一文档在不同的浏览器中展示的效果会不一样。目前HTML语言的版本是2.0，它是基于SGML（StandardGeneralizedMarkupXXXV 河南经贸职业学院毕业论文Language）标准广义置标语言，是一套用来描述数字化文档的结构并管理其内容的复杂的规范）中的一个子集演变而来的。虽然下一版本的标准HTML3.0（也称为HTML+）正在制订之中，但其中某些部分的实验性标准草案已被广泛采用，大多优秀的Web浏览器（如Netscape等）都能解释HTML3.0中的部分新标记，因此在本章中介绍的一些HTML3.0新标记均已被多数浏览器所接受。2.4Photoshop简介AdobePhotoshop是一个由AdobeSystems出品的专业图像处理软件。与该公司的其它软件一样，Photoshop适用于MacOS及MicrosoftWindows两个操作系统，同时公司也发布了Unix操作系统上的版本。Google也正在透过Wine资助Linux版Photoshop的研究。Photoshop最初是由托马斯·诺尔（ThomasKnoll）和约翰·诺尔（JohnKnoll）这对兄弟于1987年制作的，但直到1990年后，这个软件才由Adobe公司首次发布。Photoshop最初用于处理那些在当时价格不菲的扫描仪扫描下来的图像。特性：Photoshop主要处理以像素（Pixels）所构成的数字图像。利用其广泛的编修与绘图工具，可以更有效的进行图片编辑工作。独特的历史纪录浮动视窗和可编辑的图层效果功能使用户可以方便的测试效果。对各种滤镜的支持更令使用者能够轻松创造出各种奇幻的效果。目前，Photoshop也正在被更多的用于处理网络图片。Photoshop的几个后续版本中捆绑了一个独立的软件ImageReady，加强了Photoshop对网络图像（主要是GIF图像文件）的支持功能。而在CS3中ImageReady被Fireworks所代替。PhotoshopCS3允许用户更容易升级到最新的硬件平台，支持苹果的Intel为内核的系统。Photoshop被人们认为是最好的图像处理软件，但与著名的3DStudioMax一样，昂贵的价格使其难以普及。这也令JascSoftware公司的PaintShopPro，GIMP小组的GIMP和友立信息的UleadPhotoImpact占领了相当的市场份额。为了争夺市场，Adobe发布了一个Photoshop的简易版本PhotoshopElements。虽然它对很多功能都作了限定，但继承了原软件的多数优秀功能，价格比Photoshop便宜不少。XXXV 河南经贸职业学院毕业论文PhotoshopCS是一款图形、图像编辑软件，在网页设计领域被广泛得应用。以下是其10大最新功能：1、改进的文件浏览器使用功能强大文件浏览器的可以快速预览、标注和排序图片；搜索或编辑图像的数据元或关键词；并且可以自动批量共享文件。2、匹配颜色命令可以迅速从一张图片的颜色校正另外一张图像的颜色。3、直方图调色板随时根据对图像的调整更新直方图调色板(HistogramPalette)。4、阴影/加亮区修正使用“阴影/加亮区修正(hadow/Highlightcorrection)”可以快速调整照片中曝光过渡或欠缺的区域。5、沿路径放置文本可以像在Illustrator中一样把文本沿着路径放置，并且你还可以在Illustrator直接编辑文本。6、支持数码相机的raw模式支持多款数码相机得raw模式，让用户可以得到更真实的图像输入。7、全面支持16位图像可以在主要功能、层、比刷、文字、图形等中精确的编辑、润饰16位的图像。8、LayerComps可以在一个文件中保存不同层的合并效果，以便对各种效果进行快速察看。9、输入Flash文件使用ImageReady可以创建flash矢量文件。10、自定义快捷键用户可以按照自己的习惯定义Photoshop的快捷键。XXXV 河南经贸职业学院毕业论文第3章网站整体设计3.1需求分析如今，互连网对企业来说已经不再是新鲜的事物了，大多数的企业都已经建立了自己的网站。随着互连网的快速发展，网路已成为人们生活的一部分。电子商务、网路行销已不在只是被炒做的概念，人们对其的认识也在深入。不仅仅是大企业需要网站来开展电子商务，中小企业一样也迫切需要自己的企业网站用以实现宣传和联系客户等许多传统媒介无法完成的目标3.2网站功能结构图根据业务流程，需要将网站划分为前台、后台和数据库。前台中，客户在登录网站主页后即可链接查看到产品信息等，还可以给企业留言。数据库将要作为网站后台重要的组成部分，管理员的主要操作几乎全部围绕数据库，最后将更新的数据要显示给前台网站总体结构图如图XXXV 河南经贸职业学院毕业论文首页联系我们客户留言新闻中心产品展示公司简介户客台前系统设置单页管理产品管理新闻管理理管台后留言管理图3-1网站整体结构图由于中小型企业网站的目标重点在于展示企业的信息。因此系统的功能模块相对单一，就是提供信息的显示。前台功能主要包括首页、产品展示、新闻中心、技术讨论、客户留言这五个主要模块；后台包括：系统配置、公司简介、产品管理、新闻管理、留言管理这五个主要模块。各主要模块包括几个子模块，如下：(1)新闻公告：标题、公告时间、公告内容。(2)产品展示：产品名称、产品介绍、产品特点、图像档、发布时间。(3)客户留言：姓名、性别、电话、通讯地址Email、主题、留言内容。3.3前台功能模块设计XXXV 河南经贸职业学院毕业论文首页公司简介产品展示行业资讯客户留言联系我们新闻中心容图3-2前台功能结构图网站前台是面向网站访问用户的，通俗的说也就是给访问网站的人看的内和页面，网站前台访问可以浏览公开发布的内容，如产品信息、公告信息、企业介绍、企业联系方式、提交留言等操作，管理可以通过密码进到后台的网页，来发布新闻、查看留言等操作。主要功能模块介绍（1）首页功能模块企业简介，主要包括企业背景、发展历史、主要业绩及组织结构等，让访问者对企业的情况有一个概括的了解。（2）产品展示产品展示是指对产品进行详细展示，包括规格，产品的款式颜色等所有产品详细的信息。做到让网站的产品展示能让顾客更直观的去了解网站上所展示的产品，让顾客在看到产品的同时对产品的每一个信息都有一定的了解。（3）新闻模块通过最新的新闻信息，发布企业动态信息，可以让用户了解公司的发展动向加深对公司的印象，从而达到展示企业实力和形象的目的。也可以达到宣传公司的目的。（4）招聘界面XXXV 河南经贸职业学院毕业论文公司在某一部门需要发展壮大,或者有员工离开时,可以在这里发布招聘信息,然后通过应聘者打电话给公司,选择其中合适的人员通知其到公司面试.（5）客户留言模块留言板是一个商务网站中不可缺少的组成部分，它可以增进用户与网站之间的交流。客户留言反馈对公司的意见和评价，根据客户对公司的意见和评价，来修改或是制定公司的发展方向。第4章网站各项功能的实现及效果分析4.1网站功能的实现首页：XXXV 河南经贸职业学院毕业论文图4-1首页详细制作过程：（1）Title如图：图4-2网站标题欢迎光临郑州公卫环保科技有限公司