网站开发1

Dreamweaver 4.0 篇

第1章 初识 Dreamweaver

1.2 Dreamweaver 4 的工作界面

1. Dreamweaver 4 的文档窗口结构（P5）

Dreamweaver 4.0
文件	编辑	查看	插入	修改	文本	命令	站点	窗口	帮助
代码	码&页	网页	标题	传送	预览			选项
对象面板		编辑区
标准表单框架图像翻转图表格数据层导航水线邮件日期 Includ FireWork Flash F按钮 F文本布局标准视图\|布局视图		编辑区
属性面板			格式	字体	字号	颜色	对齐
属性面板			链接			目标
当前代码		状态栏	站点	资源	样式	CSS	行为	历史	代码

Micromedia Dreamweaver MX 版：

工具栏标签：

常用、布局、文本、表格、框架、表单、

模板、字符、媒体、头、特效、应用程序。

常用工具标签中的按钮：

超链接、电子邮件、书签、插入表格、画层、插入图像、

FireWork、 Flash、翻转图像、导航条、水平线、日期。

表单标签中的按钮：

表单、单行文本、文本域、多选、单选、列表、

跳转菜单、图像域、文件域、按钮、标签。

媒体标签中的按钮：

Flash、Flash 按钮、Flash 文本、

Java 小程序（Applet）、控件（Active X）、插件（Plugin）。

2.常用功能键

功能键	F2	F4	F8	F10	F11	F12
作用	层	面板	文件	代码	资源	预览

3.菜单：文件、编辑、查看、插入、修改、

文本、命令、站点、窗口、帮助。

站点：站点文件、站点地图、

定义站点—编辑—站点地图布局—

主页：H:\ddxss\index.htm

图标标签：页面标题

窗口：对象、属性、资源、行为、层、库、时间轴。

4.工具条

选项：表格框、层框、框架框、标尺、网格。

5.对象面板：

菜单：标准、表单、框架；

插入网页中的元素：图像、表格、水平条、Flash动画

6.属性面板：对象属性，如：格式、字体、字号、链接。

7.启动区：站点、资源、行为、历史、代码。

8.状态栏：

当前代码：标签选择区，如表格、单元格；

窗口大小 760*420（800*600）；

文档大小/下载时间。

　

作业1（P13）

1.试述Dreamweaver窗口结构中工具栏、对象面板、属性面板、

启动栏主要功能有哪些？（P5、P13）

2.办理交费网站空间，在互连网上建立一个自己的家。

3.自已独立设计个人主页（index.htm），自己创造自由发挥，

链接网络作业本（wlzyb.htm）。

4.打开教师网站上规定格式统一的网络作业本封面，

复制、粘贴到FrontPage新建的网页上，进行相应的修改后保存，

并逐步链接已完成的各章作业。

5.把个人主页、网络作业本、各章作业和按钮图片

上传到个人网站空间。

第2章文本与图像

2.2.8 超级链接（P22）

* 外部链接：跳转到其它网站。

* 内部链接：跳转到本网站的其它网页。

* 局部链接：跳转到本网页的指定位置。

* 绝对路径：协议://服务器主机名/用户名/路径/文件名

例如： http://asp2.6to23.com/fsxss/jttx/dd.htm

* 相对路径：文件名，可省略协议、服务器主机名、路径。

* 链接到命名锚（书签）

* 创建命名锚（P23）

对象面板—隐藏—插入命名锚—命名锚名称。

* 链接命名锚（P24）

选中链接源—属性面板—链接：

链接当前文档命名锚，如：# 第3章表格与表单

链接其它文档命名锚，如：wzkk1 # 第3章表格与表单

2.3.5 设置背景图像（P31）

* 修改—页面属性—背景图像。

2.3.6 制作翻转图像 fztx（P32）

1.对象面板—插入翻转图像 Rollover Image—

指出原始图像、翻转图像和链接对象路径和名称。

2.3.7 制作图像热区 rdlj（P33）

　

作业2（P34）

1.在网页中创建外部链接、内部链接和局部链接。（P22）

2.设置主页的背景图像。（P31）

3.制作翻转图像 fztx（P32）和图像热区 rdlj（P33）

　

第3章表格与表单

3.1.3 编辑表格

* 排序表格（P41）

命令—排序表格—

排序按：列1；

顺序：按字母升序。

3.4 添加表单对象

3.4.1 添加文本域（P49）

文本域：

单行文本框(Single line)、

多行文本编辑区(Multi line)、

单行密码框(Password)。

