网页设计制作教案十篇

网页设计制作教案篇1

（福建广播电视大学晋安校区 福建 福州 350003）

摘要：根据多年对“网页设计与制作”课程的教学探索，提出“课程案例”这一新概念，并设计开发出一个学生既熟悉、又感兴趣的“课程案例”——班级网站，让学生在模仿再开发该案例网站的过程中学习课程知识，从而掌握本课程的知识和运用技能，达到教与学的良好效果。

关键词 ：网页设计与制作；课程案例；班级网站

中图分类号：G712 文献标识码：A 文章编号：1672-5727（2014）11-0093-03

作者简介：王淑云（1965—），女，福建福州人，福建广播电视大学晋安校区高级讲师，研究方向为计算机软件。

中职生的共性就是对缺乏学习兴趣。笔者通过多年的课堂教学体会到：如果有一套行之有效的既适合中职生实际水准、又贴近他们学习生活、能激发他们学习兴趣的案例贯穿于整个课程教学，就有可能解决这个问题。基于此，笔者提出了“课程案例”这一新概念，设计并开发出一套“课程案例”应用于“网页设计与制作”课程教学中，学生通过案例的模仿再开发，全面掌握“网页设计与制作”课程知识与技能的基本要领，从而实现课程的教学目标，培养学生的网站开发和设计能力。下面详述这一“课程案例”教学的设计及所进行的课堂教学。

“课程案例”的提出和设计

（一）“课程案例”这一新概念的提出

市面上相关教材比比皆是，但从其所提供的案例方面看，没有比较适合中职学生的：要么网页主题让学生很陌生，要么网页页面设计太复杂，中职生很难掌握，而且其中的案例多是针对某一知识点或某一章节设计的，属于“知识点案例”或“章节案例”，是零碎知识，不能贯穿整个课程知识教学。所以，教科书只适合作为本课程理论知识点的参考资料。“网页设计与制作”是一门技能型课程，重要的是要教会学生如何去构建和设计一个完整的网站，而不是空泛地谈一些理论知识。“课程案例”区别于“知识点案例”或“章节案例”之处在于：该案例贯穿于整个课程教学，覆盖课程包含的所有知识，课程知识的学习以“课程案例”为线索进行，学生模仿再开发设计完该案例，课程的所有知识学习也已结束。笔者思考并设计这样的“课程案例”，并对教材进行如下处理：提炼教材所提到的知识点，将其重新排列组合，按由浅入深的学习顺序，将课程知识点结合到自主设计的“课程案例”中，分模块渐进教学，整个教学过程注重学生自身思维的开发，将个体集美术设计、课程知识学习和课程实践三者紧密结合，将学生各方的能力逐渐激发展示出来。

（二）围绕学生的兴趣进行“课程案例”的设计

学生对一门应用型技术课的学习如没有兴趣，可能是没有一个令他们感兴趣的实例吸引他们渐次深入学习，从而引导他们学习掌握课程知识。班级是校园学习生活的一个集体，班级网站中所记录的人物、活动都是学生身边的人和事，网站的主题反映的正是他们的校园生活。如果把班级网站作为教学案例，让学生以自己的学习生活为主题组建成网站，一方面能引起他们极大的学习兴趣，另一方面，作为同一个班级的学生，在设计本班级的网站过程中，能够创造很多互相交流的机会，培养互相学习的精神，也能加深同学间的友情。所以，“班级网站的设计与创作”是一个理想的课程案例。笔者应用模块教学法，将理论知识与该课程案例完美结合起来，在近似实践的学习过程中培养学生的学习兴趣，让他们在兴趣中学、在学习中增添兴趣，从而在良性循环中完成课程学习。

再考虑学生的能力方面，他们已经有了对文字、图片和表格的基本处理能力，还学过或同步学习Photoshop、flash、计算机网络基础等相关课程，所以，只要对网页素材的处理提出具体的要求，或对他们略加指导即能自行设计处理完成。对于该课程，虽然大部分学生浏览过很多网站内容，但并没有真正了解网站是怎么回事；对互联网世界充满兴趣和好奇，却还没有网页设计与制作的理论知识和实践技能，对网站常识还比较陌生。因此，在课程学习中，重点是要力求深入浅出、尽可能直观全面地剖析一个好的网站案例，运用视、听的方法，帮助学生建立有关网页设计与制作的基本概念和基本知识，掌握建设网站的基本技能。

鉴于此，教师如何将Dreamweaver、HTML和CSS三部分内容有机结合，让学生通过课程学习，模仿再开发出一个比较完整的“班级网站”，着力培养学生的实际建站能力、设计开发能力，从而提高他们自主学习与创新能力、信息收集与处理能力、提出问题并分析问题和解决问题的能力，成为课程教学的重要目标。

“课程案例”教学方法的设计

教学手段以“多媒体机房、网络、项目开发”三项结合。多媒体机房为学生设计网站提供基本条件，网络是学生寻找素材资源和借鉴别人经验的空间，项目开发是他们学习的任务。

教学方法上，采用示范讲解、任务驱动的教学模式，从以下三个方面展开：

采用案例讲解的教学模式 教学过程根据编排好的知识点内容和事先创建好的“班级网站”实例，逐步讲解该“课程案例”，便于学生理解和进行模仿设计开发。

实施模块化教学方法 遵循学生“由浅入深，循序渐进，由感性到理性”的认识规律，把知识点组合后分模块渐进教学。教学过程讲练结合，以学生实践为主，完成“班级网站”这一“课程案例”中包含的每个模块的再设计与再创作；以教师引导为辅，讲解设计与创作过程中遇到的新知识，组织学生完成能力拓展训练。

走四步教学流程，融“教、学、练”于一体 第一步，教师展示课程案例，演示创作过程，讲解涉及的知识点内容；第二步，下达任务，提出完成任务的具体要求和完成时间；第三步，学生模仿再设计再创作，完成任务；第四步，任务验收，学生自我评价，教师综合讲评。

“课程案例”的课堂教学

基于学生的现有知识技能，教师课程教学中重点讲授如何设计开发网站，在其他环节只扮演一个组织者和启迪者的角色，一步步引导学生完成本课程的目标，充分培养和发挥学生的自主设计能力、绘画能力和创新能力。

整个课程的课堂教学以“课程案例”为主线，设定以下几个教学模块。

模块一：学习有关网页的基本知识，介绍建设网站的工具等。

模块二：草拟“网站地图”，设计网站“模板页”。展示课程案例网站，分析班级网站的风格、页面的布局和包含的元素，先给学生一个真实的空间印象，之后让学生模仿如何设计这样的网站。首先设计出纸质的网站空间布局和内容：包括考虑整个网站的风格、主色调、页面布局、页面的大概内容等，每一个页面设计草拟在一张纸上，其实这就是网站地图了。做足了这个功课，日后的整个班级网站的设计就有了头绪。为避免各页面出现相同内容的重复设计，提出设计制作“模板页”来生成其他页面。例如：把风格和内容相一致的部分（如班级广告图、班级徽标、导航条、版权信息等）设计出来，作成模板页保存下来，以备后面制作网站各页面时利用模板页生成，并在此基础上进行相应页面内容的设计创作。草拟“网站地图”和设计制作网站“模板页”是同时进行的，要结合着做。这个阶段都还是“纸上练兵”。

模块三：收集和创作素材。班级网站的素材主要来源于学生自己的学习生活，可以是活动的照片、活动记录，也可以是为自己班级创作的班级广告图、班级徽标等Flash或Photoshop作品，将这些素材分门别类放入建好的站点目录树中。

模块四：学习Dreamweaver，首先建立班级网站站点。

模块五：设计创建“模板页”。根据前期草拟的网站地图，利用布局表格设计模板框架。框架搭好后就是为模板页添加素材。模板上需要的素材并不太多，关键是要“精”，用精心选择和创作的素材。提醒学生，模板上大块的空间要留出来给各页面添加相应的内容，这点至关重要。

模块六：利用模板生成网站各页面。模板设计成熟并制作出来后，就要根据模板上的导航设计生成相应的页面，并将各页面互相链接起来。

