首先1：需要對計算機硬件有一些了解,至少要懂得機器的硬件一般由哪些構(gòu)成。2：要對網(wǎng)頁設(shè)計常用軟件很精通,一般常用的網(wǎng)頁設(shè)計軟件包括Photoshop,firework,flash,dreamweaver,當(dāng)然了,還要精通HTML標(biāo)記代碼,他可是所有設(shè)計的根本。還有一些網(wǎng)頁特效的使用,所以,您還需要學(xué)習(xí)有關(guān)CSS,JSP的有關(guān)知識. 3：有了以上這些,可以做出一個相當(dāng)不錯的網(wǎng)頁了,但是要是做一個網(wǎng)站,或是可以進(jìn)行交互式的網(wǎng)頁,還需要了解有關(guān)ASP,還有ACCESS或者是SQL數(shù)據(jù)庫方面的知識才可以 4：如果要發(fā)布到互聯(lián)網(wǎng)上,還需要了解一些關(guān)于FTP方面的知識,以便于可以迅速的上傳你的網(wǎng)頁. 5：在本機調(diào)試網(wǎng)站時,我們一般會使用一些工具在本機進(jìn)行調(diào)式,還需要學(xué)習(xí)有關(guān)WEB服務(wù)器架設(shè)方面的常識,常用的有MICROSOFT WINDOWS自帶的IIS或是阿帕奇等. 6：為了推廣網(wǎng)站,在各大搜索引擎進(jìn)行登記也是必需的,所以,還需要有一些關(guān)于互聯(lián)網(wǎng)使用方面的常識.

