Dreamweaver CS6 新手入门：打造网页设计的梦幻之旅

Dreamweaver CS6 初学者使用教程

Adobe Dreamweaver CS6是一款集网页设计、网站开发于一体的所见即所得的网页编辑器，是第一套针对专业网页设计师的视觉化网页设计工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。对于初学者来说，如何快速上手Dreamweaver CS6是一个需要解决的问题。以下是一篇详细的Dreamweaver CS6初学者使用教程，希望能帮助大家更好地掌握这款强大的网页设计软件。

一、安装与启动

1. 下载安装：

从Adobe官方网站或其他正规渠道下载Dreamweaver CS6安装包。

根据安装向导提示，完成安装过程。注意在安装过程中可能会提示输入序列号或登录Adobe账户，按照提示操作即可。

2. 启动软件：

双击桌面上的Dreamweaver CS6图标，或在开始菜单中找到并启动它。

首次启动可能会弹出欢迎使用窗口，可以选择“新建”来创建一个新的文档，或“打开”已有文件。

二、界面介绍

1. 菜单栏：

位于软件顶部，包含文件、编辑、查看、插入、修改、站点、窗口、帮助等菜单项。

可以通过这些菜单项访问各种命令和功能。

2. 工具栏：

位于菜单栏下方，包含一系列常用的快捷按钮，如新建、打开、保存、预览等。

可以通过点击这些按钮快速执行相关操作。

3. 属性面板：

通常在右侧显示，用于设置选中对象的属性，如文本样式、图片属性等。

可以根据当前选中的对象不同，动态更新显示的内容。

4. 文档窗口：

中央区域是主要的文档窗口，用于编辑和查看网页内容。

可以通过拖动调整其大小，或隐藏其他面板以最大化显示区域。

5. 面板组：

位于文档窗口的左侧或右侧，包含各种面板，如文件面板、CSS样式面板、代码视图面板等。

可以根据需要打开或关闭这些面板。

三、创建新网页

1. 新建HTML文件：

在菜单栏中选择“文件”>“新建”。

在弹出的新建文档窗口中，选择“HTML”类型，并选择适当的文档类型（如HTML5）。

点击“创建”按钮，即可创建一个新的HTML文件。

2. 编辑网页内容：

在文档窗口中，可以直接输入文本、插入图片、表格等元素。

可以通过属性面板设置这些元素的属性，如文本颜色、字体大小、图片路径等。

3. 保存文件：

在菜单栏中选择“文件”>“保存”或使用快捷键Ctrl+S（Windows）或Cmd+S（Mac）。

在弹出的保存对话框中，选择保存位置并输入文件名，然后点击“保存”按钮。

四、使用CSS样式

1. 创建CSS样式表：

在菜单栏中选择“文件”>“新建”>“CSS样式表”。

在弹出的对话框中，输入样式表名称并选择保存位置，然后点击“创建”按钮。

在新建的CSS样式表文件中，可以编写CSS代码来定义样式规则。

2. 应用CSS样式：

在HTML文件中，选择需要应用样式的元素。

在属性面板中，找到“类”或“ID”属性，并输入相应的CSS类名或ID名。

也可以直接在HTML代码中添加class或id属性，并引用相应的CSS样式。

3. 编辑CSS样式：

打开已创建的CSS样式表文件，在代码视图中编辑CSS代码。

可以通过修改选择器、属性和值来调整样式效果。

也可以在CSS样式面板中，通过图形化界面编辑样式规则。

五、使用模板和库

1. 创建模板：

创建一个新的HTML文件，并设计好网页的布局和内容。

在菜单栏中选择“文件”>“保存为模板”。

在弹出的对话框中，输入模板名称并选择保存位置，然后点击“保存”按钮。

2. 应用模板：

在菜单栏中选择“文件”>“新建基于模板的页面”。

在弹出的对话框中，选择已创建的模板，然后点击“创建”按钮。

新建的页面将自动应用所选模板的布局和内容，可以在此基础上进行编辑和修改。

3. 创建库项目：

在HTML文件中，选择需要保存为库项目的元素。

在菜单栏中选择“修改”>“库”>“添加对象到库”。

在弹出的对话框中，输入库项目名称并选择保存位置（通常保存在站点的“Library”文件夹中），然后点击“确定”按钮。

4. 应用库项目：

在菜单栏中选择“修改”>“库”>“插入库项目”。

在弹出的对话框中，选择已创建的库项目，然后点击“插入”按钮。

所选的库项目将被插入到当前文档中，并可以在此基础上进行编辑和修改。

六、站点管理

1. 创建站点：

在菜单栏中选择“站点”>“新建站点”。

在弹出的对话框中，输入站点名称和本地根文件夹路径（即存放网页文件的文件夹）。

可以根据需要设置远程服务器信息（如果需要将网页上传到服务器）。

点击“保存”按钮，即可创建一个新的站点。

2. 管理文件：

在文件面板中，可以查看和管理站点中的文件。

可以进行文件的创建、删除、重命名等操作。

也可以将文件上传到远程服务器或从服务器下载文件。

3. 站点地图：

在文件面板中，可以选择“站点地图”视图来查看站点的结构。

可以直观地看到各个页面之间的关系和层次结构。

可以通过拖动来调整页面的位置和层次关系。

七、预览与测试

1. 预览网页：

在菜单栏中选择“文件”>“预览”或使用快捷键F12。

Dreamweaver CS6将自动在默认浏览器中打开当前网页进行预览。

可以在预览窗口中查看网页的显示效果，并进行必要的调整。

2. 兼容性测试：

在不同的浏览器中预览网页，以确保其在不同环境下的显示效果一致。

可以使用浏览器兼容性检查工具来检测网页在不同浏览器中的兼容性问题。

根据检测结果进行相应的调整和优化。

八、发布与上传

1. 配置远程服务器：

在菜单栏中选择“站点”>“管理站点”。

在弹出的对话框中，选择需要配置的站点，然后点击“编辑”按钮。

在“服务器”选项卡中，添加远程服务器的信息，包括服务器类型、主机名、用户名、密码等。

点击“测试连接”按钮，确保配置正确无误。

2. 上传文件：

在文件面板中，选择要上传的文件或文件夹。

在菜单栏中选择“站点”>“上传文件”。

Dreamweaver CS6将自动将选中的文件上传到远程服务器上的相应位置。

可以在上传过程中查看上传进度和上传结果。

3. 同步文件：

在文件面板中，可以选择“同步”选项来同步本地和远程服务器上的文件。

Dreamweaver CS6将自动比较本地和远程服务器上的文件差异，并提示用户进行上传、下载或删除操作。

通过同步操作，可以确保本地和远程服务器上的文件保持一致。

通过以上步骤，初学者可以逐步掌握Dreamweaver CS6的基本使用方法和技巧。当然，Dreamweaver CS6的功能非常强大和复杂，要全面掌握还需要不断学习和实践。希望这篇教程能为初学者提供一些帮助和指导，让大家在网页设计的道路上更加顺利和高效。