第01 堂課- 製作第一組簡單網頁

本堂課會介紹如何登入伺服器去設計你的網頁，直接做線上編輯，同時理解html 裡面的標記(tag) 功能，當然，單一網頁的版面編排也是很重要的。

最終，連結怎麼處理，也是 ... 網站規劃與設計首頁 課程內容介紹 作業繳交區 好站參考 其他舊版教材 術語對照表 鳥哥教材首頁 網站規劃與設計 >課程內容>第01堂課-製作第一組簡單網頁 第01堂課-製作第一組簡單網頁 第02堂課-資料引用,表格,內置框架與多媒體 第03堂課-CSS初探：基本元素,設定,外部呼叫的方式 第04堂課-CSS文字,清單,表格,與繼承 第05堂課-CSS方塊模型 第06堂課-CSS背景,圖片,動畫簡介 第07堂課-導覽列設計與HTML5版面介紹 第08堂課-版面規劃與設計 期中報告-製作一個20頁面以上的個人網站 第09堂課-PHP初探 第10堂課-初探bootstrap網頁製作 第11堂課-bootstrap的版面規劃 第12堂課-表單規劃與設計 第13堂課-javascript與DOM基礎 期末報告流程-至少5周時間完成 第01堂課-製作第一組簡單網頁 整個瀏覽器就是一個網頁，這個瀏覽器的可視範圍被稱為body。

而在瀏覽器的不是網頁呈現的位置，會有相關的表頭資料，或者是關於網頁的內涵， 那就是在網頁中的head項目，這些都需要先了解，才能夠製作出第一個可以用的網頁。

本堂課會介紹如何登入伺服器去設計你的網頁，直接做線上編輯，同時理解html裡面的標記(tag)功能，當然，單一網頁的版面編排也是很重要的。

最終，連結怎麼處理，也是需要理解的項目。

1.1：HTML網頁的基本結構 1.2：編寫網頁的重要注意事項 1.3：HTML基礎標記使用 1.4：首頁與首頁檔名、區塊與非區塊標記 1.5：課後練習 1.1：HTML網頁的基本結構 所謂的網頁，一般來說，就是指瀏覽器可以解析的檔案之意。

常見的瀏覽器可以解析的檔案類型有： HTML網頁檔(副檔名通常為.html) 純文字檔(副檔名通常為.txt) 可攜式文件格式(副檔名通常為.pdf) 圖片格式檔案(副檔名通常為.jpg,.png,.gif等) 影像格式檔案(副檔名通常為.mp4,.ogg等，最好支援H264格式較佳) 聲音格式檔案(副檔名通常為.mp3,.ogg,.wav,.webm等) PS.除了html文字檔案之外，其餘的檔案當中，大多是獨立的存在。

除了上述的副檔名之外，其餘的檔案格式通常不被瀏覽器所理解與解析，因此當瀏覽器接觸到無法解析的檔案類型時，就會以類似『下載』的模式，提供使用者下載該檔案了。

因此網頁伺服器通常也可以作為檔案伺服器的下載之用。

html格式檔案，可以透過一些所謂的『標記(tag)』來將多媒體檔案嵌入到瀏覽器的畫面中， 你可以將html檔案想成是一個空白的畫布，而文字、色彩、影片、圖片等多媒體，則是可以放置在這個畫布上面的染料，而這些染料如何在畫布上面呈現， 那就得透過html的標記以及CSS的樣式表元素了。

換句話說，當你要製作網頁時，就得要先將這些需要的染料(圖片、影片、文字等等媒體資料)先準備好，然後再透過HTML的標記或CSS的元素， 將這些元件放置到你想要讓它出現在網頁的位置上，並改變或加上某些特效，這就是整個網頁囉。

A.由瀏覽器看網頁-分辨head與body的差異 因為網頁都是由瀏覽器來呈現的，因此，我們先由觀察瀏覽器如何呈現網頁來理解，當你要製作設計一個網頁時，應該要注意哪些項目。

