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