張漣漪(武漢工程職業(yè)技術(shù)學(xué)院 湖北 武漢：430080)

基于網(wǎng)站前端設(shè)計(jì)的《網(wǎng)頁(yè)設(shè)計(jì)》課程教學(xué)改革初探

張漣漪
(武漢工程職業(yè)技術(shù)學(xué)院 湖北 武漢：430080)

網(wǎng)站前端設(shè)計(jì)在現(xiàn)今的網(wǎng)站開(kāi)發(fā)市場(chǎng)中占據(jù)重要地位，對(duì)能自適應(yīng)移動(dòng)瀏覽終端的網(wǎng)頁(yè)需求程度越來(lái)越高。高職高專課程以就業(yè)為導(dǎo)向，順應(yīng)時(shí)代發(fā)展和市場(chǎng)需求需要設(shè)置《網(wǎng)站前端設(shè)計(jì)》課程，繼承任務(wù)驅(qū)動(dòng)教學(xué)模式，在教授學(xué)生掌握網(wǎng)頁(yè)代碼和層疊樣式表基礎(chǔ)的前提下，熟悉新的網(wǎng)絡(luò)標(biāo)準(zhǔn)，提升開(kāi)發(fā)技能，精益求精，以達(dá)到學(xué)以致用、入職即可上手的目的。

前端設(shè)計(jì)；Html5； CSS3； Bootstrap； 網(wǎng)頁(yè)設(shè)計(jì)

0 引言

《網(wǎng)頁(yè)設(shè)計(jì)》課程在計(jì)算機(jī)應(yīng)用相關(guān)專業(yè)已教授多年。隨著互聯(lián)網(wǎng)和瀏覽終端的飛速發(fā)展，網(wǎng)頁(yè)歷經(jīng)了從簡(jiǎn)化單調(diào)、色彩豐富，到各類媒體并茂的階段，而后轉(zhuǎn)入以簡(jiǎn)潔明快為主流，并最終依據(jù)各行業(yè)不同需求，多種設(shè)計(jì)百花齊放的局面。時(shí)至今日，常用瀏覽工具從臺(tái)式電腦到智能手機(jī)、小型平板設(shè)備的躍遷，對(duì)網(wǎng)頁(yè)設(shè)計(jì)提出了更新的要求，即在不同大小的顯示分辨率內(nèi)都能看到外形美觀、功能齊全的頁(yè)面。原課程設(shè)置中以臺(tái)式終端為主體顯示的Dreamweaver軟件和舊有的HTML和CSS標(biāo)準(zhǔn)不再能完美適應(yīng)這種變化。

筆者走訪了一些公司的網(wǎng)站開(kāi)發(fā)團(tuán)隊(duì)，市場(chǎng)需求催生了網(wǎng)站建設(shè)體系有了更明確的分工，主要由三個(gè)部分組成：UI設(shè)計(jì)、前端設(shè)計(jì)、后臺(tái)開(kāi)發(fā)。

過(guò)去籠統(tǒng)的“網(wǎng)頁(yè)設(shè)計(jì)”現(xiàn)在細(xì)化為兩個(gè)部分：UI和前端。前者以美工設(shè)計(jì)為主，后者以頁(yè)面實(shí)現(xiàn)為主。順應(yīng)這種改變，《網(wǎng)站前端設(shè)計(jì)》課程或可代替《網(wǎng)頁(yè)設(shè)計(jì)》課程走上前臺(tái)，該課程實(shí)踐性極強(qiáng)，在網(wǎng)站開(kāi)發(fā)中占有一個(gè)獨(dú)立的席位，是計(jì)算機(jī)應(yīng)用行業(yè)很常見(jiàn)的就業(yè)方向。它上承負(fù)責(zé)用戶界面樣式布局和美觀程度的UI設(shè)計(jì)，下接網(wǎng)站后臺(tái)數(shù)據(jù)處理的顯示支撐，實(shí)際就是一個(gè)把設(shè)計(jì)圖具象化成真實(shí)網(wǎng)頁(yè)并提供給后臺(tái)數(shù)據(jù)接口的過(guò)程。