先以本網頁的首頁為例，參考一下瀏覽器的呈現如下示意圖： 你會發現到，瀏覽器主要分為(1)上半部的功能畫面與(2)實際可以看到的網頁部份。

而在上半部你可以發現到頁面標籤會出現『網站規劃與設計』的項目， 至於下半部則是實際網頁作者想要讓大家查閱的部份了。

讀者們應該會注意到，我們繁體中文不是有所謂的文字編碼的問題嘛？中文編碼主要有大五碼(Big5) 以及萬國碼(unicode)，這一頁主要是用什麼編碼格式呢？以firefox為例，我們就來瞧一瞧： 結果就會看到這個網頁的預設編碼為萬國碼。

要注意喔，這個是網頁設計者自行宣告的～而這個宣告並不會出現在網頁內容中。

現在，再讓我們來瞧一瞧，這一個網頁的『原始碼』項目內容到底是怎樣？ 基本上，整個網頁一開始會宣告網頁的版本()，然後全部的內文都會被...所涵蓋， 而在這裡面主要分為兩大區塊，一塊是頭部宣告(

...)，一部分則是實際顯示於瀏覽器內部的身體區塊(...)。

整個網頁的項目可以變成這樣： 這裡是一些宣告的部份，包括標籤頁抬頭宣告、語系編碼宣告、樣式表外部呼叫、腳本外部呼叫等 這裡就是一大堆的內容！ 看你要呈現任何資料，都是貼在這裡！ 你也會發現這裡涵蓋一大堆標記()！這就是本站介紹的重點！

B.一般網頁的製作方式 網頁製作通常會使用幾種方式來處理： 客戶端單獨處理：客戶端電腦上面完成後，批次上傳到伺服器。

例如透過所見即所得的軟體編輯、文字編輯器等方式。

至於上傳方法，通常透過FTP等功能 客戶端/伺服端同步處理：直接透過某些通訊協定，如網芳(Samba)、FTP、SSH等方式，直接在客戶端以上述的軟體來編輯。

此時無須上傳，因為編輯的就是Server上面的文件 直接伺服器端處理：直接連線到Server去編輯網頁(較難，需較高超的技術)。

本教材預計使用notepad++來實做網頁，且搭配客戶端/伺服端同步處理的方式來處置。

例題1.1.A：安裝notepad++文書編輯器 下載與安裝： 請由google找到notepad++官網，直接下載最新板即可，可以自行選擇位元版本，不過，因為很多外掛只支援32位元版本， 建議下載32位元即可。

使用安裝版，暫時不要使用免安裝版本(安裝版本可以自動升級某些主元件)。

https://notepad-plus-plus.org/downloads/ 語系設定： 安裝完畢之後請啟動notepad++，若語系挑選錯誤，請於功能表選擇『Settings』-->『Preferences』--> 挑選左側的『General』頁面-->『 Localization』選擇『台灣繁體』即可。

安裝/管理外掛： 選擇『外掛』-->『管理外掛模組』，在出現的視窗中，預設的『可安裝』標籤底下， 找到『NppFTP』的項目，句選後，按下『安裝』即可安裝FTP的外掛。

若找不到該項目，很可能已經是安裝了，請點選『已安裝』或『更新』標籤， 看看能否升級(update)即可。

要使用客戶端/伺服端同步處理的方式時，使用者一定要取得伺服器端的操作權，亦即是你需要取得一組可以登入伺服器的帳號與密碼。

這組帳號與密碼需要使用整學期，因此請自行紀錄在自己的筆記上，不要忘記。

例題1.1.B：登入系統取得認證帳密 抄寫下老師於白板上撰寫的伺服器『主機名稱』與你的帳號(注意，伺服器的帳號通常為英數，且英文為小寫字元) 請使用pietty(若找不到，請google下載)依據老師的說明，登入系統。

