Download presentation
Presentation is loading. Please wait.
1
Dreamweaver的工作界面
2
Dreamweaver的工作界面 文档窗口底部的状态栏提供了标签选择器（也叫做标记符选择器）、窗口尺寸、文件大小等网页信息，它是设计者经常需要关注的区域。
3
创建本地站点 站点就是一系列文件的集合，本地站点就是位于客户端的、制作网页时设计者所使用的文件夹，一般我们在制作网站时通常是在计算机本地硬盘上先建立这个站点（文件夹），然后制作好站点后在上传到远程服务器上（上传的站点叫做远程站点）。
4
创建本地站点 在文档窗口中选择“站点”菜单中的“新建站点”命令或“站点”面板“站点”菜单中的“新建站点”命令，打开“定义站点”对话框，选择“高级”选项卡（也可按“基本”选项卡中的向导操作，但不如用“高级”选项卡方便），如图所示。
5
创建本地站点
6
设置网页属性 在文档窗口中选择“修改”菜单中的“页面属性”命令，或者按【Ctrl + J】快捷键，打开“页面属性”对话框，可以设置网页属性。
7
网页制作的一般过程 新建网页 设置网页标题等网页属性【 Ctrl + J 】 输入文字或通过单击“插入栏”中的按钮插入各种对象
在“属性检查器”中设置对象的属性 保存网页【Ctrl + S】 预览网页【F12】
8
设置字符格式 文本格式分为段落格式和字符格式。在文档窗口中，修饰文本可以使用“文本属性”面板。在文档窗口中选中文本后，其“属性检查器” 如图所示，可用于设置文字格式和超链接等多种常用选项。
9
字符样式的设置 字符样式是指字符的外观样式，例如，粗体、斜体、下划线等。若要将文本设置为粗体或斜体，首先选中文本，然后单击“属性检查器”中的粗体按钮或斜体按钮即可。 若需要应用别的字符样式（例如，下划线、上标、下标等），可以首先选中文本，然后选择菜单栏中的“文本”菜单中的“样式”命令，接着在该命令的子菜单中选择相应的样式命令。
10
字体格式的设置 首先选中要设置字体格式的文本，然后单击“属性检查器”中的字体选择框，在弹出的下拉菜单中选择相应的字体。
如果“属性检查器”中字体选择框中没有合适的字体，那么我们可以为它添加计算机内安装过的字体或字体列表。单击“属性检查器”中字体选择框，在弹出的列表中选择“编辑字体列表”命令。
11
设置锚点链接
12
电子邮件超链接 在文档窗口中的“插入栏”中单击“电子邮件链接”按钮，弹出“电子邮件链接”对话框，在“文本”框中输入用于超链接的文本，在“ ”框中输入电子邮件地址，如图所示。
13
插入图像 将光标置于要插入图像的位置，在“插入”栏的“常用”选项卡中单击“图像”按钮。
如果所选择的图像文件不是站点中的文件，则将打开“Macromedia Dreamweaver MX”对话框，如图所示，提示是否将图像文件保存到根目录下，此时需要将图像保存到站点中用于存放图像文件的文件夹。 使用图像文件时，注意命名规则，不要使用汉字文件名或有特殊符号（如空格）的文件名。
14
修改图像属性
15
制作鼠标经过图像
16
制作鼠标经过图像 将插入点定位到要插入鼠标经过图像的区域，然后在“插入”栏的“常用”选项卡中单击“鼠标经过图像”按钮。打开“插入鼠标经过图像”对话框，如图所示。
17
嵌入声音与视频 如果确定访问者安装有能播放相应格式文件的插件（例如 RealMedia 或 QuickTime 插件），那么可以通过嵌入的方式将声音与视频直接插入页面中，从而获得更多对媒体的控制（例如，可选择是否播放和设置音量）。
18
插入 Flash 按钮 Flash 按钮可根据鼠标指针位置和状态的不同，显示不同的图像，并且会在鼠标单击时执行超链接跳转的动作。
19
插入表格 将光标定位到要插入表格的区域，然后单击“插入栏”“常用”选项卡中的“插入表格”按钮 ，打开“插入表格”对话框。
20
选取表格及单元格 如果页面中的表格繁多且嵌套复杂，那么可以将光标移动到要选择的表格中，然后在状态栏的标签选择器上选择最右边的 <table> 标记符。如果表格比较简单，则可以通过单击表格任意边框的方式将其选取。 将光标定位到单元格，然后在标记符选择器中选择加深显示的 <td> 标记符。 按住【Shift】键 ，可以选择连续单元格。 将光标移到表格中该行的左侧或列的上方，单击可以选取整行或整列。
21
设置表格属性
22
设置单元格属性
23
使用布局视图 Dreamweaver 的布局视图功能以直观的方式自动生成网页中的表格，能够使设计者在文档窗口中通过拖拽鼠标的方式来实现复杂页面版式设计。在布局视图中，用户可以在添加网页内容之前对页面进行布局。
24
使用布局视图 在绘制布局表格或布局单元格之前，必须从标准视图切换到布局视图，方法为：将“插入栏”切换到“布局”选项卡，然后单击“布局视图”按钮，出现“布局视图入门”对话框，如图所示。
25
布局表格和布局单元格的属性
26
创建框架结构 使用“插入栏”中的框架按钮可以创建出一些常用的框架结构，比如上小下大的导航结构、左小右大的目录结构、上左右的目录结构等。创建方法为：单击“插入栏”“框架”选项卡，然后单击框架结构按钮，就可以创建出所需的框架结构，如图所示。
27
创建框架结构 选择“文件”菜单下的“新建”命令，在“新建文档”对话框中，选择“框架集”类别。
28
选取框架集
29
设置框架集的属性
30
设置框架的属性 在框架面板上选取框架后，其属性检查器如图所示。
31
保存框架 选择“文件”菜单中的“保存全部”命令，此时将弹出一个“保存为”对话框，同时文档窗口中最外层的边框显示为有阴影，表示当前要保存代表整个框架结构的框架集文件。 选择适当的保存位置并指定文件名后单击“保存”按钮，则又会弹出一个“保存为”对话框，此时下面的框架边框显示为有阴影，表示当前要保存的是下面这个框架。 如此下去直到保存了所有的框架。
32
设置超链接目标框架
33
添加背景音乐 选择菜单”插入/标签”,选择HTML标签/页元素,在右侧选择bgsound
34
插入表单
35
文本框
36
复选框和单选按钮
37
列表/菜单
38
跳转菜单 跳转菜单是一种常见的交互式表单对象，其中每个菜单选项都是一个超链接，使浏览者在选择某个选项后可以跳转到相应的页面。
39
按钮与图像域
40
设置标签
41
使用行为 “行为”是“事件”和“动作”的组合。
事件是指浏览器事先为网页对象定义的某种状态，它是由浏览器生成的消息。例如，当鼠标移动到某个链接上时，就会产生“onMouseOver”事件；当用户下载页面时，就会发生“onLoad”事件；当访问者单击某个对象时就会发生“onClick”事件；当访问者的鼠标离开某个对象时会发生“onMouseOut”事件。
42
使用行为 动作是指一个预先写好的 JavaScript 程序，每个程序都可以完成特定的任务，如打开浏览器窗口、显示或隐藏层、播放声音等。
将事件与动作组合（即发生某事件时执行对应行为），就能获得各种动态效果。例如，单击按钮时播放声音，加载网页时弹出一个信息窗口等。
43
使用行为 在 Dreamweaver 中，可以为网页中的多种对象添加行为，例如层、图像、表单按钮等，并且每一个对象允许指定多个动作，行为的动作将按照一定顺序依次执行。 可以使用“行为”面板来指定网页对象的行为。选择“窗口”菜单下的“行为”命令，或者按【Shift + F3】键，即可以打开“行为”面板，如图所示。
44
添加行为的步骤 （1）选择一个要添加行为的网页对象。例如，要为层中的图像添加行为，首先应该单击选取该层，然后再添加行为；如要为整个网页添加行为，则需要首先在文档窗口底部的标记符选择器中单击“<body>”标签。 （2）选择“窗口”菜单中的“行为”命令，打开“行为”面板。
45
添加行为的步骤 （3）单击添加行为按钮 ，在弹出的菜单中选择“显示事件”命令，在弹出的列表中选择一种浏览器版本。
（4）在列表中选择一个动作，此时将弹出该动作对应的对话框，其中显示了动作的参数与说明，在对话框中设置动作参数，最后单击“确定”按钮。
46
添加行为的步骤 （5）返回“行为”面板，此时面板右侧列表的“动作”框中显示了为对象添加的行为，左侧“事件”列表框中显示了当前浏览器默认的动作触发事件。 （6）如果要重新指定事件，只需单击指定事件按钮 ，在弹出的事件列表中选择一个事件即可。
47
Dreamweaver 自带的行为 调用 Javascript
48
Dreamweaver 自带的行为 打开浏览器窗口
该行为就是当浏览者触发事件后，可以在新窗口中打开一个指定地址的网页。用户可以自定义打开新窗口的属性，例如窗口大小、是否需要状态栏、工具栏等。 注意：对于“加载页面的同时弹出新窗口”这样的效果不能滥用，因为浏览者很可能会把它当作广告窗口立即关掉。
49
Dreamweaver 自带的行为 弹出消息
该动作可以使指定的信息以 JavaScript 消息框的方式弹出，它只有一个参数，即消息框中的文字信息。一般情况下，“弹出消息”动作总是和“onLoad”、“onClick”等事件组合产生一些交互式效果。
50
Dreamweaver 自带的行为 设置状态栏文本 该动作用于指定网页状态栏中的显示文字，该动作只有一个参数，即显示在窗口状态栏中的文字。
注意：如果要让状态栏中的文本动态显示，则需要自行编写 JavaScript 程序。
51
Dreamweaver 自带的行为 检查表单
52
Dreamweaver 自带的行为 “检查表单”动作可以检查表单中指定文本字段的内容，以确保用户已经输入或输入了正确的数据类型。如果使用 onBlur 事件将此动作附加到单个文本字段上，则用户在填写表单时就可以对该字段进行检查；如果使用 onSubmit 事件将其附加到整个表单，则在用户单击“提交”按钮时同时对多个文本字段进行检查。这样设置之后，就可以确保表单提交到服务器后指定的文本字段中不包含无效的数据。
53
使用样式 样式就是格式的组合。例如，如果某个样式同时包含“居中对齐”和“斜体”两种格式，那么应用了该样式的内容将同时具有这两种格式。在 Dreamweaver 中可以使用两类样式：HTML 样式和 CSS 样式。
54
使用html样式 HTML 样式是一种格式化文本的有力工具，它可以快速一致地将字体格式应用于文档中的文本。HTML 样式由一系列的 HTML 标签组成，浏览器根据样式中包含的 HTML 标签进行显示。 HTML 样式的一个缺点是：对 HTML 样式所做的更改不会自动在文档中更新。如果应用了一个样式，后来又更改了它，则必须对文本重新应用该样式才能更新格式设置。
55
使用html样式
56
使用html样式
57
使用html样式
58
使用css样式 在 Dreamweaver 中 CSS 样式的类型包括以下几种：
自定义 CSS 样式（也称为 class 类样式） 重新定义 HTML 标签样式 CSS 选择器样式 在网站中使用 CSS 样式的方式与 HTML 样式相同，需要先创建 CSS 样式，然后在应用到网页或整个网站中。
59
使用css样式 选择“窗口”菜单中的“CSS 样式”命令或按【Shift + F11】键，可以打开“CSS 样式”面板。
在文档窗口中，class 类样式将出现在“CSS 样式面板”中，如图所示。而对于创建的其他两种样式，将直接包含在网页代码或 CSS 外部样式表中，而不会显示在“CSS 样式”面板。
60
使用css样式 在 CSS 样式面板中，单击“新建 CSS 样式”按钮 ，打开“新建 CSS 样式”对话框，如图所示。
61
使用css样式
62
使用css样式 链接外部 CSS 样式表文件 打开 CSS 样式面板，单击“附加样式表”按钮 ，打开“链接外部样式表”对话框，如图 所示。
Similar presentations
