計(jì)算機(jī)實(shí)用技術(shù)課件第9章 綜合與提高

目錄9.1網(wǎng)站的設(shè)計(jì)9.2成果發(fā)布到互聯(lián)網(wǎng)上9.1網(wǎng)站的設(shè)計(jì)9.1.1站點(diǎn)規(guī)劃9.1.2首頁(yè)制作9.1.3模板的制作9.1.4其他靜態(tài)頁(yè)面的制作9.1.1站點(diǎn)規(guī)劃任何網(wǎng)站的建設(shè)都是從網(wǎng)站策劃開(kāi)始的。網(wǎng)站策劃是指在網(wǎng)站建設(shè)前對(duì)市場(chǎng)進(jìn)行分析、確定網(wǎng)站的目的和功能，并根據(jù)需要對(duì)網(wǎng)站建設(shè)中的技術(shù)、內(nèi)容、費(fèi)用、測(cè)試、維護(hù)等做出策劃。網(wǎng)站策劃對(duì)網(wǎng)站建設(shè)起到計(jì)劃和指導(dǎo)的作用，對(duì)網(wǎng)站的內(nèi)容和維護(hù)起到定位作用。9.1.1站點(diǎn)規(guī)劃1．明確創(chuàng)建網(wǎng)站的目的和用戶的需求2．出具網(wǎng)站策劃書(shū)9.1.2首頁(yè)制作

1.網(wǎng)站策劃2.首頁(yè)的版面設(shè)計(jì)3.切割設(shè)計(jì)稿4.制作導(dǎo)航動(dòng)畫5.制作產(chǎn)品展示動(dòng)畫6.首頁(yè)的完成1.網(wǎng)站策劃網(wǎng)站色彩布局首頁(yè)采用了褐黃、白、灰3色搭配，給人一種文靜、舒適、溫馨的感覺(jué)網(wǎng)站結(jié)構(gòu)布局2.首頁(yè)的版面設(shè)計(jì)（1）制作網(wǎng)站Banner（2）制作Logo與左側(cè)內(nèi)容（3）創(chuàng)建網(wǎng)站導(dǎo)航（4）制作版權(quán)信息（5）制作產(chǎn)品展示部分3.切割設(shè)計(jì)稿注意：拖出的參考線要便于依據(jù)參考線切割，切割的原則是每個(gè)獨(dú)立的區(qū)域要切割成一個(gè)整體，在網(wǎng)站設(shè)計(jì)中不動(dòng)的部分就切割成圖片。動(dòng)畫部分隱藏。4.制作導(dǎo)航動(dòng)畫若要導(dǎo)航有相應(yīng)的導(dǎo)航功能需要在動(dòng)作面板的代碼窗口中寫入下面代碼：on(release){ getURL("index.html");}注：首頁(yè)按鈕的代碼，index.html是相應(yīng)的首頁(yè)的網(wǎng)頁(yè)文件名。5.制作產(chǎn)品展示動(dòng)畫注：第一幅圖片要和舞臺(tái)的左上角對(duì)齊，只能容納3幅圖片，其余的圖片依次往右邊放置并和前面圖片對(duì)齊，我這里共放置了6幅圖片。由于要形成滾動(dòng)顯示的效果，需要把前3幅圖片重復(fù)并按前面的順序放到后面并對(duì)齊。6.首頁(yè)的完成雖然在Photoshop中輸出Web時(shí)產(chǎn)生了網(wǎng)頁(yè)，但是該網(wǎng)頁(yè)是由一個(gè)表格組成的圖像文件，還不能使用，下面將在Dreamweaver中創(chuàng)建表格重新組合。在組合過(guò)程中，要根據(jù)切割圖片的尺寸精確設(shè)置表格或者單元格的寬度和高度，這樣制作出來(lái)的網(wǎng)頁(yè)才不會(huì)錯(cuò)位。9.1.3模板的制作

