Dreamweaver实例教学

Dreamweavermx2004实例教学（实例1--实例10）实例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所示..当你鼠标移到刚才