2013计算机专业毕业论文-自行车企业门户网站的设计与实现 - 图文

XXX学院

毕 业 论 文

自行车企业门户网站的设计与实现

学生姓名：XXX

学 号：0305xxxx

年级专业：2010级计算机网页设计2班 指导老师：XXX

系 部：计算机工程系

广东·XXX

提交日期：2012年5月

深圳学历教育www.szstudy.com.cn深圳远程教育 深圳成人高考www.szstudy.com.cn深圳自考

【目 录】

摘要????????????????????????????????????????3

1.前言????????????????????????????????????????4 2.概述????????????????????????????????????????4

2.1网站建设起因?????????????????????????????????4 2.2 开发工具简介?????????????????????????????????4

3.网页需求分析???????????????????????????????????5

3.1 网页的界面设计????????????????????????????????5

4.网页总体规划??????????????????????????????????6

4.1制作网页的一般步骤??????????????????????????????6 4.2 制作网页的结构????????????????????????????????7 4.3 网站组成部分??????????????????????????????7 4.4页面制作步骤??????????????????????????????10 4.5页面内容设计??????????????????????????????11

5.总结????????????????????????????????????????16 参考文献?????????????????????????????????????17 6.致谢????????????????????????????????????????18

第 2 页 共 19页 2

深圳学历教育www.szstudy.com.cn深圳远程教育 深圳成人高考www.szstudy.com.cn深圳自考

自行车企业门户网站构建

作 者：XXX 指导老师：XXX

(XXX学院2010级计算机应用网页设计2年，XXX 523808)

摘要：随着人民生活水平的不断提高，国内多个城市相继禁摩，电动车，自行车开始活跃于街头，很多人喜欢骑自行车、电动车、乘坐公交车代步；电动车使用成本比摩托车要低，电价的稳定，低价，使用方便。与摩托车使用石油相比，价格优势明显，加上摩托车要考驾照，年检，超红灯会被扣分罚款等原因，很多市民选择了电动车代替摩托车。现在市场上自行车品牌繁多，质量价钱参差不齐，市场上卖得好的自行车都是大品牌，新晋品牌难以争夺市场。要想多推广自己的产品，吸引更多人购买，吸引经销商进货销售，我准备做一个关于自行车企业的网站。在参考了多个企业的官方网站后，发现各个企业网站的设计框架都是通用的，分类清晰，明了。让人简单了解到该企业的信息，产品信息，公司联系信息等。在这里使用的多是用页面框架来制作分页，但在子页面我还没清晰的情况下，我使用了普通页面，把主页面重复内容复制处理，这样维持了风格的统一，更加方便后期的修改工作，灵活性更高

本网站主要展现给力派车业公司的相关资讯，分为公司信息、产品信息、行业信息、联系信息、招聘信息、和下载信息。浏览者可以直接查看到相关信息。

本网站立足于中小型企业网站的模块与风格。其页面清晰规范，计算机的操作系统简单，可以随时根据用户的要求修改和完善。

关键词：企业网站, 自行车

第 3 页 共 19页

3

深圳学历教育www.szstudy.com.cn深圳远程教育 深圳成人高考www.szstudy.com.cn深圳自考

1 前言

在信息技术飞速发展的今天，人们获取信息的方式更多是来源于互联网。而吸引浏览用户的则是视觉效果出色、信息量丰富、使用起来便捷的网页，所以网页设计尤为重要。

互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。网页设计伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要。网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提供更方便快捷的信息。

面对日益加快的生活节奏和信息社会日新月异的变化，企业极需要一种快捷，便利的平台来对外宣传企业形象,介绍最新产品和及时售后服务。如何运用现代化信息技术完成这一目标，建立“一座企业与顾客之间畅通无阻的大桥”已成为企业中应该解决的重要课题之一，本网站正是为这一目标设计制作的。

2.概 述

2.1网站建设起因

在此次毕业设计中，我是到了一个私营自行车企业去实习，公司老板不懂网站，需要开发网上销售市场，让广大经销商，消费者知道我们这个品牌，更好的推广产品，让我做一个企业网站，再做淘宝销售工作，实行网络销售，多个渠道销售产品。于是我把这个作品当成毕业设计去做，从实践中学习，完成毕业论文。

意义：在做好了企业网站后，可以开发外地市场，做订单生意，之前都是做本地经销商的小量订单，发展缓慢，盈利不高。要开发市场，就需要有一个网站做推广，宣传。让更加多经销商对我们的产品有兴趣，实行试销。

2.2开发工具简介

1、网页排版工具—— Macromedia Dreamweaver 8

Macromedia Dreamweaver 8是由Macromedia公司推出的，用于网页开发和网站管理的专业化设计工具。它采用了多种新技术，具有设计和开发网站过程中需要的网站管理、网站设计、页面制作、多媒体制作和动画制作等丰富实用的功能；它具有友好的操作界面，在文档窗口中可以打开各种浮动面板，同时还可以使用系统内置的多种对象进行操作。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。从对基于 CSS 的设计的

第 4 页 共 19页

