Dreamweaver实例教学

1、Dreamweaver mx2004 实例教学（实例1-实例10）实例1 站点的建立了解和掌握怎么建一个网站,这是做网站的第一步,因此必须掌握。要对Dreammeaver mx2004的工具栏有一定的了解，还要熟悉其的用途。创作步骤 （1）启动Dreamweaver mx2004,如图所示. 图 启动后所示的界面(2) 选择菜单栏的站点(S)站点管理(M)命令,打开对话框,如图所示. 图 “站点管理”对话框(3) 单击”站点管理”对话框的新建(N)出现”站点(S)和FTP与RDS服务器(F)”,选择其中的”站点(S)”出现对话框,如图所示. 图 “站点定义1”对话框(4) 在文本框里可以为你的

2、站点起个名字,然后按下一步出现对话框,如图所示.图 “定义站点2”对话框(5) 在对话框中,根据自己所做的网站选择”否”或者”是”.如果你做的是静态网页,那么就可以选择”否”,如果你做的是动态网页,那你就要选择”是”,然后在下拉菜单中选择你所用的服务器技术类型.我做的是静态网页,因此我选择”否”,然后再按下一步出现对话框,如图所示. 图 “站点定义3”对话框(6) 选择系统推荐的选项,在文本框里可以填入你所建网站的保存路径,也可以不变系统默认的路径,然后按下一步出现对话框,如图所示.图 “站点定义4”对话框(7) 根据你自己的实际情况,如果你想下传到某服务器上的话,那你就从下拉菜单中选择你所用

3、的上传方法,如果不想上传的话,就选择”无”,然后再按下一步,出现对话框,如图所示,按完成,出现图1.1.8所示,再按完成这就完成了建一个站点的过程.图 “站点定义5”对话框 图 “站点定义6”对话框实例2 布局表格学会制作表格,能熟悉掌握表格的作用,现在大部分网页都运用到了表格,它是做网页不可缺少的技术,也要熟悉掌握.最终效果如图:.主要应用布局表格和布局单元表格来绘制表格,同时在表格中插入图片和添加文本,或者flash等等,最终实现你所想的效果.创作步骤(1) 启动Dreamweaver mx 2004 软件.(2) 选择文件新建(N) Ctrl+N命令,打开新建文档对话框,如图所示,单击创

4、建(R) 图 “新建文档”对话框 图 新建空白HTML文档(3) 选择菜单栏的修改页面属性(P) Ctrl+J命令,弹出页面属性对话框,如图所示,在标题(T):栏中输入文字作为标题,如现在输入”布局表格”,再按确定,返回主界面. 图 “页面属性”对话框(4) 单击工具栏的按钮,切换到”布局视图”工作界面,如图所示. 图 “布局视图”工作界面(5)单击在工具栏上的布局表格按钮,在页面中拖曳鼠标绘制一个布局表格,如图所示.还可以根据你的需要来调整表格的大小. 图 绘制布局表格(5) 单击工具栏上的绘制布局单元格按钮,在需要添加布局单元格的位置拖曳鼠标,绘制布局单元格,如图所示.图 绘制布局单元格(

5、6) 重复第(4)和(5)步的操作,绘制其它布局表格和布局单元格,如图所示.图 绘制其它单元格(7) 在布局单元格添加文本和图像,如图所示. 图 表格添加内容(8) 选择文件(F)另存为(A) Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图所示.图 浏览器中的效果实例3 层的运用学会使用层的技术,虽然现在的大部分的网页是没有用到层,但要制作一些比较特别的网页时,用层比用表格简单得多. 本例要用到层的技术,建层,改变层的属性等,制作一些布局比较简单的网页.创作步骤(1) 启动Dreamweaver MX 软件.(2) 按上例创建一个名为”层的运用”的网页,如图

6、所示. 图 “层的运用”网页的建立(3) 选择插入(I)布局对象层(Y)命令,插入一个层,如图所示.图 层的建立(4)点击层的里面便可对层的内容进行编辑,你可插入图片也可插入文字,现在就来插入图片,选择插入(I)图像(I) Ctrl + Alt +I打开对话框,如图所示图 “打开”的对话框(4) 选择你所定好的图片,然后再按确定,再调整图的大上和层的位置,最后可得效果如图所示. 图 插入图片(5) 重复步骤3再插入一个层,输入文字在层里,根据你的需要移动和调整层的位置大小,也可以在”属性”修改层,最后效果如图所示. 图 最终效果(6) 选择文件(F)另存为(A) Ctrl+Shift+S命令,

