课程网站设计范例

一、课程情况

《网站设计与制作》也是计算机各专业学生学习后续课程的基础，比如学习基于网络编程的动态网页设计技术，学生毕业后可从事网络软件的设计与开发，进行商务网站的设计与制作，同时也可以考取网页设计师、网络软件工程师等相关国家职业资格证书。开设该课程是复合我校关于“高素质、技能型人才”培养目标的需求的，通过该课程的教学，可以培养出一批优秀的、能够在一线工作岗位上从事网页设计与制作、网站规划、管理与维护工作的专业人才。基于该课程的主要工作岗位有：网站管理与维护人员、网页设计与编辑人员、网站策划人员及网页美工人员等。

二、课程教学思路与教学方法改进

学生如果要很好得完成网站制作，所需的的知识体系非常庞杂，其中包括网络基础知识，网页制作技术，平面设计和动画制作等基本要素。具体涉及到网页制作软件，图像处理软件，动画软件，数据库知识，脚本语言动态服务器编程技术等。教学内容比较多，知识点比较分散，而学时仅为48个学时，学习内容多而课时少。经过多年的教学活动的开展和经验总结后，我们总结出一套适合高职学生教学方法，那就是使用任务驱动式的教学方法。我们以前的教学设计思路是：讲授知识点———设计任务———监督学生完成———验收，现在的教学设计思路是这样的：实际工作任务导向———任务驱动———相关知识讲授。老师在此教学思路中的角色：给学生布置一项工作（实际工作任务导向）———将工作转变为一个任务（任务驱动）———通过任务引出知识点（知识学习）。学生在此教学思路中的角色：通过老师的引导，理解相关任务要求，继而产生强烈的学习相关知识的兴趣，在下一步的知识学习中就能很好地学习，掌握了相关知识后，马上运用于实践，完成老师布置的任务。通过该课程的教学，使学生最终能够自主开发一个完整的网站，毕业后能够直接从事企事业单位网站的开发设计与管理维护等工作。

三、课程体系内容重构

本课程性质是计算机系的基础必修课，教学对象是全系各专业的大一学生，因此教学内容定位于静态网页的制作，以Dreamweaver软件为主线，介绍静态网页设计和制作的基本技术,目前很多网页教材是基于网页三剑客的即Dreamweaver、photoshop和flash，然而当前课时条件和时间条件下，根本做不到三个软件都讲到位，事实上每个软件分开都可成为一门课程，而网页设计课程只能以网页制作软件Dreamweaver为主，其他软件为辅，并且其他软件制作的作品要与网页密切相关为了解决内容多学时少的矛盾，有利于教学的开展和培养学生的动手能力，为此我们对教学内容重新进行了重构，围绕Dreamweaver软件讲解网页制作的方法和技巧，只有在制作图像缩略图、切片、按钮、LOGO图片等时候，才辅助其他软件加工素材或者制作动画。教学内容分为9个模块:模块一、网页设计基础；模块二、页面的基本操作；模块三、简单网页的制作；模块四、网页的样式设计；模块五、实用HTML布局页面；模块六、实用DIV+CSS布局页面；模块七、制作多媒体页面；模块八、网页交互设计；模块九、网站的测试与管理。

四、总结

[内容摘要]

艺术设计专业的网站设计课程应该包含界面设计与网站建设技术两方面的内容，学生应该通过该课程学会如何设计、制作网站，理解网站建设中艺术与技术的关系。本文结合当前艺术院校网站设计课程的现状对艺术院校网站设计课程的教学内容提出一些建议。

[关键词]

艺术设计；网站设计；教学内容

一、国内艺术院校网站设计课程现状

