中国社会科学院大学：通识选修《网页制作》课程教学大纲

中国社会科学院大学网页制作课程大纲课程基本信息（CourseInformation）课程编号*学时*学分4811630200182(Course ID)(Credits)(Credit Hours)网页制作*课程名称(CourseName)Web Design先修课程无(Prerequisite Courses)本门课程为面向全校本科生开设的公共选修课，网页课程的主要目标是通过主流网页基础技术和相关软件的介绍，掌握基本的网站网页制作技术。通过学习此课程，学生可以较全面地掌握网页制作的基本技术和常用软件，热悉网站建设和网页编辑技术。课程的主要内容包括网页制作基础知识、HTML超文本标记语言、CSS层叠样式表、JavaScript与jQuery、网页美工、Dreamweaver网页编辑、Web服务器、内容管理系统CMS、移动平台网页制作和网页设计前沿技术。课程的重点和难点为网页制作中的基础编码技术。主要教学方法为课堂讲授和实验实践。课程以线下讲授为主，统计考勤，要求学生按照课程进度完成作业。*课程简介在课程教学中学习贯彻习近平中国特色社会主义思想，把马克思主义立场观点方法的教育与科学精(Description)神的培养结合起来，提高学生正确认识问题、分析问题和解决问题的能力。注重计算思维的培养，培养学生探索未知、追求真理、勇攀科学高峰的责任感和使命感。培养学生精益求精的大国工匠精神，激发学生科技报国的家国情怀和使命担当。课程目标上，从重视知识内容的传递转向关注学生的学习效果：教学实施中，从强调讲课能力的提升转向侧重学习能力的培养：学业考评中，从提供终结性分类评级转向加强过程评价与反馈。课程高阶度体现在将知识能力素质有机融合，培养解决复杂问题的综合能力和高级思维：课程创新性体现在课程内容反映前沿性和时代性，教学形式体现先进性和互动性，学习结果具有探究性和个性化；课程挑战度指编码类课程对文科学生而言学习曲线略陡峭，且难度会有所增加。Web Design is a public elective course for undergraduate students. The main goal of the course is tomaster the basic Web page technology through experiences of modern technology and related software.The main contents of the course include the basic knowledge of Web page design, HTML hypertextmarkup language, Css cascading style sheet, JavaScript and jQuery,Photoshop, Dreamweaver,Webserver construction, content management system CMS, mobile platform Web page making and Web*课程简介design frontiertechnology(Description)An experimental guidance book for the course would help students to study and experience in class. Theguidebook isrevisedyearbyyearwithnew industrialtechnologiesand ideasThrough the study of this course,students can havea more comprehensivegrasp ofthe basic technologyof Web page production and common software, familiar with Web site construction and other Webtechnology.网页设计与开发HTML、CSS、JavaScript实例教程，郑娅峰，清华大学出版社，2021年第4版，ISBN编码9787302562740。自编讲义：*教材网页制作教师授课电子讲义和其他参考资料(Textbooks)网页制作上机实践指导手册（计算机教研部自编）（使用原因：当前教材市场单本教材没有能够覆盖课程内容的合适材料。内容依据是万维网联合会W3C官网，相关产品官方网站技术资料等。：2017年以来已经使用5轮

