2.2页面布局(课件）-高二《网页设计与制作》同步教学（北京理工版）

任务二　页面布局　 一、常见网页布局结构 １.“Ｔ” 型布局 所谓“Ｔ” 型布局就是指页面顶部为横条网站标志和广告条, 下方左面为主菜单, 右面显示内容的布局. 因为菜单背景颜色较深, 整体效果类似英文字母“Ｔ”, 所以称之为“Ｔ” 型布局. 这是网页设计中用得最广泛的一种布局方式. 这种布局的优点是页面结构清晰、主次分明, 是初学者最容易上手的布局方法. 缺点是形式太过规矩呆板, 如果细节色彩上不注意, 很容易让人产生审美疲劳. ２.“口” 型布局 这是一个象形的说法. 一般页面上下各有一个广告条, 左面是主菜单, 右面是友情链接等, 中间是主要内容, 整体效果类似于“口” 字, 所以称之为“口” 型布局. 这种布局的优点是充分利用版面, 信息量大. 下一页 返回 任务二　页面布局　 缺点是页面拥挤, 不够灵活. 也有将四边空出, 只用中间的窗口型设计. ３.“三” 型布局 这种布局多用于国外站点, 国内使用的不多. 特点是页面上横向两条色块, 将页面整体分割为四部分, 色块中大多放广告条. ４.对称对比布局 顾名思义, 采取左右或者上下对称的布局, 一半深色, 一半浅色, 一般用于设计型站点. 优点是视觉冲击力强, 缺点是实现左右或上下两部分的有机结合比较困难. ５.ＰＯＰ 布局 ＰＯＰ 引自广告术语, 就是指页面布局像一张宣传海报, 以一张精美图片作为页面的设计中心, 常见于时尚类站点. 优点显而易见是漂亮且引人注目, 缺点是速度慢, 但作为版面布局还是值得借鉴的. 上一页 下一页 返回 任务二　页面布局　 二、健康美丽网站页面布局制作 制作网页之前要对网页的风格、网页的布局、内容的呈现进行构思与设计, 确定网页的布局. 其中标题部分显示健康美丽网站的名称, 一般用较大的字体或图片制作,导航部分通过超链接的方式显示不同的栏目, 方便访问者浏览,左下部分通过图片显示网站的信息, 右侧是主要的显示区域, 显示网站的主要内容,网站的最下面显示版权信息和联系方式. １) 通过表格对网页进行布局. 选择“插入” → “表格” 命令, 在弹出的“表格” 对话框中, 设置表格为１ 行１ 列、“表格宽度” 为８６０ 像素、“边框粗细” 为０、“单元格边距” 为０、“单元格间距” 为０, 如图２ －８ 所示. 单击“确定” 按钮, 完成表格的插入,选择表格, 在属性面板中设置表格居中对齐, 如图２ －９ 所示. 上一页 下一页 返回 任务二　页面布局　 ２) 在上述表格中插入１ 行２ 列的表格, 并在第一个单元格中插入图像. 将光标定位到单元格中, 选择“插入” → “图像” 命令, 弹出如图２ －１０ 所示的“选择图像源文件”对话框. 在对话框中选择需要插入的图像, 如“关注健康关注美丽”. 单击“确定” 按钮, 弹出“图像标签辅助功能属性” 对话框, 继续单击“确定” 按钮, 图像即可被插入到网页中, 如图２ －１１ 所示. ３) 设计导航. 在第二个单元格中插入一个１ 行５ 列的表格(方法同上), 选择单元格, 在每个单元格中分别插入“首页” “时尚前线” “健康新闻” “美丽新闻” “饮食文化” 图片, 如图２ －１２ 所示. ４) 继续按要求插入表格, 插入图片, 布局页面的中间部分. 效果如图２ －１３ 所示. 上一页 下一页 返回 任务二　页面布局　 ５) 至此, 导航栏目及正文部分设置完成. 按Ｆ１２ 键或执行菜单命令“文件” → “在浏览器中预览”, 浏览网页效果, 如图２ －１４ 所示. 上一页 返回 图２ －８　“表格” 对话框 返回 图２ －９　“表格” 属性面板 返回 图２ －１０“选择图像源文件” 对话框 返回 图２ －１１　插入图片 返回 图２ －１２　插入导航图片 返回 图２ －１３　表格布局效果 返回 图２ －１４　健康美丽网站效果图 返回 $