第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述.ppt

1、第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)與制作教程,主 編 楊 繼,中國(guó)水利水電出版社,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,內(nèi)容提要 網(wǎng)絡(luò)基礎(chǔ)知識(shí) 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)知識(shí) HTML語(yǔ)言基礎(chǔ) 網(wǎng)站的設(shè)計(jì)流程,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,Internet 也叫“因特網(wǎng)”它是一個(gè)開(kāi)放的、互連的、遍及全球的計(jì)算機(jī)網(wǎng)絡(luò)，是一個(gè)能使世界上各種不同類(lèi)型的計(jì)算機(jī)之間交換各種數(shù)據(jù)信息的通信媒介,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.1 網(wǎng)絡(luò)基礎(chǔ)知識(shí),計(jì)算機(jī)網(wǎng)絡(luò) 計(jì)算機(jī)網(wǎng)絡(luò)是將分布在不同物理位置的具有獨(dú)立功能的計(jì)算機(jī)系統(tǒng)，利用通信設(shè)備和線路相互連接起來(lái)，在網(wǎng)絡(luò)

2、協(xié)議和軟件的支持下進(jìn)行數(shù)據(jù)通信、實(shí)現(xiàn)資源共享的計(jì)算機(jī)系統(tǒng)的集合。,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.1 網(wǎng)絡(luò)基礎(chǔ)知識(shí),50年代 中心面向終端,第一代計(jì)算機(jī)網(wǎng)絡(luò)中心面向終端,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.1 網(wǎng)絡(luò)基礎(chǔ)知識(shí),以共享為目的的計(jì)算機(jī)網(wǎng)絡(luò)。 典型代表ARPANET,第二代計(jì)算機(jī)網(wǎng)絡(luò)多主機(jī)互聯(lián)的計(jì)算機(jī)網(wǎng)絡(luò),20世紀(jì) 60年代,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.1 網(wǎng)絡(luò)基礎(chǔ)知識(shí),第三代計(jì)算機(jī)網(wǎng)絡(luò) 具有統(tǒng)一的網(wǎng)絡(luò)體系結(jié)構(gòu)的開(kāi)放標(biāo)準(zhǔn)化網(wǎng)絡(luò),1984年，國(guó)際標(biāo)準(zhǔn)化組織ISO正式頒布了一個(gè)開(kāi)放系統(tǒng)互連參考模型，簡(jiǎn)稱OSI模型。該模型共分七個(gè)層次，有時(shí)也稱為OSI七層模型。,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,

3、1.1 網(wǎng)絡(luò)基礎(chǔ)知識(shí),第四代計(jì)算機(jī)網(wǎng)絡(luò)以因特網(wǎng)為代表的互聯(lián)網(wǎng),特點(diǎn)：互聯(lián)、高速和更為廣泛的應(yīng)用,80年代局域網(wǎng)迅速發(fā)展,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.1.2 WWW簡(jiǎn)介,WWW萬(wàn)維網(wǎng)（World Wide Web環(huán)球信息網(wǎng)，萬(wàn)維網(wǎng)） WWW不是傳統(tǒng)意義上的物理網(wǎng)絡(luò)，是基于Internet的、由軟件和協(xié)議組成的、以超文本文件為基礎(chǔ)的全球分布式信息網(wǎng)絡(luò)，所以稱為萬(wàn)維網(wǎng) WWW的系統(tǒng)結(jié)構(gòu)采用的是客戶/服務(wù)器結(jié)構(gòu)模式 瀏覽者的主機(jī)是客戶機(jī)，提供信息的主機(jī)是服務(wù)器。,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.1.2 WWW簡(jiǎn)介,WWW萬(wàn)維網(wǎng)（World Wide Web環(huán)球信息網(wǎng)，萬(wàn)維網(wǎng)） 客戶機(jī)上運(yùn)行的是IE

