《網(wǎng)頁設(shè)計(jì)》課件-5.3任務(wù)二 美化商品列表頁面

SAMPLE項(xiàng)目五使用CSS控制列表樣式任務(wù)描述——商品列表頁面結(jié)構(gòu)分析1技術(shù)引入——使用定義列表2新手試煉——制作縱向?qū)Ш讲藛?45.3任務(wù)二美化商品列表頁面任務(wù)實(shí)施——制作頁面中商品列表1任務(wù)描述——商品列表頁面結(jié)構(gòu)分析ABOUTME

接下來制作“關(guān)于我們”頁面中的文本內(nèi)容。頁面中一共包含6個(gè)DIV,頁面效果如圖所示。通過使用類樣式完成對(duì)頁面中文字的美化操作。2技術(shù)引入——使用定義列表ABOUTMECSS樣式除了其特殊性外，還具有繼承性和層疊性。1.繼承性在CSS語言中繼承并不那么復(fù)雜，簡(jiǎn)單地說就是將各個(gè)HTML標(biāo)簽看做一個(gè)個(gè)大容器，其中被包含的小容器繼承所包含它的大容器的風(fēng)格樣式。子標(biāo)簽還可以在父標(biāo)簽樣式風(fēng)格的基礎(chǔ)上再加以修改，產(chǎn)生新的樣式，而子標(biāo)簽的樣式風(fēng)格完全不會(huì)影響父標(biāo)簽。2.層疊性層疊就是指在同一個(gè)網(wǎng)頁中可以有多個(gè)CSS樣式存在，當(dāng)擁有相同特殊性的CSS樣式應(yīng)用在同一個(gè)元素時(shí)，根據(jù)前后順序，后定義的CSS樣式會(huì)被應(yīng)用，它是W3C組織批準(zhǔn)的一個(gè)輔助HTML設(shè)計(jì)的新特性，能夠保持整個(gè)HTML的統(tǒng)一外觀，可以由設(shè)計(jì)者在設(shè)置文本之前就指定整個(gè)文本的屬性，例如顏色、字體大小等，CSS樣式為設(shè)計(jì)制作網(wǎng)頁帶來了很大的靈活性。定義列表是一種比較特殊的列表形式，相對(duì)于有序列表和無序列表來說，應(yīng)用的較少。定義列表的<dl>標(biāo)簽是成對(duì)出現(xiàn)的，并且需要網(wǎng)頁設(shè)計(jì)者在代碼視圖中手動(dòng)添加。從<dl>開始到</dl>結(jié)束，列表中每個(gè)元素的標(biāo)題使用<dt>definitionterm</dt>，后面跟隨<dd>definitionterm</dd>用于描述列表中元素的內(nèi)容。ABOUTME01執(zhí)行“文件>打開”菜單命令，打開頁面“光盤\源文件\項(xiàng)目五\5.3.html”，頁面效果如圖所示。將光標(biāo)移至名為news的Div中，輸入如圖所示文字。練一練——制作復(fù)雜新聞列表頁面效果文字圖

ABOUTME02在源代碼視圖中為文字添加相應(yīng)的定義列表標(biāo)簽，如圖所示。切換到5-3.css文件中，創(chuàng)建名為#newsdt和#newsdd的CSS規(guī)則，如圖所示。練一練——制作復(fù)雜新聞列表ABOUTME03頁面中定義列表的效果如圖所示。執(zhí)行“文件>保存”菜單命令保存文件。按F12鍵即可在瀏覽器中預(yù)覽該頁面，效果如圖所示。練一練——制作復(fù)雜新聞列表3任務(wù)實(shí)施——制作頁面中商品列表ABOUTME01執(zhí)行“文件>打開”命令，將video1.html文件打開。在源代碼視圖中，將光標(biāo)移動(dòng)到opt后面，單擊“插入”面板上的Div按鈕，插入id為main-bg的div，如圖所示。在在video1.css中創(chuàng)建如圖所示樣式。ABOUTME02在main-bg中插入一個(gè)div，切換到video1.css中，創(chuàng)建如圖所示類樣式。并將該樣式指定給新建的div。繼續(xù)在div中插入一個(gè)新的div，修改文本內(nèi)容如圖所示。ABOUTME03在video1.css中創(chuàng)建如圖所示類樣式。并將樣式應(yīng)用到新建div，應(yīng)用效果如圖所示。ABOUTME04在前面兩個(gè)div后插入一個(gè)div，輸入文字內(nèi)容，如圖所示。在video1.css中創(chuàng)建如圖所示類樣式。ABOUTME05將新建樣式應(yīng)用到div上，頁面效果如圖所示。繼續(xù)在div后插入一個(gè)div，如圖所示。ABOUTME06在video1.css中創(chuàng)建如圖所示類樣式。應(yīng)用樣式后的頁面效果如圖所示。ABOUTME07光標(biāo)移動(dòng)到新建div內(nèi)，單擊“插入”面板上的image按鈕，將“源文件\項(xiàng)目五\images\temp6.jpg”圖片插入到頁面中，如圖所示。在源代碼中添加換行標(biāo)簽并輸入文字內(nèi)容，如圖所示。ABOUTME08完成后頁面效果如圖所示。繼續(xù)使用相同的方法制作其他項(xiàng)目，完成頁面效果。如圖所示。4新手試煉——制作縱向?qū)Ш讲藛蜛BOUTME

在網(wǎng)頁界面中，不僅僅只有橫向排列的導(dǎo)航菜單，為了使網(wǎng)頁界面結(jié)構(gòu)設(shè)計(jì)多樣化，很多時(shí)候也要求導(dǎo)航菜單能夠在垂直方向上顯示。在Dreamweaver中，我們可以通過設(shè)置CSS屬性輕松實(shí)現(xiàn)導(dǎo)航菜單的橫縱轉(zhuǎn)換。PPT模板下載：/moban/行業(yè)PPT模板：/hangye/節(jié)日PPT模板：/jieri/PPT素材下載：/sucai/PPT背景圖片：/beijing/PPT圖表下載：/tubiao/優(yōu)秀PPT下載：/xiazai/PPT教程：/powerpoint/Word教程：/word/Excel教程：/excel/資料下載：/ziliao/PPT課件下載：/kejian/范文下載：/fanwen/試卷下載：/shiti/教案下載：/jiaoan/字體下載：/ziti/

THANKS

本項(xiàng)目中