>汽车>>正文

Web前端设计基础教与学(教学大纲)

原标题:Web前端设计基础教与学(教学大纲)

Web前端设计教学大纲

适用专业:计算机科学与技术、软件工程、物联网

课程类别:专业基础课

课程学时:建议68学时

一、课程性质

《Web前端设计基础》课程是计算机科学与技术、软件工程、物联网工程专业的一门专业基础课程,以Web基本概念和Web标准为基准点、通过对Web前端主流开发技术的学习和研究,让学生理解和掌握HTML5、CSS3以及Java脚本语言的相关知识,通过这门课程的教学,不仅使学生通过项目实践培养学生开发和设计Web站点的基本技能,更要使学生充分了解Web思想,为进一步学习后续课程打下良好的基础。

二、课程教学目标与基本要求

本课程的教学目标是让学生理解HTML5、CSS3以及Java脚本语言的基本语法,掌握常用的Web页面布局技术,理解并熟练应用Java常用对象的属性方法,使用DOM技术编写页面的客户端程序,通过项目实训,培养学生具备设计实现Web客户端页面的初步能力。

本课程教学基本要求是让学生理解Web设计的基本原则、栏目和网站目录结构定义、标准页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础知识;能够熟练运用HTML5中的文字、链接、列表、表格、表单、图像、多媒体等标记语言设计制作网页;熟练掌握CSS3对网页进行布局和修饰的基本方法;掌握Java脚本语言的基本语法,理解对象的概念及使用Java来编写客户端脚本程序。

三、课程内容

其中标记★为难点

第1章 Web技术概述

1.1 Internet概述

1.1.1 理解TCP/IP

1.1.2 理解主机和IP地址

1.1.3 理解域名和DNS

1.2 Web概述

1.2.1 了解Web历史

1.2.2 ★掌握Web体系结构

1.2.3 理解基本Web技术

1.2.4 了解Web服务器

1.3 超文本与标记语言

1.3.1 掌握超文本与超媒体

1.3.2 掌握标记语言

1.4 Web标准

1.4.1 ★掌握Web标准体系

1.4.2 了解采用Web标准的优势

1.5 浏览器

1.5.1 了解浏览器的发展史

1.5.2 了解浏览器的内核

1.5.3 了解常用浏览器

1.5.4 掌握标准浏览器

1.6 Web开发工具

1.6.1 掌握JetBrains WebStorm

1.6.2 掌握测试和调试环境

第2章 初识HTML5

2.1 HTML5基础

2.1.1 掌握HTML5文档结构

2.1.2 掌握元素与标签

2.1.3 掌握属性

2.1.4 掌握语法规则

2.2 WebStorm基础

2.2.1 掌握WebStorm基本操作

2.2.2 了解WebStorm快捷键

2.3 文档结构元素

2.3.1 掌握<html>标签

2.3.2 掌握<head>标签

2.3.3 掌握<body>标签

2.4 头部元素

2.4.1 掌握<title>标签

2.4.2 ★掌握<meta>标签

2.5 为叮叮书店首页添加元信息

第3章 HTML5内容结构与文本

3.1 HTML5结构标签

3.1.1 掌握<header>标签

3.1.2 掌握<main>标签

3.1.3 掌握<nav>标签

3.1.4 掌握<article>标签

3.1.5 掌握<section>标签

3.1.6 掌握<aside>标签

3.1.7 掌握<footer>标签

3.1.8 理解<details>和<summary>标签

3.1.9 ★掌握<div>标签

3.1.10 理解<span>标签

3.2 HTML5基础标签

3.2.1 掌握标题

3.2.2 掌握段落

3.2.3 掌握换行符

3.2.4 理解注释

3.3 HTML5格式化标签

3.3.1 理解文本格式化标签

3.3.2 理解引用和术语定义标签

3.3.3 理解HTML5新增格式标签

3.4 HTML5列表

3.4.1 掌握无序列表

3.4.2 掌握有序列表

3.4.3 掌握定义列表

3.5 掌握叮叮书店首页内容结构的建立

3.5.1 分析设计页面内容结构

3.5.2 用HTML5结构标签确定页面内容结构

3.5.3 填加文本内容

3.5.4 在浏览器中预览

第4章 HTML5超连接

4.1 <a>标签

4.1.1 掌握href属性

4.1.2 掌握target属性

4.1.3 掌握使用id属性

4.2 HTML5字符集与颜色

4.2.1 理解HTML5字符集

4.2.2 掌握HTML5字符实体

4.2.3 掌握HTML5颜色

4.3.4 了解HTML5颜色名

4.3 掌握叮叮书店首页超连接的使用

第5章 HTML5多媒体

5.1 HTML5图像

5.1.1 掌握<img>标签

5.1.2 了解<map>标签和<area>标签

5.1.3 理解<figure>标签和<figcaption>标签

