'使用div+css开发个人网站毕业设计目录前言1第一章网站开发背景2第一节web概述2一、认识WEB2二、认识WEB2.0标准2第二章DIV+CSS详解5第一节DIV+CSS简介5第二节级联样式表简介6第三节DIV+CSS布局的优点6一、利于搜索引擎蜘蛛爬行6二、易于修改7三、减少网页加载时间7四、代码精简7五、相对表格的嵌套问题8六、搜索排名的影响8第四节div+css布局方式8第五节div+css理论概述9一、理解CSS盒子模型9二、转变思路10三、实现结构与表现分离11第六节div+css的兼容性问题11一、div的垂直居中问题11二、margin加倍的问题11三、浮动ie产生的双倍距离11 四、IE与宽度和高度的问题11五、页面的最小宽度12六、DIV浮动IE文本产生3象素的bug12七、IE捉迷藏的问题12八、IE6下为什么图片下有空隙产生12第二章开发工具的介绍13第一节梦幻网页的编织者——Dreamweaver13第二节图形、图像编辑设计软件制作软件——AdobePhotoshopcs213第三章网站总体分析和设计15第一节网站开发的需求分析15第二节网站的总体设计16第三节整体风格设计19一、页面属性设计19二、色彩搭配19三、连接效果20四、导航设计20五、细节设计21第四节首页设计21一、DIV分布和概述21二、搜索关键字与描述23第五节其他页面设计23第四章网站的测试29第五章后续工作30结论31结束语32附录一：网站首页效果图33附录二：部分代码34 前言当今世界已进入信息时代，Internet成为21世纪最受关注的行业之一,它的飞速发展和在全球范围的普及应用正在给人类生活带来革命性变化。网络技术的发展也取得了巨大的成就，为网站开发提供了很好的技术支持。网站已经成为现阶段众多企业不可或缺的网络营销平台，互联网应用规模正不断扩大。其中，特别是中小型企业，对于网络平台搭建的需要求相当的迫切。各大门户网，企业网都在WEB2.0的标准上,采用CSS+DIV来布局网站，所以才有了此次的选题。论文详细论述了一个基于公司网站的开发的设计过程。在技术上，采用了Dreamweaver网站开发工具，以HTML的超大功能结合JAVAScript的客户端语言，并加以FLASH等动画以增加网站的动态效果。这样的构造有利于以后对网站系统开发的把握，并给以后的开发积累一定的经验，提升编程能力。其中，最主要的就是介绍和展示DIV+CSS在网页中的最用和魅力。本文实现了首页、新闻、案例、介绍、联系、搜索、留言、联系我们、等功能，全面化个人网站的需求。论文组织如下：首先阐述了该系统的开发背景、意义，详细介绍了div+css理论知识；其次介绍了相关的开发工具及技术基础；接着对网站的需求进行了分析，并提出了具体的设计方案；然后展现了整个系统的具体实现，包括网页的设计和连接，各功能模块的实现；最后对该网站进行了严格的测试。42 第一章网站开发背景第一节web概述一、认识WEBweb本意是蜘蛛网和网的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本（hypertext）、超媒体（hypermedia）、超文本传输协议（HTTP）等。Web(WorldWideWeb，简称WWW，又称万维网)是目前Internet上应用最广泛也是最重要的信息服务类型，它的影响已经进入了Internet上的广告、新闻、电子商务和展示信息等各个服务领域。Web采用浏览器/服务器（B/S）工作模式，其运作模式可以描述为：请求→处理→应答。Web以超文本标记语言HTML(HyperTextMarkupLanguage)与超文本传输协议HTTP(HyperTextTransferProtocol)为基础，通过浏览器为用户提供方便友好的信息浏览界面。Web将位于全世界互联网上不同网址的相关信息有机地编织在一起。在Web服务方式中，信息以页面（或称Web页）的形式存储在Web服务器中，这些页面采用超文本的方式对信息进行组织，通过链接将一页信息链接到另一页信息。这些相互链接的页面既可以放置在同一台主机上，也可以放置在不同的主机上。页面到页面的链接信息由统一资源定位器URL(UniformResourceLocator)维持。用户通过客户端应用程序（即浏览器）向Web服务器发出请求，服务器根据客户端的请求将保存在服务器中的某个页面返回给客户端，浏览器接收到页面后对其进行解释，最终将信息以图、文、声并茂的形式呈现给用户。Web服务的特点在于高度的集成性，它能够实现不同类型的信息（如文本、图像、声音、动画和视频等）和服务（如New、FTP、Telnet、Gopher及Mail等）的无缝链接，特别适合于广域网中信息的组织、检索与显示。二、认识WEB2.0标准“Web2.0”42 的概念开始于一个会议中，展开于O"Reilly公司和MediaLive国际公司之间的头脑风暴部分。所谓互联网先驱和O"Reilly公司副总裁的戴尔·多尔蒂(DaleDougherty)注意到，同所谓的“崩溃”迥然不同，互联网比其他任何时候都更重要，令人激动的新应用程序和网站正在以令人惊讶的规律性涌现出来。更重要的是，那些幸免于当初网络泡沫的公司，看起来有一些共同之处。那么会不会是互联网公司那场泡沫的破灭标志了互联网的一种转折，以至于呼吁“Web2.0”的行动有了意义？我们都认同这种观点，Web2.0会议由此诞生。WEB标准不是某一个标准，而是一系列的标准集合，网页主要是由三部分组成：结构（structure）、表现（presentation）、和行为（behavior）。对应的标准也分为三个方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3CDOM）、ECMAScripr等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA(EuropeancomputerManufacturersAsscoiation)的ECMASscript标准。我们来简单了解下这些标准：1、结构标准语言XML是TheExtensibleMarkupLanguage(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考WWW.W3.ORG/TR/2000/REC-XML-30001006。和xthml一样，xml同样是来源于SGML，但是xml是一种能定义其他语言的语。xml最初设计的目的是弥补html的不足，以强大的扩展性妈祖网络信息发布的需要，够来逐渐用于网络数据的转换和描述。关于xml的好处和技术规范描写，这里就不说了有更多的数据可供参考。xhtml是TheExtensibleHapertextMarkupLanguage可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日发布的XthML1.0，xml虽然是数据转换的能力强大，完全可以替代HTML，但是面对成千上万的已有的站点，直接串通XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了xhtml。简单的说，建立xhtml的目的就是实现XHTML向xml的过渡。2、表现标准语言CSS是CaseadingStyleSheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2。W3C42 创建CSS标准的目的是以CSS取代表格式布局、帧和其它表现的语言。纯CSS布局与结构式xhtml结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。3、行为标准(1)DOMDOM是DocumentObjectModel文档对象模型的缩写。根据W3C规范http://www.w3.org/dom/,DOM是一种浏览器，平台，语言的借口，使得你可以访问页面其它的标准组件。简单的理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对象。(2)ECMAScriptECMAScript是ECMA（EuropeanComputerManufacturersAssociation)制订的标准脚本语言JAVAScript。目前推荐遵循的是ECMAScript262。CSS是CaseadingStyleSheets的简称。实际上它是一组样式。我们对CSS样式并不陌生，在网上冲浪时，几乎随时都在与CSS打交道，在网页上没有使用过CSS的网页可能不好找，不管你用什么工具软件制作网页，都在有意无意的使用CSS。用好CSS能使你的网页更加的简练，为什么同样内容的网页，有的人能做出及时KB，而高手做出来的只有十几KB，CSS在其中的作用是不言而喻的。第二章DIV+CSS详解42 第一节DIV+CSS简介CSS是英语CascadingStyleSheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件式样的计算机语言。DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式,真正地达到了w3c内容与表现相分离。HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。XHTML语言是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。以下是DIV+CSS的特点简介：①符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。②支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。③搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。④样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。　⑤CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。　　⑥表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。第二节级联样式表简介42 有三种方法可以在站点网页上使用样式表：①将网页链接到外部样式表。②在网页上创建嵌入的样式表。③应用内嵌样式到各个网页元素。④每一种方法均有其优缺点：当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表—中作一次更改—而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以.css做为文件扩展名，例如Mystyles.css。当人们只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌”在网页的标记符内。嵌入的样式表中的样式只能在同一网页上使用。使用内嵌样式以应用级联样式表属性到网页元素上。如果网页链接到外部样式表，为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。第三节DIV+CSS布局的优点一、利于搜索引擎蜘蛛爬行根据总结和经验，div+css布局有利于蜘蛛的爬行，拿html的table布局和div+css布局的网页来做对比，很显然table的字节大于div+css的，字节小就有益于搜索引擎蜘蛛下载页面所用的时间，缩减页面代码量，可以提高页面浏览速度。而且也有益于蜘蛛爬行到网站深处。二、易于修改提高易用性，使用CSS可以结构化HTML，可以轻松控制页面的布局。CSS编写容易，可以像写html代码一样轻松地编写CSS。42 在一般情况下，div+css布局的网站，都是将html页面和css文件分开的，div+css的特点就是能将网页的内容和表现形式分离，将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。网站改版方便，只要修改CSS文件就可以重新构建网站。所以，假如你要修改网站整站布局的话，一般只需要修改css文件里的的个别属性即可，而这种特点是table不具备的。可重复使用，编程完成多处使用。你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。三、减少网页加载时间缩减页面代码量，可以提高页面浏览速度，在几乎所有的浏览器上都可以使用。前面就提到过，div+css是将css文件和html文件分开的，当用户点击网站时，是在同时下载css文件和html文件，所以可以提高打开网页的速度，而table是必须以标签开始到结束才能显示网页内容。另外，div的html文件则是边加载边显示，这样是不是提高了用户体验?Google已经将网页加载速度列入了排名的因素，尽管这个因素只能影响排名的一小部分，甚至可以忽略，但是有利于seo的办法，我们为什么不用?四、代码精简如果使用DIV+CSS布局，网页的页面代码精简，使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。Table中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div更能体现样式和结构相分离，结构的重构性强。五、相对表格的嵌套问题42 在一些文章是称，搜索引擎一般不喜欢抓取三层以上的表格嵌套，这一点一直没有得到搜索引擎官方的证实。我的也不能完全肯定是不是，就目前掌握的情况来看，在解析Table布局的页面，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。使用Table布局，为了达到一定的视觉效果，不得不套用多个表格。如果嵌套的表格中是核心内容，解析时跳过了这一段没有抓取到页面的核心，这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。六、搜索排名的影响页面结构简洁清晰，容易被搜索引擎搜索到完成了对网站优化工作。如果我们在设计时运用于基于XTHML标准的DIV+CSS布局，在设计完成要尽可能的完善到能通过W3C验证。事实证明使用XTHML架构的网站排名状况一般都不错。这一点或许会有争议，但至少这样不会有什么坏处。方便搜索引擎的搜索，用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价。第四节div+css布局方式对于网站DIV+CSS设计越来越受到业界的关注，从个人网站到企业及门户网站，页面设计人员已经将DIV+CSS作为了业界标准。如果用DIV+CSS来构建和美化网站，那么DIV就是整个网站的骨架，CSS样式就是网站的衣服。其中的内容，就是血肉。要入手设计一个网站。那么，就要从DIV的布局开始。DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。各大个人网、企业网、门户网基本上都在推崇DIV+css这一布局方式。比如：腾讯网、IBM官网、等等。其中就以IBM官网来说，顶部是导航，42 下面为FLASH，底部用UL列举出公司各项服务的连接。从整体布局来看，采用的是单栏式，是页面看上去简洁大方，现在的网页布局主流也从繁杂华丽转变到简单大方，个人也比较推崇后者。所以对于重庆逸飞咨询有限公司的网站也从DIV+CSS着手，模仿IBM官网div布局。本网站的骨架架构如下图2.1：图2.1设计中网站的骨架图第五节div+css理论概述一、理解CSS盒子模型什么是CSS的盒子模式呢？为什么叫它是盒子？在网页设计中常听到一些属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。盒模型3D效果图如下图2.2所示：42 图2.2css2.0盒模型在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同，CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏。与现实联系起来后对这种模式就更为容易接受了，方便了我们后期的教学。二、转变思路传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件做出网站的小样，最后再切成小图，通过设计HTML生成页面，改用CSS排版后，我们要转变这个思路，此时我们主要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调用你想要的网页风格，况且CSS排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。三、实现结构与表现分离42 这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便。给出一个实例，对比把样式写进去和分离开的区别，进一步说明结构与表现分离的优点，在这里建议学生单独建立css文件与页面进行链接，这样的方式会使代码部分更为清淅。第六节div+css的兼容性问题一、div的垂直居中问题vertical-align:middle;将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行。二、margin加倍的问题设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;三、浮动ie产生的双倍距离#box{float:left;width:100px;margin:000100px;//这种情况之下IE会产生200px的距离display:inline;//使浮动忽略}这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);#box{display:block;//可以为内嵌元素模拟为块元素display:inline;//实现同一行排列的效果diplay:table。四、IE与宽度和高度的问题IE不认得min-这个定义，42 但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度，比如要设置背景图片，这个宽度是比较重要的。五、页面的最小宽度min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个