《網(wǎng)頁(yè)制作基礎(chǔ)（Dreamweaver CS6）（第3版）》項(xiàng)目4 創(chuàng)建網(wǎng)頁(yè)_第1頁(yè)
《網(wǎng)頁(yè)制作基礎(chǔ)（Dreamweaver CS6）（第3版）》項(xiàng)目4 創(chuàng)建網(wǎng)頁(yè)_第2頁(yè)
《網(wǎng)頁(yè)制作基礎(chǔ)（Dreamweaver CS6）（第3版）》項(xiàng)目4 創(chuàng)建網(wǎng)頁(yè)_第3頁(yè)
《網(wǎng)頁(yè)制作基礎(chǔ)（Dreamweaver CS6）（第3版）》項(xiàng)目4 創(chuàng)建網(wǎng)頁(yè)_第4頁(yè)
《網(wǎng)頁(yè)制作基礎(chǔ)（Dreamweaver CS6）（第3版）》項(xiàng)目4 創(chuàng)建網(wǎng)頁(yè)_第5頁(yè)
已閱讀5頁(yè)，還剩48頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

項(xiàng)目四創(chuàng)建網(wǎng)頁(yè)應(yīng)用div布局網(wǎng)頁(yè)結(jié)構(gòu)，規(guī)劃?rùn)谀繎?yīng)用超級(jí)鏈接制作導(dǎo)航欄插入網(wǎng)站所需的圖片、視頻動(dòng)畫，豐富網(wǎng)頁(yè)內(nèi)容用CSS設(shè)計(jì)網(wǎng)站風(fēng)格、搭配顏色、設(shè)計(jì)文字格式等

教學(xué)目標(biāo)：教學(xué)重點(diǎn):超級(jí)鏈接

插入圖片和視頻CSS樣式應(yīng)用教學(xué)難點(diǎn):CSS樣式應(yīng)用教學(xué)方法:

任務(wù)驅(qū)動(dòng)法任務(wù)一、制作基本網(wǎng)頁(yè)知識(shí)點(diǎn)：利用DIV+CSS設(shè)計(jì)網(wǎng)頁(yè)的基本布局在Div中嵌套Div標(biāo)簽創(chuàng)建CSS樣式CSS樣式使用方式任務(wù)描述網(wǎng)站規(guī)劃的效果按照規(guī)劃圖，將網(wǎng)頁(yè)布局劃分為6塊，如圖4-2所示，本任務(wù)將利用DIV+CSS設(shè)計(jì)網(wǎng)頁(yè)的基本布局，并創(chuàng)建相應(yīng)的CSS樣式。

