網(wǎng)站設(shè)計(jì)與網(wǎng)頁制作立體化項(xiàng)目教程（第4版） 課件 2-4-1 課件：英博特網(wǎng)站二三級(jí)頁面-產(chǎn)品案例頁面制作_第1頁
網(wǎng)站設(shè)計(jì)與網(wǎng)頁制作立體化項(xiàng)目教程（第4版） 課件 2-4-1 課件：英博特網(wǎng)站二三級(jí)頁面-產(chǎn)品案例頁面制作_第2頁
網(wǎng)站設(shè)計(jì)與網(wǎng)頁制作立體化項(xiàng)目教程（第4版） 課件 2-4-1 課件：英博特網(wǎng)站二三級(jí)頁面-產(chǎn)品案例頁面制作_第3頁
網(wǎng)站設(shè)計(jì)與網(wǎng)頁制作立體化項(xiàng)目教程（第4版） 課件 2-4-1 課件：英博特網(wǎng)站二三級(jí)頁面-產(chǎn)品案例頁面制作_第4頁
網(wǎng)站設(shè)計(jì)與網(wǎng)頁制作立體化項(xiàng)目教程（第4版） 課件 2-4-1 課件：英博特網(wǎng)站二三級(jí)頁面-產(chǎn)品案例頁面制作_第5頁
已閱讀5頁，還剩30頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

任務(wù)4：“英博特智能科技”企業(yè)網(wǎng)站二三級(jí)頁面布局第二篇：項(xiàng)目實(shí)戰(zhàn)篇4.1產(chǎn)品案例頁面制作4-1

產(chǎn)品案例頁面制作能力要求學(xué)習(xí)導(dǎo)覽（1）掌握豎向二級(jí)導(dǎo)航菜單的制作。（2）掌握FontAwesome圖標(biāo)字體庫的使用。（3）會(huì)使用服務(wù)器端字體。（4）掌握背景屬性的設(shè)置方法，能夠設(shè)置背景顏色和圖像。（5）理解漸變屬性的原理，能夠設(shè)置漸變背景。任務(wù)概述本次任務(wù)完成“英博特智能科技”企業(yè)網(wǎng)站二級(jí)頁面產(chǎn)品案例頁面制作，經(jīng)過結(jié)構(gòu)分析，發(fā)現(xiàn)頁面頭部、橫幅廣告和頁尾與首頁一致，因此只需在首頁基礎(chǔ)上，更改中間內(nèi)容即可。搭建好產(chǎn)品案例頁面結(jié)構(gòu)后，主要完成左側(cè)豎向?qū)Ш街谱?、右?cè)產(chǎn)品案例圖文混排制作。4.1產(chǎn)品案例頁面制作任務(wù)思考（1）一級(jí)導(dǎo)航菜單左側(cè)的小圖標(biāo)可以用哪些方法實(shí)現(xiàn)？

（2）二級(jí)導(dǎo)航菜單的顯示和隱藏是如何實(shí)現(xiàn)的？

（3）網(wǎng)頁中如何換段和換行？

4.1產(chǎn)品案例頁面制作FontAwesome圖標(biāo)字體庫4.1產(chǎn)品案例頁面制作FontAwesome是一套圖標(biāo)字體庫和CSS框架，為我們提供可縮放的矢量圖標(biāo)，我們可以使用CSS所提供的所有特性對(duì)它們進(jìn)行更改，包括：大小、顏色、陰影或者其它任何支持的效果。步驟1：下載字體圖標(biāo)庫文件夾“font-awesome”，也可以用國(guó)內(nèi)外推薦的CDN。如果引用CDN，則步驟2可以省略。步驟2：復(fù)制整個(gè)font-awesome文件夾到項(xiàng)目中。步驟3：在HTML的<head>中引用font-awesome.min.css樣式表文件。步驟4：開始使用FontAwesome。FontAwesome圖標(biāo)字體庫4.1產(chǎn)品案例頁面制作（1）下載字體圖標(biāo)庫文件夾。①FontAwesome官網(wǎng)下載。通過站點(diǎn)/下載字體圖標(biāo)庫，我們選擇了V4.7版本，也可下載最新版本。下載后得到“font-awesome-4.7.0.zip”壓縮文件。②國(guó)內(nèi)推薦CDN。<linkrel="stylesheet"href="/font-awesome/4.7.0/css/font-awesome.css">③海外推薦CDN。<linkrel="stylesheet"href="/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">FontAwesome圖標(biāo)字體庫4.1產(chǎn)品案例頁面制作（2）復(fù)制字體圖標(biāo)庫文件夾到項(xiàng)目中。將下載后得到“font-awesome-4.7.0.zip”解壓縮，復(fù)制整個(gè)font-awesome文件夾到項(xiàng)目中。（3）在HTML的<head>中引用font-awesome.min.css。<linkrel="stylesheet"type="text/css"href="font-awesome-4.7.0/css/font-awesome.min.css">提示：href里的路徑根據(jù)項(xiàng)目中font-awesome.min.css所在實(shí)際路徑確定。（4）使用FontAwesome。<i>和<span>元素廣泛用于圖標(biāo)，F(xiàn)ontAwesome與內(nèi)聯(lián)元素一起使用。更改<i>和<span>元素字體大小或顏色，圖標(biāo)也會(huì)更改?？梢允褂们熬Y

