🎨 DW学习工具

制作者：北受UK | BEI 创作辅助工具

一、Adobe Dreamweaver 概述

Dreamweaver（简称 DW）是 Adobe 公司出品的可视化网页开发工具，集网页设计、代码编写、站点管理于一体。它支持"所见即所得"的可视化编辑，也支持手写代码，是网页制作入门的经典工具。

1.1 DW 软件界面

📋 主要面板

文档工具栏：代码/拆分/设计三种视图切换
插入栏：快速插入各种 HTML 标签
属性面板：选中元素后修改其属性
CSS 样式面板：管理和编辑 CSS 样式
文件面板：管理站点文件
资源面板：管理图片、颜色、链接等资源

👁️ 三种视图模式

代码视图：纯代码编辑，适合开发者
拆分视图：左代码右设计，实时对照
设计视图：可视化拖拽，所见即所得
实时视图：模拟浏览器真实渲染效果

1.2 标准工作流程

新建站点 → 设置本地根文件夹
新建 HTML 文件
在设计视图布局 / 代码视图写结构
用 CSS 样式面板设置样式
插入图片、链接、表单等元素
预览（F12 在浏览器中查看）
上传到服务器（文件面板 → 上传）

💡 现代开发中，DW 的"设计视图"已较少使用，主流是手写代码 + 浏览器实时预览。但 DW 的站点管理、FTP 上传、代码提示仍然方便。

1.3 Dreamweaver 快捷键大全

⌨️ 文件操作

快捷键	功能
`Ctrl + N`	新建文档
`Ctrl + O`	打开文件
`Ctrl + S`	保存
`Ctrl + Shift + S`	另存为
`Ctrl + Alt + S`	保存全部
`Ctrl + W`	关闭当前文档
`Ctrl + Shift + W`	关闭全部
`F12`	在浏览器中预览
`Ctrl + F12`	在次浏览器中预览
`Ctrl + P`	打印代码

✂️ 编辑操作

快捷键	功能
`Ctrl + Z`	撤销
`Ctrl + Y` / `Ctrl + Shift + Z`	重做
`Ctrl + X`	剪切
`Ctrl + C`	复制
`Ctrl + V`	粘贴
`Ctrl + Shift + V`	选择性粘贴（带格式）
`Ctrl + A`	全选
`Ctrl + D`	复制当前标签/行（Duplicate）
`Delete`	删除选中
`Ctrl + Shift + Space`	插入不间断空格
`Shift + Enter`	换行符（<br>）
`Ctrl + Shift + -`	插入软连字符

🔍 查找替换

快捷键	功能
`Ctrl + F`	查找
`Ctrl + H`	替换
`F3`	查找下一个
`Shift + F3`	查找上一个
`Ctrl + F3`	查找所选内容

📝 代码编辑

快捷键	功能
`Ctrl + /`	注释/取消注释
`Ctrl + [`	代码向左缩进
`Ctrl + ]`	代码向右缩进
`Ctrl + Shift + <`	选择父标签（向外选）
`Ctrl + Shift + >`	选择子标签（向内选）
`Ctrl + ←/→`	按单词移动光标
`Ctrl + Shift + ←/→`	按单词选择
`Ctrl + Home`	跳到文档开头
`Ctrl + End`	跳到文档结尾
`Ctrl + G`	跳转到指定行
`Ctrl + Space`	代码提示（自动补全）
`Ctrl + Shift + M`	匹配开始/结束标签
`Ctrl + T`	快速标签编辑器

🖱️ 视图切换

