网页制作第1讲Dreamweaver基础知识

2018/10/19
40
插入栏的分类菜单 插入栏
以选项卡显示插入栏
2018/10/19
41
插入栏分类菜单中的“显示为制表符” 选项可以让插入栏里的各类对象以选项 卡的方式显示，如图所示。 如果想恢复以菜单显示的方式,可以单击 插入栏右上角的菜单选项,从中选择”显 示为菜单”即可。

2018/10/19

2018/10/19 6
三、软件的安装
硬件要求： 在安装Dreamweaver 之前，请确保计算机已配备下列硬件 和软件。 1. Intel Pentium III 600 MHz 或更快的处理器或等效处 理器 2.Windows 98 SE、ME、2000 或 XP 3.至少 128 MB 的可用内存 (RAM)（建议采用 256 MB 内 存） 4.至少 275 MB 可用磁盘空间 5. 能达到 1024×768像素分辨率的16位（数万种颜色）或 2018/10/19 7 更高分辨率的监视器
2018/10/19
54
2018/10/19
55

步骤3：单击【下一步】按钮，进入图所 示的对话框。如果需要使用服务器技术， 如 C#等，可选择“是，我想使 用服务器技术。”，并从下面的拉列表 中选择使用的服务器技术。如果不需要 使用服务器技术，则应选择“否，我不 想使用服务器技术”。
23
2018/10/19
24
2018/10/19
15.可以在“开始”---〉“程序”----〉 “Macromedia”中找 到DW 25
四、屏幕分辨率设置
1.15英寸=800*600/16色或以上，75HZ或 以上 2.17英寸=1024*768/16色或以上，70HZ 或以上

2018/10/19

2018/10/19 4
二、Dreamweaver的特点



Dreamweaver 提供了功能强劲的可视化设计工 具、应用开发环境以及代码编辑支持。 Dreamweaver MX 2004具有如下特点： 1.网页编辑功能：利用Dreamweaver 能够方便 地创建和编辑页面元素，如图像、表格、文本、 链接、导航条、跳转菜单、弹出菜单、多媒体 等。提供了强大的HTML编辑功能，可以在编辑 网页的过程中，直接修改对应生成的源代码。 Dreamweaver与Fireworks、Flash具有良好的 兼容性。 制作效率比较高
5
2018/10/19
2.站点管理功能：Dreamweaver 支持本 地、局域网内和Web远程网站的管理功能。 在站点管理窗口中，如果用户进行网站 内的页面修改、超级链接更改或其他替 换，则Dreamweaver会自动完成与之相关 联的更改。 3.此外，Dreamweaver 支持数据库开发 应用的编程环境，可以轻松地建立基于 ASP VBScript、ASP JavaScript、 C#、 VB、JSP、PHP等 编程语言的网站和商务应用开发。
26
1.右键单击----〉选择“属性”
2018/10/19
27
色 2 单 击 “ 设 置 ” ， 设 置 分 辨 率 、 颜
2018/10/19 28
.
3.选择“高级”----〉 “监视器”，设置刷 新率
2018/10/19
29
2018/10/19
30
五、Dreamweaver基础知识
2018/10/19

2018/10/19
2
1.1

Dreamweaver的简介和安装
一、简介 Dreamweaver是Macromedia公司的出品的 一款"所见即所得"的网页编辑工具。与 Frontpage不同，Deamweaver采用的是 Mac机浮动面版的设计风格，对于初学者 来说可能会感到不适应。但当你习惯了 其操作方式后，就会发现Dreamweaver的 直观性与高效性是Frontpage所无法比拟 的。

2018/10/19
46
图像和文本对象的属性面板
2018/10/19 47
（5）辅助面板

Dreamweaver的大部分面板根据功能的 不同被分配到不同的面板组里，以选项 卡的形式排列。每个面板组都可以折叠 或展开，下图为设计面板组，它由CSS 样式面板和层面板组成。
设 计 面 板 组
2018面见图所示，最上方是标 题栏，下边依次为菜单栏、插入栏、文档工具 栏、标准工具栏，中间是文档窗口，右侧有各 种辅助面板，下方为属性面板等。 主要的设计和编码工作是在文档窗口中完成的， 在此可进行多种Web页面元素的插入、修改和 删除等操作。通过文档窗口左下角的“标签选 择器”，可以方便地再选择其他元素。 在开始创建Web页面之前，有必要熟悉 Dreamweaver界面上的各种工具和面板，这样 有助于我们高效率地开发Web站点。
48

