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

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”中的模板文件,为其添加相应的超级链接,保存后预览整个站 点。

任务三 完成模板应用


相关文章:
Dreamweaver实训教案
Dreamweaver实训教案_理学_高等教育_教育专区。教学课题 课时 2 学时 实验一 创建站点、页面控制 (1)熟悉 Dreamweaver 8 的界面布局和工作环境。 (2)熟练掌握本地...
网页设计实训教案
网页设计实训教案_互联网_IT/计算机_专业资料。网页设计实训教案 ...使用 Dreamweaver 或其它网页制作工具对页面内容进行更改; 3.经审核无误后上传...
DW教案
《网页设计 Dreamweaver CS3》教案教学 课题 教学 内容 教学 目的 教学 重点 ...(.PPT); 实训:学生上机操作 演示设计 板书设计 教学过程 现在的科技如此发达,...
网站建设 实训教案
石家庄计算机职业学院 教案(实训教案)编写格式与基本要求一、概念 实训教案又称...(9) 选中【缓存】复选框后,Dreamweaver MX 会给这个本地站点设置一个缓存, ...
中文版Dreamwever 8网页制作基础与实训教案
中文版Dreamwever 8网页制作基础与实训教案_经济学_高等教育_教育专区。中文版Dreamwever 8网页制作基础与实训教案Dreamweaver8 网页制作基础与实训》教案一、培养目...
《网页制作》项目式教案
4、通过实训让学生进一步熟悉所学知识。 作业布置 新建悠悠我心的站点,导出,...16页 1下载券 Dreamweaver网页制作教案... 42页 免费 ...
Dreamweaver全套教案
课题 认识 Dreamweaver 一、学习目的 了解 Dreamweaver,学会利用 Dreamweaver 制作网页。 二、学习内容 Dreamweaver 的基本知识。 【学习步骤】 1、 Dreamweaver 的功能...
Dreamweaver 项目教学教案
Dreamweaver 项目教学教案 隐藏>> 第4讲实训日期 实训日期: 21012 年 3 月 30 日 2 节课 日期 实训题目:表格──布局商务网页 实训题目: 题目 知识与技能: ...
网页设计实训
《网页设计实训》课程标准 适用专业:电子商务 总学时数:28 学分数:7 实践课时:28 一、理论教学部分 (一)课程的性质和任务 1.课程性质: 《Dreamweaver 网页设计...
更多相关标签:
dreamweaver实训报告 | dreamweaver教案 | 初识dreamweaver 教案 | dreamweaver cs5教案 | dreamweaver cs6教案 | 微笑礼仪实训教案 | 实训课教案 | 钳工实训教案 |