《表格布局页面》PPT课件.ppt

《《表格布局页面》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《表格布局页面》PPT课件.ppt（55页珍藏版）》请在装配图网上搜索。

1、第四章表格布局页面,本章重点：表格的基本操作、应用表格布局（标准视图下）、布局表格视图的使用，在表格及单元格中输入各种网页元素的方法，表格格式化等操作方法。,第四章表格布局页面,4.1创建网站相册初识表格 4.2表格的基本操作 4.3网页的页面布局 4.4 使用表格的其他视图 4.5 应用表格布局页面 4.6 实战演练我的第一页 附：制作流行表格,4.1 创建网站相册初识表格,4.1.1 案例综述 使用Dreamweaver 8中提供的【创建网站相册】命令，自动生成足球明星页photo.htm。从中使读者初步认识表格的基本操作方法及其作用。,4.1 创建网站相册初识表格,4.1.2 案例分析

2、使用【创建网站相册】命令创建的Photo.htm页是采用表格布局，将图片的缩略图排列在网页中的。 表格的修改和美化 表格的插入 添加或删除行列 拆分合并单元格等基本操作,4.1 创建网站相册初识表格,4.1.3 实现步骤 一、创建网站像册 方法： 1、将需制作相册的图片放在源图像文件夹中，同时建立一个空目标文件夹，用来存放系统生成的图片和文件。 2、执行 “命令|创建网站相册”命令 3、在【创建网站相册】对话框中输入相应的参数，即可。,4.1.3 实现步骤 二、网站相册的修改 方法： 选择“页面属性”，可以进行文字、背景、颜色，以及表格的一些修改。 三、相册表格的美化 选择“命令|格式化表格”

3、命令。,4.1 创建网站相册初识表格,4.2表格的基本操作,4.2.1 插入表格 【插入】【表格】命令，或单击【插入】栏中的【常用】类型中的【插入表格】按钮,理解单元格，表格，间距，填充，边框。,居中插入一行一列表格，各项值如图：,4.2表格的基本操作,理解表格、单元格：,4.2表格的基本操作,4.2表格的基本操作,理解表格边框、单元格边框、间距：,为了便于观看填充的效果，在属性面板中，填充输入为30。,理解填充：单元格边框和内容之间的距离就是填充。,4.2表格的基本操作,表格包括行、列、单元格3个组成部分 。 1、选定整个表格 2、选定行或列 3、选定单元格,4.2.2选定表格和单元格,4.

4、2表格的基本操作,1、选定表格鼠标拖动 。,4.2.3调整表格的大小,4.2表格的基本操作,2、调整行和列的宽度,鼠标放在一列的上面，出现向下的箭头时，单击，就可以选中一列。在属性面板中可以设置所选列的宽和高。,4.2表格的基本操作,4.2.4 设置表格和单元格的属性 设置表格属性 设置单元格属性,4.2表格的基本操作,4.2.5 添加/删除行列 通过表格【属性】面板增加与删除表格的行和列 通过【修改】菜单完成增加与删除表格的行和列,4.2表格的基本操作,4.2表格的基本操作,4.2.6单元格的合并和拆分 1、合并单元格 按Ctrl，点单元格，选中表格，在属性面板中点“合并所选单元格，使用跨度

5、”。,4.2表格的基本操作,2、拆分单元格 在单元格中单击，选中单元格。点击属性面板中的“拆分单元格为行或列”，设置拆分方式。,4.2表格的基本操作,拆分后的效果,4.2表格的基本操作,4.2.7单元格的复制、粘贴、移动和清除 在设计网页时，可以一次复制、粘贴、移动和清除一个或多个单元格。操作方法如下： 在网页编辑窗口中选中要复制的对象 复制按Ctrl+C，或【编辑】【复制】命令。 移动按Ctrl+X，或【编辑】【剪切】命令。 粘贴按Ctrl+V，或【编辑】【粘贴】命令。 拖动按住Ctrl拖，则完成复制操作。直接拖曳可完成对象的操作。 清除按Delete，或【编辑】【清除】命令。,4.2表格的

