《0301--静态网页制作(Dreamweaver)-以“个人.》由会员分享，可在线阅读，更多相关《0301--静态网页制作(Dreamweaver)-以“个人.（16页珍藏版）》请在金锄头文库上搜索。
1、河北工业职业技术学院静态网页制作(Dreamweaver)课程教案首页授课教师张亚静班级16网络订单1班学时2授课日期主题或任务以“个人主页”项目为驱动的阶段复习课型考试授课地点O多媒体教室O企业O专业教室实训室教学目标知识目标：1、回顾常用标签的用法2、强化样式的综合应用2、理解盒子模型的意义3、掌握浮动布局和定位技能目标：1、通过CSS+DIV技术设计并实现一个完整网站项目的创建2、灵活运用盒子模型灵活设计网页布局3、灵活运用浮动和定位布局页面素质目标：1、培养学生团队合作意识2、培学生的设计和创意能力，提升学生对于网页设计的热情学习内容以“个人主页”完整项目为驱动进行阶段复习：1、网站设
2、计流程2、规划网站目录结构3、利用HTML基本标签创建网页结构4、利用浮动或定位设计页面布局5、通过CSS样式修饰6、进行网站测试重点难点重点：利用浮动或定位设计页面布局通过CSS样式修饰难点：利用浮动或定位设计页面布局教学方法O理论讲授O小组讨论项目教学任务驱动O参观教学O模拟教学实验实训O演示教学O其他素材资源O文本素材O实物展示PPT幻灯片O音频素材O视频素材O动画素材图形/图像素材O网络资源O其他教学设计1、通过教师演示项目，米用项目驱动法引导学生进行阶段知识的复习和回顾，强化关键知识的应用；2、让学生对完整网站首页的设计和制作有一个整体认识，提升学生进行真实项目开发的经验和兴趣。学习
3、评价行为表现O课堂作业O测验测试制作作品O其他作业题目利用CSS+DIV自由设计并制作“个人首页”要求： 网页结构和样式分离 网站目录结构规划合理代码格式规范双语教学Bannerheadlinknavigationfoot系（部）：计算机技术系教研室：网络技术教研室主任签字：-年月日学习单元六以“个人主页”项目为驱动的阶段复习授课内容：以“个人主页”项目为驱动的阶段复习学时：2学时（90分钟）教学目标：知识目标： 回顾常用标签的用法强化样式的综合应用 理解盒子模型的意义 掌握浮动布局和定位技能目标： 通过CSS+DIV技术设计并实现一个完整网站项目的创建 灵活运用盒子模型灵活设计网页布局 灵活
4、运用浮动和定位布局页面素质目标： 培养学生团队合作意识 培学生的设计和创意能力，提升学生对于网页设计的热情教学内容：1、网站设计流程2、规划网站目录结构3、利用HTML基本标签创建网页结构4、利用浮动或定位设计页面布局5、通过CSS样式修饰6、进行网站测试教学重点： 利用浮动或定位设计页面布局 通过CSS样式修饰教学难点：Dreamweaver网页设计教案课程回顾：【约10分钟】通过互动的方式回顾之前的学习内容，为阶段项目的制作做好准备。 学生通过互动方式回答教师提出的问题。 认真听取教师的总结，明确本项目单元的学习任务。利用浮动或定位设计页面布局教学方法和策略：教学方法：采用项目驱动法、分组
5、竞争法、案例演示法提高学生的学习兴趣 教学策略：通过分组讨论、竞争的方式激发学生的学习热情教学设计思路：1、通过教师演示项目，采用项目驱动法引导学生进行阶段知识的复习和回顾，强化关键知识的应用；2、让学生对完整网站首页的设计和制作有一个整体认识，提升学生进行真实项目开发的经验和兴趣。授课内容提纲：一、复习旧课导出阶段项目1、课程回顾（1）教师综述在前五个学习单元的课程中，我们分阶段的以“计算机技术系网站”首页项目为驱动完成了网站首页的制作，对于网站设计有了初步的认识和了解，经过阶段学习，同学们已经具备了独立设计和制作网站首页的能力。（2）利用项目互动提问回顾知识点 网站设计流程？ 盒子模型的关
6、键属性？ 常用的定位方式有几种？（3）互动总结教师通过与学生互动沟通，进行知识的归纳： 网站的设计流程包括需求分析、制作网页效果图、创建和设计网站、测试和发布等几个环节； 盒子模型的关键属性包括content、border、padding和margin四个属性。 常用的布局方式有浮动和定位。#2、教师首先简述本项目单元重点、难点，让学生有重点的听讲。教师简述本项目单元的重点、难点，让学生有带着任务、有重点跟随老师授课1、网站设计流程2、规划网站目录结构3、利用HTML基本标签创建网页结构4、利用浮动或定位设计页面布局（重点和难点）5、通过CSS样式修饰（重点）6、进行网站测试4、本学习单元总体
7、目标（教师总结）通过本项目单元的学习，学生对阶段只是做一整体实践和应用，让学生感受阶段学习成果的喜悦，为后续知识的学习奠定基础，并提升学习的兴趣和动力。二、项目实施教师简述项目单元教学目标和教学内容，明确本项目单元教学重点和难点教学目标 通过“个人主页”真实完整网站首页的制作，对知识进行阶段复习和综合应用 明确网页结构与表现分离的意义 强化盒子模型的应用 熟练应用CSS+DIV技术对页面进行布局 能够通过浮动或定位实现页面的布局 培养学生的团队合作意识教学内容1、网站设计流程2、规划网站目录结构3、利用HTML基本标签创建网页结构4、利用浮动或定位设计页面布局（重点和难点）5、通过CSS样式修
8、饰（重点）6、进行网站测试明确本项目单元的总体学习目标。带着目标和任务学习。对学习目标形成一个初步地、大致地、总体的知识轮廓。新课讲解：【约65分钟】1.项目引入思路：教师利用“个人主页”项目为驱动，进行阶段知识回顾、复习和综合应用。2.思路指导：通过“个人主页”项目制作，完成一个网站首页的整个设计流程。3.任务目标：熟练“个人主页”首页的设计和创建。采用蓝色主色调，体现客户简洁实用的目标。 此部分由于在课前已作为课前任务做好了前期的准备工作，因此，直接在ps中实现效果图的制作。 时刻保持与教师的互动。 思路跟教师保持一致，保证学习效果。在PS中设计“个人主页”效果图，具体实现过程不做详解，如
9、下图1所示：心情曰记一起走到规明天起纸飞机下一站一）工作任务一：设计和制作“个人主页”效果图【任务背景】某同学要设计一个“个人主页”，现已由网站策划人员先期分析了网站的目的功能定位及内容规划。并根据功能定位先行设计了网站效果图。【任务要求】根据与用户沟通和交流做好的需求分析，设计和制作“个人主页”效果图。任务分析】任务实施】他们彼此深信，是瞬间迸发的热情让他们相遇。这样的确定是美丽眇但变幻无常更为美丽。董事长的一切都让人既羨慕又忌妒，但更让人受不了的是，有一天，卜茶忽然赐给他一个神我努力的抓紧世界，最后却仍被世界淘汰，如果一开始就松手，我会不那么伤心吗？你说，亲爱的孩子，世事难料，随它去吧！关
10、于童年，你记住了什么？两岁时，我拥有一只巨大的粉红猪，它总在我嗦陶大哭时逗我笑。三岁时，我骑着小木马一路摇到外婆冢，它不喝水也不吃草。四岁时，我离家出走，在公车上睡着了，最后是太空超人送我回家。我真的没骗你，我通通都记得，还有照片为证。冬天使在地下铁的入口，和我说再见的那_年，我渐渐呈见了。十五岁生日的那年秋天早晨,窗外下着毛毛雨，我熄好我的痕。六点零五分我走进地下钱9提醒学生出图的方法，注意使用切片工具对大图进行切割。图1页面效果图二）工作任务二：分析“个人主页”首页整体结构【任务背景】某学院计算机技术系要建立本系部网站，现已由网站策划人员先期分析了网站的目的、功能定位及内容规划，并根据功能
11、定位先行设计了网站效果图。【任务要求】根据已经收集好的素材及网站规划，进行网站的整体页面布局。【任务分析】效果图导出之后，我们就可以使用这些素材在Dreamweaver着手进行布局了，现在的布局技术包括表格布局和Web标准布局，也就是俗称的DIV+CSS布局，本项目我们主要使用Web标准来布局页面。【任务实施】(1) 在具体布局之前，首先分析一下页面的构成，目的是明确所需要创建页面的布局结构，如下图2所示。住IB-（:主他IH镀此柔是西间建发的热績辻他目區*宓样的巍忘是美雨rj-但支幻无拿更为美04uID=divLeft:体彼区块）关于圭年你记住了什么？两岁ba我拥有一只巨大的粉红舟它总在我咱
12、ng大知寸逗我笑。三岁时我希若小木2路耘到外聘，它不唱水也不吃草。四艺吵吏西家主走二在公宇E话着7,蛊后是玄空厘龙回玄心情日记一勰走到从砸天起二f02：ID=Nav导航)一甘小ID=divRight主体右区块)心情轨迹董事梯勺一悯u让人牴萋幕艮忌炉，但更让人曼不了的呈F有一天觀瞒世驚課曜蠶臨雷呷律魅不飙葩本壬.03：ID=divMatn嗡部芬jQI：ID=top（页眉）互动提问，整个页面区块如何划分？教师提醒：合理进行区块划分将有利于后期区块内容得添及样式的的设计和制作。图2页面的布局形式(2) 打开在上一章节中已经创建好的名为grzyWeb的站点。网站结构在设计过程中，一定要保证网页结构与表
13、现进行分离，便于后期网站的维护。(3) 规划站点目录结构，建立CSS和images文件夹，将在ps中导出的图片放入images文件夹。(4) 创建网站首页，命名为“indexhtml”，将其保存在站点根目录下。(5) 创建样式表文件“index.css”，将其保存在站点根目录下的CSS文件夹中。(6) 将“index.css”和网页文件“indexhtm1”进行了关联。核心代码如下：(7) 首先根据分析得出的页面结构搭建整个网页的页面布局。在index.htmnl。(三)工作任务三：制作“个人主页”首页页眉【任务背景】CSS中首选的让元素水平居中的方法将元素的margin-1eft和margin-right属性在上一工作任务中，我们已经实现了本项目DIV框架结构布局，但是效果离我们要实现的网页布局效果还相差甚远，仅仅依靠DIV标签是无法实现页面布局的，我们必须要配合CSS来对网站的各个部分进行更加精确的控制。【任务要求】通过CSS规则来精确控制网站首页页眉部分，从而实现页面布局效果。【任务分析】完成ID名称为top的DIV区块的CSS设置。【任务实施】(1)首先切换到样式表文件“index.css”，添加下列
