打糖果有什么技巧

書名： Dreamweaver CC網(wǎng)頁(yè)設(shè)計(jì)從入門到精通（微課精編版）
作者名：前端科技
本章字?jǐn)?shù)： 1857字
更新時(shí)間： 2019-12-09 14:39:35

4.5 案例實(shí)戰(zhàn)

本節(jié)將通過(guò)幾個(gè)案例演示如何借助Dreamweaver自定義網(wǎng)頁(yè)鏈接的動(dòng)態(tài)效果，能夠根據(jù)頁(yè)面風(fēng)格設(shè)計(jì)不同效果的鏈接樣式。

4.5.1 定義網(wǎng)頁(yè)鏈接樣式

設(shè)計(jì)鏈接樣式需要用到下面4個(gè)偽類選擇器，它們可以定義超鏈接的4種不同狀態(tài)。

a:link：定義超鏈接的默認(rèn)樣式。

a:visited：定義超鏈接被訪問(wèn)后的樣式。

a:hover hover：定義鼠標(biāo)經(jīng)過(guò)超鏈接時(shí)的樣式。

a:active：定義超鏈接被激活時(shí)的樣式，如鼠標(biāo)單擊之后，到鼠標(biāo)被松開(kāi)之間的這段時(shí)間的樣式。

【操作步驟】

第1步，啟動(dòng)Dreamweaver CC，打開(kāi)模板頁(yè)面temp.html，另存為index.html。

第2步，在編輯窗口中選擇文本“第三屆國(guó)際茶文化節(jié)11月在廣州舉行”。

第3步，選擇【窗口】｜【CSS設(shè)計(jì)器】命令，打開(kāi)【CSS設(shè)計(jì)器】面板，依次執(zhí)行下面操作，詳細(xì)提示如圖4.25所示。

（1）在【源】標(biāo)題右側(cè)單擊按鈕，在彈出的下拉菜單中選擇【在頁(yè)面中定義】選項(xiàng)，設(shè)計(jì)網(wǎng)頁(yè)內(nèi)部樣式表，然后選擇<style>標(biāo)簽。

（2）在【選擇器】標(biāo)題右側(cè)單擊按鈕，新增一個(gè)選擇器，命名為“a:link”。

（3）在【屬性】列表框中分別設(shè)置文本樣式“color: #8FB812; text-decoration:none;”，定義字體顏色為鵝黃色，清除下畫線樣式，如圖4.25所示。

圖4.25 定義超鏈接偽類默認(rèn)樣式

第4步，以同樣的方式繼續(xù)添加3個(gè)偽類樣式，設(shè)計(jì)超鏈接的其他狀態(tài)樣式，主要定義文本樣式，設(shè)置鼠標(biāo)經(jīng)過(guò)超鏈接過(guò)程中呈現(xiàn)不同的超鏈接文本顏色，設(shè)置如圖4.26所示。

圖4.26 設(shè)置超鏈接其他偽類樣式

第5步，按Ctrl+S快捷鍵，保存網(wǎng)頁(yè)，再按F12鍵在瀏覽器中預(yù)覽，演示效果如圖4.27所示。超鏈接文本在默認(rèn)狀態(tài)隱藏顯示了下畫線，同時(shí)設(shè)置顏色為淡黃色，當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)顯示為鮮綠色。

圖4.27 設(shè)計(jì)超鏈接的樣式

4.5.2 設(shè)計(jì)精致下畫線鏈接樣式

在定義網(wǎng)頁(yè)鏈接的字體顏色時(shí)，一般都會(huì)考慮選擇網(wǎng)站專用色，以確保與頁(yè)面風(fēng)格融合。下畫線是網(wǎng)頁(yè)鏈接的默認(rèn)樣式，但很多網(wǎng)站都會(huì)清除所有鏈接的下畫線。方法如下：

不過(guò)從用戶體驗(yàn)的角度分析，如果取消下畫線效果之后，可能會(huì)影響部分用戶對(duì)網(wǎng)頁(yè)的訪問(wèn)。因?yàn)橄庐嬀€效果能夠很好地提示訪問(wèn)者，當(dāng)前鼠標(biāo)經(jīng)過(guò)的文字是一個(gè)鏈接。

下畫線的效果當(dāng)然不僅僅是一條實(shí)線，也可以根據(jù)需要進(jìn)行設(shè)計(jì)。設(shè)計(jì)的方法包括以下方面。

使用text-decoration屬性定義下畫線樣式。

使用border-bottom屬性定義下畫線樣式。

使用background屬性定義下畫線樣式。

下面示例演示如何分別使用上面3種方法定義不同的下畫線鏈接效果。

【操作步驟】

