首页 Dreamweaver教程全解

Dreamweaver教程全解

举报
开通vip

Dreamweaver教程全解Dreamweaver完全教程 Dreamweaver完全教程 新特性快速了解 新特性概览 Dreamweaver是WEB 站点开发的中心环节。完全用户自定义控制可以迅速完成页面以及站点的设计。Roundtrip HTML/Javascript 行为库以及可视化编辑环境大量减少了代码的编写,同时亦保证了其专业性和兼容性。通过 Dreamweaver 与其它群组产品的配合使用以及众多第三方支持可轻松完成动态发布个电子商务网站的构建。到目前为止,全世界范围超过 60% 的专业网页设计师都在使用 Dreamweaver ...

Dreamweaver教程全解
Dreamweaver完全 教程 人力资源管理pdf成真迷上我教程下载西门子数控教程protel99se入门教程fi6130z安装使用教程 Dreamweaver完全教程 新特性快速了解 新特性概览 Dreamweaver是WEB 站点开发的中心环节。完全用户自定义控制可以迅速完成页面以及站点的 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 。Roundtrip HTML/Javascript 行为库以及可视化编辑环境大量减少了代码的编写,同时亦保证了其专业性和兼容性。通过 Dreamweaver 与其它群组产品的配合使用以及众多第三方支持可轻松完成动态发布个电子商务网站的构建。到目前为止,全世界范围超过 60% 的专业网页设计师都在使用 Dreamweaver 下面就让我们来看看4.0版都具有哪些新的功能 代码显示   编辑代码变得前所未有的简单。可以通过新的综合性的文本编辑器来查看代码,或用新的分离显示来同时观察代码 和设计。新的代码显示会区分语法的颜色,标签的对称,以及自动缩进代码 JavaScript调试器   JavaScript的客户端调试直接在你的浏览器里。新的JavaScript调试器让你可以看到Javascript在Navigator 或者 Internet Explorer 里的执行情况,帮助你理解每个浏览器如何执行Javascript。你可以通过设置断点和观察代码中传递更新的数值来挑是你的代码 排版显示   便捷的设计合成页面。唯一的新的排版显示,可以让你运用常见的排版技巧,就好像直接在页面上画画,拖动单元格,或者组合单元格来建立嵌套的 表格 关于规范使用各类表格的通知入职表格免费下载关于主播时间做一个表格详细英语字母大小写表格下载简历表格模板下载 。假如你正在已存在的表格上工作,或建立新的版面,排版显示总是会在所 有的浏览器里建立干净的表格 Macromedia Flash按钮和文本   可在Dreamweaver里直接建立可编辑的矢量图形。新的Macromedia Flash 按钮和 Macromedia Flash 文本特性让你可以和Macromedia Flash 设计师一同工作,你可以创建新的按钮风格或下载免费的按钮风格从Macromedia 的服务 器上。 素材库面板   追踪中心区域里所有的媒体。用新的资产面板来预览和管理图片,颜色,连接的URL,脚本,Macromedia Flash内容, Shockwave 内容,QuickTime内容, 临时文件,和库条目。 返回图形编辑   加快了在Dreanweaver和Fireworks之间的图像和HTML编辑速度。返回图形编辑让你可以启动并编辑并且启动并优 化图像。通过扩展程序来快速的添加图形索引,按钮或将整个相册加入你的站点。 Microsoft Visual SourceSafe和WebDav综合   为了版本的控制,将Dreamweaver和Micorsoft Visual SourceSafe 合成起来。同时也用包括Interwoven、Vingnette、BroadVision、ATG和Documentum在内的WebDAV 协议 离婚协议模板下载合伙人协议 下载渠道分销协议免费下载敬业协议下载授课协议下载 ,将其与先进的内容管理系统结合起来。所有的这些 业内领先企业都选择Dreamweaver Platform作为他们内容管理系统的HTML前台。 站点报告   通过站点报告来快速的发现和解决错误。运行报告来找出在你站点里共同的问题或者写出一个标准的报告在连接站点里的问题。 Macromedia对于Dreamweaver的服务   下载强大的扩展。Macromedia Exchange for Dreamweaver是一个提供Macromedia Flash和Fireworks扩展程序集中区域搜索引擎。你可以通过exchange和你的团队共享对象,行为脚本和指令。 新功能使用说明 根据Macromedia公司官方网站报导新的Dreamweaver4增加了很多新的功能Dreamweaver3原有的一些功能也大大增强了。下面从代码编写相关功能设计相关功能和协作相关功能三个方面介绍Dreamweaver4的新特色。 一代码编写相关功能 1.往返HTML   Dreamweaver4独特的往返HTML功能使我们可以同步访问设计视图(DesignView)和HTML源代码。可以打开用其它编辑器编辑的文档但它不会改写你手工输入的HTML标记或第三方标记。这就使得Dreamweaver自动生成的代码与手工输入的代码融为一体各自“相安无事”。               *2.整合文本编辑器   现在Dreamweaver4增加了以代码为中心的新特性手工编写代码就像在设计视图环境一样方便可以自动缩排标点平衡选择多行后一次缩进。可以在使用代码视图工具栏(CodeViewToolbar)的下拉列表定义的JavaScript函数之间轻松导航。对于使用JavaScript编程的专业人员这种代码导航无疑是一种高效的导航帮助。输入代码时Dreamweaver自动对HTML和JavaScript代码使用不同的颜色显示。             *3.把主窗口分割为代码视图和设计试图   可以把Dreamweaver的主窗口分割为代码视图和设计试图让你能够查看整页代码而无需离开文档窗口。这样就可以在同一个窗口同时查看代码视图和设计试图或同时编辑多个文档的代码。               *4.JavaScript调试器   使用新增的JavaScript调试器可以直接在浏览器中调试客户端JavaScript脚本观察JavaScript的执行就像它在Netscape或IE浏览器中一样因而能够更好地了解每种浏览器是怎样执行JavaScript的。可以设置断点调试代码然后在逐步执行代码的过程中观察变量的变化.及时发现编程错误。             *5.集成O"Reilly代码参考   Dreamweaver4集成了O"Reilly出版物中关于代码参考方面的内容,可以快速获取关于JavaScript的信息,包括浏览器文档对象模型(DOMs)、CSS。             6.集成BBEdit6.0和HomeSite4.5   Dreamweaver4集成了BBEdit6.0评测版和HomeSite4.5。使用这些领先的文本编辑工具可以大大增强Dreamweaver的文本编辑功能,提高编码工作效率。             7.快速标记编辑器   快速标记编辑器让你在设计视图中手工编写代码更加快捷。可以快速修改、添加、删除页面中选定对象的HTML标记。             *8.编辑非HTML文档   可以把Dreamweaver当作文本编辑器编辑非HTML文档直接在代码试图(CodeView)中编辑JavaScriptXML和其它文本文件。             9.自定义标记数据库   使用自定义标记数据库可随时定义新的标记或编辑默认标记。Dreamweaver的可配置自定义数据库让你能够定制翻译引擎来支持属性代码。             10.支持W3C标准   Dreamweaver提供对W3C标准的很好支持包括HTML和CSS。               注:序号前有*的为Dreamweaver4新增功能其余为增强功能   二设计相关功能 *1.布局视图   使用新增的布局视图(LayoutView)很容易设计复杂的页面。可以在页面直接绘制单元格然后指定当页面大小改变时布局怎样变化。表格单元可以随意拖动也可以把表格单元组合在一起构成嵌套表格。不管是使用现有表格布局或是创建新的布局布局视图总能够创建与所有浏览器兼容的乾净表格。强大的可视化设计特性包括拖放表格图像和层。标准视图(StandardView)为编辑页面提供了丰富的所见所得(WYSIWYG)编辑环境。 *2.Flash文本和按钮   使用Dreamweaver4中新增的Flash按钮和Flash文本功能可以在Dreamweaver中直接创建可编辑的矢量图。使用Flash矢量图代替按钮和文本的位图图像可缩放文件更小打印效果更好。可以使用Flash设计工具创建新的按钮样式或从Macromedia的交流中心(MacromediaExchange)下载免费的样式。             3.历史面板   通过历史面板可以记录每一步操作以便重复使用。也可以把这些操作步骤保存为共享命令。历史面板使工作流程可视化可以快速撤消任何操作步骤甚至是已经保存的操作步骤。             4.整合标记选择器   使用整合的标记选择器可以很容易地选择文档中的HTML标记编辑标记或删除标记。             5.CSS和HTML样式   Dreamweaver支持CSS和HTML样式可以轻易对单元格行列和离散选择应用全局样式。             6.描摹图   在设计阶段在布局视图中采用草图描摹方法可以快速创建表格布局大大减少设计精确表格布局所的时间。             7.梦幻模板   使用梦幻模板允许内容提供者在HTML文档中直接编辑不会危及站点的设计。一个绑定的矩形和包含可编辑区名的标签有助于直观地识别模板的可编辑区。             *8.往返图表编辑   使用往返图表编辑(RoundtripTableEditing)功能,可以在Dreamweaver中直接启动Fireworks,编辑和优化图形,加速图形和HTML的编辑。可以在Fireworks中快速编辑切图,然后回到Dreamweaver页面中重新组合,无需重新设计原来的HTML表格和记忆切图名称。从MacromediaExchange下载即时图形扩展集(InstaGraphicsExtensionSet),可以立即在你的网站中添加图形小球、按钮或完整的网络影集。 9.支持多种媒体   Dreamweaver自身支持Flash、Shockwave、Generator、QuickTime和Real媒体内容,让你能够在Dreamweaver中集成和预览各种媒体内容。             *10.Macromedia标准用户界面 新的用户界面与所有Macromedia的Web著作产品保持一致。所有应用程序将共享通用用户界面元素,包括面板的外观、菜单名称、键盘快捷键、图标、拾色器、窗口快照、启动栏和工具面板等。新的键盘快捷键更加灵活,便于使用。               注:序号前有*的为Dreamweaver4新增功能,其余为增强功能。   三、协作相关功能 *1.资源管理器   使用新增资源面板(AssetPanel)可以在一个中心位置跟踪所有站点的媒体。可以预览和管理所有站点的图像、颜色、外部URL、脚本、Flash、Shockwave、QuickTime、模板和库元素。可以把常用资源保存到收藏夹,并可以跨站点使用这些资源。             2.MicrosoftOffice集成   可以轻易集成MicrosoftOffice文件。CleanUpWordHTML(清理WordHTML)命令删除MicrosoftWord属性标记。表格对象(TableObject)让你能够在Dreamweaver中导入用逗号分隔的全尺寸图像数据文件。             *3.SourceSafe和WebDAV集成   Dreamweaver4中集成了领先的版本控制软件MicrosoftVisualSourceSafe。这就使得大的开发团队可以把Dreamweaver用作标准的HTML前端开发工具。此外,Dreamweaver的站点管理窗口还与任何内容管理系统或支持WebDAV协议(W3C的源控制标准)的Web服务器(如WindowsIIS5和Apache)集成。               *4.站点报告   使用站点报告功能可以快速识别和修复错误。执行报告命令,查找站点中存在的常见问题(如缺少替换文本或文档无标题),或书写一个自定义的报告,在站点中查找指定的问题。             5.设计笔记   设计笔记有助于开发团队的高效协作。通过开设计笔记可以在一个地方跟踪每个源文件的注释和状态。             *6.可配置站点管理窗口   使用设计笔记命令可以在站点管理窗口添加自定义栏。这个功能为开发团队跟踪站点开发提供了灵活简单的方式。             7.站点地图   使用站点地图与你的站点导航视图交互,进行快速的站点设计和重组。可以直接在站点地图中单击,串接新站点,创建新文件和新链接。               8.同步站点   使用同步站点命令(SynchronizeSite)可以保持本地站点与远程站点版本的同步,可以删除每个站点中的无用文件,因而能够在不追踪被修改文件的情况下轻松更新远程服务器。             *9.集成E-mail   集成E-mail使开发团队成员之间的通讯更加快捷、方便。当一个文件被某人注销时,可以单击他的名字,给他发送E-mail。在工作流(Workflow)标签下站点定义对话框中可以定义你自己的E-mail地址。             10.可配置菜单   使用可编辑的XML文件,你可以完全定制整个Dreamweaver菜单系统。使用键盘快捷键管理器定制快捷键,创建新的快捷键,或载入以前配置的快捷键设置。             *11.Macromedia交流中心   Macromedia交流中心(MacromediaExchange)提供一个中心场所,在这里有很多易于安装使用的Dreamweaver插件。通过这个中心,你可以从庞大的插件开发者社团成员的努力中获得好处,或与你的团队成员共享对象、行为和命令。只要轻轻一击,你就可以安装和管理Dreamweaver的各种插件。               注:序号前有*的为Dreamweaver4新增功能,其余为增强功能。 完全功能列表 一、设  计 结构视图   新的结构视图可以帮助你轻松的完成结构复杂的页面。在页面上直接画出表格单元,并可注释在页面大小改变时,结构应如何变化。只要简单的拖动单元格或将一组单元格汇拢,就可以建立嵌套式的表格。你是否正在忙于修改已建立的表格或正在创建新的结构呢?结构视图可以帮助你建立一个新的表格,并在任何浏览器中显示。这些强大的可视化设计特性还包括表格、图象和结构的拖放。标准的视图为页面编辑工作提供了一个“所见既所得”环境。 >> Macromedia Flash文本和按钮   随着Macromedia Flash按钮和Macromedia Flash文本这些特性的添加,在Dreamweaver中可以直接建立可编辑的矢量图。用Macromeida Flash矢量来取代位图制作按钮和文本,你的图象就可以升级、文件可以更小,而在打印效果就会更佳。让我们和Macromedia Flash的设计者们一起创作出新颖的按钮模式,你也可以到Macromedia Exchange上下载免费的按钮模式。>> 历史记录   为了方便再使用可以把每一个操作记录下来,也可以将每一个步骤的操作指令保存下来供将来共享。这个历史记录板让你看到了你的工作流程,也可以撤消任何一个操作,包括已经存盘的。>>   完整的标签选择器   用完整的标签选择器可以在文档上简单的选择HTML标签、编辑标签或删除标签。>> CSS和HTML模式   在Dreamweaver中,简单的将单元格、行、列和分散的选择项作为全局模式。>>   图象跟踪   把在设计阶段制作的图象作为导向,在结构视图中快速建立基于表格的结构。这样可以大大减少了建立结构所需要的时间。>> 梦想模板   让制作者们不用考虑网站规划就直接在HTML中进行编辑。一个大小固定的矩形和标签就可以保存下编辑区域的名称,这样一来,就可以可视化的命名模板的编辑区域。>> 往返的图象编辑   用往返表格编辑在Dreamweaver和Fireworks之间来回的快速编辑图象和HTML,这样就可以在Dreamweaver中直接“调用——编辑”图象和“调用——优化”图象。快速的在Fireworks中对切割的图象作修改,在Dreamweaver页面中重新合成这些修改,而无需重新操作HTML表格或记住那些切割图象的名称。是否想立即为你的网站准备添加图象公告栏、按钮或全套的网页图片集呢?请从Macromedia Exchange上下载Extension Set。>> 为丰富的媒体内容准备的Native Support   为Macromedia Flash、Shockwave、Generator、QuickTime和Real Content所设计的Native Support可以让你在Dreamweaver中合成和预览内容。>> Macromedia用户界面   体验一下Macromedia的用户界面,这是一个Macromedia网页授权产品的新的标准界面。所有的产品将采用共同的用户界面内容,包括新的但仍是用户所熟悉的键盘快捷键,使之更为方便。共同的截面元素包括调色板的外观、菜单命名、键盘快捷键、按钮、颜色采摘、窗口样式、调用栏和工具板。>> 二、Code编码特性 往返HTML   同时访问设计视图和HTML源代码。在Dreamweaver中,你可以打开任何一个在别的编辑器中建立的文档,而不用担心它是手写或三类标签,也不用覆盖。>> 完整的文本编辑器   如今,手写编程已经可以象在设计视图中工作一样得心应手了,因为具备了诸如自动排版、符号权衡和选择多行并立即排版等编码核心特性。在编码视图工具栏中使用一个竖直的表单就可在文档中定义JavaScript功能导航。编码导航,对那些操作JavaScript的专业用户来说是一个十分有效的导航工具。HTML和JavaScript在你编写时是自动用颜色分类的。>> 分窗编码和设计视图   新的分窗环境让你可以可视化的工作,或者提供一个满页的编码试图而不用跳出文档窗口。在同一个窗口同时可以看到代码和设计图象,或者也可以在同时为多个文档编码。>> JavaScript纠错器   你可以在你的浏览器中为客户端的JavaScript纠错。新的JavaScript纠错器让你犹如在Netscape或IE中看JavaScript代码一样,让你更好的了解每一个不同的浏览器是如何执行JavaScript的。设立断点来为你的代码纠错,然后在你浏览整个代码时检查你的变量。>> 完整的O'Reilly代码指导   在JavaScript上可以快速的得到指导信息,包括浏览器DOM,HTML和CSS。这是由O'Reilly推出的新的完整的代码指导特性。>> 合成的BBEdit 6.0和HomeSite 4.5包   在HomeSite 4.5中为Dreamweaver所提供的完整的支持,和BBEdit 6.0的复制版让你可以轻松的使用这些先进的文本编辑器和Dreamweaver。>> 快速标签编辑器   快速标签编辑器让那些手写编程人员可以在设计视图中快速进行编辑。在一页上为选定的对象快速的修改、添加或删除HTML标签。>>   编辑非HTML文档   Dreamweaver可以当作文本编辑器使用,来编辑非HTML文档。直接在编码视图中编辑JavaScript、XML和其他的文本文件。>> 自定义标签库   随时定义新的标签或编辑默认标签。Deamweaver中这一可以再配置的自定义标签库让你可以自己定义来支持个人代码。>> W3C标准   Dreamweaver对W3C有较高的支持,包括HTML和CSS。>> 集  成 资源管理   用新的资源面板在中心位置跟踪网站的各个媒体。预览和管理所有的网站图象、颜色、外部URL、脚本、Macromedia Flash、Shockwave、QuickTime、模板和库元素。保存经常使用的资源并且在网站间重复使用。 Microsoft Office合成   简单的合成Microsoft Office文件。Clean Up Word HTML指令用于删除Microsoft Word独有标签,表格对象可以让你将图象数据文件导入Dreamweaver。 SourceSafe和WebDAV合成   将Dreamweaver和领先的版本控制软件——Microsoft Visual SourceSafe合成起来,这让大型开发组织把Dreamweaver作为HTML前端制作工具。而将Dreamweaver Site Window和其他支持WebDAV协议(源代码控制的W3C标准)的内容管理系统或网页服务器合成起来,例如Windows IIS5和Apache。   网站报告器   使用网站报告器可以快速找到和修复错误。启动报告器,可以查出你网站上的一般问题;你也可以自己编写报告器来查出网站上的一些特殊问题。(一般问题通常是一些Alt文本丢失或文档未命名。) 设计提示   设计提示可以让小组工作更为和谐高效。为每一个源代码文件在一个单独的地方保存注释和状态。   可再配置的网站窗口   用设计提示,可以在网站窗口中添加自定义专栏。这让开发小组更灵活、简单的督促网站开发工作。 网站地图   通过网站地图将为你提供一个网站浏览导航,以便快速进行网站规划和重组。只点击几下鼠标,就可以直接在地图上开设连载版块和建立新的文件,并且在选择文件和图象后在你的网站上建立链接。 同步网站   使你的本地和远程网站同步,甚至在两者上同时删除单独的文件。同步网站可以让你简单的更新远程服务器而无需跟踪修改后的文件。 完整的E-Mail系统   完整的E-Mail系统让你的开发组更快更方便的沟通。如果其他人正在检查一个文件,你可以点击他们的姓名,发送E-Mail。你可以在工作流程标签下的网站定义对话框里输入自己的E-Mail地址。   可再配置的菜单   一个可编辑的XML文件可以帮助你完全自定义整个Dreamweaver菜单系统。使用键盘快捷键管理器来自定义新的快捷键或调用预先设定快捷键。 Macromedia Exchange   这是一个中心,为Dreamweaver提供了上百种容易安装的外围产品。这为你的开发小组提供了可共享的对象、行为和指令。安装这些外围产品只需点击你的鼠标。 Dreamweaver完全教程 Dreamweaver界面及面板  一、 工作界面     网页编辑窗口。      1. 标题栏。显示网页的标题。 2. 菜单栏。依次为文件、编辑、视图、插入、修改、文字、命令、站点、视窗和帮助。 3. 编辑区。在这里编辑网页。 4.当编辑网页时,显示正在编辑的HTML标记 5.状态栏。显示网页的有关信息。 6.显示视窗大小,点旁边的小黑三角,可以选择不同的显示尺寸。 7.显示网页大小,传输速率下网页的下载时间。 8.状态栏中的启动面板的快捷按钮。   二、启动面板      1. 启动站点视窗。 2. 启动元件库编辑器。 3. 启动HTML式样编辑器。 4. 启动样式表编辑器。 5. 启动行为编辑器。 6. 启动历史记录器 7. 启动HTML源文件编辑器。 8. 竖放启动面板。 三、 HTML式样编辑器      快速自定义HTML 格式 pdf格式笔记格式下载页码格式下载公文格式下载简报格式下载 。                四、 式样表编辑器      控制页面元素(如字体大小、颜色等)的样式。                五、 元件库编辑器      把常用的元件集中起来,建立一个元件库,可无限次重复使用。                六、 模板编辑器      自制模板并可随时编辑。                七、 历史记录器      记录网页制作的整个过程。                八、 Frames编辑窗口     显示Frame的划分格式并可对个分格进行编辑。                九、 层编辑器      显示制作中出现的层。                十、 行为编辑器      内建许多Java小程序,以实现动态和交互式效果。                十一、 HTML源文件编辑器     可以在这里查看源代码并直接改写HTML。         十二、 TimeLine编辑器      通过它来实现动态效果。           十三、 对象面板      可以通过它加入各种对象,实现不同需求。      1. 普通对象(Common),用来插入图片等等,是最常用的对象面板。                其中 1. 插入图片 2.插入轮换图片 3.插入表格 4. 插入表格数据 5. 插入水平线 6. 插入导航栏 7. 插入层 8. 插入HTML换行符 9. 插入E-mail链接 10. 插入时间 11. 插入Flash动画 12. 插入Shockwave动画 13. 插入Generator 14. 插入Fierworks 15. 插入Java小程序 16. 插入ActiveX控件 17. 插入插件 18. 插入服务器端引用 2.字符对象(Charcters)     用来插入一些特殊字符。这也是 Dreamweaver3.0新增的对象。                其中: 1. 插入版权声明 2. 插入注册商标 3. 插入商标 4. 插入英镑符号 5. 插入元符号 6. 插入欧元符号 7. 插入破折号 8. 插入左引号 9. 插入右引号 10. 插入其他字符 2. 表单对象(Forms)     制作表单时,插入表单各种对象。                其中: 1. 插入表单 2. 插入文本输入域 3. 插入按纽 4. 插入复选框 5. 插入单选框 6. 插入下拉式菜单 7. 插入文件域 8. 插入图象按纽 9. 插入隐藏域 10. 插入可跳转下拉式菜单 3. 框架对象(Frames)     用于快速地建立框架,共有8个模式可供选用。这也是Dreamweaver3.0新增的对象。                4. 头部对象     在HTML文件的HEAD(头部)中插入相关信息,如网页标题、网站描述、关键字等。 其中: 1. 插入META属性 2. 插入关键字 3. 插入网站描述 4. 插入刷新设置 5. 插入基链接 6. 插入网页相关文件定义 5. 隐形物件(Invisibles) 插入各种不可见的Web页面元素。 其中: 1. 插入锚点 2. 插入备注 3. 插入JavaScript或VBScript脚本语言 4. 插入HTML空格符 十四、 属性面板 1. 文字属性面板   其中: 1. 选择文字格式 2. 选择字体 3. 输入链接地址 4. 选文字大小 5. 选文字颜色 6. 文字加粗、斜体、左对齐、居中、右对齐 7. 链接定位器 8. 浏览链接地址 9. 链接文件视窗打开方式 10. 无序列表、有序列表、左缩进、右缩进 11. HTML标记编辑器 12. 展开或折叠面板 2. 表格属性面板   其中: 1. 表格命名 2. 行数 3. 列数 4. 宽度 5. 高度 6. 设置单元格空白 7. 设置单元格间隔 8. 设置对齐方式 9. 设置表格边框 10. 清除行高 11. 清除列高 12. 把表格尺寸由%转换为像素 13. 把表格尺寸由像素转换为% 14. 垂直方向空白 15. 水平方向空白 16. 左、上边线颜色 17. 右、下边线颜色 18. 设置背景图片 19. 设置背景颜色 20. 统一设置边框线颜色 3. 层属性面板   其中: 1. 层命名 2. 层距显示窗口左边距离 3. 层距显示窗口上边距离 4. 宽度 5. 高度 6. 当前层的堆栈顺序 7. 设置背景图片 8. 设置可见度 9. 设置背景颜色 10. 设置HTML标记 11. 设置当内容大于层的尺寸时如何操作   有四种情况: Visible使层内所有内容都可见;Hidden切除超出层大小的内容;Scroll不管内容是否超出层,都增加一个滚动条;Auto只有当内容超出层,才增加一个滚动条。 12-15. 设置Clip坐标:L、T为左上角,R、B为右下角对以上所有浮动面板,可以进行自定义是否在打开新的编辑窗口时显示,和那些浮动面板Always on Top,只要选择Edit下Preferences…中的Floating Palettes,设置窗口如下图: 二、建立和管理网站 一、 建立网站        在制作网页前,推荐先在本地建立一个站点。Dreamwaver所提供了对站点内文件进行该名、编辑和删除等方便操作,其站点管理能自动修改其它页面指向这个文件的链接。使用Dreamweaver的模版和库,可让站点内的部分页面共用相同的部分,还可方便的统一更新。Dreamweaver还自带FTP功能,可进行远程管理。     要新建一个本地站点,请点击Dreamweaver菜单栏的Site下的New Site…,弹出新建站点对话框。      其中: 1. 站点命名 2. 本地站点所在位置 3. 选择后,Dreamweaver可自动更新本地站点 4. URL地址 5. 选择后,Dreamweaver会给这个本地站点设置一个缓存,以提高站点管理的速度。 完成以上设置后,点击OK按钮,新的本地站点设置完毕。    这时,会显示站点管理窗口。要随时打开站点管理窗口,也可点击Dreamweaver主窗口菜单栏的Site下的Site Files…,或点击启动面板上左起第一个图标,也可直接用快捷键F5。 其中:    1. 显示文件列表    2. 显示本地站点的站点地图         注意:在让你的网站地图显示之前,还需要对Site Map Layout进行默认网站主页、地图式样、文件标题、是否显示相关链接文件等设置。 3. 显示设置的各站点 4. 远程站点连接 5. 显示远程主机上站点文件 6. 显示本地站点文件 7. 刷新 8. 将远程主机上文件下载到本地 9. 将本地文件上传到远程主机上    其中3中还有Define Sites…一项。 选择Define Sits…这一项,则会弹出设置站点对话框。               当点击设置本地站点对话框上的New…按钮,则会再次弹出新建站点对话框,新建另一个站点。     在设置站点对话框上选择一个站点,再点击Edit…按钮,也会弹出新建站点对话框,对选中的这个已存在的本地站点重新设置。     在设置站点对话框上选择一个本地站点,再点击Duplicate…按钮,会将选中的这个已存在的站点复制一份。     在设置站点对话框上选择一个站点,再点击Remove按钮,会将选中的这个已存在的站点从Dreamweaver中删除掉。     点击Done按钮,回到站点管理窗口。     站点定义好后,要给文件更名,移动文件或删除文件,可在站点管理窗口中进行。这时,链接到这些文件的超级链接也会被Dreamweaver自动修改。 一般来说,当网站所包含的页面较多时,因种种失误,总会有错误的超级链接。当访问者点击这些错误链接时,会链接不到所指向的文件。     Dreamweaver提供了检查超级链接功能,能对本地站点所有页面上的超级链接进行检查。     点击菜单栏的Site\Check Links Sitewide,或直接用快捷键Ctrl+F8,即弹出一个对话框,开始对站点内所有的超级链接进行检查。要停止检查,点击对话框右下角的红色X按钮即可。 检查完毕,将会给出错误链接的详细资料。        在Files下面给出含有错误链接的文件,在Broken Links下面给出具体的错误链接。   注意,这只能检查站点内文件相互的链接,无法检查链到其它站点的超级链接的正确性,但会报告出链到其它站点的超级链接的数目。 二、 站点管理     上面已经谈到一些,这里主要讲一讲FTP的使用及远程站点管理。      Dreamweaver提供了非常方便的FTP功能,如同使用一个专门的FTP软件一样,如CuteFTP等。         当选择了服务器访问方式是FTP后,就会出现一些需要填写的内容,包括FTP主机名称,登陆用户名、密码,是否使用被动FTP方式、是否使用防火墙等选项。当使用防火墙时,还需要在Edit下的Pereferences…中对Site FTP进行设置,最重要的是输入你的防火墙名称或IP地址。     其中还可以设定FTP的连接、时间、端口号等参数。并且可以点击Define Sites…按钮,直接来建立站点了。       当在站点管理窗口中,点击Connect按钮后,就开始连接到远程服务器,连接成功后,在管理窗口左边就可以看到文件列表。此后,可以开始进行上传和下载文件的管理工作,主要使用Get、Put、Check In和Check Out这些功能按钮。CheckIn/Out功能只有在Web Server Info是有内容时,才会出现。它是用来设定网页的权限,即设定谁可以对网页进行修改,来保障多人合作制作网站时的安全性。     三 创建新文件及设置文本格式 打开Dreamweaver后,就可以就可直接在工作窗口中输入文字,插入表格等。要新建一个文件只要选择File下New,或用快捷键Ctrl+N。每新建一个文件,就会产生一个新的Dreamweaver窗口,即不是简单的产成一个新页面。当关闭这个页面时,也就是关闭了Dreamweaver。   第一课已经简单介绍了文字属性面板。下面就各个项目进行解释。   1.Format是文本格式。其后面的下拉选框有九个选项,分别是None、Paragraph、Heading 1、Heading 2、Heading 3、 Heading 4、 Heading 5、 Heading 6、Preformatted。None是不设格式,Paragraph是段落,Heading 1-6是标题的六种格式,Preformatted是预格式化。预格式化的原理是:告诉浏览器,把预格式化的内容按其在文本编辑器中的格式原封不动的显示出来。   2.下拉选单是文字字体。Default Font表示使用浏览器默认字体,中文的浏览器默认字体一般为宋体。因为我们使用的是中文,第一次使用需编辑我们自己的字体列表。选择该下拉选框里的最后一个选项Edit Font List…,弹出一个对话框。         从Font List框中选中某一存在的字体列表,从Available Fonts框中选择某一字体,点击"<<"按钮,即添加到你编辑的列表中。每个列表可添加一种或几种字体。建议首先添加"宋体",因为中文网页一般都使用的是宋体。编辑完成后,点击OK按钮即可。   3.Size即为文字的字号大小,后面的下拉选框有None、1、2、3、4、5、6、7、+1、+2、+3、+4、+5、+6、+7、-1、-2、-3、-4、-5、-6、-7选项。   None表示使用浏览器默认字号(一般为3),单独的数字表示字号,数字前有"+"号和"-"号表示相对于默认字号的字号大小。例如,5表示5号字,+3表示默认字号大小加上3,-2表示默认字号大小减去2。   4.文本的颜色设置。这个可填入以#开头的十六进制RGB颜色,或填入特定的表示颜色的英文单词,也可使用调色版。   5.“B”和“I”两个按钮。点击"B"按钮是将选定的文本以粗体显示,点击"I"按钮是将选定的文本以斜体显示。有三种对齐方式。是左对齐,是居中对齐, 是右对齐。   6.文本编辑还有一种格式叫块引用。使用一次块引用,则该区域首尾缩进两个汉字的位置。同一文本可使用多层块引用。文本另一种格式叫列表。 常用的有无序列表和有序列表两种格式。使用列表后,文本用Enter键换行,会自动在每行开头加上小标志或数字。   7.文本的换行。用键盘操作换行有两种方法。用Enter键或用Enter+Shift组合键。用Enter键,换行的行距较大。一般换行使用Enter+Shift组合键,这样换行才是正常行距。另外还可直接使用Objects面板(若没有显示可按Ctrl+F2键弹出)的Common模式中的图标即可换行,相当于使用Enter+Shift组合键。   8.文本空格。使用空格键,但它是针对某个特定位置,空格键只能使用一次。空格还可使用Objects面版的Invisible中的空格图标。这种插入空格的方式可在同一地点插入空格多次,但在Dreamweaver编辑器中看不到效果,只有用浏览器预览才能看到效果,并且在源代码中会产生" "标记代码。除此以外,我们还可以使用中文输入法,即将中文输入发的半脚输入改为全脚输入方式,然后按空格键,效果可以直接在Dreamweaver编辑器中看到,无须预览,也不会产生任何代码。   9.在输入了一些文件后,必然预览一下结果,可以选择File下Preview in Browser,或用快捷键F12。对使用何种浏览器进行预览也可以定义,只要选File下的Edit Browser List…,或在Edit下选Preferences…,再选Preview in Browser,也出现设置窗口。   然后,可以对缺省的浏览器进行编辑,或再填加新的浏览器来做Secondary预览浏览器。            10.请看下图,图中使用了以上提到的文本编辑的方式。 四、Dreamweaver界面及面板 一、插入图形   插入图形文件要使用Insert下的image,或使用快捷键Ctrl+Alt+I,也可以使用Objects面板的Common中的按钮,弹出输入窗口(图4.1)。在文件类型中可以看到,插入网页的图形文件可以有多中格式的,但.gif和.jpeg的图行文件可能会与网页有更好的交融性,因为它们的文件较小,更适合Internet上的传输。另外,Dreamweaver将自动生成此图形的绝对URL路径。如果你建立的本地站点中没有此文件,Dreamweaver会自动提示你,是否把这个文件放入你已建好的本地站点中。如果你是打开本地站点中的一个页面进行修改,在插入图形文件时,URL将会显示相对路径。点击OK即可。                       图4.1   然后选中这个图形,这时的可查看图形属性面板如图4.2。                       图4.2 其中:   1.W和H是图形的宽度和高度。插入图形后,Dreamweaver会自动给出图形的原本宽度和高度。这时可调整图形的宽度和高度,以放大或缩小图形的显示尺寸。 但改变的只是图形用浏览器显示的尺寸,图形本身的尺寸并没有任何变化。因此,不要指望用Deanweaver缩小图形尺寸,来提高页面下载速度。   2.Src后是你这个图形的地址,可填入另一图形的地址,以替换掉这个图形。   3.Align后选框是图形与文本的相互对齐方式,其后的下拉选框有十个选项Browser Default、Baseline、Top、Middle、Bottom、Text Top、 Absolute Middle、 Absolute Bottom、Left和Right。Baseline和Bottom是图形底部和文本的底行对齐。Absolute Bottom是图形底部和文本的最底线完全对齐。Top是图形顶部和文本的顶线完全对齐。Text Top是图形顶部和文本顶线对齐。Middle是图形中央和文本底线对齐。Absolute Middle是图形中央和文本的正中间对齐。Left是图形在左,文本在右;Right则反之。   4.定义图形在页面中的对齐方式。左对齐,居中对齐,右对齐。效果和文本在页面中的对齐一样,不再赘述。   5.在Alt后,可填进说明文字。当别人访问你的页面,在图形显示之前,图形位置将显示你填的这些文字。这样在图形没显示出来之前,别人就能知道图像所要说明的内容。   6.在Low Src后填入另一个图形的路径,这个图形一般为原图的低品质替换图。在原图没显示出来之前就先显示这副,让别人能迅速大体了解图形的内容。   7.V space是图形左边和其左方其它页面元素,及图形右边和其右方其它页面元素的距离。   8.H space是图形顶部和其上方其它页面元素,及图形底部和其下方其它页面元素的距离。   9.Border后可填入图形边框的宽度。   10.其它将在超链接一课中祥述。 >> 二、插入日期时间   对网页作了更新后,加上更新时间。Dreamweaver为此提供了方便而又精确日期时间插入功能。 移动光标到你要加入时间的位置,点击Objects面板上Common中的按钮,或在Insert下选Date,即弹出一个加入时间的对话框(图4.4)。   对话框主要有三项Day Format、Date Format和Time Format。Day Format是星期几的显示格式,选中[No Day]是不生成星期几。Date Format是日期的显示格式,只能自动生成英文格式和纯数字格式。Time Format 是时刻的显示格式,选中[No Time]是不生成具体时刻。   若选中下面的Update Automatically on Save,则这个加入了时间将在页面每次保存时自动换为最新的时间。>> 三、插入水平线   选择Insert下的Horizontal Rule,或在Objects面板Common中的按钮,就可以在网页页面里插入水平线。选中水平线,属性面板会如图4.5。 其中:   1.对这个Horizontal Rule命名。   2.W是该水平线的宽度,可填入数值。其后的选框是单位,有pixels和percent两种。Pixels是像素单位,Percent是百分比。例如,50 pixels表示宽度为50个像素,50 percent表示宽度占打开的浏览器窗口的50%。若不填,则宽度使用默认值100%。   3.H是水平线的高。   4.Align是水平线在页面中的对齐方式,当然只有当水平线宽度小于浏览器窗口宽度时才有效。对齐方式后的下拉选框有四个选项Default、Left、Center和Right,分别表示使用浏览器默认值、左对齐、居中对齐和右对齐。   5.Shading即阴影效果。去掉前面的钩表示不使用阴影。 >> 五 创建超链接 超链接为你在网上畅游提供了绝对的方便,也是网页制作中必要功能之一。  一、文本超链接   文本的属性面板上有Link和Target两项,它们与超链接有关。选中所需的文本,接下来就可以进行链接。可直接在Link后填入要链接到的页面的地址,最好用相对路径地址。也可以点击后面的图标,然后选取要链接到的文件。还有就是用鼠标把本地站点文件列表中的文件直接拖到属性面板上Link中。或者用快捷键F5可打开你定义的本地站点的文件列表,用鼠标点击Point to file,不要松开,拖动至你要链接到的页面即可。   接下来就是对Target进行设置。Target是用来定义超链接被点击时,链接到的页面视窗打开方式。Target后的下拉选框可不选,这时页面就在原窗口中打开。若要在下拉选框中选择,将有四个选项_blank、_parent、_self和_top。_blank是页面新开窗口打开,_self是在原窗口打开。剩下的两种打开方式只在窗框结构中有用, _parent是在父窗口中打开,_top是在整个浏览器窗口中打开。 六、创建映象图 使一个图行的不同部位分别链接到不同的页面,这叫作映象图。在图行属性面板左下方有一项为,用它来完成制作映象图。再其后可填入映象的名称,若不填,则Dreamweaver自动加上一个名字。下面有三个图标,从左到右依次为截取矩形、截取圆形和截取不规则图形。鼠标点击一个合适的图标,可用鼠标选中图行的某个区域。当鼠标拖出的选框和目标不重合时,可使用键盘上的上下左右箭头来调节。     除外,其上有Link、Alt和Target三项,使用方法和普通链接一样,只要把图行被截取的部分看作一个独立的元素即可。可以给每一个图行上截取的区域设置超链接。 七、添加表格 一、添加表格   我们要新建一个表格。点击Insert下Table,或使用点击Objects 面板,也可用快捷键Ctr+Alt+T,就会弹对话框。         其中:   1.表格的行数。   2.表格的列数。   3.表格的宽度。后面的下拉选单有两项,是宽度的单位。Percent是百分比单位,例如在此时Width值为75的情况下,表示表格宽度占到浏览器窗口的75% 。Pixels 是像素单位,在此时Width值为75的情况下,表示表格宽度为75像素(最普遍的电脑屏幕分辨率设置为800*600,即宽800像素,高600像素)。单位一般选择Pixels,若选作Percent,当浏览器窗口大小调整时,表格也会随之调整,有时会影响整体布局。   4.表格边框的宽度。   5.表单元格间隙设置。   6.表单元格内部空白。点击OK按钮,表格添加在页面上了。 对于表格的属性面板在第一课中已经介绍了,这里不在赘述。>> 二、单元格操作   用鼠标点击表格任一单元格,属性面板如下。 其中:   1.表示合并单元格   2.表示拆分单元格该属性面板上半部是文本的属性设置。单元格里可以放入任何页面元素,但关键是如何对单元格进行操作。选中几个表元,点击属性面板上的合并单元格,选中的几个单元格就合并在一起了。或用鼠标选中一个单元格,点击合并单元格,会出现一个对话框(图7.3)。选中Rows表示按行拆分,选中Columns表示按列拆分。Number of Rows的值为拆分的新单元格的数目。                                图7.3   3.H可设置表元的高度。较上的Bg可设置表元的背景图案,Brdr可设置各单独表元的边框颜色。   4.No Wrap:当文本长度超过表元长度时,选择No Wrap,文本将继续向前,表元宽度会随之调整;不选No Wrap,文本将自动换行。   5.Header:若选上Header,文本会变粗。当在单元格中加入图形时,如果图形宽度或高度超过单元格的宽度和高度时,单元格会自动调整以适应加入的图形。设置完后,还可直接用鼠标拖动表格的各边框来调整表格或各行、列的宽度和高度。>> 三、表格转换为层   在Modify下选Layout Mode中的Convert Table to Layers…,或使用快捷键Ctrl+F6,弹出一对话框。 其中:   1.阻止层叠加   2.显示层面板   3.显示删格   4.对齐网格      对下图中的表格进行转换:         转换后如下图:>>       四、导入表格数据   把用Excel等软件处理的数据放到网上,Dreamweaver专门提供了一个转换的功能。先把Excel等软件中将文件另存为文本格式的文件,或在Excel中保存为.csv,然后选择File下的Import中的Import Table Data…,或者选择Insert下Tabular Data,这时都弹出对话框(只是标题不同,前者是Import Table Data,后者是Inset Tabular Data)。 其中:   1.填写需导入的数据文件的地址,或者可点击下面的Browse…按钮选择这个文件。   2.用来向Dreamweaver说明,这个数据文件的各数据间是怎么分隔开的,以供Dreamweaver正确的区分各数据。后面的下拉选框有五个选项——Tab、Comma、Colon、Semicolon、Other。Tab表示是用空格分隔的;Comma表示是用逗号分隔的;Colon表示是用冒号分隔的;Semicolon表示是用分号分隔的;若选中Other,则下拉选框后多出一个文本框,可填入用来分隔数据的符号。   3.导入数据后,生成的表格的宽。若选中Fit to Data,则表格宽度尽量适应原数据文件数据的排列方式。若选中Set,则是自行设置表格的宽度,在后面填入数值,紧跟其后的下拉选框是数值的单位。下拉选框有Pixels和Percent两项,Pixels是像素单位,Percent是百分比单位。   4.可填单元格内空白的大小,单位将是像素单位。   5.可填单元格间的间隙大小,单位将是像素单位。   6.设置生成的表格顶行内容
本文档为【Dreamweaver教程全解】,请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑, 图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
该文档来自用户分享,如有侵权行为请发邮件ishare@vip.sina.com联系网站客服,我们会及时删除。
[版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
下载需要: 免费 已有0 人下载
最新资料
资料动态
专题动态
is_667749
暂无简介~
格式:doc
大小:1MB
软件:Word
页数:85
分类:互联网
上传时间:2011-05-22
浏览量:19