5.2 HTML5音视频

5.2.1 掌握HTML5视频

5.2.2 掌握HTML5音频

5.3 了解<embed>标签

5.4 掌握叮叮书店首页图像的使用

第6章 HTML5表格

6.1 表格结构和表格标签

6.1.1 理解表格结构

6.1.2 掌握表格标签

6.2 常用表格标签

6.2.1 掌握<table>标签

6.2.2 掌握<tr>标签

6.2.3 掌握<td>标签

6.2.4 理解<col>标签

6.2.5 了解<thead>、<tbody>和<tfoot>标签

6.3 掌握叮叮书店购物车页面的建立

第7章 HTML5表单

7.1 表单的基本知识

7.1.1 掌握什么是表单

7.1.2 掌握<form> 标签

7.2 表单域

7.2.1 掌握<input>标签

7.2.2 掌握<textarea>标签

7.2.3 掌握<label>标签

7.2.4 理解<fieldset>标签

7.2.5 掌握<select>标签

7.2.6 掌握<option>标签

7.2.7 了解<optgroup>标签

7.2.8 掌握<button>标签

7.2.9 理解<datalist>标签

7.2.10 理解<output>标签

7.3 掌握叮叮书店联系我们页面的建立

7.4 掌握为叮叮书店首页添加站内搜索

第8章 CSS基础

8.1 了解CSS概述

8.2 掌握CSS语法

8.3 掌握CSS常用选择器

8.4 ★掌握CSS3选择器

8.5 CSS属性

8.5.1 掌握CSS属性

8.5.2 掌握CSS属性值和单位

8.5.3 掌握CSS3属性值和单位

8.6 掌握使用CSS

8.7 掌握媒体查询

8.8 ★了解层叠样式

8.9 了解使用Chrome开发者工具检查编辑页面及样式

第9章 页面布局定位

9.1 CSS盒模型

9.1.1 理解CSS盒模型概述

9.1.2 掌握CSS内边距

9.1.3 掌握CSS边框

9.1.4 掌握CSS3边框

9.1.5 掌握CSS外边距

9.1.6 理解CSS轮廓

9.2 CSS布局

9.2.1 ★掌握盒模型显示类型

9.2.2 ★掌握CSS3伸缩盒布局

9.2.3 理解CSS浮动

9.2.4 掌握可见与溢出

9.3 CSS 定位

9.3.1 掌握position属性

9.3.2 掌握z-index属性

9.4 基本布局模板

9.4.1 掌握固定(液态)布局

9.4.2 ★掌握弹性伸缩布局(响应式Web设计)

9.5 掌握叮叮书店首页布局样式设计

第10章 元素外观属性

10.1 背景

10.1.1 掌握CSS背景

10.1.2 掌握CSS3背景

10.1.3 掌握CSS3透明度

10.2 字体

10.2.1 掌握指定字体

10.2.2 掌握指定大小

10.2.3 理解字体风格

10.2.4 理解字体粗细

10.2.5 ★掌握CSS3服务器端字体

10.3 文本与修饰

10.3.1 掌握文本

10.3.2 掌握修饰

10.4 CSS3文本效果

10.4.1 掌握阴影

10.4.2 理解换行

10.5 掌握CSS3多列

10.6 掌握列表

10.7 理解尺寸

10.8 表格

10.8.1 理解表格属性

10.8.2 掌握表格边框控制

10.8.3 理解改善表格显示效果

10.8.4 叮叮书店购物车页面表格样式设计

10.9 掌握叮叮书店首页外观样式设计

10.9.1 文本

10.9.2 背景

10.9.3 其他细节

第11章 伪类和伪元素

11.1 CSS伪类

11.1.1 掌握超连接伪类

11.1.2 ★理解结构性伪类

11.1.3 掌握子元素伪类

11.1.4 掌握UI元素状态伪类

11.2 理解CSS伪元素

11.3 ★掌握CSS内容

第12章 CSS3变换、过渡和动画

12.1 掌握变换

12.2 ★掌握过渡

12.3 掌握动画

12.4 掌握叮叮书店首页超链接、伪类和动画样式设计

第13章 默认样式和页面内容样式设计

13.1 默认样式

13.1.1 了解HTML默认样式

13.1.2 了解浏览器默认样式

13.2 页面内容样式设计

13.2.1 掌握导航菜单

13.2.2 掌握图文混排

第14章 网站制作流程与发布

14.1 了解网站制作流程

14.2 了解模板

14.3 掌握基于模板建立叮叮书店其他页面

14.3.1 书籍分类(category.html)

14.3.2 特刊降价(specials.html)

14.3.3 联系我们(contact.html)

14.3.4 关于我们(about.html)

14.3.5 详细内容(details.html)

14.3.6 购物车(cart.html)

14.4 网站发布

