公司新闻
 
零基础也能看懂!写给设计师的前端小知识之网页排版(附实战)
 

  搜狐社交产品「狐友」正式上线 内置壁纸 / macOS Catalina 6K 默认壁纸打包下载

  Sunny萧萧:本文作为小白入门级,相对基础,是写给现在想了解一点前端知识的设计师同行们,力求通俗易懂幽默风趣。这一章不仅教大家网页排版的基础知识,还以百度艺术百科的网页为例,带大家简单做一遍,学得会更快,来收!

  工具不重要,工具不重要,工具不重要……OK?有人说DW早就淘汰了,我造啊,然后呢?我还打算用小红本(editPlus)讲呢,哈哈哈哈……

  希望乃们接受我这种循序渐进的过程。做算术题你会知道“乘法”和“设未知数”来得更快,但是也得从简单“加减法”过渡。如果有疑问请留言或私信,下篇会着重讲。

  其实程序员是一帮蛮会偷懒的家伙你信么?^_^ 在码字过程中,如果遇到常用的一段代码,就会想办法打包起来,需要的时候一行代码或几行代码就可以调出来用而不用重复写,系不系很机智。让我想起来我们常用的那些PS动作们,不就是同样的原理吗?

  像这种直接放在div标签内style里的样式称为嵌入样式。只服务于它嵌入的那个标签,而对其他标签的样式不会产生影响。

  下面这个你们还记得吧?我虽然读书少,但我还记得,哈哈……提取公因式的原理即使把a、c共同拥有的公因式b提取出来……所得结果一样。

  则最后style中就只剩下了颜色值,是不是很短了?而且大部分时间是不用每个div都附上颜色的,我们今天只是拿带颜色的矩形来模拟一下,所以真正应用时仅存的颜色那一句都会被删掉。

  公共样式提出来了,也用盒子装好了,但是他们之间还没有搭上关系,这就需要在div内引用一下写好的类:

  是不是和前面那种写法得到的效果一样?像这种头部style标签中能够被其他标签通过类名来引用的样式,称为:内联样式。

  它的作用域就大些了,但是也仅限于当前html文件中,只要引用了便能对引用的标签样式产生影响,可复用的。常规做法有时候会加上一句“type=text/css”即为:style type=text/css/style,但是我一般会省略,发现也木有啥影响,加了应该是比较规范吧。

  这个是相对比较传统的排版方式,虽然中规中矩,形式却蛮多的。文字、图片、标签、视频播放……比较适合排版练习。

  web端网页最大的优势在于,设计稿什么样,开发就能做成什么样,因为不用像移动端考虑那么多适配问题(想想以前的写手机端黑历史,托腮仰天,老泪纵横……T_T)。我给周围转web前端的朋友的建议都是,先把PC的布局搞定再去写移动设备端的会轻松一点。

  拿到设计需求就立马打开PS做东西的事情,反正我是不干的,一般会事倍功半。同样,拿到网页设计稿也请不要立马开始码字,我们需要审题。

  告诉我你看上面那张图片看到了几块吧?以前画素描的时候,老师是不是告诉过你要眯着眼睛看光影关系,因为人容易被一些细节所影响,所以先铺大面,再抠细节,一张合格的素描才能被很好的完成。同样,一个网页,无论内容再多,分布也是从大到小慢慢抠出来的。

  好,现在的结构已经不是单独的平行结构了。第一个div有了自己的孩子(注意换行缩格,这样层级关系较明显一些)即装文字的五个div(也可用其他标签装,例如:a、p、span……)。为什么称之为孩子,因为在html中有子标签及父标签一说。有时候子标签会继承父标签的样式,但大多是标签所含的内容,而不是标签本身,即如果给“title_tab”添加针对文本的样式,那么子标签内的文本也即将改变,除非子标签拥有自己的 针对文本的样式,然而不是所有时候都能成功继承(诶……越讲越多)。

  1)样式提供多种书写方式,不仅仅只有.className,可以带标签名 p{}、div{}……带标签名则不用前面加点,不过是针对当前html文件中所有p标签和div标签,所以你知道我为什么说类名尽量不要使用跟标签名一样的了吧?要是忘记写点了,那画面,简直不敢想象。像文中“ *{ } ”的*号则代表所有,margin是间距属性,每个浏览器的默认里面,margin是有值的,所以需要进行一些设置。如下图:

  最后,也可单独针对一边设置,例:padding-left:10px;  margin-top:20px;

  好了,今天就讲到这里了,你们看我写的代码都有点不一样,就说明不是一天写的啦,时间真是不够用呢。下篇补充样式内容,接着排版。

  优设网#8220;是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。

  设计微博:拥有粉丝量112万的人气微博@优秀网页设计,欢迎关注获取网页设计资源、下载顶尖设计素材。

  本专题堪称Banner 设计自学指南,从最基础的四大构成元素,到每个元素的设计方法都有超全的干货说明,针对每年的重要电商节日,还发了专题教程。除了教程和方法,还为电商设计师贴心准备了职场规划,快点下你收藏的小手吧~

  想知道你每天都在用的表情都是如何设计出来的?这里不仅有背后的设计故事,还有表情绘制技巧和设计师专用表情包,让你成为表情包大师!

  工欲善其事,必先利其器。现在花10分钟认识一款新插件,就能在以后的工作中省下10小时。还等什么呢?

  通过本专题,您可以先学习基础的产品+交互动效基础,进而学习动效可用性原理、动效表达式等提高对动效的认识。另附上两个寻找和保存动效灵感的小技巧,帮你补充动效库。最后附上让动效落地的方法,让你的动效不止于酷炫。

 
产品搜索:
最新产品
联系方式