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