第一次登入系統時，帳號會被強迫重新修改密碼， 整個變更密碼的畫面有點像這樣： 看到(current)代表要輸入的是『舊密碼』，亦即是老師提供給你預設的密碼 看到Newpassword:代表『要猜一個新密碼，輸入一個新密碼』的意思，這個密碼長度需要超過8個字元，且含有英數，不可以太簡單， 也盡量不要包含自己的一些特徵號碼(如身份證、手機、生日等等，盡量少用) 看到Retypenewpassword:代表你剛剛輸入的新密碼可以通過系統驗證，請再輸入一次即可。

上述流程如果超過3次(猜三次新密碼都無法通過系統的驗證)，那你就會被強迫踢出系統，請整個流程重新再來一次。

最終你就會取得(1)伺服器主機名稱或IP(2)使用者帳號(3)使用者密碼 本教材提供了FTP協定，讓使用者可以登入系統，並可以直接以notepad++來直接連上伺服器操作網頁設計。

從例題1.1.A 我們安裝了notepad++的NppFTP外掛，這個外掛的小圖示會顯示在notepad++的功能表上，你可以按下該圖示來使用這個外掛模組，如下圖所示： 當你按下畫面中的小齒輪之後，會出現兩個選項，分別是『Generalsettins(一般設定)』以及『Profilesettings(用戶帳密設定)』， 請選擇『Profilesettings』來進入設定畫面。

請記得你剛剛由伺服器取得的帳號與密碼相關資訊，準備來填寫設定值了。

一開始出現的Profilesettings視窗會一片空白，按下『Addnew』之後，會讓你輸入一個設定代表名稱，這個名稱隨便你指定沒關係！ 如上圖，鳥哥就寫自己喜歡的網頁設定名稱。

當然，你也可以輸入中文沒啥問題。

按下『OK』之後，就會出現如下的畫面， 在該畫面就得要填寫正確的資訊！ 幾個項目的設定需要注意： Hostname:老師提供給你的伺服器主機名稱(不能錯) Connectiontype:如上圖，共有四種方式，鳥哥的伺服器提供的是加密保護的FTPS加密方式，所以需要額外選擇。

如果你的上課環境所提供的連線協定不一樣，請詢問你的授課教師來改變這個設定值。

Port:因為伺服器所在處的資安防備問題，所以埠口改到2121埠口才行，同樣的，請詢問你的伺服器管理員，這裡的相關設定值。

Username:就是你的帳號名稱 Password:就是你剛剛建立/修改的新密碼。

(請注意，如果你是在多人共用的主機上面做此設定，可以句選『Askforpassword』項目， 這樣每次用這組設定登入時，才需要輸入密碼，而不是將密碼紀錄在設定檔中，可以避免密碼被盜用。

) 最終設定完畢後，請按下『Close』即可。

回到原本的notepad++的視窗，會發現右邊的NppFTP多了一個可以點選的按鈕，好像是連線的小圖示， 按下它，就會出現剛剛設定時的項目名稱，如下圖所示，那就直接點選吧！如果一切順利，就會發現系統已經用你的帳號連上了伺服器！ 若一切順利連上伺服器，你就可以準備開始製作網頁了！最終再來熟悉一下notepad++的視窗頁面內容。

C.以Server/client同步方式撰寫第一個網頁 假設你已經用notepad++連線上伺服器，透過客戶端/伺服端同步的方法來設計網頁，此時你就可以開始編輯網頁了。

請先將滑鼠移動到www上面，然後按下『右鍵』在出現的項目中，選擇『Createnewdirectory(建立新目錄)』。

上述圖示中，每個項目的意義為： Createnewdirectory:建立新目錄 Createnewfile:建立新檔案 RenameDirectory:修改檔名 Deletedirectory:刪除目錄 Uploadcurrentfilehere:將目前的檔案上傳到此目錄中 Uploadotherfilehere:將其他檔案上傳到此目錄中 Refresh:重新整理檔案畫面 在出現的畫面中，請填入web1這個檔名，按下『OK』後，你就會發現到www底下又多出一個web1的目錄小圖示了。

