DreamweaverCS3教案Word文件下载.docx

DreamweaverCS3教案Word文件下载.docx

《DreamweaverCS3教案Word文件下载.docx》由会员分享，可在线阅读，更多相关《DreamweaverCS3教案Word文件下载.docx（68页珍藏版）》请在冰豆网上搜索。

<

head>

title>

我的第一个网页<

/title>

/head>

!

—文档主体—>

bodybgcolor=bluetext=red>

h1>

这是我的第一个网页

p>

欢迎大家

/body>

/html>

第2课时

2、常用标记

v<

html>

…<

标记一个HTML文档的开始和结束。

Html文档的所有内容就书写在这两个标记之间。

用于标记文当首部的开始和结束，首部通常包括网页标题、创作信息等内容，在浏览网页时不会在浏览器窗口内显示。

和<

用于设置网页的标题。

该标记中不能包含其它标记，且只能在标记中出现一次。

当浏览网页时，网页的标题会出现在浏览器窗口的标题处。

body>

标记是主体标记，该标记包含在Html标记内。

文档主体包括了网页显示的内容，如文字、链接、图像、表格和其它对象。

P>

/P>

标记一个段落的开始和结束。

/h1>

说明其后的文字是一级标题。

--注释内容-->

注释标记。

说明：

（1）每个标记在标识名以外还可以包含一个或多个“属性”，用于控制标记内容的大小、颜色、位置、边框等。

例如：

“bgcolor=blue”就是body标记的一个属性，进一步说明网页的背景色为蓝色。

（2）如果一个标记有多个属性，中间要用空格隔开。

3、<

标记的常用属性

属性名

作用

Background

用图像设置网页背景

Bgcolor

设置网页的背景颜色

Text

设置网页中所有文本的颜色

Link

设置超文本链接尚未访问时文本的颜色，默认为蓝色

Vlink

设置超文本链接已经访问后

四、网页的基本元素

网页中包括的元素主要有文本、图像、视频、声音、动画、表格、表单等。

（1）网站LOGO

Logo的中文含义是标志、标识，在网页设计中，Logo常作为公司或站点的标识出现，起着非常重要的作用，集中体现了这个网站的文化内涵和内容定位。

（2）网站Banner

Banner的中文含义是横幅、标语，通常被称为网络广告。

（3）导航栏

导航栏实质上是一组超链接，通过这组超链接可以浏览到整个网站的其他页面。

（4）文本

文本作为人类最重要的信息载体的交流工具，是最重要的网页元素之一。

与图像、动画等其他网页元素相比，文本不易在第一时间吸引浏览者的注意，但文本能够更加准确详细地表达网页信息内容和含义，是对其他网页元素的补充。

（5）图像

图像在网页中起着非常重要的作用，适当的图像能够为网页增添生动性和活泼性，不仅丰富网页内容、提供更多更直接的信息，还能给浏览者视觉上的美感。

（6）动画

动画能够形象生动地表现事物的变化发展过程，增加网页的动态效果，使网站更加生动有趣，因此，动画已经成为现代网站中不可缺少的元素之一。

（7）表单

表单实质上是一个服务器程序，用户可以在网页上的表单域中输入文本或数据，提交表单，该表单程序在服务器上执行，并将执行结果反馈到相应的页面上，从而实现了用户与网站之间的交互。

教学小结：

主要介绍了网页的概念、标记的应用及书写格式还有网页的基本组成元素。

课堂作业：

1、总结网页的概念及网页的实质？

2、列举DreamweaverCS3中常用标记及其含义？

板书设计：

任务2让别人通过网络访问你的网页

1．理解和掌握网站的概念

2．掌握安装IIS的步骤

3．掌握在IIS中配置站点的方法

1．网站的含义

2．IIS的含义及功能

IIS的配置

演示法，任务驱动法

教具准备

多媒体教学

教学内容

一、网站

网站是许多相关网页有机结合而形成的一个信息服务中心。

网站的设计者将要提供的内容和服务制作成许多个网页，并且经过组织规划，让网页互相链接，然后把相关文件存放在WEB服务器的一个文件夹中。

这样一个文件夹就是一个网站。

二、主页

当用户没有指定网页文件名时，网站的默认显示的网页。

主页文件名通常为index.htm、index.html、default.htm

三、IIS

1、IIS的含义

IIS（InternetInformationServer，互联网信息服务）是一种Web（网页）服务组件，其中包括Web服务器、FTP服务器、NNTP服务器和SMTP服务器，分别用于网页浏览、文件传输、新闻服务和邮件发送等方面，它使得在网络（包括互联网和局域网）上发布信息成了一件很容易的事。

2、IIS的运行环境

IIS通常运行在WINDOWS的SERVER版本上，可支持大量用户的访问。

在WINDOWSXPprofessional中，IIS组件主要用于开发测试，不适宜大量用户的访问。

另外，在WINDOWSXP的家庭版中未提供IIS组件。

介绍了网页中常用术语的含义及IIS的含义和站点的配置。

任务3、初识DreamweaverCS3

1．掌握启动DreamweaverCS3的方法

2．认识DreamweaverCS3的工作界面

3．掌握DreamweaverCS3界面中常用部分的用途

熟悉DreamweaverCS3界面各部分的名称及作用

多媒体演示法、任务驱动法、挂图法

