合格的前端開發：為高校新學生講解網頁設計

　　互聯網處在快速變革期。網頁前端開發深受近年來不斷改變的編碼技巧和手段的影響。在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預處理技術會在接下來的一兩年