【任務(wù)5-4】制作以表格布局的展示千島湖旅游景點的網(wǎng)課件1

網(wǎng)頁設(shè)計與制作任務(wù)驅(qū)動教程

（第3版）網(wǎng)頁設(shè)計與制作任務(wù)驅(qū)動教程2單元5制作包含列表和表格的網(wǎng)頁【任務(wù)5-4】制作以表格布局的展示千島湖旅游景點的網(wǎng)頁2單元5制作包含列表和表格的網(wǎng)頁【任務(wù)5-4】制作以表格3【任務(wù)描述】【任務(wù)5-4-1】插入表格1并設(shè)置其屬性（1）創(chuàng)建并打開網(wǎng)頁0501.html。（2）插入1個2行1列的表格1，且設(shè)置其屬性：寬為880，邊框為1，填充、間距為0，對齊方式為居中對齊。3【任務(wù)描述】【任務(wù)5-4-1】插入表格1并設(shè)置其屬性（1）4【任務(wù)實施】1．創(chuàng)建文件夾與網(wǎng)頁文檔0504.html在站點“單元5”中創(chuàng)建文件夾“task05-4”，在該文件夾中創(chuàng)建子文件夾“CSS”。在文件夾“task05-4”中創(chuàng)建網(wǎng)頁文檔0504.html，雙擊網(wǎng)頁文檔0501.html，打開該網(wǎng)頁，然后將光標(biāo)置于頁面的起始位置。4【任務(wù)實施】1．創(chuàng)建文件夾與網(wǎng)頁文檔0504.html52．通過“表格”對話框插入表格1在DreamweaverCC主界面中，選擇命令【插入】→【表格】，彈出【表格】對話框。（1）在【表格】對話框“行數(shù)”文本框中輸入“2”，在“列數(shù)”文本框中輸入“1”。（2）在“表格寬度”文本框輸入“880”，其后的下拉列表框中選擇寬度的單位為“像素”。52．通過“表格”對話框插入表格16（3）在“邊框粗細(xì)”文本框中指定表格邊框的寬度，這里為了便識別表格邊框，暫設(shè)置邊框?qū)挾葹?，以后再設(shè)置為0。其他參數(shù)暫保持其默認(rèn)值不變。如圖5-16所示。圖5-16插入表格1時的【表格】對話框6（3）在“邊框粗細(xì)”文本框中指定表格邊框的寬度，這里為了便7（4）設(shè)置完成后單擊【確定】按鈕，1個2行1列的表格便插入到頁面。所插入表格1的HTML代碼如下所示：<tablewidth="880"border="1"cellspacing="0"cellpadding="0"><tr><thscope="col"> </th></tr><tr><td> </td></tr></table>（5）保存網(wǎng)頁中所插入的表格1。7（4）設(shè)置完成后單擊【確定】按鈕，1個2行1列的表格便插入82．設(shè)置表格1的屬性（1）選擇所插入的表格1用鼠標(biāo)指針指向表格邊框線，當(dāng)鼠標(biāo)光標(biāo)變?yōu)?/p>

形狀時單擊鼠標(biāo)左鍵選中整個表格。82．設(shè)置表格1的屬性9（2）通過表格的【屬性】面板設(shè)置其屬性在表格的【屬性】面板中對齊方式選擇“居中對齊”，表格的屬性更改后，表格【屬性】面板如圖5-17所示。圖5-17設(shè)置4行3列表格1的屬性（3）保存網(wǎng)頁中表格的屬性設(shè)置9（2）通過表格的【屬性】面板設(shè)置其屬性圖5-17設(shè)置410【任務(wù)描述】【任務(wù)5-4-2】設(shè)置表格1單元格的

