淺談網(wǎng)頁設(shè)計與制作課程

廖家莉

摘要：互聯(lián)網(wǎng)時代，人們越來越離不開網(wǎng)絡(luò)，因此越來越多的人學(xué)習(xí)計算機相關(guān)知識了，如軟件、硬件、通信網(wǎng)絡(luò)、人工智能、大數(shù)據(jù)、機器人編程等。不管是軟件技術(shù)、移動應(yīng)用、數(shù)字媒體、通信專業(yè)等都要學(xué)習(xí)網(wǎng)頁設(shè)計，網(wǎng)頁設(shè)計與制作是一門非?；A(chǔ)的課程，是計算機學(xué)院必開的一門課程。網(wǎng)頁設(shè)計雖然簡單，但想真正做好一個網(wǎng)站卻沒那么容易，網(wǎng)頁設(shè)計的內(nèi)容在不斷地更新，網(wǎng)頁設(shè)計的編輯器也越來越多。通過這幾年的學(xué)習(xí)與觀察，我發(fā)現(xiàn)很多公司員工會隨著技術(shù)的發(fā)展使用不同的框架及編輯器來做網(wǎng)站，但學(xué)校教的內(nèi)容比較基礎(chǔ)的，很多老師只用一種軟件，沒給學(xué)生介紹更多的編輯器，讓學(xué)生有更多的選擇。該文主要講述網(wǎng)頁設(shè)計的學(xué)習(xí)路線;網(wǎng)頁設(shè)計的不同編輯器及其優(yōu)缺點;如何上好網(wǎng)頁設(shè)計基礎(chǔ)課程以及如何上好第一堂課等。

關(guān)鍵詞：網(wǎng)頁設(shè)計基礎(chǔ);HTML5;CSS3;框架;編輯器

中圖分類號：TP311 文獻標(biāo)識碼：A

文章編號：1009-3044（2020）01-0114-02

網(wǎng)頁設(shè)計基礎(chǔ)主要講HTML+CSS。HTML是1990年創(chuàng)立的一種超文本標(biāo)記語言，使用HTML標(biāo)記對網(wǎng)頁中的文本、圖片、聲音、視頻等內(nèi)容進行描述。HTML發(fā)展至今，經(jīng)歷了6個版本，現(xiàn)在最新的版本是HTML5。這個過程中新增了許多HT-ML標(biāo)記，如：header、nay、footer、canvas等，同時也淘汰了一些標(biāo)記，如frameset。HTML標(biāo)記、屬性、樣式都在一個頁面，使得頁面越來越臃腫，于是CSS誕生了。1996年12月W3C發(fā)布了第一個有關(guān)樣式的標(biāo)準(zhǔn)CSSl，目前最新的版本是CSS3。CSS（層疊樣式表1主要用于設(shè)置HTML頁面中的文本字體、顏色、大小、加粗、對齊方式;圖片寬度、高度;div盒子模型的邊框樣式、內(nèi)外邊距和一些布局樣式;還有CSS使用方式，選擇器的使用及其優(yōu)先級別。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合Ja—vaScript動態(tài)地對網(wǎng)頁各元素進行修飾，同一網(wǎng)站可以換不同的風(fēng)格。HTML就像修房子時搭的框架，而CSS就是裝修，現(xiàn)在出了很多前端框架就是精裝房，里面封裝了很多組件、樣式，我們可以直接使用。

1網(wǎng)頁設(shè)計的學(xué)習(xí)路線

第一階段學(xué)習(xí)網(wǎng)頁設(shè)計基礎(chǔ)，主要內(nèi)容為HTML文件的基本結(jié)構(gòu);HTML常用標(biāo)簽：文字、段落、圖像、超鏈接、表格、表單等標(biāo)簽;CSS樣式：CSS使用方法、CSS選擇器、盒子模型（border、padding、margin）浮動（float：lefffright）、定位技術(shù)（position：relative/absolute）等;網(wǎng)頁布局：DIV+CSS布局和表格布局，表格布局相對于簡單點，但不便于修改;DIV+CSS布局便于修改但兼容性問題難處理。以前學(xué)習(xí)網(wǎng)頁還有frameset框架，做后臺網(wǎng)站經(jīng)常用到，非常實用，現(xiàn)在html5淘汰了這一標(biāo)記，vue.js框架里面有template，可以用組件實現(xiàn)。學(xué)好基礎(chǔ)知識后，做一些div+css布局的網(wǎng)站。

