网页设计教案五篇。

编辑耐心筛选为大家整理出了这篇最新的“网页设计教案”。老师根据事先准备好的教案课件内容给学生上课，每个老师都需要细心筹备教案课件。教案是教师对学生学习课程内容及教学方法的综合分析和总结。以下信息只供您作为参考！

网页设计教案【篇1】

《HTML网页设计》课程教学大纲

一、教学目的和任务

《HTML静态网页设计》是我院软件开发专业的专业基础课，选用教材《网页设计》，全书共分为17章，其中HTML内容占11章，包括HTML基本语法，常用标签的使用，表格的使用，层和框架的使用，在HTML中多媒体的应用，表单的使用，网页的图像及多媒体，以及站点的创建和管理。其中重点包括常用标签的使用，表格的使用，框架和表单的使用，文字与段落，以及CSS应用。

一方面本课程通过对网页用户界面设计中的信息传达、视觉符号的应用等专业知识的讲授，让学生能掌握网页设计中相关的设计思维与视觉表现方面的知识，让学生把网站中要传达的信息通过数码交互媒体的手段展现出来。另一方面通过对相关设计软件的使用进行课堂讲解与练习，使学生能够掌握相关软件操作的基本知识，并能够通过灵活应用课堂知识处理一些在实际项目中遇到的技术困难。

二、教学方法与教学要求

1课前认真备课，选好实例

网页制作技术不断地发展变化，新的技术、新的方法也在不断涌现，所以我们也需要将网页设计的最新、最实用的技术引用到课堂上去。课堂教学是传授知识的主要方式和场所，目的在于将书本知识转化为学生的知识和技能。为实现这一目的，我深入钻研教材，理清教材内容特点、编排次序和知识点之间的衔接关系，整理出一条条线索。如在上第一节课时，我会从网上下载一些经典的并具有代表性的网页给同学欣赏，在看的过程中一一的介绍并分解到书本的各个章节的知识点,提高学生们的兴趣与积极性。

课堂的教学方法

教学过程是教师与学生之间信息传递及反馈的过程。“我认为教学的艺术不在于传授本领，而在于激励、唤醒、鼓舞。”因此，在学习过程中，给学生明确的思路，激励学生积极主动参与思考，运用任务驱动法、模块教学法，案例教学法和项目教学法等教学手段，引导他们在解决问题的过程中体验到学习带来的成功感和愉悦感，使学习兴趣长久地保持下去。

案例教学法。案例教学法，即在教师指导下，根据教学目标的内容的需要，采用案例组织学生进行学习、研究、锻炼能力的方法。案例教学法可分为案例导入、案例例证、案例讨论、案例结尾和案例练习等多种方法。

在课堂上我采用是案例例证法，通过精心挑选案例，明确提出需要掌握的知识点及操作技能，以案例带动知识点，贯穿整个教学过程。具体做法是通过具体案例提出任务，将任务分解到每次的课堂教学中实现，教学过程中为了调动学生的学习积极性，教学过程中常常采用互动方式，即老师提出一种解决问题的思路，然后让学生采用其他方式来解决同一个问题。

项目教学法。项目教学法是指通过实施一个完整的项目工作而进行的教学活动,采取小组讨论、协作学习的方式。

将课程中的各个知识点或技术点采用教师给出项目要求或参考项目需求的方式，让学生分组选择项目或者自己调研确定项目，小组合作进行项目规划和页面设计。通过“小组合作规划设计”，以“项目小组”为基本形式、小组成员之间的合作性活动为主体、完成小组项目为主要目标、小组整体水平为主要依据来评定成绩的考核形式，为学生创造一个良好的合作氛围。小组的每一个成员在这一过程中都有发挥自己优势和表现自己的机会，通过小组成员之间相互讨论、评价、反馈、倾听、激励以及互为师生、优势互补等合作形式，激发学生的学习兴趣，改进学生的学习方法与态度，增强学生的集体荣誉感和团队协作精神。

三、教学内容与教学安排

1、课堂讲授

第一章 HTML入门简介

主要掌握文档标记的使用，头部标记title，主体标签body，标题标记等，了解和掌握HTML文档的结构。第二章HTML常用标签

通过学习斜体字标签、下标标签、上标标签、插入字标签、删除字标签、计算机代码标签、键盘输入文字标签、计算机代码样式标签等，用于控制文字样式。第三章 超链接

