制造业
前端开发
前端开发


Stylesheet css/basic.css not found, using css/basic.less instead. Please contact developer of "starter" template.
Stylesheet ../dokuwiki/css/_search.css not found, using ../dokuwiki/css/_search.less instead. Please contact developer of "starter" template.
Stylesheet ../dokuwiki/css/_admin.css not found, using ../dokuwiki/css/_admin.less instead. Please contact developer of "starter" template.
Stylesheet css/structure.css not found, using css/structure.less instead. Please contact developer of "starter" template.
Stylesheet css/design.css not found, using css/design.less instead. Please contact developer of "starter" template.
Stylesheet css/content.css not found, using css/content.less instead. Please contact developer of "starter" template.
Stylesheet css/includes.css not found, using css/includes.less instead. Please contact developer of "starter" template.
Stylesheet css/title.css not found, using css/title.less instead. Please contact developer of "starter" template.
Stylesheet css/list.css not found, using css/list.less instead. Please contact developer of "starter" template.
Stylesheet css/auth.css not found, using css/auth.less instead. Please contact developer of "starter" template.
Stylesheet css/mobile.css not found, using css/mobile.less instead. Please contact developer of "starter" template.
Stylesheet css/print.css not found, using css/print.less instead. Please contact developer of "starter" template.

简介

限于早期 Web 浏览器的定位与功能,20 世纪 90 年代 Web 诞生至 21 世纪初,网页主要用于展示,最常见的方式是通过 Photoshop、Fireworks、Dreamweaver 等软件精心排版,并辅助以一些基本的 JavaScript 和css 片段来完成一些简单的交互效果。后期,Flash 等浏览器增强插件平台曾以引入外部可执行组件的方式大大丰富了网页的能力和表现力,一度成为网页开发的主流。但前端技术更新迭代较快, 一些技术如Flash将逐步被其他技术取代。

评判标准

种类

现代网页开发大量使用 JavaScript 来增强用户体验,逐渐从「网页设计」转变为「应用开发」,网页开发进入了一个全新的时代,浏览器成为了新一代的通用客户端平台,JavaScript 社区快速发展,从简单的辅助性交互脚本摇身一变成为几乎所有 Web 应用的基础,相关的框架层出不穷,代表性的有 Vue、React、Angular。

因现代网页自由度高、迭代方便、跨平台能力较强,不少应用采用网页和原生客户端代码混合的方式开发,甚至衍生出了相关平台,如小程序等。

限于早期 Web 浏览器的定位与功能,20 世纪 90 年代 Web 诞生至 21 世纪初,网页主要用于展示,此时的网页目标在于以各种方式展示多媒体内容,最常见的方式是通过 Photoshop、Fireworks、Dreamweaver 等软件精心排版,并辅助以一些基本的 JavaScript 片段来完成一些简单的交互效果。由于当时网页开发的一些局限,当时网页开发从业者大量重复切割设计稿图片并使用 HTMLCSS 拼接,故一度被称为「切图仔」。在这一阶段的后期,Flash、Silverlight、Java Applet 等浏览器增强插件平台曾以引入外部可执行组件的方式大大丰富了网页的能力和表现力,一度成为网页开发的主流。Flash 更被民间称为「网页开发三剑客」之一,至今仍有一部分网站依然在使用 Flash 来增强用户体验,虽然这些做法事实上已经过时。

自谷歌的 Chrome 浏览器发布以来,现代网页开发大量使用 JavaScript 来增强用户体验。以 Gmail 为代表,现代的网页开发逐渐从「网页设计」转变为「应用开发」,网页开发进入了一个全新的时代,浏览器成为了新一代的通用客户端平台,因此「网页开发」近些年来有了新的名字「前端开发」,与网站后端数据和业务逻辑开发相对应。JavaScript 社区快速发展,JavaScript 语言从简单的辅助性交互脚本摇身一变成为几乎所有 Web 应用的基础,相关的框架层出不穷,目前流行的框架中,逻辑相关的流行框架有 Vue、React 与 Angular,UI 组件库类框架有 Bootstrap、Foundation 等,各个逻辑框架亦有各自较大的组件库。

大量原先的「客户端」「桌面应用」等亦广泛在其中采用现代网页,因现代网页自由度高、迭代方便、跨平台能力较强。不少应用采用网页和原生客户端代码混合的方式开发,甚至衍生出了相关平台,如小程序等。

单页应用SPA

单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。此类网页更接近原生手机应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript,之后所有的操作都在这张页面上完成,这一切都由JavaScript来控制。因此,单页Web应用会包含大量的JavaScript代码。

基于Vue、React 与 Angular等前端开发框架。开发者可以组件化的开发网页的各个部分,最后拼装到一起。这样的开发逻辑,与原生APP更加相似。

相关技术

  • ajax:一种从前端向后端发送、请求数据的方式。页面上的数据都需要通过AJAX同步、提交。
  • 路由:在URL中采用#号来作为当前视图的地址,改变#号后的参数,页面并不会重载。

常见单页应用

  • Gmail
  • Evernote
  • Trello

