东莞理工学院：《WEB前端应用开发》课程教学大纲（2024-2025第一学期）

《Web前端应用开发》教学大纲课程名称：Web前端应用开发课程类别（必修/选修）：必修课程英文名称：WebFrontEndApplicationDevelopment其中实验/实践学时：10总学时/周学时/学分：48/3/3先修课程：计算机概论后续课程支撑：数据库原理与应用授课时间：3-18周周三5-7节授课地点：实验楼606机房授课对象：2024计科3班开课学院：粤台产业科技学院任课教师姓名/职称：时维宁/副教授答疑时间、地点与方式：1.每次课的课前、课间和课后，采用一对一的问答方式（实验楼215）2每次习题课，采用集中讲解方式课程考核方式：开卷（）闭卷（V）课程论文（）其它（V）1

1 《Web 前端应用开发》教学大纲 课程名称：Web 前端应用开发 课程类别（必修/选修）：必修 课程英文名称：Web Front End Application Development 总学时/周学时/学分：48/3/3 其中实验/实践学时：10 先修课程： 计算机概论 后续课程支撑： 数据库原理与应用 授课时间：3-18 周 周三 5－7 节 授课地点：实验楼 606 机房 授课对象：2024 计科 3 班 开课学院：粤台产业科技学院 任课教师姓名/职称：时维宁 /副教授 答疑时间、地点与方式： 1.每次课的课前、课间和课后，采用一对一的问答方式 (实验楼 215)； 2.每次习题课，采用集中讲解方式 课程考核方式：开卷（）闭卷（✔）课程论文（）其它（✔）

使用教材：网页投计与制作案例教程（HTML5+CSS3+JavaSeript》微课版第二版），人民邮电出版社李志云、田洁主编：，2021/1，ISBN：9787115625694。教学参考资料：1. 《HTML5+CSS3+JavaScriptWeb开发案例教程》（第1版），人民邮电出版社温谦誉：，2022/5/1，ISBN：787115577542。2.案例学《Web前端开发》（全彩版）吉林大学出版社白宏健刘清怀编着：（第2版）2018年07月第2次3.《HTMIL5+CSS3网页设计与制作案例课誉》（第2版）清华大学出版社刘睿茂誉：（第2版）2018年01月第2版4.《HTML5?CSS3?RWD?jQueryMobile跨设备网页设计》清华大学出版社陈惠贞着2016年1月第1版5.《HTML5+CSS3+JavaSeript从入门到精通》水利水电出版社未来科技编普：2017年7月6.优学院[2024Autumn]WebFront-EndApplicationDevelopment(24级计科3班)https:/courseweb.ulearning.cn/ulearning/index.html#/course/announcement?courseld-1401312

