当前位置：文档之家 › 80《动态网页设计与制作实用教程(第二版)》第11章PPT课件

80《动态网页设计与制作实用教程(第二版)》第11章PPT课件

  • 格式：ppt
  • 大小：561.00 KB
  • 文档页数：25

下载文档原格式

  / 25

合集下载

电子教案 《动态网页设计与制作实用教程(第二版)》-程伟渊

电子教案 《动态网页设计与制作实用教程(第二版)》-程伟渊

出
菜单中的“页面属性”选项，激活属性设置面板，如图所示，设置完毕单 击
“确定”按钮。
第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章

网页设计与制作使用教程第11章


注：插入单选钮的HTML代码为＜INPUT type="radio" name="..." value="..."＞ 选中该单选钮，在属性面板中进行相应的属性设置
单选按钮：该名称是存储该域的值（选定值）的变量 名，必须在该表单内唯一。要保证数据的准确采集， 单选钮都是以组为单位使用的，在同一组中的单选钮 必须用同一个名称。 选定值：定义该单选钮的值。当选中该单选钮时，此 “选定值”就随表单一起提交，作为该单选钮的当前 值。 初始状态：在浏览器中首次载入该表单时该单选钮的 状态。如果选择“已勾选”，则该单选钮一加载就是 选中状态
注：多个复选框可以共用一个名称，一个复选框名称变量也可以 拥有多个值（多个值在提交时用逗号隔开）。多个复选框可以共用一 个名称时，被选中的多个复选框的值将作为该复选框名称变量的当前 值提交到服务器
（4）单选钮 单选钮允许用户在待选项中选择唯一的答案。 在新建的表单内点击鼠标，确定插入位置，然后点击插入 面板上的按钮 ，插入一单选钮
注意：1. 如果要处理表单数据，我们需要在服务器端（
即放置网页的远程计算机上）编写程序（如ASP程序）， 这部分内容已经超出了本书的范围，有兴趣的同学可以 参考其他的动态网页编程的书籍，后面我们只是对多种 动态网页技术做个简单的介绍。
2．具体使用哪种数据发送方式取决于服务器类型，可以 询问管理员来决定。如果方式任意，默认是Get方法，大 部分HTML设计者偏好使用Post方法。
，所输入的文本被替换为星号或项目符号，以隐藏该文 本，保护这些信息不被看到。

当文本框的类型设置为“多行”时，属性面板发生变 化，即文本框从“文本字段”变为“文本区域” 其属性设置和“单行”类型相似，只是更新了2个属性
网页设计与制作第11章 使用行为

网页设计与制作第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章

网页设计与制作课件第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”，右侧
《网页设计与制作》教案-第11讲 布局技术-层AP Div

《网页设计与制作》教案-第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章 行为


11.2 行为面板

在Dreamweaver 8中，用户可以通过使用【行 为】面板来附加和编辑行为。选择菜单命令 【窗口】行为】或者使用Shift＋F4快捷键即可 打开【行为】控制面板
图中各代号的名称和功能如下：





（1）显示设置事件按钮将显示当前元素已经附加到当前文档的事 件 （2）显示所有事件按钮将显示当前元素所有可能事件，一般来说， 浏览器的版本越高，可支持的事件就越多 （3）添加行为按钮单击该按钮将弹出一个活动菜单 （4）删除事件按钮用于在行为列表中删除所选的事件和动作 （5）增加事件值按钮用于在行为列表中向上移动所选的事件 （6）降低事件值按钮用于在行为列表中向下移动所选的事件


导航工具栏：包括“前进”和“后退”等按钮的工具栏； 地址工具栏：帮助用户输入地址或进行链接的工具栏； 状态栏：位于浏览器窗口底部的区域，根据操作的不同，在该区域显示 相应的提示信息； 菜单条：在浏览器窗口上显示菜单的区域。如果要让用户能够从新窗口 导航，应该选中此项，否则在新窗口中，用户只能关闭或最小化窗口； 需要时使用滚动条：指定如果内容超出可视区域是否显示滚动条，如果 不选择此项，则不显示滚动条，如果“调整大小手柄”选项也关闭，则 访问者将无法看到超出窗口原始大小以外的内容； 调整大小手柄：指定是否能够调整窗口的大小，如果未选定此项，则新 窗口将无法改变大小，也无法拖动其边框改变大小； 窗口名称：指定新窗口的名称。如果想通过JavaScript使用链接指向新窗 口或者控制新窗口，则应该对新窗口进行命名，此名称不能包含空格或 特殊字符。
有关鼠标和键盘的事件