国内部分艺术院校开设网站设计课程已经有15年以上的历史。随着网络技术的发展与普及化，现代生活中已经很难离开这种媒体形式。网站作为互联网的“窗口”，向人们展示了精彩的世界，拉近了人与人之间的距离，也让人们在办公、娱乐、学习等领域越来越多元化。近几年电子商务带来的巨大利益，让更多的企业和个人把大笔资金投入网络市场，大量的网站相关的设计人员缺口和相对较高的待遇，导致很多在传统设计领域工作的设计师纷纷转入这个行业，很多学生也逐渐对这个领域感兴趣。网站设计课程也因为互联网经济发展导致市场需求大增。网站建设技术包括互联网基础知识、前台程序、后台程序、显示设备的一些基础知识等。网站建设技术是网站界面设计过程中非常重要的依据，单纯运用艺术设计原理进行网站设计有可能会给后期技术开发造成麻烦。例如，很容易在程序开发过程中实现不了，或者实现起来增加开发成本等。网站的界面建立在屏幕显示的基础上，因此，设计师必须了解像素等相关基础知识才能在设计开始阶段合理创建文档，从而进一步深入设计。网站是展示与交互的结合，网站建设不是单纯地把界面设计美观就可以了，了解相应的开发知识、交互技术特点，才能够有效地设计出美观、实用的界面。当前，很多院校对网站设计课程从教学方法、教学内容等方面进行了探索和改革。个别院校从师资配备上具有专业的技术教师，例如国内某美术学院在网站设计课程教学中分为网站设计和网站技术两方面教学内容，前四周为设计专业教师授课，然后是三周计算机专业教师授课。这种教育方式相比早期的网站设计教育有着本质的不同，让学生对网站相关知识了解深刻并且更具有专业性。还有些院校能够和企业合作，由企业派出技术人员参与教学任务的完成。由此可见，很多院校对网站设计的技术教学给予了足够的重视。

二、当今艺术院校网站设计课程教学内容

一、明确课程定位

在以往的专科教学中，我校的《网站设计》课程都是由信息学院的老师讲授，而这恰恰不能凸显设计专业的特色，《网页设计》看似一门简单好学的课程，却往往得不到很好的教学效果，常常是学生学过之后，不能独立的进行网站规划和页面设计，对晦涩难懂的网页代码无可奈何。这样的问题产生，其实是是课程定位不明确而导致的。通过对我院艺术设计专业课程体系的认真分析，因此将本课程定位在以培养专业的网站前台设计师为目标，能够完成网站前台美工设计、flash动画辅助、客户端静态网页实现等工作。所运用的软件包括photoshop、firework、dreamweaver、flash等。

二、确定培养目标

学生通过学习，了解网站和网页的基本设计思想，运用所学的色彩及构图的基础知识设计出色彩搭配合理、网页风格突出、富有艺术审美、网站结构清晰、使用者操作方便的网站；学生能够熟练运用网站设计软件，合理利用版面构成的形式要素、关系要素、网页设计构图与视觉传达的关系，熟悉点、线、面、色彩、肌理等设计元素的基本设计方法，并在实践中能灵活运用，能独立完成网站的前台设计及静态网站的生成；对于不同内容和性质的网站能够设计出符合市场和潮流的网站，通过对本课程中每个具体项目的完成，学生能够规划、设计、制作网页，具体实现的能力目标如下：

（一）专业能力

1.能够使用photoshop进行界面效果图的设计，完成高质量的设计作品；2.能够使用flash制作与网站相关的动画，包括网站banner、广告等；3.能够使用firework对设计好的网站作品进行切片处理；4.能够使用dreamweaver生成静态页面。5.能够看懂简单代码，并利用其修改页面。

（二）综合能力

【摘要】本文根据网站设计类课程存在的问题，提出了教学改革的思路和具体改革的内容。引入CDIO教学理念，采用理论教学和实验教学完善课程理论知识，采用项目教学培养学生动手能力，并建立了学生参与考核和改革的方式。

【关键字】CDIO；网站设计；范式改革

网站设计类课程是计算机类学生的一门重要的专业课。课程最终目标是培养学生的综合分析能力思维和应用开发能力，具有极强的应用性、实践性，从而为学生今后在经济和社会的开发工作打下坚实的基础。自课程开课以来，网站设计类课程知识点难度较高，内容比较抽象，在教学过程中存在教学内容比较分散、教学主线不够清楚、教学方法不够多样化、考核方式单一等问题。因此，为了改善教学效果，培养学生的自主学习能力和实际编程的能力，本文将引入CDIO教学理念对该类课程进行教学范式改革。

0网站设计类课程教学改革思路