中国社会科学院大学网页制作课程大纲 课程基本信息（Course Information） 课程编号 （Course ID） 1163020018 *学时 （Credit Hours） 48 *学分 （Credits） 2 *课程名称 （Course Name） 网页制作 Web Design 先修课程 （Prerequisite Courses） 无 *课程简介 （Description） 本门课程为面向全校本科生开设的公共选修课，网页课程的主要目标是通过主流网页基础技术和相 关软件的介绍，掌握基本的网站网页制作技术。通过学习此课程，学生可以较全面地掌握网页制作 的基本技术和常用软件，熟悉网站建设和网页编辑技术。 课程的主要内容包括网页制作基础知识、HTML 超文本标记语言、CSS 层叠样式表、JavaScript 与 jQuery、网页美工、Dreamweaver 网页编辑、Web 服务器、内容管理系统 CMS、移动平台网页制作 和网页设计前沿技术。课程的重点和难点为网页制作中的基础编码技术。主要教学方法为课堂讲授 和实验实践。课程以线下讲授为主，统计考勤，要求学生按照课程进度完成作业。 在课程教学中学习贯彻习近平中国特色社会主义思想，把马克思主义立场观点方法的教育与科学精 神的培养结合起来，提高学生正确认识问题、分析问题和解决问题的能力。注重计算思维的培养， 培养学生探索未知、追求真理、勇攀科学高峰的责任感和使命感。培养学生精益求精的大国工匠精 神，激发学生科技报国的家国情怀和使命担当。 课程目标上，从重视知识内容的传递转向关注学生的学习效果；教学实施中，从强调讲课能力的提 升转向侧重学习能力的培养；学业考评中，从提供终结性分类评级转向加强过程评价与反馈。 课程高阶度体现在将知识能力素质有机融合，培养解决复杂问题的综合能力和高级思维；课程创新 性体现在课程内容反映前沿性和时代性，教学形式体现先进性和互动性，学习结果具有探究性和个 性化；课程挑战度指编码类课程对文科学生而言学习曲线略陡峭，且难度会有所增加。 *课程简介 （Description） Web Design is a public elective course for undergraduate students. The main goal of the course is to master the basic Web page technology through experiences of modern technology and related software. The main contents of the course include the basic knowledge of Web page design, HTML hypertext markup language, CSS cascading style sheet, JavaScript and jQuery, Photoshop, Dreamweaver, Web server construction, content management system CMS, mobile platform Web page making and Web design frontier technology. An experimental guidance book for the course would help students to study and experience in class. The guide book is revised year by year with new industrial technologies and ideas. Through the study of this course, students can have a more comprehensive grasp of the basic technology of Web page production and common software, familiar with Web site construction and other Web technology. *教材 （Textbooks） 网页设计与开发 HTML、CSS、JavaScript 实例教程，郑娅峰，清华大学出版社，2021 年第 4 版，ISBN 编码 9787302562740。 自编讲义： 网页制作教师授课电子讲义和其他参考资料 网页制作上机实践指导手册（计算机教研部自编） （使用原因：当前教材市场单本教材没有能够覆盖课程内容的合适材料。内容依据是万维网联合会 W3C 官网，相关产品官方网站技术资料等。：2017 年以来已经使用 5 轮

参考资料W3c网站(OtherReferences)线上教学网站（如runoob/w3cschool/手机app等）*课程类别口公共基础课/全校公共必修课口通识教育课口专业基础课口专业核心课/专业必修课口专业拓展课/专业选修课其他全校公共选修课(CourseCategory)口线上，教学平台*授课对象*授课模式线下口混合式口其他全校本科生(TargetStudents)(ModeofInstruction)口实践类（70%以上学时深入基层）中文口全外语语种*开课院系*授课语言计算机教研部口双语：中文+语种（外语讲授不低于(School)(Language of Instruction)50%)课程负责人瀚文飞讲师姓名及简介*授课教师信息(Teacher Information)团队成员姓名及简介了解并认识网页制作基础知识，并熟悉获取相关知识、技术的途径。掌握HTML超文本标记语言、学习目标CSS层叠样式表、JavaScript。了解jQuery的应用领域并能够进行简单应用。熟悉网页美工相关技术，(Learning能够应用Dreamweaver等编辑软件进行网页编辑。熟悉Web服务器的创建和管理，了解主流内容Outcomes)管理系统CMS、了解移动平台网页制作和网页设计前沿技术。能够使用网页制作基础技术和相关工具制作网页、修改网页并了解部分相关知识技能的应用。（所有考试的课程成绩均采取结构成绩制，每门课程的成绩由平时成绩、期末成绩组成总评成绩。平时成绩一般占总评成绩的20-30%，特定情况需另附说明。）平时成绩：50%期末成绩：50%，（课下设计）说明：*考核方式平时成绩由考勤、作业、课堂表现和单元测试等分数构成。平时成绩的评测较为全面细致，因此平(Grading)时成绩占据总成绩的50%。传统网页制作考试使用线下闭卷上机考试，在有限的时间约束下，学生可以使用的素材和工具均收到限制，不足以发挥学生的最大能力：不利于培养精雕细琢的工匠精神，也使学生不敢轻易进行排战性的可能影响分数的设计。使用课下设计，可以弥补以上不足。由此带来的问题是如果由一个课下设计项目对学生整个学期的学习成果进行评价，既不全面也不科学。经过几年的实际教学实践，将平时成绩设为50%，期末课下设计设为50%较妥。*课程教学计划（TeachingPlan）填写规范化要求见附件其中周教学内容摘要课其周次实习学讲程他（必含章节名称、讲述的内容提要、实验的名称、教学方法、课堂讨论的题目、教师验题时授讨阅读文献参考书目及作业等）t课课论节授课：第一章网页制作引论：网络基础、网站建设和网页制作技术发展。1.第一周2.授课：HTML、CSS和JavaScript前端技术介绍。瀚文飞3.实验：网页浏览器实验。熟悉网站网页技术相关知识

