使用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
1
四、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
2
3
前 言
当今世界已进入信息时代，Internet成为21世纪最受关注的行业之一,它的飞速发展和在全球范围的普及应用正在给人类生活带来革命性变化。网络技术的发展也取得了巨大的成就，为网站开发提供了很好的技术支持。网站已经成为现阶段众多企业不可或缺的网络营销平台，互联网应用规模正不断扩大。其中，特别是中小型企业，对于网络平台搭建的需要求相当的迫切。各大门户网，企业网都在WEB2.0的标准上,采用CSS+DIV来布局网站，所以才有了此次的选题。
论文详细论述了一个基于公司网站的开发的设计过程。在技术上，采用了 Dreamweaver网站开发工具，以 HTML的超大功能结合 JAVAScript 的客户端语言，并加以 FLASH 等动画以增加网站的动态效果。这样的构造有利于以后对网站系统开发的把握，并给以后的开发积累一定的经验，提升编程能力。其中，最主要的就是介绍和展示DIV+CSS在网页中的最用和魅力。
本文实现了首页、新闻、案例、介绍、联系、搜索、留言、联系我们、等功能，全面化个人网站的需求。
论文组织如下：首先阐述了该系统的开发背景、意义，详细介绍了div+css理论知识；其次介绍了相关的开发工具及技术基础；接着对网站的需求进行了分析，并提出了具体的设计方案；然后展现了整个系统的具体实现，包括网页的设计和连接，各功能模块的实现；最后对该网站进行了严格的测试。
1
第一章 网站开发背景
第一节 web概述
一、认识WEB
web本意是蜘蛛网和网的意思。现广泛译作网络、互联网等技术领域。表现为三种形式，即超文本（hypertext）、超媒体（hypermedia）、超文本传输协议（HTTP）等。Web(World Wide Web，简称WWW，又称万维网)是目前Internet上应用最广泛也是最重要的信息服务类型，它的影响已经进入了Internet上 的广告、新闻、电子商务和展示信息等各个服务领域。 Web采用浏览器/服务器（B/S）工作模式，其运作模式可以描述为：请求→处理→应答。Web以超文本标记语言HTML(Hyper Text Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础，通过浏览器为用户提供方便友好的信息浏览界面。 Web将位于全世界互联网上不同网址的相关信息有机地编织在一起。在Web服务方式中，信息以页面（或称Web页）的形式存储在Web服务器中，这些页面采用超文本的方式对信息进行组织，通过链接将一页信息链接到另一页信息。这些相互链接的页面既可以放置在同一台主机上，也可以放置在不同的主机上。页面到页面的链接信息由统一资源定位器URL(Uniform Resource Locator)维持。用户通过客户端应用程序（即浏览器）向Web服务器发出请求，服务器根据客户端的请求将保存在服务器中的某个页面 返回给客户端，浏览器接收到页面后对其进行解释，最终将信息以图、文、声并茂的形式呈现给用户。 Web服务的特点在于高度的集成性，它能够实现不同类型的信息（如文本、图像、声音、动画和视频等）和服务（如New、FTP、Telnet、Gopher及Mail等）的无缝链接，特别适合于广域网中信息的组织、检索与显示。
二、认识WEB2.0标准
“Web 2.0”的概念开始于一个会议中，展开于O'Reilly公司和
2
使用div+css开发个人网站毕业设计
