《Web程序设计基础》课程简介与教学大纲

《Web程序设计基础》课程简介及教学大纲《Web程序设计基础》课程简介课程编号：JX02L1146课程结构：专业教育平台/必修学分/学时：3学分/48学时先修课程：Java程序设计基础适用专业：软件工程内容简介：《Web程序设计基础》是软件工程专业的一门专业课程，本课程介绍Web程序设计所必须的基本知识：HTML、CSS和JavaScript：包括制作HTML页面的各种标记元素，包括页面标记、文本和段落、超链接、列表、表格、表单、图像、多媒体、区块；CSS规则、选择器、页面布局技术；JavaScript语言基础、程序控制结构、BOM和DOM编程。通过对本课程的学习，使学生理解和掌握HTML、CSS、JavaScript的基本语法，掌握常用的Web页面布局技术，理解并熟练应用JavaScript常用的对象的属性与方法，熟练地使用DOM技术编写页面交互的客户端程序，培养学生开发和设计Web站点的基本操作技能和工作岗位适应能力。参考教材、著作或参考资料：[1]储久良．Web前端开发技术（第3版）[M]．北京：清华大学出版社，2018．[2]储久良．Web前端开发技术实验与实践（第3版）[M]．北京：清华大学出版社，2018．[3][美]RobertW．Sebesta．Web程序设计（第8版）[M]．北京：清华大学出版社，2015．

FoundationofWebProgrammingCourseDescriptionTerm：3-1CourseTitle：FoundationofWebProgrammingCourseCode：JX02L1146PrerequisiteCourses：FoundationofJavaProgrammingCredit/Hours：3/48CourseDescription：FoundationofWebProgrammingisaprofessionalcourseinsoftwareengineeringthatcoversthebasicsnecessaryforWebprogramming:HTML,CSS,andJavaScript:includingvariousmarkupelementsformakingHTMLpages,includingpagemarks,textandparagraphs,hyperlinks,lists,tables,forms,forms,image,multimedia,block;CSSrules,selectors,pagelayouttechnology;JavaScriptlanguagefoundation,programcontrolstructure,BOMandDOMprogramming．Throughthestudyofthiscourse,studentscanunderstandandmasterthebasicsyntaxofHTML,CSS,JavaScript,masterthecommonlyusedWebpagelayouttechnology,understandandskillfullyapplythepropertiesandmethodsoftheobjectscommonlyusedinJavaScript,andskillfullyuseDOMtechnologytowriteclientprogramsforpageinteraction．DevelopanddesignbasicoperationalskillsandjobadaptabilitytoWebsites．

