菏泽学院计算机学院

《Web开发基础》课程教学大纲

课程编号:136032

课程名称:Web编程基础/ Web Application Foundation

学时/学分:64学时/3学分

适用专业:计算机科学与技术专业、网络工程专业

一、课程简介

《Web开发基础》是以网络为平台的人机交互方式，是一门技术与艺术有机结合的学科。本课程系统、扼要的介绍Web开发的基本概念，基本理论，从基本知识、基本理论、实际运用的角度为学生提供较为全面、系统、准确的Web开发知识体系。通过本课程的学习，使学生掌握HTML语言的语法规则常见元素标记及属性，掌握CSS基本语法，掌握DIV布局，掌握Javascript脚本编程语言的基本语法知识并实现网页交互及其他特殊效果，能根据已有效果设计出相应网页，能自行设计艺术性网页，为后续课程的学习打下基础，也可为今后从事前端开发相关工作打下基础。

二、教学目的与任务

教学目的:通过本课程的学习，使学生建立规范化编码的思想，掌握Web开发基本知识，加强对Web开发模式的理解；熟悉Web开发的基本理论；了解当前使用的Web开发最新技术；培养学生编写代码的能力，为学生走向工作岗位积累初步的编程经验。

课程任务:《Web开发基础》是以网络为平台的人机交互方式，是一门技术与艺术有机结合的学科。本课程按照学校一体两翼，三经四维，五个保障的人才培养模式安排教学任务。

三、教学基本要求

知识传授:《Web编程基础》课程主要讲授HTML、CSS和Javascript的相关技术，通过学习HTML、CSS+DIV+Flex、Javascript、JQuery等相关技术，通过对本课程的学习,使学生系统了解网页、网站的概念、网页主要工具软件Dreamweaver的使用等基础知识，使学生理解网页设计一般性原则，具有标准化开发网页、网站制作的知识与能力；熟练掌握HTML基本标记；重点掌握CSS语法及使用CSS+DIV+Flex布局页面；理解Javascript基本语法、Javascript内置对象；重点掌握Dom编程相关技术；掌握JQuery相关技术；了解Bootstrap响应式框架、了解前端页面开发技术；熟练的使用Dreamweaver网页制作软件。

能力方面:课程在教学过程中通过实践教学培养学生的代码编写能力，通过项目培养学生自学能力，通过学习经典网站的网站设计和颜色搭配培养学生审美能力和设计能力，通过班级比赛形式激发学生设计网页的兴趣和创新能力，通过规范化设计思想培养学生规范化书写代码的能力。在学习专业知识的同时注重培养学生谦虚、严谨的求知态度，为后续课程的学习及工作打下能力基础。通过本课程的学习，可使学生养成良好的代码编写能力，了解计算机相关技术的自学能力，了解网站设计基本结构，设计思路，培养学生审美能力和设计能力，培养学生的规范化代码书写能力。

素质方面:

1.思想政治素质:具有中国特色社会主义共同理想，秉承社会主义核心价值观；具有爱国主义精神；具有责任心和社会责任感。

2.文化科技素质:具有不断更新知识和自我完善的能力；具有持续学习和终身学习的能力；具有一定的创新意识、创新精神和创新能力；具有一定的人文和艺术设计素养；具有良好的人际沟通能力。

3.专业素质:在培养学生制作静态网页技术的过程中，注重培养学生规范化设计页面，规范代码的习惯，注重学生培养审美素质，为今后从事计算机软件开发、前端设计打下素质基础。

4.职业素质:具有良好的职业道德和职业操守；具有较强的组织观念和集体意识; 有耐心，精益求精，让网页尽善尽美。

5.身心素质:具有人文素养、审美能力、团结协作精神，具有健康的体魄和良好的心理素质，社会适应能力。

考核方式为平时作业+期末考核，平时作业由课上布置，学生课下完成；期末考核指学生在规定时间设计并提交符合要求的网页作品。

四、教学内容与学时分配

(一) 网页设计基础知识（2学时）

1. 知识点:

（1） 网站和网页的基本概念

（2） 了解网页设计基本原则

（3） 熟悉网站开发基本流程

（4） 了解一般性审美原则

2. 实践教学内容:理解

（1） 网站和网页概述

（2） 网站开发的基本流程

（3） HTML概述、html4.0、xhtml1.0

（4） 网页设计中结构与表现分离原则

（5） 简单色彩搭配

3. 重点与难点:

网页设计结构与表现分离原则

(二) HTML基本标记 （8学时）

1. 知识点:

