网页设计与制作 第2版 教学课件 作者 王晓红 等第9章页面布局与风格.ppt

《网页设计与制作 第2版 教学课件 作者 王晓红 等第9章页面布局与风格.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、本章知识点和技能点：利用表格、框架、AP元素进行页面布局CSS样式的创建与应用模板的创建与应用第9章页面布局与风格页面风格第9章页面布局与风格页面布局定位本章要点和概念页面布局定位9.1网页布局定位，就是指将各种网页元素按需要放在合适的位置。目前，比较常用的网页布局定位技术有：CSS+DIV布局：是目前流行的网页版面布局方式，与表格方式相比，由于节约了许多代码，从而降低了网络数据量。表格布局：利用表格既可以处理不同对象，又可以不用担心不同对象之间的影响，而且表格在定位图片和文本上比CSS更加方便。但是过多地使用表格，会影响页面的

2、下载速度。框架布局：虽然框架存在兼容性的问题，但从布局上考虑，框架结构是一种比较好的布局方法，可以将不同对象放置到不同页面加以处理。页面布局定位在Dreamweaver中主要采用以下布局定位技术：AP元素表格框架9.1页面布局定位AP元素9.1AP元素的使用给网页带来从平面向多层平面的发展，丰富了网页的层次感。Dreamweaver中的AP元素相当于一个容器，它可以包含所有在HTML文件中出现的元素。AP元素可以放置在页面的任何位置，利用AP元素可以方便而又精确地定位页面元素。利用AP元素可以实现页面元素的重叠，AP元素还与Dr

3、eamweaver的许多高级特性紧密相关，如使用行为可以对AP元素进行操作与控制。页面布局定位AP元素9.1页面布局定位表格9.1表格是一种能够有效地描述信息的组织方式，它不仅可以有序地排列数据，而且能够精确定位文本、图像及其他网页元素。表格的作用：利用表格进行页面布局利用表格进行数据的规则排列利用表格增加网页的层次页面布局定位表格9.1采用表格定位时，通常需要用多层表格进行。插入表格：第一层表格通常是用来定义网页的最大尺寸。单元格的合并：非连续单元格不能合并。插入对象页面布局定位表格9.1将以.txt纯文本格式的排列的数

4、据（文字、数值等）自动变成为表格，是简化制作的好方法。对这个.txt纯文本的要求是：数据一定要按照某一规律编排。比如数据之间采用Tab键（制表符），“，”逗号，“-”减号等。这样才能由.txt文档自动生成规则的页面表格。页面布局定位表格9.1页面布局定位框架9.1框架主要用于在一个浏览窗口中显示多个HTML文档。通过构建这些文档之间的相互关系，从而实现文档导航、浏览以及操作等目的。页面布局定位框架9.1框架页中有一框架说明页，其中的内容仅仅是框架页内的各个框架相互关系和在框架页中的位置。框架页中各个页的制作与单页相同，但在超级链

5、接上除了文件名之外，还必须声明框架的位置。框架的边框线、框架大小可调整否、滚动条等均可以设置。框架中各页的制作需注意此页在框架中的位置，防止发生看不见的窘境。页面布局定位框架9.1如果要背景音乐，插入声音文件代码即可。通常制作框架页，应考虑到无法浏览框架页的浏览器，所以尽量制作非框架页。框架页面在电子商务网站中有许多的应用场合。比如商品介绍、分店介绍等。在个人网页中，色彩、构图、布局等通常比较鲜艳活泼，不拘一格；在较专业的网站上其色彩、布局等就比较讲究，按照网站的性质可以灵活应用色彩、布局，一般采用色系的方案。页面风格模板CSS

6、样式9.2页面风格模板9.2在网页制作中，每个页面的设计都要经历创建新页、页面设置、插入对象、排版、各种特效设置、存盘、浏览的各个环节，非常烦琐且事倍功半。Dreamweaver提供了网页制作中常用的模板技术，可以加快网页的设计与制作。模板是由可编辑区域和不可编辑区域组成的。模板制作的原理是：将常用的页面对象制作成模板并保存，在此模板页中留出可以编辑制作的区域，以便插入新的内容。页面风格模板9.2在DW中，模板文件的扩展名为.dwt，是自动存放在Templates的文件夹中。如果没有这个文件夹，它会自动建立一个。模板可以从已有的

7、页面开始，也可以在新打开的页面中制作。模板内分为：可编辑区域（EditableRegion）不可编辑区域（LockedRegion）在模板环境（dwt）下既可以编辑可编辑区，也可编辑不可编辑区。页面风格模板9.2应用模板的方法如下：单击菜单新建/模板中的页，在弹出的对话框中选择所需的模板即可。在打开的模板中，当鼠标在不可编辑区时显示“”符号；而在可编辑区时显示正常的可编辑符号“I”。单击菜单窗口/资源，打开资源浮动工具栏，选中模板文件，拖向页面后松开鼠标左键，选择将此页放在哪个可编辑区，单击Ok即可。若已存在的网页要应用模板，

8、需要进行可编辑区域的解析。页面风格模板9.2利用模板可以制作具有相同外观结构的网页，提高了制作效率。但要注意模板的设计和制作一定要严谨，以防更来改去的。利用模板可以制作站点的不同版本。如果采用了AP元素特效，比如时间线、动画等的模板，其可编辑区通常不能再插入AP