• 
• 
• 
• 
• 
• 
• 

知識(shí)普及 ? 網(wǎng)頁(yè)制作,改變你的思維方式

網(wǎng)頁(yè)制作,改變你的思維方式

奈薇網(wǎng)站建設(shè) 于2019-07-14 16:55發(fā)表 閱讀次數(shù) 2240次

“重構(gòu)”的春風(fēng)吹遍大江南北，互聯(lián)網(wǎng)一時(shí)間風(fēng)聲鶴唳，“div+CSS”儼然已成為一種“時(shí)尚”，難以盡數(shù)的網(wǎng)站都不約而同地開(kāi)始了自己的“重構(gòu)”。然而打開(kāi)這形形色******站的源代碼，卻時(shí)常令人啞然失笑—— 　　我們看到有嵌套6、7層的div布局，有不用table的表格，有純div+a構(gòu)成的頁(yè)面，有成百上千的表現(xiàn)層class……現(xiàn)在關(guān)于標(biāo)準(zhǔn)的書籍越來(lái)越多，除了少數(shù)幾本標(biāo)榜“高級(jí)技巧”的書籍以外，很少有人不會(huì)在自己著作的前幾章強(qiáng)調(diào)這樣一句話——“結(jié)構(gòu)與表現(xiàn)分離”。然而這些書籍的讀者們，又有多少人認(rèn)認(rèn)真真地讀過(guò)前幾章呢？還是更多地直接跳過(guò)那些乏味的結(jié)構(gòu)講解，一頭扎到貌似高深的布局技巧與Hack中去？ 　　其實(shí)div+CSS這個(gè)說(shuō)法從一開(kāi)始就誤導(dǎo)了太多的人，急功近利的心態(tài)則更是造成這種現(xiàn)象的罪魁禍?zhǔn)住Ｒ粋€(gè)習(xí)慣了table布局的網(wǎng)頁(yè)制作接觸標(biāo)準(zhǔn)的第一步，不應(yīng)該是去盲目尋求實(shí)現(xiàn)各種布局的CSS技巧，而是努力改變自己的思維方式。 　　下面將結(jié)合我的切身體會(huì)談一談順應(yīng)標(biāo)準(zhǔn)的思維方式，其中有不少是我曾經(jīng)走過(guò)的彎路，希望對(duì)剛剛接觸標(biāo)準(zhǔn)的XDJM們有些幫助： 　　1、“節(jié)省代碼”是營(yíng)銷手段，不是宗旨 　　“使用div布局可以比table布局節(jié)省更多的代碼”，我在很多書籍和網(wǎng)站上見(jiàn)到過(guò)這句話。這句話本身是沒(méi)錯(cuò)的，可以“節(jié)省代碼”的確是網(wǎng)頁(yè)標(biāo)準(zhǔn)化所帶來(lái)的好處之一。然而切記，它只是“好處之一”，而不是“唯一好處”，更不是宗旨?！肮?jié)省代碼”更多的時(shí)候是我們用來(lái)說(shuō)服那些頑固不化的老板的營(yíng)銷手段。網(wǎng)頁(yè)標(biāo)準(zhǔn)化的唯一宗旨是“結(jié)構(gòu)與表現(xiàn)分離”，而絕不是為了節(jié)省代碼而節(jié)省代碼。我曾經(jīng)因?yàn)榫W(wǎng)站邊欄甚至主體內(nèi)容的表現(xiàn)形式相同而采用了統(tǒng)一的class（至今還有一些書是這樣教的），這樣的確比分別命名id更節(jié)省代碼，然而這樣做的代價(jià)是代碼失去了良好的結(jié)構(gòu)。失去良好結(jié)構(gòu)的后果是：一、源代碼沒(méi)有了可讀性；二、網(wǎng)站增加了未知的維護(hù)成本。試想，當(dāng)某一塊內(nèi)容因?yàn)樾枰鞒霰憩F(xiàn)形式的變動(dòng)，例如鏈接的顏色等等，我們就不得不去修改頁(yè)面源文件，增加額外的class，工作量比起只需要調(diào)整id分組就大了許多。而且長(zhǎng)此以往，結(jié)構(gòu)將會(huì)越來(lái)越差，形成難以逆轉(zhuǎn)的惡性循環(huán)。 　　還有一種情況，出現(xiàn)在id的命名方面，也是本人曾經(jīng)犯過(guò)的錯(cuò)誤。那時(shí)為了“節(jié)省代碼”，而把主菜單命名為“mm”，二級(jí)菜單命名為“m2”，三級(jí)菜單為“m3”，結(jié)果嚴(yán)重降低了網(wǎng)頁(yè)的可讀性，使其他同事很難接手，圖省事卻累了自己。同理，文件及文件夾命名方面也不宜過(guò)簡(jiǎn)，象《網(wǎng)站重構(gòu)》里建議把圖片都用“i”目錄存放，個(gè)人以為并不可取，除非你能為這種高度縮寫的目錄結(jié)構(gòu)撰寫詳細(xì)說(shuō)明并保證每個(gè)相關(guān)人員包括其他制作人員、開(kāi)發(fā)、甚至懂行的老板……都能理解和執(zhí)行，否則只會(huì)給你自己增添不必要的麻煩。 　　2、ID是狙擊槍，class是雙刃劍 　　想要做好網(wǎng)頁(yè)結(jié)構(gòu)，id與class都是必須熟練掌握的，所謂“兩手抓，兩手都要硬”。ID就象狙擊槍一樣，可以幫助我們精準(zhǔn)地定位要想要加載樣式的元素；而class則是俠客的佩劍，信手拈來(lái)更加輕盈靈便，兩者的結(jié)合能夠?qū)崿F(xiàn)結(jié)構(gòu)良好且表現(xiàn)豐富的頁(yè)面。然而現(xiàn)在有一種錯(cuò)誤的觀點(diǎn)，就是id完全可以用class來(lái)取代，事實(shí)上許多網(wǎng)頁(yè)源代碼也的確如此，打開(kāi)來(lái)通篇class，找不到一個(gè)id。造成這種現(xiàn)象的理由有很多種，然而自table時(shí)代傳下來(lái)的根深蒂固的“class=CSS”的觀念才是本因。的確，class比id用途更廣更靈活，但也必須意識(shí)到，class對(duì)于構(gòu)建良好的網(wǎng)頁(yè)結(jié)構(gòu)遠(yuǎn)不如id有效。id的強(qiáng)制唯一性使得我們可以很容易通過(guò)id檢索到我們需要的任意模塊，而class則沒(méi)有這個(gè)優(yōu)勢(shì)。雖然我們可以為模塊定義唯一的class名，但前提是——只有制作者本人可以動(dòng)網(wǎng)頁(yè)樣式。否則換一個(gè)稍微懶一些伙計(jì)，看到樣式相同便直接把前面的class拿來(lái)套用，其結(jié)果就是我們發(fā)現(xiàn)網(wǎng)頁(yè)里有十幾個(gè)模塊都叫做“gonggao”或者“xinwen”，以至于為了區(qū)分還不得不加上大量的html注釋，這樣的結(jié)果顯然并不是我們想要的。再者就是前面提到的，通過(guò)通用class所節(jié)省下來(lái)的代碼，又不得不在每個(gè)單獨(dú)定義的class中揮霍掉。 　　ID是狙擊槍，class是雙刃劍，合則兩利，分則兩敗。 　　3、并不是所有的內(nèi)容都需要div做“容器” 　　主菜單究竟是用<divid="mainnav"><ul>還是<ulid="mainnav">？這是一個(gè)博弈的問(wèn)題。至今這個(gè)問(wèn)題也沒(méi)有人能夠給出明確的答案，就連我也是如此。誠(chéng)然，<divid="mainnav">在只包含了一個(gè)<ul>元素的時(shí)候，這個(gè)div就顯得有些冗余，但有時(shí)候?yàn)榱伺浜厦拦そk麗的設(shè)計(jì)，多一層標(biāo)簽就意味著多一層變化（有些人在a標(biāo)簽里套span也是如此）。而div不帶任何原始屬性的先天優(yōu)勢(shì)也是其它標(biāo)簽所無(wú)法比擬的。這個(gè)命題我只是想說(shuō)明一件事，就是我們應(yīng)該意識(shí)到，<divid="mainnav"><ul>之外，還有<ulid="mainnav">這種寫法，同樣具有良好的結(jié)構(gòu)和語(yǔ)義，并且省去了一層嵌套。在我們不需要為華麗的美工勞心勞神的時(shí)候，是不是也可以讓結(jié)構(gòu)更加簡(jiǎn)約呢？ 　　這個(gè)命題其實(shí)還可以引申為——“并不是所有內(nèi)容都需要塊元素做容器”、“并不是所有鏈接都需要其它元素做容器”，例如很多頁(yè)面都有的“更多”。有些人寫做“<divclass="more"><a>”，也有人寫做<p><a>或者<strong><a>。在這些“容器”只包含了一個(gè)<a>標(biāo)簽的時(shí)候，它們是否還有存在的必要？直接寫成<aclass="more">會(huì)破壞結(jié)構(gòu)嗎？會(huì)缺乏語(yǔ)義嗎？會(huì)影響布局嗎？換一種思路，你也許就會(huì)有不一樣的收獲。 　　4、工作上也做到“結(jié)構(gòu)與表現(xiàn)分離” 　　關(guān)于這一點(diǎn)，網(wǎng)絡(luò)上很多高手都是這樣建議的，也就是先打開(kāi)編輯器，把結(jié)構(gòu)完整地寫出來(lái)，再去CSS里寫表現(xiàn)，而盡量不去動(dòng)已經(jīng)寫好的結(jié)構(gòu)。 　　然而以看書為主要學(xué)習(xí)方式的人卻很難體會(huì)，因?yàn)殛P(guān)于標(biāo)準(zhǔn)的書籍多半是手把手來(lái)教的，也就是必然是結(jié)構(gòu)表現(xiàn)結(jié)合，循序漸進(jìn)。雖然有些書籍有這方面的建議，但短短的幾句話遠(yuǎn)不如讀書過(guò)程中的潛移默化。在制作人員能夠?qū)Y(jié)構(gòu)良好把握的時(shí)候，同時(shí)寫結(jié)構(gòu)與表現(xiàn)也不會(huì)對(duì)結(jié)果有太大的影響。但以我的經(jīng)驗(yàn)，結(jié)構(gòu)表現(xiàn)分離的工作方式，要比同時(shí)寫結(jié)構(gòu)與表現(xiàn)效率高很多，同時(shí)也不容易遺漏頁(yè)面上的元素。 　　當(dāng)然，所謂的“結(jié)構(gòu)與表現(xiàn)分離”并不是完全不考慮表現(xiàn)，想要兼顧到表現(xiàn)，就要保證——在不破壞結(jié)構(gòu)的前提下，CSS選擇器能夠選擇到盡量多的內(nèi)容。在哪些地方加class，或者用哪些標(biāo)簽來(lái)區(qū)分，是一個(gè)見(jiàn)仁見(jiàn)智的地方，相信每個(gè)人都有自己的體會(huì)。而結(jié)合不同的設(shè)計(jì)稿，有時(shí)候也需要做出相應(yīng)的變化，然而這些變化都應(yīng)該有一個(gè)同樣的前提——不破壞代碼的結(jié)構(gòu)和可讀性。 　　再就是，一定要意識(shí)到，任何可視化的工具都是魔鬼。它們可視化界面下所呈現(xiàn)的效果，往往與真實(shí)瀏覽器相差千里，而我們真正要兼容的是瀏覽器，不是編輯器的可視化界面。 　　5、CSS不是萬(wàn)能的，沒(méi)有CSS也不是萬(wàn)萬(wàn)不能的 　　相比于CSS1.0時(shí)代，今天CSS可以完成更多的事情，然而需求永遠(yuǎn)是領(lǐng)先于技術(shù)的，CSS無(wú)法完成網(wǎng)頁(yè)所有的表現(xiàn)層工作，有時(shí)候我們必須結(jié)合JS或者其他語(yǔ)言來(lái)實(shí)現(xiàn)一些效果。而另一些時(shí)候，用JS的方法比只靠CSS簡(jiǎn)單得多，并且代碼結(jié)構(gòu)更加良好——最典型的例子就是下拉菜單。這些時(shí)候，我們要說(shuō)服自己，或者說(shuō)服老板與客戶，去采用更簡(jiǎn)單更合理的方式。因?yàn)镈OM同樣是網(wǎng)頁(yè)標(biāo)準(zhǔn)的重要組成，并不是使用了JS我們的網(wǎng)頁(yè)就降低了效率或是不再標(biāo)準(zhǔn)，恰恰相反，這是對(duì)JS最大的誤解。說(shuō)到這里不得不提一點(diǎn)，就是今天的時(shí)代，比以往更要求每個(gè)職業(yè)了解更多的相關(guān)知識(shí)，做設(shè)計(jì)的人要懂一點(diǎn)交互和制作，做制作的也必須了解設(shè)計(jì)和程序，尤其是JS這樣的前端技術(shù)，只有這樣，你和同事才能夠更好地合作，個(gè)人的發(fā)展前景也會(huì)更加光明。 　　沒(méi)有CSS，指的是當(dāng)我們的網(wǎng)站因?yàn)楦鞣N未知的原因?qū)е翪SS文件載入失敗，不要因此而慌亂，這是考驗(yàn)我們代碼質(zhì)量的最佳時(shí)機(jī)。在沒(méi)有CSS的時(shí)候，如果網(wǎng)頁(yè)仍舊保持良好的可讀性，這成果要遠(yuǎn)比通過(guò)W3C驗(yàn)證更值得我們自豪。