2網(wǎng)頁設(shè)計編輯器

我在這幾年學(xué)習(xí)的過程換了不少編輯器，比如Dreamweav-er、EditPlus、sublime Text、HBuilder、IntelliJ IDEA等。每種軟件各有各的優(yōu)缺點，我覺得可以根據(jù)自己做網(wǎng)站的需求使用不同的編輯器。Dreamweaver是可視化的編程軟件，有代碼、設(shè)計、拆分三種視圖。我認(rèn)為初學(xué)者很適合使用Dreamweaver軟件，可以用拆分模式，一邊敲代碼一邊看效果，而且有很多提示，很多老師教學(xué)都用的Dreamweaver軟件。Dreamweaver還方便站點管理。不過剛開始學(xué)不建議使用提示，不然連標(biāo)簽、屬性名都記不全，可以用記事本敲，使自己記得更牢。EditPlus是一款小巧但功能強大的編輯器，可以處理文本、HTML、程序語言，還可以無限制地撤消與重做，同時編輯多文件。Sublime Text是跨平臺、當(dāng)前前端開發(fā)的主流編輯器，Su～ime Text體積也小，但運行速度快、可以自動補全代碼、代碼高亮提示，sublime text編輯器的缺點是需要很多插件。HBuflder的最大優(yōu)勢是快，創(chuàng)建web項目時可以自動生成CSS、img、js文件夾，不需要再手動創(chuàng)建。HBuflder有完整的語法提示、代碼塊等，可以提高開發(fā)效率。

在企業(yè)上班，老板都很注重開發(fā)效率，時間就是金錢，Dreamweaver開發(fā)效率相當(dāng)于要慢點，所以很多公司都用的是Sublime Text和HBuilder。但好多學(xué)校都用的Dreamweaver，不管是多媒體教室還是機房環(huán)境都安裝的是Dreamweaver，對于老師來說，我的解決辦法有兩種，一種是老師可以自帶SuNimeText安裝包，因為SublimeText很小安裝起來非?？?另一種是可以遠(yuǎn)程連接桌面，在自己的電腦上安裝好這些軟件，直接遠(yuǎn)程就好了。我上課是Dreamweaver、SuNime Text、HBuilder都給學(xué)生介紹了，都使用過，然后讓學(xué)生自由選擇用什么軟件。

3如何上好網(wǎng)頁設(shè)計課程

3.1如何上好第一堂課

俗話說“好的開端等于成功的一半”，如果你上好了第一堂課，學(xué)生不僅對網(wǎng)頁設(shè)計會有興趣，還會比較喜歡你，以后的出勤率應(yīng)該也會比較高。我在高校從教五年了，現(xiàn)在上第一堂課都還有點小緊張。教師在上第一堂課時，一定要有自信，在學(xué)生心中塑造一個完美形象。

網(wǎng)頁設(shè)計是專業(yè)基礎(chǔ)課，一般在大一上期開設(shè)，也是學(xué)生入學(xué)的第一門專業(yè)課。因此網(wǎng)頁設(shè)計的第一堂課更重要，網(wǎng)頁設(shè)計的第一堂課一般不需要講書本上的知識，可以講以下幾個方面：

I、行業(yè)發(fā)展，就業(yè)方向，比如軟件行業(yè)有很多崗位：產(chǎn)品經(jīng)理、前端設(shè)計、后臺開發(fā)、數(shù)據(jù)庫管理、軟件測試等，其中后臺開發(fā)又有不同技術(shù)。前端方向需要掌握HTML5+CSS3、javas-eript+JQuery、原型設(shè)計、前端框架等技術(shù)，java方向需要掌握ja_va、java web、spfingMVC、ssh框架等技術(shù)，微軟方向需要掌握C#、asp.net、sql server等技術(shù);

