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