页面布局

页面布局袁学倩常见网页布局设计网页既要合理安排内容又要美观精致，仅仅通过文字和图片的排列是不够的。在DREAMWEAVER中提供了表格、框架和APDiv等工具，可以制作出复杂的页面结构，再配合文字和图片，就可以制作优秀的网页。网页布局结构•1．“国字”型布局•“国”字型布局由“同”字型布局进化而来，因布局结构与汉字“国”相似而得名。其页面的最上部分一般放置网站的标志和导航栏或Banner广告，页面中间主要放置网站的主要内容，最下部分一般放置网站的版权信息和联系方式等。常见的网页布局结构•2．T型布局•T型布局结构因与英文大写字母T相似而得名。其页面的顶部一般放置横网站的标志或Banner广告，下方左侧是导航栏菜单，下方右侧则用于放置网页正文等主要内容。常见的网页布局结构•3．标题正文型•标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。常见的网页布局结构•4．左右框架型布局•左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接，右侧则放置网站的主要内容常见的网页布局结构•5．上下框架型•上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。常见的网页布局结构•6.综合框架型•综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术常见的网页布局结构•7．POP布局•POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。常见的网页布局结构•8．FLASH布局•FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中，大部分甚至整个页面都是Flash。表格在美化网页方面也起着重要作用，使用表格时要注意：整个网页不要都套在一个表格中，尽量拆分出多个表格；单一表格的结构尽量整齐；表格嵌套的层次要少。表格插入表格并设置属性1)单击“插入”|“表格”命令，在弹出的对话框中，可以对插入的表格进行初步定义。2)表格属性设置：选中表格，然后通过属性面板对表格线条的颜色、表格背景色、单元格的对齐方式等进行设置。3)单元格的合并和拆分：选中表格中的单元格，通过单击属性面板上的合并单元格按钮和拆分单元格按钮，可以将表格设计成需要的形式。网页中的表格在表格中添加元素1）输入文本：单击表格中的单元格，就可以输入文本；也可以先选中表格，在属性面板中进行对齐等设置后再输入文本。2）插入图像：选中单元格，单击“插入”|“图像”命令可以在单元格中插入图像，注意图像与单元格的大小。3）表格的嵌套：选中单元格，再单击“插入”|“表格”命令，可以在表格中插入嵌套的表格，嵌套表格的宽度受其所在的单元格的宽度限制。嵌套表格网页制作中表格的应用非常广泛。表格可以使层次更清晰，条理更清楚，可以严格地控制对象的摆放位置。但是一个样式的表格太单调。下面就来学习隔距边框表格的制作，完成效果如图示单元格填充为1单元格填充为5单元格间距为1单元格间距为5应用表格综合案例──使用表格布局网页•这是使用表格布局网页的一个例子，特别要注意嵌套表格的使用，使用表格布局网页时，边框通常设置为“0”。综合案例──使用表格布局网页使用APDiv功能讲解•认识APDiv和【AP元素】面板。•创建APDiv。•APDiv属性。•创建嵌套APDiv。•编辑APDiv。•APDiv和Div标签。一、认识APDiv和【AP元素】面板•APDiv是一种能够随意定位的页面元素，如同浮动在页面里的透明层，可以将APDiv放置在页面的任何位置。由于APDiv中可以放置包含文本、图像或多媒体对象等其他内容，很多网页设计者都会使用APDiv定位一些特殊的网页内容。•页面中所有的APDiv都会显示在【AP元素】面板中。选择【窗口】/【AP元素】命令，可以打开【AP元素】面板。如图所示是一个包含多个APDiv的【AP元素】面板。•在【AP元素】面板中可以实现以下功能。–可以对APDiv进行重命名。–可以修改APDiv的z轴顺序。–可以禁止APDiv重叠。–可以显示或隐藏APDiv。–可以选定APDiv，如果按住Shift键不放，依次单击可以选中多个APDiv。–按住Ctrl键不放，将某一个APDiv拖动到另一个APDiv上，形成嵌套的APDiv。二、创建APDiv•在创建APDiv时，可以直接插入一个默认大小的APDiv，也可以直接绘制自定义大小的APDiv。插入默认大小的APDiv•将光标置于文档窗口中，选择【插入】/【布局对象】/【APDiv】命令将插入一个默认大小的APDiv，也可以将【插入】/【布局】面板上的按钮拖曳到文档窗口，此时也将插入一个默认大小的APDiv。•当向网页中插入APDiv时，APDiv属性是默认的，如APDiv的大小和背景颜色等。如果希望按照自己预先定义的大小插入APDiv，可以选择【编辑】/【首选参数】命令，弹出【首选参数】对话框，在【分类】列表中选择【AP元素】分类，根据需要对其中的参数进行设置即可，如图所示。三、APDiv属性•插入APDiv以后，在【属性】面板中可以查看和编辑APDiv的属性，如图所示。编辑APDiv•在创建了APDiv以后，许多时候要根据实际需要对其进行编辑，包括选择APDiv、缩放APDiv、移动APDiv、对齐APDiv、APDiv的可见性和APDiv的Z轴顺序等。（1）选择APDiv•单击文档中的图标来选定APDiv，如果该图标没有显示，可在【首选参数】/【不可见元素】分类中勾选【AP元素的锚点】复选框。•将光标置于APDiv内，然后在文档窗口底边的标签条中选择相应的HTML标签，如图所示。•单击APDiv的边框线。•在【AP元素】面板中单击APDiv的名称，如图所示。•如果要选定两个以上的APDiv，只要按住Shift键，在文档窗口中逐个单击APDiv手柄或在【AP元素】面板中逐个单击APDiv的名称即可。（2）缩放APDiv•缩放APDiv仅改变APDiv的宽度和高度，不改变APDiv中的内容。在文档窗口中可以缩放一个APDiv，也可同时缩放多个APDiv，使它们具有相同的尺寸。缩放单个APDiv有以下几种方法。–选定APDiv，然后拖曳缩放手柄（APDiv周围出现的小方块）来改变APDiv的尺寸。拖曳上或下手柄改变APDiv的高度，拖曳左或右手柄改变APDiv的宽度，拖曳4个角的任意一个缩放点同时改变APDiv的宽度和高度。–选定APDiv，然后按住Ctrl键，每按一次方向键，APDiv就被改变一个像素值。–选定APDiv，然后同时按住Shift＋Ctrl组合键，每按一次方向键，APDiv就被改变10个像素值。•如果同时对多个APDiv的大小进行统一调整，方法是，按住Shift键，将所有的APDiv逐一选定，然后在【属性】面板的【宽】文本框内输入数值，按Enter键确认。此时文档窗口中所有APDiv的宽度全部变成了指定的宽度。还可以选择【修改】/【排列顺序】/【设成宽度相同】命令来统一宽度，利用这种方法将以最后选定的APDiv的宽度为标准。（3）移动APDiv•要想精确定位APDiv，许多时候要根据需要移动APDiv。移动APDiv时，首先要确定APDiv是可以重叠的，也就是不勾选【AP元素】面板中的【防止重叠】复选框，这样APDiv可以不受限制地被移动。移动APDiv的方法主要有以下几种。–选定APDiv后，当鼠标指针靠近缩放手柄，变为形状时，按住鼠标左键并拖曳，APDiv将跟着鼠标的移动而发生位移。–选定APDiv，然后按4个方向键，向4个方向移动APDiv。每按一次方向键，将使APDiv移动1个像素值的距离。–选定APDiv，按住Shift键，然后按4个方向键，向4个方向移动APDiv。每按一次方向键，将使APDiv移动10个像素值的距离。（4）对齐APDiv•对齐功能可以使两个或两个以上的APDiv按照某一边界对齐。对齐APDiv的方法是，首先将所有APDiv选定，然后选择【修改】/【排列顺序】中的相应命令（如【对齐下缘】），将使所有被选中的APDiv的底边按照最后选定APDiv的底边对齐，即所有APDiv的底边都排列在一条水平线上。（5）APDiv的可见性•APDiv内可以包含所有的网页元素，通过改变APDiv的可见性，可以控制APDiv内元素的显示与隐藏。改变APDiv的可见性可以通过【AP元素】面板或APDiv【属性】面板进行。–APDiv名称左边为状态时，表示APDiv为可见，这时【属性】面板中的【可见性】选项为“visible”（可见)。–APDiv名称左边为状态时，表示APDiv为不可见，这时【属性】面板中的【可见性】选项为“hidden”（隐藏)。–APDiv名称左边没有或时，表示可见性为默认，这时【属性】面板中的【可见性】选项为“default”（默认）。•若需同时改变所有APDiv的可见性，则单击【AP元素】面板中图标列最顶端的图标，原来所有的APDiv均变为可见或不可见。返回目录（6）APDiv的Z轴顺序•APDiv的z轴的含义是，除了屏幕的x、y坐标之外，逻辑上增加了一个垂直于屏幕的z轴，z轴顺序就好像APDiv在z轴上的坐标值。这个坐标值可正可负，也可以是0，数值大的在上层，数值小的在下层。改变APDiv的z轴顺序的方法很简单，只需打开【AP元素】面板，用鼠标指针指向需要改变序号的APDiv，按住左键向上或向下拖曳鼠标，当拖曳到将要插入的两个APDiv之间时，会出现一条横线，此时释放鼠标左键，各个APDiv的z轴顺序会发生相应的改变。返回目录六、APDiv和Div标签•在HTML代码中，APDiv和Div标签使用共同的div标记，那么二者有何不同，又有何联系呢？这可以从AP元素的定位方式的角度来说明。•AP元素的定位方式有两种类型：绝对定位和相对定位。绝对定位是指定APDiv元素以最近上级包含块的左上角点为参考点进行定位，相对定位就是指APDiv元素以相对于自身位置的左上角为参考点进行定位。•通过更改div的定位方式，可以实现APDiv和Div标签的相互转换。方法是，在CSS规则定位对话框的【Position】下拉列表中选择“absolute”或“relative”，如图所示，“absolute”表示绝对定位方式，“relative”表示相对定位方式。DreamweaverCS4默认创建的APDiv是绝对定位方式。课堂实训——使用APDiv制作特殊效果•使用APDiv制作阴影文本，在浏览器中的浏览效果如图所示。•这是使用APDiv重叠功能制作特效的一个例子，需要插入两个APDiv，使其位置稍微有所偏差，并将文本颜色设置有所差异即可。使用框架–功能讲解–范例解析——插入和设置框架–课堂实训——使用框架布局“技术论坛”网页功能讲解•框架也是网页布局的工具之一，它能够将网页分割成几个独立的区域，每个区域显示独立的内容。框架的边框还可以隐藏，从而使其看起来与普通网页没有任何不同。具体内容如下:–创建框架网页。–保存框架。–在框架中打开网页。–选择框架和框架集。–拆分和删除框架。–设置框架属性。–编辑无框架内容。–创建浮动框架。一、创建框架网页•创建预定义框架集的方法如下:–选择【文件】/【新建】命令，打开【新建文档】对话框，切换到【示例中的页】选项卡，在【示例文件夹】列表中选择【框架集】选项，在右侧的【示例页】列表中选择相应的选项，如图所示。•在当前网页中，单击【插入】/【布局】工具栏中按钮的（向下箭头），在弹出的下拉按钮组中单击相应的按钮，如图所示。•在当前网页中，选择菜单栏中的【插入】/【HTML】/【框架】命令，其子菜单命令如图所示。二、保存框架•由于一个框架集包含多个框架，每一个框架都包含一个文档，因此一个框架集会包含多个文件。在保存框架网页的时候，不能只简单地保存一个文件，而要将所有的框架网页文档都保存下来。可以分别保存每个框架集页面或框架页面，也可以同时保存所有的框架文件和框架集页面。•选择【文件】/【