dreamweaver第八章表格-資料下載頁(yè)
2025-06-30 16:06本頁(yè)面
【正文】 準(zhǔn)備為各個(gè)單元格添加背景。 ?。?）單擊“單元格背景URL”按鈕后，會(huì)彈出“選擇圖像源文件”對(duì)話框，在對(duì)話框的“查找范圍”列表里找到背景圖片，讀者可以打開(kāi)光盤(pán)文件：CDRom\CH08\\，點(diǎn)擊“確定”按鈕。這就為第一行各個(gè)單元格添加了背景圖?！ 。?）為第一行添加背景圖后可以看到，背景圖片超出了第一行的單元格，所以需要設(shè)置單元格的相關(guān)屬性。單擊第一行第一列單元格，在屬性面板中設(shè)置單元格的屬性，“寬”為240，“高”為59。然后在該單元格中輸入網(wǎng)頁(yè)名字，這里輸入“名香藝館”，設(shè)置CSS樣式并應(yīng)用于字體?！ 。?）在第一行第二列單元格內(nèi)單擊，在屬性面板中設(shè)置“水平”為居中對(duì)齊，“垂直”為底部，“寬”為260。輸入文本“名香 香藝”，設(shè)置CSS樣式時(shí)將字體顏色設(shè)為“999900”。這樣網(wǎng)頁(yè)的頂部就制作完成了?！ 。?）選取第三行的所有單元格，單擊屬性面板上的“行”下方的“合并所有單元格，使用跨度”按鈕，合并這一行。在這一行的單元格內(nèi)單擊，在屬性面板上設(shè)“高”為“背景色”為黑色。在單元格中輸入文本“前沿工作室 電話：01000000000”，然后在屬性面板中設(shè)置文本在單元格中“居中對(duì)齊”。設(shè)置CSS樣式，將大小設(shè)為“12”，顏色為白色。這樣網(wǎng)頁(yè)的底部就制作完成了?！ 。?0）選取第二行的所有單元格，合并單元格。單擊合并后的單元格，選擇菜單欄“插入→表格”命令，在第二行的單元格中插入一個(gè)1行2列的表格。選中該表格，在屬性面板中設(shè)“寬”、“高”都為100%，“間距”為0。這是網(wǎng)頁(yè)的中間主體部分?！ 。?1）單擊在第10步中插入的表格左列的單元格，在屬性面板中輸入“寬”為“20%”、“背景色”為淺灰色，設(shè)置“垂直”為“頂端”。然后選擇菜單欄“插入→表格”命令插入一個(gè)8行1列，寬度為100%的表格作為導(dǎo)航欄。 ?。?2）選中導(dǎo)航欄表格，“間距”設(shè)為0，各行的“高”分別交替地設(shè)為20。行高為“20”的單元格的背景色設(shè)為桔黃色?！ 。?3）此時(shí)發(fā)現(xiàn)行高為“6”的單元格的高度與可視高度不一致。此時(shí)單擊行高為“6”的單元格，然后點(diǎn)擊“代碼”按鈕，進(jìn)入代碼視圖?！ 。?4）在光標(biāo)閃爍處有“amp。nbsp。”代碼，刪除此代碼。同樣的方法把其他行高為“6”的單元格在代碼視圖中刪除“amp。nbsp。”代碼。這樣，行高的代碼高度就和可視高度就一致了?！ 。?5）在行高為“20”的單元格中輸入文本，設(shè)置并應(yīng)用CSS樣式，導(dǎo)航欄就制作完成了?！ 。?6）單擊第（10）步操作中嵌入的表格的右列單元格，選擇菜單欄“插入→圖像”命令，插入一張圖片，讀者可以打開(kāi)光盤(pán)文件：CDRom\CH08\\，按住鍵盤(pán)上的“Shift”鍵調(diào)整圖片的大小?！ 。?7）選中圖片，在屬性面板中設(shè)“對(duì)齊”為“左對(duì)齊”，使圖片與文本左對(duì)齊。然后輸入文本，并設(shè)計(jì)文本的CSS樣式?！ 。?8）按菜單欄“文件→保存”命令，保存文檔，預(yù)覽網(wǎng)頁(yè)效果?！ ?shí)踐與練習(xí)：對(duì)“成績(jī)單”表格排序 本例著重練習(xí)在Dreamweaver中創(chuàng)建表格，通過(guò)菜單“命令→排序表格”命令，以表格的某一列為基礎(chǔ)對(duì)表格進(jìn)行升序或降序排列?！ 。?）首先運(yùn)行程序Dreamweaver 8，選擇菜單欄“文件→新建”命令，創(chuàng)建新文檔?！ 。?）創(chuàng)建好新文檔之后，輸入標(biāo)題文本“成績(jī)單”，選中“成績(jī)單”文本，然后在屬性面板中設(shè)“粗體”，“文本顏色”為紅色，對(duì)齊方式為“居中對(duì)齊”。注意，這里的虛線框是DIV標(biāo)簽?！ 。?）在文本后面插入文本光標(biāo)，然后選擇菜單欄“插入→表格”命令，插入一個(gè)“行數(shù)”為5，“列數(shù)”為6，“表格寬度”為300，單位設(shè)為“像素”，單擊“確定”接鈕，嵌套一個(gè)新表格?！ 。?）選中嵌套表格，在屬性面板中設(shè)“間距”為“邊框”為0，點(diǎn)擊“背景顏色”右邊的小色塊，設(shè)置表格的背景色為桔黃色?！ 。?）在第一行的第一個(gè)單元格內(nèi)單擊鼠標(biāo)左鍵，確認(rèn)文本光標(biāo)在單元格內(nèi)閃爍，按住鼠標(biāo)向表格的右下角拖動(dòng)，直到所有的單元格被選中，在屬性面板上單擊“背景顏色”后的小色塊，將單元格的背景顏色設(shè)為白色。這樣就使表格成為桔黃色單線表格?！ 。?）單擊第一行第一個(gè)單元格，選擇菜單欄“插入→圖像”命令，插入一張圖片作為表格的分割線，讀者可以打開(kāi)光盤(pán)文件：CDRom\CH08\\。 提示：插入的“分割線”是先在繪圖軟件中根據(jù)表格的設(shè)計(jì)需要而繪制并保存的圖片。 ?。?）在第一行的第二個(gè)單元格內(nèi)輸入“數(shù)學(xué)”。按鍵盤(pán)上的“Tab”鍵，依次在各單元格中輸入文本，在屬性面板中將文本的對(duì)齊方式設(shè)為“居中對(duì)齊”?！ 。?）按鍵盤(pán)組合鍵“Ctrl+A”全選表格標(biāo)題和表格，按鍵盤(pán)組合鍵“Ctrl+C”復(fù)制表格標(biāo)題和表格，然后將文本光標(biāo)插入到該表格的后面，按鍵盤(pán)功能鍵“Enter”后，按鍵盤(pán)組合鍵“Ctrl+V”粘貼表格標(biāo)題和表格?！ 。?）此時(shí)會(huì)在文檔窗口中彈出一個(gè)“圖像描述（Alt文本）”對(duì)話框。在這里單擊“取消”按鈕即可?！ √崾荆喝绻x擇的表格中沒(méi)有插入圖片，在上述步驟中復(fù)制粘貼該表格時(shí)，就不會(huì)彈出“圖像描述（Alt文本）”對(duì)話框。因?yàn)樵贒reamweaver 8中復(fù)制粘貼圖片時(shí)，都會(huì)彈出該對(duì)話框?！ 。?）在第一個(gè)表格標(biāo)題“成績(jī)單”后單擊鼠標(biāo)左鍵，輸入“（以數(shù)學(xué)成績(jī)排序）”并選中它，然后在屬性面板中設(shè)置文本顏色為黑色。同樣方法在第二個(gè)表格標(biāo)題“成績(jī)單”后輸入并設(shè)置“（以英語(yǔ)成績(jī)排序）”。 ?。?0）選中第一個(gè)表格，即“以數(shù)學(xué)成績(jī)排序”的表格，選擇菜單欄“命令→排序表格”命令，彈出“排序表格”對(duì)話框?！ 。?1）在排序下拉列表中選列2，因?yàn)椤皵?shù)學(xué)”成績(jī)是在第二列，在順序中“按數(shù)字排序”“降序”。點(diǎn)擊“確定”銨鈕，表格就以“數(shù)學(xué)”成績(jī)降序排列了?！ 。?2）選中第二個(gè)表格，即“以英語(yǔ)成績(jī)排序”的表格，選擇菜單欄“命令→排序表格”命令。在“排序表格”對(duì)話框中，在排序下拉列表中選列3，因?yàn)椤坝⒄Z(yǔ)”成績(jī)是在第3列，在順序中選擇“按數(shù)字排序”、“降序”。點(diǎn)擊“確定”銨鈕，表格就以“英語(yǔ)”成績(jī)降序排列了?！ 。?3）然后選擇菜單欄“文件→保存”命令，保存文檔，預(yù)覽網(wǎng)頁(yè)效果。11 / 11
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號(hào)-1