模块七：完善各页面内容。每一两次课完善一个页面的内容，直到网站中各页面内容全部添加完成。当然，课后要为如何合理安排这些页面内容花很多时间去构思、去创作或收集相应的素材。所以，收集素材这项工作是一直贯穿于整个网页设计过程中的。

模块八：应用一些网页特效的代码，如添加背景音乐、QQ互动、图片文字的滚动、表单等，让页面动起来，增加网页的吸引力和活力。

模块九：本地站点测试。

教学评价设计

评价方案 （1）学生自我评价：即每个学生对自己的评价。教师事先给出评价标准和具体要求，学生对照自己的学习态度、创作的作品，对自己给出合理评价。（2）模块作品评价：教师对每个学生的评价。教师通过对学生课堂反映、每个模块上交的作品、讨论活跃程度等方面，对每个学生进行评价。（3）期末考核：教师通过对学生一整学期模仿再设计创作的“班级网站”进行评分，考核学生的实践与动手的综合能力，对学生进行合理的评价。

成绩评定 按出勤率、模块作品成绩、成熟作品成绩加权考核。

结语

在“网页设计与制作”课程案例的课堂教学中，笔者采用的是兴趣教学和让学生贴近实战的方法，以保持学生对知识探索的兴趣并提高学生的动手能力。这种教学的重要前提是要设计一个好的案例，“好”的标准是内容贴近学生的学习生活、设计难度又适合他们的实际水平，“班级网站”这一课程案例便是好案例之一。此外，在教学过程中，笔者为学生提供了十分丰富的信息资源，教会他们信息资源该如何收集、从哪里获取、以及如何有效利用等知识。

参考文献：

[1]刘瑞新.网页设计与制作教程[M].北京：机械工业出版社，2010.

[2]唐乾林.网站界面设计案例教程[M].北京：机械工业出版社，2011.

[3]尚俊杰.网络程序设计——ASP[M].北京：清华大学出版社，北方交通大学出版社，2009.

[4]赵丰年.网页制作三剑客操作互动[M].北京：人民邮电出版社，2011.

[5]赵丰年.网页制作技术——Dreamweaver Flash Fireworks[M].北京：人民邮电出版社，2003.

[6]马月.网站界面设计[M].北京：北京理工大学出版社，2006.

网页设计制作教案篇2

关键词：技工院校；网页设计

案例教学在信息时代快速发展的今天，各行各业对技术型人才的要求普遍提高。技术院校捕捉到市场对人才的新要求，也在积极地进行教学改革。将全新的教学方法与网页设计教学结合起来，是促进网页设计教学目标实现的重要手段。案例教学法与网页设计课程的操作性与实践性特点相符，以此来打破传统教学模式对网页设计教学的限制，能够让学生的发展需求得到满足。

一、做好内容选择工作

选择案例教学法内容，是实施案例教学活动的第一步。在选择案例教学内容时，教师要坚持两点原则。第一，教学案例要具有真实性与典型性。教师选择教学案例时，需要查找社会生活中真实存在的网页设计案例，杜绝一切不真实的案例走进课堂。教学所用案例要具有典型性，不仅与生活密切相关，更要能够启发学生的网页设计思维，促进学生找到切入点去讨论。实事求是的教学，才能促进学生网页设计能力的提升。第二，教学案例内容要与教学内容相关。之所以将案例教学法引入技工院校的网页设计课堂中，就是为了促进网页设计教学目标的快速实现，让学生通过网页设计知识的学习，提高自己的实践能力。因此，教师需要在教学目标的引导下选择案例教学的内容，本着提高全体学生网页设计技巧的目的选择有针对性的案例教学内容。

二、出示任务书

出示任务书是利用案例教学法实施教学的重要环节。任务书中包括案例学习的内容以及具体要求，教师要重视任务书的设计工作，将学生要掌握的理论知识与实践技巧明确地整理在任务书中，让学生以任务书为引导实施开展学习。换言之，如果学生掌握了任务书中的知识点，达到了任务书中的目标，就等于完成了课本相关内容的学习。值得注意的是，教师要重视技工院校学生创造力的培养，在任务书中设置的任务要具有启发性，设置任务的难度不宜太大，要给学生完成任务的信心。例如，在讲解制作文本网页知识时，教师可以设计这样一个任务书：掌握网页文本格式的设置技巧，如空格、对齐、项目列表、标题、字体字号的设置等。这部分内容学习难度不大，教师可以选择学生所在城市的一个旅游景点，让学生为这个旅游景点设计一个文本网页。这样让学生参与到真实的案例中，可以锻炼学生的网页设计技巧，有利于提高专业技能。

三、组织学生讨论

让学生在案例学习活动中发挥自己的主观能动性，是提升学生学习效果的重要手段。在案例教学中，教师要组织学生就难以解决的问题进行讨论，让学生在互帮互助中成长起来。讨论活动的实施要有标准，教师要求小组内的每一位成员都表达自己的看法，分析自己的网页设计工作，为小组成员的学习贡献自己的力量。在所有观点都摆上台面上之后，再针对关键问题进行讨论。例如，在旅游景点文本网站的设计中，一些学生对旅游景点的特色列表持有不同见解，教师要鼓励学生分析网页服务对象以及受众，讨论出最佳方案，让学生在自主探究中实现个人能力的提升。

四、总结点拨，提高案例教学成效

学生的学习能力再强，也需要教师的引导。在技工院校的网页设计教学中，教师要积极发挥在课堂教学中的主导作用。教师通过案例教学法实施教学，给学生创造了更加自由与多元化的学习、探究与讨论的空间，也让教学内容更加开放，从而使教师的教学行为更加轻松。在学生的讨论过程中，教师要巡回指导，避免使学生的学习走入歧途，浪费时间。例如，在学习网页设计的知识时，教师引入城市现代化进程网页的案例组织学生讨论。讨论中，一些小组在特效功能上产生了分歧，教师要及时指导，帮助学生明晰每一种特效的视觉作用与情感作用，并引导学生开发特效的设计方法，保证案例学习的质量。

五、小结

综上所述，网页设计知识的应用性与综合性较强，教师要重视专业理论知识的讲解，也要针对企业对人才的需求、学生的个人能力等加强对操作方法的指导。选择科学合理的案例教学内容，突出学生在案例学习中的主体地位，让问题讨论更加深入，鼓励学生说出自己的疑惑。科学应用案例教学法，是推动技工院校教学改革的重要环节。

参考文献：

[1]王哲.项目教学法在技工院校《网页设计与制作》课程中的探索与实践[D].南昌:南昌大学,2012.

[2]盛志燕.案例教学法在中职《网页设计与制作》课程中的应用分析[J].信息与电脑(理论版),2015(16).

网页设计制作教案篇3

关键词：网页设计与制作 网页与网站设计原则 教学改革

中图分类号：G71 文献标识码：A 文章编号：1672-3791（2014）03（a）-0209-02

内蒙古科技大学是地方高等院校，毕业生大多到企业从事设计、生产、管理等技术工作，故人才培养定位于“工程实施型人才”，要求学生具有扎实的基础理论和专业基础知识，能够教深入地掌握专业知识和流行生产技术，具有较强的工程实施能力，因此内蒙古科技大学的毕业生具有“上手快，留得住，后劲足”的特点，毕业生就业率连续多年位居自治区高校前列，被国务院授予“全国就业先进工作单位”光荣称号。该校的计算机科学与技术专业在学校人才培养思想的指导下完成了专业定位，重新制定了人才培养方案和课程体系，在此背景下，计算机科学与技术专业开设了《网页设计与制作》课程。

1 《网页设计与制作》课程现状及存在的问题

