《第02章：布局网站主页.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第02布局网站主页九、布置作业主要教学环节七、完成训练项目一、明确教学内容与目的二、项目效果展示三、任务描述四、预备知识讲解八、演示、点评与总结五、技能操作示范六、学生实施任务2021/9/11教学内容：页面布局方式Web标准、HTML、XHTML、CSS概述CSS选择器DIV+CSS布局知识能力目标：理解页面布局的方式了解Web标准、XHTML、层叠规则理解CSS规则、选择器类型和常用的CSS规则属性理解用DIV+CSS布局并制作页面的步骤能根据需要定义CSS规则会使用DIV+CSS布局页面一、教学内容与目的2021/9/12二、项目

2、效果与任务描述本次任务最终效果任务描述用DIV+CSS布局方式在Dreamweaver文档编辑区中布局电子系网站主页，主页分为页头、页中、页脚3个部分。其中，页头包含网站Logo和标志动画区、日期和导航菜单区、欢迎条区。页中由左右2列组成，左列包含站内登录区、系部风采区、兄弟系部链接区，右列包含系部简介区、新闻通知和专题建设区、学生活动区。页脚用来存放副导航和版权、联系方式等信息。在设计视图中，主页的布局效果如下图所示：2021/9/132021/9/142．1页面布局方式DIV+CSS：是目前页面布局的主流方式。在使用时一般是先插入D

3、IV再定义CSS规则。APDiv：类似于Word中的文本框，可方便地调整大小、移动、精确定位、对齐、嵌套，在页面布局时显得灵活自如。但页面内容较多时，使用APDiv布局反而难以控制且不便于日后的维护，故APDiv仅作为辅助布局工具使用。框架：将浏览器窗口划分成多个区域，每个区域称为一个框架，在每个框架中显示一个网页。它常用在一些特殊场合，例如网站后台管理系统管理界面的布局。内联框架：在页面中插入一个框架（称为内联框架）以便显示另一个网页。它常与其他布局方式结合在一起使用。三、预备知识2021/9/152．2DIV+CSS布局1．Web标

4、准Web标准是W3C（WorldWideWebConsortium，万维网联盟）提出的一个建议性的文档，是一系列标准的集合。Web标准分3个方面：结构化标准（包括XHTML和XML。结构是网页的骨架，通过XHTML或XML标签将信息内容结构化，使内容更具逻辑性、易用性，更易阅读、检索和交互）。表现标准（包括CSS（CascadingStyleSheet）和XSL（XMLStyleLanguage）。CSS可以展现XHTML和XML文件，而XSL可以展现XML文件。表现是网页的外貌）。行为标准（包括DOM）和ECMAScript等。行为是

5、对内容的交互及操作效果）。Web标准制定的目的：实现表现与结构相分离。2021/9/16使用Web标准设计网页的好处：（1）对浏览者而言页面显示速度更加迅速可通过样式选择实现换肤能够提供适于打印的版本能够支持屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等设备有助于特殊人群如视弱、色盲等人访问（2）对网站管理员而言更容易被搜索引擎搜索到改版容易代码和组件较少，易于维护因代码简洁，故带宽要求降低，节省运营成本无需专门制作供打印用的页面2021/9/172．HTML与XHTML1）HTMLHTML（HyperTextMarkupLangu

6、age，即超文本标记语言）是定义万维网的基本规则之一，它最初是用来“结构化”内容的，而不是用来“美化”内容的。随着技术的发展，HTML的标记不断更新，版本从1.0到4.01等。但存在3个主要缺点：手机、PDA、信息家电都不能直接显示HTML。由于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML。数据与表现混杂，如果页面要改变显示，就必须重新制作HTML。2）XHTML为解决HTML的缺点，W3C制定了XHTML（ExtensibleHyperTextMarkupLanguage）。它是HTML向XML过渡的桥梁，

7、是更严密、代码更整洁的HTML版本，是增强的HTML。实现Web标准的最终技术手段是使用XML。使用XHTML1.0，并遵循一些简单规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面。2021/9/18XHTML能与其他基于XML的标记语言、应用程序及协议进行良好的交互工作，还能很好地工作在无线设备上。目前所广泛使用的“DIV+CSS”只是Web标准中XHTML+CSS实现方式的一部分，它也是目前应用Web标准设计网页所使用的主流方式。3）XHTML的使用XHTML是用来定义结构的，结构创建的好坏直接影响到内容的易

8、用性。要有针对性地使用语义化、结构化的XHTML，即对不同语义的内容要使用不同的XHTML标签，比如：标题使用

、

等标题标签；大段的文本使用

标签；列表内容使用

标签。等等。不同的内