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

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

2、作意识2 2、 培学生的设计和创意能力，提升学生对于网页设计的热情学习内容以“个人主页”完整项目为驱动进行阶段复习：1 1、 网站设计流程2 2、 规划网站目录结构3 3、 利用 HTMLHTML 基本标签创建网页结构4 4、 利用浮动或定位设计页面布局5 5、 通过 CSSCSS 样式修饰6 6、 进行网站测试重点难点重点：利用浮动或定位设计页面布局通过 CSSCSS 样式修饰难点：利用浮动或定位设计页面布局Dreamweaver 网页设计教案2教学方法O理论讲授O小组讨论项目教学任务驱动O参观教学O模拟教学 实验实训O演示教学O其他素材 资源O文本素材O实物展示PPTPPT 幻灯片O音频素

3、材O视频素材O动画素材图形/ /图像素材O网络资源O其他Dreamweaver 网页设计教案教学设计1 1、通过教师演示项目，米用项目驱动法引导学生进行阶段知识的复习和回顾，强化关键知识的应用；2 2、让学生对完整网站首页的设计和制作有 一个整体认识，提升学生进行真实项目开发 的经验和兴趣。学习评价行为表现O课堂作业O测验测试制作作品O其他作业题目利用 CSS+DIVCSS+DIV 自由设计并制作“个人首页” 要求：网页结构和样式分离网站目录结构规划合理代码格式规范双语教学BannerBanner headhead linklinkn n avigatioavigatio n n footfo

4、ot系（部）：计算机技术系教研室：网络技术教研室主任签字：-_ 年月日Dreamweaver 网页设计教案4学习单元六以“个人主页”项目为驱动的阶段复习授课内容：以“个人主页”项目为驱动的阶段复习学时：2 2 学时（9090 分钟）教学目标：知识目标：回顾常用标签的用法强化样式的综合应用理解盒子模型的意义掌握浮动布局和定位技能目标：通过 CSS+DIVCSS+DIV 技术设计并实现一个完整网站项目的创建灵活运用盒子模型灵活设计网页布局灵活运用浮动和定位布局页面素质目标：培养学生团队合作意识培学生的设计和创意能力，提升学生对于网页设计的热情教学内容：1 1、 网站设计流程2 2、 规划网站目录结

5、构3 3、 利用 HTMLHTML 基本标签创建网页结构4 4、 利用浮动或定位设计页面布局5 5、 通过 CSSCSS 样式修饰6 6、 进行网站测试教学重点：利用浮动或定位设计页面布局 通过 CSSCSS 样式修饰教学难点:Dreamweaver 网页设计教案利用浮动或定位设计页面布局教学方法和策略：教学方法：采用项目驱动法、分组竞争法、案例演示法提高学生的学习兴趣教学策略：通过分组讨论、竞争的方式激发学生的学习热情教学设计思路：1 1、 通过教师演示项目，采用项目驱动法引导学生进行阶段知识的复习和回顾，强化关键知识的应用；2 2、 让学生对完整网站首页的设计和制作有一个整体认识，提升学生

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

7、、borderborder、paddingpadding 和 marginmargin 四个属性。常用的布局方式有浮动和定位。课程回顾：【约 1010 分钟】通过互动的方 式回顾之前的 学习内容，为阶 段项目的制作做好准备。学生通过互动 方式回答教师 提出的问题。认真听取教师 的总结，明确本 项目单元的学 习任务。Dreamweaver 网页设计教案62 2、教师首先简述本项目单元重点、难点，让学生有重点的听讲。教师简述本项目单元的重点、难点，让学生有带着任务、有重点跟随老师授课。1 1、 网站设计流程2 2、 规划网站目录结构3 3、 利用 HTMLHTML 基本标签创建网页结构4 4、 利

