第5章 网站布局.ppt

《第5章 网站布局.ppt》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、第5章网站布局技能目标5.1网站页面布局5.2表格的应用5.3层的运用5.4框架的使用技能目标了解常用网页内容的组成要素了解常见网页的布局方式掌握表格的基本操作，并能使用表格进行页面布局的设计掌握层的使用方法，利用层对页面元素进行定位掌握框架的使用方法，能够使用框架对页面进行设计网页设计是否美观，直接影响到客户对网站的第一感觉。在网页设计的各种要素中，网页布局设计是其中的重要一项。网页布局设计就是在页面内对组成网页的基本元素进行合理地组织安排，使网页更便于阅读和理解，看起来美观、清晰。虽然内容是网站的灵魂，但访问者不愿意看到只注重内容的站

2、点，只有当网页排版和网页内容成功结合时，才是真正受人欢迎的网站。5.1网站页面布局页面尺寸由于访问者计算机配置的不同，浏览网页时的显示模式也会有所区别。现在使用较多的是800×600和1024×768的分辨率，所以在设计网页时，就要考虑使用这两种分辨率。在800×600的屏幕显示模式下，IE窗口内能看到的部分为780×428个像素；而在分辨率是1024×768的模式下，页面的显示尺寸应为1007×600个像素。这两种尺寸都是按照在浏览时网页正好占满整个屏幕的情况而定的，当一屏显示不完时，页面上会出现垂直和水平的滚动条，通过对滚动条的拖动，

3、可以查看到所有的内容。页面组成页头网页标志导航栏内容板块页脚页面布局上下型左右型混合型5.1网站页面布局表格是页面布局中极为有用的设计工具，它为网页带来了结构的概念，可以控制文本和图形在页面上出现的位置，使网页上的各个元素排列的井然有序。现在几乎所有的大型网站的主页都是用表格来进行布局的，网页设计者们已经把表格当作页面布局最有力的工具之一。5.2表格的应用案例5-2用表格工具制作网页设计并制作出一个名为“书香文轩”的网页，使用表格作为布局工具，如图所示为制作完成的页面。5.2表格的应用案例5-2用表格工具制作网页【案例分析】制作网页之前，

4、首先要对其进行布局规划，本例中的页面可以划分为页头、主体、页脚三部分。我们可以考虑用3～4个大的表格来实现它。5.2表格的应用案例5-2用表格工具制作网页【操作步骤】（演示操作）1．新建文档2．绘制表格，设置表格属性表格的基本操作：插入表格合并单元格拆分单元格3．插入图像，输入文字信息4．保存网页，预览效果5.2表格的应用案例5-2用表格工具制作网页案例小结：表格主要是由行和列以及行列交叉处的单元格构成，利用行和列的合并、拆分功能，可以制作出各种形式的表格。在用表格制作页面之前，一定要先对这个页面进行规划设计，最好画出草图，标出每一部分的

5、尺寸，结合这个尺寸准备好图片等素材，或者根据找到的素材尺寸来修改规划的草图，这样才能在制作网面的过程中井井有条。如果希望制作的页面在不同分辨率的屏幕上显示时都位于屏幕的中间，就要在设计时将表格的对齐方式设为居中对齐。合并和拆分单元格的操作是最为常用的表格操作，一定要多多练习，熟练掌握。嵌套表格时一定要好好进行规划，由外向内开始设计。通过属性面板还可以对表格进行多种设置，这些操作只有多加练习才能运用自如。5.2表格的应用案例5-2用表格工具制作网页课堂小练习：将本节实例中的图书换成你最喜欢的图书资料，制作出新的网页。5.2表格的应用案例5-

6、3使用布局表格工具制作网页制作出一个名为“我的音乐盒”的网页，使用布局表格进行设计。【案例分析】这次的案例不仅使用前面学到的普通表格设计，而且还要尝试一种在新在布局模式下，使用布局表格对页面进行规划。仔细分析这个页面，可以看出，它主要是由logo栏、名称栏、导航条、左侧项目区、右侧内容区和下方的版权联系区共6个部分组成，那么在设计时，就可以结合这个特点来进行操作。5.2表格的应用案例5-3使用布局表格工具制作网页【操作步骤】（演示操作）1．新建文档2．进入布局模式，绘制表格3．切换回标准模式，插入图像，输入文字信息4．保存网页，预览效果5

7、.2表格的应用案例5-3使用布局表格工具制作网页案例小结：在布局模式中，使用布局表格设计页面，避免了使用表格时“规规矩矩”的感觉和不够灵活的缺点，而是通过鼠标的拖动就可以画出需要大小的单元格。布局模式的使用使设计页面布局更加方便、快捷、灵活。当然，使用哪一种工具并不是固定的，在具体设计网页的时候，要结合实际情况和自己的使用习惯来决定选择表格还是布局表来进行页面的布局。课堂小练习：将本次实例中的内容换成你最喜欢的音乐，制作出自己的“音乐盒”。5.2表格的应用层是一种网页元素定位技术，使用它可以为页面元素精确定位。层可以放置在页面上的任意位置

8、，也就是说，层可以在页面中随意移动和定位，比表格更加灵活方便。在层里面，可以放置文本、图像等对象。而且，利用层还可以实现网页的部分重叠效果，这在表格中是不能做到的。除了可以定位外，利用层还可以