根据企业用人标准及对毕业生的回访调查，总结出了网页设计师的从业要求：具备优秀网站设计能力，能综合运用各类软件设计视觉创意网站，能独立进行平面网页的创意设计，具有良好的艺术触觉和美术色彩搭配功底，深刻理解web标准，熟悉CSS+DIV模式，能手写XHTML及CSS样式代码，懂得javascript应用，精通设计与网页设计软件，如photoshop、fireworks、dreamweaver等，能独立完成网站的规划和静态页面制作。可以看出一个优秀的网页设计师能够对网页的构成元素进行艺术规划和创造性思维活动，通过网页制作技术实现网页设计的目的，达到了艺术与技术的和谐统一。[1]为了培养大一新生对计算机专业的学习兴趣和热情，许多高校包括我校在内，将《网页设计与制作》课程规划为必修课安排在大一下学期开课，目的通过本课程所见即所得的特点，激发新生对计算机专业的学生兴趣和热情。可在以往的本课程教学内容安排上，重网页制作技术的讲授，对网页设计相关知识涉及甚少，即便学生掌握了XHTML、css+div、JavaScript等网页制作技术，可没有遵循网站与网页设计原则，致使学生制作出来的网页粗糙拙劣，毫无美感可言，这样的教学安排，难以培养学生的专业学习兴趣和热情。

2 《网页设计与制作》课程改革思路

以适应企业需求为导向，以培养学生网页设计能力为根本，以项目教学和案例教学为手段，以实际网站为目标，进行课程内容的编排和改革。[2]紧跟当前市场需求，及时对教学内容作出调整，特别强调网站与网页设计原则理论知识，在讲授网页制作技术的过程中注重网页设计基本理论与基础知识的渗透，努力提高学生的审美情趣，在潜移默化中让学生形成“技术为设计服务”的思想，让这种思想指导其网页设计与制作行为，最后将这种认识转换为能力，最终体现在其网页设计作品上。

3 《网页设计与制作》课程教学改革方案

以“技术为设计服务”为指导思想，以项目教学和案例教学为手段，通过项目驱动，[3]让学生在32学时讲授+32学时上机的学习过程中，独立完成上机项目。上机项目按照具备知识水平由易到难，需求由低到高，设计方案由局部到整体的梯度进行，符合教育教学的基本规律。结课后，以一个综合项目的开发作为对学生学习效果的最后的评价。综合项目的开发，实际上是学生实践和独立探究的过程，在此过程中，增长了学生的知识，培养了学生创造性思维和发现问题、解决问题的能力。

3.1 教学内容的编排

按照WEB标准，网页由三部分组成：结构（structure）、表现（presentation）和行为（behavior），因此，在教学内容的编排上，将《网页设计与制作》课程分为四大模块进行讲授和实践。分别为：网页与网站设计原则、XHTML基础知识、css+div、javascript。

网页与网站设计原则模块：在本课程的教学过程中处于指导地位和核心地位。通过该模块的教学，首先让学生掌握网站的3C设计原则，即简洁、一致性、对比度。通过一些优秀网站设计案例的展示，使学生对3C设计原则有初步的体会和认识。其次让学生掌握页面设计要点，包括：精心组织的内容、格式美观的正文、和谐的色彩搭配、较好的对比度、生动的背景图案、页面元素大小适中，布局均匀、不同元素间的留白等。通过优秀网站设计案例的讲解，让学生初步体会每一个页面设计要点。在随后的课程讲授及上机实践中，通过具体案例，强调网页与网站设计原则，让学生对3C设计原则及页面设计要点有更深的体会和认识，在潜移默化中，学会用网页与网站设计原则指导自己的网站制作行为。

其他三个模块为《网页设计与制作》课程的技术范畴。通过XHTML、css+div、javascript的讲授及配合各类上机项目的实践，使学生具备认识网页创建站点应用网页元素对网页布局应用CSS美化页面给网页添加动态行为的能力。最后以网页与网站设计原则为指导，设计开发一个综合项目。该综合项目要求要有鲜明的主题，内容与形式统一，个性突出、布局合理、配色美观。可以看出，通过本课程技术层面的学习，为学生奠定了制作综合项目的技术基础，而其掌握的网页与网站设计原则又将反作用于其网页制作的行为上，提高其网页制作水平，逐步达到技术与设计的和谐统一。

4 《网页设计与制作》课程考核体系

本课程的考核方式为考察，主要考察学生的实践能力及学生网页与网站设计原则的掌握情况。将平时表现，上机项目完成情况、综合项目的开况相结合，从而得出学生的最终成绩。

考核方案设计如下。

平时表现10分：包括上课出勤，上机出勤。有课堂主动回答问题的额外加3分。

上机实验40分：内容包括：包含文本、图像、超链接、多媒体的简单网页设计（3分）；包含表格的简单网页设计（3分）；包含表单的简单网页设计（3分）；利用框架进行简单网页设计（3分）；利用CSS样式表美化网页（10分）；利用表格进行网页布局（3分）、利用DIV进行网页布局（5分）、利用DIV嵌套表格进行网页布局（5分）；利用javascript实现网页特效（5分）。

综合项目开发：通过本课程掌握的网站设计原则及制作方法，完成综合项目的设计与制作。（50分）

设计要求（25分）：需求分析充分，栏目设计合理，功能完善，网站深度不低于3级别（5分）；主题鲜明，页面布局合理，配色和谐，形式美观，风格统一（10分）；logo、banner的设计应突出主题，与页面风格相协调（5分）；要有便捷的导航信息。网站内容丰富，具有良好的可读性（5分）。

技术要求（25分）：站点文件组织规划合理，主页必须以index命名（2分）；代码书写符合XHTML语法规范（3分）；用Div对网站进行总体布局，局部布局可用表格（6分）；用css进行页面的美化，对样式的定义统一写在外部样式表中（6分）；多媒体元素运用得当，适合网络传输（3分）；页面中包含有JavaScript实现的特效（5分）。

5 结语

改革后的《网页设计与制作》课程重视学生网页设计能力的培养，在每一次的教学实践环节中，都在强调网页与网站设计原则，在潜移默化中让学生学会用网页与网站设计原则来指导自己的制作行为。在此原则的指导下，74名学生完成的综合项目开发作品中，符合网站与网页设计原则的作品有62.3%，其中优秀作品比例为 12.6%，较未实行教改前学生的设计与制作水平有了明显提高。实践证明，以“技术为设计服务”为指导思想的《网页设计与制作》课程教学改革实在可行，提高了学生网站设计与制作水平，为其以后的就业打下了良好基础。

参考文献

[1] 邵小兰.浅析网页设计中的艺术设计[J].科技资讯，2011（15）：14.

网页设计制作教案篇4

关键词：网页设计与制作；教学方法；探索与实践；高职院校

高职院校作为培养专业技术人才的前沿阵地，已在计算机科学与技术、电子商务、广告设计与制作、软件工程等专业开设了《网页设计与制作》的课程，不断探索适合高职院校学生的网页制作能力的教学方法显得格外重要。

1 《网页设计与制作》教学方法现状

《网页设计与制作》一门既包含一定的理论知识且实践性、技能性和创造性比较强的课程。笔者在近几年的教学过程中发现现有的教学方法存在一些问题，首先，其涉及内容广泛，大多数教师仍按照课程的章节顺序进行讲授，在有限的课时内很难讲完，即使讲授完，学生大多只能是表面接受，缺乏网页设计的实战经验。其次，教学方法比较单一，造成学生往往只能记住一些最基本的制作，无法独立全面完成一个网站的制作与设计。最后，课程讲授结果与市场需求严重脱节，学生学完课程后，没有真正的实践经验，缺乏相应的就业竞争力。鉴于现有的教学方法存在严重的不足，迫切需要探索新的方法从而激发学生的学习积极性，提高教学质量，让学生学有所成。

2 《网页设计与制作》课程改革的几种教学方法

⑴案例教学法。案例教学法作为一种新型的教学方法已遍及各个领域及学科。案例教学法是一种以案例为基础的教学法，要求学生在对相关的基础理论知识具备理解、分析和辨识的条件下，老师根据教学大纲规定的目标和要求精心设计案例，并引导学生对实际案例进行深入剖析，采取个人独立思考和团队合作讨论相结合的分析方法，进一步提高学生辨识、分析和解决某一具体实际问题的能力，同时培养正确的管理理念、沟通能力和协作精神的教学方式。在案例教学中，教师和学生都需要相互配合，积极投入并参与到教学过程中。教学方法以学生的独立分析研究为主，老师的传授和指导为辅。教学任务要求学生通过对案例的分析积累经验，培养自己的思辨能力。教学过程总是从案例开始，然后分析问题，最终解决问题。由此可见，培养学生具有独立分析研究工作的能力是案列教学中的一个重要环节，教师的指导和教学的准备都是为学生的分析研究工作所服务的。