参考资料 （Other References） W3C 网站 线上教学网站（如 runoob/w3cschool/手机 app 等） *课程类别 （Course Category） 公共基础课/全校公共必修课 通识教育课 专业基础课 专业核心课/专业必修课 专业拓展课/专业选修课 √其他 全校公共选修课 *授课对象 （Target Students） 全校本科生 *授课模式 （Mode of Instruction） 线上，教学平台 √线下 混合式 其他 实践类（70%以上学时深入基层） *开课院系 （School） 计算机教研部 *授课语言 （Language of Instruction） √中文 全外语 语种 双语：中文+ 语种（外语讲授不低于 50%） *授课教师信息 （Teacher Information） 课程负责人 姓名及简介 鞠文飞 讲师 团队成员 姓名及简介 学习目标 （ Learning Outcomes） 了解并认识网页制作基础知识，并熟悉获取相关知识、技术的途径。掌握 HTML 超文本标记语言、 CSS 层叠样式表、JavaScript。了解 jQuery 的应用领域并能够进行简单应用。熟悉网页美工相关技术， 能够应用 Dreamweaver 等编辑软件进行网页编辑。熟悉 Web 服务器的创建和管理，了解主流内容 管理系统 CMS、了解移动平台网页制作和网页设计前沿技术。能够使用网页制作基础技术和相关工 具制作网页、修改网页并了解部分相关知识技能的应用。 *考核方式 （Grading） （所有考试的课程成绩均采取结构成绩制，每门课程的成绩由平时成绩、期末成绩组成总评成绩。 平时成绩一般占总评成绩的 20-30%，特定情况需另附说明。） 平时成绩：50% 期末成绩：50%，（课下设计） 说明： 平时成绩由考勤、作业、课堂表现和单元测试等分数构成。平时成绩的评测较为全面细致，因此平 时成绩占据总成绩的 50%。 传统网页制作考试使用线下闭卷上机考试，在有限的时间约束下，学生可以使用的素材和工具均收 到限制，不足以发挥学生的最大能力，不利于培养精雕细琢的工匠精神，也使学生不敢轻易进行挑 战性的可能影响分数的设计。使用课下设计，可以弥补以上不足。 由此带来的问题是如果由一个课下设计项目对学生整个学期的学习成果进行评价，既不全面也不科 学。经过几年的实际教学实践，将平时成绩设为 50%，期末课下设计设为 50%较妥。 *课程教学计划（Teaching Plan）填写规范化要求见附件 周次 教师 周 学 时 其中 教学内容摘要 （必含章节名称、讲述的内容提要、实验的名称、教学方法、课堂讨论的题目、 阅读文献参考书目及作业等） 讲 授 实 验 课 习 题 课 课 程 讨 论 其 他 环 节 第一周 鞠文飞 3 2 1 1. 授课：第一章 网页制作引论：网络基础、网站建设和网页制作技术发展。 2. 授课：HTML、CSS 和 JavaScript 前端技术介绍。 3. 实验：网页浏览器实验。熟悉网站网页技术相关知识

