《第二章DreamweaverCS4基础.pptVIP

第2章 Dreamweaver CS4基础 第二章重点内容： 1、 认识Dreamweaver CS4 2、 可以利用Dreamweaver CS4建立站点 3、 Dreamweaver CS4中工作界面的几个基本设置 4、 创建网页文档及保存。 任务一：认识 Dreamweaver CS4新特性 1. 全新用户界面：美观、实用、可快速切换工作环境； 2. 相关文件和代码导航器； 3. 实时视图 4. Adobe AIR 创作支持新增功能：可直接创建HTML、JavaScript、ASP、PHP、VBScript等类型的AIR程序 5. 针对 Ajax 和 JavaScript 框架的代码提示 6. Adobe Photoshop智能对象：不需要打开PS即可在Dreamweaver CS4中更改源图像和更新源图像 7. CSS 最佳做法:提高设计CSS的最简单、最实用的方法。 任务二： Dreamweaver CS4的工作环境 1、插入栏：包含用于将各种类型的对象插入到文档中的工具按钮。例如，图像、表格、层、框架等。 2、菜单栏：菜单栏中的每一项均有一个下拉菜 Dreamweaver MX 2004中大部分操作均可通过下拉菜单实现。 3、文件面板：创建站点、管理组成站点的文件和文件夹 。 4、面板组：包含一些打开和关闭常用面板和检查器的按钮。 5、属性检查器：用于查看和更改所选对象或文本的各种属性。每种对象都具有不同的属性。 6、标题栏：显示当前正在编辑的网页名称与文件名 。 7、工具栏 文档工具栏包含可在代码视图、设计视图之间快速切换的按钮，并包含一些与选定视图有关的常用命令。 ·“代码”按钮：在文档中显示代码视图。可以直接查看和编辑HTML源代码。 ·“拆分”按钮：同时显示代码视图与设计视图。代码视图显示在上方，设计视图显示在下方。 ·“设计”按钮：在文档中显示设计视图。设计视图是默认方式，可以达到所见即所得的效果。 ·“标题”文本框：显示或编辑当前网页的标题。 ·“在浏览器中预览/调试”按钮：在浏览器中预览网页效果或检查错误。 ·“文件管理”按钮：查看文件的上传、下载等状态。 ·“刷新设计视图”按钮：刷新设计视图。 ·“视图选项”按钮：为不同的视图设置选项。 8、 页面编辑区 用于设置和编辑页面内的文本、图形和表格等。 9、 状态栏 用于选择标记、设置窗口大小以及调整文件的下载速度。 ·显示当前插入点的HTML源代码标签，在标签上单击鼠标右键可控制HTML代码，单击body可选择整个文档的正文部分。 ·显示当前网页的文件大小以及下载速度。 ·在窗口大小区域单击鼠标，可设置当前编辑窗口的大小。 任务三：工作界面的设置 1、显示和隐藏面板 使用“窗口”菜单，可以显示和隐藏各个面板。当面板选项前具有“?”标志时，表示该面板已经显示，单击该选项则关闭显示。 2、调整面板形状与面板组合 （1） 调整大小 使用鼠标拖动面板的上、下、左、右边框或四个角，可以调整面板的大小。 （2）合并面板 在Dreamweaver 中，大多数面板可以合并成一个综合面板。 3、首选参数 “编辑----首选参数” 4、标尺设置 “查看----标尺---显示” 5、网格设置 “查看----网格----显示网格”或“查看----网格设置” 项目二：初步制作Dreamweaver网页 任务一：网页文档的创建和存储 1. 新建网页文档 （1）启动Dreamweaver?CS4后会出现如图2-9所示的起始页，在新建选项下单击所需创建的文档类型就可以创建一个文档，在这里单击“HTML”就可以直接创建一个HTML网页文档。 （2）在Dreamweaver?CS4主窗口中，单击“文件”→“新建”菜单命令就可以打开如图2-21所示的“新建文档”对话框，选择“空白页”选项卡，然后在网页类型中选择网页类型，单击“创建”按钮就可以创建相应类型的网页文档。 2. 保存文档 保存网页文档有如下三种方法。 （1）在Dreamweaver?CS4主窗口中，单击菜单“文件”→“保存”或“全部保存”菜单命令。 （2）单击标准工具栏中的“保存”按钮或“全部保存”按钮。 （3）按“Ctrl+S”组合键。 3. 打开网页文档 打开网页文档有如下两种方法。 （1）在Dreamweaver?CS4主窗口中，单击菜单“文件”→“打开”菜单命令，弹出“打开”对话框，选择所需打开的文档，然后单击“打开”按钮就可打开相应文档。 （2）在“文件”面板中双击需要打开的文件。 4. 关闭网页文档 在Dreamweaver?CS4主窗口中，单击菜单“文件”→“关闭”或“全部关闭”菜单命令就可以关闭网页文档。如果网页