




版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領
文檔簡介
1、第8課 使用層疊樣式美化網(wǎng)頁 本課要點具體要求本課導讀上機練習本課要點層疊樣式的定義及創(chuàng)建層疊樣式的管理和應用 具體要求了解層疊樣式熟悉創(chuàng)建層疊樣式的方法掌握層疊樣式的管理掌握層疊樣式的應用 本課導讀Dreamweaver CS3中默認的文本字號都比較大,需要用戶自己手動來設置,但逐一設置很麻煩,運用層疊樣式就可以很方便地對整個網(wǎng)頁中的文本進行字體格式設置。另外,還可以用層疊樣式來創(chuàng)建十分精美的表格線框等。 8.1 層疊樣式的定義及創(chuàng)建 在設計網(wǎng)頁時,常常需要對網(wǎng)頁中各種元素的屬性進行設置。一般來說,在同一個網(wǎng)站的所有頁面中,相同類型的網(wǎng)頁元素應該具有相同的屬性,。如果逐一設置會做許多重復的工
2、作,而且很容易出錯;當需要對屬性進行修改時,也需要逐一進行修改。為了解決這個問題,就需要使用CSS(Cascading Style Sheets,即層疊樣式表)來統(tǒng)一進行控制。定義CSS樣式后,就可以把它應用到不同的網(wǎng)頁元素中,這樣,所有應用該CSS樣式的網(wǎng)頁元素就會具有相同的屬性;當修改該CSS樣式后,所有應用該CSS樣式的網(wǎng)頁元素的屬性就會一同被修改。 8.1 層疊樣式的定義及創(chuàng)建 8.1.1 知識講解8.1.2 典型案例設置網(wǎng)頁頁面屬性 8.1.1 知識講解要想在文檔中使用CSS樣式,可以創(chuàng)建新的CSS樣式,也可以鏈接或導入文檔外部的CSS樣式。在創(chuàng)建CSS樣式前,我們先來了解一下CSS
3、樣式的定義。 8.1.1 知識講解1.層疊樣式的定義 2.認識【CSS樣式】面板 3.創(chuàng)建層疊樣式 4.CSS樣式的具體定義 1.層疊樣式的定義 CSS是“層疊樣式表”的簡稱,通過CSS可以定制網(wǎng)頁中的文本格式,不僅可以控制一個頁面的文本格式,采用外部鏈接的方式還可以控制多個頁面的文本格式。 CSS樣式有多種定義方式,主要有標簽CSS樣式、類CSS樣式和偽類CSS樣式3種。2.認識【CSS樣式】面板 CSS的創(chuàng)建及管理基本上都是在【CSS樣式】面板中進行的,下面就來認識它。 選擇【窗口】【CSS樣式】命令或按【ShiftF11】組合鍵,打開【CSS樣式】面板。在該面板中可進行新建、編輯、刪除C
4、SS樣式和鏈接外部CSS文件等操作。 3.創(chuàng)建層疊樣式 在【CSS樣式】面板中創(chuàng)建CSS樣式的具體操作步驟如下:(1)單擊【CSS樣式】面板右上角的 按鈕,在彈出的菜單中選擇【新建】命令,打開【新建CSS規(guī)則】對話框。(2)在【選擇器類型】欄中選擇所需定義的樣式類型。(3)在【定義在】欄中可選擇樣式的種類或選擇只在當前文檔中應用所選樣式。這里選中 單選按鈕,然后單擊【確定】按鈕。(4)打開【保存樣式表文件為】對話框。在該對話框的【保存在】下拉列表框中選擇保存路徑,在【文件名】文本框中輸入該CSS樣式的名稱。(5)單擊【保存】按鈕,保存新建的樣式表文件并自動打開CSS規(guī)則定義對話框。(6)在該對
5、話框中進行各項參數(shù)設置,設置完成后單擊【確定】按鈕,系統(tǒng)會自動在【CSS樣式】面板中顯示出定義的樣式。 4.CSS樣式的具體定義CSS樣式有8個類別 : 1)類型 2)背景 3)區(qū)塊 4)方框 5)邊框 6)列表 7)定位 8)擴展 各類別中相關參數(shù)的具體含義請教師參照軟件和書中內容進行講解。8.1.2 典型案例設置網(wǎng)頁頁面屬性 案例目標網(wǎng)頁頁面屬性也是通過創(chuàng)建層疊樣式來實現(xiàn)對整個網(wǎng)頁進行控制的,下面就來設置網(wǎng)頁頁面屬性。 8.1.2 典型案例設置網(wǎng)頁頁面屬性操作思路(1)新建一個空白文檔并將所有要用的素材復制到保存網(wǎng)頁的位置。(2)設置頁面屬性。(3)插入網(wǎng)頁元素。 8.1.2 典型案例設置
6、網(wǎng)頁頁面屬性操作步驟具體操作步驟請教師參照軟件和書中內容進行講解。8.1.2 典型案例設置網(wǎng)頁頁面屬性案例小結本案例練習了網(wǎng)頁頁面屬性的常規(guī)設置,Dreamweaver CS3將網(wǎng)頁頁面中最常用的一些層疊樣式集中在其中,以方便制作者進行設置。 8.2 層疊樣式的管理和應用 初次創(chuàng)建的層疊樣式可能不太符合實際需要,此時可以對層疊樣式進行編輯。另外,部分層疊樣式創(chuàng)建好后,還需制作者手動進行應用。 8.2 層疊樣式的管理和應用8.2.1 知識講解8.2.2 典型案例為表格應用CSS樣式 8.2.1 知識講解在Dreamweaver CS3中,可以對已創(chuàng)建的CSS樣式進行修改和編輯,也可以刪除已創(chuàng)建的
7、CSS樣式。 8.2.1 知識講解1.編輯CSS樣式 2.鏈接外部CSS樣式表文件 3.刪除CSS樣式4.應用CSS樣式 1.編輯CSS樣式 編輯CSS樣式有兩種方法:一種是在CSS規(guī)則定義對話框中進行修改,另一種是直接在【CSS樣式】面板中修改。2.鏈接外部CSS樣式表文件 CSS樣式通常只顯示在創(chuàng)建該樣式的頁面的【CSS樣式】面板中,通過鏈接可將其他頁面中的樣式應用到當前頁面中。鏈接外部樣式表的具體操作步驟請教師參照軟件和書中內容進行講解 。3.刪除CSS樣式 如果不再需要某個CSS樣式,則可以將其刪除。在【CSS樣式】面板中選擇要刪除的CSS樣式,再單擊 按鈕,即可刪除該CSS樣式。 4
8、.應用CSS樣式 設置好CSS樣式后,標簽CSS樣式和偽類CSS樣式會自動應用到相應的HTML標簽和偽類上,而類CSS樣式需要手動應用到需要的網(wǎng)頁元素上。將類CSS樣式應用到網(wǎng)頁元素上主要有3種方法: 使用網(wǎng)頁元素的快捷菜單 使用CSS樣式的快捷菜單 使用網(wǎng)頁元素的【屬性】面板 8.2.2 典型案例為表格應用CSS樣式 案例目標本案例利用CSS樣式對5.1.2節(jié)中制作的“我的課程表”網(wǎng)頁進行樣式設置,以美化網(wǎng)頁。8.2.2 典型案例為表格應用CSS樣式操作思路(1)定義第1層表格的邊框和背景等屬性。(2)定義第1層表格的單元格屬性。(3)定義第2層表格的邊框和背景等屬性。(4)定義第2層表格的
9、單元格屬性。 8.2.2 典型案例為表格應用CSS樣式操作步驟具體操作步驟請教師參照軟件和書中內容進行講解。8.2.2 典型案例為表格應用CSS樣式案例小結本案例練習用CSS樣式對表格進行修飾,從中可以看出:CSS樣式是統(tǒng)一多個網(wǎng)頁風格的工具,使用得當可使網(wǎng)頁制作事半功倍而且效果協(xié)調統(tǒng)一。在一些大型網(wǎng)站中,所有頁面的風格是一致的,但各個欄目之間有一些小的差別,在制作好一個欄目的CSS樣式文件后,再稍微修改一下即可。 8.3 上機練習8.3.1 “再別康橋”網(wǎng)頁頁面屬性設置 8.3.2 “再別康橋”網(wǎng)頁其他樣式的設置及應 用 8.3.1 “再別康橋”網(wǎng)頁頁面屬性設置 本練習對“再別康橋”網(wǎng)頁進行頁面屬性設置 。8.3.1 “再別康橋”網(wǎng)頁頁面屬性設置操作思路:設置頁面背景。設置頁面默認字體(默認字體的顏色要參照背景圖像的顏色進行設置)
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025至2030年中國活性膨脹劑行業(yè)投資前景及策略咨詢報告
- 2025至2030年中國氯丁橡膠圓弧齒同步帶行業(yè)投資前景及策略咨詢報告
- 2025至2030年中國歐式光面瓦行業(yè)投資前景及策略咨詢報告
- 2025至2030年中國條形碼不干膠標簽行業(yè)投資前景及策略咨詢報告
- 水稻產業(yè)鏈效率優(yōu)化的勞動資源研究
- 化纖原料等企業(yè)經營管理方案
- 高中英語閱讀理解課堂練+全文主旨大意題+課件-2026屆高三英語二輪復習專項
- 初中綜合實踐活動在跨學科教學中的價值與意義分析
- 關于成立新能源汽車精密零部件公司可行性研究報告(范文模板)
- DB43T-示范性街道綜合養(yǎng)老服務中心運營管理規(guī)范
- 自動控制理論期末考試復習試題
- 2024年甘肅省天水市中考地理試題卷(含答案解析)
- 2024江西省高考生物真題卷及答案
- 探視權起訴書范文
- 《煤炭工業(yè)半地下儲倉建筑結構設計標準》
- 2024年一帶一路暨金磚國家技能發(fā)展與技術創(chuàng)新大賽(無人機裝調與應用賽項)考試題庫(含答案)
- 山東省濟南市市中區(qū)2023-2024學年八年級下學期期末數(shù)學試題
- 買賣車輛協(xié)議書范文模板
- DZ∕T 0153-2014 物化探工程測量規(guī)范(正式版)
- 2024年海南省海口市中考一??荚嚿镌囶}
- 2024網(wǎng)絡信息安全應急響應Windows應急手冊
評論
0/150
提交評論