CDIO是构思（Conceive）、设计（Design）、实现（Implement）、运作（Operate）的集合体，让学生以主动的、实践的、课程之间有机联系的，即“做中学”的方式来学习，注重培养学生的实际操作能力，为专业服务的原则。[1][2]课程主要思路是以CDIO教学理念为基础，在“教”、“学”、“做”一体化教学模式下，实施理论教学、实验教学和项目教学三个阶段。理论教学是教师讲授与学生实作共同完成。传统教学方法忽略了学生的重要性，理论知识讲授和实践联系不够紧密。因此理论教学过程中增加了学生实做，达到培养学生动手能力的目的。甚至改变传统按章节顺序讲解的讲授方式，通过案例匹配知识点的方式，极大程度地提高学生兴趣。在课堂中，教师以案例进行演示，通过学生的实际练习，巩固知识。实验教学更应注重学生实践能力培养。针对不同能力的学生，将每次实验设置为验证性实验、设计型实验及综合性实验三类。验证性实验是基础，要求每个学生必须完成。设计性实验具有一定难度，可针对具有一定程序设计能力学生。综合性实验主要是对教学内容的综合应用，问题规模较大，采用小组形式完成。这样不仅提高了学生动手的积极性，而且培养了学生团队配合的能力。重点以学生练习为主，教师可以根据学生实际情况进行答疑。项目教学是在教学中加入适合的教学项目，目的在学生综合能力的训练。学生可自由分组，采用团队合作形式完成网站开发。开发过程中学生可以根据所选网站进行分工，增加了学生的团队意识和沟通能力培养，加强其学习积极性。网站设计类课程教学设计如图1所示。综上所述，课程采用“1+1”的方式，即讲授+实作，讲练结合。各模块的知识学习后，教师通过项目教学法，要求以小组方式设计实现网站，并进行项目成果分享。这样，可以使知识得以整合，同时学生可以检验自身在这一阶段的学习成果，及时查找出问题，教师也可以通过学生的项目情况得到及时的反馈信息，进行知识的查漏补缺。

1网站设计类课程教学改革具体内容

1.1教学内容改革

1PBL在国内外的发展

PBL是1969年由美国的神经病学教授霍华德•巴罗斯在加拿大的麦克马斯特大学首创，强调学习要围绕着具体而复杂的任务和问题展开，鼓励学生自主学习、反思式学习，培养学生的高级思维能力。PBL最初主要应用于医学、护理学以及健康科学等领域，如今PBL已经广泛应用于多种学科领域。国外的PBL教学实施，无论是理论研究还是实践研究，都取得了丰硕的成果。国内对于PBL的关注，开始于20世纪80年代后期，目前还主要集中在对基础理论的研究和教学模式的改革方面。

2PBL教学模式的核心体系

虽然业界对PBL的内涵有着不同的解释，但超越具体的学科及实践领域，即可提炼出PBL教学模式的核心体系主要包括以下四个方面：(1)PBL的学习内容，是学生在其未来的专业领域中可能会遭遇到的具体而复杂的现实问题。因此，这些问题通常不再是单一学科中的问题，而可能是跨越不同的学科的非结构化问题。这些问题已经不能简单地套用原来问题的解决方法，而是需要在原有经验的基础上进行分析并加以解决。(2)PBL的学习形式，是以分组方式进行工作。教师根据实际情况，将学生进行合理分组，让组内的每个成员都有自己的具体任务，以培养学生的独立思考、深入学习、自主创新的能力。组内成员之间，通过交流分享学到的知识技能，通过协作共同参与问题的解决过程，以培养学生的组织管理、交流合作的能力。任务完成后，组内成员还要进行成果测评、自我评价、组内互评、组间评价等，以培养学生的反思能力、评测能力。(3)PBL的学习主体，是学生。PBL强调以学生为主体、以教师为引导。设计好的真实而复杂的问题情境，可以调动学生的积极性，令学生变身为独立的学习者、思考者、创新者、协作者，积极主动地投入到问题的解决过程中去。此时，教师则变身为策划、督导、技术支持、客户、评委等角色，对整个过程进行组织、引导、激励、支撑、监控、记录、评价、总结，协助学生完成问题的解决。(4)PBL的学习方法，是以问题为导向，以项目为基础。要求学生能够熟练掌握相关学科的知识技能，并且能够将这些知识技能自如地运用到真实的问题情境中去。让学生在解决实际问题的过程中，学会学习，学会协作，学会反思，构建自己的能力体系。综上所述，PBL教学模式的核心体系是“以问题为导向，以项目为基础，以学生为主体，以教师为主导”。

