网页的制作.docx
- 文档编号:17424931
- 上传时间:2023-07-25
- 格式:DOCX
- 页数:18
- 大小:312.30KB
网页的制作.docx
《网页的制作.docx》由会员分享,可在线阅读,更多相关《网页的制作.docx(18页珍藏版)》请在冰点文库上搜索。
网页的制作
单元(章)教学设计
单元(章)
网页的制作网页的美化与特效制作
总课时数
2
制定教学目标的依据
课标
要求
与
教材
分析
教材分析:
教材要求学生对网页进行修饰,包括为网页添加背景、背景音乐及插入图像,让网页有声有色,图文并茂。
学
情
分
析
面对的对象是高二学生,对计算机的基本操作有所掌握,熟悉WINDOWS、FrontPage的常用操作。
上堂课学生利用FrontPage2000已制作了自己的第一个网页,会在FrontPage中输入、编辑文字,保存及预览网页,但对制作图文并茂的网页还很陌生。
教
学
目
标
知识
与
技能
过程
与
方法
情感
态度
价值
观
知识与技能:
1、学会利用Frontpage2000建立网站
2、熟练运用FrontPage对页面合理布局
3、掌握网页制作中文字、图片及动画的插入
过程与方法:
上网搜索文字、图片等素材,以小组为单位制作一个网页,提高学生的兴趣。
情感、态度与价值观:
1、进一步理解网页作为常用的信息集成工具的优势和特点,培养学生团队精神及小组成员之间交流互助合作能力
2、培养个人自我实践,自我创作,审美观等
课时教学流程
教师行为
学生行为
课堂变化及处理主要环节的效果
第一课时
一、栏目设置
栏目实质是一个网站的大纲索引,索引应该将网站的主体明确显示出来。
教师演示:
已有网站的各个栏目设置。
网站栏目安排注意:
1.紧扣主题
2.尽可能将网站最有吸引力的内容列在栏目上
3.尽可能方便访问者的浏览和查询
二、版面设计
常见的页面布局样式:
厂字型,口字型,自由式。
三、树立网站整体风格
1、树立网站整体风格第一步:
设计,制作一个网站的标志(LOGO)。
几种方法:
2、树立网站整体风格第二步:
设计网站的标准色彩。
一般来说,一个网站的标准色彩不超过3种,太多则让人眼花缭乱。
色彩总的应用原则应该是:
总统协调,局部对比
3、树立网站整体风格第三步:
设计网站的标准字体,在关键的标题、菜单、图片里使用统一的标准字体。
四、收集素材
网站推荐:
五、实践
第二课时
导入:
展示一些布局网页,进行分析,引入今天授课的主题,如何制作自己布局的包含小组相关主题的页面。
如:
新授:
一、网站的建立
演示:
如何在指定文件夹中建立一个名为“huanbao”的网站。
新站点的建立
文件|新建|站点,打开“新建”对话框
在“指定新站点的位置”框中输入网站保存的路径。
建立站点后,系统自动建立了两个文件夹_Private,Images。
新建网页
文件|新建|网页
二、网页的制作
1、网页布局:
使用网页表格对首页进行布局
插入一个“4×1”的表格。
表格属性:
宽度,高度的设定;边框粗细;边框颜色;背景颜色;背景图片。
单元格属性:
宽度,高度的设定;边框颜色;背景颜色;背景图片。
2、插入图片,动画
在表格的第一行插入标题图片:
(1)插入剪贴画
演示:
“插入”|“图片”|“剪贴画”
(2)插入来自文件的图片
演示:
“插入”|“图片”|“来自文件”
3、图片的编辑
(1)图片的定位方法
选定图片,单击图片工具栏中的“绝对定位”按钮,可以将图片拖动到任意位置。
(2)图片的透明处理
单击图片工具栏中的“设置透明的颜色”,然后将指针指向图片中需要变成透明的颜色并单击,此时图片中所有该种颜色全部边变为透明。
(只有GIF格式的图片才能设置为透明颜色)
(3)图片的自动缩略
先选定图片,单击图片工具栏“自动缩略图”按钮。
4、文字编辑
演示:
在表格的第二行制作导航栏
输入“首页”,以及网站各模块的内容。
并对文字的字体,颜色进行设置。
表格的第三行可以进行一些图文的编辑,第四行输入版权所有等一些信息。
三、保存网页
演示:
将网页保存在自己的网站中。
文件|保存文件
如果要保存的页面中含有图片,动画,声音等元素,保存时会弹出“保存嵌入式文件”对话框,此时点击“改变文件夹”将这些元素保存到Images文件夹中。
实践:
本节课学习了如何建立一个网站,在网页中文字,图片,动画的插入以及图片的编辑。
实践要求:
根据班里同学人数的多少进行分组,每组为3至5位同学,利用Fronpage制作小组主页。
主题自定,文字和图片材料等素材可以上网搜索,并且每一组必须填写下面小组分工表。
建议从以下几方面考虑:
(1)确定主题和名称
(2)整体风格创意设计
(3)规划内容和栏目
(4)页面的设计和布局
(5)可以上网搜索其它网站的主页,然后可以模仿它们的布局进行制作。
实践内容:
(1)一个站点,选择只有一个网页的站点,指定位置在D:
\wangzhan
(2)双击“index.htm”网页将其作为首页,插入一个四行一列的表格,并对表格属性进行相应设置。
(3)根据各小组网站主题在表格的第一行插入标题图片,在第二行制作导航栏,第三行请各小组根据网站内容进行自由设计,第四行输入网站的版权信息,形式如:
盛泽中学高一×班××小组
小组分工表:
组长:
小组成员:
网站主题:
主页:
模块一:
模块二:
模块三:
模块四:
评价:
各小组展示作品
自我评价,小组互评,教师综合评价(参照下表):
评价项目
自评
小组互评
教师综合评价
新建网站和网页
用表格布局网页版面
在网页中插入图象和设置背景
小组分工和协调
小组制作的网页的满意程度
学习态度和合作精神及审美观
存在的问题和不足
教学过程:
导入:
展示带有背景音乐的网站,让学生在音乐声中准备上课。
分析这个网站,展示某些功能:
如:
超链接,背景音乐,滚动字幕等。
新授:
打开站点:
打开FrontPage,文件|打开站点,打开已建立的站点。
一、文字链接:
1、链接到另一页面
选定要链接的文字,单击鼠标右键,选择“超链接”,在弹出的超链接属性对话框中,进行设置,如图所示:
图1
通过单击如图所示按钮,打开“选择文件”对话框,从中选择所需链接的网页。
2、链接到网站
图2
在如图所示位置,填入网站地址。
3、链接到一个E_MAIL地址
图3
通过单击如图所示按钮,打开“创建电子邮件超链接”对话框,填入电子邮件地址。
二、图片链接:
1、图片超链接
选定要链接的图片,单击鼠标右键,选择“超链接”,在弹出的超链接属性对话框中,进行设置。
方法如图1。
2、图像映射
区别:
单击图像中的不同位置将激活不同的链接。
单击图片,选择图片工具栏中的“热点”按钮,在图片的适当位置画一个大小适当的区域,在弹出的“创建超链接”对话框中将这一热区链接到某个网页。
图4
三、滚动字幕
在页面中创建水平滚动的文字字幕使静止的页面活动起来。
在鼠标放在要插入滚动字幕的位置,插入|组件|字幕,打开字幕属性对话框,如图所示设置:
图5
四、背景音乐
格式|背景|常规
图6
通过“浏览”按钮,选择所需背景音乐。
实践:
本节课学习了如何在网页中制作文字,图片的超链接,以及滚动字幕和背景音乐的插入。
实践内容:
在上节课制作首页的基础上,继续完善网站的制作。
基本任务:
完成首页的制作
提高任务:
根据网站主题,制作1-2个扩展模块。
自我评价,小组互评,教师综合评价(参照下表):
评价:
各小组展示作品
评价项目
自评
小组互评
教师综合评价
新建网站和网页
用表格布局网页版面
在网页中插入图象和设置背景
小组分工和协调
小组制作的网页的满意程度
学习态度和合作精神及审美观
存在的问题和不足
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 制作