(技)超快速網頁製作法~part2 (如何做好檔名編碼?)

上一篇講到了Dreamweaver的片段製作方式之後
接著我們來看看如何利用這個超方便的功能
基本上由於我已經拋棄了表格排版定位的設計方式
所以我現在會採用CSS來做排版設計
而CSS要發揮效用必須要與結構良好的HTML or XHML來做配合
才能有漂亮的畫面出現
但是網頁設計基本上現在也都走XHTML而非HTML了
所以我會將我的片段做好分組並做好檔名的編碼
例如我今天光是一個選單
我就可以預先搞好幾種常見的長相與結構
未來需要使用到時
直接就可以在片段上點兩下直接把Code插入到我的網頁中~
完全不用再花時間撰寫那寫過不知道幾次的一模一樣的Code
不但省時省力
更省時間可以多喝幾杯咖啡阿~
(但是我看有多餘的時間~大概會變成被老闆抓去做更多專案吧=_=)

下面寫一個很簡單的片段名稱編制方式
menu(資料夾)
A-html (片段)
A-CSS (片段)
B-html (片段)
B-CSS (片段)
.......依此類推

如上所示
我所做好的片段會有一組HTML搭配一組CSS
未來使用時就直接把HTML插入到網頁中
CSS則插入到CSS檔案中
而CSS檔則是以連結的方式連到HTML網頁裡
這樣畫面就可以呈現得出來了
看~就是那麼簡單
多麼的方便阿~
.....甚麼?
你完全感受不到它有多方便?
也感受不到有多快?
那~~就看看我的示範影片吧~

實際操作影片

 (影片約4MB~沒有下載畫面，所以播放按鈕沒作用時請各位在等他下載完再按播放即可)


看到沒~轉眼間一個畫面就搞定了

有沒有嚇好大一跳阿~~(對啦~最好是沒有啦=3=)
當然上面只是示範
所以有些片段的設定都還不是很完善
所以可以看到畫面的完成度並不是非常的美麗啦
(哀~不要怪我~這可是要花很多時間的阿~~)

實際測試的結果來說，要搞定一個站只花半小時是可能的(但是要看你的片段寫得好不好啦~)

那麼這個時候又有個疑問了~
片段存在Dreamweaver中
如果電腦重灌或是想把片段拿到其他電腦用的時候該怎麼辦?
這個問題呢
就請再接著看超快速網頁製作法~part3 片段備份法吧
(Sorry~一篇文章寫太長粉累人的....所以各位還是慢慢看續集吧)

相關文章

• 超快速網頁製作法~part1
• 超快速網頁製作法~part3

(技)超快速網頁製作法~part1 (超好用的"片段")

"每每在製作網頁時
不知道大家時間都耗費在哪裡?

不過
以目前的趨勢來說
現今的網頁設計方式已從以往的"表格定位設計法"
轉變成"CSS定位設計法"
或許還有許多人對於利用CSS來設計網頁還是一頭霧水
但坊間的CSS教學書籍已越來越多(當然~有一大堆都是很普通的書籍 )
自己玩CSS說實在只有大概一年的時間
但是它的方便可真是無法與表格一同比較阿
不過
這一篇不是要跟大家說CSS的
而是要跟大家說說關於Dreamweaver裡面的Snippet面板的功能

甚麼是片段?

Snippet翻譯成中文就是"片段"
而它在Dreamweaver中的面板名稱也真的就直接叫作"片段"
說實在的
這麼好用的東西
問過十個人有九個會說不知道、沒用過(誰叫你都問不懂Dreamweaver的人=_=)
這可真是暴譴天物ㄚ(有那麼嚴重嗎?)~
片段面板的功能呢
就是它可以把你經常性使用到的Code存起來
存起來做甚麼用呢
當然是以後有需要用到這段Code的時候把它拿出來用囉
這樣說起來
不是跟大家蒐集一些原始碼的意思一樣嗎?
事實也是如此~就是在蒐集原始碼
但是不同的是
以往我們要把需要的原始碼放到我的網頁上面的時候
都必須要把該原始碼檔案打開
然後複製
最後到Dreamweaver的網頁中
再做貼上
這一來一往的
感覺是夠快的
但是如果你有好幾段要這樣做的話
那不是累死了?
OK
片段面板就是可以讓你把這些Code都集中存放在Dreamweaver中
要用的時候不用再去辛苦的找檔案總管或是我的電腦
直接在Dreamweaver就可以找到並插入到我的網頁中
阿~廢話說了那麼久~
都還沒說到怎麼把Code存到Dreamweaver中

