武汉大学

毕业设计（论文）说明书

题目 DIV+CSS技术在WEB中的实际应用——专题的排版

专业班级

学生

指导教师

总评成绩

2011年 05 月 02 日

武汉大学

毕业设计（论文）任务书

专业班级学生

一、课题名称

DIV+CSS技术在WEB中的实际应用——专题的排版

二、课题条件

在本次设计中采用的是WEB2.0技术，对设计后的网页效果图进行静态页面编写，将网页代码与CSS代码分离开。

三、任务（含实验、分析、计算、绘图、论述等内容）

（1）对项目进行初步分析：页面组成

（2）对组成的页面深入分析：页面关系。

（3）对构成的页面之间的异同点逐一编写。

（4）对页面编写CSS并同时实现样式分离。

四、设计（论文）说明书内容

DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，DIV只是HTML中的一个标签，而CSS是一种语言，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。XHTM是目前国际上倡导的网站标准设计语言，因为XHTML网站设计语言具有的基本特点，这种CSS＋DIV模式的网站设计具有一定的优势。本次设计将会将“符合W3C标准”作为设计原则，使设计出的页面更加符合网页设计规范，对搜索引擎更加友好，并且支持浏览器的向后兼容性。

五、计划进度

1、发题时间 2011 年 4 月 2 日

2011年4月2日开始编写论文，当天完成进度为全文的10%。

2011年4月6日跳过项目详细设计，完成全文50%。

2011年4月7日至2011年4月9日对项目详细设计。完成全文85%。

2011年4月10日完成剩余项目设计，对项目整体进行调试。

2011年4月11日论文进入最后阶段。对整个项目进行最后测试，测试结果良好，并对全文格式进行整合。于当夜完成。

指导教师教研室主任

年月日年月日

注：1、学生进行实践教学环节前，指导教师应填写好此任务书，经教研室主任签字后，正式给学生下任务。实践教学环节结束后，应将此任务书放在设计（论文）说明书首页装订。

2、若实践教学环节和任务书另行发了单行本，则不填写此任务书，实践教学环节结束后，应将任务书单行本装入资料袋。

毕业设计（论文）评审表（指导教师用）

武汉大学毕业设计（论文）答辩小组意见书专业班级学生姓名

题目 DIV+CSS技术在WEB中的发展与应用

目录

第一章符合WEB标准 (7)

1.1 早期常用的WEB标准方法 (7)

1.2 新的WEB标准 (7)

第二章分析页面——计算“房子”的大小和数量 (9)

2.1 分析页面个数 (9)

2.2 页面构造分析 (10)

2.2.1 专题首页 (10)

2.2.2 专题列表页 (11)

2.2.3 专题内容页 (12)

第三章搭建模型——给他们安排足够合适的“房间” (13)

3.1 画出简图 (13)

3.1 用div把他们的房子搭建起来 (14)

3.1.1 基本构成——通用的“房间” (14)

3.1.2 首页div构成 (15)

3.1.2 列表页div构成 (16)

3.1.3 内容页div构成 (18)

第四章设计样式——让“房子”看起来更漂亮 (20)

4.1 样式表简介 (20)

4.1.1 什么是CSS (20)

4.1.2 CSS的作用 (20)

4.1.3 将样式表加入HTML中 (20)

4.2 给页面添加样式 (21)

4.2.1 相同板块用同样的样式 (21)

4.2.2 首页的样式 (22)

4.2.3 列表页的样式 (24)

4.2.4 内容页的样式 (26)

总结 (28)

致谢 (29)

参考文献 (30)

第一章符合WEB标准

1.1 早期常用的WEB标准方法

早期常用的网页布局，通常采用下面四种方法

图1-1早期网页布局

这些布局的方法在很长时间以来，都是较为流行的网页布局模式，或是其中的一种，或是以上四种方法混合使用，随着网络技术的不断发展和许多新的上网设备的出现，使得这些网页布局方式越来越不能适应新的要求。

新的WEB标准在国内逐渐普及，一种基于DIV+CSS的新型网页布局方式开始流行，一些大型门户网站都已经完成了网站的重建，都是使用DIV+CSS的布局方式。

1.2 新的WEB标准

WEB标准是一系列标准的集合，在WEB标准中，把网页分成4个部分：内容(Content)、结构(Structure)、表现(Presentation)和行为(Behavior)。

“内容”就是页面实际要传达的真正信息，包含数据、文档或者图片等。注意这里强调的“真正”，是指纯粹的数据信息本身。比如一些辅助的信息，像导航菜单、装饰性图片等。

