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