互聯網處在快速變革期。網頁前端開發深受近年來不斷改變的編碼技巧和手段的影響。在2003年，一個合格的網頁前端開發者需要了解HTML和CSS，他們也可能會一點Javascript(有可能是從別的地方復制粘貼來的)。他們所編寫的網站會在桌面電腦上供人瀏覽。

　　但是2013年情況不一樣了!現在，一個合格的前端開發者必須精通HTML、CSS、Javascript、jQuery，CSS預處理器，以及諸如響應式設計之類的新技術，他們還要考慮首先為移動端設計頁面，各種設備查看網站時的情況。

　　既然網頁前端開發這一行業已然改變，高等教育體系需要對講一些基本的網頁設計課程。問題是，如何教那些連HTML和CSS都不知道的學生, 好讓他們以獨立于設備的觀念，使用響應式設計和移動端優先的原則來設計構造網站呢?

　　我已經在許多學術和商業的環境下教網頁設計課程13年，也提出了一些在網頁設計開發過程中，如何講最基礎的兩項知識(圖形設計以及HTML和CSS 技術，譯者注)的想法。關于這些想法的討論十分重要, 因為講解網頁設計與開發的資源十分有限。由于時間緊迫，互聯網發展迅速，那種每年一個個訪問那些課程，用最新的材料更新課程的做法更加難以實施。

　　改善全職教授和兼職教員的合作有助于增強學生們的學習體驗

　　兼職教員，是那些有著一份全職工作，并且兼職講其他課程的教員。他們通常能制作專業的網站，同時也能有能跟上行業最新趨勢和技術的資源。然而，缺少了接觸寶貴教學法材料的便捷途徑，兼職教員很難找到適合學生們消化吸收這些前沿資料的呈現方式。

　　同時，全職教師和教授們做的網站通常不會很專業(或者根本就不會做網站)，他們需要滿足工作時的其他需求，很難抽出時間跟上新趨勢、新技術的發展。與兼職教員不同，這些教師教授對教學方法有很深入的研究，在網頁設計的課程中，什么樣的教學能起作用，什么樣的教學不起作用，他們了解得一清二楚。兼職教員通常晚上或者周末教學，而全職教師們常常在白天上課，所以兩個群體很少有交集。增進全職教師和兼職教員之間的合作，是增強學生體驗, 提高教學質量的關鍵之一。兩種教員都會為高等教育帶來互補的價值和技能。

　　在這篇文章中，我主要關注兩項課程：圖形設計和HTML、CSS。其他的概念，像是網站規劃、移動版優先原則、信息結構、可用性、以用戶為中心的設計、Javascript和jQuery、內容管理系統(CMS)、都是很重要的，都可以考慮設為課程涵蓋的范圍。然而，這些議題通常都在高校的其他課程中有所涉及，所以這里并不會提到上述內容。

　　創造出設計

　　在大多數學校的網頁設計課程中，學生們會上一堂課，學習使用Photoshop或者Fireworks，畫出一張簡單的網站布局圖。學生們會從現有網站的截圖開始，把內容和圖片換成自己的部分，或者讓一切從頭開始。

　　這項課程的理念是非常明智的。一旦學生們掌握了使用軟件的基本方法，課程將會激發對于可用性、色彩、布局、字體、頁面留白、圖片質量和位置等知識的討論，而暫時不涉及代碼的部分。這種做法能讓學生們在腦海中形成網頁的畫面，無需過多地關注網頁代碼是怎么編寫出來的。在學生們真正開始編寫網頁的時候，他們就可以在寫一行代碼之前弄明白自己想要的是什么了。

　　讓學生們在接觸代碼之前先形成網頁的概念是十分重要的

　　在課程中，常有學生對于(元素內容)超出畫布以后的行為感到困惑。如果只設計了960像素寬的內容，那么當顯示器為1200像素寬的時候，頁面會發生什么呢?通常情況下，超出的部分會填充為背景色或者填充為重復的圖案。學生們卻很少問到顯示區域寬度小于960像素后發生的事情。