OnClick用鼠标单击选定元素的一瞬间发生的事件 OnBlur鼠标指针移到窗口或帧外部，即在这种非激活 状态下发生的事件 OnDragDrop拖动并放置选定元素的那一瞬间发生的 事件 OnFocus鼠标指针移动到窗口或帧上，即激活之后发 生的事件OnMouseOut鼠标指针经过选定元素之外时 发生的事件OnMouseOver鼠标指针位于选定元素上 方时发生的事件OnMouseUp单击鼠标右键，然后释 放时发生的事件
网页设计与制作教程第11章 光影世界前台页面

网页设计与制作教程第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个方面着手。 页面的效果是否美观。 页面中的链接是否正确。 页面的浏览器兼容性是否良好。
动态网页设计与制作实用教程PPT共157页

动态网页设计与制作实用教程PPT共157页


动态网页设计与制作实用教程
51、没有哪个社会可以制订一部永远 适用的 宪法， 甚至一 条永远 适用的 法律。 ——杰 斐逊 52、法律源于人的自卫本能。——英 格索尔
53、人们通常会发现，法律就是这样 一种的 网，触 犯法律 的人， 小的可 以穿网 而过， 大的可 以破网 而出， 只有中 等的才 会坠入 网中。 ——申 斯通 54、法律就是法律它是一座雄伟的大 夏，庇 护着我 们大家 ；法律未必明天仍是法律。 ——罗·伯顿
66、节制使快乐增加并使享受加强。 ——德 谟克利 特 67、今天应做的事没有做，明天再早也 是耽误 了。——裴斯 泰洛齐 68、决定一个人的一生，以及整个命运 的，只 是一瞬 之间。 ——歌 德 69、懒人无法享受休息之乐。——拉布 克 70、浪费时间是一桩大罪过。——卢梭
全套课件 《动态网页设计与制作实用教程(第二版)》-程伟渊

全套课件 《动态网页设计与制作实用教程(第二版)》-程伟渊

束，是网页中最外层的标记。由<HTML>和</HTML>标记对标出。HTML元素只 有HTML一个标记。
2．HEAD元素 （1）HEAD标记。该标记用来表示HEAD元素的开始和结束，其格式为： <HEAD> </HEAD>。 （2）BASE标记（不成对标记）。BASE标记用来确定当前初始的URL，当
1.4 HTML基础知识 1.4.1 HTML基本概念 1．HTML概念
HTML是一种描述语言，对Web页面中显示内容的属性以标签的形 式进行描述。客户机上的浏览器（Browser）对这些描述进行解释将相 应页面内容正确显示在显示器上。一个Web页面就是一个HTML文档。
2．HTML文档的构成 HTML文档由三大元素构成：HTML元素、HEAD元素和BODY元素。
前文件中的链接都以所定义的初始地址为基础。它有一个HREF属性，其值为所 定义的基准URL地址，格式为：
<BASE HREF=/>
第1章 网页设计概述
3．BODY元素（可见对象的描述）
（1）BODY标记。该标记是BODY元素开始和结束的标志，格式为：
<body>
<FONT color=?> </FONT> // 定义文本的颜色，?= "#ffcc00"等十六进制值
<b> </b>
// 粗体显示
<I> </I>
// 斜体显示
<u>
// 下划线显示
<sub>
// 下标显示
<sup>
// 上标显示
第1章 网页设计概述
（4）段落标记。该标记用来标识段落和列表。
网页设计与制作 PPT11

网页设计与制作 PPT11


