0301-静态网页制作(Dreamweaver)-以个人

1、Dreamweaver网页设计教案PAGE PAGE 14Dreamweaver网页设计教案河北工业职业技术学院?静态网页制作Dreamweaver?课程教案首页授课教师张亚静班级16网络订单1班学时2授课日期主题或任务以“个人主页工程为驱动的阶段复习课型考试授课地点多媒体教室企业专业教室实训室教学目标知识目标：回忆常用标签的用法强化样式的综合应用2、理解盒子模型的意义3、掌握浮动布局和定位技能目标：1、通过CSS+DIV技术设计并实现一个完整网站工程的创立2、灵活运用盒子模型灵活设计网页布局3、灵活运用浮动和定位布局页面素质目标：培养学生团队合作意识培学生的设计和创意能力，提升学生对于网页设

2、计的热情学习内容以“个人主页完整工程为驱动进行阶段复习：1、网站设计流程2、规划网站目录结构3、利用HTML根本标签创立网页结构4、利用浮动或定位设计页面布局5、通过CSS样式修饰6、进行网站测试重点难点重点：利用浮动或定位设计页面布局通过CSS样式修饰难点：利用浮动或定位设计页面布局教学方法理论讲授 小组讨论 工程教学任务驱动 参观教学 模拟教学实验实训 演示教学 其他 素材资源文本素材实物展示PPT幻灯片音频素材视频素材动画素材图形/图像素材网络资源其他教学设计通过教师演示工程，采用工程驱动法引导学生进行阶段知识的复习和回忆，强化关键知识的应用；让学生对完整网站首页的设计和制作有一个整体认

3、识，提升学生进行真实工程开发的经验和兴趣。学习评价行为表现 课堂作业 测验测试 制作作品 其他 作业题目利用CSS+DIV自由设计并制作“个人首页要求：网页结构和样式别离网站目录结构规划合理代码格式标准双语教学 Banner head link navigation foot 系部：计算机技术系 教研室： 网络技术教研室主任签字：年月日学习单元六 以“个人主页工程为驱动的阶段复习授课内容：以“个人主页工程为驱动的阶段复习学时：2学时90分钟教学目标：知识目标：回忆常用标签的用法强化样式的综合应用理解盒子模型的意义掌握浮动布局和定位技能目标：通过CSS+DIV技术设计并实现一个完整网站工程的创立

4、灵活运用盒子模型灵活设计网页布局灵活运用浮动和定位布局页面素质目标：培养学生团队合作意识培学生的设计和创意能力，提升学生对于网页设计的热情教学内容：1、网站设计流程2、规划网站目录结构3、利用HTML根本标签创立网页结构4、利用浮动或定位设计页面布局5、通过CSS样式修饰 6、进行网站测试教学重点：利用浮动或定位设计页面布局通过CSS样式修饰教学难点：利用浮动或定位设计页面布局教学方法和策略：教学方法： 采用工程驱动法、分组竞争法、案例演示法提高学生的学习兴趣教学策略： 通过分组讨论、竞争的方式激发学生的学习热情教学设计思路：通过教师演示工程，采用工程驱动法引导学生进行阶段知识的复习和回忆，强

5、化关键知识的应用；让学生对完整网站首页的设计和制作有一个整体认识，提升学生进行真实工程开发的经验和兴趣。授课内容提纲：复习旧课导出阶段工程1、课程回忆1教师综述 在前五个学习单元的课程中，我们分阶段的以“计算机技术系网站首页工程为驱动完成了网站首页的制作，对于网站设计有了初步的认识和了解，经过阶段学习，同学们已经具备了独立设计和制作网站首页的能力。2利用工程互动提问回忆知识点 网站设计流程？盒子模型的关键属性？常用的定位方式有几种？3互动总结教师通过与学生互动沟通，进行知识的归纳：网站的设计流程包括需求分析、制作网页效果图、创立和设计网站、测试和发布等几个环节；盒子模型的关键属性包括conte

6、nt、border、padding和margin四个属性。常用的布局方式有浮动和定位。 2、教师首先简述本工程单元重点、难点，让学生有重点的听讲。 教师简述本工程单元的重点、难点，让学生有带着任务、有重点跟随老师授课。1、网站设计流程2、规划网站目录结构3、利用HTML根本标签创立网页结构4、利用浮动或定位设计页面布局重点和难点5、通过CSS样式修饰重点 6、进行网站测试4、本学习单元总体目标教师总结 通过本工程单元的学习，学生对阶段只是做一整体实践和应用，让学生感受阶段学习成果的喜悦，为后续知识的学习奠定根底，并提升学习的兴趣和动力。二、工程实施 教师简述工程单元教学目标和教学内容，明确本工

