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