《Web前端开发技术A》教学大纲_第1页
《Web前端开发技术A》教学大纲_第2页
《Web前端开发技术A》教学大纲_第3页
《Web前端开发技术A》教学大纲_第4页
《Web前端开发技术A》教学大纲_第5页
已阅读5页，还剩9页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《Web前端开发技术A》教学大纲适用范围：202X版本科人才培养方案课程代码：08150481课程性质：专业选修课学分：4学分学时：64学时（理论48学时，实验16学时）先修课程：信息处理技术、C程序设计A等后续课程：企业框架开发技术等适用专业：数据科学与大数据技术开课单位：计算机科学与技术学院一、课程说明《Web前端开发技术A》课程是数据科学与大数据技术专业的一门专业选修课程，以Web基本概念和Web标准为基准点、通过对Web前端主流开发技术的学习和研究，让学生理解和掌握HTML基本语法格式、HTML5新增元素、CSS基础知识、CSS3的相关知识，通过这门课程的教学，不仅培养学生开发和设计Web站点的基本技能，更要使学生充分了解Web思想、web前端开发的主流框架使用，为进一步学习后续移动应用开发课程打下良好的基础。本课程的主要任务是让学生熟悉W3C规范，理解HTML5、CSS3的语法规则，掌握常用的Web页面布局技术，理解并能够应用HTML5+CSS3进行页面排版布局，最终能够综合使用所学技术编写符合标准的Web页面。本课程教学基本要求是让学生理解Web设计的基本原则、栏目和网站目录结构定义、开发工具的选用、标准页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础知识；能够熟练运用HTML5中的各种标记语言设计制作网页；熟练掌握CSS3对网页进行布局和修饰的基本方法二、课程目标通过本课程的学习，使学生达到如下目标：课程目标1：了解Web前端开发技术的相关概念、设计思想、开发技术及发展趋势，具备Web前端设计的复合知识结构；理解HTML5、CSS3、JavaScript等语法规则、盒模型、HTML5+CSS3排版布局的基础知识、JS相关框架的使用。课程目标2：理解HTML5、CSS3、JavaScript等语法规则、盒模型、HTML5+CSS3排版布局的基础知识；熟练运用Web前端多种开发技术，能够完成Web页面开发；掌握网页设计与网站开发相关领域的前沿技术，具备能够在Web网站开发领域开展创新性工作的能力。课程目标3：理解Web前端开发有关的行业标准、常用框架以及相关知识产权、行业政策等；掌握Web页面设计的基本理论和排版原则、核心知识点；培养学生使用马克思主义的世界观和方法论认识、分析和综合解决问题的能力；让学生在学好专业知识的同时坚定理想信念，不断增强科技强国的使命感和责任感。三、课程目标与毕业要求《Web前端开发技术A》课程教学目标对数据科学与大数据技术专业毕业要求的支撑见表1。表1课程教学目标与毕业要求关系毕业要求指标点课程目标支撑强度3.设计/开发解决方案3.3能够在社会、健康、安全、法律、文化等现实约束下，对设计方案的可行性进行研究，并对其进行优选和改进，体现创新意识。课程目标1：了解Web前端开发技术的相关概念、设计思想、开发技术及发展趋势，具备Web前端设计的复合知识结构；理解HTML5、CSS3、JavaScript等语法规则、盒模型、HTML5+CSS3排版布局的基础知识、JS相关框架的使用。H5.使用现代工具5.3能够使用现代工程工具对复杂软件工程问题和设计方案进行预测与模拟，理解其局限性。课程目标2：理解HTML5、CSS3、JavaScript等语法规则、盒模型、HTML5+CSS3排版布局的基础知识；熟练运用Web前端多种开发技术，能够完成Web页面开发；掌握网页设计与网站开发相关领域的前沿技术，具备能够在Web网站开发领域开展创新性工作的能力。H6.工程与社会6.2能够分析软件工程与社会各因素之间的关系，合理评价复杂工程问题对社会、健康、安全、法律以及文化的影响，并理解应承担的责任。课程目标3：理解Web前端开发有关的行业标准、常用框架以及相关知识产权、行业政策等；掌握Web页面设计的基本理论和排版原则、核心知识点；培养学生使用马克思主义的世界观和方法论认识、分析和综合解决问题的能力；让学生在学好专业知识的同时坚定理想信念，不断增强科技强国的使命感和责任感M注：表中“H（高）、M（中）”表示课程与相关毕业要求的关联度。四、教学内容、基本要求与学时分配1.理论部分理论部分的教学内容、基本要求与学时分配见表2。表2教学内容、基本要求与学时分配教学内容教学要求，教学重点难点理论学时实验学时对应的课程目标1Web前端开发技术综述1.1Web概述1.2Web前端开发职业需求1.3Web前端开发技术1.4Web前端开发工具1.5浏览器工具教学要求：了解Web起源理解Web特点理解Web工作原理掌握Web相关概念，掌握URL构成、Web服务器、超链接基本概念。了解Web前端开发职业需求理解CSS在Web页面设计中作用理解JavaScript在Web页面设计中作用了解HTMLDOM、BOM及AJAX在页面设计中的作用了解jQuery含义及基本用途熟悉常用五类浏览器安装与使用重点：理解HTML概念及在网页中的作用，理解HTML文档定义。掌握EditPlus、AdobeDreamweaver、SublimeText、WebStorm、HBuilder等开发工具。212HTML基础2.1HTML文档结构2.2头部2.3主体2.4HTML基本语法2.5注释2.6HTML文档编写规范2.7HTML文档类型<!DOCTYPE>教学要求：掌握两种注释标记的使用方法及作用，重点掌握<!---->标记的使用。掌握HTML代码书写规范掌握HTML文档命名规则了解3种HTML文档类型和HTML5的DTD定义方法。掌握综合实例中所使用的标记语法重点：理解HTML文档组成结构掌握HTML头部标记作用及标题标记、元信息meta标记的语法掌握HTML主体标记作用掌握主体标记主要属性及其设置方法掌握标记类型语法及HTML属性语法41、23格式化文本与段落3.1Web页面初步设计3.2格式化文本标记3.3段落与排版标记教学要求：掌握标题字标记语法及对齐属性的设置方法掌握添加空格、特殊符号的方法掌握文本修饰标记的使用方法了解计算机输出标记的使用方法理解引用和术语标记的使用方法掌握换行、水平分隔线、拼音/音标注释ruby标记和rt/rp标记拼音/音标注释ruby标记和rt/rp标记、预格式化、块引用等标记的使用及属性设置重点：掌握在<body>添加文字信息的方法掌握字体font标记的face、size、color属性语法掌握段落p标记语法及align属性的设置224列表4.1列表概述4.2无序列表4.3有序列表4.4列表嵌套4.5定义列表教学要求：了解列表的定义和常用列表的分类了解使用有序列表项value属性改变列表项编号理解列表的type与列表项type属性冲突时对列表项编号的影响重点：掌握无序列表基本语法掌握有序列表基本语法掌握无序列表与有序列表嵌套的方法掌握定义列表基本语法理解定义列表与无序、有序列表的外在表现上的差异难点：学会使用列表type属性的改变列表的符号样式学会使用列表type、start属性的改变列表的编号样式理解定义列表与无序、有序列表的外在表现上的差异225超链接与浮动框架5.1超链接概述5.2超链接语法、路径及分类5.3超链接的应用5.4浮动框架教学要求：理解超链接中路径的分类和应用场合掌握创建HTTP文件下载链接的语法掌握浮动框架使用语法和使用方法。重点：掌握超链接基本语法及href、target、title等属性的设置方法掌握内链接、外链接的定义方法掌握FTP站点访问链接的基本语法及创建方法掌握图像超链接的基本语法及创建方法掌握电子邮件链接的基本语法及创建方法掌握书签链接的基本语法及创建方法难点：掌握书签链接的基本语法及创建方法4226图像与多媒体文件6.1图像6.2滚动文字6.3音频、视频及Flash文件教学要求：掌握<img>标记基本语法掌握滚动文字标记的基本语法重点：会利用<img>属性src、width、height、border、alt、hspace、vspace、align等来修饰图像学会利用滚动文字标记的direction、behavior、loop、scrollamount、scrolldelay等属性来设置滚动文字的效果学会正确设置<embed>标记的src、loop、autostart、width、height等属性。难点：掌握<embed>标记的语法。222、37CSS基础7.1CSS概念7.2使用CSS控制Web页面7.3CSS继承与层叠教学要求：了解CSS基本概念了解传统HTML的缺点了解CSS的特点了解CSS的优势了解CSS编辑方法掌握CSS的基本语法掌握CSS选择器类型（包括标记选择器、类选择器、id选择器、伪类选择器、属性选择器等）理解CSS的继承与层叠区别重点：掌握CSS选择器声明类型(2)掌握CSS定义与引用方法（包括内联样式表(行内样式表)、内部样式表、外部样式表（链接外部样式表、导入外部样式表等。）222、38DIV与SPAN8.1div图层8.2图层嵌套与层叠8.3div标记与span标记教学要求：掌握div定义方法学会设置div图层的属性学会使用多个<div>进行页面布局(4)学会使用图层嵌套与图层层叠(5)理解div标记与span标记的使用区别222、39CSS样式属性9.1CSS属性中的单位9.2CSS字体样式9.3CSS文本样式9.4CSS颜色与背景9.5CSS列表样式9.6CSS盒模型教学要求：掌握CSS属性中绝对单位与相对单位掌握字体font-size、font-style、font-variant、font-weight、font-family等属性的设置方法掌握字体font复合属性的设置方法掌握letter-spacing、text-indent、text-decoration、text-transform、text-align、vertical-align、line-height等排版样式属性的设置方法掌握颜色属性的设置方法掌握背景background-color、background-image、background-repeat、background-attachment、background-position等子属性的设置方法掌握背景复合属性background的设置方法掌握列表样式语法，学会使用list-style-type、list-style-image、list-style-position等属性美化列表的外观理解CSS盒模型结构学会设置边界margin、边框属性border、填充属性padding及其子属性的设置方法422、310DIV+CSS页面布局10.1页面布局设计10.2导航菜单设计教学要求：能够根据常规页面布局编写出DIV结构和定义出CSS样式学会使用DIV+CSS实现简单Web页面布局掌握一级水平导航菜单的设计方法掌握二级水平导航菜单的设计方法222、311表格11.1表格11.2表格标记11.3表格属性设置11.4设置表格行的属性11.5设置单元格的属性11.6表格嵌套教学要求：熟悉常用表格的标记及作用掌握表格边框及边框样式属性设置方法掌握表格宽度、高度的设置方法掌握表格的背景颜色和背景图像的设置方法掌握表格边框样式属性的设置方法掌握表格单元格间距、边距的设置方法掌握表格水平对齐属性的设置方法掌握表格行内容水平和垂直对齐的设置方法学会运用表格嵌套技术实现一般网页布局重点：掌握<table>标记语法及所有表格标记的语法会利用<table><tr><td>绘制简易表格学会使用表格标题<caption>、<th>标记定义表格标题和表头掌握单元格跨行属性rowspan设置方法掌握单元格跨列属性colspan设置方法222、312表单12.1表单概述12.2定义域和域标题12.3表单信息输入12.4多行文本输入框12.5下拉列表框教学要求：(1)掌握域和域标题标记的基本语法,学会使用域和域标题标记设置表单分区(2)掌握单行文本输入框的属性设置方法(3)学会使用密码输入框设置用户密码(4)掌握复选框checkbox设置及使用方法，学会使用checked属性将某项复选框设为预选项(5)掌握单选按钮radio设置及使用方法，学会使用checked属性将某项单选按钮设为预选项(6)掌握图像按钮的属性设置方法(7)掌握submit按钮的属性设置方法(8)掌握reset按钮的属性设置方法(9)掌握普通按钮的设置方法(10)学会使用file文件选择框浏览文件(11)学会hidden隐藏框使用方法(12)学会使用多行文本输入框标记在网页中设置多行文本的输入方法(13)掌握cols、rows、wrap等相关属性的设置多行文本区域大小(14)掌握<select></select>标记的基本语4法及size、multiple、name等属性的设置方法(15)学会使用<option>标记设置列表项，学会使用selected属性必将某一选项设为预选项(16)学会运用下拉列表框编写相关网页代码重点：掌握表单标记的基本语法结构以及表单中包含其它标记222、313HTML5基础与CSS3应用 13.1HTML5概述13.2HTML5文档结构 13.3HTML5新增页面元素 13.4HTML5表单 13.5HTML5视频与音频 13.6CSS3基础应用 教学要求：了解HTML5的八个特点 熟悉HTML5的优势 理解HTML5新增结构元素及页面元素了解HTML5废除的元素与属性 了解浏览器支持与选择 了解CSS3新特性 了解CSS3浏览器兼容性及解决方法掌握CSS3多列属性语法及设置方法掌握CSS3文本效果属性语法及设置方法重点：掌握HTML5新增结构元素的语法及使用方法（header、nav、section、articale、footer、aside等）掌握hgroup标记语法及使用方 掌握figure标记与figcaption标记语法及使用方法 掌握mark标记与time标记语法及使用方法 掌握details标记与summary标记语法及使用方法掌握progress标记与meter标记语法及使用方法掌握input标记与datalist标记语法及使用方法掌握HTML5新增的表单属性 掌握CSS3边框属性语法及设置方法难点：掌握HTML5页面结构组成元素 学会使用HTML5新增的表单元素 学会使用HTML5新增的input类型掌握video标记及属性的设置方法掌握audio标记及属性的设置方法掌握CSS3转换transform属性语法及设置方法掌握CSS3过渡transition属性语法及设置方法掌握CSS3动画animation语法及设置方法4314JavaScript基础14.1JavaScript概述14.2JavaScript程序14.3标识符和变量14.4运算符和表达式14.5JavaScript程序控制结构14.6JavaScript函数教学要求：理解JavaScript在Web页面设计中作用及其特点了解JavaScript在HTML中放置的位置了解JavaScript语句类型、语句块标记理解JavaScript函数的作用和基本语法学会使用消息对话框实现页面交互学会使用注释给JS代码增加功能说明掌握标识符、变量命名的规范掌握变量的定义语法及使用方法掌握常用的转义字符使用方法,例如\n、\r、\f、\uhhhh、\\、\”了解运算符和表达式的类型了解循环结构类型及应用场合理解break和continue语句在循环结构中的作用掌握常用系统函数使用方法，如eval()、escape()、unescape()、parseFloat()、parseInt()、isNaN()等全局函数的使用方法，熟练使用对象的函数，如toString()、toFixed（n）、charAt(n)、indexOf()、lastIndexOf()、substring()等。学会使用return返回函数计算结果理解局部变量与全局变量使用区别重点：掌握JavaScript中的基本数据类型，分别是字符串型、数值型、布尔型、Null型、undefined、object型掌握算术、关系、逻辑、赋值、条件运算符的使用方法了解位、逗号、new、delete、typeof等运算符的使用方法掌握顺序结构程序的编写方法掌握if…else分支结构程序的编写方法掌握if…elseif…elseif…else多分支结构及switch多分支结构应用场合和编程方法掌握for、while、do…while、for…in的使用方法掌握自定义函数的使用方法，并学会编程难点：掌握自定义函数的使用方法，并学会编程21、215JavaScript事件处理15.1JavaScript事件概述15.2表单事件15.3鼠标事件15.4键盘事件15.5窗口事件教学要求：理解JavaScript中事件的概念、事件基本类型了解鼠标事件源和事件句柄了解键盘事件源和事件句柄了解窗口事件源和事件句柄重点：掌握JavaScript中主要事件句柄掌握事件处理方法（定静态、动态指定）学会使用事件处理程序的返回值了解表单事件源和事件句柄掌握表单获得焦点、失去焦点事件、提交及重置事件、改变及选择事件处理程序的调用方法掌握鼠标单击、双击、移动事件处理程序的调用方法掌握键盘事件处理程序的调用方法掌握窗口事件处理程序的调用方法4216BOM与DOM模型16.1常用对象16.2HTMLDOM16.3BOM教学要求：了解Boolean对象的使用方法理解HTMLDOM的节点树的基本概念熟悉DOM节点树与HTML文件的映射关系熟悉DOM节点类型学会使用DOM节点操作方法操作HTML页面上的元素，掌握DOM中innerText和innerHTML两个属性的区别，并学会使用；学会获取并设置指定元素的属性理解BOM概念及BOM所包含的对象掌握Window对象属性和常用方法，学会利用window对象进行简单编程理解Navigate对象属性和常用方法，学会利用Navigate对象进行简单编程理解Screen对象属性，学会利用Screen对象进行简单编程理解History对象属性和常用方法，学会利用History对象进行简单编程理解Location对象属性和常用方法，学会利用Location对象进行简单编程重点：掌握Array对象的使用方法掌握Date对象处理和日期相关的方法掌握Math对象处理算术方面的使用方法掌握Number对象的使用方法掌握String对象的使用方法掌握DOM节点的访问方法(通过对象的ID、Name、TagName访问节点)4217HTML5高级应用 17.1HTML5WebStorage 17.2HTML5Canvas画布 17.3HTML5拖放17.4HTML5WebWorkers 教学要求：理解Canvas坐标的概念 了解Canvas路径的常用方法，并学会使用绘制路径的方法了解常用的拖放事件和事件属性 了解dataTransfer对象的常用的属性 熟悉WebWorker的工作原理重点：掌握localStorage对象常用的方法掌握sessionstorage对象常用的方法学会使用浏览器端数据库IndexedDB来存储客户端数据掌握Canvas标记的语法及设置方法掌握Canvas绘制线段的方法(moveTo()、lineTo())掌握Canvas绘制文本的常用方法掌握Canvas渐变的语法及设置方法掌握Canvas绘制图像的方法学会设置元素为可拖放元素掌握拖放操作实现步骤 学会创建WebWorker文件 学会创建WebWorker对象 学会使用终止WebWorker 42、3合计48162.实验部分实验部分的教学内容、基本要求与学时分配见表3。表3实验项目、实验内容与学时实验项目实验内容和要求实验学时对应的课程目标1.HTML基本语法和文档结构实验内容：通过制作基础网页页面，掌握HTML文本标记规则、图像的插入和超链接、列表、表格和框架等标签的综合运用。实验要求：掌握掌握HTML标记语法、元素的嵌套，会初步使用HTML开发工具进行网页设计。41、22.网页中元素的应用实验内容：通过制作登录及注册页面，掌握HTML表单元素、HTML5新增表单元素的运用。实验要求：掌握Web前端页面设计中表单标签、表格标签的使用方法。41、23.CSS样式应用实验内容：利用CSS知识制作一个商城主页页面。实验要求：掌握CSS基础知识方法，会灵活使用CSS各类选择器，并在页面制作中调用选择器。424.页面布局DIV+CSS实验内容：利用CSS知识制作学校主页。实验要求：掌握浮动和定位的多种方法；会综合运用CSS盒模型、配合浮动和定位操作，掌握网页布局排版的方法。43合计16五、教学方法及手段本课程以课堂讲授为主，结合讨论、案例、视频资源共享、作业、实验等教学手段完成课程教学任务和相关能力的培养。学生能够比较全面地理解Web前端知识的基本概念和使用方法，在掌握相关知识方法的基础上，具有网页开发的初步能力。在实验教学环节中，通过启发式教学、讨论式教学、项目式教学培养学生将理论知识转化为动手能力的基本技能，同时培养学生的自主学习能力和实际动手能力，激发学生的创新思维。在实验教学环节中，着重讲授如何用科学的手段来完成理论知识应用于实践的方法；如何组织实验、编写代码和分析实验现象；介绍跨脚本开发的原理、构造和使用及实验内容的思路和方案设计等。采用教师讲授和学生动手操作的方法；在实验前学生应复习和掌握与本实验有关的教学内容、认真阅读相关资料；在实验中要严格遵守实验纪律，按操作规程使用计算机设备；实验结束后，按规定将计算机关机；每完成一项实验，要认真完成一份实验报告。六、课程资源1.推荐教材未来科技.HTML5+CSS3从入门到精通(标准版)[M].中国水利水电出版社,2018.储久良.Web前端开发技术——HTML5、CSS3、JavaScript（第3版）[M].清华大学出版社,2021.2.参考书莫振杰.HTMLCSSJavaScript基础教程Web前端开发精品课[M].人民邮电出版社,2019.李晓斌.移动互联网之路：HTML5+CSS3+jQueryMobileAPP与移动网站设计从入门到精通[M].清华大学出版社,2018.张树明.Web前端设计基础—HTML5、CSS3、JavaScript[M].清华大学出版社,2020.3.期刊袁晓维.“两性一度”背景下web前端开发技术课程的教学改革[J].教育信息化论坛,2022(12):45-47.李娟,李宏博,苏丹等.Web前端开发课程项目式教学改革与实践[J].高师理科学刊,2022,42(10):78-81.刘蕴涵,杨帆,赵玮等.混合式教学在Web前端开发课程中的应用研究[J].计算机时代,2022(08):112-114.王黎,袁礼,吕殿基.Web前端开发课程思政教学设计与实施[J].电脑知识与技术,2022,18(20):142-143.李娟丽.响应式布局在Web前端开发中的使用[J].网络安全技术与应用,2022(06):43-45.Journal|[J]ComputerInformatizationandMechanicalSystem.Volume3,Issue1.2020.4.网络资源万维网联盟：菜鸟教程：网页设计与制作精品课程：/jxdg.htm七、课程考核对课程目标的支撑课程成绩由过程性考核成绩和期末考核成绩两部分构成，具体考核/评价细则及对课程目标的支撑关系见表4。表4课程考核对课程目标的支撑考核环节占比考核/评价细则课程目标123过程性考核课堂表现18（1）根据课堂出勤情况和课堂回答问题情况进行考核，满分100分。（2）以平时考核成绩乘以其在总评成绩中所占的比例计入课

人人文库> 全部分类> 教育资料 > 课设设计

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论