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