Dreamweaver网页设计第2章

1、 本章主要介绍了 Dreamweaver的安装、启动、基本工作环境和设置。学习完本章后读者应该对Dreamweaver有了一个大致的了解。本章没有对每一个工具栏或面板进行罗列性的介绍，那样会使读者感到厌倦，同时也没有必要。本章主要内容包括：Dreamweaver的安装、配置和操作界面组成。2.1.1安装Dreamweaver安装Dreamweaver（中文版）的过程如下：（1）双击Dreamweaver安装盘中的“setup.exe”文件，此时开始加载安装向导。出现Installshield Wizard界面，如图2-1所示。图2-1 加载安装向导（2）接着出现欢迎使用Dreamweaver和

2、一些版权警告信息，如图2-2所示。图2-2“欢迎使用和版权警告” 对话框（3）单击“下一步”按钮，出现Dreamweaver“许可证协议”对话框，选择“我接收该许可证协议中的条款（A）”，如图2-3所示。图2-3 “许可证协议”对话框（4）单击“下一步”按钮，出现Dreamweaver “目标文件夹和快捷方式”对话框，如图2-4所示。图2-4 “目标文件夹和快捷方式”对话框（5）直接单击“下一步”按钮，此时出现“默认编辑器”对话框，如图2-5所示。图 2-5“默认编辑器”对话框（6）单击“下一步”按钮，此时出现“正在安装您选择的程序功能”对话框，安装时间的长短取决于你的计算机硬件配置情况，如图

3、2-6所示。图 2-6 “正在安装您选择的程序功能”对话框（7）安装完后，直接单击“完成”按钮，如图2-7所示。图2-7 安装完成图 2-14 Dreamweaver的操作界面 2.2.1标题栏Dreamweaver软件的最上面是标题栏，显示程序名称，和当时编辑的文件名称，如果该文件改动后没有保存，则文件名后面会有一个“*”号，还有最大化按钮，最小化按钮和关闭按钮，如图2-15所示。图 2-15 标题栏2.2.3工具栏工具栏把一些菜单中常用的功能提取出来以方便用户操作。工具栏中包含：“插入”、“样式呈现”、“文档”、“标准”四个子工具栏。在窗口相应位置处单击鼠标右键，可以一一把这四个子工具栏显

4、示出来，如图2-16所示。图 2-16工具栏2.2.2菜单栏Dreamweaver的绝大部分操作都可以利用菜单栏来完成，它主要包括10个菜单，其功能如表2-1所示： “插入”工具栏：主要用于在文档中插入各种对象。它又包括“常用”、“布局”、“表单”等8项，如图2-17所示。图 2-17 “插入”工具栏当选择“显示为制表符”时，更加方便操作，显示效果如图2-18所示。图 2-18 “插入”工具栏（制表符样式） “样式呈现”工具栏：当在文档中使用依赖于媒体的样式表时，此工具栏才有用，能够查看设计在不同媒体类型中的呈现方式，如图2-19所示。图 2-19 “样式呈现”工具栏 “文档”工具栏：包含编辑

5、文档的常用按钮，如切换视图、设置标题、上传、下载网页等功能，如图2-20所示。图 2-20 “文档”工具栏 “标准” 工具栏：主要就是为了方便新建网页、保存网页、以及复制、粘贴等最常用的功能，如图2-21所示。图 2-21 “标准” 工具栏2.2.4 文档窗口文档窗口用来显示当前创建或编辑的文档，可以加入任何有关的网页组件。默认的文档窗口创建的内容“所见即所得”，极大的方便了用户，甚至可以不经过浏览器直接在文档中播放动画。Dreamweaver为用户提供了三种视图方式以方便不同的用户：可以通过单击“文档”工具栏中的“代码”、“拆分”、“设计”三个按钮来分别显示“代码”视图、“拆分”视图、“设计

6、”视图1.“代码”视图“代码”视图是个手工编码环境，如可以用于编写HTML、CSS、JavaScript以及服务器端脚本语言（如asp，php，jsp等）。主要用于满足喜欢手写代码的用户，通常要求比较高，如图2-22所示。图 2-22 “代码”视图2.“拆分”视图“拆分”视图同时兼顾“代码”视图和“设计”视图的编辑方式，同户可以在单个窗口中同时体验代码编写和可视化编辑两种方式的优点，如图2-23所示。图 2-23 “拆分”视图3.“设计”视图“设计”视图是本书的重点，它“所见即所得”，用于可视化页面布局、可视化编辑文档、可视化开发服务器端脚本语言等。本书的大部分设计工作就是在“设计”视图模式下

7、，主要用于开发静态网页，如图2-24所示。图 2-24 “设计”视图2.2.5属性面板属性面板主要用于自动显示用户在文档窗口中选中的对象属性，当选中对象不同时，属性面板显示的属性也不同。选中文档中的文本时属性面板相应变化情况如图2-25所示。图2-25 选中文本“世界杯”时的属性面板2.2.6状态栏状态栏是对当前编辑文档的一些说明，比如选中了哪个对象（比如表格、层、图像等），当前文档窗口大小、下载文件大小/估计下载时间等，如图2-28所示。图2-28 状态栏2.2.7面板组面板组是Dreamweaver中常用的资源面板，主要包括“CSS”、“应用程序”、“标签检查器”、“文件”、“历史记录”等

8、面板，可以通过窗口菜单显示或隐藏面板。一个面板又有一个或多个子面板，如“文件”面板下有三个子面板：“文件”面板、“资源”面板、“代码片断”面板，通过单击文件面板前面的三角形，可以打开文件子面板，如图2-29所示。图2-29 展开“文件”子面板理论巩固填空题（1）当启动Dreamweaver“工作区设置”对话框时，有哪两种布局可供选择_。（2）Dreamweaver的工具栏主要作用是_。（3）Dreamweaver的状态栏可以显示_。（4）Dreamweaver的工具栏中包括_等四个子工具栏。（5）Dreamweaver为用户提供了三种视图方式，分别为_。（6）Dreamweaver中按快捷键_可以临时隐藏所以面板。（7）当使用1024*768的屏幕分辨率来设计网页时，在Dreamweaver中