12.03日(rì)音(yīn)訊,如(∏©εrú)何給新生(shēng)講解網頁設計(jìεσ §)。進入到(dào)2013年(nián)情況不<">(bù)一(yī)樣了(le)！現(xi→Ωàn)在，一(yī)個(gè)合格的(de)前端開(kāi)發者必須精↔×通(tōng)HTML、CSS、Javascri↕ →pt、jQuery，CSS預處理(lǐ)器(qì)，以及諸如(rú)✔響應式設計(jì)之類的(de)新技(jì)術(shù)，他(tā)們還≠✔↕(hái)要(yào)考慮首先為(wèi)移動端設計(♥ ♠£jì)頁面，各種設備查看(kàn)網站(zhàn)時(shí)的(de₹ש)情況。
既然網頁前端開(kāi)發這(zhè)一(yī)行(xíng)業€"¶♠(yè)已然改變，高(gāo)等教育體(tǐ)系需要(yào)對(dΩuì)講一(yī)些(xiē)基本的(de)網頁設計(j짩 φ)課程。問(wèn)題是(shì)，如(rú)何教那∏∏•(nà)些(xiē)連HTML和(hé)CSS都(d✔✔∞ōu)不(bù)知(zhī)道(dào)的(de)學λ™ ™生(shēng),好(hǎo)讓他(tā)們>♥σ↓以獨立于設備的(de)觀念，使用(yòng)響應式設計(jìγφ™)和(hé)移動端優先的(de)原則來(lái)設Ω¶計(jì)構造網站(zhàn)呢(ne)？
我已經在許多(duō)學術(shù)和Ω≤$≠(hé)商業(yè)的(de)環境下(xi•←↑à)教網頁設計(jì)課程13年(nián)，也(yě)"§ 提出了(le)一(yī)些(xiē)在網頁設計(jì)開(kā§¶i)發過程中，如(rú)何講最基礎的(de)兩項知(zhī)識（圖形設計(♦'σjì)以及HTML和(hé)CSS技(jì)術(shù)ε→←，譯者注）的(de)想法。關于這(zhè)些(xiē)想法™ε↕的(de)討(tǎo)論十分(fēn)重要(yào),←φ÷因為(wèi)講解網頁設計(jì)與開(kāi)發的(de)資源十分(fēn)↓"Ω有(yǒu)限。由于時(shí)間(jiān)緊迫，ε♦互聯網發展迅速，那(nà)種每年(niá"α&"n)一(yī)個(gè)個(gè)訪問(wèn)那(nà)些(εα✔&xiē)課程，用(yòng)最新的(de)材料更新∏® 課程的(de)做(zuò)法更加難以實施。
改善全職教授和(hé)兼職教員(yuán)的(d✔♣•↕e)合作(zuò)有(yǒu)助于增強學生(sΩ♠ hēng)們的(de)學習(xí)體(tǐ)驗
兼職教員(yuán)，是(shì)那(λ←✔×nà)些(xiē)有(yǒu)著(zhe)一(yī)份全職工(gōnα®g)作(zuò)，并且兼職講其他(tā)課程的(de)教員(yu★♣×án)。他(tā)們通(tōng)常能(néng)制(zhì)作(z'♠↔"uò)專業(yè)的(de)網站(zhàn)，同時(shí)也( §εyě)能(néng)有(yǒu)能(néng)跟上(shàng)行(xínφβg)業(yè)最新趨勢和(hé)技(jì)術(shù)的(de)資源∞ δ$。然而，缺少(shǎo)了(le)接觸寶貴教學法材料的(dα↓e)便捷途徑，兼職教員(yuán)很(hěn)難找到(dà♣o)适合學生(shēng)們消化(huà)吸> 收這(zhè)些(xiē)前沿資料的(de)呈現↔λ♦(xiàn)方式。
同時(shí)，全職教師(shī)和(hé)教授們∞×做(zuò)的(de)網站(zhàn)通(tα♦ōng)常不(bù)會(huì)很(hěn)專業(yè>↕ §)（或者根本就(jiù)不(bù)會(huì)做£ (zuò)網站(zhàn)），他(tā)們需要(yào)滿足工(gōng)作§®✔β(zuò)時(shí)的(de)其他(tā)需求，很(hěn)難抽₹>♠σ出時(shí)間(jiān)跟上(shà<♠λng)新趨勢、新技(jì)術(shù)的(de)發展。與兼職教δ✔員(yuán)不(bù)同，這(zhè)些(xiē)教師(shī)教授對(du ¥&ì)教學方法有(yǒu)很(hěn)深入的₽(de)研究，在網頁設計(jì)的(de)課程中，什(shén)麽樣≈λ§的(de)教學能(néng)起作(zuò)用(yòng)₩★☆，什(shén)麽樣的(de)教學不(bù)起作(zuò)用(yòng)，他₽♦>✘(tā)們了(le)解得(de)一(yī)清二楚。兼職教員(yuán)通(t↑ōng)常晚上(shàng)或者周末教學，而全職教師(shī)們常常在±<白(bái)天上(shàng)課，所以兩個(gè)群體(tǐ)很(hσ↔ěn)少(shǎo)有(yǒu)交集。增進全職教師(sα™λhī)和(hé)兼職教員(yuán)之間(jiān)的(de↑)合作(zuò)，是(shì)增強學生(shēng)體(t≈ •ǐ)驗,提高(gāo)教學質量的(de)關鍵之一(yī)。兩種教員(yu<÷•án)都(dōu)會(huì)為(wèi)高(gāo)等教♥♦育帶來(lái)互補的(de)價值和(hé)技(jì)能(nén≈☆≠g)。
在這(zhè)篇文(wén)章(zhāng)中，我主要(yào)關注兩★<項課程：圖形設計(jì)和(hé)HTML、CS¶✘✔₩S。其他(tā)的(de)概念，像是(shì)網站(zhàn) δ₽規劃、移動版優先原則、信息結構、可(kě)用(yòng)性、以←"用(yòng)戶為(wèi)中心的(de)設計(jì)、Javas≤≈★∏cript和(hé)jQuery、內(nèi)容管理(lǐ)系統（C¶★MS）、都(dōu)是(shì)很(hěn)重要(yào)的(dσ±♥✘e)，都(dōu)可(kě)以考慮設為(wèi)課程☆→涵蓋的(de)範圍。然而，這(zhè)些(xi∏±ε✘ē)議(yì)題通(tōng)常都(dōu)在高(gāo)校(x "≠iào)的(de)其他(tā)課程中有(yǒu)所涉₹™®及，所以這(zhè)裡(lǐ)并不(bù)會(huì)提↔≈到(dào)上(shàng)述內(nèi)容。
創造出設計(jì)
在大(dà)多(duō)數(shù)學校(xiào)的(de)網頁設計(αδjì)課程中，學生(shēng)們會(h✔®uì)上(shàng)一(yī)堂課，學習(xí)使用♥Ω(yòng)Photoshop或者Fireworks，畫(huà)出一('βyī)張簡單的(de)網站(zhàn)布♥★♠φ局圖。學生(shēng)們會(huì)從(c₩>φóng)現(xiàn)有(yǒu)網站(zhàn)的(de)截圖開(k' ™∑āi)始，把內(nèi)容和(hé)圖片換成自(zì)己的(de)部分(f•'™ēn)，或者讓一(yī)切從(cóng)頭開(kāi)始。
這(zhè)項課程的(de)理(lǐ)念是(shì)®↔₹非常明(míng)智的(de)。一(yī)旦學生(sh∞♠<ēng)們掌握了(le)使用(yòng)軟件(jiàn)的(de)β≤基本方法，課程将會(huì)激發對(duì)于可(kě)用(yòng§®)性、色彩、布局、字體(tǐ)、頁面留白(bái)、♣₽®圖片質量和(hé)位置等知(zhī)識的(de)ΩΩ討(tǎo)論，而暫時(shí)不(bù)涉及代碼∏★↓✘的(de)部分(fēn)。這(zhè)種做(zuò)∞φ•法能(néng)讓學生(shēng)們在腦(nǎo)海(hǎi)中形成φ≈網頁的(de)畫(huà)面，無需過多(duō)地(dì)關注網頁代碼是( ♥≤←shì)怎麽編寫出來(lái)的(de)。在學生(shēng)們真正開(×"δλkāi)始編寫網頁的(de)時(shí)候，他(tā)們就(jiù ✔)可(kě)以在寫一(yī)行(xíng)代碼之前弄≈←明(míng)白(bái)自(zì)己想要(yào)的< (de)是(shì)什(shén)麽了(le)。
讓學生(shēng)們在接觸代碼之 ♥前先形成網頁的(de)概念是(shì)十分(fēn)≤÷重要(yào)的(de)
在課程中，常有(yǒu)學生(shēng)對(d¥¥uì)于（元素內(nèi)容）超出畫(huà)布以§§Ω後的(de)行(xíng)為(wèi)感到(dào)困惑。如(rú)果隻設計↕₽(jì)了(le)960像素寬的(de)內(nèi)σ≈∑容，那(nà)麽當顯示器(qì)為(wèi)1200像素寬的(de)時(s→¶εhí)候，頁面會(huì)發生(shēng)↓∏≠什(shén)麽呢(ne)？通(tōng)常情況下(xià)，超出的•∞(de)部分(fēn)會(huì)填充為(wèi)背景色或者填充為(wèi&¶ π)重複的(de)圖案。學生(shēng)們卻很(hěn)少™(shǎo)問(wèn)到(dào)顯示區→✔§(qū)域寬度小(xiǎo)于960像素後♣∏♦γ發生(shēng)的(de)事(shì)情。
在問(wèn)及較窄屏幕的(de)情況時(shí)，大(απdà)多(duō)數(shù)學生(shēng)會(huì)指§≠φ出頁面底部會(huì)出現(xiàn)橫向滾動條，網站(zh±®σ©àn)訪客需要(yào)拓寬浏覽器(qì)寬度才能₽$£>(néng)看(kàn)得(de)到(dào)完整的(de)頁面。♠λ$他(tā)們（這(zhè)個(gè)時(shí)候）↑$∏并不(bù)會(huì)考慮按鈕在觸屏設備上(shàng)會(♦±huì)不(bù)會(huì)很(hěn)不(bù)好(hǎo)操作(zuò&★∑)，文(wén)字大(dà)小(xiǎo)在 δ不(bù)同屏幕的(de)顯示屏上(shàng)是(sh$♦ì)否會(huì)有(yǒu)很(hěn)大(dà)的(de•↔)變動。這(zhè)樣的(de)教學方式倒是(shì)✔σε&可(kě)以引導學生(shēng)思考這(zhè≤φ)些(xiē)問(wèn)題。
許多(duō)關注于響應式設計(jì)的(de)工(gōng)作(zu®ò)室，不(bù)會(huì)去(qù)使用(yòngγγ)像在課上(shàng)設計(jì)出的(de)那(nà)種 ₩± 設計(jì)圖，也(yě)不(bù)把這(zh§<↑è)種圖作(zuò)為(wèi)開(kāi₽✘)發過程中的(de)一(yī)部分(fēn)。相(xiàng)反，他∑™(tā)們更傾向使用(yòng)基于HTML和(hé)CSS的(de)↔ ←λ設計(jì)圖來(lái)展示客戶端所看(kàn)到(dào)的(dקe)網站(zhàn)外(wài)觀。那(Ωπ÷↓nà)為(wèi)什(shén)麽還(hái)要(yào)向學生(shēng₽×)們講圖像式的(de)設計(jì)圖呢(ne)？
原因是(shì)，在開(kāi)發過程的(de)這(zh©$✘è)個(gè)階段，學生(shēng)們不(bù)一(yī)定十分(f≈±∞ēn)了(le)解HTML和(hé)CSS，極端情況下(xià)甚至一(yī)<♥δφ點也(yě)不(bù)了(le)解。從(cóng)設計(jì←↕★)圖上(shàng)拿(ná)掉代碼的(de)部分(fēn)以後，學®©生(shēng)們所關注的(de)，是(shì)包括圖形設計(jì)和↓δ(hé)用(yòng)戶體(tǐ)驗之類的(de)設計(jì)原則。一(yī)γ®≤旦他(tā)們學會(huì)了(le)HTML∏☆β和(hé)CSS以後，他(tā)們就(jλ<iù)再也(yě)不(bù)會(huì)使用(yòng)圖像式®φ的(de)設計(jì)圖了(le)。在學習(xí)基于圖像來(lái)設σ₽≈σ計(jì)網頁效果的(de)過程中，他(tā)們學會(huì)了(leφ×♦ )使用(yòng)Photoshop/Firδγ÷eworks，了(le)解了(le)使用(yòng)這(zhè)種設計(jìβ≈)環境的(de)優點和(hé)缺點——這(zh ∏★è)也(yě)是(shì)很(hěn)有(yǒu)益的(de)™β→經驗。
下(xià)面是(shì)一(yī)些(xiē)可(kě)以布置給學生(÷♠♠≥shēng)的(de)任務，讓他(tā)們可¥π€✘(kě)以為(wèi)設備獨立的(de)設計(jì)工(gōng→∏∑>)作(zuò)做(zuò)好(hǎo)準備：
設計(jì)一(yī)個(gè)12等分(fēn)欄的(de₹€<)頁面
這(zhè)項任務是(shì)講解網格系統及其工(gōng)作(z₩∏uò)原理(lǐ)的(de)最佳時(shí)♥ ¶♦機(jī)。讓學生(shēng)們基于網格設計(jì)布局能(néng)♠φ£展示學生(shēng)們對(duì)于這(zhè)種設計(jì)的≤↓Ω(de)理(lǐ)解。
展示不(bù)同尺寸的(de)設計(jì)
一(yī)個(gè)960像素寬的(de)頁面，在1200像素寬•♥的(de)時(shí)候會(huì)是(sh→×↓ì)什(shén)麽樣子(zǐ)的(de)？320像素≤↔♣ 寬呢(ne)？767像素寬呢(ne)？讓學生(s↑≠hēng)們在設計(jì)中使用(yòng)同樣的(de)ε →內(nèi)容，在不(bù)同屏幕尺寸的(de)環境下(xià)安排不(<↑∞bù)同的(de)布局。确保問(wèn)到(dào)了(le)&ldq♥←uo;過渡”的(de)問(wèn)題&mdashΩφ↑∞;—從(cóng)767像素寬縮小(xiǎo)到× (dào)320像素寬的(de)時(shí)候，布局₩÷又(yòu)會(huì)有(yǒu)怎樣的(de)改變呢(₹φne)？
問(wèn)一(yī)些(xiē)∞¶∞∑圖片的(de)問(wèn)題
頂部的(de)大(dà)圖片在從(cóng)767像素寬拉伸到(dà×β £o)960像素的(de)時(shí)候，如(rú)何保 λΩ持同樣漂亮(liàng)的(de)觀感呢(ne)？屏幕尺寸在767像素和(h→λé)960像素之間(jiān)的(de)時(shí)候♣↑¶，圖片又(yòu)會(huì)發生(shēng)什✘←(shén)麽呢(ne)？
鼓勵學生(shēng)思考觸摸屏的(de)行(xíng)為(wèi)
在屏幕尺寸較小(xiǎo)的(de)時(shí)候這(z₩α"hè)一(yī)點尤為(wèi)重要(yào)，并且現(xià♦≈n)在桌面電(diàn)腦(nǎo)和(hé<δ)筆(bǐ)記本電(diàn)腦(nǎo ≤)也(yě)在逐漸地(dì)觸摸化(huà)。這(zhè)裡(lǐ)可(kě₽>)以鼓勵學生(shēng)思考适合手指粗壯人(∏♠πrén)士的(de)情況。
