WEB前端设计(HTML5+CSS3)
WEB前端设计(HTML5+CSS3)
1000+ 人选课
更新日期:2025/06/26
开课平台智慧树
开课高校陕西工商职业学院
开课教师蒋漪涟王小燕杨秋叶
学科专业
开课时间2025/01/21 - 2025/07/20
课程周期26 周
开课状态开课中
每周学时-
课程简介
“Web系统”就是基于网站形式的具有一定功能的系统,例如新浪、淘宝、携程等。这些系统中以网页形式呈现给用户的部分,就是“前端”。随着Web系统的普遍应用,包括移动端APP的快速发展,“Web前端设计”已经成为近些年最为重要的技术之一,HTML5和CSS3(简称H5技术)是Web前端设计的最新技术。《WEB前端设计(HTML5+CSS3)》课程在Web前端设计(群)(网页设计与制作、移动网页制作与设计、HTML5开发、JavaScript开发、jQuery框架应用)职业能力分析基础上选取教学内容,全面覆盖Web前端初级岗位所需技能,按照“搭建网页结构——美化网页效果——添加网页交互”的网站设计工作过程,精心设计 “HTML5和CSS3"两个教学模块,帮助学生完成不会→会→熟练→精通网页制作的蜕变。课程通过设计51商城购网站首页和登录注册页面带领同学们掌握Web前端设计基础知识,具备静态网站搭建、网页美化、网页交互设计等能力,胜任Web前端设计初级岗位。
课程大纲

在线教程

