《網(wǎng)頁(yè)設(shè)計(jì)》以藝術(shù)設(shè)計(jì)為前提,以HTML、CSS語(yǔ)言為技術(shù)手段,主要針對(duì)藝術(shù)類專業(yè)的學(xué)生進(jìn)行網(wǎng)頁(yè)實(shí)操實(shí)踐講解,力圖使學(xué)生在規(guī)定課時(shí)之內(nèi),能有效地學(xué)習(xí)和掌握目前網(wǎng)頁(yè)設(shè)計(jì)的理論與技能,同時(shí)對(duì)理工科如計(jì)算機(jī)等專業(yè)的學(xué)生起到開闊眼界、優(yōu)勢(shì)互補(bǔ)的指導(dǎo)作用,達(dá)到探索將技術(shù)與藝術(shù)相融合的目的。
網(wǎng)頁(yè)設(shè)計(jì)是一門綜合了網(wǎng)頁(yè)界面設(shè)計(jì)、用戶體驗(yàn)、程序設(shè)計(jì)等各方面知識(shí)技能的綜合實(shí)踐性課程。目前,網(wǎng)頁(yè)設(shè)計(jì)課程主要有兩種形式:一種是以計(jì)算機(jī)專業(yè)為主,通過編程、腳本設(shè)計(jì),以HTML、CSS、JavaScript、PHP等語(yǔ)言為載體實(shí)現(xiàn);另一種是以藝術(shù)設(shè)計(jì)為前提,通過預(yù)先對(duì)網(wǎng)頁(yè)界面色彩、版式等進(jìn)行設(shè)計(jì),然后利用一些所見即所得的網(wǎng)頁(yè)設(shè)計(jì)軟件實(shí)現(xiàn)。兩種教學(xué)方式各有優(yōu)勢(shì),但局限性也不少。
鑒于此,我們組織和編寫了《網(wǎng)頁(yè)設(shè)計(jì)》一書。本教材以藝術(shù)設(shè)計(jì)為前提,以HTML、CSS語(yǔ)言為技術(shù)手段,主要針對(duì)藝術(shù)類專業(yè)的學(xué)生進(jìn)行網(wǎng)頁(yè)實(shí)操實(shí)踐講解,力圖使學(xué)生在規(guī)定課時(shí)之內(nèi),能有效地學(xué)習(xí)和掌握目前網(wǎng)頁(yè)設(shè)計(jì)的理論與技能,同時(shí)對(duì)理工科如計(jì)算機(jī)等專業(yè)的學(xué)生起到開闊眼界、優(yōu)勢(shì)互補(bǔ)的指導(dǎo)作用,達(dá)到探索將技術(shù)與藝術(shù)相融合的目的。
本教材重在實(shí)踐,通過具體的案例進(jìn)行講解和分析,并在實(shí)踐應(yīng)用前把案例所需的基礎(chǔ)常識(shí)進(jìn)行講解歸納。這樣設(shè)置的原因和好處有兩點(diǎn):
一是網(wǎng)頁(yè)設(shè)計(jì)是一門綜合知識(shí)集聚的課程,不但需要清晰了解互聯(lián)網(wǎng)基礎(chǔ)知識(shí),而且還涉及大量行業(yè)知識(shí)、計(jì)算機(jī)軟件相關(guān)技術(shù)基礎(chǔ)知識(shí)、案例設(shè)計(jì)中的流程基礎(chǔ)知識(shí)等內(nèi)容。如果單純將基礎(chǔ)知識(shí)放在前面章節(jié)介紹,勢(shì)必讓學(xué)生產(chǎn)生畏難和迷茫情緒。從心理學(xué)角度來講,一個(gè)有趣又不失嚴(yán)謹(jǐn)?shù)哪夸洠瑫?huì)讓學(xué)生保持良好的心態(tài)來完成最終的自主學(xué)習(xí),這也是我們所提倡的翻轉(zhuǎn)課堂教學(xué)形式的有力支持。
第一單元 “一覽了然”——網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)
第一課 網(wǎng)頁(yè)設(shè)計(jì)規(guī)范
1.網(wǎng)頁(yè)的尺寸
2.網(wǎng)頁(yè)的色彩
3.網(wǎng)頁(yè)的文字
4.網(wǎng)頁(yè)的導(dǎo)航條
5.網(wǎng)頁(yè)的“統(tǒng)一”設(shè)計(jì)
第二課 網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)
1.網(wǎng)頁(yè)布局設(shè)計(jì)
2.視差滾動(dòng)設(shè)計(jì)
3.無限滾動(dòng)加載
4.全屏大圖設(shè)計(jì)
5.扁平化模式
6.三維動(dòng)態(tài)效果
第三課 網(wǎng)站類型
1.門戶網(wǎng)站
2.交易類網(wǎng)站
3.專業(yè)網(wǎng)站
4.論壇
5.政府網(wǎng)站
6.企業(yè)網(wǎng)站
7.個(gè)人博客
第二單元 “水清石現(xiàn)”——網(wǎng)頁(yè)設(shè)計(jì)流程與推廣
第四課 設(shè)計(jì)流程
1.客戶需求
2.收集資料
3.網(wǎng)站策劃
4.原型設(shè)計(jì)
5.界面設(shè)計(jì)
6.合成效果
7.測(cè)試修改
8.安全維護(hù)
第五課 發(fā)布推廣
1.域名及申請(qǐng)方式
2.網(wǎng)站發(fā)布
3.網(wǎng)站推廣
第三單元 “知行合一”——網(wǎng)頁(yè)設(shè)計(jì)實(shí)現(xiàn)
第六課 工具
1.網(wǎng)頁(yè)瀏覽器
2.網(wǎng)頁(yè)設(shè)計(jì)軟件
第七課 代碼
1.HTML超文本標(biāo)識(shí)語(yǔ)言
2.CSS層疊樣式表
3.其他計(jì)算機(jī)編程語(yǔ)言
第八課 界面設(shè)計(jì)
1.網(wǎng)頁(yè)構(gòu)成元素
2.Photoshop的使用步驟
第四單元 “天外有天”——網(wǎng)頁(yè)設(shè)計(jì)鑒賞
第九課 學(xué)生作品解析
第十課 國(guó)外優(yōu)秀網(wǎng)頁(yè)賞析
第五單元 “神會(huì)心融”——綜合實(shí)例
第十一課 “本心”網(wǎng)站——從策劃到樣稿誕生
1.網(wǎng)站前期策劃
2.網(wǎng)站草圖繪制
3.網(wǎng)頁(yè)界面設(shè)計(jì)
第十二課 “巫溪鹽文化”網(wǎng)站——從樣稿到網(wǎng)頁(yè)實(shí)現(xiàn)
1.完成網(wǎng)頁(yè)切片
2.切片編輯
3.保存
4.效果展示
5.網(wǎng)頁(yè)交互
6.代碼設(shè)置
致謝