IWPDT4網(wǎng)張設計基礎(chǔ)教材課件

1、1課題目標描述樣式表樣式表的應用在HTML中的使用在F2K中的使用腳本語言第1頁，共29頁。2樣式表（CSS）CSS（Cascading Style Sheets）：級聯(lián)樣式表樣式表：是用來擴展HTML在文字樣式與版面編排上的多樣化的一套標準CSS的基本思想：將網(wǎng)頁中的內(nèi)容與樣式設定分開第2頁，共29頁。3樣式表的特點減少圖形文件的使用使你的網(wǎng)頁瘦身，加快下載速度集中管理樣式方便網(wǎng)頁樣式的修改共享樣式可以將樣式表同網(wǎng)站上所有的頁面連接，創(chuàng)建一個統(tǒng)一的，一致的頁面風格分類使用樣式可以在一個HTML網(wǎng)頁文件上套用多個樣式表，使得創(chuàng)建頁面時有更大的靈活性第3頁，共29頁。4樣式表的特點CSSHTML

2、文件HTML文件HTML文件圖1：共享樣式HTML文件CSSCSSCSS圖2：分類使用樣式第4頁，共29頁。5建立樣式表一個樣式表可以包含一個或多個規(guī)則定義樣式表的基本格式：選擇器樣式規(guī)則示例：H2Color：Blue; 2) BODY Background:Green;Color:Blue; Font-size:12pt;Font-family:宋體; 第5頁，共29頁。6選擇器選擇器識別對應規(guī)則應用的元素選擇器的類別：HTML 選擇器類選擇器ID選擇器上下文選擇器第6頁，共29頁。7HTML選擇器HTML選擇器使用HTML元素的名稱，唯一的不同的是沒有括號演示例1：Pfont-style:

3、italic;font-weight:bold;color:blue第7頁，共29頁。8類選擇器(Class Selector)類選擇器：可以讓不同的標記套用相同的樣式定義格式：1).類名樣式規(guī)則2)標記名.類名樣式規(guī)則演示例2：第8頁，共29頁。9ID選擇器(ID Selector)ID選擇器使用HTML元素的ID屬性ID選擇器與類選擇器的作用相近定義格式：#ID名稱樣式規(guī)則演示例3：第9頁，共29頁。10上下文選擇器上下文選擇器：是按照特定的情況，另外定義一套規(guī)則定義格式：上級標記名 下級標記名樣式規(guī)則演示例4：第10頁，共29頁。11標記樣式的繼承標記樣式的繼承：括在里面的標記將擁有外部

4、標記的樣式屬性演示例5：第11頁，共29頁。12樣式規(guī)則字體樣式Font 字體綜合設定Font-family 設定字體Font-size 設定字體大小Font-style 設定斜體Font-weight 設定字體粗細演示例6：第12頁，共29頁。13樣式規(guī)則（繼）文本樣式Letter-spacing 字符間距Text-indent 段落縮排Line-height 行高Text-align 文本水平對齊Vertical-align 文本垂直對齊第13頁，共29頁。14樣式規(guī)則（繼）項目列表樣式List-style-type 項目符號樣式List-style-image 項目符號圖案List-st

5、yle-position 項目符號位置第14頁，共29頁。15樣式規(guī)則（繼）顏色與背景樣式Color 前景顏色Background-color 背景顏色Background-image 背景圖案Background-repeat背景是否重復顯示Background-attachment背景滾動或固定Background-position背景圖案位置演示例7:第15頁，共29頁。16樣式規(guī)則（繼）版面配置樣式Margin邊緣距離Padding 邊框?qū)挾菳order-width 邊界填白Left元件與窗口左端距離Top元件與窗口頂端距離Position 元件的絕對位置與相對位置Z-index垂直定

6、位第16頁，共29頁。17樣式表與HTML的結(jié)合下面為幾種可以聯(lián)合樣式表與HTML的方法直接樣式表 內(nèi)嵌樣式表 外部樣式表 鏈接外部樣式表導入外部樣式表第17頁，共29頁。18直接樣式表直接樣式表：使用標記的STYLE屬性用于將樣式表規(guī)則直接應用到不同的元素上例如：紅色象征著熱情藍色象征著澄靜第18頁，共29頁。19內(nèi)嵌樣式表內(nèi)嵌樣式表：使用STYLE標記標記一般放在部分樣式規(guī)則放在.標記之間標記的屬性：TYPE該參數(shù)定義了Internet Media類型例如：選擇器樣式規(guī)則第19頁，共29頁。20鏈接外部樣式表鏈接外部樣式表:使用LINK標記外部樣式表是一個單獨的文檔，以 .CSS 為擴展名

7、例如：注：必須包含“REL=stylesheet”屬性，否則瀏覽器不能裝載樣式表演示例8：第20頁，共29頁。21導入外部樣式表導入外部樣式表：使用 import 關(guān)鍵字import 關(guān)鍵字必須定義在之間import 必須是樣式表中的第一項定義例如： import anotherstyle.css; H1 color: blue;font-family: Arial第21頁，共29頁。22FrontPage的用法在FrontPage 2000中有以下幾種方式使用樣式表將直接樣式應用到網(wǎng)頁的單個元素在一個網(wǎng)頁中創(chuàng)建一個嵌入式樣式表將外部樣式表鏈接到網(wǎng)頁演示第22頁，共29頁。23腳本語言簡介從廠

8、家分：VBScriptJavaScript從執(zhí)行方式分：客戶端腳本服務器端腳本第23頁，共29頁。24服務器端腳本W(wǎng)eb服務器CGI腳本W(wǎng)eb客戶機瀏覽器處 理數(shù)據(jù)輸入第24頁，共29頁。25客戶端腳本W(wǎng)eb服務器CGI腳本動態(tài)服務器網(wǎng)頁Web客戶機瀏覽器Active XJavaScript處 理數(shù)據(jù)輸入處 理第25頁，共29頁。26為什么使用腳本？對一個設計者來說，腳本和DHTML可以用來改變樣式- - 顏色，外形，其它元素改變網(wǎng)頁中實際的文本和圖片在頁面周圍移動物體使頁面生動在網(wǎng)頁中加入多種效果通過事件處理器處理事件第26頁，共29頁。27動態(tài)服務器網(wǎng)頁動態(tài)服務器頁面由“ .asp”文件擴展名表示其優(yōu)點是您可以創(chuàng)建動態(tài)的網(wǎng)頁，但是返回到瀏覽器的是可以瀏覽的標準HTML文件ASP文件可以包含標準HTML和腳本語言代碼第27頁，共29頁。28動態(tài)服務器網(wǎng)頁的瀏覽過程如果考慮瀏覽過程，客戶需要向服務器請求頁面。服務器定位頁面并且返回給客戶如果是一個標準的.htm文件，服務器從磁盤中讀取文件并且送回給瀏覽器顯示如果是一個.asp文件，首先服務器執(zhí)行在頁面中嵌入的代碼，然后返回頁面