- 网页设计与制作案例教程（HTML+CSS+DIV+JavaScript）
- 李志云
- 1728字
- 2021-01-28 17:32:59
1.4 Dreamweaver工具的使用
创建、编辑网页可以使用常用的文本编辑器，如Editplus、记事本等。但最方便的网页制作工具是Dreamweaver，其智能化的输入代码方式、方便的可视化操作都为网页制作和浏览提供了很大的方便。本节主要介绍Dreamweaver CS6的使用。
1.4.1 Dreamweaver的发展
Adobe Dreamweaver（DW）中文名称为“梦想编织者”，原来是美国Macromedia公司开发的集网页制作和网站管理于一身的所见即所得网页编辑器。DW 是第一套针对专业网页设计师开发的视觉化网页制作工具，它可以轻而易举地制作出跨越平台限制和浏览器限制的充满动感的网页。
Macromedia公司成立于1992年，2005年被Adobe公司收购。Adobe公司推出的版本从Adobe Dreamweaver CS3到Dreamweaver CS6，再到最新版本Dreamweaver CC。Dreamweaver CC版本只能运行在Windows 7及以上系统，Windows XP及以下系统不能运行。
本书采用Adobe Dreamweaver CS6版本，它是当前应用比较广泛的版本。
1.4.2 Dreamweaver CS6的操作界面
启动Dreamweaver CS6后，其操作界面主要由6部分组成，包括菜单栏、插入栏、文档工具栏、文档窗口、属性面板、CSS 样式面板及文件面板，每个部分的具体位置如图1-5所示。
图1-5 Dreamweaver CS6操作界面
1．菜单栏
Dreamweaver CS6菜单栏包括文件、编辑、查看、插入、修改、格式、命令、站点、窗口、帮助10个菜单项，如图1-5所示。
2．插入栏
经常使用的标记，可以直接通过插入栏中的相关按钮选择，这些按钮一般都和菜单中的命令相对应。插入栏集成了多种网页元素，包括超链接、图像、表格、多媒体等，如图1-5所示。
3．文档工具栏
文档工具栏提供了各种“文档”视图窗口，包括代码、拆分和设计视图，通过单击此处的选项卡，可以进行三种视图方式的切换。另外，单击该工具栏中相应按钮还可以浏览及刷新网页等。
4．文档窗口
文档窗口是制作网页时用到最多的区域之一，此处会显示所有打开的文档，并对网页文档进行编辑。
5．属性面板
属性面板主要用于显示在文档窗口中所选中元素的属性，用户可以在属性面板中直接对网页元素的属性进行修改。选中的元素不同，属性面板中的内容也不一样。
注意
如果属性面板不显示，可以从菜单栏选择“窗口”｜“属性”命令，或者按组合键“Ctrl+F3”让其显示。
6.CSS样式面板
CSS样式面板用于显示或设置网页元素的样式。用户可以在CSS样式面板中创建或修改网页元素的样式。如果网页对元素创建了样式，在CSS样式面板中可以查看到该网页元素的所有样式。
注意
（1）一般制作网页时，不通过 CSS 样式面板创建样式，而是通过代码创建CSS样式，这样效率会更高。
（2）如果 CSS 样式面板不显示，可以从菜单栏选择“窗口”｜“CSS 样式”命令，或者按组合键“Shift +F11”让其显示。
7．文件面板
文件面板是很重要的面板，用于显示或添加当前站点中的文件或文件夹。用户选中当前站点名称，右键单击，选择“新建文件”或“新建文件夹”，可以在当前站点中添加文件或文件夹。如果在文件面板中双击文件名称，可打开该文件进行修改。另外，通过文件面板还可以对文件进行删除、剪切、复制等操作。
注意
（1）在文件面板中选中文件后，按键盘上的Delete键，可快速删除文件；按组合键“Ctrl+D”可复制文件。
（2）如果文件面板不显示，可以从菜单栏选择“窗口”｜“文件”命令，或者按快捷键F8让其显示。
1.4.3 案例：创建第一个网页
要求：启动Dreamweaver CS6，创建第一个网页，在网页上显示：“这是我的第一个网页。”
具体步骤如下。
1．启动Dreamweaver CS6
双击桌面上的Dreamweaver CS6图标，进入软件开始界面，如图1-6所示。
2．新建文件
选择菜单栏中的“文件”｜“新建”命令，打开“新建文档”窗口，单击“创建”按钮，如图1-7所示，即可创建一个空白的HTML文档。
3．编写HTML代码
新建HTML文档后，切换到代码视图，这时在文档窗口中会出现Dreamweaver自带的代码，如图1-8所示。关于这些代码，在第2章中会详细介绍。
图1-6 Dreamweaver CS6开始界面
图1-7 新建空白页
图1-8 新建HTML文档时的代码
在代码视图的<title>与</title>之间，输入HTML文档的标题，这里输入：“我的第一个网页。”然后在<body>与</body>标记之间添加网页的主体内容，如图1-9所示。
<p>这是我的第一个网页。</p>
图1-9 添加网页代码
4．保存文件
执行菜单栏中的“文件”｜“保存”命令，或按组合键“Ctrl+S”，在弹出来的“另存为”对话框中选择文件的保存路径并输入文件名，即可保存文件。此处将文件名命名为“1-1.html”。
5．运行文件，浏览网页
在Dreamweaver CS6的环境中，单击文档工具栏中的“在浏览器中预览/调试”按钮
，或按快捷键F12，浏览网页，效果如图1-10所示。
图1-10 在浏览器中浏览网页
注意
浏览网页时，也可通过双击文件名来实现，如图1-11所示。
图1-11 双击文件名浏览网页