鸡血石企业网站设计制作_第1页
鸡血石企业网站设计制作_第2页
鸡血石企业网站设计制作_第3页
鸡血石企业网站设计制作_第4页
鸡血石企业网站设计制作_第5页
已阅读5页,还剩22页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

本 科 毕 业 设 计(论 文)题目 鸡血石企业网站设计制作 学生姓名 学 号 指导教师 学 院 专 业 交稿日期 20 年 月 日 学术诚信声明本人郑重声明:所呈交的毕业设计(论文),是本人在导师的指导下,独立进行研究工作所取得的成果。除文中已经注明引用的内容外,本毕业设计(论文)不含任何其他个人或集体已经发表或撰写过的作品或成果。对本文的研究做出重要贡献的个人和集体,均已在文中以明确方式标明。本人完全意识到本声明的法律结果由本人承担。中文题目:鸡血石企业网站设计制作英文题目:Bloodstone enterprise website design and production作者签名: 日期: 年 月 日版权使用授权书本毕业设计(论文)作者同意学校保留并向国家有关部门或机构送交论文的复印件和电子版,允许论文被查阅和借阅。本人授权上海建桥学院可以将本毕业设计(论文)的全部或部分内容编入有关数据库进行检索,可以采用影印、缩印或扫描等复制手段保存和汇编本毕业设计(论文)。 保 密,在 年解密后适用本授权书。本论文属于 不保密 。(请在以上方框内打“”,如作者未做出选择的情况下,按不保密处理。)作者签名: 指导教师签名:日期: 年 月 日 日期: 年 月 日2鸡血石企业网站设计制作鸡血石企业网站设计制作摘 要本文就网站的主题内容及网站的制作及设计这两方面进行描述与分析。本网站的主题是鸡血石,网站的模块主要包括首页、公司公告、关于我们、新闻资讯、产品展示、营销网络、客户回馈、在线订购、访客留言、招贤纳士、联系我们等栏目。在整个设计过程中主要运用Dreamweaver CS5、Photoshop CS5、ACCESS、ASP等编写的。通过通过本网站的系统,给想了解鸡血石人群提供一个良好的互动交流的平台,同时也为想从事这方面工作的人提供一个选择岗位的平台。 如今,在网络技术的迅猛发展下,互联网的不断普及,让人们都感受到网络的方便快捷,从而大家都喜欢选择从互联网上获取信息,因此,互联网逐渐成为一个宽广的信息发布平台和获取信息的平台。本网站也需要通过Internet来对外宣传、普及,从而帮助到更多想了解鸡血石的人们。 本网站主要是以建立Dreamweaver CS5、Photoshop CS5、ACCESS、ASP等技术的动态网站管理系统的前台表现模块,使用了ASP技术的动态网页技术,加上ACCESS作为后台数据库,制作了一个简单的展示交流企业网站系统,实现了企业网站的基本功能,例如用户注册登录,留言板的实现等。关键词:ASP,动态交互,留言- I -Bloodstone enterprise website design and productionAbstractIn this paper, the content and the theme of the site of production and design of description and analysis of these two aspects.This website is the theme of the stone, the module mainly includes the website homepage, company announcements, about us, news, product exhibition, marketing network, customer feedback, online ordering, visitor messages, contact us, recruiting, and other columns. Throughout the design process using Dreamweaver CS5, Photoshop CS5, ACCESS, ASP, etc. Through the system, through this website to want to know about bloodstone people to provide a good interactive platform, but also for people who want to work in this aspect to provide a platform of choosing jobs.Nowadays, under the rapid development of network technology, the spread of the Internet, let people feel the network convenient and quick, and everybody likes to choose from the Internet to obtain information, therefore, the Internet gradually become a broad information release platform and information platform. This site also need through the Internet to propaganda and popularization, which help people to want to know more about bloodstone.This website mainly establish Dreamweaver CS5, Photoshop CS5, ACCESS, at the front of the ASP technology of dynamic website management system such as performance module, using the technique of ASP dynamic web page technology, combined with the ACCESS as a backend database, made a simple communication enterprise website system, realized the basic function of enterprise website, login user registration, for example, the realization of the message boards, etc.Key Words:ASP, dynamic interaction, leave a message- 22 -目 录摘 要IAbstractII目 录0引 言11 网站设计分析31.1网站设计概述31.2开发工具的选用及介绍41.2.1 Dreamweaver CS541.2.2 Photoshop CS551.2.3 Flash 8.051.2.4 ASP动态网站脚本语言61.3关系型数据库的选择61.3.1 Microsoft Office Access简介61.4网站定位71.5系统构思81.6网站栏目介绍102详细设计122.1主界面制作122.1.1banner制作过程122.1.2主页制作过程122.1.3新闻资讯模块132.2后台设计142.2.1留言板设计142.2.2招聘模块制作152.3数据库设计162.4系统实现代码172.4.1图片切换172.4.2系统时间显示18结 论19参 考 文 献20致 谢21 引 言 在现在的信息化时代,计算机已经是家喻户晓,每个家庭必备的家用电器了。也越来越多的人能够熟悉并熟练的进行计算机操作了。除了基本的浏览网页、资料搜索等基本应用外,国内的网民也开始习惯了一些娱乐、通讯、购物等服务。无论是儿童、青年、中年、老年都依赖上了网络。 近几年电子商务发展的尤为迅速,几乎人人都知道淘宝,都知道上网可以买东西。电子商务。 随着Internet的迅速发展和电子商务的兴起,21世纪人类已经全面进入了信息化社会的时代。做为一个企业在这么一个五彩斑斓,多样化的信息时代里,面临这很多的机遇,也面临着严峻的挑战。成千上万的公司争先在互联网上崭露头角,在这个全面信息化的时代,企业已经也不能固步自封,只局限于发传单,等报纸等宣传活动了。在这个神奇的网络上,可以让自己的企业更迅速、更便捷、更经济的让更多的人看到,更多的人了解。IT技术是90年代初的产物,现在的IT技术也更加的成熟,网站设计也是近几年才发展起来的。一个企业的网站它是企业的门面,在互联网上,它拥有亿万的观众。网络的建设投入的价格低廉,但是在回报上却完全的不低,它既没有受到时间的限制,也没有受到地域的影响,它的广泛性和高效性能够给企业带来巨大的收益。它让企业有更广阔的发展空间,更多的潜在商业伙伴和客户。是否拥有自己的网站已经成为了衡量一个企业综合素质的重要标志。所以我们现在讨论的是如何设计出了一个功能强大,页面美观,能够体现企业文化,能高效的做出企业推广和宣传的网站系统。本次毕业设计的课题是鸡血石企业网站设计制作。刚开始想的是做一个鸡血石的展示网站,让更多的人认识鸡血石。但是考虑到单单做一个展示网站的话太单调,而且很多内容用百度、谷歌等搜索引擎都能够搜索到。由于我生长在鸡血石的发源地,希望能让更多的人认识它,也希望能够有一个更宽阔的市场,这样也能带动家乡的经济发展。在鸡血石的发源地浙江省临安市大峡谷镇玉山村,几乎每家有有自己的鸡血石藏品,也有不少人家有自己的店铺。随着信息的发展也越来越多人将目光投向了网络,陆续也有了很多的淘宝鸡血石店。但是这些都是个体经营,所以我想是不是可以大家组织在一起形成一个企业,所以就有了这个鸡血石企业网站的制作。昌化鸡血石形成于7500万年前的火山活动,在浙江省临安市的名为玉山的小山上被发现。但是它在20世纪90年代末才被发现期价值,在1999年以来均被评选为首选国石之一,被称之为“中华瑰宝”,可见其价值巨大。起初 玉山的村民们不知道其价值,有将它丢弃的,也有低价卖出的,所以很多极品的鸡血石已经在那时候被埋没了或者流出了。可见信息不流通是多么可怕的一件事,所以我想建立一个鸡血石的网站让更多的人了解它,发现它的价值,让它能够成为家喻户晓的真正的国石。 随着经济社会的发展,计算机已被应用到社会生活的各个领域。与此同时,互联网作为信息技术的通信桥梁连接着全球的计算机,而网站作为网络信息主要的表现形式而且还是互联网信息的主要承载者,在Internet上表现出其及其重要的地位,并发挥着其及其重要的作用。无论是在国内还是国外都得以迅速的发展和壮大,并被人们重视和关注。为什么要建设一个企业网站,主要是的几个原因有:宣传企业,加强企业产品的推广和营销,很多的企业将企业的面貌及文化做成一本本的小册子,让大家认识它,这样做的话就成本太高,没有网站宣传来的经济、迅速和高效。建立网站的企业还能够扩展营销的手段,加强跟客户的沟通,了解客户的想法才能更好的维护和改善公司形象。在网络营销中,企业网站有产品查询展示型网站,品牌宣传型网站,企业涉外商务网站,网上购物型网站,企业门户综合信息网站,行业、协会信息门户交易型网站,沟通交流平台,政府门户信息网站。我选择制作的网站主要是产品查询展示,当然也包括招聘,留言等功能。根据调查目前国内企业网站功能模块需求分析,主要有这么几个模块是:会员注册,留言板,产品展示,新闻发布,在线客服,友情链接,幻灯图片,论坛。网站后台主要有上传、下载,网站后台管理分级,视频管理,背景音乐管理,在线调查,广告管理等。由于技术有限以及考虑到我的网站用途,我选择了几个模块运用在网站制作上。有技术不足的原因,也是因为,选择网站的功能的时候要考虑到,这个功能是否必要,不能把一些没用的功能随便的放在网站里,那么就显得这个公司太过于随便,太杂乱。一个企业网站也代表着企业的形象,所以不管在界面设计还是在功能选择方面都要慎重考虑。1 网站设计分析网站设计制作需要的软件主要有:Dreamweaver、Photoshop、flash。做一个静态网站这些软件是足够了,但是随着科技、信息等的发展,静态网站已经满足不了网民们的要求了,所以我们还需用到ASP等实现动态网站的技术。要做一个网站首先我们得了解我们所需要用到的软件,熟练的掌握它的功能才能做到事半功倍的效果。做为一个动态网站不仅需要熟悉这些软件,还要制作数据库,清楚数据库与前后台的关系,才能根据所做的数据库制作并实现客户回馈、留言等动态功能。因为做的是一个鸡血石的企业网站,所以从设计风格上不能太花哨,不能太可爱。做设计不能按照自己喜欢的风格来做,要按照实际,分析这个网站需要怎么样的风格,需要运用什么样的元素来做修饰。鸡血石可以称之为中国的国石,被誉为“石之皇后”。所以它的价值是很高的,我们的设计要体现它的但是也不能太浮夸。一般人们购买鸡血石是为了买卖赚钱,或者是收藏。购买一个鸡血石往往看的是它的本身价值,和升值空间。主要是从它的质地和血色入手,所以我们在选择网站的颜色和质感上要特别的主要,不能太过华丽掩盖了鸡血石的价值。每个网站都有自己的设计风格,在不同的设计师创作手法不同,表现出来的效果也是迥然不同的。在设计风格上有韩版风格的,欧版风格的,还有web2.0风格的。在权衡比较下,我选择了欧版的设计风格,这种风格在结构上会比较的清晰让人一目了然,采用比较朴实的颜色而且很统一,平面感比较强。从颜色搭配上分析,鸡血石血色是红的,底是黄的或黄偏白,但是还是以红的血色为主。而红色是一个比较鲜艳的颜色。我们从背景颜色或者说网站的主题颜色的选择上,就不应该再选一种鲜艳的颜色,可以以一种冷色调来打底,这样更能强调它的色彩。在细节的修饰方面也要采用和主题色相近的颜色,这样不会显得页面颜色太丰富,感觉太花哨没有强调性,又体现了层次感。所以在导航的设计,标题的设计采用的色彩都不会与主题颜色偏差太大。版式设计就是页面模块的排版,主要是排列主页上的内容,以信息的可阅读性为主要目的。排版的设计分以下几种:骨骼型结构、对称性结构、满型结构、焦点结构。焦点结构和满性结构对图片及色彩的要求都很高,一般来说这两类的色彩设计上都比较的突出,但是内容设计就有些简单。所以这样的结构不适合运用在我的网站上,因为网站主页,突出的主要是内容,这里就用骨骼型的结构来排版。骨骼结构是指像人的骨骼一样分成上中下部分来排列,内容分成两、三栏的结构来排列。1.1网站设计概述作为一个企业网站,主要设立了这样几个模块:首页、公司公告、关于我们、新闻资讯、产品展示、营销网络、客户回馈、在线订购、访客留言、招贤纳士、联系我们。网站首页可以说是网站的门面,大家浏览你的网站首先看到的就是你的首页,所以首页不仅要美观,还得有丰富的内容,所以我把所有模块都在首页上介绍性的展示出来了。目前,我在网站首页上将一些产品以及其他自己制作的图片运用幻灯的效果展示出来,在多个静的模块中,添加了一个动的模块可以更加的突出,抓住人的眼球,吸引人去点击查看。整个网站我采用的是同一的banner和导航栏,只有正文的内容是不一样的,这样就可以排除对模板可编辑区域排版的复杂性。子页面的框架基本上符合网站的整体风格,在每个子页面的左下方都有联系方式,这样就能够更方便联系到我们,当然要是想看我们的详细联系方式就要到联系我们中去查看了。在主页以及各个子页面都做完以后就要添加各个模块的动态交互功能了,在这里我是直接在各模块的文件中加入一段链接代码直接进行数据库连接的,各功能模块分别是resume.asp, recruitment.asp, order.asp, link.asp, info.asp, guest.asp, channel.asp这样就可以达到动态交互的效果了。 由于自己没有开过公司,所以欣赏了一些企业网站的设计,总结出了这么几个功能。有新闻资讯模块,提供行内新闻,让业内人士及时的了解鸡血石的商业动态。然后有留言模块,方便大家留言。设计这个功能主要是为了和鸡血石爱好者有一个深度的交流,也让更多的人参与到这个交流中,加深多鸡血石的了解。有时候可能会聊到有鸡血石的买卖或者拍卖会,这样就拓宽了鸡血石的交易市场。还有一个招聘模块,提供这么一个就业平台,就算不了解鸡血石也行,我们会让他了解各种鸡血石的知识,让他也喜欢上这么一个收藏品,这样鸡血石的爱好者行列中又多了一位了。 1.2开发工具的选用及介绍 在本网站的设计中主要用到的工具是:Dreameaver、Flash、Photoshop、access和asp技术,下面是用到的各个工具的详细介绍。1.2.1 Dreamweaver CS5 Dreameaver和Flash和Firework是Macromedia公司推出的一整套网页设计软件,在国内被合称为“网页三剑客”,其中,Flash是用来生成矢量动画的,Fireworks是用来制作网页图像,而Dreamweaver可以进行各种素材的集成和网络发布。 Dreamweaver是创建和管理网页的专业化可是编辑器,它有网页设计、网站开发、站点管理等强大功能还有可视化、支持多平台和跨浏览器的特性,让它成为网站设计制作的首选工具。 用户可以直接在Dreamweaver中进行手工代码的编写,也可以直接使用Dreamweaver中的div,行为,css,模板等技术进行可视化的操作。Dreamweaver提供多种可编辑功能,比如说插入表格、表单,能够更方便用户进行网页的编辑。而且让不会编写任何代码的用户也能够快速的创建页面,可以直接将用Photoshop等做图工具制作成的图片直接导入其中加以利用,让用户设计网页和管理网站变得更容易。它还有丰富的媒体支持功能,能够方便的加入其他的媒体,在处理动画方面还提供时间线和行为两种控件产生交互式相应。Dreameaver不管是对网页编辑的初学者还是资深者都是一个很好的网页编辑的软件,有可视化界面,可以完全不用输入代码也能做出完成的页面,而且它有实时的视图功能,可以看见每一步操作呈现的效果,可以及时的进行修改。每个软件的版本升级都会新增一些功能或者进行原有动能的优化。Dreamweaver CS5的新增功能有集成CMS支持、CSS检查、Adobe BrowswerLab集成、PHP自定义类代码提示、CSSStarter页、与Business Catalyst集成、保持跨媒体一致性、增强的Subversion支持、仔细查看站点特定的代码提示。1.2.2 Photoshop CS5 Photoshop常被简称ps,是在图像处理领域最常用的工具。它主要有图像编辑、图像合成、校色调色、特效制作等动能,在制作海报,广告,杂志,网页等精美作品中起到了很大的作用,平时闲着无聊也可以用来修饰自己拍的数码照片给自己修饰的美美的也是一种乐趣。 Photoshop的功能齐全,操作方便,界面美观,版本也很多,而且版本越高功能就越多。要想用Photoshop做好图像的处理,主要还是熟悉它的基本环境,熟练的使用工具箱,因为它的版本功能提升了,但是主题功能还是不会变的。在网页制作的图像处理方面主要用到的还是选区,图层、通道、滤镜等操作,所以对这些操作要更加的熟悉一些。如果用户用illustrator已经习惯了,再来用Photoshop的快捷键可能会不太习惯,没有关系因为在Photoshop中快捷键是可以按自己的习惯重新定义的。它的配置要求是Windows和Mac os系统。Photoshop是一个专业的做图软件,可能对于那些不是专业人士的话,美图秀秀可能是比Photoshop更加的受欢迎。但是在专业性方面这两者一比较就出结果了,要想让图片有更丰富更美妙的效果,Photoshop绝对是首选。Photoshop的功能很强大,但是学习起来并不是很难,主要是要清楚的记住每个图标的功能,要想显得更专业的话就记住每个功能的快捷键,这样操作也会快速很多。学习这样的软件不能被他繁多的快捷键吓到,只要每次操作都用它的快捷键,熟练了就很容易记住了,记住以后就能达到事半功倍的效果了。主要的快捷键功能有:基本操作、图像调整、图层操作、图层混合模式、选择功能、视图操作和文件操作。Photoshopde的版本越高它的功能可能就越多,而且一些功能得到了优化。Photoshop CS5在新增功能的特性有操作更加简单,内容的感知型填充HOR成像及原始图像处理。1.2.3 Flash 8.0Flash是一种由Macromedia公司设计的交互式矢量动画制作软件,后来Macromedia公司被Adobe公司收购,成为了Adobe Flash。它的格式有.fla和.swf两种。.fla文件直接可以在Flash中进行修改和保存。.保存成swf了以后就不能在修改,除非打开.fla文件重新保存成.swf文件。Flash制作的文件都只有几千字节,所以非常适合应用于网页上。Flash中特殊的Action语句能让用户很方便地控制动画播放,提高它的交互性。但是要使用这种功能,可能需要会一些代码,对于完全不会代码的制作人员会有些麻烦。它是一个优秀的矢量动画制作软件,已经成为网页动画设计最为流行的软件。它既基础的三大功能也是最重要的功能分别是:绘图和编辑图形、补间动画、遮罩。Flash的用途非常的广泛,是网页上非常流行的一门技术。它主要用于网页制作、广告制作、平面动画、网络游戏等。Flash的基本操作和其他软件的差不多,界面美观,它的一些基本操作几乎都可以在界面上找到相应的工具。在Flash上的操作简单易学。主要是制作元件,然后在舞台上运用元件,利用时间轴完成动画的时间编排。时间轴的单位是帧,每一秒为一帧。我们还可以分步的进行动画的制作,然后将他们拼凑起来。Flash 8.0的新增功能成为了它的一个亮点滤镜,滤镜的分类主要有投影、发光、斜角、渐变发光、模糊等。1.2.4 ASP动态网站脚本语言 ASP指的是Active Server Pages(动态服务器页面),它是微软公司开发的一项技术,要在IIs(Internet Information Services)中才能运行。ASP和HTML的区别在于:当浏览器请求某个HTML文件时,服务器会返回这个文件,而当浏览器请求某个ASP文件时,IIS将这个请求传递给ASP引擎。ASP引擎会逐行地读取这个文件并执行文件中的脚本,最后ASP文件将以纯HTML的形式返回到浏览器。ASP之所以成为动态服务器脚本是因为它能动态的编辑、改变或者添加页面的任何内容。它的优势在于它的简易性和速度,而且ASP的代码无法从浏览器端查看,所以确保了站点的安全性。优秀的编程还可以将网络的负载降至最低。在本网站中主要运用了两种脚本语言VBScript和javaScript,在后台设计中主要运用的是VBScript,但是在前端的页面设计中则用javaScript比较多。javaScript是一种轻量级的编程语言,可以插入HTML页面,之后可以由所有的现代浏览器执行,是一种简单易学的脚本语言。如果要从javaScript访问某个HTML元素时可以用 document.getElementById(id) 的方法。ASP的网页文件后缀名是.asp,现在常用于各种动态网站中。它采用的脚本语言是VBScript作为自己的开发语言。脚本程序是在服务器上运行的,web服务器处理所有的脚本,将它以标准HTML页面的形式传到浏览器上,就不用担心浏览器是否能处理脚本了。而且用户看不到正在浏览的页面的脚本,就不用担心会被别人复制。 Asp的运行环境有下列几种:(1) Windows 2000+IIs 5.0(Internet信息管理器5.0)。(2) Windows XP+Iis 5.0(Intetnet 信息管理器5.0)。 (3) Windows 98+PWS4.0(personal Web Server4.0,个人Web服务管理器)。浏览asp文件只要在浏览器中输入以下地址:网站前端: http:/localhost/index.asp网站后台: http:/localhost/_admin/cms_login.aspAsp文件主要有以下几种组成部分:(1) 普通的HTML文件,也就是普通的Web的页内容。 (2) 服务器端的Script程序代码:位于内的程序代码。 (3) 客户的 Script的程序代码:位于内程序代码。1.3关系型数据库的选择1.3.1 Microsoft Office Access简介 Microsoft Office Access是一个界面友好、易学易用、开发简单、接口灵活用于开发小型管理信息数据库系统的软件。Access数据库以文件形式保存,扩展名为.mdb。它有其中对象组成,分别是表、查询、窗体、报表、宏、页和模块,其中表是数据库的基本对象,是创建其他几种对象的基础。我们能看到的数据库就是一张张的表格,里面填写着数据,就是表示数据存储在里面。Access比起其他的数据库来说操作方便简单、易懂,但是也有缺点:它的安全性不够,要是作为服务器的话,对服务器要求很高,容易造成MDB的损坏。1.4网站定位网站主题本网站的主题是介绍鸡血石及鸡血石发源地的一些信息,让更多的人认识鸡血石,也招聘一些想要从事鸡血石相关工作的人扩展企业。鸡血石作为中国的国石之一,但是认识鸡血石的人却没有很多。现在鸡血石的升值空间比黄金还高,但是认识黄金的人远远多于鸡血石。所以想通过这个网站能让更多的人认识它。该网站主要是介绍鸡血石给大家认识,可是如果作为一个展示型网站,需要做很多展示的东西,而且作为鸡血石,购买它的人对它的质地、颜色要求很高,现在不同的显示器分辨率都不一样,所以如果光做展示的话,可能吸引不了人,因为每个玩石的人都喜欢把石头拿手里仔细瞧瞧,而且会用镁光灯观察它的质地。所以整个网站,展示只占其中的一部分,主要就以介绍为主,交流为辅,作为一个交互型的综合网站。网站整体风格本网站主要是以蓝色为基调。蓝色是个大气稳重的颜色,给人的感觉不会太随便也不像黑色那样给人沉重的感觉。而且鸡血石的颜色是偏暖色的,在蓝色的冷色调上,加上鸡血石的展示图片,有一种强调的作用,更加突出了鸡血石的色彩。在banner以及栏目的标题上面用了纹理的效果,主要是想给人一种温馨的感觉,给想来应聘的朋友一种没那么拘束的感觉。鸡血石是一种贵重的石头,主要以红的和黄的居多。所以在颜色搭配上要比较注意。开始考虑的是运用中国的传统元素,比如说飞檐,或者说是博古架上那种复杂的图案,可是作为一个企业网站,并不是购物网站或者是展示的网站,加那么多花纹,过于复杂了,所以选择了这么一个简单清新的设计。在整体都是蓝色的背景下,有一点点白的的边边,将各个模块分割开,然后在导航栏及内容标题上,用蓝白混合的颜色和带着有凹凸感的纹理的效果,组合成了这么一个大气又不严肃的网站。网站banner鸡血石几个大字鲜明地放在了整个网站的左上角,让人一眼就清楚这是个什么网站。由于还没有想好公司叫什么名字,所以就用鸡血石三个字代替,以后有正式的公司,就可以在显示这三个字的图片所属文件夹里,把图片直接替换掉就好了。在导航的下方还有一个动态的幻灯效果,这是一个亮点,在整个页面中是唯一的动态效果,显得更加的突出。幻灯里面的图片主要是最新拍卖会的一些场景,一些产品的图片,然后是做的海报。作为整个网站的一个亮点,所以在图片制作和选择上要很好的展示网站的整体风格和注重企业形象。在导航栏的项目标题设计上,因为考虑到每个项目的宽度及间距,我将每个千亩的宽度设计为刚好能容下四个字的宽度,项目名称也全部设置为了四个字的标题。1.5系统构思本网站前台包括首页、公司公告、关于我们、新闻资讯、产品展示、营销网络、客户回馈、在线订购、访客留言、招贤纳士、联系我们等栏目。以下是系统构思的图解1.1,1.2所示:一级页面: 图1.1一级页面结构图图1.2二级页面结构图网站后台如图1.3所示:图1.3后台竖型结构图系统设置 基本信息:设置网站的基本信息,如网站名称、联系方式、QQ、网站关键字等操作。 账户管理:增加账户管理员,修改管理员信息等。信息管理 导航管理:可自定义导航菜单名称,支持外部链接、排序等。 图片管理:设置网站的幻灯片图片,不限制幻灯片个数,支持幻灯片名称和链接以及显示的顺序等。 添加信息:支持上传缩略图、关键字,关键字描述和内容介绍等,支持是否显示当前信息。 管理信息:可按分类管理查看信息、批量删除等。 添加频道:可设置所属频道分类,频道类型,关键字和描述等。 管理频道:支持二级分类,修改和删除。交互管理 留言管理:管理留言,可回复留言。 招贤纳士:在线发布招聘信息。 友情链接:支持文字和图片链接,不限制个数,可随意排序。以及腾讯在线QQ功能前台后台综述 实现客户的留言,客户对鸡血石产品的查看,实现客户对公司新闻以及公告的查看,实现公司招聘信息的发布,可以提交订单,可以查看公司的相关信息。 管理员可以对客户的留言进行回复,可以查看用户的订单,并与之联系。 管理员登陆后可以发布公告,发布新闻,发布产品,可以编辑公司的相关信息,可以查看应聘者提交的应聘信息。 管理员登陆后可以管理友情链接,可以管理客服数量,添加客服后客户可以在前台直接与其进行qq聊天。 管理员可以对导航进行管理,实现了全站的动态控制。1.6网站栏目介绍 本网站的栏目有首页、公司公告、关于我们、新闻资讯、产品展示、营销网络、客户回馈、在线订购、访客留言、招贤纳士、联系我们等栏目,下面是各栏目的详细介绍: 首页:我们的banner想表现的是希望和大家一起来认识一起来欣赏鸡血石,交流一些买卖的经验,交流一下收藏的心得,也希望介绍鸡血石的发源地和在那里的一些拍卖信息。这个作品可能从页面上看不是太美观,这里的设计主要以简单为主,我觉得作为一个企业不应该太过于花哨,所以主要侧重了它的功能。网站的主页包含了整个网站设计的内容,还有一个联系我们栏目,方便大家联系到我们。公司公告:主要介绍了一些发源地的拍卖信息,还有一些优惠活动,吸引大家购买。关于公司公告这个模块,作为一个企业及时的发布一些公司的动态是很有必要的。可以让广大的客户及时了解公司的动态,比如说公司最近出了什么新产品,也可以让公司的员工及时的得知一些公司通知,比如什么时候放假。 关于我们:主要是公司的简介,因为公司还没有成立,就编辑了一些鸡血石的介绍,包括它的来源,怎么辨别真假等。 新闻资讯:发布了一些行业新闻,主要来源于各大新闻网站,让用户更容易地了解鸡血石的商业动态。有些客户购买产品之前可能会去了解下这个产品的新闻动态,这里添加了新闻动态的模块是为了让客户更容易,更清楚的了解产品的一些相关信息。而且很多人购买鸡血石是为了收藏,在购买之前会考虑到它的收藏价值以及升值空间,来确定是否购买。该网站的新闻资讯模块会显示新闻的发布时间,发布者,及来源等,这样就会让人查证,增加客户的信赖度。 产品展示:介绍了各种鸡血石产品,用图片和文字来描述,只是技术有限没能够利用三维技术展示它的整体外观。 营销网络:简单的介绍了我们的营销渠道。添加这个模块可以以让广大客户更清楚我们的销售渠道,如果不方便在线购买的话可以通过其他渠道够买。让客户了解更多的购买渠道,是该企业有更大的机会与客户完成相互间的合作。 客户回馈:列举了客户在登录我们网站后的一些想法或者意见及建议。设置这个模块和留言模块的目的差不多,不同的地方是:这个模块主要是针对购买过我们的产品的客户设计的。作为一个商务型的企业,应该对自己的产品在广大客户中的受欢迎程度,及他们对本企业产品的意见有足够的重视。在购买我们的产品之后,很多客户可能对我们的产品有一些意见或者建议那么他就可以通过这个模块回馈给我们。或者有些客户信任我们的公司想找找一些我们公司没有的产品,也可以通过这个功能告知我们,如果我们正好知道哪里有这样的产品就可以帮助他购买。 在线订购:这是一个订购系统,广大的客户可以通过对我们的产品询问、了解,选择自己喜欢的产品进行订购。在订购系统上必须填写正确的信息,确保我们的产品能够顺利送达。设置在线订购功能,主要是为了方便广大的客户订购我们的产品,扩展我们的产品销售渠道,让客户不用远距离的来回奔波购买,节省了客户宝贵的时间。当然这个功能主要是为了与我们长期合作的客户预备的。因为购买鸡血石这个产品,需要考究它的质地,血色,一般的平面展示加上显示器的分辨率不一是无法显示出它的真正样子的,所以这个功能主要为了一些跟我们长期合作的,希望从我们公司批发的客户准备的。 访客留言:是一个留言系统,如果有访客想要和我们进行鸡血石的深度交流探讨,又或者想购买我们的产品,可以通过留言的方式让我们知道,我们通过后台管理系统得知他的留言会尽快的回复。该留言模块的设置是为了让该企业能够更清楚的了解自己的不足,或者和广大客户进行一个更深的交流,加深客户对该企业的好印象。 招贤纳士:主要是我们公司招聘的岗位,上面有职位名称、学历要求、语言要求等数条招聘基本要求和具体要求。添加这个模块能够更容易的招聘到爱好鸡血石的人员,因为浏览该网站的的基本上是爱好鸡血石或者是懂一点鸡血石的知识的。每个公司都需要属于自己公司的人才,如果这个人才对本公司的产品有一定的兴趣,那么公司人员之间的交流就会更多,相处就更融洽,更能热爱这份工作,热爱这个公司。 联系我们:页面上列出了各种公司的连续方式,方便应聘人员或者想进行鸡血石深度交流的人可以很快的联系到我们。由于考虑到能让客户、应聘人员能够更方便的联系我们,所以增加这个模块,也考虑到以后公司的扩大,营销渠道的沟通,专门开设了一个页面来显示我们的联系方式,希望能有更多的人联系我们。 友情链接:这是直接在每个页面的下方添加的一个模块,没在添加在导航栏里面,但是它也是可以在后台添加和管理的,添加这个更有利于本企业与其他企业相互推广,让企业之间合作更紧密,以达到双赢的目的。本网站的登录,留言,订购等功能都是在后台上进行操作和修改的如图1.4所示:图1.4后台效果图2详细设计2.1主界面制作2.1.1banner制作过程 本网站的banner模块是由inc_header.asp所包含。该模块运用了一个蓝色的纯色背景,非常的醒目,在导航栏的位置运用了一个比背景稍浅的蓝色,让导航栏更加的清晰,更能抓住眼球。然后在导航栏下面的位置,运用了一个幻灯的效果,这是整个页面中唯一的动态的效果,是整个网站的特点,在静的背景里面加了一个动态的效果使得整个页面不会太死板,更加的充满活力。幻灯上主要是播放一下发源地的动态信息,比如说拍卖会,或者是一些产品展示供人欣赏。在整个banner的右上角添加了几个功能如:设为首页、加入收藏、设置字体和时间播放功能,使得导航上面部分太过单调。右上角显示有一个系统时间,这是直接插入了一个javascript脚本,有个系统时间,会显得改企业更有时间观念,这个设计灵感主要来源于手表,因为有人说过带手表的人给人感觉更加有时间观念,更加容易让人信任,这跟在这里添加系统时间是差不多的意思,就是希望该网站可以给人信任的感觉。banner的效果图如下图2.1所示:图2.1banner效果图2.1.2主页制作过程 主界面的制作,首先要想好主页上要显示那些内容然后在Photoshop中建立一个合适大小的文件,按照自己的想法以及按照一定的规范,绘制网站的效果图。第一步要想好它的布局,考虑布局的合理性,或者参考其他优秀网站的布局进行分析修改。有几个模块可以做成空白的部分,因为到时候可以直接才Dreamweaver中进行制作。完成了整个效果图的制作以后进行切片将需要用到的图片在在Dreamweaver中编辑放置到合适的位置另存为index.asp。然后用相同的操作方法制作各个子页面。各个页面都制作完成后放入同一个文件夹,将它们进行数据库的链接,就可以直接在后台数据库进行页面上内容的修改了,比如说修改、添加、删除导航栏的内容,举个例子:把其中的产品展示删除,那么这个模块就再不能修改了。导航栏的长度是固定的,所以在导航项目已满的情况下就不能再添加了。在整个页面的制作方面,首先搭建好页面的框架,用div+CSS制作它的整个页面布局,所有的页面链接的是同一个css文件,因为各个页面的导航都是采用的同一个,有变化的部分不多,所以在这里就把各个样式写在了同一个文件中,这样也能更方便的整理文件。搭建好框架之后,就如上面说的,添加制作好的图片,然后用asp技术连接数据库使整个页面功能更完整。主页效果如下图2.2所示:图2.2主页效果图2.1.3新闻资讯模块此模块主要显示的是类型、发布时间、发布者、来源、点击数、详细内容和标题。这里的发布时间与发布时网站右上角显示的系统时间是一致的。这个模块主要是为了能够让鸡血石爱好者能够及时的了解鸡血石的一些新闻动态。这个模块在管理上就有些麻烦,因为要从其他地方选择各种新闻动态,要在第一时间就能够在该网站添加,才能保证新闻的新鲜度。在功能制作方面,几个功能模块方法都差不多,就是先做好数据库然后用set rs的方法连接数据库。新闻资讯模块如下图所示: 图2.3新闻资讯模块图2.2后台设计 后台的设计主要过程是:首先用Dreamweaver的div+css布局,刘出每个模块的位置,然后用asp技术添加asp脚本,最后链接数据库,实现页面的功能设计,测试修改以后确保功能能够完整的实现。2.2.1留言板设计 制作这个留言板主要是为了能够和爱好鸡血石的朋友一起探讨、研究、欣赏鸡血石,彼此分享一下鸡血石方面的心得,互相交流下买卖的市场,共同合作、共同致富。所以我这里制作了访客留言的这么一个模块,如果有不知道鸡血石是什么的朋友,我这里也会详细的给出介绍。这里也可以解答或者恢复他人的问题,这样一个多人互动的方式,使得气氛更加的活跃,网站的访问量也会随之增加吧。留言版的功能是通过数据库后台管理实现的,客户通过前台的界面,提交留言信息,数据会传送到数据库存储,然后我们通过留言板后台查看到留言信息,按照留言上的内容选择性的进行回复。留言板后台还有一个功能就是留言审核,如果有人在我们网站中发表不文明的字句或者其他东西,我们可以在留言管理中进行删除来维持企业形象,不能让一些恶意的攻击来破坏其他客户对企业的认识,影响其他客户的情绪。留言板界面如下图2.4,2.5所示:图2.4留言模块图图2.5留言模块图 如图2.4所示在提交留言表格的下方,我们直接可以看到所有人的提问回复,就跟聊天系统一样快速方便。在提交按钮的上方还设置了一个验证码功能,防止用户批量的留言,防止大量的用户匿名回复。这里采用的是最基本的四位数字验证码,而且数字清楚可以看清,不会让用户因为验证码看不清或者太复杂不愿意输入而放弃留言。2.2.2招聘模块制作作为一个企业最不可缺少的是人才,所以在这里加了一个招聘模块,希望有鸡血石爱好者能够加入我们企业。该模块主要是由表格的形式表现出来的,主要内容有职位名称、学历要求、性别要求、年龄要求、薪金待遇、语言要求、招聘人数、工作地点、有效期至、详细要求。点击应聘此职位要求填写信

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论