[第2章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），可以通过【首选参数】对