电子商务网站设计与实现

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

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

3、S目录前言2第一章现代企业网站建设需求分析31.1网站建设需求分析31.2网站建设功能分析31.3网站系统设计原则4第二章网站开发软件简介52.1 Dreamweaver 编辑器52.1.1 Dreamweaver简介 52.2 HTML的简介 62.3使用CSS+DIV布局网页 72.3.1 CSS+DIV 简介72.3.3 CSS+DIV的布局方式 8第三章使用CSS美化网页93.1选择器的运用93.3 CSS+DIV的基本设计 103.4 Div CSS排版对网站优化的影响 123.5 CSS和 HTML 的结合12第四章 CSS+DIV的应用 134.1企业板块的分析13结束语17致谢

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

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

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

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

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

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

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

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

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

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

14、里。故 Paragragh标签是p,块引用标签是 blockquote。有些标签说明页面如何被格式化（例如，p开始一个新段落），其他则说明这些词如何显示（b使文字变粗）还有一些其他标签提供在页面上不 显示的信息-例如标题。关于标签，需要记住的是，它们是成双出现的。每当 使用一个标签如blockquote,则必须以另一个标签/blockquote将它关闭。注意“ blockquote”前的斜杠，那就是关闭标签与打开标签的区别。但是也有一 些标签例外。比如，input标签就不需要。基本HTML页面以html标签开始， 以/html结束。在它们之间，整个页面有两部分标题和正文。标题词夹 在head和

15、/headfe签之间-这个词语在打开页面时出现在屏幕底部最小化的 窗口。正文则夹在body和/body之间即所有页面的内容所在。页面上显示的任何东西都包含在这两个标签之中。那么让我们建立一个简单的范例吧，非常容易的。第一步，当然是要建立一个新的文本文件（记住，如果你在使用比较复 杂的文字处理器，就应该用“纯文本”或“普通文本”来保存），将它命名为“xxxx.html”。（随便你起一个什么名字,但记住，要用英文）扩展名也可是HTML 然后你可以用浏览器将它打开，你会看见最简单的自己做的页面。2.3使用CSS+DIV布局网页2.3.1 CSS+DIV 简介CSS+DIV是标准化（或称“ web标准

16、”）中常用的术语之一，通常为了说明 与HTML网页设计语言中的表格（table）定位方式的区别，因为 XHTML网站 设计标准中，不再使用表格定位技术，而是采用CSS+DIV的方式实现各种定位。CSS是英语CascadingStyleSheetS!叠样式表）的缩写，它是一种用来表现HTML 或XML等文件式样的计算机语言。DIV元素是用来为HTML文档内大块 block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的 所有内容都是用来构成这个快的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。2.3.2应用的方法1、 In-

17、line行内：行内样式是在html标签里直接使用style属性，如：text，设定段落文字红色。但要记住，最后的 HTML应该 是独立出来，使用表现文档，所以行内样式应该在任何地方避免。2、 Internal内部：使用于整个页面的植入内部样式在 head标签里面，style 标签包围样式，可以在里面输入你想要的样式值。 例如：vtitleCSS Example p color: red; a color: blue; 所 有段落文字红色，链接蓝色。3、 外部：外部样式使用在整个多样页面网站。它是一个独立的CSS文件， 像下面一样：p color: red; a color: blue; 如果上

18、面保存为“ web.css， HTML里面的链接就会像下面所显示效果，相关的代码如下：。2.3.3 CSS+DIV的布局方式1、网页页面中的每个区域，如页头区、主体区、链接和版权声明区等，我 们都插入相应的DIV元素，然后，用CSS控制DIV使网页居中显示。2、对于页面中所有的DIV元素，利用CSS控制DIV的位置，我们可以将页面中的DIV视为一个个块状元素。在此应用了“盒模型”的工作原理，“盒模型”是CSS的基础，“盒模型”理论认为：页面上的每个元素都被看做一个矩形， 这个矩形由内容、填充（padding）、边框（border）和边距（margin）构成。元 素的实际宽度=内容宽度+2x边距