授课：第二章HTML语言：超文本标记语言HTML技术发展。HTML5特性。第二周瀚文飞2.授课：HTML语法文档结构。HTML常见标记。3.实验：HTML(1)(2)。重点为基础标记。授课：第二章HTML语言：HTML（续）。表格。1.第三周2.授课：表单元素等。瀚文飞3.实验：HTML（3）（4)。重点为表格和列表等。授课：第二章HTML语言：HTML（续），HTML头部meta元素等。1.第四周2.授课：HTML5新特性，如多媒体处理等。HTML5与CSS3技术发展。鞠文飞实验：HTML（5）（6）和进阶实验。重点为表单，熟悉多媒体处理。熟3.悉HTML5特性。1.授课：第二章HTML语言：HTML总结。第五周2.授课：第三章CSS层叠样式表（1）：CSS概述，层叠样式表基础。鞠文飞3.实验：CSS层叠样式表实验（1）CSS基本样式，CSS表格。授课：第三章CSS层叠样式表（2）：CSS进阶、选择符、伪类、盒模型。1.第六周2.授课：CSS综合案例、、CSS3新特性。文飞实验：CSS层叠样式表实验（2）CSS综合实验。3.授课：第四章JavaScript与JQuery：JavaScript简介。1.第七周2.授课：JavaScript编程基础：三种结构，函数等。瀚文飞3.实验：JavaScript基础实验：重点选择、循环、基本输入输出和函数。授课：第四章JavaScript与JQuery：JQuery技术。1.第八周2.授课：JavaScript扩展（框架技术等）。瀚文飞3实验：JQuery基础实验：（自主练习实验）。授课；第五章网页美工基础：Adobe套件。Photoshop。1.第九周2.授课：网页图片处理，简介动画技术。瀚文飞3.实验：网页美工实验：AdobePhotoshop。1.授课：第六章Dreamweaver网页制作：Dreamweaver软件界面，使用第十周Dreamweaver创建网站。瀚文飞授课：Dreamweaver网页编辑。2.3.实验：Dreamweaver实验创建站点，编辑网页。授课：第七章Web服务器：Windows服务器，IIS、FTP建设。1.第十一周2.授课：Linux服务器配置：LAMP：配置WordPress博客和百科系统。瀚文飞实验：Windows操作系统服务器建设实验，Linux操作系统服务器建设实3.验。LAMP服务器配置、FTP服务器配置。1.授课：第八章CMS内容管理系统：CMS内容管理系统。第十二周瀚文飞2.授课：自媒体平台（以微信公众平台为例）。3.实验：CMs（WordPress）、微信公众平台建立与管理。授课：第九章移动平台与H5页面制作：HTML5页面工具。第十三周1.瀚文飞2.授课：HTML5作品制作。3.实验：HTML5页面制作与展示。1.授课：第十章网页设计前沿技术：前端框架、JavaScript相关技术。第十四周2.授课：服务器端相关技术、数据库、移动端等。瀚文飞3.实验：浏览技术网站，熟悉了解相关前沿技术、实现综合作业。1.授课：综合作业（1）：综合作业展示第十五周瀚文飞2.授课：综合作业（2）：综合作业展示和点评3.实验：综合作业展示点评

