版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)
文檔簡介
第10講樣式表和模板參考資源:
《大學計算機高級應(yīng)用》2023/12/271廣東金融學院本次課內(nèi)容1.樣式表概述;2.使用樣式表格式化網(wǎng)頁;3.Spry菜單欄4.模板概述;5.創(chuàng)建和編輯模板;6.使用模板創(chuàng)建網(wǎng)頁;7.總結(jié)和作業(yè)。2023/12/27廣東金融學院21.樣式表概述問題的引出1)問題一:通常情況下,網(wǎng)頁中有很多元素格式(如文本格式、超鏈接格式等)都采用相同的格式,對于這些相同格式,我們需要不厭其煩地對每個元素進行重復(fù)設(shè)置,其工作量很大,而且也非??菰?。2)問題二:在網(wǎng)頁編輯或網(wǎng)頁維護過程中,我們可能需要對網(wǎng)頁中的某些格式進行修改,但由于該格式在網(wǎng)頁中多次重復(fù)使用(如超鏈接格式),因此修改操作也同樣極其煩鎖,而且還很可能出現(xiàn)錯改和漏改的問題。2023/12/27廣東金融學院31.樣式表概述樣式表的概念樣式表(英文為CascadingStyleSheets,簡稱為CSS)是為了方便設(shè)置網(wǎng)頁元素的格式而制定的一系列規(guī)則,是對HTML標記語言功能的補充。在網(wǎng)頁文檔中使用CSS技術(shù),可以有效地擴充HTML語言的功能,對頁面的布局、字體、顏色、背景和其他效果實現(xiàn)更加精確的格式控制。此外,CSS技術(shù)在簡化網(wǎng)頁的格式代碼、保持網(wǎng)站頁面風格一致和減少重復(fù)性格式設(shè)置等方面,也發(fā)揮著重要的作用。2023/12/27廣東金融學院41.樣式表概述按保存方式不同,樣式表可分為:內(nèi)聯(lián)樣式表嵌入式樣式表外部樣式表按樣式表的作用規(guī)則不同,樣式表可分為:類樣式標簽樣式高級樣式2023/12/27廣東金融學院51.樣式表概述內(nèi)聯(lián)樣式表使用style屬性,直接把樣式表的內(nèi)容放在標記里面,從而把特殊的樣式加入到由標記控制的信息中。由于內(nèi)聯(lián)樣式表和某一標記混在一起,不能被網(wǎng)頁中的其他元素引用,因此內(nèi)聯(lián)樣式表只適用于為單個標記定義樣式表的情況。如:<table…bordercolor="#0066FF"style="border-collapse:collapse">2023/12/27廣東金融學院61.樣式表概述嵌入式樣式表使用style標記將樣式表嵌入在HTML文件的頭部位置。嵌入式樣式表,可以在當前網(wǎng)頁的任何位置引用。因此,如果要求定義的樣式表只能應(yīng)用于當前網(wǎng)頁,可以選擇這種類型的樣式表。2023/12/27廣東金融學院7<head>……<styletype="text/css">.table_frame{ border:thinsolid#0066FF;}</style></head>1.樣式表概述外部樣式表將樣式表保存在一個單獨的樣式表文件中,文件的擴展名為“*.CSS”。由于外部樣式表以文件的方式單獨存儲,故整個站點中的網(wǎng)頁都可以引用到。類樣式該類樣式均以句點“.”開頭,并且可以被網(wǎng)頁文件中的任何文本塊或其他元素引用。例如,可以創(chuàng)建名稱為“.red”的類樣式,設(shè)置“color”屬性為紅色,然后將該樣式應(yīng)用到一部分已定義樣式的段落文本中。2023/12/27廣東金融學院81.樣式表概述標簽樣式使用標簽樣式可以重定義特定標記(如<P>或<H1>標記等)的格式。例如,為<H1>標記創(chuàng)建標簽樣式,便可以重新定制標記<H1>的格式,網(wǎng)頁文檔中所有用<H1>標記設(shè)置了格式的文本都會立即更新為新的格式。高級樣式用于重定義特定標記組合的格式或者所有包含特定ID屬性的標記定義格式。2023/12/27廣東金融學院92.使用樣式表格式化網(wǎng)頁新建“.title_text”樣式表2023/12/27廣東金融學院102.使用樣式表格式化網(wǎng)頁新建“.general_text”樣式表2023/12/27廣東金融學院112.使用樣式表格式化網(wǎng)頁新建“textarea”樣式表2023/12/27廣東金融學院122.使用樣式表格式化網(wǎng)頁新建鏈接樣式2023/12/27廣東金融學院132.使用樣式表格式化網(wǎng)頁幾個問題1)在a:link、a:visited、a:hover及a:active樣式表新建前和新建后,分別預(yù)覽網(wǎng)頁查看超鏈接的樣式有什么不同?2)在textarea樣式表新建前、新建后和編輯后,對網(wǎng)頁中的文本域表單對象有什么影響?3)在.title_text、.general_text樣式表新建前后,網(wǎng)頁中的文本格式有什么變化?2023/12/27廣東金融學院142.使用樣式表格式化網(wǎng)頁引用樣式表附加樣式表引用類樣式選擇網(wǎng)頁元素在“屬性”面板中的“樣式”下拉列表或“類”下拉列表中選擇一個樣式一個元素可引用多個樣式,樣式采用疊加原則一個樣式可同時被多個網(wǎng)頁元素引用2023/12/27廣東金融學院152.使用樣式表格式化網(wǎng)頁問題:如果重新編輯上述創(chuàng)建的4個樣式,網(wǎng)頁中被格式化的元素會自動同步變化嗎?為什么?2023/12/27廣東金融學院163.Spry菜單欄Spry菜單欄“屬性”面板提供了Spry菜單結(jié)構(gòu)及菜單鏈接的編輯功能,利用“屬性”面板我們可以輕松地編輯Spry菜單的結(jié)構(gòu)。2023/12/27廣東金融學院173.Spry菜單欄Spry菜單欄舉例2023/12/27廣東金融學院183.Spry菜單欄2023/12/27廣東金融學院194.模板概述模板的概念模板是一個特殊的網(wǎng)頁,在DreamweaverCS6中可以這個網(wǎng)頁的基礎(chǔ)上新建其它網(wǎng)頁。模板中通常包含了一個通用的布局和格式。網(wǎng)頁模板提供了網(wǎng)頁內(nèi)容可重復(fù)利用的一種機制,通過模板創(chuàng)建網(wǎng)頁一方面可以減少不必要的重復(fù)工作,另一方面,也可以讓網(wǎng)頁設(shè)計人員快速制作出一系列風格一致的網(wǎng)頁。當模板的內(nèi)容或格式改變了,則基于模板的所有網(wǎng)頁將同步發(fā)生改變。2023/12/27廣東金融學院205.創(chuàng)建和編輯模板新建模板2023/12/27廣東金融學院215.創(chuàng)建和編輯模板鎖定區(qū)域和可編輯區(qū)域DreamweaverCS6模板有兩種類型的區(qū)域:可編輯區(qū)域和鎖定區(qū)域??删庉媴^(qū)域是模板中內(nèi)容可變的部分,鎖定區(qū)域則是模板中內(nèi)容靜態(tài)不變的部分。當編輯模板時,可編輯區(qū)域和鎖定區(qū)域均可以修改。但是,在一個基于模板的網(wǎng)頁文檔中,我們只能修改模板的可編輯區(qū)域中的內(nèi)容,鎖定區(qū)域是不可編輯的。在默認情況下,模板是鎖定的。要使模板有用,必須創(chuàng)建可編輯區(qū)域。2023/12/27廣東金融學院225.創(chuàng)建和編輯模板鎖定區(qū)域和可編輯區(qū)域我們可以標記整個表格,也可以標記表格中的某個單元格(或整行)作為可編輯區(qū)域,但不能標記若干個單元格(不構(gòu)成行時的情況)為可編輯區(qū)域。層和層中的內(nèi)容是分離的元素,它們都可以被標記為可編輯區(qū)域。層被標記為可編輯區(qū)域之后,可以隨意改變其位置,而層的內(nèi)容被標記為可編輯區(qū)域之后則可以任意修改層的內(nèi)容。2023/12/27廣東金融學院235.創(chuàng)建和編輯模板新建可編輯區(qū)域2023/12/27廣東金融學院245.創(chuàng)建和編輯模板刪除模板2023/12/27廣東金融學院256.使用模板創(chuàng)建網(wǎng)頁基本步驟2023/12/27廣東金融學院266.使用模板創(chuàng)建網(wǎng)頁更新基于模板的網(wǎng)頁2023/12/27廣東金融學院276.使用模板創(chuàng)建網(wǎng)頁分離網(wǎng)頁文檔中使用的模板若要更改基于模板的網(wǎng)頁文檔的鎖定區(qū)域,必須將網(wǎng)頁文檔從模板中分離。將文檔分離后,整個文檔將變?yōu)榭删庉嫷?,并且?nèi)容和格式不變。執(zhí)行分離操作后,網(wǎng)頁文檔已經(jīng)和模板沒有任何聯(lián)系,即模板修改后,分離后的網(wǎng)頁文檔將不受其影響。2023/12/27廣東金融學院287.總結(jié)和作業(yè)本次課總結(jié)1)樣式表的概念和作用2)樣式表的分類及每類的特征3)模板的概念和作用2023/12/27廣東金融學院297.總結(jié)和作業(yè)作業(yè)1
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024鐵路物業(yè)買賣正式協(xié)議文件版B版
- 2025年度海洋資源開發(fā)承包經(jīng)營合同3篇
- 商品房銷售合同范本
- 2025年私募基金代持資產(chǎn)清算與分配合同3篇
- 二零二四年度專業(yè)農(nóng)場滅鼠及作物保護合同2篇
- 2025年度航空航天裝備采購合同3篇
- 2025年新能源電動車租賃及綠色出行服務(wù)合同范本2篇
- 2025版鋁?;厥绽门c環(huán)保處理服務(wù)合同4篇
- 二零二五年度環(huán)保節(jié)能設(shè)施安全生產(chǎn)合同范本3篇
- 二零二五年高速公路建設(shè)土石方供應(yīng)合同3篇
- 勞動合同續(xù)簽意見單
- 大學生國家安全教育意義
- 2024年保育員(初級)培訓(xùn)計劃和教學大綱-(目錄版)
- 河北省石家莊市2023-2024學年高二上學期期末考試 語文 Word版含答案
- 企業(yè)正確認識和運用矩陣式管理
- 分布式光伏高處作業(yè)專項施工方案
- 陳閱增普通生物學全部課件
- 檢驗科主任就職演講稿范文
- 人防工程主體監(jiān)理質(zhì)量評估報告
- 20225GRedCap通信技術(shù)白皮書
- 燃氣有限公司客戶服務(wù)規(guī)范制度
評論
0/150
提交評論