最新的已是 2013....

沒想到目前已是 2018 年了！

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

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

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

不論是 Photoshop、Illustrator 繪圖，

不論是 InDesign 排版，

不論是 DreamWeaver、Bootstrap 網頁，

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

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

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

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

推薦~~免費的 CSS網頁版型下載~~好樣的

現今的網頁設計主流該是HTML+CSS+JavaScript，
過去使用表格加上巢狀表格的呈現方式，會阻礙搜尋引擎到你的網站拜訪！
如果你的網站已稍具知名度，當然不用擔心。

但是，新建立的網站最迫切希望的就是被網友是用關鍵字找到，
在這方面，CSS的版面呈現因為都是使用文字，占了先天優勢。
所以，以下提供幾個CSS的網頁版型下載網站，

http://www.freecsstemplates.org/
http://ramblingsoul.com/
http://www.oswd.org/
http://www.free-css-templates.com/

當然，如果各位可以持續強化自己的CSS控制能力，
這些版型到了你手上，可以有更多變化，加油！

新的慈聖堂網站

之前曾為慈聖堂建立一個網站，可是，流量過小，
沒多少人看就出現流量不足的現象，
真的很沒力！

有鑑於此，又考慮到暫時不使用到資料庫，
就到智邦生活館租用一個平價網站空間，
2GB的儲存空間，一個月有10GB的流量，
還提供簡易留言板與計數器，蠻好玩的。
如果各位有租用空間的需求，可以交流一下。
如果想租用智邦的空間，也可以討論一下。

這是真正純手工，沒有使用CMS軟體建立起來的，
使用的軟體為DW與PS，正在努力建置中。

歡迎各位有空去看看，網址如下：
http://www.cihshengtang.url.tw/index.htm

DW CS3的"效果"

這次跟各位說說CS3版開始才有的新功能，也就是"行為"中的"效果"，
就個人而言，這些效果提供不一樣的呈現，
但是，請各位要好好想想怎麼用，要用在網頁的哪個部份。

已經先建好一個表格，插入一張點陣圖，在下方插入一個沒有標籤的按鈕，
不使用標籤的原因，是因為我們只是使用這個按鈕來啟動效果。如圖：

重點：這個表格必須命名，也就是要有"ID"，所有的元素都必須有個別的ID，
不論是Ap元素、表格都要有。
在此我們給的ID為"t1"，接著，選取按鈕，再選取"行為/效果/出現與淡出"，
上方的"目標元素"中選取t1，這樣就可以以這個按鈕來控制t1(帶著那張圖片)淡出與消失，

操作不難，效果倒是不錯，

請注意，下方的"切換效果"，如果是勾選的，則表示這個按鈕可以同時控制元素的出現與消失。
請各位都可以試試，含有多種效果可以使用，以這個例子作，是個人認為這個效果的使用度該是較高的。

有關DW中的SRPY幾件小事

Spry是DW CS3版開始才有的新功能，好用嗎？真不錯用，不過有幾件事要提醒大家。

1.這些效果都是以JS與CSS構成，因此，如果更換該Srpy效果的位置，比如換到另一個網頁，
   請務必注意CSS與JS檔案的位置與連結，密切注意每個網頁程式碼的頂端處。

2.如果該效果要建立在網站的範本中，要特別注意到，務必在"另存成範本"之前做好，
   已經體會過轉成範本後再加上效果的痛苦。

期盼大家加油，藉由使用Spry效果的過程中，更加熟悉CSS的效果與屬性設定。
相信CSS樣式表對網頁的影響與重要性在未來五年中不會稍減！
  

網站建置_4

現在的Dreamweaver(CS3版開始，以下簡稱DW)已經是ADOBE家族的一員，
與其他重量級軟體的整合度相當不錯，
例如在DW中插入圖片或是照片，可以直接呼叫Photoshop來加以修改或潤飾，
這一點，真的很方便。

CS3版中有個新功能叫做"Spry"，經過測試，效果不錯。
可以在上方的"插入"BAR中找到，也可以在"行為"視窗中看到，
前者包含新的表單欄位、選單、折疊式視窗與開合式視窗，
此中，建議各位多熟悉選單的使用，
因為是以CSS搭配javascript製作，在新增與修改上都很方便，
更重要的是，皆是以文字建立，與SEO策略是互相搭配的，
也就是說，這些文字都是可以被搜尋引擎找到的，
而且可以提供路徑，讓搜尋引擎派出的小軟體可以在我們網站中暢行無阻，
直接強化網頁中關鍵字的效用。

 

待續......................

網頁樣板

