第3章 Dreamweaver网页设计基础.ppt

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

1、第第3章章 Dreamweaver网页设计基础网页设计基础主要内容主要内容l Dreamweaver 8.0的功能特点及工作界面l 定义和管理本地站点l 创建和管理HTML文档的基本方法l 插入和编辑文本、图像、媒体等页面元素l 页面属性设置l 页面中常用的超级链接3.1 Dreamweaver 8.0简介简介功能概述功能概述 Macromedia Dreamweaver 8.0 是构建网站和应用程序的专业化产品。它提供可视布局工具、应用程序开发功能、代码编辑支持的强大组合，使各个技术级别的开发者和设计者都能够快速创建可视化、吸引人的基于标准的站点和应用程序。从基于 CSS 设计的领先支持到手

2、工编写的代码功能，Dreamweaver 提供在集成的、无缝的环境中所需的专业工具。Dreamweaver 支持所有主要服务器技术，如ColdFusion、PHP、ASP、ASP.NET以及JSP等，开发者可以选择将 Dreamweaver 与服务器技术结合使用，构建强大的 Internet 应用程序，该应用程序将用户连接到数据库、实时数据服务和原有系统。3.1 Dreamweaver 8.0简介简介工作界面工作界面 1启动界面2工作区 文档窗口 状态栏 插入栏 属性检查器 面板组3首选参数的设置3.2 站点管理站点管理 Dreamweaver站点概述站点概述 Web 站点是一组具有共享属性（

3、如相关主题、类似 的 设 计 或 共 同 目 的）的 链 接 文 档。在 Dreamweaver 中，“站点”一词既表示Web站点，又表示属于Web 站点的文档的本地存储位置。在开始构建 Web 站点之前，必须要建立站点文档的本地存储位置。Dreamweaver 站点最多由三部分组成，即本地文件夹、远程文件夹和动态页文件夹，具体取决于所用的计算机环境和所开发的 Web 站点的类型。3.2 站点管理站点管理 定义和管理本地站点定义和管理本地站点 n定义本地站点的一般步骤 为要定义的本地站点指定一个站点名，该站点名允许使用中文名称。在本地磁盘建立存储站点文件的根文件夹，并在该文件夹中建立子文件夹，

4、用于存放各类不同的文件。子文件夹的个数没有限制，但必须指定一个专门用于存储图像文件的文件夹。在命名文件夹时，不能使用中文名称。使用Dreamweaver的站点管理功能定义站点。Dreamweaver 8.0菜单栏的“站点”命令和文件面板的“站点”命令都可以定义本地站点。3.2 站点管理站点管理 定义和管理本地站点定义和管理本地站点u管理本地站点使用“站点/管理站点”功能，将实现本地站点的管理。新建站点编辑站点复制站点删除站点导入和导出站点 3.3创建和管理文档创建和管理文档 创建创建HTML文档文档1利用菜单栏的“文件/新建”命令创建文档步骤：打开“新建文档”窗口打开“文档编辑”窗口编辑文档指

5、定站点和文件名保存文档。2利用文件面板创建文档步骤：打开文件面板选定站点命名文件编辑文档保存文档 3.3创建和管理文档创建和管理文档 创建创建HTML文档文档关于文档保存的说明 文档的保存文件名在“文件名”对话框中指定，文档的默认文件名为Untitled-x.html，其中“x”是一个整数值，如1、2、3等。HTML文档的默认扩展名，通常为“html”或“htm”，也可以使其他形式的扩展名，具体由Dreamweave的首选参数的设定值确定。不要在文件名和文件夹名中使用空格和特殊字符，文件名也不要以数字开头。3.3创建和管理文档创建和管理文档 创建创建HTML文档文档关于文档默认扩展名的说明Dr

