网页设计与制作 教案（第14周）_第1页
网页设计与制作 教案（第14周）_第2页
网页设计与制作 教案（第14周）_第3页
网页设计与制作 教案（第14周）_第4页
网页设计与制作 教案（第14周）_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

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

文档简介

课程名称：网页设计与制作主备人：审核人：第4页网页设计与制作教案（第14周）专业课程学习任务项目9：使用表单综合实战—会员登记表使用CSS美化和布局网页任务1了解DIV与CSS简介任务2了解CSS基本知识任务3掌握设置CSS样式课时6教学对象授课时间设计者一、学习任务分析1．了解CSS美化和布局网页。2．教材中的知识与案例均是从实际工作中精选而来，具有很强的应用性和示范作用。同时教材结构清晰、内容翔实、语言浅显易懂，并配以精美的素材图片。二、学情分析对于刚刚接触网页设计的学生，思想活跃，有探索新知识的强烈心理，专业课的学习，除需要一定专业基础外，还需要学生具有很强的技能操作能力，所以在本次课的讲授中，采用演示、引导、任务练习的方法，让学生了解所学的内容。三、学习目标知识目标：掌握CSS基本知识。掌握设置CSS样式能力目标：学会CSS基础。素质目标：做人要讲诚信，不能在诚信中有缺失，让本该要合作的人远离你。懂得了做事不是靠嘴，而是要靠自己辛勤的付出和努力。要学会与人分享，在团队中不要以为自己是最牛的，要学会谦虚、学会谦让。四、教学策略重点难点：重点：了解CSS样式；难点：掌握设置CSS样式。教学方法：演示案例教学法。教学模式：分组讨论，集中点评，共同提高。五、教学环境及资源准备教学环境：多媒体实训室课前准备：1.对应本节课制作了相应的备课。2.认真设计教案、课件和教学过程。六、教学过程教学环节教学内容教师活动学生活动设计意图情景描述上课，同学们好！（相互问好！）7S管理组织教学。课前3分钟：看人看优点，心态多亮点。学会微笑，双唇微抿，嘴角上扬，你会多一份自信和坚定。复习提问：一、对于表单哪里不太了解？7S管理组织教学、统计出勤；课前3分钟教育；进行复习提问，让学生进入思考状态。以小组为团体回答，并加分。使学生注意力集中积极思考，积极回答问题。7S管理形成习惯，巩固知识，增强团队意识。引导问题网页的大体制作完毕后，剩余的美化及进一步的布局会让网页看起来更加的漂亮大气，能够完成这方面的工作，一个网页基本就算完成了，而这一点恰恰是小艾最缺失的，所以她专门找到了同事凯程，想让他好好为自己讲一讲关于美化和细致布局方面的知识，凯程非常细致的为小艾解说了关于网页中CSS样式及布局网页方面的知识。CSS样式是网页排版的重要核心，它让设计师从页面效果的困扰中得到解脱。虽然它是一套代码，但是在Dreamweaver的环境下，使用CSS不需要记忆代码及写程序，只要从对话框中设置即可。精美的网页离不开CSS技术。采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。使用CSS样式可以制作出更加复杂和精巧的网页，网页的维护和更新也更加容易和方便。本章主要介绍DIV与CSS概念、CSS样式的基本概念和语法、CSS样式设置和CSS定位。本次项目将会针对CSS样式的各种类型及应用范围做解说，让各位可以熟悉CSS功能的应用。好了，下面我们就一起来进行学习和进步吧！引出本节重点内容，注意培养学生的观察力和注意力。学生跟随老师的讲解和启发进入内容，积极思考。通过导入问题,让学生分小组思考。相关知识介绍任务1了解DIV与CSS简介Dreamweaver中CSS布局的网页，<DIV>与<Span>都是常用的标记，利用这两个标记，加上CSS对其样式的控制，可以很方便地实现网页的布局。活动1了解DIV概述DIV是CSS中的定位技术，在Dreamweaver中将其进行了可视化操作。文本、图像和表格等元素只能固定其位置，不能互相叠加在一起，使用DIV功能，可以将其放置在网页中的任何位置，还可以按顺序排放网页文档中的其他构成元素。层体现了网页技术从二维空间向三维空间的一种延伸。DIV的功能主要有以下两个方面。重叠排放网页中的元素：利用DIV，可以实现不同的图像重叠排列，而且可以随意改变排放的顺序。精确的定位：单击DIV上方的四边形控制手柄，将其拖动到指定位置，就可以改变层的位置。如果要精确定位APDIV在页面中的位置，可以在DIV的属性面板中输入精确的数值坐标。如果将DIV的坐标值设置为负数，DIV会在页面中消失。活动2了解DIV与SPAN的区别DIV和SPAN元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染。主要用于应用样式表（共同点）。两者最明显的区别在于DIV是块元素，而SPAN是行内元素（也称作内嵌元素）。所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。块元素和行内元素也不是一成不变的，通过定义CSS的display属性值可以互相转化。＜span＞SPAN标记有一个重要而实用的特性，即它什么事也不会做，它的唯一目的就是围绕HTML代码中的其他元素，这样就可以为它们指定样式了。还有一个标识符具有类似的功能，＜DIV＞DIV也被用来在HTML文件中建立逻辑部分。但与＜DIV＞SPAN不同，＜DIV＞工作于文本块一级，它在它所包含的HTML元素的前面及后面都引入了行分隔。活动3了解DIV与CSS布局优势掌握基于CSS的网页布局方式，是实现Web标准的基础。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变网页的外观和格式。采用CSS布局有以下优点。大大缩减页面代码，提高页面浏览速度，缩减带宽成本。结构清晰，容易被搜索引擎搜索到。缩短改版时间，只要简单地修改几个CSS文件就可以重新设计一个有成百上千页面的站点。强大的字体控制和排版能力。CSS非常容易编写，可以像编写HTML代码一样轻松地编写CSS。提高易用性，使用CSS可以结构化HTML，如<p>标记只用来控制段落，<heading>标记只用来控制标题，<table>标记只用来表现格式化的数据等。表现和内容相分离，将设计部分分离出来放在一个独立样式文件中。更方便搜索引擎的搜索，用只包含结构化内容的HTML代替嵌套的标记，搜索引擎将更有效地搜索到内容。table的布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不直观。而DIV更能体现样式和结构相分离，结构的重构性强。可以将许多网页的风格格式同时更新。不用再一页一页地更新。可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，整个站点的所有页面都会随之发生变动。任务2了解CSS基本知识在制作网页时，对文本的格式化是一件很繁琐的工作。利用CSS样式（CascadingStyleSheets）。不仅可以控制一篇文档中的文本格式，而且可以控制多篇文档的文本格式。因此使用CSS样式表定义页面文字，将会使工作量大大减小。一些好的CSS样式表的建立，使我们可以更进一步对页面及文本格式进行精确定制。活动1了解CSS的基本概念CSS的全名是CascadingStyleSheets，一般称为串联式样式表，其作用是为了加强网页上的排版效果。因为在网页设计初期，由于HTML代码上的不足，使得网页上的排版效果一直无法达到令人满意的境界，也因为这个缘故才会在HTML之后继续开发CSS代码。由于CSS是用来补充HTML的格式，而非用来取代HTML，因此CSS的所有功能，都是摆放在画面效果的设计，让HTML代码只单纯负责页面的内容结构。所以各位在页面上进行内容编辑时（包含文字、表格、窗体等），都还是使用HTML代码来创建页面结构，等到需要套用一些样式效果时才使用CSS样式。另外，设计者也可以将CSS样式储存成一个独立文件，再让这个样式文件同时套用到多个网页上，如此一来会让网页风格的设计更加简单方便。活动2了解CSS的基本语法样式表的基本语法如下：HTML标志{标志属性：属性值；标志属性：属性值；标志属性：属性值；……}现在首先讨论在HTML页面内直接引用样式表的方法。这个方法必须把样式表信息包括在<style>和</style>标记中，为了使样式表在整个页面中产生作用，应把该组标记及其内容放到<head>和</head>中去。例如，若要设置HTML页面中所有H1标题字显示为蓝色，其代码如下：<html><head><title>ThisisaCSSsamples</title><styletype="text/css"><!--H1{color:blue}--></style></head><body>...页面内容...</body></html>在使用样式表过程中，经常会有几个标志用到同一个属性，例如规定HTML页面中凡是粗体字、斜体字、1号标题字则显示为红色，按照上面介绍的方法应书写为：B{color:red}I{color:red}H1{color:red}显然这样书写十分麻烦，引进分组的概念会使其变得简洁明了，可以写成：B,I,H1{color:red}用逗号分隔各个HTML标志，把3行代码合并成1行。此外，同一个HTML标志，可以定义多种属性，例如，规定把H1～H6各级标题定义为红色黑体字，带下画线，则应写为：H1,H2,H3,H4,H5,H6{color:red;text-decoration:underline;font-family:"黑体"}任务3掌握设置CSS样式控制网页元素外观的CSS样式用来定义字体、颜色、边距和字间距等属性，可以使用Dreamweaver来对所有的CSS属性进行设置。CSS属性被分为9大类，即类型、背景、区块、方框、边框、列表、定位、扩展和过滤，下面分别对其进行介绍。拓展知识在CSS样式定义对话框中可以对不同的分类进行详细的设置。课件设疑，引起注意，牢牢抓住和吸引学生探究新知识的心理。讲练结合，突出实操能力培养。跟随老师进入思考分析状态。认真完成操作任务。通过课件引出问题，演示法和指导法，使学生掌握知识点。提高学生操作能力。分组讨论组织学生分小组讨论引导问题，保证人人有任务，人人有活干。评分项目评分指标标准分评分仪态举止是否得体0.5准备准备是否充分0.5语言声音是否洪亮、表达是否准确0.5小组配合组分工是否明确，配合是否默契0.5小计2分配小组长任务。通过引导问题，学生进行分析、思考。各个小组分配任务进行讨论问题。达到培养学生分工合作和查找资料能力。小组展示各小组派代表上黑板前展示自己小组引导问，由全班同学找出问题并由小组代表进行解答。展示并解答问题。学生展示讨论成果，回答问题。锻炼学生表达能力和仪表。锻炼学生表达能力和仪表。全班查找问题。课堂总结找最优秀小组讲解设计中的注意事项，并由教师点评总结设计注意事项，并分组点评各组优缺点。总结点评设计情况，并归纳知识点。学生总结所学知识，积极回答问题。学生掌握知识。布置作业一、了解CSS样式布置作业，并讲解具体要求。记录并在课下思考问题，主动学习。培养学生学习能力。便于下次课进行。七、教学评

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论