DM网页制作实验指导书

DREAMWEA VER 8基础

安装好Dreamweaver 8中文版后,运行，选择Dreamweaver 8工作区后，将看到下面的画面：

一、①为菜单区，和其它的软件一样，该软件所有的操作命令都可以从这一个区内找到,举个例子，选中该区编辑(E)中的参数选择(S)... CTRL+U[其中CTRL+U是该选项的快捷键],如下图所示：

在这里，你可以把自己的DREAMWEAVER MX设置为自己喜欢的样式，一般使用默认就可以了，如下图：

为了使用的方便，选中字体这一项目，把参数设置为上图所示的样子，因为默认的时候实在太难看了（当然也可以选自己喜欢的）。如果你浏览网页时使用的不是IE的话，请选中在浏览器中预览这一项（以后制作网页的时候要用到），点一下那个“＋”添加你使用的浏览器程序。

二、②是插入项目选择工具(插入面板)，在②选中了某个项目，③中会出现相应的插入项目，下面详细介绍，选中常用这一项后如下图：

锚点用于网页中的定位，如网页的上、中、下等；图像点位符是用于动态交换图片的，后面再说；Fireworks HTML为用Fireworks软件切割出来的图片；交换图像为鼠标移上去时变为另一图片，增强动感；表格数据可以将其它文件的数据转化为表格，插进网页；标签选择器可以插入其它不常用的HTML标签。

在②中选中布局一项，共有标准视图和布局视图两种视图，如下图所示：

在标准视图下，可以插入表格和在网页制作区画图层。

切换到布局视图下，如下图：

在布局视图下，可以在网页制作区描绘布局视图下的表格和单元格，描绘好之后，再切换到标准视图后，可以转化为表格，这个比较好用，可以用来排版网页，后面将说到。

在②中选中文本一项，可以对文本进行格式化，如下图：

A可以对字体进行全面的格式；B可以将字体变为粗体；I为斜体；S为加强字体；这些比较简单，可以自己一项一项慢慢试试，看看字体有什么变化。

在②中选择表单（表格和框架两项后面再说），可以插入各种按钮，如下图：

A为表单；B 为文本框；C 为隐藏域；D为文本区域；E为多选框；F 为单选框；G为单选按钮组；H为列表/菜单；I 为跳菜单；J为图像域；K为文本字段；L为按钮；M为标签；N为字段集。（详细的使用方法后面将说到）

在②中选中模版可以使用模版制作网页或自己创建模版，做起网页更加方便快捷。

在②中选中字符可以插入一些特殊的字符，如：???，其中BR为换行符（快捷键为CTRL ＋ENTER，此项与ENTER有所不同，可以自己试试），其它的可以自己试试。

在②中选中媒体，可以插入FLASH FLASH按扭FLASH文本Applet 等插件。

在②中选中文本头，将出现下面的画面：

关键字为网页的关键词，可以让搜索引擎搜索到；说明为网页的说明，如作者、介绍等；刷新可以设定多长时间后刷新网页或跳转到其它网页；基础为网页的基本链接，如插入一个目标为

_blank基础，网页中的一切默认链接都将打开新窗口；其它比较少用不再详细讲述。

在②中选中脚本，可以插入各种Javascript、Vbscript或其它脚本。

在②中选中ASP（编辑ASP网页时用到，新手可不必理会），可以插入各种ASP编程里用到的标签。

在②中选中应用程序（编辑动态网页时候用到，新手可不必理会），可以对数据库进行操作。

三、对④区的详解如下图：

在上图中，点击带有向下小箭头的工具，会弹出更多选择。

四、⑤区为网页设计区，你所设计的网页或代码将出理在该区。

五、⑥区为属性区(属性面板)，在该区可以对选中的对象进行一些设置（后面将有详细讲解）。

六、⑦区如下图所示，详细的使用将在后面的章节详细讲述。

操作举例题目：用DREAMWEAVER 8制作一个简单网页

实验操作步骤：

1．打开DM 8，点击Insert插入工具栏表格按钮，在弹出对话框中设置表格属性。

