使用表格布局網頁(I)

《使用表格布局網頁(I)》由會員上傳分享，免費在線閱讀，更多相關內容在教育資源-天天文庫。

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

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

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

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

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

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

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

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