表格个人网页制作教程

网站主页的布局冀中职业学院赵燕萍孙润坤成兰芳目录:一、教材分析二、教法分析三、学法分析四、教学程序五、评价与反思一、教材分析之教材及本单元特点《网站主页的布局》是清华大学出版社、国家示范性高职高专规划教材《网页设计与制作》中的一个单元,该单元是网页设计中的基础和重点.
教材分析之教学目标:1、能力目标能熟练使用Dreamweaver中常见的页面元素能进行网站主页的设计和制作能进行网站的分类和网站的欣赏2、知识目标学会个人主页设计的基本知识:文字、图片、表格、动画和影像等元素的使用.
了解网站开发的技术范畴和各类开发工具.
3、素质目标锻炼学生自主学习、举一反三的能力培养学生严谨务实的工作作风教材分析之教学重点、难点教学重点:文字属性设置及排列方法教学难点:表格的妙用二、教法分析教学方法:案例驱动法、项目教学法、讲授法、三、学法分析操练法、讨论法四、教学程序分析课前准备:收集选编案例1、呈现案例2、分析、讨论案例3、教师演示4、综合实训5、项目的结果汇报、总结课前准备:收集作品素材,提前一周在班级博客中布置1、呈现案例1)《六路车站》知识点:简单的表格,文字编写,插入图片2)《美丽心情》知识点:flash媒体导入3)《胡桃夹子作品》知识点:在布局视图中绘制表格4)《时尚前沿》知识点:表格嵌套,文字的修饰5)《琳子时光》知识点:背景音乐播放2、分析、讨论案例1)提出问题:展示的各个网页有什么共性和个性2)分组讨论:,将案例中的内容与网页设计知识联系起来,讨论所用到的知识点.
3、教师演示制作一个新网页:包括文字、图片、动画和影像等元素的使用.
学会如何插入和编排这些元素,为后续的网页制作打下基础.
文字属性设置:设置文字字号:选中文字:小区焦点,单击属性面板中的格式选择框,在弹出的下拉菜单中选择Heading2.
设置文字字体:首先选中要设置的文字,单击属性面板中的字体选择框,在弹出的下拉菜单中选择相应字体.
设置文字标题:选中文字,然后单击属性面板上Size大小下拉框选择.
单击调色板设置颜色.
图片、动画与影像的使用设置图片属性:学会裁剪、重新取样、亮度和对比度、锐化、热点工具、垂直边距和水平边距的使用.
动画和媒体的使用:插入媒体插件,Dreamweaver8支持的插件有Flash、Shockwave、LiveAudio、Netscape、MediaPlayer以及QuickTime插件等.
常用的是插入Flash动画,学习用代码设置Flash背景透明.
演示教学视频:《插入动画对象》3)巧用表格(一)表格的插入与设置:制作步骤:1.
表格插入,将鼠标放到网页中要插入的位置,有两种方法插入表格.
2.
选定表格,可以一次选定全部表格或者是一行、一列或几个单元格.
然后进行对齐、边框颜色的背景颜色等属性设置.
结论:通过设置表格或单元格的属性,我们可以改变表格的外观.
巧用表格(二)使用表格模板:系统提供了很多预设的表格模板,提供给设计者以便提高表格格式化的水准和效率.
可以直接套用即可.
制作步骤:1.
在网页中插入一个表格.
2.
选中表格,选择菜单命令/格式化表格,在对话框中选择其中一种.
3.
输入要求内容.
演示教学视频:《表格的基本操作》巧用表格(三)表格的妙用:导航条是网页制作中经常用到的,本节学习利用表格来制作导航条.
制作步骤:1.
在网页中插入表格,并进行参数设置.
2.
在表格单元格内插入内容.
这里是插入一些图片.
3.
在属性面板上设置表格对齐方式为居中对齐.
4.
对每个图片设置内部超级链接.
4、综合实训:实训目标:通过连续时间的实际操作,巩固对网站的创建、网页的策划、设计与制作的理,加深理解网站、网页、制作的过程,理解团队互助共同完成项目的协作精神.
学生在网络机房,小组分工合作,全程模拟公司网站项目开发实训.
5、项目的结果汇报、总结在实施完成项目以后,学生要进行项目汇报,教师与学生对项目进行总结,分析项目,进行知识点梳理,强化训练,形成技能,增强职业能力,同时注重技能迁移作用,结合企业进行实际项目的训练.
五、评价与反思(1)利用班级博客,充分调动学生课前搜集素材的积极性和课堂上设计作品的热情.
(2)综合使用动画、视频、音乐等多媒体手段,构建计算机课堂的灵性与生动.
(3)全程模拟公司网站项目开发实训,让学生感受岗位员工角色.
(4)在教与学的过程中,以学生为中心更明确.