您现在使用的是移动版,点击此处切换为电脑版
loading...
 
x
当前线路为   线路一   网络好像不太流畅
试试其他线路   线路二   线路三   切换线路若仍有问题请联系客服
html+css网页前端课程
15.0小时 中级提高 讲师:韩文强

   《HTML+CSS网页前端课程》通过手写代码详细讲解网页前端开发必备的html和css代码知识,知识点由浅入深,从基础代码到案例实战演练,贯穿全流程,让大家完整系统地学习和掌握html+css网页前端代码技能。

  通过本套课程的学习,能够全面掌握HTML和CSS基本标签类型、语法格式、网页布局方式、及交互效果制作等网页前端代码知识。在老师带领制作的实战商业项目案例中,积累实操经验,所学知识马上就可以应用到工作中,实现菜鸟到web前端工程师的真正蜕变。如果您正在想学习和提升HTML+CSS网页前端代码技能,本课程是一套您不可错过的好教程。

课程特色:老师授课风趣幽默,条理分明,逻辑性强,讲课过程行云流水。一堂课下来非常轻松,却也收获颇丰。

学习环境:老师使用Dreamweaver cc 2015进行讲解,建议使用同版本软件学习,使用其他版本或者软件也可。学习本课程需要大家具备基本的Photoshop和Dreamweaver操作基础。

首页图片介绍_02.gif图片介绍_03.gif图片介绍_04.gif图片介绍_05.gif图片介绍_06.gif图片介绍_07.gif图片介绍_08.gif图片介绍_09.gif图片介绍_10.gif图片介绍_11.gif图片介绍_12.gif图片介绍_13.gif图片介绍_14.gif图片介绍_15.gif图片介绍_16.gif图片介绍_17.gif图片介绍_18.gif图片介绍_19.gif图片介绍_20.gif图片介绍_21.gif图片介绍_22.gif图片介绍_23.gif图片介绍_24.gif图片介绍_25.gif图片介绍_26.gif图片介绍_27.gif图片介绍_29.gif

小米手机页面600px.gif

图片介绍_31.gif图片介绍_32.gif图片介绍_33.gif图片介绍_34.gif图片介绍_35.gif图片介绍_36.gif图片介绍_37.gif图片介绍_38.gif图片介绍_39.gif图片介绍_40.gif图片介绍_41.gif图片介绍_42.gif

下拉菜单制作

导航条下拉列表600.gif

鼠标经过时图片切换效果

transform850.gif

鼠标经过时按钮动效和旋转特效

按钮效果.gif旋转特效.gif

鼠标经过时缩放效果

缩放效果修改.gif

 

图片介绍_43.gif图片介绍_44.gif图片介绍_45.gif图片介绍_46.gif图片介绍_47.gif图片介绍_48.gif图片介绍_49.gif图片介绍_50.gif图片介绍_51.gif图片介绍_52.gif图片介绍_53.jpg

老师介绍
韩文强 主攻:网页设计/电商/web前端
简介:资深WEB前端工程师,站酷推荐设计师,是一名永不止步的学习者和分享者。擅长的行业包括WEB前端开发、电商设计及装修、UI设计等,多年从业经验和实战项目经验,共累计参与制作网站超过80个,原创设计文章超过二十几篇,点击量逾80万,被许多平台转载。开发的web前端开发课程,以通俗易懂的特点,帮助了很多菜鸟转变成了前端开发人才。
课程目录
第一章 HTML代码基础回顾
1.1常见的文本及区块标签
本节时长:18分钟

主要讲解常见的文本标签和区块标签用途介绍,代码的基本编写规范总结

1.2 超级链接和锚记链接
本节时长:11分钟

超级链接和锚记链接代码编写及实操演示

1.3 图像标签及路径
本节时长:13分钟

讲解图像标签及相关属性设置,图像的相对路径和绝对路径。

1.4 表格标签
本节时长:23分钟

使用Dreamweaver设计视图及代码编写两种制作表格的方式对比,以及细线表格的做法

1.5 表单的制作
本节时长:21分钟

表单标签的编写规范、嵌套规范以及相关属性的用法讲解

1.6京东模块布局案例
本节时长:13分钟

使用表格布局京东栏目模块,实例演示细线表格的用法。

1.7 京东注册表案例
本节时长:22分钟

利用所学知识制作京东企业用户注册表,练习表格、嵌套表格、表单及图片提交表单的制作.

第二章 CSS层叠样式表概述
2.1.CSS语法格式及7种选择器
本节时长:30分钟

讲解css样式的编写格式及标签选择器、类选择器、id选择器、编组选择器、后代选择器、通用选择器、后代选择器7种类型选择器的特征对比和编写格式

2.2.常见的文本样式
本节时长:22分钟

