網(wǎng)頁設計與制作教程 第12章 網(wǎng)頁設計綜合實例

網(wǎng)頁設計與制作教程 第 1章 網(wǎng)頁設計與制作基礎 第 12章 網(wǎng)頁設計綜合實例 第 1頁 本章概述 本章的學習目標 主要內(nèi)容 網(wǎng)頁設計與制作教程 第 1章 網(wǎng)頁設計與制作基礎 本章概述 本章將綜合本書所講述的有關網(wǎng)頁設計與制作技術，通過幾個實例，幫助讀者熟悉和掌握整個網(wǎng)頁制作過程，同時加深對前面學過知識的綜合理解和應用，在學習完本書的所有內(nèi)容后能夠充分掌握網(wǎng)頁設計與制作技術，最終達到本書的學習目的。 第 2頁 網(wǎng)頁設計與制作教程 第 1章 網(wǎng)頁設計與制作基礎 本章的學習目標 掌握網(wǎng)頁元素的制作方法 掌握網(wǎng)頁的制作及切片技術 掌握手機網(wǎng)頁的制作方法 第 3頁 網(wǎng)頁設計與制作教程 第 1章 網(wǎng)頁設計與制作基礎 主要內(nèi)容 計網(wǎng)頁元素 制網(wǎng)頁 計制作手機網(wǎng)頁 章小結 第 4頁 網(wǎng)頁設計與制作教程 第 1章 網(wǎng)頁設計與制作基礎 設計網(wǎng)頁元素 網(wǎng)頁元素就是指網(wǎng)頁中使用到的一切用于組織結構和表達內(nèi)容的對象。組織結構包括按鈕、布局、層、導航條和鏈接等。表達內(nèi)容包括 字、圖像和 節(jié)介紹運用 第 5頁 網(wǎng)頁設計與制作教程 第 1章 網(wǎng)頁設計與制作基礎 設計網(wǎng)站圖標和 網(wǎng)站圖標指顯示在瀏覽器地址欄左側的簡單明了且視覺效果突出的小圖標。網(wǎng)站 以代表一個網(wǎng)站或網(wǎng)站的一個板塊。 繪制網(wǎng)站圖標 第 6頁 網(wǎng)頁設計與制作教程 第 1章 網(wǎng)頁設計與制作基礎 設計網(wǎng)站圖標和 繪制網(wǎng)站 一個設計獨特的網(wǎng)站 僅代表了網(wǎng)站本身，也能突出網(wǎng)站的性質(zhì)，是網(wǎng)站的“眼睛”。 第 7頁 網(wǎng)頁設計與制作教程 第 1章 網(wǎng)頁設計與制作基礎 設計網(wǎng)頁廣告圖像 制作網(wǎng)站 般使用 可以使用靜態(tài)圖形。下面設計制作一個時裝網(wǎng)站 例效果是動態(tài)的。 第 8頁 網(wǎng)頁設計與制作教程 第 1章 網(wǎng)頁設計與制作基礎 設計網(wǎng)頁廣告圖像 繪制網(wǎng)頁通欄廣告 網(wǎng)頁通欄廣告是指左右與網(wǎng)頁同寬，高度一般為100200像素的圖片廣告，這種廣告多為靜態(tài)。下面就以如圖所示效果為例，完成一幅 950 120像素的通欄廣告。 第 9頁 網(wǎng)頁設計與制作教程 第 1章 網(wǎng)頁設計與制作基礎 設計網(wǎng)頁按鈕和導航條 按鈕是網(wǎng)頁中用于導航的重要元素。導航條是一組按鈕的集合，提供了到網(wǎng)站不同欄目的鏈接。網(wǎng)頁按鈕和導航條設計得好，不僅能增強網(wǎng)頁的視覺效果，而且能使導航清晰自然。 繪制網(wǎng)頁按鈕 本實例繪制一個具有水晶質(zhì)感的網(wǎng)頁按鈕，效果如圖所示。 第 10頁 網(wǎng)頁設計與制作教程 第 1章 網(wǎng)頁設計與制作基礎 設計網(wǎng)頁按鈕和導航條 繪制網(wǎng)頁導航條 導航條不僅要美觀、醒目，而且在功能表達上也要一目了然。整個站點中的導航欄風格要一致，方便瀏覽者了解網(wǎng)站的所有內(nèi)容，并且知道自己所處的位置。 第 11頁 網(wǎng)頁設計與制作教程 第 1章 網(wǎng)頁設計與制作基礎 主要內(nèi)容 計網(wǎng)頁元素 制網(wǎng)頁 計制作手機網(wǎng)頁 章小結 第 12頁 網(wǎng)頁設計與制作教程 第 1章 網(wǎng)頁設計與制作基礎 繪制網(wǎng)頁 能通過切片和優(yōu)化將圖片直接轉換成 面將綜合使用 讀者對網(wǎng)頁制作流程有一個大致的認識。 繪制網(wǎng)頁 創(chuàng)建切片 優(yōu)化切片并導出 在 第 13頁 網(wǎng)頁設計與制作教程 第 1章 網(wǎng)頁設計與制作基礎 繪制網(wǎng)頁 網(wǎng)頁預覽效果 第 14頁 網(wǎng)頁設計與制作教程 第 1章 網(wǎng)頁設計與制作基礎 主要內(nèi)容 計網(wǎng)頁元素 制網(wǎng)頁 計制作手機網(wǎng)頁 章小結 第 15頁 網(wǎng)頁設計與制作教程 第 1章 網(wǎng)頁設計與制作基礎 設計制作手機網(wǎng)頁 現(xiàn)在的互聯(lián)網(wǎng)，可以說是名副其實的移動互聯(lián)網(wǎng)。大家不僅可以利用無線網(wǎng)卡隨處隨地上網(wǎng)，還可以直接利用手機瀏覽網(wǎng)頁、下載文件，而且現(xiàn)在的無線運營商也正在大力發(fā)展無線網(wǎng)絡、擴展手機上網(wǎng)帶寬。于是，手機網(wǎng)頁的制作需求也變多了。本節(jié)簡單的介紹制作手機網(wǎng)頁的基礎知識。 手機網(wǎng)頁編碼所遵循的規(guī)范 手機網(wǎng)頁文檔的擴展名 第 16頁 網(wǎng)頁設計與制作教程 第 1章 網(wǎng)頁設計與制作基礎 新建手機網(wǎng)頁 制作手機網(wǎng)頁要先準備三樣東西： 網(wǎng)頁設計 圖、頁設計圖就是網(wǎng)頁未來的摸樣，必不可少；用 此選擇使用 C；而 以明確指出網(wǎng)頁中的錯誤。 新建手機網(wǎng)頁 設置網(wǎng)頁設計窗口 保存手機網(wǎng)頁 第 17頁 網(wǎng)頁設計與制作教程 第 1章 網(wǎng)頁設計與制作基礎 鏈接 P。一提起 絕對離不開 面介紹 第 18頁 網(wǎng)頁設計與制作教程 第 1章 網(wǎng)頁設計與制作基礎 添加網(wǎng)頁內(nèi)容 經(jīng)過新建網(wǎng)頁、鏈接 個手機網(wǎng)頁的模型已經(jīng)初步建立了。接下來就是為這個頁面添加更多的內(nèi)容元素，下面將介紹插入圖片、標題、文字鏈接等方法。 插入 插入圖片 插入標題 添加文字鏈接 添加搜索框 添加版權信息 第 19頁 網(wǎng)頁設計與制作教程 第 1章 網(wǎng)頁設計與制作基礎 添加網(wǎng)頁內(nèi)容 手機網(wǎng)頁效果 第 20頁 網(wǎng)頁設計與制作教程 第 1章 網(wǎng)頁設計與制作基礎 主要內(nèi)容 計網(wǎng)頁元素 制網(wǎng)頁 計制作手機網(wǎng)頁 章小結 第 21頁 網(wǎng)頁設計與制作教程 第 1章 網(wǎng)頁設計與制作基礎 本章小結 本章通過幾個綜合