周欣然《网页设计技术与应用》第5章　表格与网页布局简介 2013.pptVIP

第5章 表格与网页布局简介 5.1??表格基本操作 5.2??用表格布局页面 5.3??页面布局理论 5.1??表格的基本操作 2）分割网页（区块划分），网页布局。 5.1??表格的基本操作 1 插入表格 　　菜单【插入】｜【表格】命令，或单击【插入】面板栏中的【常用】组中的【表格】按钮 表格、行、单元格的标签 5.1??表格的基本操作 5.1??表格的基本操作 5.1??表格的基本操作 6 扩展视图 　 “扩展视图”模式使得编辑表格更方便。 “扩展视图”的主要作用是临时向文档中所有表格添加单元格的边距和间距，并且增加表格的边框，这样可以使编辑操作更加简单。利用这种模式，可以选择表格中的项目或精确地定位光标。 5.2??用表格布局页面 1 足球明星网页综述 5.2??用表格布局页面 每个区采用一个(或多个)表格，设定表格宽度、居中对齐、框线宽度等（不用大表格）。 信息区可采用嵌套的表格。 在单元格中插入子表格时，为了让子表格占满整个单元格，可设其 width=“100%”。 空白单元格可起到间隔作用 5.3??页面布局理论 1 网页布局原则 三个大原则： 连贯，是指要注意页面的相互关系。 统一，是指网页设计作品的整体性，一致性。 分割，是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了然。 5.3??页面布局理论 2 网页布局类型 5.3??页面布局理论 5.3??页面布局理论 5.3??页面布局理论 5.3??页面布局理论 5.3??页面布局理论 3 页面构成 5.3??页面布局理论 4 页面布局方法 1）纸上布局法 在开始制作网页时，先在纸上画出页面的布局草图来。 2）软件布局法 利用软件来完成布局。如可用Photoshop的图像编辑功能设计网页布局。 5.3??页面布局理论 5 页面布局技术 1) 表格布局（框线宽度为0） 页面文件小时，用一个表格存放内容。 ………很大时，则从上到下放几个宽度相同的表格，分别放不同的内容。 优势：操作方便，在定位图片和文本上比起用CSS更加方便。 缺点：下载大表格时可能出现要等待的现象，网页标签代码量多，通信量大。 改版麻烦。 建议：少用。 2) 框架布局 框架可以把多个页面有机地整合在一起并同时显示在浏览器窗口中。 3) DIV+CSS布局 WEB 2.0采用的网页布局标准，可布局复杂页面，广泛采用。 实 验 1. 效果 总 结 * 网页中表格功能 1）组织排列文字、数据，在网页的某个局部定位网页元素。 5.1??表格的基本操作 table width=274 border=1 cellpadding=0 cellspacing=0 tr td A1 /td td B1 /td /tr tr td A2 /td td B2 /td /tr /table 选定不连续的多个单元格方法：Ctrl + 鼠标拖拽 2　选定表格、单元格、行、列 方法一：单击标签选择器中的相应标签 方法二：用鼠标拖拽 方法三：使用菜单命令 3　修改表格结构 行、列的增减，单元格的合并、拆分 选定对象后，用快捷菜单、属性面板、窗口菜单均可 4　表格的嵌套 在单元格 中 插入 表格 5　表格属性 、单元格属性设置 框线宽、颜色、线型， 间距(单元格间)， 填充间距 区域背景颜色，对齐方式，…… 设置方法： 1）可视化操作（利用属性面板） 2）代码视图直接设置属性值 table border=1 table style= border-bottom-color:#F00; border-bottom-width:10px 精确控制 在“插入”面板组的“布局”类型中，可看到“标准”、“扩展”视图按钮 用表格进行布局排版，使照片整齐地显示于页面之中。 表格框线宽度：0 表2、3单元格中又嵌套了表格。 制作步骤： 1）页面属性设置。 2）页眉区表格制作。 3）主要信息区域表格设计 4）插入图片并添加说明文字 5）制作版权信息 右信息区 中信息区 页脚区/ 版权区 左信息区 导航栏区 页眉区 2 表格布局一般结构 “国”字型 拐角型 标题正文型 左右框架型 上下框架型 综合框架型 封面型 Flash型 变化型 “国”字型 拐角型 标题正文型