《HTML网页设计技术》教案.docx

HTM1.网页设计技术教案首页本次课标即:说课授课日期第6周周1授课班级课时1上课地点教学目标能力目标知识目标1 .本课程的任务、性质、目的2 .本课程的教学内在介绍与要求3 .本课程的能力培芥及教学要求4 .本课程的考核要求1 .熟悉本课程的地位与前后课程的掰接关系2 .了解本课程所涉及的网页设计技能能描述本课程在课程体系中的地位及作用重点难点重点：1熟悉简介本课程的教学内容难点:1 .本课程的性烧、目的、任务2 .本课程的能力培养要求蜒或考核能概述本课程的课程要求及教学内容参考资料网页设计M.电子工业出版社2010fCSSavH贞设计开发技术与实例应用，»电子工业用版社，son注：表格内容统一用5号宋体填写。教学设计步骤教学内容SW活动（方法与手段）学生活动时间分配告知（教学内容、目的）1、了解课程主要内容、考核方法2,熟悉网站开发步骤讲授设问听讲5分钟引入（任务项目）说课浏览经典网页演示启发提问讨论个别回答5分钟操练（掌握初步或基本能力）I、DreamWeaVer开发平台，2、指导学生配置熟悉平台环境3、创建网页并浏览教师讲解学生操作个别问答策体提示15分钟深化（加深对基本能力的体会）通过案例点评、小组讨论及教材理论大识的讲解，使学生了解站点创建'网页设计的含义'特点、依据、内容教仲演示要点提示重点讲解个别回答集体讨论15分钟归纳（知识和能力）第一个网页的创隹和浏览步界讲授集体思考个别回答10分钟训练巩固柘展检睑如内自评选出一个全班展示，如仙互评.认识了解Drea三三er开发平台.简单网典并浏览.启发诱导难点提示个别指导个人操作小加讨论5分钟函IU纳本次课所讲的内容，总结要实现的能力目标和知识目标，理点是站点的自建教加讲授听讲5分钟作业根据教学内容制定投习计划后记学生能大致了解本门课程的目的、性成及任务,以及教学内容，能明确课程考核方教学内容一、概述（一）课程性质（课程性质和价值）本课程是高职计算机软件技术夕业的一门主干专业课程。通过本课程的学习，要求学生掌握网页设计的基本慨念，学会使用常用的网页设计工具和常用脚本语言，能鲂设计制作常见的静态和动态网页，具爵网站的建立和飘护能力。同时通过本课程的学，J,培养学生的综合职业能力、创新精神和良好的职业道M,<-）课程基本理念本课程的设计”以能力为本位、以职业实践为主线、以项目误程为主体，”教学时各模块盛行独性，又有关联性.独立性是指各模块设计案例、组织教学、丸出曳点时应该相互独立，学生应该个模块个模块地学握其知识点：关联性是指各模块间存在相互美系在,重难点设计上应该加以配合如HRI1.诺吉模块存重基本代码的熟记和编写，时于较难编写代码的“框、架“”层”、“数据法接”等内容则放到marig的的使用模块中Hi点介绍。旧血网页设计技术3决程与计算机基础、向明恸询、PIWtOSh叩图像处理、计克机网络技术、数据库等暧程互相联系、互相补充.本课程作为软件技术专业的一门主干专业课程此时学生已经具备一定的计算机基础知识和动手能力,能较快地京匏网页设计的各种知识，井运用所学知识做出具有特色的网站，使学生能铭得到全面的培养，成为社会所需?用人才。<三）课程框架结构、学分和学时分配、对学生选课的建议本课程的设计”以能力为本位、以职业实践为正线、以项目课程为正捣破”/传统的学科体系的揍式.将网页设计职业岗位能力中用到的知识如网：页基批知识、MaBReaVer的使用、MM1.用吉、JaVaSCriP州本语台、Hash、Fin三rks进行整合并模块化.教学时各模块既有独立性,又有关联性.独立性是指各模块设计案例、组织数学、突出理点时应该相互独立,学生应该一个模块一个模块地拿樨共知识点：关联性是指各模块间存在相互补充关系,按理论实践一体化要求设计,强调动手做.张调解决问图.它体现了职业教育“以就业为导向，以能力为本位的职业教丙理念，课程框架结构、学分和学时分配、对学生选课的建议二、课程目标总目标：使学生掌握常用的网页设计工具,熟练运用多种网页设计技术,呢具b务网页设计、制作及站点管理的基本知识和基本技能,学生能好独立制作中小型的网站.<-）教学目标：1 .了解、IM1.CSS的定义、概念和作用；2 .理解服务器、客户缆、浏览器的概念和作用;3 .理解HrMI.语言中的各种文本格式、字符格式、段落设置、列表、标记的作用：4 .熟练操作DreaaWeaver：5 .理解CSS样式表的作用和.位义；6 .深入理解HIM1.语言的各种功能和应用：7 .深入理解我格、框架、及国的作用：8 .深入理解层的作用：（二）技能教学目标：1 .会使用DreanWeaVer网页设计工具IM作网页;2 .理解ImI1.语仔中的标记设置颜色、文本格式和列货：3 .熟练拿梅旗色侪的配置和背景图案的设置方法.熟练掌提字符、琏接颜色的设置方法：4 .熟练掌握网页设计中字符格式的设置方法,段落分段与换行的方法；5 .掌握f迎的语法结构，掌握HTM1.语言中标记的使用方法：6 .掌握在网页中添加CSS的方法.学握三种添加样式信息的方法会,使用CSS设徨网页格式和列非的格式：7 .学握在网页中嵌入图像的方法,掌握1.j嵌入图像相关标记的用法：8 .掌握与图像布局和位置相关的标记的概念和用法：9 .熟练拿板使用维时和相耐R1.,创建朝铳接、图像链接：学会图像映射的建立方法；10 .熟练掌握衣格的使用方法，会用及格布局并设计网页：11 .掌握框架制作网页的方法，会使用框架设计网页：12 .掌握制作表单的方法，会利用表仪建立交互式页面：<=）素质教学目标：1 .具右勃布学习的态度.严连求实'创新的工作作风：2 .具有良好的心理素质和职业道德素质：3 .具有高度而任心和良好的团队合作粕裨：4 .具有一定的科学思维方式和判断分析问题的能力：5 .具有较强的视贞设计创意思维、艺术设计索质.三、实施建议（一）教学建议：从f1.11V1.网页设计技术3的实际问翘出发，精心鹿翁各种典型案构例建，课程的宏观教学设计，例如，公司网站、网上鲜花口精、个人网站精选、书籍专卖等.以若干个案例为我体，形成循序渐进、种类笠样的项目群，构健完整的教学设计布局.k教学采用四阶段教学法"，将"教'学、练、做“融为一体，教学体现“教师为主导，学生为主体，训练为主跳”的原则，课堂上可以采用“四阶段教学法”：第1个阶段，案例引入,提出向他。通过案例演示，提出问题，给出知识点，讲解案例应用背景，给学生一个切入点，建立感性认识。目的是派发学生的学习兴速、让学生感到学有所用，从而明确本次课的教学目标。第2个阶段,学生自主学习.尝试解决问遨.充分利用我校以及互联网网络教学费源，引导学生自主学习，找到解决问即的方法和操作技能，培养学生的自主学习意识和学习方法，学生在学习和尝试解决问题过程中，发现问题，提出问题,在问题的引导下学习相关的知识和操作技能.第3个阶段,归纳总结，引申提高。在每次课结束前,引导学生进行IU纳总结.对本次课的实际意义、重点、雄点、容易出情处等及时进行总绪.并H对案例的不足之处进行引申和提高.注意在这件介段强谒的是“引导”学生,而不是老师讲斛.第4个阶段,举一反三、学以致用.案例源于生活，公终要应用于生活.为了使学生能学以致用、举一反三、触类旁通,斛次教学结束时及时布置相关的决后练习使学生在课后进一步更习巩冏.并且将课后作业纳入形成性考核的内容之一.同时给出下次课的学习内容.提示学生预习.2、充分利用现代化教学手段,提高教学效果教学中采用电子演示文稿、大屏延多媒体联机演示、网络教学等各种先进的教学手段，使课堂教学生动活泼、引人入胜.提高J'教学效果，同时提高/教学效率.包括：（1）利用多媒体教学系统广播教学,把学生的共同问题（需要提示的重点）地广过播教学”,边讲边演示，使学生即时看到操作效果，利用网络将课堂教学延伸到课外学，生根据需要通过网络学习有关的内在教,师的课件和教学用资料都己都上传到教学资源下就中心，方便学牛.课外学习和史习。（一）评价建议：对学生学业评价提出建议，体现评价的发展功能.I.突出过程评价，以职业岗位工作过程为若评基础以，全学期的教学情境进度为考核时间线以，一个完整的网站页面设计制作项目的驱动，在每个教学情境完成教学之屈，要求学生运用该教学情境所学技能设计制作项目中的相关进度作业（作品），并对其作业（作品进行考核.从而形成阶段性过程考核成绩，该成绩作为总评成镣的JR要如成部份（6占0%）.2 .强调目标评价和理论与实践一体化评价.注重引导学生进行学习方式的改变.3 .强调课程结束后的综合评价，结合全数学过程的过程考核项目对，学生的最终过程考核作品，从策划能力、美工设计能力、制作技术应用能力三个方面进行嫁合评价.从而充分发挥学生主动性和创造力,还要注重考核学生动手能力和在实践中分析问题、解决问题的能力。-I.建议在教学中注至团队协作能力的评分，课程结束时进行综合模块考核.建议以学生自己制作的网站的实际水平作为学生的学习本课程的成绩.教案首页本次课标题：情境一WWW技术基础授课日期第6周周1授课班级课时1上课地点1JD308教学目标能力目标知识目标1、初步认知仲态网页2、熟悉开发工具的使用3,广解河站开发的前沿技术1 .静态页面的主要也成部分2 .开发工具的使用教学任务开发工具的使用案例；电子银行静态页面的登附与注册.重点难点IR点：开发工具的使用难点：站点的建立作业或考核站点的隹立参考资料网页设计M1电子工业出版社2010MCSSQVH页设计开发技术与实例应用，J电子工业出版社，2011注：表格内容统一用5号宋体填写。教学设计步骤教学内容教师活动（方法与手段）学生活动时间分配告知（教学内容、目的）要达到的目的；1、了解忖站和忖页的龙本概念；2、掌樨网页的板面设计：3,掌握网站的策划与网站原则：4、了解网站的开发过程。讲授设问听讲5分钟引入（任务项目）实例1：浏览优秀的网站,对这些1.<站的主页进行分析，/解优秀网页的6局结构、色彩搭配、导航栏的设计、画效果等，演示¾启发提问讨论个别回答5分钟操练（掌握初步或基本能力）对各个网站的怡息内容、网页布局结构、色彩搭配进行分析、说明教伸讲斛学生操作个别回答集体提示15分钟深化（加深对基本能力的体会）网或布局色彩搭配快明教师演示要点提示重点讲解个别回答集体i寸论15分钟归纳（知识和能力）提示和技巧讲授集体思考个别回答10分钟训练巩固拓展检睑组织学生讨论，对所展示的网站发不自己见解启发法导难点提示个别指导个人操作小组讨论5分钟总结HJS1：如何上网浏览网站？同返2：如果不知道某个网站的网址怎样获得该网站的网址或浏览该网站？教师讲授听讲5分钟例根据教学内容制定预习计划后记学生能大致了解本门课程的目的、性质及任务，以及教学内容，健明确课程考核方式教学内容一、网页与网站的祗念网页：我们在浏览器中看到的贞而,它是一个单个的文件.网山里可以有文字、表格、图像、声音、视嫉等等.网站中的第一个页面成为首页或上页.网站：存放在网络服务器上的完整信息的集合体，它包含一个或多个网页。这些网页按照一定的组织结构，以链接等方式连接在一起，形成一个整体，描述一组完整的信息。二、网虫的设计1、网页主题网页的主即指网页所要表现的最主要的思想内涵,可以说师网页的灵魂.主题的概念是很模糊的，它是种约束，是同站点中各个页面于五影接纷中体现出统风格的约束：它也是一种力量,是将各个设计者的作品有机结合起来的力量，主即必“颂皿面主要推销或展示的产品或眼务紧密相关，同时它乂必须有相当的吸引力,这方面如果处理不好,就会使站点来访问者在其中的各页面间移动时,可能会怀疑是否还在同'站点，因为那些页面看起来并不像属于同一站.，及。面卜:题可以帮助设计者解决这雄SS.统的主烟可以轻易地将不同设计者的不同风格统起来，而又不会妨碍他们的设计思路和以感.确定主即时应遵街的原则2、网页的文字文字是网页嫉主要的表达形式，层管图形和解构的表格五彩推豺，但大多数浏览者大部分时间仍将注意力集中在页面中的文字上面，他们总是首先浏览文字内容而，族少关心其他页面元素，共至对导航系统也是如此；所以，给浏览考一个亲和的文字界面是必要的.3、网页的色彩在制作网站的时候，色彩的选择和搭配十分重要，因为一个网站格调的确定，往往取决于色彩的选择与搭限是否适当，一般的情况下，从以下几个方面来考虑色彩的选择I1 .色彩助鲜明性网站色彩的选择与搭配要鲜艳这,样比较容易吸引访问者的注意而Ii在访问者的记忆中驻留的时间也比较长.2 .色彩的独特性网孙色彩的选择与搭田要与众不问，这样就可以使得访问者留下深刻的印象.3 .色彩的合适性网站色彩的选择与搭配要与网站的内容气第相适合.1.色彩的联想性不向的色彩会产生不同的联想,在网站的设计中多运用具有美好岷患的色彩，可以使你的网站流带出另外一种气息。5.页面中各处用色的选择首先确定主色,本色是指页面中和财来说较大面枳使用的色彩主色可以反映出整个网页的风格,亦可使页面内容以色彩i告表达出来.接下来是确定辅色.辅色可以有多种.其应用范围包括粕入植的脩i色,表格边框颜色、至格的底色、小图标用色、文字颜色以及陡接色等等.k网页版式和布局1 .版面设计的步骤画出页面的结构草图：只需画出页面的大体结构。注；分辨率为640180时，页面显示尺寸为623311；分辨率为800*600时，页面显示尺寸海Q*I28;分辨率为1024*768时，页面显示尺寸为1007*60。：（2）布局细化和调整：将需要放置的功能模块安揉在页面上，注意突出重点和平衡正调（3）定格：确定出完美的布同方案，定格为M后的版式2 .常见网页布局（I）T型结构（2）同字结构（3）川字结构（4）三字结构（5）单一结构三、网站的策划与创建原则1、定位网站主题和名称设计一个站点，首先遇到的问题就是定位网站主2,所谓主时也就是你的网站的时材.对丁世材的选择，应注意；（1）主题要小而精.定位要小内容要精.调查结果也显示.网络上的“主应站”比“万全站”更受人们喜爱，就好比专卖店和百货商店，如果我需要买某方面的东西，村定会选择专卖店.（2）题材城好是你白己擅长或者喜爱的内容.这样在制作时，才不会觉得无聊或者力不从心。兴趣是制作网站的动力，没有热情，很难设计制作出杰出的作品.（3）国材不要太滥或者目标太高.“太滥”是指到处可见，人人都有的趣材：“目标太高”是指在这一题材上已羟有非华优秀，知名度很高的站点，你要超过它是很困难的.网站名称及域名的选择也是作常重要的和.现实生活中一样，网站名称是否正气，做，易记，对网站的形象和宣传推广也有很大影响.一般的建议是；（1）名称要正.也就是要合法，和理，和情.不能用反动的，色情的,迷信的，危害社会安全的名词语句。（2）名称要易记。根据中文网站浏览者的特点,除非特定需要,网站名称增好用中文名称,不要使用英文或者中英文混合型幺称.另外,网站名称的字数应该控制在六个字（最好四个字）以内,比如“XX阁”-XX设计室”，四个字的可以用成语，如“网打进”.字数少还有个好处1.般友情链接的小IogO尺寸是缄31,而六个字的宽位是78左右，适合于其他站点的燧接件版.（3）名称要有特色.名称平实就可以接受，如果能体现一定的内涵，给浏览者更多的视觉冲击和空间想象力，则为上品，这里举几个例子：音乐前卫,网页陶吧，天俄绝音。在体现出网站主题的同时，能点出特色之处，域名的选择也是如此，选个简维易记,比如可以模仿知名网站扩大自己的影响有，一定含义的域名也是网站成功的部分.2、网站的风格网站的整体风格及其创意设计是站长们最希望掌®是.最难以学习的-雄就碓在没仃一个向定的程式可以参照和模仿.给你一个上应.任何两人都不可能设计出完全一样的网站.风格(Sty1.e)是抽象的.是指站点的整体形象给浏览者的综合感受这.个“整体形象”包括站点的I(标志.色彩.字体.标谱.版面布局.浏览方式.交互性文字.语气，内容价值,存在意义，站点荣誉等等诸多因素.举个例子：我们觉得用易是平易近人的.迪斯尼是生动活泼H曲足,专业严刖的.这些都是网站给人们留下的不同感受.风格是独特的，是站点不同与其他网站的地方或，者色彩，或者技术，或者是交互方式，能让浏览者明确分辨出这是你的网站独有的，例如新世纪网O络的垠白色,网易壁纸站的特有框架,即使你只存到其中一页，也可以分辨出是哪个网站的.风格是有人性的，通过网站的外表，内容，文字，交流可以概括出一个站点的个性,侪结。是就文博雅，是执著热情,是活泼易变,是放任不羁，象诗词中的“泵放派”和“婉约派”,你可以用人的性格来比埔站点:有风格的网站与普通网站的区别在干冷地囱站你看到的只是堆砌在一起的信息：,只能用理性的感受来描述,比如信息fit大小,浏览速度快慢.但你浏览过有风格的网站后你能有更深一层的感性认识.比如站点有品位.和诲可亲.是老师,是朋友.教案首页本次课标题：情境二Mm1.制作网页(1)授课日期第7周周1授课班级课时2上课地点1JD308能力目标知识目标政学目标1、能够利用HTM1.标鸵设计静态网页的能力2、HTM1.代码调试能力峥态页面的主要如成法分2、HTM1.标解的使用教学任务HTM1.标签的使用案例:案例银行静态页面的登陆面注朋.蟠St点:HTM1.标签的使用难点：1、认识DreanWeaVerMX200。42、新增功能。3、DreamweaverMX2004主窗口。4、自定义工作环境.作业或考核课后题参考烫料网页设计M.电子工业出版社2010MCSSQvIq页设计开发技术与实例应用，J电子工业H；版社，2011注：表格内容统一用5号宋体填写。教学设计步骤救学内容敕师活动（方法与手段）学生活动时间分配告知（教学内容、目的）本次课主内容：简单.网页的制作过程要达到的目的：学会简电htm1.网页文本元素编辑等讲授设问听讲5分钟引入（任务项目）实例1：浏览优先的网站的网页,5成筒单htH网页文本元素编钳等.；Wr一加本启发提问讨论个别回答5分钟操练（掌握初步或基本能力）对网页的信息内容进行分析、说明'教师讲解学生掾作个别回答集体提示15分钟深化（加深对基本能力的体会）Htm1.文本元素制作教师演示要点提示加点讲解个别回答集体讨论15分钟归纳（知识和能力）提示和技巧讲授集体思考个别回答10分怦训I练巩固拓展检验组织学生讨论,对所展示的阿页发学自己见解启发诱导难点提示个别指导个人操作小组讨论5分钟总结教师讲授听讲5分钟例根据教学内容制定Bi习计划后记学生能大致了解本门课程的目的、性质及任务,以及教学内容，能明确课程考核方教学内容在目前市面上众多的网页编辑软件中有，的遮视效率，有的强调版面设计，而DreBnWeaYerMX2004可以很方便地实现这两方面的完美结合。另外Dr,ea11meaverMX2001的网页动态效果与网页排版功能都优于一股同类软件，即使是初学拧也能制作出相当水准的网页，所以DretumreaverMX2004是网页设计者的最佳选择。新课内容：、DrcannreaverMX2004简述当今网页设计软件可以说是层出不需a,cr。Inedia推出的DreanrweHYer就是一个广泛受到好评的网页设计软件.它是一套针时专业网页设计师特别设计的可视化网页开发工利用，它可以轻而易举地制作出跨越平台和跨越浏览器的充满动感的网页。Drea11racavcrMX2001拥有出色的软件界面，其特别的控制面板使设计界们用起来得心应手。DreaweaerMX还能与MaCrOmedia公司的其他软件进行完美的合作DreamWeaverMX2001最精彩之处便是其强大的多媒体处理功能，在设DitTMHDynaIniCHTV1.）和CSS（CascadingStyIeSheetS）方面表现得极为出色，它利用JaVaSCriPt和DI11M1.语言代码轻松地实现网页元素的动作和交瓦性操作。在这方面它超过TrontPage2002HOtdog和HomeSite等著名网页设计软件，成为目前最为流行的网页设计工具。二、新增功能随着软件版本的不断提裔，Drennweuver的功能也在不断增加和完善。DreHnnVeUVer目前已经升级到MX2004版，在功能方面也增强了许多，下面介绍一下其新增功能。1、设计方面的新增功能<1）改善工作界面DreainwcavcrMX2001提供了更规范化的工作界面及更好的面板管理r：eamvavciAK2001将多个面板组成组，随时可以展开或柒合，然后进一步把多个面板组放在一起D,11三BMaVe甜X2004在此基础上聘所有DreamreuYer关联窗口全部置入主窗口中（仅限ind<,ws操作系统，该界面被称为MD1.（MU1.tiPIeDoCU1.nent1.nterfaC多,文档界面,。（2）新增文档样式在新建文档时，DreanIWeaverMX2001提供多种文档样式供用户选择，这些文档样式主要有BaSiCpage（鞋本样页）、DynamicPUge（动态样页）、Temp1.atePage（模板样页）、Other（其他）、CSSSty1.eSheets（层叠样式表）、FrameSeIS（框架）、PageDeSignS（页面设计）和PageDesignw（Accessib1.e）等8个基本样式类型，使用这些样式可以使用户的网页设计拥有专业品用的界面和脚本。<3）更好地支持CSSDreanIeaYerMX进一步加强了对CSS（层段样式表）的支持，提供了一个改进的CSS样式面板。通过该面板用户可以使用设计时间样式片映S（in-1.imesty1.eSheeI）S减少页面编辑。改进后的CSS样式面板可以使用户很容易区分本地定义样式和那些在外部样式表中定义的样式，同时还提供了许多新的SS2结构.（4）增强IrDreanWeaVer的模板功能DrearaWeaVerMX200皓强了其模板功能，可以使用户很容易达到以下目的:所有的区域可随意选择，通过使用重史区域在同一个界面中显示多个项中J:以实现多个模板嵌套；使修改单个标识符的属性变得可行。2,代码方面新增功能（1）新增向导式代码工作界面新增的向导式代码工作界面可以使用户在使用。IneSite（最好的HTM1.编辑涔之一）或MaCronIedia的Co1.dFUSionStUdiO时，使用相似的工作妍面（仅三、DreamweaverMX2004界面荷介1 .选择DrcamweverMX工作界面在第一次启动DreUmWeHVerMX2004时，系统会打开WorkSPHCeSeIUP对话框让用户选择工作界面，如卜图所示。在该对话框中可以选1择壮即©2“日般2004的工作界面，用户可以选择DreanweaverMX2001Workspace（DreamweaverMX200柞界面）、DreamWeaYerMX2001WorkspaceHOmeSit。/COdCr-Sty1.和eDreanweavcr4WOrkSPaC等e3种工作界面中的一种“（1） DreamweaverMX2004WorkspaceDref三eaverMX2004WorkSpaC是。使用MD1.（多文档界面）一个整合型工作界面，其将所有的文档窗口和面板整合到主窗口中并，将面板组放在窗口的右边部分,如下图所示，推荐使用该工作界面。（2） DreanreeaverMX2001WorkspaceHomeSite/Coder-St外I面e在R'o在SPaCeSetUP对话框中选择DreaimreaVertIX2004WorkSPaCe按钮后,再启用下边的HOmeSite/Coder-styIe单选按钮，可以使用DreamWcavorMX2004WorkspaceHomCSite/Coder-StyIe工作界面。该工作界面也是,个IDJreanWCaYCrNX20（M相同的整合型的工作界面，不过其面板组放在主窗口的左边，如下图所示。该工作界面主要是为喜欢手写代码的用户设计的，在该工作界面中使用HOmeSite或MaCrMnedia自己的COIdFusionStudio等网页编辑器使用类似的界面，打开该工作界面时默认的显示模式为显示代码模式.2 .主窗口DreanIWeaverMX2（XM的整个工作界面为一个多文档型的窗口该，主窗口主要包括以卜内容。（1）菜单栏使用菜单栏基本上能够实JfirCaVWCaVerMX的所有功能.其功能包含在10个菜单中：Fi1.e（文件）菜单用来管理文件，Edit（编辑）菜雎用来编辑文本，Vie查看）菜单用来查看物件，InSert（插入）菜单用来插入元素，Modify（修改）菜单实现对页面元素修改的功能T,ext（文本）菜单用来对文本进行操作C,mnds（命令）菜单收生/所有的附加命令项s,ite（站点）菜单用来管理站点，WirKk"窗口）菜单用来切换所有的控制面板和窗E,e1.p（帮助）菜单可实现联机帮助功能。在后面的讲述中，将涉及到每个菜单中的命令。（2）插入栏插入栏是MX版本中新添加的部件，其实质就是reamweaver4中的对象面板组，在其中包含一些用于创建不同类型对象（如图像、表格、层、媒体、脚本和应用程序等）的按钮。用户可以单击InSert按钮降域/显示整个插入栏，通过单击相应的标识符名切换显示不同的按钮。教案首页本次课标题：情境二htm1.制作网页（1）授课日期第8周周1教学目标能力目标知识目标1能终利用HTM1.标卷设计静态网页的能h2HTM1.代蚂调试能力1静态页面的主要粗成部分2、HTM1.标签的使用HTM1.标签的使用案例：电子银行静态页面的登陆与注册.重点难点或点：HTM1.标签的使用难点：1、认识DreanWeaVCrMX200。42、新增功能。3、DreamWCaVCrVX2004主窗口。4、自定义工作环境.作业或考核课后题参考资料网页设计M.电予工业出版社2010MCSSQMq页设计开发技术与实例应用，§电子工业出版社，2011授课班级课时上课地点21JD308注：表格内容统一用5号宋体填写。教学设计步骤教学内容教师活动（方法与手段）学生活动时间分配告知（教学内容、目的）本次课主内容：简附网页的制作过程要达到的目的：1、认H1.DrvamreaYerMX200.-12、新增功能.3、DreanweaVerUX200主4窗口。4、自定义工作环境，讲授设问听讲5分钟引入（任务项目）实例1：浏览优秀的网站的网页.完成简单htm1.网页等.演示启发提问讨论个别回答5分钟操练（掌握初步或基本能力）对网页的信息内容、网页布局结构色彩搭配进行分析.说明。教师讲解学生掾作个别P1.答集体提示15分钟深化（加深对基本能力的体会）Htm1.元素制作教师演示要点提示重点讲解个别回答集体讨论15分钟归纳（知识和能力）提示和技巧讲授集体思考个别回答10分钟训练巩固柘展检验组织学生讨论,对所展示的网页发，自己见解启发该导难点提示个别指导个人操作小组讨论5分钟总结需要掌握DrttureeaVerMX200在4设计、代码和扩展方面的功能教师讲授听讲5分钟作业根据教学内容制定fft习计划后记学生能大致了解本门课程的目的、性质及任务,以及教学内容，能明确课程考核方,教学过程一、传单个人网页分析问题1；在该网页中大家看到了什么？ 不同放色、不同大小、携放在不同位置的文字 位置不同、大小不利的灰色规条 项目列表 特殊字符等问题2：这些元索是如何制作的呢？二、DreefVer中向学个人网页文本元素的辑I.在上节课新建的网页的设计视图的工作区域空白处输入文字欢迎光临我的个人网页”，选中文字，在Dreaweaver卜方的属性面板上设置其段落属性为1标I题"，对其方式为W1.-,修改其颜色为“红色”,2 .光标定位在“欢迎光临我的个人网贝”后而，Knt【er】把，点击常用抽入栏.选择TM1.送项,单击其中的“"按钮，在“欢迎光临我的个人网引”下而插入一条水平线.3 .选中水平线,设SS水平线妍性“对其”中包含左、右、中三中对其方式.4 .在水平战后面按勖ier】键，输入“一、白我介绍"，途中该文本，设置其典性2如-2图-5所示.5,近复步骤2插入水平设，6 .输入输入“姓名”、"性别”、“出生邱月-"6、2“毕业院校”、“所学专业”等四行文字，每行的给足技Knter迸换行.7 .选中这四行文字，切换“常用工具栏”为“文本选项”，点击其上的"限W1.”8 .重史步骤4-6,制作联系方式部分.9 .选中联系方式的四行文字，切换“常用工具校”为“文本选项”,点击其上的掖钮.10 .重复步骤2插入页面底部的水平跷并设笠其胆性.11 .输入版权信息三、简单个人网页中常用文本标记的应用1.把网页切换到“混合模式视图”，分析个页面元Im1.标记,如图2-2-12所示.逸中设计视图中的内容，鬃统将自动在代码视图模式中显示相应的代码.教案首页本次课标遨：第2承表格的基础授课日期第9周周一授课班级13级始创班课时共2小时上课地点IK教学目标能力（技能）目标知识目标会使用表格实现页面的布局1.F打表格的发作.2掌握绘制表格和单元格的使用.教学任努及案例精品课程网站中各个同页的跳接.重点难点值点:网站中表格布局的设计技巧。难点：网站的表格布局的使用方法.单元考核战划个商业站点各个网页的表格布局.参考资料任务书、源代码、网络货源,参考书注：表格内容统一用5号宋体填写。教学设计步骤教学内容教师活动（方法与手段）学生活动时间分配告知（教学内容、目的）1.了解网站中表格的使用。讲授听讲5分钟引入（任务项目）浏览精品课程网的表格的使用示斛问演讲提听讲、小组讨论10分钟操练（掌握初步或基本能力）2、如，表格布局.教师讲解学生操作个别操作集体提示10分钟深化（加深对基本能力的体会）案例点评、小组讨论；及教材理论知识的讲解；加深网页表格的应用等.教师演示要点提示近点讲解个别同答集体讨论10分钟归纳（知识和能力网页表格布局的使用方法.讲授听讲10分钟训练巩固拓展检览G用针对“想完成的的内容遂行辞伶，肯如州用!出身加胸，启发选导难点提示个别指导个人操作小组讨论10分钟总结归纳本次课所讲的内容，总结要实J的能力目标和知识目标.i教师讲授听讲5分钟作业2.衰格布局有几种布局方式.分别用在什，卜教学内容一、本例表格的htm1.语法结构分析切换到代码视图模式“观察页面中的超级链接语法格式.1 .表格的属性：<TAB1.Ea1.ign=centerborder-0ce1.IPadding-Oce1.ISpacing-Owidth-778>2 .单元格的背景颜色：<TDbgCo1.or=#666666height=25><TD>3.单元格内容的对齐方式1 TDa1.ign-midd1.ec1.ass=9font*idth=24您9>的位置：苜页<TD>二、建立表格的htm1.语法总结2 .建立表格由四对标记组成：<tab1.eXtab1.e定义表格元素<tr><tr>定义表格的行<th><th>定义表格的表头单元格<td><td>定义表格的单元格表格的基本语法结构：<1.ab1.e><tr><1.h>第一行第一列单元格内容1.h><th>第一行第二列雎元格内容<th><th>第一行第列单元格内容<th><tr><tr>Vd>第二行第一列单元格内容td><1.d>第二行第二列单元格内容"1.d><td>第二行第N列单元格内容<td><tr><tab1.e>表格如果没有表头单元格，此处的1.h>可以由<1.d>代替。3 .表格尺寸、背景表格尺J：tab1.eWidth=数值heigh"数值>背:景颜色：<tab1.ebgco1.or解色>背景图片：<tab1.ebackground=UR1.>4 .表格间距表格间距：<tab1.eCe1.1.SPaCing数:值>5 .表格边距表格边距：tab1.eCC1.1.Padding数:值6 .表格标题表格标题：CCaPtionHIiKn参=数值VaIign=参数值表格标超/cup1.ion7 .行高与布局trheight=数值：设置表格内某行的高度1.ra1.ign=参数值：该行中单元格的水平对齐方式中（ft,center,rih）ttrva1.ig11-数值：该行中垠无格的垂直对齐方式（top,midd1.e,bottom）7-行边框与背景某彳j内边框的颜色：trborderco1.o慢-色值某行背景颜色：trbgco1.or=颜色值8 .列宽与布局表格列宽：tdWidIh=数值or1.hWidI1.微值水平对齐：tda1.ign=参数值ortha1.ig傅数值垂直对齐：dYa1.iKn=参数值or1.hYa1.ign参数值