中職網(wǎng)頁制作基礎（Dreamweaver CS6）（第2版）項目三 網(wǎng)頁布局電子課件（）

(中職）網(wǎng)頁制作基礎（DreamweaverCS6）（第2版）項目三網(wǎng)頁布局電子課件（工信版）項目三網(wǎng)

頁

布

局項目目標（1）了解網(wǎng)頁布局設計的主要內(nèi)容；（2）掌握用表格布局網(wǎng)頁的方法；（3）掌握用Div+CSS布局網(wǎng)頁的方法。項目描述

本項目將通過3個任務來介紹網(wǎng)頁布局時要注意的主要內(nèi)容，以具體實例來說明如何利用表格和Div+CSS來布局網(wǎng)頁，比較兩種方法的區(qū)別。任務1使用表格布局頁面，任務2使用Div+CSS布局頁面，任務3通過對CSS的margin和float等屬性的設置，來實現(xiàn)頁面居中和多列布局。任務1認識網(wǎng)頁的實質(zhì)任務目標（1）掌握表格的創(chuàng)建和使用方法；（2）認識表格屬性、單元格屬性的設置及修改方法。任務描述

通過創(chuàng)建表格布局網(wǎng)頁，并設置表格和單元格屬性，學會添加行與列、拆分與合并單元格的方法，最后向表格中添加文本及圖像等對象。任務分析

在網(wǎng)頁布局方面，表格起著舉足輕重的作用，通過設置表格及單元格的屬性，對頁面中的元素進行準確定位，既能使頁面在形式上更加豐富多彩，又能對頁面進行更加合理的布局。本任務通過表格來布局網(wǎng)頁，通過本任務的學習，學生能掌握插入表格及設置表格屬性、編輯表格與單元格等知識。

操作步驟步驟1．啟動DreamweaverCS6，新建站點，新建HTML文檔。（1）雙擊桌面上的DreamweaverCS6圖標，啟動DreamweaverCS6。（2）選擇“站點”→“新建站點”命令，彈出“站點設置對象項目3”對話框，在“站點名稱”文本框中輸入“項目3”，“本地站點文件夾”中選擇“E:\素材\項目3\示例\”，單擊“保存”按鈕，新建站點“項目3”。操作步驟（3）選擇“文件”→“新建”命令，或按Ctrl+N組合鍵，彈出“新建文檔”對話框。（4）在左側欄中選擇“空白頁”選項，在“頁面類型”欄中選擇“HTML”選項，在“布局”欄中選擇“<無>”選項，單擊“創(chuàng)建”按鈕，新建一個默認名為“Untitled_1.html”的空白網(wǎng)頁。（5）選擇“文件”→“保存”命令，或按Ctrl+S組合鍵，彈出“另存為”對話框，設置文件名為“table.html”。操作步驟步驟2．創(chuàng)建表格。（1）在“文檔”窗口的“設計”視圖中單擊，使文本光標移動到需要插入表格的位置。（2）執(zhí)行以下操作之一，可彈出“表格”對話框。（3）彈出“表格”對話框，可以在其中設置表格的基本屬性，如行數(shù)、列數(shù)、表格寬度、邊框粗細等。這里設置表格為4行1列，表格寬度為400像素，邊框粗細為0像素。（4）設置完成后單擊“確定”按鈕。操作步驟步驟3．添加表格對象。（1）插入LOGO。（2）添加文本。（3）嵌套表格。步驟4．設置表格屬性。（1）選中表格。（2）設置整個表格的屬性。（3）設置列、行和單元格的屬性。操作步驟步驟5．表格的基本操作。（1）添加行或列。（2）調(diào)整表格。（3）刪除行、列。（4）合并單元格。（5）拆分單元格。知識鏈接

網(wǎng)頁布局的效果直接影響到網(wǎng)頁設計的質(zhì)量。在完成網(wǎng)站的規(guī)劃后，必須事先做好布局規(guī)劃，如LOGO應該設計為多大、Banner應該設計為多大、圖標應該設計多少等。1．頁面版式草圖的設計2．布局方案的選擇3．布局方案的細化4．布局技術的選擇5．頁面元素的確定拓展與提高

常用表格元素包括table（表格）元素、tr（行）元素、td（單元格）元素。

（a）基本表格程序代碼

（b）網(wǎng)頁效果試一試

啟動DreamweaverCS6，新建一個網(wǎng)頁，用表格設計網(wǎng)頁的布局，注意嵌套表格、合并和拆分單元格、調(diào)整單元格的顏色、調(diào)整行高列寬和對齊方式等。任務2使用Div+CSS布局頁面任務目標（1）掌握用Div布局頁面功能模塊的方法；（2）掌握用CSS對網(wǎng)頁外觀進行設置的方法。任務描述Div是HTML中最常用的塊元素，起到了分段分塊的作用，可用于布局頁面結構；CSS主要用于對頁面字體、顏色、背景等進行精確控制，從而對網(wǎng)頁的外觀進行布局。任務分析

傳統(tǒng)的表格布局網(wǎng)頁是通過大小不一的表格和表格嵌套來定位及布局網(wǎng)頁內(nèi)容的。本任務使用Div+CSS布局，即通過CSS定義大小不一的Div和Div嵌套來布局網(wǎng)頁。這種布局方式的網(wǎng)頁代碼簡潔，表現(xiàn)和內(nèi)容相分離，維護方便，能兼容更多的瀏覽器。

操作步驟步驟1．啟動DreamweaverCS6，打開站點，新建HTML文檔。（1）雙擊桌面上的DreamweaverCS6圖標，啟動DreamweaverCS6。（2）在“文件”面板中選擇已創(chuàng)建的站點“項目3，打開站點“項目3”。（3）選擇“文件”→“新建”命令，或按Ctrl+N組合鍵，彈出“新建文檔”對話框。（4）在左側欄中選擇“空白頁”選項，在“頁面類型”欄中選擇“HTML”選項，在“布局”欄中選擇“<無>”選項，單擊“創(chuàng)建”按鈕。新建一個默認名為“Untitled_1.html”的空白網(wǎng)頁。（5）選擇“文件”→“保存”命令，或按Ctrl+S組合鍵，彈出“另存為”對話框，設置文件名為“divcss.html”。操作步驟步驟2．插入Div元素，布局頁面。（1）在“文檔”窗口中，切換到“設計”視圖，執(zhí)行以下操作之一，即可彈出“插入Div標簽”對話框。（2）彈出“插入Div標簽”對話框，在“ID”文本框中輸入“container”。（3）將內(nèi)容“此處顯示id”container“的內(nèi)容”刪除，將光標移動到Div虛線框的內(nèi)部，在“插入”面板中選擇“插入Div標簽”選項，在“ID”文本框中輸入“header”，則在“container”Div中嵌套插入ID為“header”的Div標簽。切換到“拆分”視圖。（4）用同樣的方法，在“header”Div下面插入ID分別為“nav”“content”“footer”3個Div標簽。操作步驟步驟3．創(chuàng)建CSS樣式，設置頁面外觀。（1）設置網(wǎng)頁背景顏色。（2）設置外層Div的高度、寬度、邊框。（3）設置內(nèi)層4個Div的背景顏色、高度、邊框。步驟4．修改CSS樣式，改變頁面外觀。

修改Div“footer”的背景顏色與“header”的背景顏色一致，即背景顏色改為深藍色。（1）新建CSS后，樣式的名稱會在“CSS樣式”面板中列出。（2）修改Div“footer”的樣式，在“CSS樣式”面板中雙擊“#footer”樣式，即可彈出“footer的CSS規(guī)則定義”對話框，設置背景顏色為深藍色知識鏈接1．CSS的基本語法CSS是一系列格式規(guī)則，使用CSS樣式可以靈活控制網(wǎng)頁外觀，從精確的布局定位到特定的字體樣式，都可以使用CSS樣式來完成。2．常用的選擇器（1）標簽選擇器。（2）類選擇器。（3）ID選擇器。（4）包含選擇器。拓展與提高

傳統(tǒng)表格布局方式實際上是利用了表格元素具有的無邊框特性，表格布局的優(yōu)勢在于容易掌握，布局方便。但表格布局會生成大量難以閱讀和維護的代碼，大量樣式設計代碼混雜在表格、單元格中，使得可讀性大大降低，維護起來成本也相當高；此外，表格布局的網(wǎng)頁要等整個表格下載完畢后才能顯示所有內(nèi)容，所以表格布局瀏覽速度較慢。Div可以理解成一個塊，是一個比表格簡單的元素，在語法上只有<div></div>這樣簡單的定義。Div最大的好處就是樣式由CSS來控制。總之：（1）Div+CSS布局比表格布局節(jié)省頁面代碼，代碼結構更清晰明了。（2）Div+CSS的頁面對搜索引擎支持好，速度更快，能夠比表格更快速地顯示網(wǎng)站內(nèi)容。（3）Div+CSS布局使網(wǎng)站版面布局修改變得更簡單，因為版面代碼都寫在獨立的CSS文件中，這樣修改起來更方便，不像表格那樣要在頁面中修改很多信息。試一試

新建網(wǎng)頁文檔，嘗試使用Div+CSS設計網(wǎng)頁布局結構，效果參照本書素材“素材\項目3\試一試\3-2\shi3-2.html”。任務3Div+CSS頁面布局優(yōu)化任務目標（1）掌握用Div+CSS設計一列布局頁面的方法；（2）掌握用Div+CSS設計多列布局頁面的方法。任務描述

Div是塊級元素，塊級元素的顯著特點如下：每個塊級元素都是從一個新行開始顯示的，而且其后的元素也需另起一行顯示。本任務通過設置CSS樣式，使多個Div能并列顯示在一行中，以形成多種不同類型的網(wǎng)頁布局。任務分析

通過設置CSS樣式的margin屬性和float屬性，實現(xiàn)Div的頁面居中、兩列或多列布局。

操作步驟步驟1．需求分析。

公司接到客戶的業(yè)務咨詢，要建設上海企業(yè)網(wǎng)網(wǎng)站，經(jīng)過雙方不斷的接洽和了解，通過基本的可行性討論后，初步達成和制定了協(xié)議，進行了項目立項，并制作了一份完整的客戶需求說明書。步驟2．網(wǎng)站設計。（1）網(wǎng)站建設的目的和定位。（2）網(wǎng)站的整體風格和配色。（3）網(wǎng)站布局設計。（4）網(wǎng)站的欄目板塊規(guī)劃。操作步驟步驟3．具體開發(fā)。

按照網(wǎng)站的總體設計，收集并整理各種文字、圖片、聲音等素材。網(wǎng)頁設計師開始設計網(wǎng)站的整體形象和主頁。步驟4．網(wǎng)站整合。

網(wǎng)頁設計人員將HTML文檔傳給程序員，添加實際的程序代碼形成最終頁面，最后由程序員進行總體網(wǎng)站整合，保證網(wǎng)站正常運行。步驟5．網(wǎng)站測試。

網(wǎng)頁設計人員聯(lián)合網(wǎng)站編輯進行最終頁面的測試，包括死鏈、壞鏈、內(nèi)容圖片錯誤、錯位、兼容性等。步驟6．網(wǎng)站部署和發(fā)布。知識鏈接1．域名

域名是便于記憶和溝通的一組服務器的地址，它是由一組用點分隔的名稱組成的Internet上某一臺計算機或計算機組的名稱。2．LOGO