DW教案.docx

1、DW教案网页设计Dreamweaver CS3教案教学课题项目一：制作第一个网页教学时间年 月 日教学内容1.初步认识Dreamweaver的工作环境2.制作第一个网页教学目的1.能正确描述网页的概念2.能掌握网页的基本构成要素教学重点1.了解网页设计各步骤的主要功能2.掌握网页设计各步骤的使用，熟练掌握按照步骤设计网页。教学难点利用网页设计的步骤设计网页建议课时理论：2 实训：4教学教具多媒体教学系统机房教学方法理论：使用多媒体教学方法讲授（.PPT）；实训：学生上机练习演示设计板书设计PPT教学过程课程导入主要内容对于同学们来说，网络并不陌生了，请同学们欣赏几个有特色的网站，如新浪，网易等

2、，在大家兴奋之余，希望同学们也能设计出这样的网站，所以，大家仅仅有兴趣是不够的，还要认真学习。详细内容及要求【情境设置】对于同学们来说，网络并不陌生了，请同学们欣赏几个有特色的网站，如新浪，网易等，在大家兴奋之余，希望同学们也能设计出这样的网站，所以，大家仅仅有兴趣是不够的，还要认真学习。【项目展示】本项目完成后的大体效果如下（不要求大家做的和样张完全一样）【项目目标】 能正确描述网页的概念 能掌握网页的基本构成要素【项目分析】具体工作任务：1.初步认识Dreamweaver CS3的工作环境2. 制作第一个网页【实施步骤】 步骤一：新建空白页面 步骤二：保存网页文件 步骤三：输入网页标题 步

