1. 首页
  2. 程序人生

网页前端设计快速入门技巧

网页前端设计

一千个人眼中就有一千个哈姆雷特,每个人对网页前端的理解也是不一样的。我认为网页前端开发就像是互联网的美容师,不仅给访客带来视觉上的美感,而且随着互联网的发展,Html5、CSS3的应用,前端工程师结合技术与艺术能把网站最好的界面呈现给用户,这就是网页前端!

1、多看看布局,看颜色搭配

设计一个页面,不是随随便便就能凭空想象出来的,前期要会简单的做效果图,设计前期主要是网页的布局形式以及网页颜色搭配。多看行业的网站,看什么?看布局,看颜色搭配。比如说要做一个“个人博客”,就百度搜索“个人博客”这个词,从第一页第一排开始点,看到你不想看,看烦为止。再怎么10页应该也没有问题吧,看10页,你就会有一个简单的构思,看了别人的布局,你可以知道自己的喜好,知道哪些是常用的布局,导航栏都放些什么,网站内容做什么,页面功能有哪些。当然,如果你看完10页都还不知道自己想要做什么样的,就继续看,必须多看。

看代码

鼠标右键,查看源码;F12,审查元素;这是两个常用的操作,比如要想看一个页面的源代码,鼠标右键,查看源码,看HTML代码写得是否规范,乱不乱,div布局合理不合理。F12,审查元素,比如导航栏颜色,文字间距,字体大小等等。

HTML代码写得规范的,可以学习,一个简单的新闻列表,如果可以用一个div就能解决,结果用了3个div,层层嵌套,div的层级多并且杂乱无章那就是不合理。不仅增加了代码,对于优化还是有些影响的。尽量保持代码简洁,布局合理。

CSS框架,使用框架有好处,有坏处,好处就是开发快,节约了大量的时间;坏处就是,css框架对于一个小项目等页面来说很臃肿。框架中可能有大部分你用不到的代码。对于你的技术上也不会有很大的提高,如果要简单的修改,看似简单,但实际上修改的地方有很多,加大了后期修改难度。这也是为什么这么长时间以来,我坚持写原生代码的原因,简洁,修改方便,加载速度快,对SEO优化有好处

网页前端设计快速入门技巧

2、多做做设计图

会简单的photoshop(ps)操作,能够简单的拼出网页的效果图。对于新手来说,东拼西凑,会截图,会拼图就行了,比如说,搜索“个人博客”看了大量的博客网站,哪些模块是你想要的,可以仿照的,就给截图下来,拼在ps上面,最后再在ps里面修改一些细节部分。设计图呈现的效果,要保持大小比例,因为最后html要还原设计图的效果,尺寸大小基本上要一致才行。

做设计图是一个基本功,整体拼凑出来的效果,就是网页呈现的效果,布局以及颜色搭配,不是一边脑袋里想象,一边做页面,如果反反复复的更改,这样会增加修改的时间,效率也不高,所以说,前期设计图是非常重要的,也是最基本的。

做页面

页面是根据效果图来做的,如果ps功底不好,也想节约时间,那就仿站,仿你认为好的页面,不是鼠标右键另存为,不是照搬别人的css代码,而是参考他的页面,自己规划html布局,然后写css样式。写不出来,就查看源码,或者f12审查元素,看看别人怎么写的,不要复制,一定要自己一遍一遍的敲出来,这样自己才会有印象。这里我说的仿站的原则就是,不要照搬,要有你自己的思维方式。

3、学习与搜索

要会看文档,html + css。这部分建议在 www.w3school.com.cn 上学习,边学边练,每章后还有小测试。之后可以模仿一些网站做些页面。JavaScript如果没有其他编程语言的基础的话,学起来可能要费些力,还是建议先在 w3school上学习,jQuery 是一个 JavaScript 库,jQuery 极大地简化了 JavaScript 编程。很容易学习,比如引入库以后,可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素,可以实现元素的淡入淡出效果,可以在元素上创建滑动效果等等。

当然,如果css知识学得比较好的话,建议能用css实现的,就不要用js实现,比如二级菜单,图片实现鼠标滑动显示文字,排序等等效果。

遇到问题百度搜是常有的事,先自己调试,总是调试不出来,就上百度搜一下,看看别人写的经验方法,也可以查查w3school上的文档。能自己解决的就自己解决,这样你会特别有印象,在看别人经验方法的同时,你还能增加印象,下次遇到这类问题就能迎刃而解。

如果你还没有网站,建议做一个自己的博客网站,不仅仅是用来练手,还有个原因就是把它当成一个可以记笔记的地方,常记录,常更新,帮助别人的同时还能提高自己。

万事开头难,我希望从你下定决心要学习开始,就一定要坚持下去!每一个人的成功,都不是轻而易举的。越努力的人会越幸运!当你决心走上的前端设计之路,我们携手前行,我相信我们每一个人都是幸运儿!

原创文章,作者:xiaomeng,如若转载,请注明出处:http://www.rootdream.com/rmjq.html

联系我们

15066183303

在线咨询:点击这里给我发消息

邮件:1203442513@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息