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

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

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

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

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

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

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