《HTML+CSS网页前端课程》通过手写代码详细讲解网页前端开发必备的html和css代码知识,知识点由浅入深,从基础代码到案例实战演练,贯穿全流程,让大家完整系统地学习和掌握html+css网页前端代码技能。
通过本套课程的学习,能够全面掌握HTML和CSS基本标签类型、语法格式、网页布局方式、及交互效果制作等网页前端代码知识。在老师带领制作的实战商业项目案例中,积累实操经验,所学知识马上就可以应用到工作中,实现菜鸟到web前端工程师的真正蜕变。如果您正在想学习和提升HTML+CSS网页前端代码技能,本课程是一套您不可错过的好教程。
课程特色:老师授课风趣幽默,条理分明,逻辑性强,讲课过程行云流水。一堂课下来非常轻松,却也收获颇丰。
学习环境:老师使用Dreamweaver cc 2015进行讲解,建议使用同版本软件学习,使用其他版本或者软件也可。学习本课程需要大家具备基本的Photoshop和Dreamweaver操作基础。
下拉菜单制作
↓
鼠标经过时图片切换效果
↓
鼠标经过时按钮动效和旋转特效
↓
鼠标经过时缩放效果
↓
主要讲解常见的文本标签和区块标签用途介绍,代码的基本编写规范总结
超级链接和锚记链接代码编写及实操演示
讲解图像标签及相关属性设置,图像的相对路径和绝对路径。
使用Dreamweaver设计视图及代码编写两种制作表格的方式对比,以及细线表格的做法
表单标签的编写规范、嵌套规范以及相关属性的用法讲解
使用表格布局京东栏目模块,实例演示细线表格的用法。
利用所学知识制作京东企业用户注册表,练习表格、嵌套表格、表单及图片提交表单的制作.
讲解css样式的编写格式及标签选择器、类选择器、id选择器、编组选择器、后代选择器、通用选择器、后代选择器7种类型选择器的特征对比和编写格式
讲解常用的文字属性包括颜色、大小、字体、粗细、行高、下划线、倾斜、对齐方式、首行缩进等
背景颜色,图片,对齐方式,是否重复,固定背景等属性设置及编写规则
讲解盒子模型概念,内边距、外边距的应用以及元素默认值的清除方式,使用外边距定义元素居中的方法
讲解盒子模型的边框属性,利用边框制作“圣诞树”案例
讲解行元素、块元素和行级块元素的特性及相互转换的方法,以及隐藏属性的应用。
讲解浮动属性及清除浮动的应用,利用所学知识手动编写代码,制作导航条案例
各类型选择器作用元素的优先级别比较
综合练习,利用所学html和css知识制作“百度百科w3c”页面
讲解小米5页面课堂案例,包含固定背景和文字排版,上标下标的制作方法等知识点
讲解如何利用float属性布局网页,设置网页模块间距的方式等
多个模块布局时,实现同样的布局方式的不同方法演示
利用所学知识,实操演练“Gulp中文网”页面布局及样式的定义
商业案例logo及导航条区域的制作,包括鼠标移入时导航条表框,文字颜色的变化以及项目分割线的制作。
图像的保存方式,线条的制作,图像表现的居中方式等
产品展示区域图片的排列与分布,按钮制作,鼠标指针的改变,以及去除元素间隙的方法等。
讲解图片和按钮的布局,利用定义列表制作新闻内容,以及span标签定义新闻时间等
底部区域公司名称处理,链接文本处理,及电话号码优化,代码编组优化等
固定定位,相对定位和绝对定位的对比及代码编写方式等。
利用定位布局制作带有下拉框的导航条效果。
利用定位布局制作鼠标移入时的图文交互效果,涉及小知识点背景颜色的不透明度以及过渡属性设置。
讲解transition属性的用法,及制作简单交互小动画按钮。
讲解css3的圆角、阴影、旋转、缩放、以及速率等属性值
吉利汽车网站首页整体框架搭建,及头部区域logo,导航条,搜索框的框架搭建和样式设置
海报区域轮播图的框架搭建,左右和下方切换按钮制作,以及定位方式的优化等
导航菜单按钮的创建,鼠标悬停时图标颜色及背景的切换等
导航菜单下拉框的制作,鼠标悬停时显示,离开时隐藏
产品展示列表制作,广告图制作以及新闻列表项制作
底部列表及备案信息,以及外部链接图标的制作
网站内页的CSS样式引用以及头部和底部区域的快捷制作方法