《Dreamweaver CS5网页设计与制作实例教程》课件_第7章 网页布局.ppt

绘制AP元素实现布局7.4框架实现布局页面建立网页布局时，标准表格、布局表格、层和CSS都发挥着各自的特点，但是，它们的共同缺点是浏览器在替换表格或单元格中的内容时必须重新显示整个页面。由此框架布局网页就应运而生。7.4.1框架集和框架属性用框架设计网页，就是将屏幕分为若干区域，每个区域称为一个框架，各框架分别加载一个页面，这些页面可以分别显示，互相控制。框架的主要作用是用来增强网页的导航功能。对于框架网页来说，它可以使用一个框架来专门处理导航菜单，而其他框架则可以处理页面内容。因为导航菜单在框架内，所以，站点访问者可以通过单击导航菜单项来改变其他框架中的内容，而导航菜单几乎不发生任何变化。这样既节省了系统资源，又加快了下载速度。框架集框架集是框架的管理者，管理框架协同运作。“框架集”包含了显示在页面中的框架的数目，框架的尺寸，装入框架的内容来源，以及其他一些可定义的属性的相关信息。框架集不在浏览器中显示，它只是用来存放页面中框架显示的相关信息。框架集告诉浏览器开始时应该加载哪些网页，以后，超链接将根据用户的选择重新加载所需框架。框架集代码由于框架集就是一个网页，如果该框架集包含3个框架，每个框架也是独立的HTML页面，则包括框架集自身，一共需要4个网页。也就是，该框架集共有4个网页。以下是框架集代码的基本结构，框架集没有显示部分，所以写在body／body标签之外。frameset属性名l=”属性值1”…/frame属性名1=”属性值1”…/frame属性名2=”属性值2”…/…/framesetnoframesbody/body:noframesframeset是双标签，定义整个框架组的属性，frame是单标签，定义单个框架的属性。框架和框架集各自有“属性”面板。框架属性决定了框架名称、源文件、边距、滚动条、重新调整大小和边框等，框架集属性没置框架尺寸，框架之间边框的颜色和宽度等。设置框架和框架集属性前，先选中它们。通过“框架”面板可以很方便地选中框架和框架集。执行“窗口”|“框架”命令，出现如上图所示的“框架”面板。。单击“框架”面板中的某个框架，文档窗口中该框架就被选中，“属性”面板显示的就是该框架的属性，如下图所示。7.4.2框架的基本操作【例题7-12】用框架集结构制作淘宝网站主页，并设置超链接。制作后的界面如图所示。思考题

1．在Dreamweaver中，有哪几种方法可以为网页元素定位以进行网页布局？2．如何建立一个标准表格？如何在表格中嵌套表格？3．如何选中表格的行、列、单个单元格、连续的或不连续的单元格以及整个表格？4．比较标准表格与单元格的“属性”面板的差别，叙述各属性的含义。5．如何为表格数据排序？6．布局表格有什么特点？与标准表格相比有什么优势和不足？7．如何建立布局表格与布局单元格？8．如何调整布局表格与布局单元格的位置与大小？9．比较布局表格与布局单元格的“属性”面板的差别，叙述各属性的含义。10.层有什么特点？与标准表格、布局表格相比，功能上有什么优势和不足？11.在“层”面板中,对层可以进行哪些属性设置？12.比较单个层与多个层的“属性”面板的差别，叙述各属性的含义。第七章网页布局第七章网页布局设计一个漂亮的网页除了要有精彩的素材，还要把这些素材放到合适的位置上，这就是网页布局。网页布局强调页面所包含的各个模块或部分模块的共性因素，使整体美观流畅富有感染力。例如将页面中各视觉元素作全局编排，以周密的组织和精确的定位来获得页面的秩序感，即使运用“散”的结构或是分屏的长页面都做统一规划，运用统一风格，让浏览者体会到设计者完整的设计理想。布局类型网页布局的格式没有统一的规格，常用的类型大致可分为“口”字型、拐角型、“三”字型、左右框架型、上下框架型、综合框架型、POP型、Flash型、变化型，下面将介绍常见的几种。1、“国”字型

又称为“同”字型，是大型网站常采用的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是网上最常见的一种结构类型。2、“T”型又称为拐角型，这种结构与上一种很相近，上面是标题及广告横幅，接下来的左侧是一窄列导航链接，右列是很宽的正文，下面是一些网站的辅助信息3、标题正文型布局。这种布局的最上方是标题或广告等内容，下面是正文。通常文章页面或注册页面采用此种布局，其特点是简洁明快，干扰信息少，较为正规。4、对比型布局采用空间或色彩上的对比来冲击视觉。采取左右或者上下对称的布局，一半深色一半浅色，一般用于设计型站点。优点是视觉冲击力强，