当前位置:首页 >> 其它课程 >>

Dreamweaver实训教案


实训一、创建个人网站
课时:2

任务一、 规划个人网站 一、提出任务
1.任务目标 规划个人网站。 2.解决的问题 通过规划个人网站了解网站主题对于网站的意义, 了解网站的栏目与目录结构之间的关 系及开发网站的常用工具软件。

二、任务内容
1.通过互联网浏览网站,总结所浏览网站的主题类型,至少找出企业宣传、

软件下载、 求职招聘、专业论坛、流行时尚、互动聊天和在线销售类型的网站各一个,记录它们的网站 名称填入教材 p4 表 JYFS1-1 中: 根据表格内的提示,使用搜索引擎查找相关类型网站。 每组 4 名同学,每人负责两个主题的网站搜索。

任务二 创建站点 一、提出任务
1.任务目标 创建个人网站站点。 2. 解决的问题 使用网页制作软件 Dreamweaver cs5,按照个人网站的制作要求创建网站站点。

二、任务内容
1.新建一个站点,名称为“pra1-1” ,使用“高级”选项卡完成新建过程,保存位置为 “D:\pra1-1” ,其他参数保持默认即可。 2.新建一个以自己姓名命名的个人站点,该站点使用“ASP JavaScript”服务器技术,暂 不设置远程信息与测试服务器,站点保存在“D:\pra1-2”文件夹中。

任务三 管理站点 一、提出任务
1.任务目标 管理个人网站站点。 2. 解决的问题 通过完成本任务学习使用 Dreamweaver cs5 进行站点管理。 3. 本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有:启动 Dreamweaver cs5,创建网站站点。

二、任务内容
1.新建站点“pra1-5” ,使用管理站点功能将其导出。将站点导出文件通过网络或移动 存储设备拷贝到其他计算机中,使用管理站点功能将其导入。 2.新建站点“pra1-3” ,使用管理站点功能复制站点“pra1-3” ,编辑复制的站点名称为 “pra1-4” ,之后删除站点“pra1-3” 。

任务四 创建网站目录结构 一、提出任务 1.任务目标 创建网站目录结构。 2. 解决的问题 本任务将使用“文件”面板,实现先前规划的网站目录结构,学习在本地站点建立文件和文 件夹的方法,管理站点内的文件。 3. 本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有:打开 Dreamweaver cs5、管理站点知识。

二、任务内容
1.使用“文件”菜单新建“ASP JavaScript”类型的动态页,文件保存为“D:/ practice 1-1.asp” ,使用属性面板修改网页标题为“ASP 网页” 。 2. 新建站点 “pra1-7” , 使用 “文件” 面板创建一个网页文件, 命名为 “practice1-2.html” , 选中该文件后使用 下拉菜单中的重命名选项,改名为“newpage.html” ,同样使用 拉菜单中的选项预览页面后删除该页面。 下

实训二、添加首页内容
课时:2

任务一 添加首页文本 一、提出任务
1.任务目标 完成首页文本内容。 2. 解决的问题 通过完成本任务学习修改网页标题,在网页中添加文本,分段换行和段内换行,输入连 续空格,保存和预览网页等知识。

二、任务内容
1 . 新 建 一 个 网 页 “ practice2-1.html ” ,将本单元素材“举一反三”文件夹中 “practice2-1.txt” 的文本内容拷贝到页面中,使用插入空格的方法修改文本,使每一行 文本中的“vs”字样达到对齐的效果。 2.新建一个网页“practice2-2.html” ,输入多行文字内容并进行分段和强制换行,修 改网页标题为“换行效果预览” ,保存后预览页面,观察在 IE 浏览器中标题在什么位置,浏 览器窗口大小发生变化时,对三种换行方式的影响。

