网页设计及构建内容概览:
1、HTML脚本:一名卓越的网页设计师,务必掌握HTML脚本,这是学习网页设计及网站开发的基础课程。HTML脚本虽对初学者看似复杂,实则易于掌握。
2、JavaScript脚本:相较于HTML脚本,JavaScript脚本更具编程特性,但若想实现特殊效果,它同样是不可或缺的。
3、div+css风格:它能简化网页代码,提升网页打开速度,对搜索引擎收录网页亦大有裨益。它使网页与样式分离,众多企业在招聘网页设计师时,都要求掌握div+css风格布局页面。
数据库学习需讲究方法,学习数据库及其相关语言需注意相互关联,如学习Access,可能仅学习ASP,除非全面掌握数据库。
Web前端开发在产品开发环节的重要性日益凸显,且需要专业的前端设计师才能胜任,近年来此类专业人才备受追捧。
Web前端开发是一项特殊的工作,涉及知识面广泛,既包括具体技术,也涵盖抽象理念。简言之,其主要职责是优化网站界面,为用户提供更佳的用户体验。
Web前端开发与网页构建有何差异,详细解析如下:
自接触网站开发至今已有六年时光,今日偶然整理电脑资料,回顾当年为参加系内比赛制作的第一个网站,唤起一路走来的诸多回忆,有成功与喜悦、也有烦恼与纠结,感慨良多。在此与各位分享,愿对初学Web前端的朋友们有所助益。欢迎批评与指正。
先从大家学习中的误区谈起。
前端开发是一个新兴行业,课程体系尚不成熟,大学内也没有完整的前端课程体系,因此国内学习前端主要依靠培训与自学。
培训针对有条件者,众多小伙伴更倾向于自学。但自学力量有限,为帮助想学习的人更好地学习,推荐一个群组,前四位数字为657,中间为137,最后为906,群内有很多想学习的人与你交流,还有大牛每晚免费授课,愿学习的人均可加入,但仅限想学习的人,闲逛者请勿入内。
Web前端学习误区
网页构建是计算机专业学生在大学期间都会接触的一门课程,学习网页构建时使用的首个集成开发环境(IDE)多为Dreamweaver,这种所见即所得的IDE为网页制作带来了极大便利。
入门快、成效快,让我们在不知不觉中深深爱上了网页构建。此时,很多人会陷入误区,认为借助如此便捷的IDE,通过鼠标点击菜单即可快速制作网页。
那么,我们为何还要学习HTML、CSS、JavaScript、jQuery等这些繁琐的代码呢?这不是舍易求难吗?
但随着深入学习,会发现我们陷入困境——过度依赖IDE导致我们不清楚实现本质,只知其然不知其所以然。
因此,页面效果出现问题时,我们便束手无策,更不用说进行页面优化以及完成一些高级应用了。原因是显而易见的——智能IDE助长了我们的惰性,使我们忽略了华丽网页背后最本质的内容——代码。
正确方向胜过盲目努力
两只蚂蚁想翻越一堵墙寻找食物。一只蚂蚁来到墙脚毫不犹豫地向上爬,但每次爬到大半时都会因劳累、疲倦而跌落。虽然它不气馁,一次次跌落又重新开始。
另一只蚂蚁观察一番后,决定绕墙而过。很快,这只蚂蚁绕过墙来到食物前享受起来,而另一只蚂蚁还在不断跌落又重新开始。
很多时候,成功除了勇气和坚持不懈外,还需要正确的方向。也许有了好的方向,成功来得比想象中更快。若在错误的道路上奔跑,再怎么努力也是徒劳。学习Web前端也是如此,首先应选择正确的学习路线。
Web前端学习路线结合我的学习经验、辅导学生的经验以及公司实际项目需求,将Web前端学习分为以下几个阶段:
第一阶段——HTML学习。
超文本标记语言(HyperText Mark-up Language,简称HTML)是网页的骨架,无论是静态网页还是动态网页,最终都会在浏览器端以HTML代码的形式呈现。因此,我们必须掌握HTML的基本结构和常用标记及属性。
HTML学习是一个记忆和理解的过程,在学习过程中可以借助Dreamweaver的“拆分”视图辅助学习。在“设计”视图中看效果,在“代码”视图中学本质,充分发挥各种视图的优势,这种对照学习方法弥补了单纯记忆HTML标签和属性的枯燥乏味,相信对初学的小朋友们来说一定大有裨益!
在学习了HTML之后,我们只是掌握了各种“原材料”的制作方法,要想构建一栋楼房,还需要将这些“原材料”按照设计方案组合布局并进行美化。
于是进入第二个阶段——CSS学习。
CSS是英文Cascading Style Sheets的缩写,称为层叠样式表,是一种能真正实现网页表现与内容分离的样式设计语言。相对于传统HTML的表现,其样式可以复用,极大地提高了开发速度,降低了维护成本。
同时,CSS中的盒子模型、相对布局、绝对布局等能够实现对网页中各对象的位置排版进行像素级的精确控制。通过此阶段的学习,我们就可以顺利完成“一栋楼房”的建设。
同时CSS中的容器模型、相对定位、绝对定位等能够实现对网页中各对象的位置排版进行像素级的精确控制。通过此阶段的学习,我们就可以顺利完成“一栋大楼”的建设。
“大楼”建设完成之后,我们可以交付用户使用,但是如果想让用户获得更佳的体验,我们还可以对“大楼”进行更深一步的“装饰”,让它看起来更“奢华”一些。
为了完成这个任务,我们进入第三个阶段——JavaScript的学习。
JavaScript是一种在客户端广泛使用的脚本语言,在JavaScript当中为我们提供了一些内置函数、对象和DOM操作,借助这些内容我们可以来实现一些客户端的特效、验证、交互等,使我们的页面看起来不那么单调,屌丝瞬间逆袭高富帅!有么有?
此时,也许你还沉浸在JavaScript给你带来的惊喜之中,但你的项目经理却突然对你大吼道:
“这个效果在××浏览器下不兼容,重新做……”
“不兼容?”瞬间愣住了有木有?
“我靠,坑爹啊!那可是花了我一个晚上写了几百行代码搞定的啊,心疼了都!”
JavaScript的兼容性和复杂性有时候的确让我们苦恼,还好有“高手”帮我们做了封装。
接下来我们进入第四个阶段——jQuery的学习。
jQuery是一个免费、开源的轻量级JavaScript库,并且兼容各种浏览器(jQuery2.0及后续版本放弃了对IE6/7/8浏览器的支持),同时现在有很多基于jQuery的插件可供选择,这样在我们实现一些丰富的动态效果时更方便快捷,大大节省了我们开发的时间,提高了开发速度,这也充分体现了其write less,do more的核心宗旨。这个感觉倍儿爽!有么有?
“奢华大楼”至此拔地而起,但是每天这样日复一日,年复一年的盖楼,好繁琐!能不能将大楼里面每一个单独部件模块化,当需要盖楼时就像堆积木一样组合在一起,这样岂不是乐在其中?可以实现吗?答案是肯定的。
这种思想在Web前端开发中也是适用的,于是乎就出现了各种前端框架,在这里推荐给大家的是Bootstrap。 Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,是一个CSS/HTML框架,并且支持响应式布局。一经推出后颇受欢迎,一直是GitHub上的热门开源项目。
在项目开发过程中,我们可以借助Bootstrap提供的CSS样式、组件、JavaScript插件等快速的完成页面布局和样式设置,然后再有针对性的微调样式,这样基于框架进行开发大大缩短了开发周期。站在巨人的肩膀上就是爽!
Web前端的学习建议
最后给大家聊聊在学习Web前端中的一些建议和方法。
在CSS布局时需要注意的一个问题是很多同学缺乏对页面布局进行整体分析,不能够从宏观上对页面中盒子间的嵌套关系进行把握,就急于动手去做,导致页面中各元素间的关系很混乱,容易出现盒子在浮动时错位等情况。建议大家在布局时采用“自上而下,逐步细化”的思想,先用几个盒子将页面从整体上划分,然后逐步在盒子中继续嵌套盒子。
“君子生非异也,善假于物也”,在学习的过程中还要多浏览一些优秀的网站,善于分析借鉴其设计思路和布局方法,见多识广,进而才可以融会贯通,取他人之长为我所用。
同时还要善于使用Firebug这个利器。Firebug一方面可以在我们学习过程中帮助我们调试自己的页面,另一方面我们可以使用Firebug方便地查看、分析别人网站的源代码,“偷”也是一种技能!
随着移动互联网热潮的到来,移动开发越来越受到大家的追捧,响应式布局、微网站等需求量不断增加,也是我们Web前端未来的发展方向之一,学有余力的同学可以多多关注。最后祝愿大家能在Web前端开发道路上走出一片更宽更广的天地!