如果以前曾经打开过Dreamweaver,其所 有面板会位于用户最后一次退出程序时 的位置。在【窗口】菜单中，子菜单选 项旁边的对勾符号表示相应的面板或工 具被选中，在面板组中处于激活状态。 在网页的制作过程中，可以调整面板的 大小以显示更多的信息或为其他面板和 文档提供更多空间。
49
2018/10/19
2018/10/19
56
2018/10/19
57

步骤4：单击【下一步】按钮，进入图所 示的对话框。选择“编辑我的计算机上 的本地副本，完成后再上传到服务器 （推荐）”，单击文件夹图标选择 C:\dwtt文件夹作为站点根目录。
2018/10/19
58
2018/10/19
59

步骤5：单击【下一步】按钮，进入图示 的对话框，可以在此选择连接服务器的 方式。这里选择通过本地/网络进行连接。
32
2018/10/19
2018/10/19
33
注意：如果用户要切换工作区，可以选 择【编辑】→【首选参数】命令，打开 下图所示的“首选参数”窗口。选择 “常用”选项，单击【更改工作区】按 钮，可弹出“工作区设置”窗口，选择 工作界面即可。 在改变了工作区后，必须从新启动 Dreamweaver才能生效。
31
（一）、工作环境

1.设置工作界面 安装Dreamweaver后，第一次运行Dreamweaver 时，会看到“工作区设置”窗口，如图所示。 Dreamweaver提供了“设计者”和“代码编写 者”两种工作界面。针对可视化的Web站点创 建工作，“设计者”界面为设计人员优化地集 成了Dreamweaver里所有相关的窗口和面板， “代码编写者”界面是为程序员设置的，主要 使用HTML和其他语言进行工作。无论使用哪一 个工作区，用户都可以使用Dreamweaver全部 功能，本书介绍的是“设计者”界面。
38
2018/10/19
2018/10/19
39
（1）插入栏

插入栏中包含许多能够添加到页面的对 象或元素，这些元素根据类型被划分为 八组，如图所示。当前激活组的名称显 示在菜单上，默认情况下是“常用”组， 如图所示，各组中的许多对象都拥有自 己的子菜单,以一个黑色小箭头表示,单 击它就可以打开这些子菜单。
注意：

如果看不到某个面板，而且已在【窗口】 菜单中选择了它，还是无法看见，那么 用户可以选择【窗口】→【排列面板】 命令，把所有打开的面板都恢复到默认 的位置。
2018/10/19
50
(二)、建立站点

我们将创建一个关于动物的站点，介绍各种动 物知识，形形色色的动物趣闻等。 在创建站点时，首先在本地磁盘，如C盘上， 创建一个文件夹dwtt，作为站点的根目录。 因网站结构比较简单，所以我们仅在站点根目 录下先创建两个子目录，images目录用于存放 图像文件，pages目录用于存放页面文件，随 着网站内容的增加，还将建立一些文件夹。所 有的原始素材都存放在站点之外，在网页制作 过程中再将导入所需素材，这样便于站点管理。
2018/10/19
60
2018/10/19
61

步骤6：单击【下一步】按钮，进入图示 对话框。此处选择不启用存回和取出功 能。
2018/10/19
62
2018/10/19
63

步骤7：单击【下一步】按钮，进入图所 示的信息摘要对话框。该对话框列出了 前面所设置的内容，如果需要再次进行 修改，只需单击【上一步】按钮至相应 对话框修改设置即可。如果没有问题， 则单击【完成】按钮完成站点的创建。
12
5.解压缩文件过程
2018/10/19
13
6.安装向导----〉单击“下一步”
2018/10/19
14
7 . 许 可 协 议 〉 选 择 “ 是 ”
2018/10/19 15
----
8.选择文件夹----〉单击“下一步”
2018/10/19
16
2018/10/19
17
9.选择默认编辑器选项（一般不要 改动）----〉单击“下一步”
43
2018/10/19
文档工具栏
2018/10/19
44
（3）标准工具栏

通过执行【查看】→【工具栏】→【标 准】命令来显示或关闭图所示的标准工 具栏。
标准工具栏
2018/10/19 45
（4）属性面板
使用属性面板可以查看和修改页面上被 选中对象的属性，它会随选中对象的不 同而发生变化。 单击其右下角的扩展箭头可以展开或折 叠属性面板,属性面板折叠时,很多额外的 属性是看不到的。下图分别为图像和文 本对象的属性面板。
本章主要内容
一、简要介绍Dreamweaver 二、介绍Dreamweaver的安装 三、Dreamweaver的操作界面 四、建立站点前的主要准备工作