1、第十二课第十二课用表格为网页布局一、规划主页页面布局一、规划主页页面布局常见的网站主页构成图标题栏网站版权说明等栏目栏目栏目栏目标题栏网站版权说明等栏目栏目栏目栏目居中型居中型半包围型半包围型主题突出型主题突出型导航栏型导航栏型网站版权说明等导航一主题图导航二 导航三 导航四标题栏网站版权说明等网页内容导航一导航二导航三导航四导航五 标题栏标题栏 导航栏导航栏网页内容网页内容网站版权说明等网站版权说明等导航栏型导航栏型导航栏导航栏 网站版权说明等网站版权说明等 标题栏标题栏半包围型半包围型标题栏标题栏 导航栏导航栏网站版权说明等网站版权说明等居中型居中型导航栏导航栏网站版权说明等网站版权说明等
2、主题图主题图主题突出型主题突出型导导航航栏栏标题栏标题栏主题图主题图标题栏标题栏导航栏导航栏网站版权说明等网站版权说明等导航栏导航栏标题栏标题栏网站版权说明等网站版权说明等标题栏标题栏导航栏导航栏网站版权说明等网站版权说明等 那么用什么来为我们的网页布局呢那么用什么来为我们的网页布局呢?二、用表格为主页布局二、用表格为主页布局 表格具有整齐统一、直观明确的表格具有整齐统一、直观明确的优点,在复杂的网页设计中,人们不优点,在复杂的网页设计中,人们不仅用表格显示数据,而且还通过表格仅用表格显示数据,而且还通过表格进行布局,这样可以进行布局,这样可以 有效地控制文字、有效地控制文字、图片等对象的位置
3、,使网页的布局既图片等对象的位置,使网页的布局既紧凑又整齐美观。紧凑又整齐美观。标题栏标题栏导航栏导航栏网页内容网页内容网站版权说明等网站版权说明等标题栏标题栏导航一导航一网页内容网页内容导航二导航二导航三导航三导航四导航四导航五导航五网站版权说明等网站版权说明等任务一:任务一:根据自己的网站主页设计,插入表格。1.设置单元格属性、表格属性。2.设置表格边框线。3.设置表格的高度和宽度。4.设置表格与网页的边距。5.对表格进行拆分与合并。任务二:任务二:用“布局视图”中的模板设计页面任务三:任务三:用“框架布局”网页结构动手尝试:表格运用技巧之表格嵌套表格运用技巧之表格嵌套在原有单元格内再插入表格,使其容纳的文字或图片等元素不会影响其他单元格中的元素位置。例如,在第二行插入1*5表格,可以采用嵌套表格来完成。三、课堂小结三、课堂小结 规划主页页面布局规划主页页面布局1 用表格为主页布局用表格为主页布局2 插入表格插入表格(1 1)调整表格的大小调整表格的大小(3 3)合并、拆分单元格合并、拆分单元格(2 2)(4 4)