3PBL教学模式对教师的要求

PBL是一种新型的、开放式的教学模式。在它的整个实施过程中，对于教师的专业素质、学习能力、组织能力、沟通技巧、教学控制等方面都有很高的要求。PBL教学模式的展开，需要教师从行业调研开始，结合行业特征及大纲要求，查阅大量文献，学习各类相关知识技能。因此，在PBL教学模式中，教师花费在前期准备工作中的时间精力，会大大多于普通的课堂的前期准备工作，这就要求教师积极转变教学观念，适应新的教学模式。采用PBL教学模式后，某门课程就变成由(仿真)企业项目组成，而不再是简单教学案例的罗列了。这就要求上课教师，不仅要对本课程的所有知识技能扎实掌握，而且要了解行业内的项目组成与运作，还要熟悉其他相关学科的知识技能。要求教师，不仅要具备灵活运用知识的能力、提出问题解决问题的能力、谨慎严密的逻辑思维能力，而且要有善于调动学生积极性的能力、良好的组织管理能力、优秀的课堂节奏控制能力。在具体项目的设计过程中，教师应该熟悉课程的教学大纲和学生的能力情况，既要从宏观上掌握项目的选择、设计，又要对项目的每一个细节进行微观设计，包括这个项目可以分解为多少个子任务、每个子任务又分别涵盖了哪些知识点，能够培养学生哪些能力等。在具体项目的实施过程中，教师要积极配合学生，担当起技术支持、督导、评委等角色，帮助学生顺利完成项目。

4PBL教学模式的具体实施

【摘要】本文针对高职学生动手能力较强，学习理论知识缺乏信心的特点，在网站设计开发课程的教学中采用翻转课堂，创造主动学习的学习环境和氛围，让学生更多地参与课堂的活动从而增强学生学习的主动性、自信心，学生学习本课程的兴趣不断提高，收到很好的学习效果。

【关键词】网站设计开发；翻转课堂；教学

1翻转课堂概述

翻转课堂产生于美国，随着信息技术的发展，传入我国，目前在我国教育领域得到广泛应用。翻转课堂是相对于传统课堂而言的。传统课堂通常是课前预习，课堂讲授与互动，课后复习，将所学内容内化吸收；翻转课堂则是课前通过视频等学习资料自主学习、发现问题，课堂上主要是师生互动，小组协作，答疑解惑，完成学习任务，将所学内容迁移升华的过程。在计算机技术、网络技术、多媒体技术、通信技术等多种技术大发展的背景下，更多学习者习惯于混合式学习模式，即将网络学习与课堂学习相结合。翻转课堂以其学习时间灵活、更能满足个性化的学习需求、更能培养学习者的探索精神和创新能力等优势越来越受到广大教育者和学习者的喜爱。

2网站设计开发课程的特点，非常适合翻转课堂

网站设计开发课程为高职计算机网络技术专业的核心课程，也是一门实践性非常强的课程。本课程旨在培养学生从事网站设计公司的网站设计、开发、管理与维护过程中所需的开发环境搭建能力、编程工具使用能力、语法掌握能力和基础编程能力，是学生顶岗实习前必修的核心课程。学习本课程之前的先修课程有程序设计基础、静态网页设计与制作，数据库应用技术、JavaScript程序设计、图形图像处理及二维动画效果制作等。在对本课程进行教学设计时，我们采用任务驱动的项目式教学法，即通过一个真实项目（留言板系统的设计与开发）的需求分析、总体设计、数据库设计、基本框架、各功能模块的设计与实现、系统的测试、及维护全过程的学习提高学生综合运用所学知识技能解决实际问题的能力。结合本院学生的实际学习情况，大部分学生理论知识掌握欠缺，动手操作能力较强，学习的主动性不强，遇到困难容易放弃，学习的兴趣需要通过精心设计学习内容及学习环节来激发。最终决定采用翻转课堂实施教学。

3基于翻转课堂的网站设计开发课程具体的设计与实现

