亿博电竞网页制作与设计(精选5篇)

发布时间：2023-07-01 丨 浏览次数：

　　亿博电竞专题学习网站是指在互联网络的环境下,围绕某门课程或多门课程密切相关的某一项或多项学习知识点,有机地结合起来形成专题,让学习者进行广泛深入研究的资源型学习网站。它可以用来存储传递加工和处理教学信息,能让学生进行自主学习和协作学习,并对学生的学习情况提供在线反馈。根据这些理论,专题学习网站主要包括专题结构化知识库、专题资源库、专题协作学习工具和专题学习评价四大部分内容[1]。

　　《网页设计与制作》在本校是大专学生比较感兴趣的学科,并且本学科具备操作性强、个性突出、资源广泛等特点,有利于引导学生的学习主导性和协作性。

　　根据专题学习网站的总体要求和本学科的特点,本专题学习网站主要实现以下功能:

　　1) 资源管理功能。按专题学习网站的理论要求和教学需要,资源管理功能必须能对资源进行查询、修改、删除、分类、整合等资源处理功能,同时还要提供资源的搜索和资源下载功能。2) 交流讨论功能。向用户提供一个交流讨论的空间,可以对学习内容的交流讨论,也可以上传与学习相关知识或问题或作品进行交流讨论。3) 评价展示功能。包括作业批改、作品展示、自我测试、竞赛投票等在线) 用户管理功能。包括专题学习网站的资源管理用户、学习留言用户和专题论坛用户。根据不同的需要设置不同的权限,以使师生共同使用和合作管理。

　　功能的需求主要来源于角色,不同的角色有着不同的需求。本专题学习网站的角色主要有两类:学习者和管理者。各类用户有自己相应的权限,登录后只能访问自己权限内的功能模块。

　　1) 学习者的功能需求。学习者主要是利用专题网站进行学习活动,包括查看专题知识与相关资源、交流心得与讨论问题、提交作品与上传资源、测评反馈与投票评价。2) 管理者的功能需求。管理者主要是利用专题网站向学习者提供学习的资源与协作的场景,包括资源管理、讨论管理、评价管理和用户管理。

　　根据需求分析中的专题网站功能分析,可以把专题网站分为网页基础、动态技术、数据库、辅助工具、作品展示、专题论坛等模块,网站的框架结构设计如下 :

　　1) 专题结构化知识:网页基础、动态技术、数据库亿博电竞、辅助软件。2) 专题资源库:拓展资源、相关链接、强化训练、素材集锦。3) 专题协作学习工具:学习留言、专题论坛亿博电竞。4) 专题学习评价:作业批改、自我测验、作品展示、竞赛投票。

　　根据需求分析中的专题网站角色分析,可以把专题网站分为前台应用和后台管理两个模块,网站的程序流程图(如图1所示)如下。

　　专题学习网站作为管理信息系统又称MIS(Management Information System)的一种,根据功能需要,主要包括前端应用程序以及后台数据库的建立和维护的后台管理。要把前端应用程序与后端的数据库联系起来,即给用户提供数据库相应信息和将用户相应信息存入数据库等,本专题学习网站基于面向互联网和用户机要求不高的基础上,采用的体系结构为B/S。B/S是Brower/Server的缩写,客户机上只要安装一个浏览器(Browser),服务器安装数据库。浏览器通过Web Server 同数据库进行数据交互。那样通过用户的登录,以及相应的权限,就可以实现在远端对系统的浏览、查询和修改。基于B/S的体系结构得出专题网站运行模式包括有客户机、应用程序服务器、数据库服务器三部分[2],其各部分运行工作如下:

　　1) 客户机:属于表示层,用于界面的入导,接受用户输入,然后向应用服务器部分发送服务请求,最后显示处理结果。2) 应用程序服务器:属于业务逻辑层,执行业务逻辑,向数据库服务器发送请求。3) 数据库服务器:属于数据存储层,执行数据逻辑,运行SQL式存储过程。

