《Dreamweaver CS3教案》由会员分享，可在线阅读，更多相关《Dreamweaver CS3教案（48页珍藏版）》请在金锄头文库上搜索。
1、第1章 基础知识（5课时）教学目标1掌握HTML的基本知识及作用；2掌握安装和配置IIS的方法；3熟悉Dreamweaver CS3的工作界面；4掌握创建和设置Dreamweaver CS3站点的方法。教学重点1HTML语言2熟悉Dreamweaver CS3的工作界面3创建本地站点教学难点HTML的基本知识教学方法任务驱动法，以学生做为主，教师使用多媒体投影演示制作过程并讲解关键环节。学生上机操作完成实例与实训。任务1 认识网页教学目标：1理解掌握网页的概念2HTML的概念3掌握HTML的基本知识及作用教学重点：1网页的实质2HTML的基础知识教学难点：HTML标记教学方法：任务驱动法，讲练
2、结合法教具准备：多媒体教学教学内容：第1课时一、网页1、网页的概念：网页是网站的基本组成元素。网页文件的扩展名通常为.htm或.html。一般是由HTML语言编写的文本文件。2、网页的实质网页文档本身是一个文本文件，这些文本能够将文字及其他媒体文件有机的组织在一起，在浏览器中合适地显示。二、HTML1、Html的中文含义Html是Hypertext Markup Language的缩写，其中文含义是“超文本标记语言”。2、Html的概念它是使用特殊标记来描述文档结构和表现形式的一种语言，可以用来实现WEB页面。3、网页文档的组成一个HTML文档通常分为文档头和文档主体两部分。三、标记1、标记的
3、格式在HTML中定义了许多标记，这些标记用来描述文档。这些标记使用“”括起来。标记通常分为开始标记和结束标记。其格式为：标记内容注意：若一个标记有多个属性，属性和属性之间要用空格隔开。示例：简单的网页文档 我的第一个网页这是我的第一个网页欢迎大家第2课时2、常用标记v 标记一个HTML文档的开始和结束。Html文档的所有内容就书写在这两个标记之间。v 用于标记文当首部的开始和结束，首部通常包括网页标题、创作信息等内容，在浏览网页时不会在浏览器窗口内显示。v 和 用于设置网页的标题。该标记中不能包含其它标记，且只能在标记中出现一次。当浏览网页时，网页的标题会出现在浏览器窗口的标题处。v 和 标记
4、是主体标记，该标记包含在Html标记内。文档主体包括了网页显示的内容，如文字、链接、图像、表格和其它对象。v 和 标记一个段落的开始和结束。v 和 说明其后的文字是一级标题。v 注释标记。说明：（1）每个标记在标识名以外还可以包含一个或多个“属性”，用于控制标记内容的大小、颜色、位置、边框等。例如： “bgcolor=blue”就是body标记的一个属性，进一步说明网页的背景色为蓝色。（2）如果一个标记有多个属性，中间要用空格隔开。3、标记的常用属性属性名作用Background用图像设置网页背景Bgcolor设置网页的背景颜色Text设置网页中所有文本的颜色Link设置超文本链接尚未访问时文
5、本的颜色，默认为蓝色Vlink设置超文本链接已经访问后四、网页的基本元素网页中包括的元素主要有文本、图像、视频、声音、动画、表格、表单等。（1）网站LOGOLogo的中文含义是标志、标识，在网页设计中，Logo常作为公司或站点的标识出现，起着非常重要的作用，集中体现了这个网站的文化内涵和内容定位。（2）网站Banner Banner的中文含义是横幅、标语，通常被称为网络广告。（3）导航栏导航栏实质上是一组超链接，通过这组超链接可以浏览到整个网站的其他页面。 （4）文本 文本作为人类最重要的信息载体的交流工具，是最重要的网页元素之一。与图像、动画等其他网页元素相比，文本不易在第一时间吸引浏览者的
6、注意，但文本能够更加准确详细地表达网页信息内容和含义，是对其他网页元素的补充。 （5）图像 图像在网页中起着非常重要的作用，适当的图像能够为网页增添生动性和活泼性，不仅丰富网页内容、提供更多更直接的信息，还能给浏览者视觉上的美感。 （6）动画 动画能够形象生动地表现事物的变化发展过程，增加网页的动态效果，使网站更加生动有趣，因此，动画已经成为现代网站中不可缺少的元素之一。（7）表单 表单实质上是一个服务器程序，用户可以在网页上的表单域中输入文本或数据，提交表单，该表单程序在服务器上执行，并将执行结果反馈到相应的页面上，从而实现了用户与网站之间的交互。 教学小结：主要介绍了网页的概念、标记的应用
7、及书写格式还有网页的基本组成元素。课堂作业：1、总结网页的概念及网页的实质？2、列举Dreamweaver CS3中常用标记及其含义？板书设计：任务2 让别人通过网络访问你的网页教学目标1理解和掌握网站的概念2掌握安装IIS的步骤3掌握在IIS中配置站点的方法教学重点1网站的含义2IIS的含义及功能教学难点IIS的配置教学方法演示法，任务驱动法教具准备多媒体教学教学内容一、网站网站是许多相关网页有机结合而形成的一个信息服务中心。网站的设计者将要提供的内容和服务制作成许多个网页，并且经过组织规划，让网页互相链接，然后把相关文件存放在WEB服务器的一个文件夹中。这样一个文件夹就是一个网站。二、主页
8、当用户没有指定网页文件名时，网站的默认显示的网页。主页文件名通常为index.htm、index.html、default.htm三、 IIS1、IIS的含义IIS（Internet Information Server，互联网信息服务）是一种Web（网页）服务组件，其中包括Web服务器、FTP服务器、NNTP服务器和SMTP服务器，分别用于网页浏览、文件传输、新闻服务和邮件发送等方面，它使得在网络（包括互联网和局域网）上发布信息成了一件很容易的事。2、IIS的运行环境IIS通常运行在WINDOWS的SERVER版本上，可支持大量用户的访问。在WINDOWS XP professional中，
9、IIS组件主要用于开发测试，不适宜大量用户的访问。另外，在WINDOWS XP的家庭版中未提供IIS组件。教学小结：介绍了网页中常用术语的含义及IIS的含义和站点的配置。任务3、初识Dreamweaver CS3教学目标1掌握启动Dreamweaver CS3的方法2认识Dreamweaver CS3的工作界面3掌握Dreamweaver CS3界面中常用部分的用途教学重点熟悉Dreamweaver CS3界面各部分的名称及作用教学难点熟悉Dreamweaver CS3界面各部分的名称及作用教学方法多媒体演示法、任务驱动法、挂图法教具准备教学内容一、启动Dreamweaver CS3的方法1、
10、从“开始”菜单2、双击桌面上的快捷方式二、Dreamweaver CS3的工作界面；文档窗口：v “文档”窗口显示当前文档。v 可以选择设计视图、代码视图、拆分代码视图、代码和设计视图之一进行网页的编辑和开发。v 当“文档”窗口处于最大化状态（默认值）时，“文档”窗口顶部会显示选项卡，上面显示了所有打开的文档的文件名。v 如果尚未保存已做的更改，则Dreamweaver CS3会在文件名后显示一个星号。若要切换到某个文档，单击其选项卡即可。三、网页开发平台早期的网页制作，网页设计师要通过手工编写HTML代码来实现，开发效率非常低。网页开发平台的出现，使得这些复杂代码的编写变得十分容易。在这些网
11、页开发平台中，只需要点点鼠标，软件就能帮助用户书写出相应代码，即使不懂得HTML，也能制作出漂亮的网页来。Dreamweaver就是一种网页开发平台，其最新版本就是Adobe Dreamweave cs3。该软件同时适用于初学者和专业网页设计师，是一款优秀的“所见即所得”的可视化网页编辑软件。另外，FrontPage也是一款常用的网页开发平台，它是由微软公司开发的，适合于初学者。四、网页制作辅助工具1、图像处理工具-PhotoshopPhotoshop软件一直是图像处理软件的龙头老大，它不仅能创造出不朽的计算机图形艺术，而且为网页图像制作提供了强大的支持，现在已经成为使用最为广泛的网页图像处理
12、软件。2、动画制作工具-FLASHFALSH是目前网络上最为流行的矢量动画设计制作软件，在网页动画制作中有广泛应用。教学小结：介绍了Dreamweaver CS3的启动方法，认识并掌握了界面的组成及常用部分的含义。课外作业：尝试使用菜单对面板组进行设置。任务4、创建DreamweaverCS3站点教学目标：1理解并掌握站点的含义2掌握在Dreamweaver CS3中设置本地站点的步骤教学重点：设置本地站点教学难点：本地站点的设置教学内容：一、站点1站点的含义在 Dreamweaver CS3中，术语“站点”指属于某个 Web 站点的文档的本地或远程存储位置。Dreamweaver CS3站点
13、提供了一种方法，使您可以组织和管理您所有的 Web 文档，将您的站点上传到 Web 服务器，跟踪和维护您的链接以及管理和共享文件。应定义一个站点以充分利用 Dreamweaver CS3的功能。2站点的类型Dreamweaver CS3站点由三个部分（或文件夹）组成，具体取决于开发环境和所开发的 Web 站点类型：（1）本地根文件夹 存储您正在处理的文件。Dreamweaver CS3将此文件夹称为“本地站点”。此文件夹可以位于本地计算机上，也可以位于网络服务器上。如果您直接在服务器上工作，每次您保存文件时 Dreamweaver CS3 都会将文件上传到服务器。 （2）远程文件夹 存储用于测
14、试、生产和协作等用途的文件。Dreamweaver CS3在“文件”面板中将此文件夹称为“远程站点”。远程文件夹通常位于运行 Web 服务器的计算机上。 3本地根文件夹和远程文件夹的关系本地文件夹和远程文件夹使您能够在本地硬盘和 Web 服务器之间传输文件；这使您可以轻松管理 Dreamweaver CS3站点中的文件。二、创建本地站点的步骤1、创建本地站点的注意事项：（1）第一步必须先在本地计算机的磁盘上建立一个文件夹。（作为本地站点的根文件夹）提示：为了方便以后管理站点上的文件，先在本地文件夹中创建几个目录：htm、img、 others，分别存放网页设计中用到的资源及网页文件。（2）建立本地站点，选择主菜单中的“站点”“新建站点”命令，在弹出的新建站点对话框进行设置。2、新建站点的操作步骤：第一步：选择菜单中的“站点”“新建站点”命令，如图所示：在弹出的对话框中选择“基本”选项卡，出现定义站点向导，如下图所示：
