以dreamweaver內建的樣本來設計

目標
學習檔案的管理

方法

1. 先在d:磁碟機 (若無d:磁碟機則改在c:磁碟機) 建立一個資料夾， 取英數名如「travel1211」，該資料夾內另增一資料夾，取名為「www」。
2. 在「www」資料夾內新建三個資料夾。分別取名為
   01xxx
   02yyy
   03zzz
3. 啟動Dreamweaver軟體，新增文件，程序如下圖 (點按該圖以放大)
    
4. 點按建立鈕，取名為index，存在「www」資料夾內。
5. 開新檔案，同上圖中，選項為旅遊的「文字」頁，點按建立鈕，取名為index，存放在「01xxx」資料夾內。
6. 開新檔案，同上圖中，選項為旅遊的「產品」頁，點按建立鈕，取名為index，存放在「02yyy」資料夾內。
7. 開新檔案，同上圖中，選項為旅遊的「目錄」頁，點按建立鈕，取名為index，存放在「3zzz」資料夾內。 

檔案管理延伸流覽

• 磨瓶設計
• CNN

檔案命名

• 一個網站會由許多網頁組成，一如書由很多章節組成。每一網頁須命名，命名要用英文及或數字、合法的符號。注意：網頁包括網頁中的圖片、音效檔、flash動畫，取中文名是不行的。
• 瀏覽時，只要進入一個資料夾，若未指定要看哪一個網頁時，會自動顯示名為index的網頁。其他網頁則一定要指名，注意：名字的大小寫字母是不能通用的，例如：lov是不等於Lov的，所以，最好的方法是一律用小寫。

目標
仿效Dw軟體的設計

方法

• 觀看SPA網站

補充
隨堂練習的檔案來源
C:\Program Files\Adobe\Adobe Dreamweaver CS3\configuration\BuiltIn\StarterPages

目標
為你在學校的網站新增內容

學習內容

• 網站地圖 Sitemap
• 增設網站內容
• 使用者友善
  

步驟

1. 在www資料夾內新增work1；work2；work3三個資料夾。
2. 將第一次做的index.html複製到work1資料夾內。
3. 將第二次做的內容直接移入work2。
4. 將下列的作業取名為index.html，存入work3資料夾內，其內容包括 (可連結)
   
   • 待修改網站的超連結。
   • 網站地圖 (sitemap)。
     
   • 擷取待修改網站的首頁
   • 新設計頁首的草圖1、2及3 (草圖可在繪圖軟體內製作)

問題

1. 如何在瀏覽器看到work1、work2及work3內的作品？

補充
螢幕擷取圖像的方法可用以下方法之一：

• 按PrintScreen鍵→到Photoshop去剪栽。
• 到http://www.cnet.com去下載ScreenPrint V3，安裝後可以擷取圖。

簡易網站設計

目標
設計一簡易簡站，張貼你在部落格中的五篇文章。

學習新功能

• 超連結
• 命名
• 文字編排
  

步驟

一、參考網站

1. 五愛的首頁。
2. 徐文嫻的作品
   

二、文字

1. 從其它文件將文字拷貝到記事本，加以編輯 (必要時) ，再從記事本拷貝到Dreamwever。

三、圖像

1. 圖像的處理：jpg檔不要再三儲存，會破壞品質，格式一定要RGB，不可用CMYK。
2. 圖像一定要上傳到遠端的檔案夾內。

四、命名

1. 注意各html檔的命名法則--有數字及名字。
2. 放在網路上的有關檔案，不論html、swf、jpg，其命名萬萬不能用中文或特殊的符號像阿花.jpg或:-).html。

五、建立檔案

建議閱讀

網站結構

目標
了解網站內容的線性結構、層屬結構與檔案命名

學習新功能

• 網站地圖 (site map)
• 線性結構
• 層屬結構
  
• 超連結

一、前置作業

1. 開啟Dreamweaver，進入網站管理，連結到遠端資訊。
2. 於本機端修改上周的index.html檔，加入居中排列，依序作業一、作業二至作業七。
3. 存檔。
   

二、網站地圖
一個網站是眾多網頁的組合，每一個網頁，都是個別的檔案，常見的附檔名為html。每一網頁會與其他網頁建立出關係，例如是同類關係，或者連續關係，或者連結關係。
為了管理這些網頁成為良好的結構，網站會附設網站地圖 (有中譯為網站導覽)，讓維修人員或瀏覽者容易理解整個網站的結構。在架網站時，須先想好內容的組織架構，以期能符合使用者經驗。

三、線性結構