6、基本操作,4.2.8 表格的嵌套 嵌套表是在表格中的一个表格。在一个单元格中，插入一个表格，就是嵌套表。 将光标插入当前表格的某个单元格中，然后可选择【插入】【表格】命令，或单击【插入】栏的【常用】类型中的【插入表格】按钮,4.3网页的页面布局,4.3.1 网页布局类型 “国”字型 拐角型 标题正文型 左右框架型 上下框架型 综合框架型 封面型 Flash型 变化型,4.3网页的页面布局,4.3.2 关于第一屏 一般来讲，在800600的屏幕显示模式(这也是最常用的)下，在IE安装后默认的状态(即工具栏地址栏等没有改变)下，IE窗口内能看到的部分为778px435px.,4.3网页的页面布局,

7、4.3.3 有关导航栏的位置 一般来讲，导航栏要在“第一屏”能显示出来，但是有时第一屏可能会小于上面所说的435px，基于这点考虑，那种横向放置的导航栏要优于纵向的导航栏考虑,4.3网页的页面布局,4.3.4 什么样的布局是最好的 如果内容非常多，就要考虑用“国字型”或拐角型； 如果内容不算太多而一些说明性的东西比较多，则可以考虑标题正文型； 那几种框架结构的一个共同特点就是浏览方便，速度快，但结构变化不灵活； 而如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采，封面性是首选； Flash型更灵活一些，好的Flash大大丰富了网页，但是它不能表达过多的文字信息。,4.3网页的页面布

8、局,一、页面的主要内容： LOGO（标志） Banner（横幅） 导航栏 网页内容 版权声明,4.3网页的页面布局,1、页眉区设计 几种国际尺寸的Banner：46860(全尺寸Banner)，39272（全尺寸带导航条Banner），23460（半尺寸按钮）。 LOGO: 16771 2、导航栏形式 导航栏在网页的设计中，直接关系到使用网页的方便，和整个网页的美观也有很大关系。 导航栏有： 横排的 竖排的 也有两种都有的。,4.3网页的页面布局,二、网页结构分析 这是一个主页的简单结构，由三个表格组成。 第一个表格，二行一列，第一行放LOGO和Banner,第二行放导航菜单。 第二个表格，放

9、网页内容。 第三个表格，放版权信息。,4.3网页的页面布局,常见的分栏结构，还有三分栏，四分栏。下面是一个三分栏的结构：,4.3网页的页面布局,三、表格初始设置 做一个在800600分辨率下满屏幕显示的页面，可以大致选择一个近似的值：“宽768高430”，“宽776高430”等。 用像素为单位的表格，大多是把表格设置为居中对齐。选中表格，在属性面板选择对齐方式为居中对齐。,四、表格布局要领 完全下载一个表格的内容，才能在IE中显示出来。 如果页面文件小，可以只有一个表格放内容。 如果页面文件很大，则从上到下放几个宽度相同的表格，分别放不同的内容，如图所示,4.3网页的页面布局,4.4使用表格的

10、其他视图,Dreamweaver 8提供了标准视图、扩展视图、布局视图3种视图模式。通常使用的是标准视图，可通过插入栏的“布局”类别，切换到布局视图或扩展视图。,点“布局” 切换到布局视图,4.4使用表格的其他视图,4.4.1 扩展视图 扩展视图的主要作用是临时向文档中的所有表格添加单元格的边距和间距，并且增加表格的边框，这样可以使编辑操作更加容易 。,4.4使用表格的其他视图,4.4.2 布局视图 在“布局视图”方式下利用表格进行网页排版设计更为直观方便。通过鼠标自由拖拽就可绘制任意的表格布局，且可自由移动。,4.4使用表格的其他视图,4.4.3 创建布局表格和布局单元格 1、绘制布局表格

11、2、绘制布局单元格 3、移动布局表格和布局单元格,4.4使用表格的其他视图,1、创建布局表格和布局单元格 当不在布局表格中绘制布局单元格时，会自动创建一个布局表格以容纳该单元格。布局单元格不能存在于布局表格之外。 插入栏“布局”“绘制布局单元格” ，拖动指针以创建布局单元格。 插入栏“布局”“绘制布局表格”, 拖动指针以创建布局单元格。 绘制嵌套布局表格：将一个布局表格绘制在另一个布局表格中，创建嵌套表格。 Ctrl“绘制布局单元格（或表格）”连续创建布局单元格（或表格）。,4.4使用表格的其他视图,2、移动布局单元格和表格及调整它们的大小 调整布局单元格的大小： 选择一个单元格，按住 Ctr

