实训5DIV+CSS布局规划



实训目标
（1） 熟悉常见网页布局结构类型。
（2） 能够对主流商业网站布局结构进行分析。
（3） 综合运用DIV+CSS对小型网站页面进行布局规划、编写代码实现布局效果。

实训内容
（1） 使用CSS对DIV进行样式定义，实现图层定位与布局。
（2） 使用CSS的float属性来实现图层中多个子图层的水平排列。
（3） 使用DIV+CSS完成常见的页面布局代码设计。
（4） 综合运用DIV+CSS技术模拟真实网站进行网页仿真设计。 

实训项目
（1） DIV+CSS页面布局设计。
(2) 设计“Web前端开发技术课程网站”页面。
项目16DIV+CSS页面布局设计
1. 实训要求
(1) 固定型页面布局设计。用DIV、CSS实现如图51所示的布局效果。

(2) 用DIV+CSS完成如图52所示的页面布局效果。
(3) 弹性页面布局设计。所谓“弹性”是指宽度与高度的单位为百分比，而不是具体的数值。用DIV+CSS完成如图53所示的页面布局设计。
2. 实训内容
(1) DIV创建与DIV嵌套。
(2) DIV属性的设置与应用。
(3) DIV样式引用方法。
(4) 外部样式表的定义与引用。



图51DIV+CSS固定型页面布局之一




图52DIV+CSS固定型页面布局之二




图53DIV+CSS弹性页面布局




3. 实训所需知识点
(1) 图层div标记。



<div style="position: absolute;left:10px;top:10px;width:100px;height:100px;

background: red;"> </div>



(2) 链接link标记。



<link type="text/css" rel="stylesheet" href="外部样式表文件名称" /> 




图54页面DIV结构

(3) 样式style标记。



<style type= " ">

@import url("外部样式表文件名称");

</style> 


4. 页面结构分析
网站首页一般采用DIV+CSS结构进行布局，页面DIV结构如图54所示。
(1) HTML代码中的DIV结构规划。



<div id="webpage"><!--页面层容器-->

<div id="head">          </div><!--页面头部-->

<div id="mainbody">     <!--页面主体-->

<div id="sidebar">   <!--侧边栏-->  </div>

<div id="main">   <!--主体内容-->    </div>

</div>

<div id="footer">           <!--页面底部--> </div>

</div>


(2) 编写外部样式表css.css。



/* css.css*/

/*基本信息*/

body{font:12px Tahoma; margin:0px; text-align:center; background:#FFFFFF;}

/*页面样式*/   

#webpage{width:100%;}

/*页面头部样式*/   

#head {width:800px;margin:0 auto;height:100px;background:#FFCC99;}  

/*页面主体样式*/

#mainbody{width:100%; margin:8px auto;}

#sidebar{background:#99CC33; width:25%; text-align:left; float:left;

overflow:hidden;}

#main{background:#66FF66; width:75%; text-align:left; float:right;

overflow:hidden;}

#footer{margin:0 auto; width:800px; height:50px;background:#00FFFF; clear:both;}


(3) 链接外部样式表。



<link href="css.css" rel="stylesheet" type="text/css" />


5. 实训过程与指导
编程分别实现图51~图53所示的布局效果。以图51为例，具体步骤如下： 
(1) 文档结构的创建。
① 启动程序，创建HTML文档。启动VS Code或HBuilder X软件，新建HTML网页，在首行插入注释语句，注明程序名称为prj_5_1_1.html。格式如下： 



<!-- prj_5_1_1.html -->