• 線性結構：網頁內容像火車那樣，一站接一站往前或倒後。
• 實例簡介：利用線性結構，介紹三張圖文說明，用←(上一篇)及→(下一篇)做超連結。
• 製作步驟：
  
  1. 在本地端的www資料夾內新增一個資料夾，取一小寫英文名，如work_1。
  2. 在work_1內新增一個檔案，取名為article1.html。
  3. 再新增一個檔案，取名為article2.html。
  4. 再新增一個檔案，取名為article3.html。
  5. 再新增一檔案夾，取名為images。
  6. 將三個圖像 (格式以gif或jpg為主，圖最好在640x480以內) 放入images資料來內。
     
  7. 開啟article1.html，編輯它，使成為圖文作品，在文章最下方下一篇。
  8. 為下一篇設超連結，連到入article2.html。
  9. 儲存檔案article1.html。
     
  10. 另存新檔為article2.html，編輯它，換新圖文，在文章最下方下一篇左側，另鍵入上一篇。
      1. 為下一篇設超連結，連到入article3.html。
      2. 為上一篇設超連結，連到入article1.html。
  11. 儲存檔案article2.html。
  12. 另存新檔為article3.html，編輯它，換新圖文，將文章最下方下一篇刪除，另鍵入上一篇。。
      1. 將上一篇的超連結連到article2.html。
      儲存檔案article3.html。
  13. 在瀏覽器測試 (IE的快速鍵為F12鍵)。
  14. 上傳到伺服器。

四、層屬結構

• 層屬結構：像書本那樣，一書有數章，每章數節等。
• 實例簡介：利用可任選且具超連結的文字或圖像。
• 製作步驟：
  
  1. 在本地端的www資料夾，新增一個資料夾，取一小寫英文名，如work_2。
  2. 在work_2資料夾內新增一個檔案，取名為article1.html。
  3. 再新增一個檔案，取名為article2.html。
  4. 再新增一個檔案，取名為article3.html。
  5. 再新增一個檔案，取名為article4.html。
  6. 再新增一檔案夾，取名為images。
  7. 將四個圖像 (格式以gif或jpg為主，圖最好在640x480以內) 放入images資料來內。
     
  8. article1.html，編輯它，使成為圖文作品，在文章最下方加入第一篇、第二篇、第三篇、第四篇等四個詞，為讓各詞間有空白，按Ctrl+Shift+空間棒。
     
     1. 將第一篇做超連結到article1.html。
     2. 將第二篇做超連結到article2.html。
     3. 將第三篇做超連結到article3.html。
     4. 將第四篇做超連結到article4.html。
  9. 儲存檔案。
  10. 另存新檔，取名為article2.html，取代原檔案，編輯article2.html，存檔。
  11. 另存新檔，取名為article3.html，取代原檔案，編輯article3.html，存檔。
  12. 另存新檔，取名為article4.html，取代原檔案，編輯article4.html，存檔。
  13. 在瀏覽器測試 (IE的快速鍵為F12鍵)。
  14. 上傳到伺服器。

五、首頁與內頁超連結

1. 將index.html檔的作業一與work_1內的article1.html連結。
2. 將index.html檔的作業一與work_2內的article2.html連結。
3. 在瀏覽器測試 (IE的快速鍵為F12鍵)。
4. 儲存檔案。
5. 上傳到伺服器。

六、在部落格做超連結

1. 到你的部落格，新增「網站結構」的文章。
2. 於內文寫「我在校方的網站」，將這些字做成超連結，其網址是http://web2.ntit.edu.tw/~sxxxxxxx，此處的xxxxxxx是你的學號。

css入門

CSS概述
CSS是Cascading Style Sheet的縮寫，中譯為樣式表。它是一組樣式的集合，功能是要讓網站頁面的設計能結構化、經濟化及美觀化。
樣式可以是網頁內部的，也可以是外部的。前者適用於單一頁面，後者適用於整個網站﹣﹣先設好一個.css檔，網頁再連結該.css檔。

網站設計的必備能力之一是善用CSS，以下的網站是值得一覽：

• http://www.csszengarden.com/
• http://ccca.nctu.edu.tw/~hlb/trans/practicalcss/
  
• http://chinese-school.netfirms.com/css-tutorial-T-Chinese-index.htm
• http://www.w3schools.com/css/
• http://www.sitepoint.com/books/cssant1/
• http://www.photoshopcafe.com/tutorials.htm
• http://www.greenmaven.com/
• http://www.zafu.com
• http://www.adobe.com/devnet/dreamweaver/
• 用CSS及Photoshop做網頁粗稿http://alistapart.com/articles/quickcssmockupswithphotoshop
• 在xuite修改CSS
• CSS一招半式
  

建議閱讀

• 賴虹燕譯，Web CSS網頁樣式設計學 ，台北：博碩，200x年。
• 黃聰明，CSS版面樣式設計實務，台北：文魁，200x年。
• 碼上就用CSS，台北：上奇，，200x年。
• 胡為君譯，CSS網頁設計手扎，101個您一定會遇到的問題與解答。台北：上奇，200x年。
• 胡為君譯，The Zen of CSS-網頁視覺設計の王道，台北：上奇，200x年。
• 王煦淳譯，WebLayout設計的美學, 台北：旗標，2006。
  

