实验四 Div+CSS网页布局
div+css网页标准布局、经典布局
设置完图片的格式后，就可以存储了，这里选择到images的上一级目录就行了，ps会自动创 建images目录并把图片文件放入，如果已存在，直接放入。在格式处选择仅限图像，如果选 择html和图像，ps会自动生成一个表格式的网页，这个页面不是我们需要的，就不让它生成 了；还有一个需要注意的地方就是选择所有用户切片，这样只把我们手动切割的图片保存下 来，其它的就不保存了。保存后的图片如下所示，其中hot_bg.gif这张图片切割时没有隐藏上 边的文字，一会儿在ps里再处理一下把文字抹掉。
从上边的效果图分析得知，整个网页是居中浏览器显示的，按照这样的写法需要把以上的
header、nav、maincontent、footer都设置宽度并居中，这样做起来很麻烦，所以再在这 些标签外增加一下父标签，设置这个父标签宽度并居中后，是不是所有的标签都居中了呢。 增加后的代码如下：
<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+div布局(实验报告)
实验六 CSS布局
学号 201114004 姓名王渝迪专业计算机科学与技术成绩
【实验目的】
掌握用CSS的布局。
【实验内容】
1、熟悉Dreamweaver软件的环境；
2、会使用CSS进行布局。
【实验步骤】
1.打开Dreamweaver，新建HTML文件。
在代码中body中插入一个DIV标签。
然后选择标签，新
建CSS规则，在新建的CSS规则中，对新建的规则进行设置。
2.对背景项设置，可以设置背景色；对方框项设置，可以设置标签的宽，高，和浮动（左对齐，右
对齐，居中，无），以及方框位置的Padding和Margin进行设置；对边框设置，设置它的类型、宽度和颜色。
这是一栏布局。
3.二栏布局是在一栏布局的基础上再新建一个DIV标签。
对新建的标签进行同样的设置，在设置方
框的浮动时，选择不同的浮动，会出现不同的效果，如一个DIV标签设置为左对齐，另一个设为右对齐。
这种效果还可以通过所建规则中的定位进行设置。
4.嵌套布局。
将第三个div嵌套在另一个div中。
【实验结果】
【实验心得和体会】
通过本次的实验，我熟练掌握了div布局技巧。
能够完成简单的css+div布局。
如上图。
现在网页设计过程中基本都是使用css+div的格式进行布局。
学会css+div对于网页设计来说有很重要的意义。
实验报告三_练习div+css页面布局的使用方法_
#maindiv
{
width:740px;
margin-top:0px;
margin-left:auto;
margin-right:auto;
}
#HeadDiv
{
width:740px;
background-image:url(images/logo-1.jpg);
height:80px;
text-align:right;
｜
<asp:HyperLinkID="HyperLink5"runat="server"NavigateUrl="#">产品</asp:HyperLink>
｜
<asp:HyperLinkID="HyperLink6"runat="server"NavigateUrl="#">联系我们</asp:HyperLink>
<asp:HyperLinkID="HyperLink3"runat="server"NavigateUrl="#">关于公司</asp:HyperLink>
｜
<asp:HyperLinkID="HyperLink4"runat="server"NavigateUrl="#">新闻</asp:HyperLink>
width:100%;
height:63px;
DIV+CSS网站布局
DIV+CSS网站布局第一节随着Web标准在国内的逐渐普及，以及很多业内人士的大力推行，很多网站已经开始重构。
Web标准提出将网页的内容与表现分离，同时要求HTML文档要具有良好的结构。
抛弃传统的表格布局方式，采用层(DIV)布局，并且使用层叠样式表（CSS）来实现页面的外观。
一、Web标准：是一系列标准的集合。
二、网页主要由三部分组成：结构(Structure)、表现(Presentation)和行为(Behavior)。
三、对应的标准也分三方面：a)结构化标准语言主要包括：XHTML 和XMLb)表现标准语言主要包括：CSSc)行为标准主要包括对象模型：(如W3C DOM)、ECMAScript等。
d)根据W3C DOM规范是一种W3C颁布的标准，用于对结构化文档建立对象模型，从而使用户可以通过程序语言（包括脚本）来控制其内部结构。
简单的理解，DOM解决了Netscaped的Javascript Microsoft Jscript之间的冲突，给予WEB设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对象。
四、采用标准的好处：a)文件下载与页面显示速度更快。
b)内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等）。
c)用户能够通过样式选择定制自己的表现界面。
d)所有页面都能提供适于打印的版面。
五、采用标准对网民有者的好处如下：a)更少的代码和组件、容易维护。
b)带宽要求降低（代码更简洁），成本降低。
c)更容易被搜索引擎搜索到。
d)改版方便，不需要改变页面内容。
六、什么是内容、表现、结构和行为a)内容就是制作者放在页面内真正想要访问者浏览的信息，可以包含数据、文档或者图片等。
b)结构用结构将它格式化。
分成标题、正文和列表等。
易于阅读和理解。
c)表现：虽然定义了结构但是内容还是原来的样式没有改变。
例如，标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。
用CSSDIV开发技术实现网页布局
三、高级技巧
除了基本的布局实践技巧外，CSS DIV开发技术还提供了一些高级技巧，可 以进一步提升网页布局的美感和效果。
1、背景图像
通过使用CSS的background-image属性，可以为网页元素添加背景图像，从 而增加页面的视觉效果。此外，background-size、background-repeat和 background-position等属性还可以控制背景图像的大小、重复和位置等。
参考内容
随着互联网的快速发展，网页布局技术也在不断演进。在过去的几年里， DIV CSS布局技术成为了网页设计的主流。本次演示将介绍DIV CSS网页布局技术， 包括其基本概念、优点、应用场景以及发展方向。
一、什么是DIV CSS布局技术？
DIV CSS布局技术是一种基于HTML和CSS的网页布局技术。它使用DIV标签和 CSS样式表来构建网页结构，实现网页元素的排版和样式设计。DIV CSS布局技术 将网页分成若干个DIV块，每个块由一个或多个HTML元素组成，再通过CSS样式表 来控制这些元素的排版、位置、颜色、字体等属性。
二、布局实践
在实践中，我们可以使用CSS DIV开发技术来实现各种复杂的网页布局。下 面介绍几种常见的布局实践技巧：
1、浮动布局
浮动布局是早期实现网页布局的方法之一，通过设置浮动属性float，可以 让元素左右浮动，从而实现在页面上的布局。例如，将侧边栏设置为浮动，使其 浮动在页面主体内容的右侧。
在布局实践中，我们可以采用浮动布局将主体内容和侧边栏浮动在一起，同 时使用定位布局将导航栏固定在页面的顶部。此外，我们还可以为网站添加背景 图像，以提升页面的视觉效果。
通过分析实际案例，我们可以看到CSS DIV开发技术在网页布局中的重要性 和广泛应用。在实际开发中，我们需要根据具体需求选择合适的布局技巧和方法， 以提高网页的可用性和吸引力。
Div+CSS网站布局应用教程第4章 Div+CSS网页布局
4.1.1
什么是Div
Div是一个容器。在HTML页面中的每个标签对象几乎都可以称得上是 一个容器，例如使用<P>标签对象。 <p>文档内容</p> <P>标签作为一个容器，其中放入了内容。相同的，Div也是一个容器，能 够放臵内容代码如下。 <div>文档内容</div>
4.1.2
插入Div
CSS的排版是一种比较新的排版理念，完全有别于传统的排版方式。它 将页面首先在整体上进行<div>标签的分块，然后对各个块进行CSS定位， 最后再在各个块中添加相应的内容。通过CSS排版的页面，更新十分容易， 甚至是页面的拓扑结构，都可以通过修改CSS属性来重新定位。
4.3.7
理解空白边叠加
空白边叠加是一个比较简单的概念，当两个垂直空白边相遇时，它们将 形成一个空白边。这个空白边的高度是两个发生叠加的空白边中的高度的较 大者。 当一个元素出现在另一个元素上面时，第一个元素的底空白边与第二个 元素的顶空白边发生叠加。
自测4——控制网页元素之间 的间距
自测4：控制网页元素之间的间距 最终文件：光盘\最终文件\第4章\4-3-7.html 视 频：光盘\视频\第4章\4-3-7.swf
CSS中，所有的页面元素都包含在一个矩形框内，这个矩形框就称为盒 模型。盒模型描述了元素及其属性在页面布局中所占的空间大小，因此盒模 型可以影响其他元素的位臵及大小。一般来说这些被占据的空间往往都比单 纯的内容要大。换句话说，可以通过整个盒子的边框和距离等参数，来调节 盒子的位臵。
4.3.2
CSS盒模型的要点
4.3.3
margin（边距）属性
margin属性用于设臵页面中元素和元素之间的距离，即定义元素周围的 空间范围，是页面排版中一个比较重要的概念。margin属性的语法格式如下。 margin: auto | length;
使用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．结构
DIV+CSS网页布局
传统Table布局
传统Table布局方式只是利用了HTML的table元素 所具有的零边框特性 因此，Table布局的核心是： 设计一个能满足版式要求的表格结构，将内容装 入每个单元格中，间距及空格使用透明gif图片实 现，最终的结构是一个复杂的表格（有时候会出 现多次嵌套），显然，这样不利于设计和修改。
最 终 布 局 效 果
height: 400px; width: 800px; padding:5px; background-color#FF9900; } #footer { width: 800px; height: 50px; padding:5px; background-color: #6699FF; }
HTML代码： <div id=“logo"> <a href="#" id="logolink"></a> </div> CSS代码 #logo{ height:80px;/*公共代码中没有定义高度，在这里定义*/ } #logolink{ display:block;/*将链接a转化成块状元素， 这样才能显示出背景*/ width:180px; height:63px; background-image: url(../image/logo.jpg); background-repeat: no-repeat; margin-top:20px;/*设置a的顶部外边距为20像素， 这样使其与浏览器顶部有段距离*/ }
制作导航条
1.设计垂直导航条
浮动(float)页面布局
【第一步 整体布局与公共CSS定义】
页面主要分5大块，顶部的Logo、导航条 Nav、Banner、Content、Footer，如下图
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
实验四 Div+CSS网页布局一、站点规划在网页制作中，有许多的术语，例如： HTML、CSS、DIV等等。
下面我们就开始一步一步使用DIV+CSS 进行网页布局设计吧。
所有的设计第一步就是构思，构思好了，一般来说还需要制作的界面布局简单的构画出来。
下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；2、内容部分又可分为侧边栏、主体内容；3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。
DIV结构如下：│body {}/*这是一个HTML元素，具体我就不说明了*/└#Container {}/*页面层容器*/├#Header {}/*页面头部*/├#PageBody {}/*页面主体*/│├#Sidebar {} /*侧边栏*/│└#MainBody {}/*主体内容*/└#Footer {}/*页面底部*/至此，页面布局与规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。
接下来我们在桌面新建一个文件夹，命名为“DIV+CSS页面布局”，在文件夹下新建两个空的记事本文档，输入以下内容：这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。
下面，我们在<body></body>标签对中写入DIV的基本结构，代码如下：为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS信息，代码如下：把以上文件保存，用浏览器打开，这时我们已经可以看到基础结构了，这个就是页面的布局了。
关于以上CSS的说明：1、请养成良好的注释习惯，这是非常重要的；2、body是一个HTML元素，页面中所有的内容都应该写在这标签对之内，我就不多说了；3、讲解一些常用的CSS代码的含义：font:12px Tahoma；这里使用了缩写，完整的代码应该是：font-size:12px;font-family:Tahoma；说明字体为12像素大小，字体为Tahoma格式；margin:0px；也使用了缩写，完整的应该是：margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px或margin:0px 0px 0px 0px顺序是上 / 右 / 下 / 左，你也可以书写为margin:0(缩写)；以上样式说明body部分对上右下左边距为0像素，如果使用auto则是自动调整边距，另外还有以下几种写法：margin:0px auto；说明上下边距为0px，左右为自动调整；我们以后将使用到的padding属性和margin有许多相似之处，他们的参数是一样的，只不过各自表示的含义不相同，margin是外部距离，而padding则是内部距离。
text-align:center文字对齐方式，可以设置为左、右、中，这里我将它设置为居中对齐。
background:#FFF设置背景色为白色，这里颜色使用了缩写，完整的应该是background:#FFFFFF。
background可以用来给指定的层填充背景色、背景图片，以后我们将用到如下格式：background:#ccc url('bg.gif') top left no-repeat；表示：使用#CCC(灰度色)填充整个层，使用bg.gif做为背景图片，top left表示图片位于当前层的左上端，no-repeat表示仅显示图片大小而不填充满整个层。
top/right/bottom/left/center用于定位背景图片，分别表示上 / 右 / 下 / 左 / 中；还可以使用background:url('bg.gif') 20px 100px;表示X座标为20像素，Y座标为100像素的精确定位；repeat/no-repeat/repeat-x/repeat-y分别表示填充满整个层 / 不填充 / 沿X轴填充 / 沿Y轴填充。
height / width / color分别表示高度(px)、宽度(px)、字体颜色(HTML色系表)。
4、如何使页面居中？大家将代码保存后可以看到，整个页面是居中显示的，那么究竟是什么原因使得页面居中显示呢？是因为我们在#container中使用了以下属性：margin:0 auto;按照前面的说明，可以知道，表示上下边距为0，左右为自动，因此该层就会自动居中了。
如果要让页面居左，则取消掉auto值就可以了，因为默认就是居左显示的。
通过margin:auto我们就可以轻易地使层自动居中了。
5、这里我只介绍这些常用的CSS属性了，其他的请参看CSS2.0中文手册。
当我们写好了页面大致的DIV结构后，我们就可以开始细致地对每一个部分进行制作了。
在上一章中我们写入了一些样式，那些样式是为了预览结构而写入的，我们把css.css中的样式全部清除掉，重新写入以下样式代码：样式说明：a:link,a:visited {font-size:12px;text-decoration:none;}a:hover {}这两项分别是控制页面中超链接的样式，具体我就不说明了，请大家参阅手册。
#container {width:800px;margin:10px auto}指定整个页面的显示区域。
width:800px指定宽度为800像素，这里根据实际所需设定。
margin:10px auto，则是页面上、下边距为10个像素，并且居中显示。
上一章中我们讲过，对层的margin属性的左右边距设置为auto可以让层居中显示。
二、设计首页布局根据上面的规划，先设计页面布局，然后再填充内容。
步骤如下：（1）新建站点“mysite”，新建一个HTML文件，命名为“index.html”。
在“文档”面板中把“标题”项的“无标题文档”改为“页面布局”。
保存网页（制作网页时一定要时常记着保存网页，否则一旦出现问题，前功尽弃！）。
（2）页面层容器。
选择“插入”面板中的“布局”栏，单击“插入Div标签”工具，插入一个Div标签，在弹出的对话框中命名Div的ID为“Container”。
单击“新建CSS规则”按钮，以ID为规则名称新建样式：width:800px指定宽度为800像素，这里根据实际所需设定。
margin:10px auto，则是页面上、下边距为10个像素，并且居中显示。
对层的margin属性的左右边距设置为auto可以让层居中显示。
border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;（3）页面头部。
选择“插入”面板中的“布局”栏，单击“插入Div标签”工具，插入一个Div 标签，在弹出的对话框中命名Div的ID为“Header”。
单击“新建CSS规则”按钮，以ID为规则名称新建样式：width:780px;height:100px;margin:10px;表示上下左右边距为10px。
background:#FFCC99border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;（4）页面主体。
选择“插入”面板中的“布局”栏，单击“插入Div标签”工具，插入一个Div 标签，在弹出的对话框中命名Div的ID为“PageBody”。
单击“新建CSS规则”按钮，以ID为规则名称新建样式：width:780px;height:400px;margin:10px;表示上下左右边距为10px。
background: #CCFF00border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;（5）左边条。
选择“插入”面板中的“布局”栏，单击“插入Div标签”工具，插入一个Div标签，在弹出的对话框中命名Div的ID为“SideBar”。
单击“新建CSS规则”按钮，以ID为规则名称新建样式：float: left;width:280px;height:380px;margin:10px;表示上下左右边距为10px。
border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;（6）主体内容。
选择“插入”面板中的“布局”栏，单击“插入Div标签”工具，插入一个Div 标签，在弹出的对话框中命名Div的ID为“MainBody”。
单击“新建CSS规则”按钮，以ID为规则名称新建样式：float: right;width:450px;height:380px;margin:10px;表示上下左右边距为10px。
border-top-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-top-style: solid;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;（7）页面底部。