本書共11部分,內(nèi)容包括:構(gòu)建網(wǎng)頁的圖文信息、利用表格和內(nèi)聯(lián)框架設(shè)計(jì)規(guī)整的網(wǎng)頁、高效制作風(fēng)格一致的網(wǎng)頁、運(yùn)用“行為”功能提升用戶體驗(yàn)、制作可讓用戶提交信息的表單文檔、實(shí)現(xiàn)與用戶交互的動態(tài)網(wǎng)頁、項(xiàng)目網(wǎng)站部署與展望等。
本教材取消章節(jié)而由技能模塊代替,每個模塊由四個部分組成:
(1)任務(wù)引領(lǐng)。全書包含許多個獨(dú)立的任務(wù),這些任務(wù)采用中、小企業(yè)工程實(shí)例素材,它們分布在每個知識模塊之前,用來引領(lǐng)學(xué)生學(xué)習(xí)該模塊設(shè)定的若干重要知識點(diǎn)。當(dāng)完成這些任務(wù)后,學(xué)生就基本了解了對應(yīng)知識點(diǎn)的作用以及使用方法。
(2)相關(guān)知識。網(wǎng)頁設(shè)計(jì)技術(shù)復(fù)雜而且繁瑣,單純依靠每個模塊中的幾個任務(wù)引領(lǐng)不可能把該模塊重要的知識點(diǎn)涵蓋全面,運(yùn)用也沒有深度!跋嚓P(guān)知識”運(yùn)用簡短的篇幅對相關(guān)的理論知識點(diǎn)進(jìn)行了有效的補(bǔ)充。
(3)項(xiàng)目漸進(jìn)。它是一個比較完整的綜合性實(shí)戰(zhàn)項(xiàng)目,該項(xiàng)目從無到有,循序漸進(jìn)。學(xué)習(xí)完每個模塊后,即可利用相應(yīng)知識點(diǎn)對其進(jìn)行逐步完善,教材學(xué)習(xí)完畢,這個綜合性實(shí)戰(zhàn)項(xiàng)目也就制作完整了,從而使讀者從宏觀上對整個知識結(jié)構(gòu)有了更清晰的認(rèn)識,也增加了教材的可讀性和適用性。
(4)拓展訓(xùn)練。職業(yè)教育的培養(yǎng)應(yīng)該以能力為本位,因此,在每個模塊后面,還精心設(shè)計(jì)了一個圖文形式的網(wǎng)頁設(shè)計(jì)練習(xí),學(xué)生可以依照本模塊所學(xué)知識點(diǎn)將其設(shè)計(jì)制作完成,這樣能夠進(jìn)一步培養(yǎng)學(xué)生開發(fā)網(wǎng)站的實(shí)踐能力和創(chuàng)造能力。
模塊1 認(rèn)識開發(fā)工具,了解基本網(wǎng)頁
任務(wù)引領(lǐng) “世界你好”
1.網(wǎng)站項(xiàng)目開發(fā)流程
2.Dreamweaver的下載與啟動
3.Dreamweaver的操作界面
4.自由擺放的面板組
項(xiàng)目漸進(jìn) 網(wǎng)站項(xiàng)目“我心飛揚(yáng)”之第1階段“溫馨提示”
回味思考
模塊2 構(gòu)建網(wǎng)頁的圖文信息
任務(wù)引領(lǐng)1 “古詩鑒賞”
1.創(chuàng)建網(wǎng)站制作空間
2.設(shè)置網(wǎng)頁文檔屬性
3.修改文字屬性
4.使用項(xiàng)目列表
5.在網(wǎng)頁文檔中插入水平線
6.插入各種符號
任務(wù)引領(lǐng)2 “名車風(fēng)采”
1.在網(wǎng)頁中插入圖像
2.優(yōu)化圖像和段落
3.制作圖標(biāo)響應(yīng)的翻轉(zhuǎn)菜單
4.利用超級鏈接連接相關(guān)網(wǎng)頁
5.利用圖像熱點(diǎn),在一張圖像上設(shè)置多個不同的鏈接
6.設(shè)置文件頭標(biāo)簽
項(xiàng)目漸進(jìn) 網(wǎng)站項(xiàng)目“我心飛揚(yáng)”之第2階段“熱門圖文”
拓展訓(xùn)練 “產(chǎn)品介紹”
回味思考
模塊3 利用表格和內(nèi)聯(lián)框架設(shè)計(jì)規(guī)整的網(wǎng)頁
任務(wù)引領(lǐng)1 “幼兒園食譜”
1.在網(wǎng)頁中應(yīng)用表格
2.設(shè)置表格和單元格屬性
任務(wù)引領(lǐng)2 “黨史學(xué)習(xí)”
1.利用表格對頁面進(jìn)行布局
2.利用表格設(shè)計(jì)特殊頁面布局
3.在表格中插入背景圖像
4.使用“跟蹤圖像”功能輔助布局定位
任務(wù)引領(lǐng)3 “古典名著”
1.利用IFRAME表現(xiàn)框架效果
2.在IFRAME中打開外部網(wǎng)頁文檔
項(xiàng)目漸進(jìn) 網(wǎng)站項(xiàng)目“我心飛揚(yáng)”之第3階段“愛好分享”
拓展訓(xùn)練 “求職網(wǎng)頁”
回味思考
模塊4 在網(wǎng)頁中展示多媒體
任務(wù)引領(lǐng) “點(diǎn)歌臺”
1.媒體文件的概念
2.網(wǎng)頁中調(diào)用音頻
3.網(wǎng)頁中展示視頻
4.在Dreamweaver中插入其他媒體文件
項(xiàng)目漸進(jìn) 網(wǎng)站項(xiàng)目“我心飛揚(yáng)”之第4階段“熱點(diǎn)視頻”
拓展訓(xùn)練 “節(jié)日祝福”
回味思考
模塊5 精致網(wǎng)頁從樣式表開始
任務(wù)引領(lǐng) “產(chǎn)品說明書”
1.理解CSS樣式表
2.改變文字屬性
3.修改超鏈接的顯示風(fēng)格
4.制作列表圖標(biāo)
5.固定背景圖像的位置
項(xiàng)目漸進(jìn) 網(wǎng)站項(xiàng)目“我心飛揚(yáng)”之第5階段“愛好分享”
拓展訓(xùn)練 “保護(hù)環(huán)境衛(wèi)生通告”
回味思考
模塊6 制作移動優(yōu)先、響應(yīng)快速的精美網(wǎng)站
任務(wù)引領(lǐng)1 “包含頁頭和頁腳的‘世界你好!’”
1.為什么推薦Div+CSS布局而非表格(table)布局?
2.Div+CSS布局核心及常用樣式
任務(wù)引領(lǐng)2 “教學(xué)資源下載”
1.Web前端框架
2.Bootstrap的特點(diǎn)
3.Bootstrap的使用
4.Bootstrap屏幕劃分
5.Bootstrap布局
6.Bootstrap組件
7.Bootstrap排版樣式
任務(wù)引領(lǐng)3 “美味漢堡”
1.創(chuàng)建Bootstrap文檔
2.添加Bootstrap組件
3.調(diào)整列的尺寸和使列發(fā)生偏移
項(xiàng)目漸進(jìn) 網(wǎng)站項(xiàng)目“我心飛揚(yáng)”之第6階段“公告”與“輪播”
拓展訓(xùn)練 “我心飛揚(yáng)”首頁布局制作
回味思考
模塊7 高效制作風(fēng)格一致的網(wǎng)頁
任務(wù)引領(lǐng) “散文在線”
1.運(yùn)用保存素材的庫
2.運(yùn)用保存在庫中的項(xiàng)目
3.利用模板功能批量修改或制作網(wǎng)頁
4.基于現(xiàn)有文檔創(chuàng)建模板
項(xiàng)目漸進(jìn) 網(wǎng)站項(xiàng)目“我心飛揚(yáng)”之第7階段“高效制作各頁面”
拓展訓(xùn)練 “流行文學(xué)作品薈萃”
回味思考
模塊8 運(yùn)用“行為”功能提升用戶體驗(yàn)
任務(wù)引領(lǐng) “變臉”
1.Dreamweaver行為的概念和作用
2.認(rèn)識事件
3.認(rèn)識動作
4.事件與行為的對應(yīng)關(guān)系
5.“行為”面板概述
6.常用內(nèi)置JavaScript行為
項(xiàng)目漸進(jìn) 網(wǎng)站項(xiàng)目“我心飛揚(yáng)在”之第8階段“快速鏈接”
拓展訓(xùn)練 “打地鼠”
回味思考
模塊9 制作可讓用戶提交信息的表單文檔
任務(wù)引領(lǐng) “旅游訂購單”1.網(wǎng)頁“交互”的含義2.表單的知識項(xiàng)目漸進(jìn) 網(wǎng)站項(xiàng)目“我心飛揚(yáng)”之第9階段“給我留言”拓展訓(xùn)練 “吧友注冊”設(shè)計(jì)回味思考模塊10 實(shí)現(xiàn)與用戶交互的動態(tài)網(wǎng)頁任務(wù)引領(lǐng)1 “開發(fā)環(huán)境架設(shè)”1.把“我”的個人電腦配置成網(wǎng)站服務(wù)器2.如何在本機(jī)以網(wǎng)站服務(wù)器形式顯示自己的網(wǎng)站?任務(wù)引領(lǐng)2 “用數(shù)據(jù)庫存儲通信錄信息”1.數(shù)據(jù)庫的定義2.數(shù)據(jù)庫的結(jié)構(gòu)3.數(shù)據(jù)類型4.默認(rèn)值任務(wù)引領(lǐng)3 “用網(wǎng)頁添加并顯示通信錄”1.添加和顯示通信錄的實(shí)質(zhì)2.PHP網(wǎng)頁結(jié)構(gòu)3.編碼4.MySQL中數(shù)據(jù)的備份與恢復(fù)項(xiàng)目漸進(jìn) 網(wǎng)站項(xiàng)目“我心飛揚(yáng)”之第10階段“實(shí)時留言板”拓展訓(xùn)練 “日記本”回味思考模塊11 項(xiàng)目網(wǎng)站部署與展望11.1 項(xiàng)目網(wǎng)站最終效果11.2 項(xiàng)目網(wǎng)站部署11.3 項(xiàng)目網(wǎng)站總結(jié)與展望附錄附錄A HTML基礎(chǔ)附錄B CSS基礎(chǔ)
......