6、eamweaver允许定义创建的HTML文档的默认文件扩展名。步骤如下：选择“编辑/首选参数”，打开“首选参数”对话框。在左侧的类别列表中单击“新建文档”，打开新建文档对话框。在“默认文档类型”中选择“HTML”。在“默认扩展名”文本框中，指定Dreamweaver中新建HTML档的扩展名。在重新设置以前，该扩展名即为Dreamweaver默认的HTML档的扩展名。3.3创建和管理文档创建和管理文档 文档的打开和预览文档的打开和预览 利用“文件”菜单打开文档 选择“文件/打开”菜单，打开“打开”对话框。设定要打开的文件类型，浏览并选择要打开的文件，然后用鼠标左键双击该文件，或选中文件后点击“打

7、开”按钮，所选文档将在文档编辑窗口中打开。利用文件面板打开文档 打开文件面板。在文件面板中浏览选定文件，用鼠标左键双击选中的文件，即在文档编辑窗口中将选中的文档打开。3.3创建和管理文档创建和管理文档 文档的打开和预览文档的打开和预览 Dreamweaver预览文档的常用方法 文档在打开状态下，按F12功能键或使用文档工具中的预览按钮预览网页。在文件面板中直接预览文档。过程：在文件面板中选中文档，用鼠标右键单击弹出快捷菜单，选用“在浏览器中预览”项，再确定使用的浏览器，即预览网页。或：在文件面板中选定文件后即按F12功能键。3.3创建和管理文档创建和管理文档 文件面板的编辑功能文件面板的编辑功

8、能 在文件面板中选中文件（或文件夹），然后单击鼠标右键，在弹出的快捷菜单中选择“编辑”功能。在“编辑”命令中，选择相应的文件操作功能，实现指定的文件操作。说明：n“编辑”命令对站点根文件夹和逻辑磁盘无效。n 包含链接的文件在站点内移动或删除时，文件面板将进行链接跟踪，并对文件中的链接进行更新。3.4插入和编辑网页元素插入和编辑网页元素 插入和编辑文本插入和编辑文本 1插入文本常用的两种方法：直接在“文档”窗口中键入文本。从其他应用程序中拷贝文本。2插入空格和段落 插入空格HTML只允许字符之间包含一个空格，若要在文档中插入连续多个空格，需要按如下方法操作：在全角输入法状态下直接利用空格键输入空

9、格。选择“编辑/首选参数”菜单，在“常规”类别中选中“允许多个连续的空格”。插入段落直接用回车 键添加一个新的段落。3.4插入和编辑网页元素插入和编辑网页元素 插入和编辑文本插入和编辑文本3文本格式的编辑文本的格式包括段落格式、字体、字号、格式（如粗体、斜体、代码、下划线）、颜色、对齐方式、缩进等。文本格式的编辑方法：n使用文本属性检查器n使用“文本”菜单3.3创建和管理文档创建和管理文档 插入和编辑文本插入和编辑文本4编辑字体列表使用“编辑字体列表”命令可以设置出现在属性检查器和“文本/字体”子菜单中的字体组合。向“字体列表”添加字体 选择“文本/字体/编辑字体列表”菜单，弹出“编辑字体列表

10、”对话框。在“可用字体”列表中选中要添加到“字体列表”中的字体。按箭头按钮“”，将选中字体置于“选择的字体”框中。按窗口左上方的“+”按钮，所选字体即进入“字体列表”中。3.3创建和管理文档创建和管理文档 插入和编辑文本插入和编辑文本4编辑字体列表 从“字体列表”中移除字体在“字体列表”中选中要移除的字体（或组合），按“-”按钮，所选字体即从“字体列表”中移除。说明：添加或移除操作完成后，只有按下“确定”按钮，对字体列表所作的编辑才会生效。在文本属性检查器中，通过“字体”列表窗口，也可以启动“编辑字体列表”对话框。3.3创建和管理文档创建和管理文档 插入和编辑水平线插入和编辑水平线 1插入水平

