《Dreamweaver 8案例教程》课件第3章_第1页
《Dreamweaver 8案例教程》课件第3章_第2页
《Dreamweaver 8案例教程》课件第3章_第3页
《Dreamweaver 8案例教程》课件第3章_第4页
《Dreamweaver 8案例教程》课件第3章_第5页
已阅读5页，还剩41页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

本章学习目标基本操作3.1文档元素3.2页面的可视化向导3.3案例3-1查看和编辑头文件3.4第3章页面操作3.1基本操作基本操作页面操作是设计网页的基本操作，它包括了打开和编辑文档、控制文档属性、定义文档标题等多个方面。3.1.1新建页面当Dreamweaver8.0启动时，系统会自动创建一个无标题的文档，默认为html空网页，如果为您提供了几种选择新的工作文档的选项。可以用下列方法创建新文档：1.选择“文件”>“新建”。即出现“新建文档”对话框，如图3-1所示。“常规”选项卡已被选定。3.1.1新建页面2.从“类别”列表中选择“基本页”、“动态页”、“模板页”、“其他”或“框架集”；然后从右侧的列表中选择要创建的文档的类型。例如，选择“基本页”创建HTML文档，或选择“动态页”创建ColdFusion或ASP文档，诸如此类。3.单击“创建”按钮。新文档在“文档”窗口中打开。3.1.2存储页面文档创建之后需要保存它，保存文档步骤如下：若要保存新文档，请执行以下操作：1. 选择“文件”>“保存”，快捷键是Ctrl+S，如图3-2所示3.1.2存储页面2.在出现的对话框中，定位到要用来保存文件的文件夹。注意：最好将文件保存在Dreamweaver站点中。3.在“文件名称”文本框中，键入文件名。请不要在文件名和文件夹名中使用空格和特殊字符，文件名也不要以数字开头。具体说来就是不要在打算放到远程服务器上的文件名中使用特殊字符（如é、?、或￥）或标点符号（如冒号、斜杠或句号）；很多服务器在上传时会更改这些字符，这会导致与这些文件的链接中断。4.单击“保存”3.1.3打开已有的页面在Dreamweaver中可打开现有Web页或基于文本的文档，即使它们不是用Dreamweaver创建的。可打开该文档并用Dreamweaver在“设计”视图或“代码”视图中编辑该文档。若要打开现有的文件，请执行以下操作：1. 选择“文件”>“打开”，出现“打开”对话框，如图3-3所示。3.1.3打开已有的页面2.定位到并选择要打开的文件。3.单击“打开”，文档在文档窗口中打开。3.1.4浏览和调试页面可以随时在浏览器中预览文档，而不必先保存文档或将文档上传到Web服务器，默认浏览器为IE浏览器，浏览页面的具体方法为：方法一：单击“文件”>“在浏览器中预览”，选择一个浏览器浏览。方法二：使用快捷键F12键在主浏览器中显示当前文档，或者使用Ctrl+F12在候选浏览器中显示当前文档。3.1.4浏览和调试页面方法三：单击在浏览器上预览/调试按钮，或者在下拉菜单中选择浏览器，如图3-4所示。3.1.5页面属性页面标题、背景图像和颜色、文本和链接颜色以及边距是每个Web文档的基本属性。用户可以使用“页面属性”对话框设置或更改页面属性。打开页面属性对话框。使用下面的方法之一就可以打开页面属性对话框，如图3-5所示。方法一：单击“修改”菜单下的“页面属性”；方法二：单击文本“属性”检查器中的“页面属性”按钮，即会打开“页面属性”对话框。方法三：在页面空白处单击右键，选择“页面属性”。页面属性对话框3.1.5页面属性2. 设置页边距在“页面属性”对话框中的“外观”选项卡中设置上、下、左、右边距。3. 设置页面标题在页面属性对话框中的“标题/编码”选项卡，在标题单行文本框中输入页面标题。注意：如果不给页面加标题，页面会在浏览器窗口、书签列表和历史记录列表中显示为无标题文档。4. 设置页面背景颜色在页面属性对话框中的“外观”类别中可以设置页面的背景颜色。注意：如果同时使用背景图像和背景颜色，下载图像时会出现颜色，然后图像覆盖颜色。如果背景图像包含任何透明像素，则背景颜色会透过背景图像显示出来。3.1.5页面属性5. 设置页面链接颜色在页面属性的“链接”选项卡中，可以设置页面中链接的颜色，如图3-6所示。3.1.6导入WORD文件在Dreamweaver8.0中可以直接导入Word文档和Excel文档。其步骤如下：1. 单击“文件”菜单下“导入”，选择“Word文档”2. 在弹出的对话框中，选择相应的Word文件在对话框中选择“清理Word段落间距”的复选框，可以清理Word生成的无关HTML代码。3. 单击“确定”也可以在打开了word生成的HTML文档后，再单击“命令”菜单中的“清理Word生成的HTML”选项，如图3-7所示清理Word生成的HTML3.1.7HTML源文件的操作显示HTML源代码的方法有：方法一：单击“查看”菜单下的“代码”选项。方法二：直接单击文档工具栏中的按钮。方法三：单击“代码”菜单中的“代码检查器”打开代码检查器。第3章页面操作3.2文档元素3.2文档元素在Dreamweaver8.0页面中有多种元素，可以使用鼠标直接单元选中这些元素，也可以采用选择标签的方法来选择相应的文档元素，其中包括可见元素和不可见元素。对于可见元素，可以单击并直接进行编辑；对于不可见元素，就需要在编辑前把它设为可见元素。3.2.1选择元素若要在“文档”窗口的“设计”视图中选择元素，通常可以单击元素。如果元素不可见，必须使其可见后才能选择它。1. 选择可见元素若要选择“文档”窗口中的可见元素，请单击元素或在元素上拖过。2. 选择不可见元素选择不可见元素，请选择“查看”>“可视化助理”>“不可见元素”（如果还没有选择该菜单项），然后在“文档”窗口中单击元素的标记。3. 选择整个标记若要选择完整的标签，请单击“文档”窗口左下角的标签，如图3-9所示，如果要选择该单元格，单击TD标签即可选择了。3.2.2改变不可见元素有些HTML代码在浏览器中没有可见的表示形式。例如，comment标签不会出现在浏览器中。但是，此标签在创建能够选择、编辑、移动和删除这类不可见元素的页面时很有用。Dreamweaver使您可以指定在“文档”窗口的“设计”视图中是否显示标记不可见元素位置的图标。若要指明在选择“查看”>“可视化助理”>“不可见元素”时显示哪些元素标记，可以在“不可见元素”首选参数中设置选项，如图3-10所示。查看菜单3.2.2改变不可见元素若要更改“不可见元素”首选参数，单击“编辑”菜单下的“首选参数”，选择“不可见元素”选项卡，如图3-11所示，在显示的选项组中，选择需要显示或隐藏的元素复选框。第3章页面操作3.3页面的可视化向导3.3.1调整文档窗口大小在Dreamveaver8.0中，状态栏显示“文档”窗口的当前尺寸（以像素为单位）。如图3-12所示方法一：直接拖动窗口，查看元素如何适应页面。在Windows中，用户可以将“文档”窗口最大化以便它填充集成窗口的整个文档区域。3.3.1调整文档窗口大小方法二：若要将“文档”窗口的大小调整为预定义的大小，可以从“文档”窗口底部的“窗口大小”弹出菜单中选择一种大小，如图3-13所示3.3.1调整文档窗口大小注意：在Windows中，您可以将“文档”窗口最大化以便它填充集成窗口的整个文档区域。当“文档”窗口最大化时，您无法调整它的大小。如果是在640x480显示器上使用，可以选择“536x196（640x480，默认）”的大小。注意：当“文档”窗口最大化时，您无法调整它的大小。对于不是很精确的大小调整，请使用操作系统的标准窗口大小调整方法，如拖动窗口的右下角。3.3.2使用标尺标尺可帮助您测量、组织和规划布局。标尺可以显示在页面的左边框和上边框中，以像素、英寸或厘米为单位来标记。1. 显示或隐藏标尺若要在打开和关闭状态之间切换标尺，请选择“查看”>“标尺”>“显示”，如图3-14所示。3.3.2使用标尺2. 更改度量单位若要更改度量单位，请从“查看”>“标尺”子菜单中选择“像素”、“英寸”或“厘米”，如图3-14所示。3. 设置标尺原点要更改原点，请将标尺原点图标拖到页面上的任意位置，如图3-15。若要将原点重设到它的默认位置，请选择“查看”>“标尺”>“重设原点”。3.3.2使用标尺4. 使用网格功能单击“查看”菜单中的“网格”子菜单，选择“显示网格”即可在文档编辑区内显示网格，去掉显示网格前的，即可隐藏网格。在“查看”菜单中选择“网格”子菜单中“网格设置”，弹出如图3-16所示网格设置对话框。第3章页面操作3.4查看和编辑头文件3.4.1显示头部元素在Dreamweaver8.0可以使用“查看”菜单、“文档”窗口的“代码”视图或代码检查器查看文档的head部分中的元素。方法一：单击“查看”菜单中的“代码”，在HTML代码中<head>与</head>之间的代码就是文档头文件的内容。方法二：单击“查看”菜单中的“文件头内容”。对于head内容的每一个元素，“设计”视图中的“文档”窗口顶部都有一个标记。例如，在一个空白的HTML文件中将显示和两个标记，单击标记，属性面板出现如图3-17所示信息，主要是查看文档的Meta信息。3.4.1显示头部元素单击标记，属性面板出现如图3-18所示的信息，此标记主要是对文档标题的查看。3.4.2使用头部元素网页的中的头部元素包含了说明信息、关键字、说明信息、基础和链接等。单击“插入”菜单下的“HTML”选项，在“文件头标签”的下拉菜单中选择要插入的文件头元素插入即可，如图3-19所示。3.4.2使用头部元素提示：在“查看”菜单中设置显示“文件头内容”，单击head部分中的图标之一以选中它，即可在属性检查器中设置或修改元素的属性。下列是有关HEAD元素的属性信息，1. 插入设置Meta属性：meta标签是记录有关当前页面的信息（如字符编码、作者、版权信息或关键字）的head元素。这些标签也可以用来向服务器提供信息，如页面的失效日期、刷新间隔和PICS等级。2. 设置标题属性：只有一种标题属性：页面标题。在大多数浏览器中查看页面时，标题会出现在浏览器标题栏和Dreamweaver“文档”窗口的标题栏中。标题还出现在工具栏中。在“标题”文本框中输入页面标题。3.4.2使用头部元素3. 设置关键字属性：许多搜索引擎装置（自动浏览Web页为搜索引擎收集信息以编入索引的程序）读取关键字meta标签的内容，并使用该信息在它们的数据库中将您的页面编入索引。因为有些搜索引擎限制索引的关键字或字符的数目，或者当超过了限制的数目时，它将忽略所有的关键字，所以最好只使用几个精选的关键字。在标记为“关键字”的文本框中输入关键字，并以逗号隔开。4. 设置描述属性：许多搜索引擎装置（自动浏览Web页为搜索引擎收集信息以编入索引的程序）读取说明meta标签的内容。有些使用该信息在它们的数据库中将您的页面编入索引，而有些还在搜索结果页面中显示该信息（而不只是显示文档的前几行）。有些搜索引擎限制索引字符的数目，所以最好将说明限制在几个字在标记为“说明”的文本框中输入描述性文本。5. 设置刷新属性：使用刷新元素可以指定浏览器在一定的时间后应该自动刷新页面，方法是重新载入当前页面或转到不同的页面。该元素通常用于在显示了说明URL已改变的文本消息后，将用户从一个URL重定向到另一个URL。3.4.2使用头部元素6. 延迟是在浏览器刷新页面之前需要等待的时间（以秒为单位）。若要使浏览器在完成载入后立即刷新页面，请在该文本框中输入0。动作指定在指定的延迟后，浏览器是转到另一个URL还是刷新当前页面。若要打开另一个URL而不是刷新当前页面，请单击“浏览”按钮，然后浏览到并选择要载入的页面。7. 设置基础属性：使用Base元素可以设置页面中所有文档相对路径相对的基础URL。8. 设置链接标签的属性：使用link标签可以定义当前文档与其它文件之间的关系。注意：head部分中的link标签与body部分中的文档之间的HTML链接是不一样的。第3章页面操作案例3-1创建基本页面案例效果案例3-1创建基本页面知识目标

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论