如何編寫網(wǎng)頁設計和開發(fā)教程
寫作是熟能生巧的藝術品。讓我們邁出作為網(wǎng)頁設計寫作者這漫長旅途的第一步吧。以下是小編為大家搜索整理如何編寫網(wǎng)頁設計和開發(fā)教程，希望能給大家?guī)韼椭?更多精彩內(nèi)容請及時關注我們應屆畢業(yè)生考試網(wǎng)!
記住我們有兩個主要目標——學習網(wǎng)頁設計并從中獲利。我們選擇寫作這條路來達到我們的目標。
你想知道
我發(fā)表文章收到了很多意見和建議。主要有兩大問題：
怎樣編寫網(wǎng)頁設計和開發(fā)流行話題教程并聚集人氣?
怎樣得到那些知名設計博客的青睞并獲得報酬?
沒有什么能一蹴而就。我會通過這篇文章回答上面第一個問題。一旦你成為一名好作者，我們就能看到怎樣從中獲利。
你要成為一名作家，作家!
作為一名寫作菜鳥，你的終極目標應該是盡可能多地得到讀者的反饋，不管是好是壞。
正面的反饋意味著：
你提供了讀者期待的內(nèi)容;
你正在增加寫作獲利的可能性。
負面的反饋意味著：
你的文章平淡無奇，讀者對這些千篇一律的教程并不感興趣。
你的無知讓你提供的內(nèi)容有錯誤。反饋能助你學習成長，不會重蹈覆轍。
不要想著寫東西只是為了得到負面反饋并從中學習，而是讓你的內(nèi)容有爭議性。
"有爭議的定義是：引起或可能引起公眾的分歧。"
當你寫有爭議性的文章時，一定要明確指出你寫的是你的觀點。不要表明你觀點的對錯或這是做事情的最好方式，而是這就是你樂意做的方式。
響應式設計可能就是分享爭議性觀點的好主題。所有人都說響應式網(wǎng)頁設計(RWD)是網(wǎng)頁設計的未來。你可以從流體網(wǎng)格布局問題或移動設備帶寬問題談談RWD并不是正確的解決之道。
在寫網(wǎng)頁設計博客之前你應該清楚什么造就好文章。下面這個信息圖表就描述了寫出好文章的關鍵。
鏈接：http://www.mattaboutbusiness.com/what-makes-the-best-website-content-infographic/trackback/
現(xiàn)在讓我們選幾個話題來寫：
選擇熱門教程
每篇文章的觀點表達本質(zhì)上都具有其獨特性，盡管他們從讀者那里得到的結(jié)果是不一樣。每一篇新教程都是起起伏伏，但正確選擇教程類型會幫你保持優(yōu)越感。恰當?shù)慕坛填愋湍苋傆脩�，這是了解他們獲得成功的聰明之舉。下面是當下最流行的獲得最多關注的教程類型：
屏幕視頻
屏幕視頻就是通過電腦屏幕記錄你解釋怎樣做某件事的視頻。這是最流行的教程類型之一，因為讀者能實時地看到它到底是怎樣設計出來的。做截屏視頻教程你需要有一個好點的麥克風、 屏幕錄制軟件加上大量的練習。
現(xiàn)在讓我們看看制作高質(zhì)量視頻的一般準則
保證教程能用簡單的方法來解釋每一步。因為大部分人都是視覺型學習者，他們通常會忽略那些解釋。
順便講講你正在做的東西的背景。例如，當你設計響應式布局時你要考慮這樣一種情形，媒體查詢的使用是響應式設計的核心任務之一，在你開始用媒體查詢時，最好簡單的介紹下他們是什么。
通常在錄視頻之前我們首先做一遍這個設計并把必要的模型定下來。然后我們再重新做一遍錄下來給讀者。因為之前我們已經(jīng)做過一遍，我們知道每一步究竟要做什么，一步之后我們會得到什么樣的結(jié)果，這樣觀看者也會知道每一步的重要性。
比起文字教程，制作視頻教程更有意思。讀者也似乎更喜歡視頻教程。所以在1WD(www.1stwebdesigner.com)網(wǎng)站我們決定做一些還不錯的視頻教程給網(wǎng)頁設計初學者。作為教程寫作初學者，這些教程會幫助你掌握屏幕視頻的藝術。
這里有一些頂級視頻供大家參考學習：
5分鐘創(chuàng)建你的響應式WordPress網(wǎng)站
網(wǎng)頁設計基礎視頻教程(一)——框架、Photoshop工具/面板和設計
網(wǎng)頁設計基礎視頻教程(二)——HTML標簽基本、結(jié)構和CSS
網(wǎng)頁設計基礎視頻教程(三)——完整HTML標記和CSS樣式
一步步教你設計和編碼
雖說視頻教程很流行，但比起文字教程那是少之又少。因此下面介紹下一個最受歡迎的類型的教程是一步步教你設計。
在這些教程里，你得從草圖開始制作一個完整的設計或者設計的一部分。大部分的教程會有設計示范和代碼文件供讀者下載。因此最終的輸出讀者可以直接使用。
作為初學者，你應該把大部分精力放在這樣的教程上，因為它不需要你很有經(jīng)驗。你可以設計任何你想要的東西給讀者，教他們通過給定的設計變得更富有創(chuàng)造力。
下面我們來看一些很酷的一步步設計教程的例子：
用jQuery和CSS創(chuàng)建一個時尚的Tweet書本效果
簡單8步設計自定義推特頭部
學習如何使用Photoshop快速創(chuàng)建有趣的社交圖標
只要你有一些讀者期望的創(chuàng)意和知識，寫這些教程其實并不難。下面我推薦一些指導方法用于一步步設計教程
把代碼拆分成小段分開解釋;
重要步驟截圖;
確保任何情況下教程都有一個演示。要是你能在每一個重要步驟都能展示這個演示就更好了，這樣讀者就能知道他們正在做什么。
新趨勢教程
這是另外一種流行的教程，因為任何設計師和開發(fā)者都想和新技術同步。盡管我這里講的是新趨勢，但我們也可以把流行庫或流行服務的最新版計入其中。
響應式網(wǎng)頁設計是最近最流行的新趨勢話題。當然最新版本的Wordpress新特性也是一個流行話題。
這種教程的成功依賴于你能多早發(fā)布它們。一個新版發(fā)布或新的概念引進后你能馬上發(fā)布教程你肯定能獲得更好的效果。
下面是一些當前趨勢的教程供你參考：
流體網(wǎng)格如何在響應式網(wǎng)頁設計中運作
WordPress主題形勢：當前主題趨勢和分類
HTML5介紹——HTML5功能、特性和資源
CSS3介紹——新特性、功能及資源
現(xiàn)在你已經(jīng)具備一名成功教程寫作者能正確選擇教程類型的能力。下面最重要的一步是掌握如何結(jié)構化你的文章讓它更對讀者胃口。
引人注意的法寶——易讀性
寫教程其實沒什么訣竅，就是要人們閱讀和使用它們。所以讓訪問者來看你的教程對作者和網(wǎng)站所有者至關重要。其中最重要的是對你文章的第一印象。
有很多網(wǎng)站有大量設計相關教程，而且大部分讀者會有固定鐘愛的網(wǎng)站。他們都知道自己不可能有時間看所有文章。那么怎樣讓他們來讀你的文章呢?
"時間是我們最缺的，但也是我們用的最差的。"
—— William Penn
第一時間就抓住人們的注意力絕對必要。標題吸引法不失為一個吸引注意的方式。一旦獲得關注，通過文章的第一小部分保持這種興趣至關重要。讓我們來看看怎樣正確結(jié)構化你的文章保證用戶的興趣及易讀性。
在開始之前，我們來看看下面這個1stWebDesigner上的教程的結(jié)構和設計，它完美絕對會入你法眼。
你可以看到這篇文章用同種方式結(jié)構化文章，這樣讀者很容易理解這篇教程不會有任何干擾。
長篇大論最容易讓讀者挫敗。我通常會離這種文章遠遠的因為我不確定這篇文章是否能夠提供我想要的內(nèi)容。
如果讀者讀一篇文章不需要花過多的時間就能知道文章主旨并能對這篇文章做個總結(jié)，我覺得就是所謂結(jié)構良好。顯然這意味文章應該分成不同的幾塊，這樣我們可以每塊單獨理解。
我們來探究一下內(nèi)容的不同部分怎樣構建結(jié)構良好的教程。
標題。 標題是最教程最重要的部分之一。應該有一系列的主標題對應你教程的主要內(nèi)容。副標題把主要的點又分解成更小的點。在1stWebDesigner 上絕大多數(shù)文章都有合適的標題，通過標題你就能得到這段的中心思想。
段落。 教程每段應該盡可能短。每一段不要超過3到4個句子。要是讀者總是讀很長的段落他們很快就會煩死。因為他們要讀完整段內(nèi)容才能得到那個觀點。所以確保要點短小精煉。
圖片或者截圖。 讀者讀設計相關文章有圖片更易理解。有兩種類型的圖片：一種是展示與教程相關的普通圖片或某些類型的圖表。第二種，也是更廣泛使用的，做設計時從屏幕上捕捉下來的截圖。對于那種提供讀者下載的教程有截圖是必須的。每一個重要步驟后你都應該放一個設計截圖給讀者看。就像下面的圖片：
源碼。 這個內(nèi)容與設計特殊教程有關。源碼是打破長段落的絕好方式。有時我們會看到那些整段代碼的教程。這是很不好的體驗。讀者一下子理解大量代碼是很困難的。因此你應該把源碼分成小段并在代碼中間提供必要的解釋。同時你也需要一個高質(zhì)量代碼格式化插件。下面的例子很有效的在教程中使用了代碼。
演示。 我覺得它是那些以設計為基礎注重最后結(jié)果的教程的必需品。演示是讀者準備看教程最先要看的。如果演示都用不了，讀者是不會相信你的源碼和教程的。所以只要可能有個演示是最好的。演示的質(zhì)量很大程度上決定了用戶的反饋。有時候我們寫教程的主要目的是教授一個原理，這種情況下演示不是最重要的，但讀者也想找找演示，這樣判斷教程的質(zhì)量。如果你有演示，把它做出來是做好的了。
這里列出了一些很牛逼的演示的教程：
用jQuery 創(chuàng)建一個滑動導航菜單
用CSS的background屬性設計一個還不錯的產(chǎn)品頁
媒體查詢教程——把BurnStudio變成一個響應式網(wǎng)站
引用。 連續(xù)閱讀一篇長文其實很困難，引用可以讓讀者松口氣。所以我們可以把一些重要的內(nèi)容作為引用插到文章里，讓用戶想一會兒。不過首先你需要一個特殊的設計把引用從其他內(nèi)容中區(qū)分開來。
Tuts+
應該引用什么呢?我喜歡列出那些重要的理論、定義和勵志名言。你也可以在這篇文章里找到很多引用的例子。
結(jié)構化教程指南已經(jīng)完成，我敢肯定你想看一篇有著良好結(jié)構的完整例子。James Richman 的這篇文章就很好的說明了結(jié)構的力量：學習網(wǎng)頁設計的正確方式——退學，并開始不斷吸"血"。
學學這篇文章是怎樣架構的，包括怎樣用完美內(nèi)容加上演示和代碼創(chuàng)造牛X無比的教程來吸引讀者。
少即是多——縮小范圍
教程的范圍是它成功的關鍵。我認為這是首先也是最重要的要考慮的因素。
什么是范圍?
根據(jù)dictionary.com，范圍是一些涉及或與此相關的領域或主題的擴展�；旧线@意味著我們要覆蓋一個特定話題的范圍有多大。
那么為什么我要告訴你盡量減少你的教程范圍?
每一個作者都想覆蓋更廣的主題，像"響應式設計 "、"WordPress 主題設計 "、"CSS屬性選擇器 "等等�，F(xiàn)在的問題是這些主題非常廣，而且在這個領域的專家已經(jīng)發(fā)布了很多相關教程。作為初學者，我們再發(fā)布相似的教程不可能受到關注，因為這些高質(zhì)量的教程已經(jīng)在這些主題有所成就。
我們的目標是找到這樣的話題：
讀者常遇見的難題
沒有被專家們解答
為了符合上面提到的兩個條件，我們需要最少化范圍直到我們找到一些獨特的東西來寫。
現(xiàn)在我們來做個練習來確定范圍的重要性。
假設你被要求寫一篇響應式設計的文章，通常你的首選是"怎樣設計響應式網(wǎng)頁 "或者"什么是響應式設計? "這樣的話題。盡管這兩個主題聽起來不錯，但已經(jīng)有一大把的文章和教程寫過了。這并不是說你不可能成功，而是你要面對很多可怕的競爭。
現(xiàn)在你得在狹小范圍內(nèi)尋找一個主題。在這種情況下我們可以考慮像"怎樣在響應式設計中駕馭字體 "和"響應式設計對大屏幕的解決辦法 "這樣更好的選擇。
一個好的設計，字體至關重要。但并沒有很多教程解釋在響應式設計中如何使用字體和字體大小。在響應式設計里我們經(jīng)常討論如何適應尺寸更小的移動設計，但沒有人討論說怎么樣處理好大屏幕顯示器的響應問題。
這里的字體和大屏幕只是設計的很一小塊。你要做的就是用詳細的使用案例解釋和討論這些小領域。
這并不總是說我們需要做更多而是我們需要關注更少。
—— Nathan W. Morris
所以基本上我們得在一個大領域內(nèi)選擇一個非常小的范圍嘗試寫完整的教程詳細解釋。這樣你的教程在其他競爭網(wǎng)站中是獨一無二的，成功也更有保證。
這篇文章本身就是理解范圍的一個好案例。這里我的標題涵蓋廣泛，在正常情況下不應該選擇。但盡管有很多文章講過寫教程，但沒有人特別講到網(wǎng)頁設計的寫作。因此這個主題好像還不錯，即使它涵蓋廣泛。
照這篇文章來說理想的主題可能是像"怎么正確選擇教程的范圍 "或者"源碼在設計類教程中的使用 "。
你怎樣選擇正確的范圍?
沒有固定的方式選擇正確的范圍。下面我分享一下我用到的尋找主題正確范圍的方法：
首先找一些你想寫的主題。假設你選了響應式設計。
現(xiàn)在搜索并讀讀這個主題的相關教程和文章。在這些教程里，你可以找到一些像媒體查詢、流動網(wǎng)格或適應性設計等等這樣的子主題。
然后搜索這些關鍵詞看看是否有大量與此相關的大量教程。如果沒有，選擇其實一個關鍵詞馬上開工。
不過情況可能是子主題也已經(jīng)被很多其他作者涵蓋好，這樣，去問答網(wǎng)站像 stackoverflow 根據(jù)這個關鍵詞搜問題。然后選一個問題最多的關鍵詞，寫一篇解釋這個關鍵詞或有關它的教程。
如果教程太長，可以把它分成幾部分，并在每一部分后面要讀者做一些反饋。
接下來怎么辦?
現(xiàn)在你可能對如何寫網(wǎng)頁設計教程有了一個很好的理解。接下來就是把這個理論付諸實踐，為此你需要讀寫大量高質(zhì)量教程。
【如何編寫網(wǎng)頁設計和開發(fā)教程】相關文章：
如何提升網(wǎng)頁設計和開發(fā)效率的網(wǎng)站與工具09-05
網(wǎng)頁設計和web前端開發(fā)哪個好09-20
關于css框架網(wǎng)頁設計教程09-05
Dreamweaver編寫CSS的教程06-02
如何設計網(wǎng)頁10-15
如何制作網(wǎng)頁設計09-17
網(wǎng)頁設計師學習編寫代碼的理由06-26