Dreamweaver 4教程使用Dreamweaver 4开始工作.docx
- 文档编号:2307164
- 上传时间:2022-10-28
- 格式:DOCX
- 页数:22
- 大小:374.20KB
Dreamweaver 4教程使用Dreamweaver 4开始工作.docx
《Dreamweaver 4教程使用Dreamweaver 4开始工作.docx》由会员分享,可在线阅读,更多相关《Dreamweaver 4教程使用Dreamweaver 4开始工作.docx(22页珍藏版)》请在冰豆网上搜索。
Dreamweaver4教程使用Dreamweaver4开始工作
第1章使用Dreamweaver4开始工作
随着互联网(Internet)的家喻户晓,HTML技术的不断发展和完善,随之而产生了众多网页编辑器。
从网页编辑器基本性质上可以分为所见即所得网页编辑器和非所见即所得网页编辑器(即源代码编辑器),两者各有千秋。
所见即所得网页编辑器的优点就是直观、使用方便、容易上手,在所见即所得网页编辑器中进行网页制作和在Word中进行文本编辑不会感到有什么区别,但它同时也存在难以精确达到与浏览器完全一致的显示效果的缺点。
也就是说在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到真正想要的效果,这一点在结构复杂一些的网页(如分帧结构、动态网页结构及精确定位)中便可体现出来。
非所见即所得的网页编辑器,就不存在这个问题,因为所有的HTML代码都在用户的监控下产生,但是,非所见即所得编辑器的先天条件注定了它的工作效率太低。
如何实现两者的完美结合,既能产生干净、准确的HTML代码,又具备所见即所得的高效率、直观性,这一直是网页设计师的梦想。
Dreamweaver基本上解决了以上的问题,是一个非常优秀的所见即所得网页编辑器。
Dreamweaver4可以满足Web开发人员的各种需要。
使用Dreamweaver4,在大大提高网页设计人员的生产效率的同时,还可以保持对源代码的完全控制。
对于网页设计的新手,也可以快速提高他们的工作效率,因为使用Dreamweaver4,可以轻松地可视化编辑加入网页的相关对象。
Dreamweaver4提供了友好的用户界面和强大功能的快捷工具,支持多种浏览器,可建立跨平台的网页,同时还可以制作不需要编写任何代码的动态网页。
它具有强大的网页排版及制作功能,如可通过层叠样式表格式化文本、通过层定位网页元素、通过时间链制作动画,以及使用库项目实现代码的重复使用等。
1.1Dreamweaver4新增功能简介
Dreamweaver是Macromedia公司推出的主页编辑工具。
它是一个所见即所得网页编辑器,支持最新的DHTML和CSS标准。
采用了多种先进技术,能够快速高效地创建极具表现力和动感效果的网页,使网页创作过程变得非常简单。
值得称道的是,Dreamweaver不仅提供了强大的网页编辑功能,而且提供了完善的站点管理机制,可以说,它是一个集网页创作和站点管理两大利器于一身的创作工具。
在学习使用Dreamweaver4之前,我们先了解Dreamweaver4的一些新增功能。
1.独特的往返HTML功能
这个功能可以同步访问设计视图(DesignView)和HTML源代码,可以打开用其他编辑器编辑的文档,但它不会改写手工输入的HTML标记或第三方标记。
这就使得Dreamweaver4自动生成的代码与手工输入的代码融为一体。
2.整合文本编辑器
现在Dreamweaver4增加了以代码为中心的新特性。
手工编写代码就如设计视图环境一样方便,可以自动缩排、标点平衡、选择多行后一次缩进。
可以在使用代码视图工具栏(CodeViewToolbar)的下拉列表定义的JavaScript函数之间轻松导航。
对于使用JavaScript编程的专业人员来说,这种代码导航无疑是一种高效的导航帮助。
输入代码时Dreamweaver4自动对HTML和JavaScript代码使用不同的颜色显示。
3.把主窗口分割为代码视图和设计试图
可以把Dreamweaver的主窗口分割为代码视图和设计试图。
能够查看整页代码而无需离开文档窗口。
这样,就可以在同一个窗口同时查看代码视图和设计视图,同时编辑多个文档的代码。
4.JavaScript调试器
使用新增的JavaScript调试器,可以直接在浏览器中调试客户端JavaScript脚本,观察JavaScript的执行,就像它在Netscape或IE浏览器中一样,因而能够更好地了解每种浏览器是怎样执行JavaScript的。
可以设置断点调试代码,然后在逐步执行代码的过程中观察变量的变化,及时发现编程错误。
5.编辑非HTML文档
可以把Dreamweaver4当作文本编辑器编辑非HTML文档,直接在代码视图(CodeView)中编辑JavaScript,XML和其他文本文件。
6.自定义标记数据库
使用自定义标记数据库可随时定义新的标记或编辑默认标记。
Dreamweaver4的可配置自定义数据库让你能够定制翻译引擎来支持属性代码。
7.超强页面排版功能
网页对象的排版一般有表格和图层两种方式,这两种方式各有优缺点,Dreamweaver4的LayoutView技术可以轻松地把两者的优点结合起来,用此功能编写的网页,任何浏览器都兼容,解决了后顾之忧。
Dreamweaver4中提供了两种可视化编辑方式,一种是大家再也熟悉不过的老版面,另一种是全新的版面排版方式。
它提出了一个全新页面排版概念,它可以使你轻松地拖曳出复杂的透明表格,而且绝无冗余代码。
8.MacromediaFlash文字和按钮
Flash动画向来让人津津乐道的是文件小、效果棒,而且可以随着视窗大小做不失真的缩放,这些都要归功于使用矢量图的优点。
使用Dreamweaver4的这个新功能,就算你不会使用Flash也可以在Dreamweaver4中直接插入Flash动画格式的文字或按钮,只要简简单单输入文字就可以了,比起传统的点阵图文字或按钮,文件更小、效果更漂亮。
不过很可惜的是,目前Flash文字和按钮还不支持中文。
9.双向绘图编辑
大家都知道在Fireworks中分割图形保存后,可以利用Dreamweaver4的Insert|InteractiveImages|Fireworkshtml命令,将Html,JavaScript一并插入,然后,在Dreamweaver4中右击图像,从弹出的菜单中选择EditwithFirework4命令,就可以马上启动Fireworks并把原PNG文件打开并开始编辑,这是非常方便的,而且Dreamweaver4把Fireworks与Dreamweaver结合的更紧密了,在Fireworks中编辑完图片不用保存,只需单击ReturnDreamweaver按钮,就可以立刻切换到Dreamweaver4中去,而且所有的修改都已经保存好了,当然也可以在Dreamweaver中方便地切换到Fireworks。
1.2Dreamweaver4的工作环境
所有的工作环境(包括工具栏、浮动面板等),都是通过XML加以控制,可根据需求进行调整。
另外Dreamweaver4提供完整的快捷键,大大提高了网页设计的效率,还可以自行定义快捷键对应的功能。
本章主要介绍Dreamweaver4的工作环境,以引导用户快速了解Dreamweaver强大无比的创作能力。
1.2.1认识Dreamweaver4的窗口结构
Dreamweaver由两大部分组成,即页面编辑器和站点管理器。
其中,页面编辑器是一个可视化的网页编辑器,网页制作都是在页面编辑器中完成的;站点管理器用于管理网站内的文件和目录,检验链接情况,并控制站内文件的上传。
一般来说,在做站点时应先建立好站点,再开始网页的制作,这样可以保证页面内文件链接的正确性。
启动Dreamweaver4后,会看到如图1.1所示的窗口和浮动面板。
图1.1Dreamweaver4界面组成
第一次看到如图1.1所示的窗口和浮动面板,对于一个用惯了微软应用程序的人来说,可能一时会感到手足无措。
事实上,Dreamweaver更像是一个从Macintosh计算机上移植而来的产品,而不像一个纯粹的Windows应用程序,它的使用方法与PageMaker之类的排版软件类似,而同微软建议的Windows应用程序的外观标准有一定的差别,Dreamweaver应用程序的外观同其异常灵活的功能特性分割不开,对于不同级别和经验的用户,都能够从这种应用程序外观上获得显著的工作效率。
Dreamweaver的用户界面令人耳目一新,这也使得有些人认为它不太适于初学者使用,其实对于网络这样的新生事物,谁又不是初学者呢?
只要下一点功夫,每一个人都可以很快从一名初学者成为高手。
Dreamweaver的开发者已经充分地为用户着想了,它的用户界面非常友好,下面就简单介绍一下,使大家对Dreamweaver有一个整体的了解。
一般来说,一个典型的Dreamweaver应用程序操作环境包括以下几个部分:
∙标题栏:
标题栏上显示当前正在编辑文档的标题和名称,它首先显示文档的标题,然后显示文档的文件名称。
注意:
文档的标题和文档的文件名称是不同的概念。
文件的标题通常在文档中的
∙菜单栏:
几乎所有的工作都可以通过菜单来完成,尽管利用浮动面板可以加快操作速度,但是有时为了节省屏幕空间,会将浮动面板关闭,这时利用菜单就显得尤为重要。
利用Window菜单,可以控制各种浮动窗口和面板的开启和关闭。
∙工具栏:
工具栏包含了可以让你快速往返于不同显示之间的按钮:
代码显示、分离显示和设计显示。
工具栏也包含了一些在每个显示里共同的指令。
当你在代码显示下工作时,选项菜单包含特殊的文本编辑操作。
∙文档窗口:
文档窗口显示当前所创建和编辑的HTML文档内容。
∙启动面板(Launcher):
启动面板上包含了用户最常使用的控制按钮,通过这些按钮,可以快速启动或关闭最常用的面板(Inspectors)和浮动面板(Palettes)。
在文档窗口下方的状态栏上也出现和启动面板相同的按钮,称作微型启动栏(Mini-Launcher),使得即使启动面板被关闭,用户也能够很容易地使用启动面板上的功能。
启动面板上的按钮类型是可以定制的。
∙对象面板:
在对象面板上包含了多种不同类型的按钮,用于在文档中创建不同类型的对象,例如图像、表格、框架等。
默认情况下,对象面板中显示的是常用工具组中的工具。
对象面板中第一行的对象组名称按钮,可切换对象面板。
例如,可切换到Frames,Characters,Forms等对象组。
∙属性设置面板:
该面板是页面编辑中较重要的面板。
它主要用于设置页面元素的属性,比如文字的大小、图片的高宽、表格的对齐方式、链接地址等。
值得一提的是,对于不同的元素,面板中的参数是不同的。
此外,单击属性设置面板右下角的按钮,可展开属性设置面板,此时可查看和设置更多参数。
∙可停靠浮动面板:
可停靠浮动面板是一个工具集合的控制框架,它仿佛一个船坞,可以将各种浮动窗口、面板放置在其中,组合成为选项卡的形式,以节省屏幕空间,必要时还可以将这些浮动窗口、面板从中剥离,成为独立的浮动面板。
∙状态行:
Dreamweaver4的状态行很有特色,它包括几个功能区,分别用于显示和控制文档源代码、显示页面大小、查看传输时间。
其最右方包含了和启动栏一样的按钮组合,称作“微型启动栏”,可以完成启动栏同样的功能。
系统从左至右显示了页面尺寸设置区、页面容量及传送时间,以及默认的导航条。
其中,单击页面设置区可打开屏幕分辨率设置列表,用户可从中进行选择。
例如,如果希望网页的最佳显示分辨率为800×600,则可单击该位置,然后从弹出的列表中选择760×420(800×600Maximized)。
至于页面容量及预计传送时间,由于其中未考虑图像尺寸、网络的繁忙程度等因素,因此,该数值仅供参考。
1.2.2工具栏
工具栏包含了可以让你快速往返于不同显示之间的按钮:
代码显示、分离显示和设计显示。
工具栏也包含了一些在每个显示里共同的指令。
当你在代码显示下工作时,选项菜单包含特殊的文本编辑操作。
要显示工具栏,选择View|Toolbar命令,打开如图1.2所
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Dreamweaver 4教程使用Dreamweaver 4开始工作 教程 使用 开始 工作
![提示](https://static.bdocx.com/images/bang_tan.gif)