11、线 在“文档”窗口中，将插入点放在要插入水平线的位置。执行下列操作之一：n选择“插入/HTML/水平线”。n在“插入”栏的“HTML”类别中，单击“水平线”按钮。2修改水平线 在文档窗口中，选择水平线。选择“窗口/属性”打开属性检查器。在属性检查器中根据需要对属性进行修改。3.3创建和管理文档创建和管理文档 插入和编辑图像插入和编辑图像 1插入图像 将插入点放置在要显示图像的位置，然后执行以下操作之一：n在“插入栏”的“常用”类别中，单击“图像”图标n选择“插入/图像”菜单 在“选择图像源文件”对话框中执行下列操作之一：n选择“文件系统”以选择一个图形文件。n选择“数据源”以选择一个动态图像源

12、文件。浏览并选择要插入的图像源文件。使用属性检查器中，设置所插入图像的属性。注意：注意：注意：注意：在将图像插入文档时，Dreamweaver自动在HTML源代码中生成对该图像文件的引用。为了确保此引用的正确性，该图像文件必须位于当前站点中。3.3创建和管理文档创建和管理文档 插入和编辑图像插入和编辑图像 图像的属性：宽和高：以像素为单位指定图像的宽度和高度。源文件：指定图像的源文件。链接：指定图像的超级链接。对齐：对齐同一行上的图像和文本。替代：指定只代替图像显示的替代文本。垂直边距和水平边距：沿图像的边缘添加边距（像素）。低解析度源:指定在载入主图像之前应该载入的图像。边框：以像素为单位的

13、图像边框的宽度，默认为无边框。编辑：包括图像处理优化、裁剪、亮度和对比度、锐化等操作。缩略图下面的文本框：使用缩略图下面的文本框设置名称，以便在使用 Dreamweaver 行为或脚本撰写语言时可以引用该图像。3.3创建和管理文档创建和管理文档 插入和编辑图像插入和编辑图像 2编辑图像 调整图像大小Dreamweaver对图像大小的直接调整有两种方式：在文档窗口中以可视化的形式调整和使用属性检查器是指图像尺寸。裁剪图像 打开包含要裁剪的图像的页面，选择图像，并执行下列操作之一：n单击图像属性检查器中的“裁剪工具”图标。n选择“修改/图像/裁剪”。调整裁剪控制点直到边界框包含的图像区域符合所需大

14、小。在边界框内部双击或按 Enter 键完成裁剪操作。3.3创建和管理文档创建和管理文档 插入和编辑图像插入和编辑图像 对齐图像对齐图像是指设置图像相对于同一段落或行中其他元素的对齐方式。可以将图像与同一行中的文本、另一个图像、插件或其他元素对齐；还可以使用对齐按钮（左对齐、右对齐、居中对齐）设置图像的水平对齐方式。对齐图像使用图像属性检查器实现，过程：在“设计”视图中选择图像。在属性检查器中设置该图像的对齐属性。3.3创建和管理文档创建和管理文档 插入和编辑图像插入和编辑图像 3创建鼠标经过图像 鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。创建鼠标经过图像操作步骤：

15、在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置。使用以下任何一种方法操作后，打开“插入鼠标经过图像”对话框，在对话框中设置相关参数后“确定”即可。n在“插入”栏中，选择“常用”标签，然后单击“鼠标经过图像”图标n选择“插入/交互式图像/鼠标经过图像”菜单 3.3创建和管理文档创建和管理文档 插入和编辑插入和编辑flash对象对象 1插入flash动画 在文档窗口的“设计”视图中，将插入点放置在要插入内容的位置，然后执行以下操作之一：n在插入栏的“常用”类别中，选择“媒体”工具，然后单击“Flas”按钮。.n选择“插入/媒体/Flash”。在显示的对话框中，浏览选择一个flash文件（

