网页设计与创意实训教程05.ppt

* 网页应用技术——《网页设计与创意实训教程》讲义 第5章 网页布局 重点内容： 网页布局的方法和技术 框架布局 层布局 表格布局 一、网页布局： 1.网页布局方法 “T”结构布局 所谓“T”结构，就是指页面顶部为横条网站标志+广告条，下方左面或右边为导航链接，另外一边显示内容的布局。 “口”型布局 “口”型布局，就是页面上下各有一个广告条，中间为界面的主要内容。 一、网页布局： 1.网页布局方法 对称布局 对称布局采取左右或者上下对称，这种对称布局的网页结构清晰，视觉冲击力强 POP布局 POP布局的页面象一张宣传海报，以图片或Flash动画作为页面，多用于一些时尚性的网站，页面简单而时尚。 一、网页布局： 2.网页布局技术 框架布局 框架布局可以将浏览器划分为多个窗口，在各个窗口中显示不同的HTML文档。应用框架结构，把导航条永远固定在页面的顶部或右边，导航条不需要刷新。用户通过选择导航内容，切换到想要浏览的内容。 层布局 层在网页的布局中提供了精确定位的有效手段 表格布局 表格是最重要的网页布局方法，几乎所有的网页都会应用到表格实现布局 二、框架布局： 1.应用框架的优缺点 应用框架实现页面布局具有以下优点： 网站的LOGO、导航条，不需要在每个页面重新加载。 可独立访问每个框架，通过每个框架的滚动条，访问框架中的全部内容。 应用框架实现页面布局具有以下缺点： 框架的应用会导致界面显示缓慢。 不同框架中各元素的图形对齐，难以实现 二、框架布局： 2.创建框架和框架集 预定义的框架集的图标位于【布局】面板上，单击图标 中的向下箭头弹出【框架的类型】下拉菜单。在Dreamweaver 8中为读者提供了13种预定义好的框架集。 3.创建嵌套框架集 在一个框架集之内放入另一个框架集称为嵌套框架集。 二、框架布局： 4.设置框架集属性 源文件：设置框架源文件的路径与名称。 边框：设置是否在浏览器中显示框架的边框，共有三个选项：“是”，显示边框；“否”，不显示边框；“默认”，一般是不显示边框。 滚动：设置框架中是否显示滚动条 边框颜色：设置当前框架边框的颜色。 边界宽度：设置内容与框架边框左右的距离。 边界高度：设置内容与框架边框上下的距离。 二、框架布局： 5.设置框架属性 边框：设置是否在浏览其中显示框架的边框。 边框颜色：设置边框的颜色。 边框宽度：设置边框的宽度。 列：设置选定框架集的各行和各列的框架的大小。 6.框架的删除 选中框架后，应用Del键并不能删除框架，如果对HTML语言熟悉，可以在HTML代码中删除框架，如果不熟悉HTML语言，可以将光标放在框架的边框上，当光标会变为上下或左右箭头时按住鼠标左键，将框架的边框拖出父框架或页面之外，即可将这个框架删除。 二、框架布局： 7.框架链接 练习：创建框架界面 技术提示： 1、创建框架布局界面 2、应用框架链接技术 三、创建层： 1.层的定义 层是一种HTML页面元素，它提供了一种对网页的对象进行有效控制的手段，可将它定位在页面上的任意位置，在层中可以放置文本、图像、表单、对象插件，甚至还可以多个层重叠。 2.创建层的方法 在网页中插入层，单击【布局】面板中的【插入层】按钮 ，把鼠标移到编辑窗口中。此时候鼠标变成了“＋”形状，按住鼠标左键，拖曳出一个方形区域，达到合适大小放开鼠标，一个图层就被插入到编辑窗口中。 3.创建层的基本属性 三、创建层： 3.创建层的基本属性 层编号：设置层的编号名称，编号名称由英文字母及数字组成。 左：设置层左边边框在文档窗口中会其他对象中所处的位置，系统默认的计量单位为象素。 上：设置该文本框中指定层顶部边框与页面或上一级图层的距离。 宽和高：设置层的宽度和高度。 Z轴：设置层的Z-编号。在层的重叠中，Z轴编号较大的层出现在编号较小的层的上面。编号可以为正数可以为负数，也可以是0。 三、创建层： 3.创建层的基本属性 可见性：设置层的初始显示状态。该属性有四个选项，其中Default表示不指定层的可见性属性，；Inherit表示继承父层的可见性；Visible表示显示层的内容，忽略父层是否可见；Hidden表示隐藏层的内容，忽略父层是否可见。 背景图像：设置层的背景图像。 背景颜色：设置层的背景颜色。 类：设置层内容所使用的CSS样式。 三、创建层： 3.创建层的基本属性 溢出：设置层的内容超过了它的大小以何种方式显示信息。该选项仅适用于CSS层。共有四个选项：Visible表示增加层的大小；Hidden表示保持层的大小，多余内容将会被剪切掉，不显示滚动条；Scroll表示给层添加滚动条；Auto表示在层的内容超过它的边界时自动显示滚动