《Web设计基础》面向的是大学一年级、二年级学生，在此前他们只接受了C语言程序设计的教学熏陶，学生掌握了编程语言的基础知识，但并未建立起软件工程的整体知识结构，也缺少对于Web开发方面的基本认识。本课程为计算机科学与工程学院各个专业学生的学科平台课，是Web开发方面的第一门入门课程，课程具有实践性强、易理解性高、知识面广等特点。课程通过讲述HTML、CSS和JavaScript，培养学生进行网页前端设计的基本能力，以及基本的网页美化的能力，为学生学习后续Web后端开发课程打下良好的基础。

　　近5年来，课程负责人顾问承担了2门软件工程专业核心课程——“Web设计基础”、“软件测试”的主讲任务，同时承担了“Web前端框架技术”、“HTML5编程”、“PHP应用开发”、“PHP框架应用”等课程的教学任务。本人近五年来主持市厅级教研课题1项，主要参与江苏省教育科学“十二五”规划专项课题2项，撰写教研论文3篇。本人获第二十一届全国教育教学信息化大奖赛三等奖1项，获得省级教学奖励4项，校教学成果奖一等奖1项。本人积极参与我校“软件工程”江苏省一流本科专业建设点建设，参加高校教师课程思政教学能力培训，在软件工程专业开展的“课程思政”教学设计竞赛中获特等奖。

　　团队成员积极开展课程思政工作，先后主持了校级课程思政示范专业项目1项（徐建华），校级课程思政示范课程项目2项（吴德、徐建华），校级课程思政类教改教学建设与改革项目2项（吴德、徐建华）。团队成员积极参加软件工程专业举办的课程思政竞赛，获特等奖1项、一等奖2项、共同完成了引入思政元素后的教学大纲修订和教学设计重构。

　　《Web设计基础》课程以Web应用系统开发流程为主线，系统介绍了HTML语言的常用标记的作用与应用方法，CSS语言的规则、选择符、常用属性作用与应用方法， JavaScript程序设计与开发等内容。课程主要面对大学一年级新生，在课程教学过程中需要进行注重知识传授与思政元素相互融合，加强对学生职业素养的认知教育，引导学生树立正确的价值观与人生观。

　　了解世界信息技术产业的发展水平和计算机类专业的前沿技术；深刻认识中国与西方国家之间存在的优势与差距；理解信息化在未来国家发展战略中的重要地位；培养学生的民族自豪感和文化自信心。通过课程教学，培养学生良好的编程习惯，培养学生调试问题解决问题的能力，培养学生的综合职业能力和创新精神，通过课程实践，培养学生团队合作的精神。

　　使学生掌握Web页面代码的构成，掌握Web标准的构成，掌握HTML语言中常用标记的作用与使用，掌握CSS语言语法及应用方法，掌握JavaScript语言的相关语法要求，掌握利用JavaScript语言进行程序编程的方法。

　　通过HTML、CSS和JavaScript的学习，使学生掌握网页分析与设计的能力，掌握网页布局的基本技巧，能够熟练掌握开发工具的使用方法和技巧，具有一定程度地使用调试器查找问题并解决问题的能力，具有网站原型设计的能力。

　　《Web设计基础》课程的教学内容分为四个知识单元：HTML5标记语言及其应用、CSS3基础与应用、JavaScript程序设计与开发、综合案例分析与设计。

　　（1）“HTML5标记语言及其应用”是教学内容的第一个知识单元，近年来HTML5以自身为条件开发出了许多的功能，从桌面浏览器到移动应用，HTML5从根本上改变了开发商开发Web应用的方式。作为Web的设计人员，也应该顺应时代潮流，掌握HTML5相关技术。本单元主要讲解案例Web开发中HTML5标记语言的基本原理和基础概念，内容知识点分布具有“多、散、小”的特点，不易掌握应用，因此，需要通过应用案例帮助学生梳理知识脉络，为后续知识单元综合案例分析与设计形成正确的意识形态。应用案例多以“青年大学习”相关的内容作为素材，进行“初心不改，使命不忘，与历史同步，与时代同行”的思想熏陶。

　　（2）“CSS3基础与应用”是教学内容的第二个知识单元，是本课程的重点内容，CSS3主要实现对Web页面的布局、修饰及美化。CSS样式属性较多，也比较抽象，学生不易理解，此外，CSS样式需要灵活运用，针对需求分析，编写合理的规则代码，这也是学生普遍反应比较难掌握的知识内容。因此，应用案例多以“青春南京线上研学平台”相关页面的实现为例，生动的形象为同学们介绍小红梅·青年学习社等文化打卡地标来开展课程思政。在讲授过程中，学生自然得出结论，水到渠成地受到教育。在实践环节中培养学生的精益求精的工匠精神。

　　欧博体育首页平台

　　欧博体育首页平台