讲解常用的文字属性包括颜色、大小、字体、粗细、行高、下划线、倾斜、对齐方式、首行缩进等

2.3.背景样式及简写规则
本节时长:23分钟

背景颜色,图片,对齐方式,是否重复,固定背景等属性设置及编写规则

2.4.盒子模型的概念以及内边距和外边距
本节时长:25分钟

讲解盒子模型概念,内边距、外边距的应用以及元素默认值的清除方式,使用外边距定义元素居中的方法

2.5.盒子模型的边框及应用
本节时长:23分钟

讲解盒子模型的边框属性,利用边框制作“圣诞树”案例

2.6.三种不同类型的区块及转换
本节时长:15分钟

讲解行元素、块元素和行级块元素的特性及相互转换的方法,以及隐藏属性的应用。

2.7.添加浮动和清除浮动及导航条案例
本节时长:27分钟

讲解浮动属性及清除浮动的应用,利用所学知识手动编写代码,制作导航条案例

2.8.选择器优先级和其他属性
本节时长:30分钟

各类型选择器作用元素的优先级别比较

第三章 网页布局小案例
3.1.CSS文本样式-百度W3C页面
本节时长:41分钟

综合练习,利用所学html和css知识制作“百度百科w3c”页面

3.2.背景样式的应用-模拟小米5页面
本节时长:34分钟

讲解小米5页面课堂案例,包含固定背景和文字排版,上标下标的制作方法等知识点

3.3.浮动布局案例练习-网页基础框架1
本节时长:22分钟

讲解如何利用float属性布局网页,设置网页模块间距的方式等

3.4.浮动布局案例练习-网页基础框架2
本节时长:25分钟

多个模块布局时,实现同样的布局方式的不同方法演示

3.5.网页布局实战-Gulp中文网
本节时长:39分钟

利用所学知识,实操演练“Gulp中文网”页面布局及样式的定义

第四章 网站首页制作实例
4.1.网站框架搭建及头部布局
本节时长:33分钟

商业案例logo及导航条区域的制作,包括鼠标移入时导航条表框,文字颜色的变化以及项目分割线的制作。

4.2.海报区域和公司简介布局搭建
本节时长:30分钟

图像的保存方式,线条的制作,图像表现的居中方式等

4.3.产品展示区域的搭建
本节时长:27分钟

产品展示区域图片的排列与分布,按钮制作,鼠标指针的改变,以及去除元素间隙的方法等。

4.4.新闻区域的搭建
本节时长:28分钟

讲解图片和按钮的布局,利用定义列表制作新闻内容,以及span标签定义新闻时间等

4.5.底部区域和页面细节及代码优化
本节时长:20分钟

底部区域公司名称处理,链接文本处理,及电话号码优化,代码编组优化等

第五章 网站整站布局案例
5.1.三种定位布局方式
本节时长:31分钟

固定定位,相对定位和绝对定位的对比及代码编写方式等。

5.2.带有下拉框的导航条
本节时长:18分钟

利用定位布局制作带有下拉框的导航条效果。

5.3.定位在交互上的应用
本节时长:19分钟

利用定位布局制作鼠标移入时的图文交互效果,涉及小知识点背景颜色的不透明度以及过渡属性设置。

5.4.CSS3的transition属性及应用
本节时长:19分钟

讲解transition属性的用法,及制作简单交互小动画按钮。

5.5.CSS3的其他常用属性
本节时长:25分钟

讲解css3的圆角、阴影、旋转、缩放、以及速率等属性值

第六章 商业网站的综合实例
6.1.1网站首页 - 头部及海报区域的搭建(上)
本节时长:34分钟

吉利汽车网站首页整体框架搭建,及头部区域logo,导航条,搜索框的框架搭建和样式设置

6.1.2 网站首页 - 头部及海报区域的搭建(下)
本节时长:25分钟

海报区域轮播图的框架搭建,左右和下方切换按钮制作,以及定位方式的优化等

6.2.1网站首页 - 带有下拉框的导航菜单搭建(上)
本节时长:21分钟

导航菜单按钮的创建,鼠标悬停时图标颜色及背景的切换等

6.2.2网站首页 - 带有下拉框的导航菜单搭建(下)
本节时长:34分钟

导航菜单下拉框的制作,鼠标悬停时显示,离开时隐藏

6.3.网站首页 - 广告模块及新闻区域
本节时长:25分钟

产品展示列表制作,广告图制作以及新闻列表项制作

6.4.网站首页 - 底部区域的搭建
本节时长:13分钟

底部列表及备案信息,以及外部链接图标的制作

6.5.网站内页的搭建技巧
本节时长:38分钟

网站内页的CSS样式引用以及头部和底部区域的快捷制作方法

处理中...