第07章HTML网页布局设计.ppt

第7章 HTML网页布局设计 7.1 网页布局类型 7.2 使用布局模式 7.3 应用框架布局网页 7.1.1　“国”字型 7.1 网页布局类型 “国”字型布局是一种常见的网页布局类型。这种布局类型是在网页的上下各设计一个通幅广告条，左面是主菜单或导航条，右面是友情链接或其他链接的内容，中间是网页的主要内容。这样布局可以充分利用网页的版面，信息量大。 7.1.2　“厂”字型 7.1 网页布局类型 “厂”字型布局是在网页的上部放置Logo和Banner，在网页的左边放置导航条与其他链接，在网页的右下方放置网页的主要内容。这种布局的好处是网页的各个部分布局非常集中，可以在一个区域突出网页的重要内容。网页中的内容主次分明，很有层次感。 7.1.3　“框架”型 7.1 网页布局类型 “框架”型布局是指以框架网页的形式实现网页的布局。框架网页的功能是将浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。这样框架就可以实现网页的布局。与其他的网页布局类型不同的是，其他的网页布局都是在一个网页上实现。而框架布局是在几个不同的网页上实现布局，然后通过框架网页集合在一起。 7.1.4　“封面”型 7.1 网页布局类型 “封面”型布局一般出现在网站的首页，页面上通常是一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”链接，甚至直接在首页的图片上设计链接。“封面”型布局的网页结构常常很简单，需要使用精美的封面效果来体现网页的内容。 7.2.1 在布局模式下绘制表格 7.2 使用布局模式 1．切换布局模式 2．绘制布局表格 3．绘制布局单元格 4．绘制嵌套布局表格 7.2.2 设置布局表格 7.2 使用布局模式 1．设置布局表格的大小 2．设置布局表格自动伸展 7.2.3 设置布局单元格 7.2 使用布局模式 1．设置布局单元格的位置 2．设置布局单元格内容的格式 3．为布局单元格添加间隔图像 7.2.4 课堂实例——用布局表格设计网站主页 7.2 使用布局模式 1．绘制网页顶部布局 2．布局网页主体部分布局 3．绘制网页底部布局 7.3.1 课堂实例——用框架布局一个简单页面 7.3 应用框架布局网页 1．建立框架集 2．保存框架和框架集 3．理解框架集HTML代码 7.3.2 创建框架和框架集 7.3 应用框架布局网页 1．创建新的空预定义框架集 2．在现在有文档中创建预定义的框架集 3．拆分和删除框架 不能通过拖动边框完全删除一个框架集。要删除一个框架集，必须关闭显示它的“文档”窗口。如果该框架集文件已保存，则删除该文件。 7.3.3 设置框架和框架集的属性 7.3 应用框架布局网页 1．选中框架和框架集 1）在设计视图窗口中选择 2）在“框架”面板中选择 2．设置框架的属性 3．设置框架集的属性 7.3.4 框架集中的超链接 7.3 应用框架布局网页 1．相对链接目标_top 2．绝对链接目标 7.3.5 课堂实例——用框架设计网页 7.3 应用框架布局网页 网页共分4个框架，顶部为标题部分，左侧为导航部分，右侧为主体部分，底部为版权说明部分。浏览网页时可以通过单击左侧导航栏中的链接切换主体部分的网页内容。 1．创建框架网页 2．编辑各框架内的网页文档 3．制作其他需要调用至主框架的网页文件 4．定义框架之间的超链接 本章习题 上机练习 *