Sunny蕭蕭：本文作為小白入門級，相對基礎，是寫給現(xiàn)在想了解一點前端知識的設計師同行們，今天這章用設計師熟悉的PS來解釋前端相關的術語，通俗易懂幽默風趣，絕對是小白入門的好教程！

往期回顧：

1. 《零基礎也能看懂！寫給設計師的前端小知識之小白入門篇（一）》
2. 《零基礎也能看懂！寫給設計師的前端小知識之征服霸道DIV篇（二）》
3. 《零基礎也能看懂！寫給設計師的前端小知識之網(wǎng)頁排版（附實戰(zhàn)）》
4. 《零基礎也能看懂！寫給設計師的前端小知識之排版三步走起來》

今天要講三個東西：

1. 文件路徑關系
2. 各式文本
3. 繼續(xù)排版

看不懂的童鞋，不要偷懶，去把前面的補一下。

一、路徑關系——各司其職

上一節(jié)中，要調(diào)用圖片的時候用了這么一句：

background:url(imges/01.jpg);

圖片、鏈接地址、樣式文件、js文件……等都是經(jīng)常需要外界支持的東西，瀏覽器通過html標簽內(nèi)的各式url地址去一一找到然后呈現(xiàn)出來，一旦地址錯誤，比如找不到樣式文件或者圖片，那網(wǎng)頁所呈現(xiàn)出來的就不知道神馬鬼了。所以，雖然大多數(shù)文件都可以瀏覽選擇并不需要手動去敲，但是了解個中關系，對處理問題也是有一定好處的。

如下圖，一個相對較完整的文件夾是醬紫的，包含主頁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下的文件，首先得經(jīng)過images的同意，所以路徑還要帶上它的“簽名”，最后得來路徑則是：url（images/01.jpg）；

3）上級

以index.css 為參考點,想引用02.jpg ,首先還是得往上看，參考點屬于css文件夾，而02.jpg跟他爹“同輩”，但是不能直呼其名啊，所以用兩點“..”來代替，其實這兩點也可以是總文件夾的代替名，因為對index.css來說并無多大意義。

好了，找到規(guī)律了沒？如果index.css要找index.js文件該怎么找捏？這個，留給大家思考一下，嘿嘿……（提示一下，先往上找，再往下找）

二、各式文本

html中，除了展示圖，就是文了，現(xiàn)在來介紹一下幾種文本形式：

1. 短文本

如上圖藍色標示的幾處，這些文本一般一行足以，無換行，常用標題，名字等。它們的寬高可設可不設，但是保險起見是要用盒子裝著的，常用<p></p> 、<span></span>……等，裝入文本即可，然后對字體大?。╢ont-size）、顏色(color)、粗細（font-weight）等進行樣式設置。

2. 換行長文本

如上圖紫色標示的地方，這種文本一般用在正文。排文字版的時候我們當然不愿意多余的文字就那么直愣愣的跑出去了，希望在固定的寬內(nèi)自動換行，而不是在結尾處加<br/>這個標簽來手動換行。（注意，br是少有的“單身狗”標簽哦）。那既然是固定寬，就得有固定高咯，所以這樣的換行文本，裝它們的盒子是要有寬高的。

寬的話，就按照需要來設定咯，white-space:normal;這個屬性是專用換行的，normal代表默認，其次還有nowarp（強制不換行）等其他屬性值。

但是高可就要注意了?。。『瞄L一段時間，其實我不太清楚css中，行間距（line-height）和盒子高有什么關系，只是一個個試，合適了就算確定好行間距了。當然資料上也沒怎么解釋清楚，也不知道是不是沒注意。直到有一天有位大神告訴我，盒子高除以行間距，等于顯示文字的行數(shù)。當時的我，像撿了寶一樣啊，哈哈~

也就是說，如果你的盒子高50px,line-height為25px的話，50/25=2.也就是說可顯示兩行。即，如果說除不盡或者為小數(shù)，那有可能就會被遮掉一些。

最后一點，記得加上overflow:hidden;溢出隱藏，以便把你多出來的文本截掉，具體的用法會在后面排版中用到。

3. 不換行長文本

不換行長文本，即指多余的不換行，用省略號代替。如圖中黃色標示處。這樣的文本應用也是非常多噠。

首先，要使用white-space 強制不換行，第二步：溢出隱藏，第三步：文本溢出省略，text-overflow:ellipsis; 是不是很簡單？

4. 多彩文本

這種是圖中沒有的格式，突然想起來的。實際應用中總會遇到對一段文字中某個詞或者某句話進行變色，加粗，加大等操作使得它比較突出。這個時候呢，就要選擇一些輕量級的標簽，一般我選擇<a></a>標簽，為什么捏，p標簽自帶行間距和換行屬性，div這種塊級元素顯得有點大才小用了（好吧，有關塊級和非塊級元素下節(jié)拎出來講講，童鞋們自己可以先預習一下下），而a標簽，在不添加 href 鏈接的時候，基本是個啥樣式都木有的干凈寶寶?？梢员苊獠季皱e亂等一些原因，所以啊，我們就它了，當然，有時難免會出現(xiàn)問題，這個，具體遇到的時候你再來問我吧。下面舉個栗子，哦不，例子~

比如：今天我不嗨森。

首先，裝好整句話：

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

然后用a裝下要特殊處理的文字：

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

最后，對你那“nohappy”的樣式撒歡的放樣式吧，不過不要去作死的放入有關位置的樣式哈~（ps：如果只是想加粗，也可以使用<b></b>標簽喲~）

三、排版

又到了激動人心的時刻啦。不過既然前面都講了要各司其職，所以我們今天排版之前得把樣式挪到它該去的地方啦。

