網(wǎng)頁設計與制作教程第6章--Div+CSS布局頁面課件

1、網(wǎng)頁設計與制作教程（HTML+CSS+JavaScript）第2版機械工業(yè)出版社第6章 Div+CSS布局頁面6.1 Div+CSS布局技術(shù)簡介6.1.1 Div+CSS布局的優(yōu)點采用Div+CSS布局方式的優(yōu)點如下： Div用于搭建網(wǎng)站結(jié)構(gòu)，CSS用于創(chuàng)建網(wǎng)站表現(xiàn)，將表現(xiàn)與內(nèi)容分離。 縮短了網(wǎng)站的改版時間。 強大的字體控制和排版能力，使設計者能夠更好的控制頁面布局。 使提高搜索引擎對網(wǎng)頁的索引效率。 用戶可以將許多網(wǎng)頁的風格格式同時更新。6.1 Div+CSS布局技術(shù)簡介6.1.2 嵌套的Div實現(xiàn)頁面排版Div標簽是可以被嵌套的，這種嵌套的Div主要用于實現(xiàn)更為復雜的頁面排版。下面以兩個示

2、例說明嵌套的Div之間的關(guān)系。【演練6-1】未嵌套的Div容器，本例文件的Div布局效果如圖6-1所示。【演練6-2】嵌套的Div容器，本例文件的Div布局效果如圖6-2所示。6.2 典型的CSS布局樣式6.2.1 兩列布局樣式頁面布局整體上分為上、中、下3個部分，即header區(qū)域、container區(qū)域和footer區(qū)域。其中的container又包含mainBox（主要內(nèi)容區(qū)域）和sideBox（側(cè)邊欄），布局示意圖如圖6-4所示。6.2 典型的CSS布局樣式6.2.1 兩列布局樣式這里以最經(jīng)典的三行兩列寬度固定布局為例講解最基礎的固定分欄布局?！狙菥?-3】三行兩列寬度固定布局。6.2

3、 典型的CSS布局樣式6.2.1 兩列布局樣式【演練6-4】使用高度自適應的方法進行三行兩列寬度固定布局。6.2 典型的CSS布局樣式6.2.2 三列布局樣式三列布局與兩列布局非常相似，在處理方式上可以利用兩列布局結(jié)構(gòu)的方式處理，如圖6-8所示的就是3個獨立的列組合而成的三列布局。6.2 典型的CSS布局樣式6.2.2 三列布局樣式1兩列定寬中間自適應的三列結(jié)構(gòu)【演練6-5】兩列定寬中間自適應的三列結(jié)構(gòu)。6.2 典型的CSS布局樣式6.2.2 三列布局樣式2三列自適應結(jié)構(gòu)【演練6-6】三列自適應結(jié)構(gòu)。三列自適應結(jié)構(gòu)的頁面效果如圖6-11所示。將瀏覽器窗口進行縮放，三列自適應寬度的效果，如圖6-

4、12所示。6.3 綜合案例制作光影世界最近活動局部頁面6.3.1 頁面布局規(guī)劃通過成熟的構(gòu)思與設計，光影世界最近活動局部頁面的頁面效果如圖6-13所示，頁面局部布局示意圖如圖6-14所示。6.3 綜合案例制作光影世界最近活動局部頁面6.3.2 頁面的制作過程1前期準備（1）欄目目錄結(jié)構(gòu)在欄目文件夾下創(chuàng)建文件夾images和css，分別用來存放圖像素材和外部樣式表文件。（2）頁面素材將本頁面需要使用的圖像素材存放在文件夾images下。（3）外部樣式表在文件夾css下新建一個名為style.css的樣式表文件。2制作頁面6.4 實訓制作家具商城產(chǎn)品明細局部頁面6.4.1 頁面布局規(guī)劃通過成熟的構(gòu)思與設計，家具商城產(chǎn)品明細局部內(nèi)容的頁面效果如圖6-15所示，頁面局部布局示意圖如圖6-16所示。6.4 實訓制作家具商城產(chǎn)品明細局部頁面6.4.2 頁面的制作過程1前期準備（1）欄目目錄結(jié)構(gòu)在欄目文件夾下創(chuàng)建文件夾images和css，分別用來存放圖像素材和外部樣式表文件。（2）頁面素材將本頁面需要使用的圖像素材存放在文件夾images下。（3）外部樣式表在文件夾css下新建一個名為style.css的樣式表文件。2制作頁面習題6習題61制作如