xxxfreesexmoves-haodiaocao这里只有精品视频-欧美性受黑人性爽-欧美性受xxxxxx黑人xyx性爽|www.jsyyzsb.com

　本書以實用為原則，每章圍繞知識點儲備、實例演示、任務訓練、知識拓展、單元測試五部分展開，本書內容涵蓋網頁設計概述、網頁基本元素、常用網頁布局、Div+CSS、表單、行為特效、模板和庫、HTML5等。
　　本書可作為計算機相關專業網頁設計與制作的教材，也可供網頁設計愛好者學習參考，尤其適合網頁設計初學者使用。

本書以實用為原則，融"教、學、做"于一體。實例以Dreamweaver CS6為載體，使讀者循序漸進地充分理解并掌握HTML、CSS、JavaScript等的功能與HTML5的前景，為后續課程奠定良好的基礎，并激發學生學習的積極性和主動性。
　　全書結構新穎，每章圍繞知識點儲備、實例演示、任務訓練、知識拓展、單元測試五部分展開。在教學內容的組織、知識點的由簡單到復雜、由易到難、"設計"視圖與"代碼"視圖相結合，使學生循序漸進地、合理地組織學習知識、訓練技能、拓展知識，有興趣、由表及里地學習。

前言
　　本書以實用為原則，融“教、學、做”于一體。實例以DreamweaverCS6為載體，使讀者循序漸進地充分理解并掌握HTML、CSS、JavaScript等的功能與HTML5的前景，為后續課程奠定良好的基礎，并激發學生學習的積極性和主動性。
　　全書結構新穎，每章圍繞知識點儲備、實例演示、任務訓練、知識拓展、單元測試五部分展開。在教學內容的組織、知識點的由簡單到復雜、由易到難、“設計”視圖與“代碼”視圖相結合，使學生循序漸進地、合理地組織學習知識、訓練技能、拓展知識，有興趣、由表及里地學習。
　　本書由重慶航天職業技術學院陳艷平、徐受蓉擔任主編，趙葉青、董明、舒蕾、李怡平擔任副主編。具體編寫分工如下：第1章、5章、8章由陳艷平編寫，第2章由李怡平編寫，第3章由徐受蓉編寫，第4章由趙葉青編寫，第6章由董明編寫，第7章由舒蕾編寫。
　　本書在編寫過程中，參閱了大量的相關教材和專業書籍，在此一并向各位專家及各位參考書籍的編者表示感謝！相關的教學素材可聯系編者郵件發送或在清華大學出版社網站下載。
　　鑒于編者水平有限，書中難免有不足之處，歡迎各位專家和廣大讀者不吝賜教并批評指正。
　　編者

