DreamweaverCS4的基本操作.ppt

第2章 Dreamweaver CS4 的基本操作,主讲人：黄庆华 电 话信 箱：,使用Dreamweaver可以自由地新建和打开HTML文档，基于文本的CFML、ASP、JavaScript、CSS文档，支持VB、.NET、C#、Java源代码文件，还可以在“设计”视图或“代码”视图中方便地定义meta标签、文档标题、背景颜色等文档属性。 如果用户经常使用某种文档类型，还可以将其设置为创建的新页面的默认文档类型，并可对文档的其他属性进行设置。,2.1 创建Dreamweaver新文档,2.1.1 创建一个完全空白的页面 2.1.2 创建一个包含预设CSS布局的页面 2.1.3 创建一个空模板 2.1.4 创建一个基于现有模板的页面 2.1.5 创建一个基于示例文件的页面,2.1.1 创建一个完全空白的页面,【文件】/【新建】，打开【新建文档】对话框。 在【空白页】类别中从【页面类型】列表选择【HTML】，【布局】中选择【无】，即可创建一个纯HTML空白页。,在网站建设中，文件名和文件夹名中不能使用空格和特殊字符，文件名也不要以数字开头。即不要在打算放到远程服务器上的文件名中使用特殊字符（如、￥等）或标点符号（如“：”、“/”或”。”等）。因为很多服务器在上传时会更改这些符号，将导致与这些文件的链接中断。,如果在【空白页】类别中从【页面类型】列表选择【ASP JavaScript】，【布局】中选择【无】，即可创建一个ASP JavaScript空白页。 HTML文档（静态网页）与ASP JavaScript文档（动态网页）显示图标有本质区别。,2.1.2 创建一个包含预设CSS布局的页面,选择【文件】/【新建】，在【新建文档】对话框的【空白页】选项卡中从【页面类型】列表选择要创建的页面类型。如选择ColdFusion来创建ColdFusion页面。 如果从【布局】列表中选择一个预设的CSS布局，将创建一个包含预设CSS布局的页面。,预设的CSS布局类型,从【页面类型】列表中选择【HTML】、【HTML模板】等，右侧的【布局】列表中显示相应的文档布局类型。 预设的CSS布局类型有： 固定：列的大小不会根据浏览器的大小或站点访问者的文本设置来调整。 弹性：列宽是以相对于文本大小来决定的。如果访问者更改了文本设置，该列的宽带将会进行调整，但不会基于浏览器窗口的大小来更改列宽度。,液态：列宽是以站点访问者的浏览器宽度的百分比来决定的。如果站点访问者将浏览器变宽或变窄，该列的宽度将会进行调整，但不会基于站点访问者的文本设置来更改列宽度。 混合：用上述3个选项的任意组合来决定列类型。如，两列混合，左侧栏布局具有可缩放至浏览器大小的液态主列，而右侧的弹性列可缩放至站点访问者的文本设置的大小。,【文档类型】弹出菜单,【文档类型】弹出菜单中选择文档类型，一般情况下使用默认选项【XHTML 1.0 Transitional】。,【布局CSS位置】弹出菜单,如果在【布局】列表中选择了一种CSS布局，则从【布局CSS位置】弹出菜单中为布局的CSS代码选择一个位置。 添加到文档头：将布局的CSS代码添加到要创建的页面头中。 新建文件：将布局的CSS代码添加到新的外部CSS文件，并将新的样式表附加到要创建的页面中。 链接到现有文件：指定当前页面使用的现有CSS文件。单击【附加CSS文件】窗格上方的【附加样式表】图标并选择一个现有的CSS样式文件。,【首选参数】按钮 【帮助】按钮 【获取更多内容】，将打开Dreamweaver Exchange下载更多页面设计内容。 【创建】按钮 【取消】按钮,2.1.3 创建一个空模板,使用【新建文档】对话框可以创建Dreamweaver空白模板。默认情况下，模板保存在站点的Templates文件夹中。 可以选择【HTML模板】、【JSP模板】、【PHP模板】、【ASP JavaScript模板】等。,HTML模板,2.1.4 创建一个基于现有模板的页面,（1）用户可以选择、预览文档并通过现有模板创建新文档；,（2）或者使用【文件】/【新建】，打开【新建文档】对话框，选择【模板中的页】，从已经定义的站点中选择一个模板；,（3）还可以使用【资源】面板从现有模板创建新文档。,2.1.5 创建一个基于示例文件的页面,DW附带了几种具有专业水准页面布局和设计元素的示例文件。用户可以创建基于这些示例文件的页面。 在【新建文档】对话框中可以预览示例文件并阅读文档的设计元素的简要说明。 如果选择了【CSS样式表】类别，则可以复制预先设计的样式表，然后将其应用于新建的文档中。,【示例中的页】对话框,2.2 设置默认文档类型和编码,如果站点的大多数页面都是特定的文档类型（如Cold Fusion、HTML、ASP），可以通过【首选参数】对话框设置默认的新文档类型。 【编辑】/【首选参数】，打开【首选参数】对话框，在其【分类】列表中单击【新建文档】。,【首选参数】对话框,默认文档 默认扩展名 默认文档类型 默认编码 Unicode标准化表单 按Ctrl+N组合键时显示新建文档对话框,2.3 打开现有文档,使用Dreamweaver可以打开现有Web文档，并可在“设计”视图或“代码”视图中编辑该文档。 如果打开的文档是一个另存为HTML文档的Word文件，则可以使用【清理Word的HTML】命令来清除Word插入到HTML文件中的无关标记标签。 还可以打开非HTML文本文件，如JavaScript文件、XML文件、CSS样式表或用字处理程序或文本编辑器保存的文本文件。,2.3.1 打开现有文件,可以打开现有的Web文档，也可以打开非HTML文本文件。,2.3.2 清理Word的HTML文件,在Dreamweaver CS4中可以打开Word中保存为HTML文件的文档，对于无关的HTML代码，可以使用【命令】/ 【清理Word的HTML】命令删除。该命令适用于由Word 97或更高版本另存为HTML文件的文档。,（1）【清理Word的HTML】对话框,【基本】选项卡 删除所有Word特定的标记 清理CSS 清理标签 修正无效的嵌套标签 应用源格式 完成时显示动作记录,【详细】选项卡 清理Word特定的标记 标签中的XML 清理CSS ,（2）【清理HTML】命令,若要清理的文件不是由Word生成的HTML或XHTML文件，使用【命令】/ 【清理HTML】命令。,2.4 使用页面,创建Web页面时，应考虑用户将使用什么浏览器和操作系统查看制作的Web页面，以及可能需要提供哪些语言支持。 DW提供了许多功能来轻松创建新的网页和指定网页属性。可以制作出在各种Web浏览器中均能正确显示的颜色，针对不同语言设置不同字符的编码，以及检查Web浏览器是否与Web站点兼容等。,2.4.1 设置Web页面外观属性,【修改】/【页面属性】，打开【页面属性】对话框。 可以修改指定页面的默认字体大小、背景颜色、边距、链接样式及页面设计等，既可以指定新的页面属性，也可以修改现有页面的属性。,【分类】/【外观（CSS）】,【页面字体】 字体 【编辑字体列表】 大小 文本颜色 背景颜色 ,【编辑字体列表】,使用【页面属性】对话框设置页面外观，仅仅应用于当前激活的文档。 如果一个页面使用了外部CSS样式表，重新设置页面外观后， DW不会改变该样式表固有的格式，因而也不会影响应用了该样式表的其他所有页面的外观。此时若要使用外部CSS样式表，可以使用【属性】面板进行设置。,2.4.2 在Web中使用颜色,颜色是构成网页的重要元素，是美化网页不可或缺的部分，使用DW可以方便、快捷地为任何网页页面元素设置合适的颜色。,（1）认识网页安全色,网页中颜色的表示方法主要有2种：使用16进制值（如#CCFF00）和使用颜色名称（如red）表示。网页安全色是指以256色模式运行时，无论在windows还是macintosh系统中，或在Netscape Navigator和IE中都将显示相同的颜色。 当Web浏览器刚诞生时，大部分计算机只显示256色。今天，大多数计算机都能显示数以百万计的颜色，所以为当前计算机系统开发站点时，完全没有必要使用浏览器安全调色板。,【颜色】对话框,（2）使用颜色下拉列表设置颜色,【属性】面板中单击颜色框右下角的下拉箭头，打开颜色下拉列表。 两种方法。 用滴管从颜色调色板或屏幕上任何位置选择颜色。 【系统颜色拾取器】按钮，打开【颜色】对话框。,（3）定义默认文本颜色,【修改】/【页面属性】，打开【页面属性】对话框。 在【分类】列表下，可以分别选中【外观】、【链接】、【标题】等，分别设置颜色。,2.5 任务自动化,【历史记录】面板记录在完成任务过程中所执行的步骤。 对于经常执行的任务，实现任务自动化的方式是：重放【历史记录】面板中记录的步骤或创建新命令来自动执行这些步骤。,2.5.1 认识历史记录面板,【历史记录】面板具有记录DW操作工作的每一个步骤的功能。可以使用其一次撤销一个或多个步骤，其功能等同于【编辑】/【撤销】。 【窗口】/【历史记录】，打开【历史记录】面板。 （1）撤销上一步骤 （2）一次撤销多个步骤 （3）删除当前文档的历史记录列表,2.5.2 重设历史记录面板保留和显示的步骤数,默认的步骤数足以满足大多数用户的需要。 步骤数设置得越大，【历史记录】面板需要的内存就越多，这会影响系统性能，显著降低计算机的运行速度。 【编辑】/【首选参数】，打开【首选参数】对话框。 当【历史记录】面板达到最大步骤数时，DW将自动放弃最早的步骤。,2.5.3 使用历史记录面板执行相同的操作命令,使用【历史记录】面板，不仅可以重复所执行的最后一个步骤，重复一系列连续的步骤，也可重复执行一系列不连续的步骤。 选中要执行的步骤，然后单击【重放】按钮。,可以将【历史记录】面板中的一系列步骤应用于“文档”窗口中的任何对象，其操作步骤是：选中将要应用操作步骤的对象，在【历史记录】面板中选择相关步骤，然后单击【重放】按钮。 也可以将一个文档中的步骤复制、粘贴到另一个文档。其步骤：在【历史记录】面板中选中要复制的步骤，单击【历史记录】面板的【复制步骤】按钮复制这些步骤。打开另一文档，将插入点置于所需位置或选择一个应用步骤的对象，单击【编辑】/【粘贴】粘贴步骤，此时粘贴的步骤将会在粘贴到的文档【历史记录】面板时重放，并以“粘贴步骤”的名称作为一个步骤在【历史记录】面板显示。,2.6预览和测试Web页面,DW提供了随时在浏览器中预览文档的功能，不需要先保存文档或将文档上传到Web服务器进行预览。,2.6.1 设置Web下载时间和大小首选参数,“8秒钟原则”：一般来说，大多数用户浏览网页时等待一个页面的时间不会超过8秒。 Web页下载时间和大小的设计应遵从该原则。 【编辑】/【首选参数】，打开【首选参数】对话框，在【分类】列表中选中【状态栏】选项卡。 【连接速度】选择计算下载时间的连接速度，如64Kb/s。,【首选参数】/【状态栏】选项卡,用于设置窗口的大小。,2.6.2 使用浏览器预览和测试页面,对于制作完成的页面，可以随时在浏览器中进行预览和测试。 可以在DW中定义多个用于预览的浏览器。 【编辑】/【首选参数】，打开【首选参数】对话框，在【分类】列表