网页设计教学设计

《网页设计教学设计》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、教学设计授课人：罗燕珊课题5.1咖啡机专卖网页（使用表格）科目网页设计教学对象屮职学生授课类型讲授法、直观演示法、范例教学法课时4一、教材内容分析表格是网页设计中非常常用的的工具，它不仅可以将相关数据有序地排列在一起，还可以精确地定位文字、图像等网页元素在网页屮的位置，使得页面在形式上既丰富多彩又条理清楚，在组织上井然冇序而不显单调。使用表格进行页面布局的最大好处是，即使浏览者改变计算机的分辨率也不会影响网贝的浏览效果。因此，表格是网站设计人员必须掌握的工具。表格运用得是否熟练，是划分专业制作人士和业余爱好者的一个重要

2、标准。二、学情分析1、基础太薄弱一般中职学生都是在初中棊础较差，不愿意再继续学习更难的知识，才选择进入中职学校。2、缺乏学习兴趣正由于基础差，从大多数学牛都是从初中或者小学开始成绩较差，所以，中职学校学生在学习上的挫败感非常强烈，在这一次又一次的失败中，由于没有正确的引导，英至还受到一些不良思想的影响，学生渐渐地丧失了学习的兴趣。在教学过程中，要对所有的学生有耐心，要鼓励基础好的同学朝耒知的领域摸索，而对于基础较差的学生，则要求他们完成好木堂课老师布置的练习任务，以夯实基础。教师要想办法改变学生的学习观念，让他们对网页

3、设计课程冇全新认识，以正确和积极的态度参与到教学中来，使木节课程教学得以顺利和有效地进行。三、教学目标知识与技能目标：1、表格的简单操作2、网页中的数据表格3、利用表格进彳丁页面布局过程与方法目标：1、利用案例教学，让学生了解新知识。2、通过用表格结构设计网页，使学牛进-步理解表格的作用、功能及网页设计方法的多样性，培养学牛的发散思维能力。3、通过口主探究，使学生掌握软件的使用规则，培养学生口主学习的能力。情感、态度与价值观目标：1、通过案例教学使学生体验软件学习的一般方法及规律，提高学生口主学习的能力。2、通过运用表

4、格布局网页対象活动，进一步掌握各种不同対象属性的设置方法和规律，体验创造的快乐。3、用表格排版网页解决了网页版面杂乱的问题，培养学生在遇到困难时灵活运用各种方法解决，促进其建站信心。四、教学方法范例教学法，讲学法，肓观演示法。五、教学重难点教学重点：插入表格和更改表格属性。教学难点：1、让学生灵活掌握排列表格和设置表格属性的方法。2、导入表格式数据。3、利用表格的布局模式实现复杂是页面布局。六、教学环境及设备资源1、机房2、投影仪3、老师准备好PPT4、预先做好问题的设计及突发事件的应对七、教学过程教学环节与时间分配教

5、学内容师生活动设计意图一、导入明确教学内容【案例分析】酿制一杯完美的咖啡，需要借助专门的咖啡机来完成。利用因特网可以足不出户地在网上了解咖啡机的种类和价格。因此，在咖啡机销伟网页设计上根据功能需求，合理进行布局和制作，体现出咖啡的口感和文化特色。【设计理念】在网页设计、制作过程屮，讲淡雅的浅咖啡色和咖啡机设计为背景图案,表现出咖啡机的品质和咖啡的香浓美味。咖啡色的导航条更为网页的主题增色不少。右下方的图片是咖啡机专卖产品的展示效果，整体设计浪漫温馨，是浏览者能沉浸在咖啡的香气中。给学生展示咖啡机专卖网页。通过欣赏主页，

6、自主体会网站整体风格与上题的融合，并在教师的带领下分析、了解网站常冇的功能版块以及表格的作用。通过实际案例导入课程。是什么让各个不同的功能块整齐排列在网页中呢？引出幕后主宰者——表格。二、深入了解表格的运用【操作步骤】1、启动DreamweaverCS3，新建一个空白文档。保存文件名“index”。2、选择“修改一页面属性”命令，弹出“页面属性”对话框，在“分类”列表框屮选择“外观”选项，将“大小”选项设为12,“文本颜色”选项设为白色，上下左右边距均设为0,单击“确定”按钮。3、在“插入”面板的“常用”选项卡中单击“

7、表格”按钮，在弹出的“表格”対话框中进行设置，单击“确定”按钮。保持表格的选取状态，在“属性”面板的“对其”下拉列表屮选择“居屮对其”选项。4、单击“属性”面板中“背景图像”选项右侧的“浏览文件”按钮，弹出“选择图像源文件”对话椎，插入背景图片，单击“确定”按钮。将光标置入表格屮，在“属性”面板中“高”选项的数值框中输入“550”。5、在“插入”面板的“常用”选项卡屮单击“表格”按钮，在弹出的“表格”对话框屮进行设置，1行，表格宽度570像索，边框粗细0,单元格边距0,页眉无，单击确定。保持表格的选取状态，在“属性”面

8、板的“对•齐”下拉列表中选择“右对齐”选项。6、单击表格的第一列单元格，按住vshift＞键的同时，单击表格最后一列单元格，将表格的单元格全部选中，在“加性”面板中进行设置，格式一无，样式一无，字体一默认字休，人小一12像素，水平一居屮对其，宽一95,垂宜一默认。单击"属性”面板中“背景图像”右侧的“浏览文件”按钮，弹出“选择图像