8、用浮动或定位设计页面布局（重点和难点）5 5、 通过 CSSCSS 样式修饰（重点）6 6、 进行网站测试4 4、本学习单元总体目标（教师总结）通过本项目单元的学习，学生对阶段只是做一整体实践和应用，让学生感受阶段学习成果的喜悦，为后续知识的学习奠定基础，并提升学习的兴趣和动力。二、项目实施教师简述项目单元教学目标和教学内容，明确本项目单元教学重点和难点教学目标通过“个人主页”真实完整网站首页的制作，对知识进行阶段复习和综合 应用明确网页结构与表现分离的意义强化盒子模型的应用熟练应用 CSS+DIVCSS+DIV 技术对页面进行布局能够通过浮动或定位实现页面的布局培养学生的团队合作意识教学内容

9、1 1、 网站设计流程2 2、 规划网站目录结构3 3、 利用 HTMLHTML 基本标签创建网页结构4 4、 利用浮动或定位设计页面布局（重点和难点）5 5、 通过 CSSCSS 样式修饰（重点）6 6、进行网站测试明确本项目单 元的总体学习 目标。带着目标 和任务学习。对学习目标形 成一个初步地、 大致地、总体的 知识轮廓。新课讲解：【约 6565 分钟】1.1.项目引入思路：教师利用“个人 主 页”项目为驱动，进 行阶段知识回顾、复 习和综合应用。2.2.思路指导：通过“个人主页”项 目制作，完成一个网 站首页的整个设 计 流程。3.3.任务目标：熟练“个人主页”首 页的设计和创建。Dr

10、eamweaver 网页设计教案7（一）工作任务一：设计和制作“个人主页”效果图【任务背景】某同学要设计一个 “个人主页”，现已由网站策划人员先期分析了网站的目的、功能定位及内容规划。并根据功能定位先行设计了网站效果图。【任务要求】根据与用户沟通和交流做好的需求分析，设计和制作“个人主页”效果图。【任务分析】采用蓝色主色调，体现客户简洁实用的目标。【任务实施】（二）工作任务二：分析“个人主页”首页整体结构【任务背景】某学院计算机技术系要建立本系部网站，现已由网站策划人员先期分析了网站 的目的、功能定位及内容规划，并根据功能定位先行设计了网站效果图。【任务要求】根据已经收集好的素材及网站规划，进

11、行网站的整体页面布局。【任务分析】效果图导出之后，我们就可以使用这些素材在DreamweaverDreamweaver 着手进行布局了，现在的布局技术包括表格布局和WebWeb 标准布局，也就是俗称的 DIV+CSSDIV+CSS 布局，本此部分由于在 课前已作为课 前任务做好了 前期的准备工作，因此，直接 在psps 中实现效 果图的制作。时刻保持与教 师的互动。思路跟教师保 持一致，保证学 习效果。提醒学生出图的 方 法，注意使用切片工 具对大图进行切割。图 1 页面效果图Dreamweaver 网页设计教案8项目我们主要使用 WebWeb 标准来布局页面。Dreamweaver 网页设计

12、教案9【任务实施】(1)(1) 在具体布局之前，首先分析一下页面的构成，目的是明确所需要创建页面的布 局结构，如下图 2 2 所示。图 2 页面的布局形式 打开在上一章节中已经创建好的名为grzyWebgrzyWeb 的站点。 规划站点目录结构，建立CSSCSS 和 imagesimages 文件夹，将在 psps 中导出的图片放入imagesimages 文件夹。 创建网站首页，命名为index.htmlindex.html”，将其保存在站点根目录下。(5)(5)创建样式表文件index.cssindex.css”，将其保存在站点根目录下的CSSCSS 文件夹中。 将“ index.cssi