你好，設(shè)計一個網(wǎng)站其實很簡單。首先，可以告訴想學(xué)網(wǎng)頁制作的朋友。學(xué)習(xí)制作網(wǎng)頁和學(xué)習(xí)其它知識一樣，是要有基礎(chǔ)的。在基礎(chǔ)之上學(xué)習(xí)起來會比較輕松和快捷的。其次，要清楚學(xué)習(xí)它是用來做什么。 建議你要具備的條件：對電腦熟練操作，使用電腦最好在一年以上，對網(wǎng)頁設(shè)計感興趣，有較充足的學(xué)習(xí)時間，熟悉office辦公軟件。當(dāng)然，這些不是一定必須的。 第一階段：開始時最好是學(xué)些網(wǎng)頁編輯軟件，如：FrontPage、Dreamweaver.這樣可以使您更了解網(wǎng)頁制作與運營的原理。最好使拿本教程來學(xué)學(xué)，結(jié)合教程邊學(xué)習(xí)邊制作。 第二階段：會用網(wǎng)頁制作軟件后，已會制作一個較完整的網(wǎng)站了。但為了能使自己設(shè)計制作的網(wǎng)頁盡善盡美，還是學(xué)習(xí)網(wǎng)頁的核心技術(shù)吧！網(wǎng)頁編輯語言（包括:html、css、javascript、asp、xml等）。你可以選擇地學(xué)習(xí)。 第三階段:結(jié)合你自己已掌握地知識來開發(fā)網(wǎng)站，可以開發(fā)出別人給你定義的目標(biāo)網(wǎng)站。到了這個時候，你就成為真正的網(wǎng)站開發(fā)者了。 怎樣制作網(wǎng)頁，不是說一兩篇文章能夠說清楚的。以上介紹的是制作網(wǎng)頁的主要綱要，希望能夠給想要學(xué)習(xí)制作網(wǎng)頁的朋友一個參考。 一、工具 1、空間 網(wǎng)頁做好了肯定是要發(fā)表上網(wǎng)的，所以必須先申請一個空間；免費的空間不是很穩(wěn)定，容量又小，也不好申請，建議先買一個個人空間，大概有個20M以上的就可以了。 2、軟件 推薦使用Dreamweaver8.0中文版，這個軟件最大的特點就是“所見即所得”，也即是制作過程中看到的，便是到時發(fā)布到網(wǎng)絡(luò)上的。 二、教程 花點時間，找個比較通俗易懂的教程看一看是很有必要的。每個網(wǎng)頁的組成，不外是文字、表格、圖、動畫還有就是背景音樂等幾個大的元素，搞清楚如何將這些元素擺放進(jìn)去，你也就算懂得如何制作網(wǎng)頁了。 三、制作 開始時建議去下載一個比較簡單的網(wǎng)頁，在制作軟件中將它打開，然后仔細(xì)觀察人家的網(wǎng)頁的構(gòu)成，模仿它去填充各種元素，實踐中再配合著教城，進(jìn)度會快很多，記得也牢一些。 其實做網(wǎng)頁并不難，但要做出有特色的網(wǎng)頁來，那就非一朝一夕之功了。 一點個人的粗淺體會，不妥之處敬請指正。 三 網(wǎng)站設(shè)計八步驟 由于目前所見即所得類型的工具越來越多，使用也越來越方便，所以制作網(wǎng)頁已經(jīng)變成了一件輕松的工作，不像以前要手工編寫一行行的源代碼那樣。一般初學(xué)者經(jīng)過短暫的學(xué)習(xí)就可以學(xué)會制作網(wǎng)頁，于是他們認(rèn)為網(wǎng)頁制作非常簡單，就匆匆忙忙制作自己的網(wǎng)站，可是做出來之后與別人一比，才發(fā)現(xiàn)自己的網(wǎng)站非常粗糙，這是為什么呢？常言道：“性急吃不了熱豆腐”。建立一個網(wǎng)站就像蓋一幢大樓一樣，它是一個系統(tǒng)工程，有自己特定的工作流程，你只有遵循這個步驟，按部就班地一步步來，才能設(shè)計出一個滿意的網(wǎng)站。 一、確定網(wǎng)站主題 網(wǎng)站主題就是你建立的網(wǎng)站所要包含的主要內(nèi)容，一個網(wǎng)站必須要有一個明確的主題。特別是對于個人網(wǎng)站，你不可能像綜合網(wǎng)站那樣做得內(nèi)容大而全，包羅萬象。你沒有這個能力，也沒這個精力，所以必須要找準(zhǔn)一個自己最感興趣內(nèi)容，做深、做透，辦出自己的特色，這樣才能給用戶留下深刻的印象。網(wǎng)站的主題無定則，只要是你感興趣的，任何內(nèi)容都可以，但主題要鮮明，在你的主題范圍內(nèi)內(nèi)容做到大而全、精而深。 二、搜集材料 明確了網(wǎng)站的主題以后，你就要圍繞主題開始搜集材料了。常言道：“巧婦難為無米之炊”。要想讓自己的網(wǎng)站有血有肉，能夠吸引住用戶，你就要盡量搜集材料，搜集得材料越多，以后制作網(wǎng)站就越容易。材料既可以從圖書、報紙、光盤、多媒體上得來，也可以從互聯(lián)網(wǎng)上搜集，然后把搜集的材料去粗取精，去偽存真，作為自己制作網(wǎng)頁的素材。 三、規(guī)劃網(wǎng)站 一個網(wǎng)站設(shè)計得成功與否，很大程度上決定于設(shè)計者的規(guī)劃水平，規(guī)劃網(wǎng)站就像設(shè)計師設(shè)計大樓一樣，圖紙設(shè)計好了，才能建成一座漂亮的樓房。網(wǎng)站規(guī)劃包含的內(nèi)容很多，如網(wǎng)站的結(jié)構(gòu)、欄目的設(shè)置、網(wǎng)站的風(fēng)格、顏色搭配、版面布局、文字圖片的運用等，你只有在制作網(wǎng)頁之前把這些方面都考慮到了，才能在制作時駕輕就熟，胸有成竹。也只有如此制作出來的網(wǎng)頁才能有個性、有特色，具有吸引力。如何規(guī)劃網(wǎng)站的每一項具體內(nèi)容，我們在下面會有詳細(xì)介紹。四、選擇合適的制作工具 盡管選擇什么樣的工具并不會影響你設(shè)計網(wǎng)頁的好壞，但是一款功能強大、使用簡單的軟件往往可以起到事半功倍的效果。網(wǎng)頁制作涉及的工具比較多，首先就是網(wǎng)頁制作工具了，目前大多數(shù)網(wǎng)民選用的都是所見即所得的編輯工具，這其中的優(yōu)秀者當(dāng)然是Dreamweaver和Frontpage了，如果是初學(xué)者，F(xiàn)rontpage2000是首選。除此之外，還有圖片編輯工具，如Photoshop、Photoimpact等；動畫制作工具，如Flash、Cool 3d、Gif Animator等；還有網(wǎng)頁特效工具，如有聲有色等，網(wǎng)上有許多這方面的軟件，你可以根據(jù)需要靈活運用。 五、制作網(wǎng)頁 材料有了，工具也選好了，下面就需要按照規(guī)劃一步步地把自己的想法變成現(xiàn)實了，這是一個復(fù)雜而細(xì)致的過程，一定要按照先大后小、先簡單后復(fù)雜來進(jìn)行制作。所謂先大后小，就是說在制作網(wǎng)頁時，先把大的結(jié)構(gòu)設(shè)計好，然后再逐步完善小的結(jié)構(gòu)設(shè)計。所謂先簡單后復(fù)雜，就是先設(shè)計出簡單的內(nèi)容，然后再設(shè)計復(fù)雜的內(nèi)容，以便出現(xiàn)問題時好修改。在制作網(wǎng)頁時要多靈活運用模板，這樣可以大大提高制作效率。 六、上傳測試 網(wǎng)頁制作完畢，最后要發(fā)布到Web服務(wù)器上，才能夠讓全世界的朋友觀看，現(xiàn)在上傳的工具有很多，有些網(wǎng)頁制作工具本身就帶有FTP功能，利用這些FTP工具，你可以很方便地把網(wǎng)站發(fā)布到自己申請的主頁存放服務(wù)器上。網(wǎng)站上傳以后，你要在瀏覽器中打開自己的網(wǎng)站，逐頁逐個鏈接的進(jìn)行測試，發(fā)現(xiàn)問題，及時修改，然后再上傳測試。全部測試完畢就可以把你的網(wǎng)址告訴給朋友，讓他們來瀏覽。 七、推廣宣傳 網(wǎng)頁做好之后，還要不斷地進(jìn)行宣傳，這樣才能讓的朋友認(rèn)識它，提高網(wǎng)站的訪問率和知名度。推廣的方法有很多，例如到搜索引擎上注冊、與別的網(wǎng)站交換鏈接、加入廣告鏈等。 八、維護(hù)更新 網(wǎng)站要注意經(jīng)常維護(hù)更新內(nèi)容，保持內(nèi)容的新鮮，不要一做好就放在那兒不變了，只有不斷地給它補充新的內(nèi)容，才能夠吸引住瀏覽者 希望我的回答能夠?qū)δ阌兴鶐椭?，如果有網(wǎng)站網(wǎng)頁上面的相關(guān)問題，可以直接聯(lián)系我，很高興能夠幫得上你 。滿意請采納

