网页制作项目实训教程项目2制作包含图片与超链接的网页 教案(表格式)高教版

资源下载
  1. 二一教育资源

网页制作项目实训教程项目2制作包含图片与超链接的网页 教案(表格式)高教版

资源简介

《网页制作项目实训教程》目录
教学 课题 任务1 活动1 在网页中使用图片
课题 类型 理论+实作 课时 安排 2 上课 时间
教 学 目 标 1.了解图像占位符 2.掌握如何在网页中插入图片 3.掌握鼠标经过图像的创建操作 4.掌握如何将图像设置为网页背景
教学 重点 2、3、4 教学 难点 2、3
辅助 资源 课件、多媒体、网络
复习引入 1.设置编号列表。 2.如何更改编号列表的类型?
教学 手段 教学过程 师生互动 活动设计
课件 讨论 实作 课件 举例 讨论 课件 实作 一、教师布置活动要求 1、创建一个名称为“项目2-1”的本地站点,本地站点文件夹为D盘下的“Task2-1”文件夹,默认图像文件夹路径设置为D:\Task2-1\images。 2、如下图所示,新建一个网页文件,输入文字、添加图片和各种图像对象并设置网页的背景,最后将网页文件以“task2-1-1.html”为文件名保存到“项目2-1”站点根目录下。 二、师生讨论学习新知识 1、直接添加图片 图片在网页中的第1种使用方法是直接添加,网页中能添加的图片文件格式比较多,常见的格式有以下3种:JPG、GIF、PNG。 2、插入图像占位符 图片在网页中的第2种使用方法是插入图像占位符,在网页文档中添加图片时,如果图片不确定或者还没设计出来,但可以确定图片的位置、尺寸时,可以先在该位置上插入临时的“图像占位符”进行占位,然后等图片确定后再进行替换。 3、创建鼠标经过图像 图片在网页中的第3种使用方法是创建鼠标经过图像,鼠标经过图像由原始图像和鼠标经过图像两部分组成,当鼠标光标在图片范围之外时显示原始图像,当鼠标光标经过图片时显示鼠标经过图像。 4、将图片设置为网页的背景 图片在网页中的第4种使用方法是将图片设置为网页的背景,依次单击“修改”->“页面属性”菜单命令(或按Ctrl+J键),选择一张图片作为网页的背景。 三、教师演示活动实施过程并让学生完成活动任务 1、打开Dreamweaver CS6软件,依次单击“站点”-> “新建站点”菜单命令,在打开的“站点设置对象”对话框中设置站点名称为“项目2-1”,点击“本地站点文件夹”文本框后面的“浏览文件夹”按钮,在打开的对话框中选择D盘,然后在D盘新建一个文件夹“Task2-1”。 2、单击“高级设置”-> “本地信息”选项,点击“默认图像文件夹”文本框后面的“浏览文件夹”按钮,定位到D盘的“Task2-1”文件夹,在“Task2-1”文件夹中再新建一个子文件夹“images”,以后网页中添加的图片都会自动保存在“images”文件夹中,最后点击“保存”即可。 3、新建一个HTML文档,将新建的HTML文档切换至“设计”视图模式,并以“task2-1-1.html”为文件名保存。 4、在“文档工具栏”中的“标题”文本框中,将“无标题文档”更改为“网页图片的使用”。 5、在文档窗口中输入相应的文字,并将输入的文字设置为“标题3”格式,按Shift+回车键换行,单击“插入”-> “图像”菜单命令(或单击“常用”工具栏中的“图像”按钮,或按快捷键Ctrl+Alt+I)。 6、在“选择图像源文件”对话框的查找范围中选择图片所在的位置,图片素材在“Chapter02\素材文件\任务1\活动1\双11.jpg中,点选需要插入的图片。 7、在弹出的“图像标签辅助功能属性”对话框中,补充信息,其中 “替换文本”的作用是当浏览网页图片无法显示或者当鼠标指向图片时就会显示所输入的内容,“详细说明”文本框可输入图片的详细位置,方便网页开发者查阅、修改。 8、在图片的最右侧按回车键,输入相应的文字,并将文字设置为“标题3”格式,按Shift+回车键换行,单击“插入”-> “图像对象”-> “图像占位符”菜单命令(或单击“常用”工具栏中的“图像占位符”按钮),输入名称、宽度、高度、设置颜色和替换文本,再点击“确定”。 9、图像占位符上显示了图片的名称以及大小,在图像占位符的区域内双击,在对话框的查找范围中选择图片所在的文件夹,点选需要插入的图片即可替换图像占位符,图片素材在“Chapter02\素材文件\任务1\活动1\双12.jpg中。 10、在第2张图片的最右侧按回车键,输入相应的文字,并将文字设置为“标题3”格式,按Shift+回车键换行,单击“插入”-> “图像对象”-> “鼠标经过图像”菜单命令(或单击“常用”工具栏中的“鼠标经过图像”按钮),在弹出的对话框中设置“原始图像”、“鼠标经过图像”的图片,图片素材在“Chapter02\素材文件\任务1\活动1\行李箱.jpg和女包.jpg”中,然后再设置“替换文本”、“前往的URL”中设置链接网址,最后单击“确定”即可。 11、单击“修改”-> “页面属性”菜单命令(或者按快捷键Ctrl+J),在弹出的“页面属性”对话框中点击“背景图像”后面的“浏览”按钮,在“选择图像源文件”对话框中找到要设为背景的图片文件,图片素材在“Chapter02\素材文件\任务1\活动1\网页背景.gif”中,并单击“确定”按钮。 12、保存网页文件并在浏览器中浏览网页效果。 布置任务:让学生明确本次课的内容 讨论:如何实现该案例效果 阅读知识窗:插入图片与图像点位符;鼠标经过图像;将图片设置为网页背景 演示:教师演示活动实施过程 实训活动:学生练习及点评
作业 布置 填写提交实训报告和实训表格 预习作业:预习下一节内容
教学 后记
教学 课题 任务1 活动2 制作图书介绍页
课题 类型 理论+实作 课时 安排 2 上课 时间
教 学 目 标 1.掌握标签 2.了解图片的编辑操作
教学 重点 1、2 教学 难点 1
辅助 资源 课件、多媒体、网络
复习引入 1.插入图片与图像占位符。 2.插入鼠标经过图像。 3.将图片设置为网页背景。
教学 手段 教学过程 师生互动 活动设计
课件 讨论 实作 课件 举例 讨论 课件 实作 一、教师布置活动要求 如下图所示,完成图书介绍网页的制作,完成后以“task2-1-2.html”为文件名保存到“项目2-1”站点根目录下。 二、师生讨论学习新知识 1、图片的HTML标签,如下图所示。 “”代表图片,是单标签,以 / 结束; “src”代表图片的存放路径; “alt”代表替换文本,用来设置当前鼠标移到图片上所显示的提示文本; “width”代表图片的宽度,默认单位是像素; “height”代表图片的高度,默认单位是像素; “align”代表图片的对齐方式,常见的值可以设置为:top(顶端)、bottom(底部)、middle(中间)、left(左对齐)、right(右对齐); “hspace”代表图片左侧和右侧的水平边距,默认单位是像素; “vspace”代表图片顶部和底部的垂直边距,默认单位是像素。 2、图片的简单编辑 网页中的图片除了可以通过HTML标签进行设置以外,也可以通过属性栏中各个选项进行处理,同时还有一些内置工具可以对图片进行简单编辑。 三、教师演示活动实施过程并让学生完成活动任务 1、打开Dreamweaver CS6软件并新建一个HTML文档,将新建的HTML文档切换至“设计”视图模式,并以“task2-1-2.html”为文件名保存到“项目2-1”站点根目录下。 2、在“文档工具栏”中的“标题”文本框中,将“无标题文档”更改为“图书简介”。 3、在文档窗口中输入文字“图书简介”,选择文字,在“属性”面板的“格式”下拉列表框中选择“标题1”。 4、按回车键插入一张图片(素材在Chapter02\素材文件\任务1\活动2\图书.png),输入“替换文本”和“详细说明”。 5、用鼠标点击选中图片,在“属性”面板中锁定尺寸约束,将图片的宽设置为350px。 6、将光标定位在图片右侧按回车键,输入相应文本,冒号前的文字加粗(快捷键Ctrl+B),选中所有文字,然后单击“属性”面板上的“项目列表”按钮,“格式”选择“段落”。 7、鼠标选中图片右击,在弹出的快捷菜单中选择“对齐”,选择“左对齐”。 8、观察和调整图片与文字的距离,鼠标选中图片右击,在弹出的快捷菜单中选“编辑标签”,设置“水平边距”和“垂直边距”的值,并保存网页。 布置任务:让学生明确本次课的内容 讨论:如何实现该案例效果 阅读知识窗:标签;图片的简单编辑 演示:教师演示活动实施过程 实训活动:学生练习及点评
作业 布置 填写提交实训报告和实训表格 预习作业:预习下一节内容
教学 后记
教学 课题 任务2 活动1 在网页中添加音频与视频
课题 类型 理论+实作 课时 安排 2 上课 时间
教 学 目 标 1.了解常用的音频格式 2.掌握如何在网页中添加音频 3.掌握如何在网页中添加视频
教学 重点 2、3 教学 难点 3
辅助 资源 课件、多媒体、网络
复习引入 1.标签。 2.图片的编辑操作。
教学 手段 教学过程 师生互动 活动设计
课件 讨论 实作 课件 举例 讨论 课件 实作 一、教师布置活动要求 1、创建一个名称为“项目2-2”的本地站点,本地站点文件夹为D盘下的“Task2-2”文件夹,默认图像文件夹路径设置为D:\Task2-2\images。 2、如下图所示,完成音乐页面的制作,完成后以“task2-2-1.html”为文件名保存到“项目2-2”站点根目录下。 二、师生讨论学习新知识 1、网页中常用的音频文件格式:MP3格式、WAV格式、MIDI格式。 2、网页中添加音频文件的方法 在网页中添加音频文件的方法有两种:一是背景音乐,二是插件形式。 (1)为网页添加背景音乐 音频文件可以以背景音乐的形式添加到网页中,在预览网页时背景音乐会自动播放,其HTML标签如下图所示。 (2)通过插件添加音频 在Dreamweaver CS6还可以通过插件的方法在网页文档中添加音频,在预览页面中会出现一个播放控件,通过该控件可以进行暂停、播放、停止、调整音量等操作,其HTML标签如下图所示。 3、网页中添加视频文件的方法 浏览器可以播放的视频格式有MP4、MOV、AVI、FLV等,可以通过插件方式添加视频,其添加方法、HTML标签和音频类似。 此外,有FLV是Flash的视频文件,在网页中以SWF组件显示,将光标移至要插入FLV视频的位置,选择“插入”菜单中选择“媒体”中的FLV命令,打开“插入FLV”对话框,分为两种视频类型:累进式下载视频与流视频。 三、教师演示活动实施过程并让学生完成活动任务 1、打开Dreamweaver CS6软件并新建一个HTML文档,将新建HTML文档切换至“设计”视图模式,并以“task2-2-1.html”为文件名保存到站点为“项目2-2”的站点根目录下。 2、在“文档工具栏”中的“标题”文本框中,将“无标题文档”更改为“音乐网页”。 3、将光标定位在网页的空白处,依次单击“插入”->“标签”菜单命令,打开“标签选择器”对话框,选择“HTML标签”选项,再选择“页面元素”选项,然后在右侧的列表中选择“bgsound选项”,单击“插入”按钮。 4、在弹出的“标签编辑器-bgsound”对话框中,点击“源”选项的“浏览”文件夹按钮,选择音频文件(素材在Chapter02\素材文件\任务2\活动1\茉莉花纯音乐.mp3),在弹出的“您愿意将该文件复制到根文件夹中吗?”对话框中选择“是”。 5、在“循环”下拉列表中选择“无限(-1)”选项,单击“确定”按钮,返回“标签选择器”对话框,单击“关闭”按钮完成背景音乐的添加。 6、切换回“设计视图”,在第一行文字“我的音乐”,文字格式为标题2,按回车键,添加一张名字为“祖国.jpg”图片,按Shfit+回车键换行,依次单击“插入”-> “媒体”-> “插件”菜单命令,找到一个名字为“我和我的祖国.mp3”音频文件,素材都在“Chapter02\素材文件\任务2\活动1”文件夹中. 7、选中插入的音频控件,在“属性”面板中设置“宽”为“650”,“高”为“60”,点击“参数”选项,弹出对话框点击“+”按钮,添加“参数”为“autostart”,“值”为“false”。 8、在音频控件的右侧按回车键,输入文字“我的视频”,文字格式为标题2,再按回车键,依次单击“插入”-> “媒体”-> “FLV”菜单命令。 9、弹出“插入FLV”对话框,在“视频类型”下拉列表框中选择“累进式下载视频”,“URL”选项点击“浏览”按钮找到名字为“北京欢迎你.flv”视频文件,素材在“Chapter02\素材文件\任务2\活动1”文件夹中,点击“检测大小”按钮。 10、保存网页文件并在浏览器中浏览网页效果,其中背景音乐会自动播放,以插件方式添加的音乐和FLV视频文件点击“播放”按钮播放。 布置任务:让学生明确本次课的内容 讨论:如何实现该案例效果 阅读知识窗:添加音频文件;添加视频文件 演示:教师演示活动实施过程 实训活动:学生练习及点评
作业 布置 填写提交实训报告和实训表格 预习作业:预习下一节内容
教学 后记
教学 课题 任务2 活动2 在网页中添加Flash动画
课题 类型 理论+实作 课时 安排 2 上课 时间
教 学 目 标 1.了解Flash动画的格式 2.掌握如何在网页中添加Flash动画
教学 重点 1、2 教学 难点 2
辅助 资源 课件、多媒体、网络
复习引入 1.在网页中添加音频文件。 2.在网页中添加视频文件。
教学 手段 教学过程 师生互动 活动设计
课件 讨论 实作 课件 举例 讨论 课件 实作 一、教师布置活动要求 如下图所示,完成Flash动画和设置SWF文件透明背景效果页面的制作,完成后分别以“task2-2-2.html”、“task2-2-3.html”为文件名保存到站点为“项目2-2”的“Task2-2”根文件夹中。 二、师生讨论学习新知识 在Dreamweaver CS6中,Flash动画将声音、图像和动画等内容加入到一个文件中,能制作出炫酷的动画效果,而且文件容量较小,是网页制作中上最流行的多媒体插件之一。Flash动画主要有两种格式: .fla格式:Flash软件创建的源文件,只能在Flash软件中打开和编辑,不能在Dreamweaver或浏览器中打开。要在Dreamweave进行添加Flash动画,需要在Flash软件中将Flash源文件导出为.swf格式的文件。 .swf格式:Flash软件导出的电影文件,可以在浏览器中播放,也可以在Dreamweaver中预览,但不能进行编辑。.swf格式文件可以用Adobe Flash Player打开,浏览器必须安装Adobe Flash Player插件。在Dreamweaver CS6中,其主要属性有: Flash ID:可以输入SWF影片文件唯一的名称; 宽和高:默认单位像素,设置SWF影片文件的尺寸; 文件:指定SWF影片文件的路径; 背景颜色:设置SWF影片文件动画区域的背景颜色; 循环:选中则连续播放,不选只播放一次停止; 自动播放:选中浏览网页时则会自动播放该影片; 垂直边距、水平边距:设置影片上下、左右空白区域的像素数; 品质:有低品质、自动低品质、自动高品质、高品质4个选项; 比例:设置SWF影片文件显示的尺寸,有(默认)全部显示、无边框、严格匹配3种选项; 对齐:设置SWF影片文件在网页中的对齐方式; Wmode:设置SWF影片文件是否透明显示,默认是不透明显示。 三、教师演示活动实施过程并让学生完成活动任务 1、打开Dreamweaver CS6软件并新建一个HTML文档,将新建的HTML文档切换至“设计”视图模式,并以“task2-2-2.html”为文件名保存到站点为“项目2-2”的“Task2-2”根文件夹中。 2、在“文档工具栏”中的“标题”文本框中,将“无标题文档”更改为“房产Flash广告”。 3、在文档窗口中输入文字“房产Flash广告”,选择文字,在“属性”面板的“格式”下拉列表框中选择“标题2”。 4、文字右侧按回车键,依次单击“插入”->“媒体”-> “SWF”菜单命令(快捷键Ctrl+Alt+F),打开“选择文件”对话框,选择名字为“房产广告.swf”的文件(素材在“Chapter02\素材文件\任务2\活动2”文件夹中),单击“确定”按钮,即可插入到网页文档中。 5、保存网页文件并在浏览器中浏览网页效果。 6、新建一个HTML文档,将新建的HTML文档切换至“设计”视图模式,并以“task2-2-3.html”为文件名保存到站点为“项目2-2”的“Task2-2”根文件夹中。 7、在“文档工具栏”中的“标题”文本框中,将“无标题文档”更改为“swf属性设置”。 8、依次单击“修改”“页面属性”菜单命令(快捷键Ctrl+J),设置背景图像(素材在“Chapter02\素材文件\任务2\活动2\我的校园.jpg”),“重复”选项选择“no-reapet”,左边距、上边距设置为0,单击“确定”按钮。 9、将光标定位在最左上角,依次单击“插入”-> “媒体”-> “SWF”菜单命令(快捷键Ctrl+Alt+F),打开“选择文件”对话框,选择名字为“闪光效果.swf”的文件(素材在“Chapter02\素材文件\任务2\活动2”文件夹中),单击“确定”按钮,在“属性”面板设置“宽”为“800”,“高”为“500”,“Wmode”选择为“透明”。 10、保存网页文件并在浏览器中浏览网页效果。 布置任务:让学生明确本次课的内容 讨论:如何实现该案例效果 阅读知识窗:Flash动画格式;网页中插入Flash动画相关属性 演示:教师演示活动实施过程 实训活动:学生练习及点评
作业 布置 填写提交实训报告和实训表格 预习作业:预习下一节内容
教学 后记
教学 课题 任务3 活动1 制作包含超链接的网页
课题 类型 理论+实作 课时 安排 2 上课 时间
教 学 目 标 1.了解什么是超链接 2.掌握如何创建超链接
教学 重点 1、2 教学 难点 2
辅助 资源 课件、多媒体、网络
复习引入 1.Flash动画的格式。 2.如何在网页中添加Flash动画?
教学 手段 教学过程 师生互动 活动设计
课件 讨论 实作 课件 举例 讨论 课件 实作 一、教师布置活动要求 为网页素材“task2-3-1.html”中的文本“华南地区”、“华东地区”、“华北地区”分别设定超链接,链接的网页文件分别为“hndq.html”、“hddq.html”、“hbdq.html”,页面打开目标为新建页面。 二、师生讨论学习新知识 文本超链接是分配了目标URL的字或短语,它可以通过“属性”面板进行设置,如下图所示。 三、教师演示活动实施过程并让学生完成活动任务 1、启动Dreamweaver CS6软件,打开网页素材文件“task2-3-1.html”,选中文本“华南地区”,在属性面板中设置文本格式后,链接文件选择素材文件“hndq.html”,目标设定为“_blank”,完成“华南地区”文本超链接。 2、用同样的方法完成“华东地区”和“华北地区”文本超链接。 布置任务:让学生明确本次课的内容 讨论:如何实现该案例效果 阅读知识窗:为网页添加超链接 演示:教师演示活动实施过程 实训活动:学生练习及点评
作业 布置 填写提交实训报告和实训表格 预习作业:预习下一节内容
教学 后记
教学 课题 任务3 活动2 制作图片热点超链接
课题 类型 理论+实作 课时 安排 2 上课 时间
教 学 目 标 1.了解图片热点链接 2.掌握如何添加图片热点链接
教学 重点 1、2 教学 难点 2
辅助 资源 课件、多媒体、网络
复习引入 1.超链接。 2.如何为网页添加超链接?
教学 手段 教学过程 师生互动 活动设计
课件 讨论 实作 课件 举例 讨论 课件 实作 一、教师布置活动要求 为网页素材“task2-3-1.html”中的 “中国气候类型”图片设置4个热点超链接,链接的网页文件分别为“hndq.html”、“hddq.html”、“hxdq.html”、“hbdq.html”,页面打开目标为新建页面。 二、师生讨论学习新知识 图片超链接是为整个图片分配默认超链接,也可以为图片分配一个或多个热点,即在图片中划分多个区域分配超链接,它可以通过“属性”面板进行设置,如下图所示。(对整张图片设置超链接,操作方法与以上设置文本超链接相同,这里就不再赘述) 三、教师演示活动实施过程并让学生完成活动任务 1、设置图片热点 (1)选中网页中的图片,属性面板变成图片超链接设置面板,如下图所示。 (2)选取属性栏中的矩形热点工具,沿着华东地区边界描绘出热点图形,如下图所示,并按照图中设置链接目标文件“hndq.html”,设置网页打开目标为“_blank”。 2、用同样的方法完成“华东地区”、“华西地区”、“华北地区”等3个图片热点超链接。 布置任务:让学生明确本次课的内容 讨论:如何实现该案例效果 阅读知识窗:图片热点链接 演示:教师演示活动实施过程 实训活动:学生练习及点评
作业 布置 填写提交实训报告和实训表格 预习作业:预习下一节内容
教学 后记
教学 课题 任务3 活动3 制作锚点链接
课题 类型 理论+实作 课时 安排 2 上课 时间
教 学 目 标 1.了解什么是锚点链接 2.掌握如何添加锚点链接操作
教学 重点 1、2 教学 难点 2
辅助 资源 课件、多媒体、网络
复习引入 1.图片热点链接。 2.如何添加图片热点链接?
教学 手段 教学过程 师生互动 活动设计
课件 讨论 实作 课件 举例 讨论 课件 实作 一、教师布置活动要求 在网页适当位置添加锚点命名,为“页面导航列表”中的气候类型设置锚点链接,完成后浏览时,可以通过点击导航列表中的气候类型,精准定位到网页中相应段落。 二、师生讨论学习新知识 锚点链接(也叫书签链接)常常用于那些内容庞大繁琐的网页,通过点击命名锚点,不仅让我们能指向文档,还能指向页面里的特定段落,更能当作"精准链接"的便利工具,让链接对象接近焦点,便于浏览者查看网页内容。它可以通过菜单栏中的命令来使用,如下图所示。 三、教师演示活动实施过程并让学生完成活动任务 1、插入命名锚(以“温带季风”为例) 在“温带季风”文字前单击鼠标,然后依次单击“插入”->“命名锚记”菜单命令,在打开的“命名锚记”对话框“锚记名称”框中输入“3”,如下图所示。 2、为锚记设置超链接 选中“页面导航列表”文本看的“温带季风”,在链接目标空白处输入“#3”,设置网页打开目标为“_blank”完成,如下图所示。 3、用同样的方法完成导航列表其它气候类型的锚记超链接。 布置任务:让学生明确本次课的内容 讨论:如何实现该案例效果 阅读知识窗:锚点链接 演示:教师演示活动实施过程 实训活动:学生练习及点评
作业 布置 填写提交实训报告和实训表格 预习作业:预习下一节内容
教学 后记

展开更多......

收起↑

资源预览