片段怎麼做?

以下就來說明一下操作的方式
首先到Dreamweaver功能表中的"視窗(window)"找到"片段(snippet)"並把它打開
接著就可以在片段面板理的空白區域按一下滑鼠右鍵並選擇新增資料夾(new folder)
請把此資料夾做個容易識別的命名吧
例如像是：壞掉的印表機專用(這會不會又臭又長阿>"<)
新增了之後在從剛剛新增的資料夾上面按滑鼠右鍵選擇"新增片段(new snippet)"
接著會跳出片段設定視窗(圖片後補)
設定完之後按下確定 你的第一個片段就搞定了
夠簡單吧^^
阿勒~講了那麼久~跟一開始講的CSS有甚麼關係?
想知道?

我們繼續看下去吧~

相關文章

• 超快速網頁製作法~part2
• 超快速網頁製作法~part3
• 超快速網頁製作法~part4
• 超快速網頁製作法~part5

(動畫)2005年的動畫作品~

等待了好久
之前要上傳以前的影片作品到youtube上面
老是會出現掛點的情況
今天給他不小心上傳成功了~哈


這是我在前前公司做的影片
用途則是在全球最大消費性電子產品展場上
做自家產品的產品影片介紹
這也是我第一次搞這樣子類型的一個動畫
使用的軟體卻是Flash
哈哈~~誰叫我不會影片剪輯軟體呢~
所以只好克難的用Flash來充當After effect來使用了

當時的製作情形其實都還好
除了在Timin上面控制的不好之外(喂!!喂!!~是很不好吧=3=)
不過當時對於動畫的Timin控制還不是那麼熟悉~(還用你說~大家都看得出來吧!)
當時問題最大也最麻煩的則是要轉成DVD影片
因為要在自家的產品--DVD player上面做展示
還記得那時為了這個問題真是快被搞死了~
幸好後面有找到解決方案
有時間的再寫篇教學吧~
不過目前...再說吧...(大概又是一篇無尾文了......=_=)

[資源]上萬icon隨手來

隨著電腦系統的出陳更新
icon也有越來越大的趨勢
而許多的icon也是越做越漂亮
色彩也從以往的色塊表現轉變成現在的漸層
或是仿真的效果
這裡就來介紹幾個不錯的icon搜尋引擎
讓你輕輕鬆鬆就找到一堆美麗的icon
不但可以把你電腦裡一成不變的icon換成跟別人不一樣之外
在網頁設計時也是一個非常棒的參考資源喔~
首先第一個是
iconFinder
雖然目前尚在bata階段
但其搜尋到的icon
不管是大小~
還是品質~
都可以說是上上之選阿

第二個則是
iconlet
這個站裡面的icon也是一堆
不過就個人使用的情形來說
在icon的品質上沒有iconFinder來的好
但是在搜尋上面有進階的搜尋功能
可以自訂要搜尋的icon尺寸、檔案格式、授權...等
算是很貼心的一項功能
話不多說
快去看看吧

如何有效率的管理你的網頁畫面資源?

最近由於專案的關係
想到了一些管理資源上面的問題
其實一直都覺得管理資源不是一件簡單的事情
我也一直都管得很糟~
除了因為東西太多之外
沒有好用的工具之外
怠惰的沒有認真去思考跟構思也是一個很大的問題
剛好~昨晚懶懶的不想做稿子
忽然想到了一個方式來做個管理的工作
以網頁設計來說
很多人ㄉ會去買一本又一本的web design index、web design Index by content又或者是買Annual of web productions '07這一類的網頁設計參考書
其實這些書的優點不少
除了可以躺著看、趴著看、倒立著看(這不是一般人會的)、邊拉屎邊看(這個我常做)、邊走路邊看(如果你能力夠強的話)、坐車看、坐飛機看、睡覺時夢遊爬起來看(誰會這麼做阿-_-)之外~還可以免吃電~免辛苦的上網去蒐集就能得到....
有了這麼多的優點之後

當然他的缺點也不少~
顏色失真(RGB跟CMYK的差異)、分類粗糙(甚麼!只有依照色彩分類~囧rz)、搜尋不易(憑印象跟書籤吧...囧)、要花很多錢(一本至少千元起跳~夠你付一個月的電費了)、攜帶不便(一本書不輕阿!!)
OK~看了以上的優缺點
你還會想買嗎?

網路無國界~
隨便都可以在網路上看到一堆專門蒐集網頁的超優網站
像是pages.think裡面就不少依照色彩分類的優質網站
又像是coolhomepages裡的樣版或是網頁就一貨櫃車了~而且分類還是多層的分類
不過這些網站都有個缺點..........都是英文(囧rz)
說實在的~因為我太愛台灣了~所以總對外語不是那麼的擅長(這也可以扯到愛台灣-_-)
翻譯軟體也總是翻出牛頭不對馬嘴的字句...囧
此外~每次要上網去看~對於大多數公司那總是慢了很多點的頻寬來說~總覺得不是那麼方便
再來就是覺得那些網站的分類跟我之間的親近性總感覺不是那麼的親
而且每次都要去逛那些網站
真的是很沒有效率阿~
加上稍微摸了一下最近上市的Adobe CS3
所以呢~
才產生了這個做法
以下就是這個有效管理網頁畫面的想法
一般我在逛網的時候~看到很正點的網站(ㄟ~不是那種的正點啦...你知道我說的)都會把他的畫面存起來
以供未來做設計的時候做一個設計上面的設計參考，通常我會用HyperSnap這一套軟體來把畫面抓下來存成一張JPG的點陣圖，這一套軟體的好處就在於他可以自動的去拖拉你瀏覽器的滑桿以抓取完整的網頁畫面，光這一點就夠迷人的了~
那它多到爆的下載點就不用說了~
(我是支持正版軟體的喔...<--ˋˊ凸誰會相信阿?)
OK~當畫面被抓下來後 不管他是甚麼類型的網站，通通放在同一個資料夾中
接著就可以打開Adobe Bridge這個軟體啦
在Bridge裡面選取到這個圖片之後，將與這個圖片有關的關鍵字通通勾選起來
舉例來說，假設這是一個兒童版的政府機關入口網站
那我設定的關鍵字就是：入口網、兒童網站、政府網站
又如果，今天存下來的是一個灰階的設計師個人網站
那我就設定關鍵字為：設計、灰階、黑白
Bridge的一個好處就在於它可以使用勾選關鍵字的方式篩選顯示圖片(有勾選的才會顯示)
也就是說~ 它可以使用多關鍵字的顯示方式
這可是我在其他軟體上面所沒有看到的(也或許是我對其他軟體沒有玩得太熟)
光這一點~又是一個受不了的迷人啦~
未來我要設計網頁的時候，只需要依照我這次設計網站的初步構想
再去Bridge裡面勾選相關的關鍵字
就可以找到我想要看的網站類型了
這是多麼方便的一種做法阿阿阿阿阿阿^^
有了以上的做法之後
又有一個問題了
那我這樣設定關鍵字，若是沒有一個標準的話，當你網頁收集越多的時候~
關鍵字就有可能亂七八糟(這就又成為一個災難了)
所以這時關鍵字的製定就顯的非常重要了
以下是目前所想到的關鍵字製定方式，如果有人覺得有更好的分類，非常歡迎提出喔~
目前共以版型、風格、行業、色系、國家五種分類來做大項分類
詳細的分類項目則如下所示：

1. 版型(尋找特定版型時較方便)
• 三欄
• 兩欄
• 單欄
2. 風格(依據客戶希望的風格找參考資料)
• 時尚
• 卡通
• 手繪
• 電玩
3. 行業(對於設計特定行業時非常方便，此分類會較多，正思考如何避免關鍵字的災難中)
• 科技
• 醫護
• 政府
• 軟體
• 設計(含廣告業)
• 金融
• 汽車
4. 色系(只是單純想設計特定的色彩)
• 單色
• 雙色
• 灰色系
• 紅色系
• 黃色系
• 藍色系
• 綠色系
5. 國家(取周圍國家與歐美做分類，目的在於方便分析與比較各國風格)
• 台灣
• 中國
• 韓國
• 日本
• 歐美

以上分類只是昨晚的初步構想，詳細的分類應該要再做較完善的思考
以避免遇到關鍵字的災難阿~

此篇文章非常希望能激盪出更多的想法
或者是有更好的方式
也歡迎觀看此篇文章的網友們多多回應您的想法~

此篇文章內提到使用的軟體為：Adobe Bridge(Adobe CS3)，Hypersnap 6.0