快捷键	功能
Ctrl + `	代码视图
Ctrl + Shift + `	设计视图
Ctrl + Alt + `	拆分视图
`Ctrl + Shift + R`	实时代码视图
`Ctrl + +`	放大代码字体
`Ctrl + -`	缩小代码字体
`Ctrl + 0`	恢复默认字体大小

📦 插入元素

快捷键	功能
`Ctrl + Alt + I`	插入图片
`Ctrl + Alt + L`	插入超链接
`Ctrl + Alt + T`	插入表格
`Ctrl + Alt + F`	插入表单
`Ctrl + Alt + D`	插入 Div 标签
`Ctrl + Alt + M`	插入命名锚记
`Ctrl + Alt + Space`	插入换行符

📐 布局 & 选中

快捷键	功能
`方向键`	移动选中元素 1px
`Shift + 方向键`	移动选中元素 10px
`Ctrl + 方向键`	调整元素大小 1px
`Ctrl + Shift + 方向键`	调整元素大小 10px
`Ctrl + 单击`	选择层/元素
`Shift + 单击`	加选多个元素
`Esc`	取消选择

🗂️ 面板 & 窗口

快捷键	功能
`Ctrl + F2`	插入栏
`Ctrl + F3`	属性面板
`F4`	显示/隐藏所有面板
`Ctrl + F4`	文件面板
`Shift + F4`	资源面板
`Ctrl + F5`	CSS 样式面板
`Ctrl + F6`	标签检查器
`Ctrl + F7`	行为面板
`Ctrl + F8`	历史记录面板
`Ctrl + F9`	代码片段面板
`Ctrl + F10`	结果面板
`Ctrl + F11`	引用面板
`Ctrl + Tab`	切换文档窗口

🚀 站点 & 预览

快捷键	功能
`Ctrl + Shift + U`	上传文件
`Ctrl + Shift + D`	下载文件
`Ctrl + Alt + Shift + U`	上传整个站点
`F5`	刷新文件面板
`F6`	检查链接
`Shift + F7`	拼写检查
`Ctrl + Shift + F12`	验证标记

🎨 文本格式

快捷键	功能
`Ctrl + B`	加粗
`Ctrl + I`	斜体
`Ctrl + U`	下划线
`Ctrl + Alt + T`	无序列表
`Ctrl + Alt + O`	有序列表
`Ctrl + Alt + ]`	缩进文本
`Ctrl + Alt + [`	凸出文本

💡 以上为 Windows 版快捷键。Mac 版将 Ctrl 替换为 Cmd (⌘)，Alt 替换为 Option (⌥)。

二、HTML 基础理论

HTML（HyperText Markup Language，超文本标记语言）是网页的骨架，用"标签"来描述网页的结构和内容。HTML 不是编程语言，是标记语言。

2.1 标准文档结构

<!-- 文档类型声明：告诉浏览器用 HTML5 标准解析 -->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>  <!-- 头部：不显示在页面上，放元信息 -->
    <meta charset="UTF-8">  <!-- 字符编码 -->
    <title>页面标题</title>  <!-- 浏览器标签页标题 -->
  </head>
  <body>  <!-- 主体：页面可见内容都在这里 -->
    页面内容...
  </body>
</html>

结构标签类型： 双标记 html / head / body / title / style / script 单标记 meta / link / base

2.2 DOCTYPE 声明

声明	说明
`<!DOCTYPE html>`	HTML5 标准（目前唯一推荐使用）
HTML 4.01 Strict	旧版严格模式，已淘汰
XHTML 1.0	旧版 XML 风格，已淘汰

2.3 meta 标签详解

meta单标记提供页面元信息，不显示在页面上

属性	作用	示例
charset	字符编码	`charset="UTF-8"`
name + content	页面描述	`name="description" content="..."`
name="keywords"	关键词（SEO）	`content="网页设计,HTML"`
name="viewport"	移动端适配	`content="width=device-width, initial-scale=1.0"`
http-equiv="refresh"	自动刷新/跳转	`content="3;url=http://..."`

三、布局 & 主体标签

双标记有开始和结束标签，如 ... 单标记只有开始标签，如  

3.1 文本标签

h1 ~ h6双标记标题标签

h1 最大最粗（页面唯一），h6 最小。用于内容层级。
常用属性：align(对齐方式 left/center/right/justify)、id(标识)、class(类名)、style(内联样式)
书写格式：

<h1 align="center">一级标题</h1>
<h2>二级标题</h2>
<h6>六级标题</h6>

p双标记段落

自动换行，段前段后有间距。
常用属性：align(对齐方式)、id、class、style
快捷键：Enter（设计视图中回车生成新段落）
书写格式：

<p align="left">这是一个段落文字，会自动换行。</p>

br单标记换行

单标签，强制换行。
常用属性：无（XHTML 中写作 ）
快捷键：Shift+Enter（设计视图中强制换行）
书写格式：

第一行 第二行 第三行

hr单标记水平线

单标签，显示分割线。
常用属性：width(宽度)、size(粗细)、color(颜色)、noshade(无阴影)、align(对齐)
书写格式：

<hr width="80%" size="3" color="#ff0000">

span双标记行内容器

不换行，用于对小段文字加样式。
常用属性：id、class、style、title(提示文字)
书写格式：

这是<span style="color:red">红色</span>文字

div双标记块级容器

独占一行，布局最常用的盒子。
常用属性：align(对齐)、id、class、style、title
书写格式：

<div id="header" class="box">
  内容区域
</div>

strong / b双标记加粗

strong 有语义（重要），b 纯样式。
常用属性：id、class、style、title
快捷键：Ctrl+B（选中文本后加粗）
书写格式：

<strong>重要内容</strong>
<b>加粗文字</b>

em / i双标记斜体

em 有语义（强调），i 纯样式。
常用属性：id、class、style、title
快捷键：Ctrl+I（选中文本后斜体）
书写格式：

<em>强调内容</em>
<i>斜体文字</i>

u双标记下划线

不推荐，易与链接混淆。
常用属性：id、class、style
快捷键：Ctrl+U（选中文本后下划线）
书写格式：

带下划线的文字

del / s双标记删除线

显示删除线效果。
常用属性：id、class、style、cite(删除原因URL)、datetime(删除时间)
书写格式：

原价<del>199元</del> 现价99元
<s>已删除内容</s>

sub / sup双标记下标/上标

化学公式、数学符号用。
常用属性：id、class、style
书写格式：

H<sub>2</sub>O  水的化学式
x<sup>2</sup>  x的平方

pre双标记预格式化

保留空格和换行，显示代码块用。
常用属性：width(宽度)、id、class、style
书写格式：

<pre>
  保留空格  和换行
    缩进也保留
</pre>

3.2 列表标签

ul双标记无序列表 + li双标记列表项

默认圆点标记，type 可改：disc(圆)、circle(空心)、square(方块)
ul 属性：type(项目符号类型)、compact(紧凑)、id、class、style
li 属性：type(单个项目符号)、value(序号)、id、class、style
快捷键：Ctrl+Alt+U（插入无序列表）
书写格式：

<ul type="square">
  <li>苹果</li>
  <li>香蕉</li>
</ul>

ol双标记有序列表

type 可改：1(数字)、a/A(字母)、i/I(罗马)，start 设起始值
常用属性：type(编号类型)、start(起始编号)、reversed(倒序)、compact、id、class、style
快捷键：Ctrl+Alt+O（插入有序列表）
书写格式：

<ol type="A" start="3">
  <li>第三步</li>
</ol>

dl / dt / dd双标记定义列表

dt 是术语，dd 是解释，用于名词解释。
常用属性：全局属性 id(标识)、class(类名)、style(内联样式) 等，无特殊属性
书写格式：

<dl>
  <dt>HTML</dt>
  <dd>超文本标记语言</dd>
</dl>

3.3 表格标签

标签	作用
`table`	表格容器
`tr`	行（table row）
`td`	单元格（table data）
`th`	表头单元格（加粗居中）
`thead/tbody/tfoot`	表头/表体/表尾（语义分组）
`caption`	表格标题

双标记以上所有表格标签均为双标记。
常用属性：border(边框)、width/height、colspan(跨列)、rowspan(跨行)、align(对齐)、bgcolor(背景色)
快捷键：Ctrl+Alt+T（插入表格）

<table border="1" width="300">
  <tr><th colspan="2">标题</th></tr>
  <tr><td>A</td><td>B</td></tr>
</table>

3.4 表单标签

标签/属性	说明
`form`	表单容器，action(提交地址)、method(提交方式 get/post)
`input`	输入框，type 决定类型
`textarea`	多行文本域
`select + option`	下拉选择框
`button`	按钮
`label`	关联文字与表单元素

双标记 form / textarea / select / option / button / label 单标记 input
input 的 type 值：text(文本)、password(密码)、radio(单选)、checkbox(多选)、submit(提交)、reset(重置)、button(按钮)、file(文件)、hidden(隐藏)、email、url、number、date、color、range
快捷键：Ctrl+Space 代码提示自动补全 | Ctrl+T 标签编辑器

<form action="/submit" method="post">
  <label>用户名：<input type="text" name="user"></label>
  <input type="submit" value="提交">
</form>

3.5 媒体 & 链接标签

a双标记超链接

href(地址)、target="_blank"(新窗口打开)、title(提示)
常用属性：href(链接地址)、target(打开方式)、title(提示文字)、rel(关系)、download(下载)、name(锚点名)
快捷键：Ctrl+Alt+L（插入超链接）
书写格式：

<a href="https://example.com" target="_blank" title="点击打开">链接文字</a>

img单标记图片

src(路径)、alt(替代文字)、width/height
常用属性：src(图片路径)、alt(替代文字)、width(宽度)、height(高度)、title、border(边框)、align(对齐)
快捷键：Ctrl+Alt+I（插入图像）
书写格式：

<img src="assets/images/logo.png" alt="Logo" width="100" height="100">

video双标记视频

src、controls(控制条)、autoplay、loop、muted
常用属性：src(视频地址)、controls(显示控制条)、autoplay(自动播放)、loop(循环)、muted(静音)、poster(封面图)、width、height、preload(预加载)
书写格式：

<video src="movie.mp4" controls width="400" poster="cover.jpg">
  您的浏览器不支持视频播放
</video>

audio双标记音频

src、controls、autoplay、loop
常用属性：src(音频地址)、controls(控制条)、autoplay(自动播放)、loop(循环)、muted(静音)、preload(预加载)
书写格式：

<audio src="music.mp3" controls loop>
  您的浏览器不支持音频播放
</audio>

iframe双标记内联框架

嵌入其他网页，src、width、height、frameborder
常用属性：src(嵌入页面地址)、width(宽度)、height(高度)、frameborder(边框)、scrolling(滚动条)、name(框架名)、sandbox(沙箱)、allow(权限)
书写格式：

<iframe src="https://example.com" width="600" height="400" frameborder="0"></iframe>

source单标记媒体源

配合 video/audio，提供多格式备选
常用属性：src(资源地址)、type(MIME类型)、media(媒体查询)、sizes(尺寸)、srcset(响应式源集)
书写格式：

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
</video>

3.6 HTML5 语义化标签

标签	语义	用途
`header`	页眉	页面或区块头部
`nav`	导航	导航链接区域
`main`	主要内容	页面主体（唯一）
`article`	文章	独立内容块
`section`	区块	内容分节
`aside`	侧边栏	次要内容/侧边信息
`footer`	页脚	页面底部
`figure/figcaption`	图文组	图片+标题
`time`	时间	标记日期时间
`mark`	高亮	标记重点文字
`details/summary`	折叠	可折叠内容块

双标记以上所有 HTML5 语义化标签均为双标记。
属性说明：语义化标签大多无特殊属性，使用全局属性 id、class、style、title、lang、data-* 等。
其中 time 有特殊属性 datetime(机器可读的日期时间)。

四、特殊效果标签

4.1 marquee 滚动标签 ⭐

marquee双标记滚动文字/内容

虽然 HTML5 已废弃，但仍被广泛支持，常用于公告滚动。

属性	取值	说明
direction	left/right/up/down	滚动方向
behavior	scroll/slide/alternate	滚动方式(循环/一次/来回)
scrollamount	数字	滚动速度(像素/步)
scrolldelay	毫秒	滚动间隔
loop	数字/-1	循环次数(-1无限)
width/height	数值	区域大小
bgcolor	颜色	背景色
hspace/vspace	数值	水平/垂直边距

<!-- 从右往左无限滚动 -->
<marquee direction="left" scrollamount="5" behavior="scroll">
  欢迎访问 BEI 创作辅助工具！
</marquee>

<!-- 来回弹跳滚动 -->
<marquee behavior="alternate" direction="left">特价促销</marquee>

<!-- 向上滚动公告 -->
<marquee direction="up" height="100" scrollamount="2">
  <p>公告1：系统升级</p>
  <p>公告2：新功能上线</p>
</marquee>

⚠️ marquee 是非标准标签，现代网页推荐用 CSS animation 或 JS 实现滚动效果，兼容性更好。

4.2 其他特殊标签

wbr单标记软换行

建议浏览器在此处换行（长单词/URL）。
常用属性：无全局属性外的特殊属性
书写格式：

这是一个很长的单词 Supercalifragilistic

ruby/rt/rp双标记注音

给汉字加拼音/注音。
ruby 属性：id、class、style
rt 属性：id、class、style
rp 属性：id、class、style
书写格式：

<ruby>汉<rt>hàn</rt></ruby>

bdi双标记双向隔离

隔离可能方向不同的文本。
常用属性：dir(文字方向 ltr/rtl/auto)、id、class、style
书写格式：

用户名：<bdi dir="rtl">عربي</bdi>

bdo双标记文字方向

dir="rtl" 从右往左显示。
常用属性：dir(方向 ltr/rtl，必填)、id、class、style
书写格式：

<bdo dir="rtl">这段文字从右往左显示</bdo>

map双标记 / area单标记图像映射

给图片不同区域加不同链接。
map 属性：name(名称)、id
area 属性：shape(形状 rect/circle/poly)、coords(坐标)、href(链接)、alt(替代)、target(打开方式)
书写格式：

<img src="map.jpg" usemap="#mymap">
<map name="mymap">
  <area shape="rect" coords="0,0,100,100" href="a.html" alt="区域A">
</map>

canvas双标记画布

用 JS 绘制图形、动画。
常用属性：width(宽度)、height(高度)、id、class、style
书写格式：

<canvas id="myCanvas" width="300" height="150">
  您的浏览器不支持Canvas
</canvas>

svg双标记矢量图

内联可缩放矢量图形。
常用属性：width、height、viewBox(视口)、xmlns(命名空间)、fill(填充)、stroke(描边)
书写格式：

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

progress双标记进度条

value/current max 显示进度。
常用属性：value(当前值)、max(最大值)、id、class、style
书写格式：

下载进度：<progress value="60" max="100">60%</progress>

五、CSS 理论

CSS（Cascading Style Sheets，层叠样式表）控制网页的外观和布局。HTML 是骨架，CSS 是皮肤和衣服。

5.1 选择器

选择器	写法	说明
元素选择器	`p { }`	选中所有 p 标签
类选择器	`.box { }`	选中 class="box" 的元素
ID选择器	`#header { }`	选中 id="header" 的元素（唯一）
后代选择器	`div p { }`	div 内的所有 p
子选择器	`div > p { }`	div 的直接子元素 p
相邻选择器	`h1 + p { }`	h1 后面紧邻的 p
属性选择器	`input[type="text"]`	按属性选中
伪类	`a:hover`	鼠标悬停状态
伪元素	`p::before`	元素前插入内容

5.2 盒模型（核心）

每个 HTML 元素都是一个盒子，由内到外：

内容(content) → 内边距(padding) → 边框(border) → 外边距(margin)

盒子实际宽度 = content + padding-left + padding-right + border-left + border-right

box-sizing: border-box;  ← 推荐！让 width 包含 padding 和 border

5.3 布局方式

📐 标准流（默认）

块级元素独占一行，行内元素并排。无需设置。

🎯 Flex 弹性布局

display:flex，一维布局神器。justify-content(主轴)、align-items(交叉轴)、flex(子项比例)

🗂️ Grid 网格布局

display:grid，二维布局。grid-template-columns/rows 定义行列

📌 定位 Position

static(默认)、relative(相对)、absolute(绝对)、fixed(固定)、sticky(粘性)

🌊 浮动 Float

float:left/right，文字环绕，需清除浮动(clearfix)

📱 响应式

@media 媒体查询 + 百分比/vw/vh + flex/grid 自适应

六、网页设计理论

6.1 色彩理论

🎨 色彩三要素

色相(Hue)：颜色的种类（红、橙、黄...）
饱和度(Saturation)：颜色的鲜艳程度，0%=灰，100%=最艳
明度(Value/Lightness)：颜色的明暗，0%=黑，100%=白

🌈 常见配色方案

方案	说明	适用场景
单色	同一色相不同明度	简约、专业
互补色	色环对面(如蓝+橙)	对比强、醒目
邻近色	色环相邻(如蓝+青)	和谐、舒适
三角色	色环三等分	活泼、平衡
分裂互补	一色+其互补两侧	对比但不刺眼

💡 配色黄金法则（60-30-10）

主色 60% + 辅助色 30% + 强调色 10%

60% 主色：背景、大面积区域
30% 辅助色：次要区域、卡片
10% 强调色：按钮、重点文字

6.2 排版 & 布局原则

📐 对齐

元素对齐产生秩序感，避免随意摆放。

📏 对比

大小、颜色、粗细对比突出重点。

🔁 重复

统一按钮、标题样式，形成视觉节奏。

↔️ 亲密性

相关元素靠近，无关元素远离。

💡 这四个原则是设计学经典"CRAP 原则"（Contrast、Repetition、Alignment、Proximity）。

📝 字体排版建议

正文字号：14px-16px，行高 1.5-1.8
标题层级：h1(2em) > h2(1.5em) > h3(1.25em) > 正文
字间距：标题可加宽，正文默认
字体搭配：无衬线(思源黑体/苹方)做正文，衬线(宋体)做标题点缀
每行字数：中文 25-40 字，英文 45-75 字符最佳

6.3 UX 用户体验原则

原则	说明
可见性	重要操作一眼可见，不要藏太深
反馈	每个操作有响应（加载动画、提示、颜色变化）
一致性	同类操作样式一致，降低学习成本
容错性	可撤销、防误操作（确认弹窗、二次验证）
简洁性	砍掉不必要的元素，专注核心任务
可访问性	色彩对比足够、支持键盘、alt 文字

🖥️ 响应式断点（Bootstrap 标准）

设备	宽度
手机	< 576px
平板竖屏	≥ 576px
平板横屏/小桌面	≥ 768px
桌面	≥ 992px
大桌面	≥ 1200px

📚 目录导航

🎨 DW学习工具

一、Adobe Dreamweaver 概述

1.1 DW 软件界面

📋 主要面板

👁️ 三种视图模式

1.2 标准工作流程

1.3 Dreamweaver 快捷键大全

⌨️ 文件操作

✂️ 编辑操作

🔍 查找替换

📝 代码编辑

🖱️ 视图切换

📦 插入元素

📐 布局 & 选中

🗂️ 面板 & 窗口

🚀 站点 & 预览

🎨 文本格式

二、HTML 基础理论

2.1 标准文档结构

2.2 DOCTYPE 声明

2.3 meta 标签详解

三、布局 & 主体标签

3.1 文本标签

3.2 列表标签

3.3 表格标签

3.4 表单标签

3.5 媒体 & 链接标签

3.6 HTML5 语义化标签

四、特殊效果标签

4.1 marquee 滚动标签 ⭐

4.2 其他特殊标签

五、CSS 理论

5.1 选择器

5.2 盒模型（核心）

5.3 布局方式

📐 标准流（默认）

🎯 Flex 弹性布局

🗂️ Grid 网格布局

📌 定位 Position

🌊 浮动 Float

📱 响应式

六、网页设计理论

6.1 色彩理论

🎨 色彩三要素

🌈 常见配色方案

💡 配色黄金法则（60-30-10）

6.2 排版 & 布局原则

📐 对齐

📏 对比

🔁 重复

↔️ 亲密性

📝 字体排版建议

6.3 UX 用户体验原则

🖥️ 响应式断点（Bootstrap 标准）