　　专题知识资源的输出应用,即前台显示主要是依托动态技术和数据库技术的结合,根据用户需求提供一定的参数,动态地从数据库提取数据,并自动整合为网页形式输出。而作为专题学习网站的管理部分,即后台管理则是通过管理平台与数据库联合起来实现的。

　　为了达到为师生提供结构化的专题知识的需要,必定要将学习内容相关的文本、图形、动画、视频等资源按一定的教学策略进行分类、组织、入库,以此达到知识结构化重组,形成了以网页形式的专题网络教学课件[3]。并且提供上传、下载、维护、搜索等资源管理与应用功能,以此形成专题资源库。除了设计组在初期完成的教师教学资料和收集的资源外,网站的管理员或授权的教师甚至学生根据教学的需要和使用的反馈信息,能不断地对专题知识或专题资源库更新、调整。这是一个不断循环、动态调节的资源生产过程。根据数据库设置的角色,用户可以拥有相应的添加、修改、删除、重组资源等权限。并且还设置了审核权,这个权限要赋予教学的专业教师负责,以确保资源的正确与有学习意义的。

　　使用专题网站教学,既要学习专题知识,又要学习有关联且经过整合的拓展知识;既可以根据个人爱好或能力自主选取相应的其它知识学习,还可以进行相应专题的实践训练。基于这些目的,专题网站必须能够提供有针对性的自主探究学习,才能调动学生的主导性和能动性。由于本专题学习网站采取了网页设计的动态技术和数据库技术,所以除了对专题知识的查询、添加、修改等外,还可以对已有的资源进行重组整合。例如,在教学网页图片的应用时,给学生提供了Fireworks软件的拓展学习资源,那样除了可以根据教学进程Fireworks的教程外,在学习完Fireworks后,可以将的所有Fireworks教程,重组成一个资源。只需要将所有Fireworks教程根据教学顺序,将其超链接集合成一个新的资源到专题知识栏目,如此可以方便学生的学习。同样可以对各章节或各年级学习遇到的问题或教师一个阶段的教学心得等,进行结构化重组,有利于不同程度的或不同级别的学生学习和教师对教学的改进。

　　专题学习网站为师生提供协作学习的空间,既利于学生之间的交流,共同学习相应内容,也利于学生对相应学习内容反馈问题和教师根据反馈进行调整或解决问题。同时,对学生以外的网页爱好者开放,更利于学生与互联网上的网页爱好者交流,以使知识面更广和交流更深刻。在本专题学习网站,专题协作学习工具主要包括有学习留言和专题论坛。学习留言主要是专题知识后的留言板,在每一个资源后都给学生提供留下学习心得或需求信息的空间,以便于其他学生的便捷认识或教师掌握教学程度。教师对学习留言拥有整理和回复权,以确保信息的有意义和回复相关问题。专题论坛主要为学习者之间或教与学之间进行讨论、问答、交流而进行的协作、探讨学习的交流工具。根据《网页设计与制作》学科特点,将论坛分为新手上路、CSS美化、图片加工、动画制作、数据库、动态技术、素材源码等栏目,可以让师生分享教程和学习心得,探讨相关问题。除专任教师要管理论坛外,还可以在各栏目设置学生版主,这样既让问题得到及时解决,也让资源得到及时更新,还可以加强资源审核。

　　包括学生提交作品、教师评改作业、学生互评、学生自我测试、竞赛投票等功能,根据评价内容不同,有打分数等级的评价,也有详细评析的评价,也有公开投票的评价。主要是要实现到师生能进行评价、能看到评价、能交流评价、能反馈评价,只有这样才能达到评价的最终目的。首先,通过收集与学习专题相关的思考性问题和总结性考察的评测资料,学生完成相应专题或阶段或知识点后,可以进行自我测试,以检测个人掌握程度;其次,学生在此提交作业,教师对作业打分或评析;再次,学生通过网络提交作业或竞赛作品,教师对作业或竞赛作品进行展示,也给学生之间提供了比较和交流,从而进行他人评价和自我评价。

