公司网站设计方案综合实践说明书.doc

公司网站设计方案综合实践说明书1设计任务分析1.1建设网站的必要与可行性二十一世纪进入信息发展高速路，数码化革命给所有领域带来新的改变。随着电脑办公自动化的普及，企业纷纷建立自己所需的网站应运而生，一切都归功于Internet的巨大贡献，互联网的世界里蕴藏无限生机，这里只有想不到的、没有做不到的。由于国际互联网是一个不受时空限制的信息交换系统，所以它是目前最直接、最丰富和最快捷的联系方式，信息沟通的高效率为企业带来了最大的方便。所以在现今社会对于一个企业来说，网站已经是不可缺少的一部分了。而我们做网站不是为了赶一时的潮流或是博取一个好听的名声才做的，只有把网络技术同企业管理体系、工作流程和商务动作实现紧密地集成，才能真正发挥企业网站的作用。一个企业建网的最终目的和它的经营目的应该是一致的，就是通过企业网站来降低企业的管理成本和交易成本以及通过开展商业活动来获得更多的利润。明确了这一目标，才能正确地经营这个网站，并使其为企业服务。在此，我们应结合企业的现状与网站未来发展方向，为企业度身定做一套符合自己需求的网站建设方案。随着全球信息向网络化方向发展，Internet（因特网）在世界上已不再单纯是一种技术，更主要的是 Internet已成为一种新的经营模式，从4C （Connection、Communication、Commerce & Co-operation）层次上彻底改变了人类的工作、生活、学习和娱乐方式，已成为国家经济和区域性经济增长的主要动力,Internet正成为世界最大的公共资料库。它包容着数不清的信息资源，任何最新的信息都可以通过网络搜寻迅速获得，更重要的是，大部分信息都是免费的。企业网站的建设，可以使企业得到以前无法获得的商业资源，真是商机无限，在激烈的市场竞争中领先对手。1.2网站的设计需求1.树立企业形象2.吸引更多的客户3.为现有的客户提供更有效的服务 4.保持市场的领先地位5.提高管理效率6.建立完善的售后服务系统1.3网站建设原则企业网站的建设是有一定的原则的。1.目的性 任何一个网站，必须首先具有明确的目的和目标群体。网站是面对客户、供应商、消费者还是全部？主要目的是为了介绍企业、宣传某种产品还是为了试验电子商务？如果目的不是唯一的，还应该清楚的列出不同目的的轻重关系。建站包括类型的选择、内容功能的筹备、界面设计等各个方面都受到目的性的直接影响，因此目的性是一切原则的基础。2.专业性 网站的信息内容应该充分展现企业的专业特性，对外介绍企业自身，最主要的目的是向外界介绍企业的业务范围、性质和实力，从而创造更多的商机。3.实用性网站提供的功能服务应该是切合浏览者实际需求的且符合企业特点的。例如网上银行提供免费电子邮件和个人主页空间就既不符合浏览者对网上银行网站的需求也不是银行的优势，这样的功能服务提供不但会削弱浏览者对网站的整体印象，还浪费了企业的资源投入，有弊无利。4. 层次性条理清晰的结构，表现为网站的板块划分的合理性，信息内容的获取和功能服务的过程都应该尽量将所需要进行的步骤控制在3-5步以内，不得不需要更多的步骤的时应该有明确的提示。5.一致性页面整体设计风格的一致性：整体页面布局和用图用色风格前后一致。界面元素的命名的一致性：同样的元素应该用同样的命名；同类元素命名满足一致性，做到即使某个元素的表述不清楚也能从上下文推断其义。功能一致性：完成同样的功能应该尽量使用同样的元素。元素风格一致性：界面元素的美观风格、摆放位置在同一个界面和不同界面之间都应该是一致的。1.4网站主要功能1. 企业信息：发布介绍企业的各类信息，如企业简介、组织机构、经营项目、企业荣誉、联系方式，并可随意增加新的栏目等。 2. 新闻资讯：发布企业新闻和业内资讯，无限级分类，大增加信息发布的灵活性。3. 产品展示：发布企业产品，按产品类别显示及搜索产品，浏览者可根据自己的习惯和需要自主设置产品显示样式，并可直接下订单，无限级分类，大增加信息发布的灵活性。 4. 人才招聘：发布招聘信息，人才策略，浏览者可了解企业的职位空缺情况。5.信息反馈：以留言板的形式接收用户的反馈信息。2方案初选2.1网站建设目标制作公司的网站是为了能让各个地方的人们来了解本企业的文化和产品信息，只要通过网上搜索就能对企业进行了解，是一个向外推广本公司产品以及能更多人进行交流的重要渠道，也能与更多人进行交流，促进公司业务的扩展。公司结合本土资金优势、人才优势、技术优势、服务优势，大力推动金融类市场各项业务的快速发展，竭诚为客户提供更快、更新、更准确、更专业的投资信息与策略组合，为每位客户度身定制最适合的投资策略，以追求客户利益最大化为己任！2.2网站页面设计2.2.1页面构成要素与传统媒体不同，网页除了文字和图像以外，还包含声音、视频和动画等新兴多媒体元素，更借助由代码语言编程所实现的各种交互式效果，增加了网页界面的生动性和复杂性，也使得网页设计者需要考虑更多页面元素的排布、优化。一般来说，网页的界面主要由下面几个因素构成：（1）文字：文字元素是信息传达的主体部分。网页中的文字主要包括标题、信息、文字链接、几种主要形式。标题和传统媒体中信息传达的基本作用相同，是内容的简概说明一般比较醒目、优先编排。文字作为占据页面重要比率的元素，同时又是信息重要载体，它的字体、大小、颜色和排布对页面整体设计影响极大。（2）图形：图形在网页界面中具有重要作用。合理的运用图形。可以生动直观、形象地表现设计主题。网页中常用的图形格式包括jpg和gif，这两种格式压缩比高，得到了规范浏览器的支持，下载速度快，具有跨平台的特性，不需要浏览器安装插件即可直接阅览。图形元素包括标题、背景、主图、链接图标四种。（3）页面版式：版式是网页界面设计的重要组成部分，它将文字、图形等视觉元素进行组合配置，使页面整体视觉效果美观和谐，便于阅读，实现信息传达的最佳效果。 （4）技术：网页的技术要素并非任何情况下在网页中都能直观体现，但是却代表了设计的整体水平，也是衡量设计成功的重要标准。网页界面设计最基本的技术要求包括：浏览器、传输速度、屏幕分辨率、颜色显示。2.2.2 网页设计原则1. 网页内容要易读网站设计最重要的诀窍，恐怕就是你的网页要易读 。这就意味着,你必须花点心思来规划文字与背景颜色的搭配方案。 注意不要使背景的颜色冲淡了文字的视觉效果，别用花里胡哨的色彩组合，让人看起来你的网页来很费劲。一般来说，浅色背景下的深色文字为佳 。这个要点要求你最好别把文字的规格设得太小、也不能太大。文字太小，人家读起来难受；文字太大，或者文字视觉效果变化频繁，像是冲着人大喊大叫，看起来不舒服。另外，最好让文本左对齐，而不是居中。按当代中文的阅读习惯，文本大都居左的。当然，标题一般应该居中，因为这符合读者的阅读习惯。2. 网站导航要清晰所有的超链接应清晰无误地向读者标识出来，所有导航性质的设置，像图像按钮，都要有清晰的标识，让人看得明白，千万别光顾视觉效果的热闹的，而让人家不知东西南北。链接文本的颜色最好用约定俗成的：未访问的，蓝色；点击过的，紫色或栗色。总之，文本链接一定要和页面的其他文字有所区分，给读者清楚的导向 。3. 网页风格要统一你网页上所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，要统一风格，贯穿全站。这样子读者看起来舒服、顺畅，会对你的网站留下一个“很专业”的印象。4. 页面容量要较小有研究显示，如果一个网站页面的主体在15秒之内显现不出来，访客会很快失去对该站的兴趣。如果用户不能够迅速地进入你的网站，或操作不便捷，网站设计就是失败的。不要让用户失望而转向你的对手的网站。要限定页面的大小，就得从各个角度考虑节省 。最大的一头是图像，有的好东西，只得割爱了。5. 页面内容要新颖网页内容的选择要不落俗套，要重点突出一个“新”字，这个原则要求我们在设计网站内容时不能照抄别人的内容，要结合自身的实际情况创作出一个独一无二的网站。 放眼望去，网上的许多个人主页简直就是杂货店，内容包罗万象,题材千篇一律，人人都是软件下载,个个都有网络导航，从头到尾找不出一丝“鲜”意。所以，我们在设计网页时，要把功夫下在选材上。选材要尽量做到“少”而“精”,又必须突出“新”，如能坚持天天更新的话,我相信这样的网页一定会受到大家的欢迎。2.3 网站建设流程一、 了解企业的最真实的需求，为该企业提供专业的策划方案；二、 根据该企业名称、行业特点、地域等相关信息策划域名构成；三、 确定网站建设内容、网站结构、应用系统、规模等；四、 进行资料收集、上传所需要的文档；五、 网站风格策划、网页设计、内容整理、图片处理、文字录入；六、设计完成网站初稿，提供给老师检查并提出修改意见和建议；七、 根据毕业设计要求和老师建议对网站进行修改和调整；八、 网站上传，网站正式开放发布；九、 网站维护和推广。3网站的详细设计步骤3.1网站前台页面设计3.1.1主页企业网站的首页是一个公司的形象带代表。在登入温州威特汽车配件有限公司首先展现的是“威特活塞环”以及公司所执行的理念是“科技创新，以实力求发展，不断开拓进取”。在左上角展示了我公司的WeiTe，简单明了的就是威特的首字母，右上角有4个连接分别是“English”、“中文版”、“加入收藏”“设为首页”。接下来导航栏分别就是“网站首页”、“产品展示”、“产品目录”、“新闻中心”、“人才招聘”、“售后服务”、“在线留言”、“联系我们”，每一个标题都连接着一个不同的页面。下面的版面分别是公司新闻、公司简介和企业文化，让每一个浏览我公司网页的客户都能一目了然的知道本公司的信息。3.1.2公司介绍这个页面主要讲的是公司的简介，首先介绍公司的发展历史和公司的产品质量标准，并且说明了本公司有是一家主要生产汽车活塞环企业，后面是介绍公司的占地面积有多大，拥有一批高级技术人员，还有简述公司是引进国外先进设备与管理理念，接下来讲述的是公司在过去的几十年里成功的通过国际质量体系认证，从而使公司的产品畅销与国外。3.1.3产品展示这页面是对本公司生产的产品进行详细的介绍和展示，通过对产品的大小、样式、规格，以及产品的颜色等方面进行展示。可以让客户在网站上面通过实图进行详细的了解。这也能使公司有一个比较直观的认识。对客户进行展示的不止是外观的详细信息，还包括规格和产品款式的颜色等详细信息。这样能做到网站的产品展示能让客户看到产品的同时对产品的每一个信息都有一定的了解。3.1.4产品目录这页面是介绍公司产品的型号，这页面展示的是公司生产的各各产品的型号。展示这些型号是为方便客户更加详细的了解公司产品，这也是为了能使得客户清楚的知道他到底需要什么样的型号的产品。3.1.5新闻中心这页面主要展示了公司新闻、行业新闻以及公司的公告信息，介绍公司的各种公告和相关的贸易新闻，新闻里还有解答顾客提出的问题。新闻中心囊括了公司的最新动态最近生产研发的产品，公司在本行业中的竞争地位等等，是顾客了解本公司最新动态的主要途径，也是吸引顾客的一个主要页面。3.1.6人才招聘这网页主要介绍的是公司向社会进行人才的招聘，通过招收优秀的人才为公司的发展做出一份贡献，使我公司有更强的实力，能在这竞争强烈的行业中脱颖而出。应聘者可以通过这个网页来找到适合自己工作的职位以及公司的联系方式。3.1.7售后服务这页面是公司用来与客户进行交流用的，公司在这页面留下联系方式。客户要是有什么意见或者需要与本公司进行业务方面的交流可以通过这个页面留的联系方式来联系公司。这也是一个客户了解本公司的产品在顾客中的评价和意见的方式。以此来生产满足社会需求的产品，来促进公司的发展。3.1.8在线留言在线留言这页面也是网站中一个能让客户与我公司交流的页面，客户有什么意见或是有什么想咨询的都可以通过这个页面来留言，公司会有专门负责这方面的人来回答您所提的一切问题，不过当您留言的时候希望您能留下您的联系方式，以便我们联系您。3.1.9联系我们这个页面留有公司名称、公司地址、公司的网址、公司的联系电话、公司的传真、公司的邮箱和公司所在地的地图。这些都是为了方便有意想找我们合作的客户与我们联系。3.2网站前台页面代码设计1.主页代码： English| 中文版 加入收藏|设为首页 网站首页 关于我们 产品展示 产品目录 新闻中心 人才招聘 售后服务 在线留言 联系我们 2.在线留言代码：picrun_ini()/- 在线留言 问题： * 内容： * 联系人： * 联系方式： * 请填写，email，qq，msn等联系方式 验证码： * 3.3后台数据库设计1.新闻管理表新闻管理表（tb_News）是管理员用来更新公司网站的新闻，更新公司网站上的新闻内容与时间。字段名称数据类型说明主键ID自动编号编号是Title文本标题否Content备注内容否Num数字数字否Date日期/时间日期/时间否2.招聘信息表招聘信息表是（tb_recruit）是为了让管理员进行添加、修改、删除招聘信息，包括招聘职务、招聘内容、招聘人数等。字段名称数据类型说明主键ID自动编号招聘编号是Title文本招聘职务否Content备注招聘内容否Num数字招聘人数否3.留言信息表留言信息表（tb_Messages）是为了存储浏览者在网站页面上给我们提的意见、建议和反馈信息而设计的，信息反馈一般包括姓名、电话、地址、性别等基本信息和反馈的内容，其中包括对我们公司的评价、建议等字段，通过此表，管理员可以对网友的留言进行删除、修改和回复。字段名称数据类型说明主键ID自动编号编号是Username文本留言人姓名否Title文本留言标题否Sex文本性别否Ip文本IP否Content备注内容否Re_Content备注回复内容否E-mail