版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
最佳搭檔——應(yīng)用CSS樣式與層美化網(wǎng)頁任務(wù)導(dǎo)航目前，在Web設(shè)計(jì)和開發(fā)技術(shù)領(lǐng)域，CSS和DIV是非常流行的新技術(shù)，堪稱最佳搭檔，快捷控制網(wǎng)頁樣式和精確布局離不開它們的完美配合。Dreamweaver提供了功能強(qiáng)大的CSS樣式表編輯工具，對(duì)于設(shè)計(jì)者來說，它是個(gè)非常靈活的工具，可以用來一次對(duì)若干個(gè)文檔所有的樣式進(jìn)行處理，成倍地提高工作效率。本課，我們將學(xué)習(xí)CSS的基本知識(shí)，并且初步運(yùn)用CSS樣式表和APDiv層加工處理“校園內(nèi)外”欄目的頁面，完成效果如圖所示。1.通過“屬性檢查器”快速創(chuàng)建CSS樣式步驟1：選中“校園內(nèi)外”頁面的文本。步驟2：在“屬性檢查器”中單擊“大小”選項(xiàng)中的16，彈出“新建CSS規(guī)則”對(duì)話框，將此對(duì)話框設(shè)置如圖所示。這表示我們要對(duì)本頁面中所有段落標(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代碼如左圖所示，頁面在IE中瀏覽效果如右圖所示。2.通過“CSS樣式”面板創(chuàng)建和編輯樣式表步驟1：選擇“窗口”菜單，確?！癈SS樣式”命令被勾選上，展開“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ī)則選擇上下文選擇器類型”中選擇“類（可應(yīng)用于任何HTML元素）”選項(xiàng)，在“選擇或輸入選擇器名稱”文本框中輸入自定義樣式表名稱ys0l，在“選擇定義規(guī)則的位置”中選擇“僅限該文檔”選項(xiàng)。步驟5：?jiǎn)螕簟按_定”按鈕，彈出“.ys0l的CSS規(guī)則定義”對(duì)話框，在“分類”列表中選擇“區(qū)塊”選項(xiàng)，設(shè)置“首行文本縮進(jìn)”為30像素，如圖所示，然后單擊“確定”按鈕。步驟6：選中“校園內(nèi)外”頁面的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)頁效果沒有絲毫變化的同時(shí)將在<style>中的樣式移動(dòng)到了新建的樣式表文件xynw.css中。4.應(yīng)用樣式表文件步驟1：在“CSS樣式”面板中單擊底部的“附加樣式表”按鈕。步驟2：在彈出的“鏈接外部樣式表”對(duì)話框中設(shè)置外部樣式表的路徑和添加方式，如圖所示，單擊“確定”按鈕。這時(shí)就能夠在這個(gè)網(wǎng)頁中以“鏈接”的方式使用這個(gè)樣式表文件中定義好的樣式了，我們可以像使用在本頁創(chuàng)建的樣式一樣去加以應(yīng)用。5.層與樣式表的配合使用步驟1：打開“野外拓展”頁面，鏈接需要的外部樣式表，對(duì)文本進(jìn)行美化。步驟2：在頁面靠下的位置，創(chuàng)建APDiv元素，將圖片ywtz2.gif放置其中，并調(diào)整層的大小。步驟3：將本APDiv層中的圖片用<marquee>制作滾動(dòng)字幕。步驟4：保存并測(cè)試網(wǎng)頁，觀察效果，體會(huì)層與CSS樣式表的配合的高效便捷，制作完成的頁面如圖所示。知識(shí)著陸1.CSS——層疊樣式表，是目前網(wǎng)頁制作過程中比較先進(jìn)的技術(shù)，它能輕松、有效地對(duì)頁面的整體布局、顏色、字體、鏈接、背景等效果實(shí)現(xiàn)精確的控制。2.創(chuàng)建樣式表有兩種常用的方法，一是使用“屬性檢查器”；二是使用“CSS樣式”面板。“CSS樣式”面板提供較多的功能，應(yīng)用起來也更加靈活。3.在頁面中，不僅可以使用從模板繼承的樣式，還可以使用自定義樣式甚至將樣式導(dǎo)出為樣式表文件，并鏈接或者導(dǎo)入其他頁面中繼續(xù)使用。4.通過APDiv層與樣式表的完美配合，網(wǎng)頁布局元素的精確控制
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 聯(lián)合辦學(xué)協(xié)議書
- 建筑設(shè)計(jì)合同范本
- 水電暖安裝工程分包合同
- 中承式系桿拱施工安全操作規(guī)程模版（2篇）
- 學(xué)校借款、報(bào)賬、轉(zhuǎn)賬規(guī)定模版（3篇）
- 辦公室文員的主要職責(zé)（2篇）
- 2025年干部考核工作總結(jié)范例（3篇）
- 傳染病信息報(bào)告獎(jiǎng)勵(lì)制度范文（2篇）
- 2025年教導(dǎo)主任國(guó)旗下講話稿（3篇）
- 工作管理規(guī)章制度范文（2篇）
- 2024國(guó)家開放大學(xué)基礎(chǔ)寫作形考任務(wù)2試題及答案
- 2023-2024學(xué)年江蘇省蘇州市高一（上）期末地理試卷
- 干法讀書會(huì)分享
- 進(jìn)階練12 材料作文（滿分范文20篇）（解析版）-【挑戰(zhàn)中考】備戰(zhàn)2024年中考語文一輪總復(fù)習(xí)重難點(diǎn)全攻略（浙江專用）
- 骨質(zhì)疏松的中醫(yī)中藥治療
- 衛(wèi)浴銷售部門年終總結(jié)
- 2024年高考真題-化學(xué)（天津卷） 含解析
- 安徽省蕪湖市2023-2024學(xué)年高二上學(xué)期期末考試 物理 含解析
- 2024年招投標(biāo)培訓(xùn)
- 人教A版(新教材)高中數(shù)學(xué)選擇性必修第三冊(cè)學(xué)案2：7 1 1 條件概率
- 北京郵電大學(xué)《數(shù)據(jù)庫系統(tǒng)》2023-2024學(xué)年期末試卷
評(píng)論
0/150
提交評(píng)論