網(wǎng)頁文本排版實(shí)例_第1頁
網(wǎng)頁文本排版實(shí)例_第2頁
網(wǎng)頁文本排版實(shí)例_第3頁
網(wǎng)頁文本排版實(shí)例_第4頁
網(wǎng)頁文本排版實(shí)例_第5頁
已閱讀5頁，還剩3頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

1、網(wǎng)頁文本排版實(shí)例未應(yīng)用CSS樣式網(wǎng)頁：第10章 Dreamweaver中層疊樣式表的創(chuàng)建及使用教案教學(xué)目標(biāo)層疊樣式表（CSS）是網(wǎng)頁設(shè)計(jì)工作者制作網(wǎng)頁時(shí)經(jīng)常使用的工具。利用它，可以統(tǒng)一定制網(wǎng)頁文本、圖片、表格等多種網(wǎng)頁元素的樣式，可以設(shè)計(jì)出更加豐富多彩的網(wǎng)頁效果，而且能夠迅速地將樣式應(yīng)用于整個(gè)網(wǎng)站的多個(gè)網(wǎng)頁上。通過本章的教學(xué)，要求學(xué)生掌握以下基本內(nèi)容：1. 了解層疊樣式表的基本知識(shí)。2. 掌握在Dreamweaver文檔中利用CSS面板創(chuàng)建層疊樣式表的基本方法。3. 掌握將CSS樣式應(yīng)用到各種網(wǎng)頁元素上的方法。4. 掌握修改CSS樣式的方法，并觀察到該修改對(duì)網(wǎng)頁外觀的影響。5. 掌握管理CSS

2、層疊樣式表的基本方法，學(xué)會(huì)將外部樣式表鏈接到網(wǎng)站的多個(gè)網(wǎng)頁上，以便直接應(yīng)用已創(chuàng)建好的CSS樣式，統(tǒng)一多個(gè)網(wǎng)頁的外觀。教學(xué)內(nèi)容· CSS層疊樣式表的基本知識(shí)：內(nèi)聯(lián)式樣式表、嵌入式樣式表、外部樣式表。· 在Dreamweaver中，使用CSS面板創(chuàng)建、應(yīng)用、修改CSS層疊樣式。· 鏈接外部樣式表。教學(xué)重點(diǎn)· 創(chuàng)建CSS樣式。· 應(yīng)用CSS樣式。· 修改CSS樣式。· 鏈接外部樣式表。教學(xué)形式課堂講授與網(wǎng)絡(luò)自學(xué)相結(jié)合教學(xué)輔助手段· 通過多媒體屏幕廣播或屏幕投影，學(xué)生可實(shí)時(shí)觀看教師的操作演示過程。· 學(xué)生可以訪問

3、網(wǎng)絡(luò)教學(xué)站點(diǎn)。教學(xué)站點(diǎn)提供了重點(diǎn)操作的Flash動(dòng)畫演示。教學(xué)時(shí)間安排：1課時(shí)（45分鐘）· 層疊樣式表的基礎(chǔ)知識(shí)：10分鐘。· 創(chuàng)建和應(yīng)用CSS樣式：15分鐘。· 修改CSS樣式：5分鐘。· 鏈接外部樣式表：5分鐘。· 小結(jié)：10分鐘。教學(xué)方法與過程首先介紹為何在網(wǎng)頁設(shè)計(jì)中引入層疊樣式表的概念，使學(xué)生對(duì)層疊樣式表的作用有一個(gè)感性的認(rèn)識(shí)。然后介紹層疊樣式表的基本種類。接著介紹利用CSS面板創(chuàng)建CSS樣式、應(yīng)用CSS樣式以及修改CSS樣式的方法。其后，介紹如何為網(wǎng)站的多個(gè)網(wǎng)頁鏈接已有的外部樣式表。最后，進(jìn)行小結(jié)。在小結(jié)過程中，引導(dǎo)學(xué)生辨認(rèn)和判斷三

