《網(wǎng)頁設(shè)計與制作》課程標(biāo)準(zhǔn)（含課程思政）

《網(wǎng)頁設(shè)計與制作》課程標(biāo)準(zhǔn)

課程名稱網(wǎng)頁設(shè)計與制作課程代碼26033125

課程類別專業(yè)課課程性質(zhì)必修課

課程總學(xué)時64課程學(xué)分3

適用專業(yè)電子商務(wù)歸屬學(xué)院智能商務(wù)學(xué)院

一、課程定位

“網(wǎng)頁設(shè)計與制作”是高職電子商務(wù)專業(yè)核心課程。電子商務(wù)專業(yè)人才培養(yǎng)目標(biāo)是以

習(xí)近平新時代中國特色社會主義思想為指導(dǎo)，具備培養(yǎng)理想信念堅定，德、智、體、美、

勞全面發(fā)展，具有一定的科學(xué)文化水平，良好的人文素養(yǎng)、職業(yè)道德和創(chuàng)新意識，精益求

精的工匠精神，較強的就業(yè)能力和可持續(xù)發(fā)展的能力，掌握本專業(yè)知識和技術(shù)技能，面向

互聯(lián)網(wǎng)和相關(guān)服務(wù)業(yè)、批發(fā)業(yè)、零售業(yè)等行業(yè)的銷售人員，商務(wù)咨詢服務(wù)人員等職業(yè)群，

能夠從事營銷推廣、運營管理、客戶服務(wù)等工作的高素質(zhì)技術(shù)技能人才。電子商務(wù)專業(yè)面

向鹵位群有電子商務(wù)網(wǎng)頁技術(shù)崗位群、電子商務(wù)數(shù)據(jù)分析崗位群、網(wǎng)絡(luò)營銷崗位群、跨境

電商崗位群、電子商務(wù)運營崗位群等。

課程“網(wǎng)頁設(shè)計與制作”主要針對電子商務(wù)網(wǎng)頁設(shè)計等崗位開設(shè)，主要任務(wù)是培養(yǎng)學(xué)

生網(wǎng)頁設(shè)計與Web前端開發(fā)能力，為實現(xiàn)專業(yè)人才培養(yǎng)目標(biāo)起到支持和促進作用。本課程

以現(xiàn)代信息技術(shù)、電子商務(wù)基礎(chǔ)、網(wǎng)頁前端技術(shù)（HTML&CSS）、圖形圖像處理等課程為先

導(dǎo)課程，后續(xù)課程為網(wǎng)站（店）運營、電子商務(wù)數(shù)據(jù)分析、網(wǎng)絡(luò)營銷、Web前端設(shè)計等。。

二、設(shè)計思路

（一）課程內(nèi)容選取

課程內(nèi)容的選取緊緊圍繞電子商務(wù)網(wǎng)頁技術(shù)崗位群中的網(wǎng)頁設(shè)計、Web前端開發(fā)、網(wǎng)

站（店）美工等崗位從業(yè)人員應(yīng)具備的職'亞能力要求，融入Web前端開發(fā)職'業(yè)技能等級標(biāo)

準(zhǔn)，堅持立德樹人的育人宗旨，踐行課程思政與技能培養(yǎng)相結(jié)合，強化社會職業(yè)核心價值

觀和職業(yè)素養(yǎng)教育，注重標(biāo)準(zhǔn)與規(guī)范，培育勞動意識和工匠精神，將課程內(nèi)容確定為網(wǎng)頁

息體規(guī)劃設(shè)計、制作網(wǎng)頁效果圖、網(wǎng)頁切片與導(dǎo)出HTML頁面、網(wǎng)頁HTML修正處理、添加

網(wǎng)頁靜態(tài)效果、添加網(wǎng)頁動態(tài)效果、制作網(wǎng)絡(luò)廣告等、制作網(wǎng)頁視頻播放器、網(wǎng)頁搜索引

擎優(yōu)化等九個學(xué)習(xí)任務(wù)。

（二）課程內(nèi)容編排設(shè)計

課程結(jié)構(gòu)體系是根據(jù)網(wǎng)頁設(shè)計崗位工作過程和學(xué)生的認(rèn)知規(guī)律來確定學(xué)習(xí)任務(wù)順序,

按學(xué)習(xí)任務(wù)的難易程度確定課程總學(xué)時和學(xué)時分配。課程建議總學(xué)時數(shù)為52學(xué)時。。

三、課程目標(biāo)

（一）總體目標(biāo)

通過本課程的學(xué)習(xí)，學(xué)生能以習(xí)近平新時代中國特色社會主義思想為指導(dǎo)，積極踐行

社會主義核心價值觀，愛國精神和家國情懷，遵守電商法律法規(guī)，具備家國情懷、民族自

信心、工匠精神和職業(yè)精神。掌握網(wǎng)頁設(shè)計與制作專業(yè)技能，學(xué)生會應(yīng)用HTML、CSS、

JavaScriptPhotoshop網(wǎng)頁布局與配色、Dreamweaver網(wǎng)頁制作、網(wǎng)頁搜索引擎優(yōu)化、

網(wǎng)絡(luò)廣告實現(xiàn)等方面的相關(guān)知識技能，能勝任網(wǎng)頁設(shè)計與制作、網(wǎng)站（店）裝修、Web前

端開發(fā)視覺營銷等工作任務(wù)，具備網(wǎng)頁設(shè)計規(guī)劃能力、網(wǎng)頁布局與配色能力、靜態(tài)與動態(tài)

網(wǎng)頁效果制作能力、網(wǎng)絡(luò)廣告制作能力、網(wǎng)店商品詳情頁設(shè)計能力等職業(yè)能力。

（二）具體目標(biāo)

1.素質(zhì)目標(biāo)

（1）具有遵守互聯(lián)網(wǎng)法律法規(guī)的意識，有圖片、軟件著作知識產(chǎn)權(quán)保護觀念。

（2）具有“工欲善其事，必先利其器”的工匠精神。

（3）具備整體觀和全局意識。

（4）具有“做中學(xué)、多動手”的職業(yè)素養(yǎng)。

（5）具備平面布局、色彩搭配等藝術(shù)審美能力。

（6）具備互聯(lián)網(wǎng)思維，追求極致，做事不留瑕疵。

（7）具備終身學(xué)習(xí)的素養(yǎng)，能夠自學(xué)和請教獲得答案。

（8）具備細節(jié)決定成敗的意識，耐心細致，精益求精。

（9）具備信息安全的意識，遵守信息安全規(guī)范。

（10）具備信息資源的收集、整理、內(nèi)化及應(yīng)用的能力。

（11）具備良好的人機交互意識，注重交互設(shè)計中融入以人為本的理念。

2.知識目標(biāo)

（1）會說明網(wǎng)頁文字、圖片、音頻、視頻素材的一般格式與編碼要求。

（2）會描述網(wǎng)頁的一般布局及常用的布局草圖設(shè)計軟件。

（3）會說明網(wǎng)頁設(shè)計中像素的含義。

（4）會描述網(wǎng)頁色彩及運用方法。

