Dreamweaver实例教学30例.docx
《Dreamweaver实例教学30例.docx》由会员分享，可在线阅读，更多相关《Dreamweaver实例教学30例.docx（103页珍藏版）》请在冰点文库上搜索。
Dreamweaver实例教学30例
Dreamweaver实例教学
实例1站点的建立
实例2布局表格
实例3层的运用
实例4显示隐实藏图层
实例5插入背景音乐
实例6插入背景图像
实例7文本超
实例8图像热点
实例9弹出信息
实例10自动跳转
实例11创建交换图
实例12跳转菜单
实例13插入FLASH文本
实例14插入FLASH按钮
实例15插入FLASH动画
实例16插入视频
实例17显示弹出式菜单
实例18框架的使用
实例19创建相册集
实例20插入按钮
实例21页面配色方案
实例22CSS的使用
实例23自动格式化表格
实例24使用表格间隔图像
实例25单元格自动延伸
实例26炽热文字
实例27显示当前日期
实例28显示登陆时间
实例29状态栏中跳动的文字
实例30左右移动的图片
实例1站点的建立
目的：
了解和掌握怎么建一个,这是做的第一步,因此必须掌握。
要点：
要对Dreammeavermx2004的工具栏有一定的了解，还要熟悉其的用途。
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
（1）启动Dreamweavermx2004,如图1.1.1所示.
图1.1.1启动后所示的界面
（2）选择菜单栏的站点（S）→站点管理（M）命令,打开对话框,如图1.1.2所示.
图1.1.2“站点管理”对话框
（3）单击”站点管理”对话框的新建（N）出现”站点（S）和FTP与RDS服务器（F）”,选择其中的”站点（S）”出现对话框,如图1.1.3所示.
图1.1.3“站点定义1”对话框
（4）在文本框里可以为你的站点起个名字,然后按下一步出现对话框,如图1.1.4所示.
图1.1.4“定义站点2”对话框
（5）在对话框中,根据自己所做的选择”否”或者”是”.如果你做的是静态网页,那么就可以选择”否”,如果你做的是动态网页,那你就要选择”是”,然后在下拉菜单中选择你所用的服务器技术类型.我做的是静态网页,因此我选择”否”,然后再按下一步出现对话框,如图1.1.5所示.
图1.1.5“站点定义3”对话框
（6）选择系统推荐的选项,在文本框里可以填入你所建的保存路径,也可以不变系统默认的路径,然后按下一步出现对话框,如图1.1.6所示.
图1.1.6“站点定义4”对话框
（7）根据你自己的实际情况,如果你想下传到某服务器上的话,那你就从下拉菜单中选择你所用的上传方法,如果不想上传的话,就选择”无”,然后再按下一步,出现对话框,如图1.1.7所示,按完成,出现图1.1.8所示,再按完成这就完成了建一个站点的过程.
图1.1.7“站点定义5”对话框
图1.1.8“站点定义6”对话框
实例2布局表格
目的：
学会制作表格,能熟悉掌握表格的作用,现在大部分网页都运用到了表格,它是做网页不可缺少的技术,也要熟悉掌握.最终效果如图:
.
要点：
主要应用布局表格和布局单元表格来绘制表格,同时在表格中插入图片和添加文本,或者flash等等,最终实现你所想的效果.
创作步骤
（1）启动Dreamweavermx2004软件.
（2）选择文件→新建（N）… Ctrl+N命令,打开新建文档对话框,如图1.2.1所示,单击创建（R）按钮,创建一个空白HTML文档,如图1.2.2
图1.2.1“新建文档”对话框
图1.2.2新建空白HTML文档
（3）选择菜单栏的修改→页面属性（P）…Ctrl+J命令,弹出页面属性对话框,如图1.2.3所示,在标题（T）:
栏中输入文字作为标题,如现在输入”布局表格”,再按确定,返回主界面.
图1.2.3“页面属性”对话框
（4）单击工具栏的按钮,切换到”布局视图”工作界面,如图1.2.4所示.
图1.2.4“布局视图”工作界面
（5）单击在工具栏上的布局表格按钮,在页面中拖曳鼠标绘制一个布局表格,如图1.2.5所示.
还可以根据你的需要来调整表格的大小.
图1.2.5绘制布局表格
（5）单击工具栏上的绘制布局单元格按钮,在需要添加布局单元格的位置拖曳鼠标,绘制布局单元格,如图1.2.6所示.
图1.2.6绘制布局单元格
（6）重复第（4）和（5）步的操作,绘制其它布局表格和布局单元格,如图1.2.7所示.
图1.2.7绘制其它单元格
（7）在布局单元格添加文本和图像,如图1.2.8所示.
图1.2.8表格添加容
（8）选择文件（F）→另存为（A）…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.2.9所示.
图1.2.9浏览器中的效果
实例3层的运用
目的：
学会使用层的技术,虽然现在的大部分的网页是没有用到层,但要制作一些比较特别的网页时,用层比用表格简单得多.
要点：
本例要用到层的技术,建层,改变层的属性等,制作一些布局比较简单的网页.
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
（1）启动DreamweaverMX软件.
（2）按上例创建一个名为”层的运用”的网页,如图1.3.1所示.
图1.3.1“层的运用”网页的建立
（3）选择插入（I）→布局对象→层（Y）命令,插入一个层,如图1.3.2所示.
图1.3.2层的建立
（4）点击层的里面便可对层的容进行编辑,你可插入图片也可插入文字,现在就来插入图片,选择插入（I）→图像（I）…Ctrl+Alt+I打开对话框,如图1.3.3所示
图1.3.3“打开”的对话框
（4）选择你所定好的图片,然后再按确定,再调整图的大上和层的位置,最后可得效果如图1.3.4所示.
图1.3.4插入图片
（5）重复步骤3再插入一个层,输入文字在层里,根据你的需要移动和调整层的位置大小,也可以在”属性”修改层,最后效果如图1.3.5所示.
图1.3.5最终效果
（6）选择文件（F）→另存为（A）…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.3.6所示
图1.3.6在浏览器中的效果
实例4显示隐实藏图层
目的：
制作显示隐藏图层的效果,使网页具有动态效果.如右图.
要点：
本例主要应用”显示隐藏图层”命令.单击”显示”按钮,页面中显示所有的图层,单击”隐藏”按钮,隐藏所有的图层.
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
（1）启动DreamweaverMX软件.
（2）按上例创建一个名为”显示隐藏图层”的网页,如图1.4.1所示.
图1.4.1“显示隐藏图层”网页的建立
（3）在网页使用布局表格技术建立表格,如1.4.2所示.
（4）单击第一个单元表格,单击插入（I）→布局对象（Y）→层（Y）命令,调整层的大小刚好等于
第一个单元表格的大小,单击层里面,选择插入（I）→图像（I）…Ctrl+Alt+I命令,出现对话
如图1.4.3所示,选择图像按..
（5）单击第二个单元表格,按步骤4,插入层和图像,并在第三和第四个单元表格分别写上”显示”和”隐藏”.最后效果如图1.4.4所示.
图1.4.2建立表格的网页
图1.4.3“打开”对话框
（6）选择第三单元表格里的”显示”,单击窗口（W）→行为（E）…Shift+F3,打开行为面板,如图1.4.5所示
（7）单击”添加行为”按钮,在弹出的下拉菜单中选择显示-隐藏层命令,打开显示隐藏层对话框,如图1.4.6所示.
（8）选中所有图层,单击按钮,为所有层添加显示行为,如图1.4.7所示,单击按钮,关闭显示-隐藏层对话框.
（9）单击面板中的”下拉箭头”按钮,在弹出的下拉菜单中选择onClick选项,如图1.4.8所示.
（10）重复6~9步的操作,选中第四单元表格里的”隐藏”,为那二层（即那二图像）添加隐藏图层及相应触发事件,如图1.4.9.所示.
图1.4.4插入图像的网页
图1.4.5行为面板
图1.4.6“显示-隐藏层”对话框
图1.4.7设置显示层行为
图1.4.8设置触发事件
图1.4.9设置隐藏层行为
（11）选择文件（F）→另存为（A）…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.4..10和1.4.11所示
图1.4.10单击”显示”的效果图1.4.11单击”隐藏的效果
实例5插入背景音乐
目的：
使网页更加活泼生动.如右图所示.
要点：
本例主要让你了解本软件的基本功能,学习怎么在网页中添加音乐.
～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
（1）启动DreamweaverMX软件.
（2）按上例创建一个名为”背景音乐”的网页,如图1.5.1所示.
图1.5.1“背景音乐”网页的建立
（3）按上例在网页中插入图像居中,再插入一个层,并在层里输入文字”让我唱支歌!
”调整层的
大小和位置.如图1.5.2所示.
（4）按上例单击窗口（W）→行为（E）…Shift+F3,打开行为面板.
（5）单击”添加行为”按钮,在弹出的下拉菜单中选择播放声音命令,打开播放声音对话框,如图1.5.3所示.
（6）单击播放声音文本框后的按钮,在弹出选择文件对话框中选中一个音乐文件（见
图1.5.4所示）单击按钮.
图1.5.2插入图像和层的效果.
图1.5.3“播放声音”对话框
图1.5.4“选择文件”对话框
（7）单击面板中的”下拉箭头”按钮,在弹出的下拉菜单中选择onLoad选项,如图1.5.5
所示.
（8）选择文件（F）→另存为（A）…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.5.6所示.
图1.5.5设置触事件→
图1.5.6浏览器中的效果
实例6插入背景图像
目的：
使网页在颜色方面不是那么单调.效果如右图所示.
要点：
本例主要学习如果把一图片作为网页的背景图像,使网页更加好看.
～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
（1）启动DreamweaverMX软件.
（2）按上例创建一个名为”插入背景图像”的网页,如图1.6.1所示.
如图1.6.1”插入背景图像”网页的建立
（3）在网页中输入文字,并在网页下面的中,改变文字的大小和位置,如图1.6.2所示.
（4）在网页空白处按右键,选择页面属性（T）…出现对话框,如图1.6.3所示,
（5）单击页面属性对话框中的出现选择文件对话框,如图1.6.4所示.按.
（6）选择文件（F）→另存为（A）…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.6.5所示.
图1.6.2在网页中输入文字
图1.6.3页面属性的对话框
图1.6.4选择文件对话框
图1.6.5在浏览器中的效果
实例7文本超
目的：
制作具有超的网页.如右图所示.
要点：
本例学习如何设置超,它是制作的最基本技术,因为现在的可以说没有一个不用到它,因此学会它是非常有必要的.
～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
（1）启动DreamweaverMX软件.
（2）按上例创建一个名为”超”的网页,如图1.7.1所示.
图1.7.1”超”的网页建立
（3）按上例的步骤制作同样的网页,并在诗的下面加多一行字”更多的诗”,效果如图1.7.2所
示.
（4）选择最后一行字”更多的字”点击右键,选择创建（L）出现选择文件对话框,如图1.7.3所示.然后选择你选定的网页,即当点击文字”更多的诗”时所显示的网页,你应该先做好它.最后按.
图1.7.2添加字后的网页
图1.7.3选择文件的对话框
（5）选择文件（F）→另存为（A）…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.7.4所示..当你点击”更多的字”时,网页就会转到你所的网页.
图1.7.4在浏览器中的效果
实例8图像热点
目的：
制作出具有图像的网页,即当你点击图像中的某一处时,网页会转到它所的网页去,最后如右图所示.
要点：
本例所用到的技术跟上例差不多,上例是文本的超,而本例是图像的一小处的超.特别是介绍照片中很多人的其中一个是谁时,就能用到这种技术.
～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
（1）启动DreamweaverMX软件.
（2）按上例创建一个名为”图像热点”的网页,如图1.8.1所示.
图1.8.1”图像热点”的网页的建立
（3）按以上几例所讲到的技术在网页中插入图片,并调整图片的大小和位置,结果如图1.8.2所示.
（4）选择图片,点击下面的,鼠标就变成一个”+”,然后在图片中选择区域的大小,如图1.8.3所示.
（5）在后面的文本框里填入你要的文件或者点击下面右边的,出现选择文件对话框,如图1.8.4所示,并在后面写上”了解我更多”..
图1.8.2插入图片后的网页
图1.8.3选择图片的区域
图1.8.4选择文件对话框
（6）选择文件（F）→另存为（A）…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.8.5所示..当你鼠标移到刚才你所选的区域时,就会显示”了解我更多”点击它网页就会转到你所的网页.
图1.8.5在浏览器中的效果
实例9弹出信息
目的：
制作一些能自动跳出信息的网页.如右图所示.
要点：
本例主要应用了”添加行为”的技术,跟例5有点相像,
也是用到”添加行为”技术.
～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
（1）启动DreamweaverMX软件.
（2）选择文件（F）→打开（Q）…Ctrl+0命令,打开打开对话框（见图1.9.1）,选择上例的网
页,如图1.9.2所示.
图1.9.1“打开”对话框
（3）按上例单击窗口（W）→行为（E）…Shift+F3,打开行为面板.如图1.9.3所示.
（4）单击”添加行为”按钮,在弹出的下拉菜单中选择弹出信息命令,打开弹出信息对话框
并文本框里写入”欢迎光临本站”.按确定退出.如图1.9.4所示
（5）选择文件（F）→另存为（A）…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.9.5所示.
图1.9.3“行为”面板
图1.9.2打开上例的网页
图1.9.4“弹出信息”对话框
图1.9.5在浏览器中的效果
实例10自动跳转
制作”自动跳转”效果的网页.
本例主要实现首先自动跳转功能,当用户浏览网页时,系统会自动进入新的网址.
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
（1）启动DreamweaverMX软件.
（2）选择文件（F）→打开（Q）…Ctrl+0命令,打开打开对话框（见图1.10.1）,选择例8的网
页,如图1.10.2所示.
图1.10.1“打开”对话框
（3）单击文档窗口左下角标签栏中的
标签,选择窗口（W）→行为（E）…Shift+F3命令,打开行为面板,如图1.10.3所示.
（4）单击”添加行为”按钮,在弹出的下拉菜单中选择
转到URL命令,打开转到URL对话框,并在URL后面的文本里输入一个如www.163.,如图1.10.4所示.单击确定.
（5）单击行为面板中的”下拉箭头”按钮,在弹出的下拉菜单中选择onload项,即设置触发事件为当用户浏览系统自动进入相应的网址,如图1.10.5所示,
（6）选择文件（F）→另存为（A）…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.10.6所示.
图1.10.3行为面板
图1.10.2打开例8的网页
图1.10.4“转到URL”对话框图1.10.5设置触发事件
图1.10.6在浏览器中的效
实例11创建交换图
制作”创建交换图”效果的网页.如右图所示.
本例主要讲述交换图的创建过程,用来交换的图必须和原图大小相同.
～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
（1）启动DreamweaverMX软件.
（2）按上例创建一个名为”创建交换图”的网页,如图1.8.1所示.
图1.11.1”创建交换图”的网页建立
（3）选择插入（I）→表格（T）…Ctrl+Alt命令,出现表格对话框,如图1.11.2所示,
（4）在表格对话框中,输入行数和列数都为1.按确定插入网页中,并调整表格的大小,使其居中,效果如呼1.11.3所示.
（5）单击表格里面,选择插入（I）→图像对象（G）→鼠标经过图像（R）命令,出现对话框.如图
1.11.4所示.
（6）在后的文本输入原始图像的路径,或单击选择一个图片为原始图像.
图1.11.2表格对话框
图1.11.3插入表格后的网页
图1.11.4插入鼠标经过图像的对话框
（7）同样为选择一个图片作为鼠标经过的图像.最后按确定.效果如图1.11.5所示.
图1.11.5插入图像后的效果
（8）选择文件（F）→另存为（A）…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.11.6所示.当鼠标经过图像时的效果如图1.11.7所示.
图1.11.6图1.11.7
实例12跳转菜单
制作”跳转菜单”效果的网页.如右图所示.
本例主要应用跳转菜单呈菜单或者列表的形式制作,当用户选择其中的项目时,会自动从当前页面跳转到相应页面中.
～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
（1）启动DreamweaverMX软件.
（2）新建一个名为”跳转菜单”的网页,如图1.12.1所示.
图1.12.1”跳转菜单”的网页的建立
（3）选择插入（I）→表单（F）→跳转菜单（J）命令,出现”插入跳转菜单”对话框,如图1.12.2所示.
（4）在”插入跳转菜单”对话框中的后面输入要跳转菜单名,在后面输入该跳转菜单的地址,再按添加其它的菜单.（如图1.12.3）,按确定.
（5）选择文件（F）→另存为（A）…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.12.4所示.
图1.12.2”插入跳转菜单”对话框
图1.12.3”插入跳转菜单”的设置
图1.12.4在浏览器中的效果
实例13插入FLASH文本
制作”插入FLASH文本”效果,使网页具有动态美感.如右图所示.
本例主要学习如何插入FLASH文本技术.
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
（1）启动DreamweaverMX软件.
（2）新建一个名为”插入FLASH文本”的网页,如图1.13.1所示.
图1.13.1”插入FLASH文本”的网页建立
（3）选择插入（I）→媒体（M）→FLASH文本（L）命令,打开FLASH文本对话框,如果系统提示要保
存的话,你就先保存网页,如图1.13.2所示.
（4）输入你想要写的文字,并改变字体的大小,格式,颜色,位置等设置,最终效果如图1.13.3所示.按确定.
（5）选择文件（F）→另存为（A）…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.13.4所示.
图1.13.2“FLASH文本”对话框
图1.13.3“FLASH文本”对话框的设置
图1.13.4在浏览器中的效果
实例14插入FLASH按钮
制作”插入FLASH按钮”效果的网页.如右图所示.
本例主要学习如何插入FLASH按钮技术.
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
（1）启动DreamweaverMX软件.
（2）新建一个名为”插入FLASH文本”的网页,如图1.14.1所示.
图1.14.1”插入FLASH文本”的网页的建立
（3）选择插入（I）→媒体（M）→FLASH按钮（F）命令,打开FLASH按钮对话框,如果系统提示
要保存的话,你就先保存网页,如图1.14.2所示.
（4）在FLASH按钮对话框的后面可以选择按钮的样式,在后面输入”播放”或者其它,点击后面的选择所要文档的URL地址,可以不设置,在下拉表框中指定所要文本的打开方式,可以不设置.其它的就可以按自己的意愿设置,按确定.（如果在文本框中指定的SWF格式的文件名路径或文件名中含有中文字符,系统会弹出要求你重新输入的提示框）
图1.14.2FLASH按钮对话框
（5）选择文件（F）→另存为（A）…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.14.3所示.
图1.14.3在浏览器中的效果
实例15插入FLASH动画
目的：
制作”插入FLASH动画”效果.如右图所示.
要点：
本例主要应用FLASH动画的矢量动画制作完成,它下载速度快,在网页中经常应用,本例学习如何插入FLASH动画.
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
（1）启动DreamweaverMX软件.
（2）新建一个名为”插入FLASH动画”的网页,如图1.15.1所示.
图1.15.1”插入FLASH动画”的网页建立
（3）选择插入（I）→媒体（M）→FLASH（F）命令,打开FLASH对话框,如图1.15.2所示.选择要插入的FLASH按确定.
（4）选择文件（F）→另存为（A）…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.15.3所示.
图1.15.2FLASH对话框
图1.15.3在浏览器中的效果
实例16插入视频
目的：
制作”插入视频”效果.如右图所示.
要点：
本例主要学习如何插入视频,即在网页中可以观看视频文件.
～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
（1）启动DreamweaverMX软件.
（2）新建一个名为”插入FLASH动画”的网页,如图1.16.1所示.
图1.16.1”插入FLASH动画”的网页建立
（3）选择插入（I）→媒体（M）→插件（P）命令,打开插件对话框,如图1.16.2所示.选择要插入的视频文件按确定.
（4）在网页中调整播放窗口的大小和位置,如图1.16.3所示.
（5）选择文件（F）→另存为（A
升级会员 