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