⑵项目教学法。项目教学法是师生通过共同实施一个完整的项目工作而进行的教学活动。该方法是以项目为主线、教师为主导、学生为主体的一种教学模式。教师在教学过程中创设项目活动情境，结合学生的知识技能和实践经验，引导学生完成本项目活动的方法和过程。根据课程和项目要求，教师可将学生分编成几个不同的项目组，并要求各小组中每个学生的能力达到互补，使之在进行项目开发的同时能够相互学习，相互促进，取长补短，激发学习兴趣。通过项目的完成，增强学生的知识和技能，提高分析和解决问题的能力，在情感、态度的价值观多方面对学生进行培养。结合《网页设计与制作》课程实践性非常强的特点，笔者在教学过程中要求学生不仅要完成课堂上讲解的知识点和必要的练习，还要求其在课后自主设计完成一个网站，主要通过和学生共同实施一个完整的项目工作来进行教学活动。这样的项目教学法主要是从学生的专业和工作中的实际应用出发选择具有典型性的事例作为教学内容，学生在教师的指导下按照问题的要求搜集和选择信息资料，通过小组的共同研究，创造性地去解决和分析问题，并完成项目。最后，对各小组项目作品进行评价，并针对评估提出的问题对作品进一步完善。通过项目教学法可以使学生的学习更加具有针对性和实用性，培养学生的实践能力、分析能力、应变能力、交流能力、合作能力和解决实际问题的能力。

⑶任务驱动教学法。任务驱动教学法是在任务驱动教学和案例教学的基础上提出的一种基于建构主义和人本主义理论的教学模式。在教学过程中，紧紧围绕一个共同的任务活动中心，把所要学习的知识巧妙地融入在一个个任务当中，并在完成任务的同时充分发挥学生的积极性、主动性和创造性，从而培养学生独立探索和勇于开拓进取的自学能力。笔者在《网页设计与制作》课程教学中，要求学生完成一个网站的设计，设计的网页包括网页框架布局、网页元素的定位、网页规划与设计、信息的处理、网页的修饰、图片的插入、超级链接和文件存储等教学内容。在设计该任务时，我把网页设计与制作所涉及的基础理论知识和操作方法与技能充分隐含在任务中，然后将此任务分解成若干个小的任务，在教学过程中分步骤的指导学生去完成该任务，从而保证课堂教学目标顺利完成。

3 结束语

教学方法的改革是当前高职院校面临的一个重要课题。教学方法的合理运用，既能提高学生的学习兴趣和效率，又能培养出适合社会需求的合格人才。根据本人的教学实践，通过对以上三种方法的综合运用，并采用模块化教学模式对《网页设计与制作》课程进行教学，可以让学生能够快速对整门课程的基本知识点和操作技术全面了解，并在有限的教学时间内快速学习完成整个网站设计和开发的基础知识，从而实现《网页设计与制作》课程的教学目标和高职院校的人才培养目标。

[参考文献]

[1]谭慧琳.案列教学法在《网页设计与制作》教学中应用的探讨[J].电脑知识与技术，2009（05）：1425-1426.

[2]王雅婷，吴慧林.基于项目驱动的《网页设计与制作》一体化教学模式引用研究[J].科技信息，2012（19），182.

网页设计制作教案篇5

本文主要探讨网页设计与网站管理课程教学的现状以及在教学过程中存在的问题，结合部队院校的特点，提出更合理的教学方法建议，寻求一条新的教学思路和教学方法，以便培养出越来越多部队所需要的网页设计与网站管理人才。

【关键词】

网页设计与网站管理；教学设计；考试方法

1部队院校网页设计与网站管理课程教学存在的问题

1.1部队院校网页设计与网站管理课程的教师水平参差不齐现阶段，部队院校正处于教学改革的重要时期，但是在教学过程中一些院校的教师的教学思想仍然比较守旧，网页设计与网站管理的专业知识和设计思想没有及时更新，在教学过程中没有很好的结合现代化教学方式方法。此外，在教学过程中不能很好与网络信息技术进行整合，特别是不能及时的把军事科技的新知识、新经验融合到网页设计与网站管理教学中。教员滞后的专业知识严重影响了网页设计与网站管理学员的学习热情和学习效果。教学内容不能很好衔接，网页设计与网站管理需要的预备知识比较多，面向对象编程能力、数据库知识、美学修养等都是必须的，而学生在选课时，部分学生没有这方面的预备知识，因而学习起来比较吃力，积极性受到打击。

1.2部队院校网页设计与网站管理课程的教学方法陈旧由于部队院校的教育的发展略慢于地方院校，一些院校网页设计与网站管理的老师不能灵活应用现代教学工具，及时更新授课方式方法。因此在网页设计与网站管理课程教学时，仍然以老师教授为主，更多时候只是照本宣科，缺乏与学员间的互动，教学方法单一陈旧。而使得课堂缺乏生气与活力，从而使得学员们对网页设计的学习非常被动，严重影响了教学质量。（1）多媒体教学方式未发挥应有作用一些部队院校的教师无法发挥多媒体在教学过程中起到的重要作用，在课堂教学中教师将教学内容简单的以教学课件的形式进行展示，不能够根据部队院校学生的需求和网页设计与网站管理专业特点的角度进行课件设计。从而不能很好的提高教学的灵活性和生动性，提升课堂教学效果。（2）理论与实践结合不紧密大多数部队院校教师仍然采用传统的教育模式，教师只针对教学大纲进行授课，注重理论知识内容的讲授，忽略课堂实践环节，对于操作性极强的网页设计与网站管理课程，按照原来的教学模式授课，大大降低了学员的学习兴趣很差难以保证教学效果。虽然在教学过程中也有实践课程，但仅仅是对知识点的简单上机操作练习，没有采用项目教学、案例教学等新式教学方式进行教学，实践教学环节作用不突出，没有达到实践教学的效果。（3）教学内容衔接性差网页设计与网站管理需要的预备知识比较多，面向对象编程能力、数据库知识、图片处理能力、动画制作能力等都是必须学习的，而学生在选课时，部分学生没有这方面的预备知识，因而学习起来比较吃力，积极性受到打击。（4）教学内容和考试方式单一目前在很多部队院校网页设计与网站管理课程的理论考核部分仍然占据较大比例。整个教学过程以教师为中心，学员被动学习，最后只会做老师教的，不能达到举一反三、灵活掌握，导致学员缺乏创新能力和自学能力。在考试方式上，老师为了更好地完成教学任务，主要精力仍然放在学生们的理论知识和试题上。课后作业大部分以理论试题为主，结课考试学员们的成绩达到了院校要求。学员自身学习兴趣、分析问题和解决问题能力都受到挫伤。最终不能实现该课程的教学目标，不能适应部队对网页设计与网站管理需要的人才要求。

2教学设计分析

网页设计与网站管理课程教学特点：知识点多、内容分散、学生学习主动性差。因此，建议采用项目教学法、案例教学法相结合，来调动学生学习的积极性，突出理论与实践结合的重要性。

2.1项目教学法项目教学法是指在教师的指导下以学员为中心的教学方式。教师在学员学习过程中不仅传授学生理论知识，实践操作技能，还要帮助和提高学员解决实际问题的能力，在整个教学实施过程中注重学习的全过程而不是学习结果。尤其是对于部队院校的学员来说让他们掌握整个项目开发的全过程要比设计出一个简单的网页作品更重要。采用项目教学使学员的学习更有针对性和实用性，提高了学员的实践能力、分析解决实际问题的能力和团结协作的能力。与传统的教学模式相比，该模式是从教学目标出发。作为教师，既要讲解网页设计与网站管理相关理论基础知识，还要负责对每个项目组进行指导，检查督促项目进度；作为学员不光要掌握网页设计与网站开发的整个流程和相关专业知识，还要对所做网站的相关内容进行学习。这种教学方法促使学员从被动学习转为主动学习，大大提高了学员的学习积极性。