14.4.1 了解Tomcat服务器安装使用

14.4.2 了解发布

第15章 Java和ECMA基础

15.1 Java简介

15.1.1 了解Java历史

15.1.2 理解Java组成

15.1.3 掌握Java使用

15.1.4 掌握Java消息框

15.1.5 了解开发者工具Console

15.2 ECMA基础

15.2.1 掌握ECMA语法基础

15.2.2 掌握ECMA变量

15.2.3 了解ECMA关键字和保留字

15.2.4 掌握ECMA基本数据类型

15.2.5 掌握ECMA类型转换

15.3 掌握ECMA运算符

15.3.1 一元运算符

15.3.2 算术运算符

15.3.3 关系运算符

15.3.4 逻辑运算符

15.3.5 其他运算符

第16章 算法和ECMA语句

16.1 了解算法

16.1.1 算法的概念

16.1.2 简单算法举例

16.1.3 算法特性

16.1.4 算法与程序

16.2 掌握ECMA语句

16.2.1 条件语句

16.2.2 循环语句

16.2.3 break和continue语句

16.3 了解使用WebStorm和Google Chrome调试Java脚本程序

16.4 掌握使用Sources调试Java脚本程序

第17章 行为与对象

17.1 行为

17.1.1 掌握ECMA函数

17.1.2 掌握ECMA闭包

17.1.2 ★掌握HTML事件

17.2 ECMA对象

17.2.1 理解对象

17.2.2 ★理解使用对象

17.2.3 掌握ECMA引用类型

17.2.4 掌握ECMA对象类型

17.3 了解错误处理

17.4 内置对象和本地对象

17.4.1 掌握Math对象

17.4.2 ★理解Global全局对象

17.4.3 掌握Array对象

17.4.4 掌握Date对象

17.5 掌握叮叮书店首页显示日期和时间

第18章 DOM

18.1 DOM概述

18.1.1 了解DOM简介

18.1.2 掌握节点的节点树

18.2 DOM对象

18.2.1 理解Node对象

18.2.2 ★理解HTMLElement对象

18.2.3 理解HTMLDocument对象

18.2.4 掌握访问节点

18.3 DOM与CSS

18.3.1 理解Style对象

18.3.2 理解CurrentStyle对象

18.3.3 理解StyleSheet对象

18.4 掌握叮叮书店首页图片轮播广告的实现

第19章 HTML DOM对象和RegExp对象

19.1 HTML DOM对象

19.1.1 掌握Document对象

19.1.2 掌握Image对象

19.1.3 掌握Anchor对象

19.1.4 ★掌握Event对象

19.1.5 掌握Checkbox和Radio对象

19.1.6 理解FileUpload对象

19.1.7 掌握Text和Password 对象

19.1.8 理解Textarea对象

19.1.9 掌握Select和Option对象

19.1.10 掌握Submit、Reset和Button对象

19.1.11 掌握Form对象

19.1.12 了解一个小游戏——剪子石头布

19.2 理解RegExp对象

19.3 掌握叮叮书店联系我们页面表单数据验证

第20章 HTML5 DOM

20.1 canvas对象

20.1.1 掌握canvas基础

20.1.2 掌握使用路径

20.1.3 掌握绘制文本

20.1.4 掌握绘制图像

20.2 ★掌握HTML5拖放

20.3 HTML5数据存储

20.3.1 了解sessionStorage对象

20.3.2 了解localStorage对象

20.4 掌握叮叮书店书籍分类页面拖放图书到购物车

第21章 BOM

21.1 BOM对象

21.1.1 掌握window对象

21.1.2 掌握navigator对象

21.1.3 理解screen对象

21.1.4 理解location对象

21.1.5 理解history对象

21.2 ★理解元素大小与位置

21.3 掌握叮叮书店首页浮动广告

第22章 Ajax与JSON

22.1 掌握Ajax

22.2 对象

22.1.1 掌握创建对象

22.1.2 ★掌握请求

22.1.3 ★掌握响应

22.3 JSON

22.3.1 掌握JSON语法

22.3.2 掌握JSON使用

第23章 jQuery入门

23.1 jQuery基础

23.1.1 了解添加jQuery库

23.1.2 了解jQuery语法

23.2 了解特效和动画

23.3 了解HTML操作

23.4 了解AJAX函数

23.5 了解叮叮书店试读页面的建立

四、学时分配