7、保存文件.按快捷键F12,观看在浏览器中的效果,如图所示图 在浏览器中的效果实例4 显示隐实藏图层制作显示隐藏图层的效果,使网页具有动态效果.如右图. 本例主要应用”显示隐藏图层”命令.单击”显示”按钮,页面中显示所有的图层,单击”隐藏”按钮,隐藏所有的图层.创作步骤(1) 启动Dreamweaver MX 软件.(2) 按上例创建一个名为”显示隐藏图层”的网页,如图所示.图 “显示隐藏图层”网页的建立(3) 在网页使用布局表格技术建立表格,如所示.(4) 单击第一个单元表格内,单击插入(I)布局对象(Y)层(Y)命令,调整层的大小刚好等于第一个单元表格的大小,单击层里面,选择插入(I)图像(

8、I) Ctrl +Alt +I 命令,出现对话如图所示,选择图像按.(5)单击第二个单元表格,按步骤4,插入层和图像,并在第三和第四个单元表格内分别写上”显示”和”隐藏”.最后效果如图所示.图 建立表格的网页 图 “打开”对话框(6) 选择第三单元表格里的”显示”,单击窗口(W)行为(E) Shift + F3,打开行为面板,如图所示(7) 单击”添加行为”按钮,在弹出的下拉菜单中选择显示-隐藏层命令,打开显示隐藏层对话框,如图所示.(8) 选中所有图层,单击按钮,为所有层添加显示行为,如图所示,单击按钮,关闭显示-隐藏层对话框.(9) 单击面板中的”下拉箭头”按钮,在弹出的下拉菜单中选择on

9、Click选项,如图所示.(10)重复69步的操作,选中第四单元表格里的”隐藏”,为那二层(即那二张图像)添加隐藏图层及相应触发事件,如图.所示. 图 插入图像的网页 图 行为面板 图 “显示-隐藏层”对话框 图 设置显示层行为图 设置触发事件 图设置隐藏层行为(11)选择文件(F)另存为(A) Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图1.4.10和所示 图 单击”显示”的效果 单击”隐藏的效果实例5 插入背景音乐使网页更加活泼生动.如右图所示. 本例主要让你了解本软件的基本功能,学习怎么在网页中添加音乐.创作步骤(1) 启动Dreamweaver M

10、X 软件.(2) 按上例创建一个名为”背景音乐”的网页,如图所示. 图 “背景音乐”网页的建立(3) 按上例在网页中插入图像居中,再插入一个层,并在层里输入文字”让我唱支歌!”调整层的大小和位置.如图所示.(4) 按上例单击窗口(W)行为(E) Shift + F3,打开行为面板.(5) 单击”添加行为”按钮,在弹出的下拉菜单中选择播放声音命令,打开播放声音对话框,如图所示.(6) 单击播放声音文本框后的按钮,在弹出选择文件对话框中选中一个音乐文件(见图所示)单击按钮. 图 插入图像和层的效果.图 “播放声音”对话框 图 “选择文件”对话框(7) 单击面板中的”下拉箭头”按钮,在弹出的下拉菜单

11、中选择onLoad选项,如图所示.(8) 选择文件(F)另存为(A) Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图所示.图 设置触事件 图 浏览器中的效果实例6 插入背景图像使网页在颜色方面不是那么单调.效果如右图所示. 本例主要学习如果把一张图片作为网页的背景图像,使网页更加好看.创作步骤(1) 启动Dreamweaver MX 软件.(2) 按上例创建一个名为”插入背景图像”的网页,如图所示.如图1.6.1 ”插入背景图像”网页的建立(3) 在网页中输入文字,并在网页下面的中,改变文字的大小和位置,如图所示.(4) 在网页空白处按右键,选择页面属性(T

12、)出现对话框,如图所示,(5) 单击页面属性对话框中的出现选择文件对话框,如图所示.按.(6) 选择文件(F)另存为(A) Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图所示.图 在网页中输入文字图 页面属性的对话框 图 选择文件对话框图 在浏览器中的效果 实例7 文本超链接制作具有超链接的网页.如右图所示. 本例学习如何设置超链接,它是制作网站的最基本技术,因为现在的网站可以说没有一个不用到它,因此学会它是非常有必要的.创作步骤(1) 启动Dreamweaver MX 软件.(2) 按上例创建一个名为”超链接”的网页,如图所示. 图1.7.1 ”超链接”的

13、网页建立(3) 按上例的步骤制作同样的网页,并在诗的下面加多一行字”更多的诗”,效果如图所示.(4)选择最后一行字”更多的字”点击右键,选择创建链接(L)出现选择文件对话框,如图所示.然后选择你选定的网页,即当点击文字”更多的诗”时所显示的网页,你应该先做好它.最后按.图 添加字后的网页图 选择文件的对话框(5) 选择文件(F)另存为(A) Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图所示.当你点击”更多的字”时,网页就会转到你所链接的网页. 图 在浏览器中的效果实例8 图像热点链接制作出具有图像链接的网页,即当你点击图像中的某一处时,网页会转到它所链接的