（5）會描述Photoshop網(wǎng)頁效果設(shè)計中圖層、參考線、選取工具、切片、描邊、標(biāo)

尺、切片設(shè)置、切片優(yōu)化、Web頁面導(dǎo)出的專用技術(shù)。

（6）會描述HTML頁面結(jié)構(gòu)及常用HTML標(biāo)簽的運用方法。

（7）會描述CSS的樣式格式與常用的CSS樣式運用方法。

（8）會描述JavaScript基本編程運用及網(wǎng)頁嵌入技術(shù)。

（9）會說明導(dǎo)航條、九宮圖、表格、表單等靜態(tài)頁面效果的制作邏輯與HTML和CSS

設(shè)計技巧。

（10）會說明倒計時（秒殺）、分頁選項卡、登錄模塊等動態(tài)頁面效果的制作邏輯與

HTML、CSS、JavaScript設(shè)計技巧。

（11）會說明彈出廣告、對聯(lián)廣告、輪播廣告、側(cè)邊欄廣告等網(wǎng)絡(luò)廣告的制作邏輯與

HTML^CSS、JavaScript設(shè)計技巧。

（12）會說明網(wǎng)頁視頻播放器的制作邏輯與HTML、CSS>JavaScript設(shè)計技巧。

（13）會描述網(wǎng)頁搜索引擎優(yōu)化中關(guān)鍵詞遴選、標(biāo)題優(yōu)化、Meta優(yōu)化、網(wǎng)頁文案優(yōu)

化、網(wǎng)頁表現(xiàn)與行為代碼外置的原理和方法。

3.能力目標(biāo)

（1）能夠正確收集整理網(wǎng)頁文字、圖片、音頻、視頻等素材，能夠選擇適合的開源

開發(fā)工具。

（2）能夠規(guī)劃網(wǎng)頁藍本、并能夠選擇軟件工具繪制網(wǎng)頁規(guī)劃草圖。

（3）能夠熟練使用Photoshop根據(jù)網(wǎng)頁規(guī)劃草圖進行網(wǎng)頁布局。

（4）能夠熟練使用Photoshop進行網(wǎng)頁整體配色和背景設(shè)計。

（5）能夠熟練使用Photoshop植入網(wǎng)頁圖片、文字、音頻、視頻等元素，完成網(wǎng)頁

效果圖設(shè)計。

（6）能夠熟練進行網(wǎng)頁精準(zhǔn)切片和切片設(shè)置。

（7）能夠?qū)⒕W(wǎng)頁效果圖通過優(yōu)化導(dǎo)出為DIV+CSS布局的HTML網(wǎng)頁。

（8）能夠熟練使用Dreamweaver建議Web站點和網(wǎng)頁設(shè)計制作。

（9）能夠熟練使用HTML及CSS制作網(wǎng)頁且修正導(dǎo)出的網(wǎng)頁。

（10）能夠設(shè)計制作個性化的導(dǎo)航條、九宮圖、表格、表單等靜態(tài)網(wǎng)頁效果。

（11）能夠運用HTML、CSS、JavaScript設(shè)計制作個性化倒計時、分頁選項卡、登錄

模塊等動態(tài)頁面效果。

（12）能夠在網(wǎng)頁中添加自己設(shè)計的彈出廣告、對聯(lián)廣告、輪播廣告和邊欄廣告。

教學(xué)項目選擇精準(zhǔn)扶貧網(wǎng)頁制作案例，教學(xué)中結(jié)

合當(dāng)前我國鄉(xiāng)村振興戰(zhàn)略形勢，進行教育幫扶和

1電子商務(wù)專業(yè)助農(nóng)教育。在規(guī)劃網(wǎng)站欄目及整理家國情懷

素材過程中，結(jié)合助農(nóng)政策，了解鄉(xiāng)村豐富的農(nóng)

特產(chǎn)品，增加民族自豪感。

網(wǎng)頁設(shè)計制作需要絕對精準(zhǔn)，不能有絲毫誤差。

由此，課堂中引入工匠精神，在工作中一絲不茍、

2具備細節(jié)決定成敗的做人做事的理念。工匠精神

培養(yǎng)美和創(chuàng)新意識C美一正確的符合受眾人群的

審美觀。創(chuàng)新一思想有多遠，就能走多遠。

對文案內(nèi)容進行再審核，加強職業(yè)守則及法律法

規(guī)知識的教育，特別是遵從《互聯(lián)網(wǎng)信息服務(wù)管

3理辦法》、《互聯(lián)網(wǎng)出版管理暫行規(guī)定》、《計算機規(guī)則意識

信息網(wǎng)絡(luò)國際聯(lián)網(wǎng)管理暫行規(guī)定》等法律法規(guī)，

保障互聯(lián)網(wǎng)內(nèi)容的合法性，傳播網(wǎng)絡(luò)正能量。

工匠精神強調(diào)工具的應(yīng)用一一“工欲善其事，必

先利其落”。網(wǎng)頁效果設(shè)計與切片導(dǎo)出需要對

4Photoshop很熟悉。那么需要多動手、多訓(xùn)練、職業(yè)品格

多做項目，精益求精，正是這種工匠精神能促成

網(wǎng)頁設(shè)計“工匠”的出現(xiàn)。

紙上道來來終覺淺，絕知此事要躬行。

5發(fā)揚職業(yè)教育精神，培養(yǎng)自學(xué)能力和終身學(xué)習(xí)的工匠精神

能力，能通過學(xué)習(xí)思考解決工作中遇到的問題。

在九宮圖設(shè)計中以社會主義核心價值觀為范例，

6師生一起背誦、輸入，并進行效果修飾，以加深世界觀

印象，加強理解。

7凈化網(wǎng)絡(luò)空間，自覺抵制不良網(wǎng)絡(luò)視頻。規(guī)則意識

8自覺遵從網(wǎng)絡(luò)廣告法規(guī)，樹立網(wǎng)絡(luò)倫理理念。c依法治國

通過完成實訓(xùn)任務(wù)，培養(yǎng)學(xué)生吃苦耐勞、嚴(yán)謹(jǐn)認(rèn)

9愛崗敬業(yè)

真和一絲不茍的工作態(tài)度。

具備細節(jié)決定成敗的意識，耐心細致，精益求精。

10樹立以客戶需求為中心的服務(wù)意識，不斷提升服工匠精神

務(wù)質(zhì)量。

（三）內(nèi)容設(shè)計

情境一：總體規(guī)劃“電商助農(nóng)”網(wǎng)頁與設(shè)計“電商助農(nóng)”網(wǎng)頁草圖

學(xué)時2其中：理論0學(xué)時，實踐2學(xué)時，一體化2學(xué)時。

學(xué)習(xí)目標(biāo)

1.掌握知識點：

?網(wǎng)頁文案的一般要求；

?網(wǎng)頁中圖片格式、大小要求；

?網(wǎng)頁中音頻、視頻的常用格式與要求。

2.獲得技能點：

?網(wǎng)頁文案寫作；網(wǎng)頁圖片處理；

?網(wǎng)頁音視頻處理。

