css技術(shù)在網(wǎng)頁(yè)布局中的應(yīng)用_第1頁(yè)
css技術(shù)在網(wǎng)頁(yè)布局中的應(yīng)用_第2頁(yè)
css技術(shù)在網(wǎng)頁(yè)布局中的應(yīng)用_第3頁(yè)
全文預(yù)覽已結(jié)束

下載本文檔

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

文檔簡(jiǎn)介

css技術(shù)在網(wǎng)頁(yè)布局中的應(yīng)用

隨著網(wǎng)絡(luò)技術(shù)的快速發(fā)展，網(wǎng)站已成為部門管理和信息交流的新手段。藝術(shù)化的網(wǎng)站頁(yè)面設(shè)計(jì),能夠給人們帶來(lái)更大的視覺沖擊,是體現(xiàn)網(wǎng)站是否優(yōu)秀的一個(gè)重要方面。網(wǎng)絡(luò)環(huán)境下,網(wǎng)絡(luò)技術(shù)與網(wǎng)頁(yè)的視覺設(shè)計(jì)相互依存,網(wǎng)站設(shè)計(jì)逐漸由簡(jiǎn)單的純文本向圖形豐富的視覺多元化發(fā)展,而速度是網(wǎng)頁(yè)以及網(wǎng)頁(yè)美化設(shè)計(jì)的基本要素,沒有好的網(wǎng)絡(luò)傳送速度,就談不上是好的設(shè)計(jì)。在此基礎(chǔ)上,網(wǎng)頁(yè)的字體、頁(yè)面布局、色彩和圖片等設(shè)計(jì)構(gòu)成了整個(gè)頁(yè)面視覺效果的重要組成部分,受其設(shè)計(jì)效果和設(shè)計(jì)過(guò)程的操作復(fù)雜性以及顯示速度等因素影響,藝術(shù)化的網(wǎng)頁(yè)美化設(shè)計(jì)向計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)提出新的要求,因此各種新的技術(shù)層出不窮,為網(wǎng)站視覺設(shè)計(jì)提供了許多設(shè)計(jì)方案。1基于網(wǎng)絡(luò)的網(wǎng)絡(luò)美化設(shè)計(jì)1.1表現(xiàn)層的布局語(yǔ)言CSS技術(shù)是CascadingStyleSheets的簡(jiǎn)稱,即“層疊樣式表”。CSS是跨平臺(tái)瀏覽器之間的國(guó)際標(biāo)準(zhǔn)W3C中的一部分,是一種對(duì)WEB文檔添加樣式的簡(jiǎn)單機(jī)制,屬于表現(xiàn)層的布局語(yǔ)言,在CSS標(biāo)準(zhǔn)里,不僅重新定義了HTML原來(lái)的樣式,使CSS在格式定義方面具有特殊優(yōu)勢(shì),更加入了區(qū)塊設(shè)置、隨意位置擺放等頁(yè)面布局樣式設(shè)定,使CSS可以提供精確定位功能以及各種特殊效果,可以有效地對(duì)不同網(wǎng)頁(yè)的整體風(fēng)格以及同一頁(yè)面的不同部分實(shí)現(xiàn)更加精確的控制。從而為網(wǎng)頁(yè)布局和頁(yè)面效果的制作提供一種新途徑。1.2基于國(guó)家數(shù)據(jù)的，得到改變網(wǎng)頁(yè)的風(fēng)格和風(fēng)格信息CSS樣式表可以用于HTML中3個(gè)不同的層次:local(定義一個(gè)頁(yè)面的局部)、global(定義整個(gè)頁(yè)面)和linked(定義多個(gè)頁(yè)面)。為了使瀏覽器意識(shí)到CSS樣式表的存在,必須用特定的方法將CSS樣式表加入到HTML文檔中去,概括起來(lái)可以分為外部引用、內(nèi)部引用和局部引用三種。其中,鏈接外部CSS樣式文件是使樣式表功能發(fā)揮得最淋漓盡致的方法,它讓網(wǎng)頁(yè)的文字內(nèi)容與版面設(shè)計(jì)分開,網(wǎng)頁(yè)設(shè)計(jì)人員就可以將多個(gè)HTML文檔都鏈接到一個(gè)CSS樣式表。這個(gè)外部的CSS樣式表將設(shè)定所有與之相鏈接的網(wǎng)頁(yè)的外觀風(fēng)格。如果改變樣式表文件中的某一細(xì)節(jié),所有頁(yè)面都會(huì)隨之改變并反映出定義的風(fēng)格。<DIV>是用來(lái)為HTML文檔內(nèi)大塊(block-level)的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來(lái)構(gòu)成這個(gè)塊的,其中所包含元素特性由DIV標(biāo)簽的屬性來(lái)控制,或者是通過(guò)使用樣式表格式化這個(gè)塊來(lái)進(jìn)行控制。CSS+DIV制作的網(wǎng)站使得網(wǎng)站改版相對(duì)簡(jiǎn)單許多,很多問(wèn)題只需要改變CSS而不需要使用DreamWeaver等網(wǎng)頁(yè)編輯軟件對(duì)網(wǎng)頁(yè)結(jié)構(gòu)進(jìn)行重新設(shè)計(jì),從而降低網(wǎng)站改版的成本。大到門戶網(wǎng)站,小到不計(jì)其數(shù)的個(gè)人網(wǎng)站,都越來(lái)越關(guān)注DIV+CSS技術(shù)的標(biāo)準(zhǔn)化設(shè)計(jì),在DIV+CSS標(biāo)準(zhǔn)化的影響下,網(wǎng)頁(yè)設(shè)計(jì)人員已經(jīng)把這一要求作為行業(yè)標(biāo)準(zhǔn)。網(wǎng)絡(luò)上非常流行的三行三列式網(wǎng)頁(yè)布局,可以由網(wǎng)頁(yè)設(shè)計(jì)軟件如DreamWeaver、FrontPage進(jìn)行所見即所得式的表格設(shè)計(jì)完成,修改時(shí)對(duì)表格逐個(gè)進(jìn)行重新定位。如果使用DIV+CSS技術(shù),只需對(duì)CSS代碼進(jìn)行簡(jiǎn)單設(shè)置,即可生成所需的頁(yè)面布局,修改時(shí),只需改動(dòng)CSS代碼,即可對(duì)所有網(wǎng)頁(yè)的布局、風(fēng)格進(jìn)行改變:CSS文件主要代碼:最終效果如圖1所示。HTML文檔里引用CSS文件后,需要修改各版快的布局、背景色、字體、高度等,可直接在CSS文件里對(duì)應(yīng)的各版快代碼進(jìn)行修改,并同時(shí)在所有的HTML頁(yè)面中生效。1.4濾鏡的漸變應(yīng)用在PHOTOSHOP等圖形處理軟件使用濾鏡時(shí),選擇一個(gè)圖片,用軟件對(duì)其進(jìn)行模糊或銳化處理,或者將文字和圖像加上特殊效果,如浮雕、光暈等等,然后以GIF或JPEG格式發(fā)布到網(wǎng)頁(yè)上。這種情況下,文字就變成了圖像的存儲(chǔ)格式,而且網(wǎng)頁(yè)上加入過(guò)多圖像會(huì)延長(zhǎng)網(wǎng)頁(yè)的打開時(shí)間,從而影響整個(gè)網(wǎng)站的形象。CSS濾鏡可以很容易地為文本和圖片進(jìn)行模糊處理,比如加上彩色的投影、加上火焰的效果,甚至隨意地將圖片倒置等等。如果靈活應(yīng)用濾鏡,使濾鏡效果不斷變化和更替,還可以完成一些意想不到的漸變效果。當(dāng)把濾鏡和漸變效果結(jié)合到—起再應(yīng)用到一些script腳本程序中,就能夠產(chǎn)生絢麗的動(dòng)畫效果,設(shè)計(jì)者就可以建立起一個(gè)動(dòng)態(tài)交互的網(wǎng)頁(yè)。作為CSS技術(shù)的一個(gè)重要的組成部分,CSS濾鏡大大豐富了網(wǎng)頁(yè)樣式表的內(nèi)容,使CSS應(yīng)用擴(kuò)展到了網(wǎng)頁(yè)排版以外更廣闊的領(lǐng)域中。CSS是通過(guò)Filter屬性來(lái)對(duì)網(wǎng)頁(yè)對(duì)象發(fā)生作用的,它是一個(gè)對(duì)濾鏡進(jìn)行描述的字符串。Filter和其他樣式的定義和應(yīng)用方式一樣,可以直接定義在HTML文檔的<head>和</head>之間,這屬于內(nèi)部引用;也可以通過(guò)Style標(biāo)簽定義在HTML的行內(nèi)進(jìn)行定義,這屬于局部引用;還有一種方法是建立一個(gè)CSS的文件,然后嵌入到HTML文檔中,這屬于外部引用。語(yǔ)法結(jié)構(gòu)分別如下:Filter樣式屬性允許多個(gè)濾鏡效果的疊加,也就是說(shuō),可以讓一個(gè)HIML元素同時(shí)顯示多個(gè)濾鏡的效果。HTML濾鏡屬性只能作用于HTML控件元素上,如<body>、<img>等。例:設(shè)置CSS濾鏡的blur屬性代碼如下:最終效果如圖2所示:其中,圖2左側(cè)的是原始圖片,右側(cè)是增加CSS濾鏡blur屬性后的效果圖片。由此可見CSS濾鏡可以使用極少的代碼文本,實(shí)現(xiàn)以往只有用專業(yè)圖形處理軟件才能達(dá)到的效果。2穩(wěn)定的土壤結(jié)構(gòu)CSS是網(wǎng)頁(yè)制作的一種新技術(shù),可以大大縮減頁(yè)面代碼,提高頁(yè)面瀏覽速度

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論