2.2案例教学法案例教学法从总体上讲是一种归纳模式，课堂案例是来自身边的真实情境或事件，透过此种方式能够有助于培养和提高学员学习的主动性和积极性。案例教学法涉及的层面很广，包括案例选择、案例编制、案例分析和案例评价，每一个层面的好坏都直接决定了案例教学的成败。网页设计与网站管理课程学习需要根据网站所要表达的主题思想设计不同风格的网页，所以包括的知识内容多而散。比如文本设计、图片设计、版面设计、软件知识等。教师应该根据所授课程的教学内容结合部队的相关资料制作出网页案例，并通过组织学员讨论交流等方式对案例进行分析最终掌握相应的理论要点和操作步骤。

2.3考核方式灵活化网页设计与网站管理是一门实践性很强的学科，该课程需要的考核方式不应该仅用传统的理论考试和课堂表现来测评学员的能力素质，应该通过学员自主设计作品的方式来全面反映学员实践操作能力。考核的目标是学员在设计作品过程中的整体构思、基本专业知识的掌握、实际动手能力和综合设计水平的检验，侧重于如何使用现有的网页素材更好的应用到部队的网页设计与网站管理上，最终实现教学目的。

3结论

通过对教学方法的分析和实践，让我们意识到作为部队院校的教师想要更好的教好网页设计与网站管理这门课程，培养出部队需要的网页设计与网站管理专业人才，首先要提高自身的专业水平和创新教学方式方法；其次通过项目教学法和案例教学法的教学方式注重培养学员的学习兴趣，提高学员的动手实践能力和完成整体案例能力；最后要突出部队院校特色，进一步提升学员将部队最新信息与资源融合到网页设计与网站管理中去的能力。有力的提升部队院校网页设计与网站管理课程的教学质量。

参考文献：

[1]段芸.艺术设计专业《网页设计》课程实践研究[D].沈阳:沈阳师范大学硕士学位论文,2013.

网页设计制作教案篇6

>> “网页设计与制作”课程教学改革实践探究 中职网页设计与制作课程教学改革与实践 基于CDIO教育理念的《静态网页设计》课程教学改革与探索 基于移动学习的静态网页设计课程教学资源的设计与研究 《静态网页设计》精品课程建设与研究 基于《网页制作》课程有效教学的探究与实践 中职《网页设计与制作》课程教学探索 浅谈中职《网页设计与制作》课程教学方法 浅谈中职学校《网页设计与制作》课程教学设计 《静态网页制作》教学体会 《网页设计与制作》课程教学的创新与实践 “网页制作”的教学设计与实践探究 浅谈高职《网页设计》课程的教学实践与探讨 “网页制作”课程双语教学实践与思考 中职网页设计课程的教学探讨 中职网页制作课程教学设计探讨 中职网页设计课程教学探讨 中职网络技术专业《网页美术设计》课程“任务驱动教学”探究 探究式教学法在中职网页设计制作课程中的应用 中职《网页设计》课程教学方法的实践和探索 常见问题解答 当前所在位置：。一个网站是由很多个网页文件组成，它有许多子页面，为了能使这些页面有效地被连接起来，需要给这些页面起一些有代表性的而且简洁易记的网页名称，这样有助于以后方便管理网页，在给网页命名时，最好使用常用的或符合页面内容的小写英文字母，这直接关系到页面上的连接。通过案例教学引导学生实践制作，在网站实例中让学生掌握的重点点，突破难点。开始，实训准备阶段，教师通过从事网页设计工作的本校毕业的学生提供网页设计实例，在实施时，分组很重要，男女学生的比例以及制作水平高低的比例要适当，以保证学生讨论的积极性特别高。把班级学生分成四个小组，以小组为单位，每个小组通过团队合作探究，从素材收集、处理、网站规划等所有的环节分工合作逐一完成，通过自学教学视频方法，尝试运用于案例中表格制作的任务中，遇到问题的时候，再进行合作讨论合作完成作品让所有学生进行实践，上传免费主页的空间申请和站点文件，实现网上浏览。让学生自己上机去实现任务，让他们在亲身实践中体会、提高，在同学之间的互相学习和交流，甚至争论中提高学习兴趣，开阔思路。

最后，展示设计作品、经验分享及项目实战演练。要想让学生学习掌握网页设计课程，单靠课堂教学还是不够的，可以在校园内举办一些网页设计的比赛，通过比赛，既可以更大地提高他们对此课程的积极性，也可让学生找到差距，激励他们努力，不断提高网页设计水平。实训教学是教学过程中的重要环节。网页设计课程实训内容的选择要真正做到以技能培养为目标。在实训过程中，学生可以自行查阅资料，根据自己的兴趣设计网站，独立完成。也可以分组完成，鼓励学生以团队协作的方式完成某一个网站项目，锻炼学生的团队协作能力。在临近毕业的时候需要积累自己的作品，我们会发动人脉让大家与招聘企业接触，同时邀请行业内的优秀网页设计员进行经验分享和作品指导，同学们会直接面对网页设计公司的管理人员，只要有能力和耐心，找到理想的工作是没有任何问题的！

在中职静态网页课程教学实训中，不仅使学生学习到了书本上的知识而且通过实训锻炼了学生实际工作能力。我们常说：“教学有法，教无定法，贵在得法。”良好的教学方法，可以发挥教学智慧，达到预期的教学效果。然而教学又无定法，我们必须根据学情来研究和确定教学方法，结合实际工作，不断尝试和探索，充分调动学生的学习积极性和求知欲，让学生快乐学习，并收获累累硕果，教师的教学要适应科技的发展，要有改革进取的精神，培养能真正适应社会的人才。

参考文献：

[1]刘小伟等.网页设计使用教程[M].中国铁道出版社，2008.

[2]刘宏，韩鹰.网页设计与制作实训教程[M].北京交通大学出版社，2007.

[3]尤鸿霞实训课程教学方法研究[J].遵义师范学院学报，2012（2）：93-94.

[4]马海峰，李军华.高职“程序设计实训”课程教学改革探索[J].江苏技术师范学院学报，2010（4）：81-84.

网页设计制作教案篇7

1以就业为导向的网页设计与制作课程教学

网页设计与制作课程的内容与特点网页设计与制作是计算机应用的一个分支，主要涉及网页版面的规划设计与制作方法。这里所阐述的主要是Dreamweaver是如何使用的，并结合HTML语言讲述静态网页的制作过程以及简要介绍如何制作动态网页。通过对网页设计与制作的学习，学生可以掌握网页设计、网页美化以及网页制作的基本技能。网页设计与制作是一门技术性课程，但是也具有很强的艺术性，课程内容丰富，涉及面广，使学生在获取生存技能的同时也培养了艺术气息。因此，课程的学习要求学生具有较高的综合素质。以就业为导向的课程体系设置目标目前，网页设计的课程设计是以就业为导向的。这种课程体系以市场需求为提前，就业目标是课程设置的先决条件，职业中所需要的技能都能够找到相应的课程设置，学生毕业后的就业方向明确。岗位需求决定课程设置，课程内容与实际需要紧密相连，这充分体现了“能力本位”的就业趋势。专业化课程与个人的职业生涯息息相关，明确的就业方向解决了学生“毕业即失业”的尴尬局面。为与市场相连接，针对网页设计构建一套“以能力培养为本位、以动手操作实践为主线、最终构建顺应经济社会发展的课程体系”。这套课程体系将网页设计师在实际中的应用进行归纳总结，在教学时设立不同的模块进行训练，有组织有重点，让学生通过模拟训练掌握相应的知识点。相比理科专业，文科专业有着不同的专业特征、职业定位以及职业能力结构体系。如包含人文系、历史系、经管系在内的文科专业，大多具有自身独特的职业特征与能力要求。这就要求高校文科专业在进行网页设计与制作课程体系构建时，必须充分结合高校文科专业的特色，从其就业方向及职业能力需求出发。

2大学文科专业开展网页设计与制作课程的必要性

