您当前的位置是:首页 > 新闻详情
前端网页制作要领

Web 前端技术的开始,虽然对于老手来说这部分技术很简单,但对于新手来讲开头是最难的。技术种类繁多,不知道从何处下手,所以必须有一个良好的学习路径。对于学习路径的规划,可以参考以下几个步骤:

(1)学习前端技术从HTML开始,同时也要了解一些UI方面的知识。HTML是为了将内容放到网页上,如文字、图片和表单等,是一个网页的骨架。无论是静态网页还是动态网页,最终返回到浏览器端的都是HTML代码,浏览器将HTML代码解释渲染后呈现给用户。因此,我们必须掌握HTML的基本结构和常用标签及属性。也可以通过HTML中的标签和属性做一些简单的页面布局和样式处理,但这是 CSS 的强项,所以这方面的内容仅作为了解即可。目前学习HTML可直接从HTML5入手,重点掌握最新一代HTML语言的语义化标签。HTML的学习是一个记忆和理解的过程,需要通过代码和效果进行对照学习的方法,来弥补单纯识记HTML标

签和属性的枯燥乏味。

(2)学习 HTML 之后,只是掌握了各种“原材料”的制作方法,如果想盖一幢楼房,那么还需要把这些“原材料”按照我们设计的方案组合布局在一起并进行一些样式的美化,这就需要开始学习CSS技术。CSS即层叠样式表,是专门为页面中的HTML标签添加样式的语言,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统 HTML 的表现而言,其样式是可以复用的,从而极大地提高了我们开发的速度,降低了维护的成本。当然学习CSS和学习HTML一样,也是从基本的使用语法开始学起,然后掌握CSS和HTML配合使用的几种方式、CSS的样式选择器和常用的CSS样式属性。也可以从CSS3直接开始学习,重点掌握CSS3中新增加的样式选择器和新的样式属性。由于样式属性比较多,所以划分为与外观相关的、与布局相关的,以及做盒子模型有关的几部分属性去学习。

(3)其实学完HTML和CSS两门技术就可以编写页面了,但只能说你对HTML和CSS技术有了一定的了解,对其中一些常用的知识还没有完全掌握,也不能在项目中熟练地应用。要想达到技术熟练使用的地步,就必须要学会HTML和CSS的结合使用,完成各种需求下的页面布局。例如,CSS中的盒子模型、相对布局、绝对布局等,能够实现对网页中各对象的位置排版进行像素级的精确控制。当然,和语言发展及应用场景不同,CSS有很多种页面布局方法,如表格布局、浮动布局、定位布局、网格布局,以及响应式页面布局等。

(4)虽然能布局页面就已经算是一名合格的页面制作人员了,但由于CSS3为了能兼容各种浏览器有很多样式属性,同一个属性要不同的前缀写多次才能做到,特别是大型项目中CSS属性非常多。SASS是世界上最成熟、稳定、功能强大的专业级CSS扩展语言,提供了许多便利的写法,大大节省了设计者的时间,使得 CSS 的开发变得简单和可维护。所以建议读者学完CSS以后,掌握SASS语言的用法。

(5)当你掌握了 SASS 的一些基本入门知识点后,可以趁热打铁,“工欲善其事,必先利其器”,最好再去学习一下SASS工具Compass。Compass是SASS团队成员开发的,是对SASS的一个封装,目的是为开发者提供一些丰富的组件以及一些实用的工具模块。由于浏览器对CSS3支持的差异性,我们很多时候需要写及一些实用的工具模块。由于浏览器对CSS3支持的差异性,我们很多时候需要写一堆针对不同浏览器的前缀样式,着实很烦人,而Compass帮我们解决了这个问题,我们只需引入相应样式定义即可,Compass会自动为我们生成针对不同浏览器的样式定义。

(6)掌握上面提到的全部内容后,即可实现自己想要的效果。但开发页面就像盖大楼一样,每天这样日复一日、年复一年地盖楼,非常烦琐。能不能将大楼里面每一个单独部件模块化,当需要盖楼时就像堆积木一样组合在一起呢?这种思想在Web前端开发中同样适用,于是就出现了各种前端框架。在这里,笔者推荐给大家的是Bootstrap。Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,它是目前最受欢迎的HTML、CSS和JS框架,用于开发响应式页面布局、移动设备优先的 Web 项目,为所有开发者、所有应用场景而设计。Bootstrap让前端开发更快速、简单,所有开发者都能快速上手,所有设备都可以适配,所有项目都适用。在项目开发过程中,可以借助Bootstrap提供的CSS样式、组件、JavaScript插件等快速完成页面布局和样式设置,然后再有针对性地微调样式,这样基于框架进行开发大大缩短了开发周期。所以,能掌握一款好的前端框架是非常有帮助的。

(7)掌握基础知识后,下一步就是熟练使用这些技术。要想做到这一点,需要多看、多写、多练。通过不断开发项目积累经验,从实战中提升自己解决问题的能力,积累开发素材,摸索创新方法。“君子生非异也,善假于物也”,在开发和学习的过程中还要多浏览一些优秀的网站,善于分析、借鉴其设计思路和布局方法,见多方能识广,进而才可以融会贯通,取他人之长为我所用。同时还要善于使用Firebug这样的利器,一方面可以在我们学习过程中帮助我们调试自己的页面,另一方面,我们可以使用Firebug方便地查看、分析他人网站的源代码,“偷”也是一种技能。几个项目跟下来,一定可以成为页面制作专家。

百度网站建设

上一篇:异常处理机制   下一篇:安装PHP 7的注意事项
My title page contents

在线咨询

咨询热线:

注册后系统将分配专员联系您

在线咨询QQ:

在线客服QQ:1215917463  客服