第4章網(wǎng)頁(yè)中文本與圖像的控制

單擊此處編輯母版標(biāo)題樣式,單擊此處編輯母版文本樣式,第二級(jí),第三級(jí),第四級(jí),第五級(jí),*,*,網(wǎng)頁(yè)設(shè)計(jì)與制作教程,（,Dreamweaver+Photoshop+Flash,）,第,4,章,文本與圖像控制,機(jī)械工業(yè)出版社,4.1,文本控制,1,插入與編輯文本,2,插入特殊字符,4.1.1,插入文本與特殊字符,插入特殊字符,1,創(chuàng)建超鏈接,2,創(chuàng)建郵件鏈接,郵件鏈接是一種特殊的鏈接，在網(wǎng)頁(yè)中單擊這種鏈接后，不是跳轉(zhuǎn)到其他頁(yè)面，而是自動(dòng)打開(kāi),Outlook Express,或其他,E-mail,軟件，并且在新郵件窗口中自動(dòng)添加電子郵件鏈接中的郵箱地址。,3,創(chuàng)建錨鏈接,錨鏈接就是創(chuàng)建命名錨記（簡(jiǎn)稱(chēng)錨點(diǎn)），它所起到的作用就是在文檔中進(jìn)行定位，單擊這些創(chuàng)建了命名錨記的鏈接后，就可以快速訪問(wèn)指定位置。,4.1.2,創(chuàng)建超鏈接,4.1,文本控制,4.1.3 CSS,控制文本的常見(jiàn)屬性及其應(yīng)用,屬性,說(shuō)明,font-family,設(shè)置網(wǎng)頁(yè)使用字體的類(lèi)別,font-size,設(shè)置文本的字體大小,font-weight,設(shè)置字體的粗細(xì),font-style,設(shè)置文本的字體樣式,color,設(shè)置文本的顏色,text-indent,設(shè)置文本塊首行的縮進(jìn),line-height,設(shè)置行高,text-decoration,設(shè)置添加到文本的裝飾效果,text-align,設(shè)置文本的水平對(duì)齊方式,表,4-1,常見(jiàn)的有關(guān)文本控制的屬性,4.1,文本控制,圖,4-18,當(dāng)前頁(yè)面結(jié)構(gòu) 圖,4-19 CSS,規(guī)則,4.1,文本控制,1字體的類(lèi)型,標(biāo)題沒(méi)有定義字體，即默認(rèn)字體,此行文字定義了“文鼎,POP-4”,字體，但系統(tǒng)沒(méi)有安裝該字體，此時(shí)該行字體使用默認(rèn)字體顯示,4.1,文本控制,4.1,文本控制,2字體的大小、行高與顏色,圖,4-21,當(dāng)前頁(yè)面結(jié)構(gòu),圖,4-22 CSS,規(guī)則 圖,4-23,預(yù)覽效果,4.2,圖像控制,4.2.1,插入圖像,在插入圖像之前，首先了解一下在網(wǎng)頁(yè)制作中常見(jiàn)的圖像格式：,GIF,格式：該文件格式最多使用,256,種顏色，最適合顯示色調(diào)不連續(xù)或具有大面積單一顏色的圖像，。,JPEG,格式：該文件格式是用于攝影或連續(xù)色調(diào)圖像的較好格式，這是因?yàn)?JPEG,文件可以包含數(shù)百萬(wàn)種顏色。,PNG,格式：該文件格式是一種替代,GIF,格式的無(wú)專(zhuān)利權(quán)限制的格式，它包括對(duì)索引色、灰度、真彩色圖像以及,alpha,通道透明度的支持。,4.2,圖像控制,4.2.2 設(shè)置圖像屬性,在,Dreamweaver CS5,中選擇某一圖像，按下組合鍵,Ctrl+F3,，打開(kāi)如圖,4-35,所示的“屬性”面板。,圖,4-35 “,屬性”面板,4.2,圖像控制,4.2.3 繪制熱點(diǎn)區(qū)域,圖,4-37 設(shè)置熱點(diǎn)屬性,圖,4-38,鼠標(biāo)懸停熱點(diǎn)區(qū)域時(shí)的效果,4.2,圖像控制,4.2.4 插入鼠標(biāo)經(jīng)過(guò)圖像,4.2,圖像控制,4.2.5 CSS控制圖像的常見(jiàn)屬性及其應(yīng)用,1,圖像的邊框與大小,2,背景圖像,屬性,說(shuō)明,background,簡(jiǎn)寫(xiě)屬性，作用是將背景屬性設(shè)置在一個(gè)聲明中,background-color,設(shè)置元素的背景顏色,background-image,把圖像設(shè)置為背景,background-position,設(shè)置背景圖像的起始位置,background-repeat,設(shè)置背景圖像是否重復(fù)，以及如何重復(fù),background-attachment,設(shè)置背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng),表,4-2,背景屬性,4.2,圖像控制,4.2.5 CSS控制圖像的常見(jiàn)屬性及其應(yīng)用,3圖像超鏈接,圖像超鏈接指的是將圖像設(shè)置為超鏈接的形式，當(dāng)鼠標(biāo)移開(kāi)和懸停在該超鏈接上時(shí)，分別呈現(xiàn)不同的效果。,4.3,圖文混排,圖文混排最為核心的地方就是讓文字圍繞圖像進(jìn)行排列，而要實(shí)現(xiàn)這種效果就必須讓圖像脫離文本流，即使圖像具有浮動(dòng)（,float,）屬性。,4.4,課堂綜合練習(xí),圖文混排最為核心的地方就是讓文字圍繞圖像進(jìn)行排列，而要實(shí)現(xiàn)這種效果就必須讓圖像脫離文本流，即使圖像具有浮動(dòng)（,float,）屬性。,4.5,課堂綜合實(shí)訓(xùn),圖文混排最為核心的地方就是讓文字圍繞圖像進(jìn)行排列，而要實(shí)現(xiàn)這種效果就必須讓圖像脫離文本流，即使圖像具有浮動(dòng)（,float,）屬性。,