1 / 49

第三章 Dreamweaver cs3 操作基础

第三章 Dreamweaver cs3 操作基础. 3.1 Dreamweaver cs3 概述 3.2 介绍 Dreamweaver cs3 工作环境 3.3 建立和管理站点 3.4 文档的基本操作 3.5 网页中插入文本 3.6 插入图像 3.7 网页中使用超级链接 3.8 网页中插入多媒体 3.9 网页中插入其它元素 3.9 本章小结. 3.1 Dreamweaver cs3 概述.

ilandere-wauters
Download Presentation

第三章 Dreamweaver cs3 操作基础

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第三章 Dreamweaver cs3操作基础

  2. 3.1 Dreamweaver cs3概述 • 3.2介绍Dreamweaver cs3工作环境 • 3.3建立和管理站点 • 3.4文档的基本操作 • 3.5网页中插入文本 • 3.6插入图像 • 3.7网页中使用超级链接 • 3.8网页中插入多媒体 • 3.9网页中插入其它元素 • 3.9本章小结

  3. 3.1 Dreamweaver cs3概述 • Dreamweaver CS3是由Adobe公司开发的一款专业的Web站点开发软件，可用于Web站点、Web页和Web应用程序的设计、编码和开发工作。在业界通常将Dreamweaver、Flash、Fireworks称为网页三剑客。

  4. 3.2介绍Dreamweaver cs3工作环境 • 打开一个文档后的界面效果如图3-2所示。 • “插入”栏 • 文档工具栏 • “文档”窗口 • 面板组 • 标签选择器 • “属性”检查器 • “文件”面板

  5. 3.2.1 Dreamweaver cs3插入栏 • 插入栏用来插入各种常用和布局对象。根据选择的选项不同，在插入菜单中显示的内容也有所区别。选择“常用”和“布局”选项时，插入栏的显示效果如下。

  6. 3.2.2 Dreamweaver cs3文档工具栏和文档窗口 • 文档工具栏是提供各种文档窗口视图、各种查看选项和一些普通操作，如图3-4所示。 A. 显示代码视图　 B. 显示代码视图和设计视图　 C. 显示设计视图　D. 文档标题E. 文件管理　 F. 在浏览器中预览/调试 　G. 刷新设计视图　 H. 视图选项　I. 可视化助理 　J. 验证标记　 K. 检查浏览器兼容性。

  7. 3.2.3 Dreamweaver cs3面板组　 • 在Dreamweaver CS3中，面板都整合到面板组中，面板和面板组处于Dreamweaver CS3工作界面的右侧。 • 1.打开面板 单击【窗口】｜【×××】菜单命令，即可打开指定的面板。 • 2.关闭面板 在面板标题栏单击鼠标右键，弹出其快捷菜单，再单击该快捷菜单中的“关闭”菜单命令，也可以关闭该面板。 • 3.隐藏所有面板 单击【查看】｜【隐藏面板】菜单命令或按F4键，即可隐藏所有打开的面板。 • 4.调整面板大小

  8. 将鼠标指针移到面板的边缘，当鼠标指针变成双向箭头时，单击并拖曳面板的边框，达到所需的大小后松开鼠标左键即可。将鼠标指针移到面板的边缘，当鼠标指针变成双向箭头时，单击并拖曳面板的边框，达到所需的大小后松开鼠标左键即可。 • 5.“文件”面板 使用“文件”面板可查看和管理 Dreamweaver 站点中的文件。 打开“文件”面板效果如图3-5所示。

  9. 图 3-5

  10. 6. “CSS 样式”面板 • 打开“CSS 样式”面板效果如图3-6所示。 图 3-6

  11. 3.2.4 Dreamweaver cs3属性检查器 • “属性”检查器使您可以检查和编辑当前选定页面元素（如文本和插入的对象）的最常用属性。“属性”检查器中的内容根据选定的元素会有所不同。展开“属性”检查器的效果如图3-7所示。 图3-7

  12. 3.3建立和管理站点 • 3.3.1规划站点结构 • 3.3.２创建站点 • 3.3.３搭建站点结构 • 3.3.4文件与文件夹的管理

  13. 3.3.1规划站点结构 • 网站是多个网页的集合，其中包括一个首页和若干个分页，这种集合不是简单的集合。为了达到最佳效果，在创建任何 Web 站点页面之前，要对站点的结构进行设计和规划。

  14. 3.3.２创建站点 • 在Dreamweave CS3中可以有效的建立并管理多个站点。搭建站点可以有两种方法，一是利用向导完成，二是利用高级设定来完成。 • 在搭建站点前，我们先在自己的电脑硬盘上建一个以英文或数字命名的空文件夹 。 • （1）选择菜单栏【站点】|【管理站点】，出现【管理站点】对话框。点击“新建”按钮，选择弹出菜单中的“站点”项,如图3-8所示。 图3-8

  15. （2）在打开的窗口上方有“基本”和“高级”两个标签，可以在站点向导和高级设置之间切换。下面选择“基本”标签， 如图3-9所示。根据向导完成站点的创建。 图3-9

  16. 3.3.３搭建站点结构 • 利用Dreamweaver CS3，可以在本地计算机上构建出整个站点的框架，并在各个文件夹中合理地安置文档。Dreamweaver CS3可以在站点窗口中以两种方式显示站点结构，一种是目录结构，另一种是站点地图。可以使用站点地图方式快速构建和查看站点原型。

  17. 3.3.4文件与文件夹的管理 • 对建立的文件和文件夹，可以进行移动、复制、重命名和删除等基本的管理操作。单击鼠标左键选中需要管理的文件或文件夹，然后单击鼠标右键，再弹出菜单中选“编辑”项，即可进行相关操作。

  18. 3．4文档的基本操作 • 3.4.1创建文档 • 3.4.2 保存文档和打开现有文档 • 3.4.3定义页面属性 • 3.4.4定义首选参数

  19. 3.4.2 保存文档和打开现有文档 • 1. 保存文档 • （1）保存新文档 • （2）保存原文档 • （3）保存所有打开的文档 • (4）恢复到文档上次保存的版本 • 2. 打开现有文档

  20. 3.4.3定义页面属性 • 执行【修改】|【页面属性】命令，可以打开“页面属性”对话框。在“页面属性”对话框中，可以定义页面的外观、链接、标题、标题/编码、跟踪图像等。 • 1．外观属性 在“外观”一类中，可以设置当前页面的默认字体属性、背景和页边距等。 • 2．链接属性 单击“链接”一项打开链接类属性， • 3．标题属性 在“标题”中设置页面各个标题的样式。文档内容的标题有六级，“标题1”最大，“标题6”最小。 4. 标题/编码属性在“标题/编码”设置整个页面的标题，该标题显示在浏览器的标题栏中。

  21. 3.4.4定义首选参数 • 在Dreamweaver CS3中可以定义新建文档和显示文档的首选参数。执行【编辑】|【首选参数】，打开“首选参数”对话框 。 • 设置首选参数主要有以下选项：常规 、代码颜色、代码格式 、代码提示、代码改写、CSS 样式、文件类型/编辑器、字体、标记色彩、不可见元素 、布局模式等。

  22. 3．5网页中插入文本 • 3.5.1输入或复制/粘贴文本 • 3.5.2导入Word或者Excel文本 • 3.5.3设置文本格式 • 3.5.4设置文本属性

  23. 3.5.1输入或复制/粘贴文本 • 1. 输入文本 • 输入文本，就像在其它文本编辑器中一样直接输入。 • 2.复制/粘贴文本 • 在Dreamweaver CS3中，可以通过定义首选参数的方法，定义复制/粘贴文本效果。

  24. 3.5.2导入Word或者Excel文本 3.5.3设置文本格式 • 1.设置段落格式 • 2.对齐和缩进文本 • 3.定义列表

  25. 3.5.4设置文本属性 • 可通过“属性”面板来定义文本格式，选择菜单【窗口】|【属性】打开“属性”面板。 • 1.设置字体 • 2.编辑字体 • 3.设置字号　 • 4.设置颜色　 • 5.设置风格

  26. 3.6插入图像 • 3.6.1插入图片 • 3.6.2设置图像属性 • 3.6.3插入图像占位符和鼠标经过图像

  27. 3.6.1插入图片 • 目前互联网上支持的图像格式主要有GIF、JPEG和PNG。其中使用最为广泛的是GIF和JPEG。 • 插图图像时，将光标放置在文档窗口需要插入图像的位置，然后鼠标单击常用插入栏的“图像”按钮。弹出的“选择图像源文件”对话框，选择图像文件，单击“确定”按钮就把图像网页中。 • 【替换文本】：为图像输入一个名称或一段简短描述。 • 【详细说明】：输入当用户单击图像时所显示的文件的位置，或者单击文件夹图标以浏览到该文件。

  28. 3.6.2设置图像属性 • 1.选择【窗口】｜【属性】以查看所选图像的属性检查器，在属性面板中显示出了图像的属性，如图3-31所示。 图3-31 • 2.在缩略图下面的文本框中，输入名称。 • 3.设置图像的其它选项。

  29. 3.6.3插入图像占位符和鼠标经过图像 • 1.图像占位符：单击下拉列表中的“图像占位符”，打开“图像占位符”对话框。按设计需要设置图片的宽度和高度，输入插入图像的名称即可。 • 2.鼠标经过图像 • 光标移动到欲插入图像的位置，点击菜单栏【插入】｜【图像对象】｜【鼠标经过图像】打开对话框 。

  30. 3.7网页中使用超级链接 • 3.7.1关于链接路径 • 3.7.2页面之间的超级连接 • 3.7.3邮件地址的超级连接 • 3.7.5下载链接 • 3.7.6创建图像热点链接 • 3.7.7创建锚点链接 • 3.7.8创建导航条

  31. 3.7.1关于链接路径 • 绝对路径，为文件提供完全的路径，包括适用的协议，例如http、ftp等。 • 相对路径，相对路径最适合网站的内部链接。如果链接到同一目录下，则只需要输入要链接文件的名称。要链接到下一级目录中的文件，只需要输入目录名，然后输入“/“，再输入文件名。如链接到上一级目录中的文件，则先输入“../”，再输入目录名，文件名。 • 根路径：是指从站点根文件夹到被链接文档经由的路径，以前斜杠开头。

  32. 3.7.2页面之间的超级连接 • 1、在网页中选中要做超级链接的文字或者图片。 • 2、在属性面板中单击黄色文件夹图标，在弹出的对话框里选中相应的网页文件就完成了。 • 超级链接也可以手工在链接输入框中输入文件地址，也可以直接指向网址而不是一个文件。

  33. 3.7.3邮件地址的超级连接 • 制作方法是：在编辑状态下，先选定要链接的图片或文字（比如：欢迎您来信赐教！），在【插入】栏点“电子邮件链接”，或选择菜单【插入记录】｜【电子邮件链接】弹出如下对话框，填入E-Mail地址即可，如图3-35所示。

  34. 输入电子邮件地址有以下几种形式： • 1.普通邮箱：mailto:xfpep@163.com。 • 2.加上主题：mailto:xfpep@163.com?subject=请同学们常系。 • 3.抄送：mailto:xfpep@163.com?subject=请同学们常系&cc=applehyc@126.com。 • 4.密件抄送：mailto:xfpep@163.com?subject=请同学们常联系&cc=applehyc@126.com&bcc=bukengnikengshui@163.com。

  35. 3.7.5下载链接 • 我们经常从网上下载一些软件和其它文件，那么是如何制作的呢？“下载链接”是可帮我们实现这一功能，其实方法很简单，准备可下载的文件，直接链接即可。

  36. 3.7.6创建图像热点链接 • 我们这里所说的图片上的超级链接是指在一张图片上实现多个局部区域指向不同的网页链接。制作方法如下： • 1. 首先插入图片。单击图片，用展开的属性面板上的绘图工具在画面上绘制热区。 • 2、属性面板改换为热点面板 。 • 3、保存页面， 按F12预览，用鼠标在设置的热区检验效果。

  37. 3.7.7创建锚点链接 • 将光标定位在文档定义锚点的位置，然后单击“插入栏”上的“常用”面板上“命名锚记”图标，弹出插入锚点对话框，输入锚点的名字，可以是数字或英文，我们输入“this01”，点“OK”按钮。 在本页选中要链接到此锚点的文字，在属性面板中Link框中输入#this01，链接就完成了。

  38. 3.7.8创建导航条 • 网页上的导航条由一组按钮或者图像组成，由它们链接到各个分支页面，起到导航作用，可以链接到不同的网页页面。一个页面只能有一个导航条。 • 在菜单栏选择【插入】｜【图像对象】｜【导航条】打开对话框 。

  39. 3.8网页中插入多媒体 • 3.8.1在网页中插入Flash电影 • 3.8.２ 在网页中插入Flash 按钮 • 3.8.３ 在网页中插入Flash 文本 • 3.8.4在网页中插入FlashPaper • 3.8.5在网页中插入flash视频

  40. 3.8.1在网页中插入Flash电影 • 通过选择菜单【插入】｜【媒体】｜【Flash】，或通过单击“插入工具栏”中“常用”类别的“Flash”选项，在显示的对话框中，选择一个Flash文件（.swf)，Flash占位符随即出现在文档编辑区域中。

  41. 3.8.２ 在网页中插入Flash 按钮 • 选择菜单【插入】｜【媒体】｜【Flash按钮】，或通过单击“插入工具栏”中“常用”类别“Flash按钮”选项。插入 Flash 按钮并设置参数 .

  42. 3.8.３ 在网页中插入Flash 文本 • 通过菜单【插入】｜【媒体】｜【Flash文本】，或通过单击“插入工具栏”中“常用”类别“Flash文本”选项。插入 Flash 文本并设置参数 .

  43. 3.8.4在网页中插入FlashPaper • FlashPaper允许我们将任何类型的可打印文档转换为SWF或PDF文档。 • 在"文档"窗口中，将插入点放在页面上想要显示 FlashPaper 文档的位置，然后选择【插入】｜【媒体】｜【FlashPaper】。

  44. 3.8.5在网页中插入flash视频 • 1.选择【插入】｜【媒体】｜【Flash 视频】。 • 2.视频类型有累进式下载视频和流视频两种。 • 3.在 URL 文本框中，指定 “*.flv ”文件的相对路径。

  45. 3．9网页中插入其它元素 • 3.9.1网页中插入日期 • 3.9.2.插入插件 • 3.9.3插入标签

  46. 3.9.1网页中插入日期 • 通过菜单点击菜单【插入】｜【日期】，出现对话框 . 可以在对话框中选择星期格式、日期格式和时间格式，如将“存储时自动更新”前的复选框选中，则在每次保存时，会将时间刷新成当前系统时间。

  47. 3.9.2.插入插件 • 1.系统已安装插件 插入方法：通过菜单【插入】｜【媒体】｜【插件】,在对话框中选择音频文件，点击“确定”即可 . • 2.扩展插件

  48. 3.9.3插入标签 • 点击菜单【插入】｜【标签】，进入“标签选择器”。鼠标在左侧标签分类列表中依次选择【标记语言标签】｜【HTML标签】｜【页元素】，在右侧标签列表中选择“bgsound”，点击“插入”按钮完成，出现”bgsound”标签编辑器对话框.

  49. 3.9本章小结 • 本章介绍了Dreamweaver CS3的基础知识，包括开发环境、建立和管理站点、文档的基本操作，以及在页面中插入一些如页面中插入文本、图片、多媒体、超链接等基本元素。最后通过一个站点主页综合实例详细讲解了本章重点知识在制作网页中的应用 .

More Related