背景圖像（1）設(shè)置表格1第1行和第2行單元格的背景圖像為bg01.gif。（2）設(shè)置表格1第1行和第2行單元格的水平對齊方式為“居中對齊”，垂直對齊方式為“居中”。（3）設(shè)置表格1第1行的行高為35像素，第3行的行高為30像素。10【任務(wù)描述】【任務(wù)5-4-2】設(shè)置表格1單元格的（1）設(shè)11【任務(wù)實施】1．創(chuàng)建文件夾與網(wǎng)頁文檔0504.html在站點“單元5”中創(chuàng)建文件夾“task05-4”，在該文件夾中創(chuàng)建子文件夾“CSS”。在文件夾“task05-4”中創(chuàng)建網(wǎng)頁文檔0504.html，雙擊網(wǎng)頁文檔0501.html，打開該網(wǎng)頁，然后將光標(biāo)置于頁面的起始位置。11【任務(wù)實施】1．創(chuàng)建文件夾與網(wǎng)頁文檔0504.html12（1）將光標(biāo)置于表格1第1行的單元格中，在DreamweaverCC的主窗體【文檔】工具欄中單擊【代碼】按鈕，切換到“代碼”編輯窗口，在表格1第1行的單元格標(biāo)簽“<td>”中添加以下設(shè)置背景圖像的代碼：background="images/bg01.gif"。（2）設(shè)置該單元格的水平對齊方式為“居中對齊”，垂直對齊方式為“居中”，選中“不換行”復(fù)選框，其他屬性保持其默認(rèn)值。12（1）將光標(biāo)置于表格1第1行的單元格中，在Dreamwe13（3）將鼠標(biāo)指針指向表格1的第1行的左邊線，當(dāng)鼠標(biāo)指針變成1個黑色箭頭形狀時，單擊鼠標(biāo)左鍵即可選中該行。在表格行的【屬性】面板的“高”文本框中輸入行的高度“35”，單位默認(rèn)為“像素”。按照同樣的方式，設(shè)置第2行單元格的背景圖像為bg01.gif，行高為“30像素”，其他屬性設(shè)置與第1行單元格相同。保存表格1單元格和行的屬性設(shè)置。13（3）將鼠標(biāo)指針指向表格1的第1行的左邊線，當(dāng)鼠標(biāo)指針變14【任務(wù)描述】【任務(wù)5-4-3】在表格1的單元格中

輸入文本（1）在表格1的第1行輸入所需要的文本，用于設(shè)置超鏈接。（2）在表格1的第2行輸入所需要的文本，用于設(shè)置文字滾動效果。（3）將第2行中的文字設(shè)置為滾動效果。14【任務(wù)描述】【任務(wù)5-4-3】在表格1的單元格中（1）在15【任務(wù)實施】（1）在表格1各單元格輸入必要的文字在表格1第1行的單元格中輸入“首頁|千島湖梅峰觀島|千島湖五龍島|千島湖猴島|千島湖鴕鳥島|千島湖森林氧吧|上西村瀑布群”，由于該單元格的屬性事先已設(shè)置好，我們發(fā)現(xiàn)輸入的文本在水平方向和垂直方向都會自動居中對齊。15【任務(wù)實施】（1）在表格1各單元格輸入必要的文字16在所插入表格第2行的單元格中輸入“千島湖旅游景點：千島湖梅峰觀島|千島湖五龍島|千島湖猴島|千島湖鴕鳥島|千島湖森林氧吧|上西村瀑布群|千島湖屏溪竹筏漂流|千島湖三潭島”。保存網(wǎng)頁中所輸入的文本及其屬性設(shè)置。16在所插入表格第2行的單元格中輸入“千島湖旅游景點：千島湖17（2）將第2行中的文字設(shè)置為滾動效果在【文檔】工具欄中單擊【代碼】按鈕，切換到“代碼”編輯窗口，將光標(biāo)置于第2行單元格中文字“千島湖旅游景點”的左側(cè)，輸入“<”，此時會自動出現(xiàn)標(biāo)簽列表框，在該列表框中雙擊選取“marquee”，如圖5-19所示。接著通過鍵盤輸入以下HTML代碼。圖5-19DreamweaverCC的標(biāo)簽列表框17（2）將第2行中的文字設(shè)置為滾動效果圖5-19Dre18<marqueeonmouseover="this.stop()"onmouseout="this.start()"scrollamount="2"

