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