第一：學(xué)習(xí)前端我是怎么掉培訓(xùn)機構(gòu)坑里的前端確實是一門很好的技術(shù)，我個人也很喜歡這個技術(shù)，奈何我大學(xué)的時候光玩了，沒有好好學(xué)習(xí)這么技術(shù)，當(dāng)大學(xué)畢業(yè)面臨找工作的時候，我才突然發(fā)現(xiàn)，原來這幾年的大學(xué)都是虛度了，我什么都不會，腦子沒什么長進(jìn)，肉長了一身。在我內(nèi)心迷茫的時刻，我發(fā)現(xiàn)我的前輩師哥師姐們很多做前端混的不錯，于是我就想從事前端技術(shù)的開發(fā)，可是我不會，我就在我們當(dāng)?shù)氐囊粋€前端機構(gòu)參加了培訓(xùn)耗費了我?guī)兹f的大洋，在這個機構(gòu)半年的學(xué)習(xí)，我簡直是要崩潰了，曾經(jīng)大學(xué)時代，老師講的好，我不好好學(xué)?，F(xiàn)在是我想好好學(xué)了，老師講的太差了，很多知識點老師自己講著講著自己都蒙圈了，不知道應(yīng)該如何往下講了，此刻我的心是崩潰的。后來我調(diào)查發(fā)現(xiàn)，其實很多類似的機構(gòu)都是剛剛從大學(xué)畢業(yè)的學(xué)生當(dāng)?shù)睦蠋煟麄儾]有什么實戰(zhàn)開發(fā)經(jīng)驗，講的也不是什么實用的新技術(shù)流，依然每天圍繞著所謂的概念講啊講，簡直就是糊弄。半年的課程還沒結(jié)束，我們班的同學(xué)已經(jīng)走了一半多了。二   在我迷茫時想放棄前端時，他改變了我，讓我玩轉(zhuǎn)前端當(dāng)我懷著一個迷茫的心情離開這家機構(gòu)，我的內(nèi)心是迷茫的，看不清未來，更何況我因為參加這個機構(gòu)的學(xué)習(xí)欠了幾萬塊錢了，我實在是走投無路了。只能在網(wǎng)吧打游戲混日子頹廢我的人生，也不想回家，就怕爸爸媽媽問我學(xué)的怎么樣，我真的沒臉回答他們。每天在網(wǎng)吧對著電腦，我的內(nèi)心是很空洞的，我再問我難道要這么繼續(xù)下去嗎？我難道要這么失敗下去嗎？為什么別人可以做到，而我卻不可以呢？我要證明我的存在，我要證明我的價值。在網(wǎng)吧待了很多天，我發(fā)現(xiàn)一個奇怪的人，我們整個網(wǎng)吧里的人幾乎都在打游戲，唯獨他，每天拿著一個筆，一個本子，在電腦旁邊學(xué)邊記，我鼓著勇氣走到他面前，看他在干什么，他對我笑了笑說，你好，我在學(xué)前端呢。我問他學(xué)的怎么樣了，他說他學(xué)了一個多月了，已經(jīng)自己獨立完成了三個網(wǎng)站的制作了。我簡直不敢相信我的耳朵，我都學(xué)習(xí)了三個月了，一個像樣的網(wǎng)站我也沒整出來啊，更何況我是正規(guī)軍跟老師學(xué)的，這哥們在網(wǎng)上學(xué)的。這哥們很熱心，把他學(xué)習(xí)的群介紹給了我，把我也拉了進(jìn)去，我在里面聽了幾天，聽的我是熱血沸騰，原來前端這么好玩，這么高大上，可以開發(fā)出這么炫酷的效果，技術(shù)可以這么好玩。我在這個群里學(xué)了2個月，啥也沒花，就付出了時間和努力，就感覺收獲滿滿的，然后再我們當(dāng)?shù)卣伊艘环莺苓€不錯的工作。很多朋友在問我這個群是啥？那我跟大家說一下吧，位于前面開頭的一組數(shù)字是：517，接下來排在第二組的數(shù)字是：125，位于尾巴部位的一組是：299，按照先后順序組合起來就可以了。是不是很好玩的一個數(shù)字組合游戲，聰明的你可以試試，里面有很多實用的前端開發(fā)教程奧。這個地方改變了我的命運，這個人也成為了我的好朋友。二  ：   大前端完整學(xué)習(xí)路線（詳解），讓大家少走一些彎路第一階段：HTML+CSS:HTML進(jìn)階、CSS進(jìn)階、div+css布局、HTML+css整站開發(fā)、JavaScript基礎(chǔ)：Js基礎(chǔ)教程、js內(nèi)置對象常用方法、常見DOM樹操作大全、ECMAscript、DOM、BOM、定時器和焦點圖。JS基本特效：常見特效、例如：tab、導(dǎo)航、整頁滾動、輪播圖、JS制作幻燈片、彈出層、手風(fēng)琴菜單、瀑布流布局、滾動事件、滾差視圖。JS高級特征：正則表達(dá)式、排序算法、遞歸算法、閉包、函數(shù)節(jié)流、作用域鏈、基于距離運動框架、面向?qū)ο蠡A(chǔ)、JQuery：基礎(chǔ)使用懸著器、DOM操作、特效和動畫、方法鏈、拖拽、變形、JQueryUI組件基本使用。第二階段：HTML5和移動Web開發(fā)HTML5：HTML5新語義標(biāo)簽、HTML5表單、音頻和視頻、離線和本地存儲、SVG、Web Socket、Canvas.CSS3:CSS3新選擇器、偽元素、臉色表示法、邊框、陰影、background系列屬性改變、Transition、動畫、景深和深透、3D效果制作、Velocity.js框架、元素進(jìn)場、出場策略、炫酷CSS3網(wǎng)頁制作。Bootstrap:響應(yīng)式概念、媒體查詢、響應(yīng)式網(wǎng)站制作、刪格系統(tǒng)、刪格系統(tǒng)原理、Bootstrap常用模板、LESS和SASS。移動Web開發(fā)：跨終端WEB和主流設(shè)備簡介、視口、流式布局、彈性盒子、rem、移動終端JavaScript事件、手機中常見JS效果制作、Zepto.js、手機聚劃算頁面、手機滾屏。第三階段：HTTP服務(wù)和AJAX編程WEB服務(wù)器基礎(chǔ)：服務(wù)器基礎(chǔ)知識、Apache服務(wù)器和其他WEB服務(wù)器介紹、Apache服務(wù)器搭建、HTTP介紹。PHP基礎(chǔ)：PHP基礎(chǔ)語法、使用PHP處理簡單的GET或者POST請求、AJAX上篇：Ajax簡介和異步的概念、Ajax框架的封裝、XMLHttpRequest對象詳細(xì)介紹方法、兼容性處理方法、Ajax框架的封裝、Ajax中緩存問題、XML介紹和使用。AJAX下篇：JSON和JSON解析、數(shù)據(jù)綁定和模板技術(shù)、JSONP、跨域技術(shù)、圖片預(yù)讀取和lazy-load技術(shù)、JQuery框架中的AjaxAPI、使用Ajax實現(xiàn)爆布流案例額。第四階段：面向?qū)ο筮M(jìn)階面向?qū)ο蠼K極篇：從內(nèi)存角度到理解JS面向?qū)ο?、基本類型、?fù)雜類型、原型鏈、ES6中的面向?qū)ο?、屬性讀寫權(quán)限、設(shè)置器、訪問器。面向?qū)ο笕筇卣鳎豪^承性、多態(tài)性、封裝性、接口。設(shè)計模式：面向?qū)ο缶幊趟季S、單例模式、工廠模式、策略模式、觀察者模式、模板方法模式、代理模式、裝飾者模式、適配器模式、面向切面編程。第五階段：封裝一個屬于自己的框架框架封裝基礎(chǔ)：事件流、冒泡、捕獲、事件對象、事件框架、選擇框架?？蚣芊庋b中級：運動原理、單物體運動框架、多物體運動框架、運動框架面向?qū)ο蠓庋b?？蚣芊庋b高級和補充：JQuery框架雛形、可擴展性、模塊化、封裝屬于傳智自己的框架。第六階段：模塊化組件開發(fā)面向組件編程：面向組件編程的方式、面向組件編程的實現(xiàn)原理、面向組件編程實戰(zhàn)、基于組件化思想開發(fā)網(wǎng)站應(yīng)用程序。面向模塊編程：AMD設(shè)計規(guī)范、CMD設(shè)計規(guī)范、RequireJS，LoadJS、淘寶的SeaJS。第七階段：主流的流行框架Web開發(fā)工作流：GIT/SVN、Yeoman腳手架、NPM/Bower依賴管理工具、Grunt/Gulp/Webpack。MVC/MVVM/MVW框架：Angular.js、Backbone.js、Knockout/Ember。常用庫：React.js、Vue.js、Zepto.js。第八階段：HTML5原生移動應(yīng)用開發(fā)Cordova：WebApp/NativeApp/HybirdApp簡介、Cordova簡介、與PhoneGap之間的關(guān)系、開發(fā)環(huán)境搭建、Cordova實戰(zhàn)（創(chuàng)建項目，配置，編譯，調(diào)試，部署發(fā)布）。Ionic：Ionic簡介和同類對比、模板項目解析、常見組件及使用、結(jié)合Angular構(gòu)建APP、常見效果（下拉刷新，上拉加載，側(cè)滑導(dǎo)航，選項卡）。React Native：React Native簡介、React Native環(huán)境配置、創(chuàng)建項目，配置，編譯，調(diào)試，部署發(fā)布、原生模塊和UI組件、原生常用API。HTML5+：HTML5+中國產(chǎn)業(yè)聯(lián)盟、HTML5 Plus Runtime環(huán)境、HBuilder開發(fā)工具、MUI框架、H5+開發(fā)和部署。第九階段：   Node.js全棧開發(fā)：快速入門：Node.js發(fā)展、生態(tài)圈、Io.js、Linux/Windows/OS X環(huán)境配置、REPL環(huán)境和控制臺程序、異步編程，非阻塞I/O、模塊概念，模塊管理工具、開發(fā)流程，調(diào)試，測試。核心模塊和對象：全局對象global，process，console，util、事件驅(qū)動，事件發(fā)射器、加密解密，路徑操作，序列化和反序列化、文件流操作、HTTP服務(wù)端與客戶端、Socket.IO。Web開發(fā)基礎(chǔ)：HTTP協(xié)議，請求響應(yīng)處理過程、關(guān)系型數(shù)據(jù)庫操作和數(shù)據(jù)訪問、非關(guān)系型數(shù)據(jù)庫操作和數(shù)據(jù)訪問、原生的Node.js開發(fā)Web應(yīng)用程序、Web開發(fā)工作流、Node.js開發(fā)Blog案例。快速開發(fā)框架：Express簡介+MVC簡介、Express常用API、Express路由模塊、Jade/Ejs模板引擎、使用Express重構(gòu)Blog案例、Koa等其他常見MVC框架。Node.js開發(fā)電子商務(wù)實戰(zhàn)：需求與設(shè)計、賬戶模塊注冊登錄、會員中心模塊、前臺展示模塊、購物車，訂單結(jié)算、在線客服即時通訊模塊。