摘要：文章针对高职网站设计课程中存在的问题，结合新工科建设人才培养的新目标和新要求，以长春工程学院高职网站设计课程教学改革为例，引入成果导向（OBE）教育理念，从明确课程定位出发构建新工科背景下网站设计课程技能目标，对课程教学内容、课程教学方法、考核方法等要素进行改革创新，强调课程以“学习产出”为目标，以培养学生的工程能力和创新性思维能力为出发点进行课程教学。实践证明该教改能有效提升学生的工程能力、专业实战能力和创新性思维能力，较好地满足行业产业对人才的实际需求。

关键词：新工科；OBE；教学模式；考核模式

为深化工程教育改革，推进新工科的建设与发展，2017年2月，教育部了《关于开展新工科研究与实践的通知》，要求高校根据国家发展战略的人才需要，对工程教育的新理念、新模式、新结构、新质量与新体系等进行研究，深化工程教育改革，由此开启了“新工科”研究与建设之路。“新工科”人才不仅能运用所掌握的知识分析、解决现有的问题，也有能力运用新知识、新技术解决未来发展出现的问题，对未来技术和产业起到引领作用。“新工科”人才是适应能力强、实践能力强和创新能力强的高素质复合型人才。

一、课程现状分析

随着信息技术和网络技术的迅猛发展，信息进入了互联网+的时代。互联网成为了信息展示的主要渠道，网站设计也迎来了快速发展的契机。当前我国大部分高职院校在关于网站设计人才培养方面表现出来的现状是目标定位不明确、内容老旧以及实践环节各知识点孤立、片面，导致培养出来的毕业学生工程实践能力差、综合素质低，不能满足行业企业的实际需求。因此，如何重新制定课程培养目标、更新课程内容体系、创新教学模式和考核模式以及培养具有创新创业精神和能力的复合型新工科网页设计人才，是当前亟须研究和解决的问题。

二、基于OBE理念构建新工科人才培养目标

OBE教学理念起源于美国，20世纪80年代，美国学者SpandW.D提出这一教育理念。OBE教学理念是一种依据学生预期达成的最终学习成果反向设计课程体系的教育模式，是以成果为导向的教育方法。以“新工科”建设为指导思想、以OBE教育理念为导向，结合网站开发的发展趋势，走访相关企业，充分调研相关企业对网站人才知识、素质和能力的需求，同时结合长春工程学院高职人才培养目标，确定本课程的应用与开发能力目标。通过该课程的学习应使学生了解网页设计的正规流程，掌握网站策划、站点管理、表格布局、DIV+CSS布局美化、模板与框架的使用、特效代码（javascript）运用、简单二维动画制作和图片制作修改等基础知识，使学生具备网页项目综合设计能力与优化能力、良好的团队合作能力、沟通能力及创新能力等。网站开发各阶段对应主要内容及能力点如表1所示。

摘要：对分教学法是复旦大学张学新教授提出的一种新型教学法，本文分析在课堂上利用对分教学法，让教师和学生在教与学上具有不同程度的减负作用。同时本文通过对教学内容的设计、网站内容的改革、教学方法的选择和教学评价的实施等，阐述如何更好地掌握网站设计的技能。

关键词：对分教学法；教学方法；对分课堂；教学评价；对分易教学平台

网页设计既是内容的表现，又是艺术的展示。优秀的网页是内容丰富、色彩合理、布局美观。利用对分教学法提高学习效率，改变学生的学习观念，减轻教师的负担，本人做了以下的实践探索。

一在教学设计上结合学生感兴趣的生活实例

（一）导入网页增强信心，激发学生的学习兴趣

学生是学习的主体。教学中教师应引导学生感兴趣地学习，发挥学生学习的主动性与积极性，引导学生积极思考与探索问题、自主发现原理、掌握新知。首先，本人让学生自行欣赏一些网页，让学生设想：假如我做的话，我会如何做？然后，展示历届学生的优秀作品，旨在激发学生学习这门课的兴趣，增强学习信心。最后，从网站的整体构思、创意、色彩、整体效果等审美角度分析，拓宽学生视野，掌握复杂的网页设计代码，制作满意的网页效果[1]。

（二）网站素材来自学生的兴趣点，培养学生认真学习的态度