WD1X.COM - 问答一下,轻松解决,电脑应用解决专家
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
注册表系统命令DOS命令Win8
存储光存储鼠标键盘
内存维修打印机维修
WinXPWin7Win11Linux
硬件综合机箱电源散热器手机数码
主板维修CPU维修键盘鼠标维修
Word教程Excel教程PowerPointWPS
网络工具系统工具图像工具
数据库javascript服务器
PHP教程CSS教程XML教程

Dreamweaver基础教程

更新时间:2005-12-30 19:09 作者:45IT收集点击:

新的特性主要有

:加强了HTML编辑,使设计页面更容易;改进了站点和设备管理,使你能够创建自己的Flash对象,使工作流程更加流畅;提高了团队合作能力,允许自定义和对Dreamweaver4进行扩展。

一、代码编辑功能的增强

我们注意到Dreamweaver4的工具条有了很大的改变。(见图1)


图1 Dreamweaver4的新的工具条

左侧有三个按钮:分别是显示代码窗口(Show Code View)、显示代码和设计窗口(Show Code and Design View)以及显示设计窗口(Show Design View)。你可以选择其中一个视图来观察页面。而且新的工具条使进入一般使用的特性诸如在浏览器中预览和设计笔记(Design Notes)变得非常方便。具体我们可以参阅后面章节中对工具条的详细介绍。 

代码窗口提供了一个在Dreamweaver文件窗口中直接观看HTML代码的全新方式。当然你也可以直接在代码窗口编辑非HTML文件,例如JavaScript文件或XML文件。 
完整代码编辑器:Dreamweaver4已经有了其完整的代码编辑器――代码窗口和代码监视器。你可以使用设置文字换行,代码缩进,实时语法颜色等其他功能。再也不必为Dreamweaver的代码编辑器太简陋而遗憾了。 
查询面板(Reference Panel)是针对HTML、JavaScript和 CSS的快速查询工具。它提供了你在代码窗口(或代码监视器)中处理的特殊标签的信息。 
代码导航弹出式菜单(The Code Navigation pop-up menu )允许你在页面中为JavaScript 程序选择代码,有了这个菜单,在代码窗口工作环境中你可以迅速地操纵代码。 
JavaScript调试器使你在Dreamwaeaver4中可以对 JavaScript文件进行调试。例如你可以设置断点来控制你来检查的代码。 
二、页面设计的更为简捷

□ 版面窗口(Layout view)让你能通过往画好的箱格(表格或表单元)中添加内容的方式更加快捷地设计你的网页。
□ 增强型模板(Improved templates)使你更方便地在模板文件中确定可编辑区域。新的模板显示一个标签,包括可编辑区的名称和一个装订边框。
□ CSS层叠样式表(CSS style sheets)现在可以在你创建一个新样式前就被定义。你也可以通过层叠样式表面板上的一个键轻松地导入一个已存在的样式表。
 

 

三、整体性的改良

在Dreamweaver4中可以直接建立Flash 按钮和Flash文体。你可以从一系列预设定的Flash 按钮中拾取一个插入文件中,或者你也可以让你的Flash设计者为你创建自定义按钮模板。 
环程剪辑(Roundtrip slicing )可以让你在Dreamweaver4和Fireworks 4间无缝切换。你也可以在Dreamweaver4或Fireworks 4中进行编辑然后在两处都保存更改。 
网页安全色拾取器(The Web-safe color picker)使你轻松匹配图形颜色。只要点击一下,你就可以从桌面的任意地方选择一种颜色,然后拾取器会吸取并转化为最接近的网页安全色。 
四、工作流程的更加流畅

□ 设置面板允许你管理你的站点设置。你在中央位置可以看到所有的图形、颜色、外部URL和脚本语言,还有Flash、Shockwave、QuickTime、模板和库元素等。先设置,然后拖入HTML文件中的适当位置。你也可以在最喜欢的列表中保存常用的设置用于其他站点。
□ 增强的设计笔记:当一个站点是多人共同维护时,设计笔记的优点就体现出来了。你可以把你做的修改写到一个记事文体里,也可以把设想写下来保存在这里以便于其他同行交流。在Dreamweaver4的站点窗口里,你可以直接插入或观看设计笔记的内容。
□ 整合email:你可以通过Dreamweaver4的email与合作同事进行交流。当其他同事检查完一个文件时,你可以点击他的名字给他发email信息。
□ 站点报告:你可以使用几个预先定义好的报告来测试普通HTML文件中的问题,比如说文件未命名或缺少标签。当然你也可以根据需要自定义报告,在报告结果窗口中显示报告结果和打开有问题的文件。
□ 整合资源安全(SourceSafe):如果你有资源安全工具,当在Dreamweaver4环境中你就可以向资源安全中登记和撤消文件。 
□ 整合WebWAV协议:可以用Dreamweaver4中整合的WebWAV协议来传递文件。
□ 扩展管理器:仅点击一键就可以安装扩展件。你可以访问Exchange下载有用的扩展件使你工作更方便。
 
五、共通的用户界面

