網(wǎng)頁設(shè)計與制作ppt高職 第9章 在網(wǎng)頁中應(yīng)用CSS樣式.ppt

網(wǎng)頁設(shè)計與制作ppt高職 第9章 在網(wǎng)頁中應(yīng)用CSS樣式.ppt

ID:51971375

大小:2.48 MB

頁數(shù):81頁

時間:2020-03-26

網(wǎng)頁設(shè)計與制作ppt高職 第9章 在網(wǎng)頁中應(yīng)用CSS樣式.ppt_第1頁
網(wǎng)頁設(shè)計與制作ppt高職 第9章 在網(wǎng)頁中應(yīng)用CSS樣式.ppt_第2頁
網(wǎng)頁設(shè)計與制作ppt高職 第9章 在網(wǎng)頁中應(yīng)用CSS樣式.ppt_第3頁
網(wǎng)頁設(shè)計與制作ppt高職 第9章 在網(wǎng)頁中應(yīng)用CSS樣式.ppt_第4頁
網(wǎng)頁設(shè)計與制作ppt高職 第9章 在網(wǎng)頁中應(yīng)用CSS樣式.ppt_第5頁
資源描述:

《網(wǎng)頁設(shè)計與制作ppt高職 第9章 在網(wǎng)頁中應(yīng)用CSS樣式.ppt》由會員上傳分享,免費在線閱讀,更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、第9章在網(wǎng)頁中應(yīng)用CSS樣式CSS樣式簡介任務(wù)1創(chuàng)建CSS樣式任務(wù)2設(shè)置CSS樣式任務(wù)3管理CSS樣式任務(wù)4應(yīng)用CSS高級樣式任務(wù)5本章導(dǎo)讀要創(chuàng)建一個漂亮的網(wǎng)頁,掌握設(shè)置CSS樣式是必不可少的,CSS樣式可以實現(xiàn)網(wǎng)頁中幾乎所有的樣式效果。CSS樣式簡介創(chuàng)建CSS樣式設(shè)置CSS樣式管理CSS樣式應(yīng)用CSS高級樣式能力目標(biāo)任務(wù)1CSS樣式簡介CSS是CascadingStyleSheets的縮寫,中文譯作“層疊樣式表”,簡稱樣式表。CSS樣式可以精確地控制頁面中每個元素的字體樣式、背景、排列方式、區(qū)域尺寸和邊框等;CSS樣式還能夠簡化網(wǎng)頁

2、代碼格式,使得下載顯示的速度加快。應(yīng)用外部鏈接樣式表,可以一次完成多個頁面中網(wǎng)頁內(nèi)容的顯示樣式修改,極大地減少了用戶的重復(fù)勞動量。任務(wù)2創(chuàng)建CSS樣式Dreamweaver提供的樣式表編輯功能可以讓用戶輕松地進(jìn)行復(fù)雜的樣式設(shè)置,創(chuàng)建出適用的樣式表。創(chuàng)建樣式表有兩種方法,一種是通過“CSS樣式”面板創(chuàng)建,另一種是執(zhí)行菜單命令創(chuàng)建樣式表。階段1執(zhí)行菜單命令創(chuàng)建樣式表(1)選擇“窗口→CSS樣式”命令,打開“CSS樣式”面板,然后選擇“文本→CSS樣式→新建”命令。(2)在打開的對話框的“選擇器類型”中選擇“類”單選按鈕,在“名稱”文本框中

3、輸入自定義樣式表名稱。(3)在“定義在”選項中,可以選擇新建樣式表的作用類型,是獨立的“新建樣式表文件”,還是只對當(dāng)前網(wǎng)頁效果設(shè)置有作用的“僅對該文檔”,然后單擊“確定”按鈕。(4)在打開的“.style1的CSS規(guī)則定義”對話框中進(jìn)行各選項的設(shè)置后,單擊“確定”按鈕。(5)在“CSS樣式”面板中可以看到新創(chuàng)建好的樣式表。階段2使用CSS面板創(chuàng)建樣式表(1)選擇“窗口→CSS樣式”命令,打開“CSS樣式”面板,然后單擊“新建CSS規(guī)則”按鈕。(2)在打開的對話框的“選擇器類型”中選擇“類”單選按鈕,在“名稱”文本框中輸入自定義樣式表名