3.4.9 添加跳转菜单（P57）

跳转菜单（下拉列表）wzss

显示站点导航名称，单击选项后跳转到相应的网页或网址。

插入跳转菜单：

对象面板—表单—跳转菜单；

选项：如，文化教育，

选择时，前往的URL（值）：跳转的网页或网址。如，

网页：文化教育 whjy.htm，

网址：佛山电大 http://www.fsrtvu.net

　

选项	值（跳转的网页）
文化教育热门网站电影音乐搜索引擎图像动画软件下载	whjy.htm rmwz.htm dyyy.htm ssyq.htm txdh.htm rjxz.htm

　

选项

值（跳转的网址）

清华大学

北京大学

中央电大

佛山电大

南海电大

天下地图

网页制作

网页特效

www.tsinghua.edu.cn

www.pku.edu.cn

www.crtvu.edu.cn

www.fsrtvu.net

www.ounh.org

www.go2map.com

www.4gee.com

chhsht.51.net

　

作业3（P59）

1.在主页中添加跳转菜单（P57）

实现网站搜索和本站导航 wzss。

第4章框架与层

4.1 框架

4.1.2 框架的创建、删除与保存（P60）

* 创建框架

对象面板—框架—框架类型：标题、栏目、主框架。

显示框架边框：查看—可视化代理—框架边框。

* 删除框架（P61）

把框架边框拖到页面外。

* 保存框架（P62）

文件—保存所有框架—

保存框架集、标题框架、导航框架、主框架。

4.1.3 设置框架集的属性（P62）

* 选择框架集：单击框架边框。

* 选择框架：按[Atl]+单击框架窗格。

* 在框架使用链接（P66）

栏目框架—返回主页—

链接：index.htm；

目标：主框架。

4.2 层

* 蓝天流水飞鸽 ltlsfg 蓝天白云马儿跑 ltbymrp

佛山谢山水 fsxss

* 英文版功能齐全，可借助东方快车翻译英文。

4.2.2 插入层（P67）

* 标准对象面板（常用工具标签）==》绘制层。

* 插入菜单 ==》层。

4.2.3 层的基本操作（P68）

激活层、选择层、移动层。

4.2.4 用标尺与网格定位（P70）

查看—标尺/网格。

网格间距：默认50个像素，

捕捉间距：默认5个像素。

改变网格属性：查看—网格—设置。

4.2.5 设置层的属性（P72）

层名：根据对象起名。

Z轴索引：索引值大在上层。

4.2.6 层面板（P74）

窗口—层。

可见性	层名	Z轴索引
	移动的文字	2
	移动的图像	1
	网页中的文字	0
	背景图像	-1

　

作业4（P76）

1. 创建框架，框架类型：标题、栏目、主框架。kjwy（P61）

2. 利用层与时间轴制作网页动画。（P67、P99）

ltlsfg ltbymrp fsxss

　

第5章多媒体处理

5.1 插入对象（P77）

控件插件 kjcj

1. 插入—媒体—Flash动画、Applet(Java图形)、ActiveX控件。

或者对象面板—特殊—Flash、Applet、ActiveX。

2. 属性面板：

Flash动画：文件，如 dttx\ddmz.swf，编辑窗口有播放按钮。

Applet(Java图形)：代码，如 bs3yqx.class；基址，如txsj

ActiveX控件：源文件Src(Source)，如 dttx\BB.mpeg或HL.avi。

3.对象面板—Flash 按钮—

方形、箭头、圆角方形、播放、停止、前进、后退。

按钮图像 antx

5.2 行为（P84）

事件event	动作action	行为Behavior
激发行为，如鼠标事件	处理事件， Dreamweaver内置的 JavaScript代码库，如，提交表单控件内容。	动态交互网页，如，单击[提交]按钮后，把表单控件内容发送到服务器。
鼠标经过 onMouseOver	显示新图像，如，显示白狗	鼠标经过显示新图像。
鼠标按下 onClick	显示新图像，如，显示海豚，并跳转到Flash动画，如，天高任鸟飞	鼠标按下显示新图像，并跳转到Flash动画。
选择下拉菜单 onChange	跳转到网页 Go To URL 如，跳转到rmwz.htm 跳转到网站 Go To URL 如，跳转到www.163.com	跳转到热门网站网页。跳转到网易网站主页。
提交表单 onSubmit	把表单控件内容发送到服务器。	单击[提交]按钮后，把表单控件内容发送到服务器。
全部重写 onReset	把表单控件内容恢复为默认值。	单击[全部重写]按钮后，把表单控件内容恢复为默认值。

