初中九年級(jí)信息技術(shù)制作“車展介紹”網(wǎng)頁

制作“車展介紹”網(wǎng)頁上一節(jié)我們介紹了使用表格來設(shè)置頁面的方法，由于表格本來就不是用來創(chuàng)建頁面布局的，而是用來顯示列表式數(shù)據(jù)的，所以在規(guī)劃較復(fù)雜的頁面時(shí)，使用傳統(tǒng)的表格可能并不容易。為了簡(jiǎn)化使用表格進(jìn)行頁面設(shè)置的過程，Dreamweaver提供了布局視圖。本節(jié)我們將使用布局視圖表格來快速制作如圖所示的“車展介紹”這個(gè)網(wǎng)頁。在使用布局視圖表格之前，必須切換到布局視圖模式下。單擊“插入”面板中如圖所示的“布局視圖”按鈕，可以切換到布局視圖模式下。一、使用布局視圖表格這時(shí)“插入”面板上布局欄中的“繪制布局單元格”和“繪制布局表格”按鈕顏色加深，表明可以使用視圖布局表格了。使用布局表格的最大好處就是可以隨意改變表格及單元格的位置，而且可以很容易地繪制出普通表格難以繪制的復(fù)雜表格。二、制作“車展介紹”網(wǎng)頁做一做請(qǐng)使用布局表格來制作一個(gè)介紹汽車車展的網(wǎng)頁。第一步：新建一個(gè)空白網(wǎng)頁，設(shè)置網(wǎng)頁標(biāo)題為“車站總體介紹”，最后以“paste”為文件名存盤。第二步：?jiǎn)螕簟安迦搿泵姘逯械摹袄L制布局單元格”按鈕，移動(dòng)光標(biāo)到頁面的左上方，拖動(dòng)鼠標(biāo)，插入一個(gè)布局單元格。操作步驟第三步：移動(dòng)光標(biāo)到布局單元格中，單擊“插入”面板的“插入圖片”按鈕，在單元格中插入如圖所示的圖片。第四步：?jiǎn)螕簟皹?biāo)簽選擇器”中的表格標(biāo)簽{table}，在“屬性”面板中設(shè)置表格寬度為自動(dòng)伸展，背景顏色為黑色（#333333）。第五步：在單元格的右邊再插入一個(gè)布局單元格，其中放置如圖所示的文字資料，設(shè)置文字字體為宋體、字號(hào)為2號(hào)，字體顏色為白色。第六步：使用同樣的方法在布局表格中放置其他幾個(gè)單元格，并且插入相應(yīng)的內(nèi)容，結(jié)果如圖所示。在布局視圖中，既可用表格作為底層結(jié)構(gòu)來設(shè)計(jì)頁面，又能避免使用表格的傳統(tǒng)缺陷。例如，可以在頁面上很容易地畫單元格（表格單元格），然后定制和移動(dòng)單元格到你需要的地方。布局可以有固定的寬度，也可以擴(kuò)展到占滿瀏覽器窗口。單擊插入面板中的“標(biāo)準(zhǔn)視圖”按鈕，將布局視圖方式切換到標(biāo)準(zhǔn)視圖方式，這時(shí)的布局表格就自動(dòng)轉(zhuǎn)換成一般的表格了。說明在布