13、ndex.css”和网页文件index.htmlindex.html ”进行了关联。核心代码如下：（三）工作任务三：制作“个人主页”首页页眉【任务背景】在上一工作任务中，我们已经实现了本项目DIVDIV 框架结构布局，但是效果离我们要实现的网页布局效果还相差甚远，仅仅依靠DIVDIV 标签是无法实现页面布局的，我们必须要配合 CSSCSS 来对网站的各个部分进行更加精确的控制。【任务要求】lD=top （页眉）ID=Nav （导航鼻互动提问，整个页面 区块如何划分？世安的潮止餐灯目6V 但旳无就锲禅IJ養阜g議h阳歪讣人STTfia：.电一気，麹務裳需勢霹娜翩 T 业03= ID=divMgl

14、rt怵盼）ID=dlvLeft殴）黄干坪记住了卄也mbH它总在旳啊丈羽时isil处删切诽马-UMHCTh e7WUTOB(7)(7)首先根据分析得出的页面结构搭建整个网页的页面布局。在index.htmnlindex.htmnl。CSSCSS 中首选的让 元素水平居中的 方法将元素的margin-leftmargin-left禾口margin-rightmargin-right 属性Dreamweaver 网页设计教案10通过 CSSCSS 规则来精确控制网站首页页眉部分，从而实现页面布局效果。Dreamweaver 网页设计教案11【任务分析】完成 IDID 名称为 toptop 的 DIV

15、DIV 区块的 CSSCSS 设置。【任务实施】(1)(1)首先切换到样式表文件index.cssindex.css”，添加下列样式代码对整个页面的样式进 行定义。body padding:。；margin:。；background:url(./images/bg.gif);(1)(1)接下来在样式表中定义“ toptop”的样式，也就是定义页眉的结构，添加下列样式 代码：#top,#nav,#mainmargin:。auto; /*将页面中的三个大区块设置水平居中*/#banner(四)工作任务四：制作“个人主页”首页导航条【任务要求】通过 CSSCSS 规则来精确控制网站首页导航栏部分，从

16、而实现页面布局效果。【任务分析】完成 IDID 名称为 navnav 的 DIVDIV 区块的 CSSCSS 设置。核心思想是利用列表实现导航条 内容的添加，在通过csscss 样式实现布局的改变。【任务详解】(1)(1)在名称为“ navnav”的 DIVDIV 结构中输入以下代码首页心情日记Free 在“index.htmlindex.html”中，在网页的主题部分加入页眉部分的图片 代码如下：“ banner.jpgbanner.jpg” 文件。设置为 autoauto 即可。在实际使用中，我 们可以为这些需 要居中的元素创 建一个起容器作用的 divdiv。需要特 别注意的一点就 是，

17、必须为该容器 指定宽度。此部分符合样式 是为了对代码进 行优化，避免累 赘，提高代码的执 行效率。此部分由于不涉 及二级页面的制 作，将所有的导航width:600px;height:133px;(3)(3)页面效果如图 3 3 所示:图 3 “个人主页”页眉效果图Dreamweaver 网页设计教案12(2)(2)首先切换到样式表文件index.cssindex.css”，添加下列样式代码对导航条的样式进行 定义。#nav width:600px; height:22px; background-color:#90bcff; margin-top:-15px; text-align:cent

18、er; #nav ul list-style-type:none;margin-left:-15px; #nav li float:left;width:76px;text-align:center;line-height:22px; a:link color:#OOF;text-decoration:none; a:hovercolor:#F00; text-decoration:underline;a:acktivecolor:#000; text-decoration:none;a:visited background-color: #000;页面效果如图 4 4 所示：首贡 心情日记F

19、T一也走到从明天起纸飞机下 T 占图 4 4“个人主页”导航条效果图【任务要求】通过 CSSCSS 规则来精确控制网站首页主内容区域，从而实现页面布局效果。【任务分析】完成网站主内容区域布局设计及内容版式设计，此部分我们将完成IDID 名称为divMaindivMain 的 DIVDIV 区块的 CSSCSS 设置。一起走至U 从明天起纸飞机下一站目标设置为空链 接。（五）工作任务五：制作“个人主页”首页主内容区说明：a:linka:link 是超级链接的初始状态。a:hovera:hover 是把鼠标放上去时悬停的状态。a:activea:active 是鼠标点击时，即鼠标左键点击链接对象与

