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”，修改样式中的边框属性。分别将该样式应用在页面中的图片与水平线上，预览页面，分析样式设置的结果。