scrolldelay="90"direction="left"width="98%"height="16">然后將光標(biāo)置于第2行單元格中文字“千島湖三潭島”的右側(cè)，輸入HTML代碼“</marquee>”，這樣滾動文本效果的HTML代碼便輸入完成，保存所輸入的HTML代碼。18<marqueeonmouseover="this.s19將第1個表格的“邊框”設(shè)置為“0”，以保證各個表格寬度的一致性。保存表格中的滾動文字的設(shè)置。按F12瀏覽表格1的效果，如圖5-20所示。第2行單元格的文本由右向左滾動。圖5-20表格1及其中的SWF動畫和文本的瀏覽效果19將第1個表格的“邊框”設(shè)置為“0”，以保證各個表格寬度的快樂學(xué)習(xí)、高效學(xué)習(xí)快樂學(xué)習(xí)、高效學(xué)習(xí)網(wǎng)頁設(shè)計與制作任務(wù)驅(qū)動教程

（第3版）網(wǎng)頁設(shè)計與制作任務(wù)驅(qū)動教程22單元5制作包含列表和表格的網(wǎng)頁【任務(wù)5-4】制作以表格布局的展示千島湖旅游景點的網(wǎng)頁2單元5制作包含列表和表格的網(wǎng)頁【任務(wù)5-4】制作以表格23【任務(wù)描述】【任務(wù)5-4-1】插入表格1并設(shè)置其屬性（1）創(chuàng)建并打開網(wǎng)頁0501.html。（2）插入1個2行1列的表格1，且設(shè)置其屬性：寬為880，邊框為1，填充、間距為0，對齊方式為居中對齊。3【任務(wù)描述】【任務(wù)5-4-1】插入表格1并設(shè)置其屬性（1）24【任務(wù)實施】1．創(chuàng)建文件夾與網(wǎng)頁文檔0504.html在站點“單元5”中創(chuàng)建文件夾“task05-4”，在該文件夾中創(chuàng)建子文件夾“CSS”。在文件夾“task05-4”中創(chuàng)建網(wǎng)頁文檔0504.html，雙擊網(wǎng)頁文檔0501.html，打開該網(wǎng)頁，然后將光標(biāo)置于頁面的起始位置。4【任務(wù)實施】1．創(chuàng)建文件夾與網(wǎng)頁文檔0504.html252．通過“表格”對話框插入表格1在DreamweaverCC主界面中，選擇命令【插入】→【表格】，彈出【表格】對話框。（1）在【表格】對話框“行數(shù)”文本框中輸入“2”，在“列數(shù)”文本框中輸入“1”。（2）在“表格寬度”文本框輸入“880”，其后的下拉列表框中選擇寬度的單位為“像素”。52．通過“表格”對話框插入表格126（3）在“邊框粗細(xì)”文本框中指定表格邊框的寬度，這里為了便識別表格邊框，暫設(shè)置邊框?qū)挾葹?，以后再設(shè)置為0。其他參數(shù)暫保持其默認(rèn)值不變。如圖5-16所示。圖5-16插入表格1時的【表格】對話框6（3）在“邊框粗細(xì)”文本框中指定表格邊框的寬度，這里為了便27（4）設(shè)置完成后單擊【確定】按鈕，1個2行1列的表格便插入到頁面。所插入表格1的HTML代碼如下所示：<tablewidth="880"border="1"cellspacing="0"cellpadding="0"><tr><thscope="col"> </th></tr><tr><td> </td></tr></table>（5）保存網(wǎng)頁中所插入的表格1。7（4）設(shè)置完成后單擊【確定】按鈕，1個2行1列的表格便插入282．設(shè)置表格1的屬性（1）選擇所插入的表格1用鼠標(biāo)指針指向表格邊框線，當(dāng)鼠標(biāo)光標(biāo)變?yōu)?/p>

