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

使用div+css开发个人网站毕业设计 目 录 前 言 1 第一章 网站开发背景 2 第一节 web概述 2 一、认识WEB 2 二、认识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象素的bug 12 七、IE捉迷藏的问题 12 八、IE6下为什么图片下有空隙产生 12 第二章 开发工具的介绍 13 第一节 梦幻网页的编织者——Dreamweaver 13 第二节 图形、图像编辑设计软件制作软件——Adobe Photoshop cs2 13 第三章 网站总体分析和设计 15 第一节 网站开发的需求分析 15 第二节 网站的总体设计 16 第三节 整体风格设计 19 一、页面属性设计 19 二、色彩搭配 19 三、连接效果 20 四、导航设计 20 五、细节设计 21 第四节 首页设计 21 一、DIV分布和概述 21 二、搜索关键字与描述 23 第五节 其他页面设计 23 第四章 网站的测试 29 第五章 后续工作 30 结 论 31 结束语 32 附录一：网站首页效果图 33 附录二：部分代码 34 前 言 当今世界已进入信息时代，Internet成为21世纪最受关注的行业之一,它的飞速发展和在全球范围的普及应用正在给人类生活带来革命性变化。网络技术的发展也取得了巨大的成就，为网站开发提供了很好的技术支持二、Web 2.0”的概念开始于一个会议中，展开于OReilly公司和MediaLive国际公司之间的头脑风暴部分。所谓互联网先驱和OReilly公司副总裁的戴尔·多尔蒂(Dale Dougherty)注意到，同所谓的崩溃迥然不同，互联网比其他任何时候都更重要，令人激动的新应用程序和网站正在以令人惊讶的规律性涌现出来。更重要的是，那些幸免于当初网络泡沫的公司，看起来有一些共同之处。那么会不会是互联网公司那场泡沫的破灭标志了互联网的一种转折，以至于呼吁“Web 2.0”的行动有了意义？我们都认同这种观点，Web 2.0会议由此诞生。CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或 XML 等文件式样的计算机语言。① 符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。 ② 支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。 ③ 搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。 ④ 样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。 　 ⑤ CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。 　　 ⑥ 表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。 第二节 级联样式表简介DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由的属性来控制，或者是通过使用样式表格式化这个块来进行控制 图2.2 css2.0盒模型 在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同，CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏。与现实联系起来后对这种模式就更为容易接受了，方便了我们后期的教学。 二、转变思路 传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件做出网站的小样，最后再切成小图，通过设计HTML生成页面，改用CSS排版后，我们要转变这个思路