网页制作电子教案项目备课

第一篇：网页制作电子教案项目备课

项目二 网页制作基础

【项目描述】

中文版Dreamweaver8是目前比较流行的网页制作工具。本项目主要介绍中文版Dreamweaver8的工作窗口及使用方法，以及HTML的基本结构。【教学目标】

1.安装Dreamweaver8，介绍其工作窗口及使用方法。

2.学会定义本地站点，并讲解规划站点结构的原则，在站点中搭建模拟结构。3.Html代码的基本结构。【项目分配】

任务一 认识Dreamweaver8。（1课时）

任务二创建本地站点，搭建模拟结构。（2课时）

任务三html代码的基本结构。（2课时）

任务一：认识Dreamweaver8（1课时）

一、教材分析：

中文版dreamweaver8是目前比较流行的网页制作工具。主要介绍中文版dreamweaver8的工作窗口以及其使用方法

二、学情分析：

本班学生都是刚接触到dreamweaver8，对于本节课知识兴趣浓厚，学习积极性高。

三、教学目标：

知识目标：初步了解中文版dreamweaver8的工作窗口、工具栏、文档窗口、浮动面板、菜单和辅助设计工具。

情感目标：通过本节课的学习使学生掌握知识的同时，提高他们的自学能力。

能力目标：通过本节课的学习培养学生动手操作能力。

四、教学重点

掌握中文版dreamweaver8的8的工作窗口、工具栏、文档窗口、浮动面板、菜单和辅助设计工具、属性面板和浮动面板显示及使用。

五、教学难点

快捷工具栏的显示及组成、使用，浮动面板的显示与隐藏菜单和辅助设计工具的作用 教学方法与过程：

（一）导入新课：提问学生对网站的了解，internet网与我们生活的联系 及重要性。引发学生思考，带着颖问进入教学课题。

（二）揭示课题：网站大部分都是由Dreamweaver8 制作出来的这节课我们就来“认识Dreamweaver8”

（三）教师演示：

1.启动Dreamweaver8从开始菜单启动，出现工作区设置对话框，选择设计器工作区。设计 器是标准的工作区。

2.Dreamweaver8工作界面认识Dreamweaver8工作界面，对掌握和提高制作效率是关键的一步。（1）标题栏：左侧有网页标题，所在位置及文件名称，右侧有最小化，最大化

和关闭。（2）菜单栏：有“文件”、“编辑”、“查看”、“插入”、“修改”、“文本”、“命令”、“站点”、“窗口”、“帮助”。（3）快捷工具栏：选择“查看”中的“工具栏”，勾选“插入”、“文档”、“标准”三项，完整的快捷工具栏就显示出来。

3.网页编辑窗口快捷工具栏下面的区域就是“网页编辑区域”。在启动Dreamweaver8时将显示一个“起始页”，包括“打开最近项目”、“创建新项目”、“从范例创建”三个方便实用的项目。可以勾选“不再显示此对话框”使它隐藏。用户可以在文档区域中进行输入文字，插入表格和编辑图片等操作。

4.属性面板网页设计中的对象都有各自的属性，属性面板的设置项目会根据对象不同而变化。

5.浮动面板根据面板的特性命名，浮动于编辑窗口之外。在窗口菜单中单击不同的命令可以打开不同的面板。在“窗口”中选择“排列面板”能够整齐地摆放在屏幕上，按F4可以隐藏和显示面板。

任务二创建本地站点，搭建模拟结构

（2课时）

一、教材分析：

掌握站点的创建方法，使用向导和高级模式设置本站点。学会建 立站点文件和文件 夹结构及管理本地站点

二、学情分析：

本班学生都是刚接触到dreamweaver8，在学习站点的建立所以能够提高学生学习兴 趣，充分发挥学生学习的积极性。

三、教学目标：

知识目标：掌握站点的创建方法，使用向导和高级模式设置本站点。学会建立站点文件和文件夹结构及管理本地站点

情感目标：通过本节课的学习使学生掌握知识的同时，提高他们的学习兴趣。

能力目标：通过本节课的学习培养学生动手操作能力。

四、教学重点：站点的创建方法、建立站点文件和文件夹结构

五、教学难点：站点的创建方法、管理本地站点

六、教学方法与过程

多媒体演示，教师讲解：

（一）创建站点

要制作一个能够被公众浏览的网站，首先需要在本地磁盘上制作这个网站，然后把这个网站上传到Internet的Web服务器上，放置在本地磁盘上的网站被称为本地站点，处于Internet上的Web服务器里的网站被称为远程站点。Dreamweaver8提供了对本地站点和远程站点强大的管理功能。

Dreamweaver8可以有效地建立并管理多个站点，搭建站点有两种方法：一是使用向导完成；二是利用高级设定完成。

（二）向导搭建站点

1.在“窗口”菜单中的“文件”面板中选择“管理站点”，2.选择“新建”/“站点”打开对话框，有“基本”和“高级”两个标签，选择“基本”。

3.在站点定义对话框中根据向导一步步操作，“输入网站名称”“是否使作服务器技术”、“选择编辑方式（编辑网页的本地副本，完成后上传。或使用本地网络直接在服务器上进行编辑。）”、选“存储位置”、“配置远程站点（选无，网站建设完成后再FTP上传。）”

完成设置，在“文件”面板中显示出刚建立的站点。

（四）管理本地站点

通常，dreamweaver8站点管理器都要对多个网站进行管理，这就需要专门的工具来完成站点的切换，添加、删除等操作，打开“文件”面板，在下拉菜单中选“管理站点”，可打开多站点管理面板。

用dreamweaver8编辑网页或进行网站管理时，每次只能操作一个站点，可选其它站点切换操作编辑。

在管理站点中，可复制站点，删除站点（文件保存在硬盘上不会被删），可导入，导出（导出为一个XML文件。）

任务三html代码的基本结构

（2课时）

一、【教学目标】

知识目标：介绍html网页的编写方法，介绍网页命名规则和html代码的基本结构。技能目标：掌握html代码的基本结构后，能在Dreamweaver8的“代码”面板，建立第一个网页页面。

情感目标：通过本次学习后，能培养学生对网页制作软件的进一步了解，增强学生学习网页设计的兴趣和欲望，熟知网页制作软件给我们设计网页带来的便捷。

二、【教学重点】

1．Html的基本概念。2．html网页的编写方法。3.建立第一个网页页面。

三、【教学难点】

html网页的编写方法。

四、【教学过程】

（一）明确项目任务（包括了导入项目任务和布置项目任务）

上节课，我们学习了创建本地站点、搭建模拟结构，我们先一起在Dreamweaver中搭建起我们的站点结构。结构搭建好了，我们今天就一起来做网页吧！

（二）制定项目实施计划（项目实施）

1．教师讲解示范：在桌面上展示一张简单网页，查看其源代码，和学生一起来分析，看看能发现什么问题。引出我们html代码的写法。详细介绍网页命名规则和html代码编写规则。

2．学生活动：学生小组讨论，分析源代码的特点。教师做好对学生的辅导检查，对做的好的学生给予鼓励。

3．教师讲解示范：制作一张简单网页。在Dreamweaver中创建一张网页：“文件”---“新建”--“html”，在“代码”面板逐个讲解作用功能，完成第一张网页。

4．学生活动：请一个小组上台演示，完成第一张网页,保存网页，在浏览器预览网页。教师做好对学生的辅导检查，对做的好的学生给予鼓励。

5．教师讲解示范：为网页添加标题。观察浏览器中显示出标题，引出中的