使用纯HTML和CSS（最基础、最常用）

这是制作网页按钮的标准方法,通过一个<button>标签和CSS样式来实现，这种方法制作的按钮对搜索引擎友好，并且可访问性强。

步骤 1：插入按钮代码

1. 打开你的 HTML 文件（index.html），将光标放在你想要插入按钮的位置。
2. 切换到 “代码” 视图（Code View）。
3. 输入以下<button>标签：

   <button type="button">点击我</button>

   • <button>: 这是按钮的HTML标签。
   • type="button": 这是一种很好的实践，它明确告诉浏览器这是一个按钮，可以防止在表单中意外提交表单，如果你的按钮确实是为了提交表单，则使用 type="submit"。

步骤 2：使用CSS设计按钮样式

我们需要让这个按钮看起来更漂亮,你可以使用 “CSS设计器” 面板，这是DW最强大的功能之一。

1. 确保你处于 “实时” 视图或 “拆分” 视图。

2. 在右侧的 “CSS设计器” 面板中，点击 “源” 旁边的 号，选择 “创建新的CSS文件”，给你的CSS文件起个名字，style.css，然后点击“创建”。

3. 在 “选择器” 部分，输入以下选择器来专门针对我们的按钮：

   
   （图片来源网络，侵删）

   .my-button {
       /* 在这里写样式 */
   }

   • 注意：我使用了 .my-button 这个类名，你也可以直接使用 button 选择器来让所有按钮都应用这个样式，使用类名更灵活，可以给不同按钮不同样式。

4. 在 “属性” 区域，你可以像搭积木一样为按钮添加样式：

   • 背景色：在 “背景” 部分，点击色块，选择一个你喜欢的颜色（比如蓝色 #007BFF）。
   • 文字颜色：在 “文本” 部分，点击颜色块，选择一个与背景对比度高的颜色（比如白色 #FFFFFF）。
   • 内边距：在 “盒” 部分，设置 Padding（内边距），10px 20px，这会让按钮内部有空间，文字不会贴边。
   • 边框：在 “边框” 部分，你可以设置边框的宽度、样式和颜色，如果不需要边框，可以设置宽度为 0。
   • 圆角：在 “边框” 部分，设置 Border-radius（圆角），5px，可以让按钮看起来更圆润。
   • 鼠标悬停效果：在 “选择器” 部分的 .my-button 上点击右键，选择 “复制” -> “克隆选择器”，新的选择器会变成 .my-button:hover。
     • 在 .my-button:hover 的属性中，稍微改变一下背景色，比如从 #007BFF 改为 #0056b3，这样当鼠标移到按钮上时，颜色会变深，给用户一个视觉反馈。

5. 回到HTML代码，给你的<button>标签添加 class 属性，让它应用你刚刚写的CSS：

   <button type="button" class="my-button">点击我</button>

最终效果： 你会在“实时”视图中看到一个漂亮的、带有悬停效果的按钮。

使用DW的“插入”面板（可视化操作）

如果你不喜欢写代码,DW的可视化工具也可以帮你快速插入一个带样式的按钮。

1. 将光标放在你想要插入按钮的位置。
2. 切换到 “插入” 面板（如果看不到，可以通过菜单栏的“窗口” -> “插入”来打开）。
3. 在 “插入” 面板中，找到 “表单” 分类（通常看起来像一个信封的图标）。
4. 点击 “按钮” 图标，Dreamweaver 会自动插入一个基础的<button>标签到你的代码中。
5. 你可以直接在 “属性” 检查器（窗口底部）中设置按钮的ID、类名、文本等。
6. 样式设计：样式设计部分和方法一完全一样，你需要回到 “CSS设计器” 面板，为这个按钮添加CSS类和样式。

这种方法只是帮你省去了手动输入<button>标签的步骤，核心的样式设计仍然依赖于CSS。

添加交互行为（如点击跳转）

一个按钮通常需要有功能,比如点击后跳转到另一个页面。

链接到另一个页面（使用 <a>

按钮也可以用链接<a>标签来制作，这样可以直接跳转。

1. 在代码视图中,用<a>标签包裹你的按钮：

   <a href="about.html">
       <button type="button" class="my-button">关于我们</button>
   </a>

   • href="about.html": 这是链接的目标地址。

2. 优化样式（可选）：默认情况下，链接里的按钮可能会有下划线，你可以在CSS中移除它：

   a .my-button {
       text-decoration: none; /* 移除下划线 */
   }

使用DW的“行为”面板（高级交互）

DW的“行为”面板可以让你通过可视化方式添加JavaScript交互，比如点击按钮后弹出提示框、打开新窗口等。

1. 选中你想要添加行为的按钮（在“设计”或“实时”视图中点击它）。
2. 打开 “窗口” -> “行为” 面板。
3. 在 “行为” 面板中，点击 号。
4. 从弹出的菜单中选择一个行为,
   • “弹出信息”：点击后会弹出一个简单的提示框，选择后会让你输入要显示的文本。
   • “打开浏览器窗口”：点击后会弹出一个新的、指定大小的浏览器窗口。
   • “转到URL”：点击后跳转到指定的页面（功能上和方法一的链接类似）。
5. 设置好行为的参数后,点击“确定”，你会在“行为”面板中看到你添加的事件（如 onClick）和动作。

---

总结与最佳实践

方法	优点	缺点	适用场景
HTML + CSS	标准、灵活、性能好、可访问性强	需要理解基础的HTML和CSS	强烈推荐，适用于所有类型的网页按钮。
插入面板	可视化操作，快速插入基础标签	不够灵活，样式仍需手动编写	适合初学者快速搭建表单元素。
添加行为	可视化添加JavaScript交互，无需手写代码	行为相对老旧，可能不被现代浏览器完全支持，不够灵活	适合快速添加一些简单的客户端交互效果。

给新手的建议：

1. 从方法一开始学起，这是Web开发的基础，理解<button>和CSS如何协同工作至关重要。
2. 善用“CSS设计器”，它能让你实时看到样式变化，非常直观。
3. 多尝试：在CSS设计器里多换换颜色、字体、间距，看看效果有什么不同，这是最快的学习方式。
4. 使用语义化标签：如果按钮是表单的一部分，用<button type="submit">；如果只是一个触发行为的链接，用<a>包裹<button>是很好的选择。

希望这个详细的指南能帮助你在Dreamweaver中轻松制作出漂亮的按钮！