dreamweaver基础知识.docx

上传人:b****8 文档编号:11385835 上传时间:2023-02-28 格式:DOCX 页数:28 大小:1.53MB
下载 相关 举报
dreamweaver基础知识.docx_第1页
第1页 / 共28页
dreamweaver基础知识.docx_第2页
第2页 / 共28页
dreamweaver基础知识.docx_第3页
第3页 / 共28页
dreamweaver基础知识.docx_第4页
第4页 / 共28页
dreamweaver基础知识.docx_第5页
第5页 / 共28页
点击查看更多>>
下载资源
资源描述

dreamweaver基础知识.docx

《dreamweaver基础知识.docx》由会员分享,可在线阅读,更多相关《dreamweaver基础知识.docx(28页珍藏版)》请在冰豆网上搜索。

dreamweaver基础知识.docx

dreamweaver基础知识

第1章Dreamweaver的基础知识

本章内容

•了解Dreamweaver的基本原理

•Dreamweaver是如何设计的

•在Dreamweaver中使用传统的HTML命令

•了解下一代特性

•自动化的Web页创作过程

•用Dreamweaver维护Web站点

Dreamweaver是Macromedia公司推出的一套专业的Web站点开发程序。

Dreamweaver拥有

诸多优点,例如,它是第一个利用最新一代浏览器性能的Web开发程序,并且非常便于开发者

利用诸如层叠样式单(CascadingStyleSheets)和动态HTML等先进特性。

事实上,Dreamweaver是Web开发者为自已量身定做的设计工具。

从设计的依据到开发者

使用的专业程度看,Dreamweaver能够加速站点建设,并使站点的维护简单有效。

通过本章的

讲述,你可以了解到这套程序的基本原理,充分感受Dreamweaver是如何把传统的HTML和前

沿技术结合起来的。

当然,你还可以学习到一些Dreamweaver的先进特性并用于自己的Web站

点管理。

1.1Dreamweaver的真实世界

Dreamweaver是一套与现实世界紧密相关的程序。

举例来说,Dreamweaver认识到不同种类的浏览器之间存在着不兼容的命令,就通过开发交叉浏览器可兼容代码来解决这个问题。

Dreamweaver甚至包括了不同浏览器的HTML验证功能,这样你就可以看到现有的或新的代码

如何工作于特定的浏览器。

Dreamweaver3把现实世界的概念进一步扩展到工作区中。

诸如Dream模板之类的附件使

得大型Web站点的创建和维护更加简洁有效。

Dreamweaver从层到表格(layers-to-tables)的先进

特性使得在设计阶段快速定位内容成为可能,同时,在站点发布后,还能保证页面与落后的浏

第一部分Dreamweaver概述览器相兼容。

Dreamweaver的命令性能可以自动完成最困难的Web创建。

1.1.1完整的可视化文本编辑器

在万维网的早期,大多数开发者利用简单的文本编辑器如Notepad和SimpleText手工编写Web

页。

第二代Web编写工具引入了可视化设计的概念,并将“所见即所得”(WhatYouSeeIsWhat

YouGet,WYSIWYG)编辑器带入市场。

这些产品简化了页面布局,但仍缺乏代码的完整性。

业的Web开发者们发现,即使使用最尖端的“所见即所得”编辑器,他们仍需手工编写Web页。

面对这种现实,Dreamweaver把一个极好的可视化编辑器和许多文本编辑器集成在一起。

可以使用Dreamweaver内置的HTML检查器(Inspector),也可以使用专门的外部编辑器。

如图1-1

所示,这是Dreamweaver的可视化编辑器和文本编辑器共同工作的情形。

可视化编辑器中的任何

变化都会立即反映到文本编辑器中,反之亦然。

Dreamweaver允许你使用任何喜欢的文本编辑器,

包括MicrosoftWindows开发者们常用的HomeSite和Macintosh开发者们常用的BBEdit试用版。

1.1.2往返HTML

大多数Web编写程序会改变所有通过其系统的代码—如插入回车、移动缩进、添加

标识、大写命令等等。

Dreamweaver的编程人员理解和尊重Web开发者使用自己特定的

代码样式。

