最近迷上了前端各种布局效果的实现;今天和大家分享一下学习前端的方法;我把它总结为五点:
1.兴趣学习法
2.网页制作思路
3.网页制作步骤
4.网页制作知识点
5.网页制作注意事项
1
兴趣与学习方法
兴趣产生动力,学习更充实,更有意义,效率更高,效果更好!
学了知识立即就可以应用于生活和工作,是一件有趣的事儿!
所以前方录提出了这样学习前端知识:
1.刚开始就直接学习制作网页(按照视频来操作)!
2.通过制作网页来掌握所需要学习的基础知识点!(找到基础知识点学习并练习)!缺哪补哪!
3.系统阅读菜鸟教程前端基础知识,要保证在查阅参考手册的时候能看懂手机知识点!
4.找一些同步自学的朋友一起学习(有氛围),有动力!
2
——网页制作思路
网页是由布局模块组成,布局模块又由功能模块组成,而每一个功能模块又由内容,外观,交互这三部分来完成!
a.先完成布局模块;
b.把每一个功能模块放置到合适的布局模块当中;
c.用html,css,js这三种语言完成每一个功能模块;
先做内容(内容素材和内容标签)
再做外观(外观布局和外观样式)
后做交互(人机互动和动态效果)
功能模块的学习是我们练习的重点
——前端网页搭建的基本思路
3
网页布局模块化制作步骤
1.基本素材准备,基本html标签准备(内容);
(1)准备好psd格式图片文件,切好图,准备好视频文件,文案资料;
(2)根据目标页面写好html基本标签内容;
2.按要求搭建模块,并进行页面布局(外观准备);
(1)元素模块(div)化;并取好id和class名称,class按内容名称取名;元素分组,按视觉效果,把元素组成小元素组,小元素组在一起又组成大元素组.每个元素组形成一个模块;
(2)布局结构(div)化;模块存储空间(加div),并取好id和class名称;class按布局框架位置取名;id要按内容名称取名;分析外部整体框架,由外而内搭好框架,做好布局空间div,并做好注释;(布局模块存储空间)
3.把模块放到对应的布局存储空间里去;
4.布局+样式美化;
(1)思路:按照页面内容从左到右从上到下,一个模块一个模块来,每个模块的思路都是从外到内即先布局框架(尺寸规格),再美化页面(背景,文本样式);
(2)流程:测算出各个布局模块的宽高值,提取布局模块的背景色;
(3)提取各个模块各种动态下的字体大小值,字体颜色值,背景颜色值;按所供思路一个效果一个效果做!
(4)备注:每个步骤都要经过浏览器验证再进行下一步,方便查错;
5.实现交互;
分析效果,把效果进行动作分解,转化成代码语言,按时间顺序,动作逻辑顺序一步一步来;
——前端网页搭建的操作步骤
4
网页制作知识点
1.掌握页面各标签的基本用法(html属性及值还有对应的内容);
2.布局依据:外观分析能力和交互效果分析能力;
布局方法:模块化和结构化;学会按外观把元素分组,并模块(div)化;学会按内容分类进行框架结构搭建,并结构(div)化;
取名知识:id和class取名知识;注意防止重名;
3.把模块内容放置到相对应的布局结构空间里去,并补充所缺元素;
4.熟练掌握每个使用的属性及值的用法和用途!
5.熟练掌握例子所需js或jquery属性及方法的用法和用途!
——前端网页搭建案例知识点
5
网页制作注意事项
1.每操作一步,都要用浏览器验证一步,方便查找有无错误;
2.要学会用浏览器调试工具调试属性值的大小;
3.类名,id名,变量名,函数名,参数等在调用时最好用复制,防止写错;
4.内容区中文空格会占空间,样式不对可能是这个原因;
——前端网页搭建操作注意事项