4、之類(lèi)的瀏覽器程序 瀏覽器程序的主要作用就是對(duì)HTML標(biāo)記語(yǔ)言進(jìn)行解釋并且將它顯示在瀏覽器窗口中。 在Web服務(wù)器上，運(yùn)行的是WWW服務(wù)器程序 可以是Windows下的IIS，也可以是Linux下的Apache或其它的WWW服務(wù)器程序。,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.1.2 WWW簡(jiǎn)介,WWW萬(wàn)維網(wǎng)的工作流程 靜態(tài)網(wǎng)頁(yè),第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.1.2 WWW簡(jiǎn)介,WWW萬(wàn)維網(wǎng)的工作流程 動(dòng)態(tài)網(wǎng)頁(yè),第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.1.3統(tǒng)一資源定位器,統(tǒng)一資源定位器（URL，Uniform Resource Locator） URL的格式為： :/ ftp:/ 大部分主機(jī)會(huì)提供一個(gè)缺省的

5、文件名，如 index.html、default.html等。,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.1.3統(tǒng)一資源定位器,表1.3 部分傳輸協(xié)議的含義,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.1.4 IP地址與域名,Internet上計(jì)算機(jī)的地址有兩種表示形式： IP地址和域名。 IP地址由32位二進(jìn)制數(shù)字組成 國(guó)際通行一種“點(diǎn)分十進(jìn)制表示法” 例 10110110 11011001 10111110 01101101 182 217 190 109,每組取值范圍0-255,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.1.4 IP地址與域名,IP地址分為5類(lèi)：A、B、C、D、E。 A類(lèi)（ -127.25

6、5.255.255） Internet有126個(gè)A類(lèi)地址，每個(gè)A類(lèi)地址可連接16387064臺(tái)主機(jī) B類(lèi)（-55） 每個(gè)B類(lèi)地址可連接64516臺(tái)主機(jī)，Internet有16256個(gè)B類(lèi)地址； C類(lèi)（-223. 255.255.255） 每個(gè)C類(lèi)地址可連接254臺(tái)主機(jī)，Internet有2054512個(gè)C類(lèi)地址。,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,0,1,1,0,1,0,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.1.4 IP地址與域名,DNS域名服務(wù)系統(tǒng)，是因特網(wǎng)中一項(xiàng)核心服務(wù)， 它將域名和IP地址相互映射到一個(gè)分布式數(shù)據(jù)系統(tǒng)，通過(guò)該系統(tǒng)將域名與I

7、P地址一一對(duì)應(yīng)，并將域名映射成IP地址，實(shí)現(xiàn)快速連接站點(diǎn)的目的。 中山大學(xué)網(wǎng)址：,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.1.4 IP地址與域名,域名就是Internet上主機(jī)的名字，它采用層次結(jié)構(gòu)，每一層構(gòu)成一個(gè)子域名，級(jí)別從左到右逐漸增高，并用圓點(diǎn)隔開(kāi)，表現(xiàn)形式為： 主機(jī)名.n級(jí)子域名.二級(jí)子域名.頂級(jí)域名. （通常2n5）,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.1.4 IP地址與域名,表1.1 部分國(guó)家和地區(qū)的頂層域名,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.1.4 IP地址與域名,表1.2 國(guó)際通用頂級(jí)域名,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.2網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)知識(shí),構(gòu)成網(wǎng)頁(yè)的基本元素 文本、圖片、動(dòng)畫(huà)、聲音、鏈

8、接、表單等。,圖片,鏈接,表單,文本,GIF、JPEG/JPG和PNG,互功能的重要元素,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.2.2網(wǎng)頁(yè)制作和美化的工具,FrontPage FrontPage是微軟公司開(kāi)發(fā)的網(wǎng)頁(yè)制作工具。 Dreamweaver Dreamweaver是Macromedia公司出品的網(wǎng)頁(yè)制作工具，可以說(shuō)是當(dāng)前最流行的網(wǎng)頁(yè)編輯器。 它支持所見(jiàn)即所得的方式編輯網(wǎng)頁(yè)，有強(qiáng)大的站點(diǎn)管理功能，便于站點(diǎn)的維護(hù)和管理； 支持最新的HTML語(yǔ)言的擴(kuò)展功能； 支持層技術(shù)，還提供了層動(dòng)畫(huà)； 內(nèi)置強(qiáng)大的交互式網(wǎng)頁(yè)制作功能。,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.2.2網(wǎng)頁(yè)制作和美化的工具,Photoshop