16、扩展名为.swf），插入成功后，在插入点位置显示flash 占位符。预览flash动画。n在文档窗口中预览 单击flash 占位符选择要预览的flash内容。在属性检查器中，单击“播放”按钮。n按F12键在浏览器中预览flash动画。3.3创建和管理文档创建和管理文档 插入和编辑插入和编辑flash对象对象2插入flash按钮 在文档窗口中，将插入点放置在要插入flash按钮的位置。执行以下任何一种操作：n在插入栏的“常用”类别中，选择“媒体”工具，然后单击“Flash按钮”。n选择“插入/媒体/Flash按钮”。在“插入Flash对象”对话框对话框中，通过“样式”和“范例”选择按钮的形状，通

17、过“按钮文本”输入按钮上的文字，也可以为按钮设置链接。编辑flash按钮。3.3创建和管理文档创建和管理文档 插入和编辑声音插入和编辑声音 1链接到音频文件 选择要用作指向音频文件的链接的文本或图像。在属性检查器中，单击文件夹图标以浏览音频文件，或者在“链接”文本框中键入文件的路径和名称。2嵌入声音文件 设置插入点，然后执行以下任何一种操作：n在插入栏的“常用”类别中，单击“媒体”按钮，然后选择“插件”图标 n选择“插入/媒体/插件 在属性检查器中，单击文件夹图标以浏览音频文件，或者在“链接”文本框中键入文件的路径和名称。调整插件占位符的大小，设置音频控件在浏览器中的显示尺寸。3.3创建和管理

18、文档创建和管理文档 页面属性页面属性 Dreamweaver 8.0的页面属性有五种：n页面的外观n页面链接n页面标题n页面标题/编码n页面跟踪图像在文档编辑状态下，通过属性检查器的“页面属性”按钮对页面属性进行设置。3.5 超级链接超级链接创建到其他文档或文件的链接创建到其他文档或文件的链接 建立链接：方法一：“文档”窗口中，选择热点文本或页面元素，然后使用“修改/建立链接”菜单，选择要链接到的文件。方法二：选择文档中的热点文本或页面元素，然后使用属性检查器文件夹图标，或者使用“点到文件”图标，来选择要链接到的文件，或者键入该文件的路径。链接到的文件可以是多种类型，如页面文档、图形文件、影片

19、文件、声音文、PDF文件等。3.5 超级链接超级链接创建锚记链接创建锚记链接 1创建命名锚记 在“文档”窗口的“设计”视图中，将插入点放在需要命名锚记的位置。按以下任何一种方法进行操作：n选择“插入/命名锚记”n在“插入”栏的“常用”类别中，单击“命名锚记”按钮。显示“命名锚记”对话框，在“锚记名称”文本框中，键入锚记的名称，并单击“确定”。3.5 超级链接超级链接创建锚记链接创建锚记链接2建立到锚记的链接方法一：使用指向锚记的方法建立锚记链接。在文档窗口的设计视图中，选择要从其创建链接的文本或图像。在属性检查器的“链接”文本框中键入一个包含字符“#”和锚记名称的字符串：要链接到的锚记在当前文

20、档中时，字符串形式为：#锚记名称。要链接到的锚记在另外的文档中，字符串形式为：文件标识符#锚记名称。3.5 超级链接超级链接创建锚记链接创建锚记链接2建立到锚记的链接方法二：使用指向文件方法建立锚记链接。打开含有所需命名锚记的文档。在“文档”窗口的“设计”视图中，选择要从其创建链接的文本或图像。如果该文档是其他打开文档，则必须切换到该文档。执行下列操作之一：操作一：单击属性检查器中“链接”文本框右侧的“指向文件”图标，然后将其拖到要链接到的锚记上。操作二：在“文档”窗口中，按住 Shift 键进行拖动，从所选文本或图像拖动到要链接到的锚记。3.5 超级链接超级链接创建电子邮件链接创建电子邮件链

