生命OS

DW背诵册

10分钟阅读

1. 表格（Table）核心知识

（1）表格标签与属性

  • 标签层级： 
    <table>       <!-- 表格容器 -->
  <tr>        <!-- 行（Table Row） -->
    <td>...</td> <!-- 单元格（Table Data） -->
  </tr>
</table>
  • 关键属性：
    属性作用易错混淆点
    cellspacing单元格之间的间距与 cellpadding 区分（内容与边框距离）
    cellpadding单元格内容与边框的内边距常误用于调整单元格间距
    align表格整体对齐方式（left/center/right）对单元格无效，需在 <table> 使用
    rowspan合并行单元格纵向合并，如 rowspan="2"
    colspan合并列单元格横向合并，如 colspan="3"

（2）表格变形原因

  • 内容溢出：单元格内文字/图片过长未换行或限制宽度。
  • 嵌套冲突：表格内嵌套表格导致结构混乱。
  • 浏览器兼容性：不同浏览器对表格渲染差异（如默认边距不同）。
  • 未固定尺寸：未设置 width 或 height，导致自适应变形。

（3）选定整个表格的方法

  • 设计视图：
    • 点击表格左上角边框或右下角标签 <table>。
    • 右键 → 表格 → 选择表格。
  • 代码视图：
    • 选中 <table> 到 </table> 之间的代码。
  • 标签选择器：
    • 在状态栏点击 <table> 标签（需确保未选中嵌套表格）。

（4）单元格合并与拆分

  • 合并方法：
    1. 选中需合并的单元格（连续区域）。
    2. 右键 → 表格 → 合并单元格，或设置 rowspan/colspan。
  • 拆分方法：
    1. 选中单元格 → 右键 → 表格 → 拆分单元格。
    2. 设置拆分为行或列及数量。

2. 模板（Template）核心知识

（1）模板区域类型

区域类型特点用途示例
可编辑区域允许在基于模板的页面中修改内容文章正文、产品描述
锁定区域不可编辑，由模板统一控制导航栏、页脚版权信息
重复区域可重复添加的内容块（如列表项）新闻列表、商品展示

（2）模板使用注意事项

  • 更新机制：修改模板后，所有基于模板的页面可批量更新。
  • 错误说法纠正：
    ❌ “模板一次只能更新一个页面” → 错（支持批量更新）
    ❌ “不能将模板应用于已建页面” → 错（可通过“应用模板到页”操作）

3. 行为（Behavior）与事件（Event）

（1）行为组成

  • 事件（Event）：触发动作的条件（如 onClick、onLoad）。
  • 动作（Action）：事件触发后执行的操作（如弹出窗口、切换图像）。

（2）高频事件详解

事件触发条件典型应用场景
onLoad网页加载完成自动弹窗、播放背景音乐
onUnload关闭网页时弹出确认提示（谨慎使用）
onClick鼠标单击按钮跳转、显示隐藏元素
onDblClick鼠标双击快速编辑、展开详细信息
onMouseOver鼠标悬停显示悬浮提示、切换图片
onMouseOut鼠标离开恢复默认状态（如隐藏元素）
onMouseDown按下鼠标键（未松开）拖拽操作、临时高亮效果
onMouseUp松开鼠标键结束拖拽、确认选择

（3）行为操作常见错误

  • 绑定对象错误：
    • 如为文本添加“交换图像”行为（需绑定到图像元素）。
  • 事件顺序混淆：
    • onMouseOver 必须搭配 onMouseOut 恢复状态。
  • 未预加载图像：
    • 使用“交换图像”前需通过“预先载入图像”行为避免延迟。

4. AP Div（绝对定位层）

（1）核心功能

  • 实现浮动层效果（如悬停显示地图、下拉菜单）。
  • 必须通过 “显示-隐藏元素” 行为控制可见性。

（2）操作步骤示例

  1. 插入 AP Div：
    • 设计视图 → 插入 → 布局对象 → AP Div。
  2. 设置初始状态：
    • 属性面板勾选 可见性 为 hidden（默认隐藏）。
  3. 绑定行为：
    • 选中触发对象（如文本“山东”）→ 添加行为 显示-隐藏元素。
    • 设置 onMouseOver 显示层，onMouseOut 隐藏层。

