第9章页面布局与风格.pptVIP

本章知识点和技能点： 利用表格、框架、AP元素进行页面布局 CSS样式的创建与应用 模板的创建与应用 网页布局定位，就是指将各种网页元素按需要放在合适的位置。目前，比较常用的网页布局定位技术有： CSS+DIV布局：是目前流行的网页版面布局方式，与表格方式相比，由于节约了许多代码，从而降低了网络数据量。 表格布局：利用表格既可以处理不同对象，又可以不用担心不同对象之间的影响，而且表格在定位图片和文本上比CSS更加方便。但是过多地使用表格，会影响页面的下载速度。 框架布局：虽然框架存在兼容性的问题，但从布局上考虑，框架结构是一种比较好的布局方法，可以将不同对象放置到不同页面加以处理。 AP元素的使用给网页带来从平面向多层平面的发展，丰富了网页的层次感。Dreamweaver中的AP元素相当于一个容器，它可以包含所有在HTML文件中出现的元素。 AP元素可以放置在页面的任何位置，利用AP元素可以方便而又精确地定位页面元素。 利用AP元素可以实现页面元素的重叠，AP元素还与Dreamweaver的许多高级特性紧密相关，如使用行为可以对AP元素进行操作与控制。 表格是一种能够有效地描述信息的组织方式，它不仅可以有序地排列数据，而且能够精确定位文本、图像及其他网页元素。 表格的作用： ? 利用表格进行页面布局 ? 利用表格进行数据的规则排列 ? 利用表格增加网页的层次 采用表格定位时，通常需要用多层表格进行。 插入表格：第一层表格通常是用来定义网页的最大尺寸。 单元格的合并：非连续单元格不能合并。 插入对象 框架主要用于在一个浏览窗口中显示多个HTML文档。通过构建这些文档之间的相互关系，从而实现文档导航、浏览以及操作等目的。 框架页中有一框架说明页，其中的内容仅仅是框架页内的各个框架相互关系和在框架页中的位置。 框架页中各个页的制作与单页相同，但在超级链接上除了文件名之外，还必须声明框架的位置。 框架的边框线、框架大小可调整否、滚动条等均可以设置。 框架中各页的制作需注意此页在框架中的位置，防止发生看不见的窘境。 如果要背景音乐，插入声音文件代码即可。 通常制作框架页 ，应考虑到无法浏览框架页的浏览器，所以尽量制作非框架页。 框架页面在电子商务网站中有许多的应用场合。比如商品介绍、分店介绍等。 在个人网页中，色彩、构图、布局等通常比较鲜艳活泼，不拘一格；在较专业的网站上其色彩、布局等就比较讲究，按照网站的性质可以灵活应用色彩、布局，一般采用色系的方案。 在网页制作中，每个页面的设计都要经历创建新页、页面设置、插入对象、排版、各种特效设置、存盘、浏览的各个环节，非常烦琐且事倍功半。Dreamweaver提供了网页制作中常用的模板技术，可以加快网页的设计与制作。 模板是由可编辑区域和不可编辑区域组成的。模板制作的原理是：将常用的页面对象制作成模板并保存，在此模板页中留出可以编辑制作的区域，以便插入新的内容。 在DW中，模板文件的扩展名为.dwt，是自动存放在Templates的文件夹中。如果没有这个文件夹，它会自动建立一个。 模板可以从已有的页面开始，也可以在新打开的页面中制作。 模板内分为：可编辑区域（Editable Region） 不可编辑区域（Locked Region） 在模板环境（dwt ）下既可以编辑可编辑区，也可编辑不可编辑区。 应用模板的方法如下： 单击菜单 新建/模板中的页，在弹出的对话框中选择所需的模板即可。 在打开的模板中，当鼠标在不可编辑区时显示“? ”符号；而在可编辑区时显示正常的可编辑符号“I”。 单击菜单 窗口/资源，打开资源浮动工具栏，选中模板文件，拖向页面后松开鼠标左键，选择将此页放在哪个可编辑区，单击Ok即可。 若已存在的网页要应用模板，需要进行可编辑区域的解析。 利用模板可以制作具有相同外观结构的网页，提高了制作效率。但要注意模板的设计和制作一定要严谨，以防更来改去的。 利用模板可以制作站点的不同版本。 如果采用了AP元素特效，比如时间线、动画等的模板，其可编辑区通常不能再插入AP元素以及以AP元素进行的特效 。 在批量制作中，可以采取页内内容由一些人制作、模板由有美工和网页设计经验的人制作，最后套用模板即可。 注意：当模板采用了AP元素和行为之后，利用模板的页面也采用AP元素和行为，一定要控制各AP元素的前后(Z-index=的数值)，以防互相遮住影响完整性。 AP元素名称不能相同，否则在应用模板时会去掉同名的AP元素发生不该有的情况。 执行菜单 修改/模板/从模板中分离操作即可使该页脱离模板。 CSS简介 CSS的基本语句 网页中导入CSS的方法 用CSS设置字体属性 用CSS设置文本属性 用CSS设置颜色与