4

深圳学历教育www.szstudy.com.cn深圳远程教育 深圳成人高考www.szstudy.com.cn深圳自考

领先支持到手工编码功能，Dreamweaver 提供了专业人员在一个集成、高效的环境中所需的工具。开发人员可以使用 Dreamweaver 及所选择的服务器技术来创建功能强大的 Internet 应用程序，从而使用户能连接到数据库、Web 服务。 2、网页图像设计工具——Photoshop

在网页制作过程中，首先要使用Photoshop 设计网页和整体效果图、处理网页中的图像、背景图及网页的图标、按钮等。Photoshop是平面图像处理业界霸主Adobe公司推出的跨越PC和MAC两界首屈一指的大型图像处理软件.它功能强大,操作界面友好,得到了广大第三方开发厂家的支持,从而也赢得了众多的用户的青睐。

3.网页需求分析

3.1网页的界面设计

由于越来越多个人开始建立自己的网站，网站除了具有传播信息的功能外，还往往代表个人的形象。网站建设商业化和广告化的趋势，对网页设计的艺术性提出了更高的要求。虽然HTML语言提供了对常用Windows标准控件的支持，但是，由于Windows标准控件的形状和颜色十分单一，网页的视觉效果可能会很差。例如：列表框和下拉列表框只能呈现凹陷边框，而且下拉列表的箭头的颜色不能改变，滚动条只能出现在窗口的下边和右边，当网页分成多个帧的时候，滚动条就不可避免的出现在网页的中间，破坏网页的整体性。若在网页的设计中主动配合Windows标准控件的形状和颜色，网页的创作空间就会受到限制。

(1)文字：文字元素是信息传达的主体部分。网页中的文字主要包括标题、信息、文字链接、几种主要形式。标题和传统媒体中信息传达的基本作用相同，是内容的简概说明一般比较醒目、优先编排。文字作为占据页面重要比率的元素，同时又是信息重要载体，它的字体、大小、颜色和排布对页面整体设计影响极大。

(2)图形：图形在网页界面中具有重要作用。合理的运用图形。可以生动直观、形象地表现设计主题。网页中常用的图形格式包括jpg和gif，这两种格式压缩比高，得到了规范浏览器的支持，下载速度快，具有跨平台。

(3)超级链接：超级链接技术可以说是万维网流行起来的最主要的原因，它是从一个网页指向另一个目的端的链接，例如指向另一个网页或相同网页上的不 同位置，这个目的端通常是另一个网页，但也可以是一幅图片，一个电子邮件地

第 5 页 共 19页

5

深圳学历教育www.szstudy.com.cn深圳远程教育 深圳成人高考www.szstudy.com.cn深圳自考

址，一个文件，一个程序或本网页中的其他位置，其载体通常是文本，图片或图片中的区域，也可以是一些不可见的程序脚本。

当浏览者单击超级链接时，其目的端将显示在Web浏览器上，并根据目的端的类型以不同方式链接。例如，当指向一个AVI文件的超级链接被单击后，该文件将在媒体播放软件中打开;如果是指向一个网页的超级链接，则该网页将显示在Web浏览器上。

(4)表格：在网页中表格用来控制网页中信息的布局方式。这包括两方面：一是使用行和列的形式来布局文本和图像以及其他的列表化数据；二是还可以使用表格来做。

4.网页总体规划

4.1制作网页的一般步骤

(1)总体设计，设计出总框架图，各种表现手法和形式的结合。设计首页的考虑，力求布局合理，美观大方。主题鲜明，结构合理，不能堆砌。 (2)素材制作，收集。

(3)组织网页，将丰富的内容和多样的形式组织在一个统一的结构中，达到形式和内容统一，协调,保持风格一致。

（4）开始制作网页。具体操作时，首先要创建个人站点，再充分利用Dreamweaver的功能建立各个网页。

（5）最后，等网页做好了，就该发布站点了。站点发布后，为了保持站点的吸引力，要经常修改网页的内容（添加新的内容，更换已过时的图像等），就要更新和维护你的站点了。

第 6 页 共 19页 6

深圳学历教育www.szstudy.com.cn深圳远程教育 深圳成人高考www.szstudy.com.cn深圳自考

4.2 网页层次结构

网站首页“给力派车业”公司信息、产品中心、新闻中心等接入点

关于我们自 行 车 企 业 网 站 构 建 公司简介，发展介绍

新闻中心自行车行业新闻介绍

产品中心产品分类，文字图片详细介绍

下载中心企业海报下载

招聘中心企业招聘信息

联系我们详细联系方式

图4-1 网站结构图

4.3 网站组成部分

本网站给客户提供一个了解本公司产品的平台，客户可以与给力派车业公司及时地交换意见，达成交易。本公司也可以及时对网站进行更新维护。 1、主要浏览信息本公司功能

第 7 页 共 19页

7

深圳学历教育www.szstudy.com.cn深圳远程教育 深圳成人高考www.szstudy.com.cn深圳自考

(1) 用户可以浏览公司的一些基本的信息

