当前位置：文档之家 › 2018网页设计与制作教程(div+css布局技术)

2018网页设计与制作教程(div+css布局技术)

  • 格式：ppt
  • 大小：2.08 MB
  • 文档页数：25

下载文档原格式

  / 25

合集下载

动态网页设计Div+CSS布局入门

动态网页设计Div+CSS布局入门


<div class=“contentR”> 右侧内容区 </div>
. contentL{ contentL{ float:left; }
元素特性的改变
块元素改为具有行元素的特性： 块元素改为具有行元素的特性：
1. 2.
display:inline； 改为行元素) display:inline；(改为行元素) float:left； 向左浮动) float:left；(向左浮动)
3.1 布局步骤1 布局步骤1
1、使用div定义语义结构 、使用div定义语义结构 一个典型的版面分栏结构：页头、导航栏、内容、版权 结构代码： • <div id=“header”></div> id=“header” • <div id=“nav”></div> id=“nav” • <div id=“content”></div> id=“content” • <div id=“footer”></div> id=“footer” 把这四个盒子装进一个更大的盒子，body中，如下 把这四个盒子装进一个更大的盒子，body中，如下 <body> 上面四行代码 </body>
}
提示： • 块元素可以转换为行元素； 块元素可以转换为行元素； • 行元素可以转换为块元素； 行元素可以转换为块元素；
如何改变块布局
DIV是块元素，两个DIV排列时，会竖着排，如何 DIV是块元素，两个DIV排列时，会竖着排，如何 让他能横排呢？
<div class=“contentL” > 左侧内容区 </div>
DIV+CSS网页布局教程

DIV+CSS网页布局教程

DIV+CSS网页布局教程一、传统table布局传统Table布局方式只是利用了HTML的table元素所具有的零边框特性因此，Table布局的核心是：设计一个能满足版式要求的表格结构，将内容装入每个单元格中，间距及空格使用透明gif图片实现，最终的结构是一个复杂的表格（有时候会出现多次嵌套），显然，这样不利于设计和修改。

