用DIVCSS技术的WEB页面布局实践.doc

资源描述

西华大学数计学院专业实习报告数学与计算机学院专业实习报告课程代码: 8422931 题目: 用DIV+CSS技术的WEB页面布局实践年级/专业/班: 学生姓名: 学　　号: 332008090101021 开始时间: 2011 年 6 月 6 日完成时间: 2011 年 6 月 26 日实习地点: 6A410 实习成绩：专业综合技能（30）报告书质量（50）综合表现（出勤、纪律）（20）总分（100）指导教师签名：年月日 I 西华大学数学与计算机学院专业实习报告 1 技术路线 1.1 任务与分析本实习主要的目的是了解WEB服务器的安装配置方法，熟悉用Dreamwearver进行网页设计的一般方法和过程，了解用DIV+CSS进行WEB页面布局设计的技术及方法，并能初步进行一般的网页布局设计。 1.2 相关技术本课题中涉及到的相关技术有html、Dreamwearver和DIV+CSS技术。 HTML：超文本标记语言（英文：HyperText Markup Language，HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。HTML被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。 Dreamweaver：Dreamweaver是由著名软件公司“Adobe”开发的一款所见即所得的网页编辑器，和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。在最新版“CS4”中做了一次脱胎换骨的改进，从中看到了更多的设计元素。软件因其极佳的制作效率、网站管理和无可比拟的控制能力使它在此类型的软件中独领风骚。 DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格（table）定位方式,真正地达到了w3c内容与表现相分离。HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。XHTML语言是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。 2 技术路线主要要求与主要功能（或需求分析） 2.1要求将材料-1.html、材料-2.html、材料-3.html用DIV+CSS技术对应排版成材料-1样式.jpg、材料-2样式.jpg、材料-3样式.jpg所示的页面布局形式。 2.2实现 2.2.1材料-1.html排版的CSS代码 <style type="text/css">  </style></head> 2.2.2材料-1.html排版后的页面截图 2.2.3材料-2.html排版的CSS代码 <style type="text/css"> .div1{ margin:0 auto; width:830px; height:140px; border:1px solid #CCCCCC; } .div2{ border:1px #FFFFFF solid; background-color:#FBDA82; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#F7FABE,endColorStr=#FFCC33); padding-bottom:10px; height:25px; font-family: "宋体"; font-size:12px; } .div2_1{ border-left-style:solid; border-left-width:2px; border-left-color: #FEF8E7; float:right; margin-top:10px; } .div3{ border-top-color:#FBDA82; border-top-style:solid; border-top-width:1px; padding-bottom:5px; padding-left:10px; padding-right:10px;} .div3_1{ float:left; } .div3_2{ padding:2px; margin-top:10px; margin-left:10px; float:left; font-size:12px; border-right-color:#CCCCCC; border-right-style:solid; border-right-width:1px;} .div3_2_1{ margin-top:7px; margin-bottom:12px; } </style> 2.2.4材料-2.html排版后的页面截图 2.2.5材料-3.html排版的CSS代码 <style type="text/css"> .div{ margin:0 auto; width:355px; border:1px #FF0066 solid; float:left; } .div1{ border-bottom:1px #FF0066 solid;} .div2{ margin-left:10px; font-size:13px; line-height:2.5em; } .div2 li{ list-style-type:none; } .div3{ line-height:1.5em; margin-top:10px; font-size:13px;} .div3 li{ margin:0;padding:0;text-indent:0;} </style> 2.2.6材料-3.html排版后的页面截图 3 设计环境 Iis5.0/6.0 DreamWearver IE浏览器 4 DIV+CSS技术和传统表格技术的优缺点比较 CSS网页布局的意义体现在如下方面：　　一、使页面载入得更快　　由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。　　二、降低流量费用　　页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。　　三、修改设计时更有效率　　由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。　　四、保持视觉的一致性　　DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用 DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。　　五、更好地被搜索引擎收录　　由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。　　六、对浏览者和浏览器更具亲和力　　我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV+CSS在这方面更具优势。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。　　说了这么多CSS网页布局的意义与优点，同时也不能轻视CSS网页布局的副作用：　　一、DIV+CSS尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了。　　二、CSS网站制作的设计元素通常放在1个外部文件中，或几个文件，有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。　　三、虽然说DIV+CSS解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常，比如火狐浏览器，在IE中显示正常的页面，到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题，但是可以说在目前来看，DIV+CSS还没有实现所有浏览器的统一兼容。　　四、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。DIV+CSS网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。　　综合以上讨论的DIV+CSS优势和略势，我认为不可盲目跟风，如何更有效、更合理的运用WEB2.0设计标准，这需要很长时间的学习和锻炼。而如何将DIV+CSS运用的更好，我觉得这需要通过不断的实践和体检，积累丰富的设计经验，才能很好的掌握这门技术。5 总结 DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。SEO是指搜索引擎优化，主要就是通过对网站的结构、标签、排版,关键字等各方面的优化，使搜索引擎更容易抓取网站的内容，并且让网站的各个网页在等搜索引擎中获得较高的评分，从而获得较好的排名。DIV+CSS网页布局对SEO有很重要的影响。具体来看到底有什么好处呢? DIV+CSS的网页布局对SEO的好处一、不存在表格的嵌套问题很多“网站如何推广”的文章中称，搜索引擎一般不抓取三层以上的表格嵌套，这一点一直没有得到搜索引擎相关的官方证实。我的几项实验结果没有完全出来，但根据目前掌握的情况来看，Spider爬行Table布局的页面，遇到多层表格嵌套时，会跳过嵌套的内容或直接放弃整个页面。使用Table布局，为了达到一定的视觉效果，不得不套用多个表格。如果嵌套的表格中是核心内容，蜘蛛(Spider)爬行时跳过了这一段没有抓取到页面的核心，这个页面就成了相似页面。网站中过多的相似页面会影响排名及域名信任度。 DIV+CSS的网页布局对SEO的好处二、精简的代码使用DIVCSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。观看更多的HTML教程内容。代码精简所带来的直接好处有两点：一是提高蜘蛛(Spider)爬行效率，能在最短的时间内爬完整个页面，这样对收录质量有一定好处;二是由于能高效的爬行，就会受到蜘蛛(Spider)欢迎，这样对收录数量有很大好处。附录资料：从 XML 生成可与 Ajax 共同使用的 JSON 时下，非常流行使用 JavaScript 代码为数据驱动的 Web 应用程序添加互动性。若能将数据编码成 JavaScript Object Notation（JSON）的格式，您就可以更轻松地通过 JavaScript 语言使用它。通过本文，发掘使用 XSLT V2 从 XML 数据生成 JSON 的几种不同方法。几年前，许多开发人员很看好 XML、XSLT、Extensible HTML （XHTML）和其他一些基于标记的语言。现在，Asynchronous JavaScript and XML（AJAX）成了新的热点，人们又将目光转向了使用 JavaScript 代码的数据驱动的富 Internet 应用程序。但是开发人员是否已经消除了 XML 和这一新技术之间的鸿沟呢？当然，您可以在 Web 客户机中使用 XML 解析器来读取数据，但这种做法会带来两个问题。第一，出于安全方面的原因，XML 数据只能从与此页面相同的那个域中读取。这虽然不是什么大的限制因素，但它的确会引起部署方面的问题，还会阻碍 DHTML 小部件的创建。第二，读取和解析 XML 会非常慢。另一种做法是让服务器执行 XML 的解析工作，方法是设置服务器，使之向浏览器发送以 JavaScript 代码或时下流行的 JavaScript Object Notation（JSON）编码的数据。本文将展示如下三种使用 XSLT V2 语言和 Saxon XSLT V2 处理器从 XML 数据生成 JSON 的技巧： l 简单编码 l 通过函数调用加载数据 l 编码对象 JSON 简介要学习如何将数据编码成 JSON（它只是 JavaScript 的一个子集），最好的方法是从数据开始。清单 1 显示了书籍列表的一个示例 XML 数据集。清单 1. 基本的图形化图书馆 <?xml version="1.0" encoding="UTF-8"?> <books> <book id="1"> <title>Code Generation in Action</title> <author><first>Jack</first><last>Herrington</last></author> <publisher>Manning</publisher> </book> <book id="2"> <title>PHP Hacks</title> <author><first>Jack</first><last>Herrington</last></author> <publisher>O'Reilly</publisher> </book> <book id="3"> <title>Podcasting Hacks</title> <author><first>Jack</first><last>Herrington</last></author> <publisher>O'Reilly</publisher> </book> </books> 这个数据集很简单，只包含三本书，每本书都具有惟一的 ID、书名、作者姓名及出版商的名字。（没错，我只选择了我自己的书作为数据集，但能怨我吗？这些书实在是不可多得的节日和生日礼物。）清单 2 显示了这些数据在 JSON 中的效果。清单 2. JSON 中的示例数据集 [ { id: 1, title: 'Code Generation in Action', first: 'Jack', last: 'Herrington', publisher: 'Manning' }, ... ] 方括号 ([]) 表明这是一个数组。大括号 ({}) 则表明这是一个散列表，该散列表由一组名称和值对组成。在本例中，我创建了一个散列表的数组 —— 用来存储这类结构式数据的一种常见方法。另外一点值得注意的是字符串是通过单引号或双引号被编码的。所以，如果我想用单引号编码 O'Reilly，我就必须使用反斜杠对它进行转义：'O\'Reilly'。这让我编写的这个 XSLT 样式表更为有趣了一些。我并未在本例中放上任何日期，但您也可以通过如下两种方法来编码日期。第一种方法是将日期作为字符串，该字符串必须在后面被解析。第二种方法是将日期作为一个对象，比如： publishdate: new Date( 2006, 6, 16, 17, 45, 0 ) 这段代码将 publishdate 的值设置为6/16/2006 5:45:00 p.m.。简单编码接下来我将陆续介绍 JSON 编码的几种技巧。第一种也是其中最简单的一种，此样式表如清单 3 所示。清单 3. simple.xsl 样式表 <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0" xmlns:js=""> <xsl:output method="text" /> <xsl:function name="js:escape"> <xsl:param name="text" /> <xsl:value-of select='replace( $text, "'", "\\'" )' /> </xsl:function> <xsl:template match="/"> var g_books = [ <xsl:for-each select="books/book"> <xsl:if test="position() > 1">,</xsl:if> { id: <xsl:value-of select="@id" />, name: '<xsl:value-of select="js:escape(title)" />', first: '<xsl:value-of select="js:escape(author/first)" />', last: '<xsl:value-of select="js:escape(author/last)" />', publisher: '<xsl:value-of select="js:escape( publisher )" />' }</xsl:for-each> ]; </xsl:template> </xsl:stylesheet> 要理解此样式表，不妨先来看一下清单 4 所示的输出。清单 4. simple.xsl 的输出 var g_books = [ { id: 1, name: 'Code Generation in Action', first: 'Jack', last: 'Herrington', publisher: 'Manning' }, { id: 2, name: 'PHP Hacks', first: 'Jack', last: 'Herrington', publisher: 'O\'Reilly' }, { id: 3, name: 'Podcasting Hacks', first: 'Jack', last: 'Herrington', publisher: 'O\'Reilly' } ]; 这里，我将名为 g_books 的变量设置为一个包含三个散列表的数组，每个散列表包含关于该书的信息。再回过头来看看清单 3，您会发现第一个模板匹配 "/" 路径，它也是首先应用到输入数据集的模板，该模板使用 for-each 循环来遍历每本书。之后，它使用 <value-of> 标记来将文本从该数据输出到 JavaScript 输出代码。对于字符串，我使用名为 js:escape() 的定制函数，它在模板之前定义。该函数使用一个正则表达式将一个单引号标记更改为带有反斜杠的单引号标记。最后一个重要的元素是 <xsl:output> 标记，它告知处理器要输出的是文本而不是 XML。要检验此过程是否可以正常工作，我加入了一个 simple .html 文件，该文件引用我在 simple.js 保存的 XSL 样式表的输出。这个 HTML 文件如清单 5 所示。清单 5. simple.html 文件 <html> <head> <title>Simple JS loader</title> <script src="simple.js"></script> </head> <body> <script> document.write( "Found "+g_books.length+" books" ); </script> </body> </html> .html 文件使用 <script> 标记简单地加载已编码了的 JavaScript 代码。之后，第二个 <script> 标记将数组的长度写出到浏览器页面，如图 1 所示。图 1. simple.html 的输出好了！数据文件包含三本书，相应的 JavaScript 文件也包含三本书。它真的可以工作！通过函数加载上述第一个示例很简单，而且在大多数情况下可以发挥其作用，但它存在一些问题。第一个问题是对于数据何时被加载没有任何提示。如果数据是像页面那样被静态加载的，这不成问题。但是如果页面动态创建了一个 <script> 标记来按需加载数据，那么就很有必要知道 <script> 标记是何时完成的。实现此功能的最好的方法是让编码了的数据调用一个 JavaScript 函数，而不是只设置数据。这个概念很重要，所以我将花一些时间来介绍一下为什么您必须要通过动态生成的 <script> 标记来加载数据。页面加载后，从服务器获得数据是 Web 2.0 的核心功能。一种方法是使用 AJAX 机制通过到服务器的调用来加载 XML。然而，出于安全性的原因，AJAX 机制只限于从单一域获取数据。这在大多数情况下都没有问题，但有时，您可能需要 JavaScript 代码运行在他人的页面上（例如，Google Maps）。在这种情况下从服务器获得数据的惟一方法是通过动态加载 <script> 标记。获悉 <script> 标记何时加载的最好的方法是让 <script> 标记返回的脚本调用函数而不是简单地加载数据。清单 6 显示了在函数调用中编码的数据。清单 6. Function1.js AddBooks( [ { id: 1, name: 'Code Generation in Action', first: 'Jack', last: 'Herrington', publisher: 'Manning' }, { id: 2, name: 'PHP Hacks', first: 'Jack', last: 'Herrington', publisher: 'O\'Reilly' }, { id: 3, name: 'Podcasting Hacks', first: 'Jack', last: 'Herrington', publisher: 'O\'Reilly' } ] ); 清单 7 给出了相应的 .html 文件。清单 7. Function1.html <html> <head> <title>Function 1 JS loader</title> <script> var g_books = []; function AddBooks( books ) { g_books = books; } </script> <script src="function1.js"></script> <script src="drawbooks.js"></script> </head> <body> <script>drawbooks( g_books );</script> </body> </html> 稍后将详细介绍 drawbooks 函数。这里重要的是了解一下页面如何定义 AddBooks 函数，该函数随后会由 function1.js 文件中的脚本调用。该 AddBooks 函数负责处理数据。而且被调用的 AddBooks 函数会向页面指示 <script> 标记被正确加载，并已加载完成。要创建 function1.js 文件，我只对样式表稍微做了一点修改，如清单 8 所示。清单 8. function1.xsl 样式表 <xsl:template match="/"> AddBooks( [ <xsl:for-each select="books/book"> <xsl:if test="position() > 1">,</xsl:if> { id: <xsl:value-of select="@id" />, name: '<xsl:value-of select="js:escape(title)" />', first: '<xsl:value-of select="js:escape(author/first)" />', last: '<xsl:value-of select="js:escape(author/last)" />', publisher: '<xsl:value-of select="js:escape( publisher )" />' }</xsl:for-each> ] ); </xsl:template> 这里，我调用了一个函数，而不是简单地设置一个变量。这就是我所做的惟一更改。回到页面，我使用了 drawbooks 函数来构建书的表格，这样我就能够确认数据被正确编码和正确显示。此函数是在 drawbooks.js 内定义的，如清单 9 所示。清单 9. Drawbooks.js function drawbooks( books ) { var elTable = document.createElement( 'table' ); for( var b in books ) { var elTR = elTable.insertRow( -1 ); var elTD1 = elTR.insertCell( -1 ); elTD1.appendChild( document.createTextNode( books[b].id ) ); var elTD2 = elTR.insertCell( -1 ); elTD2.appendChild( document.createTextNode( books[b].name ) ); var elTD3 = elTR.insertCell( -1 ); elTD3.appendChild( document.createTextNode( books[b].first ) ); var elTD4 = elTR.insertCell( -1 ); elTD4.appendChild( document.createTextNode( books[b].last ) ); var elTD5 = elTR.insertCell( -1 ); elTD5.appendChild( document.createTextNode( books[b].publisher ) ); } document.body.appendChild( elTable ); } 这个简单函数创建了一个表格节点，然后循环访问书的列表并为每本书创建一行，为每个数据元素分配一个单元格。此页面上的代码的结果如图 2 所示。图 2. function1.html 的结果现在我就可以查看一下此页面的输出并确认来自原始 .xml 文件的一切均已被正确转换成 JavaScript 代码，且数据被发送到 AddData 函数并被正确添加到页面。细化函数调用技术我很喜欢函数调用这一技术，但我并不赞同将所有图书数据都放入一个块中。另一种方式是为每条记录采用一个调用，如清单 10 所示。清单 10. Function2.js AddBook( { id: 1, name: 'Code Generation in Action', first: 'Jack', last: 'Herrington', publisher: 'Manning' } ); AddBook( { id: 2, name: 'PHP Hacks', first: 'Jack', last: 'Herrington', publisher: 'O\'Reilly' } ); ... 对 .html 页面只需做少许修改，如清单 11 所示。清单 11. Function2.html ... <script> var g_books = []; function AddBook( book ) { g_books.push( book ); } </script> ... 这里更改了 XSLT，以使函数调用驻留在 for-each 循环体内。清单 12 显示了更新后的样式表。清单 12. function2.xsl ... <xsl:template match="/"> <xsl:for-each select="books/book"> AddBook( { id: <xsl:value-of select="@id" />, name: '<xsl:value-of select="js:escape(title)" />', first: '<xsl:value-of select="js:escape(author/first)" />', last: '<xsl:value-of select="js:escape(author/last)" />', publisher: '<xsl:value-of select="js:escape( publisher )" />' } );</xsl:for-each> </xsl:template> ... 对这个给定示例来说，这种更改看起来有些随意。但如果原始的 XML 数据集有多种数据类型，要为每种类型分配一个单独的函数调用会使 XSL 和页面上的 JavaScript 代码更为简单、更易于维护。编码对象对小的页面来讲，使用 JavaScript 函数没有问题。但对于大型项目，就需要使用 JavaScript 语言的一些面向对象特性。是的，JavaScript 语言可以处理对象而且可以处理得很好。清单 13 显示了如何创建带有数据的对象。清单 13. Object1.js g_books.push( new Book( { id: 1, name: 'Code Generation in Action', first: 'Jack', last: 'Herrington', publisher: 'Manning' } ) ); g_books.push( new Book( { id: 2, name: 'PHP Hacks', first: 'Jack', last: 'Herrington', publisher: 'O\'Reilly' } ) ); 在本例中，我只简单地向名为 g_books 的数组添加了 Book 对象。JavaScript 的对象创建与 Java™、C# 或 C++ 编程语言的对象创建十分相似。都是一个 new 操作符后跟一个类名。参数放到随后的括号内。在本例中，我传入了一个带值的单一散列表，并将其分割成单独的一些参数。创建此对象的代码如清单 14 所示。清单 14. Object1.xsl <xsl:template match="/"> <xsl:for-each select="books/book"> g_books.push( new Book( { id: <xsl:value-of select="@id" />, name: '<xsl:value-of select="js:escape(title)" />', first: '<xsl:value-of select="js:escape(author/first)" />', last: '<xsl:value-of select="js:escape(author/last)" />', publisher: '<xsl:value-of select="js:escape( publisher )" />' } ) );<

展开阅读全文