章节简介教学计划
网页设计基础
登录后可预览视频
web网站初体验
杨秋叶
hbuilder开发工具
杨秋叶
html5基本结构
杨秋叶
HTML5标签
制作51商城购头部页面
标签定义及标签结构,段落标签及属性
杨秋叶
h标签、hr标签及属性
杨秋叶
br、em、strong、del、sup、sub标签
杨秋叶
div、span及特殊符号标签
杨秋叶
font标签及属性
杨秋叶
案例:在网页中显示商品的具体信息
杨秋叶
img标签及属性
杨秋叶
制作51商城购头部页面
杨秋叶
图文混排案例
杨秋叶
列表标签
无序列表、有序列表和自定义列表的结构和作用
杨秋叶
有序列表应用--在网页中显示心里测试问卷
杨秋叶
无序列表制作51商城购商品详情页
杨秋叶
自定义列表展示商品内容
杨秋叶
导航栏案例
杨秋叶
超链接标签
超链接标记及应用
杨秋叶
建立书签标签,实现51商城购手机页面中添加书签链接
杨秋叶
CSS3样式表
CSS3样式表概述,引入样式表3种方式
蒋漪涟
基础选择器
蒋漪涟
CSS3中设置文本
蒋漪涟
CSS3中设置文本外观属性
蒋漪涟
CSS复合选择器
蒋漪涟
背景设置
蒋漪涟
列表属性设置
蒋漪涟
超链接属性设置
蒋漪涟
盒模型概述
蒋漪涟
边框设置
蒋漪涟
设置内边距和外边距
蒋漪涟
元素的类型与转换
蒋漪涟
浮动
蒋漪涟
清除浮动
蒋漪涟
定位
蒋漪涟
综合练习-51商城购手机板块制作
蒋漪涟
第四章
绘制表格,表格的结构及属性
王小燕
<table>标记的属性
王小燕
CSS样式设置表格
王小燕
表单
王小燕
综表单input控件使用方法和属性
王小燕
input标签及属性
input标签及属性(1)
王小燕
input标签及属性(2)
王小燕
文本域textare及属性
王小燕
列表标签select及属性
王小燕
综合案例:商城注册和登录页面
王小燕
“千年之恋”案例
“千年之恋”案例(一)
王小燕
“千年之恋”案例(二)
王小燕
  • 第一章网页设计基础

    本章主要介绍网页设计相关概念、技术及开发工具使用方法。

  • 1.1web网站初体验

    web网站初体验简介:本节课主要介绍网页概念、内容组成及核心技术。

  • 1.2hbuilder开发工具

    本节课主要介绍Hbulider工具的下载、安装及使用方法,包括html文件、js文件、css文件的创建、保存及运行。

  • 1.3html5基本结构

    本节课主要介绍html5基本结构以及代码注释的功能和注释的方法,并通过html5基本结构实际设计了一张简单网页。

  • 第二章HTML5标签

    本章主要介绍了html5文件基本结构以及常用的标签,包括文字标签、段落标签、图片标签、列表标签和链接标签。

  • 2.1制作51商城购头部页面

    本节课主要介绍了标签定义及标签结构,以及p、h、br、em、strong、sup、sub、div、span、img、特殊符号等常用标签及属性,并应用相关标签实现商品具体信息网页和51商城购头部网页的制作。

  • 2.2列表标签

    本节课我们主要介绍了无序列表、有序列表和自定义列表的标签及属性,并应用列表标签实现心理测试问卷网页、51商城购商品详情网页、51商城购展示商品内容网页的制作。

  • 2.3超链接标签

    本节课我们介绍了超链接标签和书签链接,并应用超链接标签实现51商城购主页到登录页面的跳转功能,应用书签实现51商城购手机页面中添加书签链接的功能。。

  • 第三章CSS3样式表

    CSS通常称为CSS样式或样式表,主要用于设置HTML页面中的文本内容(包括字体、大小、对齐方式等)、图片的外形(包括宽高、边框样式、边距等)以及版面的布局等外观显示样式。

  • 3.1CSS3样式表概述,引入样式表3种方式

    CSS3样式表概述,引入样式表3种方式 引入CSS样式表的方式有3种,分别是:行内式、内嵌式和外链式。

  • 3.2基础选择器

    要想将CSS样式应用于特定的HTML元素,首先需要找到该目标元素。在CSS中,执行这一任务的样式规则部分被称为选择器。CSS基础选择器有4种,分别是:标记选择器、类选择器、id选择器和通配符选择器。

  • 3.3CSS3中设置文本

    使用CSS样式表来编辑网页的文本式样,使网页更加生动活泼。常用的CSS字体样式属性有5种。分别是font-size属性、font-family属性、font-weight属性、font-variant属性、font-style属性。

  • 3.4CSS3中设置文本外观属性

    使用CSS样式表来设置文本的外观,属性设置有9种,通过文本外观设置提高网页文字美观效果。

  • 3.5CSS复合选择器

    选择器可以灵活控住CSS样式表设置,使得网页开发更加高速快捷。CSS复合选择器有三种,分别是:标签指定式选择器、后代选择器、并集选择器。

  • 3.6背景设置

    在CSS中,不仅可以将网页元素的背景设置为某一种颜色,还可以将图像作为网页元素的背景,背景颜色通过background-color属性实现,而背景图像通过background-image属性实现。

  • 3.7列表属性设置

    list-style复合属性可以控制列表的显示样式,实际上,通常将list-style的属性值定义为none,清除列表的默认样式。应用背景图像定义列表项目符号。

  • 3.8超链接属性设置

    定义超链接时,为了提高用户体验,经常需要为超链接指定不同的状态,使得超链接在单击前、单击后和鼠标悬停时的样式不同。在CSS中,通过链接伪类可以实现不同的链接状态。

  • 3.9盒模型概述

    网页所有元素可以看作是盒子,通过盒子模型控制元素摆放位置。

  • 3.10边框设置

    盒子模型的边框属性可以控制网页元素外边框式样和颜色等。

  • 3.11设置内边距和外边距

    盒子模型的内边距控制内容与盒子边框之间的位置。盒子模型的外边距控制盒子与盒子之间的距离,使得网页元素更好的布局。

  • 3.12元素的类型与转换

    网页元素分为块级元素和行内元素,不同元素显示模式不同,相互之间可以互相转换。

  • 3.13浮动

    CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流(标准流)、浮动和定位。浮动让盒子从普通流中浮起来,主要作用让多个块级盒子在一行显示

  • 3.14清除浮动

    因为父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,最后父级盒子高度为0,就影响了下面的标准流盒子。所以必要时需要清除浮动。

  • 3.15定位

    在CSS中,通过定位属性可以实现网页中元素的精确定位。

  • 3.16综合练习-51商城购手机板块制作

    CSS综合练习制作51商城购手机版块,全面练习CSS样式设置。

  • 第四章第四章

    表格与表单是HTML网页中的重要标签,利用表格可以对网页进行排版,使网页信息有条理地显示出来,而表单的出现则使网页从单向的信息传递发展到能够与用户进行交互对话,实现了网上注册、网上登录、网上交易等多种功能。

  • 4.1绘制表格,表格的结构及属性

    在HTML语法中,表格一般通过三个标签儿来构建,分别为表格、标签、行标签和单元格标签。

  • 4.2<table>标记的属性

    表格标签包含了大量属性,虽然大部分属性都可以使用CSS进行代替,但是HTML语言也为

    标签儿提供了一系列的属性。
  • 4.3CSS样式设置表格

    除了表格标签儿自带的属性外,还可以用css的边框、宽高、颜色等来控制表格的样式。此外,CSS中还提供了表格专用属性,以便控制表格样式。

  • 4.4表单

    表单是可以通过网络接收其他用户数据的平台,例如注册页面的账户密码输入、网上订货页等都是以表单的形式来收集用户信息,并将这些信息传递给后台服务器,实现网页与用户间的沟通对话。

  • 4.5综表单input控件使用方法和属性

    学习表单的核心就是学习表单控件,HTML语言提供了一系列表单空间,用于定义不同的表单功能。

  • 4.6input标签及属性

    我们在浏览网页时,经常会看到单行文本输入框、单选按钮、复选框,提交按钮、重置按钮等,要想定义这些元素就需要使用input控件。标签儿为单标签儿,Type属性为其最基本的属性,其取值有多种,用于指定不同的控件类型。

  • 4.7文本域textare及属性

    HTML雨夜提供了textare控件,通过textare控件可以轻松的创建多行文本输入框。

  • 4.8列表标签select及属性

    在浏览网页时,我们经常会看到包含多个选项的下拉菜单,要想制作这种下拉菜单效果,就需要使用select标签。

  • 4.9综合案例:商城注册和登录页面

    本章重点讲解了表格相关标记、表单相关标记以及CSS控制表格与表单的样式,为了使初学者更好的运用表格与表单组织页面,通过案例的形式分步骤,走制作网页中常见的注册/登录界面。

  • 4.10“千年之恋”案例

    元素是表单中最常见的元素,网页中常见的单行文本框、单选按钮、复选按钮等都是通过它定义的。在HTML5中标记拥有多种输入类型及相关属性,通过学习应该掌握常用的表单控件及相关属性,并能够熟练地运用表单组织页面元素。

    • 开始学习
    • 第一章  作业测试
      第一章 网页设计基础

      1.1 web网站初体验

      1.2 hbuilder开发工具

      1.3 html5基本结构

      视频数3
    • 第二章  作业测试
      第二章 HTML5标签

      2.1 制作51商城购头部页面

      2.2 列表标签

      2.3 超链接标签

      视频数16
    • 第三章  作业测试
      第三章 CSS3样式表

      3.1 CSS3样式表概述,引入样式表3种方式

      3.2 基础选择器

      3.3 CSS3中设置文本

      3.4 CSS3中设置文本外观属性

      3.5 CSS复合选择器

      3.6 背景设置

      3.7 列表属性设置

      3.8 超链接属性设置

      3.9 盒模型概述

      3.10 边框设置

      3.11 设置内边距和外边距

      3.12 元素的类型与转换

      3.13 浮动

      3.14 清除浮动

      3.15 定位

      3.16 综合练习-51商城购手机板块制作

      视频数16
    • 第四章  作业测试
      第四章 第四章

      4.1 绘制表格,表格的结构及属性

      4.2 <table>标记的属性

      4.3 CSS样式设置表格

      4.4 表单

      4.5 综表单input控件使用方法和属性

      4.6 input标签及属性

      4.7 文本域textare及属性

      4.8 列表标签select及属性

      4.9 综合案例:商城注册和登录页面

      4.10 “千年之恋”案例

      视频数12
    • 期末考试