3、骤四：输入文本 步骤五：插入图像 步骤六：再次保存网页 步骤七：预览最终效果【知识链接】一、网页的基本概念1.Internet Internet翻译成中文叫做因特网，准确的描述是 Internet是一个网络的网络(a network of network），我们通常所说在家中上网，其实将是将你的计算机连入Internet 。2.WWWWWW是World Wide Web的缩写，即“万维网”，也叫做Web。 Internet与WWW之间的关系：WWW只是Internet众多功能中的一种。3.网页网页是WWW中最基本的电子文档。网页本质上是由HTML语言编写的一种文本文件。通常的网页文件都是以ht

4、m或html后缀结尾的文件，俗称HTML文件。HTML的意思则是 “Hyper Text Markup Language”， 翻译为“超文本标记语言”。 后面会具体学习 网页分为静态网页和动态网页。 4.网站网站实际上是若干相关网页的集合，这些网页通过超链接的形式连接在一起，网站又称作Web站点。 5.网页的工作原理二、网页的基本构成要素1.文本2.图片3.动画4.声音和视频5.超链接6.表格7.表单8.其它元素【知识拓展】拓展项目展示：制作要点提示：1.新建并保存网页2.输入文本3.插入图片4.再次保存文件5.预览最终效果你们常用的浏览器是什么？教学小结本项目中主要介绍了网页制作的基础知识，

5、包括网页的一些基本概念、相关术语和主要元素，以及网页的工作原理等。学习指导学生在学习这一节内容时，对网页制作的概念有了初步的了解；在上机操作时，要注意强调整个流程的实际操作。参阅教材网页制作基础教程Dreamweaver 8版作业知识拓展photoshop的使用教学后记网页设计Dreamweaver CS3教案教学课题项目二：创建一个站点教学时间年 月 日教学内容操作Dreamweaver 的用户界面建立本地站点编辑本地站点在站点中建立相关文件夹和页面教学目的能熟悉Dreamweaver 的工作界面能熟练创建和编辑站点教学重点能熟练创建和编辑站点。教学难点能熟练创建和编辑站点，对于网站结构的理

6、解建议课时理论：2 实训：4教学教具多媒体教学系统机房教学方法理论：使用多媒体教学方法讲授（.PPT）；实训：学生上机操作演示设计板书设计教学过程课程导入主要内容通过前面的学习，同学们已经知道什么是站点了，那么我们在真正进入学习制作网站前，先要学习一下如何管理我们的站点，以便于在制作时，能够事半功倍，得心应手，Dreamweaver中也是通过站点这一概念来实现网页开发中各种资源的管理。借助于Dreamweaver的站点管理，可以方便的建立，移动，删除站点内的文件详细内容及要求【情境设置】通过前面的学习，同学们已经知道什么是站点了，那么我们在真正进入学习制作网站前，先要学习一下如何管理我们的站点

7、，以便于在制作时，能够事半功倍，得心应手，Dreamweaver中也是通过站点这一概念来实现网页开发中各种资源的管理。借助于Dreamweaver的站点管理，可以方便的建立，移动，删除站点内的文件【项目展示】本项目完成后的大体效果如下（不要求大家做的和样张完全一样）【项目目标】 能熟悉Dreamweaver 的工作界面 能熟练创建和编辑站点【项目分析】具体工作任务：1. 操作Dreamweaver 的用户界面2. 建立本地站点3. 编辑本地站点4. 在站点中建立相关文件夹和页面【实施步骤】步骤一：创建一个本地新站点根据【站点定义向导】逐步完成。这里需要说明的是站点在计算机上的存放位置，大家可以

8、根据自己机器的实际情况，将站点的保存位置设置为机器中的某个磁盘分区里。本例中即为将站点存放在E盘里的myweb文件中，系统会自动在E盘下创建这个文件夹，并将该文件夹作为站点的根本件夹。站点中所有的网页或素材等资源将会保存在该文件夹下。步骤二：编辑已经存在站点。若建立好的站点想要修改其某些属性，比如修干站点的存放位置，或者修改站点名称等等。则可以随时修改，本步骤就是教给大家如何完成修改。步骤三：创建文件夹。在站点的根本件夹中可以创建若干子文件夹。我们要建设一个完整、成功的网站，其中必然要包含很多内容，如：网页文件、图片文件、声音文件、动画文件等等。为了方便开发者分类管理、维护这些文件，使得站点中

9、各类文件的存放有条理性、结构性，可以通过在站点根文件夹中建立若干子文件夹的形式，对各种类型的文件分类保存管理，如：建立images文件夹来存放图片文件；建立music文件夹来存放声音文件等等。当然也可以按照其他方法分类进行保存管理 。步骤四：创建网页文件。在站点的根本件夹中创建一个空白页面并命名，本例中重新将网页文件命名为index.html，该名称在站点中一般作为首页的名称。当然，除了可以直接在站点根文件下创建网页外，还可以在根文件夹中的子文件夹里创建网页。【知识链接】一、Dreamweaver简介Dreamweaver是一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举

10、地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。三、创建站点的必要性利用Dreamweaver中的站点可组织与网站相关的所有文档，跟踪和维护链接，管理文件，共享文件以及将站点文件传输到 Web 服务器。Dreamweaver 站点根据站点中文件的存放地点，可以分为本地站点和远程站点，本教材 中所有项目中所建立站点均为本地站点。 四、首页和网站结构通常所说的网站是由一个或多个网页组成的，而进入网站时首先打开的网页称为首页或主页。按照行业习惯命名为“index.htm”(“index.html”)或“default.htm”(“default.html”)。 本书中站点首页名称一律采用了为i

11、ndex.html。网站结构图：【知识拓展】教学小结本项目中主要介绍了Dreamweaver 的工作界面，以及站点及站点中文件夹和文件的创建、编辑、删除等具体管理操作。 学习指导指导学生建立自己的站点参阅教材网页制作基础教程Dreamweaver 8版作业知识拓展photoshop的使用教学后记网页设计Dreamweaver CS3教案教学课题项目三：编辑网页文本教学时间年 月 日教学内容1、制作一个网页，主题为“藏獒传说”，输入文本并使用多种文本格式化方法设置文本。2、插入一些简单元素使页面更加精彩教学目的 能新建并保存网页文件 能掌握普通文本的输入方法 能设置页面背景 能对网页文本格式化操

12、作 能插入特殊字符、日期、水平线 能正确设置文本式超链接 能预览网页教学重点设置页面背景、网页文本格式化操作、插入特殊字符、日期、水平线、设置文本式超链接、预览网页教学难点正确设置文本式超链接建议课时理论：2 实训：4教学教具多媒体教学系统机房教学方法理论：使用多媒体教学方法讲授（.PPT）；实训：学生上机操作演示设计板书设计教学过程课程导入主要内容当同学们畅游在网络上时，无论我们看到什么类型的网站，还是多么生动的页面，都离不开文字，它是人类最重要的信息载体与交流工具，所以，网页中的信息也以文本为主。详细内容及要求【情境设置】当同学们畅游在网络上时，无论我们看到什么类型的网站，还是多么生动的页

13、面，都离不开文字，它是人类最重要的信息载体与交流工具，所以，网页中的信息也以文本为主。【项目展示】本项目完成后的大体效果如下（不要求大家做的和样张完全一样）【项目目标】 能新建并保存网页文件 能掌握普通文本的输入方法、复制、粘贴。 能设置页面背景 插入图像，图像对齐方式设置。 能对网页文本格式化操作：字体，字号，字色设置。 能插入特殊字符、日期、水平线 能插入空格：ctrl+shift+空格。 强制换行：shift+回车。 分段：回车。 能正确设置文本式超链接 能预览网页【项目分析】具体工作任务：1、制作一个网页，主题为“藏獒传说主页”，输入文本并使用多种文本格式化方法设置文本。2、插入一些简

14、单元素使页面更加精彩【实施步骤】步骤一：创建一个新的站点并将站点的存放位置设为e:xxbanDWzangao中（也可根据自己机器单位实际情况设置）。在站点根文件下创建子文件夹images和网页文件index.html。步骤二：输入文本注意：在Dreamweaver中，无论中文或是英文输入状态，输入多少个空格，软件都按一个空格处理，只有当处于中文输入法全角状态时，才可以输入多个空格。步骤三：设置文本格式设置文本的字体、大小、颜色。设置标题文本格式和正文文本的格式。步骤四：插入水平线步骤五：插入特殊字符和日期步骤六：设置页面背景这一步中将要选择一副图片作为整个网页页面的背景。需要注意的是，若选择的

15、图片文件不在当前站点根文件夹中（本例为e:xxbanDWzangao),则系统会提示你是否将该图片文件从原位置拷贝到站点根文件夹中，此时要选择是，默认情况下，系统会将图片文件直接复制到根文件下，虽然这样也没问题，但是，我们说过，站点内的文件最好分类保存，不要把各种类型所有文件都直接放在根文件下，比如可以在根文件下建立一个专门的子文件夹，用来保存图片类的文件，这就是我们在第一步中建立images子文件夹的目的，我们可以把网页中用到图片文件都统一放在这个子文件夹下。因此 在“复制文件为”对话框中，保存在处要选择根文件夹下的images，以将从原来位置拷贝过来的图片文件放在imags子文件夹中。步骤

