網(wǎng)頁(yè)三劍客---按鈕與導(dǎo)航條的制作

1、網(wǎng)頁(yè)美工設(shè)計(jì)商業(yè)典型案例,第2章按鈕和導(dǎo)航條的設(shè)計(jì)與制作,3,熟悉按鈕的設(shè)計(jì)原則并掌握按鈕的制作方法 掌握導(dǎo)航條的制作方法,本章目標(biāo),4,任務(wù)一、 按鈕的設(shè)計(jì)原則,1、按鈕概述 按鈕是網(wǎng)頁(yè)的導(dǎo)航元素，按鈕分為兩類(lèi)。 一種是有提交功能的按鈕真正意義上的按鈕 實(shí)現(xiàn)提交功能；標(biāo)明當(dāng)前操作的目的 一種是僅僅表示鏈接的按鈕 2、按鈕的表現(xiàn)形式 可以大致總結(jié)為兩種： 系統(tǒng)標(biāo)準(zhǔn)按鈕 使用圖片自制的按鈕,5,3、設(shè)計(jì)按鈕時(shí)應(yīng)盡量避免以下設(shè)計(jì)禁忌： 同一頁(yè)面包含重復(fù)功能的按鈕； 將復(fù)選框用作單選按鈕； 單選按鈕之間間隔太大； 取消按鈕無(wú)法真正取消操作； 返回按鈕不能達(dá)到預(yù)期的目的； 圖片按鈕對(duì)鼠標(biāo)按下操作沒(méi)有視

2、覺(jué)變化,6,簡(jiǎn)潔按鈕,迷你按鈕,水晶按鈕,塑料按鈕,木紋按鈕,金屬按鈕,4、常見(jiàn)按鈕樣式的制作,7,8,任務(wù)二、 導(dǎo)航條的制作,1、導(dǎo)航條概述 按鈕與導(dǎo)航條是密不可分的，將按鈕以一定的形狀排列組合到一起就形成了導(dǎo)航條。二者在網(wǎng)頁(yè)中的主要作用為鏈接相應(yīng)目標(biāo)文件，是網(wǎng)頁(yè)中必不可少的元素。他們的設(shè)計(jì)要與網(wǎng)頁(yè)中其他元素協(xié)調(diào)統(tǒng)一,9,10,11,12,2、導(dǎo)航條的制作方法,通過(guò)Fireworks、Photoshop制作，然后導(dǎo)入到Dreamweaver中，添加鏈接 通過(guò)Flash制作（組件） 通過(guò)Dreamweaver制作 直接輸入 Flash文本 Flash按鈕 通過(guò)Css+Div制作,13,IV、C

3、ss+Div制作導(dǎo)航條,橫向?qū)Ш?+實(shí)現(xiàn)） 縱向?qū)Ш剑?實(shí)現(xiàn),14,首頁(yè) 文章 參考 論壇 聯(lián)系 #list li float: left;,1）橫向?qū)Ш?+實(shí)現(xiàn),15,list li a color: #FF0000; text-decoration: none; background-color: #CCFF99; text-align: center; display: block; /*設(shè)置或檢索對(duì)象是否及如何顯示,為對(duì)象之后添加新行 */ height: 22px; width: 97px; margin-left: 2px; 檢索或設(shè)置對(duì)象四邊的外補(bǔ)丁 padding-top: 4

4、px;檢索或設(shè)置對(duì)象四邊的內(nèi)補(bǔ)丁 font-family: 宋體;,16,list a:hover color: #0000FF; background-color: #FF9933;,17,DOM DOM入門(mén) DOM應(yīng)用 DOM與瀏覽器 webui 理論知識(shí) 實(shí)戰(zhàn)應(yīng)用 高級(jí)技巧 CSS css入門(mén) css進(jìn)階 css高級(jí)技巧 XHTML XHTML參考手冊(cè) XHTML論壇,2）縱向?qū)Ш?+實(shí)現(xiàn),注：對(duì)ID 為list的 DIV定義了寬度，以及讓它的right、bottom、left3條邊框產(chǎn)生灰色的1px寬度的線條,18,list width: 100px; border-right-wid

5、th: 1px; border-bottom-width: 1px; border-left-width: 1px; border-right-style: solid; 實(shí)線邊框 /double border-bottom-style: solid; border-left-style: solid; border-right-color: #FF0000; border-bottom-color: #FF0000; border-left-color: #FF0000;,19,list h1 font-size: 12px; font-weight: bold; background-color: #99FF33; margin: 0px; padding: 4px; border-top-width: 1px; border-top-style: solid; border-top-color: #FF0000;,20,list h2 font-size: 12px; margin: 0px; padding: 4px; background-color: #FFFF33;,注：h1和h2元素在不加任何樣式的情況下，都擁有自己的一套默認(rèn)樣式，采用大邊距、大字體的形式這樣不符合設(shè)計(jì)需要。因此在這里我們重新設(shè)計(jì)