dreamweaver 8使用教程-贝博恩创新科技网

Dreamweaver 8作为经典的网页设计工具，至今仍因其直观的可视化界面和强大的代码编辑功能被许多用户青睐，以下将从基础操作、页面布局、代码编辑、站点管理及动态功能五个方面，详细介绍其使用方法,帮助新手快速上手。

（图片来源网络，侵删）

基础操作与界面熟悉

启动Dreamweaver 8后，首先会进入工作界面，主要由菜单栏、插入栏、文档工具栏、属性检查器、面板组等部分组成。

菜单栏：包含文件、编辑、查看、插入、修改、文本、命令、站点、窗口、帮助等菜单，几乎涵盖所有操作命令。
插入栏：分为常用、布局、表单、文本、HTML等类别，用于快速插入网页元素，如图片、表格、表单等，点击“常用”类别下的图像按钮，即可弹出本地文件选择框，插入图片后，在属性检查器中可调整图片大小、边距及替代文本。
文档工具栏：提供代码、设计、拆分三种视图切换按钮，实时预览功能（按F12）可快速在浏览器中查看页面效果。
属性检查器：选中页面元素（如文本、图片）时，自动显示其属性，方便修改，选中文字后，可在属性检查器中设置字体、大小、颜色及对齐方式。

表格操作示例：
| 操作步骤 | 具体方法 | |------------------|--------------------------------------------------------------------------| | 插入表格 | 点击“插入>表格”，设置行数、列数、表格宽度（像素或百分比）及边框粗细。 | | 调整表格属性 | 选中表格，在属性检查器中修改对齐方式、背景颜色，或通过拖拽右下角控制点调整大小。 | | 合并/拆分单元格 | 选中多个单元格，右键选择“表格>合并单元格”；或将光标置于单元格内，点击“拆分单元格”按钮。 |

页面布局与设计

Dreamweaver 8提供多种布局工具，适合创建结构清晰的网页。

使用布局表格：点击“插入>布局表格”，在页面中绘制布局单元格，通过拖拽调整位置，适合复杂页面设计，可先绘制一个顶部横幅单元格，再绘制左侧导航栏和右侧内容区单元格。
CSS样式应用：通过“窗口>CSS样式”打开面板，新建CSS规则，可定义类、ID或标签样式，新建一个类“.title”，设置字体为“微软雅黑”、大小“24px”、颜色“#333”，然后选中标题文字，在属性检查器的“类”下拉菜单中选择“.title”即可应用。
模板创建：对于重复结构的页面（如多个子页），可通过“文件>保存为模板”创建模板，定义可编辑区域（插入>模板对象>可编辑区域），基于模板生成新页面时，仅可修改可编辑区域内容,提高效率。

代码编辑与优化

Dreamweaver 8支持可视化与代码同步编辑，适合不同需求的用户。

（图片来源网络，侵删）

三种视图切换：
- 设计视图：可视化编辑页面，所见即所得；
- 代码视图：直接编写HTML、CSS、JavaScript代码；
- 拆分视图：上方显示代码，下方显示设计效果，修改代码时设计视图实时更新。
代码提示功能：在代码视图中输入标签或属性时，系统会自动弹出提示列表，减少记忆负担，输入<后，会显示所有HTML标签选项。
标签检查器：通过“窗口>标签检查器”查看选中元素的详细属性，如<div>标签的ID、Class、样式等,支持快速修改。

站点管理与文件上传

建立本地站点是网页设计的基础步骤，便于文件管理和后续上传。

定义站点：点击“站点>管理站点>新建”，输入站点名称（如“MyWeb”），选择本地根文件夹（存放网站文件的目录），点击“确定”完成创建。
文件管理：在“文件”面板中，可创建文件夹（如“images”“css”）、新建HTML文件，通过拖拽文件调整结构，将所有图片放入“images”文件夹，便于后期维护。
上传文件：通过“站点>管理站点>编辑>远程信息”，选择服务器访问方式（如FTP），输入主机地址、用户名、密码后，点击“文件”面板的“上传文件”按钮,即可将本地文件上传至服务器。

动态功能与表单应用

Dreamweaver 8支持创建动态网页，需配合服务器技术（如ASP、PHP）。

创建表单：点击“插入>表单”，表单域会显示为红色虚线框，在表单内插入文本域（用于输入用户名）、单选按钮（用于性别选择）、提交按钮等。
绑定动态数据：若需连接数据库，需先在“应用程序”面板中创建数据库连接（需服务器环境支持），然后将记录集绑定到页面元素，如动态表格显示数据库中的用户列表。
行为面板：通过“窗口>行为”为页面添加交互效果，如点击图片弹出提示框（选择“交换图像”行为）、鼠标悬停时改变背景颜色等。