(完整版)Dreamweaver实例教学(30例)
Dreamweaver CS3综合实例
感受精彩——Dreamweaver CS3综合实例内容提要：本文主要介绍一个公司网页和一个科技公司网站的创建过程，目的是让读者能够更深入地了解网站的制作过程和方法，使读者进一步巩固使用Dreamweaver CS3 创建网站的基本方法和步骤，并能独立制作出简单的网站。
关键字：公司网页制作、网站制作引言：Dreamweaver CS3 是Adobe 公司推出的网页制作利器之一，其强大的功能和友好的操作界面，受到越来越多的网页设计师的青睐。
随着互联网信息时代的发展，网络已经成为人们生活中不可缺少的一部分。
利用网络，我们可以进行网上学习、网上购物、网上娱乐。
越来越多的公司和企业都拥有自己的网站，作为他们企业形象和产品的宣传平台。
正文：1 公司网页制作本实例通过Fireworks CS3 和Dreamweaver CS3 相结合完成，效果如图1 所示。
图 1其操作步骤如下：（1）用Fireworks CS3 制作一个网页图片，如图2 所示。
（2）使用切片工具，对图片进行切片，如图 3 所示。
图 3（3）单击“→ ”命令，打开“导出”对话框，将切割后的图片导出。
在“文件名”文本框中输入需要导出的 HTML 文件名，如 fwIndex.html ，在“导出”下拉列表中选 择“HTML 和图像”，在“切片”下拉列表中选择“导出切片”，并且选中“包括无切片区域”和“将图像放入子文件夹”复选框，如图 4 所示。
单击按钮，将切割后的图片导出。
（4）用Dreamweaver CS3 打开fwIndex.html，一个网页的基本架构已展现出来，如图 5 所示。
图 5→”命令，打开“ CSS 样式”面板，如（5）为文档设置样式表。
单击“图 6 所示。
（6）单击“CSS 样式”面板中的按钮，弹出如图7 所示的对话框。
图 6 图7 （7）进行相关的设置，单击按钮，弹出“保存样式表文件为”对话框，在“文件名”文本框中输入样式表名称，如“Style”，如图8 所示。
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(30课时)
Dreamweaver（3０课时）第一讲基本界面、基本工具的使用Dreamweaver是制作网页的工具，我们平时上网看到的各个网站的网页都是用Dreamweaver编辑的，然后再加入一些动态语句。
这些网页都是由Html语言编写生成，而我们在使用Dreamweaver编辑网页的同时，这个软件就已经自动生成这种语言了。
首先，我们先来说说最简单的Html语言。
Html语言Html语言有自己特有的格式：<html><head><title>标题</title></head><body>正文内容</body></html>。
这就是最基本的格式了，其中<html>...</html>是该语言的基本格式，所有的内容都包含在它们之间，<head>...</head>部分是头的部分，主要是放置标题，而标题就放在<title>...</title>之间，<body>...</body>之间是编辑正文的地方，所有的内容都放在这里。
至于其中的一些语句，我们在这里就不再多提。
注意事项Dreamweaver中是有一个相对路径的概念的，我们做网页过程中用到的所有图片和所有的网页文件，还有声音、SWF等等的文件都要放在一个总的文件夹里，而这个文件夹就是我们所说的站点，Dreamweaver中可以建立一个站点，但是现在来讲是非常的抽象的，所以我们先用前面的办法代替，后面再来讲解有关站点的概念。
另外，我们在做网页文件的时候要记得，打开软件后，就先把我们要做的网页文件保存到事先建好的站点里，这样是为了避免你插入图片时出现错误。
最后，站点里的所有文件的名称都不能为汉语名，必须为英文名或者是数字命名的。
介绍软件界面打开Dreamweaver软件，我们会发现它的界面和我们前面学过的软件有些不同。
Dreamweaver实例教学(11-20)
第十二课Dreamweaver MX2004 实例教学（实例11--实例20）实例11 创建交换图 (1)实例12 跳转菜单 (4)实例13 插入FLASH文本 (6)实例14 插入FLASH按钮 (8)实例15 插入FLASH动画 (10)实例16 插入视频 (12)实例17 显示弹出式菜单 (14)实例18 框架的使用 (17)实例19 创建网站相册集 (20)实例20 插入按钮 (22)实例11 创建交换图制作”创建交换图”效果的网页.如右图所示.本例主要讲述交换图的创建过程,用来交换的图必须和原图大小相同. ～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～创作步骤(1)启动Dreamweaver MX 软件.(2)按上例创建一个名为”创建交换图”的网页,如图1.8.1所示.图1.11.1 ”创建交换图”的网页建立(3) 选择插入(I)→表格(T)…Ctrl + Alt命令,出现表格对话框,如图1.11.2所示,(4) 在表格对话框中,输入行数和列数都为1.按确定插入网页中,并调整表格的大小,使其居中,效果如呼1.11.3所示.(1)单击表格里面,选择插入(I)→图像对象(G)→鼠标经过图像(R)命令,出现对话框.如图1.11.4所示.(2)在后的文本输入原始图像的路径,或单击选择一个图片为原始图像.图1.11.2 表格对话框图1.11.3 插入表格后的网页图1.11.4 插入鼠标经过图像的对话框(3)同样为选择一个图片作为鼠标经过的图像.最后按确定.效果如图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 创建网站相册对话框实例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 观看在浏览器中的效果。
Dreamweaver30简明教程
Dreamweaver是Macromedia公司推出的主页编辑工具。
它是一个所见即所得网页编辑器，支持最新的DHTML和CSS标准。
它采用了多种先进技术，能够快速高效地创建极具表现力和动感效果的网页，使网页创作过程变得简单无比。
值得称道的是，Dw不仅提供了强大的网页编辑功能，而且提供了完善的站点管理机制，可以说，它是一个集网页创作和站点管理两大利器于一身的超重量级的创作工具。
Dw提供了强大的设计工具，在不用书写一行代码的情况下，就能够快速创建各种极具动态HTML特性的网页，例如动画和分层等；利用Dw的目标浏览器检查特性，可以创建兼容性极好的网页，以适用于各种平台和各种浏览器；利用Dw的RHTML 技术，用户可以精确控制Dw生产的网页源代码，例如，在可视编辑器中进行编辑时，可以在HTML检视器中同步地看到Dw到底为您生成了什么样的源代码，从而杜绝了盲人摸象的弊病。
从Dreamweaver 2开始，它就已经成为专业网页创作者事实上的标准工具。
为了方便查阅，列出所有新功能如下。
◎快速标记编辑器◎“ HTML styles ”面板◎改进的“ HTML Source inspector ”◎增强的第三方标记支持◎添加、删除 Netscape Resize Fix ◎同步文件◎显示和编辑 Flash 影片中的链接◎字符类对象◎框架类对象◎其他新增对象◎直接编辑图像地图◎设计说明◎输入和清理 word HTML ◎历史面板◎自动输入表格数据◎与 Fireworks 进一步集成◎与外部编辑工具更好结合◎增强的 MAC 兼容与跨平台能力◎可定制的选单和快捷键◎ javascript API 其他问题◎“旧”网站的问题◎内置脚本的变化◎第三方插件的问题◎页面边距快速标记编辑器增加了快速标记编辑器，在 Dreamweaver 的文档窗口就能迅速修改、增加、删除 HTML 代码，不必开关“ HTML Source inspector ”，这是 3.0 版提供的一种轻松高效的编辑和检查代码的方式。
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软件应用案例教程1
三、案例案例1：软件介绍操作内容：使用Dreamweaver网页制作软件，设计主题为“多媒体信息处理软件”主页文件，可作适量修改或添加，可使用表格方式进行定位，结果存盘。
操作要求：设计一个《多媒体信息处理软件》的主页，链接到下面几个网页（01.htm、02 htm、03. htm、04. htm）链接，一个网址（/）链接和一个E-MAIL（sit @）链接。
按“样图”添加适当的图文信息，并做背景图案、线条和文字格式的修饰。
其中：1、在D盘根目录下建立一个文件夹，名字为软件介绍2、所设计的主页以“Index.htm”为文件名保存在相关目录下；3、必须合理保存素材文件和设置链接方式，以保证浏览效果不因“网页”文件夹存储路径的改变而受到影响；4、被链文件中必须包含返回主页的链接；5、制作好之后，把“软件介绍“文件夹压缩成“软件介绍.rar”提交。
参考样张：图9-1软件介绍样图参考答案：1、在D盘根目录下建立一个文件夹，命名为“软件介绍”。
2、将素材中内容放入该文件夹。
3、开始→所有程序→打开Adobe DreamweaverCS4软件。
4、站点→新建站点→高级选项卡，建立软件介绍站点。
5、右键站点→新建文件→取名index.htm，双击打开。
图9-2新建文件快捷菜单6、页面属性→背景图像：选择素材中的背景图片bj.jpg7、将文本内容复制到页面，并且按照样张调整字体格式、颜色、大小（Css中可修改）。
图9-3 文本内容复制样图8、插入面板，单击水平线，右键→编辑标签（高度：4像素）→浏览器特定的（颜色：#CC9900）。
图9-4 应用按钮插入水平线图9-5 设置水平线高度对话框图9-6设置水平线颜色对话框9、插入→表格，插入1行4列的表格，边框粗细：0。
图9-7 创建表格对话框10、在4个单元格里分别插入4张素材图片（顺序依照样张）。
图9-8 插入4张图片样图11、在页面最下方输入“交流信箱”与“友情连接”，居中排列。
Dreamweaver全套教案
课题认识Dreamweaver一、学习目的了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容Dreamweaver的基本知识。
【学习步骤】1、 Dreamweaver的功能Dreamweaver可以像普通的字处理软件一样编辑Internet上以HTML格式保存的所有文件，也就是网页；它支持动态HTML，可以在网页中产生动画；还可以在网页中插入各种插件，以产生特殊效果。
Dreamweaver可用于管理站点，它像文件夹一样创建和打开站点，用不同的方式查看站点中各个网页之间的关系，调整站点的组织结构，使整个站点条理清晰。
2、 Dreamweaver的窗口（1）标题栏（2）菜单栏（3）工具栏（4）视图栏（5）文件夹列表(6)工作区3.网页工作区的三个视图方式选项它们分别是“普通”、“HTML”“预览”，它们之间的相互切换十分容易实现的。
普通视图方式是Dreamweaver对网页所见即所得编辑方式的最佳体现，在此方式下，可以像在Word中那样直接进行各种编辑操作，实现网页编辑的所有功能。
HTML视图实际上是一个文本编辑器，其中给出了普通视图方式下所件网页的HTML代码。
在这里可以用菜单命令进行复制、粘贴、删除、查找等操作。
对于HTML语言中的不同成分均用不同的颜色显示，这样比较容易区分各种语法成分。
为了在制作网页过程中能够随时查看网页的实际效果，Dreamweaver提供了预览视图方式。
4.安装dreameaver的方法安装及注册5.关闭dreameaver6.保存网页的方法3、小结课题建立一个简单的站点一、学习目的了解Dreamweaver，学会利用Dreamweaver制作网页。
二、学习内容Dreamweaver的基本知识；建立一个简单的站点；进行简单的网页编辑。
【学习步骤】1、创建空白站点。
执行菜单命令“文件”—“新建”—“站点”，就会出现8中站点向导。
出于简单，可选择“空站点”按钮，并在“指定新站点的位置”框中填入站点的位置。
Dreamweaver实训教案讲解学习
D r e a m w e a v e r实训教案实训一、创建个人网站课时：2 任务一、规划个人网站一、提出任务1．任务目标规划个人网站。
2．解决的问题通过规划个人网站了解网站主题对于网站的意义，了解网站的栏目与目录结构之间的关系及开发网站的常用工具软件。
二、任务内容1．通过互联网浏览网站，总结所浏览网站的主题类型，至少找出企业宣传、软件下载、求职招聘、专业论坛、流行时尚、互动聊天和在线销售类型的网站各一个，记录它们的网站名称填入教材p4表JYFS1-1中：根据表格内的提示，使用搜索引擎查找相关类型网站。
每组4名同学，每人负责两个主题的网站搜索。
任务二创建站点一、提出任务1．任务目标创建个人网站站点。
2. 解决的问题使用网页制作软件Dreamweaver cs5，按照个人网站的制作要求创建网站站点。
二、任务内容1．新建一个站点，名称为“pra1-1”，使用“高级”选项卡完成新建过程，保存位置为“D:\pra1-1”，其他参数保持默认即可。
2.新建一个以自己姓名命名的个人站点，该站点使用“ASP JavaScript”服务器技术,暂不设置远程信息与测试服务器，站点保存在“D:\pra1-2”文件夹中。
任务三管理站点一、提出任务1．任务目标管理个人网站站点。
2. 解决的问题通过完成本任务学习使用Dreamweaver cs5进行站点管理。
3. 本任务所涉及原有知识要点完成本任务所涉及原有知识要点有：启动Dreamweaver cs5，创建网站站点。
二、任务内容1．新建站点“pra1-5”，使用管理站点功能将其导出。
将站点导出文件通过网络或移动存储设备拷贝到其他计算机中，使用管理站点功能将其导入。
2．新建站点“pra1-3”，使用管理站点功能复制站点“pra1-3”，编辑复制的站点名称为“pra1-4”，之后删除站点“pra1-3”。
任务四创建网站目录结构一、提出任务1．任务目标创建网站目录结构。
2. 解决的问题本任务将使用“文件”面板，实现先前规划的网站目录结构，学习在本地站点建立文件和文件夹的方法，管理站点内的文件。
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网页设计制作的实例教程100例
D re am we a ve r网页设计制作的实例教程100例第一章软件简介与设置 1.课程介绍与基础知识 2.软件起始页的用法 3.界面布局与切换 4.定制工具箱 5.代码拆分与设计模式 6.定制实用界面布局7.标签选择器8.选取手形和缩放工具9.显示设置与速度统计10.属性面板与设置11.菜单命令快速上手12.网页色彩搭配13.HT ML 基础知识14.企业识别系统与W WW 第二章定义站点页面属性1.制作网站三大原则 2.定义新站点 3.文件面板基础操作 4.创建新网页与网站地图 5.创建新的链接 6.地图模式下修改文件标题7.自定义根查看链接关系8.CSS的设置一，外观设置9.CS S的设置二，链接设置10.CSS的设置三，标题设置11.CSS的设置四，跟踪图像12.基础HT ML 页面设置13.本小节HT ML基础14.名词解释，h ttp和URL 第三章文本与列表控制 1.文本与列表控制学习 2.网页标题修改多种途径 3.征文标题文字格式的设置 4.文字大小颜色与对齐 5.问题，文本中输入空格 6.段落切换与强行换行7.文本编辑基础8.从外部导入文本内容9.清理冗余代码10.列表与排序11.定义列表12.插入排版水平线第四章链接的使用 1.链接的使用学习计划 2.定义页面链接样式3.一般链接的常见形式 4.输入法建立第一个链接 5.指向法制作链接 6.快捷键拖动法创建链接7.插入法建立链接8.直接用代码建立链接9.插入标签法建立链接10.环绕标签法建立链接11.链接的修改与Em a il链接12.制作特殊的Em a il链接13.制作下载类链接14.锚链接的制作15.色彩搭配和HT ML基础第五章图像处理 1.图像处理学习计划与目标 2.用菜单插入及设置图片 3.用代码直接插入图片 4.为图片添加链接 5.为图片添加提示文本 6.用标签检查器设置图片7.用属性面板设置图片8.编辑图像热区9.调用外部程序编辑图像10.优化与裁切图像11.对图像重新取样12.调整图像亮度和对比度13.锐化图像14.插入图像占位符15.插入鼠标经过图像16.添加导航条17.基础知识与名词解释第六章添加多媒体内容 1.添加多媒体内容 2.插入F LAS H S WF文件 3.插入F LAS H按钮 4.插入F LAS H文本 5.插入F LAS H PAP ER 6.插入F LAS HVI D EO 7.插入媒体插件8.插入视频文件9.插入F LAS H元素10.插入注释11.插入时间第七章表格基础知识 1.表格基础学习计划与目标 2.在页面中插入表格 3.设置表格页眉及辅助功能 4.在表格中添加内容5.如何导入和导出表格数据 6.导入Exc e l文件与导出表格7.选择表格的常用方法8.插入行或列9.嵌套表格10.表格属性设置11.行，列和单元格属性设置<I MG t it le=“友情的语言，不是文字，而是意义。
Dreamweaver实例操作步骤
网页设计1．Dreamweaver 8 编辑界面Dreamweaver 8 包含有一个崭新的、简洁高效的设计开发界面，新式的页面布局，开放的编码环境，而且新增了众多的功能，改善了软件的易用性，无论处于设计环境还是编码环境都可以方便地生成页面。
（1）标题栏：显示网页文件标题与名称。
（2）菜单栏：包括文件、编辑、查看、插入、修改、文本、命令、站点、窗口、帮助等十个菜单项，可以完成所有操作。
（3）对象插入栏：包含用于将各种类型的“对象”（如图像、表格和层）插入到文档中的按钮，分为常用、布局、表单、文本、HTML、应用程序、Flash元素等七组。
（4）文档工具栏：包含各种按钮，它们提供3种“文档”窗口视图（“设计”视图、“代码”视图、“拆分”视图）的选项、各种查看选项和一些常用操作（如在浏览器中预览）。
（5）文档窗口：显示当前创建和编辑的文档，有“设计”视图、“代码”视图和“拆分”视图三种视图方式。
当“文档”窗口有一个标题栏时，标题栏显示页面标题，并在括号中显示文件的路径和文件名。
当“文档”窗口在集成工作区布局中处于最大化状态时，它没有标题栏；这种情况下，页面标题以及文件的路径和文件名显示在主工作区窗口的标题栏中。
当“文档”窗口处于最大化状态时，出现在“文档”窗口区域顶部的选项卡显示所有打开的文档的文件名；若要切换到某个文档，请单击它的选项卡。
（6）属性面板：用于设置、查看和更改所选对象或文本的各种属性。
每种对象都具有不同的属性。
（7）标签选择器：显示环绕当前选定内容的标签的层次结构。
单击该层次结构中的任何标签可以选择该标签及其全部内容。
（8）文件面板：可以管理文件和文件夹，能访问本地磁盘的全部文件，类似于Windows 资源管理器。
（9）面板组：是组合在一个标题下面的相关面板的集合，包括设计、代码、应用程序、历史记录、框架等面板。
单击组名称左侧的展开箭头可以展开相应面板。
2．课程网站主页的创建下面以制作《现代教育技术》课程网站为例，介绍Dreamweaver的基本操作。
Dreamweaver_CS3实用教程完整版
1.1.1 网页和网站的概念
网页(web)，也就是网站上的某一个页面，它是一个纯文本文件，是向浏览 者传递信息的载体，以超文本和超媒体为技术，采用HTML、CSS、XML等语 言来描述组成页面的各种元素，包括文字、图像、音乐等，并通过客户端浏览 器进行解析，从而向浏览者呈现网页的各种内容。 网站(Website)，它是指在互联网上，根据一定的规则，使用HTML等工具 制作的用于展示特定内容的相关网页集合，它建立在网络基础之上，以计算机、 网络和通信技术为依托，通过一台或多台计算机向访问者提供服务。平时所说 的访问某格站点，实际上访问的是提供这种服务的一台或多台计算机。
第1章 网站的设计与制作简述
Dreamweaver CS3是一款专业的网页制作软件，它具有简单易学、操作 方便以及适用于网络等优点。通过对Dreamweaver CS3的学习，即使没有任 何网页制作经验的用户，也能很容易上手，制作出精美的网页。本章主要介绍 了网页的基本概念、网页设计的构思和设计流程，以及Dreamweaver CS3的 新增特色功能和工作环境等。
1.2.2 网页的设计构思
在制作网页之前，首先要进行网页的设计与构思，主要包括网页的主题、 网页的命名、网站标志、色彩搭配和字体等要素。
1.2.3 网页的布局
网页布局的好坏是决定网页美观与否的一个重要方面。通过合理的布局， 可以将页面中的文字、图像等内容完美、直观地展现给访问者，同时合理安排 网页空间，优化网页的页面效果和下载速度。反之，如果页面布局不合理，网 页在浏览器中的显示将十分糟糕，页面中的各个元素显示效果可能会重叠或丢 失。因此，在对网页进行布局设计时，应遵循对称平衡、异常平衡、对比、凝 视和空白等原则。常见的网页布局形式包括：型布局、T型布局、“三”型布 局、对比布局和POP布局等。
Dreamweaver全套教案
Dreamweaver全套教案1000字（注：以下内容均针对Dreamweaver CC 2018版本）一、基础操作1.1 菜单栏介绍在Dreamweaver的菜单栏中，可以找到各个功能的入口，包括创建新页面、导入和导出文件、设置文档属性和网站管理等。
1.2 工具栏介绍工具栏位于菜单栏下方，包含了在网页制作过程中常用的各种工具，如移动工具、画笔工具、文字工具等。
1.3 新建HTML文件打开Dreamweaver软件，在菜单栏中选择“文件”→“新建”，选择“网页”，然后选择“HTML”。
1.4 网格工具网格工具可以帮助我们更好地布局元素。
在工具栏中选择“网格工具”，然后在页面上选择需要添加网格的区域。
我们也可以通过Ctrl + K调出网格设置窗口。
1.5 画布缩放在页面底部的缩放控制按钮中可以进行画布的缩放设置。
1.6 元素选择在工具栏中选择选择工具，然后直接单击元素，即可选中该元素。
1.7 编辑源代码在菜单栏中选择“视图”→“源代码”，即可进入源代码编辑模式。
二、HTML基础2.1 创建标题和段落HTML中通过<h1>到<h6>标签创建标题，通过<p>标签创建段落。
2.2 创建链接HTML中通过<a>标签创建链接，其中href属性指定链接的目标地址。
2.3 插入图片HTML中通过<img>标签插入图片，其中src属性指定图片的地址，alt属性指定图片的替代文本。
2.4 创建表格HTML中通过<table>标签创建表格，通过<tr>标签创建行，通过<th>标签创建表格头，通过<td>标签创建单元格。
2.5 列表HTML中通过<ul>和<ol>标签创建无序和有序列表，通过<li>标签创建列表项。
2.6 表单HTML中通过<form>标签创建表单，通过<input>标签创建输入框，通过<select>标签创建下拉列表，通过<textarea>标签创建文本域。
Dreamweaver全套教案
实现用户注册登录功能案例
3. 用户提交表单后，将数据发送到后 端服务器。
5. 验证通过后，为用户生成会话（ session），并将用户信息存储到会 话中。
4. 后端服务器接收数据并进行服务器 端验证，如检查用户名和密码是否匹 配数据库中的记录。
6. 返回登录成功提示给用户，并将用 户重定向到应用的主界面或其他指定 页面。
常见行为特效案例展示
弹出窗口 通过JavaScript行为实现弹出窗 口效果，可以在用户点击按钮或 链接时弹出一个新的窗口或对话 框。
动态内容加载 使用JavaScript行为和Ajax技术 实现动态内容加载效果，可以在 不刷新页面的情况下加载新的内 容或数据。
图片轮播 使用JavaScript行为和CSS样式实 现图片轮播效果，可以展示多张 图片并自动或手动切换。
弹性布局
响应式图像
使用CSS弹性盒模型（Flexbox），可以灵 活地控制元素的排列和对齐方式，实现响 应式布局。
通过设置图像的max-width属性为100%， 可以使图像在不同屏幕尺寸下自适应宽度 ，保持清晰度。
05 CSS样式应用与 美化网页
CSS样式简介及作用
CSS样式定义
CSS（层叠样式表）是一种用于描述HTML或XML（包括SVG、MathML等派生语言）文档样式的计算机语言。 它被设计出来主要是为了分离文档的内容（用HTML或其他标记语言写的）和文档的样式（如怎么展示在屏幕上 ，怎么通过语音读出，怎么在打印机或其他媒体上打印出来）。
特殊字符处理
插入特殊字符和空格，以及处 理换行符和制表符等。
图像插入与编辑方法
图像插入
将图像文件插入到网页中，并 设置图像属性，如大小、边距
、对齐方式等。
Dreamweaver教程全集
Dreamweaver 8基础教程一、上网基础学习做网页之前，我们首先要知道网页是什么，一般来说网页是用在网络上的htm文件，通过网页可以很方便的实现网络资源的共享，上网分为三个步骤。
1、输入正确的网址1）在桌面上找到Internet Explorer，双击打开，出现浏览器窗口，一般会自动进入微软的网站。
2）找到地址栏一个长白条，里面有一串英文字母，后头是“转到”按钮，这就是地址栏。
3）在地址栏里头点一下鼠标左键，然后删除里面的字符，输入自己的的网址，网址一般是英文的以http打头，然后是一个冒号和两个斜杠（双斜杠），然后是www（三W），后面跟一个点，最后一般是com结尾，例如输入输完检查一下，没问题就按一下回车键，或者点一下后边的“转到”按钮，这时窗口右上角的小图标就开始运动，也就是正在搜索。
4)一切正常就会进入到百度搜索的首页。
2、找超级链接网页上的内容是一页一页的，一般都藏在一个叫超链接的后面，所以第二步就是要找到超链接。
超链接有三个特点，首先文字的颜色是蓝色的，非常醒目，其次文字下面有一条下划线，便于查找，最关键的是当鼠标移过去以后，指针会变成手形，这一点很重要。
找到超链接以后就可以鼠标左键单击，进入相应的内容了。
3、后退按钮看完一页后如何返回呢？在窗口的左上角有一个后退按钮，点一下就可以回到上一页，这样就不会迷失方向了。
二、启动程序安装好以后，我们就可以使用它来制作自己的网页，这一节我们来学习如何运行Dreamweaver。
1、新建文件夹在D:盘中给自己新建一个文件夹，文件名用自己名字的拼音字母，数量小于8个，以后自己的网页都存这里头。
其他文件夹也可以，要求基本是名称是英文，尽量不要用空格汉字等那些非标准字符。
2、启动Dreamweaver1）点击“开始－所有程序－Macromedia－Macromedia Dreamweaver 8，2）第一次运行会出来一个选择面板，选默认的“设计”，点“确定”即可。
网页设计Dreamweaver教案
网页设计Dreamweaver教案第一章：Dreamweaver简介1.1 课程目标了解Dreamweaver的发展历程和版本更新掌握Dreamweaver的基本功能和操作界面熟悉Dreamweaver在网页设计中的应用场景1.2 教学内容Dreamweaver的起源和发展历程Dreamweaver的版本更新及特点Dreamweaver的操作界面及功能介绍Dreamweaver在网页设计中的应用案例1.3 教学方法讲授与示范相结合，让学生了解Dreamweaver的发展历程和版本更新实践操作，让学生掌握Dreamweaver的基本功能和操作界面案例分析，让学生熟悉Dreamweaver在网页设计中的应用场景1.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例1.5 教学评估课后作业：让学生制作一个简单的网页，巩固所学内容课堂讨论：引导学生分享自己在网页设计中使用Dreamweaver的经验和心得第二章：创建和管理网页2.1 课程目标掌握Dreamweaver的网页创建和管理功能熟悉网页编辑区的基本操作了解网页、描述和关键词的设置方法2.2 教学内容Dreamweaver的网页创建和管理功能介绍网页编辑区的基本操作网页、描述和关键词的设置方法2.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver的网页创建和管理功能实践操作，让学生熟悉网页编辑区的基本操作案例演示，让学生了解网页、描述和关键词的设置方法2.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例2.5 教学评估课后作业：让学生创建一个简单的网页，并设置网页、描述和关键词课堂讨论：引导学生分享自己在网页设计中关于网页、描述和关键词设置的经验和心得第三章：编辑和排版文本3.1 课程目标掌握Dreamweaver中文本的编辑和排版功能熟悉字体、颜色、大小和样式的设置方法了解文本对齐、行间距和段落格式的设置方法3.2 教学内容Dreamweaver中文本的编辑和排版功能介绍字体、颜色、大小和样式的设置方法文本对齐、行间距和段落格式的设置方法3.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中文本的编辑和排版功能实践操作，让学生熟悉字体、颜色、大小和样式的设置方法案例演示，让学生了解文本对齐、行间距和段落格式的设置方法3.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例3.5 教学评估课后作业：让学生编辑和排版一个文本内容丰富的网页课堂讨论：引导学生分享自己在网页设计中关于文本编辑和排版的经验和心得第四章：添加图像和媒体元素4.1 课程目标掌握Dreamweaver中图像和媒体元素的操作功能熟悉图像和媒体元素的插入、编辑和格式设置方法了解图像和媒体元素在网页设计中的应用场景4.2 教学内容Dreamweaver中图像和媒体元素的操作功能介绍图像和媒体元素的插入、编辑和格式设置方法图像和媒体元素在网页设计中的应用场景4.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中图像和媒体元素的操作功能实践操作，让学生熟悉图像和媒体元素的插入、编辑和格式设置方法案例分析，让学生了解图像和媒体元素在网页设计中的应用场景4.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例4.5 教学评估课后作业：让学生添加图像和媒体元素到一个网页中，提升网页视觉效果课堂讨论：引导学生分享自己在网页设计中关于图像和媒体元素应用的经验和心得第五章：创建和应用超5.1 课程目标掌握Dreamweaver中超的创建和应用功能熟悉超的类型和创建方法了解超的目标设置和命名规则5.2 教学内容-第六章：表格和布局6.1 课程目标掌握Dreamweaver中表格的创建和编辑功能熟悉表格的布局和样式设置方法了解表格在网页设计中的应用场景6.2 教学内容Dreamweaver中表格的创建和编辑功能介绍表格的布局和样式设置方法表格在网页设计中的应用场景6.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中表格的创建和编辑功能实践操作，让学生熟悉表格的布局和样式设置方法案例分析，让学生了解表格在网页设计中的应用场景6.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例6.5 教学评估课后作业：让学生创建一个表格布局的网页，展示信息列表课堂讨论：引导学生分享自己在网页设计中关于表格布局的经验和心得第七章：表单和动画7.1 课程目标掌握Dreamweaver中表单的创建和编辑功能熟悉表单元素和属性的设置方法了解动画在网页设计中的应用场景和创建方法7.2 教学内容Dreamweaver中表单的创建和编辑功能介绍表单元素和属性的设置方法动画在网页设计中的应用场景和创建方法7.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中表单的创建和编辑功能实践操作，让学生熟悉表单元素和属性的设置方法案例分析，让学生了解动画在网页设计中的应用场景和创建方法7.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例7.5 教学评估课后作业：让学生创建一个包含表单和动画的网页，实现用户互动课堂讨论：引导学生分享自己在网页设计中关于表单和动画应用的经验和心得第八章：CSS样式和模板8.1 课程目标掌握Dreamweaver中CSS样式的创建和应用功能熟悉CSS选择器和属性的设置方法了解模板在网页设计中的应用场景和创建方法8.2 教学内容Dreamweaver中CSS样式的创建和应用功能介绍CSS选择器和属性的设置方法模板在网页设计中的应用场景和创建方法8.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中CSS样式的创建和应用功能实践操作，让学生熟悉CSS选择器和属性的设置方法案例分析，让学生了解模板在网页设计中的应用场景和创建方法8.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例8.5 教学评估课后作业：让学生创建一个CSS样式和模板应用的网页，提升网页美观度课堂讨论：引导学生分享自己在网页设计中关于CSS样式和模板应用的经验和心得第九章：网站发布和管理9.1 课程目标掌握Dreamweaver中网站的发布和管理功能熟悉FTP协议和网站方法了解网站维护和优化的基本方法9.2 教学内容Dreamweaver中网站的发布和管理功能介绍FTP协议和网站方法网站维护和优化的基本方法9.3 教学方法讲授与示范相结合，让学生掌握Dreamweaver中网站的发布和管理功能实践操作，让学生熟悉FTP协议和网站方法案例分析，让学生了解网站维护和优化的基本方法9.4 教学资源PowerPoint课件Dreamweaver软件网页设计案例9.5 教学评估课后作业：让学生将所学网页发布到服务器，进行实际操作课堂讨论：引导学生分享自己在网站发布和管理中的经验和心得第十章：网页设计案例分析10.1 课程目标分析实际网页设计案例了解网页设计中的创新点和不足之处提高学生网页设计的能力和审美水平10.2 教学内容分析实际网页设计案例讨论网页设计中的创新点和不足之处提高学生网页设计的能力和审美水平10.3 教学方法讲授与示范相结合，让学生分析实际网页重点和难点解析1. 章节一和二：Dreamweaver简介和创建与管理网页重点解析：理解Dreamweaver的历史和发展，熟悉其操作界面和基本功能，以及如何有效地创建和管理网页。
《Dreamweaver网页设计》教案
《Dreamweaver网页设计》教案第一章：Dreamweaver简介1.1 课程目标：了解Dreamweaver的发展历程和功能特点掌握Dreamweaver的基本操作界面1.2 教学内容：Dreamweaver的历史和发展Dreamweaver的功能特点Dreamweaver的操作界面及基本操作1.3 教学方法：讲解与演示相结合学生实际操作练习1.4 教学资源：PowerPoint课件Dreamweaver软件1.5 教学评估：课堂问答学生操作练习情况第二章：网页制作基础2.1 课程目标：掌握HTML标签的使用学会使用Dreamweaver的代码视图2.2 教学内容：HTML标签的基本概念和使用方法Dreamweaver代码视图的操作方法常用的HTML标签及其功能2.3 教学方法：讲解与演示相结合学生实际操作练习2.4 教学资源：PowerPoint课件Dreamweaver软件2.5 教学评估：课堂问答学生操作练习情况第三章：图像和多媒体的使用3.1 课程目标：学会在网页中插入图像和多媒体文件了解图像和多媒体文件的基本属性设置3.2 教学内容：图像和多媒体文件在网页中的作用在Dreamweaver中插入图像和多媒体文件的方法图像和多媒体文件的基本属性设置3.3 教学方法：讲解与演示相结合学生实际操作练习3.4 教学资源：PowerPoint课件Dreamweaver软件图像和多媒体文件素材3.5 教学评估：课堂问答学生操作练习情况第四章：超的使用4.1 课程目标：学会创建和设置超了解超的类型及应用场景4.2 教学内容：超的概念和作用在Dreamweaver中创建和设置超的方法超的类型及应用场景4.3 教学方法：讲解与演示相结合学生实际操作练习4.4 教学资源：PowerPoint课件Dreamweaver软件超素材4.5 教学评估：课堂问答学生操作练习情况第五章：表格的使用5.1 课程目标：学会使用Dreamweaver创建和编辑表格了解表格的基本属性设置5.2 教学内容：表格在网页中的作用在Dreamweaver中创建和编辑表格的方法表格的基本属性设置5.3 教学方法：讲解与演示相结合学生实际操作练习5.4 教学资源：PowerPoint课件Dreamweaver软件表格素材5.5 教学评估：课堂问答学生操作练习情况第六章：CSS样式应用6.1 课程目标：掌握CSS样式的概念和作用学会在Dreamweaver中创建和应用CSS样式6.2 教学内容：CSS样式的基本概念Dreamweaver中的CSS面板操作创建和应用CSS样式的方法CSS选择器及属性设置6.3 教学方法：讲解与演示相结合学生实际操作练习6.4 教学资源：PowerPoint课件Dreamweaver软件CSS样式素材6.5 教学评估：课堂问答学生操作练习情况第七章：布局页面7.1 课程目标：学会使用Dreamweaver进行页面布局了解常用的页面布局方法7.2 教学内容：页面布局的基本概念使用Dreamweaver的布局工具进行页面布局常用的页面布局方法（如：固定布局、百分比布局、弹性布局等）7.3 教学方法：讲解与演示相结合学生实际操作练习7.4 教学资源：PowerPoint课件Dreamweaver软件页面布局素材7.5 教学评估：课堂问答学生操作练习情况第八章：表单的使用8.1 课程目标：学会在网页中创建和使用表单了解表单的基本属性设置8.2 教学内容：表单在网页中的作用在Dreamweaver中创建和编辑表单的方法表单的基本属性设置表单元素（如：文本框、复选框、单选按钮等）的使用8.3 教学方法：讲解与演示相结合学生实际操作练习8.4 教学资源：PowerPoint课件Dreamweaver软件表单素材8.5 教学评估：课堂问答学生操作练习情况第九章：Dreamweaver与服务器端编程9.1 课程目标：了解Dreamweaver与服务器端编程的关系学会在Dreamweaver中插入服务器端代码9.2 教学内容：服务器端编程语言（如：PHP、JavaScript等）的基本概念在Dreamweaver中插入服务器端代码的方法Dreamweaver与服务器端代码的交互方式9.3 教学方法：讲解与演示相结合学生实际操作练习9.4 教学资源：PowerPoint课件Dreamweaver软件服务器端代码素材9.5 教学评估：课堂问答学生操作练习情况第十章：综合案例实训10.1 课程目标：学会运用所学知识完成一个完整的网页设计项目提高实际操作能力和网页设计水平10.2 教学内容：网页设计项目的需求分析网页设计的基本流程综合运用所学知识完成网页设计项目10.3 教学方法：学生分组进行实际操作教师指导与解答疑问10.4 教学资源：Dreamweaver软件案例素材及设计工具10.5 教学评估：学生完成的项目成果展示重点和难点解析第一章：Dreamweaver简介1. Dreamweaver的功能特点2. Dreamweaver的操作界面及基本操作难点解析：Dreamweaver功能特点的深入理解，特别是与其它网页编辑器的区别。
Dreamweaver实例教学(21-30)
第十三课Dreamweaver MX2004 实例教学（实例21--实例30）实例21 页面配色方案 (1)实例22 CSS的使用 (4)实例23 自动格式化表格 (7)实例24 使用表格间隔图像 (10)实例25 单元格自动延伸 (13)实例26 炽热文字 (15)实例27 显示当前日期 (18)实例28 显示登陆时间 (21)实例29 状态栏中跳动的文字 (23)实例30 左右移动的图片 (26)实例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) 在<head>和</head>之间输入代码<style><!--#glowtext{filter:glow(color=red,strength=2);width:100%;}--></style><script language="JavaScript1.2">function glowit(which){if(document.all.glowtext[which].filters[0].strengh==2)document.all.glowtext[which].filters[0].strength=1elsedocument.all.glowtext[which].filters[0].strengh==2}function glowit2(which){if(document.all.glowtext.filters[0].strengh==2)document.all.glowtext.filters[0].strengh==1elsedocument.all.glowtext.filters[0].strengh==2}function startglowing(){if(document.all.glowtext&&glowtext.length){for(i=0;i<glowtext.length;i++)eval('setInterval("glowit('+i+')",150)')}else if (glowtext)setInterval("glowit2(0)",150)}if(document.all)window.onload=startglowing</script>(5) 在<body>和</body>之间输入代码:<span id="glowtext">欢迎光临本站</span>(6) 选择文件(F)→另存为(A)…Ctrl+Shift+S命令,保存文件.按快捷键F12,观看在浏览器中的效果.如图1.26.3所示.图1.26.2 切换为代码视图图1.26.3 观看在浏览器中的效果实例27 显示当前日期制作”显示当前日期”效果.如右图所示.本例主要学习为网页添加JavaScript代码显示系统当前日期。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18: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后面的文本里输入一个网站如,如图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所示.。