HTML网页布局设计.ppt

《HTML网页布局设计.ppt》由会员分享，可在线阅读，更多相关《HTML网页布局设计.ppt（15页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第7章章 HTML网网页布局布局设计7.1 网页布局类型网页布局类型7.2 使用布局模式使用布局模式7.3 应用框架布局网页应用框架布局网页7.1.1“国国”字型字型7.1 网页布局类型“国”字型布局是一种常见的网页布局类型。这种布局类型是在网页的上下各设计一个通幅广告条，左面是主菜单或导航条，右面是友情链接或其他链接的内容，中间是网页的主要内容。这样布局可以充分利用网页的版面，信息量大。7.1.2“厂厂”字型字型7.1 网页布局类型“厂”字型布局是在网页的上部放置Logo和Banner，在网页的左边放置导航条与其他链接，在网页的右下方放置网页的主要内容。这种布局的好处是网页的各个部分布局非

2、常集中，可以在一个区域突出网页的重要内容。网页中的内容主次分明，很有层次感。7.1.3“框架框架”型型7.1 网页布局类型“框架”型布局是指以框架网页的形式实现网页的布局。框架网页的功能是将浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。这样框架就可以实现网页的布局。与其他的网页布局类型不同的是，其他的网页布局都是在一个网页上实现。而框架布局是在几个不同的网页上实现布局，然后通过框架网页集合在一起。7.1.4“封面封面”型型7.1 网页布局类型“封面”型布局一般出现在网站的首页，页面上通常是一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”链接，甚至直接在首

3、页的图片上设计链接。“封面”型布局的网页结构常常很简单，需要使用精美的封面效果来体现网页的内容。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绘制

4、网页底部布局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相对链接目标_top2绝对链接目标7.3.5 课堂实例课堂实例用框架设计网页用框架设计网页7.3 应用框架布局网页网页共分4个框架，顶部为标题部分，左侧为导航部分，右侧为主体部分，底部为版权说明部分。浏览网页时可以通过单击左侧导航栏中的链接切换主体部分的网页内容。1创建框架网页2编辑各框架内的网页文档3制作其他需要调用至主框架的网页文件4定义框架之间的超链接本章习题本章习题上机练习上机练习