任务二 编辑文本样式 一、提出任务
1.任务目标 完成首页文本样式设置,添加水平分隔线与列表。 2. 解决的问题 本任务通过设置首页文本样式,学习文本样式设置与应用,修改文本样式,添加水平分 隔线与列表知识。 3. 本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有:输入文本内容的方法,段内换行与划分段落方法, 输入连续空格的方法。

二、任务内容
1. 新建一个网页 “practice2-4.html” , 插入 5 条水平线, 使用属性面板进行不同的宽、 高、对齐与阴影属性设置,预览页面并比较不同属性的设置效果。 2.新建“班级荣誉”页面,文件名为“practice2-5.html” ,列举班级成员所获奖励, 设置为编号列表,修改文本样式,用不同的文本大小、颜色区分奖励的等级,保存并预览页 面。尝试先设文本样式后设编号列表有何区别。 (要求各组课下搜集班级成员获奖情况,并 制定一个设置方案)

任务三 添加图像 一、提出任务
1.任务目标 为首页添加图像内容。 2. 解决的问题 本任务通过为首页添加图像内容,学习在网页中插入图像和编辑图像的方法。

二、任务内容
1.将本单元素材文件夹中的“jyfs1.jpg”插入到一个新建页面“practice2-7.html”

中,裁剪后宽度为 200 像素,高度为 100 像素,并设置边框宽度为 5,完成后预览页面。 2.新建网页“practice2-8.html” ,插入本单元素材文件夹中的“jyfs2.jpg” ,尝试使 用 Dreamweaver 8 的图像编辑功能修改图像的亮度并进行锐化设置。

任务四 创建与应用 CSS 美化网页 一、提出任务
1.任务目标 使用 CSS 美化网页。 2.解决的问题 本任务通过为对首页进行美化,学习应用 CSS 样式。 3.本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有:在网页中输入文本内容、插入图像及水平线。

二、任务内容
1.新建网页“practice2-9.html” ,插入 3 条水平线,定义 3 种“类”样式“l1” 、 “l2” 、 “l3” 。定义过程中修改样式中的边框属性,使其拥有不同的效果,分别应用在各条水平线 上,预览页面。 2.将本单元素材“举一反三”文件夹中的网页“practice2-11.html”拷贝到 D 盘根目录 下, 定义 “标签” 样式 “p” , 设置文本大小与颜色, 保存后预览页面观察效果, 之后定义 “类” 样式“p1” ,设置不同的文本大小与颜色,并应用于页面中所插入的文本,浏览页面观察效 果,总结“类”样式与“标签”样式的区别。 3.新建网页“practice2-10.html” ,插入本单元素材“举一反三”文件夹中的“jyfs3.jpg” 和一条水平线,定义“类”样式“line1” ,修改样式中的边框属性。分别将该样式应用在页 面中的图片与水平线上,预览页面,分析样式设置的结果。

实训三、创建、编辑表格
课时:4

任务一 创建表格 一、提出任务 1.任务目标 完成“作品展示”网页中表格的创建。 2.解决的问题 通过在“作品展示”网页中创建表格理解表格布局页面的重要性,学习网页 的布局分析,掌握创建表格的几种方法。 3.本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有:在页面添加文本,设置文本格式,插入 图像,设置图像格式。 二、任务内容
1.创建网页“practice3-2.html” ,在网页中插入如图 JYFS3-1 所示的嵌套表格,保存 并预览网页。

图 JYFS3-1 2.创建网页“practice3-3.html” ,在网页中插入如图 JYFS3-2 所示的嵌套表格,保存 并预览网页。

图 JYFS3-2 3.制作一个以环保为主题的网页,首先利用已学知识设计栏目和目录结构,创建表格布局 网页。

任务二 编辑表格 一、提出任务
1.任务目标 编辑已创建成的表格。 2. 解决的问题 通过对本单元任务一创建的表格进行编辑,学习更改表格边框或背景颜色,添加、删除 行或列,调整行高、列宽及表格大小,拆分或合并单元格。 3. 本任务所涉及原有知识要点 完成本任务需要掌握以前学过的利用表格布局页面,创建表格等知识点。

