Dreamweaver

1. 网页制作 《 Dreamweaver MX 2004 的基本应用》

3. 1.1 网页的布局 网页布局大致可分为： “ 国”字型 ( 例如： CCTV 网站……） 拐角型 （例如： TCSZ 网站…… 例： 1 2 左右框架型 （例如：雅虎网站） 上下框架型 （上下分为两页的框架） 综合框架型 （例如：新浪网、搜狐网） 封面型 （一般由标题和图片构成 例： 1 2 3 ） Flash 型 （功能强大、信息丰富、视觉 及听觉效果强大的相当于多媒体。例 : 1 2 3 ） 变化型 （即上面几种类型的结合与变化）

4. 所谓第一屏，是指我们到达一个网站在不拖动滚动条时能够看到的部分。那么第一屏有多“大”呢？其实这是未知的。一般来讲，在 800*600 的屏幕显示模式 ( 这也是最常用的 ) 下，在 IE 安装后默认的状态 ( 即工具栏地址栏等没有改变 ) 下， IE 窗口内能看到的部分为 778px*435px ，一般来讲，我们以这个大小为标准就行了，毕竟，在无法适合所有人的情况下，我们只能为大多数考虑了。 关于第一屏

8. A B C A 图片格式 BMP 482KB B 图片格式 GIF 92KB C 图片格式 JPG 45KB

22. 第二章 Dreamweaver MX 2004 的基本应用 一、 Dreamweaver 的版本历史 二、 Dreamweaver MX 2004 界面介绍 三、 Dreamweaver MX 2004 基本操作

23. 一、 Dreamweaver 的版本历史 Dreamweaver 的发展经历了如下版本： Dreamweaver 1.0 Dreamweaver 2.0 、 2.01 Dreamweaver 3.0 、 Dreamweaver 4.0 对于初学者来讲，下面两个版本的 Dreamweaver 在使用上不会有太大的差别。 Dreamweaver MX （ 6.0 ） Dreamweaver MX 2004 （ 7.0 、 7.01 ） 其功能更加强大，特别是提供了对微软 ASP.NET 的支持，不需要编写任何代码，即可实现动态的网页。并且在编写代码时，提供了智能的提示，便于我们手工编写代码。 此外， Dreamweaver MX 还加入了代码自动完成功能，会按照用户写的代码片段自动给出提示，协助我们提高编写代码的效率。

24. 第一节 起始页、文档窗口 二、 Dreamweaver MX 2004 界面介绍 一、起始页 运行 Dremweaver 程序，最先打开一个起始页，如下图所示。

25. 二、文档窗口 文档窗口是编辑网页的区域网页的设计和代码编辑均在文档窗口中进行，如下图。 上图中：①为标题栏 ②为菜单栏 ③为插入工具栏 ④为文档窗口 ⑤为属性面板 ⑥为其它活动面板

26. 三、菜单概述 “ 文件”菜单和“编辑”菜单 包含“文件”菜单和“编辑”菜单的标准菜单项，例如“新建”、“打开”、“保存”、“保存全部”、“剪切”、“复制”、“粘贴”、“撤消”和“重做”。“文件”菜单还包含各种其他命令，用于查看当前文档或对当前文档执行操作，例如“在浏览器中预览”和“打印代码”。“编辑”菜单包含选择和搜索命令，例如“选择父标签”和“查找和替换”。在 Windows 中，“编辑”菜单还提供对 Dreamweaver 菜单中“首选参数”的访问；在 Macintosh 中，使用 Dreamweaver 菜单可以打开“首选参数”对话框。 “视图”菜单 使您可以看到文档的各种视图（例如“设计”视图和“代码”视图），并且可以显示和隐藏不同类型的页面元素和 Dreamweaver 工具及工具栏。 “插入”菜单 提供“插入”栏的替代项，用于将对象插入您的文档。 “修改”菜单 使您可以更改选定页面元素或项的属性。使用此菜单，您可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不同的操作。 “文本”菜单 使您可以轻松地设置文本的格式。

27. “ 命令”菜单 提供对各种命令的访问；包括一个根据您的格式首选参数设置代码格式的命令、一个创建相册的命令，以及一个使用 Macromedia Fireworks 优化图像的命令。 “ 站点”菜单 提供用于管理站点以及上传和下载文件的菜单项。 提示：以前版本的 Dreamweaver 中的“站点”菜单的部分功能现在可以在“文件”面板的“选项”菜单中找到。 “ 窗口”菜单 提供对 Dreamweaver 中的所有面板、检查器和窗口的访问。（要访问工具栏，请参见“视图”菜单。） “ 帮助”菜单 提供对 Dreamweaver 文档的访问，包括关于使用 Dreamweaver 以及创建 Dreamweaver 扩展功能的帮助系统，还包括各种语言的参考材料。

28. 第二节 插入工具栏及其它面板 一、插入工具栏 插入工具栏的作用是向当前光标位置插入对象。单击插入工具栏上不同的图标，可以插入不同类型的对象。同时，也可以选择不同的插入工具栏，单击插入工具栏左侧的“常用”按钮可以弹出如图所示的下拉菜单。 选择“显示为制表符”选项可以使插入工具栏显示为层叠的选项形式，如下图。

29. 分别选择布局、表单、文本、 HTML 、应用程序、 Flash 元素，如下图所示不同形式的制表符工具栏。 以上都是有关插入工具。

30. 二、其它面板 除了上面介绍的面板之外， Dreamweaver 还有许多其它面板，如行为面板、框架面板、文件面板和代码面板等，它们都是针对不同的对象起作用，这些面板将在后面的章节中进行介绍。 在制作网页过程中，用户可以根据需要关闭或打开这些面板和工具条，具体操作步骤如下： 1 、选择菜单 “查看 -- 工具栏 -- 插入” 可以打开或关闭插入工具栏。 2 、选择菜单 “查看 -- 工具栏 -- 文档” 可以打开或关闭文档工具栏。选择菜单 “查看 -- 工具栏 -- 标准” 可以打开或关闭标准工具栏。 3 、 选择菜单 “查看 -- 隐藏面板” 可以隐藏所有的面板。当所以面板处于隐藏状态时。选择菜单 “查看 -- 显示面板” 可以显示所以的面板。 4 、 如果要打开某一个特定的面板，可以选择菜单“窗口”中相应的菜单顶。比如依次选择菜单 “窗口 -- 文件” 就可以打开“文件”面板。

31. 三、 Dreamweaver MX 2004 基本操作 Dreamweaver 启动过程 ① 单击“开始”，指向“程序”，如图 1-1 所示； ②单击箭头，在单击 Macromedia ，然后从中选择 Macromedia Dreamweaver MX 2004 ，即可启动 Dreamweaver 。 图 1-1 Dreamweaver 的启动方式

32. 第一节 创建站点 Dreamweaver 站点是文件和文件夹的集合，对应于网络服务器上的 Web 站点 , 它提供了一种组织所有 Web 站点关联的文档的方法，可以利用 Dreamweaver 将站点上传到服务器，自动跟踪和维护链接、管理文件以及共享文件。 一、站点定义 具体操作步骤： (1) 选择菜单栏中“站点 -- 编辑站点”。在下图中选择“新建站点”按下按钮。

33. （ 2 ）在下图中，在“您打算为您的站点起什么名字？”输入框中输入你想给你的站点起的名字。

34. （ 3 ）单击“下一步”按钮，在出现的对话框中可以设定是否要使用服务器技术，这里选择不使用

35. （ 4 ）单击“下一步”按钮，在出现的对话框中可以设置如何操作文件。这里选第一项，即在计算机上编辑网站副本，等完成后再传到服务器上。然后还可以选择把网站的文件保存在计算机上的什么位置，单击 按钮可以选择保存在计算机上的哪个文件夹中。 （ 5 ）单击“下一步”按钮，可以在出现的对话框中可以设定计算机与服务器的连接方式 。可以在下拉列表中 选择、无、 FTP 、本地 / 网络等几种方式，在这里选择“无”。 （ 6 ）单击完成站点的建立。

36. 站点建好以后，打开站点右边的工作面板，在站点内按右键，在出现的菜单内选择“新建文件”，同是改名为“ index” ，这就是你所要制作网页的首页，建好以后就可以直接在其页面内 输入文字或者插入图片 。 【小提示】 1 、网站第一页的名字通常是 index.htm 或 index.html 。其它页面的名字可以自己取。 2 、在网页上最常用的是宋体字。不要将特殊的字体加到列表中使用，因为别人电脑上未装就看不到。如果需要用的话，要做成图片后再使用。 3 、在网页上打入空格的办法是：把输入法调为全角。 4 、在网页上换行的办法是： shift+ 回车键 。只按 回车键 则为换段。 第二节 创建页面

37. 第三节 用表格定位网页 一、创建表格 在 Dreamweaver MX 2004 中运行“插入->表格”命令，弹出属性设置窗口，然后就可以设定表格的行数和列数、表格的宽度、边框的宽度，同时还可以设定表格的样式，根据自己的需要来设置表格的相应属性即可。 【小提示】 表格的宽度和高度可以通过浏览器窗口百分比或者使用绝对像素值来定义，比如设置宽度为窗口宽度的 60 ％，那么当浏览器窗口大小变化的时候表格的宽度也随之变化；而如果设置宽度为 400 像素，那么无论浏览器窗口大小为多少，表格的宽度都不会变化。 使用表格可以清晰地显示列表的数据，实际上表格的作用远远不止显示数据，它在网页定位上一直起着重要的作用，尤其是对于使用非 IE 浏览器的网友来说，使用表格定位的网页比使用图层定位的网页更具有优势。

38. 二、基本使用 1 、点击插入 / 表格，打开表格面板进行设置。行数、列数、宽度、边框等，“单元格填充”为单元格内侧与内容的距离；“单元格间距”为单元格之间的距离，单位均为像素。 2 、插入表格后，在表格的边框上点击一下，可以全选整个表格。然后在下面的属性面板里可以进行各种设置。 3 、把光标移到其中一个单元格，此时看到的属性面板，就是单元格的属性面板。也可以进行各种关于单元格的操作。如背景色、背景图、边框、合并、拆分等。 【小技巧】 制作细线表格 1 、选中整个表格，设置其背景为黑色（该颜色即表格线的颜色）。 2 、选中所有单元格，设置其背景为白色。 自动格式化表格 1 、先制作好一张表格，然后选中。 2 、 选菜单中的命令 / 格式化表格。即可以其中选择预设好的一些表格样式。

39. 【小提示】 通常选取整个表格比较困难下面是关于选定表格的四种方法。 1 ． 把鼠标移动到表格右边界外侧，按下鼠标之后往左拖拽，这样可以快速选取整个表格。 2 ． 运行“修改->表格->选择表格”命令选择整个表格。 3 ． 在单元格中右击鼠标，并且从弹出菜单中选择“表格->选择表格”命令选取整个表格。 4 ． 用鼠标点击任一个单元格，接着按两下“ Ctrl ＋ A” 组合按钮选取整个表格。 三、表格定位 虽然可以实现最基本的网页定位，但是这种方法也并不是没有缺点，它的最大问题在于表格内容下载比较耗时，往往要等一个表格中全部内容下载完成后才能显示该表格内容，因此尤其要注意表格的嵌套使用，尽量不要嵌套过多的表格以影响页面的下载速度。

40. 第四节 模板的应用 运行 “文件”——“新建” 命令，在窗口中选定 “基本页”——“ HTML 模板” 选项，点击创建按钮之后即可创建一个模板。 通常在一个网站中会有几十甚至几百个风格基本相似的页面，如果每次都重新设定网页结构以及相同栏目下的导航条、各类图标就显得非常麻烦，不过我们可以借助 Dreamweaver MX 2004 的模板功能来简化操作。其实模板的功能就是把网页布局和内容分离，在布局设计好之后将其存储为模板，这样相同布局的页面可以通过模板创建，因此能够极大提高工作效率。 一、制作模板 制作模板和制作一个普通的页面完全相同，只是不需要把页面的所有部分都制作完成，仅仅需要制作出导航条、标题栏等各个页面的公有部分，而把中间区域用页面的具体内容来填充。

41. 二、使用模板 有了模板之后，接下来就要在编辑网页时候使用它们了。只要在 Dreamweaver MX 2004 主窗口中运行 “文件->新建” 命令即可看新建窗口，接着进入 “模板”标签 即可查看到已经保存的模板，从中选取一种还可以在右部的预览区进行预览，最后挑选一款中意的模板并点击下部“创建”按钮打开这个模板。 三、修改和更改模板 在通过模板创建了若干个页面之后，如果需要更改页面或者增加栏目，再对所有的页面手工修改则非常麻烦，因此我们可以通过 Dreamweaver MX 2004 的模板修改功能来解决这个问题。比如我们对模板进行了修改之后，运行 “文件->保存” 命令来保存模板，这时候会弹出提示框询问是否 更新 所有使用了该模板的页面，确认之后就会显示出更新的页面总数以及更新的时间等信息。

42. 第五节 用框架构建网页 我们经常登录一些论坛之后，可以看见左边是每个讨论区的名称，点击任意一个讨论区就可以在右部区域中看见相应讨论区的内容，不过左右部分是独立显示的，例如拖动左边的滚动条不会影响右侧的显示效果。其实这就是页面中利用了框架技术，因此可以把浏览器的显示空间分割为几个部分，每个部分都独立显示网页内容。而且把几个框架结合在一起构成框架集，能够让页面具有更为丰富的效果。 一、创建框架和框架集 【小提示】 如果边框拖拽错了，只要用鼠标把需要删除的线拖拽到“父框架”的边框上即可删除它 。 二、编辑框架

43. 第六节 图层的使用 一、创建图层 二、嵌套图层 所谓嵌套图层指的是一个图层创建在另外一个图层中 。实际上制作这种嵌套图层很简单，只要创建了一个父图层之后用鼠标点击图层内部，并且再次插入一个图层即可。不过嵌套的图层并不意味着子图层必须要在父图层内部，它们之间存在着继承关系。 三、图层的 “ Z— 顺序” 和表格相比，图层最大的优势在于图层可以重叠，为了表示各个图层哪个在上面，哪个在下面，就要给每个图层设定一个序号，这个序号就是“ Z- 顺序”，它的意思就是除了屏幕的 X 和 Y 坐标之外，人为增加一个垂直于屏幕的 Z 轴。 图层是网页的一个区域，在一个网页中可以有多个图层存在，它最大的魅力在于各个图层可以重叠，并且可以决定每个图层是否可见，同时也能够自定义各图层之间的层次关系。在熟练掌握了图层技术之后，就可以给网页提供强大的页面控制能力。

44. 第七节 创建 CSS 样式表 1 、在网页上输入一些文字。 2 、打开“ CSS 样式”面板，也可以用“窗口 /CSS 样式”打开。 3 、面板下方有四个按钮，分别是附加样式、新建样式、编辑样式、删除样式。 4 、点击“新建样式”，打开对话框。输入名称，注意名称前有一个点号。如取名为 .s001( 中文名不行 ) 。类型：创建自定义样式，定义在：仅对该文档。 5 、此时再打开一个对话框，在左边的分类里选择“类型”，然后在右面设置字体、大小、颜色等。然后确定。 6 、选中页面上的文字，然后点击窗口里的样式 .s001 。此时这段文字就应用了 CSS 样式。 7 、如要对刚才定义的 CSS 样式进行修改，可以点中它，然后点下面的编辑样式按钮。

45. 第八节 库的应用 网站中有些内容需要反复使用，比如自己制作的一个网站图标等，此时将这个组件存为在库里，可以随时调用。 1 、 打开一个页面，选择需要保存的组件，比如一个图标。 2 、 点击菜单窗口 / 资源，打开资源窗口。然后在其中选最下面一本书样的按钮，打开库面板。 3 、 点击下面的新建按钮，就将刚才选中的图标保存到库里了，此时还可以给它取名。 4 、 在一个新页面上要应用库里的内容时，打开库面板，选中需要用的图标，然后点击下面的“插入”即可。 【小提示】例如将一些经常要用到的“导航条”也可以做成“库”保存，需要的时候就可以在网页上插入，从而节省了大量了时间。

46. 第九节 用行为丰富网页效果 一、弹出消息框 进入网站首页的时候可以看见一个弹出的消息框。 二、弹出新窗口 进入网站首页的时候可以看见一个弹出的新网页。 三、链接解释文字 在浏览一些网页的时候，将鼠标放在图像或者链接上会有解释文字出现。 行为可以说是 Dreamweaver MX 2004 中最有特色的功能，它可以让你不用书写一行代码即可实现多种动态网页效果。行为的关键在于 Dreamweaver MX 2004 中提供了很多动作，其实就是标准的程序，每个动作可以完成特定的任务。这样，如果你所需要的功能在这些动作中，那么就不要自己编写程序了

47. 第十节 制作网页内的链接 一、链接图片和文字 提示：在建立链接的时候需要注意两种方式。 1 ．绝对地址：例如 www ． abc ． com/test ． htm ； 2 ．相对地址：比如 download/1 ． htm ，说明页面 1 ． htm 在服务器的根目录中。 在经过前面几个部分的操作之后，我们的网页已经图文并茂，具有相当的效果了，但是这对于网页来说还不够，为了网站中的众多网页能够成为一个有机的整体，必须将各个网页通过超链接方式联系起来，这样才能够让浏览者在不同的页面之间跳转。

48. 二、在一张图片上设定多个链接 有些网页在一张大图片上做了多个链接，这样访问者可以通过点击图片的不同位置进入不同的页面，这是应用了 图像热区域 的概念。 三、定制页面内跳转的链接（锚式标记） 如果你经常在网上订阅免费的电子杂志，或者浏览超长的页面应该对这种标签链接不陌生，这是通过一个类似目录的列表来方便地跳转到页面内任何部分。 【小提示】 如果想指向另外一页中的某个位置也可以，把这个锚式标记放过去就行了。 四、快速检查网页链接 上网冲浪的时候，最讨厌的就是看见“ Web Server error 4004:File Not Found” 之类的出错信息。由于一个网站中的的链接数量很多，稍有不甚就会导致很多链接出错，不过在 Dreamweaver MX 2004 中可以很方便地对链接进行检查。

49. 第十一节 宣传自己的网站 如何让网站地址让别人知道，方法有二： 1 、 用专门的软件，可以将网站登录到各大搜索引擎。 2 、 手工登录。如打开 百度（ www. baidu .com ） , 在下面有个链接“网站登录”，点击后会被要求填写网站地址、名称、内容等，然后就被收入百度的搜索引擎了，这样别人就可以搜索到你的网站了。

50. 完 祝大家学习愉快！