进一步讲,利用往返HTML技术可以确保不重写你的原始代码,并且你仍可在可视

化编辑器和任何HTML编辑器之间来回跳转。

为了使可视化设计与基本代码结合得更紧密,Dreamweaver3中引入了快速

标识编辑器(QuickTagEditor)。

通常,Web设计者需要频繁地对HTML代码进行一些细微改动,诸如修改一个属性或添加一个标识。

快速标识编辑器看起来像一

个位于文档窗口之上的浮动窗口,利用它进行代码的细调十分快捷简单。

1.1.3Web站点维护工具

Dreamweaver的开发者们意识到创建站点仅是网站管理员工作的一部分,站点维护才是一

项持续、费时的琐碎工作。

为了使站点的维护简单化,Dreamweaver提供了一组站点管理工具,

包括一个重复元素库以及可以简化组更新的文件锁定性能。

在Dreamweaver3中,站点的维护比以往更容易、更直观。

利用站点地图(SiteMap),能够

直接浏览整个Web站点的结构,并可以打开要修改的文件。

当文件从一个目录移动到另一个目

录后,你可以自已动手更正链接(Link),也可以让Dreamweaver自动更新链接。

此外,你不仅

可以利用重复元素库向页面中插入元素,还可以通过定义模板使整个Web站点具有统一的外观

—只需改动模板就可以更新站点中的所有页面。

1.2Dreamweaver界面

创建Web页时,网站管理员总是不断地重复两件事情:

插入元素(文本、图像或层)和修改元

素。

在这个过程中,Dreamweaver的优越性是显而易见的。

Dreamweaver的工作区将一系列窗口、

选项板和检查器结合起来,使整个创建过程更富流动性,从而提高网站管理员的工作效率。

1.2.1简易的文本输入

尽管万维网的魅力主要来自于诸如图像和声音这样的多媒体元素,但Web页毕竟主要是一

个基于文本的媒体。

基于这一点,Dreamweaver把文本光标设定为缺省工具。

需要添加文本时,

只需在Dreamweaver的主要工作区—文档窗口中单击,然后开始输入就行了。

如图1-2所示,

利用文本属性检查器(TextPropertyInspector)可以改变文本的大小、字体、位置或颜色。

1.2.2一步到位的对象修改

除文本外的其他Web页元素,你都可以在对象选项板(ObjectPalette)中选择。

在Web页中添加图片非常容易,只需在对象选项板中单击插入图像(InsertImage)按钮,Dreamwever会请你指

定要插入的图像文件,随后图像就会出现在当前光标位置上。

图像出现在屏幕上之后,你可以

选定它,然后使用相应的属性检查器(PropertyInspector)对其进行修改。

这种方法对任何其他插

入的元素都是有效的—从水平标尺到Shockwave影片。

1.2.3完全用户化的环境

Dreamweaver允许用户根据需要自定义工作区。

简便的启动档(Launcher)可以打开、关闭各

式各样的窗口、选项板及检查器,这些窗口、选项板及检查器可以拖动到屏幕的任何位置。

单独看看正在编辑的Web页吗?

你可以按下功能按钮隐藏所有工具窗口,再按一下功能按钮它

们会重新显现。

Dreamweaver的用户化能力具有很强的扩展性。

如果你发现总是需要反复插入某种元素,

比如QuickTime视频或者.wav格式的声音文件,可以把这些元素添加到对象选项板中。

Dreamweaver的对象选项板甚至允许你添加一些特定的元素,比如Home按钮。

实际上,只要你

喜欢,你可以把整个对象目录添加到对象选项板中。

此外,为方便用户,Dreamweaver3提供

了开放式的菜单结构,你不仅可以更改快捷键,还可以添加自定义菜单关于自定义对象选项板,可参见第18章;关于更改菜单系统,可参见第21

章。

1.2.4简单的选择过程

与绝大多数流行的平面设计软件一样,在Dreamweaver中,不论你想修改哪种对象,都必

须先选择它们。

最常见的选择过程是这样的,单击一个对象使其呈高亮显示,或是单击并拖动

鼠标以选择一段文本。