3.思政融入點：

?教學(xué)項目選擇精準(zhǔn)扶貧網(wǎng)頁制作案例，教學(xué)中結(jié)合當(dāng)前我國鄉(xiāng)村振興戰(zhàn)略形勢，進行教

育幫扶和電子商務(wù)專業(yè)助農(nóng)教育。

?在規(guī)劃網(wǎng)站欄目及整理素材過程中，結(jié)合助農(nóng)政策，了解鄉(xiāng)村豐富的農(nóng)特產(chǎn)品，增加民

族自豪感。

學(xué)習(xí)內(nèi)容教學(xué)建議與說明

某湖北電商企業(yè)擬開發(fā)一個精準(zhǔn)扶貧產(chǎn)品電商展示推廣網(wǎng)教學(xué)過程應(yīng)體現(xiàn)“教、學(xué)、

站，推廣湖北貧困地區(qū)農(nóng)副產(chǎn)品和土特產(chǎn)品。企業(yè)已經(jīng)有做、用”一體化原則，建立

部分產(chǎn)品圖片、產(chǎn)品介紹等信息。先準(zhǔn)備制作一個網(wǎng)站首完整的在線教學(xué)平臺，建設(shè)

頁。要求包括Logo、Banner^重點商品介紹、廣告商品、豐富的教學(xué)資源，包括課程

網(wǎng)站介紹、網(wǎng)站導(dǎo)航等欄目。要求整理素材、規(guī)劃頁面板介紹、課程標(biāo)準(zhǔn)、課程設(shè)計、

塊并繪制網(wǎng)頁草圖。教學(xué)演示文檔、教學(xué)教案、

1.收集整理網(wǎng)頁素材實訓(xùn)一體化任務(wù)單、實訓(xùn)內(nèi)

?會根據(jù)網(wǎng)頁設(shè)計對文本的要求對網(wǎng)頁文案進行加工容、習(xí)題與考核內(nèi)容等，更

?會根據(jù)網(wǎng)頁圖片的要求，對展示產(chǎn)品圖片及相關(guān)圖片進重要的是所有的教學(xué)環(huán)節(jié)錄

行加工處理制完整的教學(xué)視頻，在重點

?會根據(jù)網(wǎng)頁對其他素材的要求對網(wǎng)頁其他素材進行加工難點環(huán)節(jié)錄制知識技能拓展

整理。教學(xué)視頻。由此，課程根據(jù)

2.制作網(wǎng)頁設(shè)計草圖不同學(xué)校、不同教師、不同

?會描述Photoshop的基本作用及與網(wǎng)頁設(shè)計相關(guān)的參數(shù)生源的需要采取線下師徒式

設(shè)置方法教學(xué)、線上線下融合的翻轉(zhuǎn)

?會使用Photoshop設(shè)計制作網(wǎng)頁規(guī)劃草圖課堂、線上教學(xué)或混合式教

學(xué)方法。

單元考核評價說明課程考核所占權(quán)重

1.獨立完成學(xué)習(xí)情境中的設(shè)計草圖。

2.自己設(shè)計一個網(wǎng)頁首頁［電商站點、學(xué)習(xí)站點、企業(yè)站5%

點等),繪制頁面草圖c

拓展和探究性學(xué)習(xí)

在課程平臺提供在線課程，在完整錄制全程教學(xué)視頻的基礎(chǔ)上錄制更多拓展項目視頻，以

便學(xué)生選擇拓展學(xué)習(xí)，進一步提升學(xué)生技能水平。并自學(xué)AI(Hlustralor),使用其繪

制網(wǎng)頁草圖。

情境二：制作“電商助農(nóng)”電商網(wǎng)頁效果圖

學(xué)時8其中：理論0學(xué)時，實踐4學(xué)時，一體化4學(xué)時。

學(xué)習(xí)目標(biāo)

1.掌握知識點：

?精準(zhǔn)參考線建立方法；

?固定大小矩形選取框建立方法；

?圖層建立級圖層分組方法。

2.獲得技能點：

?運用Photoshop建立網(wǎng)頁布局文檔；

?建立精準(zhǔn)布局參考線及固定大小選取框；

?Photoshop區(qū)域填充。

?使用Photoshop描邊設(shè)置區(qū)域邊框。

3.思政融入點：

?網(wǎng)頁設(shè)計制作需要絕對精準(zhǔn)，不能有絲毫誤差。由此，課堂中引入工匠精神，在工作中

一絲不茍、具備細節(jié)決定成敗的做人做事的理念。

?培養(yǎng)美和創(chuàng)新意識。美一正確的符合受眾人群的審美觀。創(chuàng)新一思想有多遠，就能走多

遠。

?進行剪貼圖層教學(xué)時，運用中國夢的內(nèi)容：國家富強、民族振興、人民幸福文字效果制

作為案例。教學(xué)中通過自然融入讓學(xué)生增加對中國夢的記憶和理解。

?進行Logo制作教學(xué)時，選擇制作環(huán)保標(biāo)簽，引申出環(huán)保意識教育，闡明“綠水青山就

是金山銀山”的重要意義。

?進行商品背景圖片設(shè)置中包含農(nóng)民田間勞動收獲圖片，引申出我國“艱苦奮斗、請柬節(jié)

約”的光榮傳統(tǒng)，以及現(xiàn)階段推行“光盤行動”的意義。

?進行網(wǎng)頁文案寫作教學(xué)時，強調(diào)遵紀(jì)守法，特別是要遵從電子商務(wù)法、網(wǎng)絡(luò)完全法、消

費者權(quán)益保護法等法律法規(guī)，傳播網(wǎng)絡(luò)正能量。

?具備大局意識，有整體感，同時具備畫龍點睛，重點突出意識。

?具備電子商務(wù)職業(yè)素養(yǎng)，養(yǎng)成用戶至上的職業(yè)習(xí)慣,

學(xué)習(xí)內(nèi)容教學(xué)建議與說明

通過設(shè)計規(guī)劃制作出網(wǎng)頁草圖后，該企業(yè)作為電子商務(wù)企業(yè)，考慮到教學(xué)過程應(yīng)體現(xiàn)

視覺營銷和網(wǎng)站推廣因素，決定制作出網(wǎng)頁效果圖，包括網(wǎng)頁布局、“教、學(xué)、做、用”

網(wǎng)頁配色與背景設(shè)計、添加Logo商品廣告圖片、植入網(wǎng)頁文案、設(shè)一體化原則，建立

計網(wǎng)頁導(dǎo)航條等，最后完成網(wǎng)頁效果圖制作。完整的在線教學(xué)平

1.網(wǎng)頁布局臺，建設(shè)豐富的教

?會按照設(shè)計草圖運用Photoshop參考線及矩形選取框工具進行頁學(xué)資源，包括課程

面布局分塊。介紹、課程標(biāo)準(zhǔn)、

?會按照設(shè)計草圖運用Photoshop圖層進行網(wǎng)頁區(qū)域圖層分塊課程設(shè)計、教學(xué)演

?會設(shè)頁面區(qū)域邊框。示文檔、教學(xué)教案、

