电子商务网站设计与实现.doc

《电子商务网站设计与实现.doc》由会员分享，可在线阅读，更多相关《电子商务网站设计与实现.doc（21页珍藏版）》请在三一办公上搜索。

1、内蒙古化工职业学院毕业设计（论文）用纸内蒙古化工职业学院毕业设计说明书(论文)任务书姓 名专业电子商务班级指导教师题 目企业网站的建设原始数据说明书(论文)内 容图纸要求对学生综合训练方面的要求完成期限自 2013 年 11月 20日至 2013 年 12 月 5日备 注:毕业论文的任务书可对原始数据及图纸要求两项不作要求签 发: 日期: 年 月第 1 页企业网站的构建摘 要 随着计算机和计算机网络的飞速发展和计算机的日益普及，我们已经进入了信息化时代。从网络获取信息成为我们汲取知识的一个重要部分，已为企业带来无限商机。越来越多的商家已经建立了自己的门户，可以即时发布其产品信息和企业动态，使得

2、鱼外界沟通交流更方便更畅通。 Internet是目前世界上最大的计算机互联网络，它遍布全球，将世界各地各种规模的网络连接成一个整体。作为Internet上一种先进的，易于被人们所接受的信息检索手段，World Wide Web(简称WWW)发展十分迅速，成为目前世界上最大的信息资源宝库。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。本论文主要说明了网站的前台制作过程及制作网站的相关软件的应用，在制作过程中用到Dreamweaver 制作网页，同时也运用了div + CSS布局技术，对网站样式和内容的维护起到了至关重要

3、的作用。关键词：计算机,网站,Dreamweaver,CSS 目录前 言1第一章 现代企业网站建设需求分析21.1 网站建设需求分析21.2 网站建设功能分析21.3 网站系统设计原则3第二章 网站开发软件简介42.1 Dreamweaver编辑器42.1.1 Dreamweaver简介42.2 HTML的简介42.3 使用CSS+DIV布局网页62.3.1 CSS+DIV简介62.3.3 CSS+DIV的布局方式6第三章 使用CSS美化网页83.1 选择器的运用83.3 CSS+DIV的基本设计93.4 Div CSS排版对网站优化的影响103.5 CSS和HTML的结合11第四章 CSS+

4、DIV的应用124.1 企业板块的分析12结束语16致 谢17参考文献18前 言 随着计算机技术和计算机网络的飞速发展和计算机的日益普及,我们已经进入了信息化时代,从网络获取信息成为我们汲取知识的一个重要部分,已为企业带来无限商机。越来越多的商家已经建立了自己的门户网站,可以即时发布其产品信息和企业动态,使得与外界沟通交流更方便更畅通。 Internet是目前世界上最大的计算机互联网络，它遍布全球，将世界各地各种规模的网络连接成一个整体。作为Internet上一种先进的，易于被人们所接受的信息检索手段，World Wide Web(简称WWW)发展十分迅速，成为目前世界上最大的信息资源宝库。据

5、估计，目前Internet上已有上千万个Web站点，其内容范围跨越了教育科研、文化事业、金融、商业、新闻出版、娱乐、体育等各个领域，其用户群十分庞大，因此，建设一个好的Web站点对于一个机构的发展十分重要。近年来，随着网络用户要求的不断提高及计算机科学的迅速发展，特别是数据库技术在Internet中的广泛应用，Web站点向用户提供的服务将越来越丰富，越来越人性化。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。 第一章 现代企业网站建设需求分析1.1 网站建设需求分析 网站需求分析是网站建设的第一个阶段，也是关系到网站

6、开发成败的关键步骤。网站需求分析的任务在于完全搞清楚用户对网站的确切要求，这样才能使开发出的企业网站合理实用。网站目标：企业网站是一个企业不可缺少的部分，它能介绍企业文化、经营理念、特色服务及企业在全国的网点分布。拓宽顾客市场，增加企业与客户之间的联系，缩短二者之间的距离。提高企业知名度，为企业今后的业务发展开辟一个良好的社会环境。它的内容对于企业来说至关重要,企业概况、企业特色服务、最新企业新闻动态等部分应该能够为用户提供充足的信息。企业网站做成检索迅速、查找方便、可靠性高、存储量大、保密性好、寿命长、成本低、维护方便、信息实时性强的功能完善的大型企业网站。这些优点能够极大地提高了企业网站的

