dreamweaver基础知识
第1章Dreamweaver的基础知识
本章内容
?了解D r e a m w e a v e r的基本原理
?Dreamweaver是如何设计的
?在D r e a m w e a v e r中使用传统的H T M L命令
?了解下一代特性
?自动化的We b页创作过程
?用D r e a m w e a v e r维护We b站点
D r e a m w e a v e r是M a c r o m e d i a公司推出的一套专业的We b站点开发程序。D r e a m w e a v e r拥有
诸多优点，例如，它是第一个利用最新一代浏览器性能的We b开发程序，并且非常便于开发者
利用诸如层叠样式单(Cascading Style Sheets)和动态H T M L等先进特性。
事实上，D r e a m w e a v e r是We b开发者为自已量身定做的设计工具。从设计的依据到开发者
使用的专业程度看，D r e a m w e a v e r能够加速站点建设，并使站点的维护简单有效。通过本章的
讲述，你可以了解到这套程序的基本原理，充分感受 D r e a m w e a v e r是如何把传统的H T M L和前
沿技术结合起来的。当然，你还可以学习到一些 D r e a m w e a v e r的先进特性并用于自己的We b站
点管理。
1.1 Dreamweaver的真实世界
D r e a m w e a v e r是一套与现实世界紧密相关的程序。举例来说， D r e a m w e a v e r认识到不同种类的浏览器之间存在着不兼容的命令，就通过开发交叉浏览器可兼容代码来解决这个问题。
D r e a m w e a v e r甚至包括了不同浏览器的H T M L验证功能，这样你就可以看到现有的或新的代码
如何工作于特定的浏览器。
Dreamweaver 3把现实世界的概念进一步扩展到工作区中。诸如D r e a m模板之类的附件使
得大型We b站点的创建和维护更加简洁有效。D r e a m w e a v e r从层到表格( l a y e r s - t o - t a b l e s)的先进
特性使得在设计阶段快速定位内容成为可能，同时，在站点发布后，还能保证页面与落后的浏
第一部分Dreamweaver概述览器相兼容。D r e a m w e a v e r的命令性能可以自动完成最困难的We b创建。
1.1.1 完整的可视化文本编辑器
在万维网的早期，大多数开发者利用简单的文本编辑器如N o t e p a d和S i m p l e Te x t手工编写We b
页。第二代We b编写工具引入了可视化设计的概念，并将“所见即所得”(What Y ou See Is What
Y ou Get，W Y S I W Y G)编辑器带入市场。这些产品简化了页面布局，但仍缺乏代码的完整性。专
业的We b开发者们发现，即使使用最尖端的“所见即所得”编辑器，他们仍需手工编写We b页。
面对这种现实，D r e a m w e a v e r把一个极好的可视化编辑器和许多文本编辑器集成在一起。你
可以使用D r e a m w e a v e r内置的H T M L检查器(I n s p e c t o r)，也可以使用专门的外部编辑器。如图1 - 1
所示，这是D r e a m w e a v e r的可视化编辑器和文本编辑器共同工作的情形。可视化编辑器中的任何
变化都会立即反映到文本编辑器中，反之亦然。Dreamweaver允许你使用任何喜欢的文本编辑器，
包括Microsoft Windows开发者们常用的HomeSite和Mac intosh开发者们常用的BBEdit试用版。
1.1.2 往返HTML
大多数We b编写程序会改变所有通过其系统的代码—如插入回车、移动缩进、添加
< m e t a >标识、大写命令等等。D r e a m w e a v e r的编程人员理解和尊重We b开发者使用自己特定的
代码样式。进一步讲，利用往返H T M L技术可以确保不重写你的原始代码，并且你仍可在可视
化编辑器和任何H T M L编辑器之间来回跳转。
为了使可视化设计与基本代码结合得更紧密，Dreamweaver 3中引入了快速
标识编辑器(Quick Tag Editor)。通常，We b设计者需要频繁地对H T M L代码进行一些细微改动，诸如修改一个属性或添加一个标识。快速标识编辑器看起来像一
个位于文档窗口之上的浮动窗口，利用它进行代码的细调十分快捷简单。
1.1.3 Web站点维护工具
D r e a m w e a v e r的开发者们意识到创建站点仅是网站管理员工作的一部分，站点维护才是一
项持续、费时的琐碎工作。为了使站点的维护简单化，D r e a m w e a v e r提供了一组站点管理工具，
包括一个重复元素库以及可以简化组更新的文件锁定性能。
在Dreamweaver 3中，站点的维护比以往更容易、更直观。利用站点地图( Site Map)，能够直接浏览整个We b站点的结构，并可以打开要修改的文件。当文件从一个目录移动到另一个目
录后，你可以自已动手更正链接( L i n k)，也可以让D r e a m w e a v e r自动更新链接。此外，你不仅
可以利用重复元素库向页面中插入元素，还可以通过定义模板使整个We b站点具有统一的外观
—只需改动模板就可以更新站点中的所有页面。
1.2 Dreamweaver界面
创建We b页时，网站管理员总是不断地重复两件事情：插入元素(文本、图像或层)和修改元
素。在这个过程中，D r e a m w e a v e r的优越性是显而易见的。D r e a m w e a v e r的工作区将一系列窗口、
选项板和检查器结合起来，使整个创建过程更富流动性，从而提高网站管理员的工作效率。
1.2.1 简易的文本输入
尽管万维网的魅力主要来自于诸如图像和声音这样的多媒体元素，但We b页毕竟主要是一个基于文本的媒体。基于这一点，D r e a m w e a v e r把文本光标设定为缺省工具。需要添加文本时，
只需在D r e a m w e a v e r的主要工作区—文档窗口中单击，然后开始输入就行了。如图1 - 2所示，
利用文本属性检查器(Text Property Inspector)可以改变文本的大小、字体、位置或颜色。
1.2.2 一步到位的对象修改
除文本外的其他We b页元素，你都可以在对象选项板(Object Palette)中选择。在We b页中添加图片非常容易，只需在对象选项板中单击插入图像( Insert Image)按钮，D r e a m w e v e r会请你指
定要插入的图像文件，随后图像就会出现在当前光标位置上。图像出现在屏幕上之后，你可以
选定它，然后使用相应的属性检查器( Property Inspector)对其进行修改。这种方法对任何其他插
入的元素都是有效的—从水平标尺到Shockwave 影片。
1.2.3 完全用户化的环境
D r e a m w e a v e r允许用户根据需要自定义工作区。简便的启动档( L a u n c h e r)可以打
开、关闭各
式各样的窗口、选项板及检查器，这些窗口、选项板及检查器可以拖动到屏幕的任何位置。想
单独看看正在编辑的We b页吗？你可以按下功能按钮隐藏所有工具窗口，再按一下功能按钮它
们会重新显现。
D r e a m w e a v e r的用户化能力具有很强的扩展性。如果你发现总是需要反复插入某种元素，
比如Q u i c k Ti m e视频或者. w a v格式的声音文件，可以把这些元素添加到对象选项板中。
D r e a m w e a v e r的对象选项板甚至允许你添加一些特定的元素，比如H o m e按钮。实际上，只要你
喜欢，你可以把整个对象目录添加到对象选项板中。此外，为方便用户，Dreamweaver 3提供
了开放式的菜单结构，你不仅可以更改快捷键，还可以添加自定义菜单关于自定义对象选项板，可参见第1 8章；关于更改菜单系统，可参见第2 1
章。1.2.4 简单的选择过程
与绝大多数流行的平面设计软件一样，在 D r e a m w e a v e r中，不论你想修改哪种对象，都必
须先选择它们。最常见的选择过程是这样的，单击一个对象使其呈高亮显示，或是单击并拖动
鼠标以选择一段文本。D r e a m w e a v e r增加了一种名为标识选择器( Tag Selector)的选择方式，单
击正在编辑的We b页的任意位置，然后查看D r e a m w e a v e r的状态栏，相应的H T M L 标识就会出
现在状态栏的左边。
在图1 - 3所示的例子中，标识选择器显示出如下H T M L标识：
| 选择文本 在标识选择器中单击一个标识，当前页面上对应的元素就被选择并等待修改。标识选择器可以节省用户很多时间，在后面的章节中我们会详细介绍如何在不同的环境使用标识选择器。 1.2.5 增强的页面布局选项 与众多的其他可视化H T M L编辑器相比，D r e a m w e a v e r工作起来更像一个桌面出版程序。 现今的浏览器都支持文本和图像在We b页面上的定位—这一功能被称为绝对定位( a b s o l u t e p o s i t i o n i n g)。为了充分利用这个新功能，D r e a m w e a v e r提供了标尺和网格。你可以定义自己的 计量类型(英尺、像素或厘米)，也可以定义网格线的位置和外观，甚至可以让对象按网格对齐。 交叉参考关于绝对定位，请参见第28章。 1.2.6 活动内容的预览 交叉参考要想使浏览器能够显示除标准格式图像之外的其他对象，就需要相应的插件程序( P l u g - i n)。 插件程序扩展了大多数浏览器的功能，使之能够显示动画、播放音乐甚至浏览 3 D世界。 D r e a m w e a v e r是最早支持插件功能的We b编写工具之一。在其他系统中，如果你使用了插件程 序，则必须在浏览器中预览We b页的活动内容。 利用D r e a m w e a v e r的活动内容特性，可以插放诸如Macromedia Flash、S h o c k w a v e 及其他插 件。然而，这一特性的扩展功能还不止这些。由于许多We b页是使用服务器端引用编写的，而 D r e a m w e a v e r可转换许多服务器端信息，因此在设计We b页时，包括服务器端引用在内的所有 内容都可以显现出来。 1.2.7 增强的查找及替换功能 We b是一种富于变化的媒体，We b页面经常发生并且易于变化，因此修正和添加是常有的事。We b设计者们需要经常更新或替换现有页面，或者是一系列页面。D r e a m w e a v e r 增强的查 找及替换功能是进行修改的真正有力的工具。在文档窗口进行查找和替换操作的同时，H T M L检查器也会相应地变更代码和常规内容。 不仅如此，查找和替换功能还可对当前页面、工作站点、选择的页面甚至包括多个页面的整个 文件夹进行更改。同时，通过保存和检索复杂的查找和替换查询，进一步使你的工作自动化。 1.3 最新的HTML标准 几乎所有的We b页都是用H T M L(H y p e r Text Markup Language，超文本标识语言)创建的。 这种编程语言其实就是一套用于修改文本文件的标识，由一个名叫万维网联盟( World Wi d e Web Consortium) (h t t p：/ / w w w. w 3 . o rg)的组织对这些标识进行了标准化处理。H T M L 的每一个新 版本都增加了一些增强的命令和特性，最新版本HTML 4能被目前绝大多数的浏览器识别。当 你在可视化编辑器中插入或修改元素时， D r e a m w e a v e r就会自动替你编写清晰流畅、与现实浏 览器兼容的HTML 4代码。 1.3.1 简单易懂的文本和图形支持 文本是任何We b页的基本组成结构，D r e a m w e a v e r可帮助你快速设置文本格式。不论是直 接输入的文本还是从其他程序中粘贴的文本，都可以对其进行格式设置，既可以使用一般的H T M L格式，如H 1到H 6标题及相关的字号，也可以使用其他字体和字号。 第9章会告诉你如何设置文本格式。 利用D r e a m w e a v e r的附加文本支持，可在We b页中添加编号和项目符号列表。文本属性检 查器(Text Property Inspector)提供了用于各种列表和对齐格式控制的按钮。一些元素，包括列 表，提供了扩展选项。在D r e a m w e a v e r中，单击属性检查器的扩展箭头可打开附加的扩展控制 选项。 图形的处理同样很容易。选择图像或其占位符，激活图像属性检查器( Image Property I n s p e c t o r)，就可以修改诸如图像来源、图像宽度和高度、对齐方式等属性。是不是想将图像润 色一番？好办，单击E d i t按钮将需要润色的图像送到喜爱的图形处理程序中就可以了。关于添加和修改图形，请参见第10章。 1.3.2 增强的表格性能 交叉参考 交叉参考D r e a m w e a v e r的其他一些先进特性同样非常简单易懂。以表格来说，它是目前We b页中的 关键元素。在D r e a m w e a v e r中，用户可对表格的功能进行全面的控制。像调整表格的行与列这 样的操作在D r e a m w e a v e r中只需单击并拖动就可以了，而在以前则需要通过繁琐的手工代码来 实现。同样，你只需单击一个按钮就可以删除表格中的宽度和高度数值。如图 1 - 4所示是表格 检查器(Table Property Inspector)，它集中了D r e a m w e a v e r的各项表格功能。 D r e a m w e a v e r的表格处理非常灵活。你可以对任何选定的单元格、行或列应用字体。通过 标准命令，可自动设置表格格式或对表格中的数据进行排序。 1.3.3 简易的表单输入 表单(F o r m)是We b页数据交换的基本工具，在D r e a m w e a v e r中使用表单和使用表格一样容易。切换到对象选项板中的表单面板( Forms panel)上，你可以插入各种表单元素，如文本框、 选项按钮、复选框、弹出式菜单甚至滚动列表。使用验证表单( V alidate Form)功能，你可以指 定所需域并进行检查，以确保信息的正确输入。 1.3.4 单击并拖动框架设置 利用框架技术，可以使不同的We b页显示在同一屏幕上。框架通常被认为是最难掌握的 H T M L技术之一。在D r e a m w e a v e r中，只需单击并拖动即可创建框架的轮廓。在设置完框架结 构后，打开如图1 - 5所示的框架检查器(Frame Inspector)，选择要修改的框架并使用属性检查器 进行修改。不论你使用了多少个文件，D r e a m w e a v e r会写入必要的代码将所有H T M L文件链接 进一个框架集中。在Dreamweaver 3中，通过对象选项板中的新框架面板，框架的创建过程可 被大大简化。 如果你想了解如何创建基于框架的Web页，可参见第16章。 1.3.5 多媒体增强 D r e a m w e a v e r允许添加任何类型的多媒体扩展、插件程序、a p p l e t或控件，你只需在对象选 项板上单击相应的按钮然后利用属性检查器进行修改即可。D r e a m w e a v e r对M a c r o m e d i a公司的 两个多媒体元素S h o c k w a v e影片和F l a s h文件进行了专门的优化。在插入这两类对象时， D r e a m w e a v e r会自动写入必要的H T M L代码以确保尽可能多的浏览器能够接受它们，并且你也 可以编辑它们的属性。 M a c r o m e d i a公司已经同许多前沿的多媒体公司建立了合作关系，如R e a l N e t w o r k s、I B M和 B e a t n i k等。D r e a m w e a v e r全面支持这些合作伙伴的成果，通过自定义对象技术，你可以将复杂 的图像、音频、演示文稿简单地插入并显示在We b页中。 交叉参考1.4 下一代特性 D r e a m w e a v e r是最早应用4 . 0浏览器性能的We b编辑工具之一。Netscape Communicator 4.＋和 Microsoft Internet Explorer 4.＋都包括了D H T M L(Dynamic HTML，动态H T M L)技术，并不同程度 地依赖层叠样式单( Cascading Style Sheet，C S S)标准，同时还支持绝对定位和相对定位。 D r e a m w e a v e r考虑到了各种可能性，为We b开发者提供了一个良好的应用这些浏览器性能的接口。 1.4.1 3D层 独有的动态H T M L特性使得D r e a m w e a v e r被誉为“第一代3D We b创作工具”。在动态 H T M L出现之前，We b页一直处于二维平面上，只能并排放置一些文本和图像。D r e a m w e a v e r 支持动态H T M L层控制，也就是说，一些对象可以放置于其他对象的前面或后面。层可以包含 文本、图形、链接、控件，你甚至可以在一个层中嵌套另一个层。 单击对象选项板上的L a y e r(层)按钮，就可以创建层。一旦层创建好以后，单击并拖动选择 手柄，层就可以被定位到页面上的任何地方。与其他D r e a m w e a v e r对象一样，可以通过属性检 查器对层进行修改。 若想了解关于使用动态HTML的详细信息，可参见第26章。 下载 交叉参考1.4.2 动画对象 层中的对象不仅在其创建时能被置于We b页的任意位置，而且，在查看We b页时它们还能 移动。由于 D r e a m w e a v e r具有这种功能再加上它的时间线检查器( Timeline Inspector )，D r e a m w e a v e r可称得上是一个4 D(四维)We b创作工具。时间线检查器如图1 - 6所示，这是 M a c r o m e d i a公司一直致力于开发世界级多媒体制作程序过程中的杰作。通过时间线，你可以对 层的位置、大小、3 D布局以及连续帧的视觉效果进行控制。在D r e a m w e a v e r中，你无需再在时 间线上绘制层的路径，只需使用录制层的路径( Record Path of Layer)这一特性就可以了。 1.4.3 动态样式更新 D r e a m w e a v e r完全支持由World Wide Web Consortium所通过的层叠样式单(C S S)规范，C S S 可使We b设计者更加灵活地控制We b页中的绝大多数元素。在D r e a m w e a v e r中使用C S S特性就像 在字处理程序中使用样式一样简单。例如，你可以使所有的< h 1 >标识都变为蓝色、斜体和小 写。当你想改变站点的配色方案时，可以将所有的< h 1 >标识变为红色，而且只需使用一个命 令就可以将这一改变应用于整个We b站点。D r e a m w e a v e r允许用户对包括类型、背景、块、框、 边界、列表和位置在内的各种样式进行控制。 D r e a m w e a v e r允许用户不论在线或离线都可以更改样式。通过将C S S变化和用户驱动事件 (如移动鼠标)联系起来，文本可以被高亮显示或取消高亮显示，屏幕区域可以照亮，同时图片 甚至可以变得活动起来。而这一切并不需要反复访问服务器或者进行大量的文件下载。 关于层叠样式单(CSS)的详细信息，请参见第27章。 1.4.4 JavaScript行为 随着J a v a S c r i p t技术的发展，D r e a m w e a v e r将J a v a S c r i p t的强大功能和简单易用的拖放(D r a g - a n d - d r o p)界面结合了起来。所谓行为( b e h a v i o r)被定义为事件和动作的组合，即当We b页的浏览 者做了某件事情后，随之会有另外的事情发生，这个过程被称为行为。由于基本上不需要编程， 所以行为得到了广泛的应用。 交叉参考行为是基于J a v a S c r i p t的，这一点很重要，因为目前的各种浏览器对J a v a S c r i p t的支持程度不 同。D r e a m w e a v e r简化了对特定浏览器中J a v a S c r i p t命令适用性的验证任务，你 只需简单地选择 希望控制动作的We b页元素，同时从启动档(L a u n c h e r)中打开行为检查器(Behavior Inspector)。如 图1 - 7所示，你可以指定一个J a v a S c r i p t命令能够工作于所有浏览器、浏览器的子集或某个特定浏 览器。接下来，你可以从一个所有可用动作的列表中选择动作，例如跳转到某个U R L、播放声 音、弹出消息或者启动动画。你可以指定多个动作，甚至还可以决定这些动作在什么时候发生。 关于JavaScript 行为的更详细的信息，请参见第19章。 1.4.5 往返XML 一种新型的标识语言使众多We b设计者、I n t r a n e t开发者和相关公司振奋不已，这就是X M L。X M L(Extensible Markup Language，扩展标识语言)由于具有更深层次的可自定义属性而 引发了人们的浓厚兴趣。使用X M L时，标识被用于描述信息的用途而不是外观。 D r e a m w e a v e r能够导入和导出X M L标识，而不管它是如何被定义的。随着X M L 的流行， D r e a m w e a v e r做好了处理这种工作的准备。 1.5 程序的可扩展性 D r e a m w e a v e r最主要的长处在于它的可扩展性。事实上，无论是设计还是运行过程中，没 有哪两个We b站点是相似的。由于最终的结果千变万化，因此We b创作工具越灵活，越便于设 计者进行更大范围的开发。随着可扩展性的引入，D r e a m w e a v e r利用非常易于自定义的对象和 行为开辟了一片新天地。如今，D r e a m w e a v e r凭借自定义命令、浮动器、转换器和属性检查器 巩固着自己的领导地位。甚至，用户可以通过C语言级扩展( C-Level Extensibility )选项对 D r e a m w e a v e r的最底层进行扩展。 1.5.1 对象和行为 交叉参考用D r e a m w e a v e r的用语来说，对象是一小段H T M L代码，用来表示一个特 定的图像或者 H T M L标识，如< t a b l e >或< f o r m >。D r e a m w e a v e r的对象是完全开放的，用户可以自定义或者彻 底地重建对象。举例来说，缺省情况下插入的表格总是带有1个像素宽的边框，如果你希望在 导入格式化数据时插入无边框的表格，只需在插入列表数据( Insert Tabular Data)对象文件中进 行一些小小的改动就可以了。这样，每个后续的表格都会以你所希望的方式被插入。 利用对象可以节省许多时间。实质上，你只需通过单击鼠标就可以插入有效的H T M L代码 块。同样，利用 D r e a m w e a v e r的行为特性，即使是初级的We b设计者也能够插入复杂的 J a v a S c r i p t函数以实现具有前卫效果的We b页。D r e a m w e a v e r本身带有一套非常全面的标准行为， 但这还只是所有行为中极少的一部分。由于行为也是可以进行自定义的，而且可以由任何一个 具有J a v a S c r i p t使用知识的人进行创建，许多D r e a m w e a v e r设计者创建了自定义的行为，并允许 他人使用它们。 在本书所附的光盘上，你可以找到众多各式各样的自定义对象、行为及命令。 1.5.2 命令和浮动器 对象和行为是帮助创建We b页最终效果的很好途径，但是自动化完成页面制作又是什么情形呢？Dreamweaver 引入了命令，用以提高用户修改已有页面的效率。以 D r e a m w e a v e r中的排 序表格(Sort Ta b l e)命令为例，如果你曾手工对一个大的表格进行排序(比如逐行细心地移动数据)，那么当你第一次使用该命令对表格按字母顺序或其他方式进行排序时，将会感激该命令 的强大功能。 命令的前景非常光明，从效果上看，它们比对象或行为的组合具有更强大的功能。实际上，一些较为复杂的对象，例如新的R o l l o v e r图像对象，其实就是命令。命令也可以从站点中提取信息，并在D r e a m w e a v e r中提供了一个功能很强的可编程语言。 由于有了新的历史选项板(History palette)，创建一个D r e a m w e a v e r命令比以往 更容易。历史选项板不仅能够显示你建立We b页过程中的每一个动作，还允 许你选择多个动作并将它们保存为命令。当你需要使用自己创建的新命令时，只需直 接从菜单中调用它。 稍微使用一下D r e a m w e a v e r，你就会逐渐习惯那些浮动的选项板。在Dreamweaver 3中，用 户还可以创建一个名为f l o a t e r的自定义选项板。这些自定义的浮动器可以显示现有资源，或者 提供一个全新修改H T M L元素的界面。 1.5.3 自定义标识、转换器和属性检查器 在D r e a m w e a v e r中，几乎用户界面的每一部分都是可以被自定义的，甚至包括标识本身。 一旦你开发了自己的自定义系统，也就是第三方的标识，就可以使用自定义的属性检查器显 示 和修改它们当前的属性。如果你自定义的标识所包含的内容没有正常显示在 D r e a m w e a v e r的文 档窗口中，还可以创建一个自定义的转换器，使该内容得以显示出来。 像D r e a m w e a v e r这样的程序，通常是用C或C + +编程语言创建的，因此程序在使用前必须进 行编译。一般而言，一个C程序中的基本函数是固定死了的，也就是说，你无法对之进行扩展。 新特性然而，对D r e a m w e a v e r而言，就不存在类似的情况。D r e a m w e a v e r提供了C语言级的扩充功能， 允许编程者通过创建库向程序中添加新功能。例如，转换器通常依赖新的C库才能在 D r e a m w e a v e r中显示其内容，否则就不行。其他公司可利用这一C语言级的扩展功能，将 D r e a m w e a v e r集成到自己的工作流中，从而获得最大的效率。 1.6 自动化特性 设计We b站点是一项富于幻想的工作，同时也是一项需要实践的工作。设计方案一旦确定，设计者面对的就是众多繁重的事务。D r e a m w e a v e r提供了许多方法，使We b设计过程自动化。 1.6.1 应用HTML样式 We b站点各部分的设计者总要依靠一致和灵活的样式。如今，We b设计者们已从使用单一 的样式进化到使用层叠样式单( C S S)。大多数情况下，C S S是一种比较理想的解决方案，之所 以有不少客户不愿意接受C S S，主要是因为他们担心失去那些使用老版本浏览器的用户，而这 些老版本的浏览器不支持C S S。D r e a m w e a v e r的工程师们提出了一种既可以使文本的格式化过 程简单、又具有向后兼容性的解决方案，这就是H T M L样式。 利用H T M L样式选项板，可以定义、管理和应用任何文本格式的组合。你可 以将新样式应用于一段选定的文本或整个段落。对已有的H T M L样式进行重 新定义不会导致文本的更新，H T M L样式可应用于整个站点并迫使站点具有一致的外 新特性观，同时又没有CSS那么多局限性 1.6.2 导入办公文档 We b中的许多内容来自其他地方，如字处理程序或电子表格的内部文档。Dreamweaver 3 通过两个新增的导入功能将在线世界与离线世界紧密地联结在一起，即导入Word HTML 和导入表格数据。 作为一流的字处理程序，Microsoft Word在创建和保存文档方面无可挑剔，但 在输出标准的H T M L文件上，Wo r d却显得不够老练。来自Wo r d的H T M L文件 多少总带有一些冗余和重复的代码，Dreamweaver 3的导入Word HTML功能可以剔除无 用的代码，甚至允许你对这些代码进行格式化，使之看起来就像其他的D r e a m w e a v e r 文 件一样。在清除无用代码方面，导入Word HTML命令提供了大范围的选项。 当然，并非所有的We b内容都来自Wo r d文档，数据库和电子表格也是两个重要来源。利用 导入表格数据命令，D r e a m w e a v e r可以合并任何结构化数据文件，而不论它们来自何处。你只 需将电子表格或数据库文档保存为基于逗号、制表符或其他分隔符的文件，然后就可以将它们 按照指定的表格样式插入到D r e a m w e a v e r中。 1.6.3 历史选项板 在建立We b站点过程中，我们常常需要一遍又一遍地重复某些命令，即所谓的站点建设重复性。例如，在页面中插入图像时，你可能经常需要为图像添加一个 1 0像素宽的垂直边距和5 像素宽的水平边距。在过去，你必须一遍又一遍地选定图像然后在属性检查器中输入相应的值。 现在，你只需将这些值输入一次，然后将所做的操作保存为一个命令。 使D r e a m w e a v e r具有上述自动化特性的就是历史选项板。历史选项板是 新特性Dreamweaver 3新增的一个部件，它能够显示设计者在开发We b页时所做的每 一步操作。显示这些操作不仅使D r e a m w e a v e r具有复杂的、多层次的U n d o功能，还可 以将多个操作步骤保存为一个可立即执行的命令，从而节省大量时间。 1.7 站点管理工具 当你的酷站发布了很长一段时间之后，你会发现自己总是在不停地对它进行更新和修订。从这一点来看，站点管理工具和站点创建工具对于一个We b站点创作程序来说是同样重要的。 D r e a m w e a v e r在这两方面都做得不错。 1.7.1 对象库 除了诸如F T P发布等传统的站点管理功能之外，D r e a m w e a v e r又添加了一种称为“库”的 全新功能。众所周知，在站点开发过程中如果重复使用某个元素，那么将来肯定要在每一页上 对其进行修改。D r e a m w e a v e r库可以使我们免除这份苦差。 几乎所有的元素都可以被定义为库元素：文本段落、图像、链接、表格、表单、J a v a小程 序、Active X控件等等。只要选择好项目，然后打开库选项板(如图 1 - 8所示)。一旦创建了库条 目，就可以在整个We b站点重复使用。每个We b站点都可以拥有自己的库，也可将条目从一个 库复制到另一个库中。 新特性能够包含“样板”We b元素是一回事，能够同时跨越整个站点对它们进行更新则是完全不 同的另一回事！通过库选项板，用户可以非常容易地改变一个库的条目。一旦重复库中的某个 条目被改变，D r e a m w e a v e r会检测到所做的修改并询问用户是否要对站点进行更新。想像一下 在瞬间对一个超过4 0 0页的We b站点上的版权信息进行更新的情形，你就能理解D r e a m w e a v e r的 强大之处。 要想了解更多关于如何修改整个站点，请参见第34章。 1.7.2 模板 随着We b 站点的的发展，你会越来越多地发现不同页面上需要使用同样基本格式的内容。 利用D r e a m w e a v e r 模板，不仅可以规范We b 站点的外观，还能够减少页面创建过程中的重复性 工作。D r e a m w e a v e r 模板提供了基本的页面结构，并带有尽可能多的预定义元素，如嵌入的背 景图像、页面左端的导航栏或者页面中心用于放置主文本的表格等。 但是，D r e a m w e a v e r 模板绝非仅是创建We b 页的模型。模板基本上是由一系列被锁定和可 编辑的区域组成，当需要对一个基于模板的整个站点进行更新时，用户所要做的工作就是改变 一个或多个被锁定的区域。当然，D r e a m w e a v e r 允许用户将自己创建的模板保存到相同的文件 夹中，以便通过F i l e｜New from Te m p l a t e命令来访问。(关于使用和创建模板，请参见第 3 3 章。) 1.7.3 以浏览器为目标 以浏览器为目标是D r e a m w e a v e r关于站点管理的又一项革新。在任何站点项目的开发过程 中，一个主要的步骤就是在不同的浏览器中测试We b页，以找出冲突和无效的代码。 D r e a m w e a v e r的“以浏览器为目标”(Browser Ta rg e t i n g)功能可以使用户依据任何存在的浏览器 配置文件来检查自己的H T M L。D r e a m w e a v e r包含了多种预定义的浏览器配置文件，用户可以 根据自己的需要创建相应的浏览器配置文件。 交叉参考要想了解怎样为“以浏览器为目标”设置自己的配置文件，请参见第36章。 第1章第Dreamweaver的基础知识第一13 下载 交叉参考 交叉参考你可以在任意数量的浏览器中预览We b页。D r e a m w e a v e r允许用户指定页主/从浏览器，你 只需按下一个功能键就可以预览页面。D r e a m w e a v e r允许用户安装多达1 8种浏览器用于预览 We b页。通过F i l e(文件)菜单最下面的Preview in Browser(在浏览器中预览)命令，你可以看到所 有可用浏览器的列表。 1.7.4 转换Web页 虽然We b站点设计者可以使用最新的H T M L工具和浏览器，但很多人仍然使用老的、低版 本的浏览器。D r e a m w e a v e r允许你使用第四代浏览器的高级功能来创建We b页，然后再将所创 建的页面加以转换，以便使低版本的浏览器也可以访问。此外，对于原先设计的包含表格的We b页，还可以使用表格到层(Tables to Layers)命令对它们进行“升级”，使其充分利用最新的 H T M L特性。在帮助用户缩短浏览器版本差别的过程中，D r e a m w e a v e r做了大量的工作。 1.7.5 验证链接 We b站点是一个不断变化的统一体。在不断变化的同时还要保持有效的连接和链接，这是一项具有挑战性的工作。D r e a m w e a v e r有一个内置的链接检查器，你可以利用它对一个页面、 一个目录甚至跨越整个We b站点的链接进行验证。链接检查器能够快速显示出哪些文件含有断 开的链接，哪些文件含有指向外部站点的链接，以及哪些文件呈“孤立”状态(没有其他文件 与之相连)。 1.7.6 FTP发布 创建We b页的最后一步就是在I n t e r n e t上发布它们。网站管理员们都知道，在站点的不断更 新和维护过程中，这个所谓的“最后步骤”其实是一项重复来重复去的工作。D r e a m w e a v e r提 供了一个F T P(File Transfer Protocol，文件传送协议)发布器，用以简化站点发布操作。更重要的是，D r e a m w e a v e r可以使你只用一条命令就能让远程站点与本地站点同步。 你可以使用源自于本地文件夹的站点，比如你硬盘上的某个文件夹。在合作开发环境中，你还可以工作在远程服务器上正在开发的站点。D r e a m w e a v e r允许用户设置大量的站点来容纳 源和目标目录、F T P用户名和口令等。 D r e a m w e a v e r的站点窗口如图1 - 9所示。这是一个可视化的界面，你可以单击并拖动文件， 或者选定文件后使用G e t和P u t按钮进行传送。你甚至可以设定参数，使系统在保持一段指定的 空闲时间后自动断开。 1.7.7 站点地图 We b站点的成长是相当迅速的，以致于设计者会很难记住所有的链接。D r e a m w e a v e r 在站 点管理工具箱中增添了一个新的辅助工具：站点地图( Site Map)。利用站点地图，设计者可以 综观整个We b站点的结构。其实，站点地图的功用还远远不止这些。 站点地图如图1 - 1 0所示。除了可以显示We b站点结构外，站点地图还可以用来建设站点，如创建新页面、添加链接、修改链接或删除链接。事实上，站点地图的功能是如此强大，以致 于它已成为一个站点管理器。 下载 1.7.8 隔离与登记文件 在大型We b项目中，通常不止一个人负责站点的创建和日常维护。一个编辑可能需要公司的最终发布版本，或者图形设计师也许需要上传一幅最新产品的图片——所有这些都在同一个 页面上。为了避免重复更新而引起的冲突，D r e a m w e a v e r设计出一种系统。在系统中，We b页 可以标记为“隔离”(checked out)并被锁定以防止他人修改，直至文件再次被“登记”(checked in)。当你隔离了某个文件时，站点文件窗口中该文件的图标上会被D r e a m w e a v e r放置一个绿色 标记。如果文件是被开发小组中的其他成员所隔离，标记将呈红色。同时，由于D r e a m w e a v e r 会在文件名称的后面显示出隔离文件的人的名字，所以你不必去猜测到底是小组中的谁隔离了 文件。你还可以跟踪上一次是谁隔离了特定的We b页(或图像)，D r e a m w e a v e r能够保持一个活动 的列表，上面记录着文件、用户以及隔离的日期。 在第7章中，你可以了解到所有Dreamweaver的Web发布性能。 1.8 小结 创建一个We b站点一半靠手艺一半靠艺术，而D r e a m w e a v e r则是将二者融合起来的完美工 具。D r e a m w e a v e r可视化编辑工具能够使你快速创建富有艺术气息的页面，同时，它所集成的 文本编辑工具为编程人员提供了面向细节的工具。D r e a m w e a v e r的主要功能概括如下：?由于集成了可视化和文本编辑器，D r e a m w e a v e r按照专业We b开发者工作的方式进行工作。 在处理已有的We b页时，D r e a m w e a v e r不会转换用户的H T M L代码。 ?通过简易的输入和对文本、图形、表格以及多媒体元素的编辑操作，D r e a m w e a v e r 支持 H T M L标准的命令。 ?Dreamweaver使动态H T M L和层叠样式单(C S S)等前沿特征更为易用。?Dreamweaver提供了多种可反复使用J a v a S c r i p t行为、对象库、命令和模板，提高了We b 页创建的效率。 下载 交叉参考Dreamweaver拥有范围广阔的站点管理工具。包括配有支持组创建和维护文件锁定功能 的F T P发布工具，内置的链接检查器以及可视化的站点地图。 在第2章中，我们将从最基本的内容开始介绍，使读者能够快速进入D r e a m w e a v e r。 dw网页制作基础代码Dreamweaver 8 基础代码 HTML基本结构（每个网页都是在基本结构的基础上添加内容的） ---------网页文件开始标签 --------头部元素开始标签加粗：... 倾斜：... 滚动字幕: 滚动标签：marquee 最简表达： 滚动的属性： Direction--表示滚动的方向，值可以是left，right，up，down，默认为left Behavior--表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（来回滚动） DW入门培训教程1如何使用“505.html修改帖子”后台 Bbs站长后台→帖子管理→505.html修改帖子 在帖子url里输入帖子链接点击确定，在“帖子内容”中出现的即为帖子代码，将代码全选复制黏贴入dreamweaver 中进行编辑。编辑完成后复制代码再覆盖黏贴入原先的“帖子内容”中，点击提交即可！ 第一章Dreamweaver 设计篇 面板总体介绍： A.“插入”栏 B. 文档工具栏 C. “文档”窗口 D. 面板组 E. 标签选择器 F. “属性”检查 G. “文件”面板 文档工具栏具体详解： ABC是切换显示模式。D.显示文档标题，也就是代码中的title。E. 文件管理 F.在浏览器中预览/调试 G. 刷新设计视图 H. 视图选项 I. 可视化助理 J. 验证标记 K. 检查浏览器兼容性 1.建立站点 到这里，站点建立完毕，以后你也可以随时编辑修改这个站点的相关属性。在“文件”面板中右击已经建立的站点，然后新建文件夹，分别建立index和image文件夹。然后就可以把在制作页面中用到的图，banner,背景图等等先扔在image文件下里。方便在需要插入图片等元素时引用。 2.编辑文本 输入一段文字，并选中，然后在下方属性栏里进行编辑。（空格需要按“ctrl+shift+空格”） 格式中“标题1”到“标题6”分别表示各级标题，应用于网页的标题部分。对应的字体由大到小，同时文字全部加粗。如果需要自定义文字大小，则在大小一项中设置，格式为无。另外，在属性面板中可以定义文字的字体、颜色、加粗、加斜、对齐方式等内容。如需加链接，则在链接一栏加入网址，目标中_blank表示在新窗口中打开（最常用），_self表示“相同窗口”打开，_top表示整页窗口打开，_parent表示父窗口打开。 3.插入图像 “插入工具栏”的开启/关闭：快捷键CTRL+F2 或者窗口栏目下“插入” 点击插入工具栏中的图像按钮，或者点击插入记录下的图像，弹出“选择图像源文件”对话框 dreamweaver8.0入门图文教程dreamweaver8.0入门图文教程：Dreamweaver 8 操作 环境 第一天的内容可能让你觉得枯燥乏味，不过，“工欲善其事，必先利其器”，让我们一起来了解Dreamweaver8的操作环境，完成站点的创建。一、Dreamweaver8 的操作环境在首次启动Dreamweaver8时会出现一个“工作区设置”对话框，在对话框左侧是Dreamweaver8的设计视图，右侧是Dreamweave 8的代码视图。Dreamweaver8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。我们选择面向设计者的设计视图布局。 在Dreamweave 8 中首先将显示一个起始页，可以勾选这个窗口下面的“不在显示此对话框”来隐藏它。在这个页面中包括“打开最近项目”、“创建新项目”“从范例创建”3个方便实用的项目，建议大家保留。 新建或打开一个文档，进入Dreamweaver8的标准工作界面。Dreamweaver8的标准工作界面包括：标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。 1、标题显示栏 启动Macromedia Dreamweave 8后，标题栏将显示文字Macromedia Dreamweave 8.0，新建或打开一个文档后，在后面还会显示该文档所在的位置和文件名称。 2、菜单栏 Dreamweave 8的菜单共有10个，即文件、编辑、视图、插入、修改、文本、命令、站点、窗口和帮助。其中，编辑菜单里提供了对Dreamweaver菜单中[首选参数]的访问。 文件：用来管理文件。例如新建，打开，保存，另存为，导入，输出打印等。 编辑：用来编辑文本。例如剪切，复制，粘贴，查找，替换和参数设置等。 查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。 插入：用来插入各种元素，例如图片、多媒体组件，表格、框架及超级链接等。 修改：具有对页面元素修改的功能，例如在表格中插入表格，拆分、合并单元格，对其对象等。 文本：用来对文本操作，例如设置文本格式等。 命令：所有的附加命令项 站点：用来创建和管理站点 窗口：用来显示和隐藏控制面板以及切换文档窗口 帮助：联机帮助功能。例如按下F1键，就会打开电子帮助文本 3、插入面板组 插入面板集成了所有可以在网页应用的对象包括“插入”菜单中的选项。插入面板组其实就是图像化了的插入指令，通过一个个的按钮，可以很容易的加入图像、声音、多媒体动画、表格。图层、框架、表单、Flash和ActiveX等网页元素。 4、文档工具栏 “文档”工具栏包含各种按钮，它们提供各种“文档”窗口视图（如“设计”视图和“代码”视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览）。 5、标准工具栏 “标准”工具栏包含来自“文件”和“编辑”菜单中的一般操作的按钮：“新建”、“打开”、“保存”、“保存全部”、“剪切”、“复制”、“粘贴”、“撤消”和“重做”。 6、文档窗口 当我们打开或创建一个项目，进入文档窗口，我们可以在文档区域中进行输入文字、插入表格和编辑图片等操作。 “文档”窗口显示当前文档。可以选择下列任一视图：“设计”视图是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver 显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。“代码”视图是一个用于编写和编辑 HTML、JavaScript、服务器语言代码以及任何其他类型代码的手工编码环境。“代码和设计”视图使您可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视图。 7、状态栏 “文档”窗口底部的状态栏提供与你正创建的文档有关的其它信息。标签选择器显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。单击 可以选择文档的整个正文。DW基础知识一课程目标： ?使用CSS美化网页元素 ?使用DIV+CSS布局网页 ?制作各种流行的网页组件 ?制作语义化的表单 ?掌握一些常用的网页制作技巧 第一次课： 1、DW5工作界面的认识。 2、新建站点（为什么要站点）、网页文件（注意“页面属性”---“标题/编码”的设 置和重要性）、样式文件（外部） 3、网页基本结构： …各种标记写成的网页内容代码… 4、html与xhtml的区别 5、html常用内容标签 做网页实例。。。。first.html 6、结构标签 标签：定义HTML文档中的分区或节(简单说：就是用于布局！) 标签：行内元素 区别“表格布局”和“div布局”。
７、ＣＳＳ简介： 级联样式表(Cascading Style Sheet) ，简称风格样式表(Style Sheet) ；用来进行网页风格设计 ＣＳＳ作用： 有效地控制网页外观 精确定位网页元素 改善用户体验 CSS的优点 内容与表现分离 表现统一，易控制 布局页面更灵活 减少页面代码量 利于搜索引擎收录 CSS语法规则(演示) 选择器{属性：值；} 标签、类、ID三种 P { color: red; } . top { width: 600px; } # nav ( font-size: 12px;) CSS样式引入网页文件(演示) 行内式、嵌入式、链接式、导入式 关于DOCTYPE DOCTYPE不可怕，但把它拿走，会让你怕了又怕。 最近在蓝色理想转悠，发现很多朋友提出有关DIV+CSS排版问题，以及IE与FF的兼容问题。怎么问的都有，结果就是一个——显示很奇怪，很难调整。我们浏览的大多数网站，或者用Dreamweaver创建一个新的网页文档时，源码的顶部都会有DocType声明，但是很多人没有注意它，甚至在创作时候直接将它删掉，其实这往往就是噩梦的开始。在遵循标准的任何Web文档中，DOCTYPE都是一项必需的元素。它会影响代码验证，并决定了浏览器最终如何显示你的web文档。为了避免DOCTYPE的问题重复出现，我根据手头的资料整理了这篇文档，以备自己及有兴趣的朋友参考。 在默认情况下，FF和IE的解释标准是不一样的，也就是说，如果一个网页没有声明DOCTYPE，它就会以默认的DOCTYPE解释下面的HTML。在同一种标准下，不同浏览器的解释模型都有所差异，如果声明标准不同，不用我说，您自己想就可以了。学习网页标准，浏览器兼容，从哪里开始您自己决定，但是，请认识DOCTYPE： 一、什么是DOCTYPE DOCTYPE是Document Type（文档类型）的简写，在页面中，用来指定页面所使用的XHTML （或者HTML）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就是DOCTYPE声明。只有确定了一个正确的DOCTYPE，XHTML里的标识和CSS才能正常生效。 二、DOCTYPE的规则 DOCTYPE声明的写法遵循一定的规则，它指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下，“阅读程序”通常是浏览器或者校验器这样的一个程序，“规则”则是w3c所发布的一个文档类型定义（dtd）中包含的规则。 每个dtd都包括标记、attributes、properties等内容，它们用于标记web文档的内容；此外还包括一些规则，它们规定了哪些标记能出现在其他哪些标记中。每个web建议标准（比如html 4 frameset和xhtml 1.0 transitional）都有自己的dtd。 以下是从手册上摘抄的规则： 语法： 第10章-Dreamweaver-CS3基础知识第10章Dreamweaver CS3基础知识 课前导读 Dreamweaver是绝大多数网页设计者使用的网页编辑软件。Dreamweaver具有功能强大，操作性强的特点。本章我们就学习使用Dreamweaver软件。 本章重点 在本章我们将重点学习： ?Dreamweaver CS3的常用功能 ?Dreamweaver CS3的使用 10.1 Dreamweaver CS3简介 Dreamweaver是Macromedia公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。Dreamweaver、Flash以及之后推出的针对专业网页图像设计的Fireworks，三者被称为“网页三剑客”，几乎是每个网页设计者必须学习使用的工具套件。 Dreamweaver总的特点是： 1．最佳的制作效率 Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于很多的常用操作都只要一个简单步骤便可完成。Dremweaver只要单击便可自动开启Firework或Photoshop来进行编辑与设定图像文档的最佳化。 2．网站管理 使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver 会自动更新所有连结。使用提示文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。 3．无可比拟的控制能力 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。帧(frames)和表格的制作速度快的惊人。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。甚至可以排序或格式化表格群组，Dreamweaver 支援精准定位，利用可轻易转换成表格的图层以拖拉置放的方式进行版面配置。所见即所得Dreamweaver成功整合动态式出版视觉编辑及电子商务功能，提供超强的支援能力给Third-party厂商，包含ASP，Apache，BroadVision，Cold Fusion，iCAT，Tango与自行发展的应用软体。使用Dreamweaver在设计动态网页时，不需要透过浏览器就能预览网页。建立网页外观的模板，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。 Macromedia公司于2005年被Adobe公司收购，收购后负责Dreamweaver开发的项目组又推出了Dreamweaver的最新版本Dreamweaver CS3 （以下简称DW CS3），DW CS3包含有一个崭新、简洁、高效的界面，且性能也得到了改进。此外，还包含了众多新增的功能，改善了软件的易用性，其中最为主要的是增加了对Ajax技术的支持，推出了Spry 框架。 10.2 Dreamweaver CS3的新增功能 由于Ajax技术的盛行，各种Ajax框架如雨后春笋一样被开发出来，Dreamweaver CS3也推出了自己的框架——Spry。Dreamweaver CS3的新增功能主要以Spry框架为基础。 （1）适合于Ajax的Spry框架 使用适合于Ajax的Spry框架，以可视方式设计、开发和部署动态用户界面。在减少页面刷新的同时, 增加交互性、速度和可用性。 Macromedia Dreamweaver 8最好的实用入门教程第一天的内容可能让你觉得枯燥乏味，不过，“工欲善其事，必先利其器”，让我们一起来了解Dreamweaver8的操作环境，完成站点的创建。 一、Dreamweaver8 的操作环境 在首次启动Dreamweaver8时会出现一个“工作区设置”对话框，在对话框左侧是Drea mweaver8的设计视图，右侧是Dreamweave 8的代码视图。Dreamweaver8设计视图布局提供了一个将全部元素置于一个窗口中的集成布局。我们选择面向设计者的设计视图布局。 在Dreamweave 8 中首先将显示一个起始页，可以勾选这个窗口下面的“不在显示此对话框”来隐藏它。在这个页面中包括“打开最近项目”、“创建新项目”“从范例创建”3个方便实用的项目，建议大家保留。 新建或打开一个文档，进入Dreamweaver8的标准工作界面。Dreamweaver8的标准工作界面包括：标题显示、菜单栏、插入面板组、文档工具栏、标准工具栏、文档窗口、状态栏、属性面板和浮动面板组。 1、标题显示栏 启动Macromedia Dreamweave 8后，标题栏将显示文字Macromedia Dreamweave 8.0，新建或打开一个文档后，在后面还会显示该文档所在的位置和文件名称。 文件：用来管理文件。例如新建，打开，保存，另存为，导入，输出打印等。 编辑：用来编辑文本。例如剪切，复制，粘贴，查找，替换和参数设置等。 查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。 插入：用来插入各种元素，例如图片、多媒体组件，表格、框架及超级链接等。 修改：具有对页面元素修改的功能，例如在表格中插入表格，拆分、合并单元格，对其对象等。 文本：用来对文本操作，例如设置文本格式等。 命令：所有的附加命令项 站点：用来创建和管理站点 窗口：用来显示和隐藏控制面板以及切换文档窗口 帮助：联机帮助功能。例如按下F1键，就会打开电子帮助文本 3、插入面板组 插入面板集成了所有可以在网页应用的对象包括“插入”菜单中的选项。插入面板组其实就是图像化了的插入指令，通过一个个的按钮，可以很容易的加入图像、声音、多媒体动画、表格。图层、框架、表单、Flash和ActiveX等网页元素。 DW基础使用教程DW详解基础部分： 文档设计、编辑栏详细说明 面板组详细说明 HTML编辑属性： CSS编辑属性： Css编辑规则： Font-family:字体格式font-size:字体大小font-weight:加粗 Font-style:字体样式font-variant:字体变形(如字体大小写) Line-height: 行高Text-transform(R):大小写转换 Text-decoration: (文本修饰)underline(添加下划线) overline(添加上划线) Line-through(加入删除线) blink(字体闪烁) none(取消下划线) Background-color:背景颜色 Background-image:加入北京图片 Background-repeat:背景平铺方式 Background-attachment:附加方式(固定或滚动) Background-position:定位(right,left等等)x或y Word-spacing:单词间距 Letter-spacing:字母间距 Vertical-align:垂直对齐方式 Text-align:文本对齐方式 Text-indent:文本缩进 White-space:处理元素内的空白(换行等) Display:显示方式 Width:宽度单位(px,%) float:漂浮(值：left,right,top,button) height:高度单位(px,%) clear:清楚漂浮(值：both,left等) padding: 内边距margin:外边距 主要部分(其他部分用的不多，自行查看) 拓展部分： Spry验证: 简介：Spry 框架是一个javascript 库，Web 设计人员使用它可以构建能够向站点访问者提供更丰富体验的Web 页。有了Spry，就可以使用html、CSS 和极少量的JavaScript 将xml 数据合并到HTML 文档中，创建构件（如折叠构件和菜单栏），向各种页面元素中添加不同种类的效果。 Adobe Dreamweaver基础Adobe Dreamweaver Adobe Dreamweaver，简称“DW”，中文名称"梦想编织者"，是美国MACROMEDIA公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。 Adobe Dreamweaver使用所见即所得的接口，亦有HTML（标准通用标记语言下的一个应用）编辑的功能。它有Mac和Windows系统的版本。随Macromedia被Adobe收购后，Adobe也开始计划开发Linux 版本的Dreamweaver了。 Dreamweaver自MX版本开始，使用了Opera 的排版引擎"Presto" 作为网页预览。 1发展历程编辑 Dreamweaver 1.0发布于1997年12月，由之前的Macromedia公司发布。 Dreamweaver 2.0，发布于1998年12月。 Dreamweaver 3.0，发布于1999年12月。Dreamweaver 3.0不足3M，是个经典版本。无论是多破的机器，速度特快，功能够用。此时的Dreamweaver已经是一个集网页创作和站点管理两大利器于一身的超重量级的创作工具。 2历史版本编辑 2.1版本介绍 Dreamweaver 2.0版本具有强大的站点管理功能，内置FTP软件可以直接上传主页；所见即所得的页面编辑方式；支持Styles Sheet 样式表单，创造丰富的页面效果；支持Layer层，并可使用Timeline 时间轴制作动态网页；内置Behavior行为，为网页增加交互功能；提供模板和库可以加速页面的生成和制作；支持外部插件，提供无限的扩展能力。 版本发布 Macromedia Dreamweaver 1.0 DW基础知识？1 发现邮箱内的主题为乱码 ？2 图片上的提示文字，在浏览器显示不出来。 1 HTML知识，文件的主要结构： HTML HEAD BODY开始，结束。文件头部一般不在网页中直接显示，定义一些描述性的信息。如标题，描述。CSS，javaScript也常在这里设置。 主题包括控制表，图像，链接，框架。大多数HTML标记。 2 HTTP：Hypertext T ransfer Protocol是指超文本传输协议，用来在网络上传输数据，也就是WWW上的信息资源，以方便在服务器与客户端之间进行通信。 URL：Universal Resource Locator s是指统一资源定位器，提供在网络上定位资源的一种方法和路径，也就是说明链接所指向文件的类型和准确位置，使用户访问的站点具有唯一性。 3 文本与列表控制学习 ●输入文字与文字的属性设置， ●多种空格与换行的添加方法 ●粘贴域导入Word和Excel文档 ●文本工具栏标签和符号的使用方法 ●无序列表、有序列表和定义列表 学习目标： 掌握控制文字和列表的各种技巧，熟悉各项文字属性和文字标签的使用方法，了解与Word 和Excel之间的交互功能。能够区别三种列表形式的不同之处，并能够在适当的情况下使用它们。 编辑首选参数在浏览器中预览确定就不在提示存盘。 字体的颜色大小对齐方式。 4 输入空格较低版本，只能输入一个空格。（1）工具箱常用文本列表不换行标签，进行点击则可以输入空格。（2）ctrl+shift+空格（3代码 （4）五笔输入法（5）工具常用允许多个空格连续。 5 段落切换与强行换行 直接回车，间距大。 强制换行，shift+enter;文本常用BR 文本菜单功能选择。快引用，缩进，用于排版。PRE一编排格式，按照代码的格式进行排版。标题号。列表的格式。 6 从外部导入文字。 粘贴word文档，excel表格。直接粘贴就行。编辑》选择性粘贴，自由选择。也可以使用导入功能。 7 清除冗余代码。命令，清理HTML或者清理WORD生成的HTML。主要是word生成的冗余码。 8 列表的使用，无序列表，有序列表。代码UL右键，选择正方形。标签检查器，直接可以修改格式。还有编号列表。 北桥一般有散热片。 9 定义列表。软件的使用方法。定义网站与页面属性。文字与列表的控制。 UI OL(有序列表) li（列表项）dt术语，dd定义说明，DL定义列表 10 HTML 横线，选择HTML。选择水平线。代码可以右键设置，很方便。好hr后加空格。二链接的使用： 内容提要：链接状态的基本设置，链接的基本组成结构，链接的多种创建方法，创建Email 链接和锚链接。学习目标：掌握链接各种状态的设置，链接的组成结构，以及链接的多种创 dw基础教程《Dreamweaver》 目录 第一节：DW软件介绍 ------------------------------------------------------------------------------------------------------------------- 2 第二节：学习Dreamweaver的作用和应用方向---------------------------------------------------------------------------------- 3 第三节：认识DW的界面 --------------------------------------------------------------------------------------------------------------- 3 第四节：站点的建立和编辑----------------------------------------------------------------------------------------------------------- 4 第五节：常用插入 ----------------------------------------------------------------------------------------------------------------------- 4 第六节：CSS样式 ------------------------------------------------------------------------------------------------------------------------ 6 1.作用 -------------------------------------------------------------------------------------------------------------------------- 6 2.CSS样式的应用对象 ----------------------------------------------------------------------------------------------------- 6 3.CSS样式的分类------------------------------------------------------------------------------------------------------------ 6 4.如何将样式表加入网页？ ---------------------------------------------------------------------------------------------- 7 5.实验后总结优先级-------------------------------------------------------------------------------------------------------- 8 6.CSS规则简单说明 -------------------------------------------------------------------------------------------------------- 8 7.块元素（block）的定义 ------------------------------------------------------------------------------------------------ 9 8.CSS规则详解—类型[块内字的规则] ---------------------------------------------------------------------------- 9 9.CSS规则详解—背景[块本身]-------------------------------------------------------------------------------------- 9 10.CSS规则详解—区块[块内元素的对齐和排版]---------------------------------------------------------------- 9 11.CSS规则详解—方框[块本身] [块内] [块间]-------------------------------------------------------------- 10 12.CSS规则详解—边框[块本身]------------------------------------------------------------------------------------ 11 13.CSS规则详解—列表 ------------------------------------------------------------------------------------------------ 11 14.CSS规则详解—定位 ------------------------------------------------------------------------------------------------ 11 15.CSS规则详解—扩展[块内]--------------------------------------------------------------------------------------- 12 第七节：CSS+DIV实例网页布局 --------------------------------------------------------------------------------------------------- 12 1.盒子模型 ------------------------------------------------------------------------------------------------------------------ 13 2.当间距（边界距离）叠加的说明----------------------------------------------------------------------------------- 13 3.CSS+DIV布局的精髓 --------------------------------------------------------------------------------------------------- 14 4.CSS排版理念------------------------------------------------------------------------------------------------------------- 15 第八节：行为---------------------------------------------------------------------------------------------------------------------------- 16 1.定义 ------------------------------------------------------------------------------------------------------------------------ 16 2.行为的“埋设”--------------------------------------------------------------------------------------------------------- 16 3.常用触发条件 ------------------------------------------------------------------------------------------------------------ 16 4.常用事件演示 ------------------------------------------------------------------------------------------------------------ 17 HBDW-PM-数据仓库基础主讲人：黄侃 湖北电信数据仓库项目组 2006年12月 湖北电信经营分析与决策支持系统 数据仓库基础 议程 ?何为数据仓库 ?数据仓库特点 ?数据仓库平台 ?Teradata能做什么 从信息系统体系结构说起 “自然演化体系结构”：蜘蛛网 –数据缺乏可信性–不利于生产率的提高–从数据到信息转化 ?数据无时基?数据算法上的差异?抽取的多层次?外部数据问题 ?无起始公共数据源 ?不可预测?数据定位烦琐?要写的程序很多。?每个程序必须是定制的。?报表的延续可用性和继承性差 ?缺乏集成化在应用程序中没有存储足够的历史数据以满足D S S分析员的需求?自然演化的系统体系结构带来很多问题 ： 新的体系结构－数据仓库产生 ?两种基础数据的并存 >原始数据:公司每天操作运行所用的细节性数据 >衍生/导出数据：统计出来的或计算出来的满足公司管理者需要的数据 面向应用 详细的 为日常工作服务的可更新的 处理需求事先可知事务处理驱动 …面向主题 综合的或提炼的为管理决策服务的不可更新的 处理需求事先未知分析处理驱动 … ?原始数据与衍生/导出数据之间存在着本质区别 在适当的时间将正确的信息传递给适当的人，以作出正确的决策 Get the right information to the right people at the right time to make the right decisions 数据Data 决策 Decision 知识 Knowledge 信息 Information 什么是数据仓库 数据仓库的驱动力 业务问题: 如何留住最有价值的客户？ 谁是最有价值的客户? 哪些客户有可能停止使用我公司的 产品或服务？ 哪些客户有可能成为竟争对手的客 户? 用Dreamweaver制作网页的基本步骤用Dreamweaver制作网页的基本步骤 时间:2010-06-29 08:46来源:未知作者:大宝库点击:读取中次 阅读工具：字体：大中小 本教程主要是针对初学者，如何使用Dreamweaver制作一个网页？这个教程具体详细讲解了制作网页的步骤，及注意的问题，并且拿一个实例来给大家做了一下详细讲解！ 创建网页页面 1、在Dreamveaver“文件－新建－常规－基本页－HTML”，这样就建好了一个页面，英文版的默认的文件名为untitled.htm。中文版的的默认的文件名为“无标题文档”。htm就表示这个网页文件是一个静态的HTML文件。给它改名为index.htm。 注：网站第一页的名字通常是index.htm或index.html。其它页面的名字可以自己取。这也就是主页，上传后打开网页默认连接到此页。 2、在标题空格里输入网页名称，点击修改－页面属性，打开“页面属性”窗口。在这里可以设置网站的标题、背景颜色或背景图像，超级链接的颜色（一般默认即可），其他都保持默认即可。 3．此时光标位于左上角，可输入一句话，如“欢迎来到我的主页”。选取文字，用菜单“窗口/属性”打开属性面板，选取文字大小为6，再使文字居中，然后在文字前用几个回车使其位于页面中间等。 4．如要选取字体，则选择字体中的最后一项：编辑字体列表。然后在对话框中选+号，接着在“可用字体”栏中选择需要加入到字体列表中的一种字体，点击中间的按钮就可以加入了。 注：在网页上最常用的是宋体字。不要将特殊的字体加到列表中使用，因为别人电脑上未装就看不到。如果需要用的话，要做成图片后再使用。 注：在网页上打入空格的办法是：把输入法调为全角。 注：在网页上换行的办法是：shift+Enter。只按Enter则为换段。 下面拿一个现成的例子来给大家讲解一下： 现在，以下边的简单网页为例，叙述一下制作过程。简单网页如下图： 数据仓库ods基础学习根据Bill.Inmon的定义，“数据仓库是面向主题的、集成的、稳定的、随时间变化的，主要用于决策支持的数据库系统” ODS是一个面向主题的、集成的、可变的、当前的细节数据集合，用于支持企业对于即时性的、操作性的、集成的全体信息的需求。常常被作为数据仓库的过渡，也是数据仓库项目的可选项之一。 在Kimball的<<数据仓库生命周期工具集The Data WareHouse Liftcycle Toolkit>>，他是这样定义的： 1. 是操作型系统中的集成,用于当前，历史以及其它细节查询(业务系统的一部分)； 2. 为决策支持提供当前细节数据(数据仓库的一部分)。 因此操作数据存储（ODS）是用于支持企业日常的全局应用的数据集合，ODS的数据具有面向主题、集成的、可变的和数据是当前的或是接近当前的4个基本特征。同样也可以看出ODS是介于DB 和DW 之间的一种数据存储技术，和原来面向应用的分散的DB相比，ODS中的数据组织方式和数据仓库（DW）一样也是面向主题的和集成的，所以对进入ODS的数据也象进入数据仓库的数据一样进行集成处理。另外ODS只是存放当前或接近当前的数据，如果需要的话还可以对ODS中的数据进行增、删和更新等操作，虽然DW中的数据也是面向主题和集成的，但这些数据一般不进行修改，所以ODS 和DW的区别主要体现数据的可变性、当前性、稳定性、汇总度上。 由于ODS仍然存储在普通的关系数据库中，出于性能、存储和备份恢复等数据库的角度以及对源数据库的性能影响角度，个人不建议ODS保存相当长周期的数据，同样ODS中的数据也尽量不做转换，而是原封不动地与业务数据库保持一致。即ODS只是业务数据库的一个备份或者映像，目的是为了使数据仓库的处理和决策支持要求与OLTP系统相隔离，减少决策支持要求对OLTP系统的影响。 为什么需要有一个ODS系统呢？一般在带有ODS的系统体系结构中，ODS都具备如下几个作用： 1.在业务系统和数据仓库之间形成一个隔离层 一般的数据仓库应用系统都具有非常复杂的数据来源，这些数据存放在不同的地理位置、不同的数据库、不同的应用之中，从这些业务系统对数据进行抽取并不是一件容易的事。因此，ODS用于存放从业务系统直接抽取出来的数据，这些数据从数据结构、数据之间的逻辑关系上都与业务系统基本保持一致，因此在抽取过程中极大降低了数据转化的复杂性，而主要关注数据抽取的接口、数据量大小、抽取方式等方面的问题。 2.转移一部分业务系统细节查询的功能 在数据仓库建立之前，大量的报表、分析是由业务系统直接支持的，在一些比较复杂的报表生成过程中，对业务系统的运行产生相当大的压力。ODS的数据从粒度、组织方式等各个方面都保持了与业务系统的一致，那么原来由业务系统产生的报表、细节数据的查询自然能够从ODS中进行，从而降低业务系统的查询压力。 3.完成数据仓库中不能完成的一些功能 一般来说，带有ODS的数据仓库体系结构中，DW层所存储的数据都是进行汇总过的数据和运营指标，并不存储每笔交易产生的细节数据，但是在某些特殊的应用中，可能需要对交易细节数据进行查询，这时就需要把细节数据查询的功能转移到ODS来完成，而且ODS的数据模型按照面向主题的方 dw基础教程《D r e a m w e a v e r》 目录 第二节：学习Dreamweaver的作用和应用方向-------------------------------------------------------- 第三节：认识DW的界面 -------------------------------------------------------------------------------------- 第四节：站点的建立和编辑 --------------------------------------------------------------------------------- 第五节：常用插入 ---------------------------------------------------------------------------------------------- 第六节：CSS样式----------------------------------------------------------------------------------------------- 1.作用---------------------------------------------------------------------------------------------------------------------------- 2.CSS样式的应用对象------------------------------------------------------------------------------------------------------- 3.CSS样式的分类------------------------------------------------------------------------------------------------------------- 4.如何将样式表加入网页？------------------------------------------------------------------------------------------------ 5.实验后总结优先级 --------------------------------------------------------------------------------------------------------- 6.CSS规则简单说明---------------------------------------------------------------------------------------------------------- 7.块元素（block）的定义-------------------------------------------------------------------------------------------------- 8.CSS规则详解—类型[块内字的规则]--------------------------------------------------------------------------------- 9.CSS规则详解—背景[块本身] ------------------------------------------------------------------------------------------ 10.CSS规则详解—区块[块内元素的对齐和排版] -------------------------------------------------------------------- 11.CSS规则详解—方框[块本身][块内][块间] ----------------------------------------------------------------------- 12.CSS规则详解—边框[块本身] ------------------------------------------------------------------------------------------ 13.CSS规则详解—列表------------------------------------------------------------------------------------------------------- 14.CSS规则详解—定位------------------------------------------------------------------------------------------------------- 15.CSS规则详解—扩展[块内] --------------------------------------------------------------------------------------------- 第七节：CSS+DIV实例网页布局---------------------------------------------------------------------------- 1.盒子模型 --------------------------------------------------------------------------------------------------------------------- 2.当间距（边界距离）叠加的说明 -------------------------------------------------------------------------------------- 3.CSS+DIV布局的精髓------------------------------------------------------------------------------------------------------- 4.CSS排版理念 ---------------------------------------------------------------------------------------------------------------- 第八节：行为 ---------------------------------------------------------------------------------------------------- 1.定义---------------------------------------------------------------------------------------------------------------------------- 2.行为的“埋设” ------------------------------------------------------------------------------------------------------------ 3.常用触发条件 --------------------------------------------------------------------------------------------------------------- 相关主题
相关文档
最新文档
|