14、网页去,最后如右图所示. 本例所用到的技术跟上例差不多,上例是文本的超链接,而本例是图像的一小处的超链接.特别是介绍照片中很多人的其中一个是谁时,就能用到这种技术.创作步骤(1) 启动Dreamweaver MX 软件.(2) 按上例创建一个名为”图像热点链接”的网页,如图所示. 图1.8.1 ”图像热点链接”的网页的建立(3) 按以上几例所讲到的技术在网页中插入图片,并调整图片的大小和位置,结果如图所示.(4) 选择图片,点击下面的,鼠标就变成一个”+”,然后在图片中选择区域的大小,如图所示.(5) 在后面的文本框里填入你要链接的文件或者点击下面右边的,出现选择文件对话框, 如图所示,并在后

15、面写上”了解我更多”. 图 插入图片后的网页图 选择图片的区域图 选择文件对话框(6) 选择文件(F)另存为(A) Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图所示.当你鼠标移到刚才你所选的区域时,就会显示”了解我更多”点击它网页就会转到你所链接的网页. 图 在浏览器中的效果实例9 弹出信息制作一些能自动跳出信息的网页.如右图所示. 本例主要应用了”添加行为”的技术,跟例5有点相像,也是用到”添加行为”技术.创作步骤(1) 启动Dreamweaver MX 软件.(2) 选择文件(F)打开(Q) Ctrl + 0命令,打开打开对话框(见图),选择上例的网页

16、,如图所示.图 “打开”对话框(3) 按上例单击窗口(W)行为(E) Shift + F3,打开行为面板.如图所示.(4) 单击”添加行为”按钮,在弹出的下拉菜单中选择弹出信息命令,打开弹出信息对话框并文本框里写入”欢迎光临本站”.按确定退出. 如图所示(5) 选择文件(F)另存为(A) Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图所示. 图 “行为”面板 图 打开上例的网页图 “弹出信息”对话框图 在浏览器中的效果实例10 自动跳转链接制作”自动跳转链接”效果的网页. 本例主要实现网站首先自动跳转功能,当用户浏览网页时,系统会自动进入新的网址.创作步骤(

17、1) 启动Dreamweaver MX 软件.(2) 选择文件(F)打开(Q) Ctrl + 0命令,打开打开对话框(见图),选择例8的网页,如图所示. 图 “打开”对话框(3) 单击文档窗口左下角标签栏中的标签,选择窗口(W)行为(E) Shift + F3命令,打开行为面板,如图所示 .(4) 单击”添加行为”按钮,在弹出的下拉菜单中选择转到URL命令,打开转到URL对话框,并在URL后面的文本里输入一个网站如,如图所示.单击确定.(5) 单击行为面板中的”下拉箭头”按钮,在弹出的下拉菜单中选择onload项,即设置触发事件为当用户浏览系统自动进入相应的网址,如图所示,(6) 选择文件(F

18、)另存为(A) Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果,如图所示. 图 行为面板图 打开例8的网页 图 “转到URL”对话框 图1.10.5 设置触发事件 图 在浏览器中的效第十三课 Dreamweaver MX2004 实例教学（实例21-实例30）实例21 页面配色方案1实例22 CSS的使用3实例23 自动格式化表格7实例24 使用表格间隔图像10实例25 单元格自动延伸12实例26 炽热文字15实例27 显示当前日期18实例28 显示登陆时间20实例29 状态栏中跳动的文字22实例30 左右移动的图片25实例21 页面配色方案制作”页面配色方案.如

19、右图所. 本例主要应用”设定配色方案”命令来改变网页背景颜色以及文本链接的颜色.创作步骤(1) 启动Dreamweaver MX 软件.(2) 新建一个名为”页面配色方案”的网页,如图所示.图1.21.1 ”页面配色方案”的网页(3) 按以上所讲的知识,在网页中手稿表格,并在表格中插入图片和文字,如图所示(4) 选择命令(C)设置配色方案(T)命令,打开设置配色方案对话框,如图所示.(5) 在对话框的列表框中选择适当的颜色,在列表框中选择指定的配色方案,如图所示,(6) 选择文件(F)另存为(A) Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图所示. 图 插

