位置:首页 > 软件操作教程 > UI设计软件 > Adobe Dreamweaver > 问题详情

什么是DW啊,是做网页的是Dreamweaver这个软件吗????刚开始学应该学什么啊?

提问人:李娟发布时间:2020-09-16

一、轻松掌握网页制作


--------------------------------------------------------------------------------


当你在网上冲浪时,会欣赏到很多制作精美的网站,在羡慕的同时,你想亲手制作网页吗?你想让自己制作的网页功能更强大吗?好,那我们就一起学习Dreamweaver吧,这可是制作主页的好工具呀!


你可能会说,我既不懂HTML,也没进行过程序设计,能学会吗?告诉你,一点儿都没问题,Dreamweaver是可视化的网页制作工具,很容易上手,可以让你轻松地制作出自己的网页。


慢着慢着,先告诉我什么是可视化?可视化的意思就是你在Dreamweaver中制作成什么样,在浏览器中就能看到什么样,也就是常说的“所见即所得”。


那还等什么,快跟我学吧!


1、第一次新鲜接触


(1)什么是Dreamweaver


工欲善其事,必先利其器。Dreamweaver在多媒体方面颇有建树的Macromedia公司推出的可视化网页制作工具,它与Flash、Fireworks合在一起被称为网页制作三剑客,这三个软件相辅相承,是制作网页的最佳选择。其中,Dreamweaver主要用来制作网页文件,制作出来的网页兼容性比较好,制作效率也很高,Flash用来制作精美的网页动画,而Fireworks用来处理网页中的图形。


图1 Dreamweaver启动画面


Dreamweave字面意思为“梦幻编织”,这一软件有着不断变化的丰富内涵和经久不衰的设计思维,它能充分展现你的创意,实现你的想法,锻炼你的能力,使你成为真正的网页设计大师。


好吧,未来的网页设计大师们,让我们一起在Dreamweaver的空间驰骋,在网上编织我们的梦想吧!


、第一次新鲜接触


(2)软件界面介绍


现在我们启动DreamWeaver,来见识一下它的面貌。


在安装Dreamweaver 3之后,它会自动在Windows的“开始”菜单中创建程序组,打开“开始”菜单,选择“程序->Macromedia Dreamweaver 3->Dreamweaver 3”命令,便可启动Dreamweaver(图1)。软件启动后,会新建一个空白的HTML文档等候编辑。


图1启动Dreamweaver 3


我们看一下它的界面(图2)。上面是标题栏,显示出被编辑页面的标题,在括号内显示出文档所在目录及文件名,如果有星号出现则表示页面中没保存的改动。标题栏下面是菜单,里面列有软件的功能列表,这与其它软件没什么两样。中间这一大块空白地方是编辑区,我们就在这里制作网页。


图2 Dreamweaver界面介绍


窗口最下面由三部分组成,从左向右分别为标签选择器(tag selector)、页面信息和快速启动栏。最左面的是标签选择器,可以用来显示光标所在位置或所选对象的层次结构,在页面中选定某个对象后,标签选择器中会将选择的标签加粗显示,比如我们选中一个图形,则<img>字样会被加粗(图3)。标签选择器的用途很大,以后我们会经常使用。


图3标签选择器图4显示和控制窗口的大小


底栏中间是一些页面信息,第一项800×600,用于显示和控制文档窗口的大小,单击旁边的小箭头,可以从列表中选择窗口的尺寸(图4)。


第二项7K/2sec,用于显示和估计文档的大小及下载这个页面所需时间,包括所有与其相链接的图片及Shockware电影。


底栏最右侧的一排按钮叫迷你发射器(Mini-Launcher)(图5),其实就是打开常用窗口快捷工具栏,比如Site(站点管理器)、Library(库管理)、CSS Styles(样式编辑器)、Html Source(源代码编辑器)等窗口。


图5迷你发射器和“Launcher”面板


假设我们要调出HTML源代码编辑器,可以在发射器上点最后一个按钮,也可以按下F10键。按下Shift+F4,可以看到迷你发射器放大的样子,叫做“Launcher”面板,点击这里弹出相应的窗口,我们以后会经常用到。


DreamWeaver窗口中还有多个面板,这些浮动面板中有一些常用功能的快捷方式,和PhotoShop很象,不要被这些面板吓倒,真正用起来还是很方便的。


这是对象面板(即Object面板),如果页面上看不到,可以按下Ctrl+F2键将其调出(图6)。这个面板里集成了“Insert”主菜单中的命令,用于在网页中插入图形、表格等内容。现在看到的是“普通面板”,单击面板上部“Common”旁的小三角,弹出一个菜单,可以切换到其它对象面板中,比如选择“Frames”,就切换到框架面板中,里面提供了创建框架的快捷按钮。


图6对象面板及面板间的切换


这些图标都很直观,相信你一眼就能看出来它是做什么的。如果不知道某个按钮的功能,可以将光标停在此按钮上,这时就会出现提示信息,显示其功能。


这是属性面板(Properties),如果页面上看不到,可以按下Ctrl+F3键将其调出。属性面板主要用来设定元素的属性。这个面板比较灵活,变化也很多,它随着我们选择对象的不同而不同。比如我们选择了一幅图片,那么属性面板上将出现图片的相应属性(图7),如果我们选择的是表格,它相应的会变化成表格的相应属性。


图7收缩时的属性面板


属性面板中有一个向下的小三角图标,单击后将出现更多的扩展属性(图8)。再次单击小三角图标,将关闭扩展属性,恢复到最初状态。


图8扩展后的属性面板

继续查找其他问题的答案?

相关视频回答
回复(0)
返回顶部