网页设计(Web前端开发) 13期
网页设计(Web前端开发) 13期
5000+ 人选课
更新日期:2025/05/17
开课时间2025/02/15 - 2025/06/30
课程周期20 周
开课状态开课中
每周学时-
课程简介

      *  精灵图技术--淘宝首页局部效果制作……

      *  布局定位技术--成龙新浪微博发言版块布局……

      *  背景定位技术--腾讯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的实用案例。这章纯线上选修班级将不作考核要求,主要是供有兴趣有能力的同学自主学习。

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



课程大纲

网页设计概述

  • 1.1 网页设计概述
  • 1.2 网页开发工具
  • 1.3 浏览器开发者工具
  • 1.4 章节测试

HTML结构基础篇

  • 2.1 Html标记与属性
  • 2.2 搭建章节作业站点
  • 2.3 章节测试

CSS样式基础篇

  • 3.1 引入CSS样式表的四种方式
  • 3.2 CSS基础选择器
  • 3.3 CSS复合选择器
  • 3.4 章节测试

CSS样式进阶篇

  • 4.1 制作“专题学习”模块效果1
  • 4.2 制作“专题学习”模块效果2
  • 4.3 精灵图技术_淘宝网首页局部效果
  • 4.4 章节测试

网页布局技术

  • 5.1 模拟新浪微博发言版块布局1
  • 5.2 模拟新浪微博发言版块布局2
  • 5.3 模拟腾讯QQ网页视差效果
  • 5.4 章节测试

超链接与导航栏

  • 6.1 超链接类型与基本语法
  • 6.2 锚点链接与图像热区链接
  • 6.3 制作纵向导航栏
  • 6.4 制作横向导航栏
  • 6.5 制作带下拉菜单的导航栏
  • 6.6 滑动门技术01_微信官网首页导航栏效果
  • 6.7 滑动门技术02_微信官网首页导航栏效果
  • 6.8 章节测试

表格及样式设置

  • 7.1 创建表格
  • 7.2 表格的样式设置
  • 7.3 章节测试

表单及样式设置

  • 8.1 表单基础
  • 8.2 Html5表单新属性
  • 8.3 Html5表单新元素
  • 8.4 章节测试

JavaScript基础

  • 9.1 JavaScript基础
  • 9.2 焦点轮播图制作01
  • 9.3 焦点轮播图制作02
  • 9.4 焦点轮播图制作03
  • 9.5 跑马灯效果实现01
  • 9.6 跑马灯效果实现02
  • 9.7 章节测试

感受Html5+CSS3魅力

  • 10.1 响应式设计与媒体查询
  • 10.2 CSS3动画_旋转的太极图01
  • 10.3 CSS3动画_旋转的太极图02
  • 10.4 HTML 5 Canvas 基础01
  • 10.5 HTML 5 Canvas 基础02
  • 10.6 实战红色安源工运纪念馆首页01
  • 10.7 实战红色安源工运纪念馆首页02
  • 10.8 章节测试与期末考试