?會按照設(shè)計草圖通過區(qū)域分塊和圖層分塊完成網(wǎng)頁總體布局和詳實訓(xùn)一體化任務(wù)

細布局。單、實訓(xùn)內(nèi)容、習(xí)

2.網(wǎng)頁配色題與考核內(nèi)容等，

?會根據(jù)網(wǎng)頁設(shè)計和視覺營銷的需要進行網(wǎng)頁整體配色。更重要的是所有的

?會網(wǎng)頁效果設(shè)計的需要添加網(wǎng)頁圖片背景。教學(xué)環(huán)節(jié)錄制完整

?會按照網(wǎng)頁設(shè)計的需要完成網(wǎng)頁配色。的教學(xué)視頻，在重

3.網(wǎng)頁圖片元素植入與處理點難點環(huán)節(jié)錄制知

?會設(shè)計與植入網(wǎng)頁Logo識技能拓展教學(xué)視

?會植入網(wǎng)頁圖片。頻。由此，課程根

?會植入網(wǎng)頁廣告圖片。據(jù)不同學(xué)校、不同

4.網(wǎng)頁文案植入與效果編排教師、不同生源的

?會進行網(wǎng)頁文案寫作需要采取線下師徒

?會設(shè)置網(wǎng)頁標(biāo)題并設(shè)計效果式教學(xué)、線上線下

?會植入網(wǎng)頁文案變進行視覺效果編排。融合的翻轉(zhuǎn)課堂、

5.設(shè)計網(wǎng)頁導(dǎo)航效果?會導(dǎo)航條背景設(shè)計線上教學(xué)或混合式

?會設(shè)計制作網(wǎng)頁導(dǎo)航完整并對齊教學(xué)方法。

?會設(shè)計導(dǎo)航的呈現(xiàn)效果。

單元考核評價說明課程考核所占權(quán)重

1、課堂學(xué)習(xí)考核（包括考勤、提問、操作訓(xùn)練過程及完成情況）

10%

2、完成個人電子相冊或《光輝歷程》電子相冊制作。

拓展和探究性學(xué)習(xí)

在課程平臺提供在線課程，在完整錄制全程教學(xué)視頻的基礎(chǔ)上錄制更多拓展項目《光輝歷

程》電子相冊視頻，以便學(xué)生選擇拓展學(xué)習(xí)，進一步提升學(xué)生技能水平。并使用Illustrator

制作網(wǎng)頁效果圖。

情境三：“電商助農(nóng)”電商網(wǎng)頁切片與導(dǎo)出“電商助農(nóng)”電商HTML頁面

學(xué)時4其中：理論0學(xué)時，實踐2學(xué)時，一體化2學(xué)時。

學(xué)習(xí)目標(biāo)

1.掌握知識點：

?Photoshop切片工具及選擇切片工具使用方法：

?基于圖層切片使用方法；

?用戶切片、生成切片與住戶切片提升方法與應(yīng)用。

2.獲得技能點：

?運用Photoshop"新建基于圖層的切片”進行總體切片分塊；

?運營Photoshop切片工具進行區(qū)域切片劃分；

?運營Photoshop放大鏡工具及智能參考向精確調(diào)整切片。

3.思政融入點：

?工匠精神強調(diào)工具的應(yīng)用一一“工欲善其事，必先利其器”。網(wǎng)頁效果設(shè)計與切片導(dǎo)出

需要對Photoshop很熟悉。那么需要多動手、多訓(xùn)練、多做項目，精益求精，正是這種工

匠精神能促成網(wǎng)頁設(shè)計“工匠”的出現(xiàn)。

?具備全局觀念、大局意識，磨練整體規(guī)劃綜合思考能力。

?紙上道來來終覺淺，絕知此事要躬行。

?發(fā)揚職業(yè)教育精神，培養(yǎng)自學(xué)能力和終身學(xué)習(xí)的能力，能通過學(xué)習(xí)思考解決工作中遇到

的問題。

學(xué)習(xí)內(nèi)容教學(xué)建議與說明

這個效果頁面轉(zhuǎn)換為真實的Web頁面——HTML頁面。

Photoshop的切片及“存儲為Web所用格式”提供了這一

教學(xué)過程應(yīng)體現(xiàn)“教、學(xué)、做、

功能°本子項目就是完成從網(wǎng)頁效果圖到HTML網(wǎng)頁的轉(zhuǎn)

用”一體化原則，建立完整的

換。

在線教學(xué)平臺，建設(shè)豐富的教

1.劃分網(wǎng)頁切片

學(xué)資源，包括課程介紹、課程

?會使用Photoshop基于圖層切片技術(shù)劃分網(wǎng)頁總體切

標(biāo)準(zhǔn)、課程設(shè)計、教學(xué)演示文

片。

檔、教學(xué)教案、實訓(xùn)一體化任

?會使用切片工具及劃分切片技術(shù)詳細劃分切片

務(wù)單、實訓(xùn)內(nèi)容、習(xí)題與考核

?會通過放大工具和智能參考線精確調(diào)整切片完成網(wǎng)頁

內(nèi)容等，更重要的是所有的教

切片。

學(xué)環(huán)節(jié)錄制完整的教學(xué)視頻，

2.網(wǎng)頁切片參數(shù)設(shè)置

在重點難點環(huán)節(jié)錄制知識技

?會整體規(guī)劃頁面參數(shù)。

能拓展教學(xué)視頻。由此，課程

?會設(shè)置用戶切片參數(shù)

根據(jù)不同學(xué)校、不同教師、不

3.網(wǎng)頁切片圖片優(yōu)化

同生源的需要采取線下師徒

?會進行切片圖像格式選擇。

式教學(xué)、線上線下融合的翻轉(zhuǎn)

?會進行網(wǎng)頁圖像格式的優(yōu)化

課堂、線上教學(xué)或混合式教學(xué)

4.網(wǎng)頁HTML頁面導(dǎo)出

方法。

?會進行表格布局的網(wǎng)頁頁面導(dǎo)出。

?會進行DIV+CSS結(jié)構(gòu)的網(wǎng)頁頁面導(dǎo)出。

單元考核評價說明課程考核所占權(quán)重

1、課堂學(xué)習(xí)考核（包括考勤、提問、操作訓(xùn)練過程及完

成情況）20%

2、自己搜集或拍攝素材，制作一個微電影。

拓展和探究性學(xué)習(xí)

在課程平臺提供在線課程，在完整錄制全程教學(xué)視頻的基礎(chǔ)上錄制更多拓展項目視頻，以

便學(xué)生選擇拓展學(xué)習(xí)，進一步提升學(xué)生技能水平。同時，網(wǎng)上尋找學(xué)習(xí)資源，學(xué)習(xí)網(wǎng)頁

設(shè)計的Web標(biāo)準(zhǔn)規(guī)范。

情境四：精簡與優(yōu)化“電商助農(nóng)”電商網(wǎng)頁代碼

學(xué)時4其中：理論0學(xué)時，實踐2學(xué)時，一體化2學(xué)時。

學(xué)習(xí)目標(biāo)

