教学网站：网络天地828
网站名称
《Dreamweaver 案例》 实验要求
班级： 学号： 姓名 ：
实验1 申请个人网站空间
实验2 设置本地站点 、 设计个人主页
实验3 CSS 样式表应用（P58）
实验4 创建鼠标经过图像（P78）
实验5 插入导航条、图像热点链接（P100、P101）
实验6
插入动态元素 （P117、P119）
实验7 用层布局页面（P132）
实验8 用表格布局页面（P157）
实验9 创建框架网页（P175）
实验10
布局页面（P188）
实验11
创建和应用模板（P204）
实验12
添加网页行为（P237）
实验13 创建注册网页（P258）
实验14
网站设计（P289）
实验1 申请个人网站空间
所用软件：IE 浏览器、 CuteFTP 软件
实验目的：到中国学生网申请 50MB 空间或 100M ASP 空间。
实验过程：
1.登录“中国学生网” 购买交费的 网站空间 ，
建立一个“互联网上的家园，展现自我的空间，勾画心中的蓝图，描绘美好的人生”。
发展方向提供网络虚拟空间，如朋友留言、知已聊天、学术论坛、……。
50MB空间5个人共用每人10MB空间，每月交费5元，每人1元。
2.共用的网站空间中每人一个文件夹，文件夹名用姓名的拼音首字母。
每个人应有自己的主页 index.htm。
3.填写用户名和口令，要求用笔记录，用户名不能忘记。
用户名：如，wltk（网络天空），只能用拼音或英文字母，不能用汉字。
口令：如，******
电子邮件：如，fsxss@126.com，要求真实邮件，
用于接收学生网发送的有关个人网站空间开通的邮件。
4.交费开通个人网站空间后，下载“文件上传下载”的软件 CutFTP32.rar 。
打开 CuteFTP 软件，建立新站点，填写资料。
主机地址，如 asp2.6to23.com
用户名：如 wltk
口令：如，******
连接远程站点
5.选择“本地站点”上的文件 如，index.htm，点击上传按钮传送到远程站点的个人空间。
6.在 IE 浏览器地址栏输入网址，如 ，打开个人主页。
心得体会：在实验中学习和掌握到什么技巧？有什么提高？有什么想法和建议？
实验2 设置 Web 站点 、设计个人主页
实验内容：
定义本地站点
1.在 Windows 资源管理器中新建文件夹，如 E:\本地站点。
2.在 Dreamweaver MX 中
站点—新站点—高级选项卡—类别：本地信息
-
站点名称：如，本地站点
-
本地根文件夹：如，E:\本地站点
4.在 Dreamweaver MX 中打开主页 index.htm。
链接实验要求时采取浏览方法找到实验要求文件。
5. 设置链接的颜色：属性面板/页面属性/分类：链接/
链接颜色：蓝，变换图像链接：紫，已访问链接：棕，活动链接：绿。（P28）
6. 实验要求页面：填写班级、学号、姓名。链连实验结果。
7.学生独立设计个人主页，设置背景图像(<50kB)和音乐(<10kB)，要求主页<10kB。
要求 个人主页 链接： 实验要求 | 老师网站
心得体会：在实验中学习和掌握到什么技巧？有什么提高？有什么想法和建议？
实验3 CSS 样式表应用（P58）
1.创建 CSS 样式
新建 CSS 样式/.newCSS、类、新建样式表文件/如，style_file.css/
类型：如，字体：黑体、大小：24、颜色：红色。
2.编辑 CSS 样式
3.应用样式表
选中要套用格式的对象/CSS样式面板/右击样式，如.newCSS/套用。
实验4 创建鼠标经过图像（P78）
1.鼠标经过图像（P78）
插入/图像对象/鼠标经过图像/
设置翻转图属性：原始图像、翻转图像、链接对象。
2.裁切图像（P79）
选中图像/属性面板/单击裁切图像按钮/框住图像所需部分/再单击裁切图像按钮。
3.网站相册（P76）
命令/创建网站相册/相册标题、源图像文件夹、目标文件夹。
Dreamweaver 启动 Fireworks 创建“缩略图”“页面”“图像”3个文件夹。
实验5 插入导航条、图像热点链接（P100、P101）
1.图像热点链接（P101）
单击图像/属性面板/选择矩形热点工具按钮/
在图像拖放出矩形/在属性面板上，
链接：找出文件，如，乌镇 wz.htm，长沙 cs.htm。
2.插入导航条（P100）
使用 Dreamweaver MX 插入导航条按钮（包含多按钮的水平菜单）
插入—图像对象—导航条—导航元件：
项目名称：如，shouye（必须用字母，不能用汉字）
状态图像：如，shouye.jpg
鼠标经过图像：如，shouye.jpg
按下时，前往的 URL：如，shouye.htm；
添加项—
项目名称：如，jieshao,wenhua,yewu,lianxi,hezuo。
实验6 插入动态元素 （P117、P119）
1.插入 Flash 影片、按钮、文本 （P116）
插入 Flash
按钮、文本时，站点文件夹必须用字母，不能用汉字。
如 “林木森站点/动态元素”应该改为“LMSzd/dtys”。
插入/媒体/Flash/Flash、Flash 按钮、Flash 文本。
广告条：banner.swf，
导航条：Flash 按钮，样式：蓝色水波 Blue Warper，
按钮文本：“首页”“Flash 故事”“Flash 论坛”“Flash 大赛”。
调整按钮距离：插入不换行空格（P38）[文本]插入栏/[PRE]。
Flash 影片：“你要喝什么饮料” 1.swf.
Flash 文本：“精品推荐”“人气作品”。
2.插入 Shockwqve 影片、Applet、插件（P112）
3.设置背景音乐（P119）
在<head>和</head>之间加入代码：
<bgsound src="midi1.mid" loop="-1">
实验7 用层布局页面（P132）
1.创建层：[布局]插入栏/描绘层/拖动鼠标创建层。（P121）
显示层锚记：编辑/首选参数/不可见元素选中层锚记。（P122）
显示[层]面板：窗口/层/Z轴顺序数值小在底层。
2. 用层布局页面（P132）
2.1 在编辑窗口建立3个层：
标题层：C1 800*80，插入广告条 biaoti.jpg。
导航层：C2 160*420，插入背景图像 1.jpg，建立7个子层 C4，分别插入导航按钮 shouye.jpg，……。
文本层：C3 640*420，输入文本，建立子层 C5 640*45，输入文本“业务范围”。
2.2 层对齐：修改/对齐/C3和C2对齐上缘，C3和C1右对齐。
（Dreamweaver 8.0 修改/排列顺序/上对齐）
2.3 设置页面背景图像：beijing.jpg。
实验8 用表格布局页面（P157）
1.在编辑窗口创建 2行2列的表格。
2.第一行合并表格，插入广告条 biaoti.jpg。
3.第二行左列设置背景图像 1.jpg，
插入导航条。
4.第二行右列拆分单元格为2行，
上面一行：设置背景颜色为黑色，输入文本“合作伙伴”。
下面一行：插入2行5列表格，
分别插入图片“天杰”“民轩”“联伦特”“宏毅”，输入相应的文本。
5. 设置页面背景图像：beijing.jpg。
实验9 创建框架网页（P175）
1.新建框架网页，选择框架类型：上方固定，左侧嵌套
（上边框架、左边框架、中间框架）。
2.上边框架（标题栏）：插入广告条 banner.jpg，或输入与本站点相关的标题。
3.左边框架（导航栏目）：插入导航条按钮原始图像（1a.jpg --
6a.jpg），
链接文件：首页zjkj.htm、小说xs.htm、散文sw.htm、
流行lxgq.htm、古典gdyy.htm、留言ly.htm。
目标框架：中间框架。
设置左边框架背景颜色：#D9FFD9。
4.中间框架：修改/框架集/拆分左框架（主框架拆分后放在左边）。
设置中间框架背景图像：beijing.jpg。
在中间框架中，插入4行4列的表格，
在单元格中分别插入图像 1.jpg -- 8.jpg，输入相应的文本。
5.点击导航条后，中间框架应该能正确显示相关的网页 。
实验10 布局页面（P188）
1.新建空白页/[布局]插入栏/[布局]切换到布局模式/[属性面板]选居中。
2.[布局表格]按钮/绘制布局表格 800*500。
3.[布局单元格]按钮/绘制顶部布局单元格，
切换到标准模式后，插入广告条 biaoti.jpg。
4.[布局单元格]按钮/绘制左侧布局单元格，添加导航条，设置背景图像为 1.jpg。
5.绘制右侧 2 个布局单元格，分别添加标题“首页”插入广告公司图片 gggs.jpg。
6. 设置页面背景图像：beijing.jpg。
实验11 创建和应用模板（P204）
1.把广告公司首页另存为：本地站点\Templates\moban.dwt 模板，
moban.dwt 模板必须存放在 Templates
文件中，应用模板才能找到。
保留广告条、导航条、背景等站点页面的公用元素，删除非公用元素。
2.把右边 2 个单元格创建为可编辑区域：插入/模板对象/可编辑区域。
3.应用模板：窗口/资源/[模板]按钮/右击模板 moban/从模板新建。
（或：文件/新建/模板标签/moban）。
4.输入标题“户外广告”输入广告文本。
实验12 添加网页行为（P237）
1. 添加“弹出信息”行为时，站点文件夹必须用字母，不能用汉字。
1.1 打开 TVB.htm/单击<body>标签/行为面板[+]按钮/
1.2 弹出信息/消息：“TVB 阵线”的精彩内容，热烈欢迎各位光临欣赏！
1.3 行为面板/事件 onLoad。
2.对导航条按钮创建弹出式菜单（垂直菜单）
2.1 选择[TVB 明星]按钮 — 行为面板[+] — 显示弹出式菜单—
输入弹出菜单要显示的文本：“男明星”“女明星”；
超链接地址：1.htm；
目标窗口 ：新窗口；
外观：字体、字号；
位置： 将菜单位置设置到导航条按钮的底部。
2.2 修改弹出式菜单
修改导航条按钮： 插入—图像对象—导航条—修改目前的导航条。
修改弹出式菜单：选择某一个按钮 —行为面板[+]—双击“显示弹出式菜单”。
更换导航条按钮：
选择某一个按钮 —行为面板[+]— 双击“设置导航条图像”—从本地站点选择按钮。
创建弹出式菜单后， Dreamweaver MX 生成 mm_menu.js 文件 31kB。
3.添加“打开浏览器窗口”行为（P238）
3.1 选中“流金岁月”图像/行为面板[+]/打开浏览器窗口/
要显示的 URL：9.jpg；窗口：300*400；
3.2 行为面板/事件 onMouseOver。
实验13 创建注册网页（P258）
1.创建注册网页（P258）
TVB 阵线注册网页、意见反馈表单。
2.在主页中添加跳转菜单,
跳转菜单 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>
实现跳转3个自选网站和跳转3个本站网页 wzss 。
网站搜索 ： 网站搜索 清华大学 北京大学 中央电大 佛山电大 南海电大
本站导航： 网络天地、教学园地、实验要求。
| 网页标题 |
网页文件名 |
按钮链接 |
网络天地 |
index.htm |
|
教学园地 |
jxyd.htm |
|
实验14 网站设计（P289）
1.创建站点：Dreamweaver 管理站点 /新建站点/本地站点文件夹 E:\Star\。
2.[文件]面板/右击 Star 站点/创建新文件夹：图像文件夹 PIC，星座文件夹 12。
3.右击 Star 站点/创建新文件：主页index.htm，
星座壁纸 bizhi.htm，星座名人 mingren.htm，星座歌曲 gequ.htm，
星座故事 gushi.htm，星座专题 zhuanti.htm，星座笑话 xiaoha.htm。
4.在 12 文件夹下创建 12 个星座的页面：
白羊座 baiyang.htm、金牛座 jinniu.htm、双子座 shuangzi.htm、
巨蟹座 juxie.htm、 狮子座 shizi.htm、 处女座 chunv.htm、……。
5.制作模板（P292）
窗口/资源/模板/新建模板/star 模板；
5.1 编辑模板：
设置背景图像：beijing.jpg；
表格布局：3行1列，宽800；第 3 行分为 3 列；
添加网页元素：第 1 行插入广告条 banner.jpg；
第 2 行插入导航条；
项目 |
名称 |
状态图像 |
鼠标经过图像 |
前往 URL |
主页 |
shouye |
shouye.jpg |
shouye1.jpg |
index.htm |
星座壁纸 |
bizhi |
bizhi.jpg |
bizhi1.jpg |
bizhi.htm |
星座名人 |
mingren |
mingren.jpg |
mingren1.jpg |
mingren.htm |
星座歌曲 |
gequ |
gequ.jpg |
gequ1.jpg |
gequ.htm |
星座故事 |
gushi |
gushi.jpg |
gushi1.jpg |
gushi.htm |
星座专题 |
zhuanti |
zhuanti.jpg |
zhuanti1.jpg |
zhuanti.htm |
星座笑话 |
xiaoha |
xiaoha.jpg |
xiaoha1.jpg |
xiaoha.htm |
第 3 行左右列插入 12 星座图像、
[星座运程]按钮、[星座速配]按钮、12 星座的跳转菜单、图像域。
左列插入 6 个星座图像：白羊座
、金牛座、双子座、巨蟹座、狮子座、处女座；
插入[星座运程]按钮 yuncheng.jpg、12 星座的跳转菜单；
插入图像域：“表单”插入栏/图像域/选择 go.jpg 。
5.2 创建可编辑区域：选中第 3 行/插入/模板对象/可编辑区域。
6. 制作首页（P297）
打开 index.htm/[资源]面板/模板/选中 Star 模板/应用；
中间单元格/插入 12行1列表格，宽度 440/边框颜色 #003399；
第 1 个单元格：背景图像 hengbiao1.jpg；文本“星座壁纸”，暂时链接当前页。
[行为]面板 [+]/弹出信息/消息：“告诉你最眩的星座秘密！！”
7. 制作“星座壁纸”页（P299）
打开 bizhi.htm/[资源]面板/模板/选中 Star 模板/应用；
中间单元格/插入 14行2列表格，宽度 440/边框颜色 #003399；
第 1 行合并单元格：文本“星座壁纸”。
第 2 行左边单元格：插入图像 1.jpg，文本“白羊幸运花：牡丹”链接 01.jpg，目标：_blank。
