網(wǎng)頁制作深入學(xué)習(xí)個(gè)人小結(jié)

1、網(wǎng)頁制作深入學(xué)習(xí)對每一個(gè)程序設(shè)計(jì)者來說，為用戶創(chuàng)建一個(gè)統(tǒng)一的界面是一個(gè)不變的追求。網(wǎng)站中建立一致性是特別困難的，根據(jù)瀏覽器和操作系統(tǒng)的嚴(yán)重不同，幾而且乎什么能做和不能做是任意的，所以視覺表現(xiàn)也很不一樣。在任何地方比你處理表單元素時(shí)和建立標(biāo)準(zhǔn)的外觀的戰(zhàn)斗中最大的失敗變得更加顯然的就是最有名的提交按鈕。照現(xiàn)在這個(gè)樣子，用Type="submit"輸入即丑陋(Firefox)，還有點(diǎn)神病(Internet Explorer)或者十分玩固(Safari)。用的最多的辦法是使用圖片輸入和我們自己創(chuàng)建這個(gè)該死的東西。這是很不幸的，因?yàn)槊看挝覀冃枰粋€(gè)新的按鈕時(shí)就要被迫于打開Photos

2、hop的單調(diào)乏味。我們需要的是一些更好的東西一些對設(shè)計(jì)者更加靈活和有意義的東西。幸運(yùn)的是解決方案已經(jīng)有了而且它只需要一點(diǎn)愛，我的朋友們，請?jiān)试S我介紹我的小朋友給你吧：<button>元素。Inputs VS Buttons這里是你的標(biāo)準(zhǔn)提交按鈕標(biāo)記：<input type="submit" value="Submit" />它在三兄弟里看起來是這樣的：嗯，這里是提交時(shí)通過創(chuàng)建一個(gè)按鈕元素時(shí)的標(biāo)記：<button type="submit">Submit</button>它看起來是這樣的：

3、這些按鈕就像上面我們的副本一樣工作和表現(xiàn)是一樣的。另外，為了提交表單，你可以使他們無效，添加一個(gè)accesskey或者指定一個(gè)tabindex。除了視覺冷淡以外Safari好像擁有它們(并沒有使得我們能夠利用我們的優(yōu)勢來面對綠色的界面)，<button>標(biāo)簽最酷的地方在于你可以把有用的HTML標(biāo)簽放進(jìn)它們，比如圖片：就像這樣：非常好。(好了，他們有點(diǎn)丑陋,但是我說過他們需要一點(diǎn)愛。)事實(shí)上，根據(jù)W3C，這些特殊的視覺差異正是為什么<button>元素被創(chuàng)建的原因。引用：Buttons created with the BUTTON element function ju

4、st like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to “image”, but the BUTTON element type allows c

5、ontent.The Button Element - W3C因此，我們正在尋找一種設(shè)計(jì)方案同時(shí)在這里我們的朋友寫著一本偉大的互聯(lián)網(wǎng)手冊中有一部分標(biāo)記好像正好在這個(gè)問題上可以幫助我們。這是很方便的，然而不幸的是大部分設(shè)計(jì)師和開發(fā)者甚至不知道這樣一個(gè)標(biāo)簽存在?，F(xiàn)在，在我用按鈕標(biāo)簽取代image input之前，我確定這個(gè)標(biāo)簽和CSS必須滿足一些條件：條件：1、它們要看起來像按鈕。2、它們在不同的瀏覽器里看起來要一樣。3、我用在按鈕上的樣式需要同樣用在我可能會(huì)用的鏈接上。4、標(biāo)簽應(yīng)該是靈活的，易用于許多不同的情況。5、我將能夠有效地使用圖標(biāo)和色彩來傳遞將會(huì)發(fā)生的交互類型的信息。帶著這些適當(dāng)?shù)奶魬?zhàn)，

6、我在解決了夸瀏覽器的挑戰(zhàn)后鉆進(jìn)了CSS之中，得出了下面的結(jié)果：結(jié)果：沒有什么了不起的，簡單，但有效?，F(xiàn)在，我喜歡用這種方式處理按鈕是因?yàn)槲铱梢允褂肍AMFAMFAM的1000個(gè)圖標(biāo)庫來舉例說明大量可笑的想法和動(dòng)作而不用每一次我需要新東西的時(shí)候非得用Photoshop來做一些東西。如果我們快速看一下這些標(biāo)簽，你會(huì)注意到最后那兩個(gè)按鈕實(shí)際上就像：<div class="buttons"> <button type="submit" class="positive"> <img src="/image

