搜索
网页应用技术——《网页设计与创意实训教程》讲义第5章网页布局重点内容：•网页布局的方法和技术•框架布局•层布局•表格布局网页应用技术——《网页设计与创意实训教程》讲义一、网页布局：1.网页布局方法•“T”结构布局所谓“T”结构，就是指页面顶部为横条网站标志+广告条，下方左面或右边为导航链接，另外一边显示内容的布局。•“口”型布局“口”型布局，就是页面上下各有一个广告条，中间为界面的主要内容。网页应用技术——《网页设计与创意实训教程》讲义一、网页布局：1.网页布局方法•对称布局对称布局采取左右或者上下对称，这种对称布局的网页结构清晰，视觉冲击力强•POP布局POP布局的页面象一张宣传海报，以图片或Flash动画作为页面，多用于一些时尚性的网站，页面简单而时尚。网页应用技术——《网页设计与创意实训教程》讲义一、网页布局：2.网页布局技术•框架布局框架布局可以将浏览器划分为多个窗口，在各个窗口中显示不同的HTML文档。应用框架结构，把导航条永远固定在页面的顶部或右边，导航条不需要刷新。用户通过选择导航内容，切换到想要浏览的内容。•层布局层在网页的布局中提供了精确定位的有效手段•表格布局表格是最重要的网页布局方法，几乎所有的网页都会应用到表格实现布局网页应用技术——《网页设计与创意实训教程》讲义二、框架布局：1.应用框架的优缺点应用框架实现页面布局具有以下优点：•网站的LOGO、导航条，不需要在每个页面重新加载。•可独立访问每个框架，通过每个框架的滚动条，访问框架中的全部内容。应用框架实现页面布局具有以下缺点：•框架的应用会导致界面显示缓慢。•不同框架中各元素的图形对齐，难以实现网页应用技术——《网页设计与创意实训教程》讲义二、框架布局：2.创建框架和框架集预定义的框架集的图标位于【布局】面板上，单击图标中的向下箭头弹出【框架的类型】下拉菜单。在Dreamweaver8中为读者提供了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表示在层的内容超过它的边界时自动显示滚动条。•剪辑：设置层的可见区域，指定左侧、右侧、顶部和底边坐标，可在层的坐标空间中定义一个矩形网页应用技术——《网页设计与创意实训教程》讲义三、创建层：4.层中插入对象练习：层中插入对象技术提示：1、创建层2、层中插入对象网页应用技术——《网页设计与创意实训教程》讲义三、创建层：5.层的转换将层转换为表格，选择【修改】|【转换】|【层到表格】命令，弹出【转换层到表格】对话框。将表格转换为层，选择【修改】|【转换】|【表格到层】命令，弹出【转换表格到层】对话框。网页应用技术——《网页设计与创意实训教程》讲义四、布局表格：1.创建布局表格创建布局表格可单击【常用】面板中的【布局】按钮或选择【查看】|【表格模式】|【布局模式】命令，弹出【从布局模式开始】对话框。单击【确定】按钮。切换到布局视图后，此时【布局】面板中的布局表格按钮和绘制布局单元格按钮，已经变为可用状态，此时就可以用这些按钮绘制布局单元格或表格了。2.创建嵌套布局表格在布局表格内部可以绘制另外的布局表格，从而形成嵌套布局表格3.设置布局表格属性和格式网页应用技术——《网页设计与创意实训教程》讲义四、布局表格：练习：布局表格的应用技术提示：1、绘制布局表格2、插入文本信息网页应用技术——《网页设计与创意实训教程》讲义动手实践：案例效果：关键技术：1、表格布局2、Flash多媒体3、超链接文本网页应用技术——《网页设计与创意实训教程》讲义本章小结：•了解网页布局的方法和技术的内容•了解如何创建框架和框架集；如何创建层；如何绘制布局表格和单元格•重点掌握框架和框架集的属性应用、层的属性应用和对象的插入；创建嵌套布局表格；设置布局表格和布局单元格的属性