　　在問及較窄屏幕的情況時，大多數學生會指出頁面底部會出現橫向滾動條，網站訪客需要拓寬瀏覽器寬度才能看得到完整的頁面。他們(這個時候)并不會考慮按鈕在觸屏設備上會不會很不好操作，文字大小在不同屏幕的顯示屏上是否會有很大的變動。這樣的教學方式倒是可以引導學生思考這些問題。

　　許多關注于響應式設計的工作室，不會去使用像在課上設計出的那種設計圖，也不把這種圖作為開發過程中的一部分。相反，他們更傾向使用基于HTML和CSS的設計圖來展示客戶端所看到的網站外觀。那為什么還要向學生們講圖像式的設計圖呢?

　　原因是，在開發過程的這個階段，學生們不一定十分了解HTML和CSS，極端情況下甚至一點也不了解。從設計圖上拿掉代碼的部分以后，學生們所關注的，是包括圖形設計和用戶體驗之類的設計原則。一旦他們學會了HTML和CSS以后，他們就再也不會使用圖像式的設計圖了。在學習基于圖像來設計網頁效果的過程中，他們學會了使用Photoshop/Fireworks，了解了使用這種設計環境的優點和缺點——這也是很有益的經驗。

　　下面是一些可以布置給學生的任務，讓他們可以為設備獨立的設計工作做好準備：

　　設計一個12等分欄的頁面

　　這項任務是講解網格系統及其工作原理的最佳時機。讓學生們基于網格設計布局能展示學生們對于這種設計的理解。

　　展示不同尺寸的設計

　　一個960像素寬的頁面，在1200像素寬的時候會是什么樣子的?320像素寬呢?767像素寬呢?讓學生們在設計中使用同樣的內容，在不同屏幕尺寸的環境下安排不同的布局。確保問到了“過渡”的問題——從767像素寬縮小到320像素寬的時候，布局又會有怎樣的改變呢?

　　問一些圖片的問題

　　頂部的大圖片在從767像素寬拉伸到960像素的時候，如何保持同樣漂亮的觀感呢?屏幕尺寸在767像素和960像素之間的時候，圖片又會發生什么呢?

　　鼓勵學生思考觸摸屏的行為

　　在屏幕尺寸較小的時候這一點尤為重要，并且現在桌面電腦和筆記本電腦也在逐漸地觸摸化。這里可以鼓勵學生思考適合手指粗壯人士的情況。

　　弱化切圖

　　把設計圖當作網站想象的樣子，不如就把網站做成原型。切圖將不那么重要，因為這樣一來需要為不同屏幕尺寸的請況準備不同大小的圖片。現在背景圖甚至也需要在各自的文檔中自行指定。弱化了切圖，也就弱化了這種圖像式設計圖的中心地位。在有了響應式設計之后，設計圖按照既定尺寸值或者方向設計。而在 320像素寬、767像素寬和960像素寬或者更高屏幕尺寸之間的空白區域，需要反復調整。

　　有注意到一些公司有志于做出這個無需編寫代碼便能做出更加靈活設計的解決方案。等這樣的程序更加穩定了以后，便值得考慮將這些軟件的使用整合到大學課程中了。

　　講解HTML和CSS

　　在典型的HTML和CSS課程中，學生們會學習到標記和呈現的差異。在一學期的課程中，他們學會從頭創建一個網頁，處理HTML、CSS和圖像文件。他們的布局會各不相同，因此也會在學習過程中學到浮動和定位的知識。在碰到瀏覽器兼容性的時候，就會學會怎么處理這種兼容性問題。

　　“Don’t Fear The Internet”是一個學習 HTML 和 CSS 基礎知識的極佳資源。上面的課程基本上沒有錯誤。學生們會學習如何手寫與標準兼容的HTML和CSS代碼。同時，考慮到現代設計技術的改變，需要對課程作出如下修改：

