当前位置:平面设计学院 > html+css网页前端课程
 

html+css网页前端课程

121746次 75条 202次
讲师:韩文强
课级:中级提高
时长:15.0小时
单价:¥850元 助学价:¥310元 我要单买
年会员:¥1800元/年 今日促销:¥399元 平面设计学院所有教程免费学
分享到:

   《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

 
第一章 HTML代码基础回顾

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

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

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

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

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

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

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

第二章 CSS层叠样式表概述

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

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

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

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

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

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

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

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

第三章 网页布局小案例

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

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

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

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

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

第四章 网站首页制作实例

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

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

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

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

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

第五章 网站整站布局案例

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

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

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

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

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

第六章 商业网站的综合实例

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

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

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

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

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

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

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

 
韩文强 主攻:网页设计/电商/web前端 简介:资深WEB前端工程师,站酷推荐设计师,是一名永不止步的学习者和分享者。擅长的行业包括WEB前端开发、电商设计及装修、UI设计等,多年从业经验和实战项目经验,共累计参与制作网站超过80个,原创设计文章超过二十几篇,点击量逾80万,被许多平台转载。开发的web前端开发课程,以通俗易懂的特点,帮助了很多菜鸟转变成了前端开发人才。
 
  • 1_1文本和区块标签的回顾-(时间-0_01_19;12)
  • 1_1文本和区块标签的回顾-(时间-0_12_56;28)
  • 1_2超级链接-(时间-0_00_14;20)
  • 1_2超级链接-(时间-0_04_04;20)
  • 1_3图像标签-(时间-0_04_59;10)
  • 1_3图像标签-(时间-0_10_56;20)
  • 1_4表格和细线表格的做法-(时间-0_00_50;01)
  • 1_4表格和细线表格的做法-(时间-0_20_01;25)
  • 1_5表单标签-(时间-0_13_47;13)
  • 1_6小案例1-京东网布局-(时间-0_08_20;07)
  • 1_6小案例1-京东网布局-(时间-0_10_57;01)
  • 1_7小案例2-京东网注册页面-(时间-0_10_51;19)
  • 2_1CSS语法格式及7种选择器-(时间-0_21_52;04)
  • 2_2常见的文本样式-(时间-0_11_02;27)
  • 2_3背景样式及简写规则-(时间-0_09_54;06)
  • 2_5盒子模型的边框及应用-(时间-0_21_16;08)
  • 2_4盒子模型的概念以及内边距和外边距-(时间-0_16_09;17)
  • 2_5盒子模型的边框及应用-(时间-0_10_50;07)
  • 2_6三种不同类型的区块及转换-(时间-0_10_33;02)
  • 2_7添加浮动和清除浮动及导航条案例-(时间-0_23_31;02)
  • 2_8选择器优先级和其他属性-(时间-0_19_31;25)
  • 3_2背景样式的应用-模拟小米5页面-(时间-0_10_54;01)
  • 3_2背景样式的应用-模拟小米5页面-(时间-0_22_29;19)
  • 3_2背景样式的应用-模拟小米5页面-(时间-0_32_00;13)
  • 3_3浮动布局案例练习-网页基础框架1-(时间-0_08_09;25)
  • 3_3浮动布局案例练习-网页基础框架1-(时间-0_17_52;23)
  • 3_4浮动布局案例练习-网页基础框架2-(时间-0_22_27;27)
  • 3_5网页布局实战-Gulp中文网-(时间-0_17_41;05)
  • 3_5网页布局实战-Gulp中文网-(时间-0_34_04;15)
  • 3_5网页布局实战-Gulp中文网-(时间-0_38_16;29)
  • 4_1网站框架搭建及头部布局-(时间-0_23_37;27)
  • 4_1网站框架搭建及头部布局-(时间-0_07_31;00)
  • 4_2海报区域和公司简介布局搭建-(时间-0_28_25;13)
  • 4_3产品展示区域的搭建-(时间-0_14_16;01)
  • 4_3产品展示区域的搭建-(时间-0_26_14;01)
  • 4_4新闻区域的搭建-(时间-0_27_07;05)
  • 4_4新闻区域的搭建-(时间-0_11_20;15)
  • 4_5底部区域和页面细节及代码优化-(时间-0_00_00;00)
  • 4_5底部区域和页面细节及代码优化-(时间-0_14_31;12)
  • 5_1三种定位布局方式-(时间-0_25_42;21)
  • 5_2带有下拉框的导航条-(时间-0_06_29;14)
  • 5_2带有下拉框的导航条-(时间-0_15_45;08)
  • 6_1_1网站首页---头部及海报区域的搭建-(时间-0_23_32;20)
  • 5_5CSS3的其他常用属性-(时间-0_22_37;19)
  • 5_4CSS3的transition属性及应用-(时间-0_17_17;00)
  • 5_3定位在交互上的应用-(时间-0_16_19;21)
  • 6_1_2网站首页---海报区域的搭建-(时间-0_21_39;17)
  • 6_2_1网站首页---带有下拉框的导航菜单搭建-(时间-0_11_35;29)
  • 6_4网站首页---底部区域的搭建-(时间-0_11_59;10)
  • 6_3网站首页---广告模块及新闻区域-(时间-0_23_42;00)
  • 6_3网站首页---广告模块及新闻区域-(时间-0_15_25;02)
  • 6_2_2网站首页--下拉框区域搭建-(时间-0_14_41;00)
  • 6_5网站内页的搭建技巧-(时间-0_07_41;14)
  • 6_5网站内页的搭建技巧-(时间-0_29_45;01)
  • 6_5网站内页的搭建技巧-(时间-0_24_22;00)
  • 6_5网站内页的搭建技巧-(时间-0_36_23;22)
  • 本套教程单价:¥850元 助学价:¥310元 
  • 平面设计学院年会员:¥1800元/年 今日促销:¥399元 可学习所有教程+新增教程 
  • 本学院已有 126 套教程 总计 1377 个小时 查看详情
购买了该教程的同学
栾文(平淡视界)
jlc8181
一寒
夏個
百练成仙
1131560568
liuyaqian
专心8
dengnici
陈露2013
Rain
康丰
王雪
situbei
LJP
墨先生
圆圆713
WBE
 
您可能感兴趣的课程
 
讲师:笨叔
39603次25条56次
 
讲师:贾斌
138069次58条158次
 
讲师:文成武
265306次237条561次
 
讲师:开心老师
444592次207条459次
 
讲师:Gordan
228982次118条324次
 
讲师:胡飞虎
310938次213条749次
 
讲师:陈志文
295267次223条194次
 
讲师:田婧
2133804次1303条1176次
 
微信客服 微信号:qinxue7855