43_網(wǎng)頁(yè)的制作_學(xué)案

1、4.3網(wǎng)頁(yè)的制作教學(xué)設(shè)計(jì) 吳玲玲一、學(xué)習(xí)目標(biāo)1.了解網(wǎng)站開(kāi)發(fā)的過(guò)程。2.依據(jù)網(wǎng)站的開(kāi)發(fā)規(guī)劃與設(shè)計(jì)方案，運(yùn)用網(wǎng)頁(yè)制作工具實(shí)施設(shè)計(jì)過(guò)程。3.在設(shè)計(jì)制作的過(guò)程中，提高審美與評(píng)價(jià)的能力。二、學(xué)習(xí)重難點(diǎn)依據(jù)網(wǎng)站的開(kāi)發(fā)規(guī)劃與設(shè)計(jì)方案，運(yùn)用網(wǎng)頁(yè)制作工具實(shí)施設(shè)計(jì)過(guò)程。三、學(xué)習(xí)方法建議認(rèn)真聆聽(tīng)并觀察老師的演示與講解，然后親自動(dòng)手實(shí)踐。實(shí)踐過(guò)程中遇到疑難先自己尋求方法解決，解決不了時(shí)積極地與同學(xué)討論或請(qǐng)教老師。四、學(xué)習(xí)過(guò)程和難點(diǎn)提示學(xué)習(xí)流程難點(diǎn)點(diǎn)撥1.了解網(wǎng)站開(kāi)發(fā)的過(guò)程在開(kāi)始動(dòng)手制作網(wǎng)站之前，我們先來(lái)了解一下開(kāi)發(fā)一個(gè)網(wǎng)站的過(guò)程。第一步是“網(wǎng)站的規(guī)劃”，是指：開(kāi)發(fā)網(wǎng)站前要對(duì)網(wǎng)站進(jìn)行需求分析或市場(chǎng)分析，確定網(wǎng)站的目的

2、和功能，并根據(jù)需要對(duì)網(wǎng)站開(kāi)發(fā)中的技術(shù)、內(nèi)容、費(fèi)用、測(cè)試、維護(hù)等工作做好充分的考慮。網(wǎng)站的規(guī)劃一般包括網(wǎng)站主題的確定，就是你的網(wǎng)站的主要內(nèi)容是什么。第二是工具的選擇，就是你打算用FrontPage還是Dreamweaver來(lái)設(shè)計(jì)頁(yè)面？對(duì)網(wǎng)頁(yè)圖片的處理你又打算使用哪種圖像處理工具？等等。最后還要明確分工和時(shí)間的安排。第二步是“網(wǎng)站的設(shè)計(jì)”。主要包括網(wǎng)站的結(jié)構(gòu)設(shè)計(jì)，就是你打算設(shè)置幾個(gè)大欄目，大欄目里又有幾個(gè)小欄目，這時(shí)最好用一張紙把欄目的名稱以及關(guān)系列出來(lái)。第二是網(wǎng)頁(yè)的版面設(shè)計(jì)，就是網(wǎng)頁(yè)的標(biāo)題、導(dǎo)航欄、正文等的位置如何擺放？文字與配圖的位置又如何協(xié)調(diào)？網(wǎng)站采用什么色調(diào)？等等。最后是交互設(shè)計(jì)，就是各頁(yè)

3、面間的跳轉(zhuǎn)關(guān)系。你必須保證瀏覽者從網(wǎng)站的任意位置可直接跳轉(zhuǎn)到各欄目的首頁(yè)或網(wǎng)站主頁(yè)。第三步是“網(wǎng)頁(yè)的制作”。就是依據(jù)網(wǎng)站開(kāi)發(fā)的規(guī)劃與設(shè)計(jì)方案，運(yùn)用網(wǎng)頁(yè)制作工具實(shí)施設(shè)計(jì)過(guò)程。第四步是“網(wǎng)站的發(fā)布與管理”，就是通過(guò)網(wǎng)站發(fā)布管理軟件把網(wǎng)頁(yè)文件傳送到WEB服務(wù)器，并開(kāi)始進(jìn)行對(duì)網(wǎng)站的維護(hù)與更新管理。第五步是“網(wǎng)站的評(píng)價(jià)”，網(wǎng)站制作完畢后，要及時(shí)了解網(wǎng)站的優(yōu)勢(shì)與不足，進(jìn)而完善網(wǎng)站的設(shè)計(jì)與制作，提高網(wǎng)站的質(zhì)量。我們對(duì)網(wǎng)站進(jìn)行評(píng)價(jià)，可以參考這四個(gè)指標(biāo)，就是“科學(xué)性、創(chuàng)造性、藝術(shù)性和技術(shù)性”。開(kāi)發(fā)網(wǎng)站時(shí)，最好能依據(jù)這五個(gè)步驟的順序進(jìn)行，不要只注重于第三步。因?yàn)橐?guī)劃和設(shè)計(jì)的過(guò)程做得越詳細(xì)，真正動(dòng)手制作的時(shí)候會(huì)越輕