2．设置行为5，列为1，宽度width为700像素

3．在表格第一行中输入文本的标题

4．点击菜单window------properies修改，打开属性面板。

5．鼠标点击表格第二行，在属性面板中点击“bg”背景后的颜色框，如图，设置表格背景为深蓝色，代码为“003366”

6．第三行为空

7．第四行输入文本内容，回车，点击insert工具栏图片按钮，选择一个图片插入表格中。8．设置居中，再回车输入几个文字，也设置居中。

9．鼠标点击表格第二行，点击Insert工具栏图片按钮，插入一个1*1像素大小的透明图片。10．设置表格高度为1，单元格成为一条直。

11．写上网页的标题。

12．完成本页制作，按F12键预览网页效果。

实验二图文并茂实验目的：学会使用图像和直线的做法

一、直线问题

二、图像排列

三、图文环绕

四、项目列表

五、移动文字

实验三表格应用

实验目的：学会表格在网页中的用法

实验内容：

3-1图片的叠字问题

3-2表格的背景

3-3表格的边框

3-4表格的直线问题

3-5多样的表格

Label1

3-6表格的随意拆合

3-7随意表格3-8表格应用

实验四层的应用实验目的：学会使用层的用法

实验步骤：

4-1层的定位

4-2浮动的图层

4-3双背景图片

4-4Layer与iframe 4-5层和时间轴

4-6窗口和菜单

实验五CSS高级应用实验目的：学会CSS样式表的使用

实验步骤：

5-1 CSS简单应用

5-2 超链接式样

5-3 另类链接

5-4 改变鼠标样式5-5 彩色滚轴

5-6 文字阴影

实验六互动效果(行为应用)

实验目的：学会使用Dreamweaver内置行为设置

实验内容：互动效果一：

在网页上经常看到这样的效果，当鼠标移到一张图片上的时候，原来的图片就切换为另一张图片，鼠标移开后，又恢复原来的模样，是怎么做的呢？Dreamweaver比Frontpage优胜的其中一个地方是Dreamweaver能做出能具互动性的网页。现在，我们就利用Dreamweaver制作这个最简单的互动效果——变换图片。

准备两张大小相同的图片，一张是鼠标还没有移上的状态，另一张是鼠标移上去后的图片，例如以下两图：

点击对象面板上的（②区选中常用，在③区可找到），看到如下的对话框：

A图像名称(Image Name)：变换图片效果的标记名称，Dreamweaver会自动分配；

B原始图像 (Original Image)：指定原始的图片，（例如这里是左图）

C鼠标经过图像(Rollover Image)：指定鼠标移上去后的图片（例如这里是右图）；

D按下时，前往的URL：图片的链接网址(也可以是站点内的文件，点后面的浏览可以选择)；

例如按照上图的设置完毕后，按下OK，然后可以按F12(F12为预览网页的快捷键)预览一下效果了。

做出来的效果：

[小提示：细心的朋友会发现，做出来的链接不会弹出新窗口的，你可以选中刚做好的鼠标经过图像，在属性面板里的目标(T)选_blank]

互动效果二：

按下一按钮时，弹出一个问候的窗口。

在插入面板（②区），切换到表单,插入一个按钮，如遇到对话框，选否就行了。

选中刚插入的按钮，在属性面板把标签（L）改为请点击我

展开⑦区，再展开设计窗口，切换到行为窗口，也可以从①区（菜单栏）里的窗口（W），再选行为[其中Shift+F3为该操作的快捷键]

点一下行为窗口上的“＋”，再选弹出信息，如下图：

如果你发现弹出信息这一项为灰色的，不可选时，不用急，先选显示事件，接着IE (选IE 或IE 也是可以的)，如下图：

接着再按上一步的去操作，选中弹出信息后会出现下面的对话框：

填上你喜欢的消息，按下确定就OK了，再按下F12就可以看到你的大作了。

下面的是做出来的效果：

