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

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

3、這些按鈕就像上面我們的副本一樣工作和表現(xiàn)是一樣的。另外，為了提交表單，你可以使他們無效，添加一個accesskey或者指定一個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ì)方案同時在這里我們的朋友寫著一本偉大的互聯(lián)網(wǎng)手冊中有一部分標(biāo)記好像正好在這個問題上可以幫助我們。這是很方便的，然而不幸的是大部分設(shè)計(jì)師和開發(fā)者甚至不知道這樣一個標(biāo)簽存在。現(xiàn)在，在我用按鈕標(biāo)簽取代image input之前，我確定這個標(biāo)簽和CSS必須滿足一些條件：條件：1、它們要看起來像按鈕。2、它們在不同的瀏覽器里看起來要一樣。3、我用在按鈕上的樣式需要同樣用在我可能會用的鏈接上。4、標(biāo)簽應(yīng)該是靈活的，易用于許多不同的情況。5、我將能夠有效地使用圖標(biāo)和色彩來傳遞將會發(fā)生的交互類型的信息。帶著這些適當(dāng)?shù)奶魬?zhàn)，

6、我在解決了夸瀏覽器的挑戰(zhàn)后鉆進(jìn)了CSS之中，得出了下面的結(jié)果：結(jié)果：沒有什么了不起的，簡單，但有效?，F(xiàn)在，我喜歡用這種方式處理按鈕是因?yàn)槲铱梢允褂肍AMFAMFAM的1000個圖標(biāo)庫來舉例說明大量可笑的想法和動作而不用每一次我需要新東西的時候非得用Photoshop來做一些東西。如果我們快速看一下這些標(biāo)簽，你會注意到最后那兩個按鈕實(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>這個有用的原因是網(wǎng)頁程序中的許多動作是依靠激發(fā)的，因而通過一個鏈接簡單的發(fā)送一個用戶到一個特殊的URL將引發(fā)它們需要做的動作。使用樣式可以為兩個元素（鏈接和按鈕）工作，無論是用于AJAX或者標(biāo)準(zhǔn)提交都能給我們保持交互方法的一致和適當(dāng)?shù)撵`活性。只是一個短暫旁白，你可能想知道為什么在那些圖片中我讓ALT標(biāo)簽空白呢?？赡軙X得驚奇于alt屬性在每個圖片都是必須的，事實(shí)上不是這樣的。空的alt屬性是完全有效的和有利于屏幕前的人知道哪些信息是有效忽略，當(dāng)你的用戶努力

9、尋找下一個目標(biāo)時節(jié)省他們的寶貴時間。由于這些圖標(biāo)確實(shí)是多余的，我寧愿不去浪費(fèi)用戶睞接收我使用的圖片而不是接著呈現(xiàn)出來。他們將只會收到“Submit”而不是“Checkmark Submit”，那確實(shí)會讓事情變的有點(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)行的時候有一件事情會發(fā)生，那就是在InternetExplorer中在顯示長按鈕時有個顯示錯誤。你可以在Jehiah.cz中讀到相關(guān)信息，但是它正是一些寬度和上面聲明的溢出的原因。加點(diǎn)兒顏色在Wufoo中，我們?yōu)橹行詣幼鞯陌袶over顏色定為藍(lán)色，把綠色和紅色用作正面和負(fù)面的連接。下面是我們創(chuàng)建的處理意味著正面的例如添加和保存的按鈕和負(fù)面的如取消和刪除的按鈕。這對我們來說是種很好的感覺，同時明顯的你也可以挑選你喜歡的顏色。/* 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