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

《网页设计基础教程与上机指导第版Dreamweaver基础.ppt》由会员分享，可在线阅读，更多相关《网页设计基础教程与上机指导第版Dreamweaver基础.ppt（15页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、http:/网页设计基础教程与上机指导第版Dreamweaver基础 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望http:/教学提示和教学目标教学提示和教学目标n教学提示：教学提示：Dreamweaver 8是针对网页设计者而特别开发的是针对网页设计者而特别开发的可视化网页设计工具，作为一个所见即所得的网页编辑器，可视化网页设计工具，作为一个所见即所得的网页编辑器，Dreamweaver 8为用户提供了方便快捷的插入栏、菜单栏、为用户提供了方便快捷的插入栏、菜

2、单栏、属性面板和站点管理窗口等工具，不仅使得制作过程更加直观，属性面板和站点管理窗口等工具，不仅使得制作过程更加直观，同时也大大简化了网页制作的步骤。同时也大大简化了网页制作的步骤。n教学目标：教学目标：熟悉熟悉Dreamweaver 8的主要功能的主要功能熟悉熟悉Dreamweaver 8的新增功能的新增功能熟悉熟悉Dreamweaver 8的工作界面的工作界面掌握页面属性的设置掌握页面属性的设置掌握站点的创建和管理掌握站点的创建和管理http:/2.1 Dreamweaver 8简述简述nreamweaver 8是一款专门的网页设计软件，它采用所见即所是一款专门的网页设计软件，它采用所见即

3、所得的编辑方式，利用行为、得的编辑方式，利用行为、CSS、模板等技术对、模板等技术对Web站点、网站点、网页和页和Web应用程序进行设计、编码和开发。无论用户是愿意享应用程序进行设计、编码和开发。无论用户是愿意享受手工编写受手工编写HTML代码时的驾驭感还是偏爱在可视化编辑环境代码时的驾驭感还是偏爱在可视化编辑环境中工作，中工作，Dreamweaver 8都会为用户提供有用的工具，使用都会为用户提供有用的工具，使用户拥有更加完美的户拥有更加完美的Web创作体验。另外除了强大的网页编辑功创作体验。另外除了强大的网页编辑功能外，能外，Dreamweaver 8还提供了完善的站点管理功能。还提供了完

4、善的站点管理功能。n利用利用Dreamweaver 8中的可视化编辑功能，用户可以快速地中的可视化编辑功能，用户可以快速地创建页面而无需编写任何代码。用户可以查看所有站点元素和创建页面而无需编写任何代码。用户可以查看所有站点元素和资源并将它们从面板直接拖到文档中，也可以在资源并将它们从面板直接拖到文档中，也可以在Fireworks或或其他图形应用程序中创建和编辑图像，然后将它们直接导入其他图形应用程序中创建和编辑图像，然后将它们直接导入Dreamweaver 8中，从而优化开发工作流程。中，从而优化开发工作流程。http:/2.2 Dreamweaver 8的新增功能的新增功能nDreamwe

5、aver 8包含了许多新增的功能，包含了许多新增的功能，这些新增功能改善了软件的易用性，无论处这些新增功能改善了软件的易用性，无论处于设计环境还是编码环境都可以方便地制作于设计环境还是编码环境都可以方便地制作页面。页面。1.用户界面的改进用户界面的改进2.多种样式呈现面板多种样式呈现面板3.新的标准新的标准CSS面板面板4.Flash视频视频5.缩放功能缩放功能http:/2.3 Dreamweaver 8的操作界面的操作界面nDreamweaver 8的操作界面是由标题栏、菜单栏、插入栏、的操作界面是由标题栏、菜单栏、插入栏、文档窗口、状态栏、属性面板以及多个浮动面板组成，如图文档窗口、状态

