5.1 网站页面布局（课件）-高二《网页设计与制作》同步教学（人民邮电版）

第5章 网站布局 技能目标 5.1网站页面布局 5.2表格的应用 5.3层的运用 5.4 框架的使用 技能目标 了解常用网页内容的组成要素 了解常见网页的布局方式 掌握表格的基本操作，并能使用表格进行页面布局的设计 掌握层的使用方法，利用层对页面元素进行定位 掌握框架的使用方法，能够使用框架对页面进行设计 网页设计是否美观，直接影响到客户对网站的第一感觉。在网页设计的各种要素中，网页布局设计是其中的重要一项。网页布局设计就是在页面内对组成网页的基本元素进行合理地组织安排，使网页更便于阅读和理解，看起来美观、清晰。虽然内容是网站的灵魂，但访问者不愿意看到只注重内容的站点，只有当网页排版和网页内容成功结合时，才是真正受人欢迎的网站。 5.1 网站页面布局 页面尺寸 由于访问者计算机配置的不同，浏览网页时的显示模式也会有所区别。现在使用较多的是800×600和1024×768的分辨率，所以在设计网页时，就要考虑使用这两种分辨率。在800×600的屏幕显示模式下，IE窗口内能看到的部分为780×428个像素；而在分辨率是1024×768的模式下，页面的显示尺寸应为1007×600个像素。这两种尺寸都是按照在浏览时网页正好占满整个屏幕的情况而定的，当一屏显示不完时，页面上会出现垂直和水平的滚动条，通过对滚动条的拖动，可以查看到所有的内容。 页面组成 页头 网页标志 导航栏 内容板块 页脚 页面布局 上下型 左右型 混合型 5.1 网站页面布局 表格是页面布局中极为有用的设计工具，它为网页带来了结构的概念，可以控制文本和图形在页面上出现的位置，使网页上的各个元素排列的井然有序。现在几乎所有的大型网站的主页都是用表格来进行布局的，网页设计者们已经把表格当作页面布局最有力的工具之一。 5.2 表格的应用 案例5-2 用表格工具制作网页 设计并制作出一个名为“书香文轩”的网页，使用 表格作为布局工具，如图所示为制作完成的页面。 5.2 表格的应用 案例5-2 用表格工具制作网页 【案例分析】制作网页之前，首先要对其进行布局规 划，本例中的页面可以划分为页头、主体、页脚三部 分。我们可以考虑用3～4个大的表格来实现它。 5.2 表格的应用 案例5-2 用表格工具制作网页 【操作步骤】（演示操作） 1．新建文档 2．绘制表格，设置表格属性 表格的基本操作：插入表格 合并单元格 拆分单元格 3．插入图像，输入文字信息 4．保存网页，预览效果 5.2 表格的应用 案例5-2 用表格工具制作网页 案例小结： 表格主要是由行和列以及行列交叉处的单元格构成，利用行和列的合并、拆分功能，可以制作出各种形式的表格。 在用表格制作页面之前，一定要先对这个页面进行规划设计，最好画出草图，标出每一部分的尺寸，结合这个尺寸准备好图片等素材，或者根据找到的素材尺寸来修改规划的草图，这样才能在制作网面的过程中井井有条。 如果希望制作的页面在不同分辨率的屏幕上显示时都位于屏幕的中间，就要在设计时将表格的对齐方式设为居中对齐。 合并和拆分单元格的操作是最为常用的表格操作，一定要多多练习，熟练掌握。 嵌套表格时一定要好好进行规划，由外向内开始设计。 通过属性面板还可以对表格进行多种设置，这些操作只有多加练习才能运用自如。 5.2 表格的应用 案例5-2 用表格工具制作网页 课堂小练习： 将本节实例中的图书换成你最喜欢 的图书资料，制作出新的网页。 5.2 表格的应用 案例5-3 使用布局表格工具制作网页 制作出一个名为“我的音乐盒”的网页，使用布局 表格进行设计。 【案例分析】这次的案例不仅使用前面学到的普通表 格设计，而且还要尝试一种在新在布局模式下，使用 布局表格对页面进行规划。仔细分析这个页面，可以 看出，它主要是由logo栏、名称栏、导航条、左侧项 目区、右侧内容区和下方的版权联系区共6个部分组 成，那么在设计时，就可以结合这个特点来进行操 作。 5.2 表格的应用 案例5-3 使用布局表格工具制作网页 【操作步骤】（演示操作） 1．新建文档 2．进入布局模式，绘制表格 3．切换回标准模式，插入图像，输入文字信息 4．保存网页，预览效果 5.2 表格的应用 案例5-3 使用布局表格工具制作网页 案例小结： 在布