Dreamweaver CS3教案设计(2)

2019-03-04 14:13

一、启动Dreamweaver CS3的方法

1、从“开始”菜单

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

二、Dreamweaver CS3的工作界面;

文档窗口:

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

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

开发。

? 当“文档”窗口处于最大化状态(默认值)时,“文档”窗口顶部会显示选项卡,上面

显示了所有打开的文档的文件名。

? 如果尚未保存已做的更改,则Dreamweaver CS3会在文件名后显示一个星号。若要切换

到某个文档,单击其选项卡即可。 三、网页开发平台

早期的网页制作,网页设计师要通过手工编写HTML代码来实现,开发效率非常低。网页开发平台的出现,使得这些复杂代码的编写变得十分容易。在这些网页开发平台中,只需要点点鼠标,软件就能帮助用户书写出相应代码,即使不懂得HTML,也能制作出漂亮的网页来。Dreamweaver就是一种网页开发平台,其最新版本就是Adobe Dreamweave cs3。该软件同时适用于初学者和专业网页设计师,是一款优秀的“所见即所得”的可视化网页编辑软件。另外,FrontPage也是一款常用的网页开发平台,它是由微软公司开发的,适合于初学者。

四、网页制作辅助工具

1、图像处理工具-Photoshop

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

2、动画制作工具-FLASH

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

教学小结:

介绍了Dreamweaver CS3的启动方法,认识并掌握了界面的组成及常用部分的含义。 课外作业:

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

6

任务4、创建DreamweaverCS3站点

教学目标:

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

2.掌握在Dreamweaver CS3中设置本地站点的步骤 教学重点:

设置本地站点 教学难点:

本地站点的设置 教学内容: 一、站点

1.站点的含义

在 Dreamweaver CS3中,术语“站点”指属于某个 Web 站点的文档的本地或远程存储位置。Dreamweaver CS3站点提供了一种方法,使您可以组织和管理您所有的 Web 文档,将您的站点上传到 Web 服务器,跟踪和维护您的链接以及管理和共享文件。应定义一个站点以充分利用 Dreamweaver CS3的功能。 2.站点的类型

Dreamweaver CS3站点由三个部分(或文件夹)组成,具体取决于开发环境和所开发的 Web 站点类型: (1)本地根文件夹

存储您正在处理的文件。Dreamweaver CS3将此文件夹称为“本地站点”。此文件夹可以位于本地计算机上,也可以位于网络服务器上。如果您直接在服务器上工作,每次您保存文件时 Dreamweaver CS3 都会将文件上传到服务器。 (2)远程文件夹

存储用于测试、生产和协作等用途的文件。Dreamweaver CS3在“文件”面板中将此文件夹称为“远程站点”。远程文件夹通常位于运行 Web 服务器的计算机上。 3.本地根文件夹和远程文件夹的关系

本地文件夹和远程文件夹使您能够在本地硬盘和 Web 服务器之间传输文件;这使您可以轻松管理 Dreamweaver CS3站点中的文件。 二、创建本地站点的步骤

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

(1)第一步必须先在本地计算机的磁盘上建立一个文件夹。(作为本地站点的根文件夹) 提示:为了方便以后管理站点上的文件,先在本地文件夹中创建几个目录:htm、img、 others,分别存放网页设计中用到的资源及网页文件。

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

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

第一步:选择菜单中的“站点”→“新建站点”命令,如图所示:

7

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

第二步:

单击“下一步”按钮,询问是否要使用服务器技术,选择“否”选项(表示目前该站点是一个静态站点,没有动态页即不使用Web应用程序:如ASP、JavaServer Page JSP)

第三步:

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

第四步:

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

8

第五步:

单击“下一步”按钮,弹出如下图设置概要。单击“完成”按钮,完成设置。 思考:

如何使用高级模式创建或设置站点? 教学小结:

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

第2章 创建简单网页(6学时)

教学目标

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

3.掌握设置文本的属性及滚动文字的制作 4.掌握设置网页的属性 5.了解网页图像的格式

6.掌握图像插入、编辑的方法 7.掌握网站相册的建立 教学重点

1.文本段落的编辑 2.文本属性的设置

3.网页中图像的应用及属性的设置 教学难点

1.图像的编辑为难点 2.滚动文字的制作 教学方法

教师使用多媒体投影演示制作过程,学生上机操作完成实例与实训。

任务1 制作文本网页

教学目标

1.掌握建立网站站点;

2.掌握制作简单的文本网页;

3.掌握输入普通文本及设置文本属性; 4.掌握插入水平线的方法; 5.掌握滚动文字的制作方法; 6.掌握预览网页的方法; 教学重点

9

1.文本的输入与属性设置 2.水平线的插入与应用 3.滚动文字的制作 教学难点

1.水平线的应用及属性设置 2.滚动文字的应用 教学内容

一、新建网页文件 1、方法一:

启动了DreamweaverCS3软件,如同启动Word等其它应用软件一样打开了一个新的空的网页文档,就可以在这个新的文档中进行网页设计编辑;或者单击“文件”菜单中的“新建”命令,或直接按Ctrl+N键,打开一个新页面,在该页面中也可以进行网页的设计编辑。

网页设计编辑完毕后,保存网页文件:保存的位置在战点根目录下,新文件取名为“index.html” 即建立了主页文件。 2、方法二:

打开站点管理窗口,在站点管理窗口右边的本地文件夹列表框中建立新文件,新文件取名为“index.html” 按回车键,即建立了主页文件。

双击“index.html”文件,进入编辑“index.html”的网页文件窗口,进行主页设计。 二、输入普通文本 1、输入文本 (1)“文件”→“导入” (2)复制已有的文本:“复制”→“粘贴” (3)直接输入:在文档编辑窗口中直接输入 2、输入网页中的空格 汉字输入状态下输入

“属性”面板→“格式”→“预先格式化的” Shift+Ctrl+空格

“编辑”→“首选参数”→“常规”→“允许多个连续的空格” 3、文本换行

Enter→分段(隔一行)

Shift+Enter→换行(不分段) 4、文本的属性设置 (1)选用字体

在“字体”下拉表框中找到字体。如果在“字体”下拉表框中,没有找到字体。“字体”下拉表框中找到字体。单击“文本”→“字体”→“编辑字体列表”命令。或者在“属性”面板中选择“字体”下拉列表中选择“编辑字体列表选项”。

要添加字体组合,可单击对话框中的加号按钮,若要删除字体组合,可单击减号按钮。在该对话框中的“可用字体”列表中选择所要添加的字体。 (2)设置字号

字号指的是相对缺省字体而言的字体的大小。我们可以在浏览器中使用缺省字号,可在“属性”在面板的“大小”下拉列表框中选择。 (3)设置颜色

颜色是网页外观的一个重要因素,要改变文本的颜色,可选中要设置的文本,单击“文本”→“颜色”命令。

10


Dreamweaver CS3教案设计(2).doc 将本文的Word文档下载到电脑 下载失败或者文档不完整,请联系客服人员解决!

下一篇:北师大版四年级下册语文知识点

相关阅读
本类排行
× 注册会员免费下载(下载后可以自由复制和排版)

马上注册会员

注:下载文档有可能“只有目录或者内容不全”等情况,请下载之前注意辨别,如果您已付费且无法下载或内容有问题,请联系我们协助你处理。
微信: QQ: