計算機(jī)高級應(yīng)用課件講_第1頁
計算機(jī)高級應(yīng)用課件講_第2頁
計算機(jī)高級應(yīng)用課件講_第3頁
計算機(jī)高級應(yīng)用課件講_第4頁
計算機(jī)高級應(yīng)用課件講_第5頁
已閱讀5頁，還剩26頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第10講樣式表和模板參考資源：

《大學(xué)計算機(jī)高級應(yīng)用》2023/12/271廣東金融學(xué)院本次課內(nèi)容1．樣式表概述；2．使用樣式表格式化網(wǎng)頁；3.Spry菜單欄4．模板概述；5．創(chuàng)建和編輯模板；6．使用模板創(chuàng)建網(wǎng)頁；7．總結(jié)和作業(yè)。2023/12/27廣東金融學(xué)院21．樣式表概述問題的引出1)問題一：通常情況下，網(wǎng)頁中有很多元素格式（如文本格式、超鏈接格式等）都采用相同的格式，對于這些相同格式，我們需要不厭其煩地對每個元素進(jìn)行重復(fù)設(shè)置，其工作量很大，而且也非?？菰?。2)問題二：在網(wǎng)頁編輯或網(wǎng)頁維護(hù)過程中，我們可能需要對網(wǎng)頁中的某些格式進(jìn)行修改，但由于該格式在網(wǎng)頁中多次重復(fù)使用（如超鏈接格式），因此修改操作也同樣極其煩鎖，而且還很可能出現(xiàn)錯改和漏改的問題。2023/12/27廣東金融學(xué)院31．樣式表概述樣式表的概念樣式表（英文為CascadingStyleSheets，簡稱為CSS）是為了方便設(shè)置網(wǎng)頁元素的格式而制定的一系列規(guī)則，是對HTML標(biāo)記語言功能的補(bǔ)充。在網(wǎng)頁文檔中使用CSS技術(shù)，可以有效地擴(kuò)充HTML語言的功能，對頁面的布局、字體、顏色、背景和其他效果實現(xiàn)更加精確的格式控制。此外，CSS技術(shù)在簡化網(wǎng)頁的格式代碼、保持網(wǎng)站頁面風(fēng)格一致和減少重復(fù)性格式設(shè)置等方面，也發(fā)揮著重要的作用。2023/12/27廣東金融學(xué)院41．樣式表概述按保存方式不同，樣式表可分為：內(nèi)聯(lián)樣式表嵌入式樣式表外部樣式表按樣式表的作用規(guī)則不同，樣式表可分為：類樣式標(biāo)簽樣式高級樣式2023/12/27廣東金融學(xué)院51．樣式表概述內(nèi)聯(lián)樣式表使用style屬性，直接把樣式表的內(nèi)容放在標(biāo)記里面，從而把特殊的樣式加入到由標(biāo)記控制的信息中。由于內(nèi)聯(lián)樣式表和某一標(biāo)記混在一起，不能被網(wǎng)頁中的其他元素引用，因此內(nèi)聯(lián)樣式表只適用于為單個標(biāo)記定義樣式表的情況。如：<table…bordercolor="#0066FF"style="border-collapse:collapse">2023/12/27廣東金融學(xué)院61．樣式表概述嵌入式樣式表使用style標(biāo)記將樣式表嵌入在HTML文件的頭部位置。嵌入式樣式表，可以在當(dāng)前網(wǎng)頁的任何位置引用。因此，如果要求定義的樣式表只能應(yīng)用于當(dāng)前網(wǎng)頁，可以選擇這種類型的樣式表。2023/12/27廣東金融學(xué)院7<head>……<styletype="text/css">.table_frame{ border:thinsolid#0066FF;}</style></head>1．樣式表概述外部樣式表將樣式表保存在一個單獨的樣式表文件中，文件的擴(kuò)展名為“*.CSS”。由于外部樣式表以文件的方式單獨存儲，故整個站點中的網(wǎng)頁都可以引用到。類樣式該類樣式均以句點“.”開頭，并且可以被網(wǎng)頁文件中的任何文本塊或其他元素引用。例如，可以創(chuàng)建名稱為“.red”的類樣式，設(shè)置“color”屬性為紅色，然后將該樣式應(yīng)用到一部分已定義樣式的段落文本中。2023/12/27廣東金融學(xué)院81．樣式表概述標(biāo)簽樣式使用標(biāo)簽樣式可以重定義特定標(biāo)記（如<P>或<H1>標(biāo)記等）的格式。例如，為<H1>標(biāo)記創(chuàng)建標(biāo)簽樣式，便可以重新定制標(biāo)記<H1>的格式，網(wǎng)頁文檔中所有用<H1>標(biāo)記設(shè)置了格式的文本都會立即更新為新的格式。高級樣式用于重定義特定標(biāo)記組合的格式或者所有包含特定ID屬性的標(biāo)記定義格式。2023/12/27廣東金融學(xué)院92．使用樣式表格式化網(wǎng)頁新建“.title_text”樣式表2023/12/27廣東金融學(xué)院102．使用樣式表格式化網(wǎng)頁新建“.general_text”樣式表2023/12/27廣東金融學(xué)院112．使用樣式表格式化網(wǎng)頁新建“textarea”樣式表2023/12/27廣東金融學(xué)院122．使用樣式表格式化網(wǎng)頁新建鏈接樣式2023/12/27廣東金融學(xué)院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廣東金融學(xué)院142．使用樣式表格式化網(wǎng)頁引用樣式表附加樣式表引用類樣式選擇網(wǎng)頁元素在“屬性”面板中的“樣式”下拉列表或“類”下拉列表中選擇一個樣式一個元素可引用多個樣式，樣式采用疊加原則一個樣式可同時被多個網(wǎng)頁元素引用2023/12/27廣東金融學(xué)院152．使用樣式表格式化網(wǎng)頁問題：如果重新編輯上述創(chuàng)建的4個樣式，網(wǎng)頁中被格式化的元素會自動同步變化嗎？為什么？2023/12/27廣東金融學(xué)院163．Spry菜單欄Spry菜單欄“屬性”面板提供了Spry菜單結(jié)構(gòu)及菜單鏈接的編輯功能，利用“屬性”面板我們可以輕松地編輯Spry菜單的結(jié)構(gòu)。2023/12/27廣東金融學(xué)院173．Spry菜單欄Spry菜單欄舉例2023/12/27廣東金融學(xué)院183．Spry菜單欄2023/12/27廣東金融學(xué)院194．模板概述模板的概念模板是一個特殊的網(wǎng)頁，在DreamweaverCS6中可以這個網(wǎng)頁的基礎(chǔ)上新建其它網(wǎng)頁。模板中通常包含了一個通用的布局和格式。網(wǎng)頁模板提供了網(wǎng)頁內(nèi)容可重復(fù)利用的一種機(jī)制，通過模板創(chuàng)建網(wǎng)頁一方面可以減少不必要的重復(fù)工作，另一方面，也可以讓網(wǎng)頁設(shè)計人員快速制作出一系列風(fēng)格一致的網(wǎng)頁。當(dāng)模板的內(nèi)容或格式改變了，則基于模板的所有網(wǎng)頁將同步發(fā)生改變。2023/12/27廣東金融學(xué)院205．創(chuàng)建和編輯模板新建模板2023/12/27廣東金融學(xué)院215．創(chuàng)建和編輯模板鎖定區(qū)域和可編輯區(qū)域DreamweaverCS6模板有兩種類型的區(qū)域：可編輯區(qū)域和鎖定區(qū)域?？删庉媴^(qū)域是模板中內(nèi)容可變的部分，鎖定區(qū)域則是模板中內(nèi)容靜態(tài)不變的部分。當(dāng)編輯模板時，可編輯區(qū)域和鎖定區(qū)域均可以修改。但是，在一個基于模板的網(wǎng)頁文檔中，我們只能修改模板的可編輯區(qū)域中的內(nèi)容，鎖定區(qū)域是不可編輯的。在默認(rèn)情況下，模板是鎖定的。要使模板有用，必須創(chuàng)建可編輯區(qū)域。2023/12/27廣東金融學(xué)院225．創(chuàng)建和編輯模板鎖定區(qū)域和可編輯區(qū)域我們可以標(biāo)記整個表格，也可以標(biāo)記表格中的某個單元格（或整行）作為可編輯區(qū)域，但不能標(biāo)記若干個單元格（不構(gòu)成行時的情況）為可編輯區(qū)域。層和層中的內(nèi)容是分離的元素，它們都可以被標(biāo)記為可編輯區(qū)域。層被標(biāo)記為可編輯區(qū)域之后，可以隨意改變其位置，而層的內(nèi)容被標(biāo)記為可編輯區(qū)域之后則可以任意修改層的內(nèi)容。2023/12/27廣東金融學(xué)院235．創(chuàng)建和編輯模板新建可編輯區(qū)域2023/12/27廣東金融學(xué)院245．創(chuàng)建和編輯模板刪除模板2023/12/27廣東金融學(xué)院256．使用模板創(chuàng)建網(wǎng)頁基本步驟2023/12/27廣東金融學(xué)院266．使用模板創(chuàng)建網(wǎng)頁更新基于模板的網(wǎng)頁2023/12/27廣東金融學(xué)院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廣東金融學(xué)院287．總結(jié)和作業(yè)本次課總結(jié)1)樣式表的概念和作用2)樣式表的分類及每類的特征3)模板的概念和作用2023/12/27廣東金融學(xué)院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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論