dreamweaver笔记（共10篇）
篇1：dreamweaver笔记
弹出菜单
弹出菜单在网页制作中是一种非常常用的菜单方式，这种菜单不但制作简单，而且效果也很
好。
效果说明
本实例所要完成的效果是当鼠标移动到文字上时，就会弹出一个漂亮的菜单，如图 17-1
和图 17-2 所示。
创作思想
本实例首先在网页中输入一行文字，并对文字做一个特殊的超链接，然后利用
Dreamweaver MX 2004 自带的行为制作弹出菜单。
操作步骤
（1）输入文字并设置超链接。在网页中输入文字，因为单独的文本文字是无法添加行为的，按照 Dreamweaver 中的约定，将文字的超链接设置为“ javascript:;”才能够添加行为。所以将文字的超链接设为“ javascript:;”，并执行【显示弹出式菜单】行为，如图 17-3 所示。
（2）设置菜单项和子菜单项，并为菜单设置超链接，然后安排好各个菜单的次序，如图 17-4 所示。
（3）设置页面元素。将菜单设置为垂直菜单，并分别设置菜单的字体、字号、对齐方式、一般状态和鼠标滑过时的状态，如图 17-5 所示。
（4）设置【高级】标签。在【高级】标签选项中设置菜单的延迟时间，以及是否显示菜单边框。然后设置边框的宽度、颜色、阴影、高亮，如图 17-6 所示。
注意：【菜单延迟】中时间的单位是毫秒（ms），1000 毫秒等于 1 秒，在设置时
注意换算。
（5）设置的 x 轴和 y 轴参数。在【位置】标签选项中设置弹出菜单的 x 轴和 y 轴参数，这两个参数表示弹出菜单左上角到网页左上角的距离，如图 17-7 所示。
（6）保存网页文件，然后在浏览器中打开该网页，将鼠标光标移动到文字上方时即可看到有菜单弹出，本实例操作完毕。通过 Dreamweaver，可以快速制作出以往只能用复杂代码才能实现的弹出菜单，这样可以实现复杂菜单的弹出和收缩，方便使用又能让页面美
观、整洁。
滑动折叠菜单
在网页展示平面有限的情况下，折叠菜单是一个很不错的选择。这种菜单在一般情况下是折叠起来的，只有当浏览者将鼠标移动到菜单上时，菜单才会滑动展开。
效果说明
当鼠标不在菜单上时，菜单处于折叠状态，看起来是很普通的一个菜单栏，如图 18-1 所示。当鼠标移动到菜单栏上时，该菜单的子菜单就会慢慢滑动展开，如图 18-2 所示。
创作思想
先在一个图层中输入文字，形成菜单折叠时的状态，再使用图层展开时间轴动画来实现
滑动展开菜单的效果。
操作步骤
（1）新建文件并添加层。新建一个网页文件，在网页中添加一个父层（第一级的层）和一个子层（第二级的层），分别设置两个图层的大小和位置，如图 18-3 所示。
（2）设置表格和文字。在 layer1 层中插入表格，设置好表格的高度和背景，然后在表格内输入文字并设置好文字的格式，如图 18-4 所示。
3）设置 layer2 层。设置 layer2 层的背景颜色，然后在其上输入文本并设置超链接，再将 layer2 层添加到时间轴上，以后便可对 layer2 层进行时间轴动画操作，如图 18-5 所
示。
（4）新建一个时间轴 Timeline2，然后将 layer2 层添加到新的时间轴上，如图 18-6
所示。
提示：不同的时间轴可以实现对不同对象的控制，也可以实现多个不同动画。
（5）设置时间轴。分别对时间轴 Timeline1 的第 1 帧和时间轴 Timeline2 的第 15 帧进行设置（这里以第 15 帧作为动画的最后一帧），如图 18-7 所示。
提示：只需要改变时间轴的关键帧，就可以直接生成动画效果，本例将时间轴 Timeline1 第 1 帧中 Layer2 层的高设置为 0px，这样就生成了层慢慢滑出的动画效果。
（6）添加行为。选择表格中的第一个单元格，然后为单元格添加 onMouseOver（鼠标移到单元格上面时）时的行为到播放时间轴 Timeline1，如图 18-8 所示。
（7）继续添加行为。再为该单元格添加 4 个 onMouseOut（鼠标移开时）行为，参数设
置如图 18-9 所示。
（8）添加 2 个行为。选择 layer2 层，并分别添加两个 onMouseOver 和两个
onMouseOut，具体操作如图 18-10 所示。
（9）保存网页文件，然后在 IE 中进行预览，本实例操作完毕。通过时间轴上不同对象在不同时间的状态，再结合时间轴的播放、停止和跳转是 Dreamweaver 中实现动画效果的最基本方法，读者可以充分利用这些功能来实现更精彩的效果。
全景图浏览效果
是否有见过游戏中的全景图效果，充满动画与真实感，让人难以忘怀。在本例中就介绍如何
制作这样的网页。
效果说明
建立文件，选择一张全景图素材，然后插入少量的代码就可以实现全景图浏览效果，如图 43-1 所示。实际效果请浏览随书光盘中《源文件》目录下的相关文件。
创作思想
打开 Dreamweaver MX 2004 软件新建页面并插入表格，在表格的 HTML 代码中插入
操作步骤
（1）新建一个基本的 html 文件，然后保存页面为“ 43.htm ”。
（2）插入表格。要使全景图在指定的区域中走动，必须先插入表格，如图 43-2 所
示。
提示：图 43-2 中的第五步操作必须将高度设置得与图片一样高。
（3）插入标签。然后在工具栏中单击【标签选择器】图标，打开【标签选择器】对话框，在该对话框中设置参数，插入
提示：标签选择器对话框中汇集了一些常用的标签，如 HTML 标签、CFML 标签、ASP.NET 标签等，通过双击相应的代码标签，就可以很轻松地在代码视图中插入代码。
（4）设置参数。接着设置
（5）再接下来需要在代码视图里手动添加代码。回到代码面板，将光标切换到
（读者可打开【光盘】｜【源文件】｜【实例 43 】｜【 43.1.txt 】文件，直接复制
代码）
提示：
中第三步操作里的 HTML 代码进行调整。
（6）保存文件，完成操作。
全景图合适用于厂房、展厅等大型演示上，因为单一镜头图片不能让用户看到全景，通过全景图则能够让需要展示的大型场景一览无余。
随机播放背景音乐的网页
相信很多人在打开娱乐网站或个人主页时，经常都会听到一些音乐。本例将介绍如何实现在网页上随机播放背景音乐。
效果说明
建立文件，循环插入要播放的音乐，便可制作出动感的背景音乐，而且是随机的。实际效果请浏览随书光盘中【源文件】下的对应文件。
创作思想
打开 Dreamweaver MX 2004 软件新建页面，再选择【行为】面板下的【 + 】选项插播音乐，设置参数。然后重复此操作 4 次，就可以随机播放背景音乐。
操作步骤
（1）打开 Dreamweaver MX 2004 软件新建文件，并保存页面。
（2）选择好“标签”页，在“行为”面板中插入要播放的音乐文件，如图 55-1 所
示。
（3）接着选择插入的声音文件，打开参数窗口，设置其参数，如图 55-2 所示。
（4）重复执行图 55-1 和图 55-2 所示的操作 4 次，这样就添加了 4 种音乐，使得程序可以随机在这四种音乐中挑选其中一首来播放。因此，图 55-1 中所示的第四步操作
要选择不同的音乐文件。
（5）保存文件，完成操作。适当放置轻松的音乐背景，可以让用户感觉更轻松、愉
快。
网页滚动布告栏
如果想要在网页里显示最新信息、新闻、通知、布告等较长的文字信息，而又不想占用太多的网页空间，可以使用滚动报告栏。
滚动报告栏通常是通过利用 Javascript 技术控制网页中的层的滚动来实现的，然而手工编写 Javascript 代码进行制作肯定是比较复杂、困难的事情。使用 Dreamweaver 为用户提供的【 ScrollableArea 】插件可以快速便捷地制作出滚动报告栏。
效果说明
用户可以通过滚动栏上的【向上滚】和【向下滚】两个按钮控制报告栏文字的滚动速度和方向。实际效果请浏览随书光盘中【源文件】下的对应文件。
创作思想
在随书光盘中找到“ ScrollableArea ”插件，然后运行 Macromedia 的插件管理器安装插件。接着打开 Dreamweaver MX 2004, 在【命令】菜单中单击【 dHTML AP Scrollable Area 】选项，就可以开始设计滚动布告栏了。
操作步骤
（1）安装插件。首先在随书光盘中的【源文件】 / 【实例 56 】目录里面找到 Dreamweaver 的“ ScrollableArea.mxp ”插件，接着运行 Macromedia 的插件管理器“ Extension Manager.exe ”，Macromedia 的插件管理器是随 Dreamweaver 自动安装的，通常和 Dreamweaver 安装在同一目录下面的“ Extension Manager ”文件夹里面。
（2）选择插件管理器菜单栏上的【文件】菜单进行操作，如图 56-1 所示。
提示：如果插件文件已经和 Macromedia 的插件管理器建立了文件关连，那么直接双击插件文件就可以自动打开 Macromedia 的插件管理器安装插件了。
（3）单击【安装】按钮后会弹出一个安装协议窗口。单击安装协议窗口上面的【接
受】按钮完成安装。
（4）设置 滚动布告栏。安装完插件后运行 Dreamweaver MX 2004，打开或者新建一个 web 文档，进行如图 56-2、图 56-3 和图 56-4 所示的操作。
（5）经过上面的操作，基本完成了滚动布告栏的制作。在 Dreamweaver 中执行【文件】 / 【在浏览器中预览】 / 【 IE 浏览器】命令或者单击键盘上的 F12 键预览网页时，可能会出现不正常显示的情况，这是由于 ScrollableArea 产生的代码中没有设置图层位置的单位。执行如图 56-5 和图 56-6 所示的操作，即可解决这个问题。
（6）执行完如图 56-6 所示的操作后，在图 56-5 中所示的第 3 步再分别选择【＃ divDownControl 】、【＃ divContainer 】和【＃ divContent 】选项，然后再分别执行如图 56-6 所示的操作。给 4 种样式分别加上【像素】单位后测试网页，就可以看到如图
56-7 所示的滚动公告栏了。
（7）将鼠标光标分别移动到【 Scroll up 】和【 Scroll down 】上面，就可以看
到中间的文字上下滚动了。
Dreamweaver 的插件种类繁多，功能强大。善于发现和使用插件，可以制作出一些
Dreamweaver 本身望尘莫及的效果。
更多实例请阅读《Dreamweaver网
篇2：dreamweaver笔记
一、插入单行文本域或密码域
1. 点击鼠标，将光标定位在表单框线内，点击“插入”菜单，选择“表单”项，在弹出的子菜单中选择“文本域”命令。
或者在“插入”面板中选择“表单”项，点击“文本字段”图标，如下图所示：
点击“窗口”菜单，选择“插入”项，可以打开“插入”面板。
2. 点击“文本字段”图标后，弹出“输入标签辅助功能属性”对话框，如下图所示：
3. 在“输入标签辅助功能属性”对话框中，各项的解释及应用方法如下：
(1)ID：指定了元素的名称和ID号。名称和ID号是一致的。如输入“id1”，在“代码”视图中可以查看源代码：
(2)标签：表单控件的提示信息。如输入“提示信息”，在“代码”视图中可以查看源代码：
提示信息
(3)样式：说明“标签”内容的使用方式。分为三种情况：
第一情况：使用“for”属性附加标签标记。在“代码”视图中可以查看源代码：
提示信息
第二情况：用标签标记环绕。在“代码”视图中可以查看源代码：
提示信息
第三情况：无标签标记。在“代码”视图中可以查看源代码：
提示信息
(4)位置：说明“标签”内容所处的位置。分为两种情况：
第一种情况：在表单项前。上面的提示信息都是在表单项前。
第二种情况：在表单项后。在“代码”视图中可以查看源代码：
提示信息提示信息提示信息
(5)访问键：accesskey 属性。
(6)Tab 键索引：tabindex 属性。
4. 在“输入标签辅助功能属性”对话框中，单击“确定”按钮，文本字段就插入到文档中了。如下图所示：
二、设置或修改单行文本域或密码域的属性
1. 使用鼠标点击插入的单行文本域或密码域表单控件，如下图所示：
2. 打开“文本字段”属性面板，如下图所示：
文本域：指定了元素的名称和ID号。名称是唯一的。
字符宽度：指定文本域的长度，默认值为24个字符左右。
最多字符数：允许用户输入的最大字符数目。
初始值：表单的默认值。
禁用标签disabled属性。
只读：标签readonly属性。
类型选择“单行”：插入单行文本域(type=“text”)。
类型选择“密码”：插入密码域(type=“password”)。
三、提示
篇3：dreamweaver笔记
利用Dreamweaver软件可以设计出一个精美出色的网页, 但对初学者而言, 设计一个好的网页, 面临的困难和问题还很多, 怎样才能用好Dreamweaver呢?在这里, 我把在教学过程中经常出现的一些的问题作了简单整理, 并提出了一些解决办法, 同大家探讨。
一、如何在DW中输入一个空格
在Dreamweaver中输入空格是一件令人很头痛的事。其实DW中对空格输入的限制是针对“半角”文字状态而言的, 只要同时按下键盘上的Shift+Ctrl+space就可以插入一个空格 (并且可以连续输入) 。
二、设计好的网页为什么在浏览器窗口最小化时会变丑
这对于一个初学者来说, 是个很值得注意的问题, 也就是说, 在全屏状态下浏览网页内容时, 一点问题也没有;但当我们使用窗口的最小化命令或手动的调整窗口的大小时, 问题就慢慢出现了:网页内容会把当前窗口作为显示范围, 依次下挫。举个例子, 和在记事本中有“自动换行”和“没换行”的差别是完全一样的。
在解决这个问题, 我们必须从网页的布局说起, 在一般情况下, 网页内容的定位大多是通过表格来实现的。因此问题的“毛病”也就出在表格上。在表格的高宽设定选择上提供了两种不同的类型:百分比和像素;其中百分比的使用将会产生前面说到的那个毛病, 将其全部更正为Pixels单位的实际大小就可以了。
三、如何添加图片及链接文字的提示信息
在我们浏览网页时, 当鼠标停留在图片对象或链接上时, 在鼠标的右下方有时会出现一个提示信息框, 对目标进行一定的注释说明。在一些场合, 它的作用是很重要的。
首先, 先给图片添加提示信息, 选中图片对象, 在属性面板里我们会看到有个替换文本输入框。默认情况下, 该输入框是空白的, 在这里录入需要的提示内容就可以了。另一种方法, 是在插入图片时出现“图像标签辅助功能属性”对话框, 在“Alt”文本框中, 为图像输入一个名称或一段简短描述, 尽量限制在50个字符左右。再制作链接提示, 因为DW中没有直接提供该功能, 因此我们需要通过添加HTML代码来实现, 在快速标签编辑中再添加如下代码:title=“”即可。
四、如何实现最简单的图片交替
在网页中如何吸引更多的眼球, 很多网站都把菜单导航栏做成可变的动态效果。在制作过程中可以直接用到插入菜单中的图像中的鼠标经过图像命令。但这要注意的一点就是, 要求使用图片交替时, 图片要大小一致, 否则不仅不利于排版, 甚至会成为网页中的一大败笔。
五、如何使用样式表并让表单中的文本框与按钮变个样
在网页制作中, 表单中的对象总是给人一种单调与沉闷的感觉, 比如说按钮、文本框等, 它们一成不变的模样与颜色出现在您的主页上时, 或多或少都会破坏主页的美观程度, 那么可不可以改变它们的模样呢?这自然是可以的, 请跟我一起来做:
先看一下在网页中出现的按钮与文本框的本来面目, 如下图所示
对照上图, 我将文本框做成一种类似于下划线的效果并且是彩色的, 同时按钮的背景色也是彩色的, 下面我来说说这种效果实现的详细操作步骤。
首先在网页中插入了相应的表单对象, 一个文本框与一个按钮, 然后切换到拆分模式, 显示出网页源代码编辑窗口, 在网页的〈head〉与〈/head〉标签之间插入以下样式表:〈style type="text/css"〉, 在此样式表中的内容如下:
这个效果的实现是通过两个样式来实现的, 一个是文本框的, 一个是按钮的, 所以在文本框与按钮的h t m语句中就需要插入两句不同的代码, 在文本框中插入的是class=“smallInput”代码, 如例子〈input type="text"name="textfield"class=“smallInput”〉, 在按钮语句中插入的是class="buttonface"代码, 如例子〈input type="submit"name="Submit"value="彩色按钮"class="buttonface"〉, 最后的效果如下图所示:
篇4：dreamweaver笔记
一、 浏览图像更容易
图像浏览器可以像幻灯片一样播放图像，具有多种换页效果，而且每幅图像都可以指向不同的链接。它是通过Dreamweaver MX 2004新增的称为Image Viewer的Flash Element组件来实现的。下面，以一实例来说明该功能的具体使用方法。
插入Flash Element组件
单击Insert面板Flash Element分类中的Image Viewer按钮，在页面上添加一个Flash Element，也可以通过选择菜单“Insert/Media/Image Viewer”命令来完成。这时，Dreamweaver会弹出一个Save Flash Element对话框，在此指定将要生成的Flash文件的名字和路径。单击页面中出现的Flash图标，Dreamweaver会自动在Tag面板中显示出Flash Element的各种属性，如图1所示。
设置imageURLs（图像来源）属性
单击imageURLs属性，在其右侧会出现Edit Array Values图标，单击该图标，弹出Edit 'imageURLs' Array对话框。在该对话框中可以设置要在图像浏览器中显示的图片，图片可以指定为本地文件，也可以指向网络上的某个地址。设置如图2所示。完成该步设置后，预览一下，可以看到图像浏览器已具有初步效果了。
设置imageLinks（图像链接）属性
单击imageLinks属性，按照与设置imageURLs属性相同的方法对它进行设置。在链接设置里，Dreamweaver默认了3个指向MacroMedia的地址，我们可以对其进行修改。需要注意，每个链接地址和imageURLs中的图像文件是一一对应的，依次输入相应链接地址就可以了。链接可以指向本地文件也可以指向网络地址。
其他的属性设置比较简单，transitionsType设置换页效果，imageCaptions设置各幅图片的标题，title用来设置图像浏览器的标题，相信大家一看便知，不再赘述。
二、 处理图像更方便
Dreamweaver MX 2004也新增了图像处理功能，图像剪裁、亮度对比度调整、锐化都可以直接在Dreamweaver中进行，不再需要使用其他的图像处理工具，这为网页制作提供了很大的便利。下面，以具体实例进行说明。
插入图像
单击Insert面板Common分类中的Images按钮，在页面上插入一幅图片，也可以通过选择菜单“Insert/Image”命令来完成。这时，Dreamweaver会弹出一个Select Images Source对话框，在此指定需要插入的图片。然后，展开其Properties面板，如图3所示。大家可以看到在Properties面板的右下角多了几个工具按钮，依次是剪裁图像工具按钮、修改源图像大小工具按钮、调整图像亮度对比度工具按钮、锐化图像工具按钮。
剪裁图像
（1）单击Properties面板上的剪裁图像工具，在图像上会出现调整手柄，用鼠标拖动手柄，圈出所要保留的图片的范围，如图4所示。
（2）双击鼠标，Dreamweaver将会对图片进行剪裁；按ESC键，取消剪裁。
调整图像亮度对比度
（1）单击Properties面板上的调整图像亮度对比度工具，弹出Brightness/Contrast（亮度/对比度）对话框。
（2）拖动滑杆或直接输入数值，设定新的亮度值和对比度值，如图5所示，完成后单击OK键确认。
锐化图像
（1）单击Properties面板上的锐化图像工具，弹出Sharpen（锐化）对话框。
（2）拖动滑杆或直接输入数值，设定锐化值，如图6所示，完成后单击OK键确认。
修改源图像大小
在使用前面3个工具时，Dreamweaver会根据新设定的要求而随时修改图像的源文件。而当我们在调整图像的大小时，Dreamweaver不会根据我们的要求而随时改变源文件的大小，只有当我们按下修改源图像大小工具按钮时，Dreamweaver才会修改源文件。
设计网页时，在对图像的高度或宽度调整后，如果确定要对源文件的大小进行修改，按下此工具按钮即可。
篇5：Dreamweaver色彩模式
(一) HSB模型
基于人类对色彩的感觉，HSB 模型描述颜色的三个基本特征：
1、色相H，在 0 到 360 度的标准色轮上，色相是按位置度量的。在通常的使用中，色相是由颜色名称标识的，比如红、橙或绿色。
2、饱和度S，是指颜色的强度或纯度。饱和度表示色相中彩色成分所占的比例，用从 0%(灰色)到 100%(完全饱和)的百分比来度量。在标准色轮上，从中心向边缘饱和度是递增的。
3、亮度B，是颜色的相对明暗程度，通常用从 0%(黑)到 100%(白)的百分比来度量。
(二) RGB模型
绝大部分的可见光谱可以用红、绿和蓝 (RGB) 三色光按不同比例和强度的混合来表示。在颜色重叠的位置，产生青色、品红和黄色。因为 RGB 颜色合成产生白色，所以RGB模型为加色模型，用于光照、视频和显示器。例如，显示器通过红、绿和蓝荧光粉发射光线产生彩色。
(三) Lab模型
Lab 色彩模型是在 1931 年国际照明委员会(CIE)制定的颜色度量国际标准的基础上建立的。1976 年，这种模型被重新修订并命名为 CIE Lab。
Lab颜色设计为与设备无关;不管使用什么设备(如显示器、打印机、计算机或扫描仪)创建或输出图象，这种颜色模型产生的颜色都保持一致。
Lab颜色由心理明度分量 (L) 和两个色度分量组成;这两个分量即 a 分量(从绿到红)和 b 分量(从蓝到黄)。
(四) CMYK模型
CMYK 模型以打印在纸张上油墨的光线吸收特性为基础，当白光照射到半透明油墨上时，部分光谱被吸收，部分被反射回眼睛。
理论上，纯青色 (C)、品红 (M) 和黄色 (Y) 色素能够合成吸收所有颜色并产生黑色。由于这个原因，CMYK模型叫作减色模型。因为所有打印油墨都会包含一些杂质，这三种油墨实际上产生一种土灰色，必须与黑色 (K) 油墨混合才能产生真正的黑色(使用 K 或Bk而不是 B 是为了避免与蓝色混淆)。
篇6：dreamweaver入门基础
【DW MX 2004 MX 2004 的新功能简介】
▲简洁高效的设计和开发界面：界面更易于使用，可使您的工作效率和工作质量均得到提高。
▲“插入”栏的改进：简洁高效的新外观，占用更少的工作区空间。还新增加了一个“收藏”类别，您可以对“插入”栏进行自定义，将最常使用的对象放置在该栏上。
▲表格编辑可视化：在表格中进行列调整操作时能看到实际效果。
▲用户界面改进：可得到最大的可用工作区，更清晰地显示上下文和焦点，更易于使用和更具逻辑性。
▲起始页：使您能够访问最近使用过的文件，创建新文件和访问DW MX 2004资源。起始页会在您启动DW MX 2004 或尚未打开文档时显示。
▲保存桌面选项：使您可以选择当您重新启动DW MX 2004 时重新打开您上一次使用的文档。
▲完全支持 Unicode：DW MX 2004支持 Internet Explorer所支持的所有文本编码方式。您可以使用几乎所有您的系统中安装的语言字体，DW MX 2004 会正确地显示和保存这些字体。
▲安全 FTP：使您能够完全加密所有文件传输。
▲新式的页面布局和设计环境。
▲增强的 CSS 功能：提供了一个更为精巧的方法来进行样式设计及提高设计交互性。
▲动态跨浏览器验证：在您保存文档时自动检查当前文档的跨浏览器兼容性问题。
本教程针对DW MX 2004简体中文版进行讨论，供学习网页制作创建静态网站的朋友们参考。因本人水平有限，不当之处在所难免，欢迎批评指正。
【图象处理软件】
Photoshop：制作图文并茂的网页，需要处理图片， PS 是最好的图象处理软件。最新版为Photoshop CS(俗称8.0)版本。对初学者来说稍微专业了。您可以使用简单易学、功能强大的的 Photoshop Elements(即：PSE)，对于网页图片文件制作PSE就足够用了。。
Fireworks：最新为 MX 2004版本，网页制作三剑客之一。能和DW无缝链接。该软件请您自行收集下载。
Flash： 最新为 MX 2004版本，网页制作三剑客之一。网上最火的动画制作软件。该软件请您自行收集下载。
Ulead GIF Animator：友立公司开发的功能强大的GIF动画软件。该软件请您自行收集下载。
【其他软件】
CuteFTP：是专业的FTP上传软件，用于往服务器端上传文件用。 Dreamweaver MX 2004 有此功能，而且功能强大。但是，不少人还是习惯用专业的FTP软件。该软件请您自行收集下载。
最终您还需要有一个网络空间。以便您的大作让更多的人浏览。
dreamweaver入门(2004版本):窗口布局：
窗口布局
Dreamweaver MX 2004 提供了将全部元素置于一个窗口中的集成工作区。在集成工作区中，全部窗口和面板集成在一个应用程序窗口中。您可以选择面向设计人员的布局或面向手工编码人 员需求的布局。首次启动 Dreamweaver 时，会出现一个工作区设置对话框(如下图)：
您可以从中选择一种工作区布局。如果您不熟悉编写代码，请您选择“设计者”。如果您以后想更改工作区，可以使用编辑菜单“首选参数”对话框切换到一种不同的工作区。编辑菜单“首选参数”对话框如下图：
【栏目说明】
“插入”栏(如下图)：包含用于将各种类型的“对象”(如图像、表格和层)插入到文档中的按钮。每个对象都是一段 HTML 代码，允许您在插入它时设置不同的属性。例如，您可以通过单击“插入”栏中的“表格”按钮插入一个表格。也可以不使用“插入”栏而使用“插入”菜单插入对 象。
“文档”窗口 显示您当前创建和编辑的文档。
“属性检查器”(如下图)： 用于查看和更改所选对象或文本的各种属性。
“面板组”(如下图) 是分组在某个标题下面的相关面板的集合。若要展开一个面板组，请单击组名称左侧的展开箭头;若要取消停靠一个面板组，请拖动该组标题条左边缘的手柄。
“文件”面板(如下图) 使您可以管理您的文件和文件夹，无论它们是 Dreamweaver 站点的一部分还是在远程服务器上。“文件”面板还使您可以访问本地磁盘上的全部文件，类似于 Windows 资源管理器。
Dreamweaver MX 2004提供了多种此处未说明的其他面板、检查器和窗口。若要打开其它面板，请使用“窗口”菜单。
dreamweaver入门(2004版本):菜单概述：
菜单概述
本节提供 Dreamweaver MX 2004中各菜单的简要说明。下图为菜单条：
以下分别叙述菜单选项：
文件菜单编辑菜单
“文件”菜单 包含“新建”、“打开”、“保存”、“保存全部”，还包含各种其他命令，用于查看当前文档或对当前文档执行操作，例如“在浏览器中预览”和“打印代码”。
“编辑”菜单 包含选择和搜索命令，例如“选择父标签”和“查找和替换”。“编辑”菜单还提供对DW菜单中“首选参数”的访问。
查看菜单插入菜单
“查看”菜单 使您可以看到文档的各种视图(例如“设计”视图和“代码”视图)，并且可以显示和隐藏不同类型的页面元素和 DW工具及工具栏。
“插入”菜单提供“插入”栏的替代项，用于将对象插入您的文档。
修改菜单文本菜单
“修改”菜单 使您可以更改选定页面元素或项的属性。使用此菜单，您可以编辑标签属性，更改表格和表格元素，并且为库项和模板执行不同的操作。
“文本”菜单使您可以轻松地设置文本的格式。
命令菜单站点菜单
“命令”菜单 提供对各种命令的访问;包括一个根据您的格式首选参数设置代码格式的命令、一个创建相册的命令等。
“站点”菜单 提供用于管理站点以及上传和下载文件的菜单项。
窗口菜单帮助菜单
“窗口”菜单 提供对 DW中的所有面板、检查器和窗口的访问。
“帮助”菜单 提供对 Dreamweaver 文档的访问，包括关于使用 Dreamweaver 以及创建 Dreamweaver 扩展功能的帮助系统，还包括各种语言的参考材料。
除了菜单栏菜单外，Dreamweaver 还提供多种右键显示上下文菜单，您可以利用它们方便地访问与当前选择或区域有关的有用命令。若要显示上下文菜单，右击窗口中的某一项。
dreamweaver入门(2004版本):常用工具栏：
“插入”栏“插入”栏包含用于创建和插入对象(如表格、层和图像)的按钮。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。 某些类别具有带弹出菜单的按钮。从弹出菜单中选择一个选项时，该选项将成为该按钮的默认操作。例如，如果从“图像”按钮的弹出菜单中选择“图像 占位符”，下次单击“图像”按钮时，Dreamweaver 会插入一个图像占位符。每当从弹出菜单中选择一个新选项时，该按钮的默认操作都会改变。
“插入”栏按以下的类别进行组织：
“常用”类别使您可以创建和插入最常用的对象，例如图像和表格。
“布局”类别使您可以插入表格、div 标签、层和框架。您还可以从三个表格视图中进行选择：“标准”(默认)、“扩展表格”和“布局”。当选择“布局”模式后，您可以使用 Dreamweaver 布局工具：“绘制布局单元格”和“绘制布局表格”。
“表单”类别包含用于创建表单和插入表单元素的按钮。
“文本”类别使您可以插入各种文本格式设置标签和列表格式设置标签。
“HTML”类别使您可以插入用于水平线、头内容、表格、框架和脚本的 HTML 标签。
“服务器代码”类别仅适用于使用特定服务器语言的页面，这些类别中的每一个都提供了服务器代码对象，您可以将这些对象插入“代码”视图中。
“应用程序”类别使您可以插入动态元素，例如记录集、重复区域以及记录插入和更新表单。
“Flash 元素”类别使您可以插入 Flash 元素。
“收藏”类别使您可以将“插入”栏中最常用的按钮分组和组织到某一常用位置。
文档工具栏
文档工具栏中包含按钮，这些按钮使您可以在文档的不同视图间快速切换：“代码”视图、“设计”视图、同时显示“代码”和“设计”视图的拆分视图。
工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。 以下对选项进行说明：
显示代码视图 仅在“文档”窗口中显示“代码”视图。
显示代码视图和设计视图 在“文档”窗口的一部分中显示“代码”视图，而在另一部分中显示“设计”视图。当选择了这种组合视图时，“视图选项”菜单中的“在顶部查看设计视图”选项变为可用。请使用该选项指定在“文档”窗口的顶部显示哪种视图。
显示设计视图 仅在“文档”窗口中显示“设计”视图。
标题 允许您为文档输入一个标题，它将显示在浏览器的标题栏中。如果文档已经有了一个标题，则该标题将显示在该区域中。
没有浏览器/检查错误 使您可以检查跨浏览器兼容性。
文件管理 显示“文件管理”弹出菜单。
在浏览器中预览/调试 在浏览器中预览或调试文档。从弹出菜单中选择一个浏览器。
刷新设计视图 当您在“代码”视图中进行更改后刷新文档的“设计”视图。
视图选项 允许您为“代码”视图和“设计”视图设置选项。
状态栏
状态栏提供与您正创建的文档有关的其它信息 标签选择器 显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。比如：单击 可以选择文档的整个正文。
窗口大小 弹出菜单(仅在“设计”视图中可见)用来将“文档”窗口的大小调整到预定义或自定义的尺寸。
“窗口大小”弹出菜单的右侧是页面的文档大小和估计下载时间。
dreamweaver入门(2004版本):定义站点：
设置站点
Web 站点是一组具有如相关主题、类似的设计、链接文档和资源。Dreamweaver MX 2004 是一个站点创建和管理工具，因此使用它不仅可以创建单独的文档，还可以创建完整的 Web 站点。创建 Web 站点的第一步是规划。为了达到最佳效果，在创建任何 Web 站点页面之前，应对站点的结构进行设计和规划。决定要创建多少页，每页上显示什么内容，页面布局的外观以及页是如何互相连接起来的。
请执行以下操作：
启动 Dreamweaver MX 2004：
选择“站点” >“管理站点”(即，从“站点”菜单选择“管理站点”)。 出现“管理站点”对话框。
在“管理站点”对话框中，单击“新建”，然后从弹出式菜单中选择“站点”。 出现“站点定义”对话框。
如果对话框显示的是“高级”选项卡，则单击“基本”。 出现“站点定义向导”的第一个界面，要求您为站点输入一个名称。
在文本框中，输入一个名称以在 Dreamweaver MX 2004中标识该站点。该名称可以是任何所需的名称。
单击“下一步”。出现向导的下一个界面，询问您是否要使用服务器技术。
选择“否”选项，指示目前该站点是一个静态站点，没有动态页。
单击“下一步”。出现向导的下一个界面，询问您要如何使用您的文件。
选择标有“编辑我的计算机上的本地副本，完成后再上传到服务器(推荐)”的选项。 在站点开发过程中有多种处理文件的方式，初学网页制作的朋友请选择此选项。
单击该文本框旁边的文件夹图标。 随即会出现“选择站点的本地根文件夹”对话框。
单击“下一步”， 出现向导的下一个界面，询问您如何连接到远程服务器。从弹出式菜单中选择“无”。 您可以稍后设置有关远程站点的信息。目前，本地站点信息对于开始创建网页已经足够了。单击“下一步”，该向导的下一个屏幕将出现，其中显示您的设置概要。
单击“完成”完成设置。 随即出现“管理站点”对话框，显示您的新站点。单击“完成”关闭“管理站点”对话框。
篇7：Dreamweaver菜单栏
“文件”菜单 包含“新建”、“打开”、“保存”、“保存全部”，还包含各种其他命令，用于查看当前文档或对当前文档执行操作，例如“在浏览器中预览”和“打印代码”。
“编辑”菜单 包含选择和搜索命令，例如“选择父标签”和“查找和替换”。“编辑”菜单还提供对DW菜单中“首选参数”的访问。
“查看”菜单 使您可以看到文档的各种视图(例如“设计”视图和“代码”视图)，并且可以显示和隐藏不同类型的页面元素和 DW工具及工具栏。
篇8：dreamweaver笔记
大家都使用过Word等软件的查找和替换功能，Dreamweaver的查找和替换功能与那些软件的查找和替换的用法相似，但功能更强大。在它的查找和替换对话框中甚至可以用精确的限定来控制查找过程。我们通过菜单栏－编辑－查找和替换，或者快捷键“Ctrl+F”，打开“查找和替换”对话框 ，如图1。
点击最上面的“查找范围”项的下拉列表按钮来选择查找的范围，如图2。有6个选项，第一项是在所选中的文字中查找；第二项是在当前所编辑的网页文档内查找；第三项是在现在所打开的所有文档中查找；第四项是在指定的文件夹中查找，如果我们选中了此项，在右边会出现一个用于指定文件夹的选择框，点击文件夹状按钮指定文件夹；第五项是在站点中所选定的文件中查找；第六项是在我们创建的整个站点中所有的文件中查找。
下面的“搜索”项用来选择查找的类型，如图3。有4项，第一项是指查找类型为HTML代码；第二项是文本，指非HTML代码；第三项是文本（高级），点选此项，下面会出现进一步选择的对话框；第四项是指查找类型为指定标签。
然后在下面“查找”框中输入要查找的内容，下面的“替换”框中输入要替换成的内容。
篇9：Dreamweaver段落缩进
首先打开HTML文档，将光标插入到要缩进的一个或者多个段落中，然后选择下面的任一种方法进行操作：
1. 使用菜单命
点击“格式”菜单，选择“缩进”项，即可设置段落的缩进，如果想取消缩进，点击“格式”菜单，选择“凸出”项即可。
2. 使用属性面板
在“属性”面板中，也可以设置或者取消段落的缩进。如下图所示：
篇10：DREAMWEAVER电子教案
三、教学过程
1.1 Dreamweaver MX概述
1、直观的新工作区
2、更加强大的模板
3、广泛的代码库
4、新服务器技术
5、帮助初学者起步的示例内容
6、XML和WEB标准支持
7、改进的级联样式表（CSS）
8、高性能的新编码功能
9、高性能的新编码功能
10、优化COLDFUSION MX开发环境
使用 Dreamweaver 工作区
一、教学目的：认识DR的界面，了解各面板的组成，菜单的组成。
二、教学重点：各面板的组成。
三、教学过程：
选择工作区布局（仅适用于 Windows）在 Windows 中首次启动 Dreamweaver 时，会出现一个对话框让选择一种工作区布局。如果以后改变了主意，可以使用“参数选择”对话框切换到一种不同的工作区。
选择工作区布局：
选择下列布局之一： Dreamweaver MX 工作区
HomeSite/代码编写者样式的 Dreamweaver MX 工作区 Dreamweaver 4 工作区
在选择一种工作区后切换到另一种工作区：
Dreamweaver MX 工作区
浮动工作区布局（Windows 和 Macintosh）状态栏
“文档”窗口底部的状态栏提供与正创建的文档有关的其他信息。调整“文档”窗口的大小
将“文档”窗口的大小调整为预定义的大小：
向“窗口大小”弹出式菜单中添加新的大小：
将“文档”窗口最大化（仅适用于 Windows 集成工作区）：
使用快速启动条
快速启动条显示在状态栏中，包含用以打开和关闭各种面板、检查器和窗口的按钮。
若要显示快速启动条，请在“面板”参数选择中启用“在面板和启动器中显示图标”选项。可以指定在快速启动条中显示哪些项目。
使用文档工具栏
“显示代码视图
“显示代码视图和设计视图”
“显示设计视图
“标题”
“文件管理”
“在浏览器中预览/调试”
“换行符”在插入点处插入一个换行符。还可以按下 Shift+Enter(Windows)“不换行空格”在插入点处插入一个不换行的空格()。“左引号”、“右引号”和“破折线”在插入点处插入标点符号。“英镑符号”、“欧元符号”和“日元符号”在插入点处插入货币符号。“版权”、“注册商标”和“商标”在插入点处插入相应的符号。“其它字符”
第二单元 文本的编辑与基本操作
一、教学目的：学习网页的组成对象 设计要素 文本的字体大小颜色，段落的格式，基本的编辑命令。
二、学教重点：文本编辑的基本操作
三、教学过程：
网页的组成比报纸和杂志复杂的多，因为它包含图、声、文、动画、控件等多媒体，另一大特点有超级链接。
1、文字
标题：一般为图形 尺寸 系统默认大小
样式：一般少用下划线
字体：一般为系统默认大小
颜色：以颜色来强调文章的重点
2、图形
一般为GIF 和 JPG 格式
3、超级链接
站内链接 和站外链接 网页的设计要素
不同浏览器的显示效果 网络的传输速度 屏幕的分辨率 颜色的显示
网页的基本操作 创建网页
文件――新建――对话框 打开文件类型 HTML SHTM SHTML XML文件
库文件LBI 模板文件 DWT
样式表文件 CSS 微软服务器端文件 ASP JAVA 服务器端文件 PHP文件 TXT文件
CFM模板文件
JSF
fireworks文件 LASSO 打开当前站点文件
从站点面板中打开 或 通过菜单－文件－打开命令 打开最近使用的文件
文件菜单下列出的文件名 从WORD中导入文件
先在WORD中将文件保存为HTML 文件 然后在DR 中 文件－导入－WORDHTML
还可打开后用命令－清除 保存网页 另存为模板 输入文本
直接输入 使用剪贴板
用ENTER 相当于插入
用SHIFT＋ENTER 相当于插入
改变字体样式 改变字号
要使字体不随浏览器的字体设置而改变就要用到层叠样式（CSS Style）文本的颜色 选择文字
然后用下列两种方式 用文字属性面板中调整
单击调色板中的右上角要将字体改为默认值点
按钮或菜单文本――颜色
上机练习：
段 落 格 式
创新新段落：
ENTER 分段落
在段落
格式下拉菜单选择一种格式 对齐段落：
居中对齐 左对齐 右对齐
缩进段落
取消缩进
或菜单 或选择段落后右击弹出菜单
项目符号： 每个段落前加一个项目符号 用
利用 插入分隔线
列表下拉选择各种不同的情况
修改分隔线的属性
改变长度 改变高度
改变对齐方式
插入特殊字符和符号
菜单插入｜特殊字符｜
弹出子菜单，进行所需要的项目选择
其中包括：
换行符 SHIFT＋RETURN 不换行空格 CTREL＋SHIFT＋SPACE
用于行首 插入符号
E－mail 地址链接
插入｜电子邮件链接｜
其效果将看到“欢迎联系”字样并带下划线 可以发送邮件 插入日期时间：
插入注释文字
基本编辑命令 撤销和重复操作 查找和替换
移动和复制
直接用鼠标拖动
使用CUT
COPY
PASTE
灵活使用HISTORY 面板 SHIFT＋F10
表示当前刚完成的操作
重放按钮 复制到剪帖板按钮保存命令按钮
弹出菜单按钮可清除历史记录等操作
上机练习，重复上述操作，记录快捷键
作业：做一个文字型的小网页，将学到的知识运用在上面。
第3单元网页中的图像链接
教学目的：掌握网页中插入图像、修改属性、插入交互图像以及创建交互图像的方法。教学重点：插入图像、控制图像 创建链接、插入交互图像的方法。插入图像操作：
1.在“文档”窗口中，将插入点放置在您要显示图像的地方，然后执行以下操作之一： o 在“插入”栏的“常用”类别中，单击“图像”图标。
在“插入”栏的“常用”类别中，将“图像”图标拖入“文档”窗口中（或者，如果您正处理代码，则拖入“代码”视图窗口中）。
o 选择“插入”>“图像”。
o 将图像从“资源”面板（“窗口”>“资源”）拖到“文档”窗口中的所需位置；然后跳到第 3 步。o 将图像从“站点”面板拖到“文档”窗口中的所需位置；然后跳到第 3 步。o 将图像从桌面拖到“文档”窗口中的所需位置；然后跳到第 3 步。
2.在出现的对话框中执行下列操作之一： o 选择“文件系统”以选择一个图形文件。o 选择“数据源”以选择一个动态图像源文件。3.浏览以选择您要插入的图像或内容源文件。o
如果您正在一个未保存的文档中工作，则 Dreamweaver 生成一个对图像文件的 file:// 引用。将文档保存到站点中的任何位置后，Dreamweaver 将该引用转换为文档相对路径。4.在属性检查器（“窗口”>“属性”）中，设置该图像的属性。设置图像属性
1.设置以下任一选项： o 使用缩略图下面的文本域设置名称，以便在使用 Dreamweaver 行为（例如“交换图像”）或脚本撰写语言（例如 JavaScript 或 VBScript）时可以引用该图像。o “宽”和“高”以像素为单位指定图像的宽度和高度。o
“源文件”指定图像的源文件。单击文件夹图标以浏览到源文件，或者键入路径。
“链接”指定图像的超链接。将“指向文件”图标拖到“站点”面板中的某个文件，单击文件夹图标浏览到站点上的某个文档，或手动键入 URL。有关创建链接的信息，“对齐”对齐同一行上的图像和文本。
“替代”指定只显示文本的浏览器或已设置为手动下载图像的浏览器中代替图像显示的替代文本。对于使用语音合成器（用于只显示文本的浏览器）的有视觉障碍的用户，将大声读出该文本。在某些浏览器中，当鼠标指针滑过图像时也会显示该文本。“地图名称”和“热点工具”允许您标注和创建客户端图像地图。“垂直边距”和“水平边距”沿图像的边缘添加边距（以像素为单位）。“垂直边距”沿图像的顶部和底部添加边距。“水平边距”沿图像左侧和右侧添加边距。“目标”指定链接的页应当在其中载入的框架或窗口。_blank，将链接的文件载入一个未命名的新浏览器窗口中。
_parent，将链接的文件载入含有该链接的框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件。
_self，将链接的文件载入该链接所在的同一框架或窗口中。此目标为默认值，因此通常不需要指定它。
_top，在整个浏览器窗口中载入所链接的文件，因而会删除所有框架。“边框”是以像素为单位的图像边框的宽度。默认为无边框。
“编辑”启动您在“外部编辑器”参数选择中指定的图像编辑器并打开选定的图像。有关设置外部图像编辑器的信息，“重设大小” Control+代字号(~)
第四单元表格设计
教学目的：学习下列方法
在“标准”视图中创建和修改表格 向表格添加颜色
在“标准”视图中设置相对宽度的表格
教学重点：能进行表格设计 教学过程：
在“标准”视图中创建和修改表格 1.在 Dreamweaver 中，选择“文件”>“新建”。即出现“新建文档”对话框。
2.在“空文档”列表中，选择“HTML”，然后单击“创建”以创建一个新的 HTML 文档。3.在“文档”工具栏的“标题”文本域中，输入“表格设计”为文档添加一个标题。
4.选择“文件”>“保存”将该文档保存到本地站点文件夹中。将其命名为 tableModify.htm。
插入表格
现在就可以在文档中插入表格了。
1.在“文档”窗口，将插入点放到文档中，然后执行下列操作之一： o 选择“插入”>“表格”。o 在插入栏的“常用”类别中，单击“表格”图标。
出现“插入表格”对话框。
2.在该对话框中，设置下列选项：
o 在“行数”文本框中，键入 2。o 在“列数”文本框中，键入 2。o 在“宽度”文本框中键入 600，然后在“宽度”文本框右边的弹出式菜单中选择像素。将宽度设置为 600 像素将创建一个固定宽度的表格。稍后，我们将在本教程中更详细地讨论表格宽度。
o 在“边框”文本框中，键入 1 将表格和表格单元格周围的边框宽度设置为 1 个像素。
3.单击“确定”。
Dreamweaver 将该表格插入到文档中。
4.执行下列操作之一来保存文档： o 选择“文件”>“保存”。o 按 Ctrl+S 组合键
修改表格
下一步，将修改表格的布局。将在表格中添加行和列，并且学习如何合并和拆分单元格以创建所需的页面布局。
1.在左上方的单元格中单击，然后向下拖动直到最下面的行以选择左边的一列。
2.选择“修改”>“表格”>“插入列”。现在该表格包含三列。
3.单击左下方的单元格，然后选择“修改”>“表格”>“插入行或列”。
即出现“插入行或列”对话框。提示： 如果想要插入特定数目的行或列，或者要选择在表格中插入行或列的位置，请选择“插入行或列”选项。
4.在该对话框中，设置下列选项： 对于“插入”，选择行。在“行数”框中，键入 2。对于“位置”，选择 所选之上。5.单击“确定”。
表格即会更新。现在的表格为四行三列。6.保存所做的更改（“文件”>“保存”）。合并和拆分单元格
通过合并和拆分单元格，可以自定义表格的设计以符合布局需要。接下来，将看到如何使用菜单选项或属性检查器来合并或拆分表格单元格。
1.在文档中，将指针从左上方的单元格拖到它下面的一个单元格，以选择表格左列的上面两个单元格。
2.选择“修改”>“表格”>“合并单元格”。
两个单元格合并成一个单元格。
3.单击第二列的第三行，然后向右向下拖动以选择第二列和第三列中的最后两行单元格。
4.在属性检查器中，单击“合并”按钮以合并单元格。选定的单元格合并为一个单元格。
可以拆分单个的单元格或列。
1.单击左上方的单元格。
2.在属性检查器中，单击“拆分单元格”按钮。“拆分单元格”对话框出现。
3.在该对话框中，设置下列选项： o 对于“把单元格拆分”，选择列。o 在“列数”框中，输入 2。4.单击“确定”。表格即被修改。
更改行高和列宽
现在调整该表格的尺寸。将要增加表格的行间距，并且调整表格列间距。
1.沿表格底部边框移动指针直到指针变成一个边框选择器，然后向下拖动以调整表格大小。
如果愿意，还可以使用此方法调整表格中的其他行高。
2.沿一个列的边框移动指针直到指针变成一个边框选择器，然后向左或向右拖动它以更改列宽。
3.调整完成后，保存文档。向表格添加颜色
可以向表格的任何部分添加颜色。将首先向整个表格添加背景颜色，然后对表格中的单元格应用不同的背景颜色。最后，将更改边框颜色。
1.在文档中，单击表格的任何一个单元格，然后在位于文档窗口左下方的标签选择器中单击