搜索
网页设计技术（第二版）张磊编著中国铁道出版社第3章Dreamweaver网页设计基础主要内容DreamweaverCS3简介站点管理创建和管理文档插入和编辑网页元素页面文档中的超级链接“五岳览胜”网页设计网页设计技术（第二版）张磊编著中国铁道出版社3.1DreamweaverCS3简介—功能概述Dreamweaver是构建网站和应用程序的专业化产品。提供可视布局工具、应用程序开发功能、代码编辑支持的强大组合，使各个技术级别的开发者和设计者都能够快速创建可视化、吸引人的基于标准的站点和应用程序。从基于CSS设计的领先支持到手工编写的代码功能，Dreamweaver提供在集成的、无缝的环境中所需的专业工具。Dreamweaver支持所有主要服务器技术，如ColdFusion、PHP、ASP、ASP.NET以及JSP等，开发者可以选择将Dreamweaver与服务器技术结合使用，构建强大的Internet应用程序。网页设计技术（第二版）张磊编著中国铁道出版社3.1DreamweaverCS3简介—工作界面1．启动界面2．工作区文档窗口状态栏插入栏属性面板面板组3．首选参数的设置网页设计技术（第二版）张磊编著中国铁道出版社3.2站点管理—Dreamweaver站点概述Web站点是一组具有共享属性（如相关主题、类似的设计或共同目的）的链接文档。在Dreamweaver中，“站点”一词既表示Web站点，又表示属于Web站点的文档的本地存储位置。在开始构建Web站点之前，必须要建立站点文档的本地存储位置。Dreamweaver站点最多由三部分组成：–本地文件夹–远程文件夹–测试服务器文件夹网页设计技术（第二版）张磊编著中国铁道出版社3.2站点管理—定义和管理本地站点•定义本地站点的一般步骤⑴为要定义的本地站点指定一个站点名，该站点名允许使用中文名称。⑵在本地磁盘建立存储站点文件的根文件夹，并在该文件夹中建立子文件夹，用于存放各类不同的文件。子文件夹的个数没有限制，但必须指定一个专门用于存储图像文件的文件夹。在命名文件夹时，不能使用中文名称。⑶使用Dreamweaver的站点管理功能定义站点。Dreamweaver菜单栏的“站点”命令和文件面板的“站点”命令都可以定义本地站点。例3-1站点定义示例网页设计技术（第二版）张磊编著中国铁道出版社3.2站点管理—定义和管理本地站点管理本地站点使用“站点/管理站点”功能，将实现本地站点的管理。新建站点编辑站点复制站点删除站点导入和导出站点网页设计技术（第二版）张磊编著中国铁道出版社3.3创建和管理文档—创建HTML文档1．利用菜单栏的“文件/新建”命令创建文档步骤：打开“新建文档”窗口→打开“文档编辑”窗口→编辑文档→指定站点和文件名保存文档。2．利用文件面板创建文档步骤：打开文件面板→选定站点→命名文件→编辑文档→保存文档网页设计技术（第二版）张磊编著中国铁道出版社3.3创建和管理文档—创建HTML文档关于文档保存的说明⑴文档的保存文件名在“文件名”对话框中指定，文档的默认文件名为Untitled-x.html，其中“x”是一个整数值，如1、2、3等。⑵HTML文档的默认扩展名，通常为“html”或“htm”，也可以使其他形式的扩展名，具体由Dreamweave的首选参数的设定值确定。⑶不要在文件名和文件夹名中使用空格和特殊字符，文件名也不要以数字开头。网页设计技术（第二版）张磊编著中国铁道出版社3.3创建和管理文档—创建HTML文档定义HTML文档的默认文件扩展名：⑴选择“编辑/首选参数”，打开“首选参数”对话框。⑵在左侧的类别列表中单击“新建文档”，打开新建文档对话框。⑶在“默认文档类型”中选择“HTML”。⑷在“默认扩展名”文本框中，指定Dreamweaver中新建HTML档的扩展名。在重新设置以前，该扩展名即为Dreamweaver默认的HTML档的扩展名。网页设计技术（第二版）张磊编著中国铁道出版社3.3创建和管理文档—文档的打开和预览⑴利用“文件”菜单打开文档①选择“文件/打开”菜单，打开“打开”对话框。②设定要打开的文件类型，浏览并选择要打开的文件，然后用鼠标左键双击该文件，或选中文件后点击“打开”按钮，所选文档将在文档编辑窗口中打开。⑵利用文件面板打开文档①打开文件面板。②在文件面板中浏览选定文件，用鼠标左键双击选中的文件，即在文档编辑窗口中将选中的文档打开。网页设计技术（第二版）张磊编著中国铁道出版社3.3创建和管理文档—文档的打开和预览Dreamweaver预览文档的常用方法⑴文档在打开状态下，按F12功能键或使用文档工具中的预览按钮预览网页。⑵在文件面板中直接预览文档。过程：在文件面板中选中文档，用鼠标右键单击弹出快捷菜单，选用“在浏览器中预览”项，再确定使用的浏览器，即预览网页。或：在文件面板中选定文件后即按F12功能键。网页设计技术（第二版）张磊编著中国铁道出版社3.3创建和管理文档—文件面板的编辑功能⑴在文件面板中选中文件（或文件夹），然后单击鼠标右键，在弹出的快捷菜单中选择“编辑”功能。⑵在“编辑”命令中，选择相应的文件操作功能，实现指定的文件操作。说明：•“编辑”命令对站点根文件夹和逻辑磁盘无效。•包含链接的文件在站点内移动或删除时，文件面板将进行链接跟踪，并对文件中的链接进行更新。例3-2在站点中移动文件夹网页设计技术（第二版）张磊编著中国铁道出版社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．创建鼠标经过图像鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。创建鼠标经过图像操作步骤：⑴在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置。⑵使用以下任何一种方法操作后，打开“插入鼠标经过图像”对话框，在对话框中设置相关参数后“确定”即可。–在“插入”栏中，选择“常用”标签，然后单击“鼠标经过图像”图标–选择“插入/交互式图像/鼠标经过图像”菜单网页设计技术（第二版）张磊编著中国铁道出版社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．