DIV+CSS网页布局
第7章 第2节 DIV+CSS布局网页 课件
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（4）制作导航部分 5）切换至设计视图，在“选择器”窗格中添加标签选择器“ul li”，将“属性”窗格切换 至布局属性，设置“Width”为75px、“Height”为24px，设置左边界为20px，设置“float” 为left，将“属性”窗格切换至文本属性，设置“line-height”为24px，设置“list-styletype”为none。 6）为每一个导航项设置空超链接，在“选择器”窗格中添加伪锚记选择器“a.nav:link”， 将“属性”窗格切换至文本属性，设置“font-family”为宋体、“font-size”为13px、 “color”为# 1E1E1、“font-weight”为“bold”、“text-decoration”为“none”。 7）在“选择器”窗格中添加伪锚记选择器“a.nav:visited”，将“属性”窗格切换至文本 属性，设置“font-family”为宋体、“font-size”为13px、“color”为#E1E1E1、“fontweight”为“bold”、“text-decoration”为“none”。
7.17
第7章 DIV+CSS布局网页
7.2 使用DIV+CSS布局网页
7.2.1 案例制作：“经典回顾”网页
（5）制作网页左侧标题部分 6）为ID为“Title”的Div创建ID选择器规则，并在“方框”中设置“Width”为499px、 “Height”为45px，在“类型”中选择“类型”项设置“font-family”为宋体、“font-size” 为16px、“color”为#000000、“line-height”为45px、“font-weight”为bold。 7）在“分类”中选择“边框”项，取消“Style”中“全部相同”复选框的对勾，设置 “Right”为“solid”。取消“Width”中的“全部相同”复选框的对勾，设置“Right”为1px， 取消“Color”中“全部相同”复选框的对勾，设置“Right”为“#3E3D3D”。 8）在“分类”中选择“区块”项，设置“Text-align”为“center”。
第19章 DIV+CSS页面布局实例：制作
19.7
制作个人博客分页
个人博客的分页包括article.html、archives.html、 、 个人博客的分页包括 、 guestbook.html和about.html。这四个网页的结构和首 和 。 是一致的。 页index.html是一致的。所以在制作完成 是一致的 所以在制作完成index.html后 后 制作其他分页就变得非常简易。这也是DIV+CSS布局 ，制作其他分页就变得非常简易。这也是 布局 的一大优点。 的一大优点。有的网站在构架时候为每个分页都设置一 文件。 个CSS文件。但这样做会使网站的文件量增大，也会为 文件 但这样做会使网站的文件量增大， 后期维护修改带来一定的麻烦。 后期维护修改带来一定的麻烦。本章实例只使用一个 CSS文件，就是 文件， 文件 就是index.css。在这个文件中包含整个网站 。 样式。 的CSS样式。 样式
19.4.2 制作左边栏中网文的样式
如图19.7所示，网文没有添加任何样式，但其结构和位置都 所示，网文没有添加任何样式， 如图 所示 是正确的。接着对网文进行样式美化。 是正确的。接着对网文进行样式美化。首先对文章标题 添加样式。文章标题使用article_marker.gif图片来作为 添加样式。文章标题使用 图片来作为 背景图，设置其padding-left属性后，图片就会与文字分 属性后， 背景图，设置其 属性后 在标题中有超链接“阅读全文” 离。在标题中有超链接“阅读全文”，选择该链接后会 跳转到article.html页面。 页面。 跳页头部（header） 制作个人博客的首页头部（header）
在完成首页的整体基本布局后， 在完成首页的整体基本布局后，就可以对页面进行分块制作 首先制作网页头部header。 ，首先制作网页头部 。 header分为左右两个部分，左边是网站的 分为左右两个部分， 分为左右两个部分 左边是网站的logo，右边是网 ， 站的导航。这两个部分分别用logo和nav的容器嵌入页面 站的导航。这两个部分分别用 和 的容器嵌入页面 。在nav容器中使用一个无序列表嵌入网站的导航。 容器中使用一个无序列表嵌入网站的导航。 容器中使用一个无序列表嵌入网站的导航
使用DIV+CSS布局网页说课稿
《使用Div + CSS结构布局“诗歌”页面》说课稿各位老师：你们好，我说课的题目是《使用Div+CSS结构布局“诗歌”页面》，下面我从教材、学情、教学目标、教学方法、教学过程、教学亮点与教学反思六个方面对我的教学设计进行说明。
一、教材分析地位：《使用Div+CSS结构布局“诗歌”页面》取材于教学参考书《Dreamweaver CS4从入门到精通》第12章内容。
它与我们使用教材《Dreamweaver 网页设计与制作案例教程》第7章相对应。
作用：Div + CSS是一种最新、最科学的网页布局方式，符合Web2.0的技术标准，目前也比较流行的网页布局方式。
使用Div + CSS布局可将结构与表现分离，减少了HTML文档内大量代码，只留下了页面结构的代码，方便对其进行阅读，还可以提高网页的下载速度。
所以这部分内容是我们学习网页设计非常重要的一部分，学生要重点掌握。
二、学情分析学生特点：我授课的对象为高职三年级学生，我们都知道职业学校学生的学习习惯不太好，学习自觉性相对低一些。
知识准备与兴趣：针对我们本节课内容，学生在前面已经学习了Div标签的插入方法以及CSS 样式表创建方法，了解了其功能，对其有了一定的感性认识，我们重要的是加强学生的实践操作能力的训练。
三、教学目标分析根据上述教材与学情分析，我设定如下教学目标与重难点：1．知识与技能目标：在知识与技能方面要求做到以下几点1）学会分析页面的结构的方法。
2）能使用div标签定义合理的页面结构。
3）巩固用代码与视图两种方法插入div标签以及向标签内部添加内容。
4）学会利用CSS规则布局美化页面。
2．情感目标：1）培养学生的审美能力。
2）培养学生的合作精神与协作能力。
3.教学重、难点：重点：分析页面结构、用div标签定义页面结构难点：利用CSS规则布局美化页面四、教学方法基于以上的教材目标分析和重难点的确定，我根据自己对任务驱动教学法和新课程改革的理论认识，结合授课学生实际，主要采用任务驱动、视频指导教学法。
第6章 Div+CSS布局网页
6.2 使用Div+CSS布局网页
（21）设置分类项定位的Overflow值为hidden。 （22）连续单击“确定”按钮，完成Div区域的插入，最终结果如图6-19所示。
图6-19 完成Div区域的插入
6.2 使用Div+CSS布局网页
（23）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （24）如图6-20所示，设置插入栏为“在标签之后”。
6.2 使用Div+CSS布局网页
（10）如图6-11所示，单击分类栏中的方框，然后设置Width为720像素， Height为120像素。
图6-11 设置宽度和高度
6.2 使用Div+CSS布局网页
（11）如图6-12所示，取消“margin”中对“全部相同”复选框的勾选， 然后分别设置Right和Left均为auto。这样设置可以保证Div区域在网页中居中显 示。
（30）设置分类项定位的Overflow为hidden。 （31）连续单击“确定”按钮，完成新的Div区域添加。最终结果如图6-24所示。
图6-24 完成新的Div区域添加
6.2 使用Div+CSS布局网页
（32）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （33）按图6-25所示设置，然后单击“新建CSS规则”按钮，打开“新建CSS规则” 对话框。
图6-3 切换到布局选项卡
6.2 使用Div+CSS布局网页
（3）执行“修改/页面属性”命令，打开图6-4所示的“页面属性”对话框。
图6-4 “页面属性”对话框
6.2 使用D0像素，单击“确定”按钮。 （5）如图6-5所示，单击“插入Div标签”按钮，打开“插入Div标签”对话框。
DIV+CSS布局使用的个人心得
DIV+CSS布局使⽤的个⼈⼼得⽹站制作离不开⽹页布局就是说DIV+CSS都会涉及到的，以下是⼯作中总结的⼀些技巧，留下备⽤，也可以学习。
1、ul：默认的ul的margin和padding不是0，如果在导航中⽤到了左浮动的li，往往会把外部的div撑⼤，导致页⾯变形，改成：ul{margin:0px; padding:0px;}2、img：（1）这⾥牵涉的不同浏览器的问题，ie6⾥显⽰的图⽚height总是要⼤于准确值，这⾥就需要我们记住下⾯这⼀点 img{ display：block}；（2）页⾯中最好不要⽤⼤块背景，能平铺的要平铺，否则加载起来会很慢，也不利于以后的优化和扩展，当然也有些⼤的⽹站，现在都尽量把背景统⼀放到⼀张图⽚上，⽤background-postion来取得背景。
（3）最好的格式就是gif格式，即确保了背景透明，在ie6中⼜不会有阴影，有时gif图⽚会有锯齿，这就需要我们保存成web格式，设置⼀下matter，matter的值⽤背景颜⾊的值越相近越好。
3、overflow：有时⼀些公司的注册协议都是很长，这就⽤到了overflow，可以把div的style⾥加上这个：overflow：auto4、float：有时候⼀些div会挤到页⾯的上⽅，这⾥可能就是浮动引起的，可以加上clear：both。
5、div：height等于1px的div，在ie6中可能并不是1px，在这个div的style⾥加上font-size：1px;这样就ok了。
6、id和class：当⼀个样式在页⾯中多次使⽤时，不要⽤id，要⽤class，要使⽤js的时候，样式最好不要⽤id，因为id要留给js使⽤。
7，link：.link：link{}、.link：visited{}、.link：hover{}、.link：active{}。
有⼀点，visited与hover的顺序⼀定不能倒换，否则ie6中会⼤⼤的问题。
超级牛最详细的Div+CSS布局案例
DIV固定宽度居中显示－超级牛最详细的Div+C SS布局案例这个例子的主要内容是居中显示，现在的显示器的宽度都比较大，并且规格不统一，所以判断一个网页是不是专业，第一眼就是这个网站是不是居中，如果不居中，一般不是一个很老的没有人维护的网站就是一个技术很差的人写的。
CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;}#container {margin:0 auto; width:900px; height:500px; background:#CD5C5C;}页面代码如下：<div id="container"><p>1列固定宽度居中</p></div>效果下图显示：（点击看大图）其中居中的关键是“margin:0 auto;”代码例子由“标准之路”提供，感谢！序－经验之谈－超级牛最详细的Div+CSS布局案例最近有很多晚辈问我关于网站制作方面的问题，随着SEO的普及，DIV+CSS的网站制作理念成为了流行，但在实际操作中，DIV其实是很不好控制的。
大家会碰到很多问题，例如应该在左中右的，但却没有达到这样的效果。
在写大家最关心的Div+CSS布局案例前，让我先啰嗦几句，从事互联网工作已经快6年了，一个网站的产生，一般分为调研，策划，设计，制作，开发，内容、维护，如果是高级点的网站，会涉及到运营和推广的工作。
我有幸全部工作流程都涉及过，我想先说一点我自己从事页面构造时的经验和理解，当然在一定程度上可能存在局限性，但因为看到了很多失败的经历，所以想在说技术前，说点别的。
在制作网站前，一定要先构思网站的内容，很多人会说，我们当然是先构思的，不构思怎么会想到做网站，但很多人的构思都是表面的，在脑海里的，而不是形成文字的，其实有时，看上去很麻烦，很形式化的文字报告却可以帮助我们理清很多自己以为清楚却实际并不清楚的概念。
div+css网页布局的优点
div + css网页布局的优点在网页设计和开发中，采用div + css的布局方式已经成为了一种主流的选择。
相比于传统的表格布局方式，div + css布局具有许多优点。
本文将介绍div + css网页布局的优点，并探讨其对网页设计和开发的影响。
1. 灵活性Div + css布局方式的最大优点之一是其灵活性。
通过使用div元素和css样式，我们可以实现各种不同的布局效果。
无论是简单的两栏布局还是复杂的多栏布局，都可以通过div + css轻松实现。
此外，div + css布局还可以实现响应式设计，使网页在不同屏幕尺寸下都能够良好地适应。
2. 可维护性采用div + css布局的网页具有较高的可维护性。
由于div元素和css样式的分离，使得对网页布局和样式的修改更加方便快捷。
我们只需对相应的div元素或css样式进行修改，而不需要改动网页的其他部分。
这样一来，网页的维护和更新变得更加容易，节省了大量的时间和精力。
3. SEO友好相比于传统的表格布局，div + css布局对搜索引擎优化（SEO）更加友好。
搜索引擎通常将html文档中的内容按照其出现的先后顺序进行索引。
而采用div + css布局可以将网页的内容放在html文档的前面部分，使其更容易被搜索引擎爬取到。
此外，我们还可以通过合理的使用div元素和css样式来提高关键词的权重，从而提高网页在搜索结果中的排名。
4. 可访问性div + css布局可以提升网页的可访问性。
使用div元素和css样式来创建网页布局，可以使页面结构更加清晰简洁。
这对于视觉障碍用户和残障用户来说非常重要，因为他们可以通过屏幕阅读器和其他辅助技术更好地理解和访问网页的内容。
5. 页面加载速度快相比于传统的表格布局，div + css布局可以使网页加载速度更快。
表格布局需要加载大量的html代码和样式表，在网页加载时需要下载更多的数据量。
而div + css布局通过使用更少的html代码和css样式，减少了网页的下载时间，从而提高了页面加载的速度。
第10章利用Div+CSS布局网页-文档资料
10.2.1
两列布局
图10.1是一个典型的两列布局页面，这样的页面通常是：一 列较宽，用于展示页面主要内容；一列较窄，用于放置 公告板、用户登陆框、目录等信息。
10.2.2
三列布局
图10.2所示为一个典型的三列布局页面，这种布局方式主要 出现在网站的首页或频道页。
1网站，该网站经营综合性业务、 社区、无线等增值性服务。图10.3为该网站的首页截图 。由于网站的信息量比较大，要呈现的信息种类很多， 因此采用四列布局，可以使网站结构看起来更加清晰。
10.4
本章小结
当<div>标签用于网页布局和定位时，需要与CSS配合实现页 面的精确定位，同时CSS作为一种新的布局技术能够精确 地定位文本和图片，并且能够实现更多的显示特效。通过 本章的学习，读者要熟练掌握为页面中的元素添加ID并通 过CSS控制元素的位置、通过CSS规则控制页面布局等内 容。
第10章
利用Div+CSS布局网页
CSS布局与table表格式布局是两种完全不同的布局方式， 什么样的方式才能算得上是CSS布局呢？本章将着重进 行讲解。DIV是XHTML中指定的，专门用于布局设计的 容器对象。本章主要讲解CSS布局，Div则是这种布局方 式的核心对象。
10.1
网站布局概述
网站的布局不是盲目地在网页里面罗列各种构成要素。怎么 样才能达到网页构成的目的，怎么样才能使网站看起来 既美观又实用，这是我们每一个网页布局设计者首先应 该考虑的问题。如果网页布局不合理，则会在向浏览者 传达网页内容的时候发生困难，也不会让人对其产生兴 趣。因此，? ?参考别人的布局方法。我们 应该在仔细研究别人优秀的布局方式的同时，对如何能 在有限的空间里把页面中丰富多彩的内容更加有机地搭 配起来，如何才能营造出一种良好的视觉效果这些问题 进行认真思考。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
课程大纲
传统布局与CSS布局 XHTML与CSS基础 CSS网页布局与定位 实例：三栏居中式布局
1 2 3
4
1.1.1 传统Table布局
传统Table布局方式只是利用了HTML的table元素 所具有的零边框特性 因此，Table布局的核心是： 设计一个能满足版式要求的表格结构，将内容装 入每个单元格中，间距及空格使用透明gif图片实 现，最终的结构是一个复杂的表格（有时候会出 现多次嵌套），显然，这样不利于设计和修改。
Transitional类型：过度类型。浏览器对XHTML的解析将为宽松（建议使用）
Strict类型：严格类型。文档中不允许使用任何表现样式的标识和属性 Frameset类型：框架页类型。网页使用框架结构时，声明此类型
2.1.3 DreamweaverCS3中DTD
（DTD文档类型）选择画面
2.1.4 XHTML 语法规范
一． 二． 三． 四． 五．
属性名称必须小写 属性值必须使用双引号 不允许使用标签简写 使用id替代name 必须使用结束标签
注意：选择合适的标签（区别与table布局的习惯..） 布局用：<div></div>； 文本用：<h1～6></h1>，<p></p> 图片用：<img></img> 列表用：<ul><ol><li><dl><dt><dd> 数据用：<table></table> 其他的：form，input，select
选择合适的DTD
一个标准的XHTML文档，必须以Doctype标签作为开始，doctype用于定义文档类型。 对于XHTML而言，可以选择三种不同的XHTML文档类型，请看下面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN“ “/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <!- - 说明：该段为指定文档类型为Transitional > <html xmlns=“/1999/xhtml”> <!- - 说明：该句为确定名字空间,xml中用到 > <head> <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312” /> <!- - 说明：该句是声明编码语言为:简体中文 > <title>无标题文档</title> <link href=“css/style1.css” rel=“stylesheet” type=“text/css” /> <!- - 说明：该link标记将链接一个外部CSS文件 > </head> <body>…</body> </html>
2.2.5 样式优先权问题
2.6 CSS开发环境与调试环境
3.1 被遗忘的主角 DIV
3.2 CSS盒子模型
3.3 文档流及浮动概念
3.4 浮动定位与绝对定位
4.0 一个简单的CSS布局实例
网页制作流程： 效果图—切图——布局（DIV+CSS、table— 嵌 入动态程序或模板标签——测试——发布
真正的表现与内容完全分离，代码可读性强，样式可重复应用
1.2.3 CSS布局代码示例
Xhtml文档 Style1.css
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>测试页</title> <link href="css/style1.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header">头部</div> <div id=“content”>主体</div> <div id="footer">尾部</div> </div> </body> </html> *{ font-family: Arial, Helvetica, sans-serif, "宋体"; font-size: 12px; margin: 0px; text-align:center; } #container { width: 810px; margin:auto; background:#CCCCCC; } #header { height: 100px; width: 800px; padding:5px; background-color: #6699FF; } #content {
1.1.2 传统Table布局示意图
1.1.3 Table布局的缺点
设计复杂，改版时工作量巨大 表现代码与内容混合，可读性差 不利于数据调用分析 网页文件量大，浏览器解析速度慢如蜗牛
2.2.0 Web标准的构成（选）
Web标准
结构
表现
行为
结构：用来对网页中的信息进行整理与分类， 常用的技术有：HTML、XHTML、XML
学习要点及
1.1
传统布局于CSS布局的区别
1.2 1.3
1.2
1.3
CSS（Cascading Style Sheet），中文译为层 叠样式表。是用于控制网页样式并允许将样式信息 与网页内容分离的一种标记性语言。 【本章学习目的】 本章通过多个CSS样式的应用实例，重点介绍 了CSS样式表功能、定义CSS规则的方法，应用内嵌 式样式表和链接外部样式表的方法等，通过本章的 学习，读者应了解CSS样式表的用途，掌握创建和 应用CSS样式表的方法，学会用CSS样式表进行网页 的美化和网页布局。
2.1.1 向Web标准过度 / XHTML 基础
为什么要使用XHTML? XHTML是在HTML4.0基础上，用XML规则扩展得 到的，建立XHTML的目的就是为了实现HTML向XML 的过度。
HTML:更多的被用于网页设计和表现 XHTML:它的初衷就不是为了表现，而是对网页内 容进行结构设计，严格的说它是面向文档 结构的语言，更符合未来的发展要求！
5.1 利用CSS 样式表的网页实例
CSS样式表是由一系列样式选择器和CSS属性组成，它 支持字体属性、颜色和背景属性、文本属性、边框属性、 列表属性以及精确定位网页元素属性等，增强了网页的 格式化功能。
1.2.1 Web标准布局
基于Web标准的网站设计的核心目的： 如何使网页的表现与内容分离！ ① ② ③ ④ 这样做的好处： 高效率的开发与简单维护 信息跨平台的可用性 降低服务器成本；加快网页解析速度 更良好的用户体验
那么，CSS2.0从真正意义实现了设计代码与内容分离
1.2.2 DIV+CSS布局示意图
混合声明:并列及从属关系
<style type=“text/css” > P H1,#header ul{color:blue;font-size:12px;} </style>
2.2.4 如何应用CSS到网页中
CSS编码可以多种方式灵活地应用到我们所设计XHTML 页面之中，选择方式可根据我们对设计的不同表现手 段来制定，一般按CSS代码位置分为：
各 司 其 职
2.2.1 CSS语法基础
何为CSS（Cascading Style Sheet）？ CSS中文译为层叠样式表。是用于控制网页样式并允许 将样式信息与网页内容分离的一种标记性语言。 即:告诉浏览器，这段样式将应用到哪个对象..
CSS语法结构: 选择符{ 属性1:值1； 属性2:值2…… } 举例：body { font-size:12px; text-align:center;} 参数说明： 属性和属性值之间用冒号(:)隔开，定义多个属性时， 属性之间用分号(;)隔开 CSS选择器
2.2.2 CSS选择器（符）
标签选择器： 指以网页中已有的标签名作为名称的选择器， 几乎所有的html标签均可用作该类选择器 （如：body{ } p{ } h1{ } 等等...） 类别选择器： 属用户自定义名称的选择器，可以在XHTML 标签中用class=“”为相应标签指派样式。可理 解为一类。 特点：在文档中允许被重复使用 Id 选择器： 属用户自定义名称选择器，基于DOM文档对象 模型原理出现的选择器，可以在XHTML标签中 用id=“”为相应标签指派样式，可理解为一个标识
特点：在网页中，每个id名称只能使用一次
2.2.3 选择器的声明
集体声明:并列关系
<style type=“text/css” > body,td,th,#header,.one{color:blue;font-size:12px;} </style>