資訊融入教學網(wǎng)頁設計初階課程筆記.doc

資訊融入教學網(wǎng)頁設計初階課程筆記【第三節(jié)】製作首頁（二）課前準備：第一節(jié)課所發(fā)的素材光碟片。第一次做網(wǎng)頁的人，經(jīng)常會把自己喜歡的顏色通通擺在網(wǎng)頁上，於是五顏六色的大字、小字配著怪怪的背景顏色，再加上一堆裝飾的小圖片和動畫，整個網(wǎng)頁熱鬧得不得了，也花得受不了，但又不知從何改善。其實，只要能掌握要點就能讓網(wǎng)頁的顏色看來既舒適又美觀，我們可以試試下面兩個簡易又安全的配色方法： 一、使用單色系設計：整個網(wǎng)站使用同一個色系，而只在顏色的深淺上做變化。若網(wǎng)頁背景用淺綠色、綠色，主要文字用白色，超連結文字使用深綠色，各種裝飾圖案和動畫也找相同色系的圖案，如此一來網(wǎng)頁不但變得比較好看，也兼顧了整個網(wǎng)站的風格。以上述的方法設計時，我們可以利用Dreamwaver MX系統(tǒng)內(nèi)建的色彩選擇器（同上一節(jié)筆記中的2-5-3所圖示的色彩選擇器），輕鬆的選擇同色系不同深淺的色彩來搭配。二、使用相近色系設計：利用三種連續(xù)的色系來互相搭配。以Windows系統(tǒng)的色彩選擇器而言，當你在色彩區(qū)選取一種顏色後，左、右兩種顏色就是它的相近色。這類的調和色在視覺上能讓人覺得比較舒服。當然，使用這種方法亦要考慮到整個版面，而不是只注重個別元件的用色。應用上述兩種配色方法的另一重點是同一網(wǎng)站裡所有網(wǎng)頁最好都使用相同的配色原理、配色方法，這樣不但具有整體感，也省時省力。在選用顏色時我們可以使用較深或較淺的顏色做為網(wǎng)頁主色，而像標題、連結、重要的文字等少數(shù)部份則用較亮的顏色來加以突顯，這樣網(wǎng)頁比較水喔！十二色相環(huán)暖色系：此系列顏色給人溫暖、活潑的感覺。寒色系：此系列顏色給人寒冷、沉穩(wěn)的感覺。中性色：綠色、紫色與不同色系搭配會產(chǎn)生不同的暖、寒感覺。任意三個連續(xù)的色系為相近色；相對的色系為對比色。14組網(wǎng)頁配色風格參考：有趣的配色風格：愉快、有活力、明亮鮮明。自然的配色風格：平靜、調和?，F(xiàn)代感的配色風格：單純內(nèi)斂、低彩度。高科技的配色風格：理智、值得信賴。親近的配色風格：溫暖、平和、安定、無負擔?？旎畹呐渖L格：輕快、明亮。/index.html簡單的配色風格：簡潔、一致。女性的配色風格：柔和自然、些許華麗。野性的配色風格：對比強烈、充滿活力。傳統(tǒng)的配色風格：高質感、富民族特色。/named/Index/Home/english/gallery/main.html運動的配色風格：律動。乾淨的配色風格：單純、清爽。/canada/basketball/promo/index.jsp古典的配色風格：濃厚、平和、有質感。柔和的配色風格：柔和、安定、淺色調。http:/www.bbc.co.uk製作首頁（頁框組網(wǎng)頁）：上次所介紹的首頁是屬於常見的單頁形式。它的優(yōu)點是容易製作，缺點是網(wǎng)站裡的每一個網(wǎng)頁都要製作導覽列，才能使網(wǎng)站裡的所有網(wǎng)頁互連。在網(wǎng)站完成後，如果我們在網(wǎng)站中增加一個新網(wǎng)頁時，就必須將新網(wǎng)頁的連結增加到網(wǎng)站裡的每一個網(wǎng)頁上，可想而知的，若用這種方式製作網(wǎng)站雖然剛開始的時候很便利，但對日後的管理和維護上將造成很大的不便。另外的一種常見的方法是由兩個網(wǎng)頁併為一個網(wǎng)頁，在左邊的網(wǎng)頁置上導覽列，按下超連結後，讓連結的網(wǎng)頁出現(xiàn)在右邊的網(wǎng)頁，這樣一來，往後新增網(wǎng)頁時只要在導覽列增加該網(wǎng)頁的連結即可，這就是頁框組網(wǎng)頁（在FrontPage稱為框架頁）的優(yōu)點。在此我們使用頁框組網(wǎng)頁的製作方法來完成整個網(wǎng)站設計。製作流程：製作頁框組網(wǎng)頁設定頁面屬性將上次首頁置入頁框組裡的右頁框變更上次所製作的首頁的檔案名稱由遠端下載資料至本機3-1由遠端下載資料至本機（開啟Dreamweaver MX下載網(wǎng)站至主機硬碟）3-1-1開啟Dreamweaver MX：由windows桌面執(zhí)行開始程式集MacromediaDreamweaver MX。3-1-2新增網(wǎng)站：在Dreamweaver MX的功能表中執(zhí)行網(wǎng)站新增網(wǎng)站的命令。3-1-3按照以下步驟編輯網(wǎng)站：（1）為新網(wǎng)站命名後按下一步。（2）選擇不要使用伺服器技術後按下一步。（3）選擇第一項並變更檔案存放處後按下一步。（4）選擇先前在D磁碟機中所新建的網(wǎng)頁資料夾後按下一步。（5）選擇FTP後按下一步。（6）鍵入各項設定：FTP位址：30 FTP帳號：您的網(wǎng)頁空間帳號 輸入上述資料後按下一步。（7）選擇不要存回和取出後按下一步。（8）按下完成。3-1-4下載整個網(wǎng)站：（1）在網(wǎng)站面板中按下與遠端主機連線鈕。（2）按住Ctrl鍵，以滑鼠點選web資料夾和index.htm檔案。（3）在網(wǎng)站面板中按下下載檔案鈕，取回資料。（4）在網(wǎng)站面板中切換為本機檢視狀態(tài)。3-2分割頁框3-2-1重新命名：將原有的index.htm檔案重新命名為R.htm。3-2-2開新檔案：在網(wǎng)站面板中開新檔案，檔案名稱使用預設檔名untitled.htm。3-2-3開啟新檔案：開啟untitled.htm。3-2-4切換面板：由Dreamweaver MX的插入面板區(qū)切換到頁框面板。3-2-5選用頁框：選取頁框種類並插入（建議選用左頁框）。左頁框畫面大小，建議使用160像素。（在屬性面板中的欄鍵入160，再按Enter鍵）3-2-6選取右頁框：按住Alt鍵不放，以滑鼠點選右頁框中的網(wǎng)頁。另一種選取頁框的方法：先執(zhí)行視窗其他頁框的命令以開啟頁框面板，再從頁框面板中點選所要的頁框。3-2-7指定右頁框的網(wǎng)頁來源：在視窗下方的屬性面板指定R.htm網(wǎng)頁檔案。3-2-8儲存檔案：（1）執(zhí)行檔案全部儲存的命令。（2）儲存第一個檔案（整個頁框組），命名為index.htm。（3）儲存第二個檔案（左頁框），命名為L.htm。儲存首頁頁框組後，便可以將untitled.htm刪除。3-3設定頁面屬性 3-3-1設定網(wǎng)頁標題（此標題顯示在瀏覽器的標題列）：（1）在Dreamweaver MX的功能表中，對index.htm網(wǎng)頁檔案執(zhí)行修改頁面屬性的命令。（2）在標題欄中鍵入網(wǎng)頁標題。（可以鍵入歡迎的語句：歡迎光臨宜蘭縣古亭國小五年忠班?；蛘咭部梢枣I入網(wǎng)站名稱：YA！36+1個躍動音符的生活點滴）3-3-2設定網(wǎng)頁背景： 先參考上述14組網(wǎng)頁範例後，決定所要的網(wǎng)頁風格，再依下面的方法進行配色。第一種方法：先在網(wǎng)頁背景色彩選取器中選取網(wǎng)頁背景色，再選擇文字和連結的顏色。這樣的方法選擇性比較高，不過選用的時間會比較長。第二種方法：執(zhí)行命令設定頁面配色的命令，在選取方塊內(nèi)挑選一組設定（包含網(wǎng)頁、文字、連結的顏色）。這樣的方法選擇性比較低，但選用的時間會少很多，而且不傷腦筋。第三種方法：先插入網(wǎng)頁背景影像，再用第一種方法或第二種方法選擇搭配網(wǎng)頁背景影像的文字、連結的顏色。這樣的方法變化性高，然而選用的時間會比較長。插入網(wǎng)頁背景影像1由Photo Explorer 6瀏覽光碟內(nèi)的網(wǎng)頁圖庫之背景。2在Photo Explorer 6中，將所要的背景圖複製到web資料夾內(nèi)的images資料夾。3切換視窗回Dreamweaver MX，在功能表中執(zhí)行修改頁面屬性背景影像的命令。4從images資料夾選取所要的背景圖插入網(wǎng)頁中。挑選到滿意的顏色後，別忘了將它的色碼寫下來，這樣才能套用在日後製作的新網(wǎng)頁，以維持整個網(wǎng)站的配色風格。3-4設定圖層底色3-4-1選取圖層：點選圖層，使之出現(xiàn)八個控制點。3-4-2選取顏色：由編輯區(qū)下方的屬性面板中之背景顏色內(nèi)的色彩選取器裡，選取所要的顏色。3-5插入網(wǎng)頁背景音樂3-5-1試聽音樂檔：在檔案總管裡找到光碟內(nèi)的背景音樂資料夾，對音樂檔案雙擊滑鼠左鍵即可播放。3-5-2複製音樂檔：將所要的音樂檔複製到網(wǎng)站資料夾內(nèi)。3-5-3插入音樂檔：點選首頁左頁框的網(wǎng)頁，在插入面板中執(zhí)行媒體外掛程式。3-5-4調整撥放面板大?。狐c選所插入的音樂檔物件，使之出現(xiàn)八個控制點，按住某一個控制點後再拖曳，這樣便可以調整大小。3-5-4預覽畫面：儲存網(wǎng)頁後，按下鍵盤上的F12鍵即可預覽。網(wǎng)頁修改與上傳：3-7檢視網(wǎng)站架構利用本機檢視狀態(tài)來查看網(wǎng)站內(nèi)各檔案、資料夾的關連是否正確。3-8整個網(wǎng)站上傳2-8-1選擇網(wǎng)站：在將游標移至所要上傳的網(wǎng)站上。2-8-2上傳網(wǎng)站：按下，在連線狀態(tài)下，即可上傳整個網(wǎng)站。3-9單一檔案上傳2-9-1選擇檔案：在將游標移至所要上傳的檔案上。2-9-2上傳檔案：按下，在連線狀態(tài)下，即可上傳整個檔案。Photo Explor