使用div+css开发个人网站毕业设计.docx

1、使用div+css开发个人网站毕业设计使用div+css开发个人网站毕业设计前 言当今世界已进入信息时代，Internet成为21世纪最受关注的行业之一,它的飞速发展和在全球范围的普及应用正在给人类生活带来革命性变化。网络技术的发展也取得了巨大的成就，为网站开发提供了很好的技术支持。网站已经成为现阶段众多企业不可或缺的网络营销平台，互联网应用规模正不断扩大。其中，特别是中小型企业，对于网络平台搭建的需要求相当的迫切。各大门户网，企业网都在WEB2.0的标准上,采用CSS+DIV来布局网站，所以才有了此次的选题。论文详细论述了一个基于公司网站的开发的设计过程。在技术上，采用了 Dreamweav

2、er网站开发工具，以 HTML的超大功能结合 JAVAScript 的客户端语言，并加以 FLASH 等动画以增加网站的动态效果。这样的构造有利于以后对网站系统开发的把握，并给以后的开发积累一定的经验，提升编程能力。其中，最主要的就是介绍和展示DIV+CSS在网页中的最用和魅力。本文实现了首页、新闻、案例、介绍、联系、搜索、留言、联系我们、等功能，全面化个人网站的需求。论文组织如下：首先阐述了该系统的开发背景、意义，详细介绍了div+css理论知识；其次介绍了相关的开发工具及技术基础；接着对网站的需求进行了分析，并提出了具体的设计方案；然后展现了整个系统的具体实现，包括网页的设计和连接，各功能

3、模块的实现；最后对该网站进行了严格的测试。 第一章 网站开发背景第一节 web概述一、认识WEBweb本意是蜘蛛网和网的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本（hypertext）、超媒体（hypermedia）、超文本传输协议（HTTP）等。Web(World Wide Web，简称WWW，又称万维网)是目前Internet上应用最广泛也是最重要的信息服务类型，它的影响已经进入了Internet上 的广告、新闻、电子商务和展示信息等各个服务领域。 Web采用浏览器/服务器（B/S）工作模式，其运作模式可以描述为：请求处理应答。Web以超文本标记语言HTML(Hype

4、r Text Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础，通过浏览器为用户提供方便友好的信息浏览界面。 Web将位于全世界互联网上不同网址的相关信息有机地编织在一起。在Web服务方式中，信息以页面（或称Web页）的形式存储在Web服务器中，这些页面采用超文本的方式对信息进行组织，通过链接将一页信息链接到另一页信息。这些相互链接的页面既可以放置在同一台主机上，也可以放置在不同的主机上。页面到页面的链接信息由统一资源定位器URL(Uniform Resource Locator)维持。用户通过客户端应用程序（即浏览器）

5、向Web服务器发出请求，服务器根据客户端的请求将保存在服务器中的某个页面 返回给客户端，浏览器接收到页面后对其进行解释，最终将信息以图、文、声并茂的形式呈现给用户。 Web服务的特点在于高度的集成性，它能够实现不同类型的信息（如文本、图像、声音、动画和视频等）和服务（如New、FTP、Telnet、Gopher及Mail等）的无缝链接，特别适合于广域网中信息的组织、检索与显示。二、认识WEB2.0标准“Web 2.0”的概念开始于一个会议中，展开于OReilly公司和MediaLive国际公司之间的头脑风暴部分。所谓互联网先驱和OReilly公司副总裁的戴尔多尔蒂(Dale Dougherty

6、)注意到，同所谓的“崩溃”迥然不同，互联网比其他任何时候都更重要，令人激动的新应用程序和网站正在以令人惊讶的规律性涌现出来。更重要的是，那些幸免于当初网络泡沫的公司，看起来有一些共同之处。那么会不会是互联网公司那场泡沫的破灭标志了互联网的一种转折，以至于呼吁“Web 2.0”的行动有了意义？我们都认同这种观点，Web 2.0会议由此诞生。WEB 标准不是某一个标准，而是一系列的标准集合，网页主要是由三部分组成：结构（structure）、表现（presentation）、和行为（behavior）。对应的标准也分为三个方面：结构化标准语言主要包括 XHTML和XML ，表现标准语言主要包括CS

7、S，行为标准主要包括对象模型（如 W3CDOM）、ECMAScripr等。这些标准大部分由W3C起草和发布， 也有一些是其他标准组织制订的标准， 比如 ECMA (European computer Manufacturers Asscoiation) 的 ECMASscript 标准。 我们来简单了解下这些标准：1、结构标准语言XML 是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考WWW.W3.ORG/TR/2000/REC-XML-30001006。和xthml一样，xml 同样是

8、来源于SGML，但是xml是一种能定义其他语言的语。xml 最初设计的目的是弥补html的不足，以强大的扩展性妈祖网络信息发布的需要，够来逐渐用于网络数据的转换和描述。关于xml 的好处和技术规范描写，这里就不说了有更多的数据可供参考。xhtml是 The Extensible Hapertext Markup Language 可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日发布的XthML1.0 ，xml 虽然是数据转换的能力强大，完全可以替代HTML，但是面对成千上万的已有的站点，直接串通XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，

9、得到了xhtml 。简单的说，建立xhtml的目的就是实现XHTML向xml的过渡。2、表现标准语言CSS是 Caseading Style Sheets 层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2。W3C创建CSS标准的目的是以CSS取代表格式布局、帧和其它表现的语言。纯CSS布局与结构式xhtml结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。3、行为标准(1)DOMDOM 是 Document Object Model 文档对象模型的缩写。根据 W3C 规范http:/www.w3.org/dom/,DOM是一种浏览器，平台，语言的借口，使得你

10、可以访问页面其它的标准组件。简单的理解，DOM解决了 Netscaped 的Javascript和Microsoft 的 Jscript 之间的冲突，给予web 设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对象。(2)ECMAScriptECMAScript是ECMA（European Computer Manufacturers Association) 制订的标准脚本语言JAVAScript。目前推荐遵循的是 ECMAScript 262。CSS是Caseading Style Sheets 的简称。实际上它是一组样式。我们对CSS样式并不陌生，在网上冲浪时，几

