skyADMIN

一个后端写的前端入门教程

开个前端入门教程。目标人群,有美术、设计功底,但对网页,前端毫无基础的。若该教程有错误,欢迎指正。

首先,啥是前端?

前端概念比较新,我说的不一定对,就我理解来看,整个网页被用户看到的部分,都是前端工程师所做的东西。包括,页面,布局,图片,特效,UI,交互等等……说得通俗点,写网页的。那后端,或者说,程序员是干嘛的呢?程序员负责网站,或者说web application的逻辑层的东西。比如,用户的注册登录,表单的提交,信息的存取。(个人理解,勿拍砖)

网页的一般形式就是一个HTML文件,HTML也是一门语言,但是应该不算一门编程语言,关于HTML,自行百度一下相关内容吧,不看也行,不影响。

一、开发工具

C语言或者C++或者VB应该是大学的必修课,写这些语言的时候,往往我们会用一个叫IDE的东西,IDE是集成开发环境,集成了编辑器编译器等东西,但写网页不需要这么复杂。

一个文本编辑器 & 一个浏览器,足矣。推荐sublime 3和Chrome,理论上来说,记事本和IE也是可以的,但是最好不要这么干,中国有句老话叫闷声发……哦不,是no 作 no die。注意,步入开发界请养成一个习惯,从官网下载安装软件。(Chrome的官网打不开就不要勉强自己了,谨慎的从百度下载吧,当心中全家桶)

下载安装成功打开后大概是这个样子:

6E0298ED-8B16-4EA2-9FBA-9A93620141F9

右下角有个plain Text,点一下里面有很多东西可以选,选HTML。

然后写一些东西,这是一个标准的html5的格式:

E5CB0BC0-FD84-49A1-80B9-807641DEA3FF

可以看到HTML中,有很多用尖括弧包围的单词,这叫HTML标签,比如head是HTML的头部,这部分信息是不在浏览器中显示的,通常包含这个网页的title(题目),标签大部分都是成对出现的,除了一些自闭合标签。

以实践为主吧,很多人买了一些书想学HTML,最后都没成,估计是因为书太絮叨。恩,生死看淡,不服就干……写成这样:

B2FCA679-D14C-46B9-8ACC-F7A5D7154B5A

然后按ctrl+s保存(Mac按command+s)。D盘或者E盘建个HTML文件夹,保存进去,文件名取index.html。然后通过“我的电脑”,访问那个文件夹,里面应该有一个index.html(看不到文件扩展名请自行百度win显示文件扩展名),右键,打开方式,chrome浏览器。然后就能看到一个网页,一行字,第一个网页。

额,如果有乱码的,要不先输英语吧……把body标签里的内容改成my first web page,按ctrl+s保存后,浏览器里刷新一下,就可以看到了。

所以有点丑是么,好吧,接下来介绍chrome浏览器。

为啥一款浏览器我要放到开发工具里讲?因为它真的是开发工具呀。找一个页面试试手,比如我们学校的英文版首页吧,算了我看了一下,改版以后代码也不好看了,拿个代码规范点的来实验,其实不规范也能实验。

好吧拿淘宝来搞点事吧。恩先截个图看看淘宝网的样子,只截了部分,不漏用户名,防止你们给我打钱,打钱就QQ打嘛,别悄悄咪咪的是不是……233333

4CED0CFF-ADBE-4A5C-A6A5-F102B2611E54

看到左边的列表的标题了么?主题市场?我们改一改,改成啥好呢?恩,,,就改成“啥好呢”吧。

ADB3D083-1C92-439B-A6A6-1EE278C1C86D

打开开发者工具,右上角的那个三个横杠那个按钮,更多工具里,开发者工具。然后就能看到这个界面,然后左上角箭头所指的那个东西,按一下后鼠标再去页面上找“元素”,页面上显示的都是元素,有文字,有图片,还有各种标签。元素可以包含元素,大元素小元素(其实我这里又是在瞎说,知道真相的低调给我纠正下哈。)去页面上找那个主题市场,一点,就能在开发者工具里看到红框部分的文字了,什么你说没有?有的小三角你展开找找……

右键这一行,edit text或者edit as html或者直接双击都能改动它,现在改成,“啥好呢”然后看看页面的效果:

E40F141C-D6E9-421F-ABA7-267BB54E053D

好的,这就是最基本的,开发工具。有了这两个东西,至少可以复制粘贴很多网站玩了。

接下来讲第二个东西。

 

二、HTML和CSS

HTML是网页文档格式,浏览器之所以能打开网页,其实是浏览器向目标网址发送了请求,目标服务器返回一份html文档,浏览器获取到文档后按相应的规则解析渲染出样式。

在上一节里写了一个简单的HTML。基本的HTML格式就是那样的,HTML的内容我不能说,因为第一它太多了,第二我记不清,但是有整理好的。所以只需要看这里:http://www.w3school.com.cn/html/index.asp

通读一遍and自己手写一下试试。感受感受。

那么CSS是啥?

学名好像叫层叠样式表,样式表,顾名思义,控制页面样式的。html标签标签可以通过设定style来设定样式,比如,红色背景,大号字体,矩形框,圆角矩形,布局等等。

但是html应该专注于内容,把样式写进html会导致难以维护,难以看懂,所以要页面和样式分离,css主管样式,html主管页面,html通过引入css文件,标签里通过class,id等加载样式。

具体什么意思呢?来吧,这里:http://www.w3school.com.cn/css/index.asp

好的,到这里已经可以自己写网页了。至少做一个这样的网页是不难的。

 

三、前端框架以及响应式

其实按理说这里应该说JS了……

但是如果是没有编程基础的设计人员,还是先不考虑js了。先说响应式吧。电脑屏幕有大有小,不过总的来说分辨率还是相近的,但是现在出现了平板和手机。尤其是手机,普通的网页会通过缩放把页面原封不动显示在手机上,也不是不可以,可是问题在于,我要看清楚字就需要放大,然后,从左侧滑到右侧,看完一行字,要看下一行又要从右侧拉回左侧。这种横向操作简直反人类。

而响应式就是说通过在不同尺寸的屏幕(分辨率)下用不同的方式显示相同的内容,比如本网站采用的主题就具有响应式,可以拉动浏览器侧边框使之变窄。及时最窄的时候,也不会出现横向滚动的条,可以在浏览器内顺利的阅读文字内容。

那么响应式这么高端的东西,是不是很难实现……我觉得是的,同时也不是。因为有框架这种东西。所谓框架,就是别人做好了很多工作,很多标准化的,必须做的,应该做的工作。咱只需要在它的基础上继续完成自己的东西。

最基础的框架是bootstrap。程序员最爱的框架,它能让完全不懂设计的程序员做一个勉强能看的界面。

这个框架的基础用法就是,去它的网站(鉴于我的英文不好,我选择了中文版网站……):http://v3.bootcss.com/getting-started/#download

下载用于生产环境的bootstrap。然后解压出来。里面有bootstrap.css,复制进咱的工程目录的css文件夹下。然后在html中引入。

之后呢?就参照文档使用就好了。刚刚给的网址拉到顶,全局css、组件里的东西,看看如何使用。比如,不比了,心累……

拿着这个bootstrap框架,可以比较快速地开发一个能看的网页出来。

先写这么多吧,之后讲js……感觉前端可以死在js上了……

码字很辛苦,转载请注明来自环宇博客《一个后端写的前端入门教程》

评论

  1. Pingback: 浩竣的个人主页