② 保存文件。输入文件名为prj_5_1_1.html，然后保存文件。
(2) 页面内容设计。
参照图51所示的页面结构分析，分别在body标记中插入8个div,并在div中插入相关提示信息。
① 在body标记中插入父div，设置id为container。
② 在父div中插入子div，设置id为header，内容为“这是头部信息区”。
③ 在父div中插入子div，设置id为nav，内容为“这是导航信息区”。
④ 在父div中插入子div，设置id为maincontent，内容中包含两个子div，两个子div的id分别为main、side，内容分别为“这是主体信息区”“这是右侧信息区”。
⑤ 在父div中插入子div，设置class为clearfloat，内容为空，用于清除图层浮动。
⑥ 在父div中插入子div，设置id为footer，内容为“这是版权信息区”。
(3) 表现设计。
① 在head标记中插入link标记，链接外部样式表，格式如下： 



<link href="pro51/layout_1.css" rel="stylesheet" type="text/css"/>


② 创建外部样式文件layout_1.css。
③ 在layout_1.css文件中分别定义全局样式及各div样式。具体样式定义描述如下： 
 全局样式定义为边界上下0px、左右自动、字体特粗、大小28px、行高1.5em。
 #container样式为宽度900px、边界上下0px、左右自动。
 #header样式为高度70px、背景颜色#CCFFCC、底边界8px。
 #nav样式为高度40px、背景颜色#CCFFCC、底边界8px。
 #maincontent样式为底边界8px。
 #main样式为图层向左浮动、宽度664px、高度400px、背景颜色#FFFF99。
 #sidebar样式为图层向右浮动、宽度228px、高度400px、背景颜色#FFCC99。
 .clearfloat样式为清除图层左、右浮动。
 #footer样式为高度70px、背景颜色#CCFFCC、顶边框粗细8px、线型实线、白色。
(4) 保存并查看网页。
完成设计后通过浏览器观看页面效果，如图51所示。
根据图52和图53所示的页面效果设计HTML代码的DIV结构，在body标记中插入相应的div，分别在不同的图层中插入相关提示信息，根据页面布局效果，参照layout_1.css格式编写外部样式文件layout_2.css、layout_3.css。格式如下： 
 /*pro51/layout_2.css*/



*{font-weight:bolder;font-size:28px; margin:0;}

#container{margin:0 auto; width:900px;}

#header{height:100px; background:#6CF;margin-bottom:5px;}

#maincontent{margin-bottom:5px;}

#sidebar{float:left;width:200px;height:500px;background:#9FF;}

#content{float:right;width:695px;height:500px;background:#CFF;}


 /*pro51/layout_3.css*/



*{padding:0px;margin:0 auto;font-weight:bolder;font-size:24px;}

#container{width:100%;}

#header{height:100px;background:#99CC66;margin-bottom:5px;}

#menu {height:30px;background:#669933;margin-bottom:5px;}

#maincontent{margin-bottom:5px;height:350px;}

#sidebar{float:left; height:350px;background:#CCFF99;}

#content{margin-left:205px ;height:350px; background:#FFFFAA;}

#footer{height:60px; background:#99CC66;}

.clearfloat{clear:both;}

span{padding: 0 10px;}


项目17设计“Web前端开发技术课程网站”页面
1． 实训要求
(1) 运用DIV+CSS进行页面布局，参照图55和图56所示的页面效果设计“Web前端开发技术课程网站”页面。


图55“Web前端开发技术课程网站”首页




图56在一级导航菜单上盘旋时的二级导航菜单效果页面

(2) 学会使用多种样式表分别对页面中的文字、段落、图像等元素进行样式定义。
(3) 学会创建DIV、设置DIV的属性。
(4) 学会编写外部样式表文件，并链接到HTML文档中。
2． 实训内容
(1) 使用DIV+CSS布局完成“Web前端开发技术课程网站”的页面布局。
(2) 设计网站首页和二级导航菜单。
(3) 定义图层和嵌套图层。
(4) 定义并引用内部样式表、外部样式表。 
3． 实训所需知识点
(1) 图层div标记。


<div id="div1" class=" div2"> … </div>





(2) 链接link标记。


<link type="text/css" rel="stylesheet" href="pro52/link-5-2.css"/> 


