목차
一、路径关系——各司其职
1)同级
2)下级
3)上级
二、各式文本
1. 短文本
2. 换行长文本
3. 不换行长文本
4. 多彩文本
三、排版
1. 外包
2. 实战
「设计师自学指南系列教程」
웹 프론트엔드 HTML 튜토리얼 零基础也能看懂!写给设计师的前端小知识之各司其职_html/css_WEB-ITnose

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

Jun 24, 2016 am 11:15 AM

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

往期回顾:

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

今天要讲三个东西:

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

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

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

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

background:url(imges/01.jpg);

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

如下图,一个相对较完整的文件夹是酱紫的,包含主页index和所需的样式文件、images、js等,哪怕样式文件就一个都要单独建立一个文件夹,html文件一般放在其他文件的上层,但是html文件很多,或者分模块的情况下也是需要建文件夹哒。看个人喜好啦……

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

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

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

1)同级

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

2)下级

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

3)上级

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

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

二、各式文本

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

1. 短文本

如上图蓝色标示的几处,这些文本一般一行足以,无换行,常用标题,名字等。它们的宽高可设可不设,但是保险起见是要用盒子装着的,常用

……等,装入文本即可,然后对字体大小(font-size)、颜色(color)、粗细(font-weight)等进行样式设置。

2. 换行长文本

如上图紫色标示的地方,这种文本一般用在正文。排文字版的时候我们当然不愿意多余的文字就那么直愣愣的跑出去了,希望在固定的宽内自动换行,而不是在结尾处加
这个标签来手动换行。(注意,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. 多彩文本

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

比如:今天我不嗨森。

首先,装好整句话:

今天我不嗨森。

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

今天我不嗨森

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

三、排版

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

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

则会得到这么一个文件:

UTF-8呢,是一种国际编码。文件保存为非utf-8编码时,可能就会出现乱码。还有其它诸如GB-2312的东西,自己去查查,总之你不要乱动dw自动生成的任何语句就是了。

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

好了,不多说了,接着。

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

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

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

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

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

<strong><link href="css/index.css" type="text/css"  rel="stylesheet"></strong>
로그인 후 복사

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

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

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

1. 外包

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

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

步骤还是那样啦,只不过从里往外包缺少了填内容那一步。定大小:定跟导航栏一样宽呀,多的留来也没用。定位置,当然是整个浏览器中间啦。可是你以为我会用margin-left来做吗?当然不,如果有个属性可以自动水平居中该多好。当然有:

<strong>margin: 0 auto;</strong>
로그인 후 복사

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

2. 实战

好了,看看俺写好的:

是不是很像了?

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

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

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

再看看图中:

红色标示的部分,其实是可以复用黑色模块的东西的,只要稍作标题的颜色和大小调整即可。还有下面文前带点的文本,这样类似列表形式的文本,ul li标签是可以直接做到的,可以自己当做作业来做,下期就把上图中的东西全部排完了。

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

但是每一句都加左边距,倒不如直接在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……你懂的……-_-|||

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

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

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

作者:Sunny萧萧

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

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? 공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지 업데이트 캐시, 이것은 간단하고 간단하며 냄비를 마시기에 충분히 복잡합니다. 공식 계정 기사를 업데이트하기 위해 열심히 노력했지만 사용자는 여전히 기존 버전을 열었습니까? 이 기사에서는이 뒤에있는 비틀기와 회전을 살펴 보고이 문제를 우아하게 해결하는 방법을 살펴 보겠습니다. 읽은 후에는 다양한 캐싱 문제를 쉽게 처리 할 수있어 사용자가 항상 가장 신선한 콘텐츠를 경험할 수 있습니다. 기본 사항에 대해 먼저 이야기 해 봅시다. 액세스 속도를 향상시키기 위해 브라우저 또는 서버는 일부 정적 리소스 (예 : 그림, CSS, JS) 또는 페이지 컨텐츠를 저장합니다. 다음에 액세스 할 때 다시 다운로드하지 않고도 캐시에서 직접 검색 할 수 있으며 자연스럽게 빠릅니다. 그러나 이것은 또한 양날의 검입니다. 새 버전은 온라인입니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? 웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

이 기사는 CSS를 사용한 웹 페이지에 효율적인 PNG 테두리 추가를 보여줍니다. CSS는 JavaScript 또는 라이브러리에 비해 우수한 성능을 제공하며, 미묘하거나 눈에 띄는 효과를 위해 테두리 너비, 스타일 및 색상 조정 방법을 자세히 설명합니다.

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

See all articles