每位老师不可或缺的课件是教案课件，因此教案课件可能就需要每天都去写。制定教案是认真备课的必要手段之一。下面让我们一起探索“网页设计教案”的奥秘，请您收藏此页面以便随时查阅！
网页设计教案 篇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
文字作为信息传达的主要手段目前也是网页设计的主体，文字是网页中必不可少的元素，也是网页中的主要信息描述要素，所以网页中文字将占据相当大的面积，文字表现的好与坏将影响到整个网页的质量。网页文字的主要功能是传达各种信息，而要达到这种传达的有效性，必须考虑文字编辑的整体效果，能给人以清晰的视觉印象，避免页面繁杂零乱，减去不必要的装饰变化，使人易认、易懂、易读。不能为造型而编辑，忘记了文字本身是传达内容和表达信息的主题。
网页文字编排与设计，重要的一点在于要服从信息内容的性质及特点的要求，其风格要与内容特性相吻合，而不是相脱离，更不能相互冲突。如政府网页其文字具有庄重和规范的特质，字体造型规整而有序，简洁而大方;休闲旅游类内容网页，文字编辑应具有欢快轻盈的风格，字体生动活泼，跳跃明快，有鲜明的节奏感，给人以生机盎然的感受;有关历史文化教育方面的网页，字体编辑可具有一种苍劲古朴的意蕴、端庄典雅的风范或优美清新的格调;公司网页可根据行业性质、企业理念或产品特点，追求某种富于活力的字体编排与设计;个人主页则可结合个人的性格特点及追求，别出心裁，给人一种强烈独特印象。
在网页文字的编排与设计中，由于计算机给我们提供了大量可供选择的字体，导致字体的变化趋于多样化这既为网页编辑提供了方便，同时也对编排与设计的选择能力提出了考验。虽然可供选择的字体很多，但在同一网页上，使用几种字体尚需精心编辑和考虑。一般来讲，同一页面上使用的字体种类最多只能有三四种。由于文本字体的显示是需要本地硬盘字体文件的支持的，所以在互联网上使用过多的字体是没有意义的。文字在视觉传达中作为页面的形象要素之一，除了表意以外，还具有传达感情的功能，因而必须具有视觉上的美感，能给人以美好印象，获得良好的心理反应。
图片是文字以外最早引入到网络中的多媒体对象。网络可以图文并茂地向用户提供信息，成倍地加大了它所提供的信息量。而且图片的引入也大大美化了网络页面。可以说，要使网页在纯文本基础上变得更有趣味，最为简捷省力的办法就是使用图片。对于一条信息来说，图片对受众吸引也远远超过单纯的文字。
图片的位置、面积、数量、形式、方向等直接关系到网页的视觉传达。在图片的选择和优化的同时，应考虑图片在整体编辑计划中的作用，达到和谐整齐。要达到这样的效果，在页面图片的合理选用时，一要注意统一，二要注意悦目，三要注意突出重点，特别是在处理和相关文字编排在一起的图片时。
网页在一定意义上说也是一种艺术品，因为它既要求文字的优美流畅，又要求页面的新颖、整洁，使用色彩可以产生强烈的视觉效果，使页面更加生动。而且，浏览者在洲览网页时，留下的第一印象就是页面的色彩设计，它的好坏直接影响阅读者的观赏兴趣。因此，色彩设计在网页设计中居于十分重要的地位。网页的色彩设计应把握以下几个方面。
首先是整个页面的色彩选择，确定一个主色调，可以有利于体现网站主题。我们现在看到的网页，一般以浅颜色为背景的居多，如浅灰色、浅黄色、浅蓝色、浅绿色。以浅颜色为底，柔和、素淡，配上深颜色的字，如黑色，读来自然、流畅，也有利于突出页面的重点，有利于整个页面的配色，更容易为大多数人认可和掌握。其他一些次要内容，如背景图片、线条适宜采用不抢眼的颜色，以免喧宾夺主。只有少量精心选择的元素，为了突出强调的需要，才采用明亮的色彩，这些彩色亮点就会产生强烈的视觉冲击，但如果用得太多了，就会形成一种均匀的噪声，而达不到强调的效果。
其次，在背景的色调搭配上一定要注意不能有强烈的对比，特别是同时使用色彩对立的颜色。大面积颜色适宜采用低比度，因为过于丰富的背景色彩会影响前景图片和文字的取色，严重时会使文字溶于背景中，不易辨识。所以，背景一般应以单纯为宜。如果需要一定的变化以增加背景的厚度，也应是在尽量统一的前提下的一种变化。例如在制用标题时，为追求醒目的视觉效果，可用比较深的颜色，配上对比鲜明的字体。实际上背景的作用主要在于统一整个网页的风格和情调，对视觉的主体起到一定的衬托和协调作用，一方面吸引网民的注意力，另一方面有助于体现网站的主题。
5技术、设计之两手都
网络技术与设计创意的紧密结合，使网页的设计由平面设计扩展到立体设计，由纯粹的视觉艺术扩展到空间听觉艺术，网页效果不再近似于书籍或报刊杂志等印刷媒体，而更接近干电影或电视的观赏效果。技术发展促进了技术与设计的紧密结合，把浏览者带入一个真正现实中的虚拟世界。
技术与设计的紧密结合在网页艺术设计中体现得尤为突出。
网页设计教案 篇3
摘要在当前高校教育过程中，多媒体网页设计课程是十分重要的组成部分，同时也是网页设计专业的必修课程，对提高学生网页设计能力具有十分重要的帮助作用。在现代网页设计课程教学过程中，为能够课程教学效果得到提高，促进学生网页设计能力进一步发展，应当进行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).
网页设计教案 篇4
《网页设计B》课程教学大纲
Web Design B
课程代码： 课程性质：专业基础理论课/选修 适用专业：信息与计算科学
开课学期：7 总学时数：32 执 笔：刘伟
一、课程的性质和目的
网页设计是针对学习制作网页的相关问题，注重网页设计基本知识的培养的一门课程，可作为进行网页设计学习的本、专科学生的入门基础课，通过本课程教学，使学生掌握网页制作的基础知识并应用开发设计网站；初步学会使用Dreamweavr MX、Flash MX等开发工具制作精美的网页网站；初步掌握XML语言、脚本语言开发基于WEB的数据库系统；培养解决实际问题的动手能力。
二、课程教学内容及学时分配
第一章 HTML（4学时）
了解HTML的定义, 理解HTML的基本结构与主要功能；了解HTML的标记与基本结构；了解HTML文字格式与页面格式；了解超级链结，列表和表格；了解HTML文件中多媒体与框架的设置；解表单标志的设置。
主要内容：Internet简介；Internet的主要功能，WWW简介；HTML简介；HTML语言、HTML主要功能、HTML的基本结构；HTML文件结构的格式；HTML的基本语法、基本结构、文件结构的格式标记。
第二章 网页编辑工具（2学时）
简单了解Frontpage 2000软件的安装配置与操作使用；简单了解Dreamweaver MX软件的安装配置与操作使用；简单了解Flash MX软件的安装配置与操作使用。
主要内容：网页编辑工具Frontpage 2000、Dreamweaver MX。第三章 ASP技术（6学时）
了解ASP特点，理解ASP的工作原理，了解ASP的运行环境；了解ASP的程序语法；了解ASP的内建对象；了解ASP的内建组件；了解ASP访问数据库的方法。
主要内容：ASP(active server pages)是动态服务器网页，是Ｍircorsoft 公司在1996年底推出的一种运行于服务器端的WEB应用程序开发技术。它既不是一种语
总学分数：2
编写年月：2002年3月 修订年月：2007年7月
言也不是一种开发工具，是内含于IIS/PWS之中的可以集成SCIPT语言到HTML主页的服务器端的脚本语言环境。
第四章 JSP技术（6学时）
了解JSP特点，理解JSP的工作原理，了解JSP的运行环境；了解JSP的程序语法；了解JSP的内建对象；了解JSP的内建组件；了解JAVABEAN的使用；了解JSP访问数据库的方法。
主要内容：SP是定义于Servlet之上的一个JAVA标准延伸机制。JSP将网页的HTML部分和多段JAVA程序代码合并在单一文档中，即在传统的HTML网页中加入了JAVA程序片段和JSP标记。
第五章 XML（3学时）
了解XML的历史与优点；了解XML的语法；了解XSL的定义与XML的结合；了解CSS的定义与XML的结合。
主要内容：XML（extensible markup language 可拓展置标语言）继承了SGML的优点，又弥补了HTML的不足，它提供了一个直接处理WEB数据的通用方法，着重描述WEB页面的内容，而不是显示格式；CSS与XSL。
第六章 VBSRIPT、JAVASCRIPT（5学时）
理解VBSRIPT功能与使用；理解JAVASCRIPT功能与使用；了解JAVASCRIPT中内置对象。
主要内容：VBSCRIPT的语法与使用；JAVASCRIPT的语法与使用；JAVASCRIPT中内置对象。
第七章 ACTIVEX技术（2学时）
了解ACTIVEX控件的开发、注册与使用。
主要内容：ACTIVEX控件的开发；ACTIVEX控件的注册；ACTIVEX控件的使用。
第八章 基于WEB的数据库的开发（4学时）
了解基于WEB的数据库开发的原理；了解基于WEB的数据库开发的一般步骤；了解基于WEB的数据库开发的类型。
主要内容：数据库在ASP中使用；JSP访问数据库；ASP、JSP中数据库的连接技术。
三、课程教学的基本要求
1.了解网页设计的基本概念，熟练使用网页设计工具快速构建网站； 2.能比较熟练地使用ASP、JASP技术创建动态页面； 3.初步掌握基于web的数据库信息系统技术的解决方案。
4.重难点：（1）.HTML 重点：HTML标记的使用，框架的设置；表单的使用 难点：文字格式与页面格式，列表和表格，表单标记。（2）.ASP
重点：ASP的工作原理，ASP的页面数据的传递
难点：内建对象的使用，ASP的语法，ASP访问数据库的方法；（3）.JSP 重点：JSP的工作原理，JSP的页面数据的传递
难点：内建对象的使用，JSP的语法，JSP访问数据库的方法；JAVABEAN的使用。
（4）.XML 重点：XML的语法优点，如何在CSS与XSL中结合XML 难点：XSL与CSS定义与使用。（5）.ACTIVEX组件
重点：ACTIVEX组件的注册使用 难点：ACTIVEX组件的实现。（6）.基于WEB的数据库开发
重点：ASP、JSP中数据库的连接技术，开发环境
难点：中间层的实现
该课程实践性较强，需要学生多上机练习加强理解；针对所留习题，可以组织两到三次讨论，以便学员掌握网站建设的思想。
总评成绩：平时作业占30%，闭卷考试占70%。
四、本课程与其它课程的联系与分工 先修课程：软件工程，数据库原理
五、建议教材及教学参考书
［1］侯文彬等编，《网页设计教程》，清华大学出版社，2003年出版社 ［2］丁爱萍，《网页制作教程》，电子工业出版社，2001年出版社
［3］魏应彬等，《网页设计与WEB数据库发布技术》，清华大学出版社，2000年出版社 ［4］张铭泽等，《JavaScript动态网页设计》，机械工业出版社，2000年出版社
网页设计教案 篇5
论文关键词：网页设计；互联网络；信息传播；平面设计教学
论文摘要：随着信息时代的发展，互联网的普及，使互联网络成为“第四大信息传播的媒介”。网页设计以信息传播为裁体，两者之间紧密联系。作为互联网的重要元素之一——网页，它的发展虽然没有多长时间，但作为一种新的视觉表现形式，兼容了平面设计的特征，并具有迅捷，交互性好、传播面广等特点，为互联网络的信息传播提供良好的平台并且在教学中不断探索网页的设计理念，加上通知。
每一个时代都有代表性的发明作为这个时代的象征，像第一次工业革命，蒸汽机的发明，使得那时成为蒸汽时代；爱迪生发明了电灯从那时起进入了电的时代，要说21世纪，我想应该是网络的时代，自从互联网的出现使“地球村”的概念更加贴切，可以说网络拉近了地球上每一个角落的人。互联网代表着一种崭新的信息交流方式，它使信息的传播突破了传统的政治、经济、地域及文化的阻隔，使信息传达的范围、速度与效率都产生了质的飞跃。互联网是由成千上万的网站组成，而每个网站都是由诸多网页构成，故网页是构成互联网的基本元素。而网页设计是伴随着计算机互联网络的产生而形成的平面设计新课题，是网页设计者以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动，必然要成为设计艺术的重要组成部分，并随着网络技术的发展而发展。表面上看，它不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。设计师如何将网络与设计、技术与艺术完美地结合，是非常值得我们深思和研讨的。
1一骑红尘妃子笑，谁人知是荔枝来之信息传播
信息元素可以说是网络最基本的元素，互联网自始至终都起着一个信息传播的做用，也是由此而产生的。自从人类诞生以来，人类社会至少已经经历了四次意义重大的信息传播革命，每一次信息传播革命都把人类文明推向一个新的发展阶段。第一次信息传播革命是语言传播的诞生。第二次信息传播革命是文字传播的诞生。第三次信息传播革命是印刷传播的诞生。第四次信息传播革命是模拟式电子传播的诞生。
最新的一次信息传播革命，即正在我们身边发生的第五次信息传播革命，是数字式电子——网络传播的诞生。网络媒体的出现，使得传播者与受众之间的传统的.相互关系正面临巨大的变化。人类进入了真正的信息时代。
网页设计以信息传达为目的，而传达的最终表现界面则永远也脱离不了媒体。媒体与网页设计之间的关系是互动的，媒体既体现了设计，又给设计带来了局限性；设计既受制于媒体，又是新媒体产生的动力之一。
我们大家所共知的传媒方式有报纸、广播、杂志、电视等等，这些在现代媒体中仍然占主要位置。如果与互联系网络比较的话，它们这些传媒方式就显的相当单一。因此它们的先天缺陷也越来越明显，所以像这种单一的传达方式也使设计师受到了一定程度上的限制。人们接受信息的途径是多方面的。像视觉、听觉、触觉、嗅觉、味觉等一系列感官的综合使我们更加全面的去了解其他的事物。为了能使信息传达的更全面一些，一直在追求完美的设计师也在寻找着一个崭新的媒体来表达完善的设计。因此当今互联网络顺利的成为新生的、综合感官的、充满活力的新媒体，也为设计师创造了前所未有的信息传达手段与途径。而且随着技术的不断发展，它极有可能成为最完善的媒体。这应该引起每一个平面设计师的关注。网络的发展速度和力量是惊人的。
2横看成岭侧成峰之视觉效果
可以说网页是通过视觉元素来进行信息传达的，这里说的视觉元素包括文本、背景、按钮、图标、图像、表格、颜色、导航工具、背景音乐、动态影像等。无论是文字、图形、动画，还是视频，为了使网页获得最大的视觉传达功能，网页设计者所要考虑的是如何适应人们视觉流向的心理和生理的特点把它们放进页面这个“大展示窗口”里。由此确定各种视觉构成元素之间的关系和秩序。因此，设计时应该研究各种视觉造型元素之间的距离、位置、面积和视觉流程的问题。
网页设计教案 篇6
（1）理解框架的概念及用途。
（2）掌握框架网页的新建、制作、编辑与保存，了解框架的拆分方法。
（3）初步掌握将框架结构与表格布局结合使用来制作网页。
2、过程与方法：
（1）通过对表格网页的分析，体验新知识（框架结构网页）的优点，从而促进其学习新知识。
（2）理解框架的概念与组成，学会分析网站的结构。
3、情感态度与价值观：
（1）通过以“人与动物”为主题的框架结构网页制作活动，了解更多有关人与动物和谐相处的知识，通过故事趣闻，增强学生关注动物的兴趣和意识。
（2）能够将表格与框架结构网页结合使用，在创作中体验乐趣。
教学重、难点：
1、重点：框架的概念、用途， 创建、编辑与保存框架网页的方法。
对比教学法、探究学习法、模仿学习法。
教学准备：
整理、归类相关素材，并按要求摆放。
老师展示一组利用表格制作的网页，要求学生仔细观察，找出它们的一个共同特点（学生答：网页上方和左侧内容都是相同的，仅右下部分内容不一样），并提问如何快捷地制作这种网页？（学生答：使用复制粘贴快捷地制作）
尽管复制、粘贴能为我们节省时间，但有没有更好的方法呢？相同的区域我们能否只做一遍呢？今天我们要学习的内容――框架网页制作，就能给我们带来更多便捷。（让学生明确框架网页使用的场合）
由以上例子入手，再展示一个框架网页，教师引导学生理解框架网页的概念
教师要求学生先阅读教材中的操作步骤，再尝试进行探究操作。
任务1 创建“横幅和目录”结构的框架网页，新建top和left页面，并学会保存。
框架结构中的每个框都是一个独立的选项文件，即网页文件，因此当框架确定之后，需要为每个框分别指定其网页文件的来源，可以通过每个框中的“新建网页”按钮和“设置初始网页”按钮进行选择。在top和left页面中，单击“保存”按钮，随即开始保存。
此处为教学难点，可先由框架的概念入手，再针对保存页面中的蓝色部分，教师进行讲解，教会学生注意观察。
学生要理解框架网页的概念，通过阅读教材中的内容，自学新建框架网页的操作，初步了解“新建网页”和“设置初始网页”两个按钮的不同，并认真聆听教师的讲解，注意观察，按要求模仿操作。
学习能力，课堂教学难点在教师的讲解后模仿操作，有效突破难点。
框架网页中相关页面的制作，需要结合表格来布局，插入文字、图片和交互式按钮。
任务2 top和left页面的制作。
要求：
○1top页面内插入1行2列的表格，左边单元格插入logo图片，右边单元格插入banner图片。
○2 left页面内插入5行1列的表格，在每个单元格内依次插入交互式按钮（共4个），交互式按钮文字为展示介绍的相关内容概括，在第5个单元格内插入一个邮箱指示的图片。
○3调整表格边框的粗细。
学生制作相关页面，同时也是对前面所学内容的复习和回顾。老师反馈学生的操作情况，开展比一比、评一评活动，对表现好的学生给予表扬。
创建好框架网页后，可以根据实际需要改变框架的属性。
任务3 调整框架的大小、设置框架的边框、设置框架窗口中的滚动条等。
学生自主探究学习，可向老师寻求帮助。完成设置后请同学示范操作，并说明自己设置的方法和原因。操作基础扎实的同学完成任务后可进行扩展学习。
老师可以给出一些常见的框架结构应用界面，如Web邮箱页面等，引导学生总结本课内容，梳理课堂知识，并让学生分组，推荐一些优秀作品进行全班展示。
设计意图：开拓学生的视野，使学生了解框架的应用，教会学生要善于总结，要学会学习的方法。
网页设计教案 篇7
论文摘要：通过对网页设计中的形式美法则和网页中各种构成要素进行分析，探讨网页设计教学中网站版面的编排与设计。
论文关键词：网页设计;形式美法则;构成要素
如今，互联网已经融入我们日常学习生活的各个环节，并在全球范围内飞速发展。其打破了国界、地域、文化的限制，使信息传达的范围、速率都产生了质的飞跃。互联网中数以万计的网站中，每个网站都拥有自己不同的网页，一个个变换的网页构成我们互相交流的媒介。因此，网站制作过程中，特别是网页页面编排设计时，要展示出自己独特的设计风格。如何设计出视觉效果好，色彩搭配和谐，结构合理的网页版面是网页设计中的一个重要问题。
一、网页设计中的视觉流程
网站的宣传内容、整体风格、设计理念都要通过视觉感官被浏览者所欣赏、接受和感受。设计精美的网页版面能够让浏览者增加浏览兴趣，拥有美好心情，从而增加网站点击率。反之，网页页面凌乱不堪会严重影响浏览者观看阅读的情绪，离开网页。网页视觉元素能否引人注目会直接影响到网站的信息传达，若想想通过网页更好地传达信息，网页视觉效果良好是其基本条件，让网络真正意义上成为可读强性、新颖的媒体，为此网页设计者设计网页时，必须适应人们阅读习惯和满足人们的审美需求。对每个视觉造型元素之间的距离、位置、面积以及视觉流程等都要精心设计。
人们阅读文章时，视觉总会有一种先后顺序习惯，有一定的方向，整个版面的走势有一个主旋律。网页设计中的主标题、重要广告、更新的重要信息等突出信息通常选择放于此位置。但视觉流程与学习数学公式不同，属感性范畴，其只要符合人们认识过程的心理顺序和逻辑顺序，就可以根据感受灵活运用。网页设计时，合理的运用网页的视觉流程，能够引导浏览者按照一定的顺序阅读网页，组织好整个网页版面的视觉导向，从而影响到整个网站的信息传达和功能实现。因此网页的编辑设计，视觉导向是一个重要问题，信息传达是网页设计的一种功能性的体现，这种传达要符合人们普遍的思维习惯，做到视觉流程合理、顺畅、自如。好的视觉流程布置，能使网页上的各种信息要素在一定空间内合理分布，能使页面上各信息要素的位置、间隙、大小保持一定的节奏感和美感。一个网站主要说明的东西必须通过网站首页醒目位置加以体现和展示，以方便浏览者阅读和理解。
二、网页设计的审美需求
网页设计是近些年才发展起来的`一门设计类学科，这些年随着网络的发展，人们越来越重视网页版面的设计和网站风格的整体设计。网页不仅是将各种想要传达的要素简单的罗列在页面上，而是要考虑如何使浏览者能更感兴趣的和更有效率的接收网页上的信息内容。这就要求我们从审美的方面入手，设计制作出美观、完整、新颖、合理的页面。使浏览者观看阅读起来心情愉悦，更好的接受网页所传达给我们的信息。我们可以把传统平面设计中的形式没的法则和现代的网页设计的具体问题相结合起来，运用一些平面设计中美的基本形式到网页版面的设计中去，增加网页设计的美感和浏览者的视觉审美需求。
(一)版面的规范化
页面编辑的规范化要求是网页设计的重要方面。比如使用Dreamweaver设计网页时，是选择左右型结构、左中右型结构、左右型结构框架，还是用表格系统来定位网页中版面的规划。要遵循一定的规范。在网页编排中应正确使用文字、标点符号、计量单位、规范使用术语、图片和Flash动画等。对网页版面中的文字、图形、色彩的设计，都要遵循形式美的视觉规律。网页的内容与形式的表现必须统一和具有秩序，形式表现必须服从内容要求，网页上的各种对象之间要分清主次，突出重点，有一定的整体感。
(二)版面的均衡性
网页的版面虽然有限，但在浏览者的眼里和平面设计要求一样同样要有视觉的均衡性。版面构图的基本元素是点、线、面，其中单个的字符是点，由字符组成的行是线，由行组成的段落是面。线和面的运动方向可以归纳为水平、垂直和倾斜三种形式。水平和垂直给人以安静和固定的感觉，倾斜则具有运动感。水平、垂直和倾斜组合起来使用会给版面带来丰富和生动的效果，从而使版面在整体上保持平衡的前提下具有动感和变化。
(三)版面的装饰性
“图”与“地”的对比中版面的装饰性中和重点。可以使用空白进行装饰，力求在平面中达到不平的效果。要注意立体的装饰效果，比如在文字大小、颜色的处理上要有对比，图片的摆放也要有大小、颜色的对比，包括和背景颜色的对比，从而使版面在整体上体现出层次感。给浏览者以赏心悦目之感。
(四)版面的统一性
网页版面设计中的统一，就是指在版面的整体感上要达到一致，风格上一致，色彩上统一协调，比如文字字体要统一，不能有的严肃，有的活跃，有的时尚，有的古板，同时色彩感受上也要达到风格统一。
三、学会分析网页中各构成要素
网页设计就是通过各种要素向浏览者传达信息，以实现宣传的目的。其构成要素包括文字、图形、图像、标志、色彩等造型要素及标题、信息菜单、信息正文、标语、单位名称等内容要素，如何在网页版面中合理的设计安排这些要素是我们要细心研究的问题。
(一)文字的编排与设计
文字作为信息传达的主要手段是网页设计的主体，是所有宣传物中不可缺少的元素，也是网页中必不可少的元素，因此网页中文字将占据相当大的面积，文字表现的好与坏会影响到整个网页的质量。必须考虑文字编辑的整体效果，给人以清晰的视觉印象，切记不要使页面中的文字看起来凌乱、繁杂，过多的装饰会让人不容易辨认和理解。不可只为美观而创意文字，忽略了文字本身的传达信息功能。版面设计时要注意文字的大小变化，色彩变化，明暗变化，用这些变化使字体版面活跃，达到视觉上的美感，注意变化中的统一，以获得良好的心理反应，达到完美的文字编排效果。
(二)图片的编排与设计
图片是网页版面中文字以外的又一主要元素，是传达信息的有力途径，图片的参与可以加大网页提供的信息量，而且图片的引入也大大美化了网络页面。可以说，要使网页在纯文本基础上变得更有趣味，最为简捷省力的办法就是使用图片。对于一条信息来说，图片对浏览者的吸引力远超单纯的文字。图片的位置、面积、数量、形式、方向等直接关系到网页的视觉传达。在页面图片的合理选用时，一要注意统一，二要注意悦目，三要注意突出重点。
(三)色彩的设计
色彩是美丽而丰富的，不同的色彩会给我们带来不同的心灵感受，现在一些大的企业已经将色彩融入到公司的整体企业识别中，因为色彩能使人产生联想和感情，例如红色是火的颜色，热情、奔放，也是血的颜色，代表危险，绿色是自然、生命的颜色，象征安宁与和平，紫色高贵、神秘，白色代表纯洁等等。一个网站格调的设定，往往取决于网站颜色的选择。色彩是人们浏览网页的第一印象，它带给我们不同的感受，它的好坏直接影响浏览者的观赏兴趣。因此，色彩设计在网页设计中居于十分重要的地位。网页的色彩设计具体应把握以下两个方面：一是是整个页面的色彩选择，确定一个有利于体现网站主题的主色调。网页的设计一般以浅颜色为背景的居多，如浅灰色、浅黄色、浅蓝色、浅绿色。大型的商业网站，你会发现他们更多运用的是白色、蓝色、黄色等，使得网页显得典雅，大方和温馨。更重要的是，这样可以大大加快浏览者打开网页的速度。二是在背景的色调搭配上一定要注意不能有强烈的对比，大面积颜色适宜采用低比度，因为过于丰富的背景色彩会影响前景图片和文字的取色，严重时会使文字溶于背景中，不易辨识。所以，背景一般应以单纯为宜。如果需要一定的变化以增加背景的厚度，也应是在尽量统一的前提下的一种变化。
网页作为作为一种新生事物，以它特有的方式飞速发展，它涵盖了平面设计、广告设计、版式设计、色彩设计等等知识。网页设计是一种综合性的设计，它所涉及的范围非常广泛。形式美的法则是任何事物所必需具备的基本因素，网页信息不仅是为了满足使用者的需求，更重要的是创造一种视觉上的愉悦，符合形式美的法则，使浏览者在阅读浏览的时候产生共鸣。未来的互联网究竟会发展到什么程度我们不得而知，就让我们在这个互联网的大世界里去不段的探索和追寻吧。
感谢您阅读“幼儿教师教育网”的《网页设计教案范例》一文，希望能解决您找不到幼儿园教案时遇到的问题和疑惑，同时，yjs21.com编辑还为您精选准备了网页设计教案专题，希望您能喜欢！
