第5章 旅游网站CSS和DIV布局设计精要.ppt

　　本章将介绍使用CSS+DIV布局网页的基本知识和方法。 * Dreamweaver CS5 网页制作基础教程 第5章 旅游网站CSS和DIV布局设计 学习目标 了解常用的页面布局类型和技术。 掌握插入和编辑Div标签的基本方法。 掌握使用CSS+DIV布局页面的基本方法。 掌握创建和设置AP Div的基本方法。 掌握使用Spry布局构件的基本方法。 5.1　设计思路 本章将以“崂山旅游”主页“index.htm”为例介绍使用CSS+DIV标签布局页面的基本方法，同时介绍AP Div和Spry布局构件的基本知识和使用方法。 5.2 了解页面布局 页面布局类型 页面布局技术 一字型结构 左右结构 川字型结构 二字型结构 三字型结构 厂字型结构 匡字型结构 同字型结构 回字型结构 5.2.1 页面布局类型 　CSS+DIV是目前网页页面布局的主流技术，它具有诸多优点。 页面载入速度更快 修改设计更有效率 保持视觉的一致性 更好地被搜索引擎收录 对浏览者和浏览器更具亲和力 5.2.2 页面布局技术 5.3 使用CSS+DIV布局页面 CSS的盒子模型 id与class的区别 使用预设计的CSS+DIV布局 使用CSS+DIV自主布局页面 　在使用CSS+DIV技术进行页面布局的过程中，会经常用到内容、填充、边框、边界等属性，这些都是盒子模型的基本要素，进行页面布局时必须明白这些术语之间的关系。 5.3.1 CSS的盒子模型 5.3.2 id与class的区别 class在程序中称“类”，在CSS中也叫“类”。class在同一个页面可以无数次调用相同的类样式，这就像调用函数一样，不用在一个页面里重复配置一个“类”属性。 id是表示标签的身份，在JS脚本中会用到id，当JS要修改一个标签的属性时，JS会将id名作为该标签的唯一标识进行操作。 Dreamweaver CS5通过提供16个可以在不同浏览器中工作的事先设计的布局，使读者可以轻松地使用CSS+DIV布局构建页面。通过这些预设计的CSS+DIV布局，也可以很好地学习CSS+DIV布局的方法和技巧。 5.3.3 使用预设计的CSS+DIV布局 使用Dreamweaver CS5提供的预设计CSS+DIV布局是创建CSS+DIV布局页面的最简便方法，如果读者是高级用户，还可以自行使用CSS+DIV技术来布局网页。 在菜单栏中选择【插入】/【布局对象】/【Div标签】命令插入Div标签，同时设置CSS样式。 5.3.4 使用CSS+DIV自主布局页面 Div标签是用来定义网页内容的逻辑区域标签，可以使用Div标签创建列效果以及不同的颜色区域等。如果使用class或id来标记Div标签，那么该标签的作用会变得更加有效。在Dreamweaver CS5中，可以手动插入Div标签并对它们应用CSS定位样式来创建页面布局。Div标签以一个框的形式出现在文档中并带有占位符文本。当将指针移到该框的边缘上时，Dreamweaver CS5会高亮显示该框。 页面使用了固定宽度的布局，要使Div标签等块元素居中显示，将它的左边界和右边界均设置为“自动”即可，这样在浏览器窗口中浏览时，页面将居中显示。 5.4 创建AP Div 理解基本概念 创建AP Div 编辑AP Div 使用AP Div布局页面 1、AP元素：是分配有绝对位置的HTML页面元素，例如，Div标签、Table标签等，只要为其定义了绝对位置属性，就是AP元素，所有AP元素都将显示在【AP 元素】面板中。 2、AP Div：是具有绝对定位的Div，由于AP Div是一种能够随意定位的页面元素，因此可以将AP Div放置在页面的任何位置，页面中所有的AP Div都会显示在【AP元素】面板中。 3、Div标签：是具有相对定位的Div，用来定义页面内容中的逻辑区域，可以使用Div标签将内容块居中，创建列效果以及创建不同的颜色区域等。 5.4.1 理解基本概念 使用【首选参数】对话框的【AP元素】分类可指定新建AP Div的默认设置。 5.4.2 创建AP Div 插入默认大小的AP Div：选择【插入】/【布局对象】/【AP Div】命令插入一个默认大小的AP Div，也可将【插入】/【布局】面板上的【绘制AP Div】按钮拖曳到文档窗口来插入一个默认大小的AP Div。 绘制自定义大小的AP Div：在【插入】/【布局】面板上单击【绘制AP Div】按钮，然后将鼠标指针移至文档窗口中，当指针变为+形状时，按住鼠标左键并拖曳，到适合位置释放鼠标左键，将绘制一个自定义大小的AP Div 。 选择AP Div。 单击文档中的 图标来选定AP Div。 将光标置