II、項目演示，演示不同類型的網(wǎng)站，如門戶網(wǎng)站、職能網(wǎng)站、個人網(wǎng)站等;然后分析不同類型網(wǎng)站的共同點，設(shè)計原則等;最后再講網(wǎng)站開發(fā)流程，讓學(xué)生剛開始做項目時一定要養(yǎng)成良好的習(xí)慣;

III、說教材、說目錄、說目標(biāo)、說教學(xué)方法、說考核方式;先分析這門課程的整體框架，再說應(yīng)該如何學(xué)習(xí)，學(xué)到什么程度;

總之，第一堂課老師要有自信，要給學(xué)生留下好的印象，讓學(xué)生對該課程感興趣。

3.2如何上好網(wǎng)頁設(shè)計課程

最近幾年微課、慕課、翻轉(zhuǎn)課堂特別的火，課堂有趣，才會有更多的學(xué)生聽課。俗話說臺上一分鐘臺下十年功，想上好一堂課是需要花特別多的工夫。通過這幾年的授課經(jīng)驗，我總結(jié)出來幾點關(guān)于如何上好網(wǎng)頁設(shè)計課程：

I、首先課前得把課備好，備課不僅要備學(xué)生，還要備教學(xué)內(nèi)容。備學(xué)生的話要了解學(xué)生的基本水平，學(xué)生學(xué)習(xí)過哪些課程，針對不同的學(xué)生使用不同的教學(xué)方法。備教學(xué)內(nèi)容的話要把內(nèi)容多備一點，特別是新教師，掌握不好教學(xué)進度，講課過陜會把自己準(zhǔn)備的所有內(nèi)容講完了但還沒下課。

II、上課的話分理論課和實訓(xùn)課，理論課的話，大專院校的學(xué)生的基礎(chǔ)可能更差一點，需要講得更基礎(chǔ)，更細(xì)，拓展的可以更少點。實訓(xùn)課的話，剛開始的話可以先演示一遍，然后把效果圖和代碼截圖給他們，再讓學(xué)生做;等他們?nèi)腴T后，就只給效果圖讓他們自己完成。最后再項目化教學(xué)，帶著學(xué)生做一項目，這樣他們印象才更深刻，學(xué)得更好。

III、課后讓學(xué)生多練習(xí)，多做項目，確定方向，學(xué)習(xí)相關(guān)知識。比如把自己做的網(wǎng)站放服務(wù)器上，用不同的終端看，不斷美化、完善自己做的網(wǎng)站。

4結(jié)束語

通過這幾年的學(xué)習(xí)與教學(xué)，我個人認(rèn)為網(wǎng)頁設(shè)計比后臺開發(fā)更復(fù)雜。后臺開發(fā)的方法一處編寫隨處可用，后臺開發(fā)的語言都是相通的，學(xué)好一門語言再學(xué)其他的語言會覺得很簡單。網(wǎng)頁設(shè)計不一樣，網(wǎng)頁設(shè)計內(nèi)容在不斷地更新，需要不斷地學(xué)習(xí)，網(wǎng)頁設(shè)計還得有一定的美學(xué)基礎(chǔ)。想做一個好的網(wǎng)站不是僅僅只靠網(wǎng)頁設(shè)計基礎(chǔ)就可以完成，還需要使用到j(luò)avaseript、jquery、框架等很多方面的知識，特別是使用不同的框架，環(huán)境需求可能也不一樣，可能會使用不同的編輯器。作為學(xué)生學(xué)習(xí)網(wǎng)頁設(shè)計可以從div+css到HTML5+CSS3，再到前端框架，學(xué)了基本知識之后一定要多做項目，鞏固對知識的理解。作為老師想上好網(wǎng)頁設(shè)計課的話，要有豐富的項目經(jīng)驗，給學(xué)生講起來才更有說服力，備課一定要充分，要讓學(xué)生感興趣，多做項目。