电子商务网站设计与实现本科毕业设计论文.docx

电子商务网站设计与实现本科毕业设计论文.docx

《电子商务网站设计与实现本科毕业设计论文.docx》由会员分享，可在线阅读，更多相关《电子商务网站设计与实现本科毕业设计论文.docx（14页珍藏版）》请在冰豆网上搜索。

电子商务网站设计与实现本科毕业设计论文

内蒙古化工职业学院毕业设计说明书（论文）任务书

姓名

专业

电子商务

班级

指导教师

题目

企业网站的建设

原始数据

说明书（论文）内容

图纸要求

对学生综合训练方面的要求

完成期限

备注:

毕业论文的任务书可对原始数据及图纸要求两项不作要求

签发:

日期:

年月

企业网站的构建

摘要

随着计算机和计算机网络的飞速发展和计算机的日益普及，我们已经进入了信息化时代。

从网络获取信息成为我们汲取知识的一个重要部分，已为企业带来无限商机。

越来越多的商家已经建立了自己的门户，可以即时发布其产品信息和企业动态，使得鱼外界沟通交流更方便更畅通。

Internet是目前世界上最大的计算机互联网络，它遍布全球，将世界各地各种规模的网络连接成一个整体。

作为Internet上一种先进的，易于被人们所接受的信息检索手段，WorldWideWeb（简称WWW）发展十分迅速，成为目前世界上最大的信息资源宝库。

因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。

本论文主要说明了网站的前台制作过程及制作网站的相关软件的应用，在制作过程中用到Dreamweaver制作网页，同时也运用了div+CSS布局技术，对网站样式和内容的维护起到了至关重要的作用。

关键词：

计算机,网站,Dreamweaver,CSS

目录

前言1

第一章现代企业网站建设需求分析2

1.1网站建设需求分析2

1.2网站建设功能分析2

1.3网站系统设计原则3

第二章网站开发软件简介4

2.1Dreamweaver编辑器4

2.1.1Dreamweaver简介4

2.2HTML的简介4

2.3使用CSS+DIV布局网页6

2.3.1CSS+DIV简介6

2.3.3CSS+DIV的布局方式6

第三章使用CSS美化网页8

3.1选择器的运用8

3.3CSS+DIV的基本设计9

3.4DivCSS排版对网站优化的影响10

3.5CSS和HTML的结合11

第四章CSS+DIV的应用12

4.1企业板块的分析12

结束语16

致谢17

参考文献18

前言

随着计算机技术和计算机网络的飞速发展和计算机的日益普及,我们已经进入了信息化时代,从网络获取信息成为我们汲取知识的一个重要部分,已为企业带来无限商机。

越来越多的商家已经建立了自己的门户网站,可以即时发布其产品信息和企业动态,使得与外界沟通交流更方便更畅通。

Internet是目前世界上最大的计算机互联网络，它遍布全球，将世界各地各种规模的网络连接成一个整体。

作为Internet上一种先进的，易于被人们所接受的信息检索手段，WorldWideWeb（简称WWW）发展十分迅速，成为目前世界上最大的信息资源宝库。

据估计，目前Internet上已有上千万个Web站点，其内容范围跨越了教育科研、文化事业、金融、商业、新闻出版、娱乐、体育等各个领域，其用户群十分庞大，因此，建设一个好的Web站点对于一个机构的发展十分重要。

近年来，随着网络用户要求的不断提高及计算机科学的迅速发展，特别是数据库技术在Internet中的广泛应用，Web站点向用户提供的服务将越来越丰富，越来越人性化。

因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。

第一章现代企业网站建设需求分析

1.1网站建设需求分析

网站需求分析是网站建设的第一个阶段，也是关系到网站开发成败的关键步骤。

网站需求分析的任务在于完全搞清楚用户对网站的确切要求，这样才能使开发出的企业网站合理实用。

网站目标：

企业网站是一个企业不可缺少的部分，它能介绍企业文化、经营理念、特色服务及企业在全国的网点分布。

拓宽顾客市场，增加企业与客户之间的联系，缩短二者之间的距离。

提高企业知名度，为企业今后的业务发展开辟一个良好的社会环境。

它的内容对于企业来说至关重要,企业概况、企业特色服务、最新企业新闻动态等部分应该能够为用户提供充足的信息。

企业网站做成检索迅速、查找方便、可靠性高、存储量大、保密性好、寿命长、成本低、维护方便、信息实时性强的功能完善的大型企业网站。

这些优点能够极大地提高了企业网站的效率,也是企业走向科学化、信息化与世界接轨的重要条件。

系统需求随着计算机的普及和网络的飞速发展，越来越多的个人家庭拥有电脑。

网上冲浪成了他们日常生活中不可缺少的一部分。

