零基础也能看懂!写给设计师的前端小知识之各司其职 - 优设网 - UISDC

零基础也能看懂!写给设计师的前端小知识之各司其职

2016/06/14 9023评论区

front-end-basic-task-allocation-1

Sunny萧萧:本文作为小白入门级,相对基础,是写给现在想了解一点前端知识的设计师同行们,今天这章用设计师熟悉的PS来解释前端相关的术语,通俗易懂幽默风趣,绝对是小白入门的好教程!

往期回顾:

  1. 《零基础也能看懂!写给设计师的前端小知识之小白入门篇(一)》
  2. 《零基础也能看懂!写给设计师的前端小知识之征服霸道DIV篇(二)》
  3. 《零基础也能看懂!写给设计师的前端小知识之网页排版(附实战)》
  4. 《零基础也能看懂!写给设计师的前端小知识之排版三步走起来》

今天要讲三个东西:

  1. 文件路径关系
  2. 各式文本
  3. 继续排版

看不懂的童鞋,不要偷懒,去把前面的补一下。

一、路径关系——各司其职

上一节中,要调用图片的时候用了这么一句:

background:url(imges/01.jpg);

图片、链接地址、样式文件、js文件……等都是经常需要外界支持的东西,浏览器通过html标签内的各式url地址去一一找到然后呈现出来,一旦地址错误,比如找不到样式文件或者图片,那网页所呈现出来的就不知道神马鬼了。所以,虽然大多数文件都可以浏览选择并不需要手动去敲,但是了解个中关系,对处理问题也是有一定好处的。

如下图,一个相对较完整的文件夹是酱紫的,包含主页index和所需的样式文件、images、js等,哪怕样式文件就一个都要单独建立一个文件夹,html文件一般放在其他文件的上层,但是html文件很多,或者分??榈那榭鱿乱彩切枰ㄎ募羞???锤鋈讼埠美病?/p>

index.html中要是需要引用images下的图片01,地址为:images/01.jpg。

qd201606141

正常情况下,当然不是所有东西都在一个页面上处理啦,不仅样式要单独放在一个.css文件中,所有图片也是要单独放个文件夹的。

不同层级间要引用其他地方的文件时路径该怎么写呢?下面举几类的例子。

1)同级

qd201606142

以index.html为参考点,若再增加一张图片(此处为举例添加的02.jpg文件) ,要引用与自己同等级文件,不用写别的了,直接文件名就OK了。例:url(02.jpg);

2)下级

qd201606143

同样,以index.html为参考点,它要引用比他低一级的01.jpg,首先,01往上找,是它所属的images文件夹,这个文件夹刚好与参考点同一级,即与01之间只跨一级,则使用一个斜杠“/”,(向下两级则是两个斜杠哦)index想要引用images下的文件,首先得经过images的同意,所以路径还要带上它的“签名”,最后得来路径则是:url(images/01.jpg);

3)上级

qd201606144

以index.css 为参考点,想引用02.jpg ,首先还是得往上看,参考点属于css文件夹,而02.jpg跟他爹“同辈”,但是不能直呼其名啊,所以用两点“..”来代替,其实这两点也可以是总文件夹的代替名,因为对index.css来说并无多大意义。

好了,找到规律了没?如果index.css要找index.js文件该怎么找捏?这个,留给大家思考一下,嘿嘿……(提示一下,先往上找,再往下找)

二、各式文本

html中,除了展示图,就是文了,现在来介绍一下几种文本形式:

1. 短文本

qd201606145

如上图蓝色标示的几处,这些文本一般一行足以,无换行,常用标题,名字等。它们的宽高可设可不设,但是保险起见是要用盒子装着的,常用<p></p> 、<span></span>……等,装入文本即可,然后对字体大?。╢ont-size)、颜色(color)、粗细(font-weight)等进行样式设置。

2. 换行长文本

如上图紫色标示的地方,这种文本一般用在正文。排文字版的时候我们当然不愿意多余的文字就那么直愣愣的跑出去了,希望在固定的宽内自动换行,而不是在结尾处加<br/>这个标签来手动换行。(注意,br是少有的“单身狗”标签哦)。那既然是固定宽,就得有固定高咯,所以这样的换行文本,装它们的盒子是要有宽高的。

