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