為高校新學(xué)生解說網(wǎng)頁規(guī)劃

互聯(lián)網(wǎng)處在快速變革期。網(wǎng)頁前端開發(fā)深受近年來不斷改變的編碼技巧和手段的影響。

現(xiàn)在，一個(gè)合格的前端開發(fā)者必須通曉HTML、CSS、Javascript、jQuery，CSS預(yù)處理器，以及諸如呼應(yīng)式規(guī)劃之類的新技術(shù)，他們還要考慮首先為移動(dòng)端規(guī)劃頁面，各種設(shè)備查看網(wǎng)站時(shí)的狀況。

既然網(wǎng)頁前端開發(fā)這一職業(yè)已然改變，高等教育體系需求對(duì)講一些根本的網(wǎng)頁規(guī)劃課程。問題是，怎么教那些連HTML和CSS都不知道的學(xué)生, 好讓他們以獨(dú)立于設(shè)備的觀念，運(yùn)用呼應(yīng)式規(guī)劃和移動(dòng)端優(yōu)先的準(zhǔn)則來規(guī)劃構(gòu)造網(wǎng)站呢？

改進(jìn)全職教授和兼職教員的協(xié)作有助于增強(qiáng)學(xué)生們的學(xué)習(xí)體會(huì)

兼職教員，是那些有著一份全職作業(yè)，并且兼職講其他課程的教員。他們一般能制作專業(yè)的網(wǎng)站，一起也能有能跟上職業(yè)最新趨勢(shì)和技術(shù)的資源。但是，缺少了接觸名貴教育法材料的快捷途徑，兼職教員很難找到合適學(xué)生們消化吸收這些前沿材料的出現(xiàn)方法。

一起，全職教師和教授們做的網(wǎng)站一般不會(huì)很專業(yè)（或許根本就不會(huì)做網(wǎng)站），他們需求滿足作業(yè)時(shí)的其他需求，很難抽出時(shí)刻跟上新趨勢(shì)、新技術(shù)的開展。與兼職教員不同，這些教師教授對(duì)教育方法有很深入的研究，在網(wǎng)頁規(guī)劃的課程中，什么樣的教育能起作用，什么樣的教育不起作用，他們了解得一覽無余。兼職教員一般晚上或許周末教育，而全職教師們常常在白天上課，所以兩個(gè)群體很少有交集。增進(jìn)全職教師和兼職教員之間的協(xié)作，是增強(qiáng)學(xué)生體會(huì), 進(jìn)步教育質(zhì)量的關(guān)鍵之一。兩種教員都會(huì)為高等教育帶來互補(bǔ)的價(jià)值和技能。

在這篇文章中，我主要重視兩項(xiàng)課程：圖形規(guī)劃和HTML、CSS。其他的概念，像是網(wǎng)站規(guī)劃、移動(dòng)版優(yōu)先準(zhǔn)則、信息結(jié)構(gòu)、可用性、以用戶為中心的規(guī)劃、Javascript和jQuery、內(nèi)容管理體系（CMS）、都是很重要的，都能夠考慮設(shè)為課程包含的規(guī)模。但是，這些議題一般都在高校的其他課程中有所觸及，所以這里并不會(huì)說到上述內(nèi)容。

創(chuàng)造出規(guī)劃

在大多數(shù)學(xué)校的網(wǎng)頁規(guī)劃課程中，學(xué)生們會(huì)上一堂課，學(xué)習(xí)運(yùn)用Photoshop或許Fireworks，畫出一張簡略的網(wǎng)站布局圖。學(xué)生們會(huì)從現(xiàn)有網(wǎng)站的截圖開端，把內(nèi)容和圖片換成自己的部分，或許讓全部從頭開端。

這項(xiàng)課程的理念是非常正確的。一旦學(xué)生們掌握了運(yùn)用軟件的根本方法，課程將會(huì)激發(fā)關(guān)于可用性、色彩、布局、字體、頁面留白、圖片質(zhì)量和方位等常識(shí)的討論，而暫時(shí)不觸及代碼的部分。這種做法能讓學(xué)生們?cè)谀X海中構(gòu)成網(wǎng)頁的畫面，無需過多地重視網(wǎng)頁代碼是怎么編寫出來的。在學(xué)生們真實(shí)開端編寫網(wǎng)頁的時(shí)分，他們就能夠在寫一行代碼之前弄理解自己想要的是什么了。

