網頁設計結構層涉及思路

1、網頁製作--層與標簽的運用

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

2、Web前端是幹嘛的

web前端，做的工作與網站系統的頁面相關工作，主要是製作網頁，並且在原有的靜態頁面上增加各種特效，以及網上的維護等。

Web前端開發是一項很特殊的工作，涵蓋的知識面非常廣，既有具體的技術，又有抽象的理念。簡單地說，它的主要職能就是把網站的界面更好地呈現給用戶。使用到的主要技術包括：HTML、CSS、JavaScript，如果能會後台編程語言，當然會更好。

(2)網頁設計結構層涉及思路擴展資料

Web前端開發所需要的技術基礎：

1、對常用的一些JS框架了解，如jQuery、YUI等。

2、掌握最基本的JavaScript計算方法編寫。

3、對目前互聯網流行的網頁製作方法（Web2.0）HTML+CSS，以及各大瀏覽器兼容性有很大的了解。

4、對前沿技術（HTML5+CSS3）的基本掌握。

5、還要對IT其他編程語言有所了解如：PHP，Java，.net！有一些公司還要求懂一點SEO優化。

3、WEB前端能做什麼？

web（World Wide Web）即全球廣域網，也稱為萬維網，它是一種基於超文本和HTTP的、全球性的、動態交互的、跨平台的分布式圖形信息系統。是建立在Internet上的一種網路服務，為瀏覽者在Internet上查找和瀏覽信息提供了圖形化的、易於訪問的直觀界面，其中的文檔及超級鏈接將Internet上的信息節點組織成一個互為關聯的網狀結構。

而對於網站製作、設計者來說，它是一系列技術的復合總稱。web前端開發主要是通
html,css,js,ajax,DOM等前端技術,實現網站在客服端的正確顯示及交互功能。
Web前端開發工程師是一個比較新的職業，在國內乃至國際上真正開始受到重視的時間不超過5年。Web前端開發是從網頁製作演變而來的，名稱上有很明顯的時代特徵。在互聯網的演化進程中，網頁製作是Web 1.0時代的產物，那時網站的主要內容都是靜態的，用戶使用網站的行為也以瀏覽為主。

2005年以後，互聯網進入Web 2.0時代，各種類似桌面軟體的Web應用大量涌現，網站的前端由此發生了翻天覆地的變化。網頁不再只是承載單一的文字和圖片，各種豐富媒體讓網頁的內容更加生動，網頁上軟體化的交互形式為用戶提供了更好的使用體驗，這些都是基於前端技術實現的。
web前端開發包含面很廣，要學的東西也很多。簡單點說web前端開發就是做軟體開發、微信小程序 、網頁設計、網站建設、APP開發、游戲開發這塊的。

4、UI設計和網頁美工的區別是什麼

UI設計只是網站美工的一部分，網站美工需要學習的內容有UI設計，PS，AI，html語言，javaScript語言等。

網頁美工局限於美術設計和頁面製作，UI注重交互，用戶體驗是第一目標。

UI設計師的職能大體包括三方面：一是圖形設計，軟體產品的產品「外形」設計。二是交互設計，主要在於設計軟體的操作流程、樹狀結構、操作規范等。一個軟體產品在編碼之前需要做的就是交互設計，並且確立交互模型，交互規范。三是用戶測試/研究，這里所謂的「測試」，其目標恰在於測試交互設計的合理性及圖形設計的美觀性，主要通過以目標用戶問卷的形式衡量UI設計的合理性。

網頁美工需要學習網站概念知識、色彩構成、網頁設計中的美學規律、FIREWORKS網頁圖形處理、FLASH二維動畫、PHOTOSHOP平面設計軟體在網站設計中的應用、作品設計及點評等內容。

拓展知識

UI設計：UI即User Interface（用戶界面）的簡稱。UI設計則是指對軟體的人機交互、操作邏輯、界面美觀的整體設計。好的UI設計不僅是讓軟體變得有個性有品味，還要讓軟體的操作變得舒適、簡單、自由、充分體現軟體的定位和特點。

網頁美工：是精通美學，photoshop（PS），FLASH，dreamwaver（DW）等一網站製作軟體的網路人員，必須具有良好的創意和一定程度的審美觀。必要時需要一定的策劃知識。為網站所有的頁面畫出來並用DW和css排版出來。頁面必須清晰簡潔，還要適宜後台調用。