5. HTML文档结构

（1）标准结构

<!DOCTYPE html>   <!-- 声明文档类型为HTML5 -->
<html>            <!-- 根标签 -->
  <head>          <!-- 头部：元信息与资源链接 -->
    <meta charset="UTF-8">      <!-- 字符编码 -->
    <title>页面标题</title>     <!-- 浏览器标签标题 -->
    <link rel="stylesheet" href="style.css"> <!-- 外部CSS -->
  </head>
  <body>          <!-- 主体：页面显示内容 -->
    <h1>标题</h1>
    <p>段落文本</p>
  </body>
</html>

（2）易错点

  • 标签闭合：
    • 自闭合标签如 <img>、<br> 无需 </img>。
  • 嵌套规则：
    • 块级元素（如 <div>）不能嵌套在行内元素（如 <span>）中。

6. 网站与网页关系

  • 网站（Website）：
    • 多个网页通过超链接组成的集合，共享同一域名。
    • 示例：淘宝网（包含首页、商品页、购物车页等）。
  • 网页（Web Page）：
    • 单个HTML文件，包含文字、图片、链接等资源。
    • 扩展名可为 .html、.php、.aspx（动态网页）。
  • 站点（Site）：
    • 本地存放网站文件的文件夹，扩展名为 .ste（Dreamweaver站点文件）。

二、简答题标准答案模板

1. 什么是行为？行为由哪两部分组成？

  • 行为：Dreamweaver 中预置的交互功能，由 JavaScript 实现。
  • 组成：
    • 事件：触发动作的条件（如点击、加载页面）。
    • 动作：事件触发后执行的操作（如弹出窗口、切换图像）。

2. 行为面板按钮名称

  1. 显示设置事件：仅列出当前元素已绑定的事件。
  2. 显示所有事件：展示所有可用事件（按浏览器兼容性分类）。
  3. 添加行为（+）：选择并配置动作（如“弹出信息”）。
  4. 删除行为（-）：移除选中的行为。

3. 事件含义

  1. onLoad：网页加载完成后触发（如自动弹窗）。
  2. onClick：鼠标单击时触发（如按钮跳转）。
  3. onDblClick：鼠标双击时触发（如快速编辑）。
  4. onMouseOver：鼠标悬停在对象上时触发（如显示提示）。
  5. onMouseMove：鼠标在对象上移动时持续触发（如拖拽效果）。
  6. onMouseOut：鼠标离开对象时触发（如隐藏元素）。

4. 打开网页时弹出提示的操作步骤

  1. 打开 index.html → 单击状态栏 <body> 标签。
  2. 行为面板 → + → 弹出信息 → 输入提示内容 → 确定。
  3. 确保事件为 onLoad。

5. 鼠标悬停显示图片的操作步骤

  1. 插入 AP Div → 放入图片 123.png → 设置初始隐藏。
  2. 选中文字“大明湖” → 行为面板 → + → 显示-隐藏元素。
  3. 显示层 → 事件设为 onMouseOver。
  4. 再次添加行为 → 隐藏层 → 事件设为 onMouseOut。

6. 设置状态栏文本

  1. 选中 <body> 标签 → 行为面板 → + → 设置文本 → 设置状态栏文本。
  2. 输入内容“2022 年美丽中国行！” → 确定 → 事件设为 onLoad。

三、终极避坑指南

  • 表格变形：固定宽度 + 内容换行 + 避免嵌套冲突。
  • 行为失效：检查绑定对象、事件类型、动作参数。
  • 模板更新：确保修改后保存并批量更新关联页面。
  • AP Div隐藏：初始状态设为 hidden，行为绑定正确事件。

记忆口诀：

  • 表格合并用 rowspan/colspan，间距 cellspacing 别混淆！
  • 行为事件是触发，动作执行别忘绑！
  • AP Div 要隐藏，悬停离开需成对！
  • 模板区域分三类，锁定编辑重复区！

关系图谱

反向链接