16、七：设置文字超链接步骤八：预览文件【知识链接】一、页面属性设置页面属性的不同设置，可以修改文本元素的属性，也可以修改如背景图像、链接元素等相关的属性，覆盖整个页面，恰当的修改后，会使整个页面焕然一新。我们可以从外观、链接、标题、标题/编码、跟踪图像五个方面进行页面属性的设置。二、输入特殊字符特殊字符主要分为四类：特殊字符，分别为标点符号类、货币符号类、版权相关类、以及其他字符。 插入方法：1.选择【插入】工具栏中的【文本】选项卡，单击其中最后一个特殊字符组按钮。2.菜单式操作：【插入】|【HTML】|【特殊字符】三、段落格式化Enter键：生成一个段落。Shift+Enter键：只将文本换行而

17、不生成新的段落。 段落格式化设置主要可以设置段落对齐、项目列表和编号列表、文本凸出和文本缩进。四、标尺和网格标尺和网格工具属于网页制作中的辅助工具，可以用于准确定位页面中的元素位置，或者对齐页面元素。【知识拓展】拓展项目展示：制作要点提示1.新建并保存网页2.复制，粘贴文本，强行分段3.设置标题格式4.设置正文文本格式：项目列表设置。5.添加版权信息和日期6.设置页面背景图像7.在页面底端，输入“返回首页”，并将其与“藏獒传说主页”网页链接8.在标题行下方插入了一个水平分割线条图片来装饰页面：会设置水平线的颜色：在代码hr后定光标按空格即出现提示，选color 即可。 9.再次保存文件，并预览

18、网页效果教学小结本项目主要介绍了网页中文本元素的编辑使用，以及如何能够在网页制作中使主体元素即文本元素能够更加美观、有视觉冲击力。 学习指导指导学生进行网页中文本元素的编辑使用，以及如何能够在网页制作中使主体元素即文本元素能够更加美观、有视觉冲击力参阅教材网页制作基础教程Dreamweaver 8版作业课后习题教学后记网页设计Dreamweaver CS3教案教学课题项目四：编辑网页图像教学时间年 月 日教学内容制作一个网页，主题为“文学天地”输入文字，进行适当的设置插入普通图像，合理设置来美化页面插入其他图像元素来修饰页面设置页面背景，使效果更加完美教学目的能正确插入普通图像能合理设置图像属