　　以某種瀏覽器為標準

　　我推薦在課程中使用Firefox或者Chrome瀏覽器，因為這兩款瀏覽器在Mac和PC上都可以使用，并且它們最大限度地兼容了標準。讓學生知道這款瀏覽器是為完成課程需要關心的唯一一款瀏覽器。一旦學生知道了HTML和CSS在瀏覽器中的工作原理，就可以在后面處理瀏覽器兼容性問題了。如果過早地引入瀏覽器兼容性問題，學生們會感到困惑，不知道一個問題是因為瀏覽器渲染，還是只是寫錯了代碼所帶來的。

　　講解HTML5

　　學生們應該一開始就學會如何使用等語義化標記。

　　講解CSS3以及各種選擇器

　　確保學生能盡快理解媒體請求(Media Queries)的技術。介紹臨近元素選擇器、子元素選擇器、通用選擇器以及偽類選擇器等等。在此提醒，無需擔心瀏覽器對于這些選擇器的支持程度，因為這些學生離畢業還有幾年時間(幾年后支持這些新特性的現代瀏覽器就成為主流的瀏覽器了，譯者注)。

　　盡早引入網格式的設計模式

　　即使學生們不能自己寫出網格布局，他們也會在思考12欄布局的時候形成自己的布局方案，使用到em單位或者百分比單位的大小。讓學生們按標準編出標準的頁面，使用到2欄或者3欄的布局，不使用，或者用頁眉，頁腳和水平導航欄這些標準的頁面，而不是放任學生編寫任意類型的布局。理解設計和代碼之間的妥協程度是很重要的，所以需要記得常提起這一點。

　　只要學生們學會了浮動和定位，就教會他們學習網格式布局

　　因為學生們已經按照網格化的原則思考網頁設計了，這項過渡對他們來說應該會很快。

　　現階段的響應式設計應只是略有提及，而不應大書特書

　　學生們現在應該會將網格化布局和媒體請求結合到一起了。他們應該會在這個過程中碰到圖片放縮的問題了。如果還沒碰到的話，現在正是談論它的時候。

　　現在可以討論瀏覽器兼容性問題

　　既然學生們掌握了合法的，與標準兼容的，帶有響應式設計的代碼，現在就是考慮瀏覽器兼容性問題的時間。一種介紹此類問題的方法就是找到一個對HTML5和CSS3選擇器支持很差的瀏覽器，比如那些不支持圓角邊距的瀏覽器。

　　CSS預處理技術是個熱門話題

　　集中管理CSS變量是個好主意。CSS預處理技術會在接下來的一兩年內，成為一個雇主需要的，核心的CSS技能(有人說已經是這樣的了)。一些 LESS和Sass用到的概念，例如集中化的變量和邏輯，也為講授Javascript和jQuery的課程提供了一個平滑的過渡，這些相似的概念在那些課程中也很重要。

　　提及響應式的設計框架是個好主意

　　如果課程還有余下的時間的話，還有一個可供學生們探索的絕佳議題。如果你教的是LESS，我會推薦使用Bootstrap;如果你教的是Sass的話，我會推薦Foundation。學生們將會學習到如何閱讀他人的代碼(這是個非常重要的技能!)，并且學習如何閱讀文檔。同時，他們也會學習到新技術，也會探索使用一個有文檔的開源框架的優缺點。最后他們會學會如何按照自己的要求編寫自己想要的代碼。

　　間接技能

　　上面涵蓋了現代前端Web開發直接塑造的技能。我會同樣談到一些間接的技能，讓學生們能從這部分課程或者別的課程學習到。

　　開源的原則

　　與其告訴學生開源是‘免費’的代名詞(就像免費啤酒一樣)，不如告訴他們開源項目的生存來源于社區成員的貢獻。了解了GitHub，也就可以解釋人們如何下載，創建別人的代碼分支，如何在線發表自己的代碼。向學生們介紹開源社區，讓他們收集這些開源社區最重視的貢獻類型。