图4-2“首页”界面

(2) 用户可以通过导航进入“关于我们”

图4-3 “关于我们” 界面

第 8 页 共 19页

8

深圳学历教育www.szstudy.com.cn深圳远程教育 深圳成人高考www.szstudy.com.cn深圳自考

(3) 用户可以通过导航进入“新闻中心”页面

图4-4 “新闻中心”

用户可以通过导航进入“联系我们”页面

图4-5“联系我们”界面

第 9 页 共 19页

9

(7) 深圳学历教育www.szstudy.com.cn深圳远程教育 深圳成人高考www.szstudy.com.cn深圳自考

4.4.页面制作步骤

(1)在做top的时候，先用表格分好段，放置好logo，再插入做好的导航条。 网站的导航栏在网站中起引导作用，让读者可以简单了解到网站内容，进行精确的浏览目的

图

4-6“导航栏” 界面

(2)导航条下面放置海报一张，展示公司面貌，产品面貌，颜色也要配合主题风格。

图4-7“海报” 界面

(3)到了主页主体部分，分三部分，左边为小导航栏，中间为内容，主页右边有新闻链接，其他分页只分了2栏。

图4-8“主页主体” 界面

第 10 页 共 19页 10

深圳学历教育www.szstudy.com.cn深圳远程教育 深圳成人高考www.szstudy.com.cn深圳自考

(4)最后是页面底部分，主要显示公司信息，我在这了制作了超链接。

图4-9“页面底部” 界面

(5)在产品分页中，对公司产品做一个列表式的排版，图片加文字介绍产品相关信息，在第一个产品中添加超链接。其他产品设置空链接。

4.5.页面内容设计

(1)做好了top的logo、导航栏、海报部分，开始作主体部分.

(2)在制作好了主页海报后，插入一个div表单，空起一行制作菜单分栏。

图4-10 分栏

代码如下：

valign=\

bgcolor=\

src=\您现在的位置：首页

第 11 页 共 19页

11

深圳学历教育www.szstudy.com.cn深圳远程教育 深圳成人高考www.szstudy.com.cn深圳自考

(3)菜单分栏下面就是主要内容，插入一个表格，分好栏，再在栏里面插入表格。

图4-11 主体内容

(4)左边栏是企业的联系方式。

插入的是1个表格，拆分6行。设置插入图片、输入内容、文字设置、邮件超链接设置。

图4-12 左边表格

设置插入图片、输入内容、文字设置、超链接设置，完成后效果如下图。

第 12 页 共 19页 12

深圳学历教育www.szstudy.com.cn深圳远程教育 深圳成人高考www.szstudy.com.cn深圳自考

图4-13 左边表格

(5)右边表格插入一个大表格，分2行，第一行是菜单栏，第二行是内容。第二行里面再放2个小表格。左边表格为空白，输入文字；右边要再插入一个表格，分2行，第一行是标题，第二行里面插入一个小表格，分5行，右边对齐，顶端定位。如下图

图4-14 右边表格

设置插入图片、输入内容、文字设置、超链接设置，完成后效果如下图。

第 13 页 共 19页 13

深圳学历教育www.szstudy.com.cn深圳远程教育 深圳成人高考www.szstudy.com.cn深圳自考

图4-15 右边表格

5.结束语

我经过一个多月的努力，“给力派车业有限公司”网站终于完成，在整个设计过程中，出现过了很多的难题，但都在老师和同学的帮助下顺利解决了，在不断的学习过程中我体会到实践的乐趣。

在制作过程中，我用的是谷歌内核的浏览器，在ie中浏览发现移位了。为了更好的兼容性，我在ie浏览器反复测试，对网页内容进行多次修改，终于解决了兼容的问题。在遇到困难的时候，实践是最好的老师。写毕业论文是一个漫长的过程，通过这次的做的毕业设计和论文，在不断学习跟修改后完成。

总之，通过毕业设计,我深刻体会到要做好一个完整的事情，需要有系统的思维方式和方法，对待要解决的问题，要耐心、要善于运用已有的资源来充实自己。同时我也深刻的认识到，在对待一个新事物时，一定要从整体考虑，完成一步之后再作下一步，这样才能更加有效。

第 14 页 共 19页

14

深圳学历教育www.szstudy.com.cn深圳远程教育 深圳成人高考www.szstudy.com.cn深圳自考

参考文献

[1] 卢坚、马永强、鲍嘉. Dreamweaver2004完美网页设计综合实例篇. 中国青年出版社 [2] 黄箐韵. Photoshop cs 超梦幻网页创意宝典. 机械工业出版社 [3] 鲍嘉. Dreamweaver 8完美网页设计特效篇. 中国电力出版社 [4] 何海霞. Dreamweaver 8完美网页动态网页设计篇. 中国电力出版社 [5] 王锦. Dreamweaver MX 2004中文版基础教程. 北京. 机械工业出版社[6] http://www.68design.net（网页设计师联盟）

第 15 页 共 19页 15

本文来源：https://www.bwwdw.com/article/o71h.html