车险种类有哪些第7单元 页面布局
课程目标：
● 掌握使用表格设计网页布局
● 掌握使用图层设计网页布局
● 掌握使用框架及内框架
● 中国的四大发明掌握使用Photoshop切片工具设计网页布局
建议学时：理论4学时，实践6学时。
网页设计，既是一门技术，也是一门艺术。这是因为网页在向浏览者传递信息时，既要考虑用户获取信息时的方便，也要考虑人们阅读时的感觉和心情。网页包括文字、图形、动画等诸多元素，在网页版面布局方面必须综合考虑，以实现良好的视觉效果。
网页布局的设计方法主要有以下几种，一是使用传统的笔纸，画出布局草图，然后在Dream
weaver8中实现，二是直接使用软件设计布局，如Photoshop等，直接设计后输出为HTML文件。但不管是哪一种，均是一种构思行为，对于要制作一个好的页面效果而言是非常重要的。proe 5.0
在Dreamweaver8中实现网页面面布局的设计技术有很多，本单元主要介绍常用的表格布局、布局面板、层、框架等。
延喜攻略7.1 运用表格进行布局
表格是一个很好的布局工具，表格上可以有很多的单元格，网页页面的各元素放置在不同的单元格中，实现布局效果。
7.1.1 使用表格布局的一般规则
使用表格进行布局，一般应注意以下规则：
（1）不要把整个网页当成一个大表格，尽量使用分块。一是因为一个大表格的内容要全部加载后才会显示，无疑会降低浏览速度和效率，二是在单元格的调整时不够方便，往往只
想调整某个单元格，但其它行的单元格会一起产生联动效果。因此，应尽量考虑分块处理。最常见的是将表格分为三块，即上、中、下部分，上部分用于处理LOGO、BANNER、MENU等，中部分处理页面主要内容，下部分放置有关的声明、版权信息等。
（2）可以使用嵌套
嵌套表格，即在一个单元格内插入另一个表格。放置嵌套表格的单元格，通常设置其垂直对齐方式为“顶端对齐”。嵌套表格作为相对独立的表格，控制十分方便，这也是使用表格布局的常用技术。但一般不宜超过三层，否则会影响浏览速度。
（3）作为布局的表格，表格线边框宽度一般设为0。外表格宽度一般使用固定的象素值，嵌套表格宽度可使用百分比，如果使用像素值的话则要计算准确。
7.1.2 表格布局示例
图7-1 网页布局示例
这是一个较常见的布局，要制作这样一种布局，可考虑按图7-2分块插入四个表格，如图7-2所示，分别对应顶部标题区和菜单区、中部快速导航区（或二级菜单区）和内容区、下部图片新闻区、底部版权声明区等。
图7-2 使用表格划分版面布局
作为示例，我们下面介绍左边的快速导航区的制作步骤。
手的成语（1）在左边导航区插入内嵌表格6行1列，并设置宽度为100%，在1、2、3行填入各栏目标题“最新下载”、“区级精品课程”、“友情链接”，并注意设置其高度。如图7-3所示。
图7-3
（2）设置第2、4、6行单元格垂直对齐方式为“顶端对齐”
（3）在2行单元格中插入1行2列表格，填入相应内容。在第4行单元格中插入5行2列表格，填入精品课程相应内容。在第6行单元格中插入3行2列表格，填入相应内容。结果如图7-4所示。
图7-4 使用表格制作导航
7.1.3 本节小结
使用表格设计网页页面布局，是十分常用的方法，关键之一是分块处理，关键之二是使用嵌套表格，学会灵活运用，就可以制作出各种版面布局效果的网页了。
7.2 使用层中山詹园
使用表格进行页面布局是一个传统有效的方法，但要在页面中随意移动表格是不可以的，因此使用表格进行布局，必须预先进行严谨的规划。利用“层”的可移动性，就可以很好的解决这个问题。层是一个可以随意移动、可以重叠、可以嵌套的对象，可以较为灵活地进行布局。
7.2.1 使用层进行布局
使用层进行布局，就是在页面中插入多个层，直接在层上放置网页对象就可以了。以图7-1的页面为例，要制作这个版面，可直接使用“绘制层”工具，在页面上“画”各个版块。为方便
控制层的位置，可以将参考的网格线显示出来并设置靠齐到网格（菜单【查看】|【网格】|【显示网格】、【靠齐网格】）
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论