7、效率,也是企业走向科学化、信息化与世界接轨的重要条件。系统需求随着计算机的普及和网络的飞速发展，越来越多的个人家庭拥有电脑。网上冲浪成了他们日常生活中不可缺少的一部分。1.2 网站建设功能分析 在前面的调研中，我借鉴了许多关于企业网站建设系统。网站从开发角度来看,大致分为网站的前台（也就是网站的界面）、网站的后台（也就是网站的程序开发）。网站的前台则体现在网站的艺术感觉和漂亮程序，有艺术氛围很强的网站要求，也就是平淡中寻求简洁清爽的、也有就是追求豪华的空洞的网站要求。网站的界面好与否，一定要与网站的主题所要表达的思想相配才行。网站的后台数据库开发，也就是后台的程序开发表达给客户看到的就是网站实

8、现的功能。本系统的组成和功能模块大致如下： 1、系统的组成：系统分为网站前台和后台管理。网站前台是面向网站访问用户的，通俗的说也就是给访问网站的人看的内容和页面，网站前台访问可以浏览公开发布的内容。网站后台，有时也称为网站管理后台，是指用于管理网站前台的一系列操作。通过网站管理后台，可以有效的管理网站供浏览者查阅的信息。 2、系统的功能： 前台功能：网站前台访问可以浏览公开发布的产品信息、新闻信息、企业信息、企业联系方式、提交留言和应聘职位的操作。 后台功能：管理员可以通过密码进到后台的网页，本系统实现了管理员对产品信息、企业信息和新闻的增加、更新、删除功能。而且管理员还可以对访问用户的留言进

9、行回复和删除以及修改管理员的用户名和密码。1.3 网站系统设计原则本系统除了满足以上功能外，还具有一定的安全性。为不同的用户分配不同的操作权限，例如普通浏览用户只能浏览网站页面和应聘职位，管理员用户可以使用所有功能（包括增加信息，数据维护等）。本系统提供了一套友好的界面，操作十分简单，易学易用，并且满足常见的业务要求。第二章 网站开发软件简介2.1 Dreamweaver编辑器2.1.1 Dreamweaver简介 Dreamweaver是创建和管理网页的专业化可视编辑器。使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。Macromedia的Roundtrip HTML技术允许用

10、户随意导入HTML文档而无需重新设置代码格式。Dreamweaver可以为用户做到：使用动态HTML功能（例如具有动态效果的层和行为）而不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。Dreamweaver还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写JavaScript代码扩展Dreamweaver的行为和属性检查器。至于Dreamweaver工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。常用的Dreamweaver工作区组件有以下若干种： (1) 文档窗口可显示当前文档，文档的外观和浏览器中

11、看到的非常相似。 (2) 装载器中包含一些打开和关闭常用检查器和模板的按钮。 (3) 对象工具栏包含创建不同类型的对象（例如图象、表格和层等）的按钮 (4) 属性检查器显示选定对象的属性。 (5) 快捷菜单可以使用户对当前选择或区域快速执行某些命令。 (6) 可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。2.2 HTML的简介HTML（HyperTextMark-upLanguage）即超文本标记语言或超文本链接标示语言，是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，

12、人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器

13、。就像我们逛淘宝买东西，在百度查看新闻等等。也许你听说过许多可以编辑网页的软件,事实上,你不需要用任何专门的软件来建立HTML页面；你所需要的只是一个文字处理器（如Mcrosoft Word记事本写字板等等）以及HTML的工作常识。其实你很快就会发现,基础的HTML语言很简单易学。HTML只不过是组合成一个文本文件的一系列标签。它们像乐队的指挥,告诉乐手们哪里需要停顿,哪里需要激昂。HTML标签通常是英文词汇的全称（如块引用:blockquote）或缩略语（如“p”代表Paragragh），但它们的与一般文本有区别，因为它们放在单书名号里。故Paragragh标签是,块引用标签是。有些标签说明

14、页面如何被格式化（例如，开始一个新段落），其他则说明这些词如何显示(使文字变粗)还有一些其他标签提供在页面上不显示的信息例如标题。关于标签，需要记住的是，它们是成双出现的。每当使用一个标签如,则必须以另一个标签将它关闭。注意“blockquote”前的斜杠，那就是关闭标签与打开标签的区别。但是也有一些标签例外。比如，标签就不需要。基本HTML页面以标签开始，以结束。在它们之间，整个页面有两部分标题和正文。标题词夹在和标签之间这个词语在打开页面时出现在屏幕底部最小化的窗口。正文则夹在和之间即所有页面的内容所在。页面上显示的任何东西都包含在这两个标签之中。那么让我们建立一个简单的范例吧，非常容易的