1．CSS規(guī)則的定義2．模板的制作1．CSS規(guī)則的定義.style1{ font-family:"宋體";/*設(shè)置標(biāo)題樣式*/ font-size:36px; font-style:normal; font-weight:bold; color:#FF0000; margin-right:4px;}.STYLE2{ font-size:24px;/*設(shè)置左邊窗口文字格式*/ color:#00CCFF;}.STYLE3{font-size:14px}/*設(shè)置正文文字樣式*/2．模板的制作模板是網(wǎng)頁(yè)編輯軟件生成具有相似布局結(jié)構(gòu)和外觀的一種網(wǎng)頁(yè)制作功能。如果希望站點(diǎn)中的網(wǎng)頁(yè)享有某種特性，例如相同的布局結(jié)構(gòu)、相似的導(dǎo)航欄等內(nèi)容，模板是非常有用的。對(duì)于模板而言，新的頁(yè)面可以從一個(gè)模板中創(chuàng)建。一旦被創(chuàng)建，這個(gè)新的文檔將保持和原來(lái)模板的聯(lián)系，除非被明確地隔離分開(kāi)。一旦把模板應(yīng)用于一組網(wǎng)頁(yè)，就可以通過(guò)編輯該模板來(lái)改變這一組網(wǎng)頁(yè)中的共享信息。例如，將模板中的導(dǎo)航欄更改后，應(yīng)用該模板頁(yè)面中的導(dǎo)航欄將自動(dòng)被更新。9.2成果發(fā)布到互聯(lián)網(wǎng)上

9.2.1站點(diǎn)的本地測(cè)試9.2.2域名空間的申請(qǐng)9.2.3發(fā)布站點(diǎn)9.2.4更新維護(hù)站點(diǎn)一個(gè)網(wǎng)站從建立到投入使用通常要經(jīng)過(guò)以下步驟：合理規(guī)劃站點(diǎn)、構(gòu)建本地站點(diǎn)和遠(yuǎn)程站點(diǎn)、站點(diǎn)的測(cè)試、站點(diǎn)的上傳與發(fā)布。在完成了本地站點(diǎn)所有頁(yè)面的設(shè)計(jì)后，必須進(jìn)行必要的測(cè)試工作，當(dāng)網(wǎng)站能夠穩(wěn)定地工作后，就可以將站點(diǎn)上傳到遠(yuǎn)程Web服務(wù)器上，使之成為真正的站點(diǎn)，這就是站點(diǎn)的發(fā)布。9.2.1站點(diǎn)的本地測(cè)試當(dāng)用戶獲得了域名和網(wǎng)站空間后，應(yīng)當(dāng)對(duì)本地站點(diǎn)進(jìn)行完整的測(cè)試，再將頁(yè)面上傳到遠(yuǎn)程Web服務(wù)器中，主要的測(cè)試工作包括：站點(diǎn)瀏覽器的兼容性檢查。站點(diǎn)的鏈接檢查。在瀏覽器里預(yù)覽整個(gè)站點(diǎn)中的所有頁(yè)面，檢查可能存在的其他問(wèn)題。9.2.1站點(diǎn)的本地測(cè)試1．檢測(cè)瀏覽器的兼容性2．檢查站點(diǎn)的鏈接錯(cuò)誤9.2.2域名空間的申請(qǐng)?jiān)谏厦嫠阉饔蛎臻g的申請(qǐng)，可以得到很多相關(guān)信息。若需要申請(qǐng)免費(fèi)的域名和空間，就需要搜索免費(fèi)域名空間。（我就試試網(wǎng)），直接訪問(wèn)該網(wǎng)站就可以申請(qǐng)免費(fèi)域名空間。如圖9-63所示，單擊“注冊(cè)”按鈕進(jìn)入注冊(cè)頁(yè)面，填入相關(guān)信息，申請(qǐng)成功即可登錄進(jìn)入自己的空間頁(yè)面，如圖9-64所示。特別要注意記下自己的FTP上傳地址、FTP上傳賬號(hào)和FTP上傳密碼，這用于把已經(jīng)做好的網(wǎng)站上傳到該地址空間。至于系統(tǒng)自動(dòng)分配的域名也要記住，它是用于訪問(wèn)自己的網(wǎng)頁(yè)的網(wǎng)絡(luò)地址。圖9-635944網(wǎng)站的首頁(yè)圖9-64登錄后的頁(yè)面9.2.3發(fā)布站點(diǎn)1．直接使用軟件登錄前面申請(qǐng)到的FTP空間2．Dreamweave