初中八年級(jí)信息技術(shù)課件-最佳搭檔-應(yīng)用CSS樣式與層美化網(wǎng)頁(yè)_第1頁(yè)
初中八年級(jí)信息技術(shù)課件-最佳搭檔-應(yīng)用CSS樣式與層美化網(wǎng)頁(yè)_第2頁(yè)
初中八年級(jí)信息技術(shù)課件-最佳搭檔-應(yīng)用CSS樣式與層美化網(wǎng)頁(yè)_第3頁(yè)
初中八年級(jí)信息技術(shù)課件-最佳搭檔-應(yīng)用CSS樣式與層美化網(wǎng)頁(yè)_第4頁(yè)
初中八年級(jí)信息技術(shù)課件-最佳搭檔-應(yīng)用CSS樣式與層美化網(wǎng)頁(yè)_第5頁(yè)
已閱讀5頁(yè)，還剩15頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

最佳搭檔——應(yīng)用CSS樣式與層美化網(wǎng)頁(yè)任務(wù)導(dǎo)航目前，在Web設(shè)計(jì)和開(kāi)發(fā)技術(shù)領(lǐng)域，CSS和DIV是非常流行的新技術(shù)，堪稱(chēng)最佳搭檔，快捷控制網(wǎng)頁(yè)樣式和精確布局離不開(kāi)它們的完美配合。Dreamweaver提供了功能強(qiáng)大的CSS樣式表編輯工具，對(duì)于設(shè)計(jì)者來(lái)說(shuō)，它是個(gè)非常靈活的工具，可以用來(lái)一次對(duì)若干個(gè)文檔所有的樣式進(jìn)行處理，成倍地提高工作效率。本課，我們將學(xué)習(xí)CSS的基本知識(shí)，并且初步運(yùn)用CSS樣式表和APDiv層加工處理“校園內(nèi)外”欄目的頁(yè)面，完成效果如圖所示。1.通過(guò)“屬性檢查器”快速創(chuàng)建CSS樣式步驟1：選中“校園內(nèi)外”頁(yè)面的文本。步驟2：在“屬性檢查器”中單擊“大小”選項(xiàng)中的16，彈出“新建CSS規(guī)則”對(duì)話框，將此對(duì)話框設(shè)置如圖所示。這表示我們要對(duì)本頁(yè)面中所有段落標(biāo)簽進(jìn)行CSS規(guī)則的定義。此時(shí)，單擊“拆分”視圖按鈕，可以看到在<head>標(biāo)簽中增加了一段代碼，如圖所示，這就是這個(gè)CSS規(guī)則設(shè)置后生成的代碼。步驟3：取消對(duì)文本的選擇，單擊文本，使插入點(diǎn)在文本中閃爍，然后繼續(xù)在“屬性檢查器”中更改文本的顏色、字體、加粗、對(duì)齊方式等屬性如圖所示。此時(shí)對(duì)應(yīng)的CSS代碼如左圖所示，頁(yè)面在IE中瀏覽效果如右圖所示。2.通過(guò)“CSS樣式”面板創(chuàng)建和編輯樣式表步驟1：選擇“窗口”菜單，確保“CSS樣式”命令被勾選上，展開(kāi)“CSS樣式”面板。步驟2：?jiǎn)螕羧鐖D所示的P標(biāo)簽，它的規(guī)則包含的屬性將會(huì)顯示在面板中，可以看出，這些屬性和代碼是完全對(duì)應(yīng)的。步驟3：?jiǎn)螕簟癈SS樣式”面板底部的圖標(biāo)，彈出“p的CSS規(guī)則定義”對(duì)話框，我們要在這里繼續(xù)樣式表的修改，將Line-height參數(shù)設(shè)置為30px，表示設(shè)置行高為30px，如圖所示。步驟4：?jiǎn)螕簟癈SS樣式”面板底部的圖標(biāo)，新建樣式表。在彈出的“新建CSS規(guī)則”對(duì)話框中如圖設(shè)置，在“為CSS規(guī)則選擇上下文選擇器類(lèi)型”中選擇“類(lèi)（可應(yīng)用于任何HTML元素）”選項(xiàng)，在“選擇或輸入選擇器名稱(chēng)”文本框中輸入自定義樣式表名稱(chēng)ys0l，在“選擇定義規(guī)則的位置”中選擇“僅限該文檔”選項(xiàng)。步驟5：?jiǎn)螕簟按_定”按鈕，彈出“.ys0l的CSS規(guī)則定義”對(duì)話框，在“分類(lèi)”列表中選擇“區(qū)塊”選項(xiàng)，設(shè)置“首行文本縮進(jìn)”為30像素，如圖所示，然后單擊“確定”按鈕。步驟6：選中“校園內(nèi)外”頁(yè)面的3段正文文本，直接在“CSS樣式”面板中右擊選擇的樣式，在彈出的快捷菜單中執(zhí)行“套用”命令。保存后，在IE中預(yù)覽效果如圖所示。3.導(dǎo)出CSS樣式表步驟1：在“CSS樣式”面板中右擊樣式p，在彈出的快捷菜單中執(zhí)行“移動(dòng)CSS規(guī)則”命令，在彈出的“移至外部樣式表”對(duì)話框中選擇“新樣式表”，單擊“確定”按鈕，在彈出的“將樣式表文件另存為”對(duì)話框中設(shè)置文件名為xynw.css，保存在xynw文件夾下，然后單擊“保存”按鈕，CSS樣式導(dǎo)出完成，如圖所示。步驟2：在“CSS樣式”面板中右擊樣式.ys01，在彈出的快捷菜單中執(zhí)行“移動(dòng)CSS規(guī)則”命令，在彈出的“移至外部樣式表”對(duì)話框中進(jìn)行如圖所示的設(shè)置，單擊“確定”按鈕。用同樣的方法導(dǎo)出樣式.ys02，此時(shí)的“CSS樣式”面板如圖所示，在網(wǎng)頁(yè)效果沒(méi)有絲毫變化的同時(shí)將在<style>中的樣式移動(dòng)到了新建的樣式表文件xynw.css中。4.應(yīng)用樣式表文件步驟1：在“CSS樣式”面板中單擊底部的“附加樣式表”按鈕。步驟2：在彈出的“鏈接外部樣式表”對(duì)話框中設(shè)置外部樣式表的路徑和添加方式，如圖所示，單擊“確定”按鈕。這時(shí)就能夠在這個(gè)網(wǎng)頁(yè)中以“鏈接”的方式使用這個(gè)樣式表文件中定義好的樣式了，我們可以像使用在本頁(yè)創(chuàng)建的樣式一樣去加以應(yīng)用。5.層與樣式表的配合使用步驟1：打開(kāi)“野外拓展”頁(yè)面，鏈接需要的外部樣式表，對(duì)文本進(jìn)行美化。步驟2：在頁(yè)面靠下的位置，創(chuàng)建APDiv元素，將圖片ywtz2.gif放置其中，并調(diào)整層的大小。步驟3：將本APDiv層中的圖片用<marquee>制作滾動(dòng)字幕。步驟4：保存并測(cè)試網(wǎng)頁(yè)，觀察效果，體會(huì)層與CSS樣式表的配合的高效便捷，制作完成的頁(yè)面如圖所示。知識(shí)著陸1.CSS——層疊樣式表，是目前網(wǎng)頁(yè)制作過(guò)程中比較先進(jìn)的技術(shù)，它能輕松、有效地對(duì)頁(yè)面的整體布局、顏色、字體、鏈接、背景等效果實(shí)現(xiàn)精確的控制。2.創(chuàng)建樣式表有兩種常用的方法，一是使用“屬性檢查器”；二是使用“CSS樣式”面板。“CSS樣式”面板提供較多的功能，應(yīng)用起來(lái)也更加靈活。3.在頁(yè)面中，不僅可以使用從模板繼承的樣式，還可以使用自定義樣式甚至將樣式導(dǎo)出為樣式表文件，并鏈接或者導(dǎo)入其他頁(yè)面中繼續(xù)使用。4.通過(guò)APDiv層與樣式表的完美配合，網(wǎng)頁(yè)布局元素的精確控制

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論