19、性能正确插入鼠标经过图像认识常用的图像文件类型教学重点正确插入普通图像、合理设置图像属性、正确插入鼠标经过图像教学难点认识常用的图像文件类型、正确插入鼠标经过图像建议课时理论：2 实训：4教学教具多媒体教学系统机房教学方法理论：使用多媒体教学方法讲授（.PPT）；实训：学生上机操作演示设计板书设计教学过程课程导入主要内容在当今的信息化时代里，网络已经成为了人们沟通的纽带，我们也经常通过网络去了解社会，了解产品等，所以一个好的网站将成为一个最大的展示平台，那么一个好的网站显得更加重要，其中最具吸引力的，使页面更加丰富多彩的当属图像元素的使用。详细内容及要求【情境设置】在当今的信息化时代里，网络已

20、经成为了人们沟通的纽带，我们也经常通过网络去了解社会，了解产品等，所以一个好的网站将成为一个最大的展示平台，那么一个好的网站显得更加重要，其中最具吸引力的，使页面更加丰富多彩的当属图像元素的使用。【项目展示】本项目完成后的大体效果如下（不要求大家做的和样张完全一样）【项目目标】 能正确插入普通图像 能合理设置图像属性 能正确插入鼠标经过图像 认识常用的图像文件类型【项目分析】具体工作任务：1.制作一个网页，主题为“文学天地”2.输入文字，进行适当的设置3.插入普通图像，合理设置来美化页面4.插入其他图像元素来修饰页面5.设置页面背景，使效果更加完美【实施步骤】步骤一：创建一个新的站点并将站点的

21、存放位置设为e:sucaichaper4中。在站点根文件下创建子文件夹images和网页文件index.html。步骤二：输入并格式化文本步骤三：插入普通图像步骤四：设置图像属性步骤五：插入鼠标经过图像需要注意的仍是所插入图像若不在站点内时，要将所有的图像均保存到images文件中，这是一个好的习惯，也是行业惯例。【知识链接】一、网页中的颜色在网页中是以RGB来表示颜色的，我们所看到的成千上万的颜色都是由红、绿、蓝三种基础颜色调和而成的。网页安全颜色范围：由红，绿，蓝三种基色可以调和成16777216种，但网页中常用到的是216种颜 色，这是由于浏览器能正常显示的这，超出这个范围就失真，因此我

22、们也把这216种颜色叫做网页的安全颜色范围。二、网页中的图像格式1.GIF格式：是网页中常用的一种图像格式，在绝大多数浏览器中都能正常显示 。 2.JPEG格式：是网页中常用的一种图像格式，下载速度非常快，适合于显示颜色丰富、细腻的图像3.PNG格式：适合于在网络上传播。但是，它只有在Microsoft Internet Explorer(4.0及以上版 本)和Netscape Navigator（4.04及以上版本）才能得到支持。 三、图像属性参数我们可以通过属性参数面板来设置图像的各种属性。 操作方法：选中要编辑的图像，然后编辑、修改图像属性面板的参数。四、调整图像插入到页面中的图像可以进

23、行必要的修改。图像的调整主要是：调整大小、裁剪图像、调整亮度和对比度、锐化图像。五、插入鼠标经过图像鼠标经过图像是一种图像在浏览器中显示的特殊效果，为了实现这个效果，需要两副图像，正常状态下显示一副图像，而当鼠标指针经过该图像时，它将变化为另外一副图像，从而达到一种图像动态变化的特殊效果。 注意：“原始图像”和“鼠标经过图像”所设置的两个图像尺寸大小最好相等，如果大小不等，系统将自动调整第二个图像的大小，使其与第一个图像匹配。六、插入图像占位符图像占位符：是临时替代图像的，顶替图像的位置，是在设计好页面后又不能确定插入什么样的具体图像时，在图像的位置上使用图像占位符，可以避免由于没有图像而导致

24、无法正常设计的问题。图像占位符与图像的属性基本相同。 【知识拓展】拓展项目展示：制作要点提示1.创建一个本地站点并且新建一个子文件夹images来管理素材文件2.新建一个网页，保存网页文件，将其命名为“index.html”3.插入一个3行3列的表格4.在每个单元格中分别插入一幅图像5.保存文件，预览最终效果教学小结本项目中主要介绍了网页图像的相关知识，如何插入、编辑图像，以及鼠标经过图像特殊效果的使用方法。 学习指导指导学生如何插入、编辑图像，以及鼠标经过图像特殊效果的使用方法参阅教材网页制作基础教程Dreamweaver 8版作业课后习题教学后记网页设计Dreamweaver CS3教案教