随着计算机和互联网的普遍应用，各企业和各单位对自身的网站建设越来越重视，网页制作的人才也就逐渐供不应求。现如今，网页制作与网页设计已成为高校学生的热门选修专业，每个专业的学生都需要具备基本的网站制作技能，网页设计与制作这一课程也已成为高等院校文科专业计算机教程的主要科目之一。互联网已经深入现代人的日常生活中，尤其是当代大学生，通过互联网获取各种信息已成为他们学习的主要手段。网页设计将互联网的背后运作展现在他们面前，很大一部分文科生对这些是闻所未闻的。因此，在一定程度上，文科生的网页制作学习会存在或多或少的困难。但与理科生的背景知识、计算机技术等优势相比，文科生的思维比较活跃，善于文字表达。如果文科生能够快速掌握计算机技能，将自己的知识背景与现代计算机相结合，满足市场的职业要求，那么在同一竞争环境中，他们的就业优势就会比较突出。所以，对于那些文科生占较大比重的综合性大学而言，为增加毕业生的就业筹码，在课程体系中加入网页设计与制作就是十分有必要的了。

3基于就业导向的大学文科网页设计与制作课程体系构建策略

结合学生不同的专业，优化课程内容设计在以文科生为主力军的综合性大学中，不同专业的学生需要掌握的计算机技术是不同的。因此，各高校要根据专业的不同设置不同的计算机课程。基于就业导向，引入新的网页设计与制作课程的教学方法网页设计与制作这一课程的基本特征是理论和实践紧密相连，课堂教学与实际操作是一体化的，理论与实践没有清晰的界限划分。为了使教学效果最优化，本文提出一些对教学方法的建议与意见。

1）模拟任务法，课堂教学与实际操练相结合。在教学活动中，教师模拟一个制作任务，将课堂氛围假设为实际工作环境，教师可以将制作任务分为若干个子任务进行模拟演练，一边为学生演示如何操作，一边讲解，学生边听边做。这样的讲练结合过程极大地激发了学生的学习兴趣，课堂是以学生为主的，他们发现问题、分析问题、解决问题的能力得到有效提高，既学到了知识，又锻炼了能力。

2）实际案例分析法。教师可以将典型的分类网站引入到实际课堂中，在课上为学生做展示，分析并讨论这些网站的布局结构、内容分类以及技术特点。教材中的主要知识点要通过实际案例解释说明，在实践教学中培养学生的创新思维，锻炼他们的团队合作能力。有效利用多媒体、互联网等现代教育手段，采取第一课堂和第二课堂、产学研相互结合的人才培养模式。项目驱动的专题教学模式创新一是选择合适的教学项目，制定细化的开发进度表。一个优秀的教学项目可以充分调动学生的积极性，学生的学习态度也会由“要我学”向“我要学”逐渐转变。教师在备课时要充分考虑教学内容与实际案例的充分结合，选择一些略具挑战性、覆盖范围广的网络项目，这些项目是教学过程的中轴线，所有活动的展开都是以中轴线为标准的。二是引入专题教学模式，促进网页设计课程创新。完成一项网络任务的过程一般包括确定主题、收集并整理有关资料、选择风格、设计LOGO、编排网页的布局结构、确定配色方案、自定义网络样式、制作网络主页、制作各个分页、对网站进行测试、最终对外公布。教师需要将网络制作的这些过程与教学大纲紧密结合，收集整理并设计制作与实际情况相符的教学专题。教师在设计教学专题时应秉承以下几个原则：

1）尽量与教材中的主要知识点相结合；

2）寻找不同的教学案例，全方面、多角度满足学生的学习需求；

3）关注当前热点，紧跟时代潮流，网页制作技术要与时俱进；

4）把握学生对知识的接受与消化能力，精心设计课程，先易后难；

5）要从整体出发考虑专题的选择，每个专题之间都是环环相扣的，前后衔接之后才能出色地完成一个网站项目。

4结语

网页设计制作教案篇8

关键词：案例教学法 CSS+DIV 样式选择器

中图分类号：G712 文献标识码：A 文章编号：1673-9795（2013）04（b）-0168-01

随着现代网页设计技术的发展，CSS+ DIV成为网页设计中的核心技术，如何制作精美的网站，本文旨在引导学生分析网页表单圆角案例，运用CSS+DIV知识点完成设计。

1 案例教学法

案例教学法由美国哈佛商学院提出，是一种以案例为基础的教学法，通过学生间的相互讨论或研究，提高学生的学习兴趣，从而培养学生主动学习的能力。本文用CSS+DIV制作表单圆角案例，形成学生思考和分析问题的能力，从而提高学生制作网页的技能。

案例教学法以注重学生的基本能力为基础，避免单纯理论知识的学习，在实践过程中，可以鼓励学生进行单独的思考和创造，提高学生学习的积极性。

2 表单

表单（Form）作为网页与用户接触最直接、最频繁的页面元素，其在网站用户体验中占有最重要的位置。而表单也常常用于用户注册、登录、投票等功能，用于吸引新用户，留住新用户的重要工具。设计一个表单很简单，但设计一个用户体验高，漂亮的表单却并不易。如果表单设计用户体验不高，无疑将会对网站用户粘性大大降低。

3 设计过程

3.1 展示案例，启发思考

把此案例效果图展示给学生，吸引学生的注意力，激发学生探究学习案例的热情，让学生带着例子去探讨课本上的理论知识，为学生学习理论知识打下坚实的基础。

3.2 探究讨论案例，解决问题

根据表单圆角的案例，让学生展开分析和讨论在案例中所用到的理论知识，分析表单的布局结构、分析实现的代码，学生试着写出CSS代码，并预览调整，测试优化页面。

3.3 总结和点评

教师通过学生完成的案例进行总结和点评，分析不同学生在案例中存在的优、缺点，有针对性的进行深入的分析，对出现的问题从不同角度和方法，与学生共同找出最佳解决方案。最后对此案例所涉及的理论知识和代码进行全面的总结：

3.3.1 网页设计的核心概念

（1）CSS+DIV布局：利用CSS样式控制DIV标签的位置来实现网页的布局。

（2）盒模型：盒模型是CSS的基础，它认为页面上的每个元素都被看作一个矩形，这个矩形由内容、填充（padding）、边框（border）和边距（margin）构成。

（3）位置控制（position）属性：位置控制属性可以确定元素在网页中的位置，分为静态定位（static）、相对定位（relative）和绝对定位（absolute）。

（4）浮动（float）属性：浮动属性是CSS布局中很重要的属性，用于控制元素左右移动，分为不浮动（none）、左浮动（left）和右浮动（right）。

（5）选择器：CSS的主要作用就是将一系列的样式规则应用于文档中，使得文档中应用了这个规则的内容实现某种样式。这一系列的样式规则就叫做选择器。文档用了不同的选择器，就呈现不同的样子。选择器主要分为标签选择器、类选择器和ID选择器。

（6）显示与可见性：显示（display）一般用在改变属性（如导航），增加交互（如标签），显示分为块元素（block）、行内元素（inline）和无（none）。可见性分为可见（visible）和隐藏（hidden）。

（7）常用CSS属性：常用的CSS属性包括字体（font）属性、背景（background）属性、边框（border）属性、边距（margin）属性、填充（padding）属性和列表（list）属性。

3.3.2 代码

网页表单设计的主代码及解释如下：

4 结语

CSS+DIV方法实现网页设计已成为当前网页设计的一种趋势，本文旨在通过案例教学法使学生更好的掌握CSS+DIV的基础知识，激发学生学习的兴趣，调动学习的主动性，制作出更漂亮的网页。

参考文献

[1] 谢学峰.基于DIV+CSS的网页设计技术[J].计算机光盘软件与应用，2011（11）：82，84.

网页设计制作教案篇9

关键词：网页布局；DIV+CSS；XHTML；教学实践

中图分类号：G718.5 文献标识码：A 文章编号：1009-3044（2013）30-6837-02

1 概述

网页布局在网页设计与制作中变得越来越重要了，访问者不愿再看到只注重内容的站点。虽然内容很重要，但只有当网页布局和网页内容成功结合时，这种网页才是受人喜欢的。

2 早期网页布局的方法

早期页面布局的方法主要用表格和框架。在HTML和浏览器还不完善的时候，要想页面内的元素能有一个比较好的格局是比较麻烦的事情，由于表格不仅可以控制单元格的宽度和高度，而且可以互相嵌套，所以为了让各个网页元素能够放在预设的位置，表格就成为网页制作者的得力工具。

