Dreamweaver网页设计第2章.ppt

Dreamweaver 网页设计 第2章 初识Dreamweaver 【学习概述】 本章主要介绍了 Dreamweaver的安装、启动、基本工作环境和设置。学习完本章后读者应该对Dreamweaver有了一个大致的了解。本章没有对每一个工具栏或面板进行罗列性的介绍，那样会使读者感到厌倦，同时也没有必要。本章主要内容包括：Dreamweaver的安装、配置和操作界面组成。 2.1 安装和启动Dreamweaver 2.1.1 安装Dreamweaver 安装Dreamweaver（中文版）的过程如下： （1）双击Dreamweaver安装盘中的“setup.exe”文件，此时开始加载安装向导。出现Installshield Wizard界面，如图2-1所示。 2.1 安装和启动Dreamweaver （2）接着出现欢迎使用Dreamweaver和一些版权警告信息，如图2-2所示。 2.1 安装和启动Dreamweaver （3）单击“下一步”按钮，出现Dreamweaver“许可证协议”对话框，选择“我接收该许可证协议中的条款（A）”，如图2-3所示。 2.1 安装和启动Dreamweaver （4）单击“下一步”按钮，出现Dreamweaver “目标文件夹和快捷方式”对话框，如图2-4所示。 2.1 安装和启动Dreamweaver （5）直接单击“下一步”按钮，此时出现“默认编辑器”对话框，如图2-5所示。 2.1 安装和启动Dreamweaver （6）单击“下一步”按钮，此时出现“正在安装您选择的程序功能”对话框，安装时间的长短取决于你的计算机硬件配置情况，如图2-6所示。 2.1 安装和启动Dreamweaver （7）安装完后，直接单击“完成”按钮，如图2-7所示。 2.2 Dreamweaver的操作界面组成 2.2 Dreamweaver的操作界面组成 2.2.1 标题栏 Dreamweaver软件的最上面是标题栏，显示程序名称，和当时编辑的文件名称，如果该文件改动后没有保存，则文件名后面会有一个“*”号，还有最大化按钮，最小化按钮和关闭按钮，如图2-15所示。 2.2 Dreamweaver的操作界面组成 2.2.3 工具栏 工具栏把一些菜单中常用的功能提取出来以方便用户操作。工具栏中包含： “插入”、“样式呈现”、“文档”、“标准”四个子工具栏。在窗口相应位置处单击鼠标右键，可以一一把这四个子工具栏显示出来，如图2-16所示。 2.2 Dreamweaver的操作界面组成 2.2.2 菜单栏 Dreamweaver的绝大部分操作都可以利用菜单栏来完成，它主要包括10个菜单，其功能如表2-1所示： 2.2 Dreamweaver的操作界面组成 “插入”工具栏：主要用于在文档中插入各种对象。它又包括“常用”、“布局”、“表单”等8项，如图2-17所示。 2.2 Dreamweaver的操作界面组成 当选择“显示为制表符”时，更加方便操作，显示效果如图2-18所示。 2.2 Dreamweaver的操作界面组成 “样式呈现”工具栏：当在文档中使用依赖于媒体的样式表时，此工具栏才有用，能够查看设计在不同媒体类型中的呈现方式，如图2-19所示。 2.2 Dreamweaver的操作界面组成 “标准” 工具栏：主要就是为了方便新建网页、保存网页、以及复制、粘贴等最常用的功能，如图2-21所示。 2.2 Dreamweaver的操作界面组成 2.2.4 文档窗口 文档窗口用来显示当前创建或编辑的文档，可以加入任何有关的网页组件。默认的文档窗口创建的内容“所见即所得”，极大的方便了用户，甚至可以不经过浏览器直接在文档中播放动画。Dreamweaver为用户提供了三种视图方式以方便不同的用户：可以通过单击“文档”工具栏中的“代码”、“拆分”、“设计”三个按钮来分别显示“代码”视图、“拆分”视图、“设计”视图 2.2 Dreamweaver的操作界面组成 1.　“代码”视图 “代码”视图是个手工编码环境，如可以用于编写HTML、CSS、JavaScript以及服务器端脚本语言（如asp，php，jsp等）。主要用于满足喜欢手写代码的用户，通常要求比较高，如图2-22所示。 2.2 Dreamweaver的操作界面组成 2.　“拆分”视图 “拆分”视图同时兼顾“代码”视图和“设计”视图的编辑方式，同户可以在单个窗口中同时体验代码编写和可视化编辑两种方式的优点，如图2-23所示。 2.2 Dreamweaver的操作界面组成 3.　“设计”视图 “设计”视图是本书的重点，它“所见即所得”，用于可视化页面布局、可视化编辑文档、可视化开发服务器端脚本语言等。本书的大部分设计工