2 使用教材：网页设计与制作案例教程《HTML5+CSS3+JavaScript》微课版|第二版），人民邮电出版社 李志云、田洁 主编；, 2021/1, ISBN： 9787115625694。 教学参考资料： 1. 《HTML5+CSS3+JavaScript Web 开发案例教程》（第 1 版），人民邮电出版社 温谦 着；, 2022/5/1, ISBN：787115577542。 2. 案例学《Web 前端开发》（全彩版）吉林大学出版社 白宏健 刘清怀 编着；(第 2 版）2018 年 07 月第 2 次 3. 《HTML5+CSS3 网页设计与制作案例课堂》（第 2 版）清华大学出版社 刘春茂 着；(第 2 版）2018 年 01 月第 2 版 4. 《HTML5●CSS3●RWD●jQuery Mobile 跨设备网页设计》清华大学出版社 陈惠贞 着；2016 年 1 月第 1 版 5. 《HTML5+CSS3+JavaScript 从入门到精通》水利水电出版社 未来科技 编着；2017 年 7 月 6. 优学院 [2024 Autumn] Web Front-End Application Development (24 级计科 3 班) https://courseweb.ulearning.cn/ulearning/index.html#/course/announcement?courseId=140131

班课二维码2024级计科3班编码：68298290助可加入班级学生通现价课程简介：3

3 课程简介：

Web前端应用开发》是面向计算机相关专业的一门专业课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。通过本课程的学习，让学生能够举握静态网页的制作工具的使用以及HTML标记语言的运用，并掌握JavaScript脚本语言编程的基本方法与技巧。熟练掌握工具的使用，具备图形处理与制作的能力，如图片的美化、网络广告等。具备网站的建立、规划、管理、发布的相关技术及网页制作的操作技能，能独立设计小型WEB站点。课程目标：1.了解WEB站点的工作原理；2.了解Internet、WWW、HTTP、HTML的定义，概念和作用：3理解服务器、客户端、浏览器的概念和作用：4.理解HTMIL语言中的各种文本格式、字符格式、段落设量、列表、表单、框架、多媒体标记的作用；5.理解表格、表单的作用这门学科的知识与技能要求分为知道、理解、掌握、学会四个层次。这四个层次的一般涵义表述如下，知道：是指对这门学科和教学现象的认知。理解：是指对这门学科涉及到的概念、原理、策略与技术的说明和解释，能提示所涉及到的教学现象演变过程的特征、形成原因以及教学要素之间的相互关系。掌握：是指运用已理解的教学概念和原理说明、解释、类推同类教学事件和现象。学会：是指能模仿或在教师指导下独立地完成某些教学知识和技能的操作任务，或能识别操作中的一般差错。课程教学目标及对单业要求指标点的支撑：毕业要求课程教学目标支撑毕业要求指标点4

4 《Web 前端应用开发》是面向计算机相关专业的一门专业课，涉及网页基础、HTML 标记、CSS 样式、网页布局、变形与动画等内容，通过本课 程的学习，学生能够了解网页 web 发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企 业、门户、电商类网站。 通过本课程的学习，让学生能够掌握静态网页的制作工具的使用以及 HTML 标记语言的运用，并掌握 JavaScript 脚本语言编程的基本方法与技 巧。熟练掌握工具的使用，具备图形处理与制作的能力，如图片的美化、网络广告等。具备网站的建立、规划、管理、发布的相关技术及网页制作的操 作技能，能独立设计小型 WEB 站点。 课程目标： 1． 了解 WEB 站点的工作原理； 2． 了解 Internet、WWW、HTTP、HTML 的定义，概念和作用； 3． 理解服务器、客户端、浏览器的概念和作用； 4． 理解 HTML 语言中的各种文本格式、字符格式、段落设置、列表、表单、框架、多媒体标记的作用； 5． 理解表格、表单的作用； 这门学科的知识与技能要求分为知道、理解、掌握、学会四个层次。这四个层次的一般涵义表述如下： 知道 : 是指对这门学科和教学现象的认知。 理解 : 是指对这门学科涉及到的概念、原理、策略与技术的说明和解释，能提示所涉及到的教学现象演变过程的特征、形成原因以及教学要素之 间的相互关系。 掌握 : 是指运用已理解的教学概念和原理说明、解释、类推同类教学事件和现象。 学会 : 是指能模仿或在教师指导下独立地完成某些教学知识和技能的操作任务，或能识别操作中的一般差错。 课程教学目标及对毕业要求指标点的支撑： 课程教学目标 支撑毕业要求指标点 毕业要求

目标11.2掌握计算机科学与技术（多媒体设计）领城的11能够运用数学、基确科学、计算机科学与技术、基本美学、基础掌握网页制作的相关基础知识、网页布局设计，熟悉网页设计的规范化流专业基础理论和技术知识·设计、多媒体、动面、游戏、虚拟现实与增强现实、文化创意等相程等。，3.2能设计计算机科学与技术（多媒体设计）领城的关知识，对多媒体设计问题具有解决能力。3-设计/开发解决方案：能够掌握计算机科学与技术、动画制作、复杂问题的解决方案·游戏开发、虚拟现实与增强现实应用、文化创意设计等基础理论与技术，具有追求创新的意识，对计算机科学与技术问题提出创新解决方案。目标2：5.1了解计算机科学与技术（多媒体设计）专业常用5-使用现代工具：：能够针对计算机科学与技术复杂问题，合理选熟练运用网页制作工具制作静态网页，掌握简单动态页面设计的方法和的现代仪器、信息技术工具、工具和模拟软件的使用适当的技术、资源、现代工具，进行预测与模拟并做可行性分技巧，使学生能够掌握建立网站和规划网站的实际技能。用原理与方法，并理解其局限性，析，通过国际化视野和跨文化交流合作的能力，发掘更多有效解12.2其有自主学习的能力，包括对技术问题的理解决问题的现代工具，能力，归纳总结的能力和提出问题的能力。毕业要求12-终身学习：保持终身学习的习惯与态度，结合最新学习工具持续自我学习，以培养解决新型态问题的能力目标3.9.1能与其他学科的成员有效沟通，合作共事，9一个人和团队：具有积极正面谋事的人格特质与良性团队互动的做事态度，在计算机科学与技术复杂问题解决过程中能够发挥关键深入了解网站技术和其他学科领域的相互联系和相互促进的关系，能在后续11.3具备科学研究方法，拓展多媒体设计领域知识，促进学术发展，提升专业实践水平。性作用，让问题以团队合作方式快速完成。课程和工作中持续学习毕业要求11-项目管理：学会计算机科学与技术项目管理方法与技巧，能够合理分配资源做好项目管理。理论教学进程表周学时教学的重点、难点、课程思政融主讲教师教学模式教学方法教学主题作业安排支撑课程目标次数入点5

5 目标 1： 掌握网页制作的相关基础知识、网页布局设计，熟悉网页设计的规范化流 程等。 1.2 掌握计算机科学与技术(多媒体设计)领域的 专业基础理论和技术知识。 3.2 能设计计算机科学与技术(多媒体设计)领域的 复杂问题的解决方案。 1 能够运用数学、基础科学、计算机科学与技术、基本美学、基础 设计、多媒体、动画、游戏、虚拟现实与增强现实、文化创意等相 关知识，对多媒体设计问题具有解决能力。 3-设计/开发解决方案： 能够掌握计算机科学与技术、动画制作、 游戏开发、虚拟现实与增强 现实应用、文化创意设计等基础理论与 技术 ，具有追求创新的意识 ，对计算机科学与技术问题提出创新 解决方案。 目标 2: 熟练运用网页制作工具制作静态网页，掌握简单动态页面设计的方法和 技巧，使学生能够掌握建立网站和规划网站的实际技能。 5.1 了解计算机科学与技术(多媒体设计)专业常用 的现代仪器、信息技术工具、工具和模拟软件的使 用原理与方法，并理解其局限性。 12.2 具有自主学习的能力，包括对技术问题的理解 能力，归纳总结的能力和提出问题的能力。 5-使用现代工具： 能够针对计算机科学与技术复杂问题 ，合理选 用适当的技术、资源、现代 工具 ，进行预测与模拟并做可行性分 析 。通过国际化视野和跨文化交流合作的能力 ，发掘更多有效解 决 问题的现代工具。 毕业要求 12-终身学习：保持终身学习的习惯与态度 ，结合最新学 习工具持续自我学习 ， 以培养解决 新型态问题的能力。 目标 3. 深入了解网站技术和其他学科领域的相互联系和相互促进的关系,能在后续 课程和工作中持续学习。 9.1 能与其他学科的成员有效沟通，合作共事。 11.3 具备科学研究方法，拓展多媒体设计领域知 识，促进学术发展，提升专业实践水平。 9-个人和团队：具有积极正面谋事的人格特质与良性团队互动的做 事态度 ，在计算机科学与 技术复杂问题解决过程中能够发挥关键 性作用 ，让问题以团队合作方式快速完成。 毕业要求 11-项目管理：学会计算机科学与技术项目管理方法与技 巧 ，能够合理分配资源做好项目管 理。 理论教学进程表 周 次 教学主题 主讲教师 学时 数 教学的重点、难点、课程思政融 入点 教学模式 教学方法 作业安排 支撑课程目标

（线上/混合式/线下)[重点]Describetheevolutionofthe Internet and the WebExplain the need for webstandards - Describe universaldesign Identify benefits ofaccessible web design - Identifyreliable resources of informationon the Web - Identify ethical useofthe Web.网站实例研究习题Introduction to the[难点JDescribe the purpose of课堂讲授与5Internet and World目标一课程思政作业：要求学生每人阅读时维宁3线下教学web browsers and web servers *Wide Web上机练习网站设计与制作有关的文章或书籍Identify networking protocolsDefine URIsand domain nameDescribe HTML, XHTML, andHTML5 - Describe populartrends in the use of the Web.课程思政融入点：介绍InternetandWorldWideWeb技术，培养实事求是的科学态度和职业道德。[重点]DescribeHTML,网站实例研究习题XHTML,andHTML5课堂讲授与HTML Basics6目标二课程思政作业：要求学生每人阅读时维宁线下教学3Identify the markup language in a上机练习网站设计与制作有关的文章或书籍web pagedocumentUsethehtml, head, body,title, and meta6

6 （线上/混合 式/线下) 5 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 技术，培 养实事求是的科学态度和职业 道德。 线下教学 课堂讲授与 上机练习 网站实例研究习题 课程思政作业：要求学生每人阅读 网站设计与制作有关的文章或书籍 目标一 6 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 aweb page-Configure the bodyofa web pagewithheadings, paragraphs, linebreaks, divs, lists, andblockquotes - Configure textwith phrase elements -[难点] Configure specialcharacters -Use the newHTML5 header, nav, main, andfooter elements-Use the anchorelement to link from page topage - Create absolute, relative,and e-mail hyperlinks - Code,save,and display a web pagedocument - Test a web pagedocument for valid syntax 课程思政融入点：介绍HTMLBasics技术，培养实事求是的科学态度和职业道德。[重点]Describetheevolutionofstyle sheets from print media to网站实例研究习题the Web-List advantages ofConfiguring Color课堂讲授与时维宁using Cascading Style目标三课程思政作业：要求学生每人阅读线下教学3and Text with CSS上机练习网站设计与制作有关的文章或书籍Sheets Configure backgroundand text color on web pagesCreate style sheets that configure7

7 elements to code a template for a web page、Configure the body of a web page with 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 技术，培养实事求是的 科学态度和职业道德。 7 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 线下教学 课堂讲授与 上机练习 网站实例研究习题 课程思政作业：要求学生每人阅读 网站设计与制作有关的文章或书籍 目标三

commoncolorandtextproperties*[难点]Apply inline styles·Useembedded style sheets - Useexternal style sheets · Configureelement, class, id, and descendanselectorsUtilize the"cascade”in CSS.ValidateCSS .课程思政融入点：介绍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 addgraphics to web pages网站实例研究习题Optimize an image for web pageVisual Elements课堂讲授与8displayConfigure images as目标二时维宁课程思政作业：要求学生每人阅读3线下教学and Graphicsbackgrounds on web pages 上机练习网站设计与制作有关的文章或书籍Configure images ashyperlinks · Configure roundedcorners, box shadow, textshadow,opacity,and gradientswithCSS3-ConfigureRGBAcolorwithCSS38

8 common color and text properties。 [难点] Apply inline styles、Use 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 技术，培养实事求是的科 学态度和职业道德。 8 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 HSLAcolowithCSS3-UseHTML5elements to caption a figureUse the HTML5 meter andprogresselementsFind free andfee-based graphics sourcesFollow recommended web designguidelineswhen using graphics on webpages *课程思政融入点：介绍VisualElementsandGraphics技术，培养实事求是的科学态度和职业道德。[重点]Describethemostcommon types ofwebsiteorganizationDescribe theprinciples of visual design Design for your target网站实例研究习题audience - Design clear, easy-to-课堂讲授与9Web Design目标二时维宁课程思政作业：要求学生每人阅读3线下教学use navigation ·Improve the上机练习网站设计与制作有关的文章或书籍readability of the text on yourwebpages[难点] Use graphicsappropriately on web pagesApplytheconceptofuniversa9

9 [难点] Configure HSLA color with CSS3、Use HTML5 elements to caption a figure 、 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 技术，培 养实事求是的科学态度和职业 道德。 9 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 Describeweb page layout designtechniques ~Apply best practicesof web design 课程思政融入点：介绍WebDesign术，培养实事求是的科学态度和职业道德。[重点]DescribeandapplytheCSS Box Model - Configuremargins withCSSConfigurefloat with CSSConfigurepositioning with CSSCreatetwo-column page layouts usingCSSConfigurenavigation inunordered lists and style with网站实例研究习题CSS *课堂讲授与10目标一Page Layout时维宁课程思政作业：要求学生每人阅读3线下教学[难点]Add interactivity to上机练习网站设计与制作有关的文章或书籍hyperlinks with CSS pseudo-classes - Configure an interactiveimage gallery-Configure webpages with HTML5 structuralelements, including section,article, and asideConfigureolderbrowsers tobe compatiblewithHTML510

10 design to web pages、Describe web page layout design techniques、Apply best practices of web design。 课程思政融入点：介绍 Web Design 术，培养实事求是的科学态度 和职业道德。 10 Page Layout 时维宁 3 [重点] 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。 线下教学 课堂讲授与 上机练习 网站实例研究习题 课程思政作业：要求学生每人阅读 网站设计与制作有关的文章或书籍 目标一