二、任务内容
1.创建网页“practice3-5.html” ,插入如图 JYFS3-4 所示表格并按要求设置其属性: 宽 400 像素、 高 100 像素、 单元格间距为 5 像素、 边框粗细为 3 像素、 边框颜色为 “#FF0000” 。 表格第 1、3 列宽 100 像素、单元格的边框颜色为“#00FF00” ,第 2 列宽 100 像素、单元格 的边框颜色为“#0000FF” 。

图 JYFS3-4 2.创建网页“practice3-6.html” ,插入一个 4 行 3 列的表格,按图 JYFS3-5 所示,对 单元格进行合并与拆分。设置表格边框粗细为 1 像素、颜色为“#000000” ,将表格第 1 行的 背景颜色设置为“#3399CC” ,第 2 行与第 3 行的第一列单元格、第 4 行第 1、2 列单元格的 背景颜色设置为“#FFFFCC” 。

图 JYFS3-5 3.创建网页“practice3-7.html” ,插入 5 个表格,设置表格对齐属性及单元格内容对 齐属性,使预览效果如图 JYFS3-6 所示。

图 JYFS3-6

实训四、表格中添加内容及建立超级链接
课时:4

任务一 添加表格内容 一、提出任务
1.任务目标 在“作品展示”网页中添加表格内容。 2. 解决的问题 通过在“作品展示”网页的表格中添加内容,学习在表格中添加内容并设置格式。 3. 本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有:表格的创建和编辑。

二、任务内容
打开上一任务作业中创建的以环保为主题的网页,从互联网或其他途经搜索需要的素 材,插入到表格中,并设置相应格式。 自己搜索素材, 把素材插入到表格中并设置格式。 根据最终要完成的效果可调整素材或 单元格。若在操作单元格时遇到问题,可以考虑用“扩展”或“布局”模式来配合操作。

任务二 建立超级链接 一、提出任务
1.任务目标 完成“作品展示”网页中超级链接的添加。 2. 解决的问题 本任务将把网站中的所有网页联接起来、并把网站和 Internet 上的目标对象联接起来。 通过完成本任务要学会如何在网页中建立超级链接。 3. 本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有:在网页中添加文本对象、图像等网页元素,以及设 置这些网页元素的样式。

二、任务内容
P70 页举一反三,题 1、2、3

实训五、制作“心情日记”网页
课时:4

任务一 创建框架集 一、提出任务
1.任务目标 创建“心情日记”页面的框架结构。 2. 解决的问题 本任务通过在“心情日记”页面创建框架集并设置属性,学习创建框架集以及设置框架 集和框架属性的知识。 3. 本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有:创建网页、在网页中添加内容、添加超链接等。

二、任务内容
1.创建如下图所示的框架集网页“practice4-2.html” 。

2.创建如下图所示的框架集网页“practice4-3.html” 。

任务二

使用链接控制框架内容

一、提出任务
1.任务目标 在“心情日记”页面创建链接,使用链接控制框架内容。 2. 解决的问题 本任务通过在“心情日记”页面创建链接,学习使用超级链接控制框架内容,实现在同 一浏览器窗口中显示多个网页的功能。 3. 本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有:如何创建框架集,设置框架集和框架的属性。

二、任务内容
创建网站“pra4-3”,站点保存在“D:\pra4-3”文件夹。使用框架技术制作一个网上相 册,将自己拍摄或搜集的相片分类(至少分三类) ,把每一类相片显示在一个页面中。创建 一个“上方固定,左侧嵌套”的框架集网页“practice4-6.html” 。上部框架显示相册标题 (自定) ,左下部框架显示分类名称并添加链接,右下部框架显示相应类别的相片页面(注 意:除了框架集网页外其他网页文件名自定) 。