網(wǎng)頁(yè)制作,改變你的思維方式相關(guān)標(biāo)簽：網(wǎng)站規(guī)劃，網(wǎng)站申請(qǐng)，網(wǎng)站設(shè)計(jì)公司，制作網(wǎng)站

相關(guān)熱點(diǎn)推薦

青島海信寬帶多媒體再次 如何提高網(wǎng)站轉(zhuǎn)換率的設(shè) 企業(yè)建站關(guān)鍵注意事項(xiàng) 企業(yè)如何建站 網(wǎng)頁(yè)設(shè)計(jì)流行趨勢(shì)解讀 一名視覺(jué)設(shè)計(jì)師對(duì)于網(wǎng)站 我們還需要“面包屑”嗎 外貿(mào)企業(yè)網(wǎng)站建設(shè)方案及 在制作網(wǎng)站的時(shí)候我們幫 進(jìn)一步優(yōu)化網(wǎng)站，減少百 網(wǎng)站布局有講究 怎樣做個(gè)簡(jiǎn)單的小網(wǎng)站 企業(yè)建站十大理由 首頁(yè)代碼規(guī)范 網(wǎng)站建設(shè)之美觀與營(yíng)銷需 企業(yè)建站的盈利模式及網(wǎng) 一起關(guān)注2015年如何 新創(chuàng)建的網(wǎng)站如何讓百度 讓訪客信任你的十二大網(wǎng) 密碼保護(hù)信息的用戶體驗(yàn) 青島做外貿(mào)網(wǎng)站建設(shè)哪家 如何才能短期內(nèi)提高網(wǎng)站 習(xí)慣是一件很可怕的事， 網(wǎng)頁(yè)制作,改變你的思維 網(wǎng)站制作前的充分準(zhǔn)備會(huì) 搜索引擎訪問(wèn)網(wǎng)站返回碼 中小企業(yè)建網(wǎng)站要多少錢 細(xì)節(jié)決定成敗與web用 如何設(shè)計(jì)網(wǎng)頁(yè)橫幅 網(wǎng)頁(yè)設(shè)計(jì)中的中英文字體 網(wǎng)站(100-1)%的 DIV+CSS布局網(wǎng)頁(yè) 青島開(kāi)發(fā)區(qū)、膠南網(wǎng)站建 網(wǎng)站建設(shè)時(shí)，設(shè)計(jì)首頁(yè)時(shí) 企業(yè)建網(wǎng)站的風(fēng)格 兩大網(wǎng)站流量分析工具比 分析網(wǎng)站排名下降的影響 全局于網(wǎng)站整體的網(wǎng)頁(yè)設(shè) 網(wǎng)頁(yè)設(shè)計(jì)配色基礎(chǔ)：RG

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時(shí)歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點(diǎn)地區(qū)：青島網(wǎng)站建設(shè)價(jià)格 青島即墨網(wǎng)站制作公司 開(kāi)發(fā)區(qū)信息港 山東在線門戶