布置作业.pptVIP

教学内容： 页面布局方式 Web标准、HTML、XHTML、CSS概述 CSS选择器 DIV+CSS布局 知识能力目标： 理解页面布局的方式 了解Web标准、XHTML、层叠规则 理解CSS规则、选择器类型和常用的CSS规则属性 理解用DIV+CSS布局并制作页面的步骤 能根据需要定义CSS规则 会使用DIV+CSS布局页面 二、项目效果与任务描述 本次任务最终效果 任务描述 用DIV+CSS布局方式在Dreamweaver文档编辑区中布局电子系网站主页，主页分为页头、页中、页脚3个部分。其中，页头包含网站Logo和标志动画区、日期和导航菜单区、欢迎条区。页中由左右2列组成，左列包含站内登录区、系部风采区、兄弟系部链接区，右列包含系部简介区、新闻通知和专题建设区、学生活动区。页脚用来存放副导航和版权、联系方法等信息。 在设计视图中，主页的布局效果如下图所示： 2．1 页面布局方式 DIV+CSS：是目前页面布局的主流方式。在使用时一般是先插入DIV再定义CSS规则。 AP Div：类似于Word中的文本框，可方便地调整大小、移动、精确定位、对齐、嵌套，在页面布局时显得灵活自如。但页面内容较多时，使用AP Div布局反而难以控制且不便于日后的维护，故AP Div仅作为辅助布局工具使用。 框架：将浏览器窗口划分成多个区域，每个区域称为一个框架，在每个框架中显示一个网页。它常用在一些特殊场合，例如网站后台管理系统管理界面的布局。 内联框架：在页面中插入一个框架（称为内联框架）以便显示另一个网页。它常与其他布局方式结合在一起使用。 2．2 DIV+CSS布局概述 2．2．1 Web标准 Web标准是W3C（World Wide Web Consortium，万维网联盟）提出的一个建议性的文档，是一系列标准的集合。 Web标准分3个方面： 结构化标准（包括XHTML和XML。结构是网页的骨架，通过XHTML或XML标签将信息内容结构化，使内容更具逻辑性、易用性，更易阅读、检索和交互） 。 表现标准（包括CSS（Cascading Style Sheet）和XSL（XML Style Language）。CSS可以展现XHTML 和XML文件，而XSL可以展现XML文件。表现是网页的外貌 ） 。 行为标准（包括DOM）和ECMAScript等。行为是对内容的交互及操作效果）。 Web标准制定的目的：实现表现与结构相分离。 使用Web标准设计网页的好处： （1）对浏览者而言 页面显示速度更加迅速 可通过样式选择实现换肤 能够提供适于打印的版本 能够支持屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等设备 有助于特殊人群如视弱、色盲等人访问 （2）对网站管理员而言 更容易被搜索引擎搜索到 改版容易 代码和组件较少，易于维护 因代码简洁，故带宽要求降低，节省运营成本 无需专门制作供打印用的页面 2．2．2 HTML与XHTML 1．HTML HTML（HyperText Markup Language，即超文本标记语言）是定义万维网的基本规则之一，它最初是用来“结构化”内容的，而不是用来“美化”内容的。随着技术的发展，HTML的标记不断更新， 版本从1.0到4.01等。但存在3个主要缺点： 手机、PDA、信息家电都不能直接显示HTML。 由于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML。 数据与表现混杂，如果页面要改变显示，就必须重新制作HTML。 2．XHTML 为解决HTML的缺点，W3C制定了XHTML（Extensible HyperText Markup Language）。它是HTML向XML过渡的桥梁，是更严密、代码更整洁的HTML版本，是增强的HTML 。实现Web标准的最终技术手段是使用XML。 使用XHTML 1.0，并遵循一些简单规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面。 XHTML能与其他基于XML的标记语言、应用程序及协议进行良好的交互工作，还能很好地工作在无线设备上。 目前所广泛使用的“DIV+CSS”只是Web标准中XHTML+CSS实现方式的一部分，它也是目前应用Web标准设计网页所使用的主流方式。 3．XHTML的使用 XHTML是用来定义结构的，结构创建的好坏直接影响到内容的易用性。 要有针对性地使用语义化、结构化的XHTML，即对不同语义的内容要使用不同的XHTML标签，比如： 标题使用h1、h2等标题标签； 大段的文本使用p标签； 列表内容使用li标签。 等等。 不同的内容之间可使用div分块，既便于理解文档内容，且对于CSS的编写也很重要。 2．2．3 CSS 1．CSS概述 CSS（Cascading Style Sheet，