fa

和圖標(biāo)的名稱來放置FontAwesome圖標(biāo)。FontAwesome圖標(biāo)字體庫4.1產(chǎn)品案例頁面制作【示例代碼】2-4-1.html。引用font-awesome.min.css<i>元素廣泛用于圖標(biāo)，使用前綴

fa

和圖標(biāo)的名稱來放置FontAwesome圖標(biāo)。CSS3服務(wù)器端字體4.1產(chǎn)品案例頁面制作瀏覽器顯示網(wǎng)頁上的字體只能局限在用戶電腦里已經(jīng)安裝的字體里，但每個(gè)用戶電腦里安裝的字體不盡相同，因此網(wǎng)頁里設(shè)置的字體在用戶電腦里未必能顯示出來。@font-face的作用是從網(wǎng)上下載并使用自定義字體，使頁面顯示字體不依賴用戶的操作系統(tǒng)字體環(huán)境。在@font-face規(guī)則中，先定義字體名稱（例如myFirstFont），然后指向字體文件。字體的URL使用小寫字母，大寫字母可能會(huì)在IE中產(chǎn)生意外結(jié)果。定義好字體后，再通過font-family屬性使用定義的字體。CSS3服務(wù)器端字體4.1產(chǎn)品案例頁面制作【示例代碼】2-4-2.html。步驟1：定義字體名稱，指向字體文件步驟2：通過font-family屬性使用定義的字體步驟3：使用定義的樣式使用了服務(wù)器端字體的文字樣式和默認(rèn)文字樣式的確有區(qū)別。CSS3新增背景屬性4.1產(chǎn)品案例頁面制作通過background-image屬性可以添加多張背景圖片，不同的背景圖片用逗號(hào)隔開，越靠前的圖片層級(jí)越高。通過background-image、background-repeat、background-position和background-size等屬性值可以實(shí)現(xiàn)多重背景圖像效果，各屬性值之間用逗號(hào)隔開。（1）background-image屬性設(shè)置多重背景CSS3新增背景屬性4.1產(chǎn)品案例頁面制作【示例代碼】2-4-3.html：background-image屬性設(shè)置多重背景案例。該示例實(shí)現(xiàn)了盒子四個(gè)角上分別放置了一張背景，從而實(shí)現(xiàn)了多重背景的放置。設(shè)置了4張背景圖片設(shè)置背景圖片不重復(fù)設(shè)置背景圖片位置在盒子的上、下、左、右四個(gè)角。（1）background-image屬性設(shè)置多重背景CSS3新增背景屬性4.1產(chǎn)品案例頁面制作（2）background-size屬性在CSS3中，background-size屬性用于設(shè)置背景圖像的大小，可以指定像素或百分比大小。如果指定的是百分比大小，則是相對(duì)于父元素的寬度和高度的百分比的尺寸，還有cover和contain兩個(gè)屬性值。background-size屬性值類型如下表所示。CSS3新增背景屬性4.1產(chǎn)品案例頁面制作（2）background-size屬性修改【示例代碼】2-4-3.html，在樣式表中增加如下代碼，保存后，在瀏覽器中查看，發(fā)現(xiàn)背景圖片大小發(fā)生了改變，每張背景圖片占所在父容器寬度的20%。background-size:20%,20%,20%,20%;增加background-size前增加background-size后CSS3新增背景屬性4.1產(chǎn)品案例頁面制作（3）background-origin屬性background-origin屬性指定了背景圖像的位置區(qū)域，屬性取值有content-box、padding-box和border-box。background-origin屬性取值如表2-4-2所示。CSS3新增背景屬性4.1產(chǎn)品案例頁面制作（3）background-origin屬性【示例代碼】2-4-4.html：background-origin設(shè)置不同屬性值案例。下面三幅效果圖顯示了background-origin設(shè)置不同值時(shí)，背景圖片開始渲染的位置也不同。content-boxborder-boxpadding-box設(shè)置background-origin屬性CSS3新增背景屬性4.1產(chǎn)品案例頁面制作（4）background-clip屬性背景從盒子左上角開始渲染，background-clip背景裁剪屬性是從指定位置開始裁切，屬性取值和background-origin一樣，包括content-box、padding-box和border-box。background-clip屬性取值如下表所示。雖然background-clip和background-origin屬性取值一樣，但含義完全不同。對(duì)于background-clip,

