《網頁設計技術與應用案例解析》以實戰案例為指引,以理論講解作鋪墊,對網頁設計的方法與技巧進行了講解,并用通俗易懂的語言、圖文并茂的形式對Dreamweaver在網頁設計中的應用進行了全面細致的剖析。 全書共10章,遵循由淺入深、從基礎知識到案例進階的學習原則,對零基礎學網頁設計、網頁設計基本操作、常見網頁元素及應用、網頁超鏈接的應用、網頁中表格的應用、Div CSS布局技術、表單技術、模板與庫、行為技術等內容進行了逐一闡述,最后介紹了網頁設計相關的HTML語言知識。 全書結構合理、內容豐富、易學易懂,既有鮮明的基礎性,也有很強的實用性。《網頁設計技術與應用案例解析》既可作為高等院校相關專業的教學用書,又可作為培訓機構以及網頁設計愛好者的參考書。
網頁是集合了平面設計、動畫、音視頻等元素,承載各種網站應用的平臺。Dreamweaver是Adobe公司旗下一款所見即所得的網頁設計軟件,在網頁設計、互聯網軟件開發等領域應用廣泛。Dreamweaver操作方便、易上手,深受廣大網頁設計從業人員與網頁設計愛好者的喜愛。
Dreamweaver軟件除了在網頁設計方面有它強大的功能性和優越性外,在軟件協作方面也有它的優勢。根據需求,設計者可將Photoshop、Animate等軟件設計好的內容調入Dreamweaver
中進行應用。隨著軟件版本的不斷升級,目前Dreamweaver技術已逐步向智能化、人性化、實用化發展,旨在讓網頁設計師將更多的精力和時間用在創作上,以便給大家呈現出更完美的網頁作品。
內容概述
本書切實從讀者的實際出發,以淺顯易懂的語言和與時俱進的圖示來進行說明,實現理論與實踐并重,同時注重職業能力的培養。
黨的二十大精神貫穿素養、知識、技能三位一體的教學目標,從愛國情懷、社會責任、法治思維、職業素養等維度落實課程思政;提高學生的創新意識、合作意識和效率意識,培養學生精益求精的工匠精神,弘揚社會主義核心價值觀。本書貫徹二十大精神,結合本專業知識點,認真編寫。
全書共分10章,各章的內容如下。
章 內容導讀 難點指數
第1章 主要介紹了網頁設計相關知識、網頁設計常用布局、網頁設計常用軟件及網頁設計在行業中的應用等內容 ★☆☆
第2章 主要介紹了Dreamweaver工作界面、網頁設計常用面板、創建與管理站點及文檔的基本操作等內容 ★★☆
第3章 主要介紹了文本元素的應用、圖像元素的應用及其他多媒體元素等內容 ★★★
第4章 主要介紹了超鏈接的基本概念、創建超鏈接及管理網頁超鏈接等內容 ★★☆
第5章 主要介紹了創建表格、設置表格屬性、編輯表格及導入/導出表格式數據等內容 ★★★
第6章 主要介紹了創建CSS樣式、定義CSS樣式及Div CSS布局基礎等內容 ★★★
第7章 主要介紹了表單的基礎知識、創建表單域、創建文本類表單、創建選項類表單、創建文件域及創建表單按鈕等內容 ★★☆
第8章 主要介紹了創建模板、應用和管理模板及創建與應用庫等內容 ★★★
第9章 主要介紹了行為和事件的基礎知識,常用行為等內容 ★★☆
第10章 主要介紹了HTML5基礎知識、常見標簽的應用、網頁樣式設置,以及頁面動畫效果等內容 ★★★
選擇本書的理由
本書采用案例解析 理論講解 課堂實戰 課后練習 拓展賞析的結構進行編寫,其內容由淺入深,循序漸進,可讓讀者帶著疑問去學習知識,并從實戰應用中激發學習興趣。
(1)專業性強,知識覆蓋面廣。
本書主要圍繞網頁設計行業的相關知識點展開講解,并對不同類型的案例制作進行解析,讓讀者了解并掌握該行業的設計原則與制作要點。
(2)帶著疑問學習,提升學習效率。
本書是先對案例進行解析,然后再針對案例中的重點工具進行深入講解,這樣可讓讀者帶著問題去學習相關的理論知識,從而有效提升學習效率。此外,本書所有的案例都經過精心的設計,讀者可將這些案例應用到實際工作中。
(3)行業拓展,以更高的視角看行業發展。
本書在每章結尾部分都安排了拓展賞析版塊,旨在讓讀者掌握本章相關技能后,還可了解行業中一些有意思的設計方案及設計技巧,從而開拓思維。
(4)多軟件協同,呈現完美作品。
一份優秀的設計方案,通常是由多個軟件共同協作完成的,網頁設計也不例外。在本書中添加了HTML語言基礎協作章節,讀者可以通過HTML代碼直接制作出精彩的網頁效果。
本書的讀者對象
從事網頁設計的工作人員。
高等院校相關專業的師生。
培訓班中學習網頁設計的學員。
對網頁設計有著濃厚興趣的愛好者。
想通過知識改變命運的有志青年。
想掌握更多技能的辦公室人員。
本書由沈佳琪編寫,在編寫過程中力求嚴謹細致,但由于編者水平有限,疏漏之處在所難免,望廣大讀者批評指正。
編者
素材文件 課件、教案、視頻
第1章
零基礎學網頁設計
1.1網頁設計相關知識 2 1.1.1網頁設計專業名詞 2 1.1.2網頁設計流程 3 1.1.3網站建設流程 4 1.2網頁設計常用布局 7 1.3網頁設計常用軟件 8 1.3.1Dreamweaver 8 1.3.2Illustrator 9 1.3.3Photoshop 9 1.4網頁設計在行業中的應用 10 1.4.1網頁設計對應的崗位和行業概況 10 1.4.2網頁設計從業人員應具備的素養 10 課堂實戰 了解網頁和網站 10 課后練習 了解網頁色彩基礎 11 拓展賞析 徐州博物館 12
第2章
網頁設計基本操作
2.1Dreamweaver工作界面 14 2.2網頁設計常用面板 15 2.2.1菜單欄常用菜單命令 15 2.2.2文檔工具欄文檔視圖切換 15 2.2.3通用工具欄常用工具 16 2.2.4標簽選擇器選擇標簽 16 2.2.5屬性面板設置屬性 16 2.2.6面板組常用面板 17 2.3創建與管理站點 18 2.3.1案例解析:創建站點 18 2.3.2創建站點創建本地和遠程站點 20 2.3.3訪問站點編輯站點文件 21 2.3.4編輯站點修改站點屬性 21 2.4文檔的基礎操作 22 2.4.1案例解析:插入Word文檔 22 2.4.2新建文檔創建文檔 24 2.4.3保存文檔保存當前文檔 24 2.4.4打開文檔打開已有文檔 25 2.4.5插入文檔應用已有文檔 25 課堂實戰 創建個人站點 26 課后練習 認識首選項 28 拓展賞析 南京博物院 29
第3章
常見網頁元素及應用
3.1文本元素的應用 32 3.1.1案例解析:制作散文網頁 32 3.1.2創建文本添加文本 36 3.1.3設置網頁中的文本屬性文本屬性設置 37 3.1.4在網頁中插入特殊元素插入命令的使用 38 3.2圖像元素的應用 39 3.2.1案例解析:制作圖像網頁 39 3.2.2圖像常用格式了解圖像 42 3.2.3插入圖像應用圖像 43 3.2.4圖像對齊方式設置圖像對齊 44 3.2.5設置網頁背景圖像設置背景圖 45 3.2.6鼠標經過圖像切換圖像 46 3.2.7編輯圖像修改圖像屬性 47 3.3其他多媒體元素 49 3.3.1視頻元素插入視頻 49 3.3.2音頻元素插入音頻 51 課堂實戰 制作古文網頁 52 課后練習 制作鼠標經過圖像效果 57 拓展賞析 陜西歷史博物館 58
第4章
網頁超鏈接的應用
4.1認識超鏈接 60 4.1.1絕對路徑包括服務器規范在內的完全路徑 60 4.1.2文檔相對路徑本地鏈接 60 4.1.3站點根目錄相對路徑從站點的根文件夾到 4.1.3文檔的路徑 60 4.2創建超鏈接 60 4.2.1案例解析:創建電子郵件鏈接 60 4.2.2文本鏈接帶鏈接的文本 62 4.2.3空鏈接無指向鏈接 63 4.2.4錨點鏈接同一頁面鏈接 64 4.2.5電子郵件鏈接指向電子郵件的鏈接 64 4.2.6腳本鏈接通過鏈接觸發腳本命令 65 4.2.7圖像鏈接在圖像上創建鏈接 65 4.2.8圖像熱點鏈接在圖像部分區域創建熱點鏈接 65 4.3管理網頁超鏈接 65 4.3.1案例解析:設置鏈接自動更新 66 4.3.2自動更新鏈接自動更新改動的超鏈接 66 4.3.3在站點范圍內更改鏈接手動更新鏈接 67 4.3.4檢查站點中的鏈接錯誤檢查站點鏈接 68 課堂實戰 制作書店網頁 68 課后練習 制作國粹特色網頁 76 拓展賞析 秦始皇帝陵博物院 77
第5章
網頁中表格的應用
5.1創建表格 80 5.1.1案例解析:在網頁中添加活動信息表 80 5.1.2認識表格表格相關術語 82 5.1.3插入表格創建表格 82 5.1.4表格基本代碼表格相關代碼 83 5.2設置表格屬性 84 5.2.1案例解析:制作西餐廳網頁 84 5.2.2設置表格屬性調整表格效果 87 5.2.3設置單元格屬性調整單元格 87 5.2.4鼠標經過顏色制作鼠標劃過效果 88 5.2.5表格的屬性代碼表格屬性設置代碼 89 5.3編輯表格 90 5.3.1案例解析:制作花店網頁 91 5.3.2選擇表格選擇表格不同部分 94 5.3.3復制/粘貼表格快速制作相同內容 94 5.3.4添加行和列添加表格行或列 95 5.3.5刪除行和列刪除表格行或列 95 5.3.6合并和拆分單元格豐富表格效果 96 5.4導入/導出表格式數據 96 5.4.1導入表格式數據導入外部表格式數據 96 5.4.2導出表格式數據導出表格 97 課堂實戰 制作影院排片信息網頁 97 課后練習 制作產品展示網頁 102 拓展賞析 蘇州博物館 104
第6章
Div CSS布局技術
6.1創建CSS樣式 106 6.1.1案例解析:美化文本內容 106 6.1.2認識CSS樣式表了解CSS 108 6.1.3CSS設計器設置CSS樣式 110 6.1.4創建CSS樣式表新建CSS樣式表 111 6.2定義CSS樣式 114 6.2.1案例解析:定義旅行社網頁樣式 115 6.2.2類型設置CSS規則定義類型參數 119 6.2.3背景設置CSS規則定義背景參數 119 6.2.4區塊設置CSS規則定義區塊參數 120 6.2.5方框設置CSS規則定義方框參數 120 6.2.6邊框設置CSS規則定義邊框參數 121 6.2.7列表設置CSS規則定義列表參數 121 6.2.8定位設置CSS規則定義定位參數 122 6.2.9擴展設置CSS規則定義擴展參數 123 6.2.10 過渡設置CSS規則定義過渡參數 123 6.3Div CSS布局基礎 124 6.3.1案例解析:制作文具公司網頁 124 6.3.2認識DivDiv簡介 129 6.3.3Div CSS布局優勢Div CSS布局優點 129 6.3.4創建Div新建Div 129 6.3.5盒子模型思維模型 131 課堂實戰 制作幼兒園網頁 133 課后練習 制作建筑公司網頁 141 拓展賞析 上海博物館 142
第7章
表單技術
7.1認識表單 144 7.2創建表單域 144 7.3創建文本類表單 145 7.3.1案例解析:制作登錄界面 145 7.3.2文本創建單行文本域 148 7.3.3文本區域創建多行文本域 148 7.3.4密碼創建密碼域 149 7.4創建選項類表單 150 7.4.1案例解析:制作線上報名表 150 7.4.2單選按鈕創建單選按鈕 152 7.4.3復選框創建復選框 153 7.4.4選擇創建下拉菜單 154 7.5創建文件域 155 7.6創建表單按鈕 155 課堂實戰 制作注冊網頁 156 課后練習 制作問答網頁 161 拓展賞析 安徽博物院 162
第8章
模板與庫
8.1創建模板 164 8.1.1案例解析:創建網頁模板 164 8.1.2創建模板創建模板的不同方式 165 8.1.3可編輯區域可編輯區域的創建 166 8.1.4可選區域可選區域的創建 167 8.2應用和管理模板 168 8.2.1案例解析:應用網頁模板 168 8.2.2模板的應用應用模板 170 8.2.3更新頁面模板修改后更新文檔 171 8.2.4重命名模板修改模板名稱 171 8.2.5刪除模板刪除多余模板 171 8.3創建與應用庫 172 8.3.1創建庫項目創建應用庫 172 8.3.2插入庫項目應用庫項目 172 8.3.3管理庫項目編輯管理庫項目 173 課堂實戰 制作旅行社網頁 174 課后練習 制作景區網站模板并應用 177 拓展賞析 三星堆博物館 178
第9章
行為技術
9.1認識行為 180 9.1.1案例解析:添加網頁彈出信息 180 9.1.2行為了解行為 181 9.1.3事件認識事件 182 9.2常用行為 183 9.2.1案例解析:制作交換圖像效果 183 9.2.2應用行為調節瀏覽器窗口與瀏覽器相關的行為 184 9.2.3應用行為調節圖像與圖像相關的行為 186 9.2.4應用行為顯示文本與文本相關的行為 187 9.2.5應用行為控制表單與表單相關的行為 189 課堂實戰 提高網頁交互性 190 課后練習 制作室內設計網頁 193 拓展賞析 甘肅省博物館 195 第10章 網頁編輯利器之HTML5 10.1認識HTML 198 10.1.1HTML簡介 198 10.1.2HTML的基本結構 198 10.2常見標簽的應用 200 10.2.1案例解析:在網頁中添加文本 200 10.2.2標題文字 201 10.2.3文字字體 202 10.2.4段落換行 202 10.2.5不換行標簽 202 10.2.6圖像標簽 203 10.2.7超鏈接標簽 203 10.2.8列表標簽 204 10.2.9表單標簽 206 10.3網頁樣式設置 207 10.3.1案例解析:段落縮進效果 207 10.3.2字體樣式 208 10.3.3段落樣式 210 10.4頁面動畫效果 212 10.4.1案例解析:模擬星球運轉效果 212 10.4.2實現過渡 217 10.4.3實現動畫 220 課堂實戰 制作簡易網頁布局 224 課后練習 插入網頁圖像 227 拓展賞析 湖北省博物館 228 附錄:網頁設計常用快捷鍵匯總 229 參考文獻 234