4、松。2.分析示范網(wǎng)站的開(kāi)發(fā)規(guī)劃與設(shè)計(jì)方案我這里要做的示范網(wǎng)站主題叫做“暢游書(shū)?！保且粋€(gè)介紹書(shū)籍的網(wǎng)站。我們先來(lái)看看“暢游書(shū)海”這個(gè)網(wǎng)站的欄目設(shè)置。其中一級(jí)欄目有四個(gè)，分別是“文學(xué)”、“生活”、“人文社科”和“科普”，每個(gè)一級(jí)欄目里還細(xì)分有二級(jí)欄目。接著，來(lái)看看首頁(yè)的最終效果。我們看到整個(gè)頁(yè)面的色調(diào)接近海洋的顏色，是為了配合主題“暢游書(shū)?！?。頁(yè)面最上方是網(wǎng)站主題，主題的背景是一幅圖。主題下面是欄目導(dǎo)航。再往下，左邊是“特別推薦”，右邊是圖書(shū)展示區(qū)。最下面是制作者及版權(quán)信息。我們下面來(lái)用表格來(lái)劃分首頁(yè)的版面?，F(xiàn)在我們來(lái)看看首頁(yè)的表格情況。我們看到一個(gè)四行的大表格，其中第三行被分成了兩列。跟隨老師

5、的講解，認(rèn)真分析示范網(wǎng)站的開(kāi)發(fā)規(guī)劃與設(shè)計(jì)方案，以后自己實(shí)踐時(shí)可以參考。3.運(yùn)用網(wǎng)頁(yè)制作工具實(shí)施設(shè)計(jì)過(guò)程好，了解了首頁(yè)的布局之后，我們一起來(lái)動(dòng)手制作這個(gè)首頁(yè)。先打開(kāi)FrontPage。新建“空白網(wǎng)站”（設(shè)置網(wǎng)站的保存位置）。新建“index.htm”。打開(kāi)“index.htm”。設(shè)置頁(yè)面“屬性”（格式菜單/右鍵，設(shè)置標(biāo)題、背景色c0dcdb、文字色、超級(jí)鏈接顏色）。插入表格（4行1列，寬度980像素，單元格邊距、邊框粗細(xì)、填充間距全設(shè)為0）。第一行插入一張圖片。第二行插入表格（1行7列，寬度100%，單元格邊距、邊框粗細(xì)、填充間距全設(shè)為0）。選中所有七個(gè)單元格，設(shè)置高度為30像素，寬度為140像

6、素，背景色為7cbcc7。然后輸入欄目名稱：首頁(yè)、文學(xué)、生活、人文社科、科普。把第三行拆成兩列，一邊200像素，一邊780像素，高度都是345像素。在左邊插入表格（11行1列，寬度100%，單元格邊距、邊框粗細(xì)、填充間距全設(shè)為0 ，單元格高度30像素，背景白色），在第一行插入圖片，剩下10行輸入文字：紅樓夢(mèng)（曹雪芹） 平凡的世界（路遙）在右邊插入大圖片。最后一行高度50像素，背景色66B0BD，輸入作者、版權(quán)之類的說(shuō)明文字。保存文件，注意圖片的保存位置，然后F12預(yù)覽效果。制作其他頁(yè)面：“index.htm”“另存為”“wenxue.htm”，刪去不要的內(nèi)容，添加新的內(nèi)容即可。插入“超級(jí)鏈接”，并預(yù)覽效果。其他的頁(yè)面請(qǐng)同學(xué)們自己設(shè)計(jì)完成。跟隨老師的演示與講解，動(dòng)手把示范網(wǎng)站的首頁(yè)做出來(lái)，然后繼續(xù)完成其他頁(yè)面。熟悉了技術(shù)之后，再重新設(shè)計(jì)制作一個(gè)屬于自己的網(wǎng)站。4.上傳網(wǎng)站、評(píng)價(jià)網(wǎng)站網(wǎng)站全部做好之后，我們可以利用FTP工具軟件把網(wǎng)站傳到WEB服務(wù)器中