9、 Photoshop是Adobe公司最著名的圖像處理軟件，是圖像制作首選工具。它對(duì)圖像的處理方式多樣，特別是對(duì)圖像的濾鏡處理，可以制作出許多特殊的圖像效果。Photoshop CS版提供的功能可以輕松地將圖像進(jìn)行切片等操作，方便網(wǎng)頁(yè)使用，支持將圖像存儲(chǔ)為網(wǎng)頁(yè)支持的GIF、JPEG、PNG等格式。 Fireworks Fireworks是Macromedia公司專(zhuān)門(mén)為制作網(wǎng)頁(yè)圖像設(shè)計(jì)開(kāi)發(fā)的軟件。它也有一個(gè)集成的網(wǎng)頁(yè)圖像開(kāi)發(fā)環(huán)境。具有同時(shí)按位圖圖形和矢量圖形的模式進(jìn)行編輯的特點(diǎn)。Fireworks也可以制作簡(jiǎn)單的翻頁(yè)型動(dòng)畫(huà)。,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.2.2網(wǎng)頁(yè)制作和美化的工具,Flash

10、Flash是Macromedia公司專(zhuān)門(mén)為網(wǎng)頁(yè)動(dòng)畫(huà)設(shè)計(jì)開(kāi)發(fā)的軟件。用該軟件制作的動(dòng)畫(huà)采用的“流”控制技術(shù)，可以一邊下載動(dòng)畫(huà)，一邊播放。 在Flash中，大量的圖形是矢量圖形，因此，用Flash制作的圖形在放大與縮小的操作中沒(méi)有失真，而且用它制作的動(dòng)畫(huà)文件所占的體積較小，這些都是Flash特有的優(yōu)點(diǎn)。 另外，F(xiàn)lash也提供了動(dòng)作屬性的功能，通過(guò)動(dòng)作屬性可以輕松地完成一些特殊的控制以及進(jìn)行一些交互處理，不用編寫(xiě)一行代碼也可以完成許多精彩的控制效果。,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.2.3網(wǎng)頁(yè)的色彩搭配,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.2.3網(wǎng)頁(yè)的色彩搭配,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.2.3網(wǎng)

11、頁(yè)的色彩搭配,網(wǎng)頁(yè)色彩搭配的原則： 色彩的鮮明性 色彩的獨(dú)特性 色彩的聯(lián)想性 色彩搭配的合理性 色彩的藝術(shù)性,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.2.3網(wǎng)頁(yè)的色彩搭配,網(wǎng)頁(yè)色彩搭配的技巧： 同種色彩搭配 鄰居色彩搭配 對(duì)比色彩搭配 暖色色彩搭配 冷色色彩搭配 有主色的混合色彩搭配。,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,網(wǎng)站色彩的使用,藍(lán)色調(diào)為主，加上白色和紅色，強(qiáng)調(diào)權(quán)威與真實(shí),第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,網(wǎng)站色彩的使用,橙色為主，白色為輔，具有輕快，時(shí)尚的效果,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,網(wǎng)站色彩的使用,綠色為主，白色為輔，產(chǎn)生舒適、優(yōu)雅、適于閱讀的氣氛,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,網(wǎng)站色彩的使用,紅色為

12、主，產(chǎn)生熱情、活力的感覺(jué)，充滿歡樂(lè)的氣氛,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.3HTML語(yǔ)言基礎(chǔ),HTML是網(wǎng)頁(yè)主要的組成部分，HTML網(wǎng)頁(yè)文件是組成網(wǎng)站的基本單位。每個(gè)網(wǎng)頁(yè)都是由HTML語(yǔ)言組成。 HTML（HyperText Markup Language，超文本標(biāo)記語(yǔ)言） 所謂超文本，就是可以加入圖片、聲音、動(dòng)畫(huà)、視頻、鏈接等內(nèi)容。 HTML文件可以直接由瀏覽器IE解釋執(zhí)行，無(wú)須編譯。 HTML跨平臺(tái)（Windows、Linux）。 HTML文件即根據(jù)HTML語(yǔ)法規(guī)則寫(xiě)出來(lái)的文件。一般擴(kuò)展名為.html或.htm,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.3.1HTML語(yǔ)言簡(jiǎn)介,HTML語(yǔ)言的語(yǔ)法規(guī)則

