信息发布与网页设计 表格与布局.pptVIP

信息发布与网页设计 DREAMWEAVER 信息学院 《信息发布与网页设计》课题组 * 表格与布局 布局的基础知识 创建表格 表格的属性 表格的基本操作 布局视图 布局的基础知识 网页布局是形式，应该为内容服务 网页布局的技术 创建表格 通过菜单命令 通过面板上的按钮 创建表格 表格中输入内容 表格的属性 电子相册 表格的基本操作 选定整个表格 通过菜单命令 通过鼠标单击 通过标签选择 表格的基本操作 选定整行 通过鼠标拖动 通过鼠标单击 通过标签选择 表格的基本操作 选定整列 通过鼠标拖动 通过鼠标单击 表格的基本操作 选定多个不连续单元格 按住Ctrl键选择多个单元格 选定多个连续单元格 通过鼠标拖动 按住shift键选择多个连续单元格 表格的基本操作 添加/删除行或列 使用菜单命令 使用快捷菜单 添加多行或多列 使用菜单命令 使用快捷菜单 表格的基本操作 合并、拆分单元格 使用菜单命令 使用属性面板上的按钮 使用快捷菜单 表格的基本操作 嵌套表格 套用表格样式 导入表格数据（Excel生成数据） 导出表格数据 布局视图 布局视图 通过菜单命令 通过按钮切换 绘制布局表格 绘制布局单元格 层的基本概念 层是一种网页元素定位技术，是DW中最有价值的对象之一，由层叠样式表发展而来，它提供了一种对网页的对象进行有效控制的手段，HTML正文部分放置的元素，都可以放入层中。 层具有如下优点 精确定位 插入自如 加速浏览 可折叠性 工具栏及菜单命令介绍 层属性面板 层的管理面板 层的操作 设置默认层参数 菜单“编辑”、“首选参数” 选择分类中的“层” 设置具体参数 层的插入 菜单：插入-布局对象-层 常用面板的“描绘层”按钮 DW中的层是指用DIV和SPAN标签描述的HTML内容的容器。可以使用插入、拖动等方法创建层或嵌套层。创建复杂页面布局，可以使用层来布局页面。层被插入到网页后，可以进行选择、移动、调整大小、嵌套及删除等操作。 创建层 新建一个文档。设置文本的属性、设置网页的背景等，保存。 使用菜单【插入】、【布局对象】、【层】，插入一个层（该层自动命名为Layer1）。通过层属性面板，设置左（31px）；上（70px）；宽（230px）；高（35px）；Z轴（2）；背景颜色（黄色）等。 创建层 除了插入单个层，还可以插入嵌套层 直接创建嵌套层。在插入一个层之后，将光标放置在该层（父层）内，再通过插入菜单创建新的层（子层）。 将已有的多个层变为子层。使用菜单【窗口】、【层】，打开层浮动面板，选择要作为子层的层。按住Ctrl键，将该层拖动到父层，释放鼠标。 层的一些操作与软件版本关系较大。 在层中插入对象 将光标置于layer1内，插入一个1行2列、边框为0、宽度为100％的表格。 在两个单元格中分别输入“风景图像”、“动物图像”，作为菜单项。设置文本的格式。 选择和移动层 在文档窗口中插入一个新的层，命名为Layer2，在该层中先按回车插入一空行，再输入“风景1”、 “风景2”、 “风景3”，3行内容并居中。设置Z轴（1）、背景颜色。 选择层。单击层的边框或层浮动面板中的名称，使用Shift键可以选择多个层。 选择Layer2层，调整大小，移动到Layer1层“风景图像”的下面。移动方法 拖动边框；拖动选择手柄；调整属性值 复制层和调整层大小 选择层Layer2，复制、粘贴，将名称改为Layer3，其中的“风景”改为“动物”。 在层被复制时，层内的内容将一起复制。 调整大小 使用鼠标拖动的方式调整层的大小 使用属性栏 对齐层 在文档中连续插入6个层，分别命名为scenery1－3和animal1－3，并在这6个层中各插入一幅图像， 分别选择6个层，调整成一样的大小。选择6个层，执行菜单【修改】、【对齐】中的命令。 使用层的技巧 将层转换成表格 使用层能够更方便、精确地将网页内容定位，进行复杂的网页设计。但有的浏览器不支持层的使用，在设计网页时可以先使用层，创建复杂的网页布局，然后再把层布局转换成表格布局，供不支持层的浏览器浏览。 使用层的技巧 新建一个网页，插入四个层，并分别输入文本和图像，如图： 使用层的技巧 执行菜单“修改”、“转换”、“层到表格” 使用层的技巧 设置上面对话框： 最精确 最小 使用透明GIFs 置于页面中央 防止层重叠 显示层面板 显示网格 靠齐到网格 使用层的技巧 表格转换成层 在文档窗口，选择要转换的表格，执行菜单命令“修改”、“转换”、“表格到层”。设置对话框，确定。 使用层的技巧 吸附层到网格 在文档窗口，如果需要对多个层进行调整，可以使用网格精确定位层和调整层的大小。如果使用吸附功能，在移动和调整层的大小时，该层会自动定位到最近的吸附位置。下面通过实例将3个层调整为一