第1章 網頁設計概述 1
1.1 網頁與網站 1
1.1.1 網頁 1
1.1.2 網站 2
1.1.3 網站的工作原理 2
1.1.4 網頁基本構成元素 3
1.2 網頁制作基礎知識 4
1.2.1 網頁的基礎知識 4
1.2.2 網頁制作工具 5
1.2.3 網頁設計與制作的分類 6
1.3 網頁設計的基本流程 6
1.4 創建本地站點 7
1.4.1 Dreamweaver CS6簡介 7
1.4.2 建立本地站點 9
1.4.3 管理本地站點 12
1.4.4 網頁文件的基本操作 13
1.4.5 設置首選參數 15
1.4.6 使用輔助工具 18
1.5 超文本標記語言HTML 20
1.5.1 HTML概述 20
1.5.2 常用HTML標記 21
1.6 實例演示 22
1.6.1 實例情景--創建本地教學
站點 22
1.6.2 實例效果 22
1.6.3 實現方案 22
1.7 任務訓練 23
1.7.1 訓練目的 23
1.7.2 訓練內容 23
1.8 知識拓展 24
單元測試 24
第2章 認識網頁基本元素 26
2.1 文本 26
2.1.1 添加文本 26
2.1.2 設置文本屬性 28
2.1.3 插入特殊文本 32
2.1.4 文本超鏈接 34
2.2 圖像 37
2.2.1 圖像格式 38
2.2.2 插入圖像 39
2.2.3 設置圖像屬性 39
2.2.4 其他圖像元素 40
2.2.5 圖文混排 42
2.2.6 圖像超鏈接 43
2.3 多媒體 45
2.3.1 網頁中的動畫 45
2.3.2 音樂播放功能 47
2.3.3 視頻播放功能 49
2.4 實例演示 50
2.4.1 實例情景--制作風景區
網頁 50
2.4.2 實例效果 50
2.4.3 實現方案 51
2.5 任務訓練 52
2.5.1 訓練目的 52
2.5.2 訓練內容 52
2.6 知識拓展 53
單元測試 53
第3章 認識常用網頁布局 55
3.1 表格 55
3.1.1 插入表格及嵌套表格 56
3.1.2 設置表格和單元格屬性 59
3.1.3 選擇單元格、行或列及表格 60
3.1.4 表格的基本操作 61
3.1.5 表格布局實例 62
3.2 層AP Div 64
3.2.1 創建AP Div 64
3.2.2 AP Div的屬性 66
3.2.3 "AP元素"面板 67
3.2.4 AP Div的重疊與嵌套 68
3.2.5 AP Div的基本操作 70
3.2.6 AP Div布局實例 71
3.3 實例演示 73
3.3.1 實例情景--制作在線作業
系統主頁 73
3.3.2 實例效果 73
3.3.3 實現方案 74
3.4 任務訓練 76
3.4.1 訓練目的 76
3.4.2 訓練內容 76
3.5 知識拓展 78
單元測試 78
第4章 認識Div+CSS布局 79
4.1 Div概述 79
4.1.1 什么是Div 79
4.1.2 網頁中插入Div 81
4.1.3 Div的嵌套 83
4.2 CSS概述 84
4.2.1 什么是CSS 85
4.2.2 創建CSS樣式 85
4.2.3 CSS樣式在網頁中的應用 94
4.3 盒子模型 97
4.3.1 盒子模型概述 97
4.3.2 margin、padding與border 98
4.3.3 塊級元素與內聯元素 103
4.3.4 Div的浮動與定位 105
4.4 常用布局方式 111
4.4.1 居中布局 111
4.4.2 固定寬度布局 113
4.4.3 可變寬度布局 114
4.5 實例演示 116
4.5.1 實例情景--制作在線作業
系統首頁 116
4.5.2 實例效果 116
4.5.3 實現方案 117
4.6 任務訓練 124
4.6.1 訓練目的 124
4.6.2 訓練內容 124
4.7 知識拓展 125
單元測試 126
第5章 認識表單 127
5.1 創建表單 127
5.1.1 表單概述 127
5.1.2 插入表單 128
5.1.3 表單屬性 128
5.2 創建表單對象 129
5.2.1 文本字段 129
5.2.2 隱藏域 131
5.2.3 復選框和復選框組 132
5.2.4 單選按鈕和單選按鈕組 134
5.2.5 列表/菜單 135
5.2.6 跳轉菜單 136
5.2.7 圖像域 137
5.2.8 文件域 137
5.2.9 按鈕 138
5.2.10 標簽 138
5.2.11 字段集 138
5.3 Spry表單驗證 139
5.3.1 Spry驗證文本域 139
5.3.2 Spry驗證文本區域 140
5.3.3 Spry驗證復選框 141
5.3.4 Spry驗證選擇 141
5.3.5 Spry驗證密碼 142
5.3.6 Spry驗證確認 142
5.3.7 Spry驗證單選按鈕組 143
5.4 使用行為驗證表單 144
5.5 實例演示 147
5.5.1 實例情景--制作郵箱注冊
單網頁 147
5.5.2 實例效果 147
5.5.3 實現方案 147
5.6 任務訓練 149
5.6.1 訓練目的 149
5.6.2 訓練內容 150
5.7 知識拓展 151
單元測試 151
第6章 認識行為特效 152
6.1 認識行為 152
6.1.1 行為基本概念 152
6.1.2 "行為"面板 153
6.1.3 添加行為步驟 154
6.1.4 修改行為 155
6.2 使用內置行為 156
6.2.1 交換圖像 156
6.2.2 彈出消息 157
6.2.3 打開瀏覽器窗口 157
6.2.4 轉到URL 159
6.2.5 拖動AP元素 159
6.2.6 設置狀態欄文本 160
6.2.7 改變屬性 161
6.2.8 顯示/漸隱 162
6.2.9 調用JavaScript 163
6.3 實例演示 165
6.3.1 實例情景--用JavaScript
完成行為特效 165
6.3.2 實例效果 165
6.3.3 實現方案 166
6.4 任務訓練 168
6.4.1 訓練目的 168
6.4.2 訓練內容 168
6.5 知識拓展 169
單元測試 169
第7章 認識模板和庫 170
7.1 模板 170
7.1.1 創建模板 170
7.1.2 創建可編輯區域 171
7.1.3 管理模板 172
7.2 庫 176
7.2.1 創建庫文件 177
7.2.2 編輯庫項目 178
7.2.3 為頁面添加庫項目 179
7.3 實例演示 179
7.3.1 實例情景--制作風花雪月
網站 179
7.3.2 實例效果 180
7.3.3 實現方案 180
7.4 任務訓練--模板應用 184
7.4.1 訓練目的 184
7.4.2 訓練內容 184
7.5 知識拓展 185
單元測試 185
第8章 初識HTML5 186
8.1 HTML5概述 186
8.1.1 HTML5簡介 186
8.1.2 HTML5的新特性 186
8.1.3 HTML5的優點 187
8.2 HTML5視頻 187
8.2.1 HTML5視頻簡介 187
8.2.2 HTML5視頻實例 188
8.2.3 使用 DOM控制 190
8.3 HTML5音頻 192
8.3.1 HTML5音頻簡介 192
8.3.2 HTML5音頻實例 193
8.4 初識Canvas 194
8.4.1 Canvas簡介 194
8.4.2 繪制圖形 195
8.4.3 使用圖像 199
8.5 實例演示 201
8.5.1 實例情景--制作七巧板 201
8.5.2 實例效果 201
8.5.3 實現方案 202
8.6 任務訓練 204
8.6.1 訓練目的 204
8.6.2 訓練內容 204
8.7 知識拓展 206
單元測試 206
參考文獻 207