5.2.3 行为面板（P86）

打开行为面板：

MX 版：窗口 ==》行为（Behaviors） ==》设计：CSS、Html、行为。

4.0 板：状态栏启动区—行为面板。

5.2.4 添加行为（P87）

选中对象——行为面板[+]—显示事件—选择IE 5.0—

选择合适的行为。例如：

播放声音、弹出信息、设置导航条图像、跳转菜单开始、转到URL。

* Drag Layer（P92）

拖动层拖动飞鸽

新网页插入风景图像作背景—新建层插入图像，

如飞鸽，起始位置为100点。

选中对象：如，飞鸽所在层的选择柄；

行为面板[+]—Drag Layer—onClick拖动层；

拖放范围：Right 由起始位置向右移，如400点；

目标位置：Left 如500点，Top 如200点；

捕捉范围：50点；

确定。

0,0			Top 200点
	起始位置 100点	拖放范围向右移 Right 400点	目标位置 Left 500点	800,600

* 表单 JavaScript代码

<input type="text" name="textfield">
<br>
<input type="submit" name="Submit1" value="提交">
<input type="reset" name="onReset1" value="全部重写">

* Go To URL(跳转到 URL)（P94）

* Jump Menu Go(跳转菜单)：

* 跳转菜单创建后，要用行为面板才能编辑。

选中跳转菜单—启动区行为面板—双击跳转菜单。

* 编辑跳转菜单的 Go 按钮。

选中 Go 按钮—行为面板“+”—跳转菜单开始—选择跳转菜单表，

如，网站搜索表菜单。

跳转菜单 JavaScript 代码

必须指明脚本语言，否则产生运行期出错。

<script language="JavaScript">

<!--

function MM_jumpMenu(targ,selObj,restore){ //v3.0

eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");

if (restore) selObj.selectedIndex=0;

}

//-->

</script>

<form name="form1">

<p>

<select name="文化教育" onChange="MM_jumpMenu('parent',this,1)">

<option selected>文化教育</option>

<option value="http://www.tsinghua.edu.cn">清华大学</option>

<option value="http://www.pku.edu.cn">北京大学</option>

<option value="http://www.crtvu.edu.cn">中央电大</option>

<option value="http://www.fsrtvu.net">佛山电大</option>

<option value="http://www.ounh.org">南海电大</option>

</select>

</p>

</form>

　

<select name="网站搜索表2" onChange="MM_jumpMenu('parent',this,1)">
<option selected>网站搜索</option>
<option value="../whjy-bd.htm">文化教育</option>
<option value="../rmwz-bd.htm">热门网站</option>
<option value="../dyyy-bd.htm">电影音乐</option>
<option value="../ssyq-bd.htm">搜索引擎</option>
<option value="../txdh-bd.htm">图像动画</option>
<option value="../rjxz-bd.htm">软件下载</option>
</select>

<input type="button"
name="搜索表按钮" value="前往"
onClick="MM_jumpMenuGo('文化教育','parent',1)">

* Jump Menu(跳转菜单)：

跳转菜单 JavaScript代码

<select name="文化教育表1" onChange="MM_jumpMenu('parent',this,1)">
<option selected>文化教育</option>
<option value="http://www.tsinghua.edu.cn">清华大学</option>
<option value="http://www.pku.edu.cn">北京大学</option>
<option value="http://www.crtvu.edu.cn">中央电大</option>
<option value="http://www.fsrtvu.net">佛山电大</option>
<option value="http://www.ounh.org">南海电大</option>
</select>

* Play Sound(播放声音)（P96）

设置网页载入后播放声音；

启动区—行为—行为面板“+”—播放声音OnLoad—

浏览—midi01.mid。

    <body bgcolor="#FFFFFF" text="#000000"
   onLoad="MM_controlSound
   ('play','document.CS1044584931390','../yyyy/midi01.mid')">
   < embed name='CS1044584931390' src='../yyyy/midi01.mid' loop=false
   autostart=false MASTERSOUND hidden=true width=0 height=0>
   </embed>
   </body>

* Set Nav Bar Image(设置导航条图像)（P97）

选中对象，如飞鸽—行为面板“+”—设置导航条图像—基本—

状态图像：如，fg.gif

鼠标经过图像：如，dog.gif

按下图像：如，tgrnf.swf

导航条图像 JavaScript代码