(3) 样式style标记。


<style type="text/css">

@import url("pro52/link-5-2.css");

#nav{background:#209060;width:100%;line-height:40px;color: white;}

</style>


(4) 无序列表ul标记(显示两层菜单)。


<ul>

<li>首页</li>

<li onmouseover="changeHeight()" onmouseout="returnHeight()">

<a href="#">HTML基础<span class="rotate"> </span></a>

<div class="submenu">

<ul>

<li><a href="">文本、段落与列表</a></li>

<li><a href="">超链接与浮动框架</a></li>




<li><a href="">图像与多媒体文件</a></li>

<li><a href="">表格与表单</a></li>

</ul>

</div>

</li>

</ul> 


(5) 脚本script标记。


<script type="text/javascript">

function changeHeight() {

// $("nav").style.height='154px';


$("header").style.height='455px';

}

</script>


(6) 其他常用标记。


<h1>网络教学平台</h1>

<h3>课程资源</h3>

<hr color="#BC0000">

<p>Web前端开发技术联盟，Copyright &copy;2020—2025 版权所有。</p>




图57“Web前端开发技术课程网站”

的页面布局结构

4． 页面设计要求
页面布局结构如图57所示，将页面分成header(bdlink、nav)、main(title、left、right)、footer等区域。

5． 实训过程与指导
编程实现“Web前端开发技术课程网站”的首页，具体步骤如下： 
(1) 文档结构的创建。
① 启动程序，创建HTML文档。启动编辑器软件，新建HTML网页，在首行插入注释语句，注明程序名称为prj_5_2．html。格式如下： 


<!-- prj_5_2.html -->


② 保存文件。输入文件名为prj_5_2．html，然后保存文件。
(2) 页面内容设计。
① 页面布局规划。根据图57在body标记中插入相关div，形成DIV嵌套结构。代码如下： 


<div id="container">

<div id="header">

<div class="bd-link"></div>

<div id="nav">

<div class="navmenu"></div>




</div>

</div>

<div class="main"> 

<div id="title"></div> 

<div id="left"></div>

<div id="right"></div> 

</div>

<div id="footer"></div>

</div>


② 在id为nav的div标记中插入class为navmenu的div，在其中插入无序列表，设计一级导航菜单。代码如下： 


<div id="nav" class="">

<ul>

<li><a href="#">首页</a></li>

<li onmouseover="changeHeight()" onmouseout="returnHeight()">

<a href="#">HTML基础<span class="rotate">  
</span></a>

div class="submenu">

<ul>

<li><a href="">文本、段落与列表</a></li>

<li><a href="">超链接与浮动框架</a></li>

<li><a href="">图像与多媒体文件</a></li>

<li><a href="">表格与表单</a></li>

</ul>

</div>

</li>

<li>…</li> <!--其余导航菜单与第2个子菜单结构类似-->

 </ul>

</div>


一级导航菜单为“首页”“HTML基础”“CSS”“JavaScript”“HTML5&CSS3基础”“HTML5高级应用”。二级导航菜单分别如下。 
HTML基础： “文本、段落与列表”“超链接与浮动框架”“图像与多媒体文件”“表格与表单”。
CSS： “CSS基础”“DIV+SPAN”“CSS样式属性”“DIV+CSS页面布局”。
JavaScript： “JavaScript基础”“事件分析”“DOM与BOM”。
HTML5&CSS3基础： “HTML5基础”“CSS3转换”“CSS3过渡”“CSS3动画”。
HTML5高级应用： “Web Storage”“Canvas”“Web Worker”。
注意： 除第一个“首页”导航菜单外，其余的导航菜单均有二级导航菜单，并且在li标记上需要增加onmouseover、onmouseout等事件属性，绑定事件处理函数分别为changeHeight()、returnHeight()，完成当鼠标指针在一级导航菜单上盘旋时能够改变id为header的div的高度，从而实现菜单拉伸的动态效果。
③ 在class为main的div标记中插入3个div，其id分别为title、left、right。
 在id为title的div中插入h1标记。内容如下： 