在Dreamweaver中，更复杂的效果是通过一个叫行为（Behaviors）的功能实现的，我们又称为事件的响应。通过网页元素的变化，如鼠标的移动、点击等“事件” (Events)，触发弹出窗口，关闭页面等“响应”（Actions），就是一个事件的响应。而值得高兴的是，“行为”的制作过程几乎是傻瓜式的，下面讲述行为的用法：

按Shift+F3，打开行为面板(上面已经说过)；

1、选取产生行为的元素，例如图片、带链接的文字、层等。如果需要在页面一载入就开始出现效果，可以选择状态栏上的标签

弹出菜单在网页制作中是一种非常常用的菜单方式，这种菜单不但制作简单，而且效果也很好。

效果说明

本实例所要完成的效果是当鼠标移动到文字上时，就会弹出一个漂亮的菜单，如图 17-1 和图 17-2 所示。

弹出菜单在网页制作中是一种非常常用的菜单方式，这种菜单不但制作简单，而且效果也很好。

创作思想

本实例首先在网页中输入一行文字，并对文字做一个特殊的超链接，然后利用 Dreamweaver MX 2004 自带的行为制作弹出菜单。

操作步骤

（ 1 ）输入文字并设置超链接。在网页中输入文字，因为单独的文本文字是无法添加行为的，按照 Dreamweaver 中的约定，将文字的超链接设置为“ javascript:; ”才能够添加行为。所以将文字的超链接设为“ javascript:; ”，并执行【显示弹出式菜单】行为，如图 17-3 所示。

（ 2 ）设置菜单项和子菜单项，并为菜单设置超链接，然后安排好各个菜单的次序，如图17-4 所示。

（ 3 ）设置页面元素。将菜单设置为垂直菜单，并分别设置菜单的字体、字号、对齐方式、一般状态和鼠标滑过时的状态，如图 17-5 所示。

（ 4 ）设置【高级】标签。在【高级】标签选项中设置菜单的延迟时间，以及是否显示菜单边框。然后设置边框的宽度、颜色、阴影、高亮，如图 17-6 所示。

2、按按钮选择一种响应（不同的元素，对应的响应也有所不同），并在随后的对话框中设置此响应的属性；以下是可以供选择的响应说明：

播放声音：可以为网页加入声音；

打开浏览窗口：可以打开一个小窗口（和网上的弹出窗口一样）；

弹出信息：可以弹出一条警告信息；

调用JavaScript：调用网页中包含的Javascript程序；

交换图像：实际上是交换图像；

更改办容：可以改变已经插入的层的内容；

恢复交换图像：把已经交换的图像恢复过来；

检测插件：可以检测访问者的浏览器是否己安装浏览网页所必须的插件；检测浏览器：检测访问者使用的是什么类型的浏览器；

检查表单：检验网页中的表单是否合法；

控制Shockwave或Flash：控制网页中包含的Shockwave或Flash；

转到URL：跳转到其它页面；

设定图像导航条：和交换图像差不多；

设置文字：在特定的地方显示文字；

显示或隐藏层：设置图层的显示或隐藏；

时间轴：可以制作更多的动态交果；（以后再说）

跳转菜单：插入跳转导航菜单；

跳转菜单开始：控制导航菜单跳到哪个页面；

拖动层：设定图层是否允许拖动；

预先载入图像：在网页装载前先预先载入图像；

显示事件：设定显示IE或NS各个版本的事件；

下载更多的行为事件：打开网页，去下载更多的事件。

3、选择事件（Events），决定在什么情况下触发响应。常见的的事件有：onMouseOver：鼠标移到目标上；

onMouseUp：按下鼠标再放开左键时；

onMouseOut：鼠标移开时；

onMouseDown：按下鼠标时（不需要放开左键）；

onClink：点击时；

onDblClick：双击时；

onLoad：载入网页时；

onUnload：离开页面时；

onResize：当浏览者改变浏览窗口的大小时；

onScroll：当浏览者拖动滚动条的时。

注意：当你找不到所需要的事件时，选显示更多事件，换取另一个浏览器的件事，或更高版本浏览器的事件