实验DivCSS网页布局

实验六 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结构布局“诗歌”页面》说课稿各位老师：你们好，我说课的题目是《使用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规则布局美化页面四、教学方法基于以上的教材目标分析和重难点的确定，我根据自己对任务驱动教学法和新课程改革的理论认识，结合授课学生实际，主要采用任务驱动、视频指导教学法。

DIV+CSS 综合练习任务目的：1、能够描述链接的四中状态，并与4种伪类对应。

了解块状元素和内联元素的区别,理解类的继承。

2、能够使用DIV+CSS对完整页面进行布局，完成导航条的状态的设置。

3、通过小组学习培养学生团结协作能力，通过对导航条的制作培养学生在导航制作方面的创新能力。

任务重点：熟练的使用CSS完成标签<a>,以及伪类的样式定义，掌握操作步骤。

任务难点：使用CSS制作导航条步骤较多，易使学生思维混乱，理清操作步骤，掌握操作要领，有助于培养学生的创新能力，这是本节课的难点。

实施方法：小组实训、思路引导、演示实验、实施过程：一、提问复习（2分钟）在使用DIV+CSS定义连接样式的时候我们遇到了几个选择器名称，他们分别是什么含义？a:link ——未访问的链接a:visited ——已访问的链接a:hover ——当有鼠标经过悬停在链接上a:active ——被选择的链接（按下鼠标）二、展示效果、分解任务（3分钟）结合上节课已经完成的任务分析。

出示幻灯片分析。

三、分组制作。

（4分钟）1.解压素材包：将获取的本节课素材加压缩到D:\LX7下面。

2.建立好站点，站点名称LX7，站点的主文件夹为D:\LX7，站点的图片文件夹为D:\LX7\images\3.打开lx7.html文件，插入布局对象：在#menu的标签之前插入ID为#top的DIV布局对象。

#top的样式为：宽:770 px；高:90 px；左右margin：auto；背景图片images\top.png。

4.插入布局对象：在#main的标签之后插入ID为#foot的DIV布局对象。

#foot的样式为：宽:770 px；高:60 px；左右margin：auto；背景颜色：浅灰；文字居中对齐；插入版权信息文字。

四、分析任务二（2分钟）出示幻灯片，分析导航的结构。

结合PPT讲解导航的结构。

分析导航的制作过程。

四、讲解步骤（4分钟）1.光标停在导航的链接与链接之间，加入回车换行。

实训4 div+css综合运用一、背景介绍在Web开发领域，div和css是两个基础、重要的概念。

div是HTML中的一个标签，用来划分网页的结构和布局；而css是一种样式表语言，用于描述HTML文档的呈现方式。

实训4中涉及到了div 和css的综合运用，旨在帮助学习者掌握这两个技术，并且能够灵活运用于实际项目中。

二、整体评估在实训4中，学习者需要通过实际操作，完成一个包含头部、导航、内容区域和底部的网页布局。

这样的任务要求对div和css的综合运用提出了很高的要求，需要考虑到页面的整体结构、样式和布局。

在评估过程中，我发现学习者需要注意以下几点：1. 结构清晰：div标签应该按照页面的结构和布局来合理地进行划分和嵌套，以确保页面结构清晰、层次分明。

2. 样式统一：css样式应该对整个页面起到统一、协调的作用，保证整体的美观和一致性。

3. 响应式布局：在综合运用中，需要考虑到不同设备上的显示效果，保证页面能够适配不同的屏幕尺寸。

4. 创新设计：除了基本的布局要求，学习者还可以通过css的特效和动画等进行创新设计，提升页面的互动性和吸引力。

三、文章撰写在本次实训4中，我们深入学习了div和css的综合运用，从理论到实践，都有了全面的了解和掌握。

通过对div的合理划分和css的样式设置，我们可以轻松实现一个精美、完善的网页布局。

在整个过程中，我对div和css的重要性有了更深的理解。

div作为网页设计中最基础的组件，它的合理划分和嵌套对于页面的结构和布局起着至关重要的作用。

通过div的灵活运用，我们可以将页面分割成不同的模块，从而更好地呈现页面内容，提高用户的浏览体验。

css则是页面样式的设计师，通过设置各种样式属性，我们可以实现页面的美化和个性化定制。

通过css的盒子模型、浮动布局、弹性布局等特性，我们可以完美定制各种不同风格的网页布局。

在综合运用的过程中，我深刻体会到了对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网页布局的优点，并探讨其对网页设计和开发的影响。

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样式，减少了网页的下载时间，从而提高了页面加载的速度。

实验题目DIv布局实验一、实验目的1．掌握HTML的基本结构；2. 使用DIV进行简单的网页布局。