11.2.7 课堂案例——恒洲电子商务网页
使用设置状态栏文本命令设置在加载网页文档时在状态栏中 显示的文字。
效果图
课堂练习——游戏网页
使用AP Div按钮绘制层。使用拖动AP元素命令制作组合西瓜人效果。
效果图
课后习题——蟹来居饭店首
使用设置状态栏文本命令制作在浏览器窗口左下角的状态栏中显示消息。
11.2.3 设置容器的文本
使用“设置层文本”动作的具体操作步骤如下。 （1）选择“插入”面板“布局”选项卡中的“绘制AP Div”按 钮 ，在“设计”视图中拖曳出一个图层。在“属性”面板的“层 编号”选项中输入层的唯一名称。 （2）在文档窗口中选择一个对象，如文字、图像、按钮等，并 启用“行为”控制面板。 （3）在“行为”控制面板中单击“添加行为”按钮 ，并在弹 出的菜单中选择“设置文本 > 设置容器的文本”动作，弹出“设置 层文本”对话框。 （4）如果不是默认事件，则单击该事件，会出现箭头按钮 ， 单击按钮 ，弹出包含全部事件的事件列表，用户可根据需要选择 相应的事件。 （5）按F12键浏览网页。
1．将行为附加到网页元素上 2．将行为附加到文本上
11.2 动作
打开浏览器窗口 拖动层 设置容器的文本 设置状态栏文本 设置文本域文字 设置框架文本 课堂案例——恒洲电子商务网页
11.2.1 打开浏览器窗口
使用“打开浏览器窗口”动作在一个新的窗口中打开指 定的URL，还可以指定新窗口的属性、特征和名称。
11.2.2 拖动层
使用“拖动层”动作的具体操作步骤如下。 （1）通过单击文档窗口底部标签选择器中的 <body> 标签选择 body对象，并启用“行为”控制面板。 （2）在“行为”控制面板中单击“添加行为”按钮 ，并在弹 出的菜单中选择“拖动AP元素”动作，弹出“拖动AP元素”对话框。 （3）如果不是默认事件，则单击该事件，会出现箭头按钮 ， 单击按钮 ，弹出包含全部事件的事件列表，用户可根据需要选择 相应的事件。 （4）按F12键浏览网页。
动态网页设计与制作实用教程》电子教案

动态网页设计与制作实用教程》电子教案

