DW MX實例:多彩文字鏈接_Dreamweaver教程
文字鏈接是網(wǎng)頁中最常見的頁面元素,在默認狀態(tài)下,文字鏈接樣式都是帶下劃線的,這種一陳不變的外觀使網(wǎng)頁無法凸現(xiàn)個性和滿足布局的需要。為了使文字鏈接符合頁面的整體效果,可以采用 CSS (樣式)來實現(xiàn)多樣的文字鏈接。
效果說明 將鼠標置于文本上時,文本樣式會發(fā)生改變,比如不會出現(xiàn)下劃線,文字會閃動等。結(jié)合其他樣式屬性,還可以實現(xiàn)按鈕式文字鏈接,效果如圖 22-1 所示。
創(chuàng)作構(gòu)思 Text-decoration 屬性用來控制超級鏈接,結(jié)合 Border-Style 屬性,還可以實現(xiàn)更加復(fù)雜的樣式。
操作步驟
步驟一 初級鏈接樣式
在 CSS 樣式定義設(shè)置對話框中的“類型”子選項中有 5 種修飾類型。點選不同的修飾項,可以輕易設(shè)置不同的初級鏈接樣式,如圖 22-2 所示。下面以“無”下劃線設(shè)置為例進行講解,其他樣式的設(shè)置跟本例類似。
�。� 1 )創(chuàng)建一個 CSS 樣式表文件。按下 Shift F11 鍵打開 CSS 樣式面板,單擊【新建樣式】按鈕,在彈出的【新建 CSS 樣式】對話框中點選【高級( ID ,上下文選擇器等)】選項,然后在選擇器下拉菜單中選擇【 a:link 】,單擊【確定】按鈕,如圖 22-3 所示。
�。� 2 )編輯樣式。保存樣式表文件(文件名為 css.css )后,開始編輯樣式。設(shè)定默認鏈接樣式為無下劃線,字體為宋體 12pt ,其他色彩等參數(shù)都不設(shè)置,如圖 22-4 所示。
( 3 )新建并設(shè)置樣式“ .t1 ”。再次單擊【新建樣式】按鈕,在【新建 CSS 樣式】對話框中點選【類(可應(yīng)用于任何標簽)】選項,定義自己的樣式類,然后設(shè)置名稱為“ .t1 ”(【名稱】文本框是用來指定類的,用戶可以根據(jù)需要任意填寫,其格式是“ .* ”),最后點選【定義在 css.css 】,一切設(shè)置完畢后單擊【確定】。接下來的設(shè)置跟第二步操作一樣,然后單擊【確定】,如圖 22-5 所示。 
�。� 4 )在文檔窗口中輸入“無下劃線”字樣。選中“無下劃線”段落,然后打開屬性設(shè)置界面,在樣式列表中選擇“ t1 ”,如圖 22-6 所示。這樣就將樣式應(yīng)用到所選網(wǎng)頁元素上,讀者可以保存網(wǎng)頁文件后在瀏覽器中進行預(yù)覽,這個時候會發(fā)現(xiàn)文字的大小為 12px ,而且超級鏈接的下劃線也不見了。
- 用Dreamweaver在網(wǎng)頁中插入Flash按鈕
- 在Dreamweaver中編寫CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計CSS?
- Dreamweaver文字自動換行
- 探討Dreamweaver制作網(wǎng)頁時的空格
- 使用Dreamweaver制作網(wǎng)頁的20個技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運用代碼片斷工具提高css開發(fā)效率
- 在DreamWeaver中編寫CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
猜你也喜歡看這些
- Dreamweaver+Flash+Photoshop網(wǎng)頁制作教程
- Dreamweaver 8完美網(wǎng)頁設(shè)計:商業(yè)網(wǎng)站篇
- Dreamweaver CS4 中文版完全自學(xué)教程
- Dreamweaver8中文版職業(yè)應(yīng)用視頻教程(打包下載)
- 通過Dreamweaver CS3學(xué)習(xí)HTML+DIV+CSS 光盤/教程
- Xhtml全套課程(含項目案例,李炎恢主講)
- Dreamweaver視頻課程
- Dreamweaver 2004視頻教程下載
- DreamWeaver MX 2004 即學(xué)即會
- Dreamweaver 8+ASP構(gòu)造動態(tài)網(wǎng)站實例與操作
- 相關(guān)鏈接:
- 教程說明:
Dreamweaver教程-DW MX實例:多彩文字鏈接
。