宽的话,就按照需要来设定咯,white-space:normal;这个属性是专用换行的,normal代表默认,其次还有nowarp(强制不换行)等其他属性值。

但是高可就要注意了?。?!好长一段时间,其实我不太清楚css中,行间距(line-height)和盒子高有什么关系,只是一个个试,合适了就算确定好行间距了。当然资料上也没怎么解释清楚,也不知道是不是没注意。直到有一天有位大神告诉我,盒子高除以行间距,等于显示文字的行数。当时的我,像捡了宝一样啊,哈哈~

也就是说,如果你的盒子高50px,line-height为25px的话,50/25=2.也就是说可显示两行。即,如果说除不尽或者为小数,那有可能就会被遮掉一些。

最后一点,记得加上overflow:hidden;溢出隐藏,以便把你多出来的文本截掉,具体的用法会在后面排版中用到。

3. 不换行长文本

不换行长文本,即指多余的不换行,用省略号代替。如图中黄色标示处。这样的文本应用也是非常多哒。

首先,要使用white-space 强制不换行,第二步:溢出隐藏,第三步:文本溢出省略,text-overflow:ellipsis; 是不是很简单?

4. 多彩文本

这种是图中没有的格式,突然想起来的。实际应用中总会遇到对一段文字中某个词或者某句话进行变色,加粗,加大等操作使得它比较突出。这个时候呢,就要选择一些轻量级的标签,一般我选择<a></a>标签,为什么捏,p标签自带行间距和换行属性,div这种块级元素显得有点大才小用了(好吧,有关块级和非块级元素下节拎出来讲讲,童鞋们自己可以先预习一下下),而a标签,在不添加 href 链接的时候,基本是个啥样式都木有的干净宝宝??梢员苊獠季执砺业纫恍┰?,所以啊,我们就它了,当然,有时难免会出现问题,这个,具体遇到的时候你再来问我吧。下面举个栗子,哦不,例子~

比如:今天我不嗨森。

首先,装好整句话:

<p>今天我不嗨森。</p>

然后用a装下要特殊处理的文字:

<p>今天我<a>不嗨森</a>。</p>

最后,对你那“nohappy”的样式撒欢的放样式吧,不过不要去作死的放入有关位置的样式哈~(ps:如果只是想加粗,也可以使用<b></b>标签哟~)

三、排版

又到了激动人心的时刻啦。不过既然前面都讲了要各司其职,所以我们今天排版之前得把样式挪到它该去的地方啦。

在DW中ctrl+N ,新建一个css文件:

qd201606146

则会得到这么一个文件:

qd201606147

UTF-8呢,是一种国际编码。文件保存为非utf-8编码时,可能就会出现乱码?;褂衅渌钊鏕B-2312的东西,自己去查查,总之你不要乱动dw自动生成的任何语句就是了。

这里说个题外话,其实中文对于这种外来进入的技术,一直以来都是比较麻烦的一个东西吧,对于非英文的国家来说大概都是。所以,世界上总存在那么一堆人,为了某个东西全世界的都能使用,他们就制定了很多规范,撇开这种计算机规范不说,就拿最简单的公斤、厘米、24小时计时等……我们平时常见的一些国际规范来说吧。你觉得除了中国人,有几个知道一尺是几厘米,一个时辰是几个小时?

好了,不多说了,接着。

把原来写在头部的样式文件剪切到css里来,<style></style>盒子可以删掉啦。like this:

qd201606148

注意保存的时候按照本文第一节中介绍的那样,把样式文件放进专属文件夹。

顿时我们的html文件里就干净了许多有木有?

qd201606149

但是别慌,干净是干净了,样式赶走了,却连个联系方式都没有,要用的时候怎么办呢?

所以要在文件中引用样式:

<link href="css/index.css" type="text/css" ?rel="stylesheet">

还有,别忘了图片的路径。相信如果你上面的听懂了,完全手敲路径棒棒哒~

之前我们已经介绍了排版的几个基本步骤,从外到里一层层处理。但是今天排版之前先解释一下童鞋们私下问我的问题,估计其他人也遇到过,如下图:

qd2016061410

好像和我们想象的不太一样,虽然把浏览器的窗口缩窄是可以看到正常布局,但是问题不是这么解决哒!

1. 外包