　　實時演示

　　現在，這個實時演示的部分在幾年前就已經整合進課程了，但是這之前的設計師比開發者使用的更多一些。有了演示以后，聽眾們更關注視效本身，而不是視效背后的代碼和原則。確保學生們習慣于為回顧開發過程發表代碼(連接到他們的GitHub頁是個絕佳的技巧)。

　　讓學生們解釋他們嘗試解決的問題，并且解釋采取這種做法的緣由。讓學生使用博客是必須的。學生們可以通過博客發現有趣的文章，得到解決問題的新方法和代碼片段等等。也可以鼓勵學生形成專業的社交媒體互動，更加專注于他們的代碼和工作。

　　理解和修改別人的代碼

　　開源理念得到了世界的持續認可，尊重與合作后，擁有理解和修改他人代碼的能力會更加重要。

　　認清趨勢

　　網頁開發的規則主導者是誰，什么技術是即將過時的?我們現在應該學習什么技能?(每時每刻都有新東西可以學習。)

　　學習如何學新技術

　　學生們不能指望老師用湯匙喂給他們每一步所要學習的知識。他們需要找到不用課程和課本也能保持前沿的學習方法。可以幫助學生搜集有趣的博客，使用社交媒體的資源查找編程提示和技巧。

　　教初學者的一些建議

　　許多富有天分的網頁設計師和工程師發現教初學者是一件非常煩悶和困難的事。一部分問題在于，高級別的開發者能在實現之前能預知很多的訊息。專業人士甚至都不記得最后一次嚴肅思考語法，文件管理，樣式表的順序和一個頁面的正確標記的等等到底是在何時，因為他們每天都會無數次碰到這類問題。而對于初學學生而言，這些問題則是全新的。

　　給出一個總體的介紹

　　把課程放在更大的Web環境里，可以提出這些有趣的問題。例如，什么是HTML?這個縮寫代表什么?它是在什么地方產生的?HTML就是網頁么?誰需要了解HTML?CSS是怎么和HTML配合的?這一篇目不需要耗費太多時間。這些大情景的想法就是用來引導學生的，他們會在使用語言中深入了解細節方面的事情。你可以使用幻燈片或者白班展示材料。時常注意讓學生融入討論中，并關注學生們的的困惑之處。確保學生們能在接觸代碼之前理解總攬中的內容，不然的話，講解代碼沒有任何意義。

　　在課堂上寫代碼

　　在現場教學的環境中，我會打開文本編輯器，在講臺上敲出我的代碼，而學生們在下面用他們的電腦跟著一起做。這種做法能讓他們保持專注。一些學生并不能很好地跟上我打字的節奏，要么是他們學習方式不同，要么是他們的打字速度很慢。在這些情況下，我鼓勵他們更加專心，也可以像一些人一樣，用紙和筆來記筆記和代碼片段。如果是在線授課的話，我會使用相同的演示方法，使用Camtasia軟件記錄屏幕和授課語音。兩種情況下，都應當把你的文件提供給學生們。這樣，他們就能看到你的成果。你在代碼里勤寫注釋，他們就能根據注釋理解你的筆記和示例。

　　每次寫一點代碼，慢慢地讓例子變得復雜

　　一次不要介紹太多的東西。例如，在介紹CSS的時候，可以先開始在HTML標記里寫樣式。向 body 標簽里加樣式可以展示控制整個頁面樣式的效果，例如控制背景色，字體，字號等等。每次寫一個屬性，保存，在瀏覽器中顯示效果，如此這般，學生們就能知道每行CSS控制的是頁面上的哪個元素了。

　　循著某個問題一直問下去

　　在確認怎么做之前，應當要求學生們為構建網頁時可能遇到的問題尋找解決方案。如果他們能從概念上解釋清楚，那講解代碼就會變得容易。例如，已經將網頁標簽中的文字設為藍色了之后，如何再將主標題設為紅色。如果學生們知道該用某種方式改變h1標簽的樣式就能變成紅色，他們便會做到。之后你只需給他們展示如何書寫代碼。