二、实验环境1、硬件环境：2、软件环境（1）操作系统：windows XP Professional，版本2002，Service Pack 3（2）编程环境：WebStorm-9.0.1三、实验内容在网页中用Div+CSS实现如下网页布局.把网页做出来：四、实验过程1.新建New Project,创建HTML File;2.使用Div+CSS样式，按照实验要求网页布局，创建一个大的DIV并设置样式，里面包括header、conainer及pagefooter,然后在conainer部分再创建两个DIV，里面包含content 和side，然后在content里面再创建两个DIV，里面包含banner，columns，最后再columns 创建两个DIV，里面包含col-a，col-b；3.分别使用不同浏览器（IE、360浏览器等）测试网页效果；4.根据测试效果调整网页。

5.页面效果如图：五、源程序清单<!DOCTYPE html><html><head lang="hahaha"><meta charset="UTF-8"><title></title><style>body{margin: 10px;padding: 10px;}.header{margin: 0 auto;width: 1000px;height: 100px;border: solid 1px #0000FF;margin-top: 20px;}.container{margin: 0 auto;width: 1000px;border: solid 1px #0000FF;margin-top: 20px;height: 420px;.content{float: left;width: 750px;border: solid 1px #0000FF;height: 400px;margin: 10px 10px 10px 10px;; }.bannar{width: 720px;border: solid 1px #0000FF;height: 100px;margin: 10px 10px 10px 10px;; }.columns{width: 720px;border: solid 1px #0000FF;height: 240px;margin: 10px 10px 10px 10px; }.col-a{float: left;width: 320px;border: solid 1px #0000FF;margin: 10px 10px 10px 20px;height: 200px;}.col-b{float: left;width: 320px;border: solid 1px #0000FF;margin: 10px 10px 10px 20px;height: 200px;}.side{float: left;width: 200px;border: solid 1px #0000FF;height: 400px;margin: 10px 10px 10px 10px; }.pagefooter{margin: 0 auto;width: 1000px;border: solid 1px #0000FF;height:100px;margin-top: 20px;</style></head><body><div class="header">header</div><div class="container"><div class="content">content<div class="bannar">bannar</div><div class="columns"> columns<div class="col-a"> col-a</div><div class="col-b"> col-b</div></div></div><div class="side">side</div></div><div class="pagefooter">pagefooter</div></body></html>五、总结。

实验名称DIV+CSS样式应用实验3 DIV+CSS样式应用1实验目的1)了解页面常用布局结构；2)掌握使用CSS盒子模型浮动与定位的方法3)掌握DIV的使用方法；4)掌握DIV+CSS布局的基本方法；2实验内容及要求1)制作一个简单的如下图框架的首页，不需要填写具体内容，使用背景色标出区域；3 实验原理浮动边框可以向左或向右移动，直到外边缘碰到包含框或另一个浮动框的边框为止。

通过float或margin来让元素产生位置移动。

4仪器与材料安装有Windows7或以上操作系统的计算机，Dreamweaver5实验内容5.1CSS 布局入门CSS 布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的GIF 图片来控制文布局版块的间距；而现在则采用层(div)来定位，通过层的margin、padding、border 等属性来控制版块的间距。

定义DIV，分析一个典型的定义div 例子：说明如下：1)层的名称为sample，在页面中用就可以调用这个样式；2)margin 是指层的边框以外留的空白，用于页边距或者与其它层制造一个间距。

"10px 10px 10px 10px"分别代表"上右下左"(顺时针方向)四个边距，如果都一样，可以缩写成"margin: 10px;"。

如果边距为零，要写成"margin: 0px;"；3)注意：当值是零时，除了rgb 颜色值0%必须跟百分号，其他情况后面可以不跟单位"px"。

margin 是透明元素，不能定义颜色；4)padding 是指层的边框到层的内容之间的空白。

和margin 一样，分别指定上右下左边框到内容的距离。

如果都一样，可以缩写成"padding:0px"。

单独指定左边可以写成"padding-left: 0px;"。

Div+css一，什么是CSSCSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表又被我们称为CSS样式，CSS样式又被作为一种能制作出各种样式网页的技术统称。

二．DIV+CSS简单地说DIV+CSS(DIV CSS)被称为“WEB标准”中常用术语之一。

首先认识DIV 是用于搭建html网页结构（框架）标签，像<b>、<h1>、<span>等html标签一样，再认识CSS是用于创建网页表现（样式/美化）样式表统称，通过css来设置div标签样式，这一切常常我们称之为div+css。

表格以前html直接设置高度width="300"这种方式嵌入表格标签内，而且无需带单位，默认以px（像素）为单位。

