网页设计基础教程与上机指导第版Dreamweaver基础.ppt
第2章 Dreamweaver 8基础,教学提示和教学目标 2.1 Dreamweaver 8简述 2.2 Dreamweaver 8的新增功能 2.3 Dreamweaver 8的操作界面 2.4 文档的基本操作,教学提示和教学目标,教学提示：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文件夹，然后双击要打开的文件，该网页将出现在新的文档窗口中；或者在本地电脑上打开网页文档所在的文件，直接双击即可打开网页文档；或者在要打开的网页上，单击鼠标右键，在弹出的快捷菜单中选择【打开】命令，即可打开网页文档。,2.4.3 保存网页,新建网页后，需要对网页进行保存，在网页制作过程中需要养成随时保存网页的良好习惯，防止由于计算机的故障使制作好的网页丢失，造成不必要的损失。 (1) 在Dreamweaver编辑窗口中，选择【文件】|【保存】命令，弹出【另存为】对话框，在对话框中选择保存网页的位置，在【文件名】文本框中输入要保存文档的名称index，【保存类型】设置为【*所有文档(*.htm；)】。 (2) 单击【保存】按钮，完成网页的保存。,2.4.4 设置页面属性,(1)选择【修改】|【页面属性】命令，弹出【页面属性】对话框，在对话框可以设置关于整个文档的一些信息，在【外观】选项中可以设置页面的一些基本属性。在【外观】选项中可以进行如下设置。 (2)在【链接】选项中可以设置与页面链接有关的属性。在【链接】选项中可以进行如下设置。 (3)在【标题】选项页中可以设置标题字体和颜色的一些属性。在【标题】选项中可以进行如下设置。 (4)在【标题/编码】选项页中可以设置网页标题和文字编码。在【标题/编码】选项页中可以进行如下设置。 (5)在【跟踪图像】选项页中可以设置跟踪图像的属性。跟踪图像一般在设计网页时作为网页背景，用于引导网页的设计。单击文本框右边的【浏览】按钮，弹出【选择图像源文件】对话框，选择一个图像作为跟踪图像。拖动【透明度】滑块可以指定图像的透明度，透明度越高图像显示得越清晰。 (6)设置完成后，单击【确定】按钮。至此，页面属性设置完毕。,