4、種樣式表在網(wǎng)頁的HTML代碼中具體的代碼表示，并引導(dǎo)學(xué)生總結(jié)這些代碼是如何通過CSS面板進(jìn)行設(shè)置的，使得學(xué)生進(jìn)一步加深對(duì)理論知識(shí)的理解。布置課外作業(yè)，要求學(xué)生完成指定練習(xí)，鞏固所學(xué)知識(shí)。具體教學(xué)內(nèi)容一、引言（引入學(xué)習(xí)本章節(jié)的原因，簡單介紹有關(guān)概念，并提示本節(jié)課程的主要內(nèi)容）1什么是樣式？    樣式是用來控制網(wǎng)頁外觀的一組格式。2為什么在網(wǎng)頁設(shè)計(jì)中使用樣式？當(dāng)網(wǎng)頁中的多個(gè)元素需要使用相同的格式時(shí)，我們需要使用一種更為高效的格式設(shè)置方法。如果把一組格式歸納起來，用一個(gè)名稱命名，那么，這組格式就變成了一個(gè)樣式。對(duì)網(wǎng)頁中的多個(gè)元素，只需給他們應(yīng)用樣式，他們就具有了相同的

5、格式。此外，當(dāng)樣式中的格式被修改之后，網(wǎng)頁中所有應(yīng)用了該樣式的元素，其格式也發(fā)生了自動(dòng)更新。3什么是層疊樣式表？層疊樣式表CSS（Cascading Style Sheet）是統(tǒng)一管理網(wǎng)頁中各種樣式的一種方式。它是一組格式設(shè)置規(guī)則，用于控制網(wǎng)頁外觀。一個(gè)網(wǎng)頁對(duì)象（文本、圖象、表格等）可以被多層的樣式表來修飾，但是最終以優(yōu)先級(jí)最高的樣式表所定義的格式來顯示。這也是“層疊”樣式表名稱的由來。層疊樣式表可以同時(shí)被多個(gè)網(wǎng)頁鏈接。當(dāng)樣式表內(nèi)的樣式更新或被修改之后，所有應(yīng)用了該樣式表的文檔都會(huì)被自動(dòng)更新。下面，我們首先了解一下層疊樣式表有哪些類型，然后學(xué)習(xí)Dreamweaver中CSS樣式的創(chuàng)建、應(yīng)用及修

6、改。二、層疊樣式表的類型三類。內(nèi)聯(lián)式樣式表、嵌入式樣式表、外部樣式表。1內(nèi)聯(lián)式樣式表：是在某個(gè)特定的標(biāo)簽內(nèi)使用style屬性定義CSS樣式。這種定義只對(duì)使用了style屬性的標(biāo)簽有效，子標(biāo)簽可以繼承父標(biāo)簽的樣式。<p style=”color:#000000; background:yellow;” >這段文字背景色為<I>黃色</I></p>2嵌入式樣式表：是一系列包含在 HTML 文檔 head 部分的 style 標(biāo)簽內(nèi)的CSS 樣式。<head><style type=”text/css”><!- ->

7、P color:red; font-family:宋體; font-weight:bold- - ></style></head>3外部樣式表：是一系列存儲(chǔ)在一個(gè)單獨(dú)的外部 .css 文件中的 CSS 樣式。利用HTML文檔 head 部分中的link標(biāo)簽，該文件被鏈接到 Web 站點(diǎn)中的一頁或多頁上。<head><link rel=stylesheet href=”mystyle.css” type=”text/css”></head>例：參考css.htm。（向?qū)W生演示三種不同的樣式表代碼）三、創(chuàng)建CSS樣式1操作方法：使用

