網(wǎng)頁模版，個(gè)人網(wǎng)站建設(shè)入門知識(shí)(4)

本文講述了一個(gè)靜態(tài)網(wǎng)站的設(shè)計(jì)到重構(gòu)到架設(shè)全部流程，教程需要懂一點(diǎn)HTML代碼，沒有這個(gè)基礎(chǔ)的可以簡單看一下，了解別人如何把你的圖片運(yùn)用到網(wǎng)站上。

我又粗現(xiàn)了，是不是被大大的驚喜了一個(gè)，哎喲我去那滿臉憤怒的表情是神馬情況，咳咳咳我知道我知道，太久沒有獻(xiàn)上我寶貴的節(jié)操了是不是。

啊，嗯，閑話少敘，各位五湖四海三山五岳的好漢和姑娘們，你們真的沒被我驚喜到嗎？啊哈啊哈啊哈哈哈哈~~~啊~~~別打臉~~~

好吧，吶，休息了這么一段時(shí)間，就讓本盟主帶大家繼續(xù)八卦一下東邪DIV和西毒CSS之間那些猥瑣的事吧。來來，關(guān)門，放狗哦不，放DW。。。

<點(diǎn)圖片看大圖>www.theoat.com.cn

嘛，上次咱們折騰出了這么一個(gè)奇葩的東西，是不是感覺很慘，嗯，感覺很正確。不過沒關(guān)系啦，咱們這次就讓她“豐滿”起來。下面的童鞋有木有跟我一起想歪的，有木有有木有。

上次咱們建立了。。。嘛。。。等我數(shù)一下。。。啊是9個(gè)區(qū)域，有可能童鞋們建了678個(gè)，不過不要在意這些細(xì)節(jié)，按照自己的設(shè)計(jì)來就是了。

下面按照之前說的區(qū)域，我們要把設(shè)計(jì)好的東西放進(jìn)這些DIV里，正所謂切圖是也，江湖人稱最高武功秘籍《葵花寶典》，切得越深入功夫越高潮，只是錯(cuò)別字而已表想多嘿嘿嘿。

在切圖前，首先得說一下其實(shí)這個(gè)功夫也有分級(jí)的，低級(jí)的部分叫做“神速一刀切”，高級(jí)的部分叫做“雕花神手”，其間難度不可同日而語，自然學(xué)成后功力也天差地別，望各位江湖好友慎重選擇。

是不是特有盟主風(fēng)范，呵呵呵，呵呵呵呵呵

OK，先從低級(jí)別的講起，這個(gè)簡單內(nèi)容少嘎嘣脆。

先貼個(gè)我的設(shè)計(jì)稿。

<點(diǎn)圖片看大圖>

我們可以看到，區(qū)域一一對應(yīng)，設(shè)計(jì)的時(shí)候我們應(yīng)該要想到，做成網(wǎng)頁的時(shí)候要怎么去分區(qū)域?qū)崿F(xiàn)，而且能夠保證設(shè)計(jì)質(zhì)量的情況下能夠盡量簡單的實(shí)現(xiàn)出來。嘛，當(dāng)然對于新手來說現(xiàn)在說這個(gè)貌似然并卵，不過這很重要，請牢記，這也是為神馬設(shè)計(jì)師要學(xué)習(xí)這些鬼代碼的原因。

好的，現(xiàn)在打開你的設(shè)計(jì)稿，我們來“神速一刀切”。

在PS中，選擇“切片工具”，和剪切圖標(biāo)在一個(gè)組里

用切片工具切出上面分出的那些區(qū)域，注意切片與切片之間不能相交，也不能有間隙，仔細(xì)點(diǎn)調(diào)整好。切片的時(shí)候大小不合適可以隨時(shí)調(diào)整大小，方法和使用變形工具類似。

<點(diǎn)圖片看大圖>

切片完成之后想調(diào)整還可以用切片選擇工具重新選擇任意切片然后調(diào)整，這句話像不像在念經(jīng)。。。

然后存儲(chǔ)為web所用格式，快捷鍵就不說了，你懂的。格式選擇JPG，尺寸不要?jiǎng)�，點(diǎn)存儲(chǔ)，文件名先隨便，格式選僅限圖像，默認(rèn)設(shè)置，所有切片。

<點(diǎn)圖片看大圖>

這里其實(shí)有個(gè)小支線任務(wù)，格式可以選擇HTML和圖像，PS會(huì)幫你生成一個(gè)網(wǎng)頁，不過那個(gè)太LOW了，咱大俠們不屑一顧，嗯，不管你們信不信反正我信了。

保存后打開你存的文件夾，PS有生成一個(gè)images文件夾，表改這位夾兄的名字喲，實(shí)際上網(wǎng)站保存圖片的文件夾都叫這個(gè)名字。打開images文件夾，我們可以看到切好的圖。