15、。第一步，当然是要建立一个新的文本文件（记住，如果你在使用比较复杂的文字处理器，就应该用“纯文本”或“普通文本”来保存），将它命名为“xxxx.html”。(随便你起一个什么名字,但记住,要用英文) 扩展名也可是HTML然后你可以用浏览器将它打开，你会看见最简单的自己做的页面。2.3 使用CSS+DIV布局网页2.3.1 CSS+DIV简介 CSS+DIV是标准化（或称“web标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用CSS+DIV的方式实现各种定位。CSS是英语Cascadin

16、gStyleSheets(层叠样式表)的缩写，它是一种用来表现HTML或XML等文件式样的计算机语言。DIV元素是用来为HTML文档内大块block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个快的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。2.3.2 应用的方法 1、In-line 行内：行内样式是在html标签里直接使用style属性，如：text，设定段落文字红色。但要记住，最后的HTML应该是独立出来，使用表现文档，所以行内样式应该在任何地方避免。 2、Internal 内部：使用于整个

17、页面的植入内部样式在head标签里面，style标签包围样式，可以在里面输入你想要的样式值。例如：CSS Example p color: red; a color: blue; 所有段落文字红色，链接蓝色。 3、外部：外部样式使用在整个多样页面网站。它是一个独立的CSS文件，像下面一样：p color: red; a color: blue; 如果上面保存为“web.css”，HTML里面的链接就会像下面所显示效果，相关的代码如下：。 2.3.3 CSS+DIV的布局方式 1、网页页面中的每个区域，如页头区、主体区、链接和版权声明区等，我们都插入相应的DIV元素，然后，用CSS控制DIV使网

18、页居中显示。 2、对于页面中所有的DIV元素，利用CSS控制DIV的位置，我们可以将页面中的DIV视为一个个块状元素。在此应用了“盒模型”的工作原理，“盒模型”是CSS的基础，“盒模型”理论认为：页面上的每个元素都被看做一个矩形，这个矩形由内容、填充（padding）、边框（border）和边距（margin）构成。元素的实际宽度=内容宽度+2x边距+2x填充+2x边框，对于每部分的间距，以及文字、图片空隙的调整，用CSS+DIV布局是很合适的，那就是用“盒模型”的工作原理来调整，在网页默认的情况下，元素由上到下依次叠放，当这样的叠放顺序不能满足布局的需要时，就要使用“float（浮动）”属性

19、来改变元素的叠放顺序。元素应用了“float（浮动）”属性，他周围的元素就会靠近、包围元素，这样的影响在有的布局中是多余的，这时，可以用“clear（清除）”属性来阻止这种浮动对后面元素的影响。再复杂的布局也是重复利用这样的技术，大到网页每一部分的叠放，小到文字、图片的排版。 3、在DIV中添加各种网页元素，把文字、图片、动画安排到合适的位置，再把每部分合理地叠放到网页中，这样就完成了网页的布局。第三章 使用CSS美化网页3.1 选择器的运用CSS选择器共有三种：标签选择器、ID选择器、类选择器。 【标签选择器】 一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用

20、相应的CSS样式，(在大环境中你可能出于不同的位置，但是不管怎么样，你总是穿着同一套衣服，这件衣服就是由标签选择器事先给你限定好的，不管走到哪里都是这身衣服)比如，在style.css文件中对p标签样式的声明如下：p font-size:12px; background:#900; color:090; 则页面中所有p标签的背景都是#900(红色)，文字大小均是12px，颜色为#090(绿色)，这在后期维护中，如果想改变整个网站中p标签背景的颜色，只需要修改background属性就可以了，就这么容易！ 【ID选择器】 ID选择器在某一个HTML页面中只能使用一次(当然也可以用好几次，不过就不

21、符合W3C标准了，那页面也就不是标准页面喽!，咱们的目的不就是为了做标准的页面么，所以建议大家不要在同一个html页面中多个标签拥有共同的ID)，就像在你所处的环境中，你只有一个ID(身份证)，不可能重复！相信大家也能看出来，ID选择器更具有针对性，如：先给某个HTML页面中的某个p标签起个ID，代码如下：此处为p标签内的文字在CSS中定义ID为one的p标签的属性，就需要用到#，代码如下：#one font-size:12px; background:#900; color:090; 这样页面中的某个p就会是CSS中定义的样式。 【类选择器】 这种选择器就是使页面中的某些标签(可以是不同的标

22、签)具有相同的样式，就像国庆中某个方阵中，肯定都是不同的人，但是都穿红色衣服，手中高举花环，样式都是一样的，如果想让这一类人都有共同的样式，和ID选择器的用法类似，只不过把id换做class，如下：此处为p标签内的文字如果我还想让div标签也有相同的样式，加上同样的class就可以了，如下此处为p标签内的文字。这样页面中凡是加上class=one的标签，样式都是一样的了。CSS定义的时候和ID选择器差不多，只不过把#换成，如下one font-size:12px; background:#900; color:090; 。补充:一个标签可以有多个类选择器的值，不同的值用空格分开，如：此处为p标

