網際網路處在快速變革期。網頁前端開發深受近年來不斷改變的編碼技巧和手段的影響。在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
學生們應該一開始就學會如何使用<section><asides><nav><header><footer>等語義化標記。
講解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控制的是頁面上的哪個元素了。
循著某個問題一直問下去
在確認怎麼做之前，應當要求學生們為構建網頁時可能遇到的問題尋找解決方案。如果他們能從概念上解釋清楚，那講解程式碼就會變得容易。例如，已經將網頁<body>標籤中的文字設為藍色了之後，如何再將主標題設為紅色。如果學生們知道該用某種方式改變h1標籤的樣式就能變成紅色，他們便會做到。之後你只需給他們展示如何書寫程式碼。
把複雜的東西說簡單很難，但是把簡單的東西說複雜卻很容易。
學生們會一直問，問到一些複雜的問題。例如，他們會注意到紅色的值能寫成 #ff0000、red 或者rgb(255,0,0)，並且會問到他們三者的區別！不要這麼早試著就回答這些問題。只提供一種書寫顏色值的方式(我建議是#ff0000)，在學生掌握這種方式之前不要涉及更深入的問題。或許接下來的課程中，學生們會注意到別人的程式碼中有rgb(255,0,0)這種寫法。到那個時候解釋起兩者之間的差異就會更加迅速。但在一開始，解釋沒有太大意義。記的東西太多，資訊量大就會成為記憶負擔。
講解語法很有挑戰
一開始學生們會犯忘記閉合標籤，忘記寫分號，或者完全編造了一個不存在的標籤等等錯誤。找出這些問題所在，有時候很簡單，有時候卻很難。而我會一早就介紹驗證的手段，好讓學生們有一個檢查自己成果的簡單辦法。開始，你可以自行指出缺失的、額外的以及未閉合的標籤，之後則介紹更加健壯的除錯技術。這樣一來就能很顯著地幫到他們。
管理檔案是種挑戰
在介紹HTML和CSS的課程中，檔案管理是個老大難的問題。有些人會為存在硬碟還是移動裝置上這個問題犯難，而一些人甚至不知道檔案和資料夾的區別。最好是在教如何管理網站檔案之前介紹一些基礎知識。我會一開始將專案的所有檔案放在中文的一個資料夾裡，因為學生們很容易就能找到它，而唯一的一個專案資料夾能降低不少困惑。之後，所有的HTML文件、圖片和CSS都會存在這一個資料夾下。剛開始的一點檔案很好管理，因為學生們只需要管理為數不多的網站和屈指可數的檔案。在學生們感到檔案放到一個資料夾中太亂，需要整理時，他們便會學著如何連結兩個檔案，如何插入圖片等方法。他們會知道程式碼的預期效果和作用，如果程式碼出錯，他們會自然想到錯誤的路徑才是事故的元凶。
記住你不是在為客戶設計頁面
在優秀教員中常犯的一個錯誤就是一開始就讓課堂上的示例網頁外觀精美，完好無缺，相容性強。不幸的是，那不是重點。即使是初學者，在瀏覽網頁時能輕易地找到漂亮的頁面。你是一名老師，並不需要以這種方式展現你的能力。你的職責是講清楚每行程式碼的意義，和每行程式碼影響網頁的哪項外觀和功能。我在學生們面前寫程式碼時，會在CSS程式碼裡插入一些講解概念用的背景色和邊框樣式。我鼓勵學生們用同樣的方式除錯CSS。不要一次性快速的講解許多CSS。學生們會自己毫無意外地讓頁面更加漂亮，當他們之中的大多數人成為圖形設計師後，會討厭自己早年做出的頁面。然而，學生們看到他們設計的變化，從一開始沒有樣式的純HTML到有一點基本樣式的CSS，最後到有完整佈局的時候，他們會更有耐心地聽你講解這個階段的複雜問題。
你是在為他們的職業生涯打下基礎
圖形設計，HTML和CSS技術是每個專業設計師每天工作的關鍵技能。書寫簡潔有效的程式碼，瞭解如何除錯問題，找到表述問題的更佳方式，解決瀏覽器間相容問題——這些都是前端開發者生活中的基本概念。我已經看到許多學生在受到不良的啟蒙教育後的痛苦模樣了。你的職責非常重要。所以，新知識慢慢講，在確保學生們充分了解了這項知識了以後再進入下一個話題。