论文部分内容阅读
【摘要】 网页布局对于网页的设计制作是非常重要的，而选用好的方法来布局则成为必可少的一步。本文将结合我在该课中的教学实践与通过进行对比不同的布局方法，解析盒子模式，制作实例这样的步骤来介绍如何提高学生对这部分知识的学习能力。
【关键词】 网页制作；网页布局；CSS
对于使用DIV+CSS网页布局进行网页设计,相信大家都不会莫生,XHTML技术是近年来新兴的一个网页设计方法。在我专业的课程体系中，在学习这部分课前已经对DW软件的使用很熟悉了，对传统的网页布局方式表格的使用也都可以熟练使用了，那为了让学生能接受这样一种方式，在新课授课前首先要分析DIV+CSS相对于以前学过的布局方式它有哪些优处，甚至于这种布局在网站排名中有什么优处，对于职中的学生，毕业后面临就业，那所授课程要尽最大的可能贴近实际工作中的要求。
一、进行对比,突出其优点
在授课前，我做了大量的工作，利用互联网与专业书，提炼了一些DIV+CSS的优点帮助学生来理解。
1、代码精简
如果使用DIV+CSS布局，网页的页面代码精简，在介绍这个部分时，如果只强调代码精减是没什么说服力的，我在讲这的时候准备了一个页面的两种布局方式，打开它们的代码进行对比，这样可以直观的看到DIV+CSS布局代码比表格的代码要简洁，清淅的多。
2、相对表格的嵌套问题
在一些文章是称，搜索引擎一般不喜欢抓取三层以上的表格嵌套，这一点一直没有得到搜索引擎官方的证实。我的也不能完全肯定是不是，就目前掌握的情况来看，在解析Table布局的页面，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。使用Table布局，为了达到一定的视觉效果，不得不套用多个表格。如果嵌套的表格中是核心内容，解析时跳过了这一段没有抓取到页面的核心，这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。
３、网页的速度
使用了DIV+CSS布局的网页较Table布局减少了页面代码，浏览加载速度得到很大的提高，这在解析时是非常有利的。过多的页面代码可能造成下载超时，就会认为这个页面无法访问，影响访问量。这是也对于用户个人体验的一种表现。
4、搜索排名的影响
如果我们在设计时运用于基于XTHML标准的DIV+CSS布局，在设计完成要尽可能的完善到能通过W3C验证。事实证明使用XTHML架构的网站排名状况一般都不错。这一点或许会有争议，但至少这样不会有什么坏处。
二、解析盒子模式，做好铺垫
1、理解CSS盒子模型
什么是CSS的盒子模式呢？为什么叫它是盒子？在网页设计中常听到一些属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。
在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同，CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏。与现实联系起来后对这种模式就更为容易接受了，方便了我们后期的教学。
2、转变思路
传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件做出网站的小样，最后再切成小图，通过设计HTML生成页面，改用CSS排版后，我们要转变这个思路，此时我们主要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调用你想要的网页风格，况且CSS排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。
3、实现结构与表现分离
这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便。给出一个实例，对比把样式写进去和分离开的区别，进一步说明结构与表现分离的优点，在这里建议学生单独建立css文件与页面进行链接，这样的方式会使代码部分更为清淅。
三、实例教学项目开发相结合
1、通过实例，讲解知识点
学生在学习过程中，因各种原因，知识接受能力会有所不同。不同年龄段的学生，甚至同一年龄段的学生，他们接受知识的能力往往会有很大的差异。因此，在进行实例教学时，要注意学生特点、知识接受能力的差异，要从学生实际出发，要照顾到大多数学生。
学生们可以通过努力不仅解决了当前的任务，更为后续任务的探究创造了条件，同时学生因此获得探索的成就感，进一步激发起自主探究的积极性。
2、结合项目，巩固所学
教学实践表明，在网页制作课程中采用项目开发与实例教学相结合的教学方式对提高教学质量具有明显的优势。首先，弥补了以往“实例教学”法的不足之处，极大地开发了学生的操作能力、创新能力，将所学的各个分散的知识综合起来真正地实现学以致用。其次，教学目标为实际的项目，更具体、生动，充分地发挥学生的能动作用，调动学生的学习热情，培养了学生的自主学习能力。最后，学生对遇到的难题通过自主查找书籍、网络搜索等方法来解决，使学生学习的途径更为广阔，学生的自我学习能力进一步提高。
以上就网页制作中DIV+CSS的教学中的一些教学方法和教学理论进行了一些讨论，在实践过程中取得了比较好的效果。当然，还有很多需要完善的地方，也有一些不足之处，将在以后的教学过程中继续进行研究和探讨。
【关键词】 网页制作；网页布局；CSS
对于使用DIV+CSS网页布局进行网页设计,相信大家都不会莫生,XHTML技术是近年来新兴的一个网页设计方法。在我专业的课程体系中，在学习这部分课前已经对DW软件的使用很熟悉了，对传统的网页布局方式表格的使用也都可以熟练使用了，那为了让学生能接受这样一种方式，在新课授课前首先要分析DIV+CSS相对于以前学过的布局方式它有哪些优处，甚至于这种布局在网站排名中有什么优处，对于职中的学生，毕业后面临就业，那所授课程要尽最大的可能贴近实际工作中的要求。
一、进行对比,突出其优点
在授课前，我做了大量的工作，利用互联网与专业书，提炼了一些DIV+CSS的优点帮助学生来理解。
1、代码精简
如果使用DIV+CSS布局，网页的页面代码精简，在介绍这个部分时，如果只强调代码精减是没什么说服力的，我在讲这的时候准备了一个页面的两种布局方式，打开它们的代码进行对比，这样可以直观的看到DIV+CSS布局代码比表格的代码要简洁，清淅的多。
2、相对表格的嵌套问题
在一些文章是称，搜索引擎一般不喜欢抓取三层以上的表格嵌套，这一点一直没有得到搜索引擎官方的证实。我的也不能完全肯定是不是，就目前掌握的情况来看，在解析Table布局的页面，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。使用Table布局，为了达到一定的视觉效果，不得不套用多个表格。如果嵌套的表格中是核心内容，解析时跳过了这一段没有抓取到页面的核心，这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。
３、网页的速度
使用了DIV+CSS布局的网页较Table布局减少了页面代码，浏览加载速度得到很大的提高，这在解析时是非常有利的。过多的页面代码可能造成下载超时，就会认为这个页面无法访问，影响访问量。这是也对于用户个人体验的一种表现。
4、搜索排名的影响
如果我们在设计时运用于基于XTHML标准的DIV+CSS布局，在设计完成要尽可能的完善到能通过W3C验证。事实证明使用XTHML架构的网站排名状况一般都不错。这一点或许会有争议，但至少这样不会有什么坏处。
二、解析盒子模式，做好铺垫
1、理解CSS盒子模型
什么是CSS的盒子模式呢？为什么叫它是盒子？在网页设计中常听到一些属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。
在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同，CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏。与现实联系起来后对这种模式就更为容易接受了，方便了我们后期的教学。
2、转变思路
传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件做出网站的小样，最后再切成小图，通过设计HTML生成页面，改用CSS排版后，我们要转变这个思路，此时我们主要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调用你想要的网页风格，况且CSS排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。
3、实现结构与表现分离
这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便。给出一个实例，对比把样式写进去和分离开的区别，进一步说明结构与表现分离的优点，在这里建议学生单独建立css文件与页面进行链接，这样的方式会使代码部分更为清淅。
三、实例教学项目开发相结合
1、通过实例，讲解知识点
学生在学习过程中，因各种原因，知识接受能力会有所不同。不同年龄段的学生，甚至同一年龄段的学生，他们接受知识的能力往往会有很大的差异。因此，在进行实例教学时，要注意学生特点、知识接受能力的差异，要从学生实际出发，要照顾到大多数学生。
学生们可以通过努力不仅解决了当前的任务，更为后续任务的探究创造了条件，同时学生因此获得探索的成就感，进一步激发起自主探究的积极性。
2、结合项目，巩固所学
教学实践表明，在网页制作课程中采用项目开发与实例教学相结合的教学方式对提高教学质量具有明显的优势。首先，弥补了以往“实例教学”法的不足之处，极大地开发了学生的操作能力、创新能力，将所学的各个分散的知识综合起来真正地实现学以致用。其次，教学目标为实际的项目，更具体、生动，充分地发挥学生的能动作用，调动学生的学习热情，培养了学生的自主学习能力。最后，学生对遇到的难题通过自主查找书籍、网络搜索等方法来解决，使学生学习的途径更为广阔，学生的自我学习能力进一步提高。
以上就网页制作中DIV+CSS的教学中的一些教学方法和教学理论进行了一些讨论，在实践过程中取得了比较好的效果。当然，还有很多需要完善的地方，也有一些不足之处，将在以后的教学过程中继续进行研究和探讨。