资讯融入教学网页设计初阶课程笔记.doc

資訊融入教學網頁設計初階課程筆記 【第四節】製作學生名單、公告事項網頁與設定超連結 課前準備：貴班的學生名單與公告事項、第一節課所發的素材光碟片。 1.製作學生名單： ●使用表格（圖層內的表格） ●表格細部設定 2.製作公告事項欄： ●使用表格（網頁上的表格） ●表格細部設定 3.網頁上的連結： ●使用錨點 4.網頁間的連結： ●設定超連結（首頁←→學生名單網頁） 5.網頁修改與上傳。 完 成首頁之後，接著便是製作第二個網頁。在本節中除了沿用前面所學的方法來製作之外，並繼續介紹四個網頁製作技巧：使用表格、使用網頁分隔線（水平線）、設定錨點以及網頁製作中最重要的重點----設定超連結，至此整個網站便初具雛形。 製作新網頁： ※製作流程： ●4-1由遠端下載資料至本機（開啟Dreamweaver MX下載網站至主機硬碟） 4-1-1開啟Dreamweaver MX：由windows桌面執行「開始→程式集→Macromedia→Dreamweaver MX」。 4-1-2新增網站：在Dreamweaver MX的功能表中執行「網站→新增網站」的命令。 4-1-3按照以下步驟編輯網站： （1）為新網站「命名」後按下一步。 （2）選擇「不要使用伺服器技術」後按下一步。 （3）選擇第一項並變更檔案存放處後按下一步。 （4）選擇先前在D磁碟機中所新建的網頁資料夾後按下一步。 （5）選擇「FTP」後按下一步。 （6）鍵入各項設定：→FTP位址：30 →FTP帳號：您的網頁空間帳號 輸入上述資料後按下一步。 （7）選擇「不要存回和取出」後按下一步。 （8）按下完成。 4-1-4下載整個網站： （1）在網站面板中按下與遠端主機連線鈕。 （2）按住「Ctrl」鍵，以滑鼠點選「web」資料夾和「index.htm」、「R.htm」、「L.htm」等檔案。 （3）在網站面板中按下下載檔案鈕，取回資料。 （4）在網站面板中切換為本機檢視狀態。 ●4-2 3-2-1重新命名：將原有的「index.htm」檔案重新命名為「R.htm」。 3-2-2開新檔案：在網站面板中開新檔案，檔案名稱使用預設檔名「untitled.htm」。 3-2-3開啟新檔案：開啟「untitled.htm」。 3-2-4切換面板：由Dreamweaver MX的插入面板區切換到頁框面板。 3-2-5選用頁框：選取頁框種類並插入（建議選用左頁框）。 ※左頁框畫面大小，建議使用160像素。（在屬性面板中的「欄」鍵入160，再按「Enter」鍵） 3-2-6選取右頁框：按住「Alt」鍵不放，以滑鼠點選右頁框中的網頁。 ※另一種選取頁框的方法：先執行「視窗→其他→頁框」的命令以開啟頁框面板，再從頁框面板中點選所要的頁框。 3-2-7指定右頁框的網頁來源：在視窗下方的屬性面板指定「R.htm」網頁檔案。 3-2-8儲存檔案： （1）執行「檔案→全部儲存」的命令。 （2）儲存第一個檔案（整個頁框組），命名為「index.htm」。 （3）儲存第二個檔案（左頁框），命名為「L.htm」。 ※儲存首頁頁框組後，便可以將「untitled.htm」刪除。 ●4-3? 3-3-1設定網頁標題（此標題顯示在瀏覽器的標題列）： （1）在Dreamweaver MX的功能表中，對「index.htm」網頁檔案執行「修改→頁面屬性」的命令。 （2）在標題欄中鍵入網頁標題。（可以鍵入歡迎的語句：歡迎光臨宜蘭縣古亭國小五年忠班。或者也可以鍵入網站名稱：YA！36+1個躍動音符的生活點滴） 3-3-2設定網頁背景： 先參考上述14組網頁範例後，決定所要的網頁風格，再依下面的方法進行配色。 第一種方法：先在網頁背景色彩選取器中選取網頁背景色，再選擇文字和連結的顏色。這樣的方法選擇性比較高，不過選用的時間會比較長。 第二種方法：執行「命令→設定頁面配色」的命令，在選取方塊內挑選一組設定（包含網頁、文字、連結的顏色）。這樣的方法選擇性比較低，但選用的時間會少很多，而且不傷腦筋。 第三種方法：先插入網頁背景影像，再用第一種方法或第二種方法選擇搭配網頁背景影像的文字、連結的顏色。這樣的方法變化性高，然而選用的時間會比較長。 ※插入網頁背景影像 1由Photo Explorer 6瀏覽光碟內的網頁圖庫之背景。 2在Photo Explorer 6中，將所要的背景圖複製到「web」資料夾內的「images」資料夾。 3切換視窗回Dreamweaver MX，在功能表中執行「修改→頁面屬性→背景影像」的命令。 4從「images」資料夾選取所要的背景圖插入網頁中。 ※挑選到滿意的顏色後，別忘了將它的色碼寫下來，這樣才能套用在日後製作的新網頁，以維持整個網站的配色風格。 ●4-4 4-4-1選取圖層：點選圖層