浅谈如何进行“DIV+CSS”教学
时间：2022-10-03 04:59:50
目前,网页设计界内越来越关注“DIV+CSS”的标准化设计,大到各大门户网站,小到不计其数的个人网站,都在使用“DIV+CSS”这一新的技术开发或重构自己的网站,因此,在网页设计教学中也必须将这一部分整合到课堂教学中去,才能使学生掌握网页设计的新技术,从而更快更好地胜任今后的工作。然而,实际的教学中又存在很多制约因素,例如,目前大部分教材中对于CSS只是进行概念的表述及属性设定的介绍,真正如何使用CSS谈得很少,而对于DIV更是几乎不谈,网页布局仍然是以表格为主,教学内容相对滞后显然不利于学生的发展,因此,必须将“DIV+CSS”纳入教学。可是“DIV+CSS”所涵盖的内容丰富,使用又非常灵活多样,如何在有限的课时中让学生掌握这部分的内容成为了教学的难点,为了解决这个问题,必须在教学内容的组织和安排上下功夫,选择最具代表性、实用性的内容作为教学的重点。下面就对“DIV+CSS”的教学内容进行简要介绍。
一、基本概念
1.DIV
DIV全称division,在网页设计中将其称为层,使用DIV的方法跟使用其他HTML标记的方法一样,其基本语法是:
层中的内容
但它不像表格或标题等内容具有实际的意义,DIV只是一个“容器”,用来在其中放置页面中的其他元素,然后再利用CSS样式在页面中布置这个容器的摆放位置,以实现页面的布局。
2.CSS
(1)CSS的概念。CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一。样式表首先要做的将网页上的元素精确地定位,其次它实现了网页上的内容结构和格式控制相分离。
(2)添加层叠样式表的方法。①行内样式表。这是一种最简单的方法,就是将样式表直接添加在HTML的标记里,如:
< p style=”color: red; font-size: 10pt”>CSS样式表< /p>
其中带下划线的部分就是CSS样式表的内容,该代码的作用是用红色10pt字体显示文本“CSS样式表”。这种方法尽管使用简单、显示直观,但不怎么常用,因为这样添加无法完全发挥样式表的优势,即“内容结构和格式控制”相分离,
②嵌入式样式表。样式表添加在HTML的< head>标记里,如:
< head>
< style type=”text/css”>
.waring{color:red;}
< /style>
< /head>
CSS样式表
var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-22575914-1']);_gaq.push(['_setDomainName', '.省略']);_gaq.push(['_trackPageview']);(function () {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'www') + '.省略/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();var _userid = '';var _siteid =708;var _istoken = 1;var _model = 'Model01'; WebPageSpeed =422; UrchinTrack();
其中,.waring是一个类样式,段落“CSS样式表”应用了该样式,则文本以红色显示。
(3)链接样式表。这种样式表同样是添加在HTML的< head>标记里:
< head>
< link rel=”stylesheet” href=”*.css” type=”text/css” media=”screen”>
< /head>
其中,*.css是单独保存的样式表文件,其内容包含了各种样式的定义,如:
p{font-size:14px;color:blue;}
.waring{color:red;}
3.选择符
(1)类型选择符。就是HTML文档中的元素,如p,a,table等。
(2)类选择符。以英文“.”开头,后面的名称可以自定,如上面的.waring就是一个类选择符。
(3)ID选择符。ID选择符的定义方法根类基本类似,只是开头用英文“#”号。
(4)CSS盒模型。CSS标准中规定,网页元素应放在一个盒子(box)中,而网页元素的定位实际就是这些大大小小的盒子在页面中的定位,可以通过创建定义来控制这个盒子的属性,盒模型主要定义四个区域:内容(content)、内边距(填充)(padding)、边框(border)和外边距(边界)(margin)。盒模型的示意图如图1所示。
CSS中的width属性指盒子中的内容的宽度,而整个盒子的实际宽度为:盒子宽度=padding_left+border_left+margin_eft+width+
padding_right+border_right+margin_right
相应地,CSS的height属性指盒子内容的高度,而整个盒子的实际高度为:盒子高度margin_top+border_top+padding_top+height+
padding_bottom+border_bottom+margin_bottom
二、应用实例
1.Web标准导航条
导航条
*{margin:0; padding:0;}
body {
background:#666;text- align:center;}
#nav { list-style:none;margin:50px0 0 100px;}
#nav li {float:left; }
#nav li a {display:block;padding:10px 20px;
text-decoration:none;background:#000; color:#fff;}
#nav li a:hover {color:#000;background:#ccc;border:1px solid #000;}
网站首页
关于我们
新闻快报
产品推荐
提供服务
客户管理
联系方式
问题解决
var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-22575914-1']);_gaq.push(['_setDomainName', '.省略']);_gaq.push(['_trackPageview']);(function () {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'www') + '.省略/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();var _userid = '';var _siteid =708;var _istoken = 1;var _model = 'Model01'; WebPageSpeed =422; UrchinTrack();
以上代码浏览效果如图2所示。
2.页面水平居中
CSS+Div实现水平居中对齐的页面布局
body { text- align:center; }
div#wrap { text- align:left; width:760px; margin:0 auto; border:1px solid #333;
background-color:#ccc; }
正文内容
var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-22575914-1']);_gaq.push(['_setDomainName', '.省略']);_gaq.push(['_trackPageview']);(function () {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'www') + '.省略/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();var _userid = '';var _siteid =708;var _istoken = 1;var _model = 'Model01'; WebPageSpeed =344; UrchinTrack();
3.页面布局
页面布局为三栏(带导航栏及页脚)并居中,代码如下:
无标题文档
#contenarea {
width: 450px; float: left;background-color:#FFFFCC; padding: 10px;}
#leftpanel {width: 150px;float: left; padding:10px;background-color: #FFCC99;}
#rightpanel {float:left;width:150px;background-color: #66FFCC;padding: 10px;}
#footer {clear:both; background-color:#CCCCCC;text- align: center;}
#wrapper {width: 852px;margin-right:auto;margin-left: auto;position: relative;
text- align: left; margin-top: 0px;margin-bottom: 0px;}
body {text- align: center;}
#nav {list-style:none;width:852px;margin-bottom:0;}
#nav li {float:left; }
#nav li a { display:block;padding:10px 20px;text-decoration:none;
text-transform:capitalize;background:#000;color:#fff;}
-->
网站首页
关于我们
新闻快报
产品推荐
提供服务
客户管理
联系方式
copyright statement,links,ect.
var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-22575914-1']);_gaq.push(['_setDomainName', '.省略']);_gaq.push(['_trackPageview']);(function () {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'www') + '.省略/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();var _userid = '';var _siteid =708;var _istoken = 1;var _model = 'Model01'; WebPageSpeed =344; UrchinTrack();
页面布局是网页设计的重点,同时页面的布局样式有很多,在此不一一列举,在教学中,只要让学生充分理解CSS的盒子模型,并掌握应用CSS控制页面元素的方法就能用DIV轻松布局。
参考文献:
李 烨:别具光芒div+css网页布局与美化[M].人民邮电出版社,2005.9-11