圖4-2網(wǎng)頁(yè)布局任務(wù)分析本任務(wù)在設(shè)計(jì)網(wǎng)頁(yè)的布局結(jié)構(gòu)時(shí)，先不用考慮背景顏色、字體大小等細(xì)節(jié)。利用DIV+CSS制作網(wǎng)頁(yè)布局時(shí)，要注意的是頁(yè)面的寬度，分析素材的大小，確定各個(gè)功能塊的寬度和高度，再將各種以后要用到的CSS樣式先建立好，方便后面設(shè)置樣式。一、操作體驗(yàn)操作步驟按照教材操作步驟完成任務(wù)一。二、知識(shí)鏈接1．外部樣式 這種形式是把css單獨(dú)寫到一個(gè)css文件內(nèi)，然后在源代碼的head標(biāo)簽內(nèi)以link方式鏈接。它的好處是不但本頁(yè)可以調(diào)用，其它頁(yè)面也可以調(diào)用，是最常用的一種形式。鏈接外部樣式表的代碼如下所示：<head><linkhref="layout.css"rel="stylesheet"type="text/css"/></head>CSS樣式在網(wǎng)頁(yè)中使用的方式2．內(nèi)部樣式這種形式是內(nèi)部樣式表，它是以<style>和</style>結(jié)尾，寫在源代碼的head標(biāo)簽內(nèi)。這樣的樣式表只能針對(duì)本頁(yè)有效。不能作用于其它頁(yè)面。內(nèi)部樣式的代碼如下所示：<head><style>h2{color:#f00;}#container{ margin:auto; width:960px;}</style></head>3．行內(nèi)樣式這種在標(biāo)簽內(nèi)以style標(biāo)記的為內(nèi)部樣式，內(nèi)部樣式只針對(duì)標(biāo)簽內(nèi)的元素有效，因其沒有和內(nèi)容相分離，所以不建議使用。如：<pstyle="font-size:18px;">內(nèi)部樣式</p>4．導(dǎo)入樣式導(dǎo)入樣式是以@importurl標(biāo)記所鏈接的外部樣式表，它一般常用在另一個(gè)樣式表內(nèi)部。如layout.css為主頁(yè)所用樣式，那么我們可以把全局都需要用的公共樣式放到一個(gè)global.css的文件中，然后在layout.css中以@importurl("/css/global.css")的形式鏈接全局樣式，這樣就使代碼達(dá)到很好的重用性。三、拓展與提高CSS優(yōu)先級(jí)? id優(yōu)先級(jí)高于class? 后面的樣式覆蓋前面的? 指定的高于繼承? 行內(nèi)樣式高于內(nèi)部或外部樣式? 總結(jié)：?jiǎn)我坏?id)高于共用的(class)，有指定的用指定的，無(wú)指定則繼承離它最近試一試:分析下圖的網(wǎng)頁(yè)欄目設(shè)置情況，使用Div+CSS完成布局設(shè)計(jì)。注意Div的嵌套及類樣式的使用。任務(wù)二、制作導(dǎo)航欄知識(shí)點(diǎn)：掌握水平導(dǎo)航按鈕的簡(jiǎn)單制作方法。掌握超鏈接的建立方法學(xué)習(xí)超鏈接的四種偽類樣式

任務(wù)描述網(wǎng)站的導(dǎo)航是網(wǎng)站內(nèi)容架構(gòu)的體現(xiàn)，網(wǎng)站導(dǎo)航是否合理是網(wǎng)站易用性評(píng)價(jià)和用戶體驗(yàn)的重要指標(biāo)之一。為了更好的提升用戶體驗(yàn)，更好的對(duì)用戶進(jìn)行引導(dǎo)和消費(fèi)轉(zhuǎn)化，導(dǎo)航設(shè)計(jì)的科學(xué)性成為網(wǎng)站框架構(gòu)成的重中之重。本任務(wù)學(xué)習(xí)水平導(dǎo)航的制作，在導(dǎo)航的制作過(guò)程中學(xué)習(xí)建立超鏈接，并學(xué)習(xí)當(dāng)鼠標(biāo)移到超鏈接上時(shí)樣式改變的偽類設(shè)置。任務(wù)分析本任務(wù)用超級(jí)鏈接制作文字導(dǎo)航，設(shè)置當(dāng)鼠標(biāo)移到導(dǎo)航上時(shí)文字顏色大小和背景顏色改變的動(dòng)態(tài)效果。一、操作體驗(yàn)操作步驟按照教材操作步驟完成任務(wù)二。二、知識(shí)鏈接超級(jí)鏈接超鏈接是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)，也可以是相同網(wǎng)頁(yè)上的不同位置，還可以是一個(gè)圖片，一個(gè)電子郵件地址，一個(gè)文件，甚至是一個(gè)應(yīng)用程序。選定已經(jīng)輸入的文本或圖片，，在“屬性”面板中設(shè)定。拓展與提高超鏈接的四種樣式超鏈接涉及到一個(gè)新的概念：偽類。CSS超鏈接樣式的各屬性的順序不能顛倒，這個(gè)順序非常重要。CSS中關(guān)于超鏈接的四種樣式一般正常順序?yàn)椋簂ink，visited，hover，active，即：a:link{color:#FF0000}/*未訪問(wèn)的鏈接*/a:visited{color:#00FF00}/*已訪問(wèn)的鏈接*/a:hover{color:#FF00FF}/*鼠標(biāo)移動(dòng)到鏈接上*/a:active{color:#0000FF}/*選定的鏈接*/試一試 效果參照附書光盤“素材\項(xiàng)目四\試一試\4-2\nav-1.html”和“nav-2.html”，制作水平和垂直導(dǎo)航欄，任務(wù)三、制作豐富多彩的網(wǎng)頁(yè)知識(shí)點(diǎn)：掌握在網(wǎng)頁(yè)中插入圖像的方法掌握在網(wǎng)頁(yè)中插入多媒體對(duì)象的方法任務(wù)描述無(wú)論是個(gè)人網(wǎng)站還是企業(yè)網(wǎng)站，圖文并茂的設(shè)計(jì)都會(huì)為網(wǎng)頁(yè)增色不少，通過(guò)圖像美化后的網(wǎng)頁(yè)也能吸引更多的瀏覽者。同樣，表現(xiàn)形式精彩的多媒體作品，可以使人如飲甘霖，從而對(duì)其所表現(xiàn)的內(nèi)容印象深刻。本任務(wù)要完成向網(wǎng)頁(yè)中添加logo圖像、將flash形式的媒體對(duì)象插入網(wǎng)頁(yè)中。任務(wù)分析本任務(wù)通過(guò)向網(wǎng)頁(yè)中插入圖像和視頻媒體對(duì)象來(lái)制作內(nèi)容更加豐富多彩的網(wǎng)頁(yè)。一、操作體驗(yàn)操作步驟按照教材操作步驟完成任務(wù)三。二、知識(shí)鏈接在網(wǎng)頁(yè)中插入視頻對(duì)象

Dreamweaver使用戶能夠迅速、方便地為網(wǎng)頁(yè)添加聲音、影片等多媒體內(nèi)容，使網(wǎng)頁(yè)更加生動(dòng)。用戶可以插入和編輯多媒體文件和對(duì)象，主要分為Flash類、Javaapplets類、ActiveX控件類，以及各種音頻、視頻文件(如Shockwave影片、QuickTime、RM、WMA等)。試一試請(qǐng)新建網(wǎng)頁(yè)文檔，在頁(yè)面中插入圖片、視頻和背景音樂(lè)，效果參照附書光盤“素材\項(xiàng)目四\試一試\4-3\shi4-3.html”。任務(wù)四、使用CSS美化網(wǎng)頁(yè)知識(shí)點(diǎn)：完善網(wǎng)頁(yè)內(nèi)容類CSS樣式使用方法掌握使用CSS美化網(wǎng)頁(yè)的方法任務(wù)描述先在“content”內(nèi)容模塊和“footer”頁(yè)腳模塊中輸入內(nèi)容，然后用CSS美化網(wǎng)頁(yè)中字體、背景，模塊邊框等。任務(wù)分析有著豐富內(nèi)容的網(wǎng)頁(yè)通常會(huì)受訪問(wèn)者的歡迎，因此一個(gè)內(nèi)容充實(shí)的網(wǎng)站肯定會(huì)排在內(nèi)容貧乏的網(wǎng)站前面。內(nèi)容充實(shí)完善后用CSS對(duì)文字進(jìn)行美化，增加網(wǎng)頁(yè)美觀。一、操作體驗(yàn)操作步驟按照教材操作步驟完成任務(wù)四。二、知識(shí)鏈接1、CSS控制文字屬性font-size:18px;設(shè)置字號(hào)color:#093:設(shè)置字色font-family:'宋體';:設(shè)置字體（可以有多種字體，兩個(gè)字體之間有,分隔開，表示如果系統(tǒng)中有第一個(gè)字體則顯示效果是第一個(gè)字體，如果沒有則顯示的是第二個(gè)字體的效果，以此類推）line-height:150%;:設(shè)置行與行之間的距離(單位可用px或者em或者百分比)font-weight:bold:設(shè)置字體的粗細(xì)（粗：bold正常：normal）font-variant:normal正常|small-caps小型的大寫字母字體font—style:設(shè)置字體樣式(normal正常，italic,oblique斜體)text-decoration:修飾文字(none正常，underline下劃線，overline上劃線，line-through刪除線blink閃爍（只支持IE6,7,搜狐）)letter-spacing:5px:字符間距（normal默認(rèn)，length長(zhǎng)度單位）2、CSS控制文本屬性設(shè)置文本縮進(jìn)：text-indent:length(長(zhǎng)度單位)可以負(fù)值文本水平對(duì)齊方式：text-align:left左，center居中，right右空白處理:white-space:nowrap(nowrap強(qiáng)制在一行中顯示，pre換行和空格保留，normal自動(dòng)換行)大小寫控制：text-transform:(capitalize每個(gè)單詞的第一個(gè)字母大寫,uppercase每個(gè)字母都大寫，loowercase每個(gè)字母都小寫，none正常大小）文本垂直對(duì)齊方式：vertical-align:(sub設(shè)置文本為下標(biāo)，super設(shè)置文本為上標(biāo)，top與頂端對(duì)齊，text-bottom與低端對(duì)齊)試一試參考圖4-1網(wǎng)頁(yè)規(guī)劃效果，在完成的任務(wù)四文件index4-4.html的基礎(chǔ)上，完善右邊欄“side”

溫馨提示

  • 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)論