例子：<table><tr><td height="100">我的高度为100px</td></tr><tr><td height="50">我高度为50px</td></tr></table>分别设置了高度为100px和50px的两行表格DIV的布局方法CSS 代码.yangshi{ height:50px; width:50px; overflow:hidden; border:1px solid #666;}Html body内代码：<div class="yangshi">演示，内容测试内容高度超出演示实例，divcss5实例</div>完整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>CSS 高度实例</title><style>.yangshi{ min-height:50px; _height:50px;width:150px;border:1px solid #666;}</style></head><body><div class="yangshi">演示，内容测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实例，实例</div></body></html>CSS 宽度传统Html 宽度属性单词：width 如width="300";CSS 宽度属性单词：width 如width:300px;HTML宽度与DIV+CSS对比1、传统html中宽度width="300"，即设置对应元素宽度为300px（像素）。

Div + CSS 布局简单实例一、准备工作目录及素材1、在D：盘上创建名为myweb的新文件夹。

2、准备所需素材。

拷贝F:\网页素材\网站重构\源文件\第2章中的images 文件夹到D: \myweb 文件夹中。

3、在D:\myweb 文件夹中新建子文件夹style。

二、定义站点1、启动Dreamweaver cs4，选择“站点”>“管理站点”。

2、在弹出的“管理站点”对话框中单击“新建”按钮，然后选择“站点”。

3、在弹出的“站点定义”对话框中，如果显示向导（“基本”选项卡），则单击“高级”选项卡，然后从“分类”列表中选择“本地信息”（它应当是默认选项）。

4、在“站点名称”文本框中，输入Cafe 香浓作为站点名称。

5、在“本地根文件夹”文本框中，指定D:\myweb 文件夹。

你可以单击文件夹图标来浏览并选择该文件夹，或者在“本地根文件夹”文本框中输入路径。

6、在“默认图像文件夹”文本框中，指定D:\myweb 文件夹中已有的images 文件夹。

你可以单击文件夹图标来浏览并选择该文件夹，或者在“默认图像文件夹”文本框中输入路径。

7、从“分类”列表中选择“远程信息”，“访问”选：“FTP” 并填写好相关信息。

8、从“分类”列表中选择“测试服务器”，“访问”选：“FTP” 并填写好相关信息，“URL前缀”须根据实际情况做相应修改。

9、从“分类”列表中选择“本地信息”，“HTTP 地址”须根据实际情况做相应修改。

10、单击“确定”。

随即出现“管理站点”对话框，显示您的新站点。

11、单击“完成”关闭“管理站点”对话框。

此时“文件”面板显示当前站点的新本地根文件夹。

“文件”面板中的文件列表将充当文件管理器，允许你复制、粘贴、删除、移动和打开文件，就象在计算机桌面上一样。

三、了解你的任务下图是一张为Cafe 香浓站点设计的完整的和符合要求的设计草样。

作为Web 设计人员，你需要对草样进行转换，使之最终形成可以使用的Web 页面。

CSS+DIV实验报告系别管理系学生姓名罗强专业电子商务学号 201020611129 实验课程 CSS+DIV 指导老师杨忠实验内容（实验中所了解、熟悉、辅助完成的内容等）：首先是选择做什么内容的网页，通过参考网站上的网页模版，决定自己网页的大概版式。

我选择的网页设计内容是做一个销售相机的网站，在选好内容以后我就开始进行LOGO、网页导航的设计、网站主体以及网站的尾部进行设计与制作。

在选择好对照的模版后，我也参考了尼康、三星、索尼以及佳能的官方网站。

最后选定了在尼康的官方网站中选取素材，因为尼康产品的背景与我即将制作网站灰色背景相近，不会产生较大的颜色反差，令观看网页的人感觉舒适。

在主页的文字和图片都弄完了以后，接下来就是子页的设计，因为我的导航设计了相机产品列表，配件列表，优惠活动和售后服务。

其中产品列表下有单镜反光相机列表和轻便型数码相机列表，配件列表下有闪光灯列表和镜头列表。

我参照了模版子页的样式将单镜放光相机列表、轻便型数码相机列表做成相同的样式，镜头和闪光灯页面做成了相同的样式，并且将单反相机列表和数码相机列表归为产品列表下，将镜头、闪光灯页面归在配件列表下。

最后一项是检查并添加图片ALT属性，页面的META、标题以及描述。

给制作的页面互相连接起来，使他们能够互相访问。

并且连接一张网页就连接一下试试网页上的连接是否正确。

指实验中的感受、体会、收获或反思等：在网页制作过程中我的体会是：必须要充分了的利用时间来实践，不能根据自己的想法来做，否则就会带来不必要的麻烦。

而且在设计和制作都完成的情况下，一定要对网页进行检查，包括网页是否有空连接，死连接，是否有META 属性以及网页的浏览器兼容性。

最好的办法就是打开一个一个的自习检查，检查出来问题，就及时的进行修改。

也需要在不同的电脑上打开看看网页的显示是否正常，如果不能正常显示就要思考一下出了什么问题，并对代码进行修改。

我觉得我对网页颜色的选择还是新手的灰色，不敢去尝试使用其他颜色作为背景，虽然看的网页比较多，但自己使用时就局限在固定的颜色，对网站颜色的搭配还是没有掌握，还需要进一步的学习。

实验四 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则是内部距离。