*  精灵图技术--淘宝首页局部效果制作……       *  布局定位技术--成龙新浪微博发言版块布局……       *  背景定位技术--腾讯IMQQ页面视差效果制作……       *  滑动门技术--微信官网导航栏效果制作……       *  淘宝焦点轮播图、跑马灯效果案例制作……       *  Html5 Canvans 小人侧身走动画...... 配套教材：《网页设计与制作（Html5+CSS3+JavaScript）》，梁莉菁，刘巧丽，清华大学出版社，ISBN：9787302560074 ，2020.11

       课程采用任务驱动教学方式，将重要知识点及基本技能要求嵌入到各个案例任务的讲解与实际操作中。并且教学案例及实训任务大多从淘宝、京东、腾讯、新浪等大型成熟网站中精心挑选经典应用案例来诠释各知识点与必备技能。课程整体分十个章节：

  第一章 网页设计概述

  主要介绍Web发展史，网页设计相关术语意义，网页开发工具及浏览器开发者工具，学会制作 第一个网页；

  第二章 Html结构基础篇

  主要介绍常用Html标记与常规属性，开始尝试创建网站，从这里起步，对每章案例进行整理，开始创建作业网站；

  第三章 CSS样式基础篇

主要介绍网页中引入CSS样式的四种方式及CSS选择器，初步学会在网页中进行CSS样式设置；

第四章 CSS样式进阶篇

主要介绍样式布局中最重要的盒子模型，并且在这章中要尝试用当下流行的精灵图技术制作淘宝首页中的局部效果，同时将介绍iconfont矢量图标库的应用；

第五章 网页布局技术

主要介绍布局定位技术，通过模拟制作新浪发言版块，淘宝首页局部精灵图技术应用案例，腾讯QQ页面视差效果强化布局定位技术；

第六章 超链接与导航栏

主要介绍超链接的种类及纵向、横向、带下拉菜单的导航栏的制作以及应用了滑动门技术制作的微信官网导航栏的制作；

第七章 表格及样式设置

主要介绍表格相关Html标签及样式设置，学会制作常规细线表格、隔行变色及鼠标悬停效果制作；

第八章 表单及样式设置

主要介绍表单相关Html标签及常规属性，并且将介绍Html5新增的Input类型及新增属性的应用以及表单样式设置，这一章我们要挑战一下京东帐户登录表单的制作。

第九章 JavaScript基础

通过使用JS制作淘宝焦点图案例，巩固布局定位技巧，初步体会JS的语法规则和强大功能；

第十章 感受Html5+CSS3魅力

主要介绍媒体查询、响应式网页制作技术及实现原理，并且在本章中将实战安源路矿工人运动纪念馆官网首页，并且本章中还将不定期追加HTML5+CSS3的实用案例。这章纯线上选修班级将不作考核要求，主要是供有兴趣有能力的同学自主学习。

《网页设计》课程是工学学科计算机类各专业的专业核心课程，也是各高校深受学生欢迎的公共选修课程。欢迎大家加入网页设计课堂！

通过学习，你能够学到网页设计与制作的基础知识，初步学会各种大型网站中所用到的常用的网站设计制作技术，如淘宝网中的焦点轮播图技术和几乎所有大型网站的页面中都会用到的精灵图技术等，本套课程的目标是：希望成为引领大家从菜鸟、小白快速通向Web大牛、Web工程师的桥梁。准备好了吗，我们开课了！

课程配套教材：《网页设计与制作（Html5+CSS3+JavaScript）》梁莉菁 刘巧丽，清华大学出版社，ISBN：9787302560074 ，2020.11【http://www.tup.tsinghua.edu.cn/booksCenter/book_08493001.html】
  

无需特殊条件，有电脑即OK，人人可学，人人能学。HTML+CSS+JS，HTML5+CSS3，

网页设计入门，小白变为大牛的必经之路。引领大家从菜鸟小白华丽蜕变后通向Web前端工程师！

本课程配套教材：

《网页设计与制作（Html5+CSS3+JavaScript）》，梁莉菁，刘巧丽，清华大学出版社，ISBN：9787302560074 ，2020.11【http://www.tup.tsinghua.edu.cn/booksCenter/book_08493001.html】

推荐学习资源：

w3school 在线教程  http://www.w3school.com.cn/

菜鸟教程 - 学的不仅是技术，更是梦想！  https://www.runoob.com/