讓學(xué)生們?cè)诮佑|代碼之前先構(gòu)成網(wǎng)頁的概念是非常重要的

在課程中，常有學(xué)生關(guān)于（元素內(nèi)容）超出畫布今后的行為感到困惑。假如只規(guī)劃了960像素寬的內(nèi)容，那么當(dāng)顯現(xiàn)器為1200像素寬的時(shí)分，頁面會(huì)發(fā)作什么呢？一般狀況下，超出的部分會(huì)填充為背景色或許填充為重復(fù)的圖案。學(xué)生們卻很少問到顯現(xiàn)區(qū)域?qū)挾刃∮?60像素后發(fā)作的事情。

在問及較窄屏幕的狀況時(shí)，大多數(shù)學(xué)生會(huì)指出頁面底部會(huì)出現(xiàn)橫向滾動(dòng)條，網(wǎng)站訪客需求拓寬閱讀器寬度才能看得到完整的頁面。他們（這個(gè)時(shí)分）并不會(huì)考慮按鈕在觸屏設(shè)備上會(huì)不會(huì)很欠好操作，文字大小在不同屏幕的顯現(xiàn)屏上是否會(huì)有很大的變化。這樣的教育方法卻是能夠引導(dǎo)學(xué)生考慮這些問題。

許多重視于呼應(yīng)式規(guī)劃的作業(yè)室，不會(huì)去運(yùn)用像在課上規(guī)劃出的那種規(guī)劃圖，也不把這種圖作為開發(fā)進(jìn)程中的一部分。相反，他們更傾向運(yùn)用根據(jù)HTML和CSS的規(guī)劃圖來展示客戶端所看到的網(wǎng)站外觀。那為什么還要向?qū)W生們講圖畫式的規(guī)劃圖呢？

原因是，在開發(fā)進(jìn)程的這個(gè)階段，學(xué)生們不一定非常了解HTML和CSS，極點(diǎn)狀況下甚至一點(diǎn)也不了解。從規(guī)劃圖上拿掉代碼的部分今后，學(xué)生們所重視的，是包含圖形規(guī)劃和用戶體會(huì)之類的規(guī)劃準(zhǔn)則。一旦他們學(xué)會(huì)了HTML和CSS今后，他們就再也不會(huì)運(yùn)用圖畫式的規(guī)劃圖了。在學(xué)習(xí)根據(jù)圖畫來規(guī)劃網(wǎng)頁作用的進(jìn)程中，他們學(xué)會(huì)了運(yùn)用Photoshop/Fireworks，了解了運(yùn)用這種規(guī)劃環(huán)境的長處和缺點(diǎn)——這也是很有益的經(jīng)驗(yàn)。

下面是一些能夠安置給學(xué)生的使命，讓他們能夠?yàn)樵O(shè)備獨(dú)立的規(guī)劃作業(yè)做好準(zhǔn)備：

規(guī)劃一個(gè)12等分欄的頁面

這項(xiàng)使命是解說網(wǎng)格體系及其作業(yè)原理的最佳時(shí)機(jī)。讓學(xué)生們根據(jù)網(wǎng)格規(guī)劃布局能展示學(xué)生們關(guān)于這種規(guī)劃的理解。

展示不同尺度的規(guī)劃

一個(gè)960像素寬的頁面，在1200像素寬的時(shí)分會(huì)是什么姿態(tài)的？320像素寬呢？767像素寬呢？讓學(xué)生們?cè)谝?guī)劃中運(yùn)用相同的內(nèi)容，在不同屏幕尺度的環(huán)境下安排不同的布局。保證問到了“過渡”的問題——從767像素寬縮小到320像素寬的時(shí)分，布局又會(huì)有怎樣的改變呢？

問一些圖片的問題

頂部的大圖片在從767像素寬拉伸到960像素的時(shí)分，怎么堅(jiān)持相同漂亮的觀感呢？屏幕尺度在767像素和960像素之間的時(shí)分，圖片又會(huì)發(fā)作什么呢？

鼓舞學(xué)生考慮觸摸屏的行為

在屏幕尺度較小的時(shí)分這一點(diǎn)尤為重要，并且現(xiàn)在桌面電腦和筆記本電腦也在逐漸地觸摸化。這里能夠鼓舞學(xué)生考慮合適手指粗壯人士的狀況。