《Web前端应用开发》教学大纲课程名称：Web前端应用开发课程类别（必修/选修）：必修课程英文名称：WebFrontEndApplicationDevelopment其中实验/实贱学时：18总学时/周学时/学分：48/3/3先修课程：计算机概论后续课程支撑：数据库原理与应用授课地点：实验楼606机房授课时间：2-17周周二5-7节授课对象：2025计科3班开课学院：粤台产业科技学院任课教师姓名/职称：时维宁/副教授答疑时间、地点与方式：1.每次课的课前、课间和课后，采用一对一的问答方式（实验楼215）2.每次习题课，采用集中讲解方式课程考核方式：开卷（）闭卷（）课程论文（）其它（V）1
1 《Web 前端应用开发》教学大纲 课程名称：Web 前端应用开发 课程类别（必修/选修）：必修 课程英文名称：Web Front End Application Development 总学时/周学时/学分：48/3/3 其中实验/实践学时：18 先修课程： 计算机概论 后续课程支撑： 数据库原理与应用 授课时间：2-17 周 周二 5－7 节 授课地点：实验楼 606 机房 授课对象：2025 计科 3 班 开课学院：粤台产业科技学院 任课教师姓名/职称：时维宁 /副教授 答疑时间、地点与方式： 1.每次课的课前、课间和课后，采用一对一的问答方式 (实验楼 215)； 2.每次习题课，采用集中讲解方式 课程考核方式：开卷（）闭卷（✔）课程论文（）其它（✔）
使用教材：HTML5+CSS3+JavaScriptWeb前端开发案例教程（幕课版第2版），人民邮电出版社王方朱凯主编，2025/3，ISBN：978-7-115-66373-3。教学参考资料：1.网页设计与制作案例教程《HTML5+CSS3+JavaSeript》微课版第二版），人民邮电出版社李志云、田洁主编，2021/I，ISBN：97871156256942.（HTML5+CSS3+JavaScriptWeb开发案例教程》（第1版），人民邮电出版社温谦潜：，2022/5/1，ISBN：787115577542。3.案例学（Web前端开发》（全彩版）吉林大学出版社白宏健刘滴怀编誉：（第2版）2018年07月第2次4.（HTML5+CSS3网页设计与制作案例课盘》（第2版）清华大学出版社刘春茂着：（第2版）2018年01月第2版5.(HTML5?CSS3·RWD·jQueryMobile跨设备网页设计》清华大学出版社陈惠贞誉：2016年1月第1版o（HTML5+CSS3+JavaScript从入门到精通》水利水电出版社未来科技编普：2017年7月7.优学院[2025Autumn]WebFront-EndApplicationDevelopment(25级计科3班)https://courseweb.ulearning.cn/ulearning/index.html#/course/units?courseld-155403雅课二维码25计科3班课程简介：
2 使用教材：HTML5+CSS3+JavaScript Web 前端开发案例教程（慕课版 第 2 版），人民邮电出版社 王方 朱凯 主编, 2025/3, ISBN：978-7-115-66373-3。 教学参考资料： 1. 网页设计与制作案例教程《HTML5+CSS3+JavaScript》微课版|第二版），人民邮电出版社 李志云、田洁 主编, 2021/1, ISBN： 9787115625694 2. 《HTML5+CSS3+JavaScript Web 开发案例教程》（第 1 版），人民邮电出版社 温谦 着；, 2022/5/1, ISBN：787115577542。 3. 案例学《Web 前端开发》（全彩版）吉林大学出版社 白宏健 刘清怀 编着；(第 2 版）2018 年 07 月第 2 次 4. 《HTML5+CSS3 网页设计与制作案例课堂》（第 2 版）清华大学出版社 刘春茂 着；(第 2 版）2018 年 01 月第 2 版 5. 《HTML5●CSS3●RWD●jQuery Mobile 跨设备网页设计》清华大学出版社 陈惠贞 着；2016 年 1 月第 1 版 6. 《HTML5+CSS3+JavaScript 从入门到精通》水利水电出版社 未来科技 编着；2017 年 7 月 7. 优学院 [2025 Autumn] Web Front-End Application Development (25 级计科 3 班) https://courseweb.ulearning.cn/ulearning/index.html#/course/units?courseId=155403 课程简介：
（Web前端应用开发》是面向计算机相关专业的一门专业课，涉及网页基础、HTML标记、CSS样式、网贡布局、变形与动面等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动面效果，学会制作各种企业、门户、电商类网站。通过本课程的学习，让学生能够掌握静态网页的制作工具的使用以及HTML标记语言的运用，并掌握JavaScript脚本语言编程的基本方法与技巧，熟练掌握工具的使用，具备图形处理与制作的能力，如图片的美化、网络广告等。具备网站的建立、规划、管理、发布的相关技术及网页制作的操作技能，能独立设计小型WEB站点。课程目标：1、了解WEB站点的工作原理：2.了解Internet、WWW、HTTP、HTML的定义，概念和作用；3.理解服务器、客户端、浏览器的概念和作用4理解HTML语言中的各种文本格式、字符格式、段落设置、列表、表单、框架、多媒体标记的作用；5.理解表格、表单的作用这门学科的知识与技能要求分为知道、理解、享、学会四个层次。这四个层次的一义表速如下，知道：是指对这门学科和教学现象的认知。理解：是指对这门学科涉及到的概念、原理、策略与技术的说明和解释，能提示所涉及到的教学现象演变过程的特征、形成原因以及教学要素之间的相互关系。举握：是指运用已理解的教学概念和原理说明、解释、类推同类教学事件和现象。学会：是指能模仿或在教师指导下独立地完成某些教学知识和技能的操作任务，或能识别操作中的一般差错。课程教学目标及对毕业要求指标点的支撑课程教学目标支撑毕业要求指标点毕业要求目标1：1能够运用数学、基础科学、计算机科学与技术、基本美学、基础1.2掌握计算机科学与技术（多媒体设计）领城的享提网页制作的相关基础知识、网页布局设计，熟悉网页设计的规范化流专业基础理论和技术知识设计、多媒体、动画、游戏、虚拟现实与增强现实、文化创意等相3
3 《Web 前端应用开发》是面向计算机相关专业的一门专业课，涉及网页基础、HTML 标记、CSS 样式、网页布局、变形与动画等内容，通过本课 程的学习，学生能够了解网页 web 发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企 业、门户、电商类网站。 通过本课程的学习，让学生能够掌握静态网页的制作工具的使用以及 HTML 标记语言的运用，并掌握 JavaScript 脚本语言编程的基本方法与技巧。 熟练掌握工具的使用，具备图形处理与制作的能力，如图片的美化、网络广告等。具备网站的建立、规划、管理、发布的相关技术及网页制作的操作技 能，能独立设计小型 WEB 站点。 课程目标： 1． 了解 WEB 站点的工作原理； 2． 了解 Internet、WWW、HTTP、HTML 的定义，概念和作用； 3． 理解服务器、客户端、浏览器的概念和作用； 4． 理解 HTML 语言中的各种文本格式、字符格式、段落设置、列表、表单、框架、多媒体标记的作用； 5． 理解表格、表单的作用； 这门学科的知识与技能要求分为知道、理解、掌握、学会四个层次。这四个层次的一般涵义表述如下： 知道 : 是指对这门学科和教学现象的认知。 理解 : 是指对这门学科涉及到的概念、原理、策略与技术的说明和解释，能提示所涉及到的教学现象演变过程的特征、形成原因以及教学要素之 间的相互关系。 掌握 : 是指运用已理解的教学概念和原理说明、解释、类推同类教学事件和现象。 学会 : 是指能模仿或在教师指导下独立地完成某些教学知识和技能的操作任务，或能识别操作中的一般差错。 课程教学目标及对毕业要求指标点的支撑： 课程教学目标 支撑毕业要求指标点 毕业要求 目标 1： 掌握网页制作的相关基础知识、网页布局设计，熟悉网页设计的规范化流 1.2 掌握计算机科学与技术(多媒体设计)领域的 专业基础理论和技术知识。 1 能够运用数学、基础科学、计算机科学与技术、基本美学、基础 设计、多媒体、动画、游戏、虚拟现实与增强现实、文化创意等相
程等。，关知识，对多媒体设计问题具有解决能力。3.2能设计计算机科学与技术（多媒体设计）领城的复杂间题的解决方案3-设计/开发解决方案：能够掌计算机科学与技术、动画制作游戏开发、虚拟现实与增强现实应用、文化创意设计等基础理论与技术，其有追求创新的意识，对计算机科学与技术问题提出创新解决方案，目标2：5-使用现代工具：能够针对计算机科学与技术复杂问题，合理选5.1.了解计算机科学与技术（多媒体设计）专业常用熟练运用网页制作工具制作静态网页，掌握简单动态页面设计的方法和的现代仅器、信息技术工具、工具和模拟软件的使用适当的技术、资源、现代工具，进行预测与模拟并做可行性分技巧，使学生能够掌握建立网站和规划网站的实际技能。用原理与方法，并理解其局限性。析。通过国际化视野和跨文化交流合作的能力，发掘更多有效解12.2具有自主学习的能力.包括对技术问题的理解决问题的现代工具。能力，归纳总结的能力和提出问题的能力。毕业要求12-终身学习：保持终身学习的习惯与态度，结合最新学习工具持续自我学习，以培养解决新型态问要的能力目标3.9.1能与其他学科的成员有效沟通，合作共事。9一个人和团队：具有积极正面谋事的人格特质与良性团队互动的做11.3具备科学研究方法，拓展多媒体设计领域知事态度，在计算机科学与技术复杂问题解决过程中能够发挥关键深入了解网站技术和其他学科领域的相互联系和相互促进的关系，能在后续识，促进学术发展，提升专业实践水平，性作用，让问题以团队合作方式快速完成。课程和工作中持续学习。毕业要求11-项目管理：学会计算机科学与技术项目管理方法与技巧，能够合理分配资源做好项目管理，理论教学进程表教学模式周学时教学的重点、难点、课程思政融入教学主题主讲教师教学方法作业安排（线上/混合支撑课程目标次数点式/线下）4
4 程等。 3.2 能设计计算机科学与技术(多媒体设计)领域的 复杂问题的解决方案。 关知识，对多媒体设计问题具有解决能力。 3-设计/开发解决方案： 能够掌握计算机科学与技术、动画制作、 游戏开发、虚拟现实与增强 现实应用、文化创意设计等基础理论 与技术 ，具有追求创新的意识 ，对计算机科学与技术问题提出创 新解决方案。 目标 2: 熟练运用网页制作工具制作静态网页，掌握简单动态页面设计的方法和 技巧，使学生能够掌握建立网站和规划网站的实际技能。 5.1 了解计算机科学与技术(多媒体设计)专业常用 的现代仪器、信息技术工具、工具和模拟软件的使 用原理与方法，并理解其局限性。 12.2 具有自主学习的能力，包括对技术问题的理解 能力，归纳总结的能力和提出问题的能力。 5-使用现代工具： 能够针对计算机科学与技术复杂问题 ，合理选 用适当的技术、资源、现代 工具 ，进行预测与模拟并做可行性分 析 。通过国际化视野和跨文化交流合作的能力 ，发掘更多有效解 决 问题的现代工具。 毕业要求 12-终身学习：保持终身学习的习惯与态度 ，结合最新学 习工具持续自我学习 ， 以培养解决 新型态问题的能力。 目标 3. 深入了解网站技术和其他学科领域的相互联系和相互促进的关系,能在后续 课程和工作中持续学习。 9.1 能与其他学科的成员有效沟通，合作共事。 11.3 具备科学研究方法，拓展多媒体设计领域知 识，促进学术发展，提升专业实践水平。 9-个人和团队：具有积极正面谋事的人格特质与良性团队互动的做 事态度 ，在计算机科学与 技术复杂问题解决过程中能够发挥关键 性作用 ，让问题以团队合作方式快速完成。 毕业要求 11-项目管理：学会计算机科学与技术项目管理方法与技 巧 ，能够合理分配资源做好项目管 理。 理论教学进程表 周 次 教学主题 主讲教师 学时 数 教学的重点、难点、课程思政融入 点 教学模式 （线上/混合 式/线下) 教学方法 作业安排 支撑课程目标
[重点]Describetheevolutionofthe Internet and the Web Explainthe need for web standardsDescribe universal design Identify benefits of accessibleweb design Identify reliableresources of information on theWeb - Identify ethical use of theWeb.网站实例研究习题Introduction to the[难点JDescribe the purpose of课堂讲授与2Internet and World目标一课程思政作业：要求学生每人阅读时维宁3线下教学web browsers and web serversWide Web上机练习网站设计与制作有关的文章或书籍Identify networking protocols Define URIs and domain nameDescribe HTML, XHTML, andHTML5 -Describe popular trendsin the use of the Web。课程思政融入点：介绍InternetandWorldWideWeb技术，培养实事求是的科学态度和职业道德。[重点] Describe HTML,XHTML,and HTML5Identifythe markup language in a web网站实例研究习题page document-Use the html,课堂讲授与3HTML Basics目标二时维宁课程思政作业：要求学生每人阅读3线下教学head, body,title, and meta上机练习网站设计与制作有关的文章或书籍elements to code a template for aweb page -Configure the body ofa web page with5
5 2 Introduction to the Internet and World Wide Web 时维宁 3 [重点] Describe the evolution of the Internet and the Web、Explain the need for web standards、 Describe universal design、 Identify benefits of accessible web design、Identify reliable resources of information on the Web、Identify ethical use of the Web。 [难点]Describe the purpose of web browsers and web servers、 Identify networking protocols、 Define URIs and domain name、 Describe HTML, XHTML, and HTML5、Describe popular trends in the use of the Web。 课程思政融入点：介绍 Internet and World Wide Web 技术，培 养实事求是的科学态度和职业 道德。 线下教学 课堂讲授与 上机练习 网站实例研究习题 课程思政作业：要求学生每人阅读 网站设计与制作有关的文章或书籍 目标一 3 HTML Basics 时维宁 3 [重点] Describe HTML, XHTML, and HTML5、 Identify the markup language in a web page document、Use the html, head, body, title, and meta elements to code a template for a web page、Configure the body of a web page with 线下教学 课堂讲授与 上机练习 网站实例研究习题 课程思政作业：要求学生每人阅读 网站设计与制作有关的文章或书籍 目标二
headings, paragraphs, linebreaks, divs, lists, andblockquotes -Configure text withphrase elements [难点]Configure specialcharacters -Use the new HTML5header, nav, main, and footerelementsUse theanchor elementtolinkfrompagetopageCreateabsolute, relative, and e-mailhyperlinks ·Code, save, anddisplay a web page document Test a web page documentforvalid syntax 课程思政融入点：介绍HTMLBasics技术，培养实事求是的科学态度和职业道德。[重点] Describe the evolution ofstyle sheets from print media tothe Web - List advantages ofusing Cascading Style网站实例研究习题Configuring ColorSheets -Configure background课堂讲授与4目标三时维宁课程思政作业：要求学生每人阅读3线下教学and Text with CSSand text color on web pages上机练习网站设计与制作有关的文章或书籍Create style sheets that configurecommon color andtextproperties *[难点] Apply inline styles ~Use6
6 headings, paragraphs, line breaks, divs, lists, and blockquotes、Configure text with phrase elements。 [难点] 、Configure special characters、Use the new HTML5 header, nav, main, and footer elements、Use the anchor element to link from page to page、Create absolute, relative, and e-mail hyperlinks、Code, save, and display a web page document、 Test a web page document for valid syntax。 课程思政融入点：介绍 HTML Basics 技术，培养实事求是的科 学态度和职业道德。 4 Configuring Color and Text with CSS 时维宁 3 [重点] Describe the evolution of style sheets from print media to the Web、List advantages of using Cascading Style Sheets、Configure background and text color on web pages、 Create style sheets that configure common color and text properties。 [难点] Apply inline styles、Use 线下教学 课堂讲授与 上机练习 网站实例研究习题 课程思政作业：要求学生每人阅读 网站设计与制作有关的文章或书籍 目标三
embedded style sheets - Useexternal style sheets - Configureelement, class, id, and descendantselectors - Utilize the"cascade”in CSSValidate CSS 课程思政融入点：介绍Configuring Color and Text withCSS技术，培养实事求是的科学态度和职业道德。[重点] Create and format linesand borders on web pagesDecide when to use graphics andwhat graphics are appropriateApply the image element to addgraphicstowebpagesOptimize an image for web pagedisplayConfigure images asbackgroundsonwebpages网站实例研究习题Visual Elements课堂讲授与Configure images as hyperlinks 5目标二课程思政作业：要求学生每人阅读时维宁3线下教学and GraphicsConfigure rounded cormers, box上机练习网站设计与制作有关的文章或书籍shadow,text shadow,opacity,andgradientswithCSS3Configure RGBA colorwithCSS3°[难点]Configure HSLAcolorwith CSS3 - Use HTML5elementsto caption a figure7
7 embedded style sheets、Use external style sheets、Configure element, class, id, and descendant selectors、Utilize the “cascade” in CSS、Validate CSS。 课程思政融入点：介绍 Configuring Color and Text with CSS 技术，培养实事求是的科学 态度和职业道德。 5 Visual Elements and Graphics 时维宁 3 [重点] Create and format lines and borders on web pages 、 Decide when to use graphics and what graphics are appropriate 、 Apply the image element to add graphics to web pages 、 Optimize an image for web page display、 Configure images as backgrounds on web pages、 Configure images as hyperlinks、 Configure rounded corners, box shadow, text shadow, opacity, and gradients with CSS3、 Configure RGBA color with CSS3 。 [难点] Configure HSLA color with CSS3、Use HTML5 elements to caption a figure 、 线下教学 课堂讲授与 上机练习 网站实例研究习题 课程思政作业：要求学生每人阅读 网站设计与制作有关的文章或书籍 目标二
Use the HTML5 meter andprogress elements · Find free andfee-basedgraphics sources.Follow recommended web designguidelineswhen using graphics on webpages *课程思政融入点：介绍VisualElementsandGraphics技术，培养实事求是的科学态度和职业道德。[重点]Describe the mostcommon typesofwebsiteorganization-Describe theprinciples of visual designDesign for your target audienceDesign clear, easy-to-usenavigation·Improve the网站实例研究习题readability of the text on your课堂讲授与6Web Design目标二时维宁课程思政作业：要求学生每人阅读3线下教学web pages上机练习网站设计与制作有关的文章或书籍[难点]Use graphicsappropriately on web pagesApplytheconceptofuniversaldesign to web pages - Describeweb page layout designtechniques Apply best practicesof web design 8
8 Use the HTML5 meter and progress elements、Find free and fee-based graphics sources 、 Follow recommended web design guidelines when using graphics on web pages。 课程思政融入点：介绍 Visual Elements and Graphics 技术，培 养实事求是的科学态度和职业 道德。 6 Web Design 时维宁 3 [重点] Describe the most common types of website organization、Describe the principles of visual design、 Design for your target audience、 Design clear, easy-to-use navigation、Improve the readability of the text on your web pages。 [难点] Use graphics appropriately on web pages、 Apply the concept of universal design to web pages、Describe web page layout design techniques、Apply best practices of web design。 线下教学 课堂讲授与 上机练习 网站实例研究习题 课程思政作业：要求学生每人阅读 网站设计与制作有关的文章或书籍 目标二
课程思政融入点：介绍WebDesign术，培养实事求是的科学态度和职业道德。[重点]DescribeandapplytheCSS Box Model ·Configuremargins with CSSConfigurefloat with CSSConfigurepositioning with CSS，Createtwo-column page layouts usingCSSConfigure navigation inunordered lists and style withCSS*网站实例研究习题[难点]Add interactivity to课堂讲授与7Page Layout时维宁hyperlinks with CSS目标一课程思政作业：要求学生每人阅读2线下教学上机练习pseudo-classes Configure an网站设计与制作有关的文章或书籍interactive image galleryConfigure web pages withHTML5 structural elements,including section, article, andasideConfigure older browsersto be compatible with HTML5 课程思政融入点：介绍PageLayout技术，培养实事求是的科学态度和职业道德。More on Links,网站实例研究习题[重点] Code relative hyperlinks课堂讲授与目标一X时维宁2线下教学Layout, and Mobile课程思政作业：要求学生每人阅读to web pages in folders within a上机练习9
9 课程思政融入点：介绍 Web Design 术，培养实事求是的科学态度和 职业道德。 7 Page Layout 时维宁 2 [重点] Describe and apply the CSS Box Model、Configure margins with CSS 、 Configure float with CSS 、Configure positioning with CSS 、 Create two-column page layouts using CSS 、Configure navigation in unordered lists and style with CSS。 [难点]Add interactivity to hyperlinks with CSS pseudo-classes、Configure an interactive image gallery、 Configure web pages with HTML5 structural elements, including section, article, and aside、Configure older browsers to be compatible with HTML5。 课程思政融入点：介绍 Page Layout 技术，培养实事求是的 科学态度和职业道德。 线下教学 课堂讲授与 上机练习 网站实例研究习题 课程思政作业：要求学生每人阅读 网站设计与制作有关的文章或书籍 目标一 8 More on Links, Layout, and Mobile 时维宁 2 [重点] Code relative hyperlinks to web pages in folders within a 线下教学 课堂讲授与 上机练习 网站实例研究习题 课程思政作业：要求学生每人阅读 目标一
网站设计与制作有关的文章或书籍website-Configure a hyperlink toa named fragment internal toaweb pageProvide foraccessibility by configuringARIA landmark roles forstructural HTML elements-Configure images with CSSsprites Configure a three-columnpage layout using CSsConfigure CSS for printingDescribe mobile design bestpractices [难点] Configure web pages formobile display using theviewport meta tagApplyresponsive web designtechniques with CSS3 mediaqueries Apply responsive imagetechniques including the newHTML5 picture element Applythe new CSS3 Flexbox layoutmodel *课程思政融入点：介绍Links,Layout,andMobile技术，培养实事求是的科学态度和职业道德。课堂讲授与网站实例研究习题[重点]Describethe9Tables时维宁线下教学目标一recommended use of a table on a上机练习课程思政作业：要求学生每人阅读10
10 website、Configure a hyperlink to a named fragment internal to a web page、Provide for accessibility by configuring ARIA landmark roles for structural HTML elements、 Configure images with CSS sprites、Configure a three-column page layout using CSS、 Configure CSS for printing、 Describe mobile design best practices。 [难点] Configure web pages for mobile display using the viewport meta tag、Apply responsive web design techniques with CSS3 media queries、Apply responsive image techniques including the new HTML5 picture element、Apply the new CSS3 Flexbox layout model。 课程思政融入点：介绍 Links, Layout, and Mobile 技术，培养 实事求是的科学态度和职业道 德。 网站设计与制作有关的文章或书籍 9 Tables 时维宁 1 [重点] Describe the recommended use of a table on a 线下教学 课堂讲授与 上机练习 网站实例研究习题 课程思政作业：要求学生每人阅读 目标一