1.掌握知識點：

?網(wǎng)頁設(shè)計工具Dreamweaver的使用方法；

?網(wǎng)頁設(shè)計制作規(guī)范；

?HTML5的網(wǎng)頁文檔格式；

?HTML、CSS的基本結(jié)構(gòu)、語法、樣式。

?CSS中盒模型與塊元素居中方法。

2.獲得技能點：

?運用Dreamweaver建立Web站點，打開導(dǎo)出的HTML網(wǎng)頁；

?運用Dreamweaver將打開的網(wǎng)頁轉(zhuǎn)換為HTML5網(wǎng)頁文檔；

?遵循網(wǎng)頁設(shè)計制作規(guī)范合理布局站點、規(guī)范命名及代碼書寫，提高代碼可閱讀性；

?運用Dreamweaver刪除網(wǎng)頁中冗余的代碼（包括注釋代碼、標(biāo)記中多余的屬性代碼）。

?運用Dreamweaver編寫代碼實現(xiàn)頁面居中。

3.思政融入點：

?發(fā)揚職業(yè)教育精神，培養(yǎng)自學(xué)能力和終身學(xué)習(xí)的能力，能通過學(xué)習(xí)思考解決工作中遇到

的問題。

?對文案內(nèi)容進行再審核，加強職業(yè)守則及法律法規(guī)知識的教育，特別是遵從《互聯(lián)網(wǎng)信

息服務(wù)管理辦法》、《互聯(lián)網(wǎng)出版管理暫行規(guī)定》、《計算機信息網(wǎng)絡(luò)國際聯(lián)網(wǎng)管理暫行

規(guī)定》等法律法規(guī)，保障互聯(lián)網(wǎng)內(nèi)容的合法性，傳播網(wǎng)絡(luò)正能量。

學(xué)習(xí)內(nèi)容教學(xué)建議與說明

到現(xiàn)在，該企業(yè)的網(wǎng)頁設(shè)計小組已經(jīng)完成了網(wǎng)站首頁從

設(shè)計效果圖到網(wǎng)頁的轉(zhuǎn)換。然而導(dǎo)出的頁面還不能稱之

為真正意義上的網(wǎng)頁。在瀏覽器瀏覽時頁面不在中間；

教學(xué)過程應(yīng)體現(xiàn)“教、學(xué)、做、

查看網(wǎng)頁代碼時，發(fā)現(xiàn)有很多冗余代碼；并且頁面不是

用”一體化原則，建立完整的在

HTML5文檔；頁面的文字部分還是圖片；貝面的導(dǎo)航效

線教學(xué)平臺，建設(shè)豐富的教學(xué)資

果需要加強。所有上述問題需要進行修正處理，建立真

源，包括課程介紹、課程標(biāo)準(zhǔn)、

正意義上的HTML網(wǎng)頁頁面，使之更符合網(wǎng)頁設(shè)計規(guī)范

課程設(shè)計、教學(xué)演示文檔、教學(xué)

要求。

教案、實訓(xùn)一體化任務(wù)單、實訓(xùn)

1.網(wǎng)頁代碼精簡與整體效果優(yōu)化

內(nèi)容、習(xí)題與考核內(nèi)容等，更重

?會使用Dreamweaver建立Web站點。

要的是所有的教學(xué)環(huán)節(jié)錄制完整

?會將其他網(wǎng)頁頁面轉(zhuǎn)換為HTML5格式的網(wǎng)頁頁面。

的教學(xué)視頻，在重點難點環(huán)節(jié)錄

?會刪除網(wǎng)頁中冗余的HTML代碼以精簡網(wǎng)頁代碼。

制知識技能拓展教學(xué)視頻。由此，

?會使用CSS樣式實現(xiàn)網(wǎng)頁居中。

課程根據(jù)不同學(xué)校、不同教師、

2.文字圖片處理

不同生源的需要采取線下師徒式

?會使用HTML和CSS實現(xiàn)頁面文字處理。

教學(xué)、線上線下融合的翻轉(zhuǎn)課堂、

3.網(wǎng)頁導(dǎo)航效果實現(xiàn)

線上教學(xué)或混合式教學(xué)方法。

?會使用Photoshop制作導(dǎo)航欄目圖片。

?會使用HTML及CSS代碼完成導(dǎo)航效果的實現(xiàn)。

單元考核評價說明課程考核所占權(quán)重

1.獨立完成學(xué)習(xí)情境中的網(wǎng)頁HTML頁面精簡與優(yōu)化。

2.完成自己設(shè)計網(wǎng)頁首頁（電商站點、學(xué)習(xí)站點、企業(yè)5%

站點等）的網(wǎng)頁HTML頁面代碼精簡與優(yōu)化。

拓展和探究性學(xué)習(xí)

在課程平臺提供在線課程，在完整錄制全程教學(xué)視頻的基礎(chǔ)上錄制更多拓展項目視頻，以

便學(xué)生選擇拓展學(xué)習(xí)，進一步提升學(xué)生技能水平。并回顧或網(wǎng)上學(xué)習(xí)使用HTML5+CSS3網(wǎng)

頁設(shè)計技術(shù)。

情境五：制作“電商助農(nóng)”電商網(wǎng)頁靜態(tài)效果

學(xué)時4其中：理論0學(xué)時，實踐2學(xué)時，一體化2學(xué)時。

學(xué)習(xí)目標(biāo)

1.掌握知識點：

?HTML中的列表元素（ol/ul）及特點。

?CSS中font>border>float等樣式與屬性值的應(yīng)用。

?基本的橫向或縱向?qū)Ш綏l的HTML結(jié)構(gòu)：

?基本的橫向或縱向?qū)Ш綏l的CSS樣式；

?HTML、CSS的基本結(jié)構(gòu)、語法、樣式。

?滑動門導(dǎo)航條實現(xiàn)原理。

?九宮圖實現(xiàn)原理。

?運用Pliotosliop制作九宮圖圖片的方法。

?Photoshop固定大小與樣式的圓角矩形制作與設(shè)計技術(shù)，基于參考線的切片與圖片導(dǎo)出

技術(shù)。

?HTML中table元素的結(jié)構(gòu)。

?CSS中針對table元素的特點

2.獲得技能點：

?運用Dreamweaver設(shè)計基本導(dǎo)航條樣式；

?運用Photoshop制作滑動門導(dǎo)航條圖片。

?運用Dreamweaver將導(dǎo)航條代碼移植到特定頁面并進行精準(zhǔn)調(diào)整。

3.思政融入點：

?具有職業(yè)教育素養(yǎng)，多動手，做中學(xué)。

?具備細節(jié)決定成敗的意識，耐心細致，精益求精

?樹立以客戶需求為中心的服務(wù)意識，不斷提升服務(wù)質(zhì)量。

?在九宮圖設(shè)計中以社會主義核心價值觀為范例，師生一起背誦、輸入，并進行效果修飾,

以加深印象，加強理解。

?艱苦奮斗，勤儉節(jié)約。

?發(fā)揚職業(yè)教育精神，培養(yǎng)自學(xué)能力和終身學(xué)習(xí)的能力，能通過學(xué)習(xí)思考解決工作中遇到

