Dreamweaver软件应用案例教程6
Dreamweaver cs6 标准实例教程课件第1章Dreamweaver CS6概述
执行“文件”｜“新建”命令，打开“新建文档”对话框 选择“空白页”类别的HTML基本项，布局“无”，然后单击“创建”按钮
1.2.1 菜单栏
1.2.2 工具栏
：显示代码视图。 ：在同一屏幕中以水平对比的方式显示代码和设计视图。 ：显示设计视图。
：在不打开浏览器的情况下实时预览页面的效果。 ：以黄色突出显示浏览器为呈现该页面而执行的代码版本，此代码是不 可编辑的。
第1章 Dreamweaver CS6概述
1.2 工作界面
执行“开始”|“程序”|“Adobe”| “Adobe Dreamweaver CS6”命 令启动Dreamweaver
第一次启动Dreamweaver CS6时， 会弹出“默认编辑器”对话框
单击“确定”按钮进入Dreamweaver CS6的欢迎界面
1.2.3 “插入”面板
“插入”面板
在不同面板之间进行切换
✓ 单击“颜色图标”命令，即可以彩色显示对象图标。 ✓ 单击下ห้องสมุดไป่ตู้列表中的“隐藏标签”命令，则只显示对象图标而不显示图标右
侧的标签。
1.2.4 文档窗口
文档窗口用于显示当前创建或者编辑的文档，可以根据选择显示方式的 不同而显示不同的内容。
1.2.5 “属性”面板
选中某一对象后，“属性”面板可以显示被选中对象的属性，还可 以在属性面板中修改被选对象的各项属性值。
单击面板右下角的 可关闭“属性”面板的下半部分。 单击面板右下角的 可打开“属性”面板的下半部分。
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 插入按钮。
dreamweavercs6教案
dreamweavercs6教案一、网页设计基础与制作流程在网络高速发展的今天，网站已经成为一个自我展示和宣传的平台，一个网站是由多个相关联的网页构成的。
一般网页上都会有文本和图像信息，复杂一些的网页上还会有声音、视频、动画、多媒体。
要制作出精美的网页，不仅需要能够熟练的使用软件，还需要掌握一些网页制作的相关知识。
现在我们常用的浏览器有IE,火狐，欧朋，谷歌，搜狗，360，遨游，百度浏览器，hao123浏览器，腾讯TT。
这些国产的浏览器大部分是以IE为内核的。
因为浏览器的内核不同，所以同样的代码在浏览器上的显示可能不一样。
如果制作页面的话，我建议用火狐或者IE。
二、Dreamweaver简介Dreamweaver CS是一款由Adobe公司大力开发的专业HTML编辑器，用于对WEB站点，WEB页面和WEB应用程序进行设计、编码和开发。
利用Dreamweaver中的可视化编辑功能，用户可以快速创建页面而无须编写任何代码。
三、表格的基本应用表格是页面的重要元素，在DIV+CSS布局方式被广泛运用之前，表格布局在很长一段时间中都是最重要的页面布局方式。
在使用DIV+CSS布局中，也并不是完全不可以使用表格，而是将表格回归他本身的作用，用于显示表格式数据。
现在在一些的系统中，无论是后台使用java或是c#做的，在页面显示数据大部分使用到表格。
这里的表格就类似于Excel表格，并且在项目中，通常可以使用表格导出Excel表或者是实现导入Excel表，这样在办公方面增加了用户体验。
插入表格及设置表格属性1、单击“插入”面板的“表格”按钮，弹出“表格”对话框，在该表格对话框中可以设置表格的行数、列数、表格的宽度、单元格间距、单元格边距、边框粗细等选项。
表格宽度：该选项用于设置表格的宽度，“宽度”的单位可以通过右边的下拉列表选择。
如果以百分比定义的表格，会随着浏览器窗口大小的改变而改变。
单元格边距：用于设置插入的表格中单元格内容和单元格之间的边框数。
网页设计与制作(Dreamweaver CC)模块6 综合应用
01 模块1 网页基础知识 02 模块2 初级应用 03 模块3 网页布局 04 模块4 高级应用 05 模块5 网站的测试与发布 06 模块6 综合应用
任务16 完美新娘 ——网站设计综合应用
任务描述 通过“完美新网页、模板创建和更新网页的 方法和 技巧。 任务解析 在本任务中，需要完成以下操作： 熟悉使用表格布局网页的方法和技巧； 熟悉模板的创建和应用； 熟悉使用模板快速更新网站。
ztyp.html 效果图
zxkp.html 效果图
ztyp.html 效果图
qqhp.html 效果图
jchp.html 效果图
任务16 环保科技网站 ——网站设计综合应用
任务描述 通过布局“环保科技网站”网页，巩固使用
CSS+Div 布局和美化网页的方法和技巧。
任务解析 熟悉 Div 的创建和属性设置； 熟悉 CSS 设计器的使用方法； 巩固使用 CSS+Div 布局和美化网页的方法。
ztyp.html 效果图
模块6结束
根据提供的 lx 文件夹中的素材，制作以下网站，网页效果如图 6-33~图 6-36 所示。
综合实训
根据提供的 lx 文件夹中的素材，制作以下网站，网页效果如图 6-33~图 6-36 所示。
综合实训
根据提供的 lx 文件夹中的素材，制作以下网站，网页效果如图 6-33~图 6-36 所示。
综合实训
根据提供的 lx 文件夹中的素材，制作以下网站，网页效果如图 6-33~图 6-36 所示 。
要求： 1 ．布局方法自定。 2 ．使用模板制作如图所示统一风格的页面。 3 ．网页实现灵活跳转。 4 ．网页文本内容格式统一。 5 ．设置超链接颜色变化，并实现滑动鼠标颜色变换效果。 6 ．shyf.html 页面实现交换图像。 7．配置 IIS，在本机 IP 地址中可以打开 lxwm.html 页面。
Dreamweaver-cs-基础与实例教程
Flash等对象。然后鼠标右键单击“CSS样式”面板中 相应旳样式名称，弹出它旳快捷菜单，再单击该菜单 中旳“套用”菜单命令。 （2）利用“属性”栏 选中要应用CSS样式旳文本对象，在其“属性”栏旳“样 式”下拉列表框中选择需要旳CSS样式名称，即可将选 中旳CSS样式应用于选中旳文本对象。
（2）若要重定义特定 HTML 标签旳默认格式设置，请选择“标签” 选项，然后在“标签”文本框中输入一种 HTML 标签，或从弹出 式菜单中选择一种标签。
（3）若要为详细某个标签组合或全部涉及特定 Id 属性旳标签定 义格式设置，请选择“高级”选项，然后在“选择器”文本框中 输入一种或多种 HTML 标签，或从弹出式菜单中选择一种标签。 弹出式菜单中提供旳选择器（称作伪类选择器）涉及 a:active、 a:hover、a:link 和 a:visited。
环节3：选择定义样式旳位置： （1）若要创建外部样式表，请选择“新建样式表文件”。
（2）若要在目前文档中嵌入样式，请选择“仅对该文 档”。
环节4：单击该对话框中旳“拟定”按钮，即可退出该 对话框，弹出“CSS规则定义”对话框。
2.3.2 将外部样式表导入到目前文档
环节1：在CSS面板上，单击附加样式表按钮，打开 “链接外部样式表对话框”，单击对话框中“浏览” 按钮，浏览到外部 CSS 样式表，或者直接在“文件 /URL”框中键入该样式表旳途径。
2.1.2 插入水平线
在文档编辑区将插入点定位到所需位置，选择“插入” 菜单中旳“HTML”子菜单下旳“水平线”命令或单击 “插入”栏中旳“HTML”选项卡，在其中单击水平线 按钮即可添加水平线。初始绘制旳水平线旳格式往往 不能满足实际需要，此时可经过属性面板对其进行修 改。
中文版 Dreamweaver CS6网页设计教程 第6章
2. 选择框架集
使用下列方法之一选择框架集：在 文档窗口中，单击框架集中任意两 个框架的边界，或者在“框架”面 板中，单击框架集的外围，如图648所示。
18
6.3.3 设置框架和框架集属性
1. 设置框架属性
选择框架后，打开框架“属性”面板，如图6-49所示。
2. 设置框架集属性
选择框架集后，打开框架集“属性”面板，如图6-50 所示。
16
6.3.1 创建框架集
1. 插入预定义框架集
Dreamweaver CS6提 供了多种预定义的框架 结构，选择“插 入”| HTML |“框架” 命令，就可以看到这些 预定义的框架结构了， 如图6-42所示。
2. 自行创建框架集
17
6.3.2 选择框架和框架集
1. 选择框架
使用下列方法之一选择框架：按住 Alt键的同时，在文档窗口中单击框 架，可选定框架：或者在框架“属 性”面板中单击框架，则选中相应 的框架，如图6-47所示。
22
6.3.7 框架应用
该实例制作一本电子书，主体是“上方及左侧嵌套”框架集， 在顶部放置标题栏，左侧框架放置导航栏(即目录)，单击链接， 在右侧框架中打开链接内容。其具体操作步骤如下。
(1) 新建HTML页面。 (2) 依次选择“插入”| HTML |“框架”|“上方及左侧嵌套”命令。 (3) 选择框架集，选择“文件”|“保存框架页”命令，保存框架集。 (4) 在顶部框架内单击鼠标，选择“文件”|“保存框架”命令，将 其保存为Frame-top.htm。 (5) 使用同样的方法，将左侧框架保存为Frame-left.htm，将右侧框 架保存为Frame-main.htm。 (6) 按住Alt键的同时，单击框架，打开其“属性”面板，在“属性” 面板上设置框架名称。Dreamweaver CS6已经为预定义框架设置了名称， 例如，mainFrame、leftFrame、topFrame，这些名称在指定链接目标时 要用到，其他属性默认，如图6-54所示。
Dreamweaver_CS6完美网页制作基础、实例与技巧从入门到精通课件
网页又称HTML文件，是一种可以在WWW上传输， 能被浏览器认识和翻译成页面并显示出来的文件。
入
HTTP 请求 浏 览 器 HTTP 应答 所谓动态网页是指网页文件里包含了程序代码， 通过后台数据库与Web服务器的信息交互，由后 台数据库提供实时数据更新和数据查询服务。
1.2.3
导航栏
导航栏是网页的重要组成元素，它的任务是帮助浏 览者在站点内快速查找信息。好的导航系统应该能 引导浏览者浏览网页而不迷失方向。
1.2.4
文本
网页内容是网站的灵魂，网页中的信息也以文本为 主。无论制作网页的目的是什么，文本都是网页中 最基本的、必不可少的元素。
1.2.5
图像
图像在网页中具有提供信息、展示形象、装饰网页、 表达个人情趣和风格的作用。图像是文本的说明和 解释，在网页适当位置放置一些图像，不仅可以使 文本清晰易读，而且使得网页更加有吸引力。
1.1.2
什么是网站
网站是因特网上的一个信息集中点，可以通过域名 进行访问。网站要存储在独立服务器或者服务器的 虚拟主机上才能接受访问。
1.1.3 什么是Web服务器
Web服务器就是在Web站点上运行的应用程序， 用户只有把设计好的网页放到Web服务器上才能 被其他用户浏览。
1.1.4 什么是静态网页
教学内容：为了能够使网页初学者对网页设计 有个总体的认识，在设计制作网页前，首先介 绍网页设计的基础知识。
• • •
教学重点 了解网页的基本概念 熟悉网页的基本构成元素 熟悉网页设计常用工具
在学习网页设计之前，先来了解一下网页中的基本 概念。
Internet是一个全球性的计算机互联网络，中 文名称为“国际互联网”或“因特网”。它集现代 通信技术和现代计算机技术于一体，是计算机之间 进行国际信息交流和实现资源共享的良好手段。
Dreamweaver CS6网页设计与制作标准教程 (6)
6.1 表格的简单操作
课堂案例——布艺沙发网页 表格的组成
插入表格
表格各元素的属性 在表格中插入内容
选择表格元素
复制、粘贴表格 删除表格和表格内容
缩放表格
合并和拆分单元格 增加和删除表格的行和列
6.1.1 课堂案例——布艺沙发网页
使用“属性”面板，设置页面边距及页面标题；使用“表格”
按钮，插入表格效果；使用“图像”按钮，插入图像。
6.1.6 选择表格元素
先选择表格元素，然后对其进行操作。一次可以选择整个表 格、多行或多列，也可以选择一个或多个单元格。
选择整个表格
选择整个表格有以下几种方法。
将鼠标指针放到表格的四周边缘，鼠标指针右下角出现图 标 ，单击鼠标左键即可选中整个表格。 将插入点放到表格中的任意单元格中，然后在文档窗口左下角 的标签栏中选择<table>标签 令。 在任意单元格中单击鼠标右键，在弹出的菜单中选择“表格 > 选择表格”命令。 。 将插入点放到表格中，然后选择“修改 > 表格 > 选择表格”命
选择不相邻的单元格 按住Ctrl键的同时单击某个单元格即选中该单元格，当再次单
击这个单元格时则取消对它的选择。
6.1.7 复制、粘贴表格
在Dreamweaver CS6中复制表格的操作如同在Word中一样。 可以对表格中的多个单元格进行复制、剪切、粘贴操作，并保留原 单元格的格式，也可以仅对单元格的内容进行操作。
导入Word文档过程图
将网页中的表格导入到其他网页或Word文档中 （1）将网页内的表格数据导出 选择“文件 > 导出 > 表格”命令，弹出“导出表格”对话框， 根据需要设置参数，单击“导出”按钮，弹出“表格导出为”对话 框，输入保存导出数据的文件名称，单击“保存”按钮完成设置。
Dreamweaver cs6 标准实例教程课件第6章表格技术
入行（列）”命令，插入一空行（列）。 ✓ 右击单元格，在弹出的上下文菜单中执行“表格”｜“插入行
（列）”命令，插入一空行（列）。
通过以下方法之一删除一行（列）： ✓ 执行“修改”｜“表格”｜“删除行（列）”命令。 ✓ 右击单元格，在弹出的上下文菜单中执行 “表格”｜“删除行
6.1 表格概述
表格可以将数据、文本、图片规范显示在页面上，精准控制页面元 素位置，避免杂乱无章。
使用表格有一个缺陷：它会使网页显示的速度变慢。这是因为在浏 览器中一般的文字是逐行显示的，即文字从服务器上传过来，尽管不全， 但它还是会将传到的部分显示出来，以方便浏览。而使用表格就不同了， 表格一定要等到整个表格的内容全部传过来之后，才能在客户端的浏览 器上显示出来。即表格是一整块出现的。
上的单元格具有相同布局的现有单元格。 ✓ 若要在特定单元格所在行/列粘贴一整行/列单元格，单击该单元格。 ✓ 若要创建一个新表格，将插入点放置在表格之外。 （3）把光标定位于目标表格中，单击鼠标右键，在弹出的上下文菜单 中执行“粘贴”命令。
如果把源单元格的内容复制 到目标表格时，目标表格没有足 够的列数来容纳源单元格，将弹 出出错信息，如图所示。
✓ 选中一行表格单元或一列表格： 将光标放置在一行表格单元的 左边界上，或将光标放置在一 列表格单元的顶端，当黑色箭 头出现时单击鼠标，或单击一 个表格单元，横向或纵向拖动 鼠标。
✓ 选中多个连续表格单元：单击一个表格 单元，然后纵向或横向拖动鼠标到另一 个表格单元，或单击一个表格单元，然 后按住Shift键单击另一个表格单元，所 有矩形区域内的表格单元都被选择。
第6章 格技术
本章将介绍表格的作用及使用方法。内容包括：有关表格的操作，如插入 表格、格式化表格、拆分与合并单元格、剪切和粘帖单元格、删除行列以及 插入行等操作，表格和单元格属性的设置，以及导入文本数据到表格和输出 表格数据到文本文件等。
边做边学-Dream weaver CS6网页设计案例教程
1.2 创建网站框架
操作目的 操作步骤 相关工复制效果，熟练掌握新 建命令。通过关闭新建文件，熟练掌握保存和关闭命令。
编辑站点 复制站点 删除站点 导出站点 导入站点
2.创建文件夹
建立站点前，要先在站点管理器中创建站点文件夹。
（1）在本地磁盘中选择要建立站点的位置。 （2）通过以下两种方法新建文件夹。
①选择“文件 > 新建文件夹”命令。 ②用鼠标右键单击站点，在弹出的快捷菜单中选择“新建文件 夹”命令。 （3）输入新文件夹的名称。
3.定义新站点
建立好站点文件夹后用户就可定义新站点了。在Dreamweaver CS6中， 站点通常包含两部分，即本地站点和远程站点。本地站点是本地计算机上的一 组文件，远程站点是远程 Web 服务器上的一个位置。用户将本地站点中的文 件发布到网络上的远程站点，使公众可以访问它们。在Dreamweaver CS5中 创建 Web 站点，通常先在本地磁盘上创建本地站点，然后创建远程站点，再 将这些网页的副本上传到一个远程 Web 服务器上，使公众可以访问它们。
1.3 管理站点
操作目的 操作步骤 相关工具
1.3.1 操作目的
通过站点管理命令，熟练掌握创建站点的方法。通过新建站点，熟练 掌握创建站点根目录的过程。
1.3.2 操作步骤
1
2
3
4
1.3.3 相关工具
1.站点管理器
站点管理器的主要功能包括新建站点、编辑站点、复制站点、删除站 点以及导入或导出站点。若要管理站点，必须打开“管理站点”对话框。
Dreamweaver CS6实例教程(第3版) (6)
效果图
单位。
6.1.7 拆分框架
通过拆分框架，可以增加框架集中框架的数量，但实际上是 在不断地增加框架集，即框架集嵌套。拆分框架有以下几种方法。 （1）先将光标置于要拆分的框架窗口中，然后选择“修改 > 框架集”命令，弹出其子菜单，其中有4种拆分方式。 （2）选定要拆分的框架集，按Alt+Shift组合键的同时，将 鼠标指针放到框架的边框上，当鼠标指针呈双向箭头时，拖曳鼠 标指针拆分框架。
6.1.4 保存框架
保存框架时，分两步进行，先保存框架集，再保存框架。
1．保存框架集和全部框架
2．保存框架集文件 3．保存框架文件
6.1.5 框架的选择
在对框架或框架集进行操作之前，必须先选择框架或框架集。
1．选择框架 2．选择框架集
6.1.6 修改框架的大小
建立框架的目的就是将窗口分成大小不同的子窗口，在不同的 窗口中显示不同的文档内容。调整子窗口的大小有以下几种方法。 （1）在“设计”视图中，将鼠标指针放到框架边框上，当鼠 标指针呈双向箭头时，拖曳鼠标改变框架的大小。 （2）选择框架集，在“属性”面板中“行”或“列”选项的 文本框中输入具体的数值，然后在“单位”选项的下拉列表中选择
6.1.8 删除框架
将鼠标指针放在要删除的边框上，当鼠标指针变为双向箭头时， 拖曳鼠标指针到框架相对应的外边框上即可进行删除。
6.2 框架的属性设置
课堂案例——家具天地网页
框架属性
框架集的属性 课堂案例——干果批发网页
框架中的链接
改变框架的背景颜色
6.2.1 课堂案例—家具天地网页
使用“修改”菜单命令，设置页面边距；使用“属性”面板，设 置框架集的属性。
效果图
6.2.5 框架中的链接
第6章 使用Dreamweaver制作网页
文件：控制文档的基本操作，包括新建、保存和打开等操作。 编辑：对文档进行具体的操作，包括撤消操作、复制、粘贴和编
辑代码等操作。 查看：调整工作界面，包括界面的缩放，标尺、风格等辅助工具
编辑 ：单击该按钮，启动Fireworks对图像进行编辑 （需要安装Fireworks）。
使用Fireworks最优化 ：单击该按钮，启动 Fireworks的优化输出程序，对选取的图像进行优化 处理并保存。
裁剪 ：单击该按钮，所选图形边缘将出现裁切框，可以对图像进 行裁剪。
重新取样 ：单击该按钮，对已经被调整大小的图像重新取样，提 高图像品质。
第6章 使用Dreamweaver制作网 页
任务1
认识Dreamweaver
任务2
站点的基本操作
任务3 任务4 任务5
在网页插入文本 插入图像
创建超级链接
本章导读
Dreamweaver是一款专业的网页编 辑器，可以对Web站点、Web页面 和Web应用程序进行设计、编译和 开发。
能力目标
认识Dreamweaver 创建站点 在网页中插入文本 在网页中添加图像 创建超级链接
任务1 认识Dreamweaver
➢ Dreamweaver的操作界面非常整洁。启动Dreamweaver后，可以在 它的操作界面最上方看到标题栏，然后往下依次为菜单栏、插入 栏、文档栏、文档窗口、标签栏和“属性”面板，在操作界面的 右侧是浮动面板组。
阶段1 认识Dreamweaver工作界面
1.菜单栏
阶段1 站点的规划
中文版_Dreamweaver_CS6网页设计教程_第6章
6.1.3 选择表格
1. 选择整个表格 2. 选择行或列
(1) 选择单行。 (2) 选择单列。
(3) 选择行/列。 3. 选择单元格
(1) 选择单个单元格 (2) 选择多个单元格
7
6.1.4 编辑表格
1. 调整表格大小
2. 设置表格属性
1)
设置表格属性
2)
设置单元格属性
3. 增加/删除行或列
件。图6-23所示为以制表符相隔的文本文件。 (3) 在Dreamweaver CS6中，选择“文件”|“导入
表格式数据”命令，打开“导入表格式数据”对话框， 如图6-24所示。
11
6.1.6 导入/导出数据
(4)设置完成后，单击“确定” 按钮，将外部数据导入，如图 6-25所示。
12
6.1.6 导入/导出数据
表格包含以下 3 个基本元素。
行。 列。 单元格。
3
6.1.1 插入表格
插入表格的基本步骤如下。
(1) 将插入点置于页面中要插入表格的位置。 (2) 在插入栏的“常用”选项卡中单击按钮。也可
以选择“插入”|“表格”命令；或使用快捷键 Ctrl+Alt+T 快速插入表格。 (3) 在弹出的“表格”对话框中设置表格的参数值， 如图6-1所示。单击“确定”按钮。
1)
增加行或列
2)
删除行或列
3) 设置“属性”面板
4. 复制/粘贴单元格
5. 拆分/合并单元格
1)
拆分单元格
2)
合并单元格
8
6.1.5 数据排序
和其他数据处理软件一样，Dreamweaver CS6 也可以将表格中的数据按照一定的规则排列， 其操作方法如下。
Dreamweaver-CC实例教程(第5版)-第6章-ASP
第6章 ASP本章简介：本章主要介绍ASP动态网页基础和内置对象，包括ASP服务器的安装、ASP语法基础、数组的创建与应用及流程控制语句等。
通过对本章的学习，读者可以掌握ASP的基本操作。
掌握ASP服务器的运行环境、安装IIS的方法掌握ASP语法基础、数组的创建与应用的方法掌握VBscript选择和循环语句的方法掌握Request请求对象和Response响应对象的方法掌握Server服务对象的使用方法课堂学习目标6.1 ASP动态网页基础课堂案例——节能环保网页ASP服务器的安装ASP语法基础数组的创建与应用流程控制语句6.1.1 课堂案例—节能环保网页使用“拆分”按钮和“设计”按钮，切换视图窗口；使用函数“Now()”显示当前系统时间。
效果图6.1.2 ASP服务器的安装ASP是一种服务器端脚本编写环境，其主要功能是把脚本语言、HTML、组件和Web数据库访问功能有机地结合在一起，形成一个能在服务器端运行的应用程序，该应用程序可根据来自浏览器端的请求生成相应的HTML文档并回送给浏览器。
使用ASP可以创建以HTML网页作为用户界面，并能够对数据库进行交互的Web应用程序。
1．ASP的运行环境2．安装IIS6.1.3 ASP语法基础1．ASP文件结构ASP文件是以.asp为扩展名的。
2．声明脚本语言在编写ASP程序时，可以声明ASP文件所使用的脚本语言，以通知Web服务器文件是使用何种脚本语言来编写程序的。
3．ASP与HTML在ASP网页中，ASP程序包含在“<%”和“%>”之间，并在浏览器打开网页时产生动态内容。
它与HTML标签两者互相协作，构成动态网页。
ASP程序可以出现在HTML文件中的任意位置，同时在ASP程序中也可以嵌入HTML标签。
6.1.4 数组的创建与应用数组是有序数据的集合。
数组中的每一个元素都属于同一个数据类型，用一个统一的数组名和下标可以唯一地确定数组中的元素，下标放在紧跟在数组名之后的括号中。
Dreamweaver CS6网页设计案例教程(微课版)
读书笔记
读书笔记
这是《Dreamweaver CS6网页设计案例教程（微课版）》的读书笔记模板，可以替换为自己的心得。
精彩摘录
精彩摘录
这是《Dreamweaver CS6网页设计案例教程（微课版）》的读书笔记模板，可以替换为自己的精彩内容摘录。
作者介绍
同名作者介绍
这是《Dreamweaver CS6网页设计案例教程（微课版）》的读书笔记模板，暂无该书作者的介绍。
第10章表单与行为
10.1废品回收页 10.2卫浴页 10.3综合演练——问卷调查页 10.4综合演练——全麦面包页
第11章页代码
11.1设计无忧页 11.2油画艺术馆页 11.3综合演练——机电设备页 11.4综合演练——自行车页
第12章综合设计实训
12.1个人页——张美丽的个人页 12.2游戏娱乐页——娱乐星闻页 12.3旅游休闲页——篮球运动页 12.4房产页——焦点房产页 12.5文化艺术页——书法艺术页
1.1操作界面 1.2创建站框架 1.3管理站点 1.4页文件头设置
第2章文本与文档
2.1轩宇门窗页 2.2休闲旅游页 2.3休闲度假页 2.4综合演练——家居装饰页 2.5综合演练——有机果蔬页 3.1咖啡馆页
第3章图像和多媒体
3.2物流运输页 3.3综合演练——儿童零食页 3.4综合演练——房源页
目录分析
1
文前
2
内容提要
3 第1章初识
Dreamweaver CS6
4
第2章文本与文 档
5
第3章图像和多 媒体
1
第4章超链接
2
第5章使用表格
3
第6章使用框架
4
第7章使用层
课堂案例_中文版Dreamweaver CS6实用教程_[共3页]
![课堂案例_中文版Dreamweaver CS6实用教程_[共3页]](https://img.taocdn.com/s3/m/54c691c6f18583d0486459cd.png)
第4章 精通CSS 样式93样式表文件，因此能够实现代码的最大化多用及网站文件的最优化配置。
其代码如下：<html><head><title>外部样式表</title><link href="style.css"rel="stylesheet" type="text/css" /></head><body>外部样式表</body></html>在上面的XHTML 代码中，在<head>标签中使用<link>标签，可以将link 指定为stylesheet 样式表方式，并使用href=“style.css ”指明外部样式表文件的路径，只需将样式单独编写在style.css 文件中所定义的样式。
CSS 样式表在页面中的应用主要目的在于实现良好的网站文件管理及样式管理，分离式的结构有助于合理分配表现与内容。
提示：推荐使用外部样式表，主要有以下优点：1．独立于HTML 文件，便于修改；2．多个文件可以引用同一个样式表文件；3．样式表文件只需要下载一次，就可以在其他链接了该文件的页面内使用；4．浏览器会先显示HTML 内容，然后再根据样式表文件进行渲染，从而使访问者可以更快地看到内容。
推导入样式与链接样式基本相同，都是创建一个单独的CSS 样式文件，然后再引入到HTML 文件中，只不过语法和运作方式上有区别。
采用导入的CSS 样式，在HTML 文件初始化时，会被导入到HTML 文件内，作为文件的一部分，类似于内嵌样式。
而链接样式是在HTML 标签需要CSS 样式风格时才以链接方式引入。
其代码如下：<html><head><title>外部样式表</title> <style type="text/css">@import url("style/style.css"); </style></head><body>外部样式表</body></html>导入外部样式是指在嵌入样式的<style>与</style> 标签中，使用@import 导入一个外部样式表文件。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
案例5：图片热点映射1
操作内容：
在网页中进行图片热点映射
操作要求：
1、创建一个piclink.htm网页，标题为“图片热点映射制作”，使用素材库中的
index.css样式表链接。
网页背景色的值为#0099FF。
2、创建一个宽520像素的水平居中、白色背景无边框表格，单元格的间距和边距都是
10像素。
3、第一行居中写上标题“澳大利亚地图”，楷体，黑色，加粗，其后加入锚记top；第
二行居中插入素材库中的“au_map.gif”。
4、换行后依次插入7个一行一列的水平居中、白色背景无边框表格，根据素材库中的
“au_map_1.gif、au_map_2.gif、au_map_3.gif、au_map_4.gif、au_map_5.gif、au_map_6.gif和au_map_7.gif”图片中显示的澳大利亚的州的名称制作，各表格下方有一个白色文字链接“回到顶部”，链接到锚记“top”。
各表格左侧插入各自的锚记1-7，各个表格之间保持一定距离。
5、将此图中澳大利亚的六个州（塔斯马尼亚州是一个岛）以及一个北部地区按照边界
线分别制作出各自的图像热点，映射到上一步制作的各自州的表格左侧锚记1-7中。
6、用到的素材与最后的网页保存到同一文件夹中，文件夹起名“图片热点映射1”。
参考样张：
图9-44图片热点映射1样图
参考答案：
1、在D盘根目录下建立一个文件夹，命名为“图片热点映射”。
2、将素材中内容放入该文件夹。
3、开始→所有程序→打开Adobe DreamweaverCS4软件。
4、站点→新建站点→高级选项卡，建立图片热点映射站点。
5、右键站点→新建文件→取名piclink.htm，双击打开。
6、在文档工具栏的标题上填入“图片热点映射制作”，右击页面，选择“网页属性”，选择“分类”选项卡，在外观（CSS）右侧背景颜色处设置：#0099FF。
图9-45设置网页标题对话框
图9-46 设置网页背景对话框
7、选择“格式—CSS样式-附加样式表”，在链接外部样式表对话框中，通过浏览按钮添加
素材文件中的index.css样式表，确定，确定。
图9-47附加样式表对话框1
图9-48附加样式表对话框2
8、“插入表格—表格”，表格宽度520像素，行：2，列：1，边框粗细：0，单元格边距：10，
单元格间距：10。
表格白色背景可通过输入代码<table bgcolor=#ffffff>实现。
图9-49创建表格对话框
9、光标定位在第一行，输入标题“澳大利亚地图”，楷体，黑色，加粗；光标定位在“澳大
利亚地图”后，选择“插入—命名锚记”，输入top；光标定位在第二行，插入-图像，选择“au_map.gif”，确定，在单元格属性面板中，选择水平居中对齐。
图9-50插入锚记与图像样图
10、在第一个表格下，空一行，选择“插入-表格”，行：1，列：1，背景颜色：白色，边框
粗细：0，指定宽度：520像素，对齐方式：居中。
光标定位在表格内，选择“插入-图像”，选择au_map_4.gif，确定。
光标定位在南澳大利亚州图像左侧，选择“插入—命名锚记”，输入4。
在表格下方居中输入文字“回到顶部”。
选中文字，右击，选择“创建链接”，在文件名处输入#top，确定。
链接文字“回到顶部”的白色效果可通过输入代码<font color="#FFFFFF">回到顶部</font>实现。
图9-51插入锚记与文字链接样图
11、其余六个表格操作方法与上述表格操作法相同，各个表格之间保持一定距离。
12、选中第一个澳大利亚全貌的表格，利用属性面板上的多边形热点工具，按照边界线依次
描绘澳大利亚的六个州（塔斯马尼亚州是一个岛）以及一个北部地区，并依次链接到锚记#1～#7。
图9-52应用多边形热点样图
图9-53 设置多边形热点
13、返回到刚才建立的文件夹“图片热点映射1”，右键→添加到“图片热点映射1.RAR”。