《动态网页设计与制作实用教程》电子教案第一章：动态网页设计基础1.1 动态网页概述1.1.1 动态网页与静态网页的区别1.1.2 动态网页的优势与应用场景1.2 动态网页技术概述1.2.1 HTML5与CSS31.2.2 JavaScript与jQuery1.2.3 服务器端编程语言（如PHP、Java、Python等）1.3 动态网页设计流程1.3.1 需求分析1.3.2 页面布局与设计1.3.3 交互设计与实现1.3.4 页面测试与优化第二章：HTML5与CSS3基础2.1 HTML5概述2.1.1 HTML5的新特性2.1.2 HTML5文档结构2.2 常用HTML5标签2.2.1 语义化标签2.2.2 媒体标签2.2.3 表单标签2.3 CSS3概述2.3.1 CSS3的特点与优势2.3.2 CSS3的基本语法2.4 常用CSS3样式与属性2.4.1 选择器与伪类2.4.2 盒模型与布局2.4.3 颜色、字体与文本2.4.4 过渡与动画第三章：JavaScript与jQuery基础3.1 JavaScript概述3.1.1 JavaScript的历史与发展3.1.2 JavaScript的运行环境3.1.3 JavaScript的基本语法3.2 常用JavaScript函数与对象3.2.1 基本函数与方法3.2.2 日期与数学对象3.2.3 DOM操作3.3 jQuery概述3.3.1 jQuery的优点与特性3.3.2 jQuery的安装与使用3.4 常用jQuery方法与选择器3.4.1 基础方法与属性3.4.2 事件处理3.4.3 动画与效果第四章：动态网页设计工具与技术4.1 网页设计与制作工具4.1.1 代码编辑器（如Sublime Text、Visual Studio Code等）4.1.2 网页设计软件（如Adobe Dreamweaver、Sublime Text等）4.2 图片处理工具4.2.1 Photoshop4.2.2 Fireworks4.3 浏览器兼容性测试与调试4.3.1 浏览器兼容性问题概述4.3.2 浏览器的内核与版本差异4.3.3 兼容性测试工具（如BrowserStack、CrossBrowserTesting等）4.4 前端框架与库4.4.1 Bootstrap4.4.2 Vue.js4.4.3 React第五章：动态网页交互设计与实现5.1 交互设计概述5.1.1 交互设计的重要性5.1.2 交互设计原则与方法5.2 鼠标与键盘事件5.2.1 鼠标事件（如click、dblclick、mousedown等）5.2.2 键盘事件（如keydown、keyup、keypress等）5.3 表单验证与交互5.3.1 表单基本概念与结构5.3.2 表单验证方法与技巧5.3.3 表单提交与异步请求5.4 AJAX技术5.4.1 AJAX概述与原理5.4.2 AJAX请求与响应5.4.3 AJAX应用实例（如动态加载数据、无刷新提交表单等）第六章：响应式网页设计6.1 响应式网页设计概述6.1.1 响应式网页设计的概念6.1.2 响应式网页设计的重要性6.2 媒体查询与弹性布局6.2.1 媒体查询的使用6.2.2 弹性布局与网格系统6.3 响应式设计工具与技术6.3.1 响应式设计框架（如Bootstrap、Foundation等）6.3.2 响应式图片与视频处理6.4 响应式网页设计实践6.4.1 设计适配不同屏幕尺寸的布局6.4.2 优化网页性能与加载速度第七章：前端框架与库的应用7.1 前端框架概述7.1.1 前端框架的优势7.1.2 主流前端框架简介7.2 Bootstrap框架7.2.1 Bootstrap的特点与安装7.2.2 Bootstrap的布局组件7.2.3 Bootstrap的样式与组件7.3 Vue.js框架7.3.1 Vue.js的简介与安装7.3.2 Vue.js的指令与组件7.3.3 Vue.js的数据绑定与组件通信7.4 React框架7.4.1 React的简介与安装7.4.2 React的组件与状态管理7.4.3 React与Redux的结合使用第八章：服务器端编程与数据库8.1 服务器端编程基础8.1.1 服务器端编程语言的选择8.1.2 服务器端编程的基本概念8.2 PHP服务器端编程8.2.1 PHP简介与安装8.2.2 PHP基本语法与数据结构8.2.3 PHP与MySQL数据库的连接与操作8.3 Java服务器端编程8.3.1 Java简介与开发环境配置8.3.2 Java基本语法与面向对象编程8.3.3 Java与MySQL数据库的连接与操作8.4 Python服务器端编程8.4.1 Python简介与安装8.4.2 Python基本语法与Web框架（如Django、Flask）8.4.3 Python与MySQL数据库的连接与操作第九章：动态网页项目实战9.1 项目实战概述9.1.1 项目需求分析9.1.2 项目设计与开发流程9.2 项目搭建与开发环境配置9.2.1 项目文件结构与目录组织9.2.2 开发工具与技术栈选择9.3 项目实现与测试9.3.1 页面布局与样式设计9.3.2 交互功能实现9.3.3 服务器端编程与数据库设计9.4 项目部署与上线9.4.1 部署环境选择与配置9.4.2 域名与网站空间申请9.4.3 网站搜索引擎优化（SEO）第十章：动态网页设计与制作的未来趋势10.1 前端技术发展趋势10.1.1 5G网络与边缘计算10.1.2 WebAssembly与Web性能优化10.1.3 跨平台与组件化开发10.2 与机器学习在网页设计中的应用10.2.1 在网页内容中的应用10.2.2 机器学习在用户行为分析与个性化推荐中的应用10.3 网页设计与制作的创新与挑战10.3.1 虚拟现实（VR）与增强现实（AR）在网页设计中的应用10.3.2 网页设计与制作的可持续发展与伦理考虑10.4 未来网页设计师的技能要求10.4.1 技术能力与软技能10.4.2 跨界合作与终身学习重点和难点解析重点一：动态网页的优势与应用场景解析：理解动态网页与静态网页的区别，以及动态网页的优势和适用场景是学习动态网页设计的基础。

  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 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 布局单元格的调整