表格在版面布局上比较容易掌控，通过表格的嵌套可以很轻易地实现各种版式布局，但是在制作一个比较复杂的页面时，HTML文档内将充满和标签。同时，由于浏览器需要把整个表格下载完后才会显示，因此如果一个表格过长的话，那么访问者要等很长时间才能看到页面内容。用表格布局存在着HTML文档的内部结构变得混乱，HTML文档字节数变得越来越大，在手持设备上不支持，页面修改工作量大等缺点，正是这些弊病，使得网页设计者开始关注Web标准。

3 CSS概述

CSS是web一系列标准中的一个，是web标准中表现标准语言。在web标准中，将网页主要划分成3部分：结构、表现和行为。其中结构对应的标准就是结构化标准语言，主要包括XHTML和XML；表现对应的是表现标准语言主要包括CSS；行为对应的是行为标准语言主要包括对象模型（如W3C DOM）、ECMAScript等。

CSS（Cascading Style Sheets，层叠样式表）目前推荐遵循的标准是W3C于1998年5月12日的CSS2。W3C创建CSS标准的目的是以CSS取代HTML表格布局、帧和其他表现语言。纯CSS布局于结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。

CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，又称为“级联样式表”，它是一种用来表现HTML或XML等文件样式的计算机语言。

CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，能够根据设计者意图，对网页字体、段落、列表、背景、边框等进行随心所欲的控制，是目前基于文本展示最优秀的表现设计语言。纯CSS布局与结构式XHTML相结合能够将网页的外观与结构分离，使站点的访问及维护更加容易。

4 DIV+CSS布局方案

根据新的Web标准，采用DIV+CSS的页面布局方案，首先要求把HTML结构化，对于网页的外观可暂不考虑。也就是把内容放在DIV中，结构由DIV产生，最后使用CSS来进行“外观”设计，即进行网页的布局。

在网页设计前对网页进行规划。例如，一个页面可能得到类似这样的几块：

标志和站点名称（网页头部）、主页面内容、站点导航（主菜单）、子菜单、搜索框、功能区、页脚（版权信息）等。

采用DIV+CSS进行网页布局相对与传统的TABLE网页布局相比还具有表现和内容相分离、更方便搜索引擎的搜索、提高页面浏览速度、易于维护和改版等优势，采用DIV+CSS对网站重构可以大大提升网站用户与搜索引擎的友好度。

5 DIV+CSS布局在教学中的实践

在网页设计教学中，通常是通过对网页设计软件（例如dreamweaver8.0）用法的讲解来介绍网页设计的一些概念和方法，在网页布局上更多的是使用表格或层来实现，当前高职网页设计教材对网页布局介绍通常都是以表格布局为例，对CSS介绍的比较少，用DIV+CSS布局的介绍就更少，用DIV+CSS布局的网页案例十分少见。但在技能型人才的培养上，我们我们必须让学生掌握当前主流的网页布局技术，现在个公司在网页设计人才的需求上，对掌握DIV+CSS网页布局技术也是一个基本要求了，因此在网页设计课程教学中加入DIV+CSS布局的内容就显得十分必要。基于上述原因，我在教学中注重以下几个问题。

1）收集有关教学资料，丰富教学资源。由于DIV+CSS布局的教材难以找到，因此我就在网上找一些有关DIV+CSS布局的技术文章和用DIV+CSS布局的网站案例，然后整理这些资料，形成DIV+CSS布局原理、知识和案例的教学资料。

2）认真贯彻WEB标准，由HTML升级到XHTML。现在绝大多数网页设计教材讲解的还是HTML标记语言，但在WEB结构标准语言中，主要使用XHTML，因此在HTML基础上要加入XHTML教学内容，既要讲解HTML用法和主要标签，也要讲解为什么要由HTML升级到XHTML以及他们之间的比较。

3）加强层叠样式表CSS的教学，为DIV+CSS网页布局打下基础。CSS是对HTML3.2以前的HTML版本语法的一次重大革新，它简化了HTML各种繁琐的标记，使得各个标记的属性根据有一般性和通用性，特别是采用应用外部CSS文件的时候，页面的HTML可以变得非常干净和整洁。在CSS教学中，除了要介绍CSS的常用属性以外，最重要的就是要让学生理解框模型（BOX Model）了，这是DIV+CSS网页布局的基础。

4）重视实训教学，提高学生动手能力。在讲解了必要的DIV+CSS网页布局知识之后，为学生提供一些DIV+CSS布局的网页案例的基础上，就要加强学生的实践训练了，我院通常是在网页设计课程教学结束之后，安排为期三周的实训教学，主要是培养学生网页布局的能力。

6 结束语

本文研究目标旨在改革现有网页设计课程教学的内容与模式，以培养高素质的网页设计人才为出发点，切实提高学生的动手实践能力，满足社会对网页设计人才的技术要求，进而保证该课程的教学质量和市场特色。为实现这个目标，我们对教材内容进行改进与扩充，使教学内容更加贴近实际需要，力求使学生更符合当今市场的需求，并为后续课程的学习打下基础。

参考文献：

[1] 李烨.别具光芒DIV+CSS网页布局与美化[M].人民邮电出版社，2010.

[2] 张晓景.DIV+CSS网页布局商业案例精粹[M].电子工业出版社，2009.

[3] 黄玉春 CSS+DIV网页布局技术教程[M]. 清华大学出版社，2012.

[4] 高川程.浅谈基于DIV+CSS的网页布局技术应用研究[J].计算机光盘软件与应用，2013（1）.

网页设计制作教案篇10

摘要：本文结合多年笔者“网页设计”课程的教学实践，并根据这门课程的特点，从教学目标、教学内容、教学方法以及考核方式几个方面综合阐述了如何提高本课程的教学效果，并探讨了在教学中如何培养学生的实践能力，提高学生的综合素质，使“网页设计”课程的教学真正地适应市场的需要。

关键词：高职院校；网页设计；教学改革

中图分类号：G642

文献标识码：B

随着Internet的飞速发展，网络已深入到社会的各个阶层，成为企事业单位正常运行以及人们生活学习不可缺少的部分，《网页设计》成了目前高职高专院校计算机专业的必修课，甚至成了许多高职高专院校非计算机专业学生的公共选修课。但就是这样一门看似简单好学的技能课程，却往往得不到很好的教学效果。常常是在学生学过之后，不是不能独立地进行网站规划和页面设计，就是设计达不到应有的功能效果和视觉效果。为此，本人在《网页设计》课程的教学过程中，对教学目标、教学内容、教学方法、考核方式等进行了长期的探索和实践，收到了非常好的效果。

1突出高职特色，明确教学目标

计算机的发展很快，有可能今年学的内容，学生毕业时就过时了，真正用的时候又学无所用，这种现象也不无其例。因此设置网页设计课程时，尽量选择时下先进的版本，并及时对教学计划做出调整，删掉旧课程，补充新内容，以市场为导向，培养有足够的理论基础、较强的创新能力和扎实的实践动手能力的网页制作人才。通过本课程的学习，要求学生能够掌握一个网站建设设计的全过程，能够利用Dreamweaver设计不同类型的网页界面，开发出具有一定规模的网站。根据教学目标，授课时以Dreamweaver为主线，讲授网页界面设计、HTML语言、JavaScript语言及动态网页设计的基础知识。对每一部分知识，重点教会学生如何应用，在理论内容的讲授中将理论知识融入案例中，让学生通过实践领会理论知识的运用。从实际需要和当前流行出发，需要哪些内容就重点讲解哪些内容，突出“学以致用”，而不是大而全地讲授所有相关理论知识。

2遵循高职教学规律，改进和加强教学工作

教学工作是指教学过程中的一系列工作。如何组织好网页设计课程的教学工作至关重要。

2.1选用合适的教材，适时调整教学内容

教材是教师实施教学计划的重要载体和主要依据，是学生获取知识、发展能力的重要渠道。高职教材要突出职业性、实践性、适应性、科学性和先进性。选用网页设计教材时，既要保证基本的知识要点，又要有典型的网页案例。随着计算机软件和硬件的不断更新，网页设计教学内容也应随着计算机科学技术的发展而有所调整，增加一些当前网页设计的流行元素，以适应社会发展的需要。当许多优秀网页设计软件陆续问世和应用时，在教学中就应及时安排这方面的内容，并根据具体情况安排课时量。