此处的外包,可不是指一个团队的外包。,而是从里到外包盒子。前面我们有讲到浮动这个东西,之所以出现上面这中情况呢,原因肯定是导航栏排完之后,右侧还有足够距离,所以图片那一块窜到上面去了。

我们从外到里已经做好了,现在得在它们的外包盒子了。外包的盒子的宽若刚刚好只放得下导航的内容,图片那一块不就下来了吗?

步骤还是那样啦,只不过从里往外包缺少了填内容那一步。定大?。憾ǜ己嚼敢谎硌?,多的留来也没用。定位置,当然是整个浏览器中间啦??墒悄阋晕一嵊胢argin-left来做吗?当然不,如果有个属性可以自动水平居中该多好。当然有:

margin: 0 auto;

遇到margin后面跟两个值各代表什么?不记得?往前翻……auto这个值,就是居中的意思,有了它,你会发现,浏览器窗口怎么放缩,都处在中间,是不是很嗨森?\(^o^)/~

?2. 实战

好了,看看俺写好的:

qd2016061411

是不是很像了?

以下是html及样式文件的编码,

qd2016061412

qd2016061413

看没看到新的东西,不仅外包了content,上面讲换行文本我们使用到了的哟。新添img标签和span标签,span这个标签,用在这种小型的,特殊的短文本是很好用的,详询:http://www.w3school.com.cn/tags/tag_span.asp ?。

其次,有些属性也是新介绍的,比如:border(描边使用),值什么意思看下图,是不是很亲切?除开solid这个值,当然还有其他值,乃们慢慢去试试。

qd2016061414

再看看图中:

qd2016061415

红色标示的部分,其实是可以复用黑色??榈亩鞯?,只要稍作标题的颜色和大小调整即可?;褂邢旅嫖那按愕奈谋?,这样类似列表形式的文本,ul li标签是可以直接做到的,可以自己当做作业来做,下期就把上图中的东西全部排完了。

TIPS:排版中,我们多次为了让内容对齐,使用了margin-left:24px;即文本与黑框左边的距离。实际使用中,文本通常与装它的有色框是有一定距离的,为了美观,绝不会贴边出现:

qd2016061416

但是每一句都加左边距,倒不如直接在black加内边距,单独每一句捏,就不需要加了:

.black{ width:356px; height:160px; background-color:#000000; opacity:0.6; margin-top:408px;padding-left:24px;}

注意了,这里有很重要的一点是:padding所加的左内边距是算在整个盒子宽内的,所以,width由原来的380px变为了356px。同样要是顶部加了padding-top,高也是相应要减掉一些的。

下图是随便网络一搜就能搜到的,但其实在实际使用中,width不仅仅是content里面的宽度,应该是要加上黄色的部分,曾经我有web工程师面试的时候就有这么一道题?;蛘咚蛋炎仙谋咭布由?,因为这些区域,除了空出来,服务于content,也放不了其他的了。且在没有margin的情况下,别的div要排也是贴着border,so……你懂的……-_-|||

qd2016061417

好了,今天到这里,有疑问欢迎留言…

「设计师自学指南系列教程」

  1. 平面设计:《超赞!设计师完全自学指南》
  2. 交互设计《交互设计师修炼指南!教你从零开始成为优秀交互设计师》
  3. UI设计:《超实用新手指南!零基础如何自学UI设计?》
  4. 前端开发《天猫高手来教你!零基础如何系统地学习前端开发?》
  5. 抠图技巧:《从菜鸟到高手!PHOTOSHOP抠图全方位攻略》
  6. 配色方案:《色彩搭配速成!3个实用方法帮你全面搞定配色》
  7. DPI指南:《基础知识学起来!为设计师量身打造的DPI指南》

作者:Sunny萧萧

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网ag亚游集团“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/。
设计微博:拥有粉丝量130万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.www.offshoring-digest.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.offshoring-digest.com/front-end-basic-task-allocation

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

转场动效 优设专访 设计师 扁平化设计 交互设计师 优设大课堂 界面设计 排版布局 职场 配色 视觉设计 素材下载 web前端开发 设计流程 设计师专访 AI教程 设计理论 平面设计 神器下载 字体下载 设计趋势 用户体验设计 psd下载 海报设计 设计规范 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里