Dreamweaver轻松掌握网页制作.doc

Dreamweaver 轻松掌握网页制作[font= 宋体][size=3][color=Green] 当你在网上冲浪时,会欣赏到很多制作精美的网站,在羡慕的同时, 你想亲手制作网页吗?你想让自己制作的网页功能更强大吗?好, 那我们就一起学习 Dreamweaver 吧,这可是制作主页的好工具呀! 你可能会说,我既不懂 HTML ,也没进行过程序设计,能学会吗?告诉你,一点儿都没问题, Dreamweaver 是可视化的网页制作工具, 很容易上手, 可以让你轻松地制作出自己的网页。慢着慢着,先告诉我什么是可视化?可视化的意思就是你在 Dreamweaver 中制作成什么样,在浏览器中就能看到什么样,也就是常说的“所见即所得”。那还等什么,快跟我学吧! 1 、第一次新鲜接触(1 )什么是 Dreamweaver 工欲善其事,必先利其器。 Dreamweaver 在多媒体方面颇有建树的 Macromedia 公司推出的可视化网页制作工具,它与 Flash 、 Fireworks 合在一起被称为网页制作三剑客,这三个软件相辅相承,是制作网页的最佳选择。其中, Dreamweaver 主要用来制作网页文件,制作出来的网页兼容性比较好, 制作效率也很高, Flash 用来制作精美的网页动画,而 Firework s 用来处理网页中的图形。[img]/homepage/dreamweaver/img/[/img] Dreamweave 字面意思为“梦幻编织”, 这一软件有着不断变化的丰富内涵和经久不衰的设计思维, 它能充分展现你的创意, 实现你的想法, 锻炼你的能力, 使你成为真正的网页设计大师。好吧,未来的网页设计大师们,让我们一起在 Dreamweaver 的空间驰骋,在网上编织我们的梦想吧! 1 、第一次新鲜接触(2 )软件界面介绍现在我们启动 DreamWeaver ,来见识一下它的面貌。在安装 Dreamweaver 3 之后,它会自动在 Windows 的“开始”菜单中创建程序组,打开“开始”菜单,选择“程序->Macromedia Dreamweaver 3 ->Dreamweaver 3”命令,便可启动 Dreamweaver (图 1) 。软件启动后,会新建一个空白的 HTML 文档等候编辑。[img]/homepage/dreamweaver/img/[/img] 我们看一下它的界面(图 2) 。上面是标题栏,显示出被编辑页面的标题,在括号内显示出文档所在目录及文件名, 如果有星号出现则表示页面中没保存的改动。标题栏下面是菜单, 里面列有软件的功能列表, 这与其它软件没什么两样。中间这一大块空白地方是编辑区, 我们就在这里制作网页。[img]/homepage/dreamweaver/img/[/img] 窗口最下面由三部分组成,从左向右分别为标签选择器( tag selector ) 、页面信息和快速启动栏。最左面的是标签选择器,可以用来显示光标所在位置或所选对象的层次结构,在页面中选定某个对象后,标签选择器中会将选择的标签加粗显示,比如我们选中一个图形, 则字样会被加粗(图 3) 。标签选择器的用途很大,以后我们会经常使用。[img]/homepage/dreamweaver/img/[/img] [img]/homepage/dreamweaver/img/[/img] 底栏中间是一些页面信息,第一项 800 × 600 ,用于显示和控制文档窗口的大小,单击旁边的小箭头,可以从列表中选择窗口的尺寸(图 4)。第二项 7K/2sec ,用于显示和估计文档的大小及下载这个页面所需时间,包括所有与其相链接的图片及 Shockware 电影。底栏最右侧的一排按钮叫迷你发射器( Mini-Launcher )(图5), 其实就是打开常用窗口快捷工具栏, 比如 Site ( 站点管理器)、 Library ( 库管理)、 CSS Styles ( 样式编辑器)、 Html Source (源代码编辑器)等窗口。[img]/homepage/dreamweaver/img/[/img] 假设我们要调出 HTML 源代码编辑器,可以在发射器上点最后一个按钮,也可以按下 F10 键。按下 Shift+F4 , 可以看到迷你发射器放大的样子, 叫做“ Launcher ”面板, 点击这里弹出相应的窗口,我们以后会经常用到。 DreamWeaver 窗口中还有多个面板,这些浮动面板中有一些常用功能的快捷方式, 和 PhotoShop 很象,不要被这些面板吓倒,真正用起来还是很方便的。这是对象面