20、入表格 图 “设置配色方案”对话框图 选择适当的配色方案 图 观看在浏览器中的效果实例22 CSS的使用制作”CSS的使用”效果.如右图所示本例主要学习如何使用CSS,CSS在很多网页中都有使用,因为有了它,制作网页就更加方便简单.创作步骤(1) 启动Dreamweaver MX 软件.(2) 新建一个名为”CSS的使用”的网页,如图所示. 图1.22.1 ”CSS的使用”的网页建立(3) 插入一个有二行二列的表格,调整表格的大小和位置,并在每个单元表格内写入一首诗,如图所示.提示:由于每首诗的字体和位置都没有调整好,还有每个单元表格的背景也没有设置好,如果一个一个单元表格轮着来调整的话,那就

21、很浪费时间,因此使用了CSS,它就一个模板直接套在每个单元表格就可以了.(4) 在表格中按右键选择CSS样式(C)新建(N)弹出对话框,如图所示. 图122.2 表格和文字的插入图 “新建CSS样式”对话框(5) 在“新建CSS样式”对话框的后面输入”gushi”作为名称,其它不用改变.按确定,弹出保存对话框,如图所示.(6) 在对话框中,输入gushi作为文件名,按确定.弹出CSS样式定义对话框,如图所示.(7) 在的列表框中,选择设置的分类,然后在右边的中设置想要的效果,现在把那些诗设置字体为隶书,大小为18号,居中,表格背景为灰色.按确定.(8) 在网页中右击一个单元表格,选择样式(C)

22、gushi,那表格里的文字格式就变成刚才你设置的格式了,如图所示.把其它的单元表格也应用到CSS,这样就轻易把全部都变成了自己设置的格式了.(9) 选择文件(F)另存为(A) Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图所示. 图 保存对话框 图 CSS样式定义对话框图 应用了CSS(gushi)的效果 图 观看在浏览器中的效果实例23 自动格式化表格制作”自动格式化表格”效果.如右图所示本例主要应用”格式化表格”命令,学习如何应用.创作步骤(1) 启动Dreamweaver MX 软件.(2) 选择文件(F)打开(O) Ctrl +O命令,打开打开对话框

23、(见图),打开网页”课程表”,如图所示. 图 “打开”对话框(3) 单击表格边框选中表格,选择命令(C)格式化表格(F)命令,打开格式化表格对话框,从格式列表框中选中AltRows:Green&Yellow选项,如图所示.(4) 单击确定按钮,对选中的表格应用所选样式,如图所示.(5) 选择文件(F)另存为(A) Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图所示.图所示 打开”课程表图 “格式化表格”对话框图 自动格式化表格 图 观看在浏览器中的效果实例24 使用表格间隔图像制作”使用表格间隔图像”效果.如右图所示本列主要应用表格的”表格间隔图像”属性来控

24、制表格的尺寸.间隔图像是一个不会在浏览器中显示的透明图像,主要用于控制自动伸展表格的属性,它会保持页面上每个表格和单元格的设置宽度.创作步骤(1) 启动Dreamweaver MX 软件.(2) 选择文件(F)打开(O) Ctrl +O命令,打开打开对话框(见图),打开网页”课程表”,如图所示. 图 “打开”对话框(3) 选择查看(V)表格视图(T)布局视图(L) Ctrl + F6命令,切换到”布局视图”工作界面,如图所示.(4) 点击标题菜单中选择添加间隔图像(A)命令,如图所示.(5) 选择文件(F)另存为(A) Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效

25、果.如图所示.图 打开”课程表”网页 图 “布局视图”工作界面图 选择”添加间隔图像图 观看在浏览器中的效果实例25 单元格自动延伸制作”单元格自动延伸”效果.如右图所示. 本例主要应用布局表格的”列设置为自动伸展”功能,调整单元格宽度根据窗口的大小自动改变.创作步骤(1) 启动Dreamweaver MX 软件.(2) 选择文件(F)打开(O) Ctrl +O命令,打开打开对话框(见图),打开网页”单元格自动延伸”如图1.25.2所示. 图 “打开”对话框(3) 点击网页编辑区上面的按钮,切换到布局视图,如图所示.(4) 点击标题菜单中选择列设置为自动伸展(K)命令,如图所示.(5) 设置了

26、自动伸展属性的列会显示为标识,效果如图所示.(6) 选择文件(F)另存为(A) Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图所示. 图 打开”单元格自动延伸”图 切换到布局视图图 “列设置为自动伸展”命令图 设置列为自动伸展图 观看在浏览器中的效果实例26 炽热文字制作”炽热文字”效果.如右图所示. 本例要主应用JavaScript语言制作炽热文字效果.创作步骤(1) 启动Dreamweaver MX 软件.(2) 新建一个名为”炽热文字”的网页,如图所示.图1.26.1 ”炽热文字”的网页建立(3) 单击编辑区上面的按钮，切换代码视图工作区，如图所示.(

27、4) 在和之间输入代码function glowit(which)if(document.all.glowtextwhich.filters0.strengh=2)document.all.glowtextwhich.filters0.strength=1elsedocument.all.glowtextwhich.filters0.strengh=2function glowit2(which)if(document.all.glowtext.filters0.strengh=2)document.all.glowtext.filters0.strengh=1elsedocument.all