2.2采取多样化教学手段，及时改进教学方法

高职院校学生的学习带有较强的职业特色，针对学生在知识结构、学习习惯、认知心理等方面的特点，在教学方法上，应注重理论结合实际，避免空洞地讲解，要采用多样化教学手段，实行启发式教学、任务教学、案例教学以及精讲多练、边讲边练等多种教学方法，激发学生学习的兴趣。

(1) 采用任务驱动和案例教学，让学生变被动学习为主动学习。在开始上课时，给出本次课的任务或者案例，接着要求学生完成该任务或者案例作为驱动进行教学。例如，在讲到“超级链接”时，根据教学目的和教学内容选用典型案例，先对学生展示该案例使用超级链接的效果，然后再分步讲解“绝对链接、相对链接、锚链接”，每讲解完一部分知识点，马上让学生进行实践，利用超级链接把之前制作的单个网页链接起来；讲解完所有的知识点后，要求学生完成该案例；最后要求学生把完成的作业(案例)上传到服务器，避免学生因为不需要交作业而不积极学习，也让学生在以后的作业中还能使用以前做好的页面。这样可以激发学生的学习兴趣，提高学生的学习积极性。案例教学法中案例的分析与完成，有助于培养学生分析问题、解决问题的能力。实践证明，这样的教学方式，学生不仅能实现课堂案例，而且能灵活运用课堂知识，运用所学知识完成自己的设计。

同时借助网络技术实现教学互动，达到随机进入式教学的目的。在实际教学中，学生计算机知识掌握程度不同、水平参差不齐的状况，不可能所有的学生在课堂上都能及时掌握教师所讲的内容，需要在课后对课堂内容进一步复习巩固。为了学生能够更好地复习，教师可以将课件及相应的学习资料放到学校的网站上，对于重点和难点的知识，教师还可以录制教学过程视频，放在学校网站上，学生可以随时访问下载并进行学习。另外，教师还可以通过电子邮件或者QQ和学生交流，在课后也能随时解答学生的疑问。

(2) 以比赛促兴趣，发挥激励机制

每年计算机系都会举行一次“网页设计”大赛，学生可以独立参赛或者组成小组参赛，初评以后的作品，由设计者进行作品演示和陈述，然后由多名院内专家评委打分，并由其中一名专家进行点评，评选出优秀作品，同时对每个获奖者给予一定的奖励。通过这种活动提高学生的学习积极性、激发学生的竞争意识，同时还培养学生的创新精神和团结协作精神。

(3) 不断改进教学手段

网页设计教学不同于其它课程，授课要直观，利于学生学习和理解，因此，课时应该都安排在机房进行，教师每讲解完一个知识点，学生马上进行实践，达到事半功倍的效果。此外，在条件允许的情况下还可以将学生带出课堂，参与企业网站的设计，将现实职场变课堂，用事实说话，激发学生的认知能力，提高学生的认识。

3以提高就业能力为目标，优化实践教学环节

在课程设计中，实践教学占总学时的2/3。实践教学的贯彻落实，是关系到课程设置目标能否实现的重要一环。通过实践教学，培养学生的实践动手能力。

3.1精心设计实验指导和作业

实验指导是对课堂内容的补充。在实验指导中根据上课内容，完整描述例子完成的全过程，学生能够根据实验步骤顺利完成例子，在学生进一步掌握操作的同时，介绍更多的操作注意事项及操作技巧。把一个完整的网站设计分阶段安排为每次课的作业，并且每次课学生的作业都紧密围绕上课内容安排学生完成相应的设计，尽量让作业有连贯性，当学生完成这些分阶段的作业后，也就完成了整个网站的的设计过程。这样有利于学生体验完整网站建设设计的过程，完成作业时，学生之间可以相互讨论、学习。

3.2课程实训，学以致用

在教学设计中，在学期末安排两周时间进行课程实训。课程实训阶段是学生对本门课程知识的总结和巩固，并且把所学知识应用到实际工作中的阶段。课程实训时，要求学生按照某个企业的要求为该企业完成网站设计(网站通常还包括了留言簿或者论坛的动态网页设计)。学生分组进行实训，鼓励学生以团队协作的方式完成任务，锻炼学生的团队协作能力，为日后的工作打下基础。在设计过程中，为了便于同学之间相互讨论、学习，要求学生自由组合，几个人一组完成一份作业，同时要求书写网站设计报告。教师定时检查每小组的进度，给予适当的指导和建议。最后，课堂演示作品进行评分，要求每小组派一人演示和讲解完成的网站，其他同学进行评议和打分，学生总体评价和教师评价各占实训成绩的50%。这样有利于学生共同讨论、解决设计中的难题，也有利于互相学习，能很好地锻炼学生的合作精神。

此外，提倡和鼓励学生积极参与校园网的建设和维护工作。如有些学生参与系网站建设和精品课程网站建设，通过实践应用，不但将课程中所学的知识融会贯通，强化了对知识的理解和掌握，又培养了学生制作网页的系统性、精细性和艺术性；或者在校园网中开辟班级专栏和一些社团活动新闻专栏。我院长期和狮岭镇皮革加工市场校企合作(狮岭镇是全国最大的皮革加工市场)，部分皮革加工企业委托我院计算机系进行企业网站设计，教师鼓励学生也参与这些企业网站的设计。以此对学生进行市场磨练，从实践中巩固理论知识，使学生真正搞清市场的需求，掌握行业的背景、规则以及工作方式，同时还会使其更加明确专业的培养方向，进一步激发学生的学习热情。

3.3加强证书教育，考证促学

证书作为学生毕业的敲门砖，其地位越来越凸显。为了促进学生考取相应证书，可以将证书考试课程内容融入教学计划当中，组织学生参加劳动局国家职业资格考试，获取国家职业能力网页制作等级证书，促进学生的学习。此外，鼓励学生参加Macromedia网页设计师认证考试和Adobe网页设计师认证考试。这样，学生在学习的同时还可以获取证书，为其以后顺利就业打下了良好的基础。

4改进课程考核方式

在《网页设计》课程的考核模型中，主要采用作品评价方式进行。该课程的最终目的是要求学生应用所学知识，设计出个性化的特色网站，并上传到Internet供用户浏览访问。因此，最好的考核方式就是评价学生所做的作品。由于这类作品不能在短时间内完成，因此在教学后期阶段，就要求学生开始着手收集资料，设计自己特色的个人网站。教师给出作品的最低标准：每位学生自己设计一个个人网站，该网站必须是原创；网站除了首页以外，至少还必须有5个独立的内容不同的页面(该页面不能只是文字或者图片)；必须上交网站中使用的图片和动画的源文件(png文件、psd文件和fla文件)；网站应该有明确的主题和良好的导航，等等。作品评价时，网站总体设计占60%，色彩和动画占40%。该作品成绩占课程总成绩的70%，平时作业和上机实践成绩占总成绩的30%。这种考核方式注重实践操作和应用开发能力的培养，可大大发挥学生的学习积极性和主动性。

5课程改革的进一步探讨

本课程目前是侧重于静态网页设计部分的讲授，对动态网页设计及图像处理技术只作简单的介绍。《网页设计》作为一门综合性的课程还涉及许多相关课程，可以根据不同的培养目标开设不同的选修课程。例如：为了进一步提高学生的网页图像和动画设计能力，可以开设Photoshop、Flash等课程；为了进一步提高学生的网站建设及维护能力，可以开设动态网页设计课程等。

6结束语

总之，高职院校的计算机课程教学模式的改革已经成为必然，它对于高职院校的应用人才的培养具有举足轻重的作用，为此，笔者对《网页设计》课程的教学模式进行了适当的改革，积极探索，用于实践，努力构造该课程教学的崭新模式。在教学过程中，从学生感兴趣的角度出发，对课堂理论教学、实践教学和课程考核方式等方面进行探索和改革，能使学生从被动学习转变为主动学习，提高其实践操作技能，拓展其知识面。

参考文献：

[1] 娄枫. 浅谈高职院校计算机基础课程的教学改革[M]. 中国科技信息,2006(10):237-238.