在DW中ctrl+N ,新建一個css文件：

則會得到這么一個文件：

UTF-8呢，是一種國際編碼。文件保存為非utf-8編碼時，可能就會出現(xiàn)亂碼。還有其它諸如GB-2312的東西，自己去查查，總之你不要亂動dw自動生成的任何語句就是了。

這里說個題外話，其實中文對于這種外來進入的技術，一直以來都是比較麻煩的一個東西吧，對于非英文的國家來說大概都是。所以，世界上總存在那么一堆人，為了某個東西全世界的都能使用，他們就制定了很多規(guī)范，撇開這種計算機規(guī)范不說，就拿最簡單的公斤、厘米、24小時計時等……我們平時常見的一些國際規(guī)范來說吧。你覺得除了中國人，有幾個知道一尺是幾厘米，一個時辰是幾個小時？

好了，不多說了，接著。

把原來寫在頭部的樣式文件剪切到css里來，<style></style>盒子可以刪掉啦。like this：

注意保存的時候按照本文第一節(jié)中介紹的那樣，把樣式文件放進專屬文件夾。

頓時我們的html文件里就干凈了許多有木有？

但是別慌，干凈是干凈了，樣式趕走了，卻連個聯(lián)系方式都沒有，要用的時候怎么辦呢？

所以要在文件中引用樣式：

<link target="_blank"  type="text/css" ?rel="stylesheet">

還有，別忘了圖片的路徑。相信如果你上面的聽懂了，完全手敲路徑棒棒噠~

之前我們已經(jīng)介紹了排版的幾個基本步驟，從外到里一層層處理。但是今天排版之前先解釋一下童鞋們私下問我的問題，估計其他人也遇到過，如下圖：

好像和我們想象的不太一樣，雖然把瀏覽器的窗口縮窄是可以看到正常布局，但是問題不是這么解決噠！

1. 外包

此處的外包，可不是指一個團隊的外包。，而是從里到外包盒子。前面我們有講到浮動這個東西，之所以出現(xiàn)上面這中情況呢，原因肯定是導航欄排完之后，右側還有足夠距離，所以圖片那一塊竄到上面去了。

我們從外到里已經(jīng)做好了，現(xiàn)在得在它們的外包盒子了。外包的盒子的寬若剛剛好只放得下導航的內(nèi)容，圖片那一塊不就下來了嗎？

步驟還是那樣啦，只不過從里往外包缺少了填內(nèi)容那一步。定大?。憾ǜ鷮Ш綑谝粯訉捬?，多的留來也沒用。定位置，當然是整個瀏覽器中間啦?？墒悄阋詾槲視胢argin-left來做嗎？當然不，如果有個屬性可以自動水平居中該多好。當然有：

margin: 0 auto;

遇到margin后面跟兩個值各代表什么？不記得？往前翻……auto這個值，就是居中的意思，有了它，你會發(fā)現(xiàn)，瀏覽器窗口怎么放縮，都處在中間，是不是很嗨森？\(^o^)/~

?2. 實戰(zhàn)

好了，看看俺寫好的：

是不是很像了？

以下是html及樣式文件的編碼，

看沒看到新的東西，不僅外包了content，上面講換行文本我們使用到了的喲。新添img標簽和span標簽，span這個標簽，用在這種小型的，特殊的短文本是很好用的，詳詢：http://www.w3school.com.cn/tags/tag_span.asp ?。

其次，有些屬性也是新介紹的，比如：border（描邊使用）,值什么意思看下圖，是不是很親切？除開solid這個值，當然還有其他值，乃們慢慢去試試。

再看看圖中：

紅色標示的部分，其實是可以復用黑色模塊的東西的，只要稍作標題的顏色和大小調(diào)整即可。還有下面文前帶點的文本，這樣類似列表形式的文本，ul li標簽是可以直接做到的，可以自己當做作業(yè)來做，下期就把上圖中的東西全部排完了。

TIPS：排版中，我們多次為了讓內(nèi)容對齊，使用了margin-left：24px;即文本與黑框左邊的距離。實際使用中，文本通常與裝它的有色框是有一定距離的，為了美觀，絕不會貼邊出現(xiàn)：

但是每一句都加左邊距，倒不如直接在black加內(nèi)邊距，單獨每一句捏，就不需要加了:

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

注意了，這里有很重要的一點是：padding所加的左內(nèi)邊距是算在整個盒子寬內(nèi)的，所以，width由原來的380px變?yōu)榱?56px。同樣要是頂部加了padding-top，高也是相應要減掉一些的。

下圖是隨便網(wǎng)絡一搜就能搜到的，但其實在實際使用中，width不僅僅是content里面的寬度，應該是要加上黃色的部分，曾經(jīng)我有web工程師面試的時候就有這么一道題。或者說把紫色的邊也加上，因為這些區(qū)域，除了空出來，服務于content，也放不了其他的了。且在沒有margin的情況下，別的div要排也是貼著border，so……你懂的……-_-|||

好了，今天到這里，有疑問歡迎留言…

「設計師自學指南系列教程」

1. 平面設計：《超贊！設計師完全自學指南》
2. 交互設計：《交互設計師修煉指南！教你從零開始成為優(yōu)秀交互設計師》
3. UI設計：《超實用新手指南！零基礎如何自學UI設計？》
4. 前端開發(fā)：《天貓高手來教你！零基礎如何系統(tǒng)地學習前端開發(fā)？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎知識學起來！為設計師量身打造的DPI指南》

作者：Sunny蕭蕭

【優(yōu)設網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設計師學習平臺，專注分享網(wǎng)頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量130萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ，歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網(wǎng)站推薦，設計師必備導航：http://hao.uisdc.com