DIV_CSS课件.pptVIP

长大在线2011年暑期培 训之div+css 第一讲 课程背景(为什么要学习div+css) a.可用性使用富含语义的标记能够构建实用的网站。我们经常能看到没有重点、导航混乱、不知所云的网站。使用Web标准可以解决这些问题，保证用户在使用您的网站时，速度很快而且毫不费力。 (教务处的网站是典型的可用性不够的例子) b. 可访问性有效的 XHTML / CSS代码将网站内容表现从结构中分离。此外，使用这种方式还可获得较少维护、对网站更多的控制、降低成本等商业利益。更重要的是，并不是每个人都使用通过的浏览器访问网站。具有可访问的内容，意味着您的网站将有更为广泛的用户。 c.兼容性我们现在所拥有比以前更为广泛的上网平台、设备和浏览器，越来越多的人使用各种各样的设备浏览网页，使用Web标准是保证网站在各种设备上的一致性的唯一途径。 d.大幅度提高性能清除网页中冗余的标记，可以减小您网站文件的大小，使网速较慢的用户也可以获得更好的浏览体验。 e.更高的搜索引擎排名不实用的、标记混乱的网站不仅对用户不友好，对搜索引擎爬行程序同样如此。如果您的网页标记正确而且加载迅速，搜索引擎将回报您更好的网页排名。 f.降低商业成本使用Web标准的网站，是一个更小、更有效率的网站。它拥有更小的网页尺寸，需要更少的网络带宽。这样可以降低您使用虚拟主机的费用。使用Web标准，如果您的网站日后需要改版、更换外观，这一切都可以轻松实现。 2.div+css (1).div+css是一个术语,是一种网页布局方法的简称, 网页布局就是将一个网页通过html或xhtml标记语言按照一定的布局形式展现出来,常见的有table型布局(传统)和div+css型布局(现代) (2).div+css与html的关系 div+css都是属于html范围的,但是由于他们十分重要,故设计者将之提出后专门进行讨论 (3).既然属于html范围,为何专门讨论它? web标准要求三层分离, 而div+css布局方式倡导页面表示层与结构层相分离, 我们作为一名网页设计者,要遵循web标准,尽量做到三层分离,所以才专门讨论div+css (4.)div+css布局的优点 1、缩减代码，提高页面浏览速度。采用CSS布局，共用css文件，大大缩减页面代码，提高页面浏览速度,降低带宽需求,压缩成本。 2、结构清晰，用只包含结构化内容的HTML代替嵌套的标签，主次分明，对搜索引擎更加友好。配合优秀的内容和一些SEO处理可以获得更好的网站排名。 3、使用CSS可以结构化HTML，提高易用性和可访问性。例如：p标签只用来控制段落，table标签只用来表现格式化的数据等等。设计兼容性良好的页面可以跨平台访问(电脑,手机,各种支持html标准的终端) 4、表现和内容相分离，干净利落。将设计部分剥离出来放在一个独立样式文件中，而网页主要来放置您的内容，你可以减少未来网页无效的可能。 5、简单的修改，缩短改版时间。共用css方便调整页面表现风格。 6、更灵活控制页面布局。通常页面的下载是按照代码的排列顺序，通过CSS控制可以调整代码的排列顺序而不影响布局,而表格布局代码的排列代表从上向下，从左到右，无法改变。 第二讲: div (结构层) 1.div概述 div是”块”的概述,但是他也是一个”无意义标签”,通常html语言中的标签都是有一定意义的，比如p标签代表一个段落，ul标签代表一个无序列表，table标签代表一个表格，但是div标签没有其实在意义，他的存在的意义如果说有,就是将html语言分离成不同的块，进行布局管理 可以这样理解：div是进行布局的架子,代表人体的骨骼,网页内容则代表人体的血肉，说一个人长得好看，英俊潇洒，高大挺拔，首先是看其体型，其实就是看的他的骨架搭配，网页也是这样，通过div先做出网页的骨架，然后再向里面填充内容，就成了一个初步的页面，此时进入表示层，通过css进行页面的美化，就成型了一个良好的网页 可见div是用于搭建整个网页的框架的,他的工作很踏实,我们浏览网页时看不见,但是它是默默无闻的工作于后台的 2.div用法 代码示例: div内容/div 上述代码就是一个div的使用实例,看上去毫无新意的一个标签,为什么有如此大的功效值得人们去讨论呢,请看一段比较复杂的代码 这段代码来自著名的博客程序wordpress的当前首页，显示效果最终如下： （注意：之所以提取wordpress这个程序的代码进行分析，是考虑到它十分注重遵循web标准，对我们从底层开始学习web标准有利） 可以从这段代码中得知：div在此充当了框架建设的作用，目标是打造一个网页的标题导航块，做到了结构清晰，条理分明的特点 3.如