在學校伺服器架網站

一般而言，架網站有二個方式：

• 一是以自己的電腦當伺服器（server）；你要申請網站，要繳年費；
• 二是以別人的電腦當伺服器。你可能要繳費，但很多是免費的。

現在，你要做的是第二種，即以本校提供每人10ＭＢ空間來架設個人網站。它有一些限制，譬如，它無法建構資料庫。雖如此，仍可完出一些有趣的內容，以下介紹以dreamweaver來架設網站的方法，分以七大步驟：
一、建立本地端的資料夾

1. 先到學校網站首頁的Eportal更新你的密碼。
2. 先在電腦D:槽內新增一個資料夾，一律取小寫英數名，不要空格或特殊符號，例如，取名為web123456。若一定要用特殊符號，建議只用下標_，例如，web_1234。
3. 打開web123456資料夾，新增一個資料夾，取名為www。(注意：一定要取名為www，英文要小寫)，取名www的理由是校方伺服器的要求。

二、用Dreameweaver建立本地資訊

1. 啟動Dreamweaver，開啟新檔，選「html」。
2. 從主選單選網站 >管理網站，於對話框點按「新增網站」鈕。
3. 點按浮動視窗上方的「進階」標頭。
4. 在左上角的分類下，選「本地資訊」。
5. 點按「本地資料夾」空白欄右側的資料夾圖示，選擇web123456這個資料夾。(注意紅色框內最右邊不可以有www)。
   

三、設定遠端資訊

1. 接著，在分類欄內選「遠端資訊」，並完成類似下圖之資料設定。
   注意，主機目錄欄要留白。要打V的一定要打鉤。
   不知密碼者，請到http://web2.ntit.edu.tw找尋。
   
2. 換測試鈕。
   當顯示可以連繫成功，可以按「確定」鈕。
   

四、實際連線

1. 在Dreamweaver作業視窗右側，按以「連線至遠端主機」。
2. 選用「本地端」。
3. 滑鼠在www資夾，點按右鍵，按新增檔案，取名為index.html。
   注意，這項命名字不可錯誤。
4. 點按index.html二下以開啟dreamweaver，它會是一個空白頁面。
5. 在頁面內輸入能表達你個人資料的文字內容。
6. 在title欄內鍵入「xxxx的首頁」
7. 檔案>存檔。

五、檔案上傳。

1. 點按上傳圖示。

六、瀏覽成果
依上述步驟，你應已架好自己的個人網站了，你應該記下你自己的網站的網址！它應該像下列文字串：http://web2.ntit.edu.tw/~sxxxxxxxxxxx/ （註：sxxxxxxxxxxx是你的學號）

1. 到瀏覽器的位址欄，鍵入你的網址
   http://web2.ntit.edu.tw/~sxxxxxxxxxxx或
   http://web2.ntit.edu.tw/~sxxxxxxxxxxx/index.html或
   http://web2.ntit.edu.tw/~sxxxxxxxxxxx/index.htm。
   看看三者有沒不同。
   

七、下載
當你將網站資料下傳到伺服器之後，你可到任何地方將資料下載。下載的步驟如下：

1. 同主步驟一至四。
2. 點按Dreamweaver作業視窗右側的下載。
3. 在本地端，將下傳的檔案加以編輯，儲檔。
4. 上傳。
5. 到瀏覽器看結果。
   

八、刪除網站
當你使用學校的軟體經營你的本地端網站，要離去時，記得執行

1. 網站 > 管理網站 >
2. 對話框內選取你的網站名 > 移除。

如此，可以防此其它人不小心闖入你的網站。

小結
由於學校的網站伺服器內已為每位使用者設好www資料夾供網頁使用，所以你的任何資料務必要存入該資料夾內，否則一定會出問題。因此，本地端的www資料夾與遠端的資料夾是對等的。你將本地端的資料夾上傳，就會蓋過遠端的www資料夾。反之亦然，另外，這兩個資料夾內，一定要有一個檔案，其檔名為 index.html。


有了網站，你的問題是你要表現什麼內容？要如何表現？
說到內容，最好是你最感興趣的，或者你被逼得要做的（例如，你接了case）。
說到表現，答案可不只一種，它就像印刷編雜誌一樣，你要有版式、圖片、色彩計劃、分類。但與印刷雜誌不同的是，它會用到超連結(hyperlink）、多媒體（flash）或視訊及音效等。
本學習中，你的學習目標有二：

1. 模仿網站：觀賞網站，模仿其風格架設自己設想內容的網站。
2. 改版：以前一階段的能力為基礎，設計另一種風格（模仿亦可，自創更佳），強化自己改版的能力，並為業界的網站做更版 。

補充
你可由以下的超連結去建構免費網站

• 免費資源網站社群
• http://www.wopop.com