第1章 網頁設計概述
技能目標：
* 掌握網頁與網站的基本概念
* 掌握網頁制作基礎知識
* 掌握站點的創建與管理
* 掌握超文本標記語言HTML
　　
　　在制作網頁之前，應先學會區分網頁與網站，了解其工作原理，認識網頁的基本構成元素、了解網頁制作的基礎知識，在Dreamweaver CS6的工作界面中創建站點對網站進行統一管理，熟悉HTML。
1.1 網頁與網站
　　隨著互聯網的飛速發展，網頁、網站已成為人們日常生活中不可缺少的部分，利用它們，新聞資訊可及時查看，各種物品足不出戶便可購買，親戚朋友可隨時聯系。下面先來了解一下網頁、網站等基本知識。
1.1.1 網頁
　　當在瀏覽器地址欄中輸入網址后，網頁就會呈現在人們的眼前，如輸入http://www.163.com，就會看到如圖1-1所示的網頁。
圖1-1 網易主頁
　　
網頁(Web Page)一般由文字、圖片、超鏈接等元素組成，另外，聲音、視頻、動畫等多媒體元素可以為網頁增添豐富的色彩和動感。網頁是用HTML語言編寫的，通過WWW傳輸，并被Web瀏覽器翻譯成可以顯示出來的集合文本、圖片、聲音和動畫等信息元素的頁面文件。
　　人們在瀏覽網站時，首先訪問的是網站的首頁或主頁，然后才能訪問其他的網頁。首頁一般起歡迎的作用，只有進入網站的超鏈接，通過超鏈接才能訪問網站的主頁。大多數作為首頁的文件名是index、default加上擴展名。主頁是整個網站的導航中心，是網站的鏈接中心。
1.1.2 網站
　　網站(Website)是把包括網頁在內的信息文件通過超鏈接的形式關聯起來而形成的信息文件的集合。開發者通過超鏈接將網站中多個網頁建立聯系，形成一個主題鮮明、風格一致的Web站點。
　　網站是一個文件夾，其中的文件不僅有網頁，還有網站所需要的其他文件或文件夾。網頁是一種頁面文件，用來發布各種信息。網頁是網站的構成要素，是網站信息發布與表現的一種主要形式。
　　通常情況下，網站都有一個主頁，其中包括網站的Logo和導航欄等內容，導航欄包含了指向其他網頁的超鏈接。
1.1.3 網站的工作原理
　　網站發布到Web服務器中，瀏覽者通過瀏覽器向Web服務器發出請求，Web服務器則根據請求把瀏覽者所訪問的網頁傳送到客戶端，顯示在瀏覽器中。一個靜態網站的工作過程歸納為以下4個步驟，工作原理如圖1-2所示。
圖1-2 網站的工作原理
　　(1) 用戶在瀏覽器的地址欄輸入要訪問網站的域名，如http://www.163.com，按Enter鍵觸發這個瀏覽請求，瀏覽器根據域名的IP地址向Web網站服務器發出瀏覽請求。
　　(2) 瀏覽器將請求發送到Web服務器，Web服務器接受這個請求。
　　(3) 若找到網頁，Web服務器從服務器硬盤的指定位置或內存中讀取正確的HTML文件，然后將它發送給請求瀏覽器。
　　(4) 用戶的瀏覽器解析這些HTML代碼并將它顯示出來。
1.1.4 網頁基本構成元素
　　網頁由文本、圖像、多媒體、超鏈接等基本元素構成。
1. 文本(Text)
　　一般情況下，文本在網頁中占了較大比重，是網頁傳遞信息的主要載體。文本的特點是傳遞速度快、信息量大、存儲空間小。在網頁中，可以對文本的字體、大小、顏色、行距等進行設置。用于網頁正文的文字，建議不要使用過多的字體，中文文字一般用宋體，字體大小使用9磅或12像素左右。
2. 圖像(Image)
　　圖像是美化網頁必不可少的元素。網頁上的圖像一般使用JPG格式、GIF格式和PNG格式。網頁中的圖像主要有用于點綴的小圖片、介紹性的照片、代表企業形象或欄目內容的標志性圖片(Logo)、用于宣傳的廣告(Banner)等形式。
　　3. 多媒體(Media)
　　多媒體是網頁中最活躍的元素，創意出眾、制作精美的動畫是吸引瀏覽者眼球的有效方法之一。網頁中可使用的多媒體對象有Flash動畫、音頻、視頻、Java小程序等。但網頁多媒體元素不宜太多，否則會使人眼花繚亂，產生視覺疲勞。
　　4. 超鏈接(Superlink)
　　超鏈接是指從一個網頁指向另一個目的端的鏈接關系。這個"目的端"通常是一個網頁、相同網頁上的不同位置、一個下載的文件、一幅圖片、一個E-mail地址等。超鏈接的對象可以是文字、按鈕或圖片。鼠標指針指向超鏈接位置時，會變成小手形狀。網頁中的導航欄是一組超鏈接，用于引導瀏覽者查看站點的不同頁面或欄目。
　　5. 表格(Table)
　　表格主要用于網頁內容的布局，組織整個網頁的外觀，也可用來分門別類地顯示數據信息。當前，網頁設計中更多使用Div+CSS技術實現網頁布局的控制。
　　6. 表單(Form)
　　表單是用來收集訪問者信息的區域。表單由不同功能的表單域組成，最簡單的表單包含一個輸入區域和一個提交按鈕。根據功能與處理方式的不同，通常將表單分為用戶反饋表、留言簿、用戶注冊和搜索等。
　　7. 頁面尺寸
　　在設計網頁時，要確定網頁的尺寸大小。網頁尺寸和顯示器大小及分辨率有關，由于網頁的顯示無法突破顯示器的顯示范圍，所以網頁的顯示范圍也受到限制。原則上，頁面長度不超過3屏，頁面寬度不超過1屏。一般情況下，計算機分辨率為1024px?768px時，建議頁面尺寸設計為1000px?600px。但隨著寬屏顯示器的流行，頁面寬度逐漸超過"習慣"參數，為每個顯示器定制專屬的頁面也不太可能，故建議網頁兩邊預留20px左右的空白。
1.2 網頁制作基礎知識
　　在制作網頁前，需要先了解和掌握有關網頁的基礎知識、網頁制作工具和網頁設計與制作的分類等。
1.2.1 網頁的基礎知識
1. Internet
　　Internet，中文正式譯名為因特網，又叫作國際互聯網，是由使用公用語言互相通信的計算機連接而成的全球網絡。一旦連接到它的任何一個節點上，就意味著計算機已經連入Internet網了。Internet的用戶目前已經遍及全球，有幾十億人在使用Internet，并且它的用戶數還在逐年上升。
2. WWW
　　WWW(World Wide Web)也稱為萬維網。萬維網只是互聯網所能提供的服務之一，是依靠互聯網運行的一項服務。萬維網基于超文本結構體系，由大量的電子文檔組成，這些電子文檔存儲在世界各地的計算機上，通過各種類型的超鏈接連接在一起，目的是讓不同地方的人使用一種簡單的方式共享信息資源。
　　從技術上講，WWW包含3個基本組成部分：URL(統一資源定位器)、HTTP(超文本傳輸協議)、HTML(超文本標記語言)。
3. URL
　　URL(Uniform Resource Locator，統一資源定位器)是一個指定Internet上資源位置的標準，也就是人們常說的網址，如http://www.163.com。
4. W3C
　　W3C(World Wide Web Consortium，全球萬維網聯盟)是國際著名的標準化組織，該聯盟于1994年10月在麻省理工學院計算機科學實驗室成立，至今已發布近百項相關萬維網的標準，對萬維網發展做出了杰出的貢獻。
5. HyperText
　　HyperText(超文本)是一種可以指向其他文件的文字或圖片，這種功能稱為超鏈接(HyperLink)。超文本是一種組織信息的方式，它通過超鏈接將網頁中的文字或圖片與其他對象相關聯，為人們查找信息提供了一種快捷方式。
6. HTTP
　　HTTP(HyperText Transfer Protocol，超文本傳輸協議)是互聯網上應用最為廣泛的一種網絡協議。所有的WWW文件都必須遵守這個標準。
7. HTML
　　HTML(HyperText Markup Language，超文本標記語言)是Internet中編寫網頁的主要標識語言。網頁文件也可以稱為HTML文件，其擴展名為.html或.htm。HTML文件是純文本文件，可以使用任何能夠生成TXT類型源文件的文本編輯器來產生超文本標記語言文件，只修改文件后綴即可。
8. XHTML
　　XHTML(eXtensible HyperText Markup Language，可擴展超文本標記語言)是一種基于XML的標記語言，看起來與HTML有些相像，但XHTML是一種增強的、結合部分XML強大功能及大多數HTML簡單特性的超文本標記語言，它的可擴展性和靈活性能適應未來網絡應用更多的需求。
9. CSS
　　CSS(Cascading Style Sheet，層疊樣式表)用于對網頁布局、字體、顏色、背景和其他圖文效果實現精確的控制。CSS可以一次性控制多個文檔中的文本，并且可隨時改動CSS的內容，以自動更新文本的樣式。
10. JavaScript
　　JavaScript是一種腳本語言，可以和HTML語言混合在一起使用，用來實現在一個Web頁面中與用戶的交互作用。
11. Browser與Server
　　Browser即瀏覽器，Server即服務器，連在一起即為常見的B/S。用戶通過瀏覽器鏈接到Web服務器上，才能閱讀Web服務器上的文件。信息的提供者建立好Web服務器，用戶使用瀏覽器可以取得服務器中的文件及其他信息。
1.2.2 網頁制作工具
　　在網頁設計制作中，經常會涉及圖像處理、動畫制作、網站發布等問題。目前，此類相關專業軟件功能越來越完善、操作越來越簡單，應用也非常廣泛。
　　制作網頁的常用工具有以下幾種。
* 制作網頁的專門工具：Dreamweaver和FrontPage。
* 圖像處理工具：Photoshop和Fireworks。
* 動畫制作工具：Flash和Swish。
* 圖標制作工具：小榕圖標編輯器和超級圖標。
* 抓圖工具：HyperSnap、HyperCam和Camtasia Studio。
* 文本文件編輯工具：記事本和UltraEdit。
* 全景圖片制作工具：Cool360。
* 網站發布工具：CuteFTP。
1. Dreamweaver
　　Dreamweaver CS6是世界頂級軟件廠商Adobe推出的一套擁有可視化編輯界面，用于制作并編輯網站和移動應用程序的網頁軟件。由于它支持代碼、拆分、設計、實時視圖等多種方式來創作、編寫和修改網頁，對于初級人員，無須編寫任何代碼就能快速創建Web頁面。
2. Photoshop
　　Photoshop是Adobe公司旗下最為出名的圖像處理軟件之一，其界面友好，支持多種圖像格式以及多種色彩模式，還可以任意調整圖像的尺寸、分辨率及畫布大小。Photoshop可用于設計網頁整體效果圖、網頁Logo、網頁Banner和網頁中廣告等圖像。
3.Flash
　　Flash是一種常用的動畫制作軟件，用于制作和編輯具有較強交互性的矢量動畫，可以方便地生成.swf動畫文件，此文件可嵌入HTML。Flash動畫已成為網站中必不可少的元素，為網頁增添生動色彩，以吸引更多的瀏覽者。
4.Fireworks
　　Fireworks是一個將矢量圖形處理和點陣圖形處理合二為一的專業化圖形設計軟件。它可以對各種圖像文件進行編輯和處理，也可以直接生產包含HTML和JavaScript代碼的動態圖像。
1.2.3 網頁設計與制作的分類
　　網頁設計與制作一般分為靜態網頁制作和動態網頁制作兩類。
1. 靜態網頁的設計與制作
　　靜態網頁是標準的HTML文件，它的文件擴展名是.htm、.html，可以包含文本、圖像、聲音、Flash動畫、客戶端腳本和ActiveX控件及Java小程序等。在HTML格式的網頁中，也可出現各種動態的效果，如GIF格式的動畫、Flash動畫和滾動字幕等，在視覺上是"動態效果"。靜態網頁僅僅用來被動發布信息，而不具有交互功能。
2. 動態網頁的設計與制作
　　動態網頁是用ASP、JSP、PHP等網絡編程語言編寫的交互式網頁，與后臺數據庫進行交互，進行數據傳遞。動態網頁的表現形式有論壇、留言板或網站后臺管理頁(在網頁后臺進行信息添加和修改，前臺則自動更新)等，常常以.aspx、.asp、.jsp、.php、.perl等形式為后綴，并且在動態網頁網址中有一個標志性的符號"？"。
1.3 網頁設計的基本流程
　　網站由許多網頁組成，若想使網頁吸引眼球、受人歡迎，要求網站的內容、結構、顏色、美工等有一個很好的規劃。建立一個網站的流程如下。
1. 確定網站的主題
　　設計網站的第一步就是要確定網站的主題，根據客戶要建設的網站以及相關要求確定網站的類型，網站的功能要求、內容要求、色彩要求、欄目要求、性能要求、布局要求、操作要求等，最終形成用戶的需求分析。
2. 網站的總體規劃
　　掌握客戶的需求后，便要對網站項目進行總體的規劃性設計，包括網站設計工具、內容和色調、版面布局設計、網站欄目設置、界面設計和制定網站建設規劃等。
3. 制作網頁
　　(1) 收集網站素材資料。網站制作之前，收集文本、圖片、視頻、音頻等素材，將來作為網站的Logo、廣告欄、導航欄等頁面元素。
　　(2) 確定網頁版面布局，注意多個頁面風格的一致性。
　　(3) 制作網頁。利用網頁制作工具制作靜態的網頁與動態的網頁。
　　(4) 添加網頁特效。利用HTML語言、Flash動畫、層等制作特效，增加網頁的藝術效果。
4. 測試和發布網站
　　網站做好后，要對網站進行測試，包括網站的瀏覽器兼容性和站點超鏈接完好性。通過客戶驗收后，提供給客戶發布到網上，供其使用。
5. 網站的更新與維護
　　網站發布后，在合同有效期內，根據客戶的要求，對網站進行針對性地修改，定期維護、更新內容和板塊，定期做好網站數據備份工作。