使用表格布局網(wǎng)頁(I)

《使用表格布局網(wǎng)頁(I)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、HunanRailwayProfessionalTechnologyCollege主講人：湖南鐵道職業(yè)技術(shù)學(xué)院　陳承歡《網(wǎng)頁設(shè)計(jì)與制作》教學(xué)課件教學(xué)單元9：使用表格布局網(wǎng)頁主要教學(xué)環(huán)節(jié)五、知識(shí)講解與操作示范一、課程引導(dǎo)二、明確知識(shí)技能目標(biāo)三、展示網(wǎng)頁瀏覽效果四、分析操作任務(wù)六、課堂模仿實(shí)踐七、疑難解析八、歸納總結(jié)九、布置習(xí)題（一）課程引導(dǎo)在第6單元中我們學(xué)會(huì)了如何在網(wǎng)頁中輸入文本，在第7單元中我們學(xué)會(huì)了如何在網(wǎng)頁中插入圖像。通常網(wǎng)頁中都包含了大量的文字和圖片。請(qǐng)瀏覽【網(wǎng)易】的主頁。網(wǎng)易的主頁中包含了大量的文字

2、和圖片，通過瀏覽我們發(fā)現(xiàn)這些文字和圖片布局合理，搭配協(xié)調(diào)。這些文字和圖片是通過什么方法布局的？本次課我們來學(xué)習(xí)使用表格布局網(wǎng)頁的方法。（二）明確知識(shí)技能目標(biāo)（1）學(xué)會(huì)添加表格、設(shè)置表格屬性。（2）掌握設(shè)置表格中行和列屬性的方法。（3）掌握拆分單元格，合并單元格的方法。（4）掌握在表格中輸入文字并定位的方法。（5）掌握在表格中插入圖像并定位的方法。（三）展示網(wǎng)頁瀏覽效果2．網(wǎng)頁布局與組成分析1．預(yù)覽網(wǎng)頁（1）本網(wǎng)頁為普通的上下型版式結(jié)構(gòu)，上面為一幅圖片，下面為左右型結(jié)構(gòu)，包括多幅圖片和幾段文字。（2）本網(wǎng)頁使用

3、了表格對(duì)圖片、文字進(jìn)行合理布局。（四）分析操作任務(wù)（1）在“長沙世界之窗”網(wǎng)站文件夾中“04表格布局”中創(chuàng)建命名為“04.html”的網(wǎng)頁，網(wǎng)頁的標(biāo)題為“長沙世界之窗的國際街”。（2）插入1張3行4列的表格，寬度設(shè)置為750像素。（3）拆分單元格，合并單元格。（4）設(shè)置表格以及行、列、單元格的屬性。（5）為單元格設(shè)置背景圖像。（6）在表格的不同單元格中插入多幅圖像。（7）在表格的單元格中輸入文字。（五）知識(shí)講解與操作示范（1）第一步：創(chuàng)建站點(diǎn)或切換站點(diǎn)啟動(dòng)Dreamweaver8，切換到“長沙世界之窗”站點(diǎn)。

4、如果該站點(diǎn)不存在，則新建一個(gè)名為“長沙世界之窗”的站點(diǎn)。第二步：創(chuàng)建子文件夾，準(zhǔn)備素材在站點(diǎn)下創(chuàng)建子文件夾“04表格布局”，在“04表格布局”文件夾中創(chuàng)建子文件夾“image”，并將所需圖像復(fù)制到該文件夾下。第三步：新建網(wǎng)頁且保存在Dreamweaver8主窗口中，單擊菜單【文件】→【新建】，打開“新建文檔”對(duì)話框，在“常規(guī)”選項(xiàng)卡中，“類別”列表框中選擇“基本頁”，“基本頁”列表框中選擇“HTML”，單擊【創(chuàng)建】按鈕，該站點(diǎn)下一個(gè)名為“Untitled-1”文檔便創(chuàng)建。單擊標(biāo)準(zhǔn)工具欄上的【保存】按鈕，打開“

5、另存為”對(duì)話框，保存位置為“04表格布局”，文件名為“04.html”，單擊【保存】按鈕，保存該網(wǎng)頁文檔。第四步：設(shè)置網(wǎng)頁的標(biāo)題在文檔工具欄的“標(biāo)題”文本框直接輸入文檔標(biāo)題“長沙世界之窗的國際街”即可。（五）知識(shí)講解與操作示范（2）第五步：插入表格1．打開網(wǎng)頁04.html，將光標(biāo)置于網(wǎng)頁文檔04.html第一行的最左端，在Dreamweaver8主窗口中，單擊菜單【插入】→【表格】2．對(duì)“表格”對(duì)話框中的各個(gè)參數(shù)進(jìn)行設(shè)置（1）在“行數(shù)”文本框中輸入“3”，在“列數(shù)”文本框中輸入“4”；（2）在“表格寬度”文

6、本框輸入“100”，其后的下拉列表框中選擇寬度的單位為“百分比”；（3）“邊框粗細(xì)”先設(shè)置為“1”，以后再設(shè)置為“0”；（4）“單元格邊距設(shè)置為2，單元格間距設(shè)置為3；（5）設(shè)置完成后單擊【確定】按鈕，一個(gè)3行4列的表格就插入到頁面了。第六步：選擇表格和表格元素在進(jìn)行表格操作之前，我們必須首先選定被操作的對(duì)象，對(duì)于表格而言，可以選定整個(gè)表格、單行、單列、多行、多列、連續(xù)或不連續(xù)的單元格。（五）知識(shí)講解與操作示范（3）第七步：設(shè)置表格及單元格的屬性（1）在“寬”文本框中輸入“750”，其右側(cè)的單位選擇“像素”；

7、（2）“邊框”文本框中輸入“1”，“填充”文本框中輸入“2”；（3）“間距”文本框中輸入“0”，對(duì)齊方式選擇“居中對(duì)齊”；（4）“邊框顏色”文本框中輸入“#000000”；（5）表格的”對(duì)齊“方式設(shè)置為”居中對(duì)齊“；（6）其他表格屬性保存原有設(shè)置或默認(rèn)值不變，設(shè)置結(jié)果如下圖所示。第八步：調(diào)整表格的結(jié)構(gòu)將圖中“A”、“B”、“C”、“D”四個(gè)單元格合并，將圖中“I”、“J”、“K”、“L”四個(gè)單元格合并。（五）知識(shí)講解與操作示范（4）第九步：插入嵌套表格在圖中的“E”單元格中插入一張7行1列的表格，在“G”單元

8、格中插入一張5行3列的表格為表格單元格“G”設(shè)置背景圖像。將單元格G的”垂直“對(duì)齊方式設(shè)置為”頂端“（注意按住Ctrl鍵選中單元格）第十步：在表格中輸入文本和插入圖像（1）在表格單元格“ABCD”中插入一幅較大的圖像。（2）在表格單元格“E2”、“E4”、“E6”中各插入一幅較小的圖像。（3）在表格單元格“G1”、“G3”、“G5”中分別插入小圖像和輸入文本。第十一步：設(shè)置文本、圖像和表格的屬性（1