12、l 键的同时单击该单元格中的任何位置，该单元格周围出现选择控制点。拖动选择控制点来调整单元格的大小。,4.4使用表格的其他视图,2、移动布局单元格和表格及调整它们的大小 调整布局表格的大小：通过单击表格顶部的标签选择一个表格。该表格周围出现选择控制点。拖动选择控制点来调整表格的大小。,4.4使用表格的其他视图,2、移动布局单元格和表格及调整它们的大小 移动布局单元格: 按住 Ctrl 键的同时单击该单元格中的任何位置, 将该单元格拖到其布局表格中的另一个位置。按箭头键每次移动 1 个像素。Shift 箭头键每次移动10 个像素。,4.4使用表格的其他视图,2、移动布局单元格和表格及调整它们的大

13、小 移动布局表格: 通过单击表格顶部的标签选择一个表格。该表格周围出现选择控制点。 将表格拖到页上的另一个位置。(只有当布局表格嵌套在另一个布局表格中时，才可以移动该布局表格)。,4.4使用表格的其他视图,4.4.4设置布局表格和单元格属性 1、设置布局表格属性 2、设置布局单元格的属性,4.5应用表格布局页面布局案例,4.5.1 案例综述 本例使用表格进行页面布局，从中使读者掌握以下知识要点 1 表格在用于页面布局时的属性设置。 2 表格的嵌套。 3 表格细线的制作。,4.5应用表格布局页面布局案例,信息区为三个嵌套的表格 其他区均为宽度一致的独立表格,4.5.2 案例分析,4.5应用表格布

14、局页面布局案例,4.5.3 实现步骤 一、设计页眉区 T1：33表宽778 页面属性：左、上边距均为0 可插入固定大小占位符，以方便排版。,4.5应用表格布局页面布局案例,二、设计导航栏区 T 2：217表宽778 栏目间的分隔符用，也可用其他特殊符号。 第二行用于间隔。,4.5应用表格布局页面布局案例,三、设计信息区 T3：13表宽778 1.设置左右内容区 T31：21表，宽100%，表格边框为1，白色。 第1格高15，第2格高163，单元格边框为1，绿色。 第1格：背景图像，输入栏目名 第2格：输入栏目的具体内容 复制T31表至左、右内容区。,4.5应用表格布局页面布局案例,三、设计信息

15、区 2.设计主内容区 T32：23表，宽100%，边框为0，边距为0，间距为0 第一行：设置各单元格背景图像，输入栏目名称 第二行：合并第二行 T321：在第二行插入11表，宽100%，边框为1，白色，单元格边框为1，绿色。 拆分T321为2列，第一列输入具体内容，第二列设置132145的图像占位符。 复制和T32表，更名，并添加内容,4.5应用表格布局页面布局案例,四、设计版权区 T4：21表，宽778，边框为0，边距为0，间距为0 第一行：插入水平线 第二行：输入相关版本信息,4.6 实战演练,一、实战演练“我的第一页”,4.6 实战演练,二、实战要求 用表格布局 插入网页元素 初识CSS

16、样式,附：制作流行表格,1、制作细线框表格： 实质上是设置间距的大小和颜色。实例为便于观看效果，把间距设置为10。单元格填充和边框设置为0。单元格填充和边框不输入数值效果类似。,附：制作流行表格,选中表格，设置表格的背景颜色为黑色。一个10象素宽的表格就做好了。实际上是把间距的颜色设置成了黑色。,单元格背景为白色,附：制作流行表格,将表格间距改为1后即做成细线表格,附：制作流行表格,2、制作间隔表格 所谓间隔表格，就是单元格之间存在一定的距离，看上去，每个单元格自成一体。此时要用到前面所讲的嵌套表格。 操作方法如下： 插入22表格，边框粗细为0，单元格边距为1，单元格间距为4。 选择所有单元格，设置其背景色为“#0000ff”(此为间隔表格的边框色） 在每个单元格内插入11表格，宽高皆为100%，边框粗细为0，间距为0。 设置内嵌套表格背景色为白色“#FFFFFF”,实战演练流行表格制作技巧,