1、内蒙古化工职业学院毕业设计（论文）用纸第 1 页内蒙古化工职业学院毕业设计说明书(论文)任务书姓 名 专业 电子商务 班级指导教师题 目 企业网站的建设原始数据说明书(论文)内 容图纸要求对学生综合训练方面的要求完成期限 自 2013 年 11 月 20 日至 2013 年 12 月 5 日备 注: 毕业论文的任务书可对原始数据及图纸要求两项不作要求签 发: 日期: 年 月内蒙古化工职业学院毕业设计（论文）用纸企业网站的构建摘 要随着计算机和计算机网络的飞速发展和计算机的日益普及，我们已经进入了信息化时代。从网络获取信息成为我们汲取知识的一个重要部分，已为企业带来无限商机。越来越多的商家已经建
2、立了自己的门户，可以即时发布其产品信息和企业动态，使得鱼外界沟通交流更方便更畅通。Internet 是目前世界上最大的计算机互联网络，它遍布全球，将世界各地各种规模的网络连接成一个整体。作为 Internet 上一种先进的，易于被人们所接受的信息检索手段，World Wide Web(简称 WWW)发展十分迅速，成为目前世界上最大的信息资源宝库。因此网站建设在 Internet 应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。本论文主要说明了网站的前台制作过程及制作网站的相关软件的应用，在制作过程中用到 Dreamweaver 制作网页，同时也运用
3、了 div + CSS 布局技术，对网站样式和内容的维护起到了至关重要的作用。关键词：计算机,网站,Dreamweaver,CSS 内蒙古化工职业学院毕业设计（论文）用纸第 1 页目录前 言 .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
4、第三章 使用 CSS 美化网页 .83.1 选择器的运用 .83.3 CSS+DIV 的基本设计 .93.4 Div CSS 排版对网站优化的影响 .103.5 CSS 和 HTML 的结合 .11第四章 CSS+DIV 的应用 .124.1 企业板块的分析 .12结束语 .16致 谢 .17参考文献 .18内蒙古化工职业学院毕业设计（论文）用纸第 2 页前 言随着计算机技术和计算机网络的飞速发展和计算机的日益普及,我们已经进入了信息化时代,从网络获取信息成为我们汲取知识的一个重要部分,已为企业带来无限商机。越来越多的商家已经建立了自己的门户网站,可以即时发布其产品信息和企业动态,使得与外界沟
5、通交流更方便更畅通。Internet 是目前世界上最大的计算机互联网络，它遍布全球，将世界各地各种规模的网络连接成一个整体。作为 Internet 上一种先进的，易于被人们所接受的信息检索手段，World Wide Web(简称 WWW)发展十分迅速，成为目前世界上最大的信息资源宝库。据估计，目前 Internet 上已有上千万个 Web 站点，其内容范围跨越了教育科研、文化事业、金融、商业、新闻出版、娱乐、体育等各个领域，其用户群十分庞大，因此，建设一个好的 Web 站点对于一个机构的发展十分重要。近年来，随着网络用户要求的不断提高及计算机科学的迅速发展，特别是数据库技术在 Internet
6、 中的广泛应用，Web 站点向用户提供的服务将越来越丰富，越来越人性化。因此网站建设在 Internet 应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。 内蒙古化工职业学院毕业设计（论文）用纸第 3 页第一章 现代企业网站建设需求分析1.1 网站建设需求分析网站需求分析是网站建设的第一个阶段，也是关系到网站开发成败的关键步骤。网站需求分析的任务在于完全搞清楚用户对网站的确切要求，这样才能使开发出的企业网站合理实用。网站目标：企业网站是一个企业不可缺少的部分，它能介绍企业文化、经营理念、特色服务及企业在全国的网点分布。拓宽顾客市场，增加企业与客户之
7、间的联系，缩短二者之间的距离。提高企业知名度，为企业今后的业务发展开辟一个良好的社会环境。它的内容对于企业来说至关重要,企业概况、企业特色服务、最新企业新闻动态等部分应该能够为用户提供充足的信息。企业网站做成检索迅速、查找方便、可靠性高、存储量大、保密性好、寿命长、成本低、维护方便、信息实时性强的功能完善的大型企业网站。这些优点能够极大地提高了企业网站的效率,也是企业走向科学化、信息化与世界接轨的重要条件。系统需求随着计算机的普及和网络的飞速发展，越来越多的个人家庭拥有电脑。网上冲浪成了他们日常生活中不可缺少的一部分。1.2 网站建设功能分析在前面的调研中，我借鉴了许多关于企业网站建设系统。网
8、站从开发角度来看,大致分为网站的前台（也就是网站的界面）、网站的后台（也就是网站的程序开发）。网站的前台则体现在网站的艺术感觉和漂亮程序，有艺术氛围很强的网站要求，也就是平淡中寻求简洁清爽的、也有就是追求豪华的空洞的网站要求。网站的界面好与否，一定要与网站的主题所要表达的思想相配才行。网站的后台数据库开发，也就是后台的程序开发表达给客户看到的就是网站实现的功能。本系统的组成和功能模块大致如下：内蒙古化工职业学院毕业设计（论文）用纸第 4 页1、系统的组成：系统分为网站前台和后台管理。网站前台是面向网站访问用户的，通俗的说也就是给访问网站的人看的内容和页面，网站前台访问可以浏览公开发布的内容。网
9、站后台，有时也称为网站管理后台，是指用于管理网站前台的一系列操作。通过网站管理后台，可以有效的管理网站供浏览者查阅的信息。2、系统的功能：前台功能：网站前台访问可以浏览公开发布的产品信息、新闻信息、企业信息、企业联系方式、提交留言和应聘职位的操作。后台功能：管理员可以通过密码进到后台的网页，本系统实现了管理员对产品信息、企业信息和新闻的增加、更新、删除功能。而且管理员还可以对访问用户的留言进行回复和删除以及修改管理员的用户名和密码。1.3 网站系统设计原则本系统除了满足以上功能外，还具有一定的安全性。为不同的用户分配不同的操作权限，例如普通浏览用户只能浏览网站页面和应聘职位，管理员用户可以使用
10、所有功能（包括增加信息，数据维护等）。本系统提供了一套友好的界面，操作十分简单，易学易用，并且满足常见的业务要求。内蒙古化工职业学院毕业设计（论文）用纸第 5 页第二章 网站开发软件简介2.1 Dreamweaver 编辑器2.1.1 Dreamweaver 简介Dreamweaver 是创建和管理网页的专业化可视编辑器。使用 Dreamweaver可以轻松创建跨平台、跨浏览器的页面。Macromedia 的 Roundtrip HTML 技术允许用户随意导入 HTML 文档而无需重新设置代码格式。Dreamweaver 可以为用户做到：使用动态 HTML 功能（例如具有动态效果的层和行为）而
11、不用写一行代码。它甚至还可以检查用户的工作成果在所有流行的平台和浏览器中可能发生的错误。Dreamweaver 还是一个可以完全自定义的应用程序。用户可以创建自己的对象和命令修改菜单和快捷键，甚至编写 JavaScript 代码扩展Dreamweaver 的行为和属性检查器。至于 Dreamweaver 工作区是非常灵活的，因此它可以适应各种不同的工作风格和使用水平。常用的 Dreamweaver 工作区组件有以下若干种：(1) 文档窗口可显示当前文档，文档的外观和浏览器中看到的非常相似。(2) 装载器中包含一些打开和关闭常用检查器和模板的按钮。(3) 对象工具栏包含创建不同类型的对象（例如图
12、象、表格和层等）的按钮(4) 属性检查器显示选定对象的属性。(5) 快捷菜单可以使用户对当前选择或区域快速执行某些命令。(6) 可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。2.2 HTML 的简介HTML（HyperTextMark-upLanguage）即超文本标记语言或超文本链接标示语言，是 WWW 的描述语言。设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有内蒙古化工职业学院毕业设计（论文）用纸第 6 页机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标
13、在某一文档中点取一个图标，Internet 就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。HTML 文本是由 HTML 命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、链接等。HTML 的结构包括头部（Head） 、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。另外，HTML 是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。就像我们逛淘宝买东西，在百度查看新闻等等。也许你听说过许
14、多可以编辑网页的软件,事实上,你不需要用任何专门的软件来建立 HTML 页面；你所需要的只是一个文字处理器（如 Mcrosoft Word记事本写字板等等）以及 HTML 的工作常识。其实你很快就会发现,基础的 HTML 语言很简单易学。HTML 只不过是组合成一个文本文件的一系列标签。它们像乐队的指挥,告诉乐手们哪里需要停顿,哪里需要激昂。HTML 标签通常是英文词汇的全称（如块引用:blockquote ）或缩略语（如“p”代表 Paragragh） ，但它们的与一般文本有区别，因为它们放在单书名号里。故 Paragragh 标签是,块引用标签是 。有些标签说明页面如何被格式化（例如，开始
15、一个新段落） ，其他则说明这些词如何显示(使文字变粗)还有一些其他标签提供在页面上不显示的信息例如标题。关于标签，需要记住的是，它们是成双出现的。每当使用一个标签如,则必须以另一个标签将它关闭。注意“blockquote”前的斜杠，那就是关闭标签与打开标签的区别。但是也有一些标签例外。比如，标签就不需要。基本HTML 页面以 标签开始，以 结束。在它们之间，整个页面有两部分标题和正文。标题词夹在和标签之间这个词语在打开页面时出现在屏幕底部最小化的窗口。正文则夹在和之间即所有页面的内容所在。页面上显示的任何东西都包含在这两个标签之中。那么让我们建立一个简单的范例吧，非常容易的。第一步，当然是要建
16、立一个新的文本文件（记住，如果你在使用比较复杂的文字处理器，就应该用“纯文本”或“普通文本”来保存） ，将它命名为“xxxx.html” 。( 随便你起一个什么名字,但内蒙古化工职业学院毕业设计（论文）用纸第 7 页记住,要用英文) 扩展名也可是 HTML 然后你可以用浏览器将它打开，你会看见最简单的自己做的页面。2.3 使用 CSS+DIV 布局网页2.3.1 CSS+DIV 简介CSS+DIV 是标准化（或称 “web 标准” ）中常用的术语之一，通常为了说明与 HTML 网页设计语言中的表格（table ）定位方式的区别，因为 XHTML 网站设计标准中，不再使用表格定位技术，而是采用
17、CSS+DIV 的方式实现各种定位。CSS 是英语 CascadingStyleSheets(层叠样式表)的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。DIV 元素是用来为 HTML 文档内大块 block-level）的内容提供结构和背景的元素。DIV 的起始标签和结束标签之间的所有内容都是用来构成这个快的，其中所包含元素的特性由 DIV 标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。2.3.2 应用的方法 1、In-line 行内：行内样式是在 html 标签里直接使用 style 属性，如：text，设定段落文字红色。但要记住，最后的 HTML
18、应该是独立出来，使用表现文档，所以行内样式应该在任何地方避免。2、Internal 内部：使用于整个页面的植入内部样式在 head 标签里面，style标签包围样式，可以在里面输入你想要的样式值。例如：CSS Example p color: red; a color: blue; 所有段落文字红色，链接蓝色。3、外部：外部样式使用在整个多样页面网站。它是一个独立的 CSS 文件，像下面一样：p color: red; a color: blue; 如果上面保存为“web.css” ，HTML里面的链接就会像下面所显示效果，相关的代码如下：。内蒙古化工职业学院毕业设计（论文）用纸第 8 页2.
19、3.3 CSS+DIV 的布局方式1、网页页面中的每个区域，如页头区、主体区、链接和版权声明区等，我们都插入相应的 DIV 元素，然后，用 CSS 控制 DIV 使网页居中显示。2、对于页面中所有的 DIV 元素，利用 CSS 控制 DIV 的位置，我们可以将页面中的 DIV 视为一个个块状元素。在此应用了“盒模型”的工作原理， “盒模型”是 CSS 的基础， “盒模型”理论认为：页面上的每个元素都被看做一个矩形，这个矩形由内容、填充（padding） 、边框（border）和边距（margin）构成。元素的实际宽度=内容宽度+2x 边距+2x 填充+2x 边框，对于每部分的间距，以及文字、图
20、片空隙的调整，用 CSS+DIV 布局是很合适的，那就是用 “盒模型”的工作原理来调整，在网页默认的情况下，元素由上到下依次叠放，当这样的叠放顺序不能满足布局的需要时，就要使用“float（浮动） ”属性来改变元素的叠放顺序。元素应用了“float（浮动） ”属性，他周围的元素就会靠近、包围元素，这样的影响在有的布局中是多余的，这时，可以用“clear（清除） ”属性来阻止这种浮动对后面元素的影响。再复杂的布局也是重复利用这样的技术，大到网页每一部分的叠放，小到文字、图片的排版。3、在 DIV 中添加各种网页元素，把文字、图片、动画安排到合适的位置，再把每部分合理地叠放到网页中，这样就完成了网页的布局。