　　（3）“JavaScript程序设计与开发”是教学内容的第三个知识单元，也是本课程的重点难点内容之一。本单元要求学生掌握JavaScript语言的作用，掌握JavaScript语言的相关语法，利用JavaScript语言进行程序编程的方法。讲解的内容多以“中青在线”站点中JavaScript动态效果为案例，编写JavaScript脚本代码能体现学生解决实际问题的编程能力，同时，培养学生刻苦的钻研精神，创新开拓精神、团队精神、严谨的科研态度。

　　（4）“综合案例分析与设计”是教学内容的第四个知识单元。本单元要求学生进行分组，通过团队协作完成一个完整的静态网站案例，通过实践让学生明确作为一名Web前端开发工程师应具有的能力要求。学生往往由于缺少全局观，缺乏对团队的认知，很容易出现资源覆盖或是跳转出错等常见错误，导致整个团队的作品出现问题。因此，需要培养学生的全局意识，理解团队合作的重要意义。同时，培养学生养成勤于实践、勤于沟通的良好习惯，树立主动学习、终身学习的意识。通过团队合作的项目教学，可以巧妙地将思政教育融入到课程的教学过程中去。

　　课程团队在教学方法、学习评价等方面进行了探索，建立了基于SPOC的混合式教学模式，其实施过程模型如图2所示。将传统课堂教学和在线学习的优势结合起来，充分发挥教师启发思维、监控教学的作用，同时整个学习过程以学生为主体，学生可以充分发挥学习主动与积极性。

　　《Web设计基础》课程混合式教学模式的实施模型是一种三段式教学实施方案，由课前预学、课中讲练结合和课后拓展三阶段组成，每个阶段都包含了线上和线上的教学内容。课前预学阶段学生可以通过在线的引导问题熟悉学习内容，通过在线学习教学课件和教学视频预先完成知识的认知；同时欧博体育官方网站，学生也可通过课程教材和参考教材了解到知识点对应的案例代码。课堂阶段主要采用讲练结合的方式，首先对知识点关联的案例进行讲解，然后进行实验指导；课堂一般都在实验室进行，具备接入互联网的条件，可直接安排学生在线完成测验题或是练习题，特别是一些测试题是选择题和填空题的情况下，学生可直接通过手机登录平成测试一定程度上解决了课后在线测试效率低下的问题。课程进入综合训练阶段时，课堂主要进行训练指导。课后拓展阶段，学生在线学习拓展资源，遇到问题时可进入系统讨论区进行在线交流讨论；学生可以在课后进行拓展实验练习或是综合项目的训练。

　　课程评价体系的构成比例具有多样性的特点。线%，线%。评分规则可以继续细化，最终可以准确地给出每个学生学习状况，有利于实现学生个性化学习的教学效果。课程成绩构成比例，如表1所示。上机考试素材来源于“青春南京线上研学平台”、“中青在线”，在试卷中加入思政元素。

　　为了达到激励学生学习兴趣的目的，课程团队每年组织针对性的综合训练作品竞赛，将完成的优秀作品进行竞赛评比以竞赛促进教学，通过学科竞赛进一步激励学生的学习兴趣和自主化学习能力的发展。目前课程团队已举办了七届计算机学院网页设计大赛，通过学科竞赛激励学生的学习兴趣，帮助学生树立主动学习、终身学习的意识。

　　一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序，条理清晰，并且网页与网页之间跳转有一定的关联，就需要使用列表和超链接。本章将对列表、CSS控制列表样式、超链接标记和链接伪类控制超链接进行具体讲解。

　　掌握无序、有序及定义列表的使用，可以制作常见的网页模块。掌握超链接标记的使用，能够使用超链接定义网页元素。掌握CSS伪类，会使用CSS伪类实现超链接特效。

　　教学难点：创建超链接、链接伪类控制超链接。措施：通过老师课堂演示和课下练习进行巩固。

　　（1）高举党的思想旗帜 汲取百年经验启示 自觉担当起党的助手和后备军的光荣责任。

　　南京中国近代史遗址博物馆，“一条长江路、半部金陵史，一千八百米、一千八百年”。我们脚下的这条长江路，游人如织，热闹非凡。其实它汇聚了公元222年至1949年间极为重要的中国历史遗存、人物和故事。一切向前走，都不能忘记走过的路；走得再远、走到再光辉的未来，也不能忘记走过的过去，不能忘记为什么出发。

　　梅园新村纪念馆·实景课堂——国共南京谈判史料陈列馆。通过1946.5-1947.3这十个月的历史片段，我们可以清晰地考察中国和蒋介石当局的不同，并思考“中国向何处去”这个问题。在这里代表团经历了跌宕起伏、风云变幻的十个月，十个月的谈判斗争。践行了中国为真民主、真和平而奋斗到底的初心。

　　小红梅·青年学习社已成为南京的一个青年文化地标，为青年设计了“六个一”：参观一场微展览、观看一部微电影、聆听一堂微团课、留下一张青春印记、分享一份初心感悟、重温一场仪式教育。通过“六个一”的学习，引导青年思考，在如今急速发展的大时代里，我们需要选择和践行怎样的初心。