80《动态网页设计与制作实用教程(第二版)》第11章PPT课件
合集下载
电子教案 《动态网页设计与制作实用教程(第二版)》-程伟渊
出
菜单中的“页面属性”选项，激活属性设置面板，如图所示，设置完毕单 击
“确定”按钮。
第10章 Dreamweaver 8基础知识
（3）编辑网页元素。在网页上添加文本、图片、表格等网页元素。 （4）在网页中加注释。
1）选中插入注释的位置。 2）选择“插入/注释”菜单，在窗口中输入注释内容。 3）编辑注释：双击页面中的注释图标即可进入编辑界面。 （5）保存网页，选择“文件/保存”菜单，给网页命名并存入相应文件夹。
第11章 设计页面布局
本章学习导读
在编辑网页前应该首先对网页进行整体布 局设置。合理
的布局使网页看起来美观大方，并且便于网 页元素的插入与
编辑。本章主要讲述在 Dreamweaver 8中利用 表格、布局
视图、框架和层等可视化设计工具进行页面 布局的过程。通
过本章学习，读者应该掌握以下内容：
第11章 设计页面布局
第11章 设计页面布局
2．向单元格中添加内容 可以像Word等文本编辑器一样在表格单
元格中添加文 本和图像等元素。
3．导入表格式数据 可以将在另一个应用程序（例如Microsoft
Excel）中 创建的表格式数据导入到 Dreamweaver 8中
并设置为表格
第11章 设计页面布局
11.1.2 表格的编辑 1．选择表格元素
图像、文本或媒体等项目。在开始开发站点前，请确保收集了所有这些项
目并做好了准备。否则，可能为找不到一幅图像而中断开发过程。
第10章 Dreamweaver 8基础知识
10.2.2 本地站点的建立与编辑 1．创建本地文件夹
本地文件夹是Dreamweaver 8站点的工作目录。此文件夹可以位于 本地计算机上，也可以位于网络服务器上，它是为 Dreamweaver 8站 点存储“过程”文件的位置。本地文件夹的结构要满足站点的设计和规划 要求。
菜单中的“页面属性”选项，激活属性设置面板，如图所示，设置完毕单 击
“确定”按钮。
第10章 Dreamweaver 8基础知识
（3）编辑网页元素。在网页上添加文本、图片、表格等网页元素。 （4）在网页中加注释。
1）选中插入注释的位置。 2）选择“插入/注释”菜单，在窗口中输入注释内容。 3）编辑注释：双击页面中的注释图标即可进入编辑界面。 （5）保存网页，选择“文件/保存”菜单，给网页命名并存入相应文件夹。
第11章 设计页面布局
本章学习导读
在编辑网页前应该首先对网页进行整体布 局设置。合理
的布局使网页看起来美观大方，并且便于网 页元素的插入与
编辑。本章主要讲述在 Dreamweaver 8中利用 表格、布局
视图、框架和层等可视化设计工具进行页面 布局的过程。通
过本章学习，读者应该掌握以下内容：
第11章 设计页面布局
第11章 设计页面布局
2．向单元格中添加内容 可以像Word等文本编辑器一样在表格单
元格中添加文 本和图像等元素。
3．导入表格式数据 可以将在另一个应用程序（例如Microsoft
Excel）中 创建的表格式数据导入到 Dreamweaver 8中
并设置为表格
第11章 设计页面布局
11.1.2 表格的编辑 1．选择表格元素
图像、文本或媒体等项目。在开始开发站点前，请确保收集了所有这些项
目并做好了准备。否则，可能为找不到一幅图像而中断开发过程。
第10章 Dreamweaver 8基础知识
10.2.2 本地站点的建立与编辑 1．创建本地文件夹
本地文件夹是Dreamweaver 8站点的工作目录。此文件夹可以位于 本地计算机上，也可以位于网络服务器上，它是为 Dreamweaver 8站 点存储“过程”文件的位置。本地文件夹的结构要满足站点的设计和规划 要求。
网页设计与制作使用教程第11章
注：插入单选钮的HTML代码为＜INPUT type="radio" name="..." value="..."＞ 选中该单选钮，在属性面板中进行相应的属性设置
单选按钮：该名称是存储该域的值（选定值）的变量 名，必须在该表单内唯一。要保证数据的准确采集， 单选钮都是以组为单位使用的，在同一组中的单选钮 必须用同一个名称。 选定值：定义该单选钮的值。当选中该单选钮时，此 “选定值”就随表单一起提交，作为该单选钮的当前 值。 初始状态：在浏览器中首次载入该表单时该单选钮的 状态。如果选择“已勾选”，则该单选钮一加载就是 选中状态
注：多个复选框可以共用一个名称，一个复选框名称变量也可以 拥有多个值（多个值在提交时用逗号隔开）。多个复选框可以共用一 个名称时，被选中的多个复选框的值将作为该复选框名称变量的当前 值提交到服务器
（4）单选钮 单选钮允许用户在待选项中选择唯一的答案。 在新建的表单内点击鼠标，确定插入位置，然后点击插入 面板上的按钮 ，插入一单选钮
注意：1. 如果要处理表单数据，我们需要在服务器端（
即放置网页的远程计算机上）编写程序（如ASP程序）， 这部分内容已经超出了本书的范围，有兴趣的同学可以 参考其他的动态网页编程的书籍，后面我们只是对多种 动态网页技术做个简单的介绍。
2．具体使用哪种数据发送方式取决于服务器类型，可以 询问管理员来决定。如果方式任意，默认是Get方法，大 部分HTML设计者偏好使用Post方法。
，所输入的文本被替换为星号或项目符号，以隐藏该文 本，保护这些信息不被看到。
当文本框的类型设置为“多行”时，属性面板发生变 化，即文本框从“文本字段”变为“文本区域” 其属性设置和“单行”类型相似，只是更新了2个属性
网页设计与制作第11章 使用行为
11.2 行为基本操作
11.2.1 【行为】面板 11.2.2 添加行为 11.2.3 编辑行为
11.2.1 【行为】面板
Dreamweaver CS6提供了一个专门管理和编辑行为的工具面板，即【行 为】面板。通过【行为】面板，用户可以方便地为文本、图像等页面对象添 加行为，还可以修改以前设置过的行为参数。选择菜单命令【窗口】/【行 为】，可打开【行为】面板。 使用【行为】面板可将行为附加到页面元素。已附加到当前所选页面 元素的行为显示在【行为】面板列表中，并按事件以字母顺序列出。如果同 一事件引发不同的行为，这个行为将按执行顺序在【行为】面板中显示。如 果行为列表中没有显示任何行为，则表示没有行为附加到当前所选的页面元 素。
11.1.2
事件
事件是由浏览器生成的消息，它提示该页的浏览者已执行了某种操作。 例如，当浏览者将鼠标光标移到某个链接上时，浏览器将为该链接生成一 个onMouseOver事件，然后浏览器检查在当前页面中是否应该调用某段 JavaScript代码进行响应。不同的页面元素定义不同的事件。例如，在大多 数浏览器中，onMouseOver和onClick是与超级链接关联的事件，而onLoad 是与图像和文档的body部分关联的事件。
11.2.3
编辑行为
编辑行为的方法是，首先选择一个附加有行为的对象，然后在 【行为】面板中根据具体情况进行以下相应操作： • 如果要编辑动作的参数，可在【行为】面板的行为列表中双 击动作的名称，或将其选中并按Enter键，也可单击鼠标右键，在弹 出的快捷菜单中选择【编辑行为】命令，打开相应的对话框，在对 话框中更改参数并确认即可。 • 如果要更改给定事件的多个动作的顺序，可在【行为】面板 的行为列表中选择某个动作，然后单击 或 按钮。 • 如果要删除某个行为，可在【行为】面板的行为列表中将其 选中，然后单击 按钮或按Delete键即可。
网页设计与制作课件第11章
项目十一 创建பைடு நூலகம்动设备网页
3
相关知识
一、初识jQuery Mobile
jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。 jQuery是继prototype之后又一个优秀的Javascript库。jQuery兼容CSS 3和各种浏览器，其核心理念是 “write less，do more”（写得更少，做得更多）。 jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、 选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此之外，jQuery提供API让开发者 编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。 jQuery Mobile是jQuery在手机和平板设备上的版本。它不仅能给主流移动平台带来jQuery核心库，而且能 发布一个完整统一的jQuery移动UI框架，支持全球主流的移动平台。
项目十一 创建移动设备网页
4
三、网页的本质 1．jQuery Mobile的基本特性
一般简单性：该框架简单易用。页面开发主要使用标记，无需或仅需很少JavaScript。 优雅降级：尽管jQuery Mobile利用最新的HTML 5、CSS 3和JavaScript，但并不是所有移动设备都 提供这样的支持。jQuery Mobile的哲学是同时支持高端和低端设备（比如那些没有JavaScript支持的设
步骤 01
启动Dreamweaver CC，选择 “文件”>“新建”菜单，打 开“新建文档”对话框，在 对话框左侧列表中选择“新 建文档”，在“文档类型” 列表中选择“HTML”，右侧
3
相关知识
一、初识jQuery Mobile
jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。 jQuery是继prototype之后又一个优秀的Javascript库。jQuery兼容CSS 3和各种浏览器，其核心理念是 “write less，do more”（写得更少，做得更多）。 jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、 选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此之外，jQuery提供API让开发者 编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。 jQuery Mobile是jQuery在手机和平板设备上的版本。它不仅能给主流移动平台带来jQuery核心库，而且能 发布一个完整统一的jQuery移动UI框架，支持全球主流的移动平台。
项目十一 创建移动设备网页
4
三、网页的本质 1．jQuery Mobile的基本特性
一般简单性：该框架简单易用。页面开发主要使用标记，无需或仅需很少JavaScript。 优雅降级：尽管jQuery Mobile利用最新的HTML 5、CSS 3和JavaScript，但并不是所有移动设备都 提供这样的支持。jQuery Mobile的哲学是同时支持高端和低端设备（比如那些没有JavaScript支持的设
步骤 01
启动Dreamweaver CC，选择 “文件”>“新建”菜单，打 开“新建文档”对话框，在 对话框左侧列表中选择“新 建文档”，在“文档类型” 列表中选择“HTML”，右侧
《网页设计与制作》教案-第11讲 布局技术-层AP Div
第11讲布局技术-层AP Div1.1教学目标：◆知识目标1.理解层的作用2.掌握层的各种基本操作◆技能目标能运用层进行布局，能设置层的重叠与嵌套，能合理操作层◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：1.掌握层的各种基本操作1.3 教学难点理解层的作用和操作。
1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：一、激趣导入，揭示课题层是一种HTML页面元素，可以将其定位在页面上的任意位置。
层可以包含文本、图像或其他任何可在HTML文档正文中放入的内容。
通过Dreamweaver MX 2004，可以使用层来设置页面的布局。
可以将层前后放置，隐藏某些层而显示其他层，以及在屏幕上移动层。
还可以在一个层中放置背景图像，然后在该层的前面放置第二个层，利用层不仅可以非常灵活地放置内容，还可以根据不同的设置，实现相应的动态效果。
二、层的操作层可以理解为浮动在网页上的一个页面，它可以准确地定位在页面上的任意位置，并可以规定它的大小。
通过层可以对网页进行精确定位。
不仅如此，通过对层与行为的综合使用，还可以创作出赏心悦目的动作效果。
层可以包含文本、图像或其它任何可在网页中放置的内容。
层可以重叠，并且可以改变重叠次序，因此可以在网页上实现内容的重叠效果；可以动态地设定层的显示或隐藏，实现层内容的动态交替显示等特殊的显示效果；层可以嵌套，子层会遗传父层的特征，例如可见性，位置移动等。
0.1新建层用Dreamweaver可以方便地在页面上创建层并精确地将层定位。
建立新层的步骤：●在编辑窗口的“插入”栏的“布局”选项卡中，选取“描绘层”按钮，如图2-95所示。
或者执行“插入/布局对象/层”命令。
《网页设计与制作》 第11章 行为
11.2 行为面板
在Dreamweaver 8中，用户可以通过使用【行 为】面板来附加和编辑行为。选择菜单命令 【窗口】行为】或者使用Shift＋F4快捷键即可 打开【行为】控制面板
图中各代号的名称和功能如下：
（1）显示设置事件按钮将显示当前元素已经附加到当前文档的事 件 （2）显示所有事件按钮将显示当前元素所有可能事件，一般来说， 浏览器的版本越高，可支持的事件就越多 （3）添加行为按钮单击该按钮将弹出一个活动菜单 （4）删除事件按钮用于在行为列表中删除所选的事件和动作 （5）增加事件值按钮用于在行为列表中向上移动所选的事件 （6）降低事件值按钮用于在行为列表中向下移动所选的事件
导航工具栏：包括“前进”和“后退”等按钮的工具栏； 地址工具栏：帮助用户输入地址或进行链接的工具栏； 状态栏：位于浏览器窗口底部的区域，根据操作的不同，在该区域显示 相应的提示信息； 菜单条：在浏览器窗口上显示菜单的区域。如果要让用户能够从新窗口 导航，应该选中此项，否则在新窗口中，用户只能关闭或最小化窗口； 需要时使用滚动条：指定如果内容超出可视区域是否显示滚动条，如果 不选择此项，则不显示滚动条，如果“调整大小手柄”选项也关闭，则 访问者将无法看到超出窗口原始大小以外的内容； 调整大小手柄：指定是否能够调整窗口的大小，如果未选定此项，则新 窗口将无法改变大小，也无法拖动其边框改变大小； 窗口名称：指定新窗口的名称。如果想通过JavaScript使用链接指向新窗 口或者控制新窗口，则应该对新窗口进行命名，此名称不能包含空格或 特殊字符。
有关鼠标和键盘的事件
OnClick用鼠标单击选定元素的一瞬间发生的事件 OnBlur鼠标指针移到窗口或帧外部，即在这种非激活 状态下发生的事件 OnDragDrop拖动并放置选定元素的那一瞬间发生的 事件 OnFocus鼠标指针移动到窗口或帧上，即激活之后发 生的事件OnMouseOut鼠标指针经过选定元素之外时 发生的事件OnMouseOver鼠标指针位于选定元素上 方时发生的事件OnMouseUp单击鼠标右键，然后释 放时发生的事件
网页设计与制作教程第11章 光影世界前台页面
images目录：存放网站的所有图片。 css目录：存放CSS样式文件，实现内容和样式的分离。 js目录：存放JavaScript脚本文件。 admin目录：存放网站后台管理程序。
11.2 设计首页布局
11.2.2 页面布局规划 首页的显示效果如图11-2所示，布局示意图如图11-3所示。
11.3 首页的制作
网页设计与制作教程 （HTML+CSS+JavaScript）
第2版
第11章 光影世界前台页面
机械工业出版社
11.1 网站的开发流程
11.1.1 规划站点
1．规划站点目标 （1）确定建站的目的 （2）确定目标用户 （3）确定网站的内容 2．使用合理的文件夹保存文档 3．使用合理的文件名称 4．本地站点结构与远端站点结构保持相同
作品欣赏列表页用于展示客户上传的作品，页面效果如图11-13所示，布 局示意图如图11-14所示。
11.5 制作新闻动态列表页
制作新闻动态列表页
新闻动态列表页用于展示网站最新发布的新闻，包括左侧的新闻分类列表、 客户服务信息和右侧的新闻列表，页面效果如图11-16所示，布局示意图如图 11-17所示。
11.1 网站的开发流程
11.1.2 网站制作
完整的网站制作包括以下两个过程： 1．前台页面制作 当网页设计人员拿到美工效果图以后，编写HTML、CSS，将效果图转换 为.html网页，其中包括图片收集、页面布局规划等工作。 2．后台程序开发 后台程序开发包括网站数据库设计、网站和数据库的连接、动态网页编程 等。
11.1 网站的传到服务器之前，要先在本地对其测试。可以通过运行站点报 告来测试整个站点并解决出现的问题。
测试网页主要从以下3个方面着手。 页面的效果是否美观。 页面中的链接是否正确。 页面的浏览器兼容性是否良好。
11.2 设计首页布局
11.2.2 页面布局规划 首页的显示效果如图11-2所示，布局示意图如图11-3所示。
11.3 首页的制作
网页设计与制作教程 （HTML+CSS+JavaScript）
第2版
第11章 光影世界前台页面
机械工业出版社
11.1 网站的开发流程
11.1.1 规划站点
1．规划站点目标 （1）确定建站的目的 （2）确定目标用户 （3）确定网站的内容 2．使用合理的文件夹保存文档 3．使用合理的文件名称 4．本地站点结构与远端站点结构保持相同
作品欣赏列表页用于展示客户上传的作品，页面效果如图11-13所示，布 局示意图如图11-14所示。
11.5 制作新闻动态列表页
制作新闻动态列表页
新闻动态列表页用于展示网站最新发布的新闻，包括左侧的新闻分类列表、 客户服务信息和右侧的新闻列表，页面效果如图11-16所示，布局示意图如图 11-17所示。
11.1 网站的开发流程
11.1.2 网站制作
完整的网站制作包括以下两个过程： 1．前台页面制作 当网页设计人员拿到美工效果图以后，编写HTML、CSS，将效果图转换 为.html网页，其中包括图片收集、页面布局规划等工作。 2．后台程序开发 后台程序开发包括网站数据库设计、网站和数据库的连接、动态网页编程 等。
11.1 网站的传到服务器之前，要先在本地对其测试。可以通过运行站点报 告来测试整个站点并解决出现的问题。
测试网页主要从以下3个方面着手。 页面的效果是否美观。 页面中的链接是否正确。 页面的浏览器兼容性是否良好。
动态网页设计与制作实用教程PPT共157页
动态网页设计与制作实用教程
51、没有哪个社会可以制订一部永远 适用的 宪法， 甚至一 条永远 适用的 法律。 ——杰 斐逊 52、法律源于人的自卫本能。——英 格索尔
53、人们通常会发现，法律就是这样 一种的 网，触 犯法律 的人， 小的可 以穿网 而过， 大的可 以破网 而出， 只有中 等的才 会坠入 网中。 ——申 斯通 54、法律就是法律它是一座雄伟的大 夏，庇 护着我 们大家 ；法律未必明天仍是法律。 ——罗·伯顿
66、节制使快乐增加并使享受加强。 ——德 谟克利 特 67、今天应做的事没有做，明天再早也 是耽误 了。——裴斯 泰洛齐 68、决定一个人的一生，以及整个命运 的，只 是一瞬 之间。 ——歌 德 69、懒人无法享受休息之乐。——拉布 克 70、浪费时间是一桩大罪过。——卢梭
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
本章学习导读 编辑。本章主要讲述在 Dreamweaver 8 过本章学习，读者应该掌握以下内容：
1
第11章 设计页面布局
11.1 使用表格对页面进行布局 表格是用在HTML页上显示表格式数据以及对文本和图
形进行布局的强有力的工具。表格由一行或多行组成，每行 又由一个或多个单元格组成。在创建表格之后，可以方便地 修改其外观和结构。
6
第11章 设计页面布局
5．添加和删除行和列 添加、删除行和列应首先确定操作的位置，即选定当前的行或列。 （1）添加及删除行和列，可以使用“修改/表格”子菜单中的命令。 （2）若要一次添加多行或多列，或者在当前单元格的下面添加行或在其 右边添加列，请选择“修改/表格/插入行或列”菜单，此时会出现“插入
表格一样对嵌套表格进行格式设置，但是，其宽度受它所在单元格宽度的 限制。 8．剪切、拷贝和粘贴单元格
可以一次剪切、拷贝或粘贴单个单元格或多个单元格，并保留单元 格的格式设置。
8
第11章 设计页面布局
11.1.3 对表格进行排序 可以根据单个列的内容对表格中的行进行排序，还可以
根据两个列的内容执行更加复杂的表格排序。但不能对包含 COLSPAN或ROWSPAN属性的表格（即包含合并单元格的 表格）进行排序。
行或 列”对话框。在该对话框中输入必要的信息，然后单击“确定”按钮。 （3）清除完整的行或列时，可以直接按Delete键，整个行或列将从表格 中删除。
6．拆分或合并单元格 拆分或合并单元格可使用“修改/表格”子菜单中的命令。
7
第11章 设计页面布局
7．嵌套表格 嵌套表格是放置在另一个表格的单元格中的表格，可以像对其他任何
“布局模式”按钮。在“设计”视图的顶部显示一个标有“布局模式”的 绿色
栏，指示当前正处于“布局”模式中。如果页面上存在表格，则它们显示 为布局表格。
11
第11章 设计页面布局
11.2.3 绘制布局单元格和表格 在布局模式中，可以在页面上直接绘制布局单元格和布局表格。当不
在布局表格中绘制布局单元格时，Dreamweaver 8会自动创建一个布局表 格以容纳该单元格。布局单元格不能存在于布局表格之外。
2．向单元格中添加内容 可以像Word等文本编辑器一样在表格单元格中Байду номын сангаас加文
本和图像等元素。 3．导入表格式数据
可以将在另一个应用程序（例如Microsoft Excel）中 创建的表格式数据导入到 Dreamweaver 8中并设置为表格 的格式
3
第11章 设计页面布局
11.1.2 表格的编辑 1．选择表格元素
9
第11章 设计页面布局
11.2 在布局模式中对页面进行布局
11.2.1 布局模式简介 在布局模式中，可以在添加内容之前对页面进行布局。例如，可以沿
页的顶部绘制一个单元格放置标题图形，在页的左边绘制另一个单元格放 置导航条，在右边绘制第三个单元格放置内容。
当不在布局表格中绘制布局单元格时，Dreamweaver 8会自动创建 一个布局表格以容纳该单元格。布局单元格不能存在于布局表格之外。可 以在一个布局表格中使用多个布局单元格对页进行布局，这是进行Web 页布局最常用的方法，也可以使用多个布局表格进行更复杂的布局。
11.1.1 创建表格 1．插入表格
可以使用“插入”栏或“插入”菜单来创建一个新表格，具体步骤 如下： （1）在文档窗口的设计视图中，将插入点放在需要表格的位置。 （2）单击“插入”栏“常用”类别中的“表格”按钮，或选择“插入/ 表格”菜 单。 （3）按需要设置表格参数，完成表格的创建。
2
第11章 设计页面布局
可以一次选择整个表、行、列或在表格中选择一个连续的单元格块， 还可以选择表格中多个不相邻的单元格并修改这些单元格的属性。 （1）选择整个表格：单击表格的左上角或者单击右边或底部边缘的任 意位置。 （2）选择行或列：首先定位鼠标指针使其指向行的左边缘或列的上边 缘，当鼠标指针变为选择箭头时，单击选择行或列，或拖动选择多个行 或列。 （3）选择矩形的单元格块：将鼠标从一个单元格拖到另一个单元格。 （4）选择不相邻的单元格：按住 Ctrl 键的同时单击要选择的单元格、 行或列，则该单元格会被选中。如果它已经被选中，则再次单击会将它 从选择中删除。
说明：当Dreamweaver自动创建布局表格时，该表格最初显示为填 满整个设计视图，即使我们更改文档窗口的大小也是如此。这种全窗默认 布局表格使我们可以在设计视图中的任意位置绘制布局单元格。可以将该 表格设置为特定的大小，方法是单击表格边框，然后拖动表格的调整大小 控制点。
12
第11章 设计页面布局
4
第11章 设计页面布局
2．设置表格和单元格的格式 可以通过设置表格及表格单元格的属性或将预先设置的
设计应用于表格来更改表格的外观。若要设置表格中文本的 格式，可以对所选的文本应用格式设置或使用样式。 3．调整表格的大小
通过拖动选择控制点可以调整整个表格或单个行和列的 大小，当调整整个表格的大小时，表格中的所有单元格按比 例更改大小。 4．更改列宽和行高
10
第11章 设计页面布局
11.2.2 布局模式的切换 在绘制布局表格或布局单元格之前，必须先切换到布局模式。 布局模式的切换操作如下： （1）如果“设计”视图不可见，请选择“查看/设计”或“查看/代码和
设计” 菜单。在代码视图中不能启用或禁用布局模式。
（2）选择“查看/表格模式/布局模式”菜单或单击插入栏“布局”类别 中的
通过使用属性检查器或拖动列或行的边框，可以更改列 宽或行高。还可以使用代码视图直接在HTML代码中更改单 元格的宽度和高度。
5
第11章 设计页面布局
5．元件的应用 在场景中应用元件包括应用本影片元件库中的元件和应用其他影片
元件库中的元件。应用本影片元件库中的元件，应先打开元件库面板， 将相应的元件用鼠标拖入场景工作区。应用其他影片中的元件应该先通 过菜单“文件/作为库打开”打开相应的元件库，再应用其中的元件。
11.2.4 向布局单元格中添加内容 在布局模式中可以将文本、图像和其他内容添加到布局单元格中。但
在布局模式中不能向布局表格的空白（灰色）区域插入内容，因此在添加 内容之前，必须先创建布局单元格，当添加内容的宽度大于布局单元格时 ，该单元格自动扩展。 11.2.5 布局单元格的调整
1
第11章 设计页面布局
11.1 使用表格对页面进行布局 表格是用在HTML页上显示表格式数据以及对文本和图
形进行布局的强有力的工具。表格由一行或多行组成，每行 又由一个或多个单元格组成。在创建表格之后，可以方便地 修改其外观和结构。
6
第11章 设计页面布局
5．添加和删除行和列 添加、删除行和列应首先确定操作的位置，即选定当前的行或列。 （1）添加及删除行和列，可以使用“修改/表格”子菜单中的命令。 （2）若要一次添加多行或多列，或者在当前单元格的下面添加行或在其 右边添加列，请选择“修改/表格/插入行或列”菜单，此时会出现“插入
表格一样对嵌套表格进行格式设置，但是，其宽度受它所在单元格宽度的 限制。 8．剪切、拷贝和粘贴单元格
可以一次剪切、拷贝或粘贴单个单元格或多个单元格，并保留单元 格的格式设置。
8
第11章 设计页面布局
11.1.3 对表格进行排序 可以根据单个列的内容对表格中的行进行排序，还可以
根据两个列的内容执行更加复杂的表格排序。但不能对包含 COLSPAN或ROWSPAN属性的表格（即包含合并单元格的 表格）进行排序。
行或 列”对话框。在该对话框中输入必要的信息，然后单击“确定”按钮。 （3）清除完整的行或列时，可以直接按Delete键，整个行或列将从表格 中删除。
6．拆分或合并单元格 拆分或合并单元格可使用“修改/表格”子菜单中的命令。
7
第11章 设计页面布局
7．嵌套表格 嵌套表格是放置在另一个表格的单元格中的表格，可以像对其他任何
“布局模式”按钮。在“设计”视图的顶部显示一个标有“布局模式”的 绿色
栏，指示当前正处于“布局”模式中。如果页面上存在表格，则它们显示 为布局表格。
11
第11章 设计页面布局
11.2.3 绘制布局单元格和表格 在布局模式中，可以在页面上直接绘制布局单元格和布局表格。当不
在布局表格中绘制布局单元格时，Dreamweaver 8会自动创建一个布局表 格以容纳该单元格。布局单元格不能存在于布局表格之外。
2．向单元格中添加内容 可以像Word等文本编辑器一样在表格单元格中Байду номын сангаас加文
本和图像等元素。 3．导入表格式数据
可以将在另一个应用程序（例如Microsoft Excel）中 创建的表格式数据导入到 Dreamweaver 8中并设置为表格 的格式
3
第11章 设计页面布局
11.1.2 表格的编辑 1．选择表格元素
9
第11章 设计页面布局
11.2 在布局模式中对页面进行布局
11.2.1 布局模式简介 在布局模式中，可以在添加内容之前对页面进行布局。例如，可以沿
页的顶部绘制一个单元格放置标题图形，在页的左边绘制另一个单元格放 置导航条，在右边绘制第三个单元格放置内容。
当不在布局表格中绘制布局单元格时，Dreamweaver 8会自动创建 一个布局表格以容纳该单元格。布局单元格不能存在于布局表格之外。可 以在一个布局表格中使用多个布局单元格对页进行布局，这是进行Web 页布局最常用的方法，也可以使用多个布局表格进行更复杂的布局。
11.1.1 创建表格 1．插入表格
可以使用“插入”栏或“插入”菜单来创建一个新表格，具体步骤 如下： （1）在文档窗口的设计视图中，将插入点放在需要表格的位置。 （2）单击“插入”栏“常用”类别中的“表格”按钮，或选择“插入/ 表格”菜 单。 （3）按需要设置表格参数，完成表格的创建。
2
第11章 设计页面布局
可以一次选择整个表、行、列或在表格中选择一个连续的单元格块， 还可以选择表格中多个不相邻的单元格并修改这些单元格的属性。 （1）选择整个表格：单击表格的左上角或者单击右边或底部边缘的任 意位置。 （2）选择行或列：首先定位鼠标指针使其指向行的左边缘或列的上边 缘，当鼠标指针变为选择箭头时，单击选择行或列，或拖动选择多个行 或列。 （3）选择矩形的单元格块：将鼠标从一个单元格拖到另一个单元格。 （4）选择不相邻的单元格：按住 Ctrl 键的同时单击要选择的单元格、 行或列，则该单元格会被选中。如果它已经被选中，则再次单击会将它 从选择中删除。
说明：当Dreamweaver自动创建布局表格时，该表格最初显示为填 满整个设计视图，即使我们更改文档窗口的大小也是如此。这种全窗默认 布局表格使我们可以在设计视图中的任意位置绘制布局单元格。可以将该 表格设置为特定的大小，方法是单击表格边框，然后拖动表格的调整大小 控制点。
12
第11章 设计页面布局
4
第11章 设计页面布局
2．设置表格和单元格的格式 可以通过设置表格及表格单元格的属性或将预先设置的
设计应用于表格来更改表格的外观。若要设置表格中文本的 格式，可以对所选的文本应用格式设置或使用样式。 3．调整表格的大小
通过拖动选择控制点可以调整整个表格或单个行和列的 大小，当调整整个表格的大小时，表格中的所有单元格按比 例更改大小。 4．更改列宽和行高
10
第11章 设计页面布局
11.2.2 布局模式的切换 在绘制布局表格或布局单元格之前，必须先切换到布局模式。 布局模式的切换操作如下： （1）如果“设计”视图不可见，请选择“查看/设计”或“查看/代码和
设计” 菜单。在代码视图中不能启用或禁用布局模式。
（2）选择“查看/表格模式/布局模式”菜单或单击插入栏“布局”类别 中的
通过使用属性检查器或拖动列或行的边框，可以更改列 宽或行高。还可以使用代码视图直接在HTML代码中更改单 元格的宽度和高度。
5
第11章 设计页面布局
5．元件的应用 在场景中应用元件包括应用本影片元件库中的元件和应用其他影片
元件库中的元件。应用本影片元件库中的元件，应先打开元件库面板， 将相应的元件用鼠标拖入场景工作区。应用其他影片中的元件应该先通 过菜单“文件/作为库打开”打开相应的元件库，再应用其中的元件。
11.2.4 向布局单元格中添加内容 在布局模式中可以将文本、图像和其他内容添加到布局单元格中。但
在布局模式中不能向布局表格的空白（灰色）区域插入内容，因此在添加 内容之前，必须先创建布局单元格，当添加内容的宽度大于布局单元格时 ，该单元格自动扩展。 11.2.5 布局单元格的调整