超链接章节主要掌握锚点、外部链接、邮件链接、脚本链接、空链接的相关基本知识，用于链接跳转功能的实现 第四章 框架

通过框架页示例，学习网页框架的基础知识，掌握框架边框的设置、框架边距的设置、设置框架缩放、设置框架滚动条、设置框架边框的颜色，对框架进行上下分割窗口、左右分割窗口来设计框架页面，设置浮动框架的高度和宽度，设置浮动框架的对齐方式等。

第五章 表格【上】

表格章节主要学习设置表格的边框、表格的背景颜色、表格边框颜色、设置表格高度和宽度以及设置表格背景图像等。第五章 表格【下】

本章主要掌握表格间距设置，表格水平对齐设置，表格标题的设置，行标签和单元格背景颜色的设置，掌握表格跨行跨列的设置以及表格的嵌套，用于今后利用表格进行网页布局。第六章 列表

本章节主要学习各种列表：有序列表、无序列表、目录列表、菜单列表、自定义列表以及嵌套列表等。用于网页的排版设计 第七章 表单

表单章节是HTML的重点章节，将学习表单的各种控件知识：如单行文本域、密码域、单选按钮、复选框、普通按钮、文本域、图像域、多行文本域、选择列表等。第八章 网页图像

本章节主要学习网页图像设置的相关知识，主要有如何加载图像、如何设置图像大小、如何设置图像边框、如何设置图像对齐方式、如何设置图像与文本的距离、如何设置图像的提示文字、如何设置图像超链接、如何图像影像地图等。第九章 网页多媒体

网页的多媒体运用知识必不可少，本章节将学习如何设置文字及图像的滚动效果、如何加入背景音乐、如何嵌入flash动画、如何嵌入mp3、如何嵌入mpg视频等。第十章 CSS基础

本章节将学习使用CSS进行网页样式风格的设计。要使学生掌握使用CSS的基本语法，以及在HTML中使用CSS的几种方法。达到网页美化的目的。

2、课堂及课后练习

第一章 HTML入门简介 任务一【文档标记的使用】 任务二【头部标记】 任务三【主体标签BODY】 任务四【标题标记】 任务五【控制文字的格式】 任务六【特定文字标记的应用】 任务七【换行符标记的应用】 第二章 HTML常用标签 任务一【文字样式示例】 任务二【斜体字】

任务三【设置文字样式】 任务四【下标】 任务五【上标】

任务六【插入字标签】 任务七【删除字标签】 任务八【计算机代码标签】 任务九【键盘输入文字标签】 任务十【计算机代码样式标签】 第三章 超链接

任务一【HTML链接】 任务二【锚点】 任务三【外部链接】 任务四【邮件链接】 任务五【脚本链接】 任务六【空链接】 第四章 框架

任务一【框架页示例】 任务二【设置框架边框】 任务三【设置框架边距】 任务四【设置框架缩放】 任务五【设置框架滚动条】 任务六【设置框架边框的颜色】 任务七【上下分割窗口】 任务八【左右分割窗口】

任务九【浮动框架的高度和宽度】 任务十【浮动框架的对齐方式】 第五章 表格【上】 任务一【表格边框】 任务二【表格高度】 任务三【表格背景颜色】 任务四【表格边框颜色】 任务五【表格高度和宽度】 任务六【表格背景】 第五章 表格【下】 任务七【表格间距】 任务八【表格水平对齐】 任务九【表格标题】 任务十【行标签】

任务十一【单元格背景颜色】 任务十二【跨行跨列】 任务十三【表格嵌套】 第六章 列表

任务一【有序列表1】 任务二【有序列表2】 任务三【有序列表3】 任务四【无序列表】 任务五【目录列表】 任务六【菜单列表】 任务七【定义列表】 任务八【嵌套列表】 第七章 表单

任务一【表单method属性测试】 任务二【单行文本域】 任务三【密码域】 任务四【单选按钮】 任务五【复选框】 任务六【普通按钮】 任务七【文本域】 任务八【图像域】 任务九【多行文本域】 任务十【选择列表】 第八章 网页图像 任务一【加载图像】 任务二【设置图像大小】 任务三【设置图像边框】 任务四【设置图像对齐方式】 任务五【设置图像与文本的距离】 任务六【设置图像的提示文字】 任务七【设置图像超链接】 任务八【图像影像地图】 第九章 网页多媒体 任务一【滚动效果1】 任务二【滚动效果2】 任务三【背景音乐】

