网站开发(前端)

网页前端,指的就是用户“看得见”的、浏览器呈现给用户的那一部分。与之对应的、用户看不见的用于数据处理的部分是后端。

一个良好的设计应该将前后端充分分离——这样程序猿可以专注于后端的功能实现,而设计狮可以专注于前端的设计。

前端语言

前端有且只有三种语言:HTML、CSS、JavaScript。尽管看起来很多,实际上每一样都不难学——它们是互相配合使用的。

  • HTML 用于描述“网页里有什么东西”。最新的标准是 HTML5。
  • CSS 用于描述“网页的东西长什么样”。最新的标准是 CSS3。
    • 为了支持一些动态语言功能,例如变量,人们在 CSS 的基础上进行了改进。常见的有两种语言:LESS、Sass。LESS 和 Sass 均会把它们的代码“翻译”成对应的 CSS 代码。但是,通过这两种“动态”语言,开发者可以维护良好的编码风格,从而提高生产力。
  • JavaScript 是一种脚本语言,主要用于操作网页上的元素 (DOM)。也可用于客户端的计算,例如在客户端的表单验证。
    • 派生语言:CoffeeScript、TypeScript 等,它们均吸收了其他语言的长处,避免了 JavaScript 的某些弊端。它们可以将自己的代码编译成合法的 JavaScript 代码。

注意

前端和后端的开发有很大区别——前端更专注于漂亮而又交互良好的用户界面。

在设计时要考虑到不同浏览器的差异:

  • 桌面浏览器
    • 不支持 HTML5 和 CSS3 的 IE6/7/8
    • IE 9/10/11
    • Chrome
    • Firefox
    • Safari
    • Opera
  • 移动设备(手机/平板)
    • Android 内置浏览器
    • Firefox
    • Chrome
    • Safari
    • 应用内浏览器:如 QQ、微信

尤其是 JavaScript 代码,如果未充分考虑浏览器兼容性,网站的功能会大打折扣。

设计时还应该考虑不同尺寸(分辨率)的差异,例如小屏和大屏手机、平板、1024x768、1366x768、1600x900、Retina 屏等。

流行框架

对于个人而言,从零开始设计网页是不明智的,特别是在需要兼顾移动设备的情况下。因此采用一些框架可以节省很多时间。

HTML5 Boilerplate 是一个良好的开始。

Bootstrap 和 Foundation 等都是一套设计好的样式,并且提供了很多可以直接使用的组件。因为这些样式用得太滥了,所以你可能更愿意重新设计样式(或者仅仅换个配色)。

至于 JavaScript,现在有大量封装好的 JavaScript 库,可用于动画、DOM 操作、AJAX、MVC 等各个方面,如 jQuery、Prototype.js、AngularJS、Backbone.js。

编辑器

如果前后端在一起,推荐 Jetbrains 家的产品——IntelliJ IDEA、WebStorm、PHPStorm……它们的价格非常贵,所以可以使用社区版本或学生优惠(不要钱)。

如果只写前端,推荐 Adobe Brackets。值得一提的是它的 Live Preview 功能,可以一边改代码一边看效果——有两个显示器那么工作就更轻松了。