淺談網頁設計與制作課程

廖家莉

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

關鍵詞：網頁設計基礎;HTML5;CSS3;框架;編輯器

中圖分類號：TP311 文獻標識碼：A

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

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

1網頁設計的學習路線

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

2網頁設計編輯器

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

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

3如何上好網頁設計課程

3.1如何上好第一堂課

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

網頁設計是專業基礎課，一般在大一上期開設，也是學生入學的第一門專業課。因此網頁設計的第一堂課更重要，網頁設計的第一堂課一般不需要講書本上的知識，可以講以下幾個方面：

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

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

III、說教材、說目錄、說目標、說教學方法、說考核方式;先分析這門課程的整體框架，再說應該如何學習，學到什么程度;

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

3.2如何上好網頁設計課程

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

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

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

III、課后讓學生多練習，多做項目，確定方向，學習相關知識。比如把自己做的網站放服務器上，用不同的終端看，不斷美化、完善自己做的網站。

4結束語

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