《Web程序设计基础》课程教学大纲一、课程基本信息1．课程编号：JX02L11462．课程名称：Web程序设计基础3．课程结构：专业教育平台/必修4．学时/学分：48学时/3学分5．先修课程：Java程序设计基础6．适用专业：软件工程二、课程任务和目的《Web程序设计基础》是软件工程专业的一门专业课程，本课程介绍Web程序设计所必须的基本知识：HTML、CSS和JavaScript：包括制作HTML页面的各种标记元素，包括页面标记、文本和段落、超链接、列表、表格、表单、图像、多媒体、区块；CSS规则、选择器、页面布局技术；JavaScript语言基础、程序控制结构、BOM和DOM编程。通过对本课程的学习，使学生理解和掌握HTML、CSS、JavaScript的基本语法，掌握常用的Web页面布局技术，理解并熟练应用JavaScript常用的对象的属性与方法，熟练地使用DOM技术编写页面交互的客户端程序，培养学生开发和设计Web站点的基本操作技能和工作岗位适应能力。三、课程教学内容及要求本课程主要教学内容分为四大部分：第一部分：Web基础知识理解Web前端开发与设计的基本原则、Web网站的目录结构定义、主流页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础知识。掌握网站规划、设计、制作、管理、发布的相关技术及Web前端设计的操作技能。第二部分：HTML超文本标记语言熟练运用HTML中的文字、链接、列表、表格、表单、图像、多媒体、框架标记及属性设计出框架网页、表格与表单网页、多媒体动态网页。第三部分：CSS层叠样式表掌握CSS基本概念，样式表的层次，样式说明格式，选择器格式，属性值的格式，字体属性，列表属性，文本对齐，颜色，盒子模型，背景图片。掌握使用DIV+CSS结合技术进行网页布局的基本方法。第四部分：JavaScript脚本语言掌握JavaScript脚本语言的基本语法知识，HTML中JavaScript程序的嵌入方法，理解对象的概念及使用JavaScript来进行开发、维护、管理和设置Web应用程序；掌握综合网站设计和发布的基本流程和方法。四、课程教学安排（一）理论教学内容（36学时）第1章Web基础知识（4学时）1．教学内容简介本课程的性质、任务与教学目标；本课程教学内容，教学方法，教学进程，教学组织，训练环节与载体，考核形式与基本要求，使用教材、参考书与其他相关课程资源。讲解Internet、万维网构成。2．教学重点及难点重点：Web工作原理；掌握WebStorm、VSCode、SublimeText、HBuilder等开发工具；Chrome、Firefox等浏览器调试工具。难点：超文本传输协议概念。3．基本要求（1）掌握Web工作原理，Web相关概念，掌握URL构成、Web服务器、超链接基本概念。（2）理解HTML概念及在网页中的作用。（3）理解CSS在Web页面设计中作用。（4）理解JavaScript在Web页面设计中作用。（5）掌握WebStorm、VSCode、SublimeText、HBuilder等开发工具。（6）掌握Chrome、Firefox等浏览器调试工具。4．培养的能力学会使用Web开发及调试环境，编写Web程序代码的能力。第2章HTML概述及文本段落标记（2学时）1．教学内容讲解HTML的起源和演变，HTML基本语法，HTML文档的标准结构，HTML基本的文本、段落标记。2．教学重点及难点重点：HTML基本语法；HTML文档的标准结构。难点：文本、段落标记应用。3．基本要求（1）理解HTML文档组成结构。（2）掌握HTML头部标记作用及标题标记、元信息meta标记的语法。（3）掌握主体标记主要属性及其设置方法。（4）掌握标记类型语法及HTML属性语法。（5）掌握文本修饰标记的使用方法。（6）了解计算机输出标记的使用方法。（7）掌握字体font标记的face、size、color属性语法。（8）掌握段落p标记语法及align属性的设置，换行、水平分隔线、块引用等标记的使用。4．培养的能力学会HTML文档编写。第3章HTML列表、超链接、图像、多媒体标记（2学时）1．教学内容讲解HTML列表、超链接、图像、多媒体标记。2．教学重点及难点重点：列表、超链接、图像标记。难点：无序列表与有序列表嵌套的方法；超链接基本语法及href、target、title等属性的设置方法。3．基本要求（1）理解HTML文档组成结构。（2）了解列表的定义和常用列表的分类。（3）掌握无序列表基本语法。（4）掌握有序列表基本语法。（5）掌握无序列表与有序列表嵌套的方法。（6）掌握超链接基本语法及href、target、title等属性的设置方法。（7）掌握<img>标记基本语法。（8）掌握<audio><video>标记基本语法。4．培养的能力学会HTML常用标记应用。第4章HTML表格和表单标记（4学时）1．教学内容讲解表格、表单标记基本语法及其应用。2．教学重点及难点重点：<table>标记语法及所有表格标记的语法；<form>表单标记的基本语法结构以及表单中包含其它标记。难点：单元格跨行跨列属性rowspan、colspan设置方法；表格嵌套技术；文本输入框的属性设置。3．基本要求（1）掌握<table>标记语法及所有表格标记的语法。（2）会利用<table><tr><td>绘制简易表格。（3）掌握单元格跨行跨列属性rowspan、colspan设置方法。（4）学会运用表格嵌套技术实现一般网页布局。（5）掌握<form>表单标记的基本语法结构以及表单中包含其它标记。（6）掌握文本输入框的属性设置方法。（7）学会使用多行文本输入框标记在网页中设置多行文本的输入方法。（8）掌握<select></select>标记的基本语法及size、multiple、name等属性的设置方法。4．培养的能力学会HTML表格表单标记应用。第5章CSS基础（2学时）1．教学内容CSS基本概念，样式表的层次，样式说明格式，选择器格式，<span>标签和<div>标签。2．教学重点及难点重点：CSS的基本语法；CSS选择器类型声明定义；CSS定义与引用方法。难点：CSS选择器类型声明定义。3．基本要求（1）了解CSS基本概念。（2）掌握CSS的基本语法。（3）掌握CSS选择器类型。（4）掌握CSS定义与引用方法。（5）掌握div定义方法及div图层的属性。（6）理解div标记与span标记的使用区别。4．培养的能力学会CSS层叠样式表的编写。第6章CSS样式属性（2学时）1．教学内容讲解CSS属性值的格式，字体属性，列表属性，文本对齐，颜色，盒子模型，背景图片。2．教学重点及难点重点：CSS属性中绝对单位与相对单位；颜色属性的设置方法。难点：CSS盒模型结构。3．基本要求（1）掌握CSS属性中绝对单位与相对单位。（2）掌握字体font属性的设置方法。（3）掌握颜色属性的设置方法。（4）掌握背景属性background的设置方法。（5）掌握列表属性list-style-type、list-style-image、list-style-position等属性设置方法。（6）理解CSS盒模型结构。（7）学会设置边界margin、边框属性border、填充属性padding及其子属性的设置方法。4．培养的能力学会CSS属性设置及应用。第7章CSS页面布局（4学时）1．教学内容讲解CSS页面布局技术，使用DIV+CSS进行页面布局。2．教学重点及难点重点及难点：CSS页面布局技术。3．基本要求（1）能够根据常规页面布局编写出DIV结构和定义出CSS样式。（2）学会使用DIV+CSS实现简单Web页面布局。（3）掌握一级水平导航菜单的设计方法。（4）掌握二级水平导航菜单的设计方法。（5）掌握分栏分列页面布局设计方法。（6）掌握三帧布局页面设计方法。4．培养的能力学会使用CSS进行页面布局。第8章JavaScript基础1（4学时）1．教学内容讲解JavaScript基本概念，面向对象和JavaScript，JavaScript语法特征，基本数据类型、操作和表达式，数组。2．教学重点及难点重点：JavaScript数组的作用和基本语法。难点：JavaScript代码调试。3．基本要求（1）了解JavaScript在HTML中放置的位置。（2）了解JavaScript语句类型、语句块标记。（3）学会使用消息对话框、console代码调试。（4）掌握标识符、变量命名的规范。（5）掌握JavaScript中的基本数据类型。（6）掌握运算符和表达式应用。（7）理解JavaScript数组的作用和基本语法。4．培养的能力学会JavaScript程序的编写及调试。第9章JavaScript基础2（4学时）1．教学内容讲解JavaScript程序控制结构和常用内置对象。2．教学重点及难点重点：if…else分支结构及switch多分支结构；for、while、do…while、for…in的使用方法。难点：JavaScript函数对象及其方法使用。3．基本要求（1）掌握顺序结构程序的编写方法。（2）掌握if…else分支结构及switch多分支结构应用场合和编程方法。（3）掌握for、while、do…while、for…in的使用方法。（4）理解break和continue语句在循环结构中的作用。（5）掌握全局函数的使用方法。（6）熟练使用内置对象的函数。（7）掌握自定义函数的使用方法。4．培养的能力学会JavaScript程序控制结构编写及调试，常用内置对象的应用。第10章JavaScriptBOM编程（4学时）1．教学内容讲解浏览器对象模型（BOM），及其编程方法。2．教学重点及难点重点：浏览器对象模型（BOM）概念。难点：window对象；Location对象；History对象。3．基本要求（1）理解BOM概念及BOM所包含的对象。（2）掌握Window对象属性和常用方法，学会利用window对象进行简单编程。（3）理解Navigate对象属性和常用方法，学会利用Navigate对象进行简单编程。（4）理解Screen对象属性，学会利用Screen对象进行简单编程。（5）理解History对象属性和常用方法，学会利用History对象进行简单编程。（6）理解Location对象属性和常用方法，学会利用Location对象进行简单编程。4．培养的能力学会JavaScript浏览器对象模型（BOM）编程。第11章JavaScriptDOM编程（4学时）1．教学内容讲解文档对象模型（DOM），在JavaScript中访问元素，事件与事件处理，主体元素的事件处理，按钮元素的事件处理，文本框和密码框元素的事件处理，DOM事件模型，DOM树的遍历和修改。2．教学重点及难点重点：文档对象模型（DOM