<a href="#"> 《Web前端开发技术》 教材获中国大学出版社图书奖优秀教材奖</a>


 在id为left的div中插入img标记。内容如下： 


<img src="pro52/book3.jpg" width="600px" height="350px">


 在id为right的div中插入两个h3和两个ul标记。内容如下： 


<h3> 网络教学平台 </h3>

<ul>

<li><a href="http://i.mooc.chaoxing.com">

<span class="red"></span>泛雅平台</a></li>

<li><a href="https://www.xueyinonline.com/">

<span class="red"></span>学银在线</a></li>

<li><a href="https://www.wqketang.com/">

<span class="red"></span>文泉课堂</a></li>

</ul>

<h3>课程资源</h3>

<ul id="source">

<li><a href="#"><span class="red"></span>新形态教材</a></li>

<li><a href="#"><span class="red"></span>教学大纲</a></li>

<li><a href="#"><span class="red"></span>教学PPT</a></li>

<li><a href="#"><span class="red"></span>教学视频</a></li>

<li><a href="#"><span class="red"></span>实训视频</a></li>

<li><a href="#"><span class="red"></span>习题与答案</a></li>

<li><a href="#"><span class="red"></span>试卷库</a></li>

<li><a href="#"><span class="red"></span>习题作业库</a></li>

 </ul>


④ 在id为footer的div标记中插入hr、p标记。内容如下： 


<hr color="#BC0000">

<p>Web前端开发技术联盟，Copyright &copy;2020—2025 版权所有。</p>


⑤ 完成上述操作后，整个页面的内容信息添加完毕。保存页面，并在浏览器中查看网页，效果如图58所示。


图58“Web前端开发技术课程网站”首页(未应用样式)


(3) 表现设计。
在style标记中分别定义相关标记的样式，其样式要求如下。
① 定义全局声明*样式。*样式为填充、边界均为0。
② 定义最外层div样式。#container样式为边界上下0、左右自动、宽度100%。
③ 定义a标记中span标记的样式。样式为字体大小22px、有填充(上下0、左右5px)。
④ 定义ul中的a： link、a： visited、a： active样式。a： link、a： visited、a： active样式为颜色为白色、字符装饰为无。
⑤ 定义class为main的div样式。．main样式为宽度1200px、高度410px、有填充(上下20px、左右自动)、有边界(上下0、左右自动)、文本居中对齐。
⑥ 定义id为title的div样式。#title样式为宽度100%、高度60px、文本居中对齐。定义其中的h1标记样式为颜色#8B0000、字体黑体、大小28px、顶部填充16px。定义h1标记中a： visited、a： link、a： active的样式为颜色#8B0000、字符装饰为无。定义a： hover样式为颜色#8B0000、字符装饰为下画线。
⑦ 定义id为left和right的div样式。样式为行内块显示方式、宽度560px、高度350px、向左浮动、文本居中对齐、填充10px。
⑧ 定义id为right的div中的ul li a标记样式。样式为字符装饰无、颜色黑色、字体大小22px、填充5px、左右浮动、宽度150px。定义其中的a： hover样式为背景颜色#F1F2F3。
⑨ 定义id为right的div中的ul标记样式。样式为文本居左对齐、左填充50px、列表样式类型无。
⑩ 定义h3标记样式。样式为清除左右浮动、高度60px、字体大小28px、顶部填充15px、颜色红色。
 定义class为red的span标记样式。样式为颜色红色、字体大小24px。
 定义id为source的ul标记样式。样式为行内块显示方式、文本居中对齐。定义其中的li标记样式为背景颜色#006E38、行内块显示方式。
 定义id为footer的div样式。样式为宽度100%、有边界(上下0、左右自动)、清除左右浮动、文本居中对齐、字体大小20px、行高40px。