13、 單標(biāo)簽：?jiǎn)为?dú)使用就能完整地表達(dá)意思。 換行，插入一條水平線。 雙標(biāo)簽：由“始標(biāo)簽”和“尾標(biāo)簽”構(gòu)成，成對(duì)出現(xiàn)。 語(yǔ)法格式：內(nèi)容，如文字加粗標(biāo)簽文字 標(biāo)簽的屬性 語(yǔ)法格式： 如,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.3.2HTML文檔的基本結(jié)構(gòu),HTML文檔的基本結(jié)構(gòu),在最外層， 表示這對(duì)標(biāo)記間的內(nèi)容是 HTML文檔。,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.3.3HTML的常用標(biāo)記及其用法,標(biāo)題標(biāo)記,該標(biāo)記主要用于 定義文章內(nèi)章節(jié) 標(biāo)題的顯示格式。 其中“i”是數(shù)字1到6中 任意一個(gè)，表示尺寸。,該標(biāo)記主要用于 定義文章內(nèi)章節(jié) 標(biāo)題的顯示格式。 其中“i”是數(shù)字1到6中 任意一個(gè)，表示尺寸。,該標(biāo)記主要用

14、于 定義文章內(nèi)章節(jié) 標(biāo)題的顯示格式。 其中“i”是數(shù)字1到6中 任意一個(gè)，表示尺寸。,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.3.3HTML的常用標(biāo)記及其用法,文本標(biāo)記 下劃線標(biāo)記、粗體字標(biāo)記、斜體字標(biāo)記。,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.3.3HTML的常用標(biāo)記及其用法,段落標(biāo)記,Align屬性定義 新開(kāi)始的一行內(nèi)容在 頁(yè)面中的對(duì)齊位置， 屬性值可以是left、 Center、right。,Align屬性定義 新開(kāi)始的一行內(nèi)容在 頁(yè)面中的對(duì)齊位置， 屬性值可以是left、 Center、right。,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.3.3HTML的常用標(biāo)記及其用法,強(qiáng)制換行標(biāo)記,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制

15、作概述,1.3.3HTML的常用標(biāo)記及其用法,列表標(biāo)記、,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.3.3HTML的常用標(biāo)記及其用法,表格標(biāo)記,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.3.3HTML的常用標(biāo)記及其用法,表1.1 表格標(biāo)簽,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.3.3HTML的常用標(biāo)記及其用法,圖像標(biāo)記 ,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.3.3HTML的常用標(biāo)記及其用法,超鏈接標(biāo)記,指明該處是一個(gè)鏈接， href表明鏈接目標(biāo)。,指明該處是一個(gè)鏈接， href表明鏈接目標(biāo)。,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,從上面的介紹中可以看到，如果完全用HTML代碼編寫(xiě)網(wǎng)頁(yè)是一件非常辛苦的事情。 首先是工作量大，每一個(gè)細(xì)小

16、的地方都要編寫(xiě)， 其次需要記憶大量的HTML標(biāo)記符，另外，還不知道書(shū)寫(xiě)的代碼在瀏覽器中顯示出來(lái)到底是什么模樣，必須在瀏覽器中才可以看到，往往需要反復(fù)修改、保存、瀏覽才能達(dá)到預(yù)想的效果，效率很低。 因此人們開(kāi)發(fā)了很多的工具軟件來(lái)設(shè)計(jì)網(wǎng)頁(yè)。它們特點(diǎn)之一就是以所見(jiàn)即所得的方式來(lái)編寫(xiě)網(wǎng)頁(yè)。Macromedia公司的Dreamweaver是眾多可視化網(wǎng)頁(yè)編輯工具中的佼佼者，據(jù)統(tǒng)計(jì)，世界上70的網(wǎng)站都是用它開(kāi)發(fā)的.,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.4 網(wǎng)站建設(shè)的流程,網(wǎng)站的功能可以有很多，包括各類(lèi)宣傳網(wǎng)站、資料庫(kù)、信息或商務(wù)平臺(tái)等。在建設(shè)網(wǎng)站前，首先應(yīng)該有一個(gè)整體的規(guī)劃和目標(biāo)。具體的工作流程一般可以通過(guò)以