　　专题学习网站实际上就是一本拓展的课本和一个开放的课堂,有着多元的内容和多样的评价,既使师生学习的空间得到了拓展,也满足了学生因材施教的发展。但正因为如此,专题学习网站不能成为纯粹的资源收集网站,更应该达到鼓励和引导自主学习、协作学习、创新学习的目的。因为不管是教师在教的过程,还是学生在学的过程,都不仅是一种利用资源的过程,更是一种创新资源的过程。因此,专题学习网站的设计要遵循整合性、自主

　　性、交互性、开放性等原则。在设计中注重把主动权交给用户,不要把学习的模式或内容固定,让用户在教与的基础上,既能学习基础知识和拓展知识,又能讨论交流和相互评价,更能够在教学过程中创造资源。

　　[1] 谢幼如,余红,尹睿.基于专题网站的开发性学习模式的效果分析[J].中国电化教育,2004,1.

　　随着计算机和信息技术的飞速发展，网络教学也在快速发展和普及。教师与学生都迫切需要一种简便高效的教学方式，网络教学的出现正好满足了人们的这种需要。随着网页技术的发展成熟，人们对网页的要求也不再是文字、图片的简单堆砌和单调枯燥的内容，而是实时性、交互性和丰富性，使用动态技术的网页越来越受欢迎[1]。本文介绍采用ASP动态网页技术结合SQL Server 2005数据库构建一个“网页设计与制作”课程教学网站。学生通过访问该网站，可以浏览/下载课件、在线作业、在线交流与讨论等；教师可以上传课件、在线答疑等；管理员可以修改、删除、添加、查询用户信息、进行教程管理等。系统发挥了ASP技术显示于客户端和运行于服务器端，以及保护用户资料的安全性等特性。

　　利用互联网技术进行网络教学，可以跨越时空限制，最大范围地传播资源，具有投资少、覆盖面广、受益人多和互动性强等特点，使办学单位减少了人力和物力的消耗，并为广大学子提供了丰富的资源。可见，网络教学为教育事业开辟了广阔的前景。由于在网络中易于实现资源共享，学生可以将个人问题转化为公共问题，并借助集体智慧解决个人问题，学生在网络中容易找到志同道合的学友，各自就共同感兴趣的问题发表自己的看法，有益于培养学生的信息素养和解决问题的能力等[2]。教师可以在网络平台成为导师，接受或选择学生的辅导请求，起到指导和督导作用。通过对在校大学生和教师调查发现，计算机网络教学因其互动性强、教学效果好等优势成为人们的新需求。网络教学网站系统的开发，主要是为用户设计和开发一个便于学习与交流的网络教学平台，以提高教学效率。

　　本网站教学平台采用目前流行的B/S（Brower/Server）结构。整个网站可以运行于Windows 2003 Server/Windows XP平台上，系统前台使用流行的工具和脚本语言Dreamweaver HTML语言和ASP技术开发，后台采用当前最流行且性能较高，数据库维护与管理性能很强大的SQL Server 2005。B/S是随Internent技术的兴起，对C/S（Client/Server）结构的一种变化或者改进的结构，在这种结构下，用户界面完全通过览器实现，一部分事务逻辑在前端实现，但主要事务逻辑在服务器端实现[3]。系统充分发挥了ASP技术显示于客户端、运行于服务器端，以及保护用户资料的安全性等优点。

　　从教学用户的角度，网页设计与制作课程教学网站可划分为教师、学生和管理员三大功能模块。具体内容如表1所示。

　　[分类＼&模块＼&使用者＼&教师＼&查看短消息＼&教师＼&学习及作业公告＼&教师＼&上传课件＼&教师＼&网络答疑＼&教师＼&讨论交流＼&教师＼&学生

　　＼&查看短消息＼&学生＼&浏览课件＼&学生＼&查看作业公告＼&学生＼&网络提问＼&学生＼&讨论交流＼&学生＼&管理员＼&消息管理＼&管理员＼&教学管理＼&管理员＼&讨论管理＼&管理员＼&用户管理＼&管理员＼&]