11、乎随时都在与CSS打交道，在网页上没有使用过CSS的网页可能不好找，不管你用什么工具软件制作网页，都在有意无意的使用CSS。用好CSS能使你的网页更加的简练，为什么同样内容的网页，有的人能做出及时KB，而高手做出来的只有十几KB，CSS在其中的作用是不言而喻的。第二章 DIV+CSS详解第一节 DIV+CSS简介CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或 XML 等文件式样的计算机语言。DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计

12、语言中的表格（table）定位方式,真正地达到了w3c内容与表现相分离。HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。XHTML语言是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。以下是DIV+CSS的特点简介：符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。支持浏览器的向后兼容，

13、也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。 搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。 样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。 CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。 表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。第二节 级

14、联样式表简介有三种方法可以在站点网页上使用样式表：将网页链接到外部样式表。 在网页上创建嵌入的样式表。 应用内嵌样式到各个网页元素。 每一种方法均有其优缺点： 当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表 中作一次更改 而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以 .css 做为文件扩展名，例如 Mystyles.css。 当人们只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌”在网页的 标记符

15、内。嵌入的样式表中的样式只能在同一网页上使用。 使用内嵌样式以应用级联样式表属性到网页元素上。 如果网页链接到外部样式表，为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。第三节 DIV+CSS布局的优点一、利于搜索引擎蜘蛛爬行根据总结和经验，div+css布局有利于蜘蛛的爬行，拿html的table布局和div+css布局的网页来做对比，很显然table的字节大于div+css的，字节小就有益于搜索引擎蜘蛛下载页面所用的时间，缩减页面代码量，可以提高页面浏览速度。而且也有益于蜘蛛爬行到网站深处。二、易于修改提高易用性，使用CSS可以结构化HTML，可以轻松控制页面的布局。C

16、SS编写容易，可以像写html代码一样轻松地编写CSS。在一般情况下，div+css布局的网站，都是将html页面和css文件分开的，div+css的特点就是能将网页的内容和表现形式分离，将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。网站改版方便，只要修改CSS文件就可以重新构建网站。所以，假如你要修改网站整站布局的话，一般只需要修改css文件里的的个别属性即可，而这种特点是table不具备的。可重复使用，编程完成多处使用。你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应

