论文部分内容阅读
摘要：DIV+CSS网页布局是目前主流的网页布局方式，而浮动、定位、浏览器兼容等技术是网页布局中的难点，也是网页设计教学中学生认为的难点。文章通过对这些教学难点的探讨，以期能给网页设计课程的教学带来帮助。
关键词：DIV；CSS；网页设计
网页设计课程是中职学校计算机类专业的一门主干课程，为了满足社会对网页设计人才的技术要求，从教学思想上要更新观念，其教学内容和教学方法也要与时俱进，让学生掌握DIV+CSS这种主流的网页布局技术，加强学生的实践动手能力，力求使学生更能适应当今市场的需求。
1 引言
采用DIV+CSS布局页面已是网页设计的主流，多数大型门户网站都使用该方式进行网页的布局排版。以前的表格布局方式几乎被淘汰，从应用实践上看，DIV+CSS布局方式实现了网页的内容和表现形式相分离，有利于网站的维护，利于SEO优化，加快了网页的加载时间，用户体验较好。
2 DIV+CSS布局概述
DIV+CSS布局技术采用HTML中的DIV标签进行整体布局，之后采用CSS（Cascading Style Sheets）即层叠样式表进行网页的表现设定。用DIV将页面进行分块，搭建网页的整体结构，用CSS定位添加样式，如：加入边框、背景等创建网站表现，达到美化网页效果。实质就是使用HTML对网站进行标准化重构，使用CSS将表现与内容相分离。
3 几个教学难点
用DIV+CSS来布局网页是目前主流的网页布局方式，而盒模型、浮动、定位、浏览器兼容等技术是网页布局中的难点，也是网页设计教学中学生认为较难理解掌握的关键技术。
3.1 盒模型
盒模型是DIV+CSS网页布局的核心，任何HTML元素都可以看作是一个盒子，用CSS布局网页主要就是通过CSS定义的不同大小的盒子与盒子嵌套来布局网页。网页由许多个盒子通过不同的排列方式（并列、上下或嵌套）堆积而成，这些盒子之间会产生互相影响。所以既要理解盒子本身的构成，又要理解盒子与盒子之间的关系。其中填充、边框和边界是盒子的3个重要概念。盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外与其他盒子之间的距离，称为边界（margin），默认情况下盒子没有边框，背景色是透明的，所以，在默认情况下我们看不到盒子。
盒子模型主要有4种属性：内容（content）、内边距（padding）、边框（border）和外边距（margin）。
一个盒子的实际宽度或高度是由内容+填充+边框+边界组成的。盒子大小border+padding+width/height，盒子宽度=左border+左padding+width+右padding+右border，盒子高度=上border+上padding+height+下padding+下border如图1所示。
只有深刻理解了盒模型的含义，利用CSS控制内容的大小，以及margin、padding和border的上、右、下、左4个方向的值，才能正确设置好盒子的大小，按设计要求合理布局。
3.2 CSS中的浮动与清除浮动
默认情况下，任何一个盒子都按文档流上而下，自左到右的顺序方式显示。但是盒子按默认的显示往往无法达到设计者所需要的布局效果。浮动就是一种解决方法。浮动就是使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
浮动有3个属性值：none、left和right，其中none为默认值，也就是文档流通常的显示状态。right或left，表示盒子会向其父盒子的右侧或左侧移动，同时，盒子的宽度会恢复到原来默认的大小，即根据盒子里面的内容宽度来确定。
元素浮动后有下列特性：（1）块级元素单独在一排显示。（2）内联元素能够设置宽高了。（3）不设置宽高的时候宽度由内容撑开。（4）浮动元素脱离文档流。
清除浮动也是一个难点。由于浮动的元素高度会塌陷，要清除浮动造成的影响，所以要清除浮动。清除浮动的方法有：（1）加高，存在的问题：扩展性不好。（2）父级也浮动，存在的问题：页面中所有元素都要加浮动，影响布局，不推荐使用。（3）inline-block清浮动方法，存在的问题：margin左右自动失效。（4）使用带clear属性的空元素清除浮动。方法是在浮动元素后使用一个空元素，如
关键词：DIV；CSS；网页设计
网页设计课程是中职学校计算机类专业的一门主干课程，为了满足社会对网页设计人才的技术要求，从教学思想上要更新观念，其教学内容和教学方法也要与时俱进，让学生掌握DIV+CSS这种主流的网页布局技术，加强学生的实践动手能力，力求使学生更能适应当今市场的需求。
1 引言
采用DIV+CSS布局页面已是网页设计的主流，多数大型门户网站都使用该方式进行网页的布局排版。以前的表格布局方式几乎被淘汰，从应用实践上看，DIV+CSS布局方式实现了网页的内容和表现形式相分离，有利于网站的维护，利于SEO优化，加快了网页的加载时间，用户体验较好。
2 DIV+CSS布局概述
DIV+CSS布局技术采用HTML中的DIV标签进行整体布局，之后采用CSS（Cascading Style Sheets）即层叠样式表进行网页的表现设定。用DIV将页面进行分块，搭建网页的整体结构，用CSS定位添加样式，如：加入边框、背景等创建网站表现，达到美化网页效果。实质就是使用HTML对网站进行标准化重构，使用CSS将表现与内容相分离。
3 几个教学难点
用DIV+CSS来布局网页是目前主流的网页布局方式，而盒模型、浮动、定位、浏览器兼容等技术是网页布局中的难点，也是网页设计教学中学生认为较难理解掌握的关键技术。
3.1 盒模型
盒模型是DIV+CSS网页布局的核心，任何HTML元素都可以看作是一个盒子，用CSS布局网页主要就是通过CSS定义的不同大小的盒子与盒子嵌套来布局网页。网页由许多个盒子通过不同的排列方式（并列、上下或嵌套）堆积而成，这些盒子之间会产生互相影响。所以既要理解盒子本身的构成，又要理解盒子与盒子之间的关系。其中填充、边框和边界是盒子的3个重要概念。盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外与其他盒子之间的距离，称为边界（margin），默认情况下盒子没有边框，背景色是透明的，所以，在默认情况下我们看不到盒子。
盒子模型主要有4种属性：内容（content）、内边距（padding）、边框（border）和外边距（margin）。
一个盒子的实际宽度或高度是由内容+填充+边框+边界组成的。盒子大小border+padding+width/height，盒子宽度=左border+左padding+width+右padding+右border，盒子高度=上border+上padding+height+下padding+下border如图1所示。
只有深刻理解了盒模型的含义，利用CSS控制内容的大小，以及margin、padding和border的上、右、下、左4个方向的值，才能正确设置好盒子的大小，按设计要求合理布局。
3.2 CSS中的浮动与清除浮动
默认情况下，任何一个盒子都按文档流上而下，自左到右的顺序方式显示。但是盒子按默认的显示往往无法达到设计者所需要的布局效果。浮动就是一种解决方法。浮动就是使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
浮动有3个属性值：none、left和right，其中none为默认值，也就是文档流通常的显示状态。right或left，表示盒子会向其父盒子的右侧或左侧移动，同时，盒子的宽度会恢复到原来默认的大小，即根据盒子里面的内容宽度来确定。
元素浮动后有下列特性：（1）块级元素单独在一排显示。（2）内联元素能够设置宽高了。（3）不设置宽高的时候宽度由内容撑开。（4）浮动元素脱离文档流。
清除浮动也是一个难点。由于浮动的元素高度会塌陷，要清除浮动造成的影响，所以要清除浮动。清除浮动的方法有：（1）加高，存在的问题：扩展性不好。（2）父级也浮动，存在的问题：页面中所有元素都要加浮动，影响布局，不推荐使用。（3）inline-block清浮动方法，存在的问题：margin左右自动失效。（4）使用带clear属性的空元素清除浮动。方法是在浮动元素后使用一个空元素，如
3.3 CSS中的定位
定位是CSS用来改变盒子位置除浮动以外的另一种方式。定位position不能单独设置，必须还要配合top、right、bottom和left（以下简称TRBL）这4个属性才起作用。在CSS中定位position属性有4个参数值，分别为static、fixed、absolute和relative。
static是默认的文档流方式；fixed是固定定位，与绝对定位的特性基本一致，其差别是始终相对整个文档进行定位；relative是相对定位，指在文档流的排列基础上，盒子的位置相对于盒子的在文档流的原来位置而做的改变，相对定位的盒子依然是在文档流中。相对定位的特点：a.不影响元素本身的特性.b.不使元素脱离文档流；c.如果没有定位偏移量，对元素本身没有任何影响。
absolute是绝对定位，以已定位父元素或body元素的左上角为参照物根据TRBL的值产生位移。绝对定位的特点：a.使元素完全脱离文档流.b.使内联元素支持宽高；c.块屙陛标签内容撑开宽度；d.如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；e.相对定位一般都是配合绝对定位元素使用。
3.4 块状元素与内联元素
块级元素：一般是其他元素的容器，可容纳内联元素和其他块状元素，块级元素特点：①单独占一行显示；②高度、行高以及外边距和内边距都可控制；③它可以容纳内联元素和其他块元素。
内联元素：内联元素只能容纳文本或者其他内联元素。内联元素的特点：①与其他元素都在一行上显示；②高、行高及外边距和内边距不可改变；③宽度就是它的文字或图片的宽度，不可改变；④内联元素只能容纳文本或者其他内联。
块级元素和内联元素的转化可以通过display属性来完成。块级元素和内联元素也是DIV+CSS布局中的重要概念，学生要理解掌握，才能灵活使用。
3.5 兼容问题
浏览器的兼容性问题是每个网页设计者都会遇到的最头疼的问题，也是必须要解决的问题。造成浏览器兼容性问题的根本原因就是各浏览器生产厂家使用了不同的内核，并且它们处理同一件事情的思路不同。
由于浏览器内核有所不同，对网页进行语法解释也存在差异，同时相同网页在不相同的内核浏览器内所显示出来的效果也不同。即使是相同内核的浏览器，如果开发公司不同或者版本不同，其对于相同网页的渲染效果，也会有所不同。这就是浏览器兼容性的问题，要么使得页面变形不美观，要么会导致网站信息错乱，例如有：（1）IE6对hover的不兼容性问题；（2）不同浏览器页边距不一致的问题；（3）父元素与子元素之间的margin-top问题；l（4）水平居中的问题。
所以一般网站的设计者在开始都要写一个重置样式的css文件reset.css，去掉各浏览器默认状态下的不同呈现样式，然后再根据布局的需要，设置所要的样式。
4 结语
网页设计课程对中职学生应该采用循序渐进的教学方法，学生在熟悉常用的HTML标签之后，对CSS的盒模型、浮动、定位、浏览器兼容等教学难点分散讲解，实例设置应该从简单到复杂、从布局小块到整体布局，课后实战练习应结合实际，提高学生的学习兴趣，力争让学生制作自己的博客或网站，让学生自己总结制作技巧，自己领悟这些难点的含义，才能逐步提升网页布局水平。
定位是CSS用来改变盒子位置除浮动以外的另一种方式。定位position不能单独设置，必须还要配合top、right、bottom和left（以下简称TRBL）这4个属性才起作用。在CSS中定位position属性有4个参数值，分别为static、fixed、absolute和relative。
static是默认的文档流方式；fixed是固定定位，与绝对定位的特性基本一致，其差别是始终相对整个文档进行定位；relative是相对定位，指在文档流的排列基础上，盒子的位置相对于盒子的在文档流的原来位置而做的改变，相对定位的盒子依然是在文档流中。相对定位的特点：a.不影响元素本身的特性.b.不使元素脱离文档流；c.如果没有定位偏移量，对元素本身没有任何影响。
absolute是绝对定位，以已定位父元素或body元素的左上角为参照物根据TRBL的值产生位移。绝对定位的特点：a.使元素完全脱离文档流.b.使内联元素支持宽高；c.块屙陛标签内容撑开宽度；d.如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档发生偏移；e.相对定位一般都是配合绝对定位元素使用。
3.4 块状元素与内联元素
块级元素：一般是其他元素的容器，可容纳内联元素和其他块状元素，块级元素特点：①单独占一行显示；②高度、行高以及外边距和内边距都可控制；③它可以容纳内联元素和其他块元素。
内联元素：内联元素只能容纳文本或者其他内联元素。内联元素的特点：①与其他元素都在一行上显示；②高、行高及外边距和内边距不可改变；③宽度就是它的文字或图片的宽度，不可改变；④内联元素只能容纳文本或者其他内联。
块级元素和内联元素的转化可以通过display属性来完成。块级元素和内联元素也是DIV+CSS布局中的重要概念，学生要理解掌握，才能灵活使用。
3.5 兼容问题
浏览器的兼容性问题是每个网页设计者都会遇到的最头疼的问题，也是必须要解决的问题。造成浏览器兼容性问题的根本原因就是各浏览器生产厂家使用了不同的内核，并且它们处理同一件事情的思路不同。
由于浏览器内核有所不同，对网页进行语法解释也存在差异，同时相同网页在不相同的内核浏览器内所显示出来的效果也不同。即使是相同内核的浏览器，如果开发公司不同或者版本不同，其对于相同网页的渲染效果，也会有所不同。这就是浏览器兼容性的问题，要么使得页面变形不美观，要么会导致网站信息错乱，例如有：（1）IE6对hover的不兼容性问题；（2）不同浏览器页边距不一致的问题；（3）父元素与子元素之间的margin-top问题；l（4）水平居中的问题。
所以一般网站的设计者在开始都要写一个重置样式的css文件reset.css，去掉各浏览器默认状态下的不同呈现样式，然后再根据布局的需要，设置所要的样式。
4 结语
网页设计课程对中职学生应该采用循序渐进的教学方法，学生在熟悉常用的HTML标签之后，对CSS的盒模型、浮动、定位、浏览器兼容等教学难点分散讲解，实例设置应该从简单到复杂、从布局小块到整体布局，课后实战练习应结合实际，提高学生的学习兴趣，力争让学生制作自己的博客或网站，让学生自己总结制作技巧，自己领悟这些难点的含义，才能逐步提升网页布局水平。
其他文献
随着教学方法在教育界的涌现，越来越多的教学方式应用到教学实践中，有利于科研工作的进行。项目教学法应用到计算机网络课程的教学中，将计算机网络的理论知识与实践结合在一起，弥
在对亚像元定位空间引力模型改进的基础上,提出了一种基于二次引力计算的亚像元定位模型,并在不同退化尺度下开展基于空间引力模型、像元交换模型和二次引力计算模型的亚像元定位精度比较研究。其中,数据源为人工影像和国产高分一号8 m空间分辨率遥感影像,研究对象为中国北方黄淮海区典型区域夏收作物。结果表明,在不同退化尺度条件下,所提二次引力计算模型(DSGM)可有效进行亚像元定位,且定位精度均优于空间引力模型
摘要：随着科学技术的不断发展，无线电通信也被社会各个行业越来越广泛的应用，并成为人们生活中不可或缺的重要信息工具，而人们对无线电通信要求的不断提高，也使得其频率不断增加。Ka频段便是_种频率较高的卫星通信系统。文章以Ka频段卫星通信系统的特点为研究基础，对降雨环境下雨衰以及信道编码对系统的影响进行研究，从而实现对其相关性能的分析。 关键词：Ka频段；卫星通信；降雨衰减；影响 随着人们需求的不断
针对无人机在雨雾天气下的农田航拍图像退化问题,考虑无人机自身特性,提出了一种基于DCP和OCE的无人机航拍图像混合去雾算法。首先判断原始图像天空区域的存在,利用Canny边缘
摘要：文章针对现代的电力系统，Zig Bee技术有着越来越为广泛的应用，作为针对现代的无线通讯技术，在现代配电通信组网之中，以Zig Bee技术为根基，进行一种有效方案的探讨，本文对此进行有效探讨，希望可以促进有关行业的自身发展。关键词：Zig Bee技术；配电通信组网；应用 0 引言 FPI是现代主流配电系统中的故障指示器，但是FPI只能确定是否存在故障，不能进行故障的准确定位，所以在故障发
摘要：文章通过分析高等职业院校软件专业人才培养面临的瓶颈（高职院校的师资力量薄弱、学生基础差、专业定位和课程体系不明确），以及课程项目化的优缺点，提出了软件专业项目化是高职教育的必然趋势，分析了软件专业项目化的实施准备。 关键字：软件专业；专业项目化；教学体系 1高职软件专业人才培养面临的瓶颈 企业招聘越来越倾向于招聘拿来就用的实用型人才，要求新职员进入公司很快就要融入公司并为公司带来效益。
摘要：文章通过对锁屏原理的深入分析和研究，利用c#中hook（钩子）对于windows消息的处理机制，结合中小学生使用计算机学习时对于特定功能的需求，在Microsoft Visual Studio 2008编程环境下较完整地实现了具有限制操作功能的锁屏软件。 关键词：计算机管理；Wi ndows API 1引言 在当今信息社会，计算机在人们的学习、生活、工作中扮演着越来越重要的角色，但是计
文章选取了单位煤炭消费量总产值、单位汽油消费量总产值、单位柴油消费量总产值、单位电力消费量总产值4个指标进行了系统聚类分析;同时构建工业能耗和新疆GDP、工业废气排
数据库是保存资料的主要方法,数据作为计算机应用的核心,承载着计算机应用的主要功能。而数据库一旦被不法分子侵占,就会出现数据丢失、数据泄露等重大问题,严重的危害了用户
对下吸式固定床气化炉采用两层配气口实现气化剂进给量的主动控制,利用Fluent软件对炉内气压分布和速度进行模拟分析,结果表明气化炉主要反应区气压场呈现＂梯级分布、层界分明