第1步，啟動(dòng)Dreamweaver CC，打開(kāi)模板頁(yè)面temp.html，另存為index.html。

第2步，在編輯窗口中構(gòu)建一個(gè)列表結(jié)構(gòu)。為每個(gè)列表項(xiàng)目文本定義空鏈接，并分別為它們定義一個(gè)類，以方便單獨(dú)為每個(gè)列表項(xiàng)目定義不同的鏈接樣式。

第3步，在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽，定義一個(gè)內(nèi)部樣式表，然后準(zhǔn)備在其中輸入代碼，用來(lái)定義鏈接的樣式。

第4步，在內(nèi)部樣式表中輸入下面代碼，定義兩個(gè)樣式，其中第一個(gè)樣式清除項(xiàng)目列表的縮進(jìn)效果，清除項(xiàng)目符號(hào)；第二個(gè)樣式定義列表項(xiàng)目向左浮動(dòng)，讓多個(gè)列表項(xiàng)目并列顯示，同時(shí)使用margin屬性調(diào)整每個(gè)列表項(xiàng)目的間距，效果如圖4.28所示。

圖4.28 設(shè)計(jì)列表并列顯示樣式

第5步，設(shè)計(jì)頁(yè)面鏈接的默認(rèn)樣式：清除下畫線效果，定義字體顏色為粉色。

第6步，使用text-decoration屬性為第一個(gè)鏈接樣式定義下畫線樣式。

     .underline1 a:hover {text-decoration:underline;}

第7步，使用border-bottom屬性為第二個(gè)鏈接樣式定義下畫線樣式。

第8步，使用Photoshop設(shè)計(jì)一個(gè)虛線段，如圖4.29所示是一個(gè)放大32倍的虛線段設(shè)計(jì)圖效果，在設(shè)計(jì)時(shí)應(yīng)該確保高度為1px，寬度可以為4px、6px或8px，主要根據(jù)虛線的疏密進(jìn)行設(shè)置。然后使用粉色（#EF68AD）以跳格方式進(jìn)行填充，最后保存為GIF格式圖像即可，當(dāng)然最佳視覺(jué)空隙是間隔兩個(gè)像素空格。

圖4.29 使用Photoshop設(shè)計(jì)虛線段

提示：由于瀏覽器在解析虛線時(shí)的效果并不一致，且顯示效果不是很精致，最好的方法是使用背景圖像來(lái)定義虛線，則效果會(huì)更好。

第9步，使用background屬性定義下畫線樣式為第三個(gè)鏈接樣式定義下畫線樣式。

第10步，保存網(wǎng)頁(yè)，按F12鍵在瀏覽器中預(yù)覽，則比較效果如圖4.30所示。

圖4.30 下畫線鏈接樣式效果

提示：有關(guān)下畫線的效果還有很多，只要巧妙結(jié)合鏈接的底部邊框、下畫線和背景圖像，就可以設(shè)計(jì)出很多新穎的樣式。例如，可以定義下畫線的色彩、下畫線距離、下畫線長(zhǎng)度、對(duì)齊方式和定制雙下畫線等。

4.5.3 設(shè)計(jì)立體鏈接樣式

本案例定義的網(wǎng)頁(yè)鏈接，在默認(rèn)狀態(tài)下顯示灰色右邊框線和灰色底邊框線效果。當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)，則清除右側(cè)和底部邊框線，并定義左側(cè)和頂部邊框效果，這樣利用錯(cuò)覺(jué)就設(shè)計(jì)出了一個(gè)簡(jiǎn)陋的凸凹立體效果。詳細(xì)操作步驟請(qǐng)掃碼閱讀。

4.5.4 設(shè)計(jì)滑動(dòng)背景鏈接樣式

在本案例中，先定義鏈接塊狀顯示，然后根據(jù)背景圖像大小定義a元素的寬和高，并分別在默認(rèn)狀態(tài)和鼠標(biāo)經(jīng)過(guò)狀態(tài)下定義背景圖像。對(duì)于背景圖像來(lái)說(shuō)，寬度可以與背景圖像寬度相同，也可以根據(jù)需要小于背景圖像的寬度，但是高度必須保持與背景圖像的高度一致。詳細(xì)操作步驟請(qǐng)掃碼閱讀。

官术网_书友最值得收藏!

Dreamweaver CC網(wǎng)頁(yè)設(shè)計(jì)從入門到精通（微課精編版）

4.5 案例實(shí)戰(zhàn)

4.5.1 定義網(wǎng)頁(yè)鏈接樣式

4.5.2 設(shè)計(jì)精致下畫線鏈接樣式

4.5.3 設(shè)計(jì)立體鏈接樣式

4.5.4 設(shè)計(jì)滑動(dòng)背景鏈接樣式