（1） HTML的基本结构:html、head、body、title、meta、link、script、style等及其属性

（2） 文本、图像、超链接标记:p、br、hn、b、img、map、a等及其属性

（3） 列表、表格标记:ul、ol、li、dd、dt、table、tr、td、tbody、th等及其属性

（4） 表单标记:表单域、单行多行文本域、密码域、单选复选按钮和标签、提交重置按钮、图像按钮、隐藏域、文件域、下拉菜单等及其属性、表单提交方法

（5） 在框架标记:frameset、frame、iframe及其属性

（6） 通用属性:id、name、class、style等

（7） 基础块元素span和行内元素div

2. 实践教学内容

（1） 能够设计出符合标准化开发模式的HTML基础页面，如图像文件夹、结构表现分离等

（2） 设计页面包含:首页、内容页、列表页、登录注册页、后台页，其中首页、内容页、列表页、登录注册页使用表格布局，后台页使用框架布局

（3） 页面中内容包含文本标记、列表标记、表格标记、图像标记、表单标记、超链接标记

（4） 页面中标记属性必须符合设计要求，表单标记能提交

（5） 内容丰富、设计合理、配色方案合理、符合一般性审美原则

3. 难点与重点

（1） 表单属性及提交方法

（2） 使用表格设计网页布局

（3） 使用框架布局设计后台页面

（4） 块元素和行内元素

(三) CSS基础（8学时）

1. 知识点:

（1） 常见CSS样式属性:字体、边框、背景、链接、列表、表格、轮廓等

（2） CSS选择器:标记选择器、id选择器、类选择器、伪类选择器、复合选择器、高级选择器等

2. 实践教学内容

（1） 应用盒子模型设计表单、表格、单元格、内容框

（2） 应用定位技术定位页面图片元素、页面下拉菜单、导航条、选项卡

3. 难点与重点

（1） 使用盒子模型设计表单、内容框

(四) CSS+DIV布局（10学时）

1. 知识点:

（1） 页面元素的浮动、定位

（2） 页面的DIV+CSS布局

（3） flex的使用

2. 实践教学内容

（1） 使用DIV+CSS布局修改实践教学（二）设计的页面

（2） 应用盒子模型修改实践教学（二）页面表单、表格、单元格、内容框

（3） 应用定位技术定位实践教学（二）页面图片元素、页面下拉菜单、导航条、选项卡

（4） 使用Flex布局设计图片列表页

3. 难点与重点

（1） 使用DIV+CSS布局修改实践教学（二）设计的页面

（2） 使用盒子模型设计表单、内容框

(五) Javascript基础（12学时）

1. 知识点:

（1） Javascript基于对象编程概念

（2） Javascript数据类型、变量、对象、运算符、基本逻辑语句、数组

（3） Javascript函数

（4） Javascript事件

2. 实践教学内容

（1） 使用Javascript在页面中输出金字塔、乘法表

（2） 使用Javascript制作简单购物车

（3） 使用Javascript进行简单表单页面验证

（4） 使用Javascript制作下拉式导航条、选项卡、浮动广告、弹出广告等

3. 难点与重点

（1） 使用Javascript进行简单表单页面验证

（2） 使用Javascript制作下拉式导航条、选项卡、浮动广告、弹出广告等

(六) Javascript高级技术（12学时）

1. 知识点:

（1） BOM和DOM的概念

（2） Javascript内置对象的主要属性及方法

（3） 正则表达式验证简单字符串

（4） Javascript在HTML表单中的简单验证技术

（5） Javascript特效制作原理

2. 实践教学内容

（1） 使用Javascript对HTML表格数据增删改查

（2） 使用Javascript制作小游戏

（3） 使用正则表达式对字符串进行验证

3. 难点与重点

（1） 使用Javascript对HTML表格数据增删改查

（2） 使用Javascript制作小游戏

(七) 前端开发相关技术（2学时）

1. 知识点:

（1） JQuery基本语法、选择器、事件编程、一般特效

（2） HTML5

（3） CSS3.0

（4） Bootstrap

2. 教学内容:

（1） JQuery基本语法、选择器、事件编程、一般特效

（2） HTML5新增标记及应用

（3） CSS3.0新增属性

（4） 使用Bootstrap框架开发页面

(八) 网页设计综合应用（10学时）

1. 知识点:

综合本课程所学内容，对知识点进行梳理分析，使用相关技术，结合标准化前端页面开发方法，根据一般性网站开发步骤和网页配色方案，制作指定内容的网页。

2. 实践教学内容