8、CSS面板。2操作步驟：（結(jié)合后續(xù)示例向?qū)W生進(jìn)行重點(diǎn)演示）· 選擇“窗口”菜單“CSS樣式”命令，打開CSS面板，點(diǎn)擊面板底部的“+”按鈕，打開“新建樣式”對(duì)話框。· 選擇樣式種類。· 創(chuàng)建自定義樣式：創(chuàng)建一個(gè)可以作為 class 屬性應(yīng)用到某網(wǎng)頁元素的樣式。 · 重定義HTML標(biāo)簽：對(duì)指定的 HTML 標(biāo)簽的默認(rèn)格式進(jìn)行重新定義。· 使用CSS選擇器：為某個(gè)標(biāo)簽組合或所有包含特定 Id 屬性的標(biāo)簽定義格式。或從彈出式菜單中選擇一個(gè)標(biāo)簽。彈出式菜單中提供的選擇器（稱作偽類選擇器）包括 a:active、a:hover、a:link 和 a:vi

9、sited。· 為新樣式輸入名字、選擇標(biāo)簽、或者選擇標(biāo)簽組合。· 樣式的名字前邊必須要有一個(gè)句點(diǎn)。如果沒有輸入這個(gè)句點(diǎn)，Dreamweaver 自動(dòng)輸入。名字可以包含任何字母和數(shù)字的組合，但文字必須放在句號(hào)后。例如 .myhead1。· 要重新定義 HTML 標(biāo)簽樣式，可以鍵入一個(gè) HTML 標(biāo)簽或者從彈出菜單中選擇一個(gè)。· 選擇CSS 選擇器后，可以輸入任何一個(gè)有效的表達(dá)式（例如，td p或 #myStyle)，或者從彈出列表中選擇?？晒┻x擇：a:active（選中超鏈接), a:hover（光標(biāo)位于超鏈接上), a:link（超鏈接沒有任何動(dòng)作時(shí)),

10、 和 a:visited（訪問過的超鏈接)。· 選擇樣式保存的位置：定義樣式是保存在某個(gè)外部樣式表文件中還是僅對(duì)本文檔有效。· 點(diǎn)擊確定，出現(xiàn)樣式定義對(duì)話框。· 為新的 CSS 樣式進(jìn)行格式定義。例：打開css.htm，創(chuàng)建一個(gè)外部樣式表。（結(jié)合上面的述講述內(nèi)容向?qū)W生進(jìn)行重點(diǎn)演示）（1）新建一個(gè)外部樣式表文件mycss.css。（2）在外部樣式表中創(chuàng)建自定義的超級(jí)鏈接樣式。（3）在外部樣式表中創(chuàng)建自定義“列表”樣式，使用列表面板設(shè)置一幅圖象作為項(xiàng)目符號(hào)。（3）僅對(duì)本文檔修改body標(biāo)簽，使用背景面板設(shè)置背景圖象。（不重復(fù)、右對(duì)齊、固定)。例：打開poem1.htm

11、，創(chuàng)建僅對(duì)當(dāng)前文檔有效的CSS樣式。（由學(xué)生課后自行觀看Flash動(dòng)畫演示）（1）創(chuàng)建自定義的CSS樣式標(biāo)題1、標(biāo)題2等，使用類型面板設(shè)計(jì)字體樣式，并應(yīng)用到當(dāng)前網(wǎng)頁中。（2）定義body和td標(biāo)簽設(shè)置網(wǎng)頁與表格字體大小為10點(diǎn)數(shù)。（3）創(chuàng)建自定義的CSS樣式“正文”，字體大小為點(diǎn)數(shù)，字體幼圓，1.5倍行高。（4）修改自定義標(biāo)題2樣式，設(shè)置自選背景。（5）修改自定義標(biāo)題樣式，使用區(qū)塊面板設(shè)置文本對(duì)齊方式為居中。（6）修改自定義“正文”樣式，縮進(jìn)個(gè)漢字。（7）新建自定義標(biāo)題3樣式，使用邊框面板設(shè)置一條下邊框，樣式為雙線、顏色為紅色。例：打開filter.htm，創(chuàng)建僅對(duì)當(dāng)前文檔有效的CSS樣式。（

