DW-第3章页面的布局.ppt

页面标题 网页Banner 导航栏 主内容区 网页标志 页脚版权信息 3.3.2常见的网页布局类型 “国”字型布局： “国”字型布局，最上面是网站的标志、广告以及导航栏，接下来是网站的主要内容，左右分别列出一些栏目，中间是主要部分，最下部是网站的一些基本信息（页脚版权信息），这种结构是国内一些大中型网站常用的布局方式，其优点是充分利用版面，信息量大，缺点是页面显得拥挤，不够灵活。 “国”字型布局如图所示： 页脚版权信息 3.3.2 “厂”字型布局 “厂”字型结构布局，是指页面顶部为标志+广告条，下方左面为主菜单，右面显示正文信息，整体效果类似“厂”字，所以称之为“厂”字型布局。 3.3.2 “框架”型布局 “框架”型布局一般分成上下或左右布局，一栏是导航栏目，一栏是正文信息。 3.3.2 “封面”型布局 “封面”型布局一般应用在网站的主页或广告宣传页上。 3.3.2 “FLASH”型布局 这种布局跟“封面”型的布局结构类似，不同的是页面采用了Flash技术，动感十足，可以大大增强页面的视觉效果。 任务1表格布局实例 任务2表格布局实例 任务3表格布局实例 任务4表格布局实例 任务5表格布局实例 任务5表格布局实例 任务6表格布局实例 Dreamweaver 网页制作 主讲：孙洪娟 第3章 页面的布局 本章任务目标 3.1了解表格的基本概念 3.2表格的基本操作 3.3页面布局方法 3.4实例 3.1表格 3.1.1 什么是表格？ 表格是网页设计中非常重要的元素之一，它不仅可以将相关数据有序地排列在一起，还可以精确地定位文字、图像、表单等网页元素在网页中的位置。使得页面在形式上丰富多彩又条理清楚，在组织井然有序页不显单调。使用表格进行页面布局的最大好处是，即使浏览器者改变计算机分辨率也不会影响网页的浏览效果。 3.1.2表格的组成元素 行：表格中的水平间隔 列：表格中的垂直间隔 单元格：表格中一行与一列相交所产生的区域 3.2表格的基本操作 3.2.1 插入表格的操作步骤如下： 1、将光标定位在要插入表格的位置处。 2、选择菜单栏中的【插入】【表格】命令【Ctrl+Alt+T】快捷键； 3、在【插入】工具栏中选择【常用】标签，单击其中的 按钮； 弹出【表格】对话框（如图） 3.2.2表格的选项设置 【行数】和【列】：用于设置插入表格的行数和列数。 【表格宽度】：用于设置表格的宽度，选择“像素”为单位时，表格的宽度为固定像素的宽度；选择“百分比”为单位时，表格的宽度与浏览器窗口的宽度将保持相同的百分比。 【边框粗细】：用于设置表格的边框宽度 【单元格边距】：用于设置表格中单元格内的元素距离单元格边框的距离。 【单元格间距】：用于设置表格中单元格之间的间距。 【标题】：用于设置表头的位置，分别为无、左、顶部、两者。 辅助功能中的【标题】：用于设置表格标题，该标题在表格的外侧。 【摘要】：用于描述表格的相关信息。 3.2.3编辑表格 选择整个表格： 1、将光标指向表格边框，单击鼠标，可以选择整个表格。 2、单击状态栏上的table标记，也可以选择整个表格。 选择一列单元格： 将光标指向表格的上边框，当光标变为形状时单击鼠标，可以选择一列单元格。 连续的多列单元格： 按住鼠标左键左右拖曳，可以选择连续的多列单元格。 3.2.3编辑表格 选择一行单元格； 1、将光标指向表格的左边框，当光标变为形状时单击鼠标，可以选择一行单元格。 2、单击状态栏上的tr标记，可以选择光标所在的一行单元格。 连续的多行单元格； 按住鼠标左键上下拖曳，可以选择连续的多行单元格。 二者之间的连续单元格； 将光标定位在一个单元格中，按住Shift键的同时单击另外一个单元格，可以选择二者之间的连续单元格。 不连续的单元格； 按住 Ctrl键的同时单击其它单元格，可以选择多个不连续的单元格。另外，单击标签，可以选择光标所在的单元格。 3.2.4表格属性设置 【表格】：用于设置表格的名称。 【行】和【列】：用于设置表格的行数和列数。 【宽】：用于设置表格的宽度，单位为“百分比”或“像素”。 【填充】：用于设置单元格中的内容与边框之间的距离。 【间距】：用于设置单元格之间的距离。 【对齐】：用于设置表格在网页中的对齐方式，可以选择“默认”、“左对齐”、“居中对齐”或“右对齐”等方式。 3.2.4表格属性设置 【边框】：用于设置表格外边框的宽度。 【类】：用于设置表格的CSS样式。 单击　　按钮，可以取消单元格的宽度设置，使其宽度随单元 格的内容自动缩放。 单击　　按钮，可以取消单元格的高度设置，使其高度随单元格的内容自动调整。 单击　　按钮，可以将表格宽度转换为像素。 单击　　按钮，可以将表格宽度转换为百分比。 3.2.5表格插入删除行和列