7、s/icons/tick.png" alt=""/> Save </button> <a href="/password/reset/"> <img src="/images/icons/textfield_key.png" alt=""/> Change Password </a> <a href="#" class="negative"> <img src="/images/ico

8、ns/cross.png" alt=""/> Cancel </a></div>這個(gè)有用的原因是網(wǎng)頁程序中的許多動(dòng)作是依靠激發(fā)的，因而通過一個(gè)鏈接簡單的發(fā)送一個(gè)用戶到一個(gè)特殊的URL將引發(fā)它們需要做的動(dòng)作。使用樣式可以為兩個(gè)元素（鏈接和按鈕）工作，無論是用于AJAX或者標(biāo)準(zhǔn)提交都能給我們保持交互方法的一致和適當(dāng)?shù)撵`活性。只是一個(gè)短暫旁白，你可能想知道為什么在那些圖片中我讓ALT標(biāo)簽空白呢?？赡軙?huì)覺得驚奇于alt屬性在每個(gè)圖片都是必須的，事實(shí)上不是這樣的?？盏腶lt屬性是完全有效的和有利于屏幕前的人知道哪些信息是有效忽略，當(dāng)你的用戶努力

9、尋找下一個(gè)目標(biāo)時(shí)節(jié)省他們的寶貴時(shí)間。由于這些圖標(biāo)確實(shí)是多余的，我寧愿不去浪費(fèi)用戶睞接收我使用的圖片而不是接著呈現(xiàn)出來。他們將只會(huì)收到“Submit”而不是“Checkmark Submit”，那確實(shí)會(huì)讓事情變的有點(diǎn)亂。CSS在極大程度上，控制那些按鈕的CSS是相當(dāng)直截的。瀏覽器間絲發(fā)般的差別導(dǎo)致了一定數(shù)量的填充差距，不過天下沒有不可能的事兒，對你來說幸運(yùn)的是，它已經(jīng)解決了。/* BUTTONS */.buttons a, .buttons button display:block; float:left; margin:0 7px 0 0; background-color:#f5f5f5;

10、border:1px solid #dedede; border-top:1px solid #eee; border-left:1px solid #eee; font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif; font-size:100%; line-height:130%; text-decoration:none; font-weight:bold; color:#565656; cursor:pointer; padding:5px 10px 6px 7px; /* Links */.b

11、uttons button width:auto; overflow:visible; padding:4px 10px 3px 7px; /* IE6 */.buttons buttontype padding:5px 10px 5px 7px; /* Firefox */ line-height:17px; /* Safari */*:first-child+html buttontype padding:4px 10px 3px 7px; /* IE7 */.buttons button img, .buttons a img margin:0 3px -3px 0 !important

12、; padding:0; border:none; width:16px; height:16px;當(dāng)這些運(yùn)行的時(shí)候有一件事情會(huì)發(fā)生，那就是在InternetExplorer中在顯示長按鈕時(shí)有個(gè)顯示錯(cuò)誤。你可以在Jehiah.cz中讀到相關(guān)信息，但是它正是一些寬度和上面聲明的溢出的原因。加點(diǎn)兒顏色在Wufoo中，我們?yōu)橹行詣?dòng)作的把Hover顏色定為藍(lán)色，把綠色和紅色用作正面和負(fù)面的連接。下面是我們創(chuàng)建的處理意味著正面的例如添加和保存的按鈕和負(fù)面的如取消和刪除的按鈕。這對我們來說是種很好的感覺，同時(shí)明顯的你也可以挑選你喜歡的顏色。/* STANDARD */button:hover, .butt

13、ons a:hover background-color:#dff4ff; border:1px solid #c2e1ef; color:#336699;.buttons a:active background-color:#6299c5; border:1px solid #6299c5; color:#fff;/* POSITIVE */button.positive, .buttons a.positive color:#529214;.buttons a.positive:hover, button.positive:hover background-color:#E6EFC2; border:1px solid #C6D880; color:#529214;.buttons a.positive:active background-color:#529214; border:1px solid #529214; color:#fff;/* NEGATIVE */.buttons a.negative, button.negative color:#d12f19;.buttons