Dreamweaver实例操作步骤
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 插入按钮。
Dreamweaver制作网站实例教程
Dreamweaver制作实例教程一、定义站点1、在任意一个根目录下创建好一个文件夹（我们这里假设为E盘），如取名为MyWeb。
***备注：中所用的文件都要用英文名。
2、打开Dreamweaver，选择“站点—新建站点”，打开对话框。
在站点名称中输入的名称（可用中文），在本地根文件夹中选择刚才创建的文件夹（E:web）。
然后确定即可。
***备注：再次打开Dreamweaver，会自动找到刚才设立的站点。
如果有多个站点，可以在菜单“站点—打开站点”中去选择。
二、创建页面1、在本地文件夹E:\MyWeb下面的空白处，按右键选“新建文件”，这样就建好了一个页面，默认的文件名为untitled.htm。
htm就表示这个网页文件是一个静态的HTML文件。
给它改名为index.htm。
***第一页的名字通常是index.htm或index.html。
其它页面的名字可以自己取。
2、双击index.htm进入该页面的编辑状态。
在标题空格里输入网页名称，按右键选页面属性，打开“页面属性”窗口。
在这里可以设置的标题、背景颜色或背影图像，超级的颜色（一般默认即可），其他都保持默认即可。
3．此时光标位于左上角，可输入一句话，如“欢迎来到我的主页”。
选取文字，用菜单“窗口/属性”打开属性面板，选取文字大小为6，再使文字居中，然后在文字前用几个回车使其位于页面中间。
4．如要选取字体，则选择字体中的最后一项：编辑字体列表。
然后在对话框中选+号，接着在“可用字体”栏中选择需要加入到字体列表中的一种字体，点击中间的按钮就可以加入了。
***在网页上最常用的是宋体字。
不要将特殊的字体加到列表中使用，因为别人电脑上未装就看不到。
如果需要用的话，要做成图片后再使用。
***在网页上打入空格的办法是：把输入法调为全角。
***在网页上换行的办法是：shift+Enter。
只按Enter则为换段。
三、为页面添加图片1、在本地文件夹E:\MyWeb下面的空白处，按右键选“新建文件夹”，这样建立了一个文件夹，用它来放图片，可以改名为tu或pic或images都可以。
《Dreamweaver-8基础与实例教程》省名师优质课赛课获奖课件市赛课一等奖课件
3.选中表格列
选中表格列旳措施与选中表格行旳措施类似，这里不再 赘述。
4.选中单元格
（1）在要选择旳单元格中按下鼠标左键，并拖，即可选中该单元格。
（1）表旳大小用width=“数值”和height=“数值”属 性阐明。前者为表宽，后者为表高，数值是为像素数 或占窗口旳百分比。
（2）定义表格旳粗细由border=“n”阐明，n取整数， 单位是像素（假如省略，则不带边框）。将border设 成不同旳值，可产生不同旳效果。
（3）表格间距用cellspacing="数值"表达，"数值"旳单 位是像素。
2.该对话框允许您指定表格旳排序方式，若要完毕“排序表格”对话框， 请执行下列操作：
排序按：能够拟定哪个列旳值将用于对表格旳行进行排序。 顺序：拟定是按字母还是按数字顺序以及是以升序（A 到 Z，小数字到大
数字）还是降序对列进行排序。 再按/顺序：拟定在不同列上第二种排序措施旳排序顺序。在“再按”弹
4.5 实例制作
4.5.1虚线表格 4.5.2几种特殊表格旳制作 4.5.3圆角表格 4.5.4利用表格排版制作页面
4.5.1虚线表格
在浏览Internet时，会发觉诸多网站排版所用旳表格 都是经过多种美工制作旳，非常漂亮，不但起到了网 页排版旳作用，而且在很大程度上美化了网页，使网 页看起来非常清爽、简洁。虚线表格就是其中一种。
其基本定义格式如下： <table>…</table> 定义表格； <tr>…</tr> 定义表行 <th>…</th> 定义表头 <td>…</td> 定义表项（单元格）
Dreamweaver实例操作步骤
网页设计1．Dreamweaver 8 编辑界面Dreamweaver 8 包含有一个崭新的、简洁高效的设计开发界面，新式的页面布局，开放的编码环境，而且新增了众多的功能，改善了软件的易用性，无论处于设计环境还是编码环境都可以方便地生成页面。
（1）标题栏：显示网页文件标题与名称。
（2）菜单栏：包括文件、编辑、查看、插入、修改、文本、命令、站点、窗口、帮助等十个菜单项，可以完成所有操作。
（3）对象插入栏：包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮，分为常用、布局、表单、文本、HTML、应用程序、Flash元素等七组。
（4）文档工具栏：包含各种按钮，它们提供3种“文档”窗口视图（“设计”视图、“代码”视图、“拆分”视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览）。
（5）文档窗口：显示当前创建和编辑的文档，有“设计”视图、“代码”视图和“拆分”视图三种视图方式。
当“文档”窗口有一个标题栏时，标题栏显示页面标题，并在括号中显示文件的路径和文件名。
当“文档”窗口在集成工作区布局中处于最大化状态时，它没有标题栏；这种情况下，页面标题以及文件的路径和文件名显示在主工作区窗口的标题栏中。
当“文档”窗口处于最大化状态时，出现在“文档”窗口区域顶部的选项卡显示所有打开的文档的文件名；若要切换到某个文档，请单击它的选项卡。
（6）属性面板：用于设置、查看和更改所选对象或文本的各种属性。
每种对象都具有不同的属性。
（7）标签选择器：显示环绕当前选定内容的标签的层次结构。
单击该层次结构中的任何标签可以选择该标签及其全部内容。
（8）文件面板：可以管理文件和文件夹，能访问本地磁盘的全部文件，类似于Windows 资源管理器。
（9）面板组：是组合在一个标题下面的相关面板的集合，包括设计、代码、应用程序、历史记录、框架等面板。
单击组名称左侧的展开箭头可以展开相应面板。
2．课程网站主页的创建下面以制作《现代教育技术》课程网站为例，介绍Dreamweaver的基本操作。
dreamweaver的基本使用
Dreamweaver的基本使用介绍Dreamweaver是一种强大的网页开发工具，它提供了各种功能和工具，使开发者能够更轻松地设计、编写和管理网站。
本文将介绍Dreamweaver的基本使用方法，帮助初学者快速上手使用这个工具。
安装首先，您需要从Adobe官方网站下载并安装Dreamweaver。
安装过程与其他软件的安装类似，按照指示进行操作即可。
一旦安装完成，您就可以开始使用Dreamweaver了。
创建新项目在打开Dreamweaver后，您将看到一个欢迎界面。
要创建一个新项目，请按照以下步骤操作： 1. 点击左上角的“文件”菜单。
2. 选择“新建”。
3. 在弹出窗口中，选择“网站”选项。
4. 输入项目名称和保存位置。
5. 点击“下一步”按钮。
6. 选择您要使用的起始文件夹的类型（HTML、PHP等）。
7. 点击“完成”按钮。
现在，您已经成功创建了一个新的Dreamweaver项目。
编辑网页在Dreamweaver中，您可以使用所见即所得（WYSIWYG）编辑器来设计和编辑网页。
以下是一些基本的网页编辑功能和工具： - 工具栏：位于顶部的工具栏提供了常用的编辑和设计工具，例如选择、文本样式、图像插入等。
- 代码视图：如果您更喜欢直接编辑HTML代码，可以切换到代码视图。
在代码视图中，您可以手动编辑HTML和CSS代码。
- 面板：Dreamweaver提供了各种面板，用于管理项目文件、调整页面属性以及查看代码的相关提示和错误信息。
- 切分视图：您可以将编辑界面分为多个窗格，以同时查看设计视图和代码视图。
管理项目文件在Dreamweaver中管理项目文件非常容易。
您可以使用文件管理器面板浏览项目文件夹和文件，还可以执行一些常见的文件操作，如创建新文件、重命名和删除文件等。
预览和测试在您完成网页设计后，可以使用Dreamweaver的预览功能来查看网页的外观和布局。
点击工具栏上的“预览”按钮，Dreamweaver将在内置浏览器中打开您的网页。
Dreamweaver CS6实例教程(第3版) (1)
不同风格的界面
伸缩自如的功能面板 多文档的编辑界面 新颖的“插入”面板 更完整的CSS功能
1.1.1 友善的开始页面
启动Dreamweaver CS6后首先看到的画面是开始页面，供用户选择新建文件的类 型，或打开已有的文档等。 老用户如果不太习惯开始页面，可选择“编辑 > 首选参数”命令，或按Ctrl+U 组合键，弹出“首选参数”对话框，取消选择“显示欢迎屏幕”复选框。单击“确定” 按钮完成设置。当用户再次启动Dreamweaver CS6后，将不再显示开始页面。
1.3.2 移动文件和文件夹
移动文件名或文件夹名称的操作步骤如下。
（1）选择“窗口 > 文件”命令，弹出“文件”面板，在其中选择
要移动的文件或文件夹。 （2）通过以下几种方法移动文件或文件夹。 复制该文件或文件夹，然后粘贴在新位置。 将该文件或文件夹直接拖曳到新位置。 （3）“文件”面板会自动刷新，这样就可以看到该文件或文件夹
新颖的“插入”面板
1.1.6 更完整的CSS功能
传统的HTML所提供的样式及排版功能非常有限，因此，复杂的网页 版面主要靠CSS样式来实现。而CSS样式表的功能较多，语法比较复杂， 需要用一个很好的工具软件有条不紊地整理复杂的CSS源代码，并适时 地提供辅助说明。Dreamweaver CS6就提供了这样方便有效的CSS功能。
掌握Dreamweaver CS6的工作界面 掌握站点管理器、创建文件夹、定义新 站点、创建和保存网页
掌握重命名、移动、删除文件和文件夹
掌握站点的打开、编辑、复制、删除、 导出和导入
掌握关键字、作者和版权信息、刷新时
间、描述信息等其他文件头的设置
1.1 Dreamweaver CS6 的工作界面
网页设计掌握AdobeDreamweaver的基本使用方法
网页设计掌握AdobeDreamweaver的基本使用方法Adobe Dreamweaver是一款功能强大的网页设计工具，许多网页设计师都会使用它来创建和编辑网页。
本文将为你详细介绍Adobe Dreamweaver的基本使用方法，帮助你掌握这一工具。
一、安装和启动Dreamweaver首先，你需要从官方网站下载并安装Dreamweaver软件。
安装完成后，双击桌面图标或在开始菜单中找到Dreamweaver的快捷方式，点击启动软件。
二、创建新网页项目在Dreamweaver的主界面中，你可以选择新建一个网页项目。
点击菜单中的“文件”选项，然后选择“新建”来创建一个新的网页项目。
在弹出的窗口中，你可以选择不同的项目类型和模板，根据需要进行选择。
三、编辑网页内容在Dreamweaver的编辑界面中，你可以通过直接输入文本、插入图片和链接等来编辑网页内容。
使用工具栏上的各种工具，可以轻松地排版和布局。
你还可以使用CSS样式表来设置文本样式和页面布局。
四、插入多媒体内容除了文本和图片外，Dreamweaver还支持插入多媒体内容，如音频和视频。
通过点击菜单中的“插入”选项，你可以选择插入音频或视频文件，并对其进行设置和调整。
五、设置页面属性在Dreamweaver中，你可以通过点击菜单中的“属性”选项来设置页面属性。
在页面属性窗口中，你可以设置页面的标题、文件名、meta标签等信息，以及页面的背景颜色和背景图片等。
六、预览和测试网页在编辑完成后，你可以通过点击菜单中的“文件”选项，选择“预览在浏览器中”来预览你的网页。
这样可以确保你的网页在不同浏览器中的兼容性。
你还可以通过点击菜单中的“文件”选项，选择“检查链接”来检查网页中的链接是否正常。
七、保存和发布网页编辑完成后，记得及时保存你的网页。
点击菜单中的“文件”选项，选择“保存”来保存你的网页。
如果你想将网页发布到互联网上，可以通过点击菜单中的“文件”选项，选择“上传到服务器”来上传你的网页文件。
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”选项卡，在其中单击水平线 按钮即可添加水平线。初始绘制旳水平线旳格式往往 不能满足实际需要，此时可经过属性面板对其进行修 改。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页设计1．Dreamweaver 8 编辑界面Dreamweaver 8 包含有一个崭新的、简洁高效的设计开发界面，新式的页面布局，开放的编码环境，而且新增了众多的功能，改善了软件的易用性，无论处于设计环境还是编码环境都可以方便地生成页面。
（1）标题栏：显示网页文件标题与名称。
（2）菜单栏：包括文件、编辑、查看、插入、修改、文本、命令、站点、窗口、帮助等十个菜单项，可以完成所有操作。
（3）对象插入栏：包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮，分为常用、布局、表单、文本、HTML、应用程序、Flash元素等七组。
（4）文档工具栏：包含各种按钮，它们提供3种“文档”窗口视图（“设计”视图、“代码”视图、“拆分”视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览）。
（5）文档窗口：显示当前创建和编辑的文档，有“设计”视图、“代码”视图和“拆分”视图三种视图方式。
当“文档”窗口有一个标题栏时，标题栏显示页面标题，并在括号中显示文件的路径和文件名。
当“文档”窗口在集成工作区布局中处于最大化状态时，它没有标题栏；这种情况下，页面标题以及文件的路径和文件名显示在主工作区窗口的标题栏中。
当“文档”窗口处于最大化状态时，出现在“文档”窗口区域顶部的选项卡显示所有打开的文档的文件名；若要切换到某个文档，请单击它的选项卡。
（6）属性面板：用于设置、查看和更改所选对象或文本的各种属性。
每种对象都具有不同的属性。
（7）标签选择器：显示环绕当前选定内容的标签的层次结构。
单击该层次结构中的任何标签可以选择该标签及其全部内容。
（8）文件面板：可以管理文件和文件夹，能访问本地磁盘的全部文件，类似于Windows 资源管理器。
（9）面板组：是组合在一个标题下面的相关面板的集合，包括设计、代码、应用程序、历史记录、框架等面板。
单击组名称左侧的展开箭头可以展开相应面板。
2．课程网站主页的创建下面以制作《现代教育技术》课程网站为例，介绍Dreamweaver的基本操作。
（1）定义本地站点开始用Dreamweaver制作网页时，首先要定义一个本地站点。
作为一个网站，里面有很多网页文件、图片，甚至Flash动画等，如果不进行管理归档就无法方便地进行网页发布。
定义本地站点，就是在硬盘上建立一个目录，将所有的网页和相关的文件都放在里面，以便进行网页的制作和管理。
①在D盘根目录下新建一个文件夹，命名为“myweb”，这个文件夹将作为网站的站点文件夹，以后所有的网页文件、素材都放在这个文件夹下。
②选择“站点/新建站点”命令（或“站点/站点管理”命令，单击“新建”按钮），弹出“定义站点”向导（图4-1-3所示），输入站点的名字“现代教育技术”，单击“下一步”；图4-1-3 定义本地站点③选择“否，不想使用服务器技术”；④在文件存储位置文本框中，设置文件存放路径：单击输入框右侧的文件夹图标，找到刚才在D盘新建的myweb文件夹，单击“选择”按钮。
⑤“如何连接到远程服务器”选择“无”；⑥单击“完成”按钮，站点的名字就出现在站点管理器中，如图4-1-4所示。
图4-1-4 站点文件管理窗口（2）创建新文档选择“文件>新建”命令，出现“新建文档”对话框，如图4-1-5所示。
图4-1-5 创建新文档文档的创建有两种方式，一是通过“常规”选项卡直接创建，二是通过现有模板创建新文档。
在“类别”列表中选择文档的类别，有“基本页”、“动态页”、“模板页”、“其他”、“CSS样式表”或“框架集”等；然后从右侧的列表中选择要创建的文档的类型。
选择“基本页/HTML”，单击“创建”按钮创建一个HTML页面。
新文档在“文档”窗口中打开，选择“文件/保存”命令，将该文档保存为index.html。
（3）页面属性的设置①设置标题。
在“文档”工具栏的“标题”文本框中输入标题，当用户浏览页面时，页面标题会在浏览器标题栏显示，可以帮助了解页面中的内容（图4-1-6）。
图4-1-6 设置页面标题②设置背景图片或颜色。
选择菜单“修改>页面属性”命令或单击属性面板上的“页面属性”按钮，弹出“页面属性”对话框（图4-1-7）。
选择“外观”分类，单击“背景图像”按钮给页面设置背景图像，从弹出的对话框中选择事先做好的背景图；“重复”用来设置背景图像在页面上的显示方式，包括：不重复、重复、横向重复、纵向重复，默认为图像在页面内重复显示，确定后可以看到页面背景。
图4-1-7 设置页面背景颜色也可以单击“背景颜色”按钮，在调色板中选择一种颜色作为页面背景颜色。
③设置页面边距。
页面中的内容和浏览器边框之间存在一定的默认距离，打开图4-1-7所示的页面属性对话框，分别将页面左边距、上边距设为0像素，使页面内容靠浏览器的顶边和左边对齐。
④设置背景音乐。
首先找一个mid格式的背景音乐文件，拷贝到站点文件夹myweb下的sound子文件夹。
在标签下面的“文档”工具栏中点一下“拆分”标签，窗口分成两部分，上边是代码，下边是文档；在代码窗口中，找到<body>标签，在它后面点一下鼠标，然后按一下回车键插入一个空行，切换到英文输入法状态，输入代码：<bgsound src="sound/ailisi.mid" loop="-1">src表示背景音乐路径及文件名，loop值设为-1表示无限次循环播放。
保存文件，按下F12快捷键或在文档工具栏右侧点击预览按钮，选择“预览在IExplore 6.0”命令就可以看到页面效果，单击浏览器工具栏上的停止按钮可以使音乐停止播放，点刷新重新播放。
（4）文本的输入与编辑要向Dreamweaver文档添加文本，可以直接在Dreamweaver文档窗口中键入文本，也可以从word文件或其他文本文件中复制，还可以直接从其他文档导入文本。
对文本的编辑，可以选中要编辑的文字后在“属性面板”中对文字进行相应设置，包括格式、字体、大小、颜色、对齐方式等。
操作步骤如下：在页面中输入文字“现代教育技术”，用鼠标选中后，属性面板中显示的是文字的属性。
在“字体大小”中选择字号或者直接输入一个数值，在此输入45，单位为“像素”，如图4-1-8：图4-1-8 文字属性面板在属性面板中，单击在调色板中选择蓝颜色，改变字体颜色。
单击按钮，将文字加粗显示。
单击按钮，使文字倾斜。
单击按钮，使文字居中显示。
字体类型采用的是默认字体，一般为宋体。
单击右侧下拉按钮，在下拉列表中显示的都是英文字体，要设置其他字体需要编辑字体列表。
单击列表中最后一项“编辑字体列表”，弹出“字体列表”对话框，如图4-1-9所示：图4-1-9 编辑字体列表对话框在“可用字体”中选择“隶书”，单击按钮，将选中的字体添加到“选择的字体”框中。
如果要再添加第二种字体，先单击再选择字体。
添加完后，单击“确定”按钮，此时所添加的字体出现在属性面板的选择字体下拉列表中。
（5）插入水平线在文字“现代教育技术”后，按下回车键换行，下方插入一条水平线，使标题文字和内容分开。
在“插入”工具栏中，单击“常用”右侧按钮，选择“HTML”选项，选择“水平线”按钮，就可以在光标位置插入一条水平线（或者选择菜单命令“插入>HTML>水平线”亦可）。
选中水平线，在属性面板中可以修改水平线的宽度、高度、对齐方式及阴影设置。
阴影表示水平线是空心的，去掉后则为实心。
要改变水平线颜色，则需要单击代码视图按钮，在代码中找到水平线标记<hr>，在其后添加color属性，如：<hr color=”green”>，Dreamweaver中不能马上看到设置的颜色效果，需要按下F12键在浏览器中观看。
按照同样的方法，在页面中再插入一条水平线，宽度、高度、颜色和上面水平线设置为相同，并去掉阴影。
在第二条水平线下方，输入版权信息“版权所有曲阜师范大学信息技术与传播学院”。
在属性面板中，设置文字居中对齐。
（6）设置滚动字幕在Dreamweaver中设置滚动字幕，需要在代码视图中手动书写代码。
将光标放在第一条水平下方，然后单击代码视图按钮进入代码视图，输入代码<marquee></marquee>，在二者之间输入滚动的文字，如：<marquee>欢迎您光临《现代教育技术》课程网站</marquee>按下F12键预览页面，即可看到文字在页面中自右向左滚动。
（7）使用表格进行内容排版表格在网页设计中有两种作用：数据存放和页面内容排版。
在使用表格排版时，首先确定页面内各个区域插入的内容及所占的区域大小，再用表格进行区域划分，然后在相应单元格中插入内容，如图4-1-10中所示课程首页效果。
图 4-1-10 课程首页预览效果为了实现页面中的效果，下面在滚动字幕下方插入一个表格用来存放图片和文字，步骤如下：选择“插入/表格”命令或选择“常用”插入栏中的插入表格按钮，弹出表格对话框，如图4-1-11所示。
输入行数2，列数2，宽度600像素，边框粗细、单元格边距、间距都设为0像素。
图4-1-11表格对话框选中表格，可以在属性面板中对表格属性进行设置，包括行数、列数、间距、边框颜色、背景等，如图4-1-12。
图4-1-12 表格属性将鼠标放在表格的第一行左侧，出现时单击鼠标，此时第一行单元格被选中，在表格内单击鼠标右键，弹出菜单，选择“表格/合并单元格”命令，将第一行两个单元格合并为一个，如图4-1-13所示。
图4-1-13 右键菜单“表格”在合并后的单元格中输入“课程简介”、“课程大纲”、“教师队伍”、“电子讲义”、“教学录像”等栏目，使文字居中显示，并加粗，效果如图4-1-10所示。
（8）图像的插入与编辑一个页面光有文本是无法吸引人的，插入一幅图片可以使页面更加生动，图文并茂。
Dreamweaver中常用的的图片格式有.gif、.jpg、.png。
为了保持良好的制作习惯，一般在站点文件夹D:\myweb下建立一个名为“images”的文件夹，将网页中需要的图片都放在这个文件夹下（图4-1-14）。
图4-1-14 文件面板将光标置于表格第二行的左侧单元格，选择菜单“插入/图像”命令或单击“常用”插入栏中的图像按钮，在弹出的对话框中选定图片，“确定”后图片被插入到单元格中。
选中图片，在属性面板中可以对图片的宽度、高度、对齐方式等进行设置（图4-1-15）。
图4-1-15 图像属性设置选中图像后，四周出现黑色小方框表示的控制点，鼠标放在控制点上变成双向箭头，将图像调整到合适大小。
（9）换行和空格图像设置好后，在表格第二行的右侧单元格中输入一段文字，如果是中文，到行末会自动换行；如果是英文，则不会自动换行，可以按下Enter键或Shift+Enter键换行。