工作流程

  1. 由UI 的设计人员设计出每个页面的每个控件样式、颜色和布局
  2. 前端程序员根据设计用HTML 写出网页的所有下拉菜单、导航栏等控件以及文字内容
  3. 前端程序员根据设计使用样式层叠表(CSS)
  4. 前端程序员根据设计使用JavaScript 使页面动起来
  5. 前端程序员与后端程序员进行共同以确认网站前后端的交互
  6. 前后端结合,测试上线

组织结构

部门分工

人员分工

经营设计

一、根据用户需求 UI设计师设计其相应的页面交给前端程序员
二、根据市场需求制作相应需求的画面及设计

需求分析

一、根据用户需求,制作各个页面相应板块功能。

二、据相应市场,制作需求的功能 如:阅读,放大,保存,转发等类

目标界定

一、由PC端浏览器展示的前端web网页

二、由移动端浏览器展示的web网页,基于安卓与iOS有偏差,部分UI设计师会制作不同页面效果

三、自适应式web前端页面,该页面能良好的适应不同PC端分辨率及移动端分辨率,展示良好的页面效果

总体结构设计

详细结构设计

参数设计

设计实施

工具

图形编辑 & 原型制作:Photoshop、墨刀、Axure、Mockplus、Pixate、INVISION 等

代码编写:Visual Studio Code、Sublime Text、WebStorm、Visual Studio、Atom、HBuilder、Adobe Dreamweaver 等

代码托管:GitHub、GitLab 、Azure DevOps 等

版本控制系统: 最通行的解决方案为 Git。网页开发行业几乎不选用其他版本控制系统。

主要语言

网页的编写通常都是由HTML(超文本标记语言)、CSS(层叠样式表)、JavaScript(一种直译式脚本语言),这三种语言编写完成的。按照业内开发规则通常是HTML负责网页的框架,CSS负责样式,而JavaScript负责网页的相关逻辑。现如,html文件选用html5的规范进行编写,CSS也是使用CSS3的规范,JS的语法也是在逐年的更新,如ES6、ES7等。TypeScript作为一门诞生于JS的语言,既继承了JS的优点同时也在此基础上有了改进,稳定性和严谨性都有了提升,使用TS是未来发展的趋势。

HTML

HTML 是用来描述网页的一种语言。

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)
  • HTML 不是一种编程语言,而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)
  • HTML 使用标记标签来描述网页

HTML标签是由尖括号包围的关键词,比如<html>,一般是成对出现开始和结束标签也被成为开放标签和闭合标签,比如<p></p>,标签中可以存放页面元素和相关内容。 HTML文档就是网页,浏览器通过解析HTML文档渲染出整个网页的内容,并以我们熟悉的网页形式显示出来。

CSS

CSS是美化网页的一种样式表

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中

JavaScript

HTML+CSS就能写出一个静态的网页样式,但很难仅通过这两种语言来写出一个动态的网站。JavaScript脚本语言的出现能够改变HTML的属性,动态的对HTML,CSS进行修改,主要目的是给HTML网页增加动态功能。通常JavaScript脚本是通过嵌入在HTML种来实现自身的功能的。

  • JavaScript是一种解释性的脚本语言(其代码不需要进行预编译)
  • 跨平台支持,可以支持绝大多数的浏览器、操作系统
  • 可以直接嵌入HTML代码中,也可以单独写成一个js文件

JavaScript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。JavaScript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方,表达式则可以完成较复杂的信息处理。

设计和规划

一、UI设计师根据产品需求分析文档,对产品的整体美术风格、交互设计、界面结构、操作流程等做出设计。负责项目中各种交互界面、图标、LOGO、按钮等相关元素的设计与制作。

位置与环境

投资与评估

规模与功能

风格与形式

成本

税费

金融成本

原材料成本

房租成本

能耗成本

人工成本

设备折旧

收益管理

消费曲线

时间分布

空间分布

目标群体

容量控制

风险控制

行业

国内市场

产量

消费量

国际市场

产量

消费量

主要公司

标准

这里存放条目相关的国家标准 网页开发实际为前端开发中WEB开发,网页开发标准遵循W3C(World Wide Web Consortium万维网联盟)网页开发标准;

文档

这里存放于条目相关的其他文档

编辑成员
19 人

Amani, Pooh, Qnner, 阿白, Nan.南城, 王大白, 良绅, 木又, UxieKong, 华南, AP0STR0PH3, laosb, 秋山骏, 李大强, 杀不死, Jackie, 梅花落满了南山, 风清怜宥凉, zhshch

评论(4)

你需要登录发表评论。
zmw 2019-11-18 15:07:50
版式可能需要改革和优化,并不是所有的类别都是这样一层不变的
秋山骏 2019-08-15 13:48:34
这个条目主要内容是关于前端开发的,那么后端开发怎么办?是否要在【软件开发】下新开一个条目为【网站后端开发】,并把本条目名称改为【网站前端开发】?或者把本条目名称改为【网站开发】,然后将前端与后端在子标题中单独列出?
SheepChef 2019-08-15 13:48:34
PHP没有吗?现在很多网站都是PHP写的,例如Wordpress
oLubo1U6rnBSSGVcU9mBezOYSC-I 2019-08-15 13:48:34
0.0
1
回形针手册-icons