<A...Allen 你在做什麼?>

(做網站......)

<真的嗎? 你又在偷做了，我要看我要看...這啥? 這也是網站? 怎麼沒什麼內容?>

(有啊，內容很多了。業主還嬚多...已經少到不能在少了，這只是網站內的一個區塊啦!)

<哦，我問你，我現在會寫簡單的網頁出來，也知道CSS怎麼套用了，再來呢?>

(再來啊! 再來就...有點不好說了耶...)

<哦? 再不好說，你也得說，說吧!>

(那妳看一下這張圖吧。可能畫的有些簡單，不過大致上就是這些內容。)

<這張圖指的是?>

(這張圖指的是...像我這樣獨自開發一個網站或網頁的人，我必需要去做的事情，這張圖只是一個簡單的示意圖，裡面有很多細節和項目，是我沒有標示出來的。像妳這樣剛接觸網頁設計或開發的人，通常都會遇到一個問題或瓶頸，俗稱「撞牆期」。)

<是哦! 什麼樣的瓶頸?>

(網頁的內容，妳現在自己會上傳圖檔，自己會用文字型的網頁編輯軟體，也知道怎麼套用CSS，但會不知道，要寫什麼內容為主的網站，對吧!)

<對耶! 我不知道，要.......等等，我差一點就往你挖的洞裡跳了。>

(沒關係，妳已經跳下來了，我們這IT民宿的網站，就交給妳吧! 這個是目標，但我想跟妳說的是過程。在剛才的那張圖裡面，有提到HTML跟CSS，如果只是「會」這個標準，那妳已經「會」了，同意嗎?)

<嗯...同意。>

(可是現在的妳，如果去應徵網頁設計師或網頁前端工程師，那妳大概第一天就被請回家了。原因是在於...要寫一個網站或開發一個網頁，就像妳之前在畫彩繪一樣，HTML是妳手上筆，妳用各種顏料是CSS, 問題不是在會不會拿筆，也不是會不會用筆去沾顏料。)

Maggie回過頭，看了一下上個月，她在牆上畫的畫...

<我在畫畫的時候，有跟你溝通我應該要畫什麼上去，然後要多寬多高，你的意思是，我如果要寫一個網站或網頁，在沒有人告訴我，要做什麼的情況下，我要自己去思考...>

(對! 可是關於彩繪這件事情，在妳過去的經驗中，是空白的...我們在討論的時候，我們要討論什麼? 沒有東西可以討論，因為過去沒有接觸過，所以那個經驗值是零。)

<是啊...所以你逼我去Google圖片搜尋 paint wall...原來是叫我多看的意思。>

(娘娘真了解我，因為從來都沒有經驗，所以先看別人怎麼做，然後再思考，如果是自己，該怎麼做。而不是複製後貼上，在電腦的世界，我們或許可以按個Ctrl A+Ctrl C+Ctrl V，但我們是在過真實的人生，沒有辦法看別人畫什麼，我們就跟著畫一樣的東西，而是應該要依據自己所在的環境，畫出我們認為適合的，這個是創造屬於自己的東西。)

<像我這樣的網頁設計初學者...接下來，我又該如何?>

(我現在在做的這間餐廳網站，老闆妳也認識，對方是個非常低調的人...店內空間很大，裝潢擺設簡單、樸實但卻很有質感，我要做他們的網站，那個網站就不能讓人感覺太擁擠，老闆喜歡有意境和意象的東西，所以他們選用的餐具，也都很有味道...這是我跟妳去跟對方「溝通」時，所發現的。)

<沒錯! 這個部份是「溝通」。>

(不是每位業主都懂網頁，也不是每位業主，在還沒有自己官網的時候，就知道或想好，他們的網站要長什麼樣子。所以我們必需從旁協助業主，將網頁的Layout 講出來或推敲出來。)

<這只是你認為應該這樣做吧? 如果是我去談，我不一定要照你的想法，對不對?>

(是的! 重點是，網站要寫出來，至於過程的建構，則因人而異。)

<那我現在應該要......多看別人設計出來的網頁，然後我要自己去思考，如果是我做的話，我要怎麼呈現這些內容。>

(是的! 因為大家用的東西都叫做HTML， 所以...請拼命看別人設計的網頁...然後去想這個DIV是怎麼切出來的，為什麼要用六個DIV，而不是十五個。)

<Allen 我想好之後，我要從頭寫到尾嗎?>

(問到重點了，不用，網路上建置網頁的工具很多...特別是Layout這方面...不用重頭寫到尾，但一定要知道HTML和CSS的基本觀念，然後再去使用這些建置網頁的工具，將自己想要Layout設計出來，設計出來之後，再加上其它的工具，像是前端的網頁程式......)

<從那開始?>

(從這裡開始! 恭喜娘娘、賀喜娘娘...)

<幹嘛這麼三八啊!? 有什麼好喜的?>

(因為娘娘快要半夜三點，還坐在電腦前...寫網頁了!)

(待)

2014/10/16 SunAllen

現任：太陽數位文創(技術總監)_彩虹53_小鐵道民宿(管家)