大學(xué)計(jì)算機(jī)高級(jí)應(yīng)用課件-樣式表和模板_第1頁(yè)
大學(xué)計(jì)算機(jī)高級(jí)應(yīng)用課件-樣式表和模板_第2頁(yè)
大學(xué)計(jì)算機(jī)高級(jí)應(yīng)用課件-樣式表和模板_第3頁(yè)
大學(xué)計(jì)算機(jī)高級(jí)應(yīng)用課件-樣式表和模板_第4頁(yè)
大學(xué)計(jì)算機(jī)高級(jí)應(yīng)用課件-樣式表和模板_第5頁(yè)
已閱讀5頁(yè)，還剩26頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第10講樣式表和模板《大學(xué)計(jì)算機(jī)高級(jí)應(yīng)用》2023/7/11本次課內(nèi)容1．樣式表概述；2．使用樣式表格式化網(wǎng)頁(yè)；3.Spry菜單欄4．模板概述；5．創(chuàng)建和編輯模板；6．使用模板創(chuàng)建網(wǎng)頁(yè)；7．總結(jié)和作業(yè)。2023/7/121．樣式表概述問(wèn)題的引出1)問(wèn)題一：通常情況下，網(wǎng)頁(yè)中有很多元素格式（如文本格式、超鏈接格式等）都采用相同的格式，對(duì)于這些相同格式，我們需要不厭其煩地對(duì)每個(gè)元素進(jìn)行重復(fù)設(shè)置，其工作量很大，而且也非常枯燥。2)問(wèn)題二：在網(wǎng)頁(yè)編輯或網(wǎng)頁(yè)維護(hù)過(guò)程中，我們可能需要對(duì)網(wǎng)頁(yè)中的某些格式進(jìn)行修改，但由于該格式在網(wǎng)頁(yè)中多次重復(fù)使用（如超鏈接格式），因此修改操作也同樣極其煩鎖，而且還很可能出現(xiàn)錯(cuò)改和漏改的問(wèn)題。2023/7/131．樣式表概述樣式表的概念樣式表（英文為CascadingStyleSheets，簡(jiǎn)稱(chēng)為CSS）是為了方便設(shè)置網(wǎng)頁(yè)元素的格式而制定的一系列規(guī)則，是對(duì)HTML標(biāo)記語(yǔ)言功能的補(bǔ)充。在網(wǎng)頁(yè)文檔中使用CSS技術(shù)，可以有效地?cái)U(kuò)充HTML語(yǔ)言的功能，對(duì)頁(yè)面的布局、字體、顏色、背景和其他效果實(shí)現(xiàn)更加精確的格式控制。此外，CSS技術(shù)在簡(jiǎn)化網(wǎng)頁(yè)的格式代碼、保持網(wǎng)站頁(yè)面風(fēng)格一致和減少重復(fù)性格式設(shè)置等方面，也發(fā)揮著重要的作用。2023/7/141．樣式表概述按保存方式不同，樣式表可分為：內(nèi)聯(lián)樣式表嵌入式樣式表外部樣式表按樣式表的作用規(guī)則不同，樣式表可分為：類(lèi)樣式標(biāo)簽樣式高級(jí)樣式2023/7/151．樣式表概述內(nèi)聯(lián)樣式表使用style屬性，直接把樣式表的內(nèi)容放在標(biāo)記里面，從而把特殊的樣式加入到由標(biāo)記控制的信息中。由于內(nèi)聯(lián)樣式表和某一標(biāo)記混在一起，不能被網(wǎng)頁(yè)中的其他元素引用，因此內(nèi)聯(lián)樣式表只適用于為單個(gè)標(biāo)記定義樣式表的情況。如：<table…bordercolor="#0066FF"style="border-collapse:collapse">2023/7/161．樣式表概述嵌入式樣式表使用style標(biāo)記將樣式表嵌入在HTML文件的頭部位置。嵌入式樣式表，可以在當(dāng)前網(wǎng)頁(yè)的任何位置引用。因此，如果要求定義的樣式表只能應(yīng)用于當(dāng)前網(wǎng)頁(yè)，可以選擇這種類(lèi)型的樣式表。2023/7/17<head>……<styletype="text/css">.table_frame{ border:thinsolid#0066FF;}</style></head>1．樣式表概述外部樣式表將樣式表保存在一個(gè)單獨(dú)的樣式表文件中，文件的擴(kuò)展名為“*.CSS”。由于外部樣式表以文件的方式單獨(dú)存儲(chǔ)，故整個(gè)站點(diǎn)中的網(wǎng)頁(yè)都可以引用到。類(lèi)樣式該類(lèi)樣式均以句點(diǎn)“.”開(kāi)頭，并且可以被網(wǎng)頁(yè)文件中的任何文本塊或其他元素引用。例如，可以創(chuàng)建名稱(chēng)為“.red”的類(lèi)樣式，設(shè)置“color”屬性為紅色，然后將該樣式應(yīng)用到一部分已定義樣式的段落文本中。2023/7/181．樣式表概述標(biāo)簽樣式使用標(biāo)簽樣式可以重定義特定標(biāo)記（如<P>或<H1>標(biāo)記等）的格式。例如，為<H1>標(biāo)記創(chuàng)建標(biāo)簽樣式，便可以重新定制標(biāo)記<H1>的格式，網(wǎng)頁(yè)文檔中所有用<H1>標(biāo)記設(shè)置了格式的文本都會(huì)立即更新為新的格式。高級(jí)樣式用于重定義特定標(biāo)記組合的格式或者所有包含特定ID屬性的標(biāo)記定義格式。2023/7/192．使用樣式表格式化網(wǎng)頁(yè)新建“.title_text”樣式表2023/7/1102．使用樣式表格式化網(wǎng)頁(yè)新建“.general_text”樣式表2023/7/1112．使用樣式表格式化網(wǎng)頁(yè)新建“textarea”樣式表2023/7/1122．使用樣式表格式化網(wǎng)頁(yè)新建鏈接樣式2023/7/1132．使用樣式表格式化網(wǎng)頁(yè)幾個(gè)問(wèn)題1)在a:link、a:visited、a:hover及a:active樣式表新建前和新建后，分別預(yù)覽網(wǎng)頁(yè)查看超鏈接的樣式有什么不同？2)在textarea樣式表新建前、新建后和編輯后，對(duì)網(wǎng)頁(yè)中的文本域表單對(duì)象有什么影響？3)在.title_text、.general_text樣式表新建前后，網(wǎng)頁(yè)中的文本格式有什么變化？2023/7/1142．使用樣式表格式化網(wǎng)頁(yè)引用樣式表附加樣式表引用類(lèi)樣式選擇網(wǎng)頁(yè)元素在“屬性”面板中的“樣式”下拉列表或“類(lèi)”下拉列表中選擇一個(gè)樣式一個(gè)元素可引用多個(gè)樣式，樣式采用疊加原則一個(gè)樣式可同時(shí)被多個(gè)網(wǎng)頁(yè)元素引用2023/7/1152．使用樣式表格式化網(wǎng)頁(yè)問(wèn)題：如果重新編輯上述創(chuàng)建的4個(gè)樣式，網(wǎng)頁(yè)中被格式化的元素會(huì)自動(dòng)同步變化嗎？為什么？2023/7/1163．Spry菜單欄Spry菜單欄“屬性”面板提供了Spry菜單結(jié)構(gòu)及菜單鏈接的編輯功能，利用“屬性”面板我們可以輕松地編輯Spry菜單的結(jié)構(gòu)。2023/7/1173．Spry菜單欄Spry菜單欄舉例2023/7/1183．Spry菜單欄2023/7/1194．模板概述模板的概念模板是一個(gè)特殊的網(wǎng)頁(yè)，在DreamweaverCS6中可以這個(gè)網(wǎng)頁(yè)的基礎(chǔ)上新建其它網(wǎng)頁(yè)。模板中通常包含了一個(gè)通用的布局和格式。網(wǎng)頁(yè)模板提供了網(wǎng)頁(yè)內(nèi)容可重復(fù)利用的一種機(jī)制，通過(guò)模板創(chuàng)建網(wǎng)頁(yè)一方面可以減少不必要的重復(fù)工作，另一方面，也可以讓網(wǎng)頁(yè)設(shè)計(jì)人員快速制作出一系列風(fēng)格一致的網(wǎng)頁(yè)。當(dāng)模板的內(nèi)容或格式改變了，則基于模板的所有網(wǎng)頁(yè)將同步發(fā)生改變。2023/7/1205．創(chuàng)建和編輯模板新建模板2023/7/1215．創(chuàng)建和編輯模板鎖定區(qū)域和可編輯區(qū)域DreamweaverCS6模板有兩種類(lèi)型的區(qū)域：可編輯區(qū)域和鎖定區(qū)域?？删庉媴^(qū)域是模板中內(nèi)容可變的部分，鎖定區(qū)域則是模板中內(nèi)容靜態(tài)不變的部分。當(dāng)編輯模板時(shí)，可編輯區(qū)域和鎖定區(qū)域均可以修改。但是，在一個(gè)基于模板的網(wǎng)頁(yè)文檔中，我們只能修改模板的可編輯區(qū)域中的內(nèi)容，鎖定區(qū)域是不可編輯的。在默認(rèn)情況下，模板是鎖定的。要使模板有用，必須創(chuàng)建可編輯區(qū)域。2023/7/1225．創(chuàng)建和編輯模板鎖定區(qū)域和可編輯區(qū)域我們可以標(biāo)記整個(gè)表格，也可以標(biāo)記表格中的某個(gè)單元格（或整行）作為可編輯區(qū)域，但不能標(biāo)記若干個(gè)單元格（不構(gòu)成行時(shí)的情況）為可編輯區(qū)域。層和層中的內(nèi)容是分離的元素，它們都可以被標(biāo)記為可編輯區(qū)域。層被標(biāo)記為可編輯區(qū)域之后，可以隨意改變其位置，而層的內(nèi)容被標(biāo)記為可編輯區(qū)域之后則可以任意修改層的內(nèi)容。2023/7/1235．創(chuàng)建和編輯模板新建可編輯區(qū)域2023/7/1245．創(chuàng)建和編輯模板刪除模板2023/7/1256．使用模板創(chuàng)建網(wǎng)頁(yè)基本步驟2023/7/1266．使用模板創(chuàng)建網(wǎng)頁(yè)更新基于模板的網(wǎng)頁(yè)2023/7/1276．使用模板創(chuàng)建網(wǎng)頁(yè)分離網(wǎng)頁(yè)文檔中使用的模板若要更改基于模板的網(wǎng)頁(yè)文檔的鎖定區(qū)域，必須將網(wǎng)頁(yè)文檔從模板中分離。將文檔分離后，整個(gè)文檔將變?yōu)榭删庉嫷?，并且?nèi)容和格式不變。執(zhí)行分離操作后，網(wǎng)頁(yè)文檔已經(jīng)和模板沒(méi)有任何聯(lián)系，即模板修改后，分離后的網(wǎng)頁(yè)文檔將不受其影響。2023/7/1287．總結(jié)和作業(yè)本次課總結(jié)1)樣式表的概念和作用2)樣式表的分類(lèi)及每類(lèi)的特征3)模板的概念和作用2023/7/1297．總結(jié)和作業(yè)作業(yè)1．內(nèi)聯(lián)

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論