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

任务三完成模板应用