<a href="../dttx/tgrnf.swf" onClick="MM_nbGroup('down','group1','fg','../dttx/ht.gif',1)" onMouseOver="MM_nbGroup('over','fg','../dttx/dog2.GIF','',1)" onMouseOut="MM_nbGroup('out')">
<img border="0" src="../fg.gif" width="110" height="53" name="fg"></a>

　

5.3 时间轴（P98）

用时间轴（Timeline)制作的页网动画是

通过JavaScript代码实现的。

5.3 时间轴面板

修改菜单==》时间轴。

5.3 创建时间轴动画（P99）

1.创建时间轴动画

将层移到动画的起始位置—点击层选择柄—右击时间轴面板—

添加对象—单击结束关键帧—把层移到动画的结束位置—

选择自动播放（AutoPlay）和循环（Loop）。

2.改变动画时间：拖动结束关键帧。

3.预览动画：按住时间轴面板的播放键。

4.增加关键帧：[Ctrl]+点击相应帧。（P100）

删除关键帧：修改—时间轴—删除关键帧。

　

作业5（P101）

1. 在网页中添加多媒体（控件插件 kjcj）。（P77）

Flash动画、Applet(Java图形)、ActiveX控件。

2. 添加行为（P87）

拖动层、拖动飞鸽（P92）

设置网页背景音乐（P96）

设置导航条图像（P97）

第6章模板与库

文件面板
站点	资源
文件	编辑	查看	站点
断开	刷新	下载上传	扩展/折迭

6.2.2 库的创建、管理与应用（P110）

1.库的创建

选中文档窗口中的对象，如，导航栏目 ==》

修改 ==》库 ==》添加对象到库。

或：修改 ==》库 ==》文件面板 ==》资源 ==》库 ==》

把对象拖到文件面板的库项目列表中。

2.管理

右击库项目—重命名、删除。

3.应用

把库项目从库面板中拖到文档窗口中。

演讲文档|工具软件|静态图像|动态视频|图形设计|音乐语言|通讯联络

6.2.3 修改库和更新站点（P111）

1.将文档中的库内容同库分开

选中文档中的库内容—单击属性面板“从源文件中分离”。

第7章站点管理

文件面板
站点	资源
文件	编辑	查看	站点
断开	刷新	下载上传	扩展/折迭

7.1 站点概述（P114）

1.站点地图：显示从站点主页起各层次的链接结构。

2.站点目录结构：可按导航栏目的分类内容建立相应的文件目录。

7.1 规划站点（P115）

1.站点的浏览机制

创建返回主页 的链接，显示网站的专题目录，显示当前位置，

提供搜索和索引，提供反馈途径。

7.3 创建本地站点

1.站点窗口（P117）

菜单：文件、编辑、查看、站点、窗口、帮助。

查看：作为根查看、显示网页标题、布局。

2.工具栏

站点文件、站点地图（仅地图、地图和文件）。

7.4 站点列表管理

7.4.1 打开本地站点（P119）

文档窗口或站点窗口—站点—打开站点。

7.4.2 编辑站点

文档窗口或站点窗口—站点—定义站点—编辑。

7.4.3 删除站点（P120）

删除Dreamweaver同本地站点的关系，不删除站点中的文件。

7.5 站点文件管理

7.5.2 文件的移动、复制和删除

站点文件的位置变化，Dreamweaver提示更新链接。

7.5.3 设置主页（P121）

站点文件列表— 选中文件，如dhlm.htm—站点菜单—设置为主页。

站点地图—选中文件，如dhlm.htm—查看菜单—作为根查看。

7.6 站点地图（P121）

1.单击启动栏[站点]打开站点地图，

2.可单独显示站点地图，或显示地图和文件。

3.站点地图的参数设置（P123）

MX 版：文件面板 ==》站点 ==》查看菜单 ==》显示网页标题。

4.0 版：文档窗口或站点窗口—站点—定义站点—编辑—

站点地图布局：主页、显示文件名称/页面标题、显示链接关系。

4.保存站点地图：

MX 版：文件面板 ==》站点 ==》文件菜单 ==》

保存站点地图，如 zddt.jpg。

4.0 版：站点窗口 ==》文件 ==》保存站点地图，如 zddt.jpg。

作业7（P132）

1. 站点地图显示什么结构？（P114）

2. 站点的浏览机制应该考虑哪些方面？（P115）

3. 在Dreamweaver中删除站点删除什么关系？

是否删除站点中的所有文件？（P120）

4.如何设置站点地图显示文件名称或页面标题？（P117、P123）

5.保存站点地图，并转换格式和链接到主页。