6、栏、属性面板以及多个浮动面板组成，如图2.8所示。所示。n2.3.1 菜单栏菜单栏 n2.3.2 插入栏插入栏n2.3.3 浮动面板浮动面板n2.3.4 【属性】面板【属性】面板n2.3.5 文档窗口文档窗口http:/2.3.1 菜单栏菜单栏n菜单栏中共包含菜单栏中共包含10个菜单项，分别是【文件个菜单项，分别是【文件】、【编辑】、【查看】、【插入】、【修】、【编辑】、【查看】、【插入】、【修改】、【文本】、【命令】、【站点】、【改】、【文本】、【命令】、【站点】、【窗口】和【帮助】，如图窗口】和【帮助】，如图2.9所示，下面逐一所示，下面逐一介绍每个菜单的功能。介绍每个菜单的功能。http

7、:/2.3.2 插入栏插入栏n插入栏包含各种类型的对象，如图像、表格插入栏包含各种类型的对象，如图像、表格和层。每个对象都是一段和层。每个对象都是一段HTML代码，允许代码，允许在插入时设置不同的属性，可以通过单击插在插入时设置不同的属性，可以通过单击插入栏中的按钮插入表格，也可以不使用插入入栏中的按钮插入表格，也可以不使用插入栏而使用插入菜单插入对象。如图栏而使用插入菜单插入对象。如图2.10所示。所示。http:/2.3.3 浮动面板浮动面板nDreamweaver 8中的面板统中的面板统称为浮动面板，这些面板浮动称为浮动面板，这些面板浮动于文档窗口之外，如图于文档窗口之外，如图2.11所

8、示，若要展开一个面板，单所示，若要展开一个面板，单击面板名称左侧的展开箭头。击面板名称左侧的展开箭头。nDreamweaver 8提供了多种提供了多种面板，可以利用【窗口】的子面板，可以利用【窗口】的子菜单命令打开。菜单命令打开。http:/2.3.4 【属性】面板【属性】面板n【属性】面板如图【属性】面板如图2.12所示，用于显示网页中各个元素的相所示，用于显示网页中各个元素的相关属性，用户可以通过设置【属性】面板中的各选项，对网关属性，用户可以通过设置【属性】面板中的各选项，对网页中的各个属性做精确的修改。页中的各个属性做精确的修改。n【属性】面板的内容会随当前所选定元素的不同而发生变化，

9、【属性】面板的内容会随当前所选定元素的不同而发生变化，在以后的章节中将结合具体的实例来讲述具体的设置。对于在以后的章节中将结合具体的实例来讲述具体的设置。对于【属性】面板所做的大多数设置会立刻应用到文档窗口中。【属性】面板所做的大多数设置会立刻应用到文档窗口中。但是对于有些属性，则要在属性编辑文本域外单击并按但是对于有些属性，则要在属性编辑文本域外单击并按Enter键，或者按键，或者按Tab键切换到其他属性才会使更改生效。键切换到其他属性才会使更改生效。http:/2.3.5 文档窗口文档窗口n如图如图2.13所示所示是文档窗口，是文档窗口，文档窗口用于文档窗口用于显示当前创建显示当前创建和编

10、辑的网页和编辑的网页文档。可以在文档。可以在设计视图、代设计视图、代码视图、拆分码视图、拆分视图中查看文视图中查看文档内容。档内容。http:/2.4 文档的基本操作文档的基本操作nDreamweaver 8为网页设计和开发提供了灵活的为网页设计和开发提供了灵活的开发环境，除了开发环境，除了HTML文档以外，还可以创建打开文档以外，还可以创建打开各种基于文本的文档。各种基于文本的文档。n2.4.1 新建网页新建网页n2.4.2 打开网页打开网页n2.4.3 保存网页保存网页n2.4.4 设置页面属性设置页面属性http:/2.4.1 新建网页新建网页(1)启动启动Dreamweaver 8软件

11、。选择【文件】软件。选择【文件】|【新建】【新建】命令，弹出【新建文档】对话框，在对话框中选择【类别命令，弹出【新建文档】对话框，在对话框中选择【类别】列表框的【基本页】选项，在【基本页】列表框中选择】列表框的【基本页】选项，在【基本页】列表框中选择HTML选项。选项。(2)单击【创建】按钮，显示创建的单击【创建】按钮，显示创建的HTML网页编辑窗口。网页编辑窗口。(4)选择【文件】选择【文件】|【保存】命令，弹出【另存为】对话框，【保存】命令，弹出【另存为】对话框，在【保存在】下拉列表框中选择文件保存路径。在【文件在【保存在】下拉列表框中选择文件保存路径。在【文件名】文本框中输入名】文本框中