任务三 制作媒体日记网页 一、提出任务
1.任务目标 在网页中插入多媒体内容。 2. 解决的问题 通过完成本任务认识多媒体视频文件和 FLASH 动画文件在网页制作中的重要作用,学 习运用多媒体文件美化和丰富网页。 3. 本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有:在网页中插入图像、编辑图像,使用框架结构布局 页面。

二、任务内容
1.创建网页 “practice4-7.html” ,在网页中插入“插件” ,播放本单元素材“举一反三” 文件夹中的“Boo.wav” 。 2.创建一个网页“practice4-8.html” ,效果如图 JYFS4-5 所示,在网页下方插入“插 件” ,播放本单元素材“举一反三”文件夹中的“piantou.avi” 。 3.创建网页“practice4-9.html” ,在网页中插入“插件”播放本单元素材“举一反三” 文件夹中的“background.mid” ,要求设置循环播放。

实训六、制作“家乡山水”网页
课时:4

任务一 创建框架集 一、提出任务
1.任务目标 为景区地图中的各个景区与“景区介绍”页面中相关内容建立链接关系。 2. 解决的问题 本任务通过在“家乡山水”页面中添加热点来划分景区地图上的各个景区,为景区地图 上各个热点设置属性,链接到“景区介绍”页面中的相应位置。学习创建热点和锚记链接。 3. 本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有: 网页的基本概念以及制作网页的基本知识, 包括表 格的制作、插入图像、添加链接等。

二、任务内容
将本单元“举一反三”文件夹中的“pra5-1”文件夹拷贝到 D 盘根目录,利用图像文件 “practice5-3.jpg” ,制作一个有关荷花的简单网页“practice5-3.html” 。使用多边形热 点工具为图像中的荷花添加热点,熟悉使用指针热点工具对热点进行移动和修改大小的操 作。添加替换文本“映日荷花別样红” ,添加链接到“practice5-4.html” ,热点替换如图 JYFS5-2 所示。

图 JYFS5-2

任务二 添加和使用层 一、提出任务
1.任务目标 完成“家乡山水”页面中层的制作。 2. 解决的问题 通过完成本任务学习层的使用,并为下一个任务添加行为做准备。 3. 本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有:在网页中添加表格,在单元格中添加内容。

二、任务内容
1. 创建网页“practice5-5.html” ,使用层完成如下工作:在图像“practice5-4.jpg” 的上方叠放另一张图像 “practice5-5.gif” (所需素材在本单元素材文件夹中的 “举一反三” 文件夹中) ,完成效果如图 JYFS5-3 所示。

图 JYFS5-3 2. 创建网页“practice5-6.html” ,利用层的可重叠性,制作阴影效果的文字,如图 JYFS5-4 所示。

图 JYFS5-4

任务三 制作页面动态效果 一、提出任务
1.任务目标 为“家乡山水”网页添加动态效果。 2. 解决的问题 通过为网页元素添加动态效果,学习在网页中添加层行为以及修改删除层行为操作。 3. 本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有:在网页中添加热点、设置热点属性,添加层、设置 层属性。

二、任务内容
1 .创建网页“ practice5-10.html ” ,插入本单元素材“举一反三”文件夹中的图像 “practice5-2.jpg” ,为图像添加“弹出信息”行为,使鼠标经过图像时弹出信息“月到中秋 分外明” 。 2.创建网页“practice5-11.html” ,使用表格、层及行为创建如图 JYFS5-6 所示菜单, 鼠标移到菜单选项时显示下拉列表,移出时下拉列表隐藏,目录结构参照表 JYFS5-1。

实训七、制作“访客信息”网页
课时:4

任务一 插入表单 一、提出任务
1.任务目标 完成“访客信息”页面的制作。 2. 解决的问题 通过完成本任务,学习在页面中插入表单及表单元素,并设置表单和表单元素的属性。 3. 本任务所涉及原有知识要点