28、.glowtext.filters0.strengh=2function startglowing()if(document.all.glowtext&glowtext.length)for(i=0;iglowtext.length;i+)eval(setInterval(glowit(+i+),150)else if (glowtext)setInterval(glowit2(0),150)if(document.all)window.onload=startglowing(5) 在和之间输入代码:欢迎光临本站(6) 选择文件(F)另存为(A) Ctrl+Shift+S命令,保存文件.按快捷

29、键F12,观看在浏览器中的效果.如图所示. 图 切换为代码视图图 观看在浏览器中的效果实例27 显示当前日期制作”显示当前日期”效果.如右图所示. 本例主要学习为网页添加JavaScript代码显示系统当前日期。创作步骤(1) 启动Dreamweaver MX 软件.(2) 新建一个名为”显示当前日期”的网页,如图所示. 图1.27.1 ”显示当前日期”的网页的建立(3) 单击编辑区上面的按钮，切换代码视图工作区，如图所示.(4) 在和之间输入以下代码： var enabled=0;ver day;ver dare;today=new Date();if(today.getDay()=0)da

30、y=星期日if(today.getDay()=0)day=星期日if(today.getDay()=0)day=星期日if(today.getDay()=0)day=星期日if(today.getDay()=0)day=星期日if(today.getDay()=0)day=星期日if(today.getDay()=0)day=星期日 day=欢迎进入本网站+today.getYear()+-+(today.getMonth()+1)+-+todayDate()+day; document.write(date.fontsize(2);/ -function MM_callJS(jsStr)/v

31、2.0 return eval(jsStr)/-图 切换为代码视图(5) 选择文件(F)另存为(A) Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图所示 图 观看在浏览器中的效果实例28 显示登陆时间制作”显示登陆时间”效果.如右图所示. 本例主要实现页面框架中显示登陆时间.创作步骤(1) 启动Dreamweaver MX 软件.(2) 新建一个名为”显示登陆时间”的网页,如图所示.图1.28.1 ”显示登陆时间”的网页的建立(3) 选择插入(I)html框架(S)左方(L)命令,插入框架,如图所示.(4) 选择窗口(W)行为(E) Shift + F3,打

32、开行为面板.如图所示.(5) 单击”添加行为”按钮,在弹出的下拉菜单中选择设置文本设置框架文本命令,打开设置框架文本对话框,在下拉列表中选择选项,在文本框中输入代码,如图所示.按确定.图 插入框架图 行为面板 图1.28.4 输入代码(6) 点击行为面板中的,在弹出的下拉菜单中选择onload命令,设置触发事件,如图所示(7) 选择文件(F)另存为(A) Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图所示 图 行为面板的设置图 观看在浏览器中的效果实例29 状态栏中跳动的文字制作”状态栏中跳动的文字”效果.如右图所示. 本例主要应用JavaScritp语言来

33、实现文字在状态栏上的跳动效果,创作步骤(1) 启动Dreamweaver MX 软件.(2) 新建一个名为”状态栏中跳动的文字”的网页,如图所示. 图1.29.1 ”状态栏中跳动的文字”的网页的建立(3) 单击编辑区上面的按钮，切换代码视图工作区，如图所示.(4) 在和之间输入以下代码：var MESSAGE=欢迎光临var POSITION=100var DELAY=5var scroll=new statusMessageObject()function statusMessageObject(p,d)this.msg=MESSAGEthis.out= this.pos=POSITIONt

34、his.delay=DELAYthis.i=0this.reset=clearMessagefunction clearMessage()this.pos=POSITIONfunction scroller()for(scroll.i=0;i=0)scroll.out+=scroll.msgelse scroll.out=scroll.msg.substring(-scroll.pos,scroll.msg.length)window.status=scroll.outscroll.out= scroll.pos-if(scroll.pos-(scroll.msg.length)scroll.reset()setTimeout(scroller(),scroll.delay)function snapIn(jumpSpaces,position)var msg=scroll.msgvar out= for(var i=0;iposition;i+)(out+=msg.charAt(i)for(i=1;ijumpspaces;i+)out+= out+=msg.charAt(position)window.status=outif