教学周次 教 学 内 容 教学环节(学时)
讲课 习题 实验 上机 课外 小计
1 第1章 Web技术概述 2 2 2
2 第2章 初识HTML5 2 2 2
3 第3章 HTML5内容结构与文本 2 2 4
4 第4章 HTML5超连接第5章 HTML5多媒体 2 2 2
5 第6章 HTML5表格第7章 HTML5表单 2 2 4
6 第8章 CSS基础 2 2 2
7 第9章 页面布局定位 2 2 2
8 第9章 页面布局定位 2 2 4
9 第10章 元素外观属性 2 2 4
10 第11章 伪类和伪元素 2 2 2
11 第12章 CSS3变换、过渡和动画 2 2 4
12 第13章 页面内容样式设计第14章 网站制作流程与发布 2 2 2
13 第15章 ECMA基础第16章 ECMA语句 2 2 2
14 第17章 行为与对象 2 2 4
15 第18章 DOM第19章 HTML DOM对象 2 2 4
16 第20章 HTML5 DOM 2 2 4
17 第21章 BOM第22章 Ajax与JSON 2 2 2
总 计 34 18 16 68

五、实验安排

本课程需要安排实验课,以引导学生正确运用所学知识解决实际问题,实验方法和步骤参见教材。

序号 教学周次 实验名称 类型 学时
1 3 HTML5内容结构和文本 综合 2
2 4 HTML5超连接和多媒体 综合 2
3 5 HTML5表格和表单 综合 2
4 8 CSS3布局与定位 综合 2
5 9 CSS3元素外观样式设计 综合 2
6 11 CSS3动画 综合 2
7 14 行为与对象及DOM 综合 2
8 15 HTML DOM表单数据验证 综合 2
9 16 HTML5 DOM 综合 2

六、考核方式及要求

考核方式为考查,成绩为百分制,再折合成优秀、良好、中等、及格、不及格。

总成绩 = 平时成绩(45%)+课堂实验(25%)+ 实验测试(30%)

平时过程考核标准细则

预习作业(20%) 把预习记录和预习思考题及课下作业写在固定笔记本上,每学期批阅4次,每次满分5分。评分标准:预习记录和预习思考题及课下作业完整并正确。(5分)。预习记录和预习思考题及课下作业完整但有个别错误。(4分)。预习记录和预习思考题及课下作业完整但错误较多。(3分)。预习记录和预习思考题及课下作业不完整但正确。(未完成作业)(2分)预习记录和预习思考题及课下作业不完整并且有错误。(未完成作业)(1分)未及时交作业或复制抄袭。(0分)特别说明:如果多人预习作业完全一样,先批阅的按正常评分标准给分,后续批阅的依次降2分,一直到零分。
学习状态(10%) 出勤:病事假以请假条为准,没有请假条一律视为旷课,没有急特殊情况请假条不允许后补,缺勤一次扣2.5分。请假超过4次以上,超过部分不能参加平时过程考核,旷课超过4次以上视为放弃课程考核。学习状态:学习状态差如迟到、早退、上课吃零食、睡觉、玩游戏等每发现一次扣2分。
平时测试(15% 平时测试共3次,每次5分,按卷面分记载。
课堂实验(25% 课堂实验从所有实验中选取5次记入考核成绩,每次满分5分。评分标准:完成实验、代码正确,能够在标准浏览器正确显示。(5分)。完成实验、代码不正确,能够在标准浏览器正确显示。(4分)。完成实验、代码不正确,不能够在标准浏览器正确显示。(3分)。未完成实验、代码正确。(2分)。未完成实验、代码不正确。(1分)。未提交实验。(0分)复制抄袭:发现抄袭或复制者,第一次记为最低等,也就是零分,第二次直接在期末总成绩中扣减20分。

实验测试

在规定时间内(90分钟)完成一个指定形式主页的建立。评分标准如下:

评分项 分值30
文档结构 3
内容填充 3
标准布局 4
导航菜单 2
内容样式 6
脚本代码 8
整体效果 4

七、教材

扫描,优惠购书

作者:张树明

定价:79.50元

ISBN:9787302516286

出版日期:2019.04.01

本书基于Web标准和响应式Web设计思想深入浅出地介绍了Web前端设计技术的基础知识,对Web体系结构、HTML5、CSS3、Java和网站制作流程进行了详细的讲解,内容翔实,结构合理,语言精练,表达简明,实用性强,易于自学。

全书共分23章。第1章介绍了Web技术的基本概念、Web体系结构、超文本与标记语言、Web标准的组成和常用浏览器;第2~7章重点介绍了Web标准的结构推荐标准HTML5的常用元素的标签语句及应用;第8~13章介绍了Web标准的表现推荐标准CSS3的常用属性及应用;第14章介绍了网站制作流程与发布过程;第15~22章介绍了Web标准的行为标准ECMA-262的ECMA基础和Java脚本语言;第23章介绍了Java框架jQuery的入门知识。扫描每章提供的二维码可观看知识点的视频讲解及下载程序源码。

八、视频赏析返回搜狐,查看更多

责任编辑:

声明:该文观点仅代表作者本人,搜狐号系信息发布平台,搜狐仅提供信息存储空间服务。
阅读 ()
投诉
免费获取
今日搜狐热点
今日推荐