17、的行，那么整个站点的所有页面都会随之发生变动。三、减少网页加载时间缩减页面代码量，可以提高页面浏览速度，在几乎所有的浏览器上都可以使用。前面就提到过，div+css是将css文件和html文件分开的，当用户点击网站时，是在同时下载css文件和html文件，所以可以提高打开网页的速度，而table是必须以标签开始到结束才能显示网页内容。另外，div的html文件则是边加载边显示，这样是不是提高了用户体验? Google已经将网页加载速度列入了排名的因素，尽管这个因素只能影响排名的一小部分，甚至可以忽略，但是有利于seo的办法，我们为什么不用?四、代码精简如果使用DIV+CSS布局，网页的页面代码

18、精简，使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。Table 中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div 更能体现样式和结构相分离，结构的重构性强。五、相对表格的嵌套问题在一些文章是称，搜索引擎一般不喜欢抓取三层以上的表格嵌套，这一点一直没有得到搜索引擎官方的证实。我的也不能完全肯定是不是，就目前掌握的情况来看，在解析Table布局的页面，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。

19、使用Table布局，为了达到一定的视觉效果，不得不套用多个表格。如果嵌套的表格中是核心内容，解析时跳过了这一段没有抓取到页面的核心，这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。六、搜索排名的影响页面结构简洁清晰，容易被搜索引擎搜索到完成了对网站优化工作。如果我们在设计时运用于基于XTHML标准的DIV+CSS布局，在设计完成要尽可能的完善到能通过W3C验证。事实证明使用XTHML架构的网站排名状况一般都不错。这一点或许会有争议，但至少这样不会有什么坏处。方便搜索引擎的搜索，用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的

20、评价。第四节 div+css布局方式对于网站DIV+CSS设计越来越受到业界的关注，从个人网站到企业及门户网站，页面设计人员已经将DIV+CSS作为了业界标准。如果用DIV+CSS来构建和美化网站，那么DIV就是整个网站的骨架，CSS样式就是网站的衣服。其中的内容，就是血肉。要入手设计一个网站。那么，就要从DIV的布局开始。DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。各大个人网、企业网、门户网基本上

21、都在推崇DIV+css这一布局方式。比如：腾讯网、IBM官网、等等。其中就以IBM官网来说，顶部是导航，下面为FLASH，底部用UL 列举出公司各项服务的连接。从整体布局来看，采用的是单栏式，是页面看上去简洁大方，现在的网页布局主流也从繁杂华丽转变到简单大方，个人也比较推崇后者。所以对于重庆逸飞咨询有限公司的网站也从DIV+CSS着手，模仿IBM官网div布局。本网站的骨架架构如下图2.1： 图2.1 设计中网站的骨架图第五节 div+css理论概述一、理解CSS盒子模型什么是CSS的盒子模式呢？为什么叫它是盒子？在网页设计中常听到一些属性名：内容(content)、填充(padding)、边

22、框(border)、边界(margin)， CSS盒子模式都具备这些属性，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。盒模型3D效果图如下图2.2所示：图2.2 css2.0盒模型在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同，CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏。与现实联系起来后对这种模式就更为容易接受了，方便了我们后期的教学。二、转变思路传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件做出网站的小样，最后再切成小图，

23、通过设计HTML生成页面，改用CSS排版后，我们要转变这个思路，此时我们主要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调用你想要的网页风格，况且CSS排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。三、实现结构与表现分离这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便。给出一个实例，对比把样式写进去和分离开的区别，进一步说明结构与表现分离的优点，在这里建议学生单独建立css文件与页面进行链接，这样的方式会使代码部分更为清淅。第六节 div+css的兼容性问题一、div的垂直居中问题 vertical-ali

24、gn:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行 。二、margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 三、浮动ie产生的双倍距离#box float:left; width:100px; margin:0 0 0 100px; /这种情况之下IE会产生200px的距离 display:inline; /使浮动忽略 这里细说一下block与inline两个元素：block元素