21、接 在文档窗口的“设计”视图中，设置插入点，或者选择要作为电子邮件链接出现的文本或图像。执行以下任何一种操作：n选择“插入/电子邮件链接”n在插入栏的“常用”类别中，单击“插入电子邮件链接”按钮 在“电子邮件链接”对话框的“文本”框中输入表示链接的文本信息，在“E-Mail”框中输入链接到的E_mail地址，单击“确定”按钮后完成链接设置。3.5 超级链接超级链接图像地图及其链接图像地图及其链接 图像地图是指已被分为多个区域并在区域设置了热点的图像，在图像地图中，当用户单击某个热点时，会发生某种操作。1创建热点地图 在文档窗口中，选择图像。在“地图”文本框中为该图像地图输入名称。选择图形工具定

22、义图像地图。设置“热点”属性检查器。2编辑图像地图移动热点、调整热点大小以及热点的复制3.5 超级链接超级链接创建空链接和脚本链接创建空链接和脚本链接 1空链接空链接是未指派的链接。空链接用于向页面上的对象或文本附加行为。创建空链接后，可向空链接附加行为，以便当鼠标指针滑过该链接时，交换图像或显示层。创建空链接操作步骤：在文档窗口的“设计”视图中选择热点对象。在属性检查器中，将“javascript:;”或“#”键入“链接”文本框。3.5 超级链接超级链接创建空链接和脚本链接创建空链接和脚本链接 2脚本链接脚本链接执行JavaScript代码或调用JavaScript函数。它能够在不离开当前网

23、页的情况下，为访问者提供有关某项的附加信息。脚本链接还可用于在访问者单击特定项时，执行计算、表单验证和其他处理任务。创建脚本链接操作步骤：在文档窗口的“设计”视图中选择文本、图像或对象。在属性检查器的“链接”文本框中，键入“javascript:”，然后紧跟一些 JavaScript代码或函数调用。3.6“五岳览胜五岳览胜”网页设计示例网页设计示例n示例网页说明在本地站点mountain中创建网页：网页文档名为index.html，网页标题为“一个简单的网页”；index.html网页中的图片文件存储在mountain站点的images文件夹下，文件名为taishan.jpg，浏览网页时该图片

24、的显示文本为“泰山”。index.html网页左下角有一个flash按钮，右下角是一个实时日期；在index.html网页中有三个链接：“泰山”链接到网页文件tainshan.html,该文件在mountain站点中，在网页中使用该链接时，在当前窗口打开网页文件tainshan.html。“泰山新视野”按钮也是到tainshan.html文档的链接，点击该按钮后，将在一个新窗口中打开tainshan.html网页。“泰山云雾”是链接到网页文件tainshan.html内的一个锚记链接，浏览网页时，该链接将使“泰山云雾”图片出现在浏览器窗口中。n示例网页设计 第第3章章 Dreamweaver网

25、页设计基础网页设计基础小结小结1Web 站点是一组具有共享属性的链接文档。Dreamweaver 站点最多由三部分组成，即本地文件夹、远程文件夹和和动态页文件夹，具体取决于所用的计算机环境和所开发的 Web 站点的类型。进行网页设计首先要规划和定义本地站点。2插入和编辑网页元素是HTML文档中的最基本操作，本章介绍了插入和编辑文本元素、水平线、图像、flash元素、声音、链接等页面元素的方法。属性检查器是页面元素属性设置的重要面板。3Dreamweaver 8.0处于文档编辑状态时，能够通过属性检查器对页面属性进行设置。Dreamweaver的页面属性包括外观、链接、标题、标题/编码以及跟踪图像等五个方面的内容。4Dreamweaver页面文档中的超级链接有多种类型，包括链接到其他文档或文件的链接、锚记链接、电子邮件链接、空链接和脚本链接等。链接一般由链接热点、链接目标和链接指示标志三部分构成。链接热点既可以是文本，也可以是图像或对象。