Dreamweaver增加了一种名为标识选择器(TagSelector)的选择方式,单

击正在编辑的Web页的任意位置,然后查看Dreamweaver的状态栏,相应的HTML标识就会出

现在状态栏的左边。

在图1-3所示的例子中,标识选择器显示出如下HTML标识:

选择文本

在标识选择器中单击一个标识,当前页面上对应的元素就被选择并等待修改。

标识选择器

可以节省用户很多时间,在后面的章节中我们会详细介绍如何在不同的环境使用标识选择器。

1.2.5增强的页面布局选项

与众多的其他可视化HTML编辑器相比,Dreamweaver工作起来更像一个桌面出版程序。

现今的浏览器都支持文本和图像在Web页面上的定位—这一功能被称为绝对定位(absolute

positioning)。

为了充分利用这个新功能,Dreamweaver提供了标尺和网格。

你可以定义自己的

计量类型(英尺、像素或厘米),也可以定义网格线的位置和外观,甚至可以让对象按网格对齐。

交叉参考关于绝对定位,请参见第28章。

1.2.6活动内容的预览

交叉参考要想使浏览器能够显示除标准格式图像之外的其他对象,就需要相应的插件程序(Plug-in)。

插件程序扩展了大多数浏览器的功能,使之能够显示动画、播放音乐甚至浏览3D世界。

Dreamweaver是最早支持插件功能的Web编写工具之一。

在其他系统中,如果你使用了插件程

序,则必须在浏览器中预览Web页的活动内容。

利用Dreamweaver的活动内容特性,可以插放诸如MacromediaFlash、Shockwave及其他插

件。

然而,这一特性的扩展功能还不止这些。

由于许多Web页是使用服务器端引用编写的,而

Dreamweaver可转换许多服务器端信息,因此在设计Web页时,包括服务器端引用在内的所有

内容都可以显现出来。

1.2.7增强的查找及替换功能

Web是一种富于变化的媒体,Web页面经常发生并且易于变化,因此修正和添加是常有的

事。

Web设计者们需要经常更新或替换现有页面,或者是一系列页面。

Dreamweaver增强的查

找及替换功能是进行修改的真正有力的工具。

在文档窗口进行查找和替换操作的同时,HTML检查器也会相应地变更代码和常规内容。

不仅如此,查找和替换功能还可对当前页面、工作站点、选择的页面甚至包括多个页面的整个

文件夹进行更改。

同时,通过保存和检索复杂的查找和替换查询,进一步使你的工作自动化。

1.3最新的HTML标准

几乎所有的Web页都是用HTML(HyperTextMarkupLanguage,超文本标识语言)创建的。