1.2网站建设功能分析

在前面的调研中，我借鉴了许多关于企业网站建设系统。

网站从开发角度来看,大致分为网站的前台（也就是网站的界面）、网站的后台（也就是网站的程序开发）。

网站的前台则体现在网站的艺术感觉和漂亮程序，有艺术氛围很强的网站要求，也就是平淡中寻求简洁清爽的、也有就是追求豪华的空洞的网站要求。

网站的界面好与否，一定要与网站的主题所要表达的思想相配才行。

网站的后台数据库开发，也就是后台的程序开发表达给客户看到的就是网站实现的功能。

本系统的组成和功能模块大致如下：

1、系统的组成：

系统分为网站前台和后台管理。

网站前台是面向网站访问用户的，通俗的说也就是给访问网站的人看的内容和页面，网站前台访问可以浏览公开发布的内容。

网站后台，有时也称为网站管理后台，是指用于管理网站前台的一系列操作。

通过网站管理后台，可以有效的管理网站供浏览者查阅的信息。

2、系统的功能：

前台功能：

网站前台访问可以浏览公开发布的产品信息、新闻信息、企业信息、企业联系方式、提交留言和应聘职位的操作。

后台功能：

管理员可以通过密码进到后台的网页，本系统实现了管理员对产品信息、企业信息和新闻的增加、更新、删除功能。

而且管理员还可以对访问用户的留言进行回复和删除以及修改管理员的用户名和密码。

1.3网站系统设计原则

本系统除了满足以上功能外，还具有一定的安全性。

为不同的用户分配不同的操作权限，例如普通浏览用户只能浏览网站页面和应聘职位，管理员用户可以使用所有功能（包括增加信息，数据维护等）。

本系统提供了一套友好的界面，操作十分简单，易学易用，并且满足常见的业务要求。

第二章网站开发软件简介

2.1Dreamweaver编辑器

2.1.1Dreamweaver简介

Dreamweaver是创建和管理网页的专业化可视编辑器。

使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。

Macromedia的RoundtripHTML技术允许用户随意导入HTML文档而无需重新设置代码格式。

Dreamweaver可以为用户做到：

使用动态HTML功能（例如具有动态效果的层和行为）而不用写一行代码。

它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。

Dreamweaver还是一个可以完全自定义的应用程序。

用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。

至于Dreamweaver工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。

常用的Dreamweaver工作区组件有以下若干种：

（1）文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。

（2）装载器中包含一些打开和关闭常用检查器和模板的按钮。

（3）对象工具栏包含创建不同类型的对象（例如图象、表格和层等）的按钮

（4）属性检查器显示选定对象的属性。

（5）快捷菜单可以使用户对当前选择或区域快速执行某些命令。

（6）可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。

2.2HTML的简介

HTML（HyperTextMark-upLanguage）即超文本标记语言或超文本链接标示语言，是WWW的描述语言。

设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。

我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。

HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。

HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。

它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

就像我们逛淘宝买东西，在XX查看新闻等等。

也许你听说过许多可以编辑网页的软件,事实上,你不需要用任何专门的软件来建立HTML页面；你所需要的只是一个文字处理器（如McrosoftWord\记事本\写字板等等）以及HTML的工作常识。

其实你很快就会发现,基础的HTML语言很简单易学。

HTML只不过是组合成一个文本文件的一系列标签。

它们像乐队的指挥,告诉乐手们哪里需要停顿,哪里需要激昂。

HTML标签通常是英文词汇的全称（如块引用:

blockquote）或缩略语（如“p”代表Paragragh），但它们的与一般文本有区别，因为它们放在单书名号里。

故Paragragh标签是

块引用标签是

。

有些标签说明页面如何被格式化（例如，

开始一个新段落），其他则说明这些词如何显示（使文字变粗）还有一些其他标签提供在页面上不显示的信息－－例如标题。

关于标签，需要记住的是，它们是成双出现的。

每当使用一个标签－－如

,则必须以另一个标签

将它关闭。

注意“blockquote”前的斜杠，那就是关闭标签与打开标签的区别。

但是也有一些标签例外。

比如，标签就不需要。

基本HTML页面以标签开始，以结束。

在它们之间，整个页面有两部分－－标题和正文。

标题词－夹在和标签之间－这个词语在打开页面时出现在屏幕底部最小化的窗口。

正文则夹在和之间－即所有页面的内容所在。

页面上显示的任何东西都包含在这两个标签之中。

那么让我们建立一个简单的范例吧，非常容易的。

第一步，当然是要建立一个新的文本文件（记住，如果你在使用比较复杂的文字处理器，就应该用“纯文本”或“普通文本”来保存），将它命名为“xxxx.html”。