然后分別給它們命名，簡單點(diǎn)可以1234，復(fù)雜點(diǎn)就是為了SEO和可維護(hù)性考慮，命名得語義化，例如LOGO，就命名首頁-頭部-logo，home_top_logo。這樣的話在其他地方用的另外尺寸的logo就不會(huì)和這個(gè)logo搞混。

命名好后，把images文件夾整個(gè)復(fù)制到網(wǎng)頁文件所在位置，這點(diǎn)很重要?jiǎng)e忘記喲。

然后我們回到DW，在HTML中，有兩種方法插入圖片，先讓我們試試第一種，直接在頁面插入。

看到那個(gè)img標(biāo)簽了嗎，那就是直接插入一張圖片的意思，格式反正你記住就這么寫就行，src后面的引號(hào)里的是圖片文件的相對位置，這里的意思就是與網(wǎng)頁文件同級(jí)的文件夾images里的1.jpg。相對位置的理解得練習(xí)一段時(shí)間，不過不難放心。

除了相對位置，還有絕對位置，你百度一張圖片右鍵屬性可以看到地址那里有一長串的網(wǎng)址，把那個(gè)復(fù)制下來替換掉相對地址就行，不過網(wǎng)站一般沒有用到這個(gè)的時(shí)候，這個(gè)先不深究。

好了現(xiàn)在我們插入了第一張切圖，在DW里F12預(yù)覽看看。。。

臥槽，這什么鬼，為毛和其他的區(qū)域重疊了，為毛我縮小瀏覽器的時(shí)候出現(xiàn)了這么無節(jié)操的情況。

嘿嘿，原因我們先不深究，這里主要是想讓大家了解一下這樣是不行滴。

我們得用第二種插入圖片的方法-在CSS中作為背景插入�？偸遣迦氩迦胧裁吹奈叶加悬c(diǎn)臉紅了呢，哎臥槽，我為什么要臉紅？？？

額，說CSS，首先回顧下上次的代碼，額好吧上面回顧過了。

之前我們給每個(gè)DIV都加了同一個(gè)名字叫做box并且賦予了這個(gè)名字一些屬性，呵呵呵我咋想起游戲里的稱號(hào)了呢，帶屬性的名字，艾瑪這個(gè)解釋好。那接下來首先呢咱們得給box這個(gè)名字再加一個(gè)屬性，至于為神馬，嘿嘿，高級(jí)篇中自有妙用。

這個(gè)意思就是包住并且別蓋住，懂不懂不，包住，但是里面那事兒變大了你也得跟著變大，不能蓋住人家。

啊，不能亂想，繼續(xù)寫代碼。

好了，現(xiàn)在我們要給每一個(gè)DIV賦予它們自己獨(dú)特的名字了

按照DIV的名字或者按照序號(hào)什么的，寫出這幾個(gè)新的屬性，我的是9個(gè)分區(qū)，就寫了9個(gè)名字并給它們寫上屬性，這里為了簡單就用bg1這樣的形式寫了，如果是工作中的項(xiàng)目的話肯定不能這樣寫的，要代碼語義化，具體的知識(shí)等開支線劇情來講吧。

這里屬性的意思大家應(yīng)該大致明白，首先是背景：圖片地址 水平對齊 垂直對齊，然后是寬度百分百，高度要跟著當(dāng)前插入的圖片走，因?yàn)槭潜尘皥D片，DIV也就是容器本身是不會(huì)因?yàn)楸尘皥D片而自適應(yīng)的。

然后把這些榮耀的名字賜予每一個(gè)DIV吧

看到?jīng)]有看到?jīng)]有，比游戲還diao，每個(gè)角色可以佩戴多個(gè)稱號(hào)，只要中間用空格分開就行，太淫蕩了有木有，太不要臉了有木有。

好嘞，現(xiàn)在我們再來F12一下，當(dāng)然你在之前預(yù)覽的頁面刷新也行。

粗來了粗來了，網(wǎng)頁粗來了，噢也。

額，有些奇怪的東西在，哈哈，是我們上節(jié)課加的邊框，還有每個(gè)區(qū)域的名字。把這些東東刪掉再看，喔，醉了，這是我第一個(gè)網(wǎng)頁，就好比月球上那個(gè)小腳印一樣，意義非凡啊。

讓我們再看一下全部的代碼吧

是不是特有成就感，是不是感覺到了春天~~~

嘛，孩子，這只是低級(jí)功法而已，表太激動(dòng)，實(shí)際上真正的網(wǎng)頁要比這個(gè)復(fù)雜很多倍，哦呵呵呵呵，表怪我打擊你，太容易滿足容易被江湖淘汰喲~~~

好了，今天的篇幅到這里就先結(jié)束了，親們表太想我喲哦呵呵呵~~~哎哎別打~~~說正事說正事

下一篇該講高級(jí)功法篇了，糾結(jié)啊，內(nèi)容要比這個(gè)多的多的多，咋辦捏，是分為多篇來講還是直接整一個(gè)視頻教程捏，小伙伴們想看啥樣的，來發(fā)表下看法唄。

期待影迷們的回復(fù)喲~