网页设计与制作 教案（第1、2周）了解网页的组成、布局和色彩；掌握网页中图像的处理基础_第1页
网页设计与制作 教案（第1、2周）了解网页的组成、布局和色彩；掌握网页中图像的处理基础_第2页
网页设计与制作 教案（第1、2周）了解网页的组成、布局和色彩；掌握网页中图像的处理基础_第3页
网页设计与制作 教案（第1、2周）了解网页的组成、布局和色彩；掌握网页中图像的处理基础_第4页
网页设计与制作 教案（第1、2周）了解网页的组成、布局和色彩；掌握网页中图像的处理基础_第5页
已阅读5页，还剩13页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

课程名称：网页设计与制作主备人：审核人：第9页网页设计与制作教案（第1周）专业课程学习任务项目1：了解网页的组成、布局和色彩任务1了解网页的基本概念任务2了解网页设计的基础知识任务3掌握网页布局设计与色彩综合实战—绘制国字型网页布局草图综合实战—采集色彩课时6教学对象授课时间设计者一、学习任务分析1．通过学习了解网页基本概念、基础知识以及布局与色彩。2．教材中的知识与案例均是从实际工作中精选而来，具有很强的应用性和示范作用。同时教材结构清晰、内容翔实、语言浅显易懂，并配以精美的素材图片。二、学情分析对于刚刚接触网页设计的学生，思想活跃，有探索新知识的强烈心理，专业课的学习，除需要一定专业基础外，还需要学生具有很强的技能操作能力，所以在本次课的讲授中，采用演示、引导、任务练习的方法，让学生了解所学的内容。三、学习目标知识目标：了解网页设计的相关基础。能力目标：学会网页布局版式设计的有哪些、学会网页设计的基础有哪些、学会网页设计中的色彩分类有哪些。素质目标：从基础学起，培养工匠精神，多学多练加强个人的网页设计能力；培养自身的审美能力，增加网页设计中的美感。四、教学策略重点难点：重点：掌握网页设计的相关知识；难点：了解网页的组成、布局和色彩教学方法：讲授与案例教学法。教学模式：分组讨论，集中点评，共同提高。五、教学环境及资源准备教学环境：多媒体实训室课前准备：1.对应本节课制作了相应的备课。2.认真设计教案、课件和教学过程。六、教学过程教学环节教学内容教师活动学生活动设计意图情景描述上课，同学们好！（相互问好！）7S管理组织教学。课前3分钟：工匠精神：古语云:"玉不琢，不成器"。精雕细琢，精益求精。李克强总理：要大力弘扬工匠精神，厚植工匠文化，恪尽职业操守，崇尚精益求精，培育众多‘中国工匠’，打造更多享誉世界的‘中国品牌’，推动中国经济发展进入质量时代。复习提问：一、生活中你都见过那些工作是与网页有关的？7S管理组织教学、统计出勤；课前3分钟教育；进行复习提问，让学生进入思考状态。以小组为团体回答，并加分。使学生注意力集中积极思考，积极回答问题。7S管理形成习惯，巩固知识，增强团队意识。引导问题本章主要讲解了解网页的基本概念、了解网页设计该用到的软件、掌握网页的布局和色彩。使读者对网页设计的一些基础知识有一个初步了解，方便读者后面的学习。引出本节重点内容，注意培养学生的观察力和注意力。学生跟随老师的讲解和启发进入内容，积极思考。通过导入问题,让学生分小组思考。相关知识介绍任务1了解网页的基本概念要学习网页设计，首先要了解一些基本概念，如网页、URL等。本节将首先介绍这些网页的基本概念，从而为后面设计更复杂的网页打下良好的基础。活动1认识网页网页，是指网站中的任何一个页面，通常是HTML格式。进入网站后第一眼看到的即是这个网站的首页活动2认识统一资源定位符URLURL英文全称是UniformResourceLocator，即统一资源定位符，它是一种通用的地址格式，指出了文件在Internet中的位置。一个完整的URL地址由协议名、服务器地址、在服务器中的路径和文件名4部分组成，浏览器地址栏中显示了完整的URL地址任务2了解网页设计的基础知识本次任务就带领大家了解一下网页设计的基础知识，为以后的学习做好铺垫。活动1了解网页设计软件网页设计的软件有很多，对于初学者只要了解用于网页的布局、图像处理和动画制作的相关软件就可以了。活动2了解网页标记语言HTMLHTML的任何标记都由“<”和“>”括起来，如<HTML><I>。在起始标记的标记名前加上符号“/”便是其终止标记，如</I>，夹在起始标记和终止标记之间的内容受标记的控制，例如<I>假期愉快</I>，夹在标记“I”之间的“假期愉快”将受标记“I”的控制。HTML文件的基本结构也是如此活动3了解网页组成网页设计时页面中的主要组成元素有文字、图片及超级链接等项目，其中文字及图片是用来表达页面中的资料内容。但是网站中当然不可能只有一个页面，此时“超级链接”就负起了各个网页之间链接的工作。文字、图片与超级链接是网页的主要组成组件。网页效果的技术一日千里，单纯的文字及图片已经无法满足设计及浏览者的需求，背景音乐、Animate动画等多媒体交互式特效是目前网页设计的主流任务3掌握网页布局设计与色彩掌握布局设计与色彩，可以让网页设计的过程更加的轻松、愉快，能让设计者少走很多的弯路，在网页设计中不是会用软件做出来就可以了，每个网页都要有符合主题的布局和色彩，这样才能将最终结果做到统一并具有美感。活动1掌握网页布局设计设计网页页面时需要根据不同的网站性质和页面内容选择合适的布局形式，通过不同的页面布局形式可以将常见的网页分为以下几种类型。1.“国”字型布局“国”字型：这种布局是网页上使用最多的一种布局类型，是综合性网站常用的版式，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列小条内容，通常情况下左边是主菜单，右面放友情链接等次要内容，中间是主要内容，与左右一起罗列到底，最底端是网站的一些基本信息、联系方式、版权声明等。这种版面的优点是页面充满、内容丰富、信息量大；缺点是页面拥挤、不够灵活。2.拐角型布局拐角型，又称T字型布局，这种结构和上一种只是形式上的区别，其实是很相近的，就是网页上边和左右两边相结合的布局，通常右边为主要内容，比例较大。在实际运用中还可以改变T布局的形式，如左右两栏式布局，一半是正文，另一半是形象的图像或导航栏。这种版面的优点是页面结构清晰、主次分明，易于使用；缺点是规矩呆板，如果细节色彩上不到位，很容易让人“看之无味”。3．框架型布局框架型布局一般分成上下或左右布局，一栏是导航栏目，一栏是正文信息。复杂的框架结构可以将页面分成许多部分，常见的是三栏布局。左边一栏显示导航栏，右边显示正文信息。4.封面型布局这种类型的页面设计一般很精美，通常出现在时尚类网站、企业网站或个人网站的首页，优点显而易见、美观吸引人；缺点是速度慢。5.Html5型布局Html5型是目前非常流行的一种页面形式，由于Html5功能的强大，页面所表达的信息更加丰富，且视觉效果出众。6.标题正文型布局这种类型即上面是标题，下面是正文，一些文章页面或注册页面多属于此类型。活动2掌握网页色彩网页色彩与人的心理感觉和情绪有一定的关系，利用这一点可以在设计时形成自己独特的色彩效果，给浏览者留下深刻印象，加大产品的售出概率。不同的色系在网页中也会拥有自己的独特之处，网页色彩分类主要有按照色相分类和按印象分类两种。按照色相分类色彩常见的色彩搭配按照色相的顺序归类。每类都以该色相为主，配以其他色相或者同色相的，应用对比和调和的方法，并按照从轻快到浓烈的顺序排序。按印象分类色彩色彩搭配看似复杂，但并不神秘。既然每种色彩在印象空间中都有自己的位置，那么色彩搭配得到的印象可以用加减法来近似估算。如果每种色彩都是高亮度的，那么它们的叠加，自然会是柔和、明亮的；如果每种色彩都是浓烈的，那么它们叠加，就会是浓烈的。当然在实际设计过程中，设计师还要考虑到乘除法，例如同样亮度和对比度的色彩，在色环上的角度不同，搭配起来就会得到千变万化的感觉。因此，色彩除了按色相的搭配外，还可以将印象作为搭配分类的方法。活动3掌握网页中的色彩推移网页页面中采用色彩推移的方式组合色彩，这通常是构成页面统一色调的最好方法之一。色彩推移是将色彩按照一定规律有秩序地排列、组合的一种作品形式。种类有色相推移、明度推移、纯度推移、互补推移和综合推移等。设计师可以通过色彩推移的方法使页面色彩看起来更加统一、和谐。色彩推移同样可以运用到局部图像上。课件设疑，引起注意，牢牢抓住和吸引学生探究新知识的心理。讲练结合，突出实操能力培养。跟随老师进入思考分析状态。认真完成操作任务。通过课件引出问题，演示法和指导法，使学生掌握知识点。提高学生操作能力。分组讨论组织学生分小组讨论引导问题，保证人人有任务，人人有活干。评分项目评分指标标准分评分仪态举止是否得体0.5准备准备是否充分0.5语言声音是否洪亮、表达是否准确0.5小组配合组分工是否明确，配合是否默契0.5小计2分配小组长任务。通过引导问题，学生进行分析、思考。各个小组分配任务进行讨论问题。达到培养学生分工合作和查找资料能力。小组展示各小组派代表上黑板前展示自己小组引导问，由全班同学找出问题并由小组代表进行解答。展示并解答问题。学生展示讨论成果，回答问题。锻炼学生表达能力和仪表。锻炼学生表达能力和仪表。全班查找问题。课堂总结找最优秀小组讲解设计中的注意事项，并由教师点评总结设计注意事项，并分组点评各组优缺点。总结点评设计情况，并归纳知识点。学生总结所学知识，积极回答问题。学生掌握知识。布置作业一、记住网页设计与制作的基础都有哪些布置作业，并讲解具体要求。记录并在课下思考问题，主动学习。培养学生学习能力。便于下次课进行。七、教学评价设计通过小组自我评价、小组评价、教师评价完成对小组进行评价，教师和组长对成员进行评价，回答问题加1分；演示操作加2分，第一名小组的成员每人加1分。记入平面成绩，期末进行成绩综合评定。评价项目评价指标标准分自我评价小组评价教师评价学习态度学习主动，规范操作，纪律好2任务完成知识点掌握，实操完成效果好2小组讨论表达清晰，任务方案科学合理2创新精神运用多种方法创意设计17S管理现场整理，保持工作环境整洁1团结协作小组成员是否团结协作2小计总评小组学习活动综合评价表八、教学反思网页设计与制作教案（第2周）专业课程学习任务项目2：掌握网页中图像的处理基础任务1掌握剪裁与校正图像任务2掌握添加水印保护图像任务3掌握处理色调问题课时6教学对象授课时间设计者一、学习任务分析1．熟悉网页图像的处理基础。2．教材中的知识与案例均是从实际工作中精选而来，具有很强的应用性和示范作用。同时教材结构清晰、内容翔实、语言浅显易懂，并配以精美的素材图片。二、学情分析对于刚刚接触网页设计的学生，思想活跃，有探索新知识的强烈心理，专业课的学习，除需要一定专业基础外，还需要学生具有很强的技能操作能力，所以在本次课的讲授中，采用演示、引导、任务练习的方法，让学生了解所学的内容。三、学习目标知识目标：掌握在网页设计前为图像进行校正的方法。掌握为图像添加水印保护的方法。掌握为图像处理色调问题的方法。能力目标：学会为图像剪裁与倾斜校正的处理。学会为图像添加水印的处理。学会为图像进行色调的处理。素质目标：明确分工，充分了解团结协作在工作中的重要性。用知识武装自己，提高自身动手操作的能力，增强学习的自信心。四、教学策略重点难点：重点：图像的处理基础；难点：对于水印、改色等操作的理解教学方法：演示案例教学法。教学模式：分组讨论，集中点评，共同提高。五、教学环境及资源准备教学环境：多媒体实训室课前准备：1.对应本节课制作了相应的备课。2.认真设计教案、课件和教学过程。六、教学过程教学环节教学内容教师活动学生活动设计意图情景描述上课，同学们好！（相互问好！）7S管理组织教学。课前3分钟：本节课与同学们分享一句话:“你若盛开，蝴蝶自来，你若精彩，天自安排”你可以不优秀，但不能不努力!。复习提问：一、了解网页设计关于图像部分都需要哪些基础软件？7S管理组织教学、统计出勤；课前3分钟教育；进行复习提问，让学生进入思考状态。以小组为团体回答，并加分。使学生注意力集中积极思考，积极回答问题。7S管理形成习惯，巩固知识，增强团队意识。引导问题网页设计中只要涉及到图像，几乎就会需要对其进行相应的处理，无论是为保护自己图像不被盗用，还是用到的图像中有一些瑕疵，这些都需要进行一下前期的加工，将其处理成在网页中属于自己风格的特色，图像处理是网页设计中不可缺少一项重要内容。为此，小艾想使用比较专业的软件对图像进行处理，而同事凯程告诉她，Photoshop就是一个在图像处理中非常专业、非常好用的软件，在处理图像方面可以将其分为剪裁与倾斜校正、修饰及保护自己的图像、挽救及处理色调问题、瑕疵图像处理等相关操作。接下来，大家可以跟随小艾一起走进Photoshop的图像处理环节。引出本节重点内容，注意培养学生的观察力和注意力。学生跟随老师的讲解和启发进入内容，积极思考。通过导入问题,让学生分小组思考。相关知识介绍任务1掌握剪裁与校正图像案网页中的图像需要拍摄照片时，由于角度或姿势等问题，拍摄出的照片会出现倾斜效果，如果对这张照片非常喜欢，又不能重新去拍的时候，可以通过Photoshop软件来对其进行重新构图和修正活动1掌握裁剪图像不同网页中的图像，可以根据布局对其进行精细的剪裁，例如淘宝网店页面中有些图像，在一些特定的区域中都是需要固定大小的，在插入图像之前一定要先了解该区域图像的大小，所谓磨刀不误砍柴工，就是在前期将图像按照固定大小进行创建或裁剪，在这个基础之上再进行视觉方面的设计，只有这样才能真正收到事半功倍的效果。这里以网店页面中的标准店招作为裁剪对象，标准店招的尺寸是宽度为950像素，高度为120像素。打开一张图像后，选择裁剪工具，在属性栏中设置“宽度”为“950像素”、“高度”为“120像素”、“分辨率”设置为“72像素/英寸”，之后使用裁剪工具在图像中找到自己喜欢的区域创建一个裁剪框，按”Enter”键即可完成裁剪，如图所示。活动2掌握校正图像当找到网页中需要应用的图像时，难免会发现有一些图像会倾斜的情况出现，这种情况多出现在拍摄照片时由于角度或姿势等问题，会把相片拍歪，如果不想进行重新拍摄，但是，还想继续使用这张照片，就需要对其进行相应的校正，将其符合网页的需要。处理前后的对比如图。活动3掌握旋转图像当我们使用数码相机拍摄照片时，由于相机没有自动转正功能，会使输入到计算机中的照片由直幅变为横躺效果，此时将其直接上传到网店中会使图像看起来很不舒服，这会使整个网页的美感会大大下降。此时即可利用Photoshop即可快速将横幅的照片转换成直幅效果，旋转前后的对比如图所示。任务2掌握添加水印保护图像如果网页中出现的照片是自己拍摄的，此时一定会考虑两个问题一个是如何让浏览者更喜欢网页中的照片；一个是不想自己辛苦拍摄并处理的照片被别人稍加篡改就可以应用到其他网页中。此时就得从版权方面考虑，一定要为图像添加相应的版权保护，例如加一些浮在表面的水印或者是一些图像图形等。活动1掌握添加文字水印为照片添加文字水印，除了能增加其专业性和整体感外，还能保护自己的照片防止被外人盗用，添加的文字水印一般都比较淡不会影响图像本身的观赏性。活动2掌握添加图像水印为图像添加水印，不但可以直接输入文本，还可以将具有相应特征的图像直接添加到图像中。图像性质的水印可以是商标，也可以是文字与图形相结合的图像，这样做也可以防止自己辛苦得到的图像被盗用任务3掌握处理色调问题拍摄照片时并不是所有的图像都能达到理想效果，有时会因为环境的问题，拍出的照片会出现发暗、曝光不足、颜色不正等瑕疵，本次任务就通过课堂实操的方式为大家讲解通过Photoshop校正此类问题的方法。活动1掌握处理偏暗曝光不足的图像在太阳下或光线不足的环境中拍摄相片时，如果没有控制好相机的设定，就会拍出太亮或太暗的照片。如果是曝光不足的照片，画面会出现发灰或发黑的效果，从而影响照片的质量，要想将照片以最佳的状态进行储存，一是在拍照时调整好光圈、角度和位置，来得到最佳效果；二是将照片拍坏后，使用Photoshop对其进行修改，得到最佳效果。活动2掌握处理偏色图像在日常生活中大家拍摄的照片在颜色方面与现实见到的不太一样，常常会出现偏色问题，以及颜色鲜艳度等问题，如果不想重拍就得对其进行色偏的调整。活动3掌握改变图像的色调当前网页中的图像尤其是电商网页的商品琳琅满目五颜六色，要想得到此类的效果，在网拍商品时，由于颜色不全而会造成有的颜色产品没有被拍照，这样就无法上传，等到商品到货后，再拍会浪费很多的时间，这时只要使用Photoshop中的“色相/饱和度”调整功能，就可以轻松将一种颜色变为多种颜色，可以是整体调整也可以是局部调整，如图所示。课件设疑，引起注意，牢牢抓住和吸引

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论