二、任务内容
完成本任务所涉及原有知识要点有:使用表格布局页面、插入图像。 1.分析教材第 166 页图 JYFS6-1 所示的“会员资料登记”页面中有哪些表单元素。 常用的表单元素有:文本框、密码框、单选按钮、复选框、按钮等。 2.将本单元“举一反三”文件夹中的网页“practice6-1.html”拷贝到 D 盘根目录,将表 单中的“单选按钮组”修改为“列表/菜单”元素, “列表/菜单”元素修改为“单选按钮组” , 并使其具有相同的功能。

任务二 检查表单 一、提出任务
1.任务目标 对“访客信息”栏目中表单输入数据的正确性进行检验。 2.解决的问题 本任务通过实现对用户输入内容进行验证,学习应用检查表单。 3.本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有:表单以及文本字段、复选框等表单元素的使用。

二、任务内容
1.利用本单元所学的知识,制作个人网站的“用户登录”网页“practice6-3.html” ,效 果如课本图 JYFS6-3 所示。设置验证规则,要求用户必须输入用户名和密码,并且其中密 码必须是数字格式,若不符合要求,则显示错误提示信息。

任务三 完成 “访客信息”网页

实训八、制作“专业教程”网页
课时:4

任务一 分析页面布局结构

任务二

练习

1.利用本单元所学的知识,制作个人网站的“用户登录”网页“practice6-3.html” ,效 果如课本图 JYFS6-3 所示。设置验证规则,要求用户必须输入用户名和密码,并且其中密 码必须是数字格式,若不符合要求,则显示错误提示信息。 制作框架页面: 1、新建网页 123.html,标题:欢迎访问新世纪课程网站。 2、选择【布局】-“框架”-“左侧和嵌套的顶部框架” ,在属性面板中,设置行值为 114 像素,列值为 200 像素。 保存全部,分别命名各框架名称:leftFrame 为 a.html、topFrame 为 b.html、mainFrame 为 c.html。 3、在 a.html 页面属性中将上、下、左、右边距全部设为 0。插入一个 6 行 1 列的表格, 表格宽度为 95%,居中对齐。 所有单元格水平居中,将第一个单元格的高度设为 20px,输入文本“学习导航” ; 其余单元格将高度设置为 50px,分别输入文字“◆知识点一” 、 “◆知识点二” 、 “◆知 识点三” 、 “◆知识点四” 、 “◆知识点五” , 并分别建立链接关系,链接路径指向要链接到的 网页,目标选择 mainFrame 框架。 4、在 b.html 页面属性中将上、下、左、右边距全部设为 0。插入一个 1 行 2 列的表格, 宽度为 100%,高度为 114px,背景颜色蓝色。 设置左单元格宽为 213px,背景图片 images/logo.gif;右单元格水平居中,输入文本“新 世纪课程网站” 。 5、在 c.html 页面属性中将上、下、左、右边距全部设为 0。在本页设置一个欢迎页面。

任务三 完成 “专业教程”网页

实训九、模板应用及网站发布
课时:4

任务一 创建网站模板
一、提出任务
1.任务目标 将第三单元创建的“作品展示”页面转存为模板文件。 2. 解决的问题 通过完成本任务,学会利用原有页面创建网站模板。

二、实训任务
1、将本单元素材“举一反三”文件夹中的“pra7-1”文件夹复制到 D 盘根目录下,创 建站点“pra7-1” ,文件存储在“D:\pra7-1”,使用“文件”菜单中的“新建”选项,新建一 个 HTML 类型模板“pra7-1.dwt” ,效果如下图所示。提示:所用背景图像在“pra7-1\images” 文件夹中,页面使用表格布局。 2. 将本单元素材“举一反三”文件夹中的“pra7-2”文件夹拷贝到 D 盘根目录下,创 建站点“pra7-2” ,将页面“pra7-2. html” ,另存为模板“pra7-2.dwt” ,在表格“table_edit” 中添加可编辑区域“edit7-2” ,如下图所示,保存模板。