（1） 制作主页页面、内容页页面、列表页页面、搜索页页面。要求:应用前述技术实现导航条、内容模块、列表、背景等，实现内容结构表现行为分离，页面整洁美观、符合大众审美、内容丰富、色彩搭配合理。

（2） 制作后台注册、登录、管理页面，求:注册页和登录页实现页面表单验证，管理页面使用1-2框架，顶部框架为个人信息页面，左侧为导航窗格页面，右侧为内容窗格页面。其中左侧使用Javascript或JQuery实现滑动菜单。

3. 重点与难点:

（1） 网页配色方案

五、教学方法及手段

根据学生的实际情况，结合本课程内容多，课时少的特点，为提高教学效果，实现课程的教学目标，贯彻“以学生为主体，教师为主导”的教学理念，课程采用以任务驱动、线下线上相结合的混合式教学模式，鼓励学生通过自主学习、小组合作的方式学习，以培养他们的自主学习能力。

兴趣是最好的老师，在教学过程中将以兴趣为先导，精心设计上机练习题目，重上机实践，培养学生分析问题、解决问题、动手实践能力以及团队协作能力。鼓励学生多角度思考问题，对同一问题提供多种算法，培养学生的创新思维。

1．课前准备。

通过集体备课，教师把课程内容按知识点的录成微课，并根据本次课的教学重难点制作了自主学习任务单，同时搜集了一些网络课程、大学MOOC平台。

课前教师把微课、自主学习任务单、课件、网络课程、案例、试题、相关资源通过教学平台发布。学生主要根据有指导性的学习资源自主学习，并能完成针对性的测验，对疑难问题可以通过网络自主解决，也可以课下和同学讨论或者在平台给老师留言。教师根据学生的反馈进行备课。

2．课堂教学。

课上教师根据测验和学生的留言，让学生以小组探究、讨论交流、相互评论的方式解决疑难，过程中师生互动，教师同时记录学生课堂表现，并对其进行量化。

3．课后反思。

“知止而后有定，定而后能静，静而后能安，安然后能虑，虑而后能得。”总结反思即对学习过程的简要归结，其本身是学习提高的过程。于学生而言，总结反思有助于增强原有知识节点之间的关联性，调整知识网络体系的内部结构。通过总结反思，随时监控学习过程中使用的学习策略、学习方法得当与否，以便在下一次学习中有更好的体验；于教师而言，有助于认识到教学过程中的得与失，从而不断优化教学设计。

4．自主课外编程实践。

以在线测评系统为辅助学习手段，结合传统教学和在线实践各自的优点，将在线训练方式应用于程序设计教学中，培养学生兴趣，提高学生实践能力，改变学生被动接受式的学习方式，主动构建知识体系，自主探究式学习。

六、实验或上机内容

实验1:HTML基本标记。

实验2:表格、表单、框架。

实验3:CSS基础。

实验4:CSS+DIV布局设计页面。

实验5:Javascript基础。

实验6:Dom编程。

实验7:页面动态效果设计。

实验8:页面综合设计。

具体要求见教学内容。

七、先修课程、后续课程

先修课程:无

后续课程:《Web应用开发》（JavaWeb）、《Web应用开发》（ASP.NET）、《Web前端开发技术》、《框架编程技术》等。

八、考核方式

本课程采用实验+期末项目制作的考试形式，实验项目按8个实验要求制作，期末项目制作内容为按要求制作网站。

实验报告成绩占30%，期末项目成绩占70%。

九、教材及主要参考资料

[1] 孙更新.《网页设计与制作—HTML+CSS+Javascript》. 人民邮电出版社，2014年6月

[2] 胡晓霞.《HTML+CSS+Javascript网页设计从入门到精通》.清华大学出版社, 2017年10月

[3] 缪亮、陶颖.《Web前端设计与开发——HTML5+CSS3+Javascript-微课版》.清华大学出版社，2017年10月

[4] 龙马高新教育.《网页设计与网站建设从入门到精通》. 北京大学出版社，2017年11月

[5] 余兰亭.《网页设计 从界面布局到视觉表现》. 人民邮电出版社，2017年2月

[6] 吴丰.《HTML5+CSS3 Web前端设计基础教程》. 人民邮电出版社，2017年2月

学习平台:

[1] W3Cschool网站:http://www.w3school.com.cn

[2] 超星尔雅网络课程平台课程《Web开发基础》（建设中）

[3] 网易云课堂.网站:http://study.163.com/

[4] 腾讯课堂.网站:https://ke.qq.com/