　　把復雜的東西說簡單很難，但是把簡單的東西說復雜卻很容易。

　　學生們會一直問，問到一些復雜的問題。例如，他們會注意到紅色的值能寫成 #ff0000、red 或者rgb(255,0,0)，并且會問到他們三者的區別!不要這么早試著就回答這些問題。只提供一種書寫顏色值的方式(我建議是#ff0000)，在學生掌握這種方式之前不要涉及更深入的問題。或許接下來的課程中，學生們會注意到別人的代碼中有rgb(255,0,0)這種寫法。到那個時候解釋起兩者之間的差異就會更加迅速。但在一開始，解釋沒有太大意義。記的東西太多，信息量大就會成為記憶負擔。

　　講解語法很有挑戰

　　一開始學生們會犯忘記閉合標簽，忘記寫分號，或者完全編造了一個不存在的標簽等等錯誤。找出這些問題所在，有時候很簡單，有時候卻很難。而我會一早就介紹驗證的手段，好讓學生們有一個檢查自己成果的簡單辦法。開始，你可以自行指出缺失的、額外的以及未閉合的標簽，之后則介紹更加健壯的調試技術。這樣一來就能很顯著地幫到他們。

　　管理文件是種挑戰

　　在介紹HTML和CSS的課程中，文件管理是個老大難的問題。有些人會為存在硬盤還是移動設備上這個問題犯難，而一些人甚至不知道文件和文件夾的區別。最好是在教如何管理網站文件之前介紹一些基礎知識。我會一開始將項目的所有文件放在中文的一個文件夾里，因為學生們很容易就能找到它，而唯一的一個項目文件夾能降低不少困惑。之后，所有的HTML文檔、圖片和CSS都會存在這一個文件夾下。剛開始的一點文件很好管理，因為學生們只需要管理為數不多的網站和屈指可數的文件。在學生們感到文件放到一個文件夾中太亂，需要整理時，他們便會學著如何鏈接兩個文件，如何插入圖片等方法。他們會知道代碼的預期效果和作用，如果代碼出錯，他們會自然想到錯誤的路徑才是事故的元兇。

　　記住你不是在為客戶設計頁面

　　在優秀教員中常犯的一個錯誤就是一開始就讓課堂上的示例網頁外觀精美，完好無缺，兼容性強。不幸的是，那不是重點。即使是初學者，在瀏覽網頁時能輕易地找到漂亮的頁面。你是一名老師，并不需要以這種方式展現你的能力。你的職責是講清楚每行代碼的意義，和每行代碼影響網頁的哪項外觀和功能。我在學生們面前寫代碼時，會在CSS代碼里插入一些講解概念用的背景色和邊框樣式。我鼓勵學生們用同樣的方式調試CSS。不要一次性快速的講解許多CSS。學生們會自己毫無意外地讓頁面更加漂亮，當他們之中的大多數人成為圖形設計師后，會討厭自己早年做出的頁面。然而，學生們看到他們設計的變化，從一開始沒有樣式的純HTML到有一點基本樣式的CSS，最后到有完整布局的時候，他們會更有耐心地聽你講解這個階段的復雜問題。

　　你是在為他們的職業生涯打下基礎

　　圖形設計，HTML和CSS技術是每個專業設計師每天工作的關鍵技能。書寫簡潔有效的代碼，了解如何調試問題，找到表述問題的更佳方式，解決瀏覽器間兼容問題——這些都是前端開發者生活中的基本概念。我已經看到許多學生在受到不良的啟蒙教育后的痛苦模樣了。你的職責非常重要。所以，新知識慢慢講，在確保學生們充分了解了這項知識了以后再進入下一個話題。

　　翻譯： 伯樂在線 - 埃姆杰