19、+2x填充+2x边框，对于每部分的间距，以及文 字、图片空隙的调整，用CSS+DIV布局是很合适的，那就是用“盒模型”的工 作原理来调整，在网页默认的情况下，元素由上到下依次叠放，当这样的叠放顺 序不能满足布局的需要时，就要使用“ float （浮动）”属性来改变元素的叠放顺 序。元素应用了 “float （浮动）”属性，他周围的元素就会靠近、包围元素，这 样的影响在有的布局中是多余的，这时，可以用“clear （清除）”属性来阻止这种浮动对后面元素的影响。再复杂的布局也是重复利用这样的技术，大到网页每一部分的叠放，小到文字、图片的排版。3、在DIV中添加各种网页元素，把文字、图片、动画安排到

20、合适的位置， 再把每部分合理地叠放到网页中，这样就完成了网页的布局。第三章使用CSS美化网页3.1选择器的运用CSS选择器共有三种：标签选择器、ID选择器、类选择器。【标签选择器】一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决 定哪些标签采用相应的CSS样式，（在大环境中你可能出于不同的位置，但是不 管怎么样，你总是穿着同一套衣服，这件衣服就是由标签选择器事先给你限定好 的，不管走到哪里都是这身衣服）比如，在style.css文件中对p标签样式的声明 如下：p font-size:12px; background:#900; color:090; 则页面中所有 p 标签的背

21、 景都是#900（红色），文字大小均是12px，颜色为#090（绿色），这在后期维护中， 如果想改变整个网站中p标签背景的颜色，只需要修改background属性就可以 了，就这么容易！【ID选择器】ID选择器在某一个HTML页面中只能使用一次（当然也可以用好几次，不过 就不符合W3C标准了，那页面也就不是标准页面喽！，咱们的目的不就是为了做 标准的页面么，所以建议大家不要在同一个html页面中多个标签拥有共同的ID）， 就像在你所处的环境中，你只有一个ID（身份证），不可能重复！相信大家也能看 出来，ID选择器更具有针对性，如：先给某个 HTML页面中的某个p标签起个 ID，代码如下：p i

22、d=one此处为p标签内的文字/p在CSS中定义ID为one 的p标签的属性，就需要用到#，代码如下：#one font-size:12px; background:#900; color:090; 这样页面中的某个p就会是CSS中定义的样式。【类选择器】这种选择器就是使页面中的某些标签（可以是不同的标签）具有相同的样式， 就像国庆中某个方阵中，肯定都是不同的人，但是都穿红色衣服，手中高举花环， 样式都是一样的，如果想让这一类人都有共同的样式，和ID选择器的用法类似， 只不过把id换做class,如下：p class=one此处为p标签内的文字/p如果我还想让div标签也有相同的样式，加上同样

23、的 class就可以了，如下div class=one此处为p标签内的文字/div。这样页面中凡是加上 class=one的标 签，样式都是一样的了。CSS定义的时候和ID选择器差不多，只不过把#换成，如下 one font-size:12px; background:#900; color:090; 。补充:一个标签可以有多 个类选择器的值，不同的值用空格分开，如：div class= one yellow leftStyle此处为p标签内的文字/div这样我们可以将多个样式用到同一个标签中，当然 也可以，ID 和 class一块用 div id=div1 class=one yellow

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

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

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

27、:200px;margi n-top:20px;border:2px solid;#con te ntheight:500px;width:100%;margi n-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属性设置为百分比形式，表示当窗口大小发生变化时，页面的 宽度也随之变化。Containe

28、r的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爬行时是非常有利的。过

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

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

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

32、idth: 990px;.contentheight:auto;.con te nt_top_leftwidth: 590px;height: 270px;float: left;margin-top: 8px;padd in g:0px 20px 0px 20px; color:#727477;.conten t_top_rightwidth: 270px;height: 270px;float: left;margin-top: 8px;text-alig n: left;.conten t_ce nterpadd in g-top: 10px;height: 200px;text-ali

33、g n: left;margin-top: 5px;margi n-bottom: 10px;padd in g-left: 5px;margin-left: 2px;color:#727477;.conten t_bottom_left width: 283px; height: 160px; margin-top: 5px; float: left;.con te nt_bottom_right width: 700px; height: auto; float: left;margin-top: 5px; text-alig n: left;a.t2fon t-size: 12px; fon t-weight:no rmal; text-decorati on: none; color:#727477;a.t2:hoverfon t-size: 12px; fon t-weight:no rmal; text-decorati on: none; color:blue;a.t3fon t-size: 16px; fon t-weight:b