的問題。

?通過完成實訓(xùn)任務(wù)，培養(yǎng)學(xué)生吃苦耐勞、嚴(yán)謹(jǐn)認(rèn)真卻一絲不茍的工作態(tài)度。

學(xué)習(xí)內(nèi)容教學(xué)建議與說明

在靜態(tài)效果添加完成后，該企業(yè)網(wǎng)站首頁效果基本實現(xiàn)，在

瀏覽器預(yù)覽發(fā)現(xiàn)局部瑕疵也即將修正。不過網(wǎng)頁設(shè)計還要強

教學(xué)過程應(yīng)體現(xiàn)“教、學(xué)、

調(diào)與用戶的交互提升用戶體驗，并且需要一些特點的動態(tài)效

做、用”一體化原則，建立

如商品促銷活動倒計時（秒殺）、網(wǎng)站登錄模塊、網(wǎng)頁分頁

完整的在線教學(xué)平臺，建設(shè)

選項卡等效果，于是該企業(yè)網(wǎng)頁設(shè)計組開始著手這些動態(tài)效

干富的教學(xué)資源，包括課程

果的設(shè)計并添加到網(wǎng)頁中。

介紹、課程標(biāo)準(zhǔn)、課程設(shè)計、

1.制作網(wǎng)頁個性化導(dǎo)航條

教學(xué)演示文檔、教學(xué)教案、

?會使用Dreamweaver和HTML、CSS制作基本的橫向和縱向

實訓(xùn)一體化任務(wù)單、實訓(xùn)內(nèi)

導(dǎo)航條C

容、習(xí)題與考核內(nèi)容等，更

?會使用Dreamweaver和HTML、CSS制作不等寬導(dǎo)航條和滑

重要的是所有的教學(xué)環(huán)節(jié)

動門導(dǎo)航條。

錄制完整的教學(xué)視頻，在重

?會將導(dǎo)航條添加到特定的網(wǎng)頁頁面并進行精準(zhǔn)調(diào)整c

點難點環(huán)節(jié)錄制知識技能

2.制作網(wǎng)頁九宮圖效果

拓展教學(xué)視頻。由此，課程

?會使用Photoshop制作九宮圖效果圖片。

根據(jù)不同學(xué)校、不同教師、

?會使用HTML.CSS技術(shù)實現(xiàn)并應(yīng)有九官圖效果。會使用

不同生源的需要采取線下

HTML、CSS技術(shù)實現(xiàn)并應(yīng)有九宮圖效果。

師徒式教學(xué)、線上線下融合

3.制作個性化網(wǎng)頁表格與表單

的翻轉(zhuǎn)課堂、線上教學(xué)或混

?會使用HTML、CSS技術(shù)實現(xiàn)個性化網(wǎng)頁表格。。

合式教學(xué)方法。

?會使用HTML、CSS技術(shù)實現(xiàn)網(wǎng)頁表單布局與修飾。

單元考核評價說明課程考核所占權(quán)重

1.獨立完成學(xué)習(xí)情境中的網(wǎng)頁HTML頁面添加靜態(tài)頁面效果。

2.完成自己設(shè)計網(wǎng)頁首頁（電商站點、學(xué)習(xí)站點、企業(yè)站點10%

等）的網(wǎng)頁HTML頁面代碼添加靜態(tài)頁面效果。

拓展和探究性學(xué)習(xí)

在課程平臺提供在線課程，在完整錄制全程教學(xué)視頻的基礎(chǔ)上錄制更多拓展項目視頻，以

便學(xué)生選擇拓展學(xué)習(xí)，進一步提升學(xué)生技能水平。

1.學(xué)習(xí)使用表單的美化效果。

2.學(xué)習(xí)使用浮動框架美化效果。

情境六：制作“電商助農(nóng)”電商網(wǎng)頁動態(tài)效果

學(xué)時8其中：理論0學(xué)時，實踐4學(xué)時，一體化2學(xué)時。

學(xué)習(xí)目標(biāo)

1.掌握知識點：

?倒計時（秒殺）結(jié)構(gòu)有樣式設(shè)計技術(shù)；

?JavaScript代碼頁面嵌入方法。

?Window對象、document對象與網(wǎng)頁加載事件的理解。

?JavaScript運算符、函數(shù)、數(shù)值類型、表達式的理解與應(yīng)用。

?Math與Time對象的應(yīng)用；

2.獲得技能點：

?運用Dreamweaver建立秒殺（倒計時）效果HTML結(jié)構(gòu)；

?運用Dreamweaver嵌入JavaScript代碼。

?運用JavaScript代碼編程實現(xiàn)倒計時（秒殺）效果。

3.思政融入點：

?發(fā)揚職業(yè)教育精神，培養(yǎng)自學(xué)能力和終身學(xué)習(xí)的能力，能通過學(xué)習(xí)思考解決JJ乍中遇到

的問題。

?通過完成實訓(xùn)任務(wù)，培養(yǎng)學(xué)生吃苦耐勞、嚴(yán)謹(jǐn)認(rèn)真卻一絲不茍的工作態(tài)度。

?自強不息，強我中華。

?發(fā)揚職業(yè)教育精神，培養(yǎng)自學(xué)能力和終身學(xué)習(xí)的能力，能通過學(xué)習(xí)思考解決工作中遇到

的問題。

學(xué)習(xí)內(nèi)容教學(xué)建議與說明

在網(wǎng)頁設(shè)計特別色電子商務(wù)相關(guān)網(wǎng)頁設(shè)計中，網(wǎng)絡(luò)廣告植入教學(xué)過程應(yīng)體現(xiàn)“教、學(xué)、

是不可或缺的，網(wǎng)絡(luò)廣告是網(wǎng)絡(luò)營銷的重要手段。常見的網(wǎng)做、用”一?體化原則，建立

頁廣告包括彈出廣告、對聯(lián)廣告、輪播廣告、側(cè)邊欄廣告、完整的在線教學(xué)平臺，建設(shè)

浮動廣告等。因此項目組與企業(yè)廣告策劃相關(guān)部門聯(lián)系，獲豐富的教學(xué)資源，包括課程

得的廣告設(shè)計的效果圖片，在此基礎(chǔ)上準(zhǔn)備將這些廣告按照介紹、課程標(biāo)準(zhǔn)、課程設(shè)計、

需要插入到頁面中。教學(xué)演示文檔、教學(xué)教案、

1.設(shè)計制作商品秒殺（倒計時）效果實訓(xùn)一體化任務(wù)單、實訓(xùn)內(nèi)

?會使用HTML.CSS技術(shù)實現(xiàn)商品秒殺效果結(jié)構(gòu)與外觀。容、習(xí)題與考核內(nèi)容等，更

?會使用Javascript的setinterval＞數(shù)學(xué)方法等技術(shù)實現(xiàn)重要的是所有的教學(xué)環(huán)節(jié)

商品秒殺倒計時功能。錄制完整的教學(xué)視頻，在重

2.制作網(wǎng)頁選項卡效果點難點環(huán)節(jié)錄制知識技能