“结构”就是把混乱的内容进行结构化，比如加上标题、作者、章、节、段

落和列表，这些就称为“结构”。结构使内容更加具有逻辑性，易用性。

虽然定义了结构，但是内容还是原来的样式没有改变，例如字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，称之为“表现”。

“行为”就是对内容的交互及操作，例如，使用JS判断一些表单提交，或者实现菜单的显示和隐藏等。

HTML和XHTML页面都是由“内容、结构、表现和行为”这4个方面组成的。“内容”是基础，然后是附加上去的“结构”和“表现”，最后再对他们加上“行为”。针对“结构、表现和行为”这三个部分，W3C组织制定了大部分的标准。

第二章分析页面——计算“房子”的大小和数量对WEB标准有了初步的认识之后，我现在将制作一个交友网站的“成功故事”专题系列。交友网站的“成功故事”主要是用于交友网中的会员叙述他们在该网站的成功交友案例。

2.1 分析页面个数

成功故事类似于新闻发布系统，即可以由会员在后台自行添加他自己的成功故事，然后在前台页面中表现出来。后台制作页面主要是程序员多年经验后集成的一些通用页面，我就不加以制作，我主要制作前台展示给所有网站浏览者的前台页面。

对于新网发布系统的前台页面，主要是由三个页面构成：

（1）专题首页：用于展示特别受欢迎的成功匹配新人，以及是最新成功的新人案例、成功的新人的婚纱照。

（2）专题的列表页：用于展示所有发布过的新人成功案例，使用上一页下一页可以翻页逐一浏览。

（3）专题的内容展示页：用于展示某一个新人的成功案例，可以添加多张新人图片，新人的认识过程，恋爱过程……所有想说的话都可以发表。

三个页面的主要作用和包含内容已经有了大概的面貌，那么三个页面之间的关系是如何的呢？由上面的叙述可以知道，这三个页面是父->子->孙的关系，首页是父页面，用于展示主要的东西；列表页是子页面，用于展示所有的案例；内容页是孙页面，用于展示某一个案例的详细情况。这三个页面之间可以用文字链接的形式将他们链接起来，以便可以互相点击。

2.2 页面构造分析

2.2.1 专题首页

页面导航

FLASH

主体内容

底部：链接、声明、版权等

图2-1 专题首页

首页中最上面是页面导航部分，然后是页面的flash部分，再下面是首页的主体内容部分，这部分是典型的左右两栏式设计：左边是4个相同的图片加一小段文字介绍的形式，右边是两列相同的姓名加日期的形式。接着最后是网站的底部链接、底部声明、底部版权等。

页面导航

FLASH

主体内容

底部：链接、声明、版权等

图2-2 专题列表页

列表页中最上面是页面导航部分，然后是页面的flash部分，再下面是列表页的主体内容部分：这部分是一些相同的图片+文字的形式，再加上列表下面进行翻页的部分。接着最后是网站的底部链接、底部声明、底部版权等。

页面导航

FLASH

主体内容

底部：链接、声明、版权等

图2-3 专题内容页

内容中最上面是页面导航部分，然后是页面的flash部分，再下面是内容的主体内容部分：主要是文字加图片的介绍，以及回到上一级栏目或者上上级栏目的链接。接着最后是网站的底部链接、底部声明、底部版权等。

第三章搭建模型——给他们安排足够合适的“房间”

3.1 画出简图

根据上面对页面的初步分析，可以知道这三个页面是以“导航+flash+内容+底部”构成的，所以我们画出三个页面的草图的时候可以给这几处相同的部分同样的命名，让他们引用相同的CSS，得到一致的样式。

图3-1 首页简图

图3-2 列表页简图

图3-3 内容页简图

3.1 用div把他们的房子搭建起来

3.1.1 基本构成——通用的“房间”

首先，每个页面最外面设置一个div将所有内容包裹起来，以便后面设置css 样式的时候，可以将页面整体居中：

为了以后的设计更方便，我在这些div之间添加上一些个人的注释，注释的格式为：

或者

然后再在这个最外层的div里面设置其他的div

3.1.2 首页div构成

除了上面搭造的基本构成之外，再设置首页div的主体内容部分，也就是

之间的部分，之前已经分析过，首页的主体部分是典型的两栏式设计，所以我可以将这两栏写成：

而左边是4个相同的图片加一小段文字介绍的形式，右边是两列相同的姓名加日期的形式。这两部分都是由循环的列表构成，这里，我可以使用一个名为

的无序列表的标签：

左边可以写成：

• 

  -->

  male

  female
  点击查看>>