12、输入index。(5)单击【保存】按钮，返回网页编辑窗口新的空白网页创单击【保存】按钮，返回网页编辑窗口新的空白网页创建完成。建完成。http:/2.4.2 打开网页打开网页n要打开网页，在【文件】面板中展开要打开网页，在【文件】面板中展开Dreamweaver文件夹，然后双击要打开的文件，文件夹，然后双击要打开的文件，该网页将出现在新的文档窗口中；或者在本地电脑该网页将出现在新的文档窗口中；或者在本地电脑上打开网页文档所在的文件，直接双击即可打开网上打开网页文档所在的文件，直接双击即可打开网页文档；或者在要打开的网页上，单击鼠标右键，页文档；或者在要打开的网页上，单击鼠标右键，在弹出的快捷菜

13、单中选择【打开】命令，即可打开在弹出的快捷菜单中选择【打开】命令，即可打开网页文档。网页文档。http:/2.4.3 保存网页保存网页n新建网页后，需要对网页进行保存，在网页制作过新建网页后，需要对网页进行保存，在网页制作过程中需要养成随时保存网页的良好习惯，防止由于程中需要养成随时保存网页的良好习惯，防止由于计算机的故障使制作好的网页丢失，造成不必要的计算机的故障使制作好的网页丢失，造成不必要的损失。损失。n(1)在在Dreamweaver编辑窗口中，选择【文件】编辑窗口中，选择【文件】|【保存】命令，弹出【另存为】对话框，在对话框【保存】命令，弹出【另存为】对话框，在对话框中选择保存网页的

14、位置，在【文件名】文本框中输中选择保存网页的位置，在【文件名】文本框中输入要保存文档的名称入要保存文档的名称index，【保存类型】设置为，【保存类型】设置为【*所有文档所有文档(*.htm；)】。】。n(2)单击【保存】按钮，完成网页的保存。单击【保存】按钮，完成网页的保存。http:/2.4.4 设置页面属性设置页面属性(1)选择【修改】选择【修改】|【页面属性】命令，弹出【页面属性】对话框，【页面属性】命令，弹出【页面属性】对话框，在对话框可以设置关于整个文档的一些信息，在【外观】选项中可在对话框可以设置关于整个文档的一些信息，在【外观】选项中可以设置页面的一些基本属性。在【外观】选项中

15、可以进行如下设置。以设置页面的一些基本属性。在【外观】选项中可以进行如下设置。(2)在【链接】选项中可以设置与页面链接有关的属性。在【链接】在【链接】选项中可以设置与页面链接有关的属性。在【链接】选项中可以进行如下设置。选项中可以进行如下设置。(3)在【标题】选项页中可以设置标题字体和颜色的一些属性。在【在【标题】选项页中可以设置标题字体和颜色的一些属性。在【标题】选项中可以进行如下设置。标题】选项中可以进行如下设置。(4)在【标题在【标题/编码】选项页中可以设置网页标题和文字编码。在【编码】选项页中可以设置网页标题和文字编码。在【标题标题/编码】选项页中可以进行如下设置。编码】选项页中可以进

16、行如下设置。(5)在【跟踪图像】选项页中可以设置跟踪图像的属性。跟踪图像一在【跟踪图像】选项页中可以设置跟踪图像的属性。跟踪图像一般在设计网页时作为网页背景，用于引导网页的设计。单击文本框般在设计网页时作为网页背景，用于引导网页的设计。单击文本框右边的【浏览】按钮，弹出【选择图像源文件】对话框，选择一个右边的【浏览】按钮，弹出【选择图像源文件】对话框，选择一个图像作为跟踪图像。拖动【透明度】滑块可以指定图像的透明度，图像作为跟踪图像。拖动【透明度】滑块可以指定图像的透明度，透明度越高图像显示得越清晰。透明度越高图像显示得越清晰。(6)设置完成后，单击【确定】按钮。至此，页面属性设置完毕。设置完成后，单击【确定】按钮。至此，页面属性设置完毕。