23、签内的文字这样我们可以将多个样式用到同一个标签中，当然也可以，ID和class一块用此处为p标签内的文字。 【通用选择器】 “通用选择器”是CSS选择器中功能最强大但是用的最少的一种选择器。强大之处是因为他对父级中的所有HTML标签进行样式定义，可对具有共同样式的标签样式进行定义，这样可以大大精简代码。3.2 CSS盒子模型 盒子模型是CSS控制页面时一个很重要的概念，只要很好地掌握了盒子模型以及其中每个元素的用法，才能真正的控制好页面中的各个元素。所有页面中的元素都可以看成是盒子，占据着一定的页面空间，一般说来这些被占据的空间往往要比单纯的内容大。换句话说，可以通过调整盒子的边距和距离等参数

24、，来调节盒子的大小。一个页面由很多这样的盒子组成，这些盒子之间会相互影响，因此掌握盒子模型需要从俩方面来理解。一是理解一个孤立的盒子的内部结构，二是理解多个盒子之间的相互关系。 在CSS中，一个独立的盒子模型由content内容，border边框，padding内边距和margin外边距4个部分组成。 一个盒子实际所占有的宽度或高度是由内容+内边距+边框+外边距组成的。在CSS中，可以通过设定width和height的值来控制内容所占的矩形的大小。并且对于任何一个盒子，都可以分别设定4条边各自的border、padding与margin。因此只要利用好这些属性就能够实现各种各样的排版效果。3.

25、3 CSS+DIV的基本设计 若采取DIV+CSS的网页布局结构，首先需要用div来分块，定义语义结构；然后用CSS来定位和添加样式，如浮动、位置、对齐属性、加入背景等；然后用CSS定义的各个块中添加相应的样式，如文字、图片等。用标记把网页区分成不同模块，包括header、content(其中有sidebar边栏区域和main主体区域)、footer三个区域，分别作为网页的头部、内容和版权区域。编写HTML文档代码：头部边栏内容版权设置CSS样式代码： #containermargin:0;width:90%; #containermargin:0;width:90%; #headerheig

26、ht:200px;margin-top:20px;border:2px solid; #contentheight:500px;width:100%;margin-bottom:10px; #sidebarfloat:right;width:30%;height:500px;border:1px solid; #mainfloat:left;width:70%;height:400px;border:2px solid; #footerheight:60px;border:1px solid; 其中，width属性设置为百分比形式，表示当窗口大小发生变化时，页面的宽度也随之变化。Contain

27、er的margin属性为0 auto，表示上下边距为0像素，auto表示左右边距为自动，实现网页的居中显示。Sidebar的float属性为right，标识靠右对齐，main的float属性为left，表示靠左对齐，实现中间两列整栏的显示效果。Border属性为2px solid，表示2个像素宽的实线边框。3.4 Div CSS排版对网站优化的影响 第一：spider爬行效率 Div CSS的代码精简是table无法比拟的，div CSS实现了样式和布局完全分离。 第二：网页打开速度 DIV CSS布局较Table布局减少了页面代码，加载速度得到很大的提高，这在Spider爬行时是非常有利的。

28、过多的页面代码可能造成爬行超时，Spider就会认为这个页面无法访问，影响收录及权重。题外：tale布局的页面打开原理：一般table布局的页面是大表格套中表格，中表格嵌套小表格，小表格再套小小表格。一般第一个表格（最外边的）要读取完才能显示出来，读取大表格的同时又要读取大表格中的小表格，大大加长了网页打开速度。 第三：对排名的影响 基于XTHML标准的DIV CSS布局，一般在设计完成后会尽可能的完善到能通过W3C验证。截止目前没有搜索引擎表示排名规则会倾向于符合 W3C标准的网站或页面，但事实证明使用XTHML架构的网站排名状况一般都不错。3.5 CSS和HTML的结合 CSS与HTML的

29、结合使用完美的实现了网页表现与内容的分离。网页设计通常使用CSS来控制网页的样式，其中包括页面的布局、字体、背景等等信息。而HTML则用来罗列网页中的内容，其中包括文本、图片等。 CSS样式表可以以多种方式应用到HTML页面当中，但最常用最好的方式是外部连接。这种方式是将CSS样式代码放入一个外部文件中，再由HTML中的link元素进行调用。这样做的好处是可以使多个网页调用同一个样式表文件，最大限度的实现了代码重用及网站文件的最优化配置。具体的使用方法为：在HTML页面中的head标签下使用link元素调用。第四章 CSS+DIV的应用4.1 企业板块的分析 1、企业板块页面布局简述企业板块最