17、下步驟實(shí)現(xiàn)。 1.4.1 整體規(guī)劃 在網(wǎng)頁(yè)設(shè)計(jì)前，首先要對(duì)所要制作的網(wǎng)站的特點(diǎn)進(jìn)行分析并選擇相應(yīng)的設(shè)計(jì)思路，從而確定主題與設(shè)計(jì)風(fēng)格。 1以宣傳為目的的網(wǎng)站 要求設(shè)計(jì)美觀，能夠在網(wǎng)站視覺(jué)效果上表達(dá)創(chuàng)意和使所要宣傳的內(nèi)容一目了然。如各類(lèi)企業(yè)的宣傳型網(wǎng)站，就需要表現(xiàn)該企業(yè)的企業(yè)文化和特色。這種網(wǎng)站特點(diǎn)是頁(yè)面大量運(yùn)用圖片和動(dòng)畫(huà)。,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,2以信息傳遞為目的的網(wǎng)站 主要強(qiáng)調(diào)信息量和信息搜索的方便快捷，主要以文本為表現(xiàn)形式。如搜狐，網(wǎng)易等門(mén)戶網(wǎng)站等。 3其他功能性網(wǎng)站 強(qiáng)調(diào)網(wǎng)站的功能,具有一定的用戶針對(duì)性和功能針對(duì)性。如各類(lèi)商務(wù)網(wǎng)站（淘寶，ebay等）；各類(lèi)學(xué)習(xí)網(wǎng)站，網(wǎng)絡(luò)詞典，網(wǎng)絡(luò)圖書(shū)

18、館。 主題確定以后，就要根據(jù)網(wǎng)站的功能來(lái)選擇網(wǎng)站所使用的技術(shù)。首先要確定Web服務(wù)器平臺(tái)，是采用Windows的IIS，還是Linux的Apache；然后要根據(jù)網(wǎng)站功能的復(fù)雜程度決定是采用靜態(tài)網(wǎng)站還是動(dòng)態(tài)網(wǎng)站。對(duì)于動(dòng)態(tài)網(wǎng)站，還要考慮使用何種數(shù)據(jù)庫(kù)及采用什么技術(shù)來(lái)支持。,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.4.2 網(wǎng)頁(yè)設(shè)計(jì)與制作,網(wǎng)站的前期工作完成后，就需要按確定的主題進(jìn)行資料和素材的搜集，采用網(wǎng)頁(yè)制作工具去設(shè)計(jì)并完成每一個(gè)網(wǎng)頁(yè)的制作。網(wǎng)頁(yè)設(shè)計(jì)工作主要包括：網(wǎng)站的形象設(shè)計(jì)、布局與版面的設(shè)計(jì)和頁(yè)面制作與程序設(shè)計(jì)。 網(wǎng)站的形象設(shè)計(jì)：包括網(wǎng)站的標(biāo)志設(shè)計(jì)、中英文設(shè)計(jì)、網(wǎng)站的主體顏色及字體設(shè)計(jì) 文字是網(wǎng)頁(yè)中非

19、常重要的頁(yè)面元素，網(wǎng)站內(nèi)容是通過(guò)文字信息來(lái)傳遞的。最適合網(wǎng)頁(yè)正文顯示的字號(hào)大小為9像素或12像素。字體的選擇最好是采用Windows自帶字體，如果確實(shí)要使用特殊的字體，就要將文字制成圖像，插入到頁(yè)面中去，否則有可能在瀏覽器內(nèi)無(wú)法正常顯示。,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,常見(jiàn)的頁(yè)面布局技術(shù)有三種： 一是表格布局技術(shù)，方法是將各種網(wǎng)頁(yè)元素放到無(wú)邊框的表格中，使用表格來(lái)對(duì)他們進(jìn)行定位； 二是通過(guò)CSS技術(shù)進(jìn)行完全地定位文本和圖像； 三是利用DIVCSS布局技術(shù)可以較好地做到信息結(jié)構(gòu)清晰、內(nèi)容和表現(xiàn)相分離。,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,網(wǎng)站頁(yè)面版式可以分為兩大類(lèi)： 一類(lèi)稱為“形象頁(yè)面”，這種頁(yè)面多用于企