有好心人士介紹網頁樣板的好網站，
www.freewebsitetemplates.com
www.webpage.com
裡面可以看到好多樣板，
並且介紹更多的樣版網站及好看的樣板，
個人建議，
不需要購買，價格蠻高的，可以當作參考，
尤其是CSS相關的樣板，值得好好研究與學習。
也提醒各位，網站中所用到的照片，務必擁有版權，不要心存僥倖喔！

CSS樣式表_2

這次為各位介紹如何運用CSS建立背景圖片，
且要做到背景圖片固定在右下角，並不會隨著捲軸動作而上下跑。

各位可以自行準備文字與圖片練習，
動作十分簡單，不過文字量要夠，
要有捲軸出現才看得到效果。
示範如影片：(請點按右下方"切換全螢幕模式"會比較清楚，按"ESC"可關閉全螢幕)

建立流程是：
1.新增樣式表，三個類別中直接選取"標籤"，選取"body"標籤。
2.切換到"背景"，設定背景圖片。
3.下方選項設定為：不重複、固定、水平靠右、垂直靠下。
這樣就可以了，
當然，各位可以設定重複、捲動等其他選項試試，
相信可以體會更多CSS的使用方法。

待續.................................

CSS樣式表之一

CSS的全名是 Cascading Style Sheet，可以用來重新定義HTML，
或可說成強化既有HTML程式碼的不足。
可以快速訂定網頁樣式，可以快速套用在大量的網頁中。

使用上可分為三種類型，
第一種是直接定義在網頁內部，

即是使用時點選"只有此文件"，到網頁程式碼中檢查，可以看到


第二種則是建立獨立的樣式表檔，

個人最推薦這種使用方式，因為其他網頁皆可連結使用，不過必須視設計情況而定，
在程式碼中則呈現


第三種是直接寫入HTML標籤中，如：

則網頁中這段文字的表現就會是這樣：


這就是在網頁中使用CSS的方法，
當然，還有各式各樣的表現方式，會陸續在此介紹...............................................

網站施工_2

這次的工作是申請網址與租用空間。
先到智邦生活館租用一個虛擬主機(或說網站代管)，
先租用平價型，待日後需要用到資料庫再增租資料庫空間，
而後到Seednet網站申請網址，租用屬性型，也就是"com.tw"這一種。
款項皆已繳納，開始使用，重點是，必須將兩者結合起來，
如此，在瀏覽器輸入網址才能看到網頁。

先到智邦生活館，進入"虛擬主機"，以管理者身分登入，
按下列按鈕

將所看到的網站IP位址抄下來，不要抄錯喔！

隨後到Seednet首頁，點選"產品資訊/申請網址"，
會進到下列畫面

再點按"資料查詢與異動"，

輸入資料之後，會進入到設定的畫面，
再輸入之前在智邦生活館抄錄的IP位址即可。

請注意，即使不是在智邦生活館及Seednet申請，其他的主機設定大致類似，
重點一：即使日後更換虛擬主機(不論同公司與否)，DNS一定會隨之改變，
只要改變網址那邊的DNS設定即可，
繼續繳納所申請的網址管理費，即可繼續使用。
重點二：如果是將server建立在自己電腦，網站放在自己的電腦中，
而所使用的ADSL不是固定IP者，也就是浮動IP者，則處理方式不同，
相關資訊可參考臺灣網路資訊中心網域名稱註冊系統的說明文件：動態DNS問答集。

待續..................................................

網站施工_1

開始建立網站，文字與圖片都已蒐集完成，
在此建議，所準備的文字檔案都存為純文字檔(.txt)，
不要存為word檔，不然直接複製貼上會產生一些不必要的HTML碼，
還有一種處理方式是貼上後，執行"命令/清除Word的HTML"。

開啟Photoshop，建立新檔，這是首頁要用的版型，
下回還要利用其他圖片建立內頁要用的版型。

為何要建立984X200的圖，因為是以1024x768的螢幕解析度為目標，
個人認為要扣掉IE瀏覽器右方捲軸的寬度。
將準備的圖片放入，形成以下狀況，


又覺得圖片下方草地呈直線過於平整，
利用圖層遮色片加上筆刷處理成以下狀況，


刷為白色是要與下方網頁白色的背景相連，儲存為up1.psd檔。
又因為單張圖片過大，怕下載網頁過慢，
利用切片切為三張圖片，進DW再組合起來。
另外還以純草地圖片建立down1.psd檔，作為首頁下方圖片。
對兩個檔案分別執行"檔案/儲存為網頁用"，
也就是執行最佳化，將圖片儲存為jpg檔。

待續......................................

網站的前置作業

