使用Dreamweaver制作相册
Dreamweaver 技巧荟萃

Dreamweaver 技巧荟萃网站建设技术驻马店市龙山通用机械有限公司宣Dreamweaver 技巧荟萃1.同时链接两个网页通常在网页中设置的超链接一次只能链接到一个网页中,如果需要在不同的框架页中打开新页面,可以使用“转到URL”行为来实现。
打开一个有框架的网页,选择页面中的需要设置链接的文字或图像,单击“行为”面板上的“添加行为”菜单命令,在弹出菜单中选择“转到URL”选项,弹出“转到URL”对话框,在该对话框中显示所有可用的框架,选择其中一个需要设置链接的框架并输入相应的链接地址后再选择另一个框架并输入另一个链接地址。
2.不要为网页文件使用中文名称在制作网页时,初学者起一个容易记忆的中文名称作为文件名,这种做法是不正确的。
因为Dreamweaver 对中文文件名称支持得不是太好,经常会有页面调用不正确的现象发生,所以在Dreamweaver 中保存网页的时候,尽量使用英文或者数字作为文件名称,这样就可以避免上面的出错现象。
3.设置不同分辨率制作好的网页在本地计算机上浏览时很正常,但在另外一台计算机上浏览时发现原本漂亮的网页变得歪歪扭扭了。
这主要是因为每台计算机的分分辨率不同所导致的,为了使所制作的网页在不同分辨率的计算机上都能正常显示,在Dreamweaver 中得到了较好的解决,在文档窗口的右下角,Dreamweaver 显示当前文档被设计成的分辨率大小。
单击数字,在弹出式菜单中可以为当前的页面指定显示分辨率,通过修改可以使设计的网页更具灵活性,使不同分辨率的显示器都能较好地显示。
4.图像拖放技巧在使用 Dreamweaver 编辑网页的时候,经常需要插入一些图像什么的,如果要插入的图像很多,按照常规方法来操作就显得非常麻烦。
可以利用拖放技巧来很好地解决这个问题。
可以打开“文件”面板,在本地站点中的找到图片文件夹,在该文件夹中将图片一一拖入页面中相应的位置,Dreamweaver 将自动把这些图像的路径地址添加到文件的HTML代码中。
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 页面配色方案实例22 CSS的使用实例23 自动格式化表格实例24 使用表格间隔图像实例25 单元格自动延伸实例26 炽热文字实例27 显示当前日期实例28 显示登陆时间实例29 状态栏中跳动的文字实例30 左右移动的图片实例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) 单击文档窗口左下角标签栏中的<body>标签,选择窗口(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.使用Dreamweave网页工具制作一个个人网站;2.包含至少四个网页: 包括首页、个人简介、个人相册等(可随意设计),网页之间用超链接相连。
3.网页中要有图片和文字内容,用表格进行页面布局;4.添加至少两种行为,并为首页添加背景音乐。
5. 在网站中设计一个表单页面。
6. 首页必须包含页面标题,动态按钮导航栏。
首先新建一个文件夹,文件夹的名字不能为汉字,做网站所有的路径都必须用字母或者数字,不能用汉字,我们就用名字吧,譬如说名字张三,那文件夹名字就是zs,如图打开Dreamweaver软件,得到图做网页要新建站点,关于站点配置服务器什么的,这里不讲了,只讲建立站点。
选择站点——新建站点。
我们建的文件夹就是站点根文件夹。
新建站点后得到这样一个界面点选高级,得到界面站点名称与我们建文件夹得名字相同,zs填进去就可以了本地根文件夹就是我们新建的那个文件夹zs,http地址为http://localhost/zs接下来选择左侧栏里远程信息点击无后面的那个三角,选择本地网络,远端文件夹同样选择我们新建的那个文件夹接下来点选左面菜单里的测试服务器,点选访问后面那个三角,选择本地网络,测试服务器文件夹也为我们建好的文件夹zs,在url前缀后面加上zs然后点击确定就可以了得到这样一个界面。
下面看老师的第一条要求,是要至少四个网页,那我们就做四个单击新建,然后单击接下来,选择然后单击创建,接下单击文件——保存,保存这个文件,保存在我们一开始建好的文件夹里面,保存名字不能是汉字,只能是字母或者数字,因为我们只坐四个网页,可以简单一点,把这四个网页命名为a、b、c、d,或者1、2、3、4,当然一个网站默认的索引首页名为index,这里也用index,单击保存,这样得到第一个页面,以同样的方式建剩下的三个页面,这里我的首页默认为index.html,其他三个网页的名字分别为a.html、b.html、c.html,我们这四个网页文件已经保存在我们建的文件夹里。
2022年信息技术知识赛试卷和答案(4)

2022年信息技术知识赛试卷和答案(4)共1种题型,共100题单选题(共100题)1.在Windows操作系统中()A:同一时刻可以有多个活动窗口B:同一时刻可以有多个应用程序在运行,但只有一个活动窗口C:同一时刻只能有一个打开的窗口D:DOS应用程序窗口与Windows应用程序窗口不能同时打开着【答案】:B2.下列寄存器中用于与存储器之间传送数据的是( )。
A:MDRB:MARC:PCD:SP【答案】:A3.在Word中选择某句话后,连续单击两次工具条中的“B”按钮,则()。
A:这句话呈粗体格式B:这句话呈细体格式C:这句话格式不变D:产生出错报告【答案】:C4.动画是一种通过( )来显示运动和变化的过程。
A:视频B:连续画面C:图像D:图形【答案】:B5.二进制数10011010.1011转换成八进制数是( )。
A:232.54B:232.13C:232.51D:232.52【答案】:A6.在 Windows 中有两个管理系统资源的程序组,它们是()。
A:“我的电脑”和“控制面板”B:“资源管理器”和“控制面板”C:“我的电脑”和“资源管理器”D:“控制面板”和“开始”菜单【答案】:C7.一个8位D/A转换器的分辨能力可以达到满量程的( )。
A:1/8B:1/256C:1/16D:1/32【答案】:B8.访问控制技术不包括( ) 。
A:自主访问控制B:强制访问控制C:基于角色访问控制D:信息流控制【答案】:D9.对下列程序的叙述中,正确的是:1:public class X extends Thread implements Runnable{ 2:public void run(){3: System.out.println("this is run()");4:}5:public static void main(String args[]){6:Thread t=new Thread(new X());7:t.start();8:}9:}A:第1行会产生编译错误B:第6行会产生编译错误C:第6行会产生运行错误D:程序正常运行【答案】:D10.有以下程序main(){int i;for(i=1;i=40;i++){if(i++%5==0)if (++i%8==0) printf("%d",i) ;}printf("\n") ;} 执行后的输出结果是()。
Photoshop结合Dreamweaver制作网页相册

Photoshop结合Dreamweaver制作网页相册 更新日期:2006-08-01 10:44 出处:作者:本教程适用对象:有一定的PS基础,最好有网页设计制作基础,那样在PS处理好后可以在DM里面做一个后期的CSS以及布局方面的处理,当然,DM&FW也可做图片批处理并生成相册,不过我个人认为PS&DM的效果比较好。
PS的批处理功能是很强大的,如果利用好可以做为我们做很多工作。
今天我想讲的是“P S批处理设计制作图片展示”开始吧一、准备好自己要做相册的素材,产品展示啦,案例展示了,照片展示了都可以,统一将这些图片放在一个文件夹下,我这里将这个文件叫做“Res_IMg",这里面放的都是大的图片,小图片一会儿ps会为我们做的。
二、打开PS,选择菜单如下:三、这个就是PS制作图片展示的主要界面啦,主要有以下几个:样式中可以选择生成不同的html页面的形式,PS CS版本中提供了8种格式,都不错的。
源图像工作区:上面的”浏览“是选择你要批量做图片展示的文件夹,也就是上面我所说的"Res_Img"。
下面的”目的“就是PS处理完后存放的文件夹,可以存在你想要保存的位置,我这里面建个文件夹叫”Pic_Ok"。
“选项”里面就是具体的一些设置一共有六项,其中一定要设置的是“横幅”“大图像”“预览”。
”横幅“中可以设置这个首页面html的名称,也就是html页面的Title,再就是联系信息,时间什么的,如果填写上最后都会显示出来。
而“大图像”则可以设置生成“图片展示”后大图片的长宽等,而且PS可以自动优化图片大小,当然也可以不设置。
“缩览图”可以设置生成html页面中小图片的大小,也可以设置个边框什么的。
我直接用默认的“0”。
通过以上设置后,就可以按“好”了,然后就等着PS把咱的这堆图片变成一个图片展示吧。
Dreamweaver网页制作超级技巧36则 更新日期:2006-05-30 14:18 出处:网页教学网作者:1. 用Dreamweaver 4.0轻松设计会自动弹性调整的网页首先需要保证的是你的页面内容采用了表格的格式,然后打开你要编辑的页面,按“Ctr l+F6”或者菜单“View→TableView→Layout?View”转换到布局视图。
大学生信息技术知识试题及参考答案

大学生信息技术知识试题及参考答案1、下列哪一个协议是Internet使用的协议?()。
A、OSI参考模型中规定的传输层协议B、传输控制/网间协议TCP/IPC、帧中继传输协议D、IEEE802.3系列协议答案:B2、ios系统里的什么手势能让你放大或缩小网页上的文字和图象?()A、旋转B、轻拂C、双指开河或连续轻点两次D、轻点并按住答案:C3、关于IP协议,以下哪种说法是错误的?()A、IP协议规定了IP地址的具体格式B、IP协议规定了IP地址与其域名的对应关系C、IP协议规定了IP数据报的具体格式D、IP协议规定了IP数据报分片和重组原则答案:B4、在WINDOWS环境中,当应用程序窗口中处理一个被打开的文档后,执行“文件”菜单里的“另存为”命令,将使()。
A、该文档原先在磁盘上的文件保持原样,目前处理的最后结果以另外的文档名和路径存入磁盘B、该文档原先在磁盘上的文件被删除,目前处理的最后结果以另外的文档名和路径存入磁盘C、该文档原先在磁盘上的文件变为目前处理的最后结果,同时该结果也以另外的文档名和路径存入磁盘D、该文档原先在磁盘上的文件扩展名改为.BAK,目前处理的最后结果以另外的文档名和路径存入磁盘答案:A5、建立一个长度为n的有序单链表的时间复杂度为()。
A、Olog2nB、On2C、OnD、O1答案:B6、在word中,复制对象后信息被()。
A、保留在剪贴板,可以被粘贴无数次B、保留在内存,可以被粘贴1次C、保留在内存,可以被粘贴无数次D、保留在剪贴板,可以被粘贴1次答案:A7、下列几种存储器中,存取周期最短的是()A、硬盘存储器B、光盘存储器C、内存储器D、高速缓冲存储器答案:D8、在关系模式R(A,B,C,D)中,有函数依赖集F={B→C,C→D,D→A},则R 能达到()A、1NFB、2NFC、3NFD、以上三者都不行答案:B9、有关Word[打印预览]窗口,说法错误的是()A、此时可调整页边距B、可以单页或多页显示C、此时可全屏显示D、此时可插入表格答案:D10、下面概念中不属于面向对象方法的是()A、类B、过程调用C、继承D、对象答案:B11、打开WORD文档一般是指()。
网页制作第5单元 图像
第5单元图像课程目标:●掌握在网页中插入图像●掌握影像地图的使用●掌握轮换图像的使用●掌握导航条的制作●掌握图片相册的制作建议学时:理论4学时,实践4学时。
5.1 插入图像及设置图像属性5.1.1 插入图像在网页中插入图像的操作十分简单,既可以使用工具栏的【图像】按钮,然后找到要插入的图片文件,再也可以使用菜单【插入】|【图像】,还可以直接从文件面板中拖动图像文件到正在编辑的页面上。
虽然图像文件的格式有很多,但在网页上通常只使用三种格式:jpg、gif、png等。
将图像插入到网页时,Dreamweaver8会自动在HTML源代码中生成对该文件的引用,打开代码视窗可看到类似如下的代码:<img src="images/IMG001.JPG" />即为引用images文件夹中的img001.jpg文件。
在网页制作中,为了确保文件引用的正确性,图像文件必须位于当前站点文件夹中,如果图像文件不在当前站点文件夹,系统会提问是否要将此文件复制到当前站点文件夹,此时应回答“是”,否则当站点上传后会找不到该图像文件。
5.1.2 设置图像属性选中插入的图像,属性面板为图像的属性面板,如图5-1所示,使用该面板可对插入的图像进行设置。
图5-1 图像属性面板宽、高:选定图像的当前尺寸,如果插入后更改过图像的大小,则宽、高旁边的“重设大小”按钮变成可选。
提示:建议不要更改插入后图像的尺寸,这样一是容易产生图像变形,二是即使插入后尺寸改小,也不可能改变网页文件实际的大小。
因此,图像在插入前应使用专门的图像编辑软件(如Photoshop、Firework等)修改好。
垂直边距、水平边距,是指图像与其它对象(如文字等)之间的距离。
源文件,即插入到网页中的文件全名,包含了图像文件的相对路径和文件名。
替换:在该文本框中可以输入图像的替换文字。
这样,当图像没有被显示时,相应区域会显示替换文字以提示浏览者这里将显示的内容。
学用DreamWeaver插件制作网络相册
建议 选 择 “PE S !e fl ( 图 2 ; J G ma lr ie 见 ) 在 “ u P t Thu n i n 指 定缩 略图 所在 页 一 mb a l i s
种 效 果和 ACDs e做 的 一样 , 图 片多 的时候 看 起 来 e 很 麻 烦 ,所 以我们 不 选它 ; “ u to J s s Po p 表 pu s
示单 击缩略 图 以后 会弹 出一个 没有边框 的 窗 口来显 示
维普资讯
源 图 片 ,这 种 效 果 较 好 , 建 议 选 中; “ a St nda d r
维普资讯
说 到 网络 相 册 , 我想 大 多数 朋 友 都 不 陌 ,在 这 一 栏内 应选 择相 册 图 od r
Ch n r n我 们有 班 级 相册 ,在 Ya o 我 们有 个 iae ho !
人 ,家 庭 相册 , 把 自 己喜 爱 的 照 片放 到 网 上让 大 家
最 下 面 出 现 具 体 的 设 置 项 目 : “ g m a e 表 示 Hu i g ”
以 紧凑 方 式 显 示 源 图片 , 后 面 的 “ a g n”表 示 M ri 图 片 距 页 面 的 距 离 ( 图 5) 建 议 选 择 此 项 ,距 见 ,
离填 上 1 p 一 2 p Ox 0 x就 行 了: “ l c e n Fu l r e ”表 示 S
以,不 过对 于大 多 数使 用 Dra e mwe v r的朋 友 ,最 ae 好的方 法 当然 是在 D e mwe v r ra a e 中直 接做 了 。今天 我 就 教 大 家如 何 用 它 的插 件 来 做相 册 , 这 种 方法 不 但更简单 ,而且效 果也 更出色 。
信息技术考试模拟题(附参考答案)
信息技术考试模拟题(附参考答案)一、单选题(共100题,每题1分,共100分)1.VLAN在现代组网技术中占有重要地位,在由多个VLAN组成的一个局域网中以下哪种说法是不正确的?()A、当站点从一个VLAN转移到另一个VLAN是,一般不需要物理连接B、VLAN中的一个站点可以和另一个VLAN中的站点直接通信C、当站点在一个VLAN中广播时,其他VLAN中的站点不能收到D、VLAN可以通过MAC地址,交换机端口等进行定义正确答案:B2.在计算机网络中,表征数据传输有效性的指标是()。
A、频带利用率B、信道容量C、误码率D、传输速率正确答案:D3.对二叉排序树进行(),可以得到各结点键值的递增序列。
A、后根遍历B、层次遍历C、先根遍历D、中根遍历正确答案:D4.Hacker是指那些私闯非公开的机构网络进行破坏的人,它的中文俗称是()。
A、网虫B、海客C、朋克D、黑客正确答案:D5.从心理学角度看,对数据流程图的数据处理泡进行分解,一次分解为多少个泡为宜。
()A、18±2B、15±1C、3±1D、7±2正确答案:D6."根据关系模式的完整性规则,一个关系中的"主码"( )。
"A、不能有两个B、不能成为另一个关系的外码C、不允许为空D、可以取空值正确答案:C7.在描述信息传输中bps表示的是()。
A、每秒传输的字数B、每秒传输的指令数C、每秒传输的字节数D、每秒传输的位数正确答案:D8.属性类型允许是基本数据类型、结构类型和集合类型的模型是( )A、复合对象模型B、嵌套关系模型C、平面关系模型D、分布式关系模型正确答案:A9.用Dreamweaver MX来制作网站电子相册,需要用到()软件对图片进行优化处理。
A、Fireworks MXB、FlashC、PhotoshopD、Freehand正确答案:A10.在n个结点的顺序表中,算法的时间复杂度是O(1)的操作是()。
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 页面配色方案实例22 CSS的使用实例23 自动格式化表格实例24 使用表格间隔图像实例25 单元格自动延伸实例26 炽热文字实例27 显示当前日期实例28 显示登陆时间实例29 状态栏中跳动的文字实例30 左右移动的图片实例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) 单击文档窗口左下角标签栏中的<body>标签,选择窗口(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、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
Dreamweaver也能轻松制作Flash相册
2007-08-10 14:17:12来源: IT168(北京)网友评论21 条进入论坛
漂亮的Flash动画人人喜欢,不过制作起来的确有一些技术难度。
你知道吗,Dreamwe aver作为一个网页制作工具,还可以创建好玩的Flash相册。
今天我们就来利用它来制作一个简单、漂亮的Flash相册,最终效果如图1。
图1
插入Flash元素
运行Dreamweaver,点击菜单“插入”→“媒体”→“图像查看器”,系统会自动弹出“保存F lash元素”对话框,键入保存的文件名,例如:“Photo.swf”,点击“保存”按钮完成。
现在一个Flash元素就被插入网页中了,为满足实际需要,下面我们需要进行简单的参数设置。
鼠标点击编辑窗口中的“Flash元素”,在属性面板中重新设置动画的宽、高值为实际所需,如图2。
图2
Flash元素参数设置
下面我们还需要设置“Flash元素”的参数,为Flash相册指定调用的图片、设置相册外观。
点击菜单“窗口”→“标签检查器”,现在我们可以Dreamweaver右栏中看到一个“Flash元素”面板,如图3。
图3
这里可供选择的参数很多,下面我们主要讲几个基本的设置值。
imageURLs,该值用于设置调用的图片位置,我们一般将调用的图片放在同保存的“Ph oto.swf”文件同一文件夹为佳。
鼠标点击imageURLs项目的值,系统自动在参数右侧增加“编辑数组值”按钮,点击进入,如图4。
图4
进入“编辑"imageURLs"数组对话框”,系统默认内置了三组数值,我们可以点击“+”号增加新的数值,每一组的数值同需要调用的图片文件名一一对应即可,如图5。
图5
其它“Flash元素”的参数设置方法基本同上,下面我们列一下几个重要的参数:
imageLinks,设置点击每张图片后访问的网址。
showControls,定义是否显示Flash相册的播放控制按钮。
slideAutoPlay,定义Flash相册是否自动播放。
transitionsType:定义Flash相册过渡效果的类型,默认为随机效果:Random。
title、titleColor、titleFont、titleSize:添加自定义的相册标题、颜色、字体、大小等值。
frameShow、frameThickness、frameColor:用于定义Flash相册是否有边框及边框宽度、颜色值。
注:Dreamweaver会在保存相册的文件夹中自动生成一个Scripts文件夹,上传网页时要记住一起上传。