基礎電腦網路與網站建置規劃 (2010)

HTML 基礎網頁設計 (利用記事本來編輯網頁怎麼作)

回上一頁
課程資料：
  1. 認識 HTML 語法：
    1. 網頁設計其實很簡單，因為網站都是透過提供 HTML 配合多媒體檔案來展現的；
    2. 不同的瀏覽器所展現的結果多少會有不同∼因此在設計時最好要瞭解 HTML 的標準；
    3. 你可以使用『原始碼』來察看一下 Yahoo 的首頁內容到底有啥東西存在？
    4. 不過就是一個純文字檔，配合一堆多媒體圖片檔案等
    5. 因此網頁設計就是：
      1. 你得要先有一些基礎的想法，例如：你想要建構什麼樣的網頁出來？(假如是你自己的生活記錄網站)
      2. 再者，開始建置你的一些多媒體圖片，例如數位相片、聲音檔案等等(注意！不要有版權方面的問題！)
      3. 最後透過 HTML 的語法，將這些多媒體資料放置在一個頁面的瀏覽中！
      4. 透過首頁的『超連結』將好多個網頁的連結放置在一塊，方便瀏覽者點選之用！
      5. 將你的網頁內容整個上傳到網站上，開始等待用戶端的要求瀏覽！

  2. HTML 網頁設計軟體：
    1. HTML 的網頁設計，可以使用自由軟體：http://www.kompozer.net/，按可按此下載中文 Windows 免安裝版本
    2. 請啟動 kompozer (作家/作曲家) 後，嘗試進行如下的網頁製作：(這些資料請放置於某一單一目錄中)
      1. 檔名：test1.html，內容：
        使用不同的顏色、不同的字體、不同的字型，去表達(1)你的姓名 (2)你的喜好 (3)你的經歷 (4)你最愛吃的食物等等，並注意Title與編碼的問題！
      2. 檔名：test2.html，內容：
        複製前一個網頁，然後將網頁內容加上背景。背景可以按此下載。
      3. 檔名：test3.html，內容：
        複製前一個網頁，在最上面一行加上標題『這是我的簡單介紹』， 並且姓名部分『加底線』與『粗體』該如何進行？
      4. 檔名：test4.html，內容：
        透過前一個網頁的複製，將上述的資料利用：『清單』來處理，該如何處置？
      5. 檔名：test5.html，內容：
        透過表格的利用，製作出自我介紹的網頁資料！可以加上大頭貼喔！
      6. 檔名：index.html，內容：
        將前面的五個網頁透過『超連結』放置到此頁面中！
      7. 檔名：test6.html，內容：
        如何放置圖片？透過圖片的標籤來製作！
      8. 檔名：test7.html，內容：
        加入跑馬燈特效！
    3. 圖片的處理方面，可以使用小畫家、Photoshop、PhotoImpact，愛用國貨方面，所以建議使用 PhotoImpact！ 請看範例，如何製作出一個『小動畫』 GIF 圖檔！
    4. 先要確認服務的軟體名稱，才能夠進行設定等等動作；

  3. 回最上方