20、業(yè)的形象宣傳，它的特點(diǎn)是頁(yè)面以圖像、Flash為主，文字內(nèi)容較少； 另一類(lèi)稱為“內(nèi)容頁(yè)面”，多數(shù)信息資訊類(lèi)網(wǎng)站大多采用此版式，其特點(diǎn)是信息多，根據(jù)信息內(nèi)容分類(lèi)來(lái)劃分頁(yè)面結(jié)構(gòu)，最常見(jiàn)的結(jié)構(gòu)布局方式有“同”字形、“廠”字形、左右框架型和L型等。,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,LOGO欣賞,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,版面設(shè)計(jì),網(wǎng)頁(yè)版面布局可按創(chuàng)意草案、粗略布局、最后定案 三個(gè)步驟來(lái)進(jìn)行。,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,幾種常見(jiàn)的頁(yè)面布局樣式：,“廠”字型,主菜單以及橫條網(wǎng)站標(biāo)志+廣告條,主 菜 單,顯 示內(nèi)容,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,幾種常見(jiàn)的頁(yè)面布局樣式：,“口”字型,主菜單,主要內(nèi)容,友情鏈接

21、等,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,幾種常見(jiàn)的頁(yè)面布局樣式：,自由式，又稱POP布局,頁(yè)面布局像一張宣傳海報(bào)，以一張精美圖片作為頁(yè)面的設(shè)計(jì)中心，菜單欄目自由擺放。,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,測(cè)試項(xiàng)目 1. 鏈接測(cè)試 主要看網(wǎng)頁(yè)中是否有超鏈接掉鏈的情況。 2. 外觀測(cè)試 3. 速度測(cè)試 速度越快越好。 4. 腳本和程序測(cè)試 測(cè)試頁(yè)面中的JavaScript以及CGI程序是否能正常工作。,返回,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.4.4 網(wǎng)頁(yè)的上傳與發(fā)布,網(wǎng)站制作完成后，就可以利用FTP等方式上傳到服務(wù)器并發(fā)布到互聯(lián)網(wǎng)上了。 網(wǎng)站空間的獲取一般有自設(shè)服務(wù)器、租用網(wǎng)頁(yè)空間或虛擬主機(jī)、申請(qǐng)免費(fèi)網(wǎng)頁(yè)空間三種方法。 同時(shí)，還可以通過(guò)“中國(guó)互聯(lián)網(wǎng)絡(luò)信息中心”(CNNIC)的域名注冊(cè)系統(tǒng)申請(qǐng)諸如.com、.cn、.net等域名，詳細(xì)的申請(qǐng)方式可以到CNNIC網(wǎng)站查詢。 利用域名可以使瀏覽者更容易記住你的網(wǎng)站。網(wǎng)頁(yè)上傳以后，還必須保持內(nèi)容的經(jīng)常性更新，這樣才能不斷吸引訪問(wèn)者點(diǎn)擊瀏覽。,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作概述,1.4 網(wǎng)站建設(shè)的流程,網(wǎng)頁(yè)和網(wǎng)站 網(wǎng)站是網(wǎng)頁(yè)的集合，是一個(gè)整體，其中包括一個(gè)首頁(yè)和若干個(gè)網(wǎng)頁(yè)。網(wǎng)站設(shè)計(jì)者先把整個(gè)網(wǎng)站結(jié)構(gòu)規(guī)劃好，然后再分別制作各個(gè)網(wǎng)頁(yè)。大多數(shù)網(wǎng)站為網(wǎng)站瀏覽者提供一個(gè)首頁(yè)，首頁(yè)再鏈接多個(gè)網(wǎng)頁(yè)。一般來(lái)說(shuō)，一個(gè)網(wǎng)站是由很多網(wǎng)頁(yè)構(gòu)建而成的。 一般網(wǎng)站,第1章 網(wǎng)頁(yè)設(shè)計(jì)與制作