浅述如何进行DIVCSS教学.docVIP

浅谈如何进行“DIV+CSS”教学 　　目前,网页设计界内越来越关注“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的标记里,如: 　　CSS样式表 　　其中带下划线的部分就是CSS样式表的内容,该代码的作用是用红色10pt字体显示文本“CSS样式表”。这种方法尽管使用简单、显示直观,但不怎么常用,因为这样添加无法完全发挥样式表的优势,即“内容结构和格式控制”相分离, 　　②嵌入式样式表。样式表添加在HTML的标记里,如: 　　 　　 　　.waring{color:red;} 　　 　　 　　 　　CSS样式表 　　var _gaq = _gaq || [];_gaq.push([_setAccount, UA1]);_gaq.push([_setDomainName, .省略]);_gaq.push([_trackPageview]);(function () {var ga = document.createElement(script); ga.type = text/javascript; ga.async = true;ga.src = (https: == tocol ? https://ssl : http://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的标记里: 　　 　　 　　 　　其中,*.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中的