Dreamweaver-CS3教案设计.doc

《网页制作基础》教案 第1章 基础知识（5课时） 教学目标 1．掌握HTML的基本知识及作用； 2．掌握安装和配置IIS的方法； 3．熟悉Dreamweaver CS3的工作界面； 4．掌握创建和设置Dreamweaver CS3站点的方法。 教学重点 1．HTML语言 2．熟悉Dreamweaver CS3的工作界面 3．创建本地站点 教学难点 HTML的基本知识 教学方法 任务驱动法，以学生做为主，教师使用多媒体投影演示制作过程并讲解关键环节。学生上机操作完成实例与实训。 任务1 认识网页 教学目标： 1．理解掌握网页的概念 2．HTML的概念 3．掌握HTML的基本知识及作用 教学重点： 1．网页的实质 2．HTML的基础知识 教学难点： HTML标记 教学方法： 任务驱动法，讲练结合法 教具准备： 多媒体教学 教学内容： 第1课时 一、网页 1、网页的概念： 网页是网站的基本组成元素。网页文件的扩展名通常为.htm或.html。一般是由HTML语言编写的文本文件。 2、网页的实质 网页文档本身是一个文本文件，这些文本能够将文字及其他媒体文件有机的组织在一起，在浏览器中合适地显示。 二、HTML 1、Html的中文含义 Html是Hypertext Markup Language的缩写，其中文含义是“超文本标记语言”。 2、Html的概念 它是使用特殊标记来描述文档结构和表现形式的一种语言，可以用来实现WEB页面。 3、网页文档的组成 一个HTML文档通常分为文档头和文档主体两部分。 三、标记 1、标记的格式 在HTML中定义了许多标记，这些标记用来描述文档。这些标记使用“”和“”括起来。标记通常分为开始标记和结束标记。 其格式为： 标记名 属性名=属性值标记内容/标记名 注意： 若一个标记有多个属性，属性和属性之间要用空格隔开。 示例： 简单的网页文档 html !—文档头部— head title我的第一个网页/title /head !—文档主体— body bgcolor=blue text=red h1这是我的第一个网页 p欢迎大家 /body /html 第2课时 2、常用标记 html…/html 标记一个HTML文档的开始和结束。Html文档的所有内容就书写在这两个标记之间。 head…/head 用于标记文当首部的开始和结束，首部通常包括网页标题、创作信息等内容，在浏览网页时不会在浏览器窗口内显示。 title和/title 用于设置网页的标题。该标记中不能包含其它标记，且只能在标记中出现一次。当浏览网页时，网页的标题会出现在浏览器窗口的标题处。 body和/body 标记是主体标记，该标记包含在Html标记内。文档主体包括了网页显示的内容，如文字、链接、图像、表格和其它对象。 P和/P 标记一个段落的开始和结束。 h1和/h1 说明其后的文字是一级标题。 !--注释内容-- 注释标记。 说明： （1）每个标记在标识名以外还可以包含一个或多个“属性”，用于控制标记内容的大小、颜色、位置、边框等。 例如： body bgcolor=blue text=red “bgcolor=blue”就是body标记的一个属性，进一步说明网页的背景色为蓝色。 （2）如果一个标记有多个属性，中间要用空格隔开。 3、body标记的常用属性 属性名 作用 Background 用图像设置网页背景 Bgcolor 设置网页的背景颜色 Text 设置网页中所有文本的颜色 Link 设置超文本链接尚未访问时文本的颜色，默认为蓝色 Vlink 设置超文本链接已经访问后 四、网页的基本元素 网页中包括的元素主要有文本、图像、视频、声音、动画、表格、表单等。 （1）网站LOGO Logo的中文含义是标志、标识，在网页设计中，Logo常作为公司或站点的标识出现，起着非常重要的作用，集中体现了这个网站的文化内涵和内容定位。 （2）网站Banner Banner的中文含义是横幅、标语，通常被称为网络广告。 （3）导航栏 导航栏实质上是一组超链接，通过这组超链接可以浏览到整个网站的其他页面。 （4）文本 文本作为人类最重要的信息载体的交流工具，是最重要的网页元素之一。与图像、动画等其他网页元素相比，文本不易在第一时间吸引浏览者的注意，但文本能够更加准确详细地表达网页信息内容和含义，是对其他网页元素的补充。 （5）图像 图像在网页中起着非常重要的作用，适当的图像能够为网页增添生动性和活泼性，不仅丰富网页内容、提供更多更直接的信息，还能给浏览者视觉上的美感。 （6）动画 动画能够形象生动地表现事物的变化发展过程，增加网页的动态效果，使网站更加生动有趣，因此，动画已经成为现代网站中不可缺少的元素之一。 （7）表