室內設計
 
尚佶網頁設計主選單
網頁美編設計製作
行動手機‧行動電視
網頁設計
網頁設計
最新訊息:
  網頁設計全球效應
  網頁設計的行銷效用?
設計作品經歷:
  昇華文件櫃有限公司
Shen Hua Filing Cabinet
File Cabinet
  戀戀紅葡萄酒酒莊 酒莊
  美和美吊扇公司
  HCB AUTO TOOLS
  逸通房屋拆除工程 . 房屋拆除 . 台中拆除
  鳳凰企業社
  國立中正大學行銷創意研究中心
  銘輝毛刷有限公司
  大業國中 嘉義市 97 海洋教育計畫
  鳳凰冰涼巾公司
  進泉瓜子
  金鴻勝酒廠
  集順汽車椅套
  嘉義市97教學卓越計畫
  鉅祥工具開發有限公司
更多作品 >>
 

 

 

 

 

 

 

 

filing cabinet file cabinet 新恩嘉義神經內科 新恩嘉義神經內科 新竹室內設計 台中室內設計 台中室內設計

 

 
 
網頁設計+創意=100%網站 arrow 網路資訊分享 arrow 網頁設計 arrow 整體網頁設計風格css   
整體網頁設計風格css E-mail
2008/05/11, 週日

18.jpg

網頁美編

整體網頁設計風格css<hr>-網頁水平線-↑向上

網頁設計中我們通常需要統一網頁設計整體風格,統一的風格大部分涉及到網頁中文字屬性、網頁背景色以及鏈結文字屬性等等,如果我們應用CSS來控制這些屬性,會大大提升網頁設計閱覽的速度,更加統一網頁整體的設計應用效果。 為了達到修改整體網頁的目的,我們需要編輯一個外掛式的CSS文檔。根據這個文檔定義和修改不同CSS屬性並在網頁設計頁面相同或者相似的網頁裡應用它,達到一個整合網頁設計效果。

網頁設計的整體風格
當今的網頁設計流行宋體的9pt和10.5pt的字體,按快捷鍵“Shift+F11”打開“CSS Style控制面板”,單擊“New Style”按鈕,彈出“New Style”對話框,複選“Redefine HTML Tag”的“Type”類型,這時在Tag處會出現“body”、“br”、“cite”等選項,選擇“body”後確認。這樣我們就建立了一個外掛的CSS文檔,在保存對話框中保存為all後就進入了“Style Definition for body in all.css”對話框(如圖1)。選擇“Category”中的“Type”項,定義“Font”為“宋體”、“Size”參數為“9”,其後面的下拉框選擇“Points”、“Color”自定義為喜好顏色就可以了。當然還可以選擇“Category”中的“Background”項來定義“Background”顏色和其他背景屬性。這時您會看到網頁設計頁面中內容的整體變化。

網頁偏好風格的改變
經過上面的改變有時不免給您帶來一定麻煩,如果遇到網頁設計頁面中某個元素,比如突出顯示的文字的字體、字號以及顏色要怎麼辦﹗這裡我們就需要再定義一個新的CSS樣式單來對其進行控制,右鍵點擊頁面編輯區,在彈出快捷選單中點擊“CSS Style/Edit Style Sheet”命令,彈出“Edit Style Sheet”對話框,選擇列表中的all.css,點擊“New”按鈕,在彈出的“New Style”對話框中選擇“Make Custom Style(class)”的“Type”類型定義一個自己偏好的CSS控制。如果想更改頁面中某一元素的屬性,選中它然後右鍵單擊“CSS Styles”面板中“Apply Styles”中剛才定義的CSS,執行“Apply”命令就可以了。

網頁設計統一控制超鏈結
超鏈結也是網頁設計中經常使用的,而網頁的鏈接色默認都是藍色,雖然可以更改,但單一色彩在不同背景色的網頁上顯示就不是那麼的奏效,我們來看一下如何用CSS控制網頁設計實現不同的個性鏈接顏色。在“New Style”對話框中,選擇“Use CSS Selector”的“Type”類型,在“Selector”下拉框中會列出“a:link(鏈結屬性)”、“a:hover(鼠標移動到鏈結上的屬性)”、“a:visited(鏈結被訪問後屬性)”、“a:active(鏈結焦點狀態下的屬性)”4個選項,這4個選項的設置會控制網頁設計中所有的鏈結的屬性,我們可以分別定義這4個屬性,然後添加到“CSS Style”面板中與默認設置不同的CSS控制中,再將其“Apply”到需要改變的鏈結上就實現了。如果將“Hover”的字體設置的比“Link”稍微大一點,就會出現鼠標移動到鏈接上時字體變大的效果﹗

名詞說明︰CSS即層疊樣式表(Cascading Style Sheet)是在網頁設計製作過程中普遍用到的專業技術。採用了CSS技術控制的網頁設計,設計者會更輕鬆、有效地對頁面的整體架構、顏色、字體、鏈接、背景以及同一頁面的不同部分、不同網頁設計頁面的外觀和格式等效果實現更加精確地控制。Dreamweaver MX推出後,其改進的CSS設計工具、透過增強CSS面版清晰顯示內、外部定義的樣式,讓用戶建構出符合最新CSS標準的網站。

 

網頁美編
網頁美編
最後更新 ( 2008/05/12, 週一 )
< 上一頁   下一頁 >
top_18.jpg
 
 
尚佶網頁設計 2011 © copyright 版權所有.All rights reserved.
 
©2011 Sungie