|
關(guān)于我們
 書單推薦 新書推薦 |
網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（高職高專立體化教材計(jì)算機(jī)系列） 
定 價(jià)：29 元 叢書名：高職高專立體化教材 計(jì)算機(jī)系列
9 7 4 8 4 7 6 3 9 0 8 2 9 
本書以實(shí)用為原則，每章圍繞知識(shí)點(diǎn)儲(chǔ)備、實(shí)例演示、任務(wù)訓(xùn)練、知識(shí)拓展、單元測(cè)試五部分展開(kāi)，本書內(nèi)容涵蓋網(wǎng)頁(yè)設(shè)計(jì)概述、網(wǎng)頁(yè)基本元素、常用網(wǎng)頁(yè)布局、Div+CSS、表單、行為特效、模板和庫(kù)、HTML5等。
本書可作為計(jì)算機(jī)相關(guān)專業(yè)網(wǎng)頁(yè)設(shè)計(jì)與制作的教材，也可供網(wǎng)頁(yè)設(shè)計(jì)愛(ài)好者學(xué)習(xí)參考，尤其適合網(wǎng)頁(yè)設(shè)計(jì)初學(xué)者使用。
本書以實(shí)用為原則，融"教、學(xué)、做"于一體。實(shí)例以Dreamweaver CS6為載體，使讀者循序漸進(jìn)地充分理解并掌握HTML、CSS、JavaScript等的功能與HTML5的前景，為后續(xù)課程奠定良好的基礎(chǔ)，并激發(fā)學(xué)生學(xué)習(xí)的積極性和主動(dòng)性。
全書結(jié)構(gòu)新穎，每章圍繞知識(shí)點(diǎn)儲(chǔ)備、實(shí)例演示、任務(wù)訓(xùn)練、知識(shí)拓展、單元測(cè)試五部分展開(kāi)。在教學(xué)內(nèi)容的組織、知識(shí)點(diǎn)的由簡(jiǎn)單到復(fù)雜、由易到難、"設(shè)計(jì)"視圖與"代碼"視圖相結(jié)合，使學(xué)生循序漸進(jìn)地、合理地組織學(xué)習(xí)知識(shí)、訓(xùn)練技能、拓展知識(shí)，有興趣、由表及里地學(xué)習(xí)。
前言
本書以實(shí)用為原則，融“教、學(xué)、做”于一體。實(shí)例以DreamweaverCS6為載體，使讀者循序漸進(jìn)地充分理解并掌握HTML、CSS、JavaScript等的功能與HTML5的前景，為后續(xù)課程奠定良好的基礎(chǔ)，并激發(fā)學(xué)生學(xué)習(xí)的積極性和主動(dòng)性。 全書結(jié)構(gòu)新穎，每章圍繞知識(shí)點(diǎn)儲(chǔ)備、實(shí)例演示、任務(wù)訓(xùn)練、知識(shí)拓展、單元測(cè)試五部分展開(kāi)。在教學(xué)內(nèi)容的組織、知識(shí)點(diǎn)的由簡(jiǎn)單到復(fù)雜、由易到難、“設(shè)計(jì)”視圖與“代碼”視圖相結(jié)合，使學(xué)生循序漸進(jìn)地、合理地組織學(xué)習(xí)知識(shí)、訓(xùn)練技能、拓展知識(shí)，有興趣、由表及里地學(xué)習(xí)。 本書由重慶航天職業(yè)技術(shù)學(xué)院陳艷平、徐受蓉?fù)?dān)任主編，趙葉青、董明、舒蕾、李怡平擔(dān)任副主編。具體編寫分工如下：第1章、5章、8章由陳艷平編寫，第2章由李怡平編寫，第3章由徐受蓉編寫，第4章由趙葉青編寫，第6章由董明編寫，第7章由舒蕾編寫。 本書在編寫過(guò)程中，參閱了大量的相關(guān)教材和專業(yè)書籍，在此一并向各位專家及各位參考書籍的編者表示感謝！相關(guān)的教學(xué)素材可聯(lián)系編者郵件發(fā)送或在清華大學(xué)出版社網(wǎng)站下載。 鑒于編者水平有限，書中難免有不足之處，歡迎各位專家和廣大讀者不吝賜教并批評(píng)指正。 編者
第1章 網(wǎng)頁(yè)設(shè)計(jì)概述 1
1.1 網(wǎng)頁(yè)與網(wǎng)站 1 1.1.1 網(wǎng)頁(yè) 1 1.1.2 網(wǎng)站 2 1.1.3 網(wǎng)站的工作原理 2 1.1.4 網(wǎng)頁(yè)基本構(gòu)成元素 3 1.2 網(wǎng)頁(yè)制作基礎(chǔ)知識(shí) 4 1.2.1 網(wǎng)頁(yè)的基礎(chǔ)知識(shí) 4 1.2.2 網(wǎng)頁(yè)制作工具 5 1.2.3 網(wǎng)頁(yè)設(shè)計(jì)與制作的分類 6 1.3 網(wǎng)頁(yè)設(shè)計(jì)的基本流程 6 1.4 創(chuàng)建本地站點(diǎn) 7 1.4.1 Dreamweaver CS6簡(jiǎn)介 7 1.4.2 建立本地站點(diǎn) 9 1.4.3 管理本地站點(diǎn) 12 1.4.4 網(wǎng)頁(yè)文件的基本操作 13 1.4.5 設(shè)置首選參數(shù) 15 1.4.6 使用輔助工具 18 1.5 超文本標(biāo)記語(yǔ)言HTML 20 1.5.1 HTML概述 20 1.5.2 常用HTML標(biāo)記 21 1.6 實(shí)例演示 22 1.6.1 實(shí)例情景--創(chuàng)建本地教學(xué) 站點(diǎn) 22 1.6.2 實(shí)例效果 22 1.6.3 實(shí)現(xiàn)方案 22 1.7 任務(wù)訓(xùn)練 23 1.7.1 訓(xùn)練目的 23 1.7.2 訓(xùn)練內(nèi)容 23 1.8 知識(shí)拓展 24 單元測(cè)試 24 第2章 認(rèn)識(shí)網(wǎng)頁(yè)基本元素 26 2.1 文本 26 2.1.1 添加文本 26 2.1.2 設(shè)置文本屬性 28 2.1.3 插入特殊文本 32 2.1.4 文本超鏈接 34 2.2 圖像 37 2.2.1 圖像格式 38 2.2.2 插入圖像 39 2.2.3 設(shè)置圖像屬性 39 2.2.4 其他圖像元素 40 2.2.5 圖文混排 42 2.2.6 圖像超鏈接 43 2.3 多媒體 45 2.3.1 網(wǎng)頁(yè)中的動(dòng)畫 45 2.3.2 音樂(lè)播放功能 47 2.3.3 視頻播放功能 49 2.4 實(shí)例演示 50 2.4.1 實(shí)例情景--制作風(fēng)景區(qū) 網(wǎng)頁(yè) 50 2.4.2 實(shí)例效果 50 2.4.3 實(shí)現(xiàn)方案 51 2.5 任務(wù)訓(xùn)練 52 2.5.1 訓(xùn)練目的 52 2.5.2 訓(xùn)練內(nèi)容 52 2.6 知識(shí)拓展 53 單元測(cè)試 53 第3章 認(rèn)識(shí)常用網(wǎng)頁(yè)布局 55 3.1 表格 55 3.1.1 插入表格及嵌套表格 56 3.1.2 設(shè)置表格和單元格屬性 59 3.1.3 選擇單元格、行或列及表格 60 3.1.4 表格的基本操作 61 3.1.5 表格布局實(shí)例 62 3.2 層AP Div 64 3.2.1 創(chuàng)建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布局實(shí)例 71 3.3 實(shí)例演示 73 3.3.1 實(shí)例情景--制作在線作業(yè) 系統(tǒng)主頁(yè) 73 3.3.2 實(shí)例效果 73 3.3.3 實(shí)現(xiàn)方案 74 3.4 任務(wù)訓(xùn)練 76 3.4.1 訓(xùn)練目的 76 3.4.2 訓(xùn)練內(nèi)容 76 3.5 知識(shí)拓展 78 單元測(cè)試 78 第4章 認(rèn)識(shí)Div+CSS布局 79 4.1 Div概述 79 4.1.1 什么是Div 79 4.1.2 網(wǎng)頁(yè)中插入Div 81 4.1.3 Div的嵌套 83 4.2 CSS概述 84 4.2.1 什么是CSS 85 4.2.2 創(chuàng)建CSS樣式 85 4.2.3 CSS樣式在網(wǎng)頁(yè)中的應(yīng)用 94 4.3 盒子模型 97 4.3.1 盒子模型概述 97 4.3.2 margin、padding與border 98 4.3.3 塊級(jí)元素與內(nèi)聯(lián)元素 103 4.3.4 Div的浮動(dòng)與定位 105 4.4 常用布局方式 111 4.4.1 居中布局 111 4.4.2 固定寬度布局 113 4.4.3 可變寬度布局 114 4.5 實(shí)例演示 116 4.5.1 實(shí)例情景--制作在線作業(yè) 系統(tǒng)首頁(yè) 116 4.5.2 實(shí)例效果 116 4.5.3 實(shí)現(xiàn)方案 117 4.6 任務(wù)訓(xùn)練 124 4.6.1 訓(xùn)練目的 124 4.6.2 訓(xùn)練內(nèi)容 124 4.7 知識(shí)拓展 125 單元測(cè)試 126 第5章 認(rèn)識(shí)表單 127 5.1 創(chuàng)建表單 127 5.1.1 表單概述 127 5.1.2 插入表單 128 5.1.3 表單屬性 128 5.2 創(chuàng)建表單對(duì)象 129 5.2.1 文本字段 129 5.2.2 隱藏域 131 5.2.3 復(fù)選框和復(fù)選框組 132 5.2.4 單選按鈕和單選按鈕組 134 5.2.5 列表/菜單 135 5.2.6 跳轉(zhuǎn)菜單 136 5.2.7 圖像域 137 5.2.8 文件域 137 5.2.9 按鈕 138 5.2.10 標(biāo)簽 138 5.2.11 字段集 138 5.3 Spry表單驗(yàn)證 139 5.3.1 Spry驗(yàn)證文本域 139 5.3.2 Spry驗(yàn)證文本區(qū)域 140 5.3.3 Spry驗(yàn)證復(fù)選框 141 5.3.4 Spry驗(yàn)證選擇 141 5.3.5 Spry驗(yàn)證密碼 142 5.3.6 Spry驗(yàn)證確認(rèn) 142 5.3.7 Spry驗(yàn)證單選按鈕組 143 5.4 使用行為驗(yàn)證表單 144 5.5 實(shí)例演示 147 5.5.1 實(shí)例情景--制作郵箱注冊(cè) 單網(wǎng)頁(yè) 147 5.5.2 實(shí)例效果 147 5.5.3 實(shí)現(xiàn)方案 147 5.6 任務(wù)訓(xùn)練 149 5.6.1 訓(xùn)練目的 149 5.6.2 訓(xùn)練內(nèi)容 150 5.7 知識(shí)拓展 151 單元測(cè)試 151 第6章 認(rèn)識(shí)行為特效 152 6.1 認(rèn)識(shí)行為 152 6.1.1 行為基本概念 152 6.1.2 "行為"面板 153 6.1.3 添加行為步驟 154 6.1.4 修改行為 155 6.2 使用內(nèi)置行為 156 6.2.1 交換圖像 156 6.2.2 彈出消息 157 6.2.3 打開(kāi)瀏覽器窗口 157 6.2.4 轉(zhuǎn)到URL 159 6.2.5 拖動(dòng)AP元素 159 6.2.6 設(shè)置狀態(tài)欄文本 160 6.2.7 改變屬性 161 6.2.8 顯示/漸隱 162 6.2.9 調(diào)用JavaScript 163 6.3 實(shí)例演示 165 6.3.1 實(shí)例情景--用JavaScript 完成行為特效 165 6.3.2 實(shí)例效果 165 6.3.3 實(shí)現(xiàn)方案 166 6.4 任務(wù)訓(xùn)練 168 6.4.1 訓(xùn)練目的 168 6.4.2 訓(xùn)練內(nèi)容 168 6.5 知識(shí)拓展 169 單元測(cè)試 169 第7章 認(rèn)識(shí)模板和庫(kù) 170 7.1 模板 170 7.1.1 創(chuàng)建模板 170 7.1.2 創(chuàng)建可編輯區(qū)域 171 7.1.3 管理模板 172 7.2 庫(kù) 176 7.2.1 創(chuàng)建庫(kù)文件 177 7.2.2 編輯庫(kù)項(xiàng)目 178 7.2.3 為頁(yè)面添加庫(kù)項(xiàng)目 179 7.3 實(shí)例演示 179 7.3.1 實(shí)例情景--制作風(fēng)花雪月 網(wǎng)站 179 7.3.2 實(shí)例效果 180 7.3.3 實(shí)現(xiàn)方案 180 7.4 任務(wù)訓(xùn)練--模板應(yīng)用 184 7.4.1 訓(xùn)練目的 184 7.4.2 訓(xùn)練內(nèi)容 184 7.5 知識(shí)拓展 185 單元測(cè)試 185 第8章 初識(shí)HTML5 186 8.1 HTML5概述 186 8.1.1 HTML5簡(jiǎn)介 186 8.1.2 HTML5的新特性 186 8.1.3 HTML5的優(yōu)點(diǎn) 187 8.2 HTML5視頻 187 8.2.1 HTML5視頻簡(jiǎn)介 187 8.2.2 HTML5視頻實(shí)例 188 8.2.3 使用 DOM控制 190 8.3 HTML5音頻 192 8.3.1 HTML5音頻簡(jiǎn)介 192 8.3.2 HTML5音頻實(shí)例 193 8.4 初識(shí)Canvas 194 8.4.1 Canvas簡(jiǎn)介 194 8.4.2 繪制圖形 195 8.4.3 使用圖像 199 8.5 實(shí)例演示 201 8.5.1 實(shí)例情景--制作七巧板 201 8.5.2 實(shí)例效果 201 8.5.3 實(shí)現(xiàn)方案 202 8.6 任務(wù)訓(xùn)練 204 8.6.1 訓(xùn)練目的 204 8.6.2 訓(xùn)練內(nèi)容 204 8.7 知識(shí)拓展 206 單元測(cè)試 206 參考文獻(xiàn) 207
第1章 網(wǎng)頁(yè)設(shè)計(jì)概述
技能目標(biāo)： * 掌握網(wǎng)頁(yè)與網(wǎng)站的基本概念 * 掌握網(wǎng)頁(yè)制作基礎(chǔ)知識(shí) * 掌握站點(diǎn)的創(chuàng)建與管理 * 掌握超文本標(biāo)記語(yǔ)言HTML 在制作網(wǎng)頁(yè)之前，應(yīng)先學(xué)會(huì)區(qū)分網(wǎng)頁(yè)與網(wǎng)站，了解其工作原理，認(rèn)識(shí)網(wǎng)頁(yè)的基本構(gòu)成元素、了解網(wǎng)頁(yè)制作的基礎(chǔ)知識(shí)，在Dreamweaver CS6的工作界面中創(chuàng)建站點(diǎn)對(duì)網(wǎng)站進(jìn)行統(tǒng)一管理，熟悉HTML。 1.1 網(wǎng)頁(yè)與網(wǎng)站 隨著互聯(lián)網(wǎng)的飛速發(fā)展，網(wǎng)頁(yè)、網(wǎng)站已成為人們?nèi)粘Ｉ钪胁豢扇鄙俚牟糠郑盟鼈�，新聞資訊可及時(shí)查看，各種物品足不出戶便可購(gòu)買，親戚朋友可隨時(shí)聯(lián)系。下面先來(lái)了解一下網(wǎng)頁(yè)、網(wǎng)站等基本知識(shí)。 1.1.1 網(wǎng)頁(yè) 當(dāng)在瀏覽器地址欄中輸入網(wǎng)址后，網(wǎng)頁(yè)就會(huì)呈現(xiàn)在人們的眼前，如輸入http://www.163.com，就會(huì)看到如圖1-1所示的網(wǎng)頁(yè)。 圖1-1 網(wǎng)易主頁(yè) 網(wǎng)頁(yè)(Web Page)一般由文字、圖片、超鏈接等元素組成，另外，聲音、視頻、動(dòng)畫等多媒體元素可以為網(wǎng)頁(yè)增添豐富的色彩和動(dòng)感。網(wǎng)頁(yè)是用HTML語(yǔ)言編寫的，通過(guò)WWW傳輸，并被Web瀏覽器翻譯成可以顯示出來(lái)的集合文本、圖片、聲音和動(dòng)畫等信息元素的頁(yè)面文件。 人們?cè)跒g覽網(wǎng)站時(shí)，首先訪問(wèn)的是網(wǎng)站的首頁(yè)或主頁(yè)，然后才能訪問(wèn)其他的網(wǎng)頁(yè)。首頁(yè)一般起歡迎的作用，只有進(jìn)入網(wǎng)站的超鏈接，通過(guò)超鏈接才能訪問(wèn)網(wǎng)站的主頁(yè)。大多數(shù)作為首頁(yè)的文件名是index、default加上擴(kuò)展名。主頁(yè)是整個(gè)網(wǎng)站的導(dǎo)航中心，是網(wǎng)站的鏈接中心。 1.1.2 網(wǎng)站 網(wǎng)站(Website)是把包括網(wǎng)頁(yè)在內(nèi)的信息文件通過(guò)超鏈接的形式關(guān)聯(lián)起來(lái)而形成的信息文件的集合。開(kāi)發(fā)者通過(guò)超鏈接將網(wǎng)站中多個(gè)網(wǎng)頁(yè)建立聯(lián)系，形成一個(gè)主題鮮明、風(fēng)格一致的Web站點(diǎn)。 網(wǎng)站是一個(gè)文件夾，其中的文件不僅有網(wǎng)頁(yè)，還有網(wǎng)站所需要的其他文件或文件夾。網(wǎng)頁(yè)是一種頁(yè)面文件，用來(lái)發(fā)布各種信息。網(wǎng)頁(yè)是網(wǎng)站的構(gòu)成要素，是網(wǎng)站信息發(fā)布與表現(xiàn)的一種主要形式。 通常情況下，網(wǎng)站都有一個(gè)主頁(yè)，其中包括網(wǎng)站的Logo和導(dǎo)航欄等內(nèi)容，導(dǎo)航欄包含了指向其他網(wǎng)頁(yè)的超鏈接。 1.1.3 網(wǎng)站的工作原理 網(wǎng)站發(fā)布到Web服務(wù)器中，瀏覽者通過(guò)瀏覽器向Web服務(wù)器發(fā)出請(qǐng)求，Web服務(wù)器則根據(jù)請(qǐng)求把瀏覽者所訪問(wèn)的網(wǎng)頁(yè)傳送到客戶端，顯示在瀏覽器中。一個(gè)靜態(tài)網(wǎng)站的工作過(guò)程歸納為以下4個(gè)步驟，工作原理如圖1-2所示。 圖1-2 網(wǎng)站的工作原理 (1) 用戶在瀏覽器的地址欄輸入要訪問(wèn)網(wǎng)站的域名，如http://www.163.com，按Enter鍵觸發(fā)這個(gè)瀏覽請(qǐng)求，瀏覽器根據(jù)域名的IP地址向Web網(wǎng)站服務(wù)器發(fā)出瀏覽請(qǐng)求。 (2) 瀏覽器將請(qǐng)求發(fā)送到Web服務(wù)器，Web服務(wù)器接受這個(gè)請(qǐng)求。 (3) 若找到網(wǎng)頁(yè)，Web服務(wù)器從服務(wù)器硬盤的指定位置或內(nèi)存中讀取正確的HTML文件，然后將它發(fā)送給請(qǐng)求瀏覽器。 (4) 用戶的瀏覽器解析這些HTML代碼并將它顯示出來(lái)。 1.1.4 網(wǎng)頁(yè)基本構(gòu)成元素 網(wǎng)頁(yè)由文本、圖像、多媒體、超鏈接等基本元素構(gòu)成。 1. 文本(Text) 一般情況下，文本在網(wǎng)頁(yè)中占了較大比重，是網(wǎng)頁(yè)傳遞信息的主要載體。文本的特點(diǎn)是傳遞速度快、信息量大、存儲(chǔ)空間小。在網(wǎng)頁(yè)中，可以對(duì)文本的字體、大小、顏色、行距等進(jìn)行設(shè)置。用于網(wǎng)頁(yè)正文的文字，建議不要使用過(guò)多的字體，中文文字一般用宋體，字體大小使用9磅或12像素左右。 2. 圖像(Image) 圖像是美化網(wǎng)頁(yè)必不可少的元素。網(wǎng)頁(yè)上的圖像一般使用JPG格式、GIF格式和PNG格式。網(wǎng)頁(yè)中的圖像主要有用于點(diǎn)綴的小圖片、介紹性的照片、代表企業(yè)形象或欄目?jī)?nèi)容的標(biāo)志性圖片(Logo)、用于宣傳的廣告(Banner)等形式。 3. 多媒體(Media) 多媒體是網(wǎng)頁(yè)中最活躍的元素，創(chuàng)意出眾、制作精美的動(dòng)畫是吸引瀏覽者眼球的有效方法之一。網(wǎng)頁(yè)中可使用的多媒體對(duì)象有Flash動(dòng)畫、音頻、視頻、Java小程序等。但網(wǎng)頁(yè)多媒體元素不宜太多，否則會(huì)使人眼花繚亂，產(chǎn)生視覺(jué)疲勞。 4. 超鏈接(Superlink) 超鏈接是指從一個(gè)網(wǎng)頁(yè)指向另一個(gè)目的端的鏈接關(guān)系。這個(gè)"目的端"通常是一個(gè)網(wǎng)頁(yè)、相同網(wǎng)頁(yè)上的不同位置、一個(gè)下載的文件、一幅圖片、一個(gè)E-mail地址等。超鏈接的對(duì)象可以是文字、按鈕或圖片。鼠標(biāo)指針指向超鏈接位置時(shí)，會(huì)變成小手形狀。網(wǎng)頁(yè)中的導(dǎo)航欄是一組超鏈接，用于引導(dǎo)瀏覽者查看站點(diǎn)的不同頁(yè)面或欄目。 5. 表格(Table) 表格主要用于網(wǎng)頁(yè)內(nèi)容的布局，組織整個(gè)網(wǎng)頁(yè)的外觀，也可用來(lái)分門別類地顯示數(shù)據(jù)信息。當(dāng)前，網(wǎng)頁(yè)設(shè)計(jì)中更多使用Div+CSS技術(shù)實(shí)現(xiàn)網(wǎng)頁(yè)布局的控制。 6. 表單(Form) 表單是用來(lái)收集訪問(wèn)者信息的區(qū)域。表單由不同功能的表單域組成，最簡(jiǎn)單的表單包含一個(gè)輸入?yún)^(qū)域和一個(gè)提交按鈕。根據(jù)功能與處理方式的不同，通常將表單分為用戶反饋表、留言簿、用戶注冊(cè)和搜索等。 7. 頁(yè)面尺寸 在設(shè)計(jì)網(wǎng)頁(yè)時(shí)，要確定網(wǎng)頁(yè)的尺寸大小。網(wǎng)頁(yè)尺寸和顯示器大小及分辨率有關(guān)，由于網(wǎng)頁(yè)的顯示無(wú)法突破顯示器的顯示范圍，所以網(wǎng)頁(yè)的顯示范圍也受到限制。原則上，頁(yè)面長(zhǎng)度不超過(guò)3屏，頁(yè)面寬度不超過(guò)1屏。一般情況下，計(jì)算機(jī)分辨率為1024px?768px時(shí)，建議頁(yè)面尺寸設(shè)計(jì)為1000px?600px。但隨著寬屏顯示器的流行，頁(yè)面寬度逐漸超過(guò)"習(xí)慣"參數(shù)，為每個(gè)顯示器定制專屬的頁(yè)面也不太可能，故建議網(wǎng)頁(yè)兩邊預(yù)留20px左右的空白。 1.2 網(wǎng)頁(yè)制作基礎(chǔ)知識(shí) 在制作網(wǎng)頁(yè)前，需要先了解和掌握有關(guān)網(wǎng)頁(yè)的基礎(chǔ)知識(shí)、網(wǎng)頁(yè)制作工具和網(wǎng)頁(yè)設(shè)計(jì)與制作的分類等。 1.2.1 網(wǎng)頁(yè)的基礎(chǔ)知識(shí) 1. Internet Internet，中文正式譯名為因特網(wǎng)，又叫作國(guó)際互聯(lián)網(wǎng)，是由使用公用語(yǔ)言互相通信的計(jì)算機(jī)連接而成的全球網(wǎng)絡(luò)。一旦連接到它的任何一個(gè)節(jié)點(diǎn)上，就意味著計(jì)算機(jī)已經(jīng)連入Internet網(wǎng)了。Internet的用戶目前已經(jīng)遍及全球，有幾十億人在使用Internet，并且它的用戶數(shù)還在逐年上升。 2. WWW WWW(World Wide Web)也稱為萬(wàn)維網(wǎng)。萬(wàn)維網(wǎng)只是互聯(lián)網(wǎng)所能提供的服務(wù)之一，是依靠互聯(lián)網(wǎng)運(yùn)行的一項(xiàng)服務(wù)。萬(wàn)維網(wǎng)基于超文本結(jié)構(gòu)體系，由大量的電子文檔組成，這些電子文檔存儲(chǔ)在世界各地的計(jì)算機(jī)上，通過(guò)各種類型的超鏈接連接在一起，目的是讓不同地方的人使用一種簡(jiǎn)單的方式共享信息資源。 從技術(shù)上講，WWW包含3個(gè)基本組成部分：URL(統(tǒng)一資源定位器)、HTTP(超文本傳輸協(xié)議)、HTML(超文本標(biāo)記語(yǔ)言)。 3. URL URL(Uniform Resource Locator，統(tǒng)一資源定位器)是一個(gè)指定Internet上資源位置的標(biāo)準(zhǔn)，也就是人們常說(shuō)的網(wǎng)址，如http://www.163.com。 4. W3C W3C(World Wide Web Consortium，全球萬(wàn)維網(wǎng)聯(lián)盟)是國(guó)際著名的標(biāo)準(zhǔn)化組織，該聯(lián)盟于1994年10月在麻省理工學(xué)院計(jì)算機(jī)科學(xué)實(shí)驗(yàn)室成立，至今已發(fā)布近百項(xiàng)相關(guān)萬(wàn)維網(wǎng)的標(biāo)準(zhǔn)，對(duì)萬(wàn)維網(wǎng)發(fā)展做出了杰出的貢獻(xiàn)。 5. HyperText HyperText(超文本)是一種可以指向其他文件的文字或圖片，這種功能稱為超鏈接(HyperLink)。超文本是一種組織信息的方式，它通過(guò)超鏈接將網(wǎng)頁(yè)中的文字或圖片與其他對(duì)象相關(guān)聯(lián)，為人們查找信息提供了一種快捷方式。 6. HTTP HTTP(HyperText Transfer Protocol，超文本傳輸協(xié)議)是互聯(lián)網(wǎng)上應(yīng)用最為廣泛的一種網(wǎng)絡(luò)協(xié)議。所有的WWW文件都必須遵守這個(gè)標(biāo)準(zhǔn)。 7. HTML HTML(HyperText Markup Language，超文本標(biāo)記語(yǔ)言)是Internet中編寫網(wǎng)頁(yè)的主要標(biāo)識(shí)語(yǔ)言。網(wǎng)頁(yè)文件也可以稱為HTML文件，其擴(kuò)展名為.html或.htm。HTML文件是純文本文件，可以使用任何能夠生成TXT類型源文件的文本編輯器來(lái)產(chǎn)生超文本標(biāo)記語(yǔ)言文件，只修改文件后綴即可。 8. XHTML XHTML(eXtensible HyperText Markup Language，可擴(kuò)展超文本標(biāo)記語(yǔ)言)是一種基于XML的標(biāo)記語(yǔ)言，看起來(lái)與HTML有些相像，但XHTML是一種增強(qiáng)的、結(jié)合部分XML強(qiáng)大功能及大多數(shù)HTML簡(jiǎn)單特性的超文本標(biāo)記語(yǔ)言，它的可擴(kuò)展性和靈活性能適應(yīng)未來(lái)網(wǎng)絡(luò)應(yīng)用更多的需求。 9. CSS CSS(Cascading Style Sheet，層疊樣式表)用于對(duì)網(wǎng)頁(yè)布局、字體、顏色、背景和其他圖文效果實(shí)現(xiàn)精確的控制。CSS可以一次性控制多個(gè)文檔中的文本，并且可隨時(shí)改動(dòng)CSS的內(nèi)容，以自動(dòng)更新文本的樣式。 10. JavaScript JavaScript是一種腳本語(yǔ)言，可以和HTML語(yǔ)言混合在一起使用，用來(lái)實(shí)現(xiàn)在一個(gè)Web頁(yè)面中與用戶的交互作用。 11. Browser與Server Browser即瀏覽器，Server即服務(wù)器，連在一起即為常見(jiàn)的B/S。用戶通過(guò)瀏覽器鏈接到Web服務(wù)器上，才能閱讀Web服務(wù)器上的文件。信息的提供者建立好Web服務(wù)器，用戶使用瀏覽器可以取得服務(wù)器中的文件及其他信息。 1.2.2 網(wǎng)頁(yè)制作工具 在網(wǎng)頁(yè)設(shè)計(jì)制作中，經(jīng)常會(huì)涉及圖像處理、動(dòng)畫制作、網(wǎng)站發(fā)布等問(wèn)題。目前，此類相關(guān)專業(yè)軟件功能越來(lái)越完善、操作越來(lái)越簡(jiǎn)單，應(yīng)用也非常廣泛。 制作網(wǎng)頁(yè)的常用工具有以下幾種。 * 制作網(wǎng)頁(yè)的專門工具：Dreamweaver和FrontPage。 * 圖像處理工具：Photoshop和Fireworks。 * 動(dòng)畫制作工具：Flash和Swish。 * 圖標(biāo)制作工具：小榕圖標(biāo)編輯器和超級(jí)圖標(biāo)。 * 抓圖工具：HyperSnap、HyperCam和Camtasia Studio。 * 文本文件編輯工具：記事本和UltraEdit。 * 全景圖片制作工具：Cool360。 * 網(wǎng)站發(fā)布工具：CuteFTP。 1. Dreamweaver Dreamweaver CS6是世界頂級(jí)軟件廠商Adobe推出的一套擁有可視化編輯界面，用于制作并編輯網(wǎng)站和移動(dòng)應(yīng)用程序的網(wǎng)頁(yè)軟件。由于它支持代碼、拆分、設(shè)計(jì)、實(shí)時(shí)視圖等多種方式來(lái)創(chuàng)作、編寫和修改網(wǎng)頁(yè)，對(duì)于初級(jí)人員，無(wú)須編寫任何代碼就能快速創(chuàng)建Web頁(yè)面。 2. Photoshop Photoshop是Adobe公司旗下最為出名的圖像處理軟件之一，其界面友好，支持多種圖像格式以及多種色彩模式，還可以任意調(diào)整圖像的尺寸、分辨率及畫布大小。Photoshop可用于設(shè)計(jì)網(wǎng)頁(yè)整體效果圖、網(wǎng)頁(yè)Logo、網(wǎng)頁(yè)Banner和網(wǎng)頁(yè)中廣告等圖像。 3.Flash Flash是一種常用的動(dòng)畫制作軟件，用于制作和編輯具有較強(qiáng)交互性的矢量動(dòng)畫，可以方便地生成.swf動(dòng)畫文件，此文件可嵌入HTML。Flash動(dòng)畫已成為網(wǎng)站中必不可少的元素，為網(wǎng)頁(yè)增添生動(dòng)色彩，以吸引更多的瀏覽者。 4.Fireworks Fireworks是一個(gè)將矢量圖形處理和點(diǎn)陣圖形處理合二為一的專業(yè)化圖形設(shè)計(jì)軟件。它可以對(duì)各種圖像文件進(jìn)行編輯和處理，也可以直接生產(chǎn)包含HTML和JavaScript代碼的動(dòng)態(tài)圖像。 1.2.3 網(wǎng)頁(yè)設(shè)計(jì)與制作的分類 網(wǎng)頁(yè)設(shè)計(jì)與制作一般分為靜態(tài)網(wǎng)頁(yè)制作和動(dòng)態(tài)網(wǎng)頁(yè)制作兩類。 1. 靜態(tài)網(wǎng)頁(yè)的設(shè)計(jì)與制作 靜態(tài)網(wǎng)頁(yè)是標(biāo)準(zhǔn)的HTML文件，它的文件擴(kuò)展名是.htm、.html，可以包含文本、圖像、聲音、Flash動(dòng)畫、客戶端腳本和ActiveX控件及Java小程序等。在HTML格式的網(wǎng)頁(yè)中，也可出現(xiàn)各種動(dòng)態(tài)的效果，如GIF格式的動(dòng)畫、Flash動(dòng)畫和滾動(dòng)字幕等，在視覺(jué)上是"動(dòng)態(tài)效果"。靜態(tài)網(wǎng)頁(yè)僅僅用來(lái)被動(dòng)發(fā)布信息，而不具有交互功能。 2. 動(dòng)態(tài)網(wǎng)頁(yè)的設(shè)計(jì)與制作 動(dòng)態(tài)網(wǎng)頁(yè)是用ASP、JSP、PHP等網(wǎng)絡(luò)編程語(yǔ)言編寫的交互式網(wǎng)頁(yè)，與后臺(tái)數(shù)據(jù)庫(kù)進(jìn)行交互，進(jìn)行數(shù)據(jù)傳遞。動(dòng)態(tài)網(wǎng)頁(yè)的表現(xiàn)形式有論壇、留言板或網(wǎng)站后臺(tái)管理頁(yè)(在網(wǎng)頁(yè)后臺(tái)進(jìn)行信息添加和修改，前臺(tái)則自動(dòng)更新)等，常常以.aspx、.asp、.jsp、.php、.perl等形式為后綴，并且在動(dòng)態(tài)網(wǎng)頁(yè)網(wǎng)址中有一個(gè)標(biāo)志性的符號(hào)"？"。 1.3 網(wǎng)頁(yè)設(shè)計(jì)的基本流程 網(wǎng)站由許多網(wǎng)頁(yè)組成，若想使網(wǎng)頁(yè)吸引眼球、受人歡迎，要求網(wǎng)站的內(nèi)容、結(jié)構(gòu)、顏色、美工等有一個(gè)很好的規(guī)劃。建立一個(gè)網(wǎng)站的流程如下。 1. 確定網(wǎng)站的主題 設(shè)計(jì)網(wǎng)站的第一步就是要確定網(wǎng)站的主題，根據(jù)客戶要建設(shè)的網(wǎng)站以及相關(guān)要求確定網(wǎng)站的類型，網(wǎng)站的功能要求、內(nèi)容要求、色彩要求、欄目要求、性能要求、布局要求、操作要求等，最終形成用戶的需求分析。 2. 網(wǎng)站的總體規(guī)劃 掌握客戶的需求后，便要對(duì)網(wǎng)站項(xiàng)目進(jìn)行總體的規(guī)劃性設(shè)計(jì)，包括網(wǎng)站設(shè)計(jì)工具、內(nèi)容和色調(diào)、版面布局設(shè)計(jì)、網(wǎng)站欄目設(shè)置、界面設(shè)計(jì)和制定網(wǎng)站建設(shè)規(guī)劃等。 3. 制作網(wǎng)頁(yè) (1) 收集網(wǎng)站素材資料。網(wǎng)站制作之前，收集文本、圖片、視頻、音頻等素材，將來(lái)作為網(wǎng)站的Logo、廣告欄、導(dǎo)航欄等頁(yè)面元素。 (2) 確定網(wǎng)頁(yè)版面布局，注意多個(gè)頁(yè)面風(fēng)格的一致性。 (3) 制作網(wǎng)頁(yè)。利用網(wǎng)頁(yè)制作工具制作靜態(tài)的網(wǎng)頁(yè)與動(dòng)態(tài)的網(wǎng)頁(yè)。 (4) 添加網(wǎng)頁(yè)特效。利用HTML語(yǔ)言、Flash動(dòng)畫、層等制作特效，增加網(wǎng)頁(yè)的藝術(shù)效果。 4. 測(cè)試和發(fā)布網(wǎng)站 網(wǎng)站做好后，要對(duì)網(wǎng)站進(jìn)行測(cè)試，包括網(wǎng)站的瀏覽器兼容性和站點(diǎn)超鏈接完好性。通過(guò)客戶驗(yàn)收后，提供給客戶發(fā)布到網(wǎng)上，供其使用。 5. 網(wǎng)站的更新與維護(hù) 網(wǎng)站發(fā)布后，在合同有效期內(nèi)，根據(jù)客戶的要求，對(duì)網(wǎng)站進(jìn)行針對(duì)性地修改，定期維護(hù)、更新內(nèi)容和板塊，定期做好網(wǎng)站數(shù)據(jù)備份工作。
你還可能感興趣
我要評(píng)論
|