從今天開始要展示一個網站的建立。
網站內容是一種新的蔬菜湯。
架構不複雜，分為首頁、認識蔬菜湯、嚴選物件、問與答、網站導覽。
並分別命名為index、product、material、qna、view，很簡單但與內容相關的檔名。
就這五頁，已經先將文字與圖片收集好，之間再視需要加入動畫或是其他東西。

首先開啟DW，新增網站，因為該公司名為"upwell"，因此已在E槽新增一個"upwell"的資料匣，
直接定義此資料匣為網站根資料匣，
在此建議，將根資料匣直接放在分割區內，而不要放在桌面或是我的文件匣中，
此外，所有要用的檔案皆以小寫英文名命名，不論是圖片、網頁或是資料匣。
新增網站完成後，就繼續新增五個網頁檔，並將index.html設為首頁。

下一個動作會到Photoshop建立網頁的版型，屆時就會有圖片或是影片檔。
請待續.................................................

網站建置_3

個人對於各種軟體用法粗分如下：
以Dreamweaver為核心，
使用photoshop建置樣版與處理圖片，
有時也會使用illustrator建立樣板及建立按鈕，建立動畫要使用的各類角色，
使用Xnview或是Irfanview批次處理多張圖片，
使用Flash建立動畫，
使用WinAVIConverter為影片轉檔。
若要用到資料庫，就用Access作個資料庫，使用asp與網頁連結。

為何要用到資料庫？
舉凡留言板、討論區、新聞公告、電子報、會員管理，甚至計數器都要用到資料庫。

為何沒有用到音樂相關軟體？
因為對於一個網站而言，很難找到適當的、可以與網頁內容或主題搭配的背景音樂。

待續...............................................

網站建置_2

正所謂"綱舉目張"！建置網站之前，必須細細思考整個網站要呈現的主題與風格，
如果是公司網站，當然必須相關人士好好開個會！
重點是，先將網站的層層架構建立起來，
如：首頁底下還有幾層網頁，超連結如何來來往往...等。
一般來說，以企業網站而言，
首頁、公司簡介、產品介紹、網站導覽等是基本頁面，
其他則視各公司需求增加。

建立好架構之後，建議畫出幾張草圖，標示出要做的內容。
1.架構的圖形，當然，如果要用Word或是其他軟體作也可以。
   此時，該已經可以將各頁面的檔案名稱建立好，如：index.html(首頁)、product.html(產品)
2.頁面的草圖，通常會有兩張主要頁面，一張是首頁，一張是內容頁。
   頁面中要擺上哪些元素，如：公司Logo、公司名稱、標題、插圖或背景圖片。
接著，就要開始蒐集資料，包括文字稿、照片與圖片，若需要，要開始建立動畫與影片。

因此，網站建置可以粗分為三個階段，
籌備期(蒐集與分類各種資料)、施工期(個人是以Dreamweaver為軸)、維護與更新期。
事實上，很多網站會無以為繼，通常都是忽略維護與更新的重要，
可以想像，昨日、今日與兩周後的今天，看到的資料都一樣，相信沒有人有興趣常來拜訪！
建議，可以在首頁某個角落放置一段文字，宣告更新的頻率或時間，想信可以稍稍解決這個問題。

待續........................................................

網站建置_1

個人認為，網站的建置不該是一時衝動所產生。
網站主題必須明確，一以貫之，不可能在介紹3C產品的網站中出現介紹服飾的頁面！
怎麼看都不搭！
此外，整個網站的風格應該是一致的，
否則極易混淆網友的視聽，另外給人不夠專業的印象。

現在的個人網站較少遇到，該是部落格盛行的結果，
這是件好事，因為部落格的內容不需一致性，可以暢所欲言。
但是有幾件事提醒大家，網路是個公開的場所，
不論是部落格或是網站中的圖片或影片都是公開呈現，必須注意到版權，
曾被問到，使用搜尋所找到的圖片可以放在自己的網站嗎？
答案是，不一定行。
能被搜尋引擎找到的圖片或影片，只能說明該物件存在某個網站中，
並不代表可以被使用，除非與該網站連絡過，確認可以使用，
不然，即使是引用、介紹，對方絕對有權來"關切"。

個人實例，兩年前曾經建過個網站，純粹介紹個人拜讀過的書籍，
其中介紹到一本"天下文化"所出版的書籍，除了簡述一下內容，還引用對方網站上的書本封面。
幾天後才想到這方面的問題，連忙發信與天下文化聯絡，
對方的回覆是，若未牽涉到販售，無妨！

下次再與大家分享建置網站的流程與使用到的軟體.............................