學(xué)得差不多了是什么程度？ 我給你舉一個實例吧 首先 這個網(wǎng)站 布局 就是分塊 你能分出來不 如果能 你的 div+css 關(guān)于布局這塊沒問題然后 每一個模塊中的css 能夠模仿出來不 如果能 那么 css沒問題然后 就是特效了 特效有點難度 要從簡單上手 因為 js 是緊緊關(guān)聯(lián)著 div+css的 但又要求一定的邏輯能力 所以 如果你學(xué)過別的 編程語言稍微好點 建議你 這樣學(xué) 單純的做效果 就是先不要綜合使用 就單js特效 比如定時切換 比如 懸浮切換選項卡 之類的 都熟練以后 就好了 關(guān)于 jq jquery的最大特點在于定位方便 想知道入門了沒有 很簡單 任意結(jié)構(gòu) 能夠用 $("xxx").mouseove(function(){alert("1")}) 定位 并測試成功 以上的這些 步驟 也是實際開發(fā)一個 前臺頁面的步驟 您在學(xué)的時候有沒有模仿其他人的模板呀（或者完整的模仿其他人的模板，和他做的一摸一樣）我在學(xué)模仿他人的模板，這樣學(xué)是不是有點走偏了？？？？？？？？； 單獨的一個別人寫過方法的jq腳本 會用，但在模仿其他人的完整的模板時，找不清楚他人的jq怎么用的，尤其是在《模仿他人完整的網(wǎng)頁模板》時，一個header的腳本內(nèi)容我都搞不出來。學(xué)的有點鬧心了: ( 那絕對沒走偏 因為只有先模仿 才知道基本的套路 你想再創(chuàng)新 才有一定的基礎(chǔ) 現(xiàn)在能被廣泛應(yīng)用的肯定是 經(jīng)典的 要學(xué)習(xí)的 另外 整體項目的時候 就要一個個去分析 把大的js特效拆成小的 不過有些實現(xiàn)不了的 可能是腳本 這點你自己注意

在phpcms\\templates\\default\\content目次下的index.html就是首頁的模板。第一步：將美工新設(shè)計的模板放置到phpcms/templates/default/模塊目錄名/模板文件名.html 如: phpcms/templates/default/content/category_new.html 如: phpcms/templates/default/content/category_download_new.html 如: phpcms/templates/default/content/category_picture_new.html [html] view plaincopy第二步：找到phpcms/templates/default/config.php配置文件添加如下代碼(紅色標(biāo)注)： array ( 'templates|default|content' => //content-代表內(nèi)容模塊的模板風(fēng)格 array ( 'category.html' => '文章頻道頁', 'category_new.html' => '文章頻道頁', 'category_download.html' => '下載頻道頁', 'category_download_new.html' => '下載頻道頁', 'category_picture.html' => '圖片頻道頁', 'category_picture_new.html' => '圖片頻道頁', 'download.html' => '下載連接頁', 'footer.html' => '底部', [html] view plaincopy第三步：到后臺去選擇新的欄目頁、列表頁、內(nèi)容詳情頁模板 。

步驟1 創(chuàng)建空白的HTML 5模版 首先，我們創(chuàng)建一個空白的模版，代碼很簡單，如下所示：復(fù)制代碼步驟2 增加HTML 5新標(biāo)簽 HTML 5中新增加了不少標(biāo)簽，如： article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section在頁面模版中，我們需要確保每個區(qū)域都能正確地對齊，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer這些標(biāo)簽。代碼如下所示：復(fù)制代碼讀者可能留意到這里使用的div id=”wrapper”，這個是稍候用來做meida query的時候調(diào)整全局CSS樣式調(diào)整用的 步驟3 往HTML 5標(biāo)簽中增加代碼 1）首先往標(biāo)題中增加如下代碼： 　Simple HTML5 Template 復(fù)制代碼2）往導(dǎo)航標(biāo)簽中添加如下代碼，這樣很方便地構(gòu)件了一個簡單的頁面分類導(dǎo)航： Home About Parent Page Child One Child Two with child Child One Child Two Child Three Child Three Contact 復(fù)制代碼3）使用標(biāo)簽來描述每一個要展示的內(nèi)容實體,比如要展示的是多篇文章列表,其中的每一篇文章的具體內(nèi)容就可以使用標(biāo)簽了。如下代碼所示： This is a title for post Richard KS 20th March 2013 Tutorials HTML5, CSS3 and Responsive 10 Comments Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 復(fù)制代碼4）添加標(biāo)簽 HTML5提供的元素標(biāo)簽用來表示當(dāng)前頁面或文章的附屬信息部分，可以包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、nav元素組，以及其他類似的有別與主要內(nèi)容的部分。根據(jù)目前的規(guī)范，元素有兩種使用方法：被包含在中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的引用、詞匯列表等。 在之外使用，作為頁面或站點全局的附屬信息部分；最典型的形式是側(cè)邊欄(sidebar)，其中的內(nèi)容可以是友情鏈接、附屬導(dǎo)航或廣告單元等。 代碼如下：Categories Category 1 Category 2 Parent Category Child One Child Two Grandchild One Grandchild Two Grandchild Three Child Three Category 3 Text Lorem Ipsum is simply dummy text of the printing and typesetting industry. 復(fù)制代碼5）加上最后的標(biāo)簽，代碼為： Copyright@ 2013 HTML5.com Privacy Policy - About Us復(fù)制代碼 步驟4 增加CSS樣式 首先創(chuàng)建一個空白的樣式，如下：[/code] 然后在http://necolas.github.com/normalize.css/中下載這個css,然后將其內(nèi)容復(fù)制到該空白的文件中代碼如下： [code]body {font-family: arial, sans-serif;font-size: 100%; /* best for all browser using em */padding:0;margin:0;}*, html { line-height: 1.6em; }article img { width:auto; max-width:100%; height:auto; }.sidebar a, article a, header a, footer a { color: #C30; }header a { text-decoration: none; }#wrapper {font-size: 0.8em; /* 13px from 100% global font-size */max-width: 960px; /* standard 1024px wide */margin: 0 auto;}/* css for */header { padding: 1em 0; margin: 0px; float: left; width: 100%;}header hgroup { width: 100%; font-weight:normal; }/* css for */nav { display: block; margin: 0 0 2em; padding: 0px; float: left; width: 100%; background-color: #181919;}nav ul ul {display: none;}nav ul li:hover > ul {display: block;}nav ul { padding: 0; list-style: none; position: relative; display: inline-table; z-index: 9999; margin: 0px; float: left; width: 100%;}nav ul:after {content: ""; clear: both; display: block;}nav ul li {float: left;}nav ul li:hover a {color: #fff;}nav ul li a { display: block; padding: 1em; font-size: 1.125em; color: #ccc; text-decoration: none; margin: 0px; background-color: #000; border-right: 1px solid #333;}nav ul li:last-of-type a {border-right: 1px solid transparent !important;}nav ul ul { background: #5f6975; border-radius: 0px; padding: 0; position: absolute; top: 100%; width: auto; float: none;}nav ul li:hover { background: #5f6975; color: #FFF;}nav ul ul li a:hover { background-color: #4b545f;}nav ul ul li {float: none;border-bottom: 1px solid #444240;position: relative;}nav ul ul li a {padding: 0.5em 1em;font-size: 1em;width:10em;color: #fff;}nav ul ul ul {position: absolute; left: 100%; top:0;}/* css for */section.content { width: 70%; float:left; }.content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; }article .entry { clear:both; padding: 0 0 1em; }h1.post-title { font-size: 1.8em; margin:0; padding:0;}.entry.post-meta { color: #888; }.entry.post-meta span { padding: 0 1em 0 0; }.entry.post-content { font-size: 1.125em; margin:0; padding:0;}/* css for */aside.sidebar { width: 25%; float:right; }aside.sidebar ul { width:100%; margin: 0px; padding: 0px; float: left; list-style: none;}aside.sidebar ul li { width:100%; margin: 0px 0px 2em; padding: 0px; float: left; list-style: none;}aside.sidebar ul li ul li { margin: 0px 0px 0.2em; padding: 0px;}aside.sidebar ul li ul li ul li { margin: 0px; padding: 0px 0px 0px 1em; width: 90%; font-size: 0.9em;}aside.sidebar ul li h3.widget-title { width:100%; margin: 0px; padding: 0px; float: left; font-size: 1.45em;}/* css for */footer { width: 98%; float:left; padding: 1%; background-color: white; margin-top: 2em;}footer .footer-left { width: 45%; float:left; text-align:left; }footer .footer-right { width: 45%; float:right; text-align:right; }復(fù)制代碼步驟5 為移動應(yīng)用使用@media query查詢 為了進(jìn)行響應(yīng)式設(shè)計，最佳的方案是使用@media query去進(jìn)行查詢，在上面的CSS代碼中添加如下代碼：/* ipad 768px */@media only screen and (min-width:470px) and (max-width:770px){body { background-color: red; } #wrapper { width:96%; font-size: 0.6875em; }section.content, aside.sidebar { width:100%; }}/* iphone 468px */@media only screen and (min-width:270px) and (max-width:470px){body { background-color: yellow; } #wrapper { width:96%; font-size: 0.6875em; }section.content, aside.sidebar { width:100%; }}復(fù)制代碼步驟6 增加jquery,modernizer和html5shiv到標(biāo)簽中 這里推薦使用Modernizr 和html5shiv，它們都是一個能在多種瀏覽器中通過運行各種腳本兼容運行支持大部分HTML 5標(biāo)簽的插件。我們將它們和jQuery庫放在標(biāo)簽前，代碼如下：0復(fù)制代碼