是指將背景圖片以border的尺寸、padding的尺寸或者content的尺寸進(jìn)行裁切，其得到的結(jié)果可能是不完整的背景，也就是其中的一部分(原理與截圖差不多)。而background-origin，是指將背景圖片放置到border范圍內(nèi)、padding范圍內(nèi)或者content范圍內(nèi)，其得到的結(jié)果是完整的背景(原理與圖片的縮放相似)。CSS3新增背景屬性4.1產(chǎn)品案例頁面制作（4）background-clip屬性分別把background-clip和background-origin屬性值設(shè)置為content-box，通過觀察，可以發(fā)現(xiàn)background-clip以content的尺寸大小進(jìn)行了裁切，背景圖不完整了。而background-origin是指將背景圖片放置到content范圍內(nèi)開始的起點(diǎn)，圖片沒有被裁切，只是背景圖片放置的起點(diǎn)位置發(fā)生變化而已。background-clip屬性

background-origin屬性CSS3新增背景屬性4.1產(chǎn)品案例頁面制作（5）background屬性background背景縮寫屬性可以在一個(gè)聲明中設(shè)置所有的背景屬性。可以設(shè)置的屬性分別是：background-color、background-position、background-size、background-repeat、background-origin、background-clip、background-attachment和background-image。語法如下：background:bg-colorbg-imageposition/bg-sizebg-repeatbg-originbg-clipbg-attachmentinitial|inherit;background-position和background-size屬性,之間需使用/分隔,且position值在前,size值在后。CSS3新增背景屬性4.1產(chǎn)品案例頁面制作（5）background屬性background屬性取值如下表所示。CSS3新增背景屬性4.1產(chǎn)品案例頁面制作（5）background屬性修改【示例代碼】2-4-3.html下方部分代碼：修改后代碼如下：【示例代碼】詳見2-4-3.html修改后的顯示效果和修改前是一樣的，background屬性是一種縮寫屬性，效果與分開設(shè)置一樣，但代碼更加精簡(jiǎn)了。CSS3新增背景屬性4.1產(chǎn)品案例頁面制作（6）背景透明度的設(shè)置通過引入RGBA模式，用rgba()函數(shù)使用紅(R)、綠(G)、藍(lán)(B)、透明度(A)的疊加來生成各式各樣的顏色。例如：使用RGBA模式為p元素指定透明度為0.5，顏色為紅色的背景。p{background-color:rgba(255,0,0,0.5);}RGBA模式屬性取值如下表所示。CSS3新增背景屬性4.1產(chǎn)品案例頁面制作（6）背景透明度的設(shè)置【示例代碼】2-4-5.html：RGBA模式。上圖只設(shè)置背景色為紅色：background-color:red。下圖用RGBA模式設(shè)置了透明度：rgba(255,0,0,0.3)。通過比較發(fā)現(xiàn)，右側(cè)圖片明顯帶有透明效果，顏色比左側(cè)紅色略淺。用RGBA模式設(shè)置背景顏色CSS3漸變4.1產(chǎn)品案例頁面制作漸變是網(wǎng)頁設(shè)計(jì)中使用頻率較高的一種效果，它可以讓元素看起來更有質(zhì)感。傳統(tǒng)的漸變實(shí)現(xiàn)方式是用圖像實(shí)現(xiàn)效果的，而CSS3能方便的實(shí)現(xiàn)元素的漸變，減少圖片下載的時(shí)間，同時(shí)使用漸變效果的元素會(huì)隨著瀏覽器的放大而效果更好。CSS3漸變（gradients）可以實(shí)現(xiàn)在兩個(gè)或多個(gè)指定的顏色之間顯示平穩(wěn)的過渡，主要定義了線性漸變和徑向漸變兩種類型的漸變。CSS3漸變4.1產(chǎn)品案例頁面制作（1）線性漸變（LinearGradients）創(chuàng)建一個(gè)線性漸變，需至少定義兩種顏色節(jié)點(diǎn)，顏色節(jié)點(diǎn)用于呈現(xiàn)平穩(wěn)過渡的顏色。同時(shí)，還可以設(shè)置一個(gè)起點(diǎn)和一個(gè)方向（或一個(gè)角度）。①方向線性漸變的方向主要包括向下/向上/向左/向右/對(duì)角等方向，如tobottom、totop、toright、toleft、tobottomright等。語法如下：background-image:linear-gradient(direction,color-stop1,color-stop2,...);CSS3漸變4.1產(chǎn)品案例頁面制作（1）線性漸變（LinearGradients）【示例代碼】2-4-6.html：線性漸變（設(shè)置方向）。實(shí)現(xiàn)了方向由下到上，顏色由紅色到黃色的線性漸變。CSS3漸變4.1產(chǎn)品案例頁面制作（1）線性漸變（LinearGradients）②角度如果想要在漸變的方向上做更多的控制，可以定義角度，而不用預(yù)定義方向。語法如下：background-image:linear-gradient(angle,color-stop1,color-stop2);角度對(duì)應(yīng)方向如圖所示：CSS3漸變4.1產(chǎn)品案例頁面制作（1）線性漸變（LinearGradients）【示例代碼】2-4-7.html：線性漸變（設(shè)置角度）。實(shí)現(xiàn)了角度為左上45度角，顏色由紅色過渡到黃色，再到藍(lán)色的線性漸變。CSS3漸變

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論