一、启动DreamweaverCS3的方法

1、从“开始”菜单

2、双击桌面上的快捷方式

二、DreamweaverCS3的工作界面；

文档窗口：

v“文档”窗口显示当前文档。

v可以选择设计视图、代码视图、拆分代码视图、代码和设计视图之一进行网页的编辑和开发。

v当“文档”窗口处于最大化状态（默认值）时，“文档”窗口顶部会显示选项卡，上面显示了所有打开的文档的文件名。

v如果尚未保存已做的更改，则DreamweaverCS3会在文件名后显示一个星号。

若要切换到某个文档，单击其选项卡即可。

三、网页开发平台

早期的网页制作，网页设计师要通过手工编写HTML代码来实现，开发效率非常低。

网页开发平台的出现，使得这些复杂代码的编写变得十分容易。

在这些网页开发平台中，只需要点点鼠标，软件就能帮助用户书写出相应代码，即使不懂得HTML，也能制作出漂亮的网页来。

Dreamweaver就是一种网页开发平台，其最新版本就是AdobeDreamweavecs3。

该软件同时适用于初学者和专业网页设计师，是一款优秀的“所见即所得”的可视化网页编辑软件。

另外，FrontPage也是一款常用的网页开发平台，它是由微软公司开发的，适合于初学者。

四、网页制作辅助工具

1、图像处理工具-Photoshop

Photoshop软件一直是图像处理软件的龙头老大，它不仅能创造出不朽的计算机图形艺术，而且为网页图像制作提供了强大的支持，现在已经成为使用最为广泛的网页图像处理软件。

2、动画制作工具-FLASH

FALSH是目前网络上最为流行的矢量动画设计制作软件，在网页动画制作中有广泛应用。

介绍了DreamweaverCS3的启动方法，认识并掌握了界面的组成及常用部分的含义。

课外作业：

尝试使用菜单对面板组进行设置。

任务4、创建DreamweaverCS3站点

1．理解并掌握站点的含义

2．掌握在DreamweaverCS3中设置本地站点的步骤

教学重点：

设置本地站点

教学难点：

本地站点的设置

教学内容：

一、站点

1．站点的含义

在DreamweaverCS3中，术语“站点”指属于某个Web站点的文档的本地或远程存储位置。

DreamweaverCS3站点提供了一种方法，使您可以组织和管理您所有的Web文档，将您的站点上传到Web服务器，跟踪和维护您的链接以及管理和共享文件。

应定义一个站点以充分利用DreamweaverCS3的功能。

2．站点的类型

DreamweaverCS3站点由三个部分（或文件夹）组成，具体取决于开发环境和所开发的Web站点类型：

（1）本地根文件夹

存储您正在处理的文件。

DreamweaverCS3将此文件夹称为“本地站点”。

此文件夹可以位于本地计算机上，也可以位于网络服务器上。

如果您直接在服务器上工作，每次您保存文件时DreamweaverCS3都会将文件上传到服务器。

（2）远程文件夹

存储用于测试、生产和协作等用途的文件。

DreamweaverCS3在“文件”面板中将此文件夹称为“远程站点”。

远程文件夹通常位于运行Web服务器的计算机上。

3．本地根文件夹和远程文件夹的关系

本地文件夹和远程文件夹使您能够在本地硬盘和Web服务器之间传输文件；

这使您可以轻松管理DreamweaverCS3站点中的文件。

二、创建本地站点的步骤

1、创建本地站点的注意事项：

（1）第一步必须先在本地计算机的磁盘上建立一个文件夹。

（作为本地站点的根文件夹）

提示：

为了方便以后管理站点上的文件，先在本地文件夹中创建几个目录：

htm、img、others，分别存放网页设计中用到的资源及网页文件。

（2）建立本地站点，选择主菜单中的“站点”→“新建站点”命令，在弹出的新建站点对话框进行设置。

2、新建站点的操作步骤：

第一步：

选择菜单中的“站点”→“新建站点”命令，如图所示：

在弹出的对话框中选择“基本”选项卡，出现定义站点向导，如下图所示：

第二步：

单击“下一步”按钮，询问是否要使用服务器技术，选择“否”选项（表示目前该站点是一个静态站点，没有动态页即不使用Web应用程序：

如ASP、JavaServerPageJSP）

第三步：

单击“下一步”按钮，选择“编辑我的计算机上的本地副本，完成后再上传到服务器（推荐）”单选项，然后指定本地机磁盘上的一个文件夹储存站点文件（包括网页文件及设计网页用到的其它资源）

第四步：

单击“下一步”按钮，在弹出的对话框中设置如何连接到远程服务器，单击下拉菜单，选择“无”。

如下图所示：

第五步：

单击“下一步”按钮，弹出如下图设置概要。

单击“完成”按钮，完成设置。

思考：

如何使用高级模式创建或设置站点？

给大家介绍了使用向导及高级模式两种创建站点的方法步骤。

第2章创建简单网页（6学时）

1．掌握输入空格、普通文本、特殊字符、日期、列表等项目的操作方法

2．掌握文本的断行

3．掌握设置文本的属性及滚动文字的制作

4．掌握设置网页的属性

5．了解网页图像的格式

6．掌握图像插入、编辑的方法

7．掌握网站相册的建立

教学重点

1．文本段落的编辑

2．文本属性的设置

3