粵教版-選修三-第四章 網(wǎng)站的開發(fā)-4.1 網(wǎng)站的規(guī)劃【省一等獎(jiǎng)】

《網(wǎng)站的規(guī)劃》教學(xué)設(shè)計(jì)MicrosoftFrontPage，是美國(guó)微軟公司推出的一款網(wǎng)頁(yè)設(shè)計(jì)、制作、發(fā)布、管理的軟件。FrontPage由于良好的易用性，被認(rèn)為是優(yōu)秀的網(wǎng)頁(yè)初學(xué)者的工具。軟件特性：所見即所得結(jié)合了設(shè)計(jì)、程式碼、預(yù)覽三種模式于一體，也可一起顯示程式碼和設(shè)計(jì)檢視與MicrosoftOffice各軟件無(wú)縫連接良好的表格控制能力繼承了MicrosoftOffice產(chǎn)品系列的良好的易用性。我們以制作一個(gè)個(gè)人網(wǎng)站為例，簡(jiǎn)單介紹下首頁(yè)的制作過程。僅此拋磚引玉，希望同學(xué)們不要模仿，要有自己的創(chuàng)意！涉及工具及方法知識(shí)點(diǎn)——利用表格建網(wǎng)頁(yè)框架，合并、拆分單元格，插入圖片，單元格背景，首頁(yè)背景，Logo制作，插入flash、gif動(dòng)畫，保存為“姓名．htm”操作步驟：打開Frontpage，新建一個(gè)空白網(wǎng)頁(yè)。1．利用表格制作網(wǎng)頁(yè)框架——根據(jù)規(guī)劃好的首頁(yè)布局圖，選擇表格—插入表格，插入一個(gè)4行3列的表格（請(qǐng)按照自己的框架圖計(jì)算行列數(shù)）。并調(diào)整大小以充滿整個(gè)頁(yè)面。2．選擇最左上角單元格，插入—圖片——來自文件，選擇自己中意的Logo圖片，插入圖片，并調(diào)整到合適大小。3．選擇第一行第2、3個(gè)單元格，點(diǎn)擊鼠標(biāo)右鍵，執(zhí)行合并單元格。4．在合并后的單元格點(diǎn)擊鼠標(biāo)右鍵，選擇單元格屬性——選擇一幅背景圖片作為首頁(yè)橫幅（見下頁(yè)圖）。5．在橫幅上添加滾動(dòng)字幕。在橫幅上寫上文字—?dú)g迎來到我的小站，并設(shè)置字體大小、顏色、類型。選中字體（抹黑狀態(tài)），執(zhí)行插入——web組件。填寫文本及屬性（方向、速度、表現(xiàn)方式等）。注：動(dòng)態(tài)的字幕在設(shè)計(jì)界面看不到效果，需要切換到預(yù)覽界面方可看到效果。Flash動(dòng)畫和gif動(dòng)畫也是如此。6．制作導(dǎo)航欄。先將第二行第2列和第3列合并，然后點(diǎn)擊右鍵，選擇拆分單元格，將此單元格拆分成4列（根據(jù)自己的導(dǎo)航數(shù)量進(jìn)行拆分）。依次寫上你的欄目名稱，在第一個(gè)單元格寫上首頁(yè)。7．給導(dǎo)航欄設(shè)置背景。選中第二行導(dǎo)航欄，點(diǎn)擊鼠標(biāo)右鍵。在單元格屬性對(duì)話框中，選擇一種背景顏色。8．將第一列第3、4兩行合并，點(diǎn)擊鼠標(biāo)右鍵，選擇單元格屬性，設(shè)置垂直對(duì)齊方式為頂端對(duì)齊。這樣就可以避免出現(xiàn)空白區(qū)域。（其余單元格根據(jù)需要自己設(shè)置）。9．設(shè)置文章列表。選擇格式——項(xiàng)目符號(hào)和編號(hào)方式，選擇無(wú)項(xiàng)目格式列表。完成文章列表，右側(cè)具體欄目文章列表類似！注：各個(gè)單元格還可以自由選擇單元格背景！10．設(shè)置網(wǎng)頁(yè)背景和去掉表格邊框。去掉邊框根據(jù)自己需要設(shè)置最后效果圖。11．最后