任务二 套用模板
一、提出任务
1.任务目标 将任务一中创建的模板套用到网站中的 “首页” 、 “家乡山水” 、 “景区介绍” 、 “访客信息” 和“作品展示”页面,并修改相关页面及文本中的内容。 2. 解决的问题 通过完成本任务,学会将模板文件套用到已存在的网页,使风格一致。 3. 本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有:在“CSS 样式”面板中删除样式,选中及删除表格, 修改网页标题,为文本添加超级链接。

二、实训任务
1.将本单元素材“举一反三”文件夹中的“pra7-3”文件夹拷贝到 D 盘根目录下,创 建站点“pra7-3” ,使用模板“pra7-3.dwt”创建两个新页面,将文件夹中的文本文件内容拷 贝到两个页面的可编辑区域,分别保存为“pra7-3.html” 、 “pra7-4.html” 。为文件夹中已有页 面“pra7-5.html” 、 “pra7-6.html”套用模板。 2.编辑站点“pra7-3”中的模板文件,为其添加相应的超级链接,保存后预览整个站 点。

任务三 完成模板应用


相关文章:
DW教案
《网页设计 Dreamweaver CS3》教案教学 课题 教学 内容 教学 目的 教学 重点 ...(.PPT); 实训:学生上机操作 演示设计 板书设计 教学过程 现在的科技如此发达,...
Dreamweaver全套教案
课题 认识 Dreamweaver 一、学习目的 了解 Dreamweaver,学会利用 Dreamweaver 制作网页。 二、学习内容 Dreamweaver 的基本知识。 【学习步骤】 1、 Dreamweaver 的功能...
DW实训案例制作过程2
《静态网站设计与制作实训》 案例制作步骤本案例把前面学习的零碎内容串联起来, ...下面以在 E 盘建立一个 myweb 文件夹为例,在 dreamweaver(简称 DW)里创建 ...
Dreamweaver 项目教学教案
Dreamweaver 项目教学教案 隐藏>> 第4讲实训日期 实训日期: 21012 年 3 月 30 日 2 节课 日期 实训题目:表格──布局商务网页 实训题目: 题目 知识与技能: ...
flash实验教案
flash实验教案_文学_高等教育_教育专区。《Dreamweaver 网页制作》精品课 实验教案...初步理解团队协作 【实验难点】 理解规划过程规范化的重要性 【实训教学方法】 ...
《网页制作》项目式教案_图文
4、通过实训让学生进一步熟悉所学知识。 作业布置 新建悠悠我心的站点,导出,...16页 1下载券 Dreamweaver网页制作教案... 42页 免费 ...
dw实训案例制作过程1
《静态网站设计与制作实训》 案例制作步骤本案例把前面学习的零碎内容串联起来, ...下面以在 E 盘建立一个 myweb 文件夹为例,在 dreamweaver(简称 DW)里创建 ...
DreamWeaver教案
DreamWeaver教案_计算机软件及应用_IT/计算机_专业资料 暂无评价|0人阅读|0次下载|举报文档 DreamWeaver教案_计算机软件及应用_IT/计算机_专业资料。第一部分 网页...
Dreamweaver教案5
Dreamweaver教案5_中职中专_职业教育_教育专区。教计算机专业 章节 课题 教学目的教学重点教学难点技能课型板书设计 本章学习目标 学会第 15 例在 Dreamweaver 中插入...
Dreamweaver教案3
Dreamweaver教案3_中职中专_职业教育_教育专区。教计算机专业 章节 课题 教学目的教学重点教学难点技能课型板书设计 2006 年 3 月 17 日第 11 例 在网页中插入...
更多相关标签:
dreamweaver实训报告 | dreamweaver教案 | dreamweaver cs6教案 | dreamweaver cs5教案 | dreamweaver8 教案 | 汽车二级维护实训教案 | 钳工实训教案 | 实训课教案 |