25、的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);#box display:block; /可以为内嵌元素模拟为块元素 display:inline; /实现同一行排列的效果 diplay:table。四、IE与宽度和高度的问题 IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度，比如要设置背景图片，这个宽

26、度是比较重要的。五、页面的最小宽度min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个 放到 标签下，然后为div指定一个类。六、DIV浮动IE文本产生3象素的bug左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距。七、IE捉迷藏的问题当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用

27、line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。 八、IE6下为什么图片下有空隙产生解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为vertical-align:top | bottom |middle |text-bottom 都可以解决.等各种解决兼容性问题。第二章 开发工具的介绍第一节 梦幻网页的编织者DreamweaverDreamweaver是创建和管理网页的专业化可视编辑器。使用Dreamweaver可以轻松创建跨平台、跨浏览器的页面。Macromed

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

29、可显示当前文档，文档的外观和浏览器中看到的非常相似。 装载器中包含一些打开和关闭常用检查器和模板的按钮。 对象工具栏包含创建不同类型的对象（例如 图象、表格和层等）的按钮。 属性检查器显示选定对象的属性。 快捷菜单可以使用户对当前选择或区域快速执行某些命令。 可固定的浮动工具栏允许用户将浮动窗口、检查器和工具栏组合在一个或多个选择窗口中。第二节 图形、图像编辑设计软件制作软件Adobe Photoshop cs2Photoshop cs2是目前最流行的图形、图像编辑设计软件，在数码影像处理、图像编辑合成、广告设计、封面设计、美术绘画、网页设计等领域都被广泛地应用。 文字处理更加方便 增加的图层

30、集使图层管理更有序。 新增图像功能：图像的剪切和剪裁更加方便。 将所有工具的选项板改进为工具选项栏放置在工作区顶部，方便先项参数的设置。 为了更方便地用路径绘画，改进增加了几何形状工具，通过选择工具的不同工作模式，可创建路径、几何形状或几何填充区，使得矢量绘图功能得到了加强。第三章 网站总体分析和设计第一节 网站开发的需求分析随着网络技术的饿不断发展,网络应用已经渗透到人类社会的各个角落作为网络，世界色支撑点的网站,更是人们关注的热点：政府利用网站宣传自己的施政纲领, 日益成为与百姓交流的直通车；企业利用网站宣传自己的形象,挖掘无限商机，个人利用网站展示个性风采,创建彼此沟通的桥梁.越来越多的

31、企业希望拥有网。建立个人网站要有一个清晰的网站布局。比如说，导航条要不要？很多人说那东西人人在做，就显得太俗没个性，难显示出新潮。但导航条之所以有那么多人在用，是因为它给浏览者一个明确的布局，便利人们查找本身所需的信息。从某种角度上说，大家都在用的东西就说明它确实被大家所接受。要清楚网站做出来是给每一个人普通用户看的。网站还要经常更新，给人以新意。设计技术的成长，带来了网页世界的繁荣。尤其在崇尚个性的今天，设计者们更是将页面设计表示的淋漓尽致。用户欣喜的看到那些僵化的设计模式正在被逐个打破，网页设计充满了朝气。但是，作为网页设计者，不能一味的只追求个性的表现，还必需兼顾到用户和客户的习惯，在表

32、现本身的风格的同时，在功能上使用户更加便利。网站导航结构图如下图3.1所示：图3.1 网站导航功能需求结果：生成5个页面，index.HTML-网站首页；blog.html-网站新闻；notes.html-网站案例；styles.html-网站介绍; lianxi.html-网站联系。第二节 网站的总体设计与传统媒体不同，网页除了文字和图像以外，还包含声音、视频和动画等新兴多媒体元素，更借助由代码语言编程所实现的各种交互式效果，增加了网页界面的生动性和复杂性，也使得网页设计者需要考虑更多页面元素的排布、优化。一般来说，网页的界面主要由下面几个因素构成：文字：文字元素是信息传达的主体部分。网页中的文字主要包括标题、信息、文字链接、几种主要形式。标题和传统媒体中信息传达的基本作用相同，是内容的简概说明一般比较醒目、优