(4) 保存并查看网页。
完成设计后通过浏览器查看页面效果，如图55所示。
课外拓展训练5
1． 采用DIV+CSS设计页面布局，效果如图59所示。要求如下： 
(1) 采用内部样式表，分别定义不同div样式。
 定义全局样式为字体标粗、大小16px、填充和边界上下均为0、左右自动。
 #container样式为宽度100%、填充上下0、左右自动、边界上下0、左右自动。
 #header样式为宽度100%、高度70px、背景颜色#BEBEBE。在div中插入img标记，设置src为wktz51/w3school．png、高度为100%、宽度为100%。
 #nav样式为宽度100%、高度32px、背景颜色#FBFBFB。在导航中无序列表无符号、水平居中显示，列表项为行内元素、填充上下5px、左右15px。
 #mainbody样式为宽度100%、高度300px、填充上下0、左右自动、边界上下0、左右自动。
 #left样式为图层向左浮动、背景颜色#EFEFEF、宽度15%、高度300px。其中无序列表为无符号的列表，边界为20px。
 #middle样式为边界上下0、左右15%、高度300px、首行缩进两个字符。
 #right样式为图层向右浮动、背景颜色#EFEFEF、宽度15%、高度300px。
 #footer样式为宽度100%、高度50px、背景颜色#B6B6B6、内容水平居中显示、填充10px。
 #clearfloat样式为清除图层左右浮动。


图59“简易W3School教程网站”页面


(2) 程序名称为project_5_1．html。
附： 文字内容如下。 


导航菜单：HTML/CSS、JavaScript、Server Side、ASP.NET、XML、Web Services、Web。

左侧导航菜单：HTML、XHTML、HTML5、CSS、CSS3、TCP/IP。

右侧导航菜单：参考手册、HTML/HTML5、标签、CSS 1,2,3、HTML颜色、HTML ASCII、HTML Latin-1、

HTML 符号。

中间图层内容：

HTML 系列教程

从左侧的菜单选择你需要的教程!

HTML

HTML 指超文本标签语言。

HTML 是通向 Web 技术世界的钥匙。

在 W3School 的 HTML 教程中，您将学习如何使用 HTML 来创建站点。

HTML 非常容易学习!你会喜欢它的!现在开始学习 HTML !

HTML5

HTML5 是下一代的 HTML。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

在 W3School 的 HTML5 教程中，您将了解 HTML5 中的新特性。

现在就开始学习 HTML5 !


2． 设计“HTML5简介”页面，效果如图510所示。要求如下： 


图510“HTML5简介”页面

(1) 页面标题为“HTML5简介”。
(2) 网页内容标题： 以h2标题字标记分别显示“HTML5 是如何起步的？”“为 HTML5 建立的一些规则：”，h2标记样式为字体加粗、颜色白色、背景#006633、填充10px。
(3) 在第1个标题下每行一个段落，默认大小和字体； 但“编者注：”的样式为“加粗、斜体”； 所有段落向右缩进两个字符、行高1．5倍。
(4) 在第2个标题下是一个无序列表，采用默认格式显示，但无序列表也向右缩进两个字符、行高1．5倍。
(5) 所有内容放在图层中，图层div的样式为上下填充20px、左右填充10px。
(6) 程序名称为project_5_2．html。
附： 文字内容如下。


HTML5 是如何起步的？

HTML5 是 W3C 与 WHATWG 合作的结果。

编者注： W3C 指 World Wide Web Consortium，万维网联盟。

编者注： WHATWG 指 Web HyperText Application Technology Working Group。

WHATWG 致力于 Web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

为 HTML5 建立的一些规则：

新特性应该基于 HTML、CSS、DOM 以及 JavaScript。

减少对外部插件的需求(比如 Flash)。

更优秀的错误处理。

更多取代脚本的标记。

HTML5 应该独立于设备。

开发进程应对公众透明。