CSS樣式表和模板

第8章CSS樣式表和模板通過本章學習應能夠熟練應用CSS和模板來設計網(wǎng)頁頁面元素的統(tǒng)一格式本章大綱8.1CSS樣式8.2模板8.1CSS樣式表和模板8.1.1CSS樣式的概念8.1.2CSS樣式面板8.1.3創(chuàng)立CSS樣式8.1.4CSS樣式的應用8.1.5CSS樣式的編輯8.1.6鏈接和導入樣式表8.1.7導出樣式表8.1.8設置CSS的屬性8.1.9Spry構件樣式8.1.1CSS樣式一、CSS樣式1.定義2.CSS樣式的類型自定義樣式：類〔可用于任何HTML元素〕HTML標簽樣式：標簽〔重新定義HTML元素〕特色超級鏈接樣式：復合內(nèi)容〔基于選擇的內(nèi)容〕指定HTML元素樣式：ID〔僅用于一個HTＭＬ元素〕CSS定義CSS即(CascadingStyleSheet),層疊樣式表或級聯(lián)樣式表，樣式就是用來控制一個文檔中某一文本區(qū)域外觀的一組格式屬性。層疊樣式表那么可以用來一次對假設干個文檔所有的樣式進行控制CSS樣式使網(wǎng)頁中多處對象都采用同樣屬性，一次設置，屢次應用CSS樣式表位于文檔中head標簽之內(nèi)CSS樣式可以對HTML標簽的默認格式進行重定義，可以對文本區(qū)域進行重定義，對標準文本進行重定義優(yōu)點：可以同時將一個樣式鏈接到多個文檔當CSS樣式被修改后，所有應用該樣式的對象會被自動更新8.1.2CSS樣式面板1.翻開CSS樣式面板的方法選擇命令“窗口”|“CSS樣式”2.CSS樣式面板CSS樣式面板編輯樣式刪除CSS規(guī)劃新建CSS規(guī)則附加樣式表‘類別’視圖‘列表’視圖‘設置屬性’視圖8.1.3創(chuàng)立CSS樣式僅對當前文檔新建CSS樣式表文件創(chuàng)立僅對當前文檔的CSS樣式翻開“新建Css樣式”對話框單擊CSS樣式面板中的新建按鈕選擇所建樣式的類型類〔可用于任何HTML元素〕標簽〔重新定義HTML元素〕復合內(nèi)容〔基于選擇的內(nèi)容〕ID〔僅用于一個HTＭＬ元素輸入或選擇樣式名稱:樣式名稱.<樣式文件名>選擇樣式名稱：當類型為標簽、高級時選擇選擇樣式定義的存放位置或作用范圍:僅對該文檔單擊”確定”,翻開CSS樣式定義對話框?qū)υ捒虻脑O置:詳見設置CSS樣式屬性特色超級鏈接名稱的函義1.鏈接名稱的含義a:link——未被訪問過的鏈接a:visited——訪問過的鏈接a:hover——鼠標移上時的鏈接a:active——被點擊的鏈接2.組合樣式實例使一個頁面中的超級鏈接具有不同的特色在表格中創(chuàng)立超級鏈接文本創(chuàng)立鏈接各狀態(tài)的特色a:link、a:visited、a:hover、a:active自定義一個CSS的偽類:.<類名>，如：.abc，任意設置一項定義組合樣式:.<類名>a:link等，如：.abca:link〔設置要與a:link等的設置有所區(qū)別〕選中單元格〔一個或多個〕應用類創(chuàng)立CSS樣式表文件翻開”新建Css樣式”對話框“文本”菜單下的”CSS樣式”中的”新建CSS樣式”命令單擊CSS樣式面板中的新建按鈕輸入或選擇樣式名稱:同前選擇所建樣式的類型類:用戶自定義樣式名稱,可以在HTML中被調(diào)用標簽:重新定義HTML各標簽(標記)的默認格式高級:用于定義組合樣式或具有特殊序列號(ID)的樣式,主要用于設置超級鏈接的特色(顏色)選擇樣式定義的存放位置或作用范圍:新樣式表文件單擊”確定”,翻開保存樣式表對話框選擇路徑，輸入樣式表文件名，單擊“確定”對話框的設置:詳見設置CSS的屬性8.1.4CSS樣式的應用1.樣式的應用標簽和高級類型的樣式:自動應用到相應的網(wǎng)頁元素上,比方建立了<Td>標簽的樣式后,網(wǎng)頁上所有單元格的文字都自動變?yōu)樾碌母袷筋悺远x樣式的應用:選擇要應用樣式的元素在屬性面板的”類”下拉表中選擇自定義的類2.已經(jīng)創(chuàng)立樣式文件中樣式的應用見8.1.6鏈接和導入樣式表編輯或刪除CSS樣式編輯選擇元素后執(zhí)行以下操作之一:翻開樣式定義對話框雙擊選定的CSS樣式名稱單擊樣式面板中的“編輯樣式”按鈕右擊要編輯的CSS樣式，在快捷菜單中選擇“編輯”命令在對話框中進行設置(同創(chuàng)立)單擊“確定”刪除:選擇CSS樣式單擊“刪除CSS樣式”按鈕8.1.6鏈接和導入樣式表鏈接或?qū)胪獠繕邮奖砦募词菍⒁褎?chuàng)立的外部樣式表文件導入到當前文檔中,用樣式表文件,格式化網(wǎng)頁中的指定元素步驟翻開”鏈接外部樣式表”對話框:單擊“CSS樣式面板”右一方的“附加樣式表”按鈕在“文件/URL”文本框中輸入文件的地址和文件名,或單擊“瀏覽”,在磁盤中選擇樣式表文件在“添加為”處選擇“CSS樣式表文件”添加到此文檔中的方式導入鏈接確定8.1.7導出樣式表導出樣式表即從一個網(wǎng)頁文檔中導出樣式創(chuàng)立一個新的CSS樣式表文件。步驟：翻開“導出樣式為CSS文件對話框：執(zhí)行“文件”|“導出”|“CSS樣式”命令〔或“文本”|“CSS樣式”|“導出”命令〕在對話框中輸入樣式文件的名稱單擊“保存”按鈕8.1.8設置CSS的屬性1.類型設置對于文字的格式設置：字體、大小、行高、樣式和修飾2.背景設置網(wǎng)頁背景的各種設置:重復:不重復、重復、橫向重復、縱向重復附件：圖像能否跟隨網(wǎng)頁一起滾動3.區(qū)塊設置4.方框設置5.邊框設置6.列表設置7.定位設置8.擴展功能區(qū)塊、方框等設置1.區(qū)塊設置：主要對文字的整體效果和段落縮進等進行設置單詞、字母間距垂直對齊：對象的對齊方式文本對齊文字縮進：中文首行文字的縮進〔字號為9pt，縮進2個字，設置為18pt，12號字，設置為24pt)2.方框設置：主要對圖像的大小、水平和垂直方向上的空白，文字環(huán)繞等進行設置浮動：環(huán)繞效果對象與文邊的相對位置去除：對象的邊上是否允許出現(xiàn)層填充：對象邊框和其中內(nèi)容間的空白,瀏覽時的效果邊界：對象邊框四周的空白區(qū)域邊框、列表、定位設置1.邊框設置主要給對象添加邊框，設置邊框的顏色、粗細、樣式等樣式：邊框為虛線、點劃線、實線、雙線、槽狀、脊狀、凹陷、突出等形狀寬度、顏色：等同前2.列表設置：對文本前面的工程符號的樣式進行設置類型：符號的類型為圓點、圓圈、方塊等工程符號圖像：在圖像文件中設置工程符號樣式位置：貼近左側(cè)或向右縮進3.定位對層進行設置(實際操作很少被用到)類型：定位方式為絕對、相對、靜態(tài)等顯示：同層的屬性置入：瀏覽器中的位置剪切:定義層的可見局部擴展功能1.分頁:目前尚無瀏覽器支持該功能2.光標:改變鼠標放在該項上時的形狀Hand：手Crosshair：交叉十字Text：文本選擇符號Wait：漏斗Default：默認Help：默認問號E-resize：向東的箭頭Ne-resize：向東北的箭頭N-resize：向北的箭頭Nw-resize：向西北的箭頭S-resize：向西南的箭頭Auto：正常鼠標3.過濾器:實現(xiàn)濾鏡效果濾鏡效果濾鏡效果1.蒙版濾鏡代碼:Alpha(Opacity=100,FinishOpacity=0,Style=2)Opacity:不透明的程度，用百分比表示，0~100，0完全透明，100完全不透明FinishOpacity：透明漸進的效果，需同時與Opacity一起設置，0~100(同上)Style：指定漸進的形狀。0——沒有漸進，1——直線漸進，2——圓形漸進，3——矩形輻射特別提示：濾鏡效果只有在瀏覽器中才能看到效果上邊的各參數(shù)表達式要用逗號分隔開2.圖片波紋濾鏡效果2——圖片波紋代碼格式：wave(Add=0,Freq=8,LightStrength=10,Phase=0,Strength=6)參數(shù)的含義：Add：是否把圖片打亂,0打亂，1不打亂Freq：波紋的頻率LightStrength：正弦波的光照強度Phase：正弦波開始的偏移量Strength：設置正弦波的幅度8.1.9Spry構件中的CSS設置一、Spry面板樣式設置二、菜單欄樣式設置一、Spry構件樣式設置1.限制構件寬度:.CollapsiblePanel、.TabbedPanels、.Accordion的CSS規(guī)那么選中構件單擊”編輯樣式”按鈕在”定位”選項中設置”寬”參數(shù)2.構件中各種背景顏色選中構件雙擊如下相應CSS規(guī)那么,修改內(nèi)容局部背景顏色.CollapsiblePanelcontent、.TabbedPanelscontent、.Accordioncontent.xxxxxxxtab〔設置標簽標題的背景色〕.xxxxxxxHover(鼠標移過時背景顏色),同上3.構件中文本的樣式3.構件中文本的樣式選中要更改的規(guī)那么在CSS面板的“屬性區(qū)域中”找到更改的選項.xxxxxxxxcontent翻開，在CSS對話框的“類型”中設置二、SPRY菜單欄樣式設置1.菜單項尺寸設置在“CSS樣式”面板中選中：ul.MenuBarHorizontalli(主菜單〕ul.MenuBarHorizontalulli(子菜單〕在“屬性”區(qū)域的“定位”選項中設置width2.子菜單定位在“CSS樣式”面板中選中ul.MenuBarHorizontalul在“方框”選項卡中設置margin〔與主菜單的間距〕參數(shù)3.菜單欄的背景與文本樣式設置3.菜單欄的背景與文本樣式設置1〕鼠標未指向狀態(tài)在“CSS樣式”面板中雙擊：ul.MenuBarHorizontala在“類型”與“背景”選項卡中設置參數(shù)2〕鼠標指向欄目狀態(tài)在“CSS樣式”面板中雙擊：ul.MenuBarHorizontala:hover或ul.MenuBarHorizontala:focus分別在“類型”與“背景”選項卡中設置參數(shù)3〕上級菜單欄目狀態(tài)在“CSS樣式”面板中分別雙擊：ul.MenuBarHorizontala.MenuBarItem-Hover，ul.MenuBarHorizontala.MenuBarItem-SubmenuHover，ul.MenuBarHorizontala.MenuBarSub-menuVisible分別在“類型”與“背景”選項卡中設置參數(shù)8.2模板模板:模板是用來產(chǎn)生帶有固定特征和共同格式的文檔模具,是用戶進行批量設計網(wǎng)頁文檔的框架.網(wǎng)頁常用的固定組成局部logo：即網(wǎng)站的徽標，這是一個網(wǎng)站的標志，在每個頁面最頂部的左上角，標準大小為88px×31px；Banner:即頁面上的宣傳條，放在頁面的任意位置NavBar:即頁面上的導航條，一般在頁面的頂部和底部Copyright:即頁面上的版權信息，一般在頁面的底部模板文件：文件擴展名.dwt，存放在Templates〔自動生成〕文件夾中8.2.1創(chuàng)立模板8.2.2編輯模板8.2.3模板的應用8.2.1創(chuàng)立模板1.創(chuàng)立新的空白模板翻開“資源面板”：“窗口”|“資源”顯示模板窗口：單擊“資源面板”左側(cè)的模板按鈕單擊“新建模板”按鈕給模板的重命名2.對已有的模板進行修改翻開模板文檔:雙擊已有模板名稱在文檔窗口中編輯模板3.把現(xiàn)有文檔設為模板翻開文檔執(zhí)行“文件”|“另存為”命令輸入名稱，單擊“保存”按鈕編輯模板1.編輯模板網(wǎng)頁添加logo、添加導航內(nèi)容、添加banner、添加版權等2.定義可編輯區(qū)域〔可重復區(qū)域〕在創(chuàng)立模板時,要設置每個網(wǎng)頁的獨立編輯的區(qū)域，即在具體網(wǎng)頁中可編輯的局部可編輯區(qū)域的定義:將光標定位在模板中設為可編輯的區(qū)域右擊,在快捷菜單中選擇”模板”|”新建可編輯區(qū)域”還可通過“插入面板”下的“模板”按鈕操作在對話框中輸入?yún)^(qū)域的名稱3.刪除可編輯區(qū)域定位光標右擊,選擇”模板”|”刪除模板標記”可重復區(qū)域可重復生成頁面中的某些局部：重復一個表格行等設置重復區(qū)域:定位光標，“右擊”在彈出式菜單中選擇“模板”→“新建重復區(qū)域”命令編輯：在重復區(qū)域插入表格、編輯表格、在每個單元格中插入“可編輯區(qū)域”，根據(jù)模板新建網(wǎng)頁在重復區(qū)域的可編輯區(qū)域中，插入圖片等復制重復區(qū)域：單擊重復區(qū)域的“+”按鈕編輯：同上重復區(qū)域的增加應用模板1.應用模板1)用模板新建網(wǎng)頁翻開”資源”面板右擊”模板文件”,選擇”從模板新建”2)用模板更新已存在的網(wǎng)頁翻開要套用模板的網(wǎng)頁