初中八年級信息技術(shù)課件-開篇之作

第三課開篇之作

—基于表格的頁面布局任務(wù)導(dǎo)航

站點已經(jīng)創(chuàng)建成功，作為建站圖紙的網(wǎng)站規(guī)劃也設(shè)計完畢，現(xiàn)在我們就可以著手制作網(wǎng)站了。首先要完成的是網(wǎng)站的首頁。本課，我們把制作首頁需要的素材分類整理到站點中，然后用表格對首頁進行初步的頁面布局。制作完成的首頁效果如圖所示。1.打開站點

啟動DreamweaverCS5后，展開“文件”面板，可以看到創(chuàng)建好的站點會自動出現(xiàn)在“文件”面板中。如果有多個站點同時存在，則需要在“文件”面板中選擇需要的站點，如圖所示。2.創(chuàng)建網(wǎng)站首頁（1）整理素材制作首頁所需素材包括如圖所示的圖片（index.gif）和星光閃爍的Flash動畫（index.swf）。我們將素材按類型分別存放，圖片存放在文件夾images中，其他類型的素材存放到文件夾other中。

步驟1：創(chuàng)建文件夾。右擊“文件”面板中站點名“站點-安全自護我能行（D:\safe）”，在彈出的快捷菜單中執(zhí)行“新建文件夾”命令，然后將文件夾命名為images。步驟2：將首頁素材圖片index.gif，復(fù)制粘貼到images文件夾中。

步驟2：執(zhí)行“文件”→“保存”命令，在彈出的“另存為”對話框中將文件名修改為index.html，保存路徑無須更改，系統(tǒng)默認保存在D:\safe下，也就是網(wǎng)站的根目錄下，這是首頁的默認名稱和默認保存路徑。此時，“文件”面板顯示的網(wǎng)站結(jié)構(gòu)如圖所示。

（2）創(chuàng)建并保存首頁步驟1：執(zhí)行“文件”→“新建”命令，在彈出的“新建文檔”對話框中選擇“空白頁”標簽，在“頁面類型”列表框中選擇HTML選項，在“布局”列表中選擇“無”，然后單擊“創(chuàng)建”按鈕，DreamweaverCS5即建立了一個空白頁。3.對首頁進行初步布局

（1）為頁面添加背景色步驟1：單擊文檔窗口，使插入點在編輯區(qū)內(nèi)閃爍，然后單擊“屬性檢查器”的“頁面屬性”按鈕。步驟2：在彈出的“頁面屬性”對話框中單擊“分類”列表框中的“外觀CSS”選項，在窗口右側(cè)的“外觀CSS”項中找到“背景顏色”選項。此處既可以單擊色板選擇顏色，也可以直接輸入顏色數(shù)值，我們在文本框中輸入淺黃色的顏色數(shù)值#FFFF94。單擊“確定”按鈕，背景色設(shè)置完成。

（2）設(shè)置網(wǎng)頁標題并預(yù)覽網(wǎng)頁效果步驟1：在工具欄的“標題”文本框中輸入“安全自護我能行—首頁”。步驟2：執(zhí)行“文件”→“保存”命令，保存更改背景色和標題的操作。步驟3：執(zhí)行“文件”→“在瀏覽器中預(yù)覽”→IExplore命令進行預(yù)覽，或者直接按快捷鍵F12預(yù)覽，DreamweaverCS5將打開默認的瀏覽器IE，并在IE中顯示完成的網(wǎng)頁效果，如圖所示。(3)使用表格初步布局網(wǎng)頁步驟1：在文檔窗口中單擊，在頁面左上角放置插人點。執(zhí)行“插入”→“表格”命令，在彈出的“表格”對話框中進行如圖左所示的設(shè)置。設(shè)置完成后，一個2行1列的表格即出現(xiàn)在頁面中，如圖右所示。圖中綠色的線條和數(shù)字表示表格的寬度。

步驟2:單擊“標簽選擇器”中的<table>標簽，選中此表格，繼續(xù)在“屬性檢查器”中完成表格的其他設(shè)置，如填充、間距、對齊、邊框等，如圖所示。

步驟3:單擊“標簽選擇器”中的<table>標簽，選中此表格，再單擊工具欄上的按鈕，切換到拆分視圖，這時候代碼窗口顯示在左側(cè)、設(shè)計窗口顯示在右側(cè)，觀察左側(cè)的代碼窗口發(fā)現(xiàn)有一段代碼被選中，這就是和這個表格相關(guān)的代碼，我們將會在這里添加背景圖像，如圖所示。4.測試網(wǎng)頁

步驟1：執(zhí)行“文件”→“保存”命令，保存首頁。步驟2：按快捷鍵F12，在IE中預(yù)覽該網(wǎng)頁，效果如圖所示。知識著陸1.為了使站點目錄結(jié)構(gòu)清晰，方便管理，我們采用將網(wǎng)站使用的素材按類別分別存放，并且將不同鏈接等級的網(wǎng)頁分級存放的方式對站點結(jié)構(gòu)進行組織。

2.“文檔”工具欄中包含可以快速切換視圖的按鈕，還包含一些與查看文檔、在本地和遠程站點間傳輸文檔有關(guān)的常用命令和選項，使用“文檔”工具欄還可以更改網(wǎng)頁標題，并進行網(wǎng)頁預(yù)覽。

3.用表格設(shè)計網(wǎng)頁布局，可以使網(wǎng)頁看上去更加整齊。在設(shè)置表格屬性的時候，需要使用“標簽選擇器”來選中表格，然后在“屬性檢查器”中進行具體設(shè)置。有的時候我們需要切換到代碼視圖中進行代碼的編寫，如設(shè)置背景圖像、背景音樂等都需要用代碼進行具體的控制。創(chuàng)作天地

為網(wǎng)站再增加一個網(wǎng)頁，命名為exl.html，保存路徑設(shè)置為D:\safe\other，網(wǎng)頁標題為“表格練習(xí)”，網(wǎng)頁制作