在Dreamweaver中，添加Banner两侧的按钮是一个常见的网页设计任务，这有助于用户交互，比如在轮播图或幻灯片展示中切换图片。以下是一个详细的步骤教程，教你如何在Banner左右两侧添加按钮：
1. **准备素材**：
你需要准备一张或一组用于Banner的图片素材，并将它们存放在项目文件夹中的“img”图片库中。
2. **创建HTML文件**：
打开Adobe Dreamweaver，通过`Ctrl+N`新建一个HTML文件，并保存。确保文件保存在正确的位置，以便能够访问到图片资源。
3. **编写HTML结构**：
在`<body>`标签内，创建一个包含图片和按钮的`<div>`元素。这个`<div>`通常会有一个特定的类名，例如`.banner`，用于后续CSS样式的选择。代码如下：
```html
<div class="banner">
<img src="img/banner.jpg">
<input type="button" value="左" class="bt_left">
<input type="button" value="右" class="bt_right">
</div>
```
这里，`<img>`标签加载Banner图片，而两个`<input type="button">`标签分别表示“左”和“右”按钮，用于切换图片。
4. **设置CSS样式**：
在`<head>`标签内，添加`<style>`标签来定义CSS样式。为`.banner`设置宽度、高度、内边距和溢出隐藏，这样可以确保图片适应容器大小并隐藏超出的部分：
```css
.banner {
width: 1200px;
height: 300px;
margin: 0 auto; /* 居中对齐 */
overflow: hidden;
}
.banner img {
width: 100%; /* 图片宽度填充整个 Banner 容器 */
}
```
5. **按钮定位**：
接下来，使用绝对定位将左右按钮放置在合适的位置。这里，我们将`.bt_left`按钮定位在顶部居中，左边距20像素，`.bt_right`按钮则定位在顶部居中，右边距20像素：
```css
.bt_left {
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%); /* 使按钮垂直居中 */
}
.bt_right {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%); /* 使按钮垂直居中 */
}
```
6. **实现功能**：
虽然上述步骤完成了按钮的视觉布局，但实际的图片切换功能需要JavaScript来实现。在Dreamweaver中，你可以使用内置的JavaScript库（如jQuery）或者自定义JavaScript代码来添加事件监听器，当用户点击“左”或“右”按钮时，实现图片的切换效果。
注意，上述教程仅展示了如何在HTML和CSS层面创建按钮布局，实际的按钮功能可能需要进一步的JavaScript编程来完成。如果你不熟悉JavaScript，可能需要学习一些基础，或者寻找现成的轮播图插件来简化这个过程。
通过这个教程，你应该掌握了在Dreamweaver中为Banner添加左右按钮的基本步骤。记住，实践是最好的老师，不断尝试和修改，你会逐渐精通网页设计。继续学习和关注更多相关教程，你的技能将会不断提升。
