第5章　表格与网页布局简介课件.ppt

第5章 表格与网页布局简介 5.1??表格的基本操作 网页中表格功能 1）组织排列文字、数据，在网页的某个局部定位网页元素。 2）分割网页（区块划分），网页布局。 5.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　选定表格、单元格、行、列 方法一：单击标签选择器中的相应标签 方法二：用鼠标拖拽 方法三：使用菜单命令 5.1??表格的基本操作 3　修改表格结构 行、列的增减，单元格的合并、拆分 选定对象后，用快捷菜单、属性面板、窗口菜单均可 4　表格的嵌套 在单元格 中 插入 表格 5　表格属性 、单元格属性设置 5.1??表格的基本操作 框线宽、颜色、线型， 间距(单元格间)， 填充间距 区域背景颜色，对齐方式，…… 设置方法： 1）可视化操作（利用属性面板） 2）代码视图直接设置属性值 table border=1 table style= border-bottom-color:#F00; border-bottom-width:10px 精确控制 5.1??表格的基本操作 6 扩展视图 　 “扩展视图”模式使得编辑表格更方便。 “扩展视图”的主要作用是临时向文档中所有表格添加单元格的边距和间距，并且增加表格的边框，这样可以使编辑操作更加简单。利用这种模式，可以选择表格中的项目或精确地定位光标。 在“插入”面板组的“布局”类型中，可看到“标准”、“扩展”视图按钮 1 足球明星网页综述 5.2??用表格布局页面 用表格进行布局排版，使照片整齐地显示于页面之中。 表格框线宽度：0 表2、3单元格中又嵌套了表格。 制作步骤： 1）页面属性设置。 2）页眉区表格制作。 3）主要信息区域表格设计 4）插入图片并添加说明文字 5）制作版权信息 5.2??用表格布局页面 每个区采用一个(或多个)表格，设定表格宽度、居中对齐、框线宽度等（不用大表格）。 信息区可采用嵌套的表格。 在单元格中插入子表格时，为了让子表格占满整个单元格，可设其 width=“100%”。 空白单元格可起到间隔作用 页眉区 导航栏区 左信息区 中信息区 右信息区 页脚区/ 版权区 2 表格布局一般结构 5.3??页面布局理论 1 网页布局原则 三个大原则： 连贯，是指要注意页面的相互关系。 统一，是指网页设计作品的整体性，一致性。 分割，是指将页面分成若干小块，小块之间有视觉上的不同，这样可以使观者一目了然。 5.3??页面布局理论 2 网页布局类型 “国”字型 拐角型 标题正文型 左右框架型 上下框架型 综合框架型 封面型 Flash型 变化型 5.3??页面布局理论 “国”字型 5.3??页面布局理论 拐角型 5.3??页面布局理论 标题正文型 5.3??页面布局理论 左右框架型 上下框架型 5.3??页面布局理论 3 页面构成 1）页面尺寸： 分辨率为800×600：页面的显示尺寸为：780×428个象素； ……… 1024×768：……………………：1007×600。 页眉区 导航栏区 左信息区 中信息区 右信息区 页脚区 2）页眉区：页面主题，站点 名字的图片（Logo）、公司标志、旗帜广告（Banner）。 3）导航栏：指向下级网站或网页，导航栏一定要清晰、醒目，一般来讲，导航栏要在第一屏能显示出来。 4）信息区：主要内容。 5）页脚区：放置制作者或公司信息，称为版权信息；或各种经营业务许可号、ICP备案号等。 4 页面布局方法 1）纸上布局法 在开始制作网页时，先在纸上画出页面的布局草图来。 2）软件布局法 利用软件来完成布局。如可用Photoshop的图像编辑功能设计网页布局。 5.3??页面布局理论 5 页面布局技术 1) 表格布局（框线宽度为0） 页面文件小时，用一个表格存放内容。 ………很大时