第3章 Dreamweaver网页设计基础

第3章Dreamweaver网页 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 基础主要内容Dreamweaver8.0的功能特点及工作界面定义和管理本地站点创建和管理HTML文档的基本方法插入和编辑文本、图像、媒体等页面元素页面属性设置页面中常用的超级链接3.1Dreamweaver8.0简介—功能概述MacromediaDreamweaver8.0是构建网站和应用程序的专业化产品。它提供可视布局工具、应用程序开发功能、代码编辑支持的强大组合，使各个技术级别的开发者和设计者都能够快速创建可视化、吸引人的基于 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 的站点和应用程序。从基于CSS设计的领先支持到手工编写的代码功能，Dreamweaver提供在集成的、无缝的环境中所需的专业工具。Dreamweaver支持所有主要服务器技术，如ColdFusion、PHP、ASP、ASP.NET以及JSP等，开发者可以选择将Dreamweaver与服务器技术结合使用，构建强大的Internet应用程序，该应用程序将用户连接到数据库、实时数据服务和原有系统。3.1Dreamweaver8.0简介—工作界面1．启动界面2．工作区文档窗口状态栏插入栏属性检查器面板组3．首选参数的设置3.2站点管理—Dreamweaver站点概述Web站点是一组具有共享属性（如相关主 题 快递公司问题件快递公司问题件货款处理关于圆的周长面积重点题型关于解方程组的题及答案关于南海问题 、类似的设计或共同目的）的链接文档。在Dreamweaver中，“站点”一词既表示Web站点，又表示属于Web站点的文档的本地存储位置。在开始构建Web站点之前，必须要建立站点文档的本地存储位置。Dreamweaver站点最多由三部分组成，即本地文件夹、远程文件夹和动态页文件夹，具体取决于所用的计算机环境和所开发的Web站点的类型。3.2站点管理—定义和管理本地站点定义本地站点的一般步骤⑴为要定义的本地站点指定一个站点名，该站点名允许使用中文名称。⑵在本地磁盘建立存储站点文件的根文件夹，并在该文件夹中建立子文件夹，用于存放各类不同的文件。子文件夹的个数没有限制，但必须指定一个专门用于存储图像文件的文件夹。在命名文件夹时，不能使用中文名称。⑶使用Dreamweaver的站点管理功能定义站点。Dreamweaver8.0菜单栏的“站点”命令和文件面板的“站点”命令都可以定义本地站点。3.2站点管理—定义和管理本地站点管理本地站点使用“站点/管理站点”功能，将实现本地站点的管理。新建站点编辑站点复制站点删除站点导入和导出站点3.3创建和管理文档—创建HTML文档1．利用菜单栏的“文件/新建”命令创建文档步骤：打开“新建文档”窗口→打开“文档编辑”窗口→编辑文档→指定站点和文件名保存文档。2．利用文件面板创建文档步骤：打开文件面板→选定站点→命名文件→编辑文档→保存文档3.3创建和管理文档—创建HTML文档关于文档保存的说明⑴文档的保存文件名在“文件名”对话框中指定，文档的默认文件名为Untitled-x.html，其中“x”是一个整数值，如1、2、3等。⑵HTML文档的默认扩展名，通常为“html”或“htm”，也可以使其他形式的扩展名，具体由Dreamweave的首选参数的设定值确定。⑶不要在文件名和文件夹名中使用空格和特殊字符，文件名也不要以数字开头。3.3创建和管理文档—创建HTML文档关于文档默认扩展名的说明Dreamweaver允许定义创建的HTML文档的默认文件扩展名。步骤如下：⑴选择“编辑/首选参数”，打开“首选参数”对话框。⑵在左侧的类别列表中单击“新建文档”，打开新建文档对话框。⑶在“默认文档类型”中选择“HTML”。⑷在“默认扩展名”文本框中，指定Dreamweaver中新建HTML档的扩展名。在重新设置以前，该扩展名即为Dreamweaver默认的HTML档的扩展名。3.3创建和管理文档—文档的打开和预览⑴利用“文件”菜单打开文档①选择“文件/打开”菜单，打开“打开”对话框。②设定要打开的文件类型，浏览并选择要打开的文件，然后用鼠标左键双击该文件，或选中文件后点击“打开”按钮，所选文档将在文档编辑窗口中打开。⑵利用文件面板打开文档①打开文件面板。②在文件面板中浏览选定文件，用鼠标左键双击选中的文件，即在文档编辑窗口中将选中的文档打开。3.3创建和管理文档—文档的打开和预览Dreamweaver预览文档的常用方法⑴文档在打开状态下，按F12功能键或使用文档工具中的预览按钮预览网页。⑵在文件面板中直接预览文档。过程：在文件面板中选中文档，用鼠标右键单击弹出快捷菜单，选用“在浏览器中预览”项，再确定使用的浏览器，即预览网页。或：在文件面板中选定文件后即按F12功能键。3.3创建和管理文档—文件面板的编辑功能⑴在文件面板中选中文件（或文件夹），然后单击鼠标右键，在弹出的快捷菜单中选择“编辑”功能。⑵在“编辑”命令中，选择相应的文件操作功能，实现指定的文件操作。说明：“编辑”命令对站点根文件夹和逻辑磁盘无效。包含链接的文件在站点内移动或删除时，文件面板将进行链接跟踪，并对文件中的链接进行更新。3.4插入和编辑网页元素—插入和编辑文本1．插入文本常用的两种方法：⑴直接在“文档”窗口中键入文本。⑵从其他应用程序中拷贝文本。2．插入空格和段落⑴插入空格HTML只允许字符之间包含一个空格，若要在文档中插入连续多个空格，需要按如下方法操作：①在全角输入法状态下直接利用空格键输入空格。②选择“编辑/首选参数”菜单，在“常规”类别中选中“允许多个连续的空格”。⑵插入段落直接用回车键添加一个新的段落。3.4插入和编辑网页元素—插入和编辑文本3．文本格式的编辑文本的格式包括段落格式、字体、字号、格式（如粗体、斜体、代码、下划线）、颜色、对齐方式、缩进等。文本格式的编辑方法：使用文本属性检查器使用“文本”菜单3.3创建和管理文档—插入和编辑文本4．编辑字体列表使用“编辑字体列表”命令可以设置出现在属性检查器和“文本/字体”子菜单中的字体组合。⑴向“字体列表”添加字体①选择“文本/字体/编辑字体列表”菜单，弹出“编辑字体列表”对话框。②在“可用字体”列表中选中要添加到“字体列表”中的字体。③按箭头按钮“<<”，将选中字体置于“选择的字体”框中。④按窗口左上方的“+”按钮，所选字体即进入“字体列表”中。3.3创建和管理文档—插入和编辑文本4．编辑字体列表⑵从“字体列表”中移除字体在“字体列表”中选中要移除的字体（或组合），按“-”按钮，所选字体即从“字体列表”中移除。说明：⑴添加或移除操作完成后，只有按下“确定”按钮，对字体列表所作的编辑才会生效。⑵在文本属性检查器中，通过“字体”列表窗口，也可以启动“编辑字体列表”对话框。3.3创建和管理文档—插入和编辑水平线1．插入水平线⑴在“文档”窗口中，将插入点放在要插入水平线的位置。⑵执行下列操作之一：选择“插入/HTML/水平线”。在“插入”栏的“HTML”类别中，单击“水平线”按钮。2．修改水平线⑴在文档窗口中，选择水平线。⑵选择“窗口/属性”打开属性检查器。⑶在属性检查器中根据需要对属性进行修改。3.3创建和管理文档—插入和编辑图像1．插入图像⑴将插入点放置在要显示图像的位置，然后执行以下操作之一：在“插入栏”的“常用”类别中，单击“图像”图标选择“插入/图像”菜单⑵在“选择图像源文件”对话框中执行下列操作之一：选择“文件系统”以选择一个图形文件。选择“数据源”以选择一个动态图像源文件。⑶浏览并选择要插入的图像源文件。⑷使用属性检查器中，设置所插入图像的属性。注意：在将图像插入文档时，Dreamweaver自动在HTML源代码中生成对该图像文件的引用。为了确保此引用的正确性，该图像文件必须位于当前站点中。3.3创建和管理文档—插入和编辑图像图像的属性：⑴宽和高：以像素为单位指定图像的宽度和高度。⑵源文件：指定图像的源文件。⑶链接：指定图像的超级链接。⑷对齐：对齐同一行上的图像和文本。⑸替代：指定只代替图像显示的替代文本。⑹垂直边距和水平边距：沿图像的边缘添加边距（像素）。⑺低解析度源:指定在载入主图像之前应该载入的图像。⑻边框：以像素为单位的图像边框的宽度，默认为无边框。⑼编辑：包括图像处理优化、裁剪、亮度和对比度、锐化等操作。⑽缩略图下面的文本框：使用缩略图下面的文本框设置名称，以便在使用Dreamweaver行为或脚本撰写语言时可以引用该图像。3.3创建和管理文档—插入和编辑图像2．编辑图像⑴调整图像大小Dreamweaver对图像大小的直接调整有两种方式：在文档窗口中以可视化的形式调整和使用属性检查器是指图像尺寸。⑵裁剪图像①打开包含要裁剪的图像的页面，选择图像，并执行下列操作之一：单击图像属性检查器中的“裁剪工具”图标。选择“修改/图像/裁剪”。②调整裁剪控制点直到边界框包含的图像区域符合所需大小。③在边界框内部双击或按Enter键完成裁剪操作。3.3创建和管理文档—插入和编辑图像⑶对齐图像对齐图像是指设置图像相对于同一段落或行中其他元素的对齐方式。可以将图像与同一行中的文本、另一个图像、插件或其他元素对齐；还可以使用对齐按钮（左对齐、右对齐、居中对齐）设置图像的水平对齐方式。对齐图像使用图像属性检查器实现，过程：①在“设计”视图中选择图像。②在属性检查器中设置该图像的对齐属性。3.3创建和管理文档—插入和编辑图像3．创建鼠标经过图像鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。创建鼠标经过图像操作步骤：⑴在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置。⑵使用以下任何一种方法操作后，打开“插入鼠标经过图像”对话框，在对话框中设置相关参数后“确定”即可。在“插入”栏中，选择“常用”标签，然后单击“鼠标经过图像”图标选择“插入/交互式图像/鼠标经过图像”菜单3.3创建和管理文档—插入和编辑flash对象1．插入flash动画⑴在文档窗口的“设计”视图中，将插入点放置在要插入内容的位置，然后执行以下操作之一：在插入栏的“常用”类别中，选择“媒体”工具，然后单击“Flas”按钮。.选择“插入/媒体/Flash”。⑵在显示的对话框中，浏览选择一个flash文件（扩展名为.swf），插入成功后，在插入点位置显示flash占位符。⑶预览flash动画。在文档窗口中预览①单击flash占位符选择要预览的flash内容。②在属性检查器中，单击“播放”按钮。按F12键在浏览器中预览flash动画。3.3创建和管理文档—插入和编辑flash对象2．插入flash按钮⑴在文档窗口中，将插入点放置在要插入flash按钮的位置。⑵执行以下任何一种操作：在插入栏的“常用”类别中，选择“媒体”工具，然后单击“Flash按钮”。选择“插入/媒体/Flash按钮”。⑶在“插入Flash对象”对话框对话框中，通过“样式”和“范例”选择按钮的形状，通过“按钮文本”输入按钮上的文字，也可以为按钮设置链接。⑷编辑flash按钮。3.3创建和管理文档—插入和编辑声音1．链接到音频文件⑴选择要用作指向音频文件的链接的文本或图像。⑵在属性检查器中，单击文件夹图标以浏览音频文件，或者在“链接”文本框中键入文件的路径和名称。2．嵌入声音文件⑴设置插入点，然后执行以下任何一种操作：在插入栏的“常用”类别中，单击“媒体”按钮，然后选择“插件”图标选择“插入/媒体/插件⑵在属性检查器中，单击文件夹图标以浏览音频文件，或者在“链接”文本框中键入文件的路径和名称。⑶调整插件占位符的大小，设置音频控件在浏览器中的显示尺寸。3.3创建和管理文档—页面属性Dreamweaver8.0的页面属性有五种：页面的外观页面链接页面标题页面标题/编码页面跟踪图像在文档编辑状态下，通过属性检查器的“页面属性”按钮对页面属性进行设置。3.5超级链接—创建到其他文档或文件的链接建立链接：方法一：“文档”窗口中，选择热点文本或页面元素，然后使用“修改/建立链接”菜单，选择要链接到的文件。方法二：选择文档中的热点文本或页面元素，然后使用属性检查器文件夹图标，或者使用“点到文件”图标，来选择要链接到的文件，或者键入该文件的路径。链接到的文件可以是多种类型，如页面文档、图形文件、影片文件、声音文、PDF文件等。3.5超级链接—创建锚记链接1．创建命名锚记⑴在“文档”窗口的“设计”视图中，将插入点放在需要命名锚记的位置。⑵按以下任何一种方法进行操作：选择“插入/命名锚记”在“插入”栏的“常用”类别中，单击“命名锚记”按钮。⑶显示“命名锚记”对话框，在“锚记名称”文本框中，键入锚记的名称，并单击“确定”。3.5超级链接—创建锚记链接2．建立到锚记的链接方法一：使用指向锚记的方法建立锚记链接。⑴在文档窗口的设计视图中，选择要从其创建链接的文本或图像。⑵在属性检查器的“链接”文本框中键入一个包含字符“#”和锚记名称的字符串：①要链接到的锚记在当前文档中时，字符串形式为：#锚记名称。②要链接到的锚记在另外的文档中，字符串形式为：文件标识符#锚记名称。3.5超级链接—创建锚记链接2．建立到锚记的链接方法二：使用指向文件方法建立锚记链接。⑴打开含有所需命名锚记的文档。⑵在“文档”窗口的“设计”视图中，选择要从其创建链接的文本或图像。如果该文档是其他打开文档，则必须切换到该文档。⑶执行下列操作之一：操作一：单击属性检查器中“链接”文本框右侧的“指向文件”图标，然后将其拖到要链接到的锚记上。操作二：在“文档”窗口中，按住Shift键进行拖动，从所选文本或图像拖动到要链接到的锚记。3.5超级链接—创建电子邮件链接⑴在文档窗口的“设计”视图中，设置插入点，或者选择要作为电子邮件链接出现的文本或图像。⑵执行以下任何一种操作：选择“插入/电子邮件链接”在插入栏的“常用”类别中，单击“插入电子邮件链接”按钮⑶在“电子邮件链接”对话框的“文本”框中输入表示链接的文本信息，在“E-Mail”框中输入链接到的E_mail地址，单击“确定”按钮后完成链接设置。3.5超级链接—图像地图及其链接图像地图是指已被分为多个区域并在区域设置了热点的图像，在图像地图中，当用户单击某个热点时，会发生某种操作。1．创建热点地图⑴在文档窗口中，选择图像。⑵在“地图”文本框中为该图像地图输入名称。⑶选择图形工具定义图像地图。⑷设置“热点”属性检查器。2．编辑图像地图移动热点、调整热点大小以及热点的复制3.5超级链接—创建空链接和脚本链接1．空链接空链接是未指派的链接。空链接用于向页面上的对象或文本附加行为。创建空链接后，可向空链接附加行为，以便当鼠标指针滑过该链接时，交换图像或显示层。创建空链接操作步骤：⑴在文档窗口的“设计”视图中选择热点对象。⑵在属性检查器中，将“javascript:;”或“#”键入“链接”文本框。3.5超级链接—创建空链接和脚本链接2．脚本链接脚本链接执行JavaScript代码或调用JavaScript函数。它能够在不离开当前网页的情况下，为访问者提供有关某项的附加信息。脚本链接还可用于在访问者单击特定项时，执行计算、表单验证和其他处理任务。创建脚本链接操作步骤：⑴在文档窗口的“设计”视图中选择文本、图像或对象。⑵在属性检查器的“链接”文本框中，键入“javascript:”，然后紧跟一些JavaScript代码或函数调用。3.6“五岳览胜”网页设计示例示例网页说明在本地站点mountain中创建网页：⑴网页文档名为index.html，网页标题为“一个简单的网页”；⑵index.html网页中的图片文件存储在mountain站点的images文件夹下，文件名为taishan.jpg，浏览网页时该图片的显示文本为“泰山”。⑶index.html网页左下角有一个flash按钮，右下角是一个实时日期；⑷在index.html网页中有三个链接：①“泰山”链接到网页文件tainshan.html,该文件在mountain站点中，在网页中使用该链接时，在当前窗口打开网页文件tainshan.html。②“泰山新视野”按钮也是到tainshan.html文档的链接，点击该按钮后，将在一个新窗口中打开tainshan.html网页。③“泰山云雾”是链接到网页文件tainshan.html内的一个锚记链接，浏览网页时，该链接将使“泰山云雾”图片出现在浏览器窗口中。示例网页设计第3章Dreamweaver网页设计基础—小结1．Web站点是一组具有共享属性的链接文档。Dreamweaver站点最多由三部分组成，即本地文件夹、远程文件夹和和动态页文件夹，具体取决于所用的计算机环境和所开发的Web站点的类型。进行网页设计首先要规划和定义本地站点。2．插入和编辑网页元素是HTML文档中的最基本操作，本章介绍了插入和编辑文本元素、水平线、图像、flash元素、声音、链接等页面元素的方法。属性检查器是页面元素属性设置的重要面板。3．Dreamweaver8.0处于文档编辑状态时，能够通过属性检查器对页面属性进行设置。Dreamweaver的页面属性包括外观、链接、标题、标题/编码以及跟踪图像等五个方面的内容。4．Dreamweaver页面文档中的超级链接有多种类型，包括链接到其他文档或文件的链接、锚记链接、电子邮件链接、空链接和脚本链接等。链接一般由链接热点、链接目标和链接指示标志三部分构成。链接热点既可以是文本，也可以是图像或对象。