 Web前端设计教学大纲 适用专业：计算机科学与技术、软件工程、物联网 课程类别：专业基础课 课程学时：建议68学时 一、课程性质 《Web前端设计基础》课程是计算机科学与技术、软件工程、物联网工程专业的一门专业基础课程，以Web基本概念和Web标准为基准点、通过对Web前端主流开发技术的学习和研究，让学生理解和掌握HTML5、CSS3以及JavaScript脚本语言的相关知识，通过这门课程的教学，不仅使学生通过项目实践培养学生开发和设计Web站点的基本技能，更要使学生充分了解Web思想，为进一步学习后续课程打下良好的基础。 二、课程教学目标与基本要求 本课程的教学目标是让学生理解HTML5、CSS3以及JavaScript脚本语言的基本语法，掌握常用的Web页面布局技术，理解并熟练应用JavaScript常用对象的属性方法，使用DOM技术编写页面的客户端程序，通过项目实训，培养学生具备设计实现Web客户端页面的初步能力。 本课程教学基本要求是让学生理解Web设计的基本原则、栏目和网站目录结构定义、标准页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础知识；能够熟练运用HTML5中的文字、链接、列表、表格、表单、图像、多媒体等标记语言设计制作网页；熟练掌握CSS3对网页进行布局和修饰的基本方法；掌握JavaScript脚本语言的基本语法，理解对象的概念及使用JavaScript来编写客户端脚本程序。 三、课程内容 其中标记★为难点 第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章 JavaScript和ECMAScript基础 15.1 JavaScript简介 15.1.1 了解JavaScript历史 15.1.2 理解JavaScript组成 15.1.3 掌握JavaScript使用 15.1.4 掌握JavaScript消息框 15.1.5 了解开发者工具Console 15.2 ECMAScript基础 15.2.1 掌握ECMAScript语法基础 15.2.2 掌握ECMAScript变量 15.2.3 了解ECMAScript关键字和保留字 15.2.4 掌握ECMAScript基本数据类型 15.2.5 掌握ECMAScript类型转换 15.3 掌握ECMAScript运算符 15.3.1 一元运算符 15.3.2 算术运算符 15.3.3 关系运算符 15.3.4 逻辑运算符 15.3.5 其他运算符 第16章 算法和ECMAScript语句 16.1 了解算法 16.1.1 算法的概念 16.1.2 简单算法举例 16.1.3 算法特性 16.1.4 算法与程序 16.2 掌握ECMAScript语句 16.2.1 条件语句 16.2.2 循环语句 16.2.3 break和continue语句 16.3 了解使用WebStorm和Google Chrome调试JavaScript脚本程序 16.4 掌握使用Sources调试JavaScript脚本程序 第17章 行为与对象 17.1 行为 17.1.1 掌握ECMAScript函数 17.1.2 掌握ECMAScript闭包 17.1.2 ★掌握HTML事件 17.2 ECMAScript对象 17.2.1 理解对象 17.2.2 ★理解使用对象 17.2.3 掌握ECMAScript引用类型 17.2.4 掌握ECMAScript对象类型 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 XMLHttpRequest对象 22.1.1 掌握创建XMLHttpRequest对象 22.1.2 ★掌握XMLHttpRequest请求 22.1.3 ★掌握XMLHttpRequest响应 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 了解叮叮书店试读页面的建立 四、学时分配
五、实验安排 本课程需要安排实验课，以引导学生正确运用所学知识解决实际问题，实验方法和步骤参见教材。
六、考核方式及要求 考核方式为考查，成绩为百分制，再折合成优秀、良好、中等、及格、不及格。 总成绩 = 平时成绩（45%）+课堂实验（25%）+ 实验测试（30%） 平时过程考核标准细则
实验测试 在规定时间内（90分钟）完成一个指定形式主页的建立。评分标准如下：
七、教材  扫描，优惠购书 作者：张树明 定价：79.50元 ISBN：9787302516286 出版日期：2019.04.01 本书基于Web标准和响应式Web设计思想深入浅出地介绍了Web前端设计技术的基础知识，对Web体系结构、HTML5、CSS3、JavaScript和网站制作流程进行了详细的讲解，内容翔实，结构合理，语言精练，表达简明，实用性强，易于自学。 全书共分23章。第1章介绍了Web技术的基本概念、Web体系结构、超文本与标记语言、Web标准的组成和常用浏览器；第2～7章重点介绍了Web标准的结构推荐标准HTML5的常用元素的标签语句及应用；第8～13章介绍了Web标准的表现推荐标准CSS3的常用属性及应用；第14章介绍了网站制作流程与发布过程；第15～22章介绍了Web标准的行为标准ECMA-262的ECMAScript基础和JavaScript脚本语言；第23章介绍了JavaScript框架jQuery的入门知识。扫描每章提供的二维码可观看知识点的视频讲解及下载程序源码。 八、视频赏析 video: https://mp.weixin.qq.com/mp/readtemplate?t=pages/video_player_tmpl&action=mpvideo&auto=0&vid=wxv_742214591609995264 上一篇：宝塔面板的“防篡改和防火墙”,连自己人都防 下一篇：乌云:最懂安全的白帽子也许不在安全行业 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
微信公众平台持续治理“假冒仿冒”行为16140 人气#新媒体课堂
公众号案例 | 鲲鹏产业源头创新中心微信公28369 人气#新媒体课堂
萌芽加速 adminCDN 上线,由文派开源提供的17986 人气#站长圈
搜狐音频挂机项目揭秘:月入八千+的红利期操28868 人气#站长资讯
/1 
AI智能体