現在，請在web1這個目錄上，再次的新增一個檔案，檔名設定為unit01-1-1.html，整個畫面如下所示： --> 此時雙擊unit01-1-1.html兩下，該檔案就會被顯示在左側的編輯畫面裡頭了！接下來你就可以開始直接編輯該檔案！ 每次新的檔案要撰寫時，你都應該要先加上這些資料： 先在『編碼』功能列，選擇『編譯成UTF-8碼』，這點相當相當重要喔！ 第一行先撰寫html版本宣告() 加入html,head,body這三個成對標記 在body的部份，先寫入兩段文字，分別是『Myfirstwebpage』跟『我的第一個網頁』，最後按下儲存小圖示， notepad++就會將檔案上傳道伺服器了。

最終檔案內容會有點像這樣： D.以瀏覽器查閱上傳的網頁 在本教材所提供的伺服器上面，每個用戶都有自己的個人首頁。

個人首頁的目錄務必放置到www目錄內！也就是說，所有不在www目錄內的資料， 瀏覽器通通無法瀏覽的。

而在www目錄的內容，通通需要交給http://servername/~yourid/來瀏覽。

也就是說，檔案與網址的相關性是這樣的： /wwwhttp://server/~yourid/ /www/web1http://server/~yourid/web1/ /www/web1/unit01-1-1.htmlhttp://server/~yourid/web1/unit01-1-1.html 其中，server是老師提供給你的伺服器主機名，yourid則是帳號名稱。

因此，請立刻以瀏覽器觀察這個網頁的顯示結果！(就是上面特殊字體的那一行字！) 執行結果會有點像底下的圖示： 你應該會發現幾個小問題： 網頁最上方的標籤頁，並沒有相關的標題內容 文字內明明是兩行，但是卻僅有一行將兩個中英文部份整合了，中間似乎有一個空格 例題1.1.C：加入頁面標籤抬頭以及編碼特性 在html的項目內，加上lang="zh-Hant-TW"，宣告語言使用地區為台灣繁體中文區！ 在head的項目加入

，並且在title中間加入『我的第一個網頁』字樣 在head的項目內，加入，宣告語系為utf-8 在head的項目內，加入，宣告網頁作者 處理完畢之後，請到網頁刷新頁面，看看標題頁是否順利顯示出來了？ notepad++的自動字詞補齊功能 notepad++可以依據編輯的檔案副檔名來提供程式碼(原始碼)的檢驗之外，也可以提供字詞補齊的功能！例如當你輸入title時，可能輸入ti就會跑出 title的提示視窗給你選擇相關的可用字詞。

不過這需要做一點設定。

你可以在功能列的『設定』裡面找到『使用者自訂』，點下之後會出現如下的視窗， 點選『字詞自動完成功能』，然後句選啟動(建議可以取消數字的自動完成)，未來在打字的時候，就可以從提示視窗裡面找到很多有用的字詞了！ 底下則是故意重新編輯unit01-1-1.html的結果，重新在，正常情況下，當你將游標放入內時，notepad++應該會有顏色變化的顯示， 若無顏色變化，請查閱是否忽略了成對標記或獨立標記結尾忘記加/了？ 編輯網頁時，連續的空格、[enter]，最終都會被解析為單一一個空格而已。

標記與標記的屬性名、屬性值請務必使用小寫英文，不要使用大寫(先養成好習慣) 整體網站根目錄最好不要有太多網頁檔，網頁檔案請分門別類放置於不同的子目錄中 成對標記與獨立標記 HTML的標記格式基本上有兩種，一種是成對標記，在兩個標記內加入受影響的元件，例如 (受影響項目僅此內部文字) 即為成對標記，這種標記不可單獨存在～否則無法規範出受影響的元件範圍。

另一種標記則是獨立標記，例如前一個例題1.1.C裡面的語系編碼設定，那個 就是獨立標記，這種標記並沒有的設定，而為了方便我們做編輯，可以在這種標記的結尾加上斜線，亦即底下的樣式即可： HTML標記內的屬性名(attributename)與屬性值(attributevalue) HTML提供了很多的標記來達成許多的目的，例如