基于Web標準的網頁設計與制作(微課版)
定 價:¥59.9
中 教 價:¥35.94 (6.00折)
庫 存 數: 8
叢 書 名:高等院校計算機基礎教育課程體系特色教材系列
本書內容涵蓋HTML 5、CSS 3、JavaScript、jQuery和Vue.js等各種網頁設計與制作技術,在敘述有關原理時安排大量的相關實例。本書分為8章,內容包括網頁設計與網站開發概述,HTML 5、CSS語法基礎、CSS盒子模型、CSS布局、網站開發過程與環境配置、Photoshop、JavaScript及其框架。本書面向工程實際,強調原理性與實用性。本書適合作為高等院校各專業網頁設計或Web前端開發等課程的教材,也可作為網頁設計與制作的培訓類教材,還可供網站設計和開發人員參考使用。
本書全面介紹了使用HTML5和CSS3技術進行網頁設計與制作,尤其對CSS樣式和布局設計進行了重點闡述,在敘述有關原理時安排了大量的相關實例。本書分為8章,內容包括網頁設計與網站開發概述,HTML基礎、CSS樣式設計、CSS布局設計、響應式網頁設計、表格與表單設計、JavaScript與jQuery入門、BootStrap響應式網站開發等。本書適合作為高等院校各專業網頁設計或Web前端開發等課程的教材,也可作為網頁設計與網站制作的培訓類教材,還可供網頁設計和開發人員參考使用。本書體系結構完整、系統性強,邏輯嚴謹,層次分明,可讀性、啟發性和操作性都非常強。
近20年來,互聯網領域涌現出大量創新技術和產品,使得互聯網領域的產品開發成為眾多年輕人渴望學習的領域。互聯網開發的技術基礎仍然是網頁設計,網頁設計技術歷經20多年始終在快速發展變化。網頁設計也是高校很多專業學生的一項技能,就業市場對網頁設計的人才需求量很大。網頁設計技能之所以重要,是因為網頁設計涉及界面設計與交互,個性化要求很高,導致網頁設計項目的重用性水平很低,這使得網頁設計人才需要掌握更多相關領域的知識,網頁設計者需要具備良好的自學能力和強烈的興趣。網頁設計與制作這門課程的特點是入門比較簡單,但它的知識結構龐雜,想成為一名優秀的網頁設計師,需要較長時間的理論學習和大量的實踐操作及項目實訓經驗。學習網頁設計有兩點最重要: 一是務必重視對原理的掌握;二是在理解原理的基礎上一定要多練習,多實踐,通過練習和實踐發現實際問題。本書在編寫過程中注重原理和實用,這表現在所有的實例都是按照其涉及的原理分類,而不是按照應用的領域分類,將這些實例編排在原理講解之后,就能使讀者迅速理解原理的用途。同時,由于加深了對原理的理解,因此可以對實例舉一反三。目前,網頁設計的知識體系結構以HTML 5、CSS 3、JavaScript為框架,這3種語言分別定義了網頁的結構、表現和行為,Web標準的含義就是將網頁劃分為結構、表現和行為,各部分相對獨立,盡管Web標準已成為當今網頁設計領域的一種共識,不被經常提起,但對于初學者來說,理解并遵循Web標準設計網頁對快速掌握網頁設計技能是有重要意義的。在網頁設計各種語言中,CSS是核心。為此,本書在編寫時注重培養學生興趣,在章節安排上將CSS的內容作為重點,按照CSS的知識體系將CSS的內容分為3章。這是因為只有接觸CSS,學生才會領會網頁設計課程的樂趣。其次,考慮到初學者以前并沒接觸過任何網頁設計語言,本書將傳統CSS知識和CSS 3的內容進行統一編排,幫助讀者更容易地系統掌握CSS的傳統技術和新技術。網頁設計是技術和藝術的結合,因此網頁的風格設計和色彩搭配也是網頁初學者應當重點掌握的內容,考慮到大多數初學者沒有任何平面設計基礎,本書在編寫時安排了色彩的基本原理,網頁色彩的搭配等內容,同時安排了Photoshop章節,幫助初學者掌握使用該軟件進行網頁圖像的合成、網頁效果圖的制作等技能。為了便于讀者閱讀和減少篇幅,本書采用精簡代碼的編排方式,讀者一般都能夠容易地將其還原成完整代碼,同時每個示例都標有序號(例如,例34對應的源代碼文件就是34.html),讀者能夠容易地在配套源代碼中找到完整代碼并能直接運行。本書的教學大概需要64學時,其中實驗學時不少于16學時,如果學時量不足,則可以主要講授第1~5章的內容。本書為使用本書作為教材的教師提供教學用多媒體課件、實例源文件和實驗大綱,可登錄清華大學出版社官網免費下載。書中提供了有關重點和難點內容的微課視頻,讀者掃描書中二維碼即可觀看。本書由唐四薪、唐瓊、李浪編著,唐四薪編寫了第3~8章的內容,唐瓊編寫了第1章和第2章的部分內容。李浪編寫了第2章的部分內容。由于編者水平和教學經驗有限,書中錯誤和不妥之處在所難免,歡迎廣大讀者和同行批評指正。
編者2023年9月
第1章網頁設計與網站開發概述11.1網頁設計與Web前端開發11.1.1網頁的概念和本質11.1.2網頁設計的兩個基本問題21.1.3網頁結構語言HTML31.2網站的創建和制作流程41.2.1網站的特征51.2.2網站的開發步驟51.2.3網站的開發工具71.2.4在DW中建立站點81.3Web服務器與瀏覽器91.3.1Web服務器的作用91.3.2瀏覽器的種類和作用101.4URL與域名11習題13第2章HTML 5142.1HTML概述142.1.1HTML文檔的結構142.1.2DW的開發界面152.1.3使用DW新建HTML文件162.1.4HTML標記162.1.5常見的HTML標記及屬性172.2創建文本和圖像182.2.1創建文本和列表182.2.2插入圖像202.3利用DW代碼視圖提高效率212.3.1代碼提示212.3.2代碼快速定位222.3.3DW中的常用快捷鍵222.4創建超鏈接232.4.1超鏈接標記232.4.2絕對URL與相對URL252.4.3超鏈接的種類272.4.4超鏈接目標的打開方式282.4.5超鏈接制作的原則282.4.6DW中超鏈接屬性面板的使用292.5插入多媒體元素及嵌入網頁292.5.1HTML 5的視音頻功能292.5.2嵌入式框架標記312.6創建表格322.6.1表格標記322.6.2行和單元格標記342.6.3特殊效果表格的制作362.7創建表單382.7.1標記及其屬性382.7.2標記402.7.3和標記432.7.4多行文本域標記432.7.5表單數據的傳遞過程442.7.6表單中的按鈕452.7.7表單的輔助標記462.7.8HTML 5新增的表單標記和屬性462.8HTML 5的改進502.8.1HTML 5新增的標記502.8.2HTML 5語法的改進512.8.3HTML 5的繪圖功能522.8.4HTML元素的分類542.9HTML頭部標記56習題57第3章CSS語法基礎593.1CSS基礎593.1.1CSS的語法593.1.2在HTML中引入CSS的方法603.1.3選擇器的分類623.1.4CSS文本修飾643.2CSS的特性653.2.1CSS的層疊性653.2.2CSS的繼承性673.2.3選擇器的組合683.3CSS高級選擇器713.3.1關系選擇器723.3.2屬性選擇器733.3.3偽類選擇器743.3.4使用過渡屬性配合動態偽類效果773.3.5偽元素選擇器803.4CSS設計和書寫技巧823.4.1CSS樣式總體設計原則823.4.2DW對CSS的可視化編輯支持833.4.3CSS的值和單位853.4.4網頁中的字體863.4.5字體圖標技術873.5Web標準893.5.1傳統HTML的缺點893.5.2Web標準的含義903.5.3Web標準的優勢92習題92第4章CSS盒子模型944.1盒子模型及其屬性944.1.1盒子模型概述944.1.2邊框border屬性954.1.3圓角borderradius屬性974.1.4圖像邊框borderimage屬性994.1.5padding和margin屬性1004.1.6boxsizing屬性1024.2標準流下的定位及應用1024.2.1標準流下的定位原則1024.2.2margin合并現象1044.2.3盒子模型的應用1064.2.4Chrome瀏覽器的調試功能1084.3背景的運用1094.3.1CSS的背景屬性1094.3.2背景的基本運用技術1124.3.3滑動門技術1154.3.4背景圖像的翻轉1194.3.5傳統圓角效果1204.4CSS 3樣式美化功能1214.4.1陰影和發光效果1214.4.2漸變效果1244.4.3描邊效果1274.4.4遮罩效果1274.5變形與動畫效果1294.5.1平面變形效果1294.5.23D變換效果1324.5.3animation動畫效果136習題138第5章CSS布局1405.1浮動1405.1.1盒子浮動后的特點1405.1.2清除浮動元素的影響1425.1.3清除浮動影響的方法1435.2浮動的應用舉例1455.2.1圖文混排及首字下沉1455.2.2水平導航條1475.2.3新聞欄目框1475.2.4微博對話框1505.3相對定位1515.3.1定位屬性和偏移屬性1515.3.2相對定位的特點1515.3.3相對定位的應用1525.4絕對定位和固定定位1545.4.1絕對定位1545.4.2絕對定位的應用1565.4.3固定定位1635.4.4與定位屬性有關的CSS屬性1645.4.5overflow屬性1665.4.6verticalalign屬性1675.5CSS分欄布局1685.5.1分欄布局的種類1695.5.2網頁居中的方法1705.5.3131版式網頁布局1705.5.4121可變寬度布局1735.5.5CSS兩列布局案例1765.5.6HTML 5文檔結構標記1805.5.7HTML 5網頁布局案例1815.6CSS 3新增的布局方式1845.6.1彈性盒布局1845.6.2分欄布局188習題190第6章網站開發過程與環境配置1926.1網站開發的過程1926.1.1基本任務和角色1926.1.2網站開發過程的各環節1946.2網站的風格與色彩設計1986.2.1網站風格設計的基本原則1986.2.2色彩的模式1996.2.3色彩的特質與心理感覺2016.2.4網頁中色彩的角色2056.2.5色彩的對比和調和2066.2.6網頁中色彩搭配的原則2076.2.7網頁版式設計2086.3網站的環境準備2116.3.1架設網站的基本條件2126.3.2配置主機空間和域名2126.3.3上傳網站和網站備案213習題213第7章Photoshop2157.1Photoshop基礎2157.1.1矢量圖和位圖的概念2157.1.2認識Photoshop的界面2167.1.3新建、打開和置入文件2177.1.4修改圖像和畫布大小2187.2編輯位圖2197.2.1圖層及柵格化圖層2197.2.2創建和取消選區2207.2.3圖層的變換和透視2227.3繪制矢量圖形2237.3.1創建矢量圖形2237.3.2微信圖標的制作2247.4編輯和修飾文本2267.4.1文本編輯和修飾的過程2277.4.2將文本附加到路徑2287.5蒙版2297.5.1創建剪貼蒙版2297.5.2創建位圖蒙版2317.6切片及導出2337.6.1切片的作用2337.6.2切片的基本操作2347.6.3切片操作的案例235習題238第8章JavaScript及其框架2408.1JavaScript的代碼結構2408.2JavaScript的事件編程2428.2.1JavaScript語言基礎2428.2.2常用JavaScript事件2428.2.3事件監聽程序2438.3JavaScript DOM編程2458.3.1動態效果的實現2458.3.2獲取指定元素2468.3.3訪問元素的CSS屬性2478.3.4訪問元素的內容2488.4使用瀏覽器對象2498.5jQuery基礎2528.5.1jQuery的功能和使用2528.5.2jQuery中的$2538.5.3jQuery對象與DOM對象2568.5.4jQuery的選擇器2588.5.5jQuery的事件綁定2598.5.6jQuery中的常用方法2598.5.7jQuery應用舉例2608.6Vue基礎2638.6.1簡單的Vue程序2638.6.2Vue綁定數據實現動態效果2658.6.3vif和vfor指令268習題272參考文獻274