（随便你起一个什么名字,但记住,要用英文）扩展名也可是HTML然后你可以用浏览器将它打开，你会看见最简单的自己做的页面。

2.3使用CSS+DIV布局网页

2.3.1CSS+DIV简介

CSS+DIV是标准化（或称“web标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用CSS+DIV的方式实现各种定位。

CSS是英语CascadingStyleSheets（层叠样式表）的缩写，它是一种用来表现HTML或XML等文件式样的计算机语言。

DIV元素是用来为HTML文档内大块block-level）的内容提供结构和背景的元素。

DIV的起始标签和结束标签之间的所有内容都是用来构成这个快的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

2.3.2应用的方法

1、In-line行内：

行内样式是在html标签里直接使用style属性，如：

red">text

，设定段落文字红色。

但要记住，最后的HTML应该是独立出来，使用表现文档，所以行内样式应该在任何地方避免。

2、Internal内部：

使用于整个页面的植入内部样式在head标签里面，style标签包围样式，可以在里面输入你想要的样式值。

例如：

p{color:

red;}a{color:

blue;}所有段落文字红色，链接蓝色。

3、外部：

外部样式使用在整个多样页面网站。

它是一个独立的CSS文件，像下面一样：

p{color:

red;}a{color:

blue;}如果上面保存为“web.css”，HTML里面的链接就会像下面所显示效果，相关的代码如下：

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">。

2.3.3CSS+DIV的布局方式

1、网页页面中的每个区域，如页头区、主体区、链接和版权声明区等，我们都插入相应的DIV元素，然后，用CSS控制DIV使网页居中显示。

2、对于页面中所有的DIV元素，利用CSS控制DIV的位置，我们可以将页面中的DIV视为一个个块状元素。

在此应用了“盒模型”的工作原理，“盒模型”是CSS的基础，“盒模型”理论认为：

页面上的每个元素都被看做一个矩形，这个矩形由内容、填充（padding）、边框（border）和边距（margin）构成。

元素的实际宽度=内容宽度+2x边距+2x填充+2x边框，对于每部分的间距，以及文字、图片空隙的调整，用CSS+DIV布局是很合适的，那就是用“盒模型”的工作原理来调整，在网页默认的情况下，元素由上到下依次叠放，当这样的叠放顺序不能满足布局的需要时，就要使用“float（浮动）”属性来改变元素的叠放顺序。

元素应用了“float（浮动）”属性，他周围的元素就会靠近、包围元素，这样的影响在有的布局中是多余的，这时，可以用“clear（清除）”属性来阻止这种浮动对后面元素的影响。

再复杂的布局也是重复利用这样的技术，大到网页每一部分的叠放，小到文字、图片的排版。

3、在DIV中添加各种网页元素，把文字、图片、动画安排到合适的位置，再把每部分合理地叠放到网页中，这样就完成了网页的布局。

第三章使用CSS美化网页

3.1选择器的运用

CSS选择器共有三种：

标签选择器、ID选择器、类选择器。

【标签选择器】

一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式，（在大环境中你可能出于不同的位置，但是不管怎么样，你总是穿着同一套衣服，这件衣服就是由标签选择器事先给你限定好的，不管走到哪里都是这身衣服）比如，在style.css文件中对p标签样式的声明如下：

p{font-size:

12px;background:

#900;color:

090;}则页面中所有p标签的背景都是#900（红色），文字大小均是12px，颜色为#090（绿色），这在后期维护中，如果想改变整个网站中p标签背景的颜色，只需要修改background属性就可以了，就这么容易！

【ID选择器】

ID选择器在某一个HTML页面中只能使用一次（当然也可以用好几次，不过就不符合W3C标准了，那页面也就不是标准页面喽!

，咱们的目的不就是为了做标准的页面么，所以建议大家不要在同一个html页面中多个标签拥有共同的ID），就像在你所处的环境中，你只有一个ID（身份证），不可能重复！

相信大家也能看出来，ID选择器更具有针对性，如：

先给某个HTML页面中的某个p标签起个ID，代码如下：

此处为p标签内的文字

在CSS中定义ID为one的p标签的属性，就需要用到#，代码如下：

#one{font-size:

12px;background:

#900;color:

090;}这样页面中的某个p就会是CSS中定义的样式。

【类选择器】

这种选择器就是使页面中的某些标签（可以是不同的标签）具有相同的样式，就像国庆中某个方阵中，肯定都是不同的人，但是都穿红色衣服，手中高举花环，样式都是一样的，如果想让这一类人都有共同的样式，和ID选择器的用法类似，只不过把id换做class，如下：

此处为p标签内的文字

如果我还想让div标签也有相同的样式，加上同样的class就可以了，如下此处为p标签内的文字