Dreamweaver中怎么設(shè)計(jì)多彩文字鏈接

這篇文章主要介紹“Dreamweaver中怎么設(shè)計(jì)多彩文字鏈接”，在日常操作中，相信很多人在Dreamweaver中怎么設(shè)計(jì)多彩文字鏈接問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”Dreamweaver中怎么設(shè)計(jì)多彩文字鏈接”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

文字鏈接是網(wǎng)頁(yè)中最常見(jiàn)的頁(yè)面元素，在默認(rèn)狀態(tài)下，文字鏈接樣式都是帶下劃線的，這種一陳不變的外觀使網(wǎng)頁(yè)無(wú)法凸現(xiàn)個(gè)性和滿足布局的需要。為了使文字鏈接符合頁(yè)面的整體效果，可以采用 CSS （樣式）來(lái)實(shí)現(xiàn)多樣的文字鏈接。

效果說(shuō)明

將鼠標(biāo)置于文本上時(shí)，文本樣式會(huì)發(fā)生改變，比如不會(huì)出現(xiàn)下劃線，文字會(huì)閃動(dòng)等。結(jié)合其他樣式屬性，還可以實(shí)現(xiàn)按鈕式文字鏈接，效果如圖 22-1 所示。
 


 
創(chuàng)作構(gòu)思
      Text-decoration 屬性用來(lái)控制超級(jí)鏈接，結(jié)合 Border-Style 屬性，還可以實(shí)現(xiàn)更加復(fù)雜的樣式。

操作步驟 
步驟一初級(jí)鏈接樣式
      在 CSS 樣式定義設(shè)置對(duì)話框中的“類型”子選項(xiàng)中有 5 種修飾類型。點(diǎn)選不同的修飾項(xiàng)，可以輕易設(shè)置不同的初級(jí)鏈接樣式，如圖 22-2 所示。下面以“無(wú)”下劃線設(shè)置為例進(jìn)行講解，其他樣式的設(shè)置跟本例類似。 
 


 
      （ 1 ）創(chuàng)建一個(gè) CSS 樣式表文件。按下 Shift+F11 鍵打開(kāi) CSS 樣式面板，單擊【新建樣式】按鈕，在彈出的【新建 CSS 樣式】對(duì)話框中點(diǎn)選【高級(jí)（ ID ，上下文選擇器等）】選項(xiàng)，然后在選擇器下拉菜單中選擇【 a:link 】，單擊【確定】按鈕，如圖 22-3 所示。 
 
 



      （ 2 ）編輯樣式。保存樣式表文件（文件名為 css.css ）后，開(kāi)始編輯樣式。設(shè)定默認(rèn)鏈接樣式為無(wú)下劃線，字體為宋體 12pt ，其他色彩等參數(shù)都不設(shè)置，如圖 22-4 所示。 
 


      （ 3 ）新建并設(shè)置樣式“ .t1 ”。再次單擊【新建樣式】按鈕，在【新建 CSS 樣式】對(duì)話框中點(diǎn)選【類（可應(yīng)用于任何標(biāo)簽）】選項(xiàng)，定義自己的樣式類，然后設(shè)置名稱為“ .t1 ”（【名稱】文本框是用來(lái)指定類的，用戶可以根據(jù)需要任意填寫，其格式是“ .* ”），最后點(diǎn)選【定義在 css.css 】，一切設(shè)置完畢后單擊【確定】。接下來(lái)的設(shè)置跟第二步操作一樣，然后單擊【確定】，如圖 22-5 所示。
 


      （ 4 ）在文檔窗口中輸入“無(wú)下劃線”字樣。選中“無(wú)下劃線”段落，然后打開(kāi)屬性設(shè)置界面，在樣式列表中選擇“ t1 ”，如圖 22-6 所示。這樣就將樣式應(yīng)用到所選網(wǎng)頁(yè)元素上，讀者可以保存網(wǎng)頁(yè)文件后在瀏覽器中進(jìn)行預(yù)覽，這個(gè)時(shí)候會(huì)發(fā)現(xiàn)文字的大小為 12px ，而且超級(jí)鏈接的下劃線也不見(jiàn)了。 
 


步驟二進(jìn)階樣式鏈接
 
綜合應(yīng)用上面介紹的技術(shù)，還可以創(chuàng)作出更復(fù)雜的文字鏈接樣式。 

      （ 1 ）平面塊狀文字鏈接。在 CSS 樣式表面板中雙擊“ .t1 ”，打開(kāi) t1 樣式表，這里要定義其塊狀鏈接樣式。單擊【背景】選項(xiàng)，首先給鏈接增加一個(gè)背景色，這里選擇“紅色”，如圖 22-7 所示。在分類欄中選擇“邊框”，然后在“上”列表中選擇“實(shí)線”，為文字鏈接的四周增加一個(gè)邊框，從而實(shí)現(xiàn)平面塊狀文字鏈接，如圖 22-8 所示。
 


 圖 22-7 設(shè)置顏色 圖 22-8 設(shè)置 4 個(gè)邊框


      （ 2 ）立體四邊框文字鏈接。在分類欄中選擇“邊框”，然后設(shè)置寬和高的值為 1px ，這樣可以使鏈接文字與按鈕四周有 1px 的間距，從而使四邊框看起來(lái)有立體感，具體設(shè)置如圖 22-9 所示。
 



      （ 3 ）定義特效文字鏈接。 CSS 樣式表中還包含了一組特效濾鏡。這里創(chuàng)建一個(gè)使用 Blur 濾鏡的文字鏈接，并且該鏈接還帶有邊框效果。在【過(guò)濾器】下拉菜單中選擇【 Blur （ Add=?,Direction=?,Strength=? ）】選項(xiàng)，然后更改濾鏡參數(shù)設(shè)置為“ Blur （ Add=ture,Direction=45,Strength=1 ）”，如圖 22-10 所示。 
 


      提示： Blur 濾鏡有 3 個(gè)參數(shù)，分別為 Add 、 Direction 和 Strength 。
Add 參數(shù)有兩個(gè)參數(shù)值，即 True 和 False ，其作用是設(shè)定是否為圖片添加模糊效果。 Direction 參數(shù)用來(lái)設(shè)置模糊的方向。模糊操作是按照順時(shí)針?lè)较蜻M(jìn)行的，其中 0 °代表垂直向上，每 45 °一個(gè)單位，默認(rèn)值是向左 270 °。角度和方向的對(duì)應(yīng)關(guān)系見(jiàn)表 22-1 
 



 
      Strength 參數(shù)值只能使用整數(shù)來(lái)指定，它代表有多少像素的寬度將受到模糊影響。默認(rèn)值是 5 像素。
至此，本實(shí)例操作完畢，用戶可以根據(jù)需要改變 CSS 樣式，以實(shí)現(xiàn)不同的文字鏈接特性。 CSS 樣式的應(yīng)用非常廣泛，通過(guò)熟練掌握 CSS 樣式的使用，可以快速的來(lái)格式化和控制網(wǎng)頁(yè)元素，從而實(shí)現(xiàn)美化頁(yè)面和提高工作效率的效果。

到此，關(guān)于“Dreamweaver中怎么設(shè)計(jì)多彩文字鏈接”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！