4、稱。(3)在“定義在”選項中,可以選擇新建樣式表的作用類型,是獨立的“新建樣式表文件”,還是只對當(dāng)前網(wǎng)頁效果設(shè)置有作用的“僅對該文檔”,然后單擊“確定”按鈕。(4)在打開的“.style1的CSS規(guī)則定義”對話框中進(jìn)行各選項的設(shè)置后,單擊“確定”按鈕。(5)在“CSS樣式”面板中可以看到新創(chuàng)建好的樣式表。任務(wù)3設(shè)置CSS樣式只有對CSS樣式的詳細(xì)設(shè)置進(jìn)行全面的認(rèn)識,然后掌握利用CSS樣式表在網(wǎng)頁中進(jìn)行各種效果設(shè)置的具體方法,才能很好地使用CSS樣式來美化網(wǎng)頁。階段1設(shè)置類型(1)選擇“文本→CSS命令→新建”命令,打開“新建CSS規(guī)則

5、”對話框,在其中新建一個CSS規(guī)則。(2)設(shè)置好新建CSS樣式表的規(guī)則屬性后,單擊“確定”按鈕,打開新建CSS樣式表的規(guī)則定義設(shè)置對話框。字體:在其下拉列表中,選擇要設(shè)置的字體。大?。涸谄湎吕斜碇校梢赃x擇字體的大小,也可以在文本框中輸入字體大小。樣式:設(shè)置字體的樣式,有正常、斜體和斜偏體3種選擇。行高:設(shè)置一個段落中每行字的行間距。粗細(xì):設(shè)置字體的粗細(xì)。變體:設(shè)置字體的特殊輸入,有正常和小型大寫字母兩種。大小寫:設(shè)置字母的大小寫。修飾:設(shè)置字體的效果,為其添加下劃線、上劃線等。顏色:設(shè)置字體顏色。(3)選擇需要的選項進(jìn)行設(shè)置,例如

6、在“字體”中選擇“宋體”,字體大小為12像素,行高為1.5倍行高,修飾為“無”,顏色為“#666666”。(4)單擊“確定”按鈕,即可完成“類型”的設(shè)置。階段2設(shè)置背景(1)選擇“文本→CSS命令→新建”命令,打開“新建CSS規(guī)則”對話框,在其中新建一個CSS規(guī)則。(2)設(shè)置好新建CSS樣式表的規(guī)則屬性后,單擊“確定”按鈕,打開新建CSS樣式表的規(guī)則定義設(shè)置對話框,在“分類”列表中選擇“背景”選項。背景顏色:在背景顏色中,設(shè)置一種顏色作為背景色背景圖像:添加背景圖像的路徑。重復(fù):有不重復(fù)、重復(fù)、橫向重復(fù)和縱向重復(fù)4個選項,分別用于表示

7、背景圖像的鋪設(shè)方式。附件:有固定和滾動兩個選項。選擇“固定”背景位置固定,選擇“滾動”背景可以跟隨內(nèi)容滾動。水平位置:設(shè)置背景圖像在水平方向的位置。垂直位置:設(shè)置背景圖像在垂直方向的位置。(3)選擇需要的選項進(jìn)行設(shè)置,這里在背景顏色框中設(shè)置顏色為“#CCCCCC”。(4)單擊“確定”按鈕,即可完成“背景”樣式的設(shè)置。階段3設(shè)置區(qū)塊(1)選擇“文本→CSS命令→新建”命令,打開“新建CSS規(guī)則”對話框,在其中新建一個CSS規(guī)則。(2)設(shè)置好新建CSS樣式表的規(guī)則屬性后,單擊“確定”按鈕,打開新建CSS樣式表的規(guī)則定義設(shè)置對話框,在“分類

8、”列表中選擇“區(qū)塊”選項。單詞間距:設(shè)置單詞之間的間距。字母間距:設(shè)置字母或字符的間距,如果要減小字符間距,需要輸入一個負(fù)值。垂直對齊:指定元素的垂直對齊方式,有“基線下標(biāo)、上標(biāo)、頂部、文本頂對齊、中線對齊、底部和文本底

當(dāng)前文檔最多預(yù)覽五頁,下載文檔查看全文

此文檔下載收益歸作者所有

當(dāng)前文檔最多預(yù)覽五頁,下載文檔查看全文
溫馨提示:
1. 部分包含數(shù)學(xué)公式或PPT動畫的文件,查看預(yù)覽時可能會顯示錯亂或異常,文件下載后無此問題,請放心下載。
2. 本文檔由用戶上傳,版權(quán)歸屬用戶,天天文庫負(fù)責(zé)整理代發(fā)布。如果您對本文檔版權(quán)有爭議請及時聯(lián)系客服。
3. 下載前請仔細(xì)閱讀文檔內(nèi)容,確認(rèn)文檔內(nèi)容符合您的需求后進(jìn)行下載,若出現(xiàn)內(nèi)容與標(biāo)題不符可向本站投訴處理。
4. 下載文檔時可能由于網(wǎng)絡(luò)波動等原因無法下載或下載錯誤,付費完成后未能成功下載的用戶請聯(lián)系客服處理。