二、table布局的缺点1、设计复杂，改版时工作量巨大2、表现代码与内容混合，可读性差3、不利于数据调用分析4、网页文件量大，浏览器解析速度慢如蜗牛三、web标准的构成结构：用来对网页中的信息进行整理与分类，常用的技术有：HTML、XHTML、XML表现：用于对已经被结构化的信息进行显示上的修饰，包括版式颜色大小等..主要技术就是CSS,目前版本2.0行为：是指对整个文档内部的一个模型进行定义及交互行为的编写主要技术有：DOM(文档对象模型)、ECMAScript(JavaScript脚本语言)四、web标准布局基于Web标准的网站设计的核心目的：如何使网页的表现与内容分离！这样做的好处：高效率的开发与简单维护信息跨平台的可用性降低服务器成本；加快网页解析速度更良好的用户体验那么，CSS2.0从真正意义实现了设计代码与内容分离真正的表现与内容完全分离，代码可读性强，样式可重复应用五、css布局代码示例HTML代码：<!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>Css代码：* {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 {height: 400px;width: 800px;padding:5px;background-color#FF9900;}#footer {width: 800px;height: 50px;padding:5px;background-color: #6699FF;}六、向web标准过度/HTML基础为什么要使用XHTML?XHTML是在HTML4.0基础上，用XML规则扩展得到的，建立XHTML的目的就是为了实现HTML向XML的过度。

用DIV+CSS实现网页布局及网站设计

用DIV+CSS实现网页布局及网站设计

学号：1407010222 姓名：叶亮班级：14计算机2班实验二用DIV+CSS实现网页布局及网站设计一、实验目的与要求1. 掌握HTML基本标签的应用2. 掌握CSS基本知识。

3. 掌握用DIV+CSS实现网页布局及网站设计。

二、实验内容1. 插入CSS样式表2. 建立DIV标签3. 构建网站主要内容三、源程序<!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><style type="text/css">.h {font-family: 黑体;font-size: 18px;font-style:normal ;}</style><style>p {text-indent: 20px;text-align: center;line-height: 150px;word-spacing: 10px;letter-spacing: 10px;text-decoration: underline;font-family:楷体;font-style: italic;font-size: 60px;color:darkgoldenrod;font-weight: bold;}p1 {font-family: 仿宋;font-size: 30px;color:blue;font-weight: bold;}#container {width :810px;margin :auto ;background-color:aquamarine;}#header {height:150px;background-image:url(/images/1.jpg);background-repeat:round;}#main {background-color:darkorange;height :400px;margin-bottom:5px;}#lside {background-color:darkkhaki;width :403px;float :left;height :395px;margin-right:5px;margin-top:5px;background-image:url(/images/b1.jpg);background-repeat:round;}#rside {background-color:darkseagreen;width :402px;float :right;height :395px;margin-top:5px;background-image:url(/images/b2.jpg);background-repeat:round;}#footer {height :390px;background-image:url(/images/b3.jpg);background-repeat:round;}</style></head><body background="images/b.jpg"><div id="container"><div id="header"><p>经典小说推荐</p></div><div id="main"><div id="lside"><p1>历史类</p1><table width="395"height="360"border="1"><tr><td><span class="h">《大秦帝国》&nbsp;&nbsp;&nbsp;&nbsp;华夏历史上最强大帝国的崛起与没落。

Div+CSS网站布局应用教程第1章 网页和网站的基础知识

Div+CSS网站布局应用教程第1章 网页和网站的基础知识


1.4.4
遵循Web标准的好处
首先最为明显的就是用web标准制作的页面代码量小，可以节省带宽。 这只是web标准附带的好处，因为DIV的结构本身就比Table简单，Table布 局的层层嵌套造成代码臃肿，文件尺寸膨胀。通常情况下，相同表现的页 面用DIV+CSS比用Table布局的节省2/3的代码，这是web标准直接的好处。
1.2.1
什么是网页设计
随着时代的发展、科学的进步、需求的不断提高，网页设计已经在短短 数年内跃升成为一个新的艺术门类，而不再仅仅是一门技术。相比其他传统 的艺术设计门类而言，它更突出艺术与技术的结合、形式与内容的统一、交 互与情感的诉求。
1.2.2
网页设计的特点
与当初的纯文字和数字的网页相比，现在的网页无论是在内容上，还是 在形式上都已经得到了极大的丰富，网页设计主要具有以下特点：交互性、 版式的不可控性、技术与艺术结合的紧密性、多媒体的综合性、多维性。
1.1.2
网页的基本构成元素
网页由网址（URL）来识别于存取，当 访问者在浏览器的地址栏中输入网址后，通 过一段复杂而又快速的程序，网页文件会被 传送到访问者的计算机内，然后浏览器把这 些HTML代码“翻译”成图文并茂的网页。 虽然网页的形式与内容不相同，但是组成网 页的基本元素是大体相同的，一般包含文本 和图像、超链接、动画、表单、音频视频等 内容。 网页作为上网的主要依托，由于人们频繁地使用网络而变得越来越重要， 这使得网页设计也得到快速发展。每天无数的信息在网络上传播，而形态各 异、内容繁杂的网页就是这些信息的载体。如何设计网站页面，对于每一个 网站来说都是至关重要的。
在学习使用Div+CSS对网页进行布局制作之前，还需要清楚什么是 Web标准。WБайду номын сангаасb标准也称为网站标准，通常所说的Web标准是指进行网站 建设所采用的基于XHTML语言的网站设计语言。
网页设计与制作第8章 使用CSS+Div布局

网页设计与制作第8章 使用CSS+Div布局


8.2.3
关于CSS布局块
查看CSS布局外框、布局背景和布局框模型的方法是，选择菜 单命令【查看】/【可视化助理】/【CSS布局外框】或【CSS布局背 景】、【CSS布局框模型】。也可通过单击【文档】工具栏上的 （可视化助理）按钮，在弹出的下拉菜单中选择使用CSS布局块可 视化助理选项。
8.2.4
8.1.3
关于Div和Span
Div标签实际上是一种区隔标记，用来为HTML文档内大块（block-level） 的内容提供结构和背景。Div的起始标签和结束标签之间的所有内容都是用来 构成这个块的。在Div标记之间可以放置其他一些HTML元素，然后使用CSS 相关属性将Div容器标记中的元素作为一个独立对象进行修饰，不会影响其他 HTML元素。 大部分Div标记都可以使用Span标记代替，但Div标签是一个块级元素 （block），它的内容会自动地开始一个新行，而Span标签是一个行内元素 （inline），其前后不会发生换行。Div标记可以包含Span标记元素，但Span标 记一般不包含Div标记。换行是Div固有的惟一格式表现，Span没有固定的格 式表现。当对Span应用样式时，它才会产生视觉上的变化。如果不对Span应 用样式，那么Span元素中的文本与其他文本不会任何视觉上的差异。可以为 Span应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 Span 应用 样式。可以对Div通过 class 或 id 应用额外的样式，使其作用会变得更加有效。 实际上，在网页设计中，对于较大的块可以使用Div完成，而对于具有独特样 式的单独HTML元素，可以使用Span标记完成。
8.2 使用简单的CSS+Div布局
8.2.1 教学案例━━把握好你的生活 8.2.2 插入Div标签 8.2.3 关于CSS布局块 8.2.4 关于CSS排版理念
CSS+Div布局全

CSS+Div布局全


8.5.1 练习案例-电子产品
4．利用#menu样式为menu的<div>标签添加图像背景。在#nav标签 中，输入文字“公司介绍 产品展示 客户服务 人员招募 互动社区”， 并设置#nav样式，字体大小为16px，行高度为30px，颜色为#FFF。 5．设置#nav a:link，#nav a:visited样式属性，颜色为#FFF，文字装 饰为无，设置#nav a:hover样式属性，文字装饰为下划线，完成导 航条的制作。 6．在ID名称为info的<div>标签中，插入1*3表格，宽度为100%，将 三个图像分别插入到单元格中，设置#info样式背景为黑色。 素材所在位置：光盘/案例素材/ch08/练习案例-电子产品。 案例布局要求如图8-67所示，案例效果如图8-68所示。
无浮动
8.2.3 浮动方式
#box1 { height: 100px; width: 150px; background-color:
#F90; }
#box2 { height: 100px;
width: 200px; background-color: #C30; } #box3 { height: 100px; width: 250px; background-color: #3FF; }
8.1.2 盒子属性
在CSS样式中， 将盒子模型的 内边距、边框 和外边距，按 top、bottom、 left、right的四 个方向，分别 进行定义和设 置，描述盒子 属性。
8.1.2 盒子属性
例如，在网页中创建一个<div>标签，ID标识为 Div1，并在其中插入一个图像，代码如下：
#apDiv1 { position:absolute;
DIV+CSS布局 ppt课件

DIV+CSS布局 ppt课件


9
2021/3/26
DIV+CSS布局 ppt课件
10
DIV+CSS布局
• 属性名称必须小写 • 属性值必须加引号 • 属性不能简写 • 用 Id 属性代替 name 属性
2021/3/26
DIV+CSS布局 ppt课件
11
DIV+CSS布局
• DOCTYPE • Head • Body
2021/3/26
18
DIV+CSS布局
• 间隙属性,用来设置元素内容到元素边界的 距离。
• 注意： padding用在容器内部，margin指容 器外部，就像墙上挂着的两个相框，margin 指的是相框与相框的距离，padding指的是 每个相框里照片与相框边框的距离。
2021/3/26
DIV+CSS布局 ppt课件
块距离）；
– margin right ：距右元素块距离（设置距右元素块距） ； – margin bottom ：底元素块距离（设置距低（下）元素
块距）。
margin:5px 6px 7px 8px;各参数分别指代Top、Right、 Bottom和Left
2021/3/26
DIV+CSS布局 ppt课件
• CSS:Cascading style Sheets，采用CSS技术， 可以有效地对页面的布局、字体、颜色、 背景和其它效果实现更加精确的控制。
2021/3/26
DIV+CSS布局 ppt课件
2
DIV+CSS布局
1.大大缩减页面代码，提高页面浏览速度,缩 减带宽成本;
2.结构清晰，容易被搜索引擎搜索到，天生 优化了seo
《网页设计与制作》教案-第10讲 布局技术之二—Div+CSS(二)

《网页设计与制作》教案-第10讲 布局技术之二—Div+CSS(二)

第10讲布局技术之二—Div+CSS（二）1.1教学目标：◆知识目标1.理解CSS盒子模式。

2.掌握CSS规则设置方法。

◆技能目标能够理解Div+CSS所体现的表现和内容相分离特性。

◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：1.掌握CSS规则设置方法1.3 教学难点理解CSS规则的作用。

1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。

1.7教学过程：一、CSS样式基本操作1．样式表的操作途径我们可以通过三种途径来创建、编辑CSS样式。

从主菜单选择“窗口/CSS样式”即可打开样式面板，如图3-35所示。

图3-35 CSS样式面板在CSS样式面板的右下角有四个功能按钮，分别为：●附加样式表：用于打开“链接外部样式表”对话框，选择要链接到或导入到当前文档中的外部样式表。

●新建CSS样式：打开“新建CSS 样式”对话框，创建新样式。

●编辑样式表：打开“CSS 样式定义”对话框。

编辑当前文档或外部样式表中的任何样式。

删除CSS样式：删除“CSS 样式”面板中的所选样式，并从应用该样式的所有元素中删除格式。

单击CSS样式面板右上角的菜单按钮，可以显示如图3-36所示的面板菜单。

通过该菜单，可以完成对CSS样式面板的大部分控制。

在CSS样式面板的列表区域中单击鼠标右键，也可以打开同样的菜单。

图3-36 面板菜单从主菜单选择“文本/CSS样式”命令，选择“新建”也可启动“新建样式表”对话框，如图3-37所示。

在页面空白处单击鼠标右键，在弹出的菜单中一样可以启动“新建样式表”对话框，如图3-38所示。

不管如何启动上述几个样式菜单或面板，他们都包含相同的几个命令：新建样式表、编辑样式表、链接样式表和导出样式表。

div+css布局教程 ppt课件

div+css布局教程 ppt课件

例子：body { font-family: Verdana, sans-serif; } 根据上面这条规则，站点的 body 元素将使用 Verdana 字体 通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这 些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）
但回到具体情况，不同的项目也应该根据具体情况对命名方式作出选择 ，不同方式的命名规则应该结合使用，大型网站，如淘宝，更适合使用语义 命名结合的方式，对于页面的样式修改，能快速敏捷地做出相应调整，对于 制作，能快速地拼凑，而大部分宣称型的单页，个人更推荐使用结构化的命 名方式，页面制作者能方便快速地完成页面，而不用多把时间陷近命名的考 虑中，
div+css布局教程
二、网页布局常用属性
其中“p”,我们称为选择器，指明我们要给“p”定义样式； 样式声明写在一对大括号“{}”中； Color和background称为“属性”，不通属性之间用“；”分隔 “#ff0000”和“#000000”是属性的值
div+css布局教程
几点值得注意的地组的选择器就可以分享相同的声明。用 逗号将需要分组的选择器分开。（有助于优化样式表，提高效率）
书写方式为： @import url(color.css); @imporp url(type.css);
引用的样式表必须出现在其他规则之前,样式表的头部,这样才能保证正常的 效果.
div+css布局教程
2、关于ID和Class命名的规范 总体思想：语义化的命名
div+css布局教程
个人推荐在开发过程中逐渐形成自己的命名规范， 如header/footer/main/hd/bd/nav/box/mode等，使用连字符“-” 如site-nav/quick-menu/secondaryContent/。
网页设计与制作教程第6章 Div+CSS布局页面

网页设计与制作教程第6章 Div+CSS布局页面


习题6
习题6Байду номын сангаас
1．制作如图6-17所示的两列固定宽度型布局。 2．制作如图6-18所示的三列固定宽度居中型布局。 3．综合使用Div+CSS布局技术创建如图6-19所示的博客页面。
6.2 典型的CSS布局样式
6.2.1 两列布局样式
页面布局整体上分为上、中、下3个部分，即header区域、container区 域和footer区域。其中的container又包含mainBox（主要内容区域）和 sideBox（侧边栏），布局示意图如图6-4所示。
6.2 典型的CSS布局样式
6.2.1 两列布局样式
这里以最经典的三行两列宽度固定布局为例讲解最基础的固定分栏布局。 【演练6-3】三行两列宽度固定布局。
6.2 典型的CSS布局样式
6.2.1 两列布局样式 【演练6-4】使用高度自适应的方法进行三行两列宽度固定布局。
6.2 典型的CSS布局样式
6.2.2 三列布局样式
三列布局与两列布局非常相似，在处理方式上可以利用两列布局结构的 方式处理，如图6-8所示的就是3个独立的列组合而成的三列布局。
6.3 综合案例——制作光影世界最近活动局部页面
6.3.1 页面布局规划
通过成熟的构思与设计，光影世界最近活动局部页面的页面效果如图613所示，页面局部布局示意图如图6-14所示。
6.3 综合案例——制作光影世界最近活动局部页面
6.3.2 页面的制作过程
1．前期准备 （1）栏目目录结构 在栏目文件夹下创建文件夹images和css，分别用来存放图像素材和外 部样式表文件。 （2）页面素材 将本页面需要使用的图像素材存放在文件夹images下。 （3）外部样式表 在文件夹css下新建一个名为style.css的样式表文件。 2．制作页面
使用Div+CSS布局网页

使用Div+CSS布局网页

第7章 使用Div+CSS布局网页
• • • • Web标准概述 认识Div Div+CSS布局简介 使用Spry布局对象
7.1 Web标准概述
7.1.1 什么是Web标准
Web标准是由W3C（World Wide Web Consortium） 和其他标准化组织制定的一套规范，包括HTML、 JavaScript及CSS等一系列标准，其目的在于创建一 个统一的用于Web表现层的技术标准，以便能通过 不同浏览器或终端设备（计算机、手机等）向用户 展示信息内容。
7.4.2 Spry选项卡式面板
Spry选项卡式面板是一系列可以在收缩的空间内存 储内容的面板。浏览者可以单击相应面板标签在各 个面板之间切换。定位插入点后，单击“插入”面 板中的“Spry选项卡式面板”即可将其插入。
7.4.3 Spry折叠式
Spry折叠式是一系列可以在收缩的空间内存储内容 的面板窗口。浏览者可以通过单击面板标题来显示 或隐藏面板内容。定位插入点后，单击“插入”面 板中的“Spry折叠式”即可将其插入。
7.2 认识Div
Div全称Division，意为“区分”，它是用来定义网 页内容中逻辑区域的标签。我们可以通过手动插入 div标签并对它们应用CSS样式来创建网页布局。
7.2.1 Div简介
Div是用来为HTML文档中的块内容设置结构和背景属 性的元素。它相当于一个容器，由起始标签<Div>和 结束标签</Div>之间的所有内容构成。在它里面可 以内嵌表格（table）、文本（text）等HTML代码。 其中所包含的元素特性由Div标签的属性来控制，或 使用样式表格式化这个块来控制。
7.1.2 Web标准的构成
1．结构

《网页设计与制作》教案-第9讲 布局技术之二—Div+CSS

第9讲布局技术之二—Div+CSS1.1教学目标：◆知识目标1.理解CSS盒子模式。

2.熟练掌握Div的创建与设置方法。

◆技能目标能够利用DreamweaverCS3预设的CSS布局创建页面。

◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：1.掌握Div的创建与设置方法1.3 教学难点理解CSS盒子模式。

1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。

1.7教学过程：一、Div+CSS —构建任务1.工作流程⏹在站点中新建一个页面并保存。

⏹插入一个Div并设置相关CSS规则，使之成为外部容器。

⏹根据事先拟好的布局草图，定制四个Div标签并分别设置相关CSS规则。

⏹在各Div窗口中插入相应页面元素。

⏹检查整个布局效果并加以调整，保存并预览布局效果。

二、什么是Div标签Div标签一般用来定义网页上的一个特定区域，将文字、图片和表格等各种网页元素放在此区域里，再用CSS对该<Div>标签定义的区域进行定位和样式的设置。

CSS样式表不但是定义页面样式的良好工具，同时它所具有的精确定位对象的控制能力又使其成为不可多得的网页布局工具，为了提高设计效率，可以事先定义好布局所需的CSS样式规则，然后在“插入Div标签”中应用。

使用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器。

三、CSS的盒子模式要利用CSS进行网页布局，需要借助HTML的一个标签元素Div，也就是目前比较流行的Div+CSS来布局网页结构。

需要接触到的知识点就是CSS的盒子模式，这也是Div排版的核心所在，传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，而改用CSS排版后，通过CSS定义的大小不一的盒子和盒子嵌套来编排网页。

DIV+CSS教程——第十天 div+css网页标准布局实例教程(二)

第十天div+css网页标准布局实例教程（二）文章出处：标准之路(/div_css/912.shtml)编辑：杨雨晨思（接上一篇，本节教程文字较多，比较枯燥，如果前边知识学习牢固，可以直接下载源代码查看，哪个地方不明白，再回过头来看哪一部分）五、布局页面——头部和导航有了上边的基础，下面的任务就是要利用html和css制作完成一个完整的网页了。

先从头部开始，第三小节时我们已经把整体框架给搭建好了，就像盖房子一样，整体结构已经出来了，下面就需要填砖分割空间了。

先分析下头部：分为两部分，一个是logo靠左侧显示，一个是搜索靠右侧显示，那么布局时插入两个div，一个向左浮动，一个向右浮动的方式来完成。

另外还有很多种实现方法，比如logo用h1标签，搜索用span，或者把log o做为背景图片也是可以的，不管采用哪种方法，要根据页面的需求选用一种最合理的方法。

如果要在logo加上链接的话，那么就不能用背景图片的方法了。

<div id="header"><div id="logo">此处显示id "logo" 的内容</div><div id="search">此处显示id "search" 的内容</div></div>先在header里插入以上两块元素。

然后分别插入相应的内容，在logo里插入我们事先切割好的logo图片，在search里插入一个表单，一个文本框和一个按钮，插入后如下：<div id="header"><div id="logo"><img src="images/logo.gif" width="181" height="45" /></div><div id="search"><form id="form1" name="form1" method="post" action="">搜索产品<input type="text" name="textfield" id="textfield" /><input type="submit" name="button" id="button" value="查询" /></form></div></div>接下来定义css吧，在ps里测量，头部的高度是71px，logo距顶部18px，搜索产品距顶部30px，下面在css里把这些参数都给定义上，看显示的效果和效果图中的效果是不是一样呢？#logo { float:left; margin-top:18px;}#search { float:right; margin-top:30px;}这两项的位置已经差不多了。

DIV+CSS网页标准布局实例教程(一)

DIV+CSS网页标准布局实例教程（一）将根据本人这些年来的从业经验，从建立站点到一个完整的div+css网页的完成，整个流程下来，希望能对各位有所帮助。

一、建立站点二、结构分析三、搭建框架四、切割效果图五、布局页面——头部和导航六、布局页面——侧边栏七、布局页面——主体部分八、底部和细节调整九、相对路径和相对于根目录路径一、建立站点在D盘建立一个MyWeb文件夹，在dreamweaver cs5(简称DW)里创建一个站点指向这个文件夹，然后在目录下新建images文件夹、css文件夹等把各类文件分别存放起来。

二、结构分析创建完站点后，就需要对页面结构进行分析了，根据效果图，分析页面分为几大块，该怎么布局更合理。

从图中可以看出整个页面分为头部区域、导航区域、主体部分和底部，其中主体部分又分为左右两列，整个页面居中显示。

整体框架结果图如下：三、搭建框架首先在dw里新建一个html文件，保存为index.html：按照上图的方法依次插入标签，或者直接在代码视图中手工输入，代码如下：<div id="container"><div id="header">此处显示id "header" 的内容</div><div id="nav">此处显示id "nav" 的内容</div><div id="maincontent"><div id="main">此处显示id "main" 的内容</div><div id="side">此处显示id "side" 的内容</div></div><div id="footer">此处显示id "footer" 的内容</div></div>下面就新建一个css样式表文件：在DW文件菜单选择新建，然后在打开的窗口页面类型中选择css，创建后保存在css文件夹中并命名为layout.css保存后先设置全局的样式，而后写每一块单独的样式，全局样式如下：body { margin:0 auto; font-size:12px; font-family:Verdana; line-height:1.5;}ul,dl,dd,h1,h2,h3,h4,h5,h6,form,p { padding:0; margin:0;}ul { list-style:none;}img { border:0px;}a { color:#05a; text-decoration:none;}a:hover { color:#f00;}四、切割效果图。

DIV+CSS网页布局的6个简单步骤

DIV+CSS网页布局的6个简单步骤DIV+CSS是目前网站制作的布局方法，有别于传统的table布局，它的击败了table，成功实现了页面与布局相分离，简化网页设计源码，使得网站所站空间小、加载速度更快。

DIV+CSS网页建设中的六个简单步骤：1、首先设计顶部部分，其中包括了LOGO、MENU和一幅Banner图片;2、网页主题，根据网民的浏览习惯，一般把网页主题分为竖着的三大列；3、网页底部的版权信息。

根据以上思路，定义div的结构如下：│body {}/*这是一个HTML元素*/└#Container {}/*页面层容器*/├#Header {}/*页面头部*/├#MianBody {}/*页面主体*/│├#mainbody-left {} /*主体页面左边*/│└#mainbody-center {} /*主体页面中间*/│└#MainBody -right{} /*主体页面右边*/└#footer {}/*页面底部*/用DIV+CSS做一个导航栏是非常容易的，而且我们可以通过css来对导航栏的样式方便的作出调整。

用div设置导航栏一般就用 ul和ol标签。

4、高度显示效果为了更好的让各种浏览器兼容你的网站，这里设置网页高度的属性有height: 100px和_height: 100px （使用于IE6）。

5、嵌套Div能击败表格，当然少不了它的能更表格相媲美的嵌套功能了，注意，如果你想在div中加入一些图片的话，记住，图片的高度如果大于div高度的话，在IE6中则默认为是无效的，因此为了更好的让浏览器兼容就要在该css添加overflow属性，使用overloaw:hidden,就可以轻松隐藏图片超出边界的部分了。

DIV+CSS网页布局教程 DIV+CSS网页布局技巧 如何实现DIV+CSS网页布局

____________________________________________________________________________________________ DIV+CSS网页设计布局教程DIV+CSS网页设计布局技巧如何实现DIV+CSS网页设计布局在网页设计过程中，DIV+CSS工具的使用非常广泛。

DIV+CSS不仅可以优化网站的布局和标签、做出精美的页面，还有助于搜索引擎抓取网页内容、提高网站排名。

下面就从网页的页面布局角度，和大家分享一下Div+CSS的使用技巧。

一、如何应用Div+CSS布局？网页设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks 等图片处理软件将需要制作的界面布局简单的构画出来，以下是已经构思好的界面布局图：下面，需要根据构思图来规划一下页面的布局，仔细分析之后不难发现，图片大致分为以下几个部分：1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；2、内容部分又可分为侧边栏、主体内容；____________________________________________________________________________________________3、底部，包括一些版权信息。

有了以上的分析，就可以很容易的布局了，设计层如下图:根据上图，可以再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了：DIV结构如下：│body {}/*这是一个HTML元素源码天空，具体我就不说明了*/____________________________________________________________________________________________ └#Container {}/*页面层容器*/├#Header {}/*页面头部*/├#PageBody {}/*页面主体*/│├#Sidebar {}/*侧边栏*/│└#MainBody {}/*主体内容*/└#Footer {}/*页面底部*/至此，页面布局与规划已经完成。

网页设计与制作HTML+CSS+JavaScript第11章 DIV+CSS布局设计


CSS盒模型
在CSS中，width和height指的
是内容区域的宽度和高度。增 加内边距、边框和外边距不会 影响内容区域的尺寸，但是会 增加元素框的总尺寸。 例如，假设框的每个边上有10个 像素的外边距和5个像素的内边 距。如果希望这个元素框达到 100个像素，就需要将内容的宽 度设置为70像素，其具体结构 示意图如下图所示。
课后小结
DIV+CSS布局设计强大的表现控制功能，特别是在布 局方面有很大的优势。相对于代码条理混乱、样式杂 糅在结构中的表格布局，DIV+CSS布局设计将带来全 新的布局方法，让网页设计师更轻松、更自由。本章 通细阐述。相信读者在深入理解盒模 型后，布局网页、定位CSS网页元素将更加自如。
DIV样式设计
<html> <head> <style type="text/css"> #fst {background-color: #eee;border:1px solid
#000;width:300px;height:200px;} #sec {background-color: #eee;border:1px solid #000;width:50%;height:25%;}</style> </head> <body> <div id="fst">这是固定尺寸的宽度和高度</div> <hr /> <div id="sec">这是自适应尺寸的宽度和高度</div> </body> </html>
solid #000;float:left;} #two{width:200px;height:120px;background-color:#eee;border:1px solid #000;}</style> </head> <body> <div id="one">第1个div</div> <div id="two">第2个div</div> </body> </html>
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

6 实训——什锦果园水果沙拉页面的布局
6.2 页面的制作过程
1．前期准备 （1）栏目目录结构 在栏目文件夹下创建文件夹 images 和 css ，分别用来存放图 像素材和外部样式表文件。 （2）页面素材 将本页面需要使用的图像素材存放在文件夹images下。 （3）外部样式表 在文件夹css下新建一个名为style.css的样式表文件。
2 CSS盒模型
2.2 盒模型的属性
3．内边距 内边距也称内补丁，位于对象边框和对象之间，包括了 4 项属性： padding-top （上内边距）、 padding-right （右 内 边 距 ） 、 padding-bottom （ 下 内 边 距 ） 、 padding-left （左内边距），内边距属性不允许负值。与外边距类似，内 边距也可以用 padding 一次性设置所有的对象间隙，格式也 和margin相似，这里不再一一列举。
2．盒模型的高度
盒模型的高度=上外边距（margin-top）+上边框（border-top）+上 内边距（padding-top）+内容高度（height）+下内边距（paddingbottom）+下边框（border-bottom）+下外边距（margin-bottom）
2 CSS盒模型
2.4 外边距的叠加
外边距合并是指当两个垂直外边距相遇时，它们将形成 一个外边距。合并后的外ห้องสมุดไป่ตู้距高度等于两个发生合并的外边 距的高度中的较大者。 1．两个元素垂直相遇时叠加 当两个元素垂直相遇时，第一个元素的下外边距与第二 个元素的上外边距会发生叠加合并，合并后的外边距的高度 等于这两个元素的外边距值的较大者。 2．两个元素包含时叠加 假设两个元素没有内边距和边框，且一个元素包含另一 个元素，它们的上外边距或下外边距也会发生叠加合并。
2 CSS盒模型
2.2 盒模型的属性
1．外边距 外边距也称为外补丁。外边距设置属性有： margin-top、 margin-right 、 margin-bottom 、 margin-left ，可分别设置， 也可以用margin属性，一次设置所有边距。 2．边框 常用的边框属性有 7 项： border-top 、 border-right 、 border-bottom 、 border-left 、 border-width 、 bordercolor 、 border-style 。其中 border-width 可以一次性设置 所有的边框宽度，border-color同时设置四面边框的颜色时， 可以连续写上4种颜色，并用空格分隔。上述连续设置的边框 都 是 按 border-top 、 border-right 、 border-bottom 、 border-left的顺序（顺时针）。
块级元素宽度不够时的状态
块级元素宽度不够且不同高度的浮动元素
4 盒子的浮动
4.2 清除浮动
在页面布局时，当容器的高度设置为 auto 且容器的内容 中有浮动元素时，容器的高度不能自动伸长以适应内容的高 度，使得内容溢出到容器外面导致页面出现错位，这个现象 称为浮动溢出。为了防止这个现象的出现而进行的CSS处理， 就叫清除浮动。
3 盒子的定位
3.4 相对定位与绝对定位的混合使用
相对定位与绝对定位的混合使用。 编写相应的 CSS 样式，生成的文件在浏览
器中显示的效果如图所示。
3 盒子的定位
3.5 固定定位
固定定位（position:fixed;）其实是绝对定位的子类别。
固定定位。为了对固定定位演示得更加清楚，将id="box1"的块级元素进行固定 定位，将id="box2"的块级元素的高度设置得尽量大，以便能看到固定定位的效 果。
3 盒子的定位
3.3 绝对定位
用“ position:absolute;”表示绝对定位，使用绝对定 位的对象可以被放置在文档中任何位置，位置将依据浏览器 左上角的0点开始计算。
绝对定位。继续使用上面的示例深入讨论，将id="box-1"的块级元素进行绝对 定位，向下移动 50px，向右移动 200px。编写相应的 CSS样式，生成的文件在 浏览器中显示的效果如图所示。
网页设计与制作教程
Div+CSS布局技术
1 Div布局理念 2 CSS盒模型 3 盒子的定位 4 盒子的浮动 5 CSS常用布局样式 6 实训——什锦果园水果沙拉页面的布局
1 Div布局理念
1.1 Div布局页面的优点
传统的HTML标签中，既有控制结构的标签（如<title> 标签和<p>标签），又有控制表现的标签（如<font>标签 和<b>标签），还有本意用于结构后来被滥用于控制表现的 标签（如<h1>标签和<table>标签）。页面的整个结构标 签与表现标签混合在一起。 相对于其他HTML继承而来的元素，Div标签的特性就是 它是一种块级元素，更容易被CSS代码控制样式。
4 盒子的浮动
4.1 浮动
向左浮动的元素。使用上面的示例继续讨论，本例页面的页 面布局如图左所示，所有元素向左浮动后的结果如图右所示。
4 盒子的浮动
4.1 浮动
空间不够时的元素浮动。使用上面的示例继续讨论，如果id=“box”的块级元 素宽度不够，无法容纳3个浮动元素box-1、box-2和box-3并排放置，那么部分浮 动元素将会向下移动，直到有足够的空间放置它们，本例页面的显示效果如图左 所示。如果浮动元素的高度彼此不同，那么当它们向下移动时可能会被其他浮动 元素“挡住”，如图右所示。
5.2 三列布局样式
三列布局在网页设计时 更为常用，如图所示。 对于这种类型的布局， 浏览者的注意力最容易 集中在中栏的信息区域， 其次才是左右两侧的信 息。
6 实训——什锦果园水果沙拉页面的布局
6.1 页面布局规划
页面布局的首要任务是弄清网页的布局方式，分析版式 结构，待整体页面搭建有明确规划后，再根据成熟的规划切 图。通过成熟的构思与设计，什锦果园水果沙拉局部内容的 页面效果如图左所示，页面局部布局示意图如图右所示。
2 CSS盒模型
2.5 案例——制作网络鞋城关于页的局部信息
使用盒模型技术修饰网络鞋城关于页的局部信息，通过设置 边框和边距美化页面，本例文件5-6.html在浏览器中显示的 效果如图下图所示。
2 CSS盒模型
网络鞋城页面顶部的布局，显示效果如图下图所示。
3 盒子的定位
3.2 静态定位
静态定位是 position 属性的默认值，即该元素出现在文 档的常规位置，不会重新定位。通常此属性可以不设置，除 非是要覆盖以前的定义。
6 实训——什锦果园水果沙拉页面的布局
6.2 页面的制作过程
2．制作页面 （1）style.css （2）sarad.html的网页文件
4 盒子的浮动
4.1 浮动
浮动（float）是使用率较高的一种定位方式。浮动元素 可以向左或向右移动，直到它的外边距边缘碰到包含块内边 距边缘或另一个浮动元素的外边距边缘为止。
语法：float : none | left |right
向右浮动的元素。本例页面的布局的初始状态如图左所示，元素box-1向右浮动 后的结果如图右所示。
1 Div布局理念
1.2 使用嵌套的Div实现页面排版
Div标签是可以被嵌套的，这种嵌套的Div 主要用于实现 更为复杂的页面排版。下面以两个示例说明嵌套的Div之间的 关系。
2 CSS盒模型
2.1 盒模型的概念
盒模型将页面中的每个元素看做一个矩形框，这个框由 元素的内容、内边距（ padding ）、边框（ border ）和外边 距（margin ）组成，如图下图所示。对象的尺寸与边框等样 式表属性的关系，如图下图所示。
2 CSS盒模型
2.3 盒模型的宽度与高度
盒模型的宽度与高度是元素内容、内边距、边框和外边 距这4部分的属性值之和。 1．盒模型的宽度
盒模型的宽度=左外边距（margin-left）+左边框（border-left） +左内边距（padding-left）+内容宽度（width）+右内边距（paddingright）+右边框（border-right）+右外边距（margin-right）
静态定位。编写相应的CSS样式，生成的文件在浏览器中显示的效果如图 下图所示。
3 盒子的定位
3.2 相对定位 相对定位（ position:relative; ）指的是通过设置水平 或垂直位置的值，让这个元素“相对于”它原始的起点进行 移动。
相对定位 。使用上面的示例深入讨论，将 id=“box”的块级元素向下移动 50px， 向右移动50px。编写相应的CSS样式，生成的文件的显示效果如图下图所示。
语法：clear : none | left |right | both
清除浮动。
5 CSS常用布局样式
5.1 两列布局样式
许多网站都有一些共同的特点，即顶部放置一个大的导 航或广告条，右侧是链接或图片，左侧放置主要内容，页面 底部放置版权信息等，如图所示的布局就是经典的两列布局。
5 CSS常用布局样式