?會使用HTML、CSS塊元素及Display屬性技術(shù)實現(xiàn)網(wǎng)頁選拓展教學(xué)視頻。由此，課程

項卡果結(jié)構(gòu)與外觀。根據(jù)不同學(xué)校、不同教師、

?使用Javascript的不同生源的需要采取線下

技術(shù)實現(xiàn)網(wǎng)頁選項卡功能。師徒式教學(xué)、線上線下融合

3.制作網(wǎng)頁登錄模塊的翻轉(zhuǎn)課堂、線上教學(xué)或混

?會使用HTML、CSS技術(shù)實現(xiàn)網(wǎng)頁登錄模塊與外觀。合式教學(xué)方法。

?會使用Javascript的

技術(shù)實現(xiàn)網(wǎng)頁登錄模塊輸入驗證、登錄模式切換等功能。

單元考核評價說明課程考核所占權(quán)重

1.獨立完成學(xué)習(xí)情境中的網(wǎng)頁HTML頁面添加動態(tài)態(tài)頁面效

果“

15%

2.完成自己設(shè)計網(wǎng)頁首頁（電商站點、學(xué)習(xí)站點、企業(yè)站點

等）的網(wǎng)頁HTML頁面代碼添加動態(tài)態(tài)頁面效果。

拓展和探究性學(xué)習(xí)

在課程平臺提供在線課程，在完整錄制全程教學(xué)視頻的基礎(chǔ)上錄制更多拓展項目視頻，以

便學(xué)生選擇拓展學(xué)習(xí)，進一步提升學(xué)生技能水平。

1.學(xué)習(xí)使用Bootstrap的使用技術(shù)。

2.學(xué)習(xí)使用jQuery的使用技術(shù)。

情境七：為“電商助農(nóng)”電商網(wǎng)頁添加網(wǎng)絡(luò)廣告

學(xué)時8其中：理論0學(xué)時，實踐4學(xué)時，一體化4學(xué)時。

學(xué)習(xí)目標(biāo)

1.掌握知識點；

?HTML、CSS的浮動、固定定位等技術(shù)；

?CSS的display隱藏元素屬性。

?Window對象、documenI對象與網(wǎng)頁加載事件的理解。

?JavaScript運算符、函數(shù)、數(shù)值類型、表達式的理解與應(yīng)用。

?setinterval方法的應(yīng)用；

2.獲得技能點：

?運用Dreamweaver建立彈出廣告HTML結(jié)構(gòu)，并用CSS進行隱藏；

?運用Dreamweaver嵌入JavaScript代碼。

?運用JavaScript代碼編程實現(xiàn)彈出廣告功能和關(guān)閉效果。

3.思政融入點：

?自覺遵從網(wǎng)絡(luò)廣告法規(guī)，樹立網(wǎng)絡(luò)倫理理念。

?發(fā)揚職業(yè)教育精神，培養(yǎng)自學(xué)能力和終身學(xué)習(xí)的能力，能通過學(xué)習(xí)思考解決工作中遇到

的問題。

學(xué)習(xí)內(nèi)容教學(xué)建議與說明

在網(wǎng)頁設(shè)計特別色電子商務(wù)相關(guān)網(wǎng)頁設(shè)計中，網(wǎng)絡(luò)廣告植入教學(xué)過程應(yīng)體現(xiàn)“教、學(xué)、

是不可或缺的，網(wǎng)絡(luò)廣告是網(wǎng)絡(luò)營銷的重要手段。常見的網(wǎng)做、用”一體化原則，建立

頁廣告包括彈出廣告、對聯(lián)廣告、輪播廣告、側(cè)邊欄廣告、完整的在線教學(xué)平臺，建設(shè)

浮動廣告等V因此項目組與企業(yè)廣告策劃相關(guān)部門聯(lián)系，獲豐富的教學(xué)資源，包括課程

得的廣告設(shè)計的效果圖片，在此基礎(chǔ)上準(zhǔn)備將這些廣告按照介紹、課程標(biāo)準(zhǔn)、課程設(shè)計、

需要插入到頁面中。教學(xué)演示文檔、教學(xué)教案、

1.制作網(wǎng)頁彈出廣告實訓(xùn)一體化任務(wù)單、實訓(xùn)內(nèi)

?會使用HTML、CSS的浮動、絕對定位等技術(shù)實現(xiàn)彈出廣告容、習(xí)題與考核內(nèi)容等，更

效果結(jié)構(gòu)與外觀。重要的是所有的教學(xué)環(huán)節(jié)

?會使用Javascript的setlnterval、計時、事件驅(qū)動等技錄制完整的教學(xué)視頻，在重

術(shù)實現(xiàn)網(wǎng)頁彈出廣告功能。點難點環(huán)節(jié)錄制I知識技能

2.制作網(wǎng)頁對聯(lián)廣告拓展教學(xué)視頻。由此，課程

?會使用HTML、CSS的浮動、固定定位等技術(shù)實現(xiàn)對聯(lián)廣告根據(jù)不同學(xué)校、不同教師、

效果結(jié)構(gòu)與外觀。不同生源的需要采取線下

?會使用Javascript.的樣式編程技術(shù)實現(xiàn)網(wǎng)頁對聯(lián)廣告功師徒式教學(xué)、線上線下融合

能。的翻轉(zhuǎn)課堂、線上教學(xué)或混

3.制作網(wǎng)頁輪播廣告合式教學(xué)方法。

?會使用HTML、CSS的浮動、絕對定位等技術(shù)實現(xiàn)輪播廣告

效果結(jié)構(gòu)與外觀。

?會使用Javascript的樣式編程技術(shù)實現(xiàn)網(wǎng)頁輪播廣告功

能。

單元考核評價說明課程考核所占權(quán)重

1.獨立完成學(xué)習(xí)情境中的網(wǎng)頁HTML頁面添加網(wǎng)絡(luò)廣告。

2.完成自己設(shè)計網(wǎng)頁首頁（電商站點、學(xué)習(xí)站點、企業(yè)站點15%

等）的網(wǎng)頁HTML頁面代碼添加網(wǎng)絡(luò)廣告。

拓展和探究性學(xué)習(xí)

在課程平臺提供在線課程，在完整錄制全程教學(xué)視頻的基礎(chǔ)上錄制更多拓展項目視頻，以

使學(xué)生選擇拓展學(xué)習(xí)，進一步提升學(xué)生技能水平。

1.學(xué)習(xí)制作浮動廣告，并在網(wǎng)頁中添加。

2.學(xué)習(xí)制作邊欄廣告，并在網(wǎng)頁中添加。

情境八：為“電商助農(nóng)”電商網(wǎng)頁添加網(wǎng)頁視頻播放器

學(xué)時6其中：理論0學(xué)時，實踐4學(xué)時，一體化2學(xué)時。

學(xué)習(xí)目標(biāo)

1.掌握知識點：

?HTMLVideo元素及相關(guān)屬性。

?CSS的盒模型及相關(guān)屬性的應(yīng)用。

?CSS3的新屬性應(yīng)用。