7、程单元教学重点和难点教学目标通过“个人主页真实完整网站首页的制作，对知识进行阶段复习和综合应用明确网页结构与表现别离的意义强化盒子模型的应用熟练应用CSS+DIV技术对页面进行布局能够通过浮动或定位实现页面的布局培养学生的团队合作意识教学内容1、网站设计流程2、规划网站目录结构3、利用HTML根本标签创立网页结构4、利用浮动或定位设计页面布局重点和难点5、通过CSS样式修饰重点 6、进行网站测试一工作任务一：设计和制作“个人主页效果图【任务背景】某同学要设计一个“个人主页，现已由网站筹划人员先期分析了网站的目的、功能定位及内容规划。并根据功能定位先行设计了网站效果图。【任务要求】根据与用户沟通

8、和交流做好的需求分析，设计和制作“个人主页效果图。【任务分析】采用蓝色主色调，表达客户简洁实用的目标。【任务实施】在PS中设计“个人主页效果图，具体实现过程不做详解，如以下列图1所示：图1 页面效果图二工作任务二：分析“个人主页首页整体结构【任务背景】某学院计算机技术系要建立本系部网站，现已由网站筹划人员先期分析了网站的目的、功能定位及内容规划，并根据功能定位先行设计了网站效果图。【任务要求】根据已经收集好的素材及网站规划，进行网站的整体页面布局。【任务分析】效果图导出之后，我们就可以使用这些素材在Dreamweaver着手进行布局了，现在的布局技术包括表格布局和Web标准布局，也就是俗称的D

9、IV+CSS布局，本工程我们主要使用Web标准来布局页面。【任务实施】在具体布局之前，首先分析一下页面的构成，目的是明确所需要创立页面的布局结构，如以下列图2所示。图2 页面的布局形式翻开在上一章节中已经创立好的名为grzyWeb的站点。规划站点目录结构，建立CSS和images文件夹，将在ps中导出的图片放入images文件夹。创立网站首页，命名为“index.html，将其保存在站点根目录下。创立样式表文件“index.css，将其保存在站点根目录下的CSS文件夹中。将“index.css和网页文件“index.html进行了关联。核心代码如下：首先根据分析得出的页面结构搭建整个网页的页面

10、布局。在index.htmnl。 三工作任务三：制作“个人主页首页页眉【任务背景】在上一工作任务中，我们已经实现了本工程DIV框架结构布局，但是效果离我们要实现的网页布局效果还相差甚远，仅仅依靠DIV标签是无法实现页面布局的，我们必须要配合CSS来对网站的各个局部进行更加精确的控制。【任务要求】通过CSS规那么来精确控制网站首页页眉局部，从而实现页面布局效果。【任务分析】完成ID名称为top的DIV区块的CSS设置。【任务实施】首先切换到样式表文件“index.css，添加以下样式代码对整个页面的样式进行定义。bodypadding:0;margin:0;background:url(./im

11、ages/bg.gif);接下来在样式表中定义“top的样式，也就是定义页眉的结构，添加以下样式代码：#top,#nav,#main margin:0 auto; /*将页面中的三个大区块设置水平居中*/#banner width:600px; height:133px; 在“index.html中，在网页的主题局部参加页眉局部的图片“banner.jpg文件。代码如下： 页面效果如图3所示：图3 “个人主页页眉效果图四工作任务四：制作“个人主页首页导航条【任务要求】通过CSS规那么来精确控制网站首页导航栏局部，从而实现页面布局效果。【任务分析】完成ID名称为nav的DIV区块的CSS设置。核

12、心思想是利用列表实现导航条内容的添加，在通过css样式实现布局的改变。【任务详解】在名称为“nav的DIV结构中输入以下代码 首页 心情日记 Free 一起走到 从明天起 纸飞机 下一站 首先切换到样式表文件“index.css，添加以下样式代码对导航条的样式进行定义。#nav width:600px; height:22px; background-color:#90bcff; margin-top:-15px; text-align:center; #nav ul list-style-type:none;margin-left:-15px; #nav li float:left;widt

13、h:76px;text-align:center;line-height:22px;a:link color:#00F;text-decoration:none;a:hover color:#F00;text-decoration:underline;a:acktive color:#000; text-decoration:none;a:visited background-color: #000;页面效果如图4所示：图4 “个人主页导航条效果图五工作任务五：制作“个人主页首页主内容区【任务要求】通过CSS规那么来精确控制网站首页主内容区域，从而实现页面布局效果。【任务分析】完成网站主内容区

