最新的已是 2013....

沒想到目前已是 2018 年了！

而我已過 50 這個年紀。而且要跟各位承認一件事情，兩三年前個人中了一件平生沒想到的事，我竟然中風了！曾經想過死亡，沒想過就這樣意識不明地躺在醫院二個多月，妹妹曾經告訴我，這段時間開口都講英文，卻不喜用中文與人溝通。可是我的英文也講得不清不楚！

經過一陣子休養，到現在已經復原九成，告訴自己務必在此處站起來，因為是從此地倒下！

也告訴自己，這次開始就是要把自己所學到的所有，

不論是 Photoshop、Illustrator 繪圖，

不論是 InDesign 排版，

不論是 DreamWeaver、Bootstrap 網頁，

不論是 After Effects、Premiere 影像軟體，

或是 Word、Excel、Powerpoint... 辦公室軟體，

只要是自己聽過、學過的，要全部一五一十地清楚表白。因此就過年期間，積極準備！

不知是為何，總想作這件事情。總想再不做的話，這輩子就只剩白紙！

Part0 準備期：網站草圖

這幾天有空時都在構思網站的草圖及用色，
今天初步定案首頁草圖，內頁應該也是這樣，

因為將此網站定義為展示型網站，展示妹妹的作品，
作品很多很多，還要整理、分類，我這邊的步調會快一些。
圖中的左上方LOGO處，設計中...
上方大圖要找一張她最愛的作品，以柔焦處理，
下方 footer 處要好好思考放哪些連結。

也為了因應現今上網環境的變化，
很多人都用手機或平板上網，所以要考慮不同螢幕的大小，
這個頁面完成後會建立為範本，提供整個網站的頁面。
而建立過程中將使用到 Dreamweaver CS6 中的 "流變網格 ( Fluid Grid Layout )"，
以便網站輸出時，可以同時符合手機、平板及電腦螢幕的大小。

所以建立這個草圖時，就是以 Div + CSS 來思考，
可是，目前 DW CS6 中的流變網格 ( Fluid Grid ) 不接受巢狀 Div ，
也就是說最外圍的 "container" 會刪掉，純粹以上下多個 div 相疊的方式建立，
中間三個區塊用 "#content" 包覆，
再以個別的 CSS 規則設定裡面那三塊的位置與寬高，如下圖：

屆時，使用流變網格建立網頁的過程會以影片方式呈現，敬請期待。

一個網站的誕生

由於妹妹的職業是教授手工捏塑，看著她成天都在捏捏捏~~~，
倒是真的設計很多作品出來，就產生幫她架個網站，以便讓更多人知道她厲害之處的想法。

回頭想想自己，上課時一直苦口婆心鼓勵同學們要實作，
所以，決定將網站架設的整個流程記錄下來，
可以用影片呈現的就錄下來，
不然就用文字敘述做了哪些動作，目前考慮幾個步驟：

Part0 準備期：
蒐集文字與圖片，與妹妹討論要如何區分產品類別。
建立架構圖，訂好資料匣名稱、檔名與個網頁標題。
設計 Meta(檔頭資訊) 的關鍵字與網站敘述。

Part1：
Photoshop 設計版型

Part2：
Photoshop 切片

Part3：
DreamWeaver
設計範本
建立首頁
建立內頁

Part4：
建立測試伺服器

Part5：
申請網站空間與網址
上傳網站

以上就是至目前為止的構想，
過程中會多用一些輔助工具，
例如 960 Grid System，Easy CSS Menu，Light Box 2.....，
期盼可以讓各位
有心學習網站建置的人可以多一個參考的來源。