记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航
查看: 42316|回复: 0
收起左侧

[设计经验] 全栈设计师指南 - 我居然看得懂[含11P]

[复制链接]
发表于 6 天前 | 显示全部楼层 |阅读模式
前端的发展很快,很多如PS、Sketch中的插件以及PxCook都是前端开发的,功能强大完全不输原生。不过想来作为设计的你也不会这么难为自己。

                                                       

我们今天来继续有意思且能看得懂的代码。


上几篇有说到前端包含HTML、CSS、JS,其中HTML相当于矩形工具或者文字工具所做的一个简单图层(只有初始的模样),而CSS就如图层样式、混合选项、滤镜等的增效操作,js类似PS中的动作、批处理等效率操作。


一般静态的项目结构如下图,我们也会按照以下结构来分解。





HTML



一个最简单的HTML结构如下图:





它由一些必须的英文单词组成,有些你认识,不认识的多数是缩写。如上图,我们逐行来解释一下:

其他常用标签中闭合标签有:div、p、a、span、header、section、table、canvas、h1-h6、ul、li、footer等,篇幅限制不做具体解释了,可去w3school去细看。


以上标签中有块级元素「div、p、header、section、h1-h6」和行内元素「a、span、strong、i」等区分,块级元素各自独立占据一行,类似PS中图层面板中的图层,一般一行只能显示一个图层,而行内元素是在横排一行显示,类似PS图层面板中的图层加了蒙版,一行有多个元素。不过html中的行内元素和块级元素是可以互相转化。



块级元素




块级元素转化为行内元素



CSS



css不像html有基础代码,css可以是html中的一段代码,也可以是一个独立的css文件(如style.css)并且初始代码可以为空。上面html的例子中的绿色和黄色,以及宽高大小等都是由css去控制。


css的规则一个属性对应一个值,具体到写法规则由一下两种:





推荐的写法是第一种且引用独立css文件,js也是类似,提倡独立引用,如下图的html中引入:





css的属性和值写法的规则了解之后,我们可以来一个文字描述题,比如,设计师做了一个黑色背景,垂直左右居中一个单词“PS”,PS的字号是30px,白色。


那么接着上面的例子就可以在style.css文件中输入以下代码:





css的属性非常多,本篇不做深入,可去 css.doyoe.com 去看文档。


css目前已经发展到基本稳定的css3,拥有很多的新属性,为此也产生了很多效率工具,如sass、less、postcss等,让css有了逻辑和继承的用法,但同时也让css变得复杂了,为了方便理解我们按照css的写法讲解。


JavaScript



牛逼的技术都有小名,Photoshop的小名叫PS,javascript的小名叫js,小名更易传播。但JS比PS难很多了,首先就不是可视化界面,全英文,通常大家比较晕前端就是因为JS这个复杂的技术。


html和css的写法都很固定,但是js除了基本语法规则之外,最难的是逻辑和功能实现。这里我们以jquery库的方法来讲解,简单很多,虽然已经不那么流行了。有小伙伴问过jquery与js的关系,就如现在流行的vue或者react一样,他们都是基于js去实现的操作框架,定义了很多方法和功能,引入框架之后,除了基本的语法规则遵循js,其他都是按照框架定义的方法去书写代码了。


比如我们还看上例,现在需求是:点击PS之后,把PS修改成PhotoShop,其他样式不变。





上图简单解释一下:$(function(){     })是jquery的启动函数,为了保证良好的体验一般都会把执行代码放入其内部,比如这个点击事件“click”。


这个点击事件依次解释为先获取PS的外层元素“p”标签,然后执行点击事件click,function内部的即为点击之后要做的事,这里是修改文字为PhotoShop。


这里新增了一个关键字:事件。除了点击“click”事件,常见的事件有:移动鼠标“onmouseover”、移开鼠标“onmouseout”、浏览器已完成页面的加载“onload”、元素改变“onchange”,在js中使用的时候去掉对应事件的on即可。


更改页面文字也比较常见,如现在需要点击之后增加一串文件,原文字还保留。





本文介绍了一些基础的规则和代码,例子的代码编辑工具为sublime text 3,推荐大家体验代码的时候使用HBuilder(代码提示全且预览也方便),html的预览比较简单,直接点击或者拖放到浏览器里即可。因为设计师更关注的是页面显示和动效部分,所以下文会着重讲css3动画以及响应式布局等。


PS:本系列的前端开发部分快结束了,欢迎关注公众号「全栈设计邦」一起学习交流。


本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?注册

x



上一篇:室内设计师需要掌握什么技能?怎么学好?
下一篇:全栈设计师指南 - 我居然看得懂
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
快速回复 返回顶部 返回列表