25、学课题项目五：编辑多媒体页面教学时间年 月 日教学内容制作一个网页，主题为“与青春有约”设置页面背景，使效果更加完美输入文字，进行适当的格式化设置插入Flash动画，设置对齐方式，放置一个合适位置插入Flash文本，内容为版权信息，设置动态变换方式插入Flash按钮，设置链接设置背景音乐插入视频教学目的能正确插入Flash动画能掌握Flash对象的插入方法能学会视频的插入能正确添加背景音乐教学重点正确插入Flash动画、视频、背景音乐教学难点正确插入Flash动画、视频、背景音乐建议课时理论：2 实训：4教学教具多媒体教学系统机房教学方法理论：使用多媒体教学方法讲授（.PPT）；实训：学生上机

26、操作演示设计板书设计教学过程课程导入主要内容现在的科技如此发达，每天都有新生事物的诞生，所以我们制作的网页也要跟的上时代的进步，满足浏览者的需求，才能吸引更多的用户，所以要从多感官来打动用户，吸引用户，因此网页中绝对少不了视觉冲击力极强的多媒体，本项目中，我们就要学习如何在网页上使用各种多媒体元素。详细内容及要求【情境设置】现在的科技如此发达，每天都有新生事物的诞生，所以我们制作的网页也要跟的上时代的进步，满足浏览者的需求，才能吸引更多的用户，所以要从多感官来打动用户，吸引用户，因此网页中绝对少不了视觉冲击力极强的多媒体，本项目中，我们就要学习如何在网页上使用各种多媒体元素。【项目展示】本项目

27、完成后的大体效果如下（不要求大家做的和样张完全一样）【项目目标】 能正确插入Flash动画 能掌握Flash对象的插入方法 能学会视频的插入 能正确添加背景音乐【项目分析】具体工作任务：1.一个网页，主题为“与青春有约”2.置页面背景，使效果更加完美3.入文字，进行适当的格式化设置4.入Flash动画，设置对齐方式，放置一个合适位置5.Flash文本，内容为版权信息，设置动态变换方式6.入Flash按钮，设置链接7.置背景音乐8.入视频【实施步骤】步骤一：创建一个新的站点并将站点的存放位置设为e:sucaichaper5中。在站点根文件下创建子文件夹images，flash、video,mus

28、ic等，这是为了将网页中使用的图像、视频、音频等文件可以分类保存。在根文件夹下创建网页index.html。步骤二：设置页面背景步骤三：输入并格式化文本步骤四：插入Flash动画注意：若所插动画文件不在站点内，同样也会提示是否将flash文件复制到站点内，此时要选择是，并将文件复制保存到flash文件夹内。步骤五：插入Flash文本注意：在“插入flash文本”对话框上的“另存为”文本框中设置所要创建的flash文本文件的名称和保存位置，教材上选择了默认状态，即直接存放在根文件夹下。当然根据分类保存的原则，最好将这类文件统一保存在flash子文件夹内。下一步插入flash按钮时也是同样的道理。

29、步骤六：插入Flash按钮步骤七：插入背景音乐注意：若所插音乐文件不在站点内，同样也会提示是否将音频文件复制到站点内，此时要选择是，并将文件复制保存到music文件夹内。下一步的视频插入也是同样的道理。步骤八：插入视频提示：为了避免每次插入各类素材时都有提示并进行保存位置的选择，可以在插入这些素材前，先将可能用到的素材事先分别复制到各个相应类别的子文件夹中，然后插入时，直接到这些子文件夹中寻找并插入。【知识链接】一、Flash的文件类型1.Flash 源文件 (.fla)： 是指在 Flash 程序中创建的Flash原始文件。这种类型的文件只能在Flash编辑软件中打开。2.Flash电影文件 (.swf)：是指Flash (.fla) 文件的压缩版本，这种类型的文件可以在浏览器中播放并且可以在 Dreamweaver 中进行预览，但不能在 Flash 中进行编辑。 3.Flash 库文件(.swt)：这种文件用于 Flash 按钮对象，使我们能够用自己的文本或链接修改模板。4.Flash 元素文件(.swc)：是一种Flash SWF文件。 5.视频文件格式 (.flv)：是一种视频文件 。二、网页