80《动态网页设计与制作实用教程(第二版)》第11章PPT课件
合集下载
网页设计与制作使用教程第11章
注意：1. 如果要处理表单数据，我们需要在服务器端（
即放置网页的远程计算机上）编写程序（如ASP程序）， 这部分内容已经超出了本书的范围，有兴趣的同学可以 参考其他的动态网页编程的书籍，后面我们只是对多种 动态网页技术做个简单的介绍。
2．具体使用哪种数据发送方式取决于服务器类型，可以 询问管理员来决定。如果方式任意，默认是Get方法，大 部分HTML设计者偏好使用Post方法。
虽然用服务器端程序处理表单数据是通用的方法， 但是当我们只需要收集简单的信息时，而不需要及时完 成交互时，我们可以采用电子邮件的方式传送表单信息 。方法为：将“动作”属性设置为“mailto：E-Mail邮箱 名”，“方法”属性设置为“Post”，同时将“MIME类 型”属性设置为“multipart/form-data MIME”。具体效果 读者可以自行尝试。
列表值：在“列表/菜单”中显示的选项值。 单击按 钮 ，弹出“列表值”对话框，
项目标签：在列表中显示的文本。 值：用户选择该项时将发送到服务器的数据。
初始化时选定：在浏览器中首次载入该表单域时，使 列表中的某一项处于选中状态
（6）按钮 按钮分为提交按钮，重置按钮和一般按钮，它们可 以用来提交表单（把表单获取的数据送出到服务器）、 重置表单数据（使所有表单域的值恢复到初始值）和执 行预定义的脚本语句。 在新建的表单内点击鼠标，确定插入位置，然后点 击插入面板上的 的按钮，插入一按钮
动态网页设计与制作实用教程电子教案
第11章 设计页面布局
11.1 使用表格对页面进行布局 11.2 在布局视图中对页面进行布局 11.3 使用框架对页面进行布局 11.4 使用层对页面进行布局
第12章 网页元素的添加与编辑
12.1 添加文本和设置文本格式 12.2 图像的添加与编辑 12.3 媒体的添加与编辑 12.4 表单的添加与编辑
10.2 本地站点的建立
10.2.1 关于站点规划和设计 10.2.2 本地站点的建立与编辑
10.3 网页的建立与保存
在完成了本地站点的定义之后，现在开始建立我们的第一个网页，操作步骤如下： 1.选择网页格式
选择“文件/新建”菜单或使用“标准工具栏”的新建按钮，则打开一个对话窗 口。选择“基本页”中的“HTML”模式。点击右下角的“创建”按钮，打开一个新 的文件窗口。 2. 设置网页属性
7.2.1 Fireworks MX的特点 7.2.2 Fireworks MX 的工作界面 7.2.3 文档的基本操作
7.3 矢量图像的绘制与编辑
7.3.1 图像的绘制模式 7.3.2 矢量图像的绘制 7.3.3 布局工具的使用 7.3.4 标题文字的制作
7.4 修改对像
7.4.1 选择对像 7.4.2 组织和管理对像 7.4.3 整形路径
第8章 位图编辑与动画制作
8.1 位图的编辑 8.2 在Fireworks MX中建立动画实例
动态网页设计与制作实用教程第二版第11章课件
第1111章.1.2 表格设的编计辑 页面布局
1．选择表格元素 可以一次选择整个表、行、列或在表格中选择一个连续的单元格块，
还可以选择表格中多个不相邻的单元格并修改这些单元格的属性。 （1）选择整个表格：单击表格的左上角或者单击右边或底部边缘的任 意位置。 （2）选择行或列：首先定位鼠标指针使其指向行的左边缘或列的上边 缘，当鼠标指针变为选择箭头时，单击选择行或列，或拖动选择多个行 或列。 （3）选择矩形的单元格块：将鼠标从一个单元格拖到另一个单元格。 （4）选择不相邻的单元格：按住 Ctrl 键的同时单击要选择的单元格、 行或列，则该单元格会被选中。如果它已经被选中，则再次单击会将它 从选择中删除。
表格一样对嵌套表格进行格式设置，但是，其宽度受它所在单元格宽度的 限制。
8．剪切、拷贝和粘贴单元格 可以一次剪切、拷贝或粘贴单个单元格或多个单元格，并保留单元
格的格式设置。
动态网页设计与制作实用教程第二版第11章
第11章 设计页面布局
11.1.3 对表格进行排序 可以根据单个列的内容对表格中的行进行排序，
动态网页设计与制作实用教程第二版第11章
第115．章添加和设删除计行和列页面布局
添加、删除行和列应首先确定操作的位置，即选定当前的行或列。 （1）添加及删除行和列，可以使用“修改/表格”子菜单中的命令。 （2）若要一次添加多行或多列，或者在当前单元格的下面添加行或在其 右边添加列，请选择“修改/表格/插入行或列”菜单，此时会出现“插入
网页设计与制作课件第11章
项目十一 创建移动设备网页
5
三、网页的本质 2．jQuery Mobile的浏览器支持
jQuery Mobile 同时支持高端和低端设备，比如那些没有JavaScript支持的设备。持续增强 （Progressive Enhancement）包含以下核心原则：
所有浏览器都应该能够访问全部基础内容。 所有浏览器都应该能够访问全部基础功能。 增强的布局由外部链接的CSS提供。 增强的行为由外部链接的JavaScript提供。 终端用户浏览器偏好应受到尊重。 所有基本内容应该（按照设计）在基础设备上进行渲染，而更高级的平台和浏览器将使用额外的、外 部链接的JavaScript和CSS持续增强。
步骤 01
启动Dreamweaver CC，选择 “文件”>“新建”菜单，打 开“新建文档”对话框，在 对话框左侧列表中选择“新 建文档”，在“文档类型” 列表中选择“HTML”，右侧
保持默认，如图所示。
项目十一 创建移动设备网页
8
三、网页的本质 步骤 02 在“新建文档”对话框中单击“创建”按钮，即创建一个空白HTML 5文档，如下图
项目十一 创建移动设备网页
7
二、创建jQuery Mobile页面
Dreamweaver集成了jQuery Mobile，有助于快速创建适合大部分移动设备的网页程序，并可 以使网页自身适应各类尺寸的设备。“jQuery Mobile页面”组件充当所有其他jQuery Mobile 组件的容器。在新的使用HTML 5的页面中添加“jQuery Mobile页面”组件，可以创建出 jQuery Mobile的页面结构。
网页设计与制作教程PPT课件
外部样式表
通过外部CSS文件引入样式，并 在HTML文档中使用`<link>`标
签引入该文件，如`<link rel="stylesheet" type="text/css"
href="styles.css">`
05 网页布局与排版
网页布局类型
01
02
03
04
固定布局
网页的宽度和位置固定，适合 制作具有固定框架的网站。
数据存储
使用JavaScript的Web存储API，将数据存储在用户的浏览器中， 以便在多个页面或会话之间共享数据。
07 网页优化与发布
网页性能优化
减少页面加载时间
01
通过压缩图片、合并CSS和JS文件、使用CDN等方式，减少页
面加载时间，提高用户体验。
提高页面响应速度
02
使用异步加载和懒加载等技术，提高页面响应速度，减少用户
定期备份网站数据，以防数据丢失。
服务器安全
确保服务器安全稳定，防止被黑客攻击。
网站更新与维护
定期更新网站内容，修复漏洞和维护网站功能。
08 案例分析与实践
案例一：个人网站设计
总结词
展示个性与兴趣
详细描述
个人网站是展示个人特色和兴趣的平台，设计时需注重 个性化元素，如独特的色彩搭配、创意的排版布局以及 与个人风格相符的内容。
动态网页设计与制作实用教程(第二版)-第20章(精)
第20章网页的艺术设计章 20.3 页面元素的编排技巧 1. 大小的对比大小关系是造形要素中最重要的一项，大小关系是造形要素中最重要的一项，几乎可以决定意象与调和的关大小差别少，给人的感觉较为温和，大小的差别大，系。大小差别少，给人的感觉较为温和，大小的差别大，给人的感觉较鲜而且具有强力感。明，而且具有强力感。 2. 明暗的对比阴与阳、正与反、昼与夜等等，阴与阳、正与反、昼与夜等等，此类的对比可使人感觉到日常生活中的明暗关系。对彩度或色相的识别，是色感中最基本的要素。的明暗关系。对彩度或色相的识别，是色感中最基本的要素。 3. 粗细的对比字体愈粗，愈富有男性的气概。若代表时髦与女性，字体愈粗，愈富有男性的气概。若代表时髦与女性，则通常以细字表细字如果份量增多，粗字就应该减少，这样的搭配看起来比较明快。现。细字如果份量增多，粗字就应该减少，这样的搭配看起来比较明快。
第20章网页的艺术设计章 4. 曲线和直线的对比曲线很富有柔和感、缓和感；直线则富坚硬感、锐利感，曲线很富有柔和感、缓和感；直线则富坚硬感、锐利感，极具男性气平常我们并不注意这种关系，可是，当曲线或直线强调某形
状时，概。平常我们并不注意这种关系，可是，当曲线或直线强调某形状时，我们便有了深刻的印象，同时也产生相对应的情感。为加深曲线印象，们便有了深刻的印象，同时也产生相对应的情感。为加深曲线印象，就以一些直线来强调，也可以说，少量的直线会使曲线更引人注目。一些直线来强调，也可以说，少量的直线会使曲线更引人注目。 5. 质感的对比 6. 位置的对比 7. 主与从的对比 8. 动与静的对比 9. 多种的对比 10. 起与收 11. 图与地 12. 强调
《网页设计与制作》教案-第11讲 布局技术-层AP Div
第11讲布局技术-层AP Div
1.1教学目标：
◆知识目标
1.理解层的作用
2.掌握层的各种基本操作
◆技能目标
能运用层进行布局，能设置层的重叠与嵌套，能合理操作层
◆品质目标
培养学生认真细致、踏实进取的精神
1.2教学重点：
1.掌握层的各种基本操作
1.3 教学难点
理解层的作用和操作。
1.4教学方法：讲练结合，任务驱动、分子任务操练
1.5课时安排：2课时
1.6教学对象分析：
这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：
一、激趣导入，揭示课题
层是一种HTML页面元素，可以将其定位在页面上的任意位置。层可以包含文本、图像或其他任何可在HTML文档正文中放入的内容。
通过Dreamweaver MX 2004，可以使用层来设置页面的布局。可以将层前后放置，隐藏某些层而显示其他层，以及在屏幕上移动层。还可以在一个层中放置背景图像，然后在该层的前面放置第二个层，利用层不仅可以非常灵活地放置内容，还可以根据不同的设置，实现相应的动态效果。
二、层的操作
层可以理解为浮动在网页上的一个页面，它可以准确地定位在页面上的任意位置，并可以规定它的大小。通过层可以对网页进行精确定位。不仅如此，通过对层与行为的综合使用，还可以创作出赏心悦目的动作效果。
层可以包含文本、图像或其它任何可在网页中放置的内容。层可以重叠，并且可以改变重叠次序，因此可以在网页上实现内容的重叠效果；可以动态地设定层的显示或隐藏，实现层内容的动态交替显示等特殊的显示效果；层可以嵌套，子层会遗传父层的特征，例如可见性，位置移动等。
网页设计与制作教程第11章 光影世界前台页面
当完成了网站的设计、调试、测试和网页制作等工作后，需要把设计好的 站点上传到服务器来完成整个网站的发布。可以使用网站发布工具将文件上传 到远程Web服务器以发布该站点，以及同步本地和远端站点上的文件。
11.2 设计首页布局
11.2.1 创建站点目录
1．创建站点根目录 本书所有章节的案例均建立在D:\web下的各个章节目录中。因此，本章 讲解的综合案例建立在D:\web\ch11目录中，该目录做为站点根目录。 2．根目录下的通用目录 对于中小型网站，一般会创建如下通用的目录结构：
作品欣赏列表页用于展示客户上传的作品，页面效果如图11-13所示，布 局示意图如图11-14所示。
11.5 制作新闻动态列表页
制作新闻动态列表页
新闻动态列表页用于展示网站最新发布的新闻，包括左侧的新闻分类列表、 客户服务信息和右侧的新闻列表，页面效果如图11-16所示，布局示意图如图 11-17所示。
images目录：存放网站的所有图片。 css目录：存放CSS样式文件，实现内容和样式的分离。 js目录：存放JavaScript脚本文件。 admin目录：存放网站后台管理程序。
11.2 设计首页布局
11.2.2 页面布局规划 首页的显示效果如图11-2所示，布局示意图如图11-3所示。
11.3 首页的制作
首页的制作
1．页面整体的制作 2．页面顶部的制作 3．广告图片区域的制作 4．第一栏目区域的制作 5．特色美景栏目的制作 6．田园风光栏目的制作 7．海天一色栏目的制作 8．摄影常识栏目的制作 9．客照展示栏目的制作 10．页面底部版权区域的制作 11．页面结构代码
11.2 设计首页布局
11.2.1 创建站点目录
1．创建站点根目录 本书所有章节的案例均建立在D:\web下的各个章节目录中。因此，本章 讲解的综合案例建立在D:\web\ch11目录中，该目录做为站点根目录。 2．根目录下的通用目录 对于中小型网站，一般会创建如下通用的目录结构：
作品欣赏列表页用于展示客户上传的作品，页面效果如图11-13所示，布 局示意图如图11-14所示。
11.5 制作新闻动态列表页
制作新闻动态列表页
新闻动态列表页用于展示网站最新发布的新闻，包括左侧的新闻分类列表、 客户服务信息和右侧的新闻列表，页面效果如图11-16所示，布局示意图如图 11-17所示。
images目录：存放网站的所有图片。 css目录：存放CSS样式文件，实现内容和样式的分离。 js目录：存放JavaScript脚本文件。 admin目录：存放网站后台管理程序。
11.2 设计首页布局
11.2.2 页面布局规划 首页的显示效果如图11-2所示，布局示意图如图11-3所示。
11.3 首页的制作
首页的制作
1．页面整体的制作 2．页面顶部的制作 3．广告图片区域的制作 4．第一栏目区域的制作 5．特色美景栏目的制作 6．田园风光栏目的制作 7．海天一色栏目的制作 8．摄影常识栏目的制作 9．客照展示栏目的制作 10．页面底部版权区域的制作 11．页面结构代码
网页制作教程PPT课件
完成网站设计制作以后，再将本地站点的所有内 容上传到Web服务器中设定的、供互联网用户浏 览访问的位置，称为远程站点。
22 22
牢记
制作网站的第一步：建立站点 站点的作用: 方便管理网站的内容
23
子任务2 网页的基本操作与站点管理
http://www.bvtc.com.cn
不要将所有文件都放在根目录下，这样做会使文件管理混乱，上 传速度慢。
http://www.bvtc.com.cn
2. 网页的类型
• 动态网页
是在发送到浏览器之 前由应用程序服务器 自定义的网页。动态 网页要在经过服务器 的修改后才被发送到 请求它的浏览器。网 页发生更改的特性便 是称其为动态的原因。
动态网页的工作流程 11
11
子任务1 初识网页与网页设计软件
3. 组成页面的元素
1.表格、单元格的大小 width：表示宽,单位为像素或百分比，默认为自动调整。 height ：表示高,单位为像素，默认为自动调整。
2.表格边框的宽度及颜色 border：表示边框的宽度，单位为像素。 bordercolor：表示边框的颜色,使用十六进制颜色值或
英文颜色名称。 注意：bordercolor也可设置某一单元格边框的颜色。
• 文本——网页中信息的主要表达方式。
• 图像——常用的有三种格式：GIF、JPEG和PNG。
22 22
牢记
制作网站的第一步：建立站点 站点的作用: 方便管理网站的内容
23
子任务2 网页的基本操作与站点管理
http://www.bvtc.com.cn
不要将所有文件都放在根目录下，这样做会使文件管理混乱，上 传速度慢。
http://www.bvtc.com.cn
2. 网页的类型
• 动态网页
是在发送到浏览器之 前由应用程序服务器 自定义的网页。动态 网页要在经过服务器 的修改后才被发送到 请求它的浏览器。网 页发生更改的特性便 是称其为动态的原因。
动态网页的工作流程 11
11
子任务1 初识网页与网页设计软件
3. 组成页面的元素
1.表格、单元格的大小 width：表示宽,单位为像素或百分比，默认为自动调整。 height ：表示高,单位为像素，默认为自动调整。
2.表格边框的宽度及颜色 border：表示边框的宽度，单位为像素。 bordercolor：表示边框的颜色,使用十六进制颜色值或
英文颜色名称。 注意：bordercolor也可设置某一单元格边框的颜色。
• 文本——网页中信息的主要表达方式。
• 图像——常用的有三种格式：GIF、JPEG和PNG。
新编Dreamweaver CS3动态网页设计与制作教程图文 (11)
第11章 AP元素和时间轴在网页中的应用 图11.9 移动AP元素视图
第11章 AP元素和时间轴在网页中的应用
(3) 如果要调整大小，拖动AP元素的调整大小手柄即可， 如图11.10所示。
第11章 AP元素和时间轴在网页中的应用 图11.10 调整AP元素大小视图
第11章 AP元素和时间轴在网页中的应用
第11章 AP元素和时间轴在网页中的应用 图11.22 【时间轴】面板
第11章 AP元素和时间轴在网页中的应用 图11.23 绘制AP元素视图
第11章 AP元素和时间轴在网页中的应用
(3) 在AP元素中插入如图11.24所示的图像。 (4) 使用鼠标选定AP元素，拖至【时间轴】面板中，在 时间轴的第一个通道中出现一个动画条，如图11.25所示。 (5) 单击提示消息中的【确定】按钮，然后单击位于动 画条末端的关键帧标签。在页面上将层移至它在动画结束的 位置。这时将出现一条线，显示的即是动画的轨迹，如图 11.26所示。
(10) 单击此关键帧，拖动AP元素在页面中的位置，形成 曲线路径，如图11.31所示。
(11) 可依此方法继续添加关键帧，并改变AP元素在页面 中的位置，形成更加丰富的曲线路径。按F12键预览页面， 可以看到图像沿着曲线移动的效果。
第11章 AP元素和时间轴在网页中的应用 图11.30 添加关键帧视图
第11章 AP元素和时间轴在网页中的应用 图11.4 【插入内容】视图
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
说明：当Dreamweaver自动创建布局表格时，该表格最初显示为填 满整个设计视图，即使我们更改文档窗口的大小也是如此。这种全窗默认 布局表格使我们可以在设计视图中的任意位置绘制布局单元格。可以将该 表格设置为特定的大小，方法是单击表格边框，然后拖动表格的调整大小 控制点。
12
第11章 设计页面布局
表格一样对嵌套表格进行格式设置，但是，其宽度受它所在单元格宽度的 限制。 8．剪切、拷贝和粘贴单元格
可以一次剪切、拷贝或粘贴单个单元格或多个单元格，并保留单元 格的格式设置。
8
第11章 设计页面布局
11.1.3 对表格进行排序 可以根据单个列的内容对表格中的行进行排序，还可以
根据两个列的内容执行更加复杂的表格排序。但不能对包含 COLSPAN或ROWSPAN属性的表格（即包含合并单元格的 表格）进行排序。
4
第11章 设计页面布局
2．设置表格和单元格的格式 可以通过设置表格及表格单元格的属性或将预先设置的
设计应用于表格来更改表格的外观。若要设置表格中文本的 格式，可以对所选的文本应用格式设置或使用样式。 3．调整表格的大小
通过拖动选择控制点可以调整整个表格或单个行和列的 大小，当调整整个表格的大小时，表格中的所有单元格按比 例更改大小。 4．更改列宽和行高
可以一次选择整个表、行、列或在表格中选择一个连续的单元格块， 还可以选择表格中多个不相邻的单元格并修改这些单元格的属性。 （1）选择整个表格：单击表格的左上角或者单击右边或底部边缘的任 意位置。 （2）选择行或列：首先定位鼠标指针使其指向行的左边缘或列的上边 缘，当鼠标指针变为选择箭头时，单击选择行或列，或拖动选择多个行 或列。 （3）选择矩形的单元格块：将鼠标从一个单元格拖到另一个单元格。 （4）选择不相邻的单元格：按住 Ctrl 键的同时单击要选择的单元格、 行或列，则该单元格会被选中。如果它已经被选中，则再次单击会将它 从选择中删除。
11.1.1 创建表格 1．插入表格
可以使用“插入”栏或“插入”菜单来创建一个新表格，具体步骤 如下： （1）在文档窗口的设计视图中，将插入点放在需要表格的位置。 （2）单击“插入”栏“常用”类别中的“表格”按钮，或选择“插入/ 表格”菜 单。 （3）按需要设置表格参数，完成表格的创建。
2
第11章 设计页面布局
11.2.4 向布局单元格中添加内容 在布局模式中可以将文本、图像和其他内容添加到布局单元格中。但
在布局模式中不能向布局表格的空白（灰色）区域插入内容，因此在添加 内容之前，必须先创建布局单元格，当添加内容的宽度大于布局单元格时 ，该单元格自动扩展。 11.2.5 布局单元格的调整
10
第11章 设计页面布局
11.2.2 布局模式的切换 在绘制布局表格或布局单元格之前，必须先切换到布局模式。 布局模式的切换操作如下： （1）如果“设计”视图不可见，请选择“查看/设计”或“查看/代码和
设计” 菜单。在代码视图中不能启用或禁用布局模式。
（2）选择“查看/表格模式/布局模式”菜单或单击插入栏“布局”类别 中的
2．向单元格中添加内容 可以像Word等文本编辑器一样在表格单元格中添加文
本和图像等元素。 3．导入表格式数据
可以将在另一个应用程序（例如Microsoft Excel）中 创建的表格式数据导入到 Dreamweaver 8中并设置为表格 的格式
3
第11章 设计页面布局
11.1.2 表格的编辑 1．选择表格元素
行或 列”对话框。在该对话框中输入必要的信息，然后单击“确定”按钮。 （3）清除完整的行或列时，可以直接按Delete键，整个行或列将从表格 中删除。
6．拆分或合并单元格 拆分或合并单元格可使用“修改/表格”子菜单中的命令。
7
第11章 设计页面Biblioteka Baidu局
7．嵌套表格 嵌套表格是放置在另一个表格的单元格中的表格，可以像对其他任何
本章学习导读 编辑。本章主要讲述在 Dreamweaver 8 过本章学习，读者应该掌握以下内容：
1
第11章 设计页面布局
11.1 使用表格对页面进行布局 表格是用在HTML页上显示表格式数据以及对文本和图
形进行布局的强有力的工具。表格由一行或多行组成，每行 又由一个或多个单元格组成。在创建表格之后，可以方便地 修改其外观和结构。
“布局模式”按钮。在“设计”视图的顶部显示一个标有“布局模式”的 绿色
栏，指示当前正处于“布局”模式中。如果页面上存在表格，则它们显示 为布局表格。
11
第11章 设计页面布局
11.2.3 绘制布局单元格和表格 在布局模式中，可以在页面上直接绘制布局单元格和布局表格。当不
在布局表格中绘制布局单元格时，Dreamweaver 8会自动创建一个布局表 格以容纳该单元格。布局单元格不能存在于布局表格之外。
通过使用属性检查器或拖动列或行的边框，可以更改列 宽或行高。还可以使用代码视图直接在HTML代码中更改单 元格的宽度和高度。
5
第11章 设计页面布局
5．元件的应用 在场景中应用元件包括应用本影片元件库中的元件和应用其他影片
元件库中的元件。应用本影片元件库中的元件，应先打开元件库面板， 将相应的元件用鼠标拖入场景工作区。应用其他影片中的元件应该先通 过菜单“文件/作为库打开”打开相应的元件库，再应用其中的元件。
9
第11章 设计页面布局
11.2 在布局模式中对页面进行布局
11.2.1 布局模式简介 在布局模式中，可以在添加内容之前对页面进行布局。例如，可以沿
页的顶部绘制一个单元格放置标题图形，在页的左边绘制另一个单元格放 置导航条，在右边绘制第三个单元格放置内容。
当不在布局表格中绘制布局单元格时，Dreamweaver 8会自动创建 一个布局表格以容纳该单元格。布局单元格不能存在于布局表格之外。可 以在一个布局表格中使用多个布局单元格对页进行布局，这是进行Web 页布局最常用的方法，也可以使用多个布局表格进行更复杂的布局。
6
第11章 设计页面布局
5．添加和删除行和列 添加、删除行和列应首先确定操作的位置，即选定当前的行或列。 （1）添加及删除行和列，可以使用“修改/表格”子菜单中的命令。 （2）若要一次添加多行或多列，或者在当前单元格的下面添加行或在其 右边添加列，请选择“修改/表格/插入行或列”菜单，此时会出现“插入
12
第11章 设计页面布局
表格一样对嵌套表格进行格式设置，但是，其宽度受它所在单元格宽度的 限制。 8．剪切、拷贝和粘贴单元格
可以一次剪切、拷贝或粘贴单个单元格或多个单元格，并保留单元 格的格式设置。
8
第11章 设计页面布局
11.1.3 对表格进行排序 可以根据单个列的内容对表格中的行进行排序，还可以
根据两个列的内容执行更加复杂的表格排序。但不能对包含 COLSPAN或ROWSPAN属性的表格（即包含合并单元格的 表格）进行排序。
4
第11章 设计页面布局
2．设置表格和单元格的格式 可以通过设置表格及表格单元格的属性或将预先设置的
设计应用于表格来更改表格的外观。若要设置表格中文本的 格式，可以对所选的文本应用格式设置或使用样式。 3．调整表格的大小
通过拖动选择控制点可以调整整个表格或单个行和列的 大小，当调整整个表格的大小时，表格中的所有单元格按比 例更改大小。 4．更改列宽和行高
可以一次选择整个表、行、列或在表格中选择一个连续的单元格块， 还可以选择表格中多个不相邻的单元格并修改这些单元格的属性。 （1）选择整个表格：单击表格的左上角或者单击右边或底部边缘的任 意位置。 （2）选择行或列：首先定位鼠标指针使其指向行的左边缘或列的上边 缘，当鼠标指针变为选择箭头时，单击选择行或列，或拖动选择多个行 或列。 （3）选择矩形的单元格块：将鼠标从一个单元格拖到另一个单元格。 （4）选择不相邻的单元格：按住 Ctrl 键的同时单击要选择的单元格、 行或列，则该单元格会被选中。如果它已经被选中，则再次单击会将它 从选择中删除。
11.1.1 创建表格 1．插入表格
可以使用“插入”栏或“插入”菜单来创建一个新表格，具体步骤 如下： （1）在文档窗口的设计视图中，将插入点放在需要表格的位置。 （2）单击“插入”栏“常用”类别中的“表格”按钮，或选择“插入/ 表格”菜 单。 （3）按需要设置表格参数，完成表格的创建。
2
第11章 设计页面布局
11.2.4 向布局单元格中添加内容 在布局模式中可以将文本、图像和其他内容添加到布局单元格中。但
在布局模式中不能向布局表格的空白（灰色）区域插入内容，因此在添加 内容之前，必须先创建布局单元格，当添加内容的宽度大于布局单元格时 ，该单元格自动扩展。 11.2.5 布局单元格的调整
10
第11章 设计页面布局
11.2.2 布局模式的切换 在绘制布局表格或布局单元格之前，必须先切换到布局模式。 布局模式的切换操作如下： （1）如果“设计”视图不可见，请选择“查看/设计”或“查看/代码和
设计” 菜单。在代码视图中不能启用或禁用布局模式。
（2）选择“查看/表格模式/布局模式”菜单或单击插入栏“布局”类别 中的
2．向单元格中添加内容 可以像Word等文本编辑器一样在表格单元格中添加文
本和图像等元素。 3．导入表格式数据
可以将在另一个应用程序（例如Microsoft Excel）中 创建的表格式数据导入到 Dreamweaver 8中并设置为表格 的格式
3
第11章 设计页面布局
11.1.2 表格的编辑 1．选择表格元素
行或 列”对话框。在该对话框中输入必要的信息，然后单击“确定”按钮。 （3）清除完整的行或列时，可以直接按Delete键，整个行或列将从表格 中删除。
6．拆分或合并单元格 拆分或合并单元格可使用“修改/表格”子菜单中的命令。
7
第11章 设计页面Biblioteka Baidu局
7．嵌套表格 嵌套表格是放置在另一个表格的单元格中的表格，可以像对其他任何
本章学习导读 编辑。本章主要讲述在 Dreamweaver 8 过本章学习，读者应该掌握以下内容：
1
第11章 设计页面布局
11.1 使用表格对页面进行布局 表格是用在HTML页上显示表格式数据以及对文本和图
形进行布局的强有力的工具。表格由一行或多行组成，每行 又由一个或多个单元格组成。在创建表格之后，可以方便地 修改其外观和结构。
“布局模式”按钮。在“设计”视图的顶部显示一个标有“布局模式”的 绿色
栏，指示当前正处于“布局”模式中。如果页面上存在表格，则它们显示 为布局表格。
11
第11章 设计页面布局
11.2.3 绘制布局单元格和表格 在布局模式中，可以在页面上直接绘制布局单元格和布局表格。当不
在布局表格中绘制布局单元格时，Dreamweaver 8会自动创建一个布局表 格以容纳该单元格。布局单元格不能存在于布局表格之外。
通过使用属性检查器或拖动列或行的边框，可以更改列 宽或行高。还可以使用代码视图直接在HTML代码中更改单 元格的宽度和高度。
5
第11章 设计页面布局
5．元件的应用 在场景中应用元件包括应用本影片元件库中的元件和应用其他影片
元件库中的元件。应用本影片元件库中的元件，应先打开元件库面板， 将相应的元件用鼠标拖入场景工作区。应用其他影片中的元件应该先通 过菜单“文件/作为库打开”打开相应的元件库，再应用其中的元件。
9
第11章 设计页面布局
11.2 在布局模式中对页面进行布局
11.2.1 布局模式简介 在布局模式中，可以在添加内容之前对页面进行布局。例如，可以沿
页的顶部绘制一个单元格放置标题图形，在页的左边绘制另一个单元格放 置导航条，在右边绘制第三个单元格放置内容。
当不在布局表格中绘制布局单元格时，Dreamweaver 8会自动创建 一个布局表格以容纳该单元格。布局单元格不能存在于布局表格之外。可 以在一个布局表格中使用多个布局单元格对页进行布局，这是进行Web 页布局最常用的方法，也可以使用多个布局表格进行更复杂的布局。
6
第11章 设计页面布局
5．添加和删除行和列 添加、删除行和列应首先确定操作的位置，即选定当前的行或列。 （1）添加及删除行和列，可以使用“修改/表格”子菜单中的命令。 （2）若要一次添加多行或多列，或者在当前单元格的下面添加行或在其 右边添加列，请选择“修改/表格/插入行或列”菜单，此时会出现“插入