快捷键:现在Macromedia公司的Web制作的发布产品都有了全新的统一的快捷键界面。这使得你能编辑已存在的快捷键,为菜单项创建新的快捷键,删除你不需要的快捷键。你也可以在一系列快捷键中切换。 
窗口管理:窗口管理功能也得到了很大提高。所以窗口都各司其位。当你打开一个新窗口时,Dreamweaver4会防止它与可见面板交叠,而保持面板的可见。 
面板:在Dreamweaver4中,面板有个新的Macromedia风格,并可与其他Macromedia的产品跨平台动作。所有的面板都有其图标和文体标识,你可以轻松区分它们。在Window操作系统Macintosh系统中,面板均使用系统颜色和字体,并具有一致的吸取和拖拽功能。 
一、Dreamweaver4基础

 

1. Dreamweaver 4.0 的工作区

在不平的工作应用级别下,Dreamweaver4有着不同形式的工作区界面,下面是一种常见的界面所包括的组件:


文件窗口显示正在编辑的当前文件。
发布栏包括多个按钮,通过它们可以打开或关闭最常用的监视器和面板。你也可以从菜单里单独拉出发布器的浮动面板,显示的图标和发布栏里是一样的。在面板设置中你可以自行设定你需要出现在发布栏或发布器中的图标。
工具条上的按钮和下拉菜单使你可以以不同的方式观看文件窗口,也可以设置视图选项,进行一些诸如预览等常用操作。
在文件窗口单击右键,就会弹出内容菜单。你可以通过内容菜单快速对当前所选对象进行编辑操作。
从对象面板里可以创建和插入不同类型的众多对象,比如图形、表格、层和框架等。在Dreamweaver4中,对象面板的下方多了两个选项:布局(layout)和视图(view),当视图选定为标准(standard)时,布局是不起作用的;当选择布局视图时,你可以在上面的布局选项中选择“画布局单元格”(Draw Layout Cell)还是“画布局表格” (Draw Layout Table)。这对于用表格的形式布局管理你的页面是非常方便有用的。
属性监视器显示所选定的对象或文本的属性,当然你可以在里面修改各项属性。
除上述提到的以外,Dreamweaver4中还有许多其他的监视器、面板和窗口,例如历史面板和代码监视器等。需要时我们可以从菜单的窗口项中把它们调出使用。
2.Dreamweaver4的不同工作界面
2.1 概述

在Dreamweaver4中,你可以工作在不同的界面方式中:设计视图,代码视图或设计代码双重显示视图。你可以通过工具栏左边的三个按钮进行切换。见右图: ,图示缺省按下的第三个按钮是设计视图,按下左边第一个按钮显示代码视图,中间的即为设计代码双重显示视图。
代码视图:创建一个文件,或对文件进行编辑,Dreamweaver4会自动在后台生成相应的HTML代码。对代码进行检查和编辑,可以使用Dreamweaver4的代码编辑器之一。
设计视图:在设计视图里显示文件的可视界面,不显示其代码。在设计视图环境中,你可以选择有两种视图选择:布局视图(Layout view)和标准视图(Standard view)。见右图: 在对象面板的最下方,有一个View选项,下面有两个小图标,按下左边为标准视图,右边则是布局视图。你可以根据需要在这两个视图间切换。

在布局视图中你可以设计一个页面的布局并在其中添加需要的图像、文本和其他对象。在标准视图中,你可以插入层,创建框架文件,创建表格或其他在布局视图中不能进行的设计操作。
文件窗口:在设计视图中,文件窗口以几近似于其在浏览器窗口中的显示效果显示当前文件。文件窗口的标题栏显示页面标题,括号内的文件所在文件夹名称,文件名,如果该文件包含未保存的修改文件名前还会注有一个*号。
  文件窗口底部的状态栏给出了当前文件的其他信息。见下图:


标签选择器显示控制被选文本或对象的HTML父标签。点击每个标签则在文件窗口对应位置就会高亮显示。如果点击<body>则整个文件体被选中。 
窗口尺寸下拉框使你可以改变文件窗口为预设的或自定义的大小。
在窗口尺寸下拉框右边,我们看到文件的大致大小和页面下载时间,包括所有关联的图像和其他媒体文件。
发布工具栏在文件窗口的底部右边(见图),默认状态下,发布工具栏中包含站点窗口、设置面板、HTML风格面板、层叠样式表(CSS)风格面板、行为面板、历史面板和代码监视器。


2.2 改变文件窗口大小

文件窗口状态栏以像素级显示窗口的当前尺寸。点击窗口尺寸,Dreamweaver4显示窗口尺寸下拉框,你可以用它来设置窗口尺寸以适合任何常见显示器的尺寸。想要使设计出的页面看上去大小正合适,你可以调整文件窗口尺寸到任何预设定的尺寸,编辑这些预定义的尺寸或创建新的尺寸(见下图)。


注意:窗口大小反映了浏览器窗口的内部尺寸,且没有边界;显示器的分辨率在括号里给出。例如,如果你的网页访问者使用的是800 x 600分辨率下的IE或Netscape浏览器,推荐你使用下拉框中的“760 x 420 (640 x 480, Default)”的尺寸大小。
如果你想使用自己定义的尺寸大小,可以点击下拉框最下一行“编辑尺寸(Edit Sizes) Edit Sizes”,在弹出的对话框中进行设置,见下图:


在空白的框中输入你想建立的尺寸的宽高数值和对这一尺寸的描述,点击OK就保存了这一设置。当然要想删除它,只要在尺寸数值上单击右键,在弹出菜单中选Delete就把它删除了。

 

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容