　　在网站首页进行用户账号的登录时，系统接收到用户账号后，首先与数据库中存放的账号进行权限分析和匹配，若账号相匹配，则进入相应权限的用户模块；若账号不匹配，则提示用户操作错误，返回登录界面。系统的总流程如图1所示。

　　[用户登录][账号是否正确？] [验证权限] [具体模块][数据库] [N][Y][学生][教师][管理员][结束]

　　管理员用户具有对整个系统的管理权限，除接收短消息功能外主要实现管理学生和教师模块的内容，课件管理可在一个特定的时间内删除数据库里的课件记录和站点内相应的文件，这样可节省站点的空间；用户管理可针对目前系统的工作量适当地添加或删除系统管理员，也可更改用户账号；在讨论管理区内管理员可删除一些过期的或恶意的帖子，也可针对一些话题发帖；在教学管理区内可对学生、教师、学院、专业、班级等进行编辑、修改、添加和删除。详细流程如图2所示。

　　[管理员登录][接收短消息][课件管理][用户管理][讨论管理][教学管理][收信息][发信息] [学生管理][教师管理][学院管理][专业管理][班级管理][课件管理][开课管理][操作完成] [数据库]

　　数据库是网站信息管理的后台支持，存储着前台页面所需要的信息，在信息管理系统中有着很重要的地位。数据库设计的好与坏，直接影响到网站系统的运行效率。良好的数据库设计，可以提高数据信息的存储效率，保证数据信息的完整性和一直性。同时，一个合理的数据库结构有利于程序的实现。本网站系统使用数据库SQL Server 2005建立教学（teaching）数据库。后台数据库的连接采用字符串连接，其连接文件的代码如下：

　　课程教学网站主要是实现教师、学生在线学习与交流的良好平台，进入系统首页就能够方便的选择用于学习的资源信息等内容。资料列表模块，显示学生可以自主学习的所有教学资料信息；网上答疑模块，提供师生在线交流、学习和讨论的平台。主页运行效果如图3所示。

　　网站后台管理系统能够实现教师、学生、课件与教学资源及用户信息的管理等功能。系统管理员登录页面的运行效果图4所示。

　　为了提高网站开发和设计的效率，该教学网站使用目前流行的B/S模式[5]。整个网站可以运行于Windows 2003 Server/Windows XP平台上，系统前台采用先进的Dreamweaver、HTML语言工具和ASP技术开发。后台数据库采用当前最流行且性能较高，数据库维护与管理性能很强大的SQL Server 2005实现。通过对网站系统的基本信息模块，消息管理模块、课件管理模块、上传下载课件模块，作业公告、BBS模块与教学管理等功能模块（学生管理，教师管理，课程管理）进行系统测试，结果表明，所设计的功能都能实现，系统性能良好，能够满足用户的实际需求。

　　本教学网站平台的开发和应用，实现了教学资源的访问、课件上传下载、师生互动、学习交流和网上答疑讨论等功能；使优秀的教学资源和交流信息能在大范围、短时间内传播。给教师和学生提供了一个方便、高效的网上教学与学习平台，从而提高了学校教学效率与教学质量。

　　[2] 蒋理.动态网页设计实用教程[M].西安电子科技大学出版社，2007.

　　[4] 韩培友，董桂云，柳虹.数据库技术[M].西北工业大学出版社，2008.

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

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

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

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

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

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

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

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

　　平时表现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分）。

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

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

　　作者简介：侯敏（1979-），女，汉族，陕西西安人，讲师。研究方向：软件工程，数据库

　　互联移动终端的大面积推广，使得掌握网页制作技术的人才在各个行业里都成为必不可少的需求；同时，地方普通高校为社会服务的使命感在不断增强，如何培养出“学即能用”的人才，使之在短时间内掌握主流的网页设计技术，提高站点访问量，是这门课程课堂教学效果进步的体现。

