网页设计基础教程与上机指导第版Dreamweaver基础.pptVIP

第2章 Dreamweaver 8基础 教学提示和教学目标 教学提示：Dreamweaver 8是针对网页设计者而特别开发的可视化网页设计工具，作为一个所见即所得的网页编辑器，Dreamweaver 8为用户提供了方便快捷的插入栏、菜单栏、属性面板和站点管理窗口等工具，不仅使得制作过程更加直观，同时也大大简化了网页制作的步骤。 教学目标： 熟悉Dreamweaver 8的主要功能 熟悉Dreamweaver 8的新增功能 熟悉Dreamweaver 8的工作界面 掌握页面属性的设置 掌握站点的创建和管理 2.1 Dreamweaver 8简述 reamweaver 8是一款专门的网页设计软件，它采用所见即所得的编辑方式，利用行为、CSS、模板等技术对Web站点、网页和Web应用程序进行设计、编码和开发。无论用户是愿意享受手工编写HTML代码时的驾驭感还是偏爱在可视化编辑环境中工作，Dreamweaver 8都会为用户提供有用的工具，使用户拥有更加完美的Web创作体验。另外除了强大的网页编辑功能外，Dreamweaver 8还提供了完善的站点管理功能。 利用Dreamweaver 8中的可视化编辑功能，用户可以快速地创建页面而无需编写任何代码。用户可以查看所有站点元素和资源并将它们从面板直接拖到文档中，也可以在Fireworks或其他图形应用程序中创建和编辑图像，然后将它们直接导入Dreamweaver 8中，从而优化开发工作流程。 2.2 Dreamweaver 8的新增功能 Dreamweaver 8包含了许多新增的功能，这些新增功能改善了软件的易用性，无论处于设计环境还是编码环境都可以方便地制作页面。 1. 用户界面的改进 2. 多种样式呈现面板 3. 新的标准CSS面板 4. Flash视频 5. 缩放功能 2.3 Dreamweaver 8的操作界面 Dreamweaver 8的操作界面是由标题栏、菜单栏、插入栏、文档窗口、状态栏、属性面板以及多个浮动面板组成，如图2.8所示。 2.3.1 菜单栏 2.3.2 插入栏 2.3.3 浮动面板 2.3.4 【属性】面板 2.3.5 文档窗口 2.3.1 菜单栏 菜单栏中共包含10个菜单项，分别是【文件】、【编辑】、【查看】、【插入】、【修改】、【文本】、【命令】、【站点】、【窗口】和【帮助】，如图2.9所示，下面逐一介绍每个菜单的功能。 2.3.2 插入栏 插入栏包含各种类型的对象，如图像、表格和层。每个对象都是一段HTML代码，允许在插入时设置不同的属性，可以通过单击插入栏中的按钮插入表格，也可以不使用插入栏而使用插入菜单插入对象。如图2.10所示。 2.3.3 浮动面板 Dreamweaver 8中的面板统称为浮动面板，这些面板浮动于文档窗口之外，如图2.11所示，若要展开一个面板，单击面板名称左侧的展开箭头。 Dreamweaver 8提供了多种面板，可以利用【窗口】的子菜单命令打开。 2.3.4 【属性】面板 【属性】面板如图2.12所示，用于显示网页中各个元素的相关属性，用户可以通过设置【属性】面板中的各选项，对网页中的各个属性做精确的修改。 【属性】面板的内容会随当前所选定元素的不同而发生变化，在以后的章节中将结合具体的实例来讲述具体的设置。对于【属性】面板所做的大多数设置会立刻应用到文档窗口中。但是对于有些属性，则要在属性编辑文本域外单击并按Enter键，或者按Tab键切换到其他属性才会使更改生效。 2.3.5 文档窗口 如图2.13所示是文档窗口，文档窗口用于显示当前创建和编辑的网页文档。可以在设计视图、代码视图、拆分视图中查看文档内容。 2.4 文档的基本操作 Dreamweaver 8为网页设计和开发提供了灵活的开发环境，除了HTML文档以外，还可以创建打开各种基于文本的文档。 2.4.1 新建网页 2.4.2 打开网页 2.4.3 保存网页 2.4.4 设置页面属性 2.4.1 新建网页 (1)启动Dreamweaver 8软件。选择【文件】|【新建】命令，弹出【新建文档】对话框，在对话框中选择【类别】列表框的【基本页】选项，在【基本页】列表框中选择HTML选项。 (2)单击【创建】按钮，显示创建的HTML网页编辑窗口。 (4)选择【文件】|【保存】命令，弹出【另存为】对话框，在【保存在】下拉列表框中选择文件保存路径。在【文件名】文本框中输入index。 (5)单击【保存】按钮，返回网页编辑窗口新的空白网页创建完成。 2.4.2 打开网页 要打开网页，在【文件】面板中展开Dreamweaver文件夹，然后双击要打开的文件，该网页将出现在新的文档窗口中；或者在本地电脑上打开网页文档所在的文件，直接