形狀時單擊鼠標(biāo)左鍵選中整個表格。82．設(shè)置表格1的屬性29（2）通過表格的【屬性】面板設(shè)置其屬性在表格的【屬性】面板中對齊方式選擇“居中對齊”，表格的屬性更改后，表格【屬性】面板如圖5-17所示。圖5-17設(shè)置4行3列表格1的屬性（3）保存網(wǎng)頁中表格的屬性設(shè)置9（2）通過表格的【屬性】面板設(shè)置其屬性圖5-17設(shè)置430【任務(wù)描述】【任務(wù)5-4-2】設(shè)置表格1單元格的

背景圖像（1）設(shè)置表格1第1行和第2行單元格的背景圖像為bg01.gif。（2）設(shè)置表格1第1行和第2行單元格的水平對齊方式為“居中對齊”，垂直對齊方式為“居中”。（3）設(shè)置表格1第1行的行高為35像素，第3行的行高為30像素。10【任務(wù)描述】【任務(wù)5-4-2】設(shè)置表格1單元格的（1）設(shè)31【任務(wù)實施】1．創(chuàng)建文件夾與網(wǎng)頁文檔0504.html在站點“單元5”中創(chuàng)建文件夾“task05-4”，在該文件夾中創(chuàng)建子文件夾“CSS”。在文件夾“task05-4”中創(chuàng)建網(wǎng)頁文檔0504.html，雙擊網(wǎng)頁文檔0501.html，打開該網(wǎng)頁，然后將光標(biāo)置于頁面的起始位置。11【任務(wù)實施】1．創(chuàng)建文件夾與網(wǎng)頁文檔0504.html32（1）將光標(biāo)置于表格1第1行的單元格中，在DreamweaverCC的主窗體【文檔】工具欄中單擊【代碼】按鈕，切換到“代碼”編輯窗口，在表格1第1行的單元格標(biāo)簽“<td>”中添加以下設(shè)置背景圖像的代碼：background="images/bg01.gif"。（2）設(shè)置該單元格的水平對齊方式為“居中對齊”，垂直對齊方式為“居中”，選中“不換行”復(fù)選框，其他屬性保持其默認(rèn)值。12（1）將光標(biāo)置于表格1第1行的單元格中，在Dreamwe33（3）將鼠標(biāo)指針指向表格1的第1行的左邊線，當(dāng)鼠標(biāo)指針變成1個黑色箭頭形狀時，單擊鼠標(biāo)左鍵即可選中該行。在表格行的【屬性】面板的“高”文本框中輸入行的高度“35”，單位默認(rèn)為“像素”。按照同樣的方式，設(shè)置第2行單元格的背景圖像為bg01.gif，行高為“30像素”，其他屬性設(shè)置與第1行單元格相同。保存表格1單元格和行的屬性設(shè)置。13（3）將鼠標(biāo)指針指向表格1的第1行的左邊線，當(dāng)鼠標(biāo)指針變34【任務(wù)描述】【任務(wù)5-4-3】在表格1的單元格中

輸入文本（1）在表格1的第1行輸入所需要的文本，用于設(shè)置超鏈接。（2）在表格1的第2行輸入所需要的文本，用于設(shè)置文字滾動效果。（3）將第2行中的文字設(shè)置為滾動效果。14【任務(wù)描述】【任務(wù)5-4-3】在表格1的單元格中（1）在35【任務(wù)實施】（1）在表格1各單元格輸入必要的文字在表格1第1行的單元格中輸入“首頁|千島湖梅峰觀島|千島湖五龍島|千島湖猴島|千島湖鴕鳥島|千島湖森林氧吧|上西村瀑布群”，由于該單元格的屬性事先已設(shè)置好，我們發(fā)現(xiàn)輸入的文本在水平方向和垂直方向都會自動居中對齊。15【任務(wù)實施】（1）在表格1各單元格輸入必要的文字36在所插入表格第2行的單元格中輸入“千島湖旅游景點：千島湖梅峰觀島|千島湖五龍島|千島湖猴島|千島湖鴕鳥島|千島湖森林氧吧|上西村瀑布群|千島湖屏溪竹筏漂流|千島湖三潭島”。保存網(wǎng)頁中所輸入的文本及其屬性設(shè)置。16在所插入表格第2行的單