这种编程语言其实就是一套用于修改文本文件的标识,由一个名叫万维网联盟(WorldWide

WebConsortium)(http:

//www.w3.org)的组织对这些标识进行了标准化处理。

HTML的每一个新

版本都增加了一些增强的命令和特性,最新版本HTML4能被目前绝大多数的浏览器识别。

你在可视化编辑器中插入或修改元素时,Dreamweaver就会自动替你编写清晰流畅、与现实浏

览器兼容的HTML4代码。

1.3.1简单易懂的文本和图形支持

文本是任何Web页的基本组成结构,Dreamweaver可帮助你快速设置文本格式。

不论是直

接输入的文本还是从其他程序中粘贴的文本,都可以对其进行格式设置,既可以使用一般的HTML格式,如H1到H6标题及相关的字号,也可以使用其他字体和字号。

第9章会告诉你如何设置文本格式。

利用Dreamweaver的附加文本支持,可在Web页中添加编号和项目符号列表。

文本属性检

查器(TextPropertyInspector)提供了用于各种列表和对齐格式控制的按钮。

一些元素,包括列

表,提供了扩展选项。

在Dreamweaver中,单击属性检查器的扩展箭头可打开附加的扩展控制

选项。

图形的处理同样很容易。

选择图像或其占位符,激活图像属性检查器(ImageProperty

Inspector),就可以修改诸如图像来源、图像宽度和高度、对齐方式等属性。

是不是想将图像润

色一番?

好办,单击Edit按钮将需要润色的图像送到喜爱的图形处理程序中就可以了。

关于添加和修改图形,请参见第10章。

1.3.2增强的表格性能

交叉参考

交叉参考Dreamweaver的其他一些先进特性同样非常简单易懂。

以表格来说,它是目前Web页中的

关键元素。

在Dreamweaver中,用户可对表格的功能进行全面的控制。

像调整表格的行与列这

样的操作在Dreamweaver中只需单击并拖动就可以了,而在以前则需要通过繁琐的手工代码来

实现。

同样,你只需单击一个按钮就可以删除表格中的宽度和高度数值。

如图1-4所示是表格

检查器(TablePropertyInspector),它集中了Dreamweaver的各项表格功能。

Dreamweaver的表格处理非常灵活。

你可以对任何选定的单元格、行或列应用字体。

通过

标准命令,可自动设置表格格式或对表格中的数据进行排序。

1.3.3简易的表单输入

表单(Form)是Web页数据交换的基本工具,在Dreamweaver中使用表单和使用表格一样容易。

切换到对象选项板中的表单面板(Formspanel)上,你可以插入各种表单元素,如文本框、

选项按钮、复选框、弹出式菜单甚至滚动列表。

使用验证表单(ValidateForm)功能,你可以指

定所需域并进行检查,以确保信息的正确输入。

1.3.4单击并拖动框架设置

利用框架技术,可以使不同的Web页显示在同一屏幕上。

框架通常被认为是最难掌握的

HTML技术之一。

在Dreamweaver中,只需单击并拖动即可创建框架的轮廓。

在设置完框架结

构后,打开如图1-5所示的框架检查器(FrameInspector),选择要修改的框架并使用属性检查器

进行修改。

不论你使用了多少个文件,Dreamweaver会写入必要的代码将所有HTML文件链接

进一个框架集中。

在Dreamweaver3中,通过对象选项板中的新框架面板,框架的创建过程可

被大大简化。

如果你想了解如何创建基于框架的Web页,可参见第16章。

1.3.5多媒体增强

Dreamweaver允许添加任何类型的多媒体扩展、插件程序、applet或控件,你只需在对象选

项板上单击相应的按钮然后利用属性检查器进行修改即可。

Dreamweaver对Macromedia公司的

两个多媒体元素Shockwave影片和Flash文件进行了专门的优化。

在插入这两类对象时,

Dreamweaver会自动写入必要的HTML代码以确保尽可能多的浏览器能够接受它们,并且你也

可以编辑它们的属性。

Macromedia公司已经同许多前沿的多媒体公司建立了合作关系,如RealNetworks、IBM和

Beatnik等。

Dreamweaver全面支持这些合作伙伴的成果,通过自定义对象技术,你可以将复杂

的图像、音频、演示文稿简单地插入并显示在Web页中。

交叉参考1.4下一代特性

Dreamweaver是最早应用4.0浏览器性能的Web编辑工具之一。

NetscapeCommunicator4.+和

MicrosoftInternetExplorer4.+都包括了DHTML(DynamicHTML,动态HTML)技术,并不同程度

地依赖层叠样式单(CascadingStyleSheet,CSS)标准,同时还支持绝对定位和相对定位。

Dreamweaver考虑到了各种可能性,为Web开发者提供了一个良好的应用这些浏览器性能的接口。

1.4.13D层

独有的动态HTML特性使得Dreamweaver被誉为“第一代3DWeb创作工具”。

在动态

HTML出现之前,Web页一直处于二维平面上,只能并排放置一些文本和图像。

Dreamweaver

支持动态HTML层控制,也就是说,一些对象可以放置于其他对象的前面或后面。

层可以包含

文本、图形、链接、控件,你甚至可以在一个层中嵌套另一个层。

单击对象选项板上的Layer(层)按钮,就可以创建层。

一旦层创建好以后,单击并拖动选择

手柄,层就可以被定位到页面上的任何地方。

与其他Dreamweaver对象一样,可以通过属性检

查器对层进行修改。

若想了解关于使用动态HTML的详细信息,可参见第26章。

下载

交叉参考1.4.2动画对象

层中的对象不仅在其创建时能被置于Web页的任意位置,而且,在查看Web页时它们还能

移动。

由于Dreamweaver具有这种功能再加上它的时间线检查器(TimelineInspector),

Dreamweaver可称得上是一个4D(四维)Web创作工具。

时间线检查器如图1-6所示,这是

Macromedia公司一直致力于开发世界级多媒体制作程序过程中的杰作。

通过时间线,你可以对

层的位置、大小、3D布局以及连续帧的视觉效果进行控制。

在Dreamweaver中,你无需再在时

间线上绘制层的路径,只需使用录制层的路径(RecordPathofLayer)这一特性就可以了。

1.4.3动态样式更新

Dreamweaver完全支持由WorldWideWebConsortium所通过的层叠样式单(CSS)规范,CSS

可使Web设计者更加灵活地控制Web页中的绝大多数元素。

在Dreamweaver中使用CSS特性就像

在字处理程序中使用样式一样简单。

例如,你可以使所有的

标识都变为蓝色、斜体和小

写。

当你想改变站点的配色方案时,可以将所有的

标识变为红色,而且只需使用一个命

令就可以将这一改变应用于整个Web站点。

Dreamweaver允许用户对包括类型、背景、块、框、

边界、列表和位置在内的各种样式进行控制。

Dreamweaver允许用户不论在线或离线都可以更改样式。

通过将CSS变化和用户驱动事件

(如移动鼠标)联系起来,文本可以被高亮显示或取消高亮显示,屏幕区域可以照亮,同时图片

甚至可以变得活动起来。

而这一切并不需要反复访问服务器或者进行大量的文件下载。

关于层叠样式单(CSS)的详细信息,请参见第27章。

1.4.4JavaScript行为

随着JavaScript技术的发展,Dreamweaver将JavaScript的强大功能和简单易用的拖放(Drag-

and-drop)界面结合了起来。

所谓行为(behavior)被定义为事件和动作的组合,即当Web页的浏览

者做了某件事情后,随之会有另外的事情发生,这个过程被称为行为。

由于基本上不需要编程,

所以行为得到了广泛的应用。

交叉参考行为是基于JavaScript的,这一点很重要,因为目前的各种浏览器对JavaScript的支持程度不

同。

Dreamweaver简化了对特定浏览器中JavaScript命令适用性的验证任务,你只需简单地选择

希望控制动作的Web页元素,同时从启动档(Launcher)中打开行为检查器(BehaviorInspector)。

图1-7所示,你可以指定一个JavaScript命令能够工作于所有浏览器、浏览器的子集或某个特定浏

览器。

接下来,你可以从一个所有可用动作的列表中选择动作,例如跳转到某个URL、播放声

音、弹出消息或者启动动画。

你可以指定多个动作,甚至还可以决定这些动作在什么时候发生。

关于JavaScript行为的更详细的信息,请参见第19章。

1.4.5往返XML

一种新型的标识语言使众多Web设计者、Intranet开发者和相关公司振奋不已,这就是

XML。

XML(ExtensibleMarkupLanguage,扩展标识语言)由于具有更深层次的可自定义属性而

引发了人们的浓厚兴趣。

使用XML时,标识被用于描述信息的用途而不是外观。

Dreamweaver能够导入和导出XML标识,而不管它是如何被定义的。

随着XML的流行,

Dreamweaver做好了处理这种工作的准备。

1.5程序的可扩展性

Dreamweaver最主要的长处在于它的可扩展性。

事实上,无论是设计还是运行过程中,没

有哪两个Web站点是相似的。

由于最终的结果千变万化,因此Web创作工具越灵活,越便于设

计者进行更大范围的开发。

随着可扩展性的引入,Dreamweaver利用非常易于自定义的对象和

行为开辟了一片新天地。

如今,Dreamweaver凭借自定义命令、浮动器、转换器和属性检查器

巩固着自己的领导地位。

甚至,用户可以通过C语言级扩展(C-LevelExtensibility)选项对

Dreamweaver的最底层进行扩展。

1.5.1对象和行为

交叉参考用Dreamweaver的用语来

展开阅读全文
相关搜索

当前位置:首页 > 高等教育 > 法学

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1