30、重要的是公司简介，承担着反映企业的重要信息，包括企业概况、发展历史、主要业绩以及组织结构等，作用是让浏览者对企业的情况有一个明确的掌握。外界可以凭借企业网站了解认识企业的运营，包括业务范围、运营状况、性质和实力等等方面的信息，有一个了解的平台，促使更多的合作。公司简介的主要内容是准确并且完整地描述企业的业务范围、主要产品、相关服务等内容，并且全面介绍企业的性质、地址、联系方式等。最好是还可以提供企业的年度报表，利于访问者更好、更清晰地从具体的数据上了解企业的经营状况、方针和实力。 图4-1 企业板块2、CSS+DIV布局 以企业简介为例，CSS代码如下：.pagewith width: 990

31、px;.content height:auto;.content_top_left width: 590px; height: 270px; float: left; margin-top: 8px; padding:0px 20px 0px 20px; color:#727477;.content_top_right width: 270px; height: 270px; float: left; margin-top: 8px; text-align: left;.content_center padding-top: 10px; height: 200px; text-align: l

32、eft; margin-top: 5px; margin-bottom: 10px; padding-left: 5px; margin-left: 2px; color:#727477;.content_bottom_left width: 283px; height: 160px; margin-top: 5px; float: left;.content_bottom_right width: 700px; height: auto; float: left; margin-top: 5px; text-align: left;a.t2 font-size: 12px; font-wei

33、ght:normal; text-decoration: none; color:#727477;a.t2:hover font-size: 12px; font-weight:normal; text-decoration: none; color:blue;a.t3 font-size: 16px; font-weight:bold; text-decoration: none; color: black;a.t3:hover font-size: 16px; font-weight:bold; text-decoration: none; color:blue; CSS样式表是用于（增强

34、）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。通过使用CSS样式表，不仅可以对文字格式进行设置，还可以更加精确地控制布局、字体、颜色、背景和其他图文效果，从而避免在标识字符和设置段落格式等操作时重复定义需要的样式，提高网页编辑的效率。本网站统一采用了CSS+DIV网页技术制作。使得网页更加清晰美观。结束语 通过这次毕业设计，使我受到了一次用专业知识、专业技能分析和解决问题的全面系统的锻炼。使我在综合知识的选用方面，在企业网站开发的基本思想、方法方面，以及在常用代码设计思路技巧的掌握方面都能向前迈了一大步。在这次的毕业设计中，让我深深地体现到进行网站开发不是一件简单的事情，它需要

35、设计者具有全面的专业知识、缜密的思维、严谨的工作态度以及较高的分析问题、解决问题的能力，而我在很多方面还有欠缺。我会在以后工作的使用过程中，根据工作的具体要求不断的修改、完善、争取使该系统慢慢趋向完美。 致 谢 在本论文完成之际，首先要向我的导老王小蒙、冯启荣致以诚挚的谢意。在本论文的写作过程中，我不仅学到了扎实的专业知识，也在怎样处人处事等方面收益很多；在此我谨向王小蒙和冯启荣老师表示我衷心的感谢和深深的敬意。同时，我要感谢我们学院给我们授课的各位老师，正是由于他们的传道、授业、解惑，让我学到了专业知识，并从他们身上学到了如何求知治学、如何让为人处事。我也要感谢我的母校化工学院，是他提供了良

36、好的学习环境和生活环境，让我们的大学生活丰富多姿，为我的人生留下精彩的一笔。另外，衷心的感谢我的同窗同学们和计算机系的学友们；在我毕业论文写作中，与他们的探讨交流使我受益颇多；同时，他们也给了我很多无私的帮助和支持，我再次深表谢意。 本文是在俩位老师精心指导和大力支持下完成的。老师以其严谨求实的治学态度、高度的敬业精神、兢兢业业、孜孜以求的工作作风和大胆创新的进取精神对我产生重要影响。他们渊博的知识、开阔的视野和敏锐的思维给了我深深的启迪。另外，我最后再次对关心、帮助我的老师和同学们表示衷心的感谢!参考文献1:荣艳东编著，网页制作项目实训教程，北京交通大学大学出版社，2012 年2月第1版2:Tommy Olsson Paul OBrien著，高伟 苏宝龙等译，CSS终极参考手册，中国水水利出版社，2009年6月第1版第 19 页