12、由學(xué)生課后自行觀看Flash動(dòng)畫演示）（1）新建一個(gè)樣式Alpha，僅應(yīng)用到當(dāng)前文檔，設(shè)置透明度為50%（在擴(kuò)展面板的濾鏡下拉列表框中選擇Alpha(Opacity=50)。（2）新建一個(gè)樣式invert，僅應(yīng)用到當(dāng)前文檔，(在擴(kuò)展面板的濾鏡下拉列表框中選擇invert) 。（3）新建一個(gè)樣式gray，僅應(yīng)用到當(dāng)前文檔，(在擴(kuò)展面板的濾鏡下拉列表框中選擇gray) 。（4）在文檔中插入圖片后分別設(shè)置以上新建的樣式后在瀏覽器中查看效果。（5）新建一個(gè)樣式mouse ，設(shè)置當(dāng)光標(biāo)滑過樣式控制的對(duì)象時(shí)改變光標(biāo)的圖像為help。四、應(yīng)用CSS樣式（結(jié)合后續(xù)示例向?qū)W生進(jìn)行重點(diǎn)演示）1使用“重定義HTML

13、標(biāo)簽”或“CSS選擇器”定義的樣式，由系統(tǒng)自動(dòng)應(yīng)用。2自定義CSS樣式由網(wǎng)頁設(shè)計(jì)者手動(dòng)應(yīng)用。（1）在文檔中，選擇要應(yīng)用CSS樣式的文本或其它網(wǎng)頁元素。（2）在屬性檢查器中，從“樣式”列表框中選擇要應(yīng)用的樣式。 3清除已應(yīng)用的樣式。（1）選擇要清除樣式的對(duì)象或文本。 （2）在屬性檢查器中，從“樣式”列表框中選擇“無”。 例：將剛才創(chuàng)建的CSS樣式分別應(yīng)用到文檔的各個(gè)元素中。五、修改CSS樣式（結(jié)合后續(xù)示例向?qū)W生進(jìn)行重點(diǎn)演示）1操作步驟：（1）打開“CSS樣式”面板。（2）選擇要修改的CSS樣式，單擊面板的“編輯”按鈕。 （3）按需要修改樣式。例：修改mycss.css中的超級(jí)鏈接樣式。觀察文檔的

14、樣式變化。六、鏈接外部樣式表（結(jié)合后續(xù)示例向?qū)W生進(jìn)行重點(diǎn)演示）1操作步驟：（1）打開“CSS樣式”面板。（2）單擊面板的“鏈接樣式表”按鈕，將指定外部樣式表文件鏈接到當(dāng)前文檔。（3）在當(dāng)前文檔中應(yīng)用外部樣式表中的CSS樣式。例：打開poem1.htm，將外部樣式表mycss.css鏈接到poem1.htm。七、小結(jié)引導(dǎo)學(xué)生在網(wǎng)頁的HTML代碼中辨認(rèn)和判斷上述示例中建立的樣式表，引導(dǎo)學(xué)生總結(jié)這些代碼是如何通過CSS面板進(jìn)行設(shè)置的，使得學(xué)生進(jìn)一步加深對(duì)理論知識(shí)的理解。鼓勵(lì)學(xué)生課后自行試驗(yàn)多層樣式表對(duì)頁面元素格式的影響。本章要點(diǎn)·創(chuàng)建CSS 樣式（1）打開CSS樣式面板面板底部的“+”圖標(biāo)。（2）樣式的種類：· 自定義樣式：自己創(chuàng)建一個(gè)網(wǎng)頁樣式。· 重定義HTML標(biāo)簽：對(duì)指定的 HTML 標(biāo)簽進(jìn)行重新定義。· 使用CSS選擇器：對(duì)鏈接的格式進(jìn)行重新定義。（3）樣式存放位置：存放在樣式表文件中或僅對(duì)本文檔。（4）在樣式對(duì)話框中打開類型、背景、區(qū)塊、邊框、擴(kuò)展等面板進(jìn)行設(shè)置。·應(yīng)用CSS樣式（1）選擇要應(yīng)用樣式的對(duì)象在屬性面板中選擇要應(yīng)用的樣式（2）選擇要取消樣式的對(duì)象在屬性面板中從“樣式菜單中選

溫馨提示

  • 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ì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論