　　Internet经历了从Web1.0到Web3.0的迅猛发展。Web1.0是静止、单向、被动的；Web2.0则为用户开设了主动权，使得用户和网站可进行双向信息互动；Web3.0提升了用户的主动权，用户可对页面的多种元素（显示、色彩、像素、框架等）按需设置，订制专属的功能模块，整合数据资源，适用于电脑、手机、PDA等多终端平台定制。

　　（二）传统的网页设计与制作课程内容一般情况下，高校开设的网页设计课程从教学内容上可划分为两大块：

　　2.应用软件的使用。介绍使用最多的Dreamweaver系列网页制作工具，使学生掌握布局（表格、层、框架、模板等）、超级链接、表单和几种特效。随着互联网的全面推广和“学即能用”的需求，以上内容已不能满足互联网时代与时俱进的特点。最关键的问题在于：课堂学到的知识是否马上就能得到应用，是否与目前社会上专业的网页制作公司的技术规格保持一致。因此，本门课程的改革势在必行。

　　内容改革是课程改革的首要环节。关于什么是关键内容，什么是次要内容，笔者走访了本地专业网页设计公司中企动力的设计总监马女士，通过对她的访谈，了解到时下主流的网页设计公司所涉及到的技术规范，对本校现阶段的教学内容做了必要的调整，简化了表格布局页面、框架设计等已被淘汰的陈旧技术的授课内容，有选择地介绍了网页交互特效及表单的应用，加强了网页美化工具、HTML语言及CSS的学习内容。改革后的课程主要分为六大模块：网页和网站的基础知识、网页美化工具（Photoshop或者Fireworks）、HTML语言、网页开发工具的介绍、DIV+CSS、动态网页技术。首先，通过具体的例子阐明网页、网站的定义，页面的布局类型（主要是盒模型）、整体造型及配色方案的相关知识；其次，介绍网页美化工具图片处理工具（Photoshop或Fireworks）的使用，学生可用其设计页面元素，加强页面的视觉效果与美观性亿博电竞，提升站点的专业度；再次，介绍HTML的基本语法结构和语句，使学生熟练掌握其主要标签的使用（传统的教学模式对这一部分的内容有所忽略）。

　　实践证明，学生若不熟悉HTML的语法构成，学习DIV+CSS这一主流的网页布局模式就会相当吃力。当然，对于非专业学生而言，学习一门语言，即便是文本标记语言，由于其本身对计算机系统相关知识的欠缺，授课会比较困难，学生也学得辛苦，但这又是一个必要的过程，其所占用的时间比较长，需要设计大量实例，反复练习才能掌握。之后介绍开发工具，重点是要理解页面的代码模式和设计模式，而DIV+CSS则是本门课程的重头戏，由于学生对代码有种天生的恐惧，所以，在建立CSS时又以开发工具建立为主，修改程序为辅。最后简单提及动态网页技术。由于课时限制（32节），本课程主要讲授静态网页制作。静态网页技术分为传统技术和新技术。传统课堂教学内容重点是布局表格、框架、模板等，而目前主流的网页制作公司则主要应用DIV+CSS。所以，对于陈旧的技术简单介绍即可，而把DIV+CSS作为布局的主要技术进行讲解。由于这些内容需要学生对代码部分比较熟悉，所以，在课时中增加了相应的HTML的基本语法结构和语句的介绍，并对主要标签的使用熟练掌握。

　　笔者今年为设计和思政两个专业的学生授课。设计专业的学生已经开设了PS，有一定的设计基础，所以，课程内容改革中的第一部分可以省略；思政专业的学生没有图片处理基础，笔者在授课过程中有意加强了这部分内容，讲授简单的图片处理方法和文字特效工具。实践证明，学生有追求新知识的欲望，基本能做到学以致用，并反馈到最终的作品中。往届学生的作品更像电子小报，而今年通过课程内容改革的学生作品虽不完美，但在形式内容上更接近Internet的正规网站，教学效果良好。针对我校提出建立培养服务于地方应用型人才的本科院校，传统的网页设计与制作课程必须响应时代号召，更新教学内容与方法。本文仅供从事该课程教学的教师参考。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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