資訊融入教學(xué)網(wǎng)頁設(shè)計(jì)初階課程筆記.doc

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