1 提升培養(yǎng)目標(biāo)

高職高專的課程教學(xué)順應(yīng)瞬息萬(wàn)變的互聯(lián)網(wǎng)發(fā)展和行業(yè)應(yīng)用需求，理應(yīng)與時(shí)俱進(jìn)，及時(shí)推陳出新，占據(jù)前沿方為上。

《網(wǎng)站前端設(shè)計(jì)》是計(jì)算機(jī)應(yīng)用專業(yè)課程體系的組成部分，先導(dǎo)課程有《Internet應(yīng)用》、《圖形圖像設(shè)計(jì)》等，同期課程有《數(shù)據(jù)庫(kù)應(yīng)用》。其教學(xué)目的在于讓學(xué)生具備相應(yīng)的平面構(gòu)成、色彩構(gòu)成、版式設(shè)計(jì)、字體選擇，以及數(shù)據(jù)庫(kù)開(kāi)發(fā)的基礎(chǔ)知識(shí)[1]，具備良好的溝通能力的前提下，熟練掌握從設(shè)計(jì)圖生成網(wǎng)頁(yè)的技術(shù)。

網(wǎng)站建設(shè)是一個(gè)比較大的工程，網(wǎng)站前端開(kāi)發(fā)技術(shù)提供了一個(gè)不錯(cuò)的就業(yè)前景。網(wǎng)站平臺(tái)顯示終端的改變使得畢業(yè)生僅僅只會(huì)Dreamweaver是不夠的，應(yīng)該掌握新一代的網(wǎng)站代碼編寫(xiě)標(biāo)準(zhǔn)和面向移動(dòng)設(shè)備的設(shè)計(jì)軟件。

2 更新課程內(nèi)容

課程教學(xué)上依然采用一貫的任務(wù)驅(qū)動(dòng)方式、實(shí)戰(zhàn)案例。內(nèi)容則在原有《網(wǎng)頁(yè)設(shè)計(jì)》課程內(nèi)容上做了升級(jí)：從所見(jiàn)即所得軟件Dreamweaver CS6上手，在掌握基礎(chǔ)代碼HTML的結(jié)構(gòu)和CSS的編寫(xiě)的同時(shí)拋棄不用的標(biāo)簽和屬性規(guī)則，結(jié)合W3C最新的標(biāo)準(zhǔn)向HTML5和CSS3進(jìn)階；學(xué)會(huì)現(xiàn)在主流的自適應(yīng)終端網(wǎng)頁(yè)制作軟件Bootstrap 3。

2.1 網(wǎng)站結(jié)構(gòu)概況

不論什么類型的網(wǎng)站，大體上都具備相似的結(jié)構(gòu)：首頁(yè)、分級(jí)導(dǎo)航、數(shù)個(gè)子頁(yè)。在規(guī)劃站點(diǎn)前應(yīng)該對(duì)其整體有明晰的認(rèn)識(shí)，必須會(huì)畫(huà)網(wǎng)站樹(shù)形/網(wǎng)狀結(jié)構(gòu)圖；養(yǎng)成將網(wǎng)站素材分類、頁(yè)面分層級(jí)存放，以及命名準(zhǔn)確的良好習(xí)慣。

2.2 網(wǎng)頁(yè)布局和Html代碼結(jié)構(gòu)

依靠Dreamweaver軟件的可視化布局固然簡(jiǎn)單易上手，但整體缺乏細(xì)致度。于頁(yè)面代碼編排上精益求精，可以讓生成的頁(yè)面有更好的適應(yīng)性和兼容性。

網(wǎng)站代碼基本型[2]：

//網(wǎng)頁(yè)屬性區(qū)域。

//頁(yè)面元信息，例如針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞。

//網(wǎng)頁(yè)主體區(qū)域

主流的網(wǎng)頁(yè)布局方式采用Div。示例中顯示的