Dreamweaver快速入门.pptx

Dreamweaver快速入门,第1章,本章目标,了解Dreamweaver的功能和特点。 学会设置Dreamweaver的工作界面。,1.1 Dreamweaver概述,Dreamweaver是编辑网页的软件，能够以直观的方式制作网页。Dreamweaver提供了强大的网站管理功能，许多专业的网站设计人员都将Dreamweaver作为创建网站的首选工具。 Dreamweaver、Flash（网页动画制作软件）和Fireworks（网页图像处理软件）构成了网页制作方面的三大利器，被称为网页三剑客。它们同为美国Adobe公司的产品。 Dreamweaver提供了开放的编辑环境，能够与相关软件和编程语言协同工作，所以使用Dreamweaver可以完成各种复杂的网页编辑工作。,1.1.1 Dreamweaver的功能,（1）网站管理功能。 Dreamweaver不仅能够编辑网页，还能够实现本地站点与服务器站点之间的文件同步。利用库、模板和标签等功能，可以进行大型网站的开发。对于需要多人维护的大型网站，拥有文件操作权限方面的限制，具有一定的安全保护功能。 （2）多种视图模式。 Dreamweaver提供了代码、设计和拆分3种视图模式。设计视图可以满足用户的设计需求，即使不懂HTML语言，不会书写网页源代码，也能创建出漂亮的网页；代码视图可以直接以HTML等语言形式编写网页，能够对源代码进行精确控制；拆分视图是将窗口分为上下两部分，上半部分以代码形较允就常掳氩糠忠陨杓菩问较允就常梢栽谕淮翱谥蟹直鹣允就车拇牒蜕杓剖油肌 （3）对象插入功能。 Dreamweaver的插入面板中提供了常用字符、表格、框架、电子信箱和Flash文字等功能按钮，可以直接单击插入面板中的相关功能按钮，快速完成目标对象的制作。 （4）属性设置方式。 Dreamweaver提供了属性面板，属性面板中显示了当前对象的属性，可以直接在属性面板中设置和修改当前对象的属性。 （5）CSS样式设置方式。 Dreamweaver提供了CSS样式面板，通过CSS样式面板，快速创建、查找和修改目标样式。 （6）内置大量的行为。 Dreamweaver中内置了大量的行为，通过行为面板可以快速添加一些特殊效果，如网页的跳转、图像载入等。 （7）提供了资源管理功能。 在建立Dreamweaver站点后，Dreamweaver可以统一管理站点中的资源。可以通过资源面板来管理和使用这些资源。,1.1.2 Dreamweaver的工作环境,（1）工作界面。 Dreamweaver附带3种不同形式的工作界面，可以满足设计者和编码人员的工作需求，能够根据需要设置工作界面。 （2）缩放工具。 Dreamweaver提供了缩放工具。通过缩放操作可以对设计进行全面控制。放大并检测图像或编辑复杂的嵌套表格。缩小视图可以查看页面的整体效果。 （3）编码工具栏。 Dreamweaver的编码工具栏在代码窗口左侧的直栏中，包含常用编码操作。无需过多搜索，就可以通过提示和编码工具栏找到代码片段，编码功能包括对代码的折叠、展开、注释等功能。 （4）文件传输。 使用Dreamweaver上传文件到服务器时无需等待，用户可以在Dreamweaver与服务器通信时继续使用本地计算机上的文件工作。 （5）站点监测。 可以安全、高效地管理站点，保证编辑的文件与站点的同步，确保使用的文件是最新的。登记和注销功能可以跟踪使用这些文件的人，能够有效防止修改其他人的工作文件。 （6）Dreamweaver站点与远程服务器可以紧密结合。 Dreamweaver站点可以模拟服务器环境，可以保证制作和测试网页时，站点中的文件与服务器端完全兼容，可以同步完成制作和测试。,1.1.3 Dreamweaver 对主流技术的支持,（1）支持模拟服务器环境。 支持如IIS、Aphache和ColdFusion等一些主流的服务器环境，满足不同的服务器环境开发要求。 （2）支持ASP、PHP和Java等主流技术。 可以支持ASP、PHP和Java等主流技术，可以在Dreamweaver中直接使用这些技术开发相关动态网页。 （3）支持数据库。 在Dreamweaver中可以直接连接到数据库。正确设置服务器环境后，通过Dreamweaver可以直接连接到数据库中进行动态网页的制作。 （4）支持多数的网页媒体。 Dreamweaver可以完美支持常见的网页多媒体格式，如图片、Flash影片、MP3音乐等，都可以通过Dreamweaver直接添加，并能够进行即时测试。 （5）网页发布系统。 Dreamweaver支持多种上传文件到服务器的方式，例如最常用的FTP上传文件方式。可以直接在Dreamweaver中选择和设置上传文件到服务器的方式，在Dreamweaver中完成所有的网页制作和上传发布的操作。,1.2 Dreamweaver的工作界面,启动Dreamweaver后，Dreamweaver的起始页面中提供了一些常用操作命令。可以直接单击起始页中的目标按钮完成相关的操作，如新建文件等操作。 右侧的文件面板会列出上一次编辑的文件所在站点，因为这里是第一次打开Dreamweaver，所以显示的是桌面。,启动Dreamweaver CS3后，单击起始页面中“新建”下的HTML，新建一个网页，进入到如图所示的Dreamweaver编辑界面。,1.3 调整工作界面,制作网页的过程中，应根据工作的需要调整Dreamweaver工作界面，如改变工作视图，隐藏和展开面板，或是在编辑过程显示标尺和辅助线等。,1.3.1 改变工作视图,Dreamweaver中提供了3种视图：设计、代码和拆分。当要改变编辑视图时，只需单击对应按钮，即可转换到目标视图模式下。图中所示为单击“代码”按钮后切换到的代码视图。本书中大部分工作是在设计视图中完成的，因此在后面的学习中，可以单击“设计”按钮，切换到设计视图。,1.3.2 显示、隐藏和改变面板的大小,Dreamweaver拥有许多面板，例如插入面板、属性面板和其他各类面板。显示与隐藏它们的方法如下： （1）通过窗口菜单命令，可以打开或关闭目标面板。如图所示，单击窗口菜单中的命令，命令左侧出现勾选标记时，会打开面板，反之会关闭面板。,（2）单击面板的标题或标签，可以展开和折叠面板。,（3）单击面板标题栏右侧的按钮，打开面板菜单。在菜单中选择“关闭面板组”，可以关闭当前面板组。,（4）要隐藏面板组，可以单击图中所示的隐藏面板组按钮；再次单击该按钮，便会显示面板组。如果要隐藏或显示当前所有面板，可以按F4键。,（5）改变组合面板大小的方法如下： 将鼠标指针移至面板或面板组的边框位置，鼠标指针变为双箭头形状时，按住鼠标左键并拖动鼠标。,1.3.3 标尺和网格,在制作网页时，经常需要准确定位网页中元素的位置。这时，可以使用标尺和网格功能帮助定位。 标尺 显示标尺的方法如下： 如图所示，单击“查看/标尺/显示”，在显示命令左侧出现选中标记，文档窗口中就会显示出标尺。, 网格 显示网格的方法如下： 单击“查看/网格设置/显示网格”，使显示网格命令左侧出现选中标记，即可在文档窗口中显示网格。 单击“查看/网格设置/靠齐到网格”，使靠齐到网格命令左侧出现选中标记，可使文档窗口中的内容接近网格时自动与网格对齐。 单击“查看/网格设置/网格设置”，打开网格设置对话框。在该对话框中可设置网格的间隔、颜色等。,1.3.4 辅助线,建立辅助线前需要打开标尺。建立辅助线的方法如下： （1）将鼠标指针指向标尺。 （2）按住鼠标左键拖动鼠标到目标位置。 （3）松开鼠标完成辅助线的建立。 移动辅助线位置的方法如下： （1）将鼠标指针指向辅助线，当鼠标指针形状变为双向箭头时，按住鼠标左键拖动到目标位置。 （2）松开鼠标完成辅助线调整。 删除辅助线的方法如下： 删除辅助线的方法与移动辅助线的方法类似，只需把辅助线移回到标尺处，即可删除辅助线。,1.4 Dreamweaver制作网页的工作流程,使用Dreamweaver制作网页时按以下工作流程进行： （1）建立Dreamweaver站点。 只有建立了Dreamweaver站点，才能真正发挥Dreamweaver的各项功能，有效管理各项资源。建立Dreamweaver站点，需要指定站点的存储文件夹，相关的远程服务器信息、域名、测试服务器等信息。 （2）制作网页模板和定制CSS样式。 网站中的同级网页拥有许多相同的地方，所以通常建立网页时首先建立目标模板，然后使用这些模板建立各级网页。制作模板实际就是将网页规划成不同区域，指定目标区域的作用。然后通过定制的CSS样式，来统一网页内容的样式。 （3）使用模板建立网页。 使用模板建立网页，实际上是向模板中的指定区域添加文字、链接、图片、多媒体等内容。 （4）测试。 网页制作完成后，需要对网页进行测试，减少可能出现的错误，使网页具有更好的兼容性。 （5）上传。 将制作完成的网页和相关网页中的链接资源上传到远程服务器中，完成最终制作。,小结,通过本章的学习，应掌