2.獲得技能點：

?運用Dreamweaver建立網(wǎng)頁視頻播放器告HTML結(jié)構(gòu)，

?運用Dreamweaver和CSS進行網(wǎng)頁視頻播放器外觀設(shè)計。

?運用Dreamweaver和JavaScript實現(xiàn)網(wǎng)頁視頻播放器基本的播放停止功能。

?運用Dreamweaver和JavaScript實現(xiàn)網(wǎng)頁視頻播放器實現(xiàn)播放進程、隨機播放等功能

3.思政融入點：

?凈化網(wǎng)絡(luò)空間，自覺抵制不良網(wǎng)絡(luò)視頻。

?發(fā)揚職業(yè)教育精神，培養(yǎng)自學(xué)能力和終身學(xué)習(xí)的能力，能通過學(xué)習(xí)思考解決工作中遇到

的問題。

學(xué)習(xí)內(nèi)容教學(xué)建議與說明

隨著互聯(lián)網(wǎng)網(wǎng)絡(luò)基礎(chǔ)設(shè)施升級和不斷普及，網(wǎng)

絡(luò)帶寬問題已經(jīng)普遍解決，由此網(wǎng)絡(luò)視頻運用

也越來越廣泛。網(wǎng)頁設(shè)計中視頻元素的地位越

來越高。因此絕大多數(shù)網(wǎng)站建設(shè)中都會植入大

教學(xué)過程應(yīng)體現(xiàn)“教、學(xué)、做、用”一體

量視頻，并在網(wǎng)頁首頁或其他頁面設(shè)計自身個

化原則，建立完整的在線教學(xué)平臺，建設(shè)

性化視頻播放器播放相關(guān)網(wǎng)絡(luò)視頻。基于此，

豐富的教學(xué)資源，包括課程介紹、課程標(biāo)

該企業(yè)的網(wǎng)頁設(shè)計項目組準(zhǔn)備制作個性化是視

準(zhǔn)、謖程設(shè)計、教學(xué)演示文檔、教學(xué)教案、

頻播放器放置在首頁中。

實訓(xùn)一體化任務(wù)單、實訓(xùn)內(nèi)容、習(xí)題與考

1.網(wǎng)頁視頻播放器外觀設(shè)計

核內(nèi)容等，更重要的是所有的教學(xué)環(huán)節(jié)錄

?會使用HTML技術(shù)實現(xiàn)網(wǎng)頁視頻播放器結(jié)構(gòu)。

制完整的教學(xué)視頻，在重點難點環(huán)節(jié)錄制

?會使用CSS計數(shù)設(shè)計視頻播放器外觀、控制

知識技能拓展教學(xué)視頻。由此，課程根據(jù)

按鈕及計時進度條效果。會使用CSS計數(shù)設(shè)計

不同學(xué)校、不同教師、不同生源的需要采

視頻播放器外觀、控制按鈕及計時進度條效果。

取線下師徒式教學(xué)、線上線下融合的翻轉(zhuǎn)

2.網(wǎng)頁視頻播放器功能實現(xiàn)

課堂、線上教學(xué)或混合式教學(xué)方法。

?會使用JavaScript實現(xiàn)網(wǎng)頁播放器的播

放、停止等基本功能。

?使用JavaScript實現(xiàn)網(wǎng)頁播放器的播放進

度呈現(xiàn)、隨機播放功能。

單元考核評價說明課程考核所占權(quán)重

1.獨立完成學(xué)習(xí)情境中的網(wǎng)頁HTML頁面添加

視頻播放器。

2.完成自己設(shè)計網(wǎng)頁首頁（電商站點、學(xué)習(xí)站15%

點、企業(yè)站點等）的網(wǎng)頁HTML頁面代碼添加視

頻播放器。

拓展和探究性學(xué)習(xí)

在課程平臺提供在線課程，在完整錄制全程教學(xué)視頻的基礎(chǔ)上錄制更多拓展項目視頻，以

便學(xué)生選擇拓展學(xué)習(xí)，進一步提升學(xué)生技能水平。學(xué)習(xí)瀏覽器對象屬性和方法的使用，完

善視頻播放器的功能。

情境九：對“電商助農(nóng)”電商網(wǎng)頁進行搜索引擎優(yōu)化(SEO)

學(xué)時4其中：理論0學(xué)時，實踐2學(xué)時，一體化2學(xué)時。

學(xué)習(xí)目標(biāo)

1.掌握知識點：

?網(wǎng)頁關(guān)鍵詞遴選原則，長尾理論、二八法則。

?網(wǎng)頁標(biāo)題命名的基本思想。

?常用的關(guān)鍵詞遴選與排序工具。

2.獲得技能點：

?使用搜索引擎的關(guān)鍵詞分析工具進行網(wǎng)頁關(guān)鍵詞遴選。

?根據(jù)網(wǎng)頁標(biāo)題命名原則優(yōu)化title標(biāo)記中的網(wǎng)頁標(biāo)題。

?在網(wǎng)頁中添加Meta標(biāo)簽，設(shè)置Keywords屬性，添加網(wǎng)頁關(guān)鍵詞。

?在網(wǎng)頁中添加Meta標(biāo)簽，設(shè)置Description屬性，添加網(wǎng)頁描述詞。

?能夠?qū)懽骶W(wǎng)頁軟文和關(guān)鍵詞密度合理的網(wǎng)頁文案。

?使用strong、ins、b等標(biāo)記強調(diào)文窠中關(guān)鍵詞。

3,思政融入點：

?發(fā)揚職業(yè)教育精神，培養(yǎng)自學(xué)能力和終身學(xué)習(xí)的能力，能通過學(xué)習(xí)思考解決工作中遇到

的問題。

?發(fā)揚職業(yè)教育精神，培養(yǎng)自學(xué)能力和終身學(xué)習(xí)的能力，能通過學(xué)習(xí)思考解決工作中遇到

的問題。

學(xué)習(xí)內(nèi)容教學(xué)建議與說明

網(wǎng)頁設(shè)計到這一階段，網(wǎng)頁效果和網(wǎng)頁功能都已經(jīng)實現(xiàn)。但是教學(xué)過程應(yīng)體現(xiàn)“教、

還有一個重要環(huán)節(jié)不能忽視，那就是網(wǎng)頁的搜索引擎優(yōu)化學(xué)、做、用”一體化原

(SEO)o網(wǎng)頁本身是為用戶設(shè)計的，但如果沒有搜索引擎的按則，建立完整的在線教

關(guān)鍵詞排序推薦，用戶能瀏覽到的概率極低?；诖耍撈髽I(yè)學(xué)平臺，建設(shè)豐富的教

的網(wǎng)頁設(shè)計組需要進行頁面的搜索引擎優(yōu)化工作，包括目標(biāo)關(guān)學(xué)資源，包括課程介紹、

鍵詞確定、網(wǎng)頁標(biāo)題優(yōu)化、Meta優(yōu)化、文案優(yōu)化、網(wǎng)頁圖片優(yōu)課程標(biāo)準(zhǔn)、課程設(shè)計、

化、網(wǎng)