《尚惠国际网站的设计与制作 毕业论文.doc》由会员分享，可在线阅读，更多相关《尚惠国际网站的设计与制作 毕业论文.doc（13页珍藏版）》请在三一文库上搜索。
1、 XXX学院毕 业 论 文尚惠国际网站的设计与制作学生姓名：XXX学 号：030XXX年级专业：2010级自主网页设计2班指导老师：XXX系 部：计算机工程系提交日期：2012年6月目 录摘 要 11前 言 22 网站设计规划 33网站的前期准备4 3.1网页基本知识 4 3.2 软件准备 54 网站的总体设计 5 4.1确定网站主题 5 4.2确定网站形象 5 4.3确定网站风格 6 4.4确定网站内容 7 4.5 网站的设计 85网站的布局 9 5.1网站布局的基本概念 9 5.2布局的技术 106网站的市场需求 117网页发布及网站维护138总结 14参考文献13尚惠国际网站的设计与制作
2、 摘要：网络发展到今天，建立网站已经成为一个很普遍的问题了。对企业家来说，建立好的网站可以抢占新世纪的战略要点。建立新的企业形象，直接开拓国际市场。现在的社会女人更加注重面部保养，各种各样的知名化妆品的迅速走进我们的生活当中，而尚惠国际是一家集科研、开发、生产、销售、服务于一体的大型集团。本论文将对我的个人网站制作过程中，主要是针对我网站设计的方向和目的、网站设计的整个流程出发，然后通过自己设计的这个个人网站作品来说明并演示一个网站制作过程。这篇论文的主要内容是个人网站的设计思想，整体规划及相关的基础科知识。网站的规划又包括网页的结构、栏目的设置、网页的风格、颜色的搭配、版面的布局、文字图片的
3、运用等。还有网站主题就是所要包含的主要内容，一个网站必须要有一个明确的主题，特别是个人网站，不能像单独网页那样，显示内容少而单一，所以要找准自己感兴趣的内容，做深、做透、显出自己的特色，这样才能留下深刻的印象。关键词：网站设计；网站规划；网站主题；化妆品； 1 前言该随着经济的发展，计算机以被应用到社会生活的各个领域。这给人们的生活带来很大的方便。如今，已成为人们日常生活中不可或缺少的部分。人们可以足不出户上网购物，随时查询股票信息，在自己的微博上尽情发表言论.以上这些离不开最基本的网页设计和制作。网站作为网络信息主要的表现形式而且还是互联网信息的主要承载者，在互联网上表现出及其重要的地位，并
4、发挥着及其重要的作用，无论是在国内还是国外都得迅速的发展和壮大，并被人们重视和关注。网站的迷人之处在于综合使用文本、图像、声音、动画视频信息和内容，具有丰富的多媒体表现与互动特点。毋庸置疑，网站已成为最吸引人的也是最有效的信息传递的手段和方式。随着网络技术的发展，各类网站纷纷出现，个人网站也成为一种时尚，越来越多的人希望拥有自己的网站，开辟网络世界的一片天地，展示自己的才华和风格。个人网站是指个人因某种兴趣、拥有某种专业技术，提供某种服务或把自己的作品商品展示销售而制作的具有独立空间域名的网站。所谓个人网站，就是指网站内容是介绍自己的或是以自己的信息为中心的网站。2 网页设计规划 1、网站建设
5、的目的 网站的建设不仅仅是制作主页的问题，还需要考虑的定位、目标用户、网站内容、服务事项、空间方案、安全性、艺术设计等等。任何网站在建设之前都必须明确文向、用途和服务群体等一系列的问题，写出详细的建站计划，可以说这是网站建设的根源和核心所在。这里我的个人网站主要是让更多的人认识和了解尚惠国际化妆品。借助网络的这个平台来展示尚惠化妆品，还有我希望能得到更大的商业平台。2、本站的明确目的 不同的网站目的要求通过不同的方式来实现。一个展示个人能力的网站与一个以花卉种植为主题的网站，以及一个大型门户网站和一个小型企业网站，其出发点和建站的都有所不同。在整个网站的建设规划方面的要求也是肯定不一样的。因此
6、在规划我的网站是，我选择的是与化妆品相关的内容作为主题。 网站预计的用户群体：对于网站的设计者和建设者来说，在设计规划网站时必须要明确自己网站的浏览部，也是确定自己的用户群体。在已经确定了建设目的的前提下，应根据建站方向所导致出现的不同用户群体的需求来规划设计整个网站。我的这个网站就是确定了爱美的女人们为用户群体。网站的结构和风格：网站的风格反映了一个网站的特色这具有很大的代表性。出色的网站吸引认得地方不仅仅在于其内容，鲜明的结构和独特的风格往往能起到画龙点睛的作用。一个网站即使内容再丰富，如果网站的结构和风格不能吸引人，那也是毫无价值的。往往整个网站的风格是一个网站吸引浏览者的魅力所在，因此
7、应当根据网站的主题、内容和浏览者的要求来设计自己独特的网站风格。那么什么是网站的结构和风格呢？网站的结构连接网站内容之间的支架。网站的结构是网站的核心和骨架，如果没有网站结构，网站就会变得一团糟。现在，只有高度发展、高度结构化、易用且能独立行走的网站才受浏览者的欢迎。3 网页的前期准备3.1网页基本知识1、InternetInternet是一个全球性的计算机互联网络，中文名称为“国际互联网”或“因特网”。它集现代通信技术和现代计算机于一体，是计算机之间进行国际信息交流和实现资源共享的良好手段。Internet将各种各样的物理网络；连接起来，构成一个整体，而不考虑这些网络类型的异同、规模的大小和
8、地理位置的差异。Internet是全球最大的信息资源库，几乎包括了人类生活的方方面面，如政府部门、教育、科研、商业、工业、出版、文化艺术、通信、广播电视、娱乐等。经过多年的发展，互联网已经在社会的各个方面为全人类提供便利。电子邮件、即时消息、视频会议，网络日志、网上购物等已经成为越来越多的人的一种生活方式。2、网站网站是因特网上的一个信息集中点，可以通过域名进行访问。网站要存储在独立服务器或者服务器的虚拟主机上才能接受访问。网站是有独立域名、独立存放空间的内容集合，这些内容可能是网页，也可能是程序或其他文件，不一定要有很多网页，只要有独立域名和空间，哪怕只有一个页面也叫网站。网站就是互联网上的
9、一块固定的面向全世界发布消息的地方，它由域名和网站空间构成。衡量一个网站的性能通常从网站空间大小、网站位置、网站连接速度、网站软件配置、网站提供服务等几方面考虑。3、静态网页网页又称Html文件，是一种可以在WWW上传输，能被浏览器认识和翻译成页面并显示出来的文件。静态网页是网站建设初期经常采用的一种形式。网站建设者是把内容设计出来成静态网页，访问者只能被动地浏览网站建设者提供的网页内容。3.2软件准备在网页的设计过程中，因人而宜，每个人使用的软件也许不同。Dreamweaver与Flash、Fireworks者3者被用户成为“网页设计三剑客”。Dreamweaver的优势在于它不仅是优秀的所
10、见即所得的编辑软件，同事也兼顾了HTML源代码，可以让用户很方便地在两种模式之间的切换。Dreamweaver采用“所见即所得”的直观设计模式，充分尊重设计人员的原始意识和想象力，它成功地将网页设计功能中的技术实现部分和设计部分分开，还提供众多的可视化设计工具、应用开发环境以及代码编辑支持。如利用鼠标拖动来添加表格、图像等元素，在方档中直接输入文本，直接插入一些常用的特殊符号对象等。用户在没有输入代码的情况下完成了上述工作，Dreamweaver自动将结果转换为HTML源代码。用户也可以随时查看防档的HTML源代码，在代码视图中进行修改。4 网页的总体设计4.1确定网站主题做网站，首先必须要解
11、决的就是网站内容问题，即确定网站的主题。我自己对化妆品这方面有兴趣，先是掌握这方面的资料，自己对这方面的见解，做出自己的特色。对于内容主题的选择，要做到小而精，主题定位小，内容要精。而我定为在化妆品这一块，内容是某某品牌的化妆品。我围绕了这个网站的公司简介、新闻中心、品牌风尚、事业加盟、经销商、精英讲师团、客服中心、联系我们这几个方面都制作的。4.2确定网站形象网站形象的设计可以从网站标志、网站色彩、网站字体网络宣传语等这方面着手。网友标志，可以是中文、英文子母、也可以是符号和图案等。标志的设计创意是来自网站的名称和内容。我的网站名称是“尚惠国际”所以我的标志是由三片树叶围成圆形组成，这个圆代
12、表着国际。网站色彩，网站给人的第一印象来自视觉冲击，不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。“标准色彩”是指体现网站形象和延伸内涵的色彩，给人以整体统一的感觉。我个人网站的色彩是以酒红色为主，淡酒红为铺，刺激浏览者的视觉。网站字体，和标准选用了灰色和酒红色，标准字体是指用于标题、主菜单的特有字体。为了体现网站的特有风格，可以根据自己网站所表达的内涵，选择更贴切的字体。我的个人网站的标准字体是宋体，给人一种干净利落的感觉。网站宣传语，也可以说是网站的精神，主题于中心，或者是网站的目标，用一句话或者一个词来概括。我的网站宣传语是“进入尚惠，无限魅力，全心演绎。”4.3确定网站风格风
13、格是抽象的，是指网站的整体形象给浏览者的综合感受。这个“整体形象”包括网站的标志、色彩、字体、标语等诸多因素。网站可以是平易近人、生动活泼的，也可以使专业严肃的。不管是色彩、技术、文字、布局、还是交互方式，只要你能由此让浏览者明确的分辨出这是你网站所独有的，这形成了风格。风格是有人性的，通过网站的色彩、技术、文字、布局、交互方式可以概括出一个网站的个性；我的网站风格是以简约为主，色彩使用的是鲜艳的颜色。4.4确定网站内容我的网站大体包括了一些内容：首页、走进尚惠、新闻中心、品牌风尚、事业加盟、经销商加盟商、精英讲师团、客服中心、联系我们；9打模块。首页的设计简述：在个人首页中，我用一只雄鸡（中
14、国的地图）上面写上中国的各个省的名称，上面做了快速查询的选择，显示这个化妆品很有发展的前途，销售区域多，有自己的营销网络，如图4-1所示。图4-1 快速查找页面图走进尚惠：这个页面介绍子尚惠国际集团是一家集科研、开发、生产、销售、服务于一体公司。尚惠长期和其他国家的合作为了保证产品的质量。还有尚惠的诚信经营和不断创新为了提供更优质的产品和跟完美的市场经营。新闻中心：讲述尚惠的员工素质及专业知识水平，员工的服务态度，日常活动等的新闻。品牌风尚：尚惠出生于二十世纪韩国中部的一个植物学家发明了“植物精华提纯仪”，这种仪器能使植物在真空包裹的状态下充分吸取精华。事业加盟：为满足不断扩大的市场需求以及配
15、合公司总体运营战略的实现，希望更多有经验员工加盟我们。经销商加盟商：员工素质及专业知识水平的提高就是公司财富的增长，员工的福利待遇；一切经营活动的基本方针，专业化、品牌化、集团化、创新求实。经营讲师团：我用林嘉欣和许熙娣图片组成。客服中心：为了提供给浏览者，不明白地方和咨询的。联系我们：为了更好更直接更快速的与我们联系，这里我写上了地址、咨询热线、传真等。4.5网站的设计LOGO部分我运用了三片树叶构成一个圆形用Photoshop处理让它变成有立体感的球形，填上不同的颜色分别有紫色、黄色、天蓝色。“尚惠国际”我填充了灰色，因为我要这个网站的字体统一颜色都以灰色为主。如图3.5-1所示图4-2
16、logo图片导航栏部分在上课做网页的时候我是弄得横的，而这次我想特别一点弄成弧形的因为底色我采用了酒红色，所以字体颜色我用白色，让浏览者看的更清楚。我给导航栏加上了白边和阴影，总体感觉不错，如图4-3所示。图4-3 首页导航图 网页的组成：我将“尚惠国际”设计出来“SUHU”比较好记，而且很多品牌都有自己的缩写英文，如图4-4所示。我在四个英文字母中添加水滴和花瓣，营造出女性爱浪漫的感觉。图4-4 品牌缩写图5 网页的布局 网站主页就好像是宣传栏或者店面对访问者产生第一印象，都希望尽量给人留下好的印象。一般来说：好的网站应该给人有这样的感觉：干净整洁、条理清楚、专业水准、引人入胜,如图5-1所
17、示。图5-1 页面布局图 网页应该力求抓住而不是淹没浏览者的注意力，过多的闪烁、色彩、下拉菜单框、图片等会让访问者无所适从离开时最好的选择，就像一些商店，播放震耳欲聋的发烧音乐，你要做的唯一决定离开那里，越来越好。5.1网页布局的基本概念 最开始，网页呈现在你面前的时候，它好像一张白纸，它需要你任意挥洒你的设计才思，可以创造出自己的设计方案。1、 页面尺寸由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围，而且因为浏览器也将占去不少空间，留下给你的页面范围变得越来越小。一般分辨率在800*600的情况下，页面的显示尺寸为：780*428个像素；分辨率越高页面尺寸越
18、大。浏览器的工具栏也是影响页面尺寸的原因。一般目前的浏览器工具栏都可以取消或者增加，那么当你显示全部的工具栏时，和关闭全部工具栏时，页面的尺寸是不一样的。在网页设计过程中，向下拖动页面时唯一给网页增加更多内容（尺寸）的方法。除非你能肯定站点的内容能吸引大家拖动，否则不要让访问者拖动页面超过三屏。如果需要在同意页面显示超过三屏的内容，那么你最好能在上面做上页面内部连接，方便访问者浏览。2、整体造型 造型的就是创造出来的物体形象，整体造型都围绕简洁的风格制作，如果造型添加太多的东西或者颜色不一样，给浏览者一种头昏眼花的现象，造型看起来就是要舒服、易懂。3、文本文本在页面中出现都数以行或者段落出现，
19、它们的摆放位置整个页面布局的可视性。4、图片图片和文本是网页的两大构成元素，缺一不可。图片我都用来做背景和插入，它要符合网格的大小，不符合就要适当的调整，让整个页面看上去整整齐齐。5.2网站的布局技术1、层叠样式表的应用在新的HTML4.0标准中，CSS（层叠样式表）被提出来，它能完全精确的定位文本和图片。CSS有点复杂，但它的确是一个好的布局方法。2、表格布局表格布局被广泛使用，已经成为一个潜在的标准。表格的布局的优势在于它能对不同的对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本比起用CSS更加方便。表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响。3、
20、框架布局由于它的兼容性，框架布局并没有被所有人接受。丹从布局上考虑，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般说不影响整天美观。6 网页的市场需求网站的核心是用户，搜索引擎所服务的对象也是用户，看看当今的任何商业活动，哪个不是以服务顾客舒适度取胜的。所以要提高网站用户必须要做到以下几点：1、 网站速度要快用户第一次进入网站通常是通过点击链接或者浏览器输入地址，不管是通过哪种凡是进来，只有能快速打开网站才能获得第一次的认可，如果超过五秒钟网站还打不开，通常都会直接关闭了，所以我们首先要选择一款高速的主机，并把网站代码优化精简以提高网站的速度，当然仅仅是快速还不够，网站的服务
21、要够稳定，不要老是打不开，如果有几次网站都打不开，用户也不会信任您的网站了。2、有美观简洁的页面设计网站整体风格的设计要美观、简洁大方，这是给用户留下良好第一印象的重点。注意色彩的搭配，不要太花俏，也不要太过于单调，建议一般使用一种主色调再加以一两种辅助色彩，网站主次分明，中心突出，提高页面的可读性。3、.网站内容要有可读性网站不是做门户，所以尽量不要一个网站包含太多主题的内容，最好是专注于某一个主题，将目标定位，所写内容也要针对网站主题，这样才有能吸引用户。4、让访问可以联系到您在网站的显要位置留下您的联系方式，要让访问轻松找到您的联系方式，用户使用的会越方便，您的网站转化率会越高。5、建立
22、留言反馈信息任何一个网站都不可能完美，所以我们应该注重用户的反馈，访客频繁的反馈和咨询，会加强网站的可信度，也会拉进您和用户之前的距离，更加重要的是，如果您都能及时回复，这会提升形象，给所有访客者留下好的印象。6、网站要时常更新如果网站每天都不更新，访客每天都来您的网站看到一样的内容，没有新的内容，这样访客会觉得乏味，渐渐的他们就不会来了，因为没有可看性了。7 网页发布及网站维护在测试完成后，网页就可以发布到互联网上了，接下来要做的就是网站的日常维护了。网站维护就是对服务器及相关软硬件的维护，对可能出现的问题进行评估，制定响应时间，制定相关维护规定，将网站维护制度化、规范化、主要包括以下内容：
23、1、即时更新产品内容：留言、信箱、论坛等定期回复及编写；数据库内容定期备份、删减、分类；更正数据库使用过程中发现的问题。2、定期进行综合分析，不断优化数据库中数据结构，提高使用效率。8 总结经过老师耐心细致的指导，同时翻阅了大量的资料（包括网上资料、书本及学校的一些相关资料），经过近一段时间的努力，网站的设计制作告一段落。总结这次“尚惠国际”开发制作的过程，我使用了静态制作方法同时也从中学习了对静态网页的处理风格，色彩搭配，页面导航方面有了一定的经验。本次设计由于自己不太会动态制作加上设计经验不足，在网站的整天设计及各模块功能可能有设计的不完全，有待于进一步的完善和改进。参考文献1 黄箐韵.
24、Photoshop cs 超梦幻网页创意宝典. 机械工业出版社2 刘瑞新、汪远征. ASP网页数据库短训教程. 机械工业出版社3 X宇鸿. Flash MX 2004. 清华大学出版社4 何海霞. Dreamweaver 8完美网页动态网页设计篇. 中国电力出版社5 卢坚、马永强、鲍嘉. Dreamweaver2004完美网页设计综合实例篇. 中国青年出版社6 鲍嘉. Dreamweaver 8完美网页设计特效篇. 中国电力出版社7 卢坚. Dreamweaver 8完美网页设计疑难解释篇. 中国电力出版社8 http:/（江西科技师范学院）9 http:/（南昌高等专科学校）10 http:/（网页设计师联盟）11 黄立群. 电子商务网站建设与管理. 大连. 东北财经大学出版社12 王锦. Dreamweaver MX 2004中文版基础教程. 北京. 机械工业出版社第 13 页 共 13 页