第二周 鞠文飞 3 2 1 1. 授课： 第二章 HTML 语言：超文本标记语言 HTML 技术发展。HTML5 特性。 2. 授课：HTML 语法文档结构。HTML 常见标记。 3. 实验：HTML(1)(2)。重点为基础标记。 第三周 鞠文飞 3 2 1 1. 授课： 第二章 HTML 语言：HTML（续）。表格。 2. 授课：表单元素等。 3. 实验：HTML（3）（4）。重点为表格和列表等。 第四周 鞠文飞 3 2 1 1. 授课：第二章 HTML 语言：HTML（续），HTML 头部 meta 元素等。 2. 授课：HTML5 新特性，如多媒体处理等。HTML5 与 CSS3 技术发展。 3. 实验：HTML（5）（6）和进阶实验。重点为表单，熟悉多媒体处理。熟 悉 HTML5 特性。 第五周 鞠文飞 3 2 1 1. 授课：第二章 HTML 语言：HTML 总结。 2. 授课：第三章 CSS 层叠样式表（1）：CSS 概述，层叠样式表基础。 3. 实验：CSS 层叠样式表实验（1）CSS 基本样式，CSS 表格。 第六周 鞠文飞 3 2 1 1. 授课：第三章 CSS 层叠样式表（2）：CSS 进阶、选择符、伪类、盒模型。 2. 授课：CSS 综合案例、CSS3 新特性。 3. 实验：CSS 层叠样式表实验（2）CSS 综合实验。 第七周 鞠文飞 3 2 1 1. 授课：第四章 JavaScript 与 JQuery：JavaScript 简介。 2. 授课：JavaScript 编程基础：三种结构，函数等。 3. 实验：JavaScript 基础实验：重点选择、循环、基本输入输出和函数。 第八周 鞠文飞 3 2 1 1. 授课：第四章 JavaScript 与 JQuery：JQuery 技术。 2. 授课：JavaScript 扩展（框架技术等）。 3. 实验：JQuery 基础实验：（自主练习实验）。 第九周 鞠文飞 3 2 1 1. 授课：第五章 网页美工基础：Adobe 套件。Photoshop。 2. 授课：网页图片处理，简介动画技术。 3. 实验：网页美工实验：Adobe Photoshop。 第十周 鞠文飞 3 2 1 1. 授课：第六章 Dreamweaver 网页制作：Dreamweaver 软件界面，使用 Dreamweaver 创建网站。 2. 授课：Dreamweaver 网页编辑。 3. 实验：Dreamweaver 实验 创建站点，编辑网页。 第十一周 鞠文飞 3 2 1 1. 授课：第七章 Web 服务器：Windows 服务器，IIS、FTP 建设。 2. 授课：Linux 服务器配置：LAMP；配置 WordPress 博客和百科系统。 3. 实验：Windows 操作系统服务器建设实验，Linux 操作系统服务器建设实 验。LAMP 服务器配置、FTP 服务器配置。 第十二周 鞠文飞 3 2 1 1. 授课：第八章 CMS 内容管理系统：CMS 内容管理系统。 2. 授课：自媒体平台（以微信公众平台为例）。 3. 实验： CMS（WordPress）、微信公众平台建立与管理。 第十三周 鞠文飞 3 2 1 1. 授课：第九章 移动平台与 H5 页面制作：HTML5 页面工具。 2. 授课：HTML5 作品制作。 3. 实验：HTML5 页面制作与展示。 第十四周 鞠文飞 3 2 1 1. 授课：第十章 网页设计前沿技术：前端框架、JavaScript 相关技术。 2. 授课：服务器端相关技术、数据库、移动端等。 3. 实验：浏览技术网站，熟悉了解相关前沿技术、实现综合作业。 第十五周 鞠文飞 3 2 1 1. 授课：综合作业（1）：综合作业展示 2. 授课：综合作业（2）：综合作业展示和点评 3. 实验：综合作业展示点评

授课：总结和复习：网页设计技术总结，复习课程内容。1.第十六周瀚文飞2.授课：网页制作答疑。32-3.实验：复习答疑实验操作。总计183.16授课讲义使用教师自编讲义，实验与作业使用网页制作上机实践指导手册。备注（Notes）课程教学进程可能因学生日程（入学教育、军训等）、法定假日进行微调

第十六周 鞠文飞 3 2 1 1. 授课：总结和复习：网页设计技术总结，复习课程内容。 2. 授课：网页制作答疑。 3. 实验：复习答疑实验操作。 总计 48 32 16 备注（Notes） 授课讲义使用教师自编讲义，实验与作业使用网页制作上机实践指导手册。 课程教学进程可能因学生日程（入学教育、军训等）、法定假日进行微调