DW教案

  • 格式:doc
  • 大小:2.29 MB
  • 文档页数:97

教案
课程名称Dreamweaver CS5网页设计
授课教师王丽
授课班级计算机131、计算机132、计算机133授课时间:2013至20 14学年度第 1 学期
项目评估(样表)
班级______ 姓名:________ 时间________ 总得分:___________
注:自评、小组评、教师评的满分各是100分,每个学生的最后得分=自评×30%+小组评×30%+教师评×40%
《网页设计Dreamweaver CS5》教案
二、网页的基本构成要素
《网页设计Dreamweaver CS3》教案
成修改。

步骤三:创建文件夹。

在站点的根本件夹中可以创建若干子文件夹。

我们要建设一个完整、成功的网站,其中必然要包含很多内容,如:网页文件、图片文件、声音文件、动画文件等等。

为了方便开发者分类管理、维护这些文件,使得站点中各类文件的存放有条理性、结构性,可以通过在站点根文件夹中建立若干子文件夹的形式,对各种类型的文件分类保存管理,如:建立images文件夹来存放图片文件;建立music
音文件等等。

当然也可以按照其他方法分类进行保存管理
步骤四:创建网页文件。

在站点的根本件夹中创建一个空白页面并命名,本例中重新将网页文件命名为index.html,该名称在站点中一般作为首页的名称。

当然,除了可以直接在站点根文件下创建网页外,还可以在根文件夹中的子文件夹里创建网页。

【知识链接】
Dreamweaver简介
三、创建站点的必要性
Dreamweaver中的站点可组织与网站相关的所有文档,跟踪和维护链接,管理文件,共享文件以及将站点文件传输到Web Dreamweaver 站点根据站点中文件的存放地点,可以分为本地站点和远程站点,本教材中所有项目中所建立站点均为本地站点。

四、首页和网站结构
通常所说的网站是由一个或多个网页组成的,而进入网站时首先打开的网页称为首页或主页。

按照行业习惯命名为“index.htm”(“index.html default.htm”(“default.html”)。

本书中站点首页名称一律采用了为。

网站结构图:
主页
《网页设计Dreamweaver CS5》教案
【项目目标】
•能新建并保存网页文件
•能掌握普通文本的输入方法、复制、粘贴。

•能设置页面背景
•插入图像,图像对齐方式设置。

步骤四:插入水平线
步骤五:插入特殊字符和日期
《网页设计Dreamweaver CS5》教案
【项目目标】
•能正确插入普通图像
•能合理设置图像属性
制作要点提示
1.创建一个本地站点并且新建一个子文件夹images来管理素材文件
2.新建一个网页,保存网页文件,将其命名为“index.html”
3.插入一个3行3列的表格
4.在每个单元格中分别插入一幅图像
5.保存文件,预览最终效果
《网页设计Dreamweaver CS5》教案
【项目目标】
•能正确插入Flash动画
•能掌握Flash对象的插入方法
•能学会视频的插入
•能正确添加背景音乐
【项目分析】
具体工作任务:
1.一个网页,主题为“与青春有约”
2.置页面背景,使效果更加完美
3.入文字,进行适当的格式化设置
4.入Flash动画,设置对齐方式,放置一个合适位置
5.Flash文本,内容为版权信息,设置动态变换方式
6.入Flash按钮,设置链接
7.置背景音乐
8.入视频
操作方法:选中要编辑的插件,然后编辑、修改插件属性面板的参数。

【知识拓展】
制作要点提示
1.创建一个本地站点并且新建两个子文件夹和音频文件。

2.新建一个网页,将其命名为“index.html”
3.插入一个1行1列的表格
4.插入一幅图像
5.插入一个1行2列的表格
6.输入相应文本
7.插入一个FLASH文本
8.插入一个FLASH按钮
9.插入一个FLASH对象
10.添加背景音乐
11.保存文件,预览最终效果
教学小结本项目中主要介绍了如何制作一个多媒体页面,通过
Flash按钮、Flash文本、视频和音频的使用,使网页更加生动。

学习指导指导学生如何制作一个多媒体页面,
Flash文本、视频和音频的使用,使网页更加生动
《网页设计Dreamweaver CS5》教案
【项目目标】
•能理解绝对路径和相对路径
•能知道链接的类型
•能创建页面链接
•能创建电子邮件链接
【知识拓展】拓展项目展示:
制作要点提示
1.创建站点并编辑站点首页
2.创建第一个二级页面
3.创建第二个二级页面
教学小结本项目主要介绍了网页中超链接的相关知识和使用方法,包括页间链接、页内链接、电子邮件链接和图像热点链接。

学习指导指导学生进行网页中超链接的相关知识和使用,页内链接、电子邮件链接和图像热点链接
参阅教材网页制作基础教程Dreamweaver 8版
《网页设计Dreamweaver CS5》教案
通过表格对话框可以设置表格的属性,主要包括表格大小、页眉、辅助功能三部分。

可以设置表格的行数、列数、行宽、列高、间距、边框、对齐方式、背景色等属性。

可以设置单元格的宽度、高度、背景、对齐方式、单元格内字体的样式等属性。

【知识拓展】
拓展项目展示:
制作要点提示
1.新建站点并编辑保存首页
2.创建第一个二级页面
3.创建第二个二级页面
4.创建超链接
5.预览最终效果
《网页设计Dreamweaver CS5》教案
【项目目标】
•能正确插入表单
•能合理使用表单中的各种元素
•能使用表格排版布局表单中的元素•理解表单的用途
【项目分析】
具体工作任务:
1.制作一个网页,主题为“注册页面”
步骤四:插入各种表单元素
在布局表格的相应单元格中插入表单元素,效果如图
步骤五:保存文件,预览最终效果
【知识链接】
一、表单的用途
制作要点提示
1.建立页面文件“baoming.html”
2.插入一个表单
3.插入表格,利用表格排版布局页面
4.表格的适当单元格中插入图片美化页面
5.在表格的适当单元格中设置背景图片美化页面
6.插入各种表单元素
《网页设计Dreamweaver CS5》教案
【项目目标】
1.能了解布局表格和布局单元格
2.能绘制布局表格
3.能绘制布局单元格
4.能移动布局单元格
5.能调整布局表格和布局单元格的大小
6.能设置布局表格和布局单元格的属性
7.能绘制嵌套布局表格
【项目分析】
具体工作任务:
1.创建一个网站,主题为“落雪的个人网站”。

2.切换到布局模式。

3.运用表格的布局模式布局网页。

2.创建一个布局表格,在布局表格中再绘制2个布局单元格,在每个单元
3.创建一个布局表格,在布局表格中再绘制3个布局单元格,在每个单元格中插入相应图片,如下图所示:
步骤三:保存文件,预览最终效果。

【知识链接】
四、设置布局单元格属性
【知识拓展】
制作要点提示
1.创建站点并建立网页
2.使用表格的布局模式布局页面,创建合理的布局表格并绘制相应的布局。