Dreamweaver实例教学
目 录
实例1 站点的建立 实例2 布局表格 实例16 插入视频 实例17 显示弹出式菜单 实例3 实例4 实例5 实例6 实例7 实例8 实例9 实例10 实例11 实例12 实例13 实例14 实例15
层的运用 显示隐实藏图层 插入背景音乐 插入背景图像 文本超 图像热点 弹出信息 自动跳转 创建交换图 跳转菜单 插入FLASH文本 插入FLASH按钮 插入FLASH动画
实例18 实例19 实例20 实例21 实例22 实例23 实例24 实例25 实例26 实例27 实例28 实例29 实例30 框架的使用 创建相册集 插入按钮 页面配色方案 CSS的使用 自动格式化表格 使用表格间隔图像 单元格自动延伸 炽热文字 显示当前日期 显示登陆时间 状态栏中跳动的文字 左右移动的图片
实例1 站点的建立
目的：了解和掌握怎么建一个,这是做的第一步,因此必须掌握。
要点：要对Dreammeaver mx2004的工具栏有一定的了解，还要熟悉其的用途。
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
（1）启动Dreamweaver mx2004,如图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) 启动Dreamweaver mx 2004 软件.
(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) 启动Dreamweaver MX 软件.
(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) 启动Dreamweaver MX 软件.
(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) 启动Dreamweaver MX 软件.
(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) 启动Dreamweaver MX 软件.
(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) 启动Dreamweaver MX 软件.
(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) 启动Dreamweaver MX 软件.
(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) 启动Dreamweaver MX 软件.
(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) 启动Dreamweaver MX 软件.
(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) 启动Dreamweaver MX 软件.
(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) 启动Dreamweaver MX 软件.
(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) 启动Dreamweaver MX 软件.
(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) 启动Dreamweaver MX 软件.
(2) 新建一个名为”插入FLASH文本”的网页,如图1.14.1所示.
图1.14.1 ”插入FLASH文本”的网页的建立
(3) 选择插入(I)→媒体(M)→FLASH按钮(F)命令,打开FLASH按钮对话框, 如果系统提示 要保存的话,你就先保存网页,如图1.14.2所示.
(4) 在FLASH按钮对话框的后面可以选择按钮的样式,在后面输入”播放”或者其它,点击后面的选择所要文档的URL地址,可以不设置,在下拉表框中指定所要文本的打开方式,可以不设置.其它的就可以按自己的意愿设置,按确定.(如果在文本框中指定的SWF格式的文件名路径或文件名中含有中文字符,系统会弹出要求你重新输入的提示框)
图1.14.2 FLASH按钮对话框
(5) 选择 文件(F) → 另存为(A)… Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.14.3所示.
图1.14.3 在浏览器中的效果
实例15 插入FLASH动画
目的：制作”插入FLASH动画”效果.如右图所示. 要点：本例主要应用FLASH动画的矢量动画制作完成,它下载速度快,在网页中经常应用,本例学习如何插入FLASH动画.
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1) 启动Dreamweaver MX 软件.
(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.2 FLASH对话框
图1.15.3 在浏览器中的效果
实例16 插入视频
目的：制作”插入视频”效果.如右图所示. 要点：本例主要学习如何插入视频,即在网页中可以观看视频文件.
～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1) 启动Dreamweaver MX 软件.
(2) 新建一个名为”插入FLASH动画”的网页,如图1.16.1
所示.
图1.16.1 ”插入FLASH动画”的网页建立
(3) 选择插入(I)→媒体(M)→插件(P)命令,打开插件对话框,如图1.16.2所示.选择要插入的视频文
件按确定.
(4) 在网页中调整播放窗口的大小和位置,如图1.16.3所示.
(5) 选择 文件(F) → 另存为(A)… Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.16.4所示.
图1.16.2 插件对话框
图1.16.3 调整播放窗口
图1.16.4 在浏览器中的效果
实例17 显示弹出式菜单
制作”显示弹出式单”效果.如右图所示.
本例主要运用”显示弹出式菜单”的技术,这种技术虽然不是在很多网页中能看到,但它也有它独特的用处,比如说网中的栏目太多而放不下时,就可以进行归类应用这种技术,从而使网页清洁好看. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1) 启动Dreamweaver MX 软件.
(2) 新建一个名为”显示弹出式菜单”的网页,如图1.16.1所示.
图1.17.1 ”显示弹出式菜单”的网页
(3) 按上几例所学知识,在网页中插入一个3行1列的表格,并在每个单元表格输入文字,调 整文字的大小和位置,效果如图1.17.2所示.
(4) 选择表格的”电影欣赏”,在下面的后面文本框里输入” * “以表示”电影欣赏”是具有超的. (5) 选择窗口(W)→行为(E)… Shift + F3命令,打开行为面板,如图1.17.3所示
(6) 单击”添加行为”按钮,在弹出的下拉菜单中选择显示弹出式菜单命令,打开显示弹出式菜单对话框,如图1.17.4所示.
图1.17.2 插入表格后网页
图1.17.3 行为面板
图1.17.4 ”显示弹出式菜单”对话框
(7) 在后面写上菜单名,在后面填上路径,在后面可不设置,然后再按增加按钮增加其它的菜单,还可以在外观,高级,位置改变设置,按确定最终效果如图1.17.5所示..
图1.17.5 ”显示弹出式菜单”对话框的设置
(8) 选择 文件(F) → 另存为(A)… Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.17.6所示.
图1.17.7 在浏览器中的效果
实例18 框架的使用
制作”框架的使用”效果.如右图所示.
本例主要运用”框架的使用”的技术,这种技术虽然不是十分流行,但在一定条件下用到这种技术却是非常之好的. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1) 启动Dreamweaver MX 软件.
(2) 新建一个名为”框架的使用”的网页,如图1.18.1所示.
图1.18.1 ”框架的使用”的网页建立
(3) 选择插入(I)→HTML→框架(S)→上方及左侧嵌套(O)命令,插入后可以用鼠标对框架进行
调整,或者按住键盘的ALT键,再点击其中一个框架就会出现这个框架的属性,必要时可修改,最终效果如图1.18.2所示.
(4) 在框架中输入文字,并调整大小和位置,最终效果如图1.18.3所示.
(5) 选择框架中的文字”动画欣赏”,按右键选择创建(L),打开选择文件对话框(见图1.18.4所示),选择要的文件,按确定退出.
(6) 在下面的下拉菜单中mainframe.其它可不设置.
图1.18.2 插入框架后的网页
图1.18.3 框架中插入文字的网页
图1.18.4 选择文件对话框
(7) 选择 文件(F) → 另存为(A)… Ctrl+Shift+S 命令,保存文件.按快捷键F12,当点击”动画欣赏”观看在浏览器中的效果.如图1.18.5所示.
图1.18.5 当点击”动画欣赏”观看在浏览器中的效果
实例19 创建相册集
目的：制作”创建相册集”效果.如右图所示.
要点：本例主要应用”创建相册集”命令创建一个电子相同,单击页面中的某一相片,可打开该相片的效果图.
～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1) 启动Dreamweaver MX 软件.
(2) 新建一个名为”显示弹出式菜单”的网页,如图1.19.1所示.
图1.19.1 ”显示弹出式菜单”的网页建立
(3) 选择命令(C)→创建相册(C)…命令,弹出创建相册对话框,完成该对话框的设置,
如图1.19.2所示,单击确定按钮.(创建过程是同Dreamweaver MX启动Fireworks来自动完成的,所以系统中必须安装Fireworks软件,才可以实现机册的创建)
(4) 选择 文件(F) → 另存为(A)… Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.19.3所示.
图1.19.2 创建相册对话框
图1.19.3 观看在浏览器中的效果
实例20 插入按钮
目的：制作”插入按钮”效果.如右图所
要点：本例主要学习如何插入按钮,特别在动态网态中,按钮是不可缺少的,因此必须掌握. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1) 启动Dreamweaver MX 软件.
(2) 新建一个名为”插入按钮”的网页,如图1.20.1所示.
图1.20.1 ”插入按钮”的网页建立
(3) 选择插入(I)→表单(F)→文本区域(A)命令,并可以在下面改变其的大小等等,效果如图1.20.2所示.
(4) 在”文本区域”下面再插入二个按钮,选择插入(I)→表单(F)→按钮(B)命令, 并可以在下面改变其的大小,按钮名等等,设置完成如图1.20.3所示.(当插入”重置”按钮时,在后面应选择)
(5) 选择 文件(F) → 另存为(A)… Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.20.4所示.
图1.20.2 插入文本区域
图1.20.3 插入按钮
图1.20.4 观看在浏览器中的效果
实例21 页面配色方案
制作”页面配色方案.如右图所.
本例主要应用”设定配色方案”命令来改变网页背景颜色以及文本的颜色.
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1) 启动Dreamweaver MX 软件.
(2) 新建一个名为”页面配色方案”的网页,如图1.21.1所
示.
图1.21.1 ”页面配色方案”的网页
(3) 按以上所讲的知识,在网页中手稿表格,并在表格中插入图片和文字,如图1.21.2所示 (4) 选择命令(C)→设置配色方案(T)…命令,打开设置配色方案对话框,如图1.21.3所示.
(5) 在对话框的列表框中选择适当的颜色,在列表框中选择指定的配色方案,如图1.21.4所示,
(6) 选择 文件(F) → 另存为(A)… Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.21.5所示.
图1.21.2 插入表格
图1.21.3 “设置配色方案”对话框
图1.21.4 选择适当的配色方案
图1.21.5 观看在浏览器中的效果
实例22 CSS的使用
制作”CSS的使用”效果.如右图所示．
本例主要学习如何使用CSS,CSS在很多网页中都有使用,因为有了它,制作网页就更加方便简单.
～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1) 启动Dreamweaver MX 软件.
(2) 新建一个名为”CSS的使用”的网页,如图1.22.1所
示.
图1.22.1 ”CSS的使用”的网页建立
(3) 插入一个有二行二列的表格,调整表格的大小和位置,并在每个单元表格写入一首诗,如 图1.22.2所示.
提示:由于每首诗的字体和位置都没有调整好,还有每个单元表格的背景也没有设置好,如果一个一个单元表格轮着来调整的话,那就很浪费时间,因此使用了CSS,它就一个模板直接套在每个单元表格就可以了.
(4) 在表格中按右键选择CSS样式(C)→新建(N)…弹出对话框,如图1.22.3所示.
图122.2 表格和文字的插入
图1.22.3 “新建CSS样式”对话框
(5) 在“新建CSS样式”对话框的后面输入”gushi”作为名称,其它不用改变.按确定,弹出 保存对话框,如图1.22.4所示.
(6) 在对话框中,输入gushi作为文件名,按确定.弹出CSS样式定义对话框,如图1.22.5所示.
(7) 在的列表框中,选择设置的分类,然后在右边的中设置想要的效果,现在把那些诗设置字体为隶书,大小为18号,居中,表格背景为灰色.按确定.
(8) 在网页中右击一个单元表格,选择样式(C)→gushi,那表格里的文字格式就变成刚才你设置的格式了,如图1.22.6所示.把其它的单元表格也应用到CSS,这样就轻易把全部都变成了自己设置的格式了.
(9) 选择 文件(F) → 另存为(A)… Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.22.7所示.
图1.22.4 保存对话框
图1.22.5 CSS样式定义对话框
图1.22.6 应用了CSS(gushi)的效果
图1.22.7 观看在浏览器中的效果
实例23 自动格式化表格
目的：制作”自动格式化表格”效果.如右图所示
要点：本例主要应用”格式化表格”命令,学习如何应用. ～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1) 启动Dreamweaver MX 软件.
(2) 选择文件(F)→打开(O)… Ctrl +O命令,打开打开对话框
(见图1.23.1),打开网页”课程表”, 如图1.23.2所示.
图1.23.1 “打开”对话框
(3) 单击表格边框选中表格,选择命令(C)→格式化表格(F)…命令,打开格式化表格对话框,从格式列表框中选中AltRows:Green&Yellow选项,如图1.23.3所示.
(4) 单击确定按钮,对选中的表格应用所选样式,如图1.23.4所示.
(5) 选择 文件(F) → 另存为(A)… Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.23.5所示.
图1.23.2所示 打开”课程表
图1.23.3 “格式化表格”对话框
图1.23.4 自动格式化表格
图1.23.5 观看在浏览器中的效果
实例24 使用表格间隔图像
目的：制作”使用表格间隔图像”效果.如右图所示 要点：本列主要应用表格的”表格间隔图像”属性来控制表格的尺寸.间隔图像是一个不会在浏览器中显示的透明图像,主要用于控制自动伸展表格的属性,它会保持页面上每个表格和单元格的设置宽度.
～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1) 启动Dreamweaver MX 软件.
(2) 选择文件(F)→打开(O)… Ctrl +O命令,打开打开对话框(见
图1.24.1),打开网页”课程表”, 如图1.24.2所示.
图1.24.1 “打开”对话框
(3) 选择查看(V)→表格视图(T)→布局视图(L) Ctrl + F6命令,切换到”布局视图”工作界面,如图1.24.3所示.
(4) 点击标题菜单中选择添加间隔图像(A)命令,如图1.24.4所示.
(5) 选择 文件(F) → 另存为(A)… Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.24.5所示.
图1.24.2 打开”课程表”网页
图1.24.3 “布局视图”工作界面
图1.24.4 选择”添加间隔图像
图1.24.5 观看在浏览器中的效果
实例25 单元格自动延伸
目的：制作”单元格自动延伸”效果.如右图所示.
要点：本例主要应用布局表格的”列设置为自动伸展”功能,调整单元格宽度根据窗口的大小自动改变.
～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1) 启动Dreamweaver MX 软件.
(2) 选择文件(F)→打开(O)… Ctrl +O命令,打开打开对
话框(见图1.25.1),打开网页”单元格自动延伸”如图1.25.2所示.
图1.25.1 “打开”对话框
(3) 点击网页编辑区上面的按钮,切换到布局视图,如图1.25.3所示. (4) 点击标题菜单中选择列设置为自动伸展(K)命令,如图1.24.4所示. (5) 设置了自动伸展属性的列会显示为标识,效果如图1.25.5所示.
(6) 选择 文件(F) → 另存为(A)… Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.25.6所示.
图1.25.2 打开”单元格自动延伸”
图1.25.3 切换到布局视图
图1.25.4 “列设置为自动伸展”命令
图1.25.5 设置列为自动伸展
图1.25.6 观看在浏览器中的效果
实例26 炽热文字
制作”炽热文字”效果.如右图所示.
本例要主应用JavaScript语言制作炽热文字效果.
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1) 启动Dreamweaver MX 软件.
(2) 新建一个名为”炽热文字”的网页,如图1.26.1所示.
图1.26.1 ”炽热文字”的网页建立
(3) 单击编辑区上面的按钮，切换代码视图工作区，如图1.26.2所示. (4) 在
和之间输入代码(5) 在
和之间输入代码:欢迎光临本站
(6) 选择 文件(F) → 另存为(A)… Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.26.3所示.
图1.26.2 切换为代码视图
图1.26.3 观看在浏览器中的效果
实例27 显示当前日期
制作”显示当前日期”效果.如右图所示.
本例主要学习为网页添加JavaScript代码显示系统当前日期。
～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1) 启动Dreamweaver MX 软件.
(2) 新建一个名为”显示当前日期”的网页,如图1.27.1所示.
图1.27.1 ”显示当前日期”的网页的建立
(3) 单击编辑区上面的按钮，切换代码视图工作区，如图1.27.2所示. (4) 在
和之间输入以下代码：图1.27.2 切换为代码视图
(5) 选择 文件(F) → 另存为(A)… Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.27.3所示
图1.27.3 观看在浏览器中的效果
实例28 显示登陆时间
制作”显示登陆时间”效果.如右图所示. 本例主要实现页面框架中显示登陆时间.
～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1) 启动Dreamweaver MX 软件.
(2) 新建一个名为”显示登陆时间”的网页,如图1.28.1所示.
图1.28.1 ”显示登陆时间”的网页的建立
(3) 选择插入(I)→html→框架(S)→左方(L)命令,插入框架,如图1.28.2所示. (4) 选择窗口(W)→行为(E)… Shift + F3,打开行为面板.如图1.28.3所示.
(5) 单击”添加行为”按钮,在弹出的下拉菜单中选择设置文本→设置框架文本命令,打开设置框架文本对话框,在下拉列表中选择选项,在文本框中输入代码,如图1.28.4所示.按确定.
图1.28.2 插入框架
图1.28.3 行为面板
图1.28..4 输入代码
(6) 点击行为面板中的,在弹出的下拉菜单中选择onload命令,设置触发事件,如图1.28.5所示
(7) 选择 文件(F) → 另存为(A)… Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.28.6所示
图1.28.5 行为面板的设置
图1.28.6 观看在浏览器中的效果
实例29 状态栏中跳动的文字
制作”状态栏中跳动的文字”效果.如右图所示.
本例主要应用JavaScritp语言来实现文字在状态栏上的跳动效果,
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1) 启动Dreamweaver MX 软件.
(2) 新建一个名为”状态栏中跳动的文字”的网页,如图1.29.1所示.
图1.29.1 ”状态栏中跳动的文字”的网页的建立
(3) 单击编辑区上面的按钮，切换代码视图工作区，如图1.29.2所示. (4) 在
和之间输入以下代码：(5) 选择 文件(F) → 另存为(A)… Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.29.3所示
图1.29.2 代码视图
图1.29.3 观看在浏览器中的效果
实例30 左右移动的图片
目的：制作”左右移动的图片”效果.如右图所示.
要点：本例主要应用JavaScript语言来实现图片的左右移动效果.
～～～～～～～～～～～～～～～～～～～～～～～～～
创作步骤
(1) 启动Dreamweaver MX 软件.
(2) 新建一个名为”左右移动的图片”的网页,如图1.30.1所示.
图1.30.1 ”左右移动的图片”的网页
(3) 单击编辑区上面的按钮，切换代码视图工作区，如图1.30.2所示.
(4) 在
和之间输入代码:(6) 选择 文件(F) → 另存为(A)… Ctrl+Shift+S 命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.30.3所示
图1.30.2 代码视图
图1.30.3 观看在浏览器中的效果
—— 完 ——
因篇幅问题不能全部显示，请点此查看更多更全内容