任务四【嵌入flash动画】 任务五【嵌入mp3】

任务六【嵌入mpg视频】 第十章 CSS基础

任务一【使用CSS美化网页字体】 任务二【使用CSS美化网页背景】 任务三【使用CSS让用户自由定制个性化的页面】

3、课程作业（按知识点划分，共计八个部分）第一部分、制作第一个网页

第二部分、新闻信息浏览页面的制作

（一）第三部分、新闻信息浏览页面的制作

（二）第四部分、网站结构的实现

（一）第五部分、网站结构的实现

（二）第六部分、用户信息录入页面的实现

（二）第七部分、网页文本的样式设置 第八部分、CSS结构、规则及属性

四、课程考核

本课程理论考试采用闭卷形式，上机实践与其他课程进行组合考试，同时结合平时作业进行课程考核与成绩评定。考核评分以百分制计，原则上理论、实践考试成绩占80%，平时作业成绩占20%。

五、教材及参考书

教材： 《网页设计》 中国水利水电出版社 参考书：《HTML 标准教程》 贾素玲 王强 著 清华大学出版社

六、教学设备及教具要求

由学院统一安排多媒体教室及机房，任课教师准备多媒体课件等教学相关资料。

网页设计教案【篇2】

一、教材或教学内容分析

本章内容在本教材中的位置处于第五章,是在文字处理(Word图片、动画、声音等都有所了解,而网页的制作就是将这些元素重新组合到网页上,学生要学的就是这种组合的方法。所以说,虽然大多数学生以前都未接触过网页的制作,但有了以上这些基础,学起来就轻松多了。

本章内容按照学生已有的基础,我对教学内容分了一下类,也为教学的组织工作打下一点基础。本章内容主要由网页基础知识、网站的建立和管理、网页的制作、创建超链接、图片的处理、网页框架。

重点是网页的制作和创建超链接,学会了这些就可以开始简单的网页制作了。

难点是网页框架,这部分相互之间关系比较复杂,必要时,老师在对各组个别辅导时,可以给予分别讲解。 这个分类可以为组长安排各个组员的任务提供参考,使分工更加合理。

二、教学对象的分析

信息技术课虽然已经成为初中的必修科目,但是城乡学生之间掌握情况的差异却相当大,条件好一点的初中学生不仅已经熟练掌握了课本上的内容,还对一些常用软件有所了解;而差一点的可以说是从高中开始才正式接触到信息技术知识的学习,他们需要多锻炼、多指导,所以协作学习对学生的学习帮助很大。

三、教学策略的选择及媒体的使用

在教学策略的选择上,我使用的是任务驱动和协作学习相结合的方法。

任务驱动就是要求本章内容学习完之后,每个小组都要完成自己班级网站的制作,并在全班进行评比,选择最好的作为班级主页挂到学校主页上去,这有助于激发学生参与学习的积极性。

协作学习则是让学生在学习过程中互帮互助,用较短的'时间、教少的精力学到更多的东西,完成一个集体项目,让他们在学习之后获得成就感。因此在媒体的选择上,我们使用的是TOP20xx系统。TOP20xx系统有利于教师进行分组教学和学生作品的点评及成果的展示。教学过程开始之前,教师把学生按座位分成四组,每个组都按学生对计算机的掌握程度平均分配,保证每个组都有计算机操作方面比较突出的,也有相对比较差的,使其形成能够互帮互助的学习小组。并由他们自己选出组长各一名,然后由组长根据组员的情况,确定在班级主页制作过程中主要完成什么任务,也就是说起到一个组织者的作用。做过网页的人都知道,做网页是一项比较费时的工作,而要学生在较短的时间内制作出像样的网页是比较困难的,而在这个过程中,网页的设计占去了相当多的一部分时间,组长把任务分到各组员头上以后,组员就可根据自己要完成的任务相对集中的做某方面的工作,做完以后,组员之间进行经验交流,告诉组员自己的网页是如何制作出来的,在完成自己的网页后,再重复一遍制作过程花费的时间的不多的。这样,其他组员就可在较短的时间之内掌握比较先进的网页制作方法,而不必再花那么多时间去探索。因为每位组员都必须自己完成一个任务,所以在这个过程中,也同样有自己探索学习的机会和介绍自己经验的机会,使组内的每个学生都在学习中获得成就感。

四、教学过程

教学进程

教师活动

学生活动

1、课前准备

课前将本章内容的基本结构、内容的归类、网页基础知识、网页素材做成一个网站,供学生参考,网站上的内容可根据学生以后在学习中的要求添加。根据学生对已有的网页制作的情况进行分组。

学生根据自己的分组情况选出组织能力较强、计算机水平较高的人做组长,协作小组形成。

2、教师布置任务,作必要讲解

第一节课,教师简单介绍网页基础知识,并给各小组布置任务——用下面的时间完成班级网页的制作,并对组长进行本章基本内容及本章内容的分类的介绍,让他们对本章内容有总体上的把握。

在教师对网页基础知识讲解的基础上,浏览教师制作的网站,继续学习;

课后各组设计自己的班级主页,组长根据网站上教师对本章内容的分类给学生布置任务。

3、教师指导分工情况,学生开始自主学习

第二节课教师对组长对全组的分工情况给予检查,提出意见和建议。

学生根据分工制作网页,学习可以跟着课本上自学,也可根据以前学习Word的经验自己摸索制作过程,不懂之处可向会的同学请教,还可以相互之间讨论,在网页的设计方面也可以相互之间多商量,发扬互帮互助的精神。

监督

下面三节课,老师在每组各用10分钟时间检查他们上节课的网页制作情况,并对他们碰到的问题给予提示或解决,起指导和监督作用。

学生继续学习、制作网页。

五、阶段总结

四节课的制作以后,各组员所制作的网页都初见雏形,所以教师组织一堂课,由各组展示自己的作品。教师在学生评讲完后,给予总结。

各组分别展示自己的作品,其他组对他们可以提出意见或建议,也可从其他组的学到好的创意。由组长在课后写一份阶段总结,从而指导以后的工作。

六、学生自主学习,教师指导、监督

下面四节课,老师仍然对每组各花10分钟时间轮流检查他们上节课的网页制作情况,并对他们碰到的问题给予提示或解决,起指导和监督作用。

学生继续学习、制作网页。

七、各组将内容汇总,形成班级主页

教师对各组出现的问题提出建议或意见。

组长或组长安排人将各组的主页进行汇总,形成一个完整的班级主页,对欠缺的地方进行修补。

八、班级网站制作完成,展示与总结

老师请其他信息技术教师来做评委,对各组做的网站提出意见或建议,评出最佳网站、最佳创意等奖,让大家的付出都有所收获。

各组分别展示自己组所制作的班级主页。

课后:

大家集中各组的优势,将班级主页完成,挂到学校主页上。

网页设计教案【篇3】

一、前言

随着信息时代的逐渐来临，互联网已经成为了人们获取信息的主要渠道。而在这个信息时代当中，网页已经成为了推广和传播信息的最常用方式。设计美观的网页是吸引用户的关键，因此，网页美工设计也受到了越来越多的关注和重视。为了更好地满足时代的需求，我们制定了《网页美工设计教学计划》。

二、教学目标

本计划的主要目标是培养学生在网页美工设计方面的能力和技术，掌握网页美工设计的基本原理和实践技能，了解网页美工设计在实际应用中的具体要求，培养学生的实践思维和问题解决能力。

三、教学内容

本计划的教学内容主要包括以下几个方面：

1. 网页设计基础：介绍网页设计的基本概念和原理，了解网页设计中的主要工具和技术，掌握网页设计的基本要素。

2. 网页设计实践：通过实际案例操作，掌握网页美工设计的基本技能和实践方法，培养学生的实践能力。

3. 网页美工设计综合案例实践：运用前面所学到的知识和技能，进行综合实践，完成网页美工设计的整个过程，从而更好地理解网页美工设计在实际操作中的应用。

四、教学方法

本计划采用实践教学为主导的教学方式，结合理论知识和实践技能的教学，旨在培养学生的实践思维和操作能力。具体教学方法包括以下几个方面：

1. 授课：传授网页美工设计的基本理论和技术知识。

2. 案例分析：通过分析实际案例，帮助学生掌握网页美工设计的具体应用方法和技巧。

3. 实践操作：指导学生进行实际操作，从而更好地掌握网页美工设计的技能。

4. 课程设计：设计具有实际操作意义的课程设计，通过设计实际的网页，培养学生的实践能力。

五、教学考核

本计划的考核方式主要有以下几个方面：

1. 书面考核：针对课程的理论知识部分，进行书面考核。

2. 实际操作考核：通过实际操作考核，检验学生的实际操作技能和能力。

3. 课程设计考核：通过对学生的课程设计进行评估，考察学生的综合能力和创造力。

六、实施效果

本计划的实施效果主要有以下几个方面：

1. 学生能够系统地掌握网页美工设计的基本原理、技能和方法；

2. 学生能够运用所学知识和技能进行实际操作，满足实际需求；

3. 学生能够培养实践思维和问题解决能力，提升综合素质；

4. 提高学生的综合竞争力，为学生的就业提供有力的支持和保障。

七、结语

通过本计划的实施，我们相信可以更好地满足时代发展的需求，为学生的发展和就业提供更好的支持和保障。我们也希望学生能够积极配合教学，认真学习，努力提高自己的综合素质和竞争力。

网页设计教案【篇4】

摘要在当前高校教育过程中，多媒体网页设计课程是十分重要的组成部分，同时也是网页设计专业的必修课程，对提高学生网页设计能力具有十分重要的帮助作用。在现代网页设计课程教学过程中，为能够课程教学效果得到提高，促进学生网页设计能力进一步发展，应当进行UI界面设计教学，从而对学生设计能力进行更好培养。本文就多媒体网页设计课程教学中的UI界面设计教学进行分析。

关键词网页设计；UI界面设计；教学分析

随着现代网络技术不断发展，社会上对网页设计人才也有着越来越大的需求，因此在高校教育过程中加强网页设计课程教学，对网页设计专业人才进行培养具有十分重要的作用及意义。就当前网页设计课程教学实际情况而言，UI界面设计教学已经成为十分重要的一项内容，可在很大程度上提高学生设计能力，促进网页设计教学进一步发展。作为网页设计课程教师，应当充分认识UI界面设计教学的重要性，并且要通过有效方法及策略加强UI界面设计教学，使其得到理想效果。

1网页设计课程中UI界面设计教学的重要性分析

首先，UI设计教学使网页设计实践中视觉传达设计理论的不适性得以有效解决。对于传统视觉设计理论而言，其研究对象主要为静止媒介中相关视觉现象及规律，其代表主要就是形式、色彩以及图形与文字等一些基础理论课程，其视觉对象大部分都属于二维空间，其基础为视觉感官刺激，是一种信息传递设计。相比于传统视觉传达设计而言，网页设计的承载媒介与其存在本质差异，与静止媒介相比较而言，网络媒介在形式上具备光影效果强化，同时还具备运动现象参与以及交互行为主导，在网页设计过程中以静止形态为基础的版式和视觉流程原理两者之间有严重不适情况出现，网页设计涉及到听觉、视觉及触觉等多种感觉渠道，因此在网页设计实践过程中单独利用传统视觉设计理论很难对其进行指导，而UI设计理念的应用能够使这一情况得以很好解决。其次，UI设计教学使网页设计方法及设计效果具有更加明确的验证方式。对于设计类课程而言，其核心内容就是通过对学生进行启发，使其对设计进行思考及实践，这样才能够使设计教育产生更加实际的价值。在UI设计理论体系中，其核心目标为用户，也就是对用户进行研究，从而对设计更好服务于用户进行研究，在学生将网站项目作为互联网产品实行设计训练情况下，课堂教学中的各个方面均将会更加明确，并且在实行设计实践过程中，也就能够在情感上对所选择设计方法合理性更加容易理解。在UI设计过程中提出信息架构有关理论，这一理论使网站信息结构设计具有更加可靠方法，并且在设计网站导航系统、标识系统以及检索系统与组织系统过程中，可使设计人员责任及实施方法更加明晰。另外，在UI设计中引入用户测试，在检验网页设计方案使用方面具有更加系统的方法，根据具有较强代表性的.客户对方案的最终可行性设计进行测试，也就是对其最终目标进行测试。第三，UI设计教学能够使网页设计课程更好应用于网页设计教学。对于UI设计理论教学而言，其对网页技术课程和网页技术课程两者之间界定进行明确，可使设计人员对设计更加专注地进行思考及实践，而不必对程序进行考虑，同时随着当前网页制作工具逐渐向集成化及人性化发展，在面对设计对象中，通过复杂功能可使设计过程更加简单化。在课堂实际教学过程中，应当使学生对当前网页制作技术能够达到的效果有所了解，并且要了解一些基础操作代码，这在实际教学过程中对不同层次学生分配不同任务十分有利，可使因材施教得以真正实现，并且对于课程中的主要任务，可将其定位于教学设计方法，可对设计任务的驱动性及设计实践参与进一步强调，可使学生了解设计并非仅仅为简单制作。①②

2当前网页设计课程中UI设计教学现状分析

就当前实际情况而言，UI设计课程仍属于前沿学科，由于当前UI设计专业就业形势比较良好，很多高校均开设UI设计专业课程，从而使UI设计课程教学得到良好发展。然而，当前我国UI设计产业仍不够完善，当前很多人对UI设计认识仍处于较浅层次，因而当前高校内UI设计教学仍缺乏完善系统，其具体体现主要表现在以下方面：第一，UI设计课程与网页设计课程结合程度比较低。对于UI设计课程而言，其中包含很多网页设计方面的相关知识点，然而很多高校在对UI设计课程进行设计时与其它课程之间出现脱节情况，其所导致结果就是学生无法对该课程知识较好地进行系统性学习。第二，UI设计课程设置缺乏实践性。对于UI设计课程而言，其实践性比较强，然而当前很多院校在实际教学过程中往往存在定位不清楚情况，其所造成结果及时学生未能够对相关专业知识进行较系统学习，导致其在今后社会就业过程中缺乏应有技能。第三，教师素质比较低。在UI设计教学过程中，教师素质会对其产生直接影响，然而在当前高校UI设计教学过程中，很多教师都缺乏专业素质，学历比较低，并且实践能力比较差，未能够较好把握课程教学，导致实际教学效果不理想。②③

3网页设计教学过程中UI设计教学的有效策略分析

3.1进一步完善课程教学大纲

在当前网页设计教学过程中，UI设计课程教学已经成为必须内容，其与其它课程之间具有十分密切的联系，所以在设置课程方面应当对课程教学大纲进一步进行完善。首先，应当对当前教学目标明确。对于UI界面设计课程教学目标而言，一方面是要求学生将各种相关网页设计实践操作方法掌握，并且对各种网页设计规范及标准熟知；另一方面而言，就是要使学生将网页设计相关流程掌握，对于用户设计理念应当准确领悟，并且应当对相关流程熟知。其次，对课时行合理分配。由于UI设计课程内容具有较强连贯性，该课程开始应当安排在二年级或者三年级开设，从而使学生能够将必要基础知识掌握，之所以对课时进行这样的设计，主要目的就是使学生先对相关系统理论知识进行一年时间学习，使其能够将相关基础理论知识掌握，在此基础上对该课程进行深入进一步学习。另外，还能够为学生今后就业划分提供能力进行学习，可使学生依据今后就业岗位对相关学习能力进行锻炼。第三，对设置课程原则明确。在对课程进行具体设置过程中，应当注意遵循相关原则，主要包括人性化原则、反馈原则以及灵活性原则，此外还包括安全性原则与易用性原则。

3.2明确培养人才方案

人才培养方案能够对教学活动进行指导，同时也是教学活动得以开展的依据，人才培养方案对具体教学内容及具体课程设置结构进行规定，在制定人才培养方面为不断进行变化的，人才培养的制定应当以深入社会调研为基础，同时应当与学生实际特点相结合。通过调查UI设计专业人员实际就业情况及社会对学生能力要求，其结果显示当前学生就业能力，尤其学生实践能力仍有一定缺陷。因此，在当前实际教学过程中应当对人才培养方案进行积极探讨，从而将明确人才培养方案制定出来，以便能够对人才培养方向进行合理定位。对于UI设计课程而言，其是以地区产业升级需求为基础，为社会培养实用型高素质人才的一门课程，所以其课程定位应当为确定一体化项目课程。所以，通过进行课程学习，所培养的学生应当具备的技能主要包括以下方面：其一，应当具备牢固理论基础。对于UI界面设计而言，其理论性比较强，若缺乏牢固理论基础，则在今后结业过程中学生也就无法对相关知识点进行熟练运用，所以学生对该课程进行学习的前提就是应当将相关理论知识掌握。其二，应当具备较强的实践操作能力。学生在毕业之后都是要直接进入就业岗位的，所以学生必须要具备较强就业实践能力。其三，应当具备较高综合素质。随着当前社会就业压力越来越大，人才竞争也越来越激烈，学生为能够使自身竞争力得以有效提高，必须要具备良好人文素质及职业道德，同时还应当具备较高的思想政治素质。

3.3积极创新课堂教学手段

首先，应当积极丰富课堂教学方法，进一步激发学生学习热情。传统灌输式教学模式会对学生学习热情及创新思维产生抑制，所以，教师应当改变传统单一教学方法。在实际教学过程中，教师可选择多种方法相结合的教学方式，可使学生通过课堂融入社会，然后再回归课堂，并且可在课堂对自身所设计优秀作品进行展示，使学生在多样化训练过程中能够积极参与。其次，在课堂教学过程中可引入设计竞赛，从而使学生社会实践能力得以增强。在提高学生实践能力方面，设计竞赛属于十分重要的一种途径，所以在UI设计教学过程中可适当引入设计竞赛内容，从而使理论性及实践性实现有效结合，进而有效提高学生学习积极性。第三，可开展作品展示，加强学生之间学习交流。在实际课堂教学过程中，教师可选择课堂展览方式，可邀请同一专业学生共同进行欣赏，使学生能够在参观展览过程中加强交流讨论，从而使学生综合素养能够得以有效提高，促进学生进一步发展。③④

4结语

在当前多媒体网页设计实际教学过程中，UI设计教学是十分重要的一项内容，对网页设计教学进一步发展具有很大促进作用。因此，在实际教学过程中，教师应当充分认识UI设计教学重要性，并且应用了解当前教学现状，从而通过进一步完善课程教学大纲，明确培养人才方案，积极创新课堂教学手段等方式加强UI设计教学，从而使实际教学效果得以提升。

注释

①张军.网页设计课程中关于UI设计教学的探索体会[J].湖北美术学院学报,2009(4).

②张延玲,喻芸.网页设计课程中融入UI设计理念的教学探索[J].电脑知识与技术,2015(34).

③熊科军,黄琴,李平平.浅议网页设计课程中UI设计教学的重要性[J].大众文艺,2015(5).

④陆培培.浅析独立学院UI界面设计课程的教学改革[J].美术教育研究,2015(19).

网页设计教案【篇5】

《网页设计》课程教学大纲

课程编号：

英文名称：WebPages Designing 课程类型：专业选修课 学时/学分：24+24/2 授课对象：专科生

先修课程：计算机文化基础 课程简介：

《网页设计》是一门重要的信息管理专业的选修课程。本课程讲述了网站创建、网页制作基本知识、Dreamweaver网页制作集成工具使用的方法等内容。通过本课程的学习，使学生掌握构建网站的基本知识，熟悉网页开发平台的使用，能够独立的创建个人网站。

教学目的和要求：

通过学习，使学生了解网页网站的基础知识；掌握网页三剑客的使用方法，以便能够正确应用和维护网站。与此同时，通过对Web页制作技术和制作工具的学习，使学生对于网页设计中所涉及的相关知识有一个全面的了解。

教学内容：

第1章 网页设计快速入门（2）

1、教学内容：

在Internet上安个家

知识要点

有关网页设计的概念

网页设计软件

网页制作过程

企业建立网站的过程

网页设计与HTML 本章小结

2、教学重点：

网页设计的概念、网页制作过程。

3、教学难点： 网页设计与HTML。

第2章 Dreamweaver MX快速入门（1）

1、教学内容：

制作网站电子相册

知识要点

认识Dreamweaver MX中文版基本界面

认识窗口项目

面板组

本章小结

2、教学重点：

Dreamweaver MX中文版基本界面。

3、教学难点：

标准视图模式下表格的应用。

3、教学难点：

布局视图模式下表格的应用。

第6章 Dreamweaver MX图层应用（2）

1、教学内容：

一个弹出式菜单设计的实例

设计弹出式菜单的效果图

设计弹出式菜单的过程

知识要点

创建层

选择层

插入层对象

移动层

对齐层

层与表格相互转换

设置层属性

本章小结

2、教学重点：

层的基本操作和层的属性设置。

3、教学难点：

层与表格的转换、行为和事件。

第7章 Dreamweaver MX时间轴（2）

1、教学内容：

制作一个动态地址导航图

知识要点

时间轴控制面板

时间轴的基本应用

本章小结

2、教学重点： 时间轴的基本应用。

3、教学难点： 录制层路径。

第8章 表单操作（2）

1、教学内容：

制作一个网上报名表单

制作网上在线报名表单

预览网上在线报名表单

知识要点

插入表单

插入文本对象表单

插入按钮

插入复选框

插入单选按钮

插入列表/菜单域 插入文件字段

插入图像域

插入隐藏域

插入跳转菜单

本章小结

2、教学重点：

表单和常用表单域的用途和使用方法。

3、教学难点：

插入隐藏域和跳转菜单。

第9章 Dreamweaver MX综合应用（2）

1、教学内容：

一个网站建立的实例

建站准备

制作网站

知识要点

网站的设计构思

资源面板的应用

行为面板的应用

站点管理器的应用

本章小结

2、教学重点：

网站的设计构思、资源面板的应用。

3、教学难点： 行为面板的应用。第10章 Flash MX快速入门（）

1、教学内容：

制作一个移动的圆

知识要点

Flash MX的界面

主菜单项目

常用工具栏

时间轴面板

绘图工具栏

其他重要栏目

本章小结

2、教学重点：

Flash MX的工具栏和时间轴面板。

3、教学难点： 时间轴面板的使用。第11章 Flash MX的绘图功能（）

1、教学内容：

制作一个网页广告

知识要点

绘图工具 指针工具

填充工具

文本工具

颜色设置

图片的使用

本章小结

2、教学重点： 绘图工具的使用。

3、教学难点： 图片的使用。第12章 Flash MX动画制作初步（1）

1、教学内容：

制作动态文字的实例

知识要点

图层（Layer）

帧（Frame）

使用图符、实例和库

用Sound面板引入和编辑声音

文件预览

本章小结

2、教学重点：

使用Flash MX制作简单动画。

3、教学难点：

帧的基本操作、在动画中添加声音。第13章 Flash MX动作的应用（1）

1、教学内容： 图像动画实例

制作可供控制播放的循环动画

制作按钮元件

设计场景

舞台播放区背景的制作

在场景上创建Daughter影片剪辑的实例

后台控制程序

知识要点

ActionScript的基本概念

用动作面板编辑对象动作

本章小结

2、教学重点： 动作面板的使用。

3、教学难点：

用动作面板编辑对象动作。第14章 Flash MX的综合应用（1）

1、教学内容：

制作一个网站的门户广告动画 设计构思

素材准备

制作过程

发布过程

知识要点

文件的导入与导出

文件的发布及发布设置

发布预览

本章小结

2、教学重点：

文件的导入和导出、文件的发布。

3、教学难点：

Flash MX动作的应用。第15章 Fireworks MX应用基础（1）

1、教学内容：

Web按钮制作实例

知识要点

Fireworks的基本概念

Fireworks的编辑模式

Fireworks的工具详解

Fireworks中的对象

Fireworks的层

本章小结

2、教学重点：

Fireworks的工具详解。

3、教学难点： Fireworks的层。第16章 Fireworks MX进阶操作（1）

1、教学内容：

一个简单的动画

知识要点

Fireworks的蒙版

Fireworks的颜色混合模式

Fireworks的热点和切片

Fireworks实用技巧 本章小结

2、教学重点： Fireworks实用技巧。

3、教学难点：

Fireworks的蒙版、热点和切片。第17章 站点的发布、宣传推广与维护（2）

1、教学内容： 站点的发布

网页的测试 下载时间测试

浏览器兼容性测试

拼写检查测试

站点宣传与推广的一般方法

站点的维护与更新

本章小结

2、教学重点： 站点的发布。

3、教学难点： CuteFTP的使用方法。

实验内容：

实验一

(使用HTML语言制作简单网页)（2）

1、实验目的：

熟悉HTML语言的常用标记，学会在记事本环境下用HTML语言编辑简单的网页。

2、实验内容：

用记事本输入下面语句，另存为网页文件，并在浏览器中浏览。

一首唐诗

夜雨寄北

李商隐

君问归期未有期，

巴山夜雨涨秋池。

何当共剪西窗烛，

却话巴山夜雨时。