14、域布局设计及内容版式设计，此局部我们将完成ID名称为divMain的DIV区块的CSS设置。【任务详解】翻开“index.css文件，在样式表中添在名称为“divMain样式，并对其样式的具体设置。 #divMain width:600px; height:800px; Background:red; /*添加区块测试颜色*/页面效果如图5所示：图5 “个人主页主内容区效果图添加主体内容左区块的页面结构，其代码如下： 我的日记本 他们彼此深信，是瞬间迸发的热情让他们相遇。这样确实定是美丽的，但变幻无常更为美丽。 心情轨迹 董事长的一切都让人既羡慕又忌妒，但更让人受不了的是，有一天，上苍突然赐给

15、他一个神奇的礼物 在“index.css样式表中添在名称为“divLeft样式，并对其样式的具体设置。 #divLeft width:180px; height:580px; background:#D2E7FF; float:left; text-align:center; padding-left:10px; padding-right:10px;.imgLeft border:1px solid #09C; margin-top:15px;.leftTextTitle size:10px; color: #66F; font-weight:bold;.leftTextContent te

16、xt-align:left;页面效果如图5所示：图5 “个人主页主内容区左区块效果图添加主体内容右区块的页面结构，其代码如下： 介绍 我努力的抓紧世界，最后却仍被世界淘汰，如果一开始就松手，我会不那么伤心吗？你说，亲爱的孩子，世事难料，随它去吧！ 照相本子 关于童年，你记住了什么？ 两岁时，我拥有一只巨大的粉红猪，它总在我嚎啕大哭时逗我笑。三岁时，我骑着小木马一路摇到外婆家，它不喝水也不吃草。四岁时，我离家出走，在公车上睡着了，最后是太空超人送我回家。我真的没骗你，我通通都记得，还有照片为证。 地下铁 天使在地下铁的入口，和我说再见的那一年，我渐渐看不见了。十五岁生日的那年秋天早晨，窗外下着毛

17、毛雨，我喂好我的猫。六点零五分，我走进地下铁。向左走向右走Theyre both convincedthat a sudden passion joined them.Such certainth is beautiful,but uncertainty is more beautiful still.在“index.css样式表中添在名称为“divRight样式，并对其样式的具体设置。 #divRight width:400px; height:580px; background:#E9FBFF; float:left; background:#e9fbff url(./images/sel

18、f.jpg) no-repeat bottom right; .rightTitle font-size:5px; color:#0FC; .rightContent font-size:15px; color:#000; 页面效果如图6所示：图6 “个人主页主内容区右区块效果图二、单元小结与工程单元任务 1.工程单元小结通过“个人主页真实工程对阶段知识点进行回忆、强化和综合应用，再次强调重点和难点。再次强化讲解并应用了CSS+DIV布局、盒子模型和浮动布局的应用。 2.工程单元任务以“个人首页为工程驱动，自由发挥完成一个真实工程的设计和创立。写出标准完善的设计和制作文档，便于对知识进行梳理和

19、整理。三、板书设计新课讲解可擦写区域设计网站效果图划分页面区块重点设计网站首页页眉重点、难点设计网站首页导航条重点、难点设计网站首页主题局部重点、难点讲解细节布置任务四、课后附记课程回忆：【约10分钟】通过互动的方式回忆之前的学习内容，为阶段工程的制作做好准备。学生通过互动方式答复教师提出的问题。认真听取教师的总结，明确本工程单元的学习任务。明确本工程单元的总体学习目标。带着目标和任务学习。对学习目标形成一个初步地、大致地、总体的知识轮廓。新课讲解：【约65分钟】1.工程引入思路：教师利用“个人主页工程为驱动，进行阶段知识回忆、复习和综合应用。2.思路指导：通过“个人主页工程制作，完成一个网站首页的整个设计流程。任务目标：熟练“个人主页首页的设计和创立。此局部由于在课前已作为课前任务做好了前期的准备工作，因此，直接在ps中实现效果图的制作。时刻保持与教师的互动。思路跟教师保持一致，保证学习效果。提醒学生出图的方法，注意使用切片工具对大图进行切割。互动提问，整个页面区块如何划分？教师提醒：合理进行区块划分将有利于后期区块内容得添及样式的的设计和制作。网站结构在设计过程中，一定要保证网页结构