20、 释 放鼠标右键之间 很 短暂样式效果。a:visiteda:visited 是访问 过后的状态。一般网站需要设置的是“ a:lia:li nknk、”a:visiteda:visited、 a:hovera:hover三种状态，“ a:activea:active ”状态设置较少。Dreamweaver 网页设计教案13【任务详解】 打开“ index.cssindex.css”文件，在样式表中添在名称为divMaindivMain ”样式，并对其样式的具体设置。#divMainwidth:600px; height:800px;Background:red; /*添加区块测试颜色*/(3)

21、(3)添加主体内容左区块的页面结构，其代码如下:width=93 height=123 class=imgLeft /我的日记本他们彼此深信，是瞬间迸发的热情让他们相遇。这样的确心情轨迹董事长的一切都让人既羡慕又忌妒，但更让人受不了的是,有一天，上苍忽然赐给他一个神奇的礼物. 在“ index.cssindex.css”样式表中添在名称为“divLeftdivLeft ”样式，并对其样式的具体设置。#divLeftwidth:180px;height:580px;background:#D2E7FF;float:left;text-align:center;padding-left:10px;

22、padding-right:10px;.imgLeftborder:1px solid #09C;margin-top:15px;.leftTextTitlesize:10px;color: #66F;font-weight:bold;(2)(2)页面效果如图 5 5 所示:图 5 5“个人主页”主内容区效果图颜色测试法是网页 布局中最常用的测试方法。互动提问原因？总结：不占尺寸，但 是还可以看到区 块 的范围。img在样式设置过程中， 注重代码的效率， 此 部分注意提醒学生。1)1)两张图片的样式 相同2)2)两个图片的标题 相同3)3)两个图片的文字 描述相同height=103Dream

23、weaver 网页设计教案14苦爭托的一切都 11 人既茂專冥忌 妒，1 目主让入臣下了的足，七 天，上誉魏聘络他一 F 神焉的儿 厠图 5 5“个人主页”主内容区左区块效果图(6)(6)添加主体内容右区块的页面结构，其代码如下：介绍我努力的抓紧世界，最后却仍被世界淘汰，如果一开始就松手，我会不那么伤心吗？你说，亲爱的孩子，世事难料，随它去吧！照相本子关于童年，你记住了什么？两岁时，我拥有一只巨大的粉红猪，它总在我嚎啕大哭时逗我笑。三岁时，我骑着小木马一路摇到外婆家，它不喝水也不吃草。四岁时，我离家出走，在公车上睡着了，最后是太空超人送我回家。我真的没骗你，我通通都记得，还有照片为证。地下铁天

24、使在地下铁的入口，和我说再见的那一年，我渐渐看不见了。十五岁生日的那年秋天早晨，窗外下着毛毛雨，我喂好我的猫。六点零五分，我走进地下铁。向左走向右走Theyre both convincedthat a sudden passion joined them.Such certainth is beautiful,but uncertainty is more beautiful still.eftTextContenttext-align:left;(5)(5)页面效果如图 5 5 所示:由于此部分样式 比 较繁多，强调学生一 定要边做边测试，以 浏览器效果为准。提醒学生：注意代码的格式，要有

25、层次感。Dreamweaver 网页设计教案15Dreamweaver 网页设计教案16(7)(7)在index.cssindex.css”样式表中添在名称为 “ divRightdivRight ”样式，并对其样式的具体设置。#divRightwidth:400px;height:580px;background:#E9FBFF;float:left;background:#e9fbff url(./images/self.jpg) no-repeat bottom right;.rightTitlefont-size:5px;color:#0FC;.rightContentfont-size:15px;color:#000;(8)(8)页面效果如图 6 6 所示：我期力的抓家世畀最后却仍視世畀淘汰帕與一幵