5、求一個用frontpage做的網頁，設計要求二級網頁不少於4個，網站結構不少於3層，做的好可再加分。謝謝

更好的方法跟姐夫結婚那天見到距

6、視覺傳達設計專業的就業前景怎麼樣？

關於視覺傳達設計的就業前景，我想第1點很重要是視覺傳達設計畢業之後學生是不愁找不到工作的，因為現在正處於互聯網時代，所有的公司都需要平面設計，都需要視覺傳達設計這一個職業。

現在的就業情況就是視覺傳達設計師做兩年之後會被其他公司挖去，設計師就會以更高的薪酬為理由去跳槽，這樣兩年一跳槽，過幾年之後，薪資就會已經翻了好幾倍了。

昨天去南京與時澄大神（知名平面設計師）交流了一下，他說像他們現在比較熬得算是有點成就的設計師，其實都是以前摸爬滾打出來的，沒有人會比較輕松，都是被別人否定，自我懷疑，再堅持努力，繼續向前學習做設計。大師都是從底層做起的，所以不要擔心前景問題，干就是了。

第2點是視覺傳達設計，其實如果專心和認真，還有對這個專業非常感興趣和喜愛的話，其實在很好的公司裡面會得到非常多的磨練，比如去一些比較牛的4a廣告公司，還有比較注重設計感的一些設計公司，當然大型公司會更注重這一點。

這樣子虛心的學幾年的話，真的不愁找不到好工作，因為你又有能力又有工作經驗，這種員工是哪個公司都會需要的。

還有視覺傳達設計有在國外讀研經歷的話，會更加受到追捧，因為設計這一門專業，如果會英語的話，前景是更翻倍，所以視覺傳達設計在校期間，就有意識的把英語提高一下，出來工作更是前程無量。

但是視覺傳達設計，是門檻非常低的，有一些沒什麼學歷的人只要學一下軟體，就能做現在設計師了，所以很多公司不懂設計的外行的老闆就會覺得設計師其實是非常廉價的，很容易被人看低。

因此，個人能力的提高和勇於展現自己的能力，對自己的前景會非常重要。

7、初中歷史學不好怎麼辦

歷史是一個文科性質的學科，所以各位初中生在學習初中歷史時，做到以下幾點對學習成績有幫助：
1、初中歷史的學習在於閱讀、理解，記憶。需要初中生具備的基本技能是將掌握的知識點可以熟練運用。所以在學習時一定要提高學習效率。所以每個學生要根據自己的情況進行學習，如某些某些學生更容易理解條理清晰的知識點，那麼在學習時就要將學習過的知識點進行整理。或者是自己學習時效率低那麼就要提高課堂上的學習效率。所以各位初中生一定要找到自己在學習上的特點，
2、初中生在學習初中歷史時需要掌握的另一個基本技能就是學會速度記憶。這是提高初中生學習效率的一種辦法。這樣初中生可在學習時舊件大部分的知識點進行記憶，大大縮短了課下的學習壓力。
3、初中生能否將學習過的初中歷史知識點進行整理是初中生能不能取得好成績的關鍵因素。初中生要把學習過的知識進行整合，方便記憶、復習。而且還要講新學習的知識點與以前所學過的知識點進行聯系。以增加這個知識點在自己腦海中的記憶。
4、做題是初中生學習任何任何一科都必不可少的，但是並不建議初中生使用題海戰術。做題在於質量而不在於數量。有些初中生在學習初中歷史時盲目的使用題海戰術，非但知識沒有學習明白，反而讓初中生自己將所學的知識點記混了，得不償失。所以初中生要把握好做題的數量，在做題中最重要的是學會反思、歸類和整理出相應的解題技巧。並且對自己的知識體系進行調整完善。

8、求一個簡單ASP.NET製作的電子商務網站（三層結構）

ASP.NET三層架構電子商務網站的設計.doc_免費高速下載_新浪愛問共...

9、網頁設計作業，要交的，主題鮮明，網站結構清晰合理，可用性強，七個欄目，至少兩個層次，八個頁面，坐等。

?

10、要怎麼用dreamweaver製作嵌套式層次結構框架網頁

利用dreamweaver的框架式頁面布局工具可以製作。

在新建網頁時可以選擇「新建文檔」對話框中的「框架集」列表中的一種布局，比如「上方固定，左側嵌套」，就建立了一個框架。