第1章 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)

1、2021-10-191網(wǎng)頁(yè)設(shè)計(jì)與制作課程安排：上課時(shí)間：1-11周。上課地點(diǎn)：仙z2-113上課方式：講課+實(shí)踐上課要求：課上認(rèn)真聽(tīng)，課下多練習(xí)聯(lián)系方式：參考教材：網(wǎng)頁(yè)設(shè)計(jì)與制作(cs4中文版)從新手到高手 -唐有明 張春蓉等編著 -清華大學(xué)出版社2021-10-192第1章 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)internet是由遍布全球的各種網(wǎng)絡(luò)系統(tǒng)、主機(jī)系統(tǒng)，通過(guò)統(tǒng)一的協(xié)議tcp/ip聯(lián)接在一起所組成的世界性計(jì)算機(jī)網(wǎng)絡(luò)系統(tǒng)。 2021-10-193第1章 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)1969年美國(guó)國(guó)防部高級(jí)研究所計(jì)劃局（arpa）建立arpanet，1986年美國(guó)國(guó)家科學(xué)基金會(huì)（nsf）建立了nsfnet。 1991年6月中國(guó)

2、第一條與國(guó)際互聯(lián)網(wǎng)連接的專(zhuān)線(xiàn)建成，我國(guó)1994年3月正式加入internet，目前我國(guó)有權(quán)管理internet國(guó)際出口的單位有5家。 arpa于1962年10月開(kāi)始了研制大型網(wǎng)絡(luò)的計(jì)劃arpanet，1969年12月初步建成這個(gè)試驗(yàn)性網(wǎng)絡(luò)。 1980年發(fā)展成為tcp/ip協(xié)議，1983年美國(guó)軍方將tcp/ip協(xié)議確定為網(wǎng)絡(luò)協(xié)議標(biāo)準(zhǔn)1986年美國(guó)國(guó)家科學(xué)基金會(huì)（nsf）建立了nsfnet。 2021-10-194第1章 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)1987年，ibm、mci和merit共同組建了ans。1992年ans建立了一個(gè)新的主干網(wǎng)ansnet。1989年3月，歐洲粒子物理實(shí)驗(yàn)室（cern）英國(guó)計(jì)算機(jī)學(xué)者

3、tim berners-lee建議建立一個(gè)由超文本鏈接方式組成的信息網(wǎng)web。 1990年11月，next公司（apple創(chuàng)始人斯蒂夫喬布斯組建）發(fā)布了最初的world wide web（后來(lái)簡(jiǎn)稱(chēng)www或w3）模型。1991年，cern正式向外界發(fā)布了www協(xié)議標(biāo)準(zhǔn)。在www標(biāo)準(zhǔn)基礎(chǔ)上，由美國(guó)麻省理工學(xué)院、cern及法國(guó)計(jì)算機(jī)與控制國(guó)家研究院參加組成的合作機(jī)構(gòu)提出了新的、更為復(fù)雜的超文本標(biāo)記語(yǔ)言html草案，發(fā)布了html標(biāo)準(zhǔn)1.0版，后來(lái)升級(jí)為html2.0版和3.0版。1994年11月，netscape communicator （網(wǎng)景公司）開(kāi)發(fā)的netscape navigator（導(dǎo)航

4、者）問(wèn)世。 microsoft也于一年后的1995年11月推出自己的瀏覽器internet explorer。 2021-10-195第1章 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)internet在中國(guó)的發(fā)展 三個(gè)階段 ：第一階段（19871993年），電子郵件使用階段 1991年6月中國(guó)第一條與國(guó)際internet聯(lián)網(wǎng)的專(zhuān)線(xiàn)由北京的中國(guó)科學(xué)院高能物理所建成。 第二階段（19941995年），教育科研網(wǎng)發(fā)展階段1994年4月正式開(kāi)通了中國(guó)與國(guó)際internet的64kbps專(zhuān)線(xiàn)連接，并設(shè)立了中國(guó)最高域名（cn）服務(wù)器。到1995年初，高能所將衛(wèi)星專(zhuān)線(xiàn)改用海地電纜，通過(guò)日本進(jìn)入internet。這時(shí)，我國(guó)才算是真正加入了

5、國(guó)際internet行列之中。 2021-10-196第1章 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)1994年9月，中國(guó)郵電部門(mén)開(kāi)始計(jì)劃進(jìn)入internet，建立中國(guó)公用internet網(wǎng)，即chinanet，作為公共商用網(wǎng)向公眾提供internet服務(wù)。 第三階段（1995年至今），商業(yè)應(yīng)用階段中國(guó)現(xiàn)有的五大internet網(wǎng)絡(luò) v中國(guó)公用計(jì)算機(jī)互聯(lián)網(wǎng)絡(luò)（chinanet） v中國(guó)教育與科研網(wǎng)絡(luò)（cernet） v中國(guó)科技網(wǎng)（cstnet） v中國(guó)金橋信息網(wǎng)（chinagbnet） v中國(guó)公眾多媒體通信網(wǎng)（169網(wǎng)） 2021-10-197第1章 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)internet的功能 1. 電子郵件e-mailpop3

6、 serversmtp serversmtp（simple mail protocol，簡(jiǎn)單郵件傳輸協(xié)議）pop3（post office protocol version 3，郵局協(xié)議） 2.ftp文件傳輸協(xié)議ftp server2021-10-198第1章 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)3.遠(yuǎn)程登錄4.網(wǎng)上查詢(xún)名稱(chēng)地址錄信息檢索工具索引式信息檢索工具交互式信息檢索工具 5.網(wǎng)上交流公告板系統(tǒng)bbs網(wǎng)絡(luò)新聞組電子郵件通信組 聊天 2021-10-199第1章 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)tcp/ip簡(jiǎn)介網(wǎng)絡(luò)通信協(xié)議就是計(jì)算機(jī)之間為互相通信、傳遞信息而所約定的規(guī)則。協(xié)議的實(shí)質(zhì)是網(wǎng)絡(luò)通信所使用的一種語(yǔ)言語(yǔ)言。2021-10-19

7、10第1章 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)ipip地址地址是網(wǎng)上的通信地址，是計(jì)算機(jī)、服務(wù)器、路由器的端口地址，每一個(gè)ip地址在全球是惟一的，是運(yùn)行tcp/ip協(xié)議的惟一標(biāo)識(shí)。 207 . 49 . 68 . 15網(wǎng)絡(luò)地址 域名 代表ip地址 52ip地址也稱(chēng)為url（unique resource location，中文意義為“統(tǒng)一資源定位符”），ip地址由四個(gè)從0到255之間的32位二進(jìn)制組成，分為網(wǎng)絡(luò)地址和主機(jī)地址。主機(jī)地址2021-10-1911第1章 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ) 隨著internet的快速發(fā)展，各種類(lèi)型的網(wǎng)站正被不斷的建立。無(wú)論建立任何網(wǎng)站，都離不開(kāi)網(wǎng)頁(yè)設(shè)計(jì)技術(shù)。這一章首先介

8、紹網(wǎng)站建設(shè)的基本流程，了解網(wǎng)站是如何從無(wú)到有的；接著再介紹網(wǎng)頁(yè)的相關(guān)版式與風(fēng)格；最后在介紹設(shè)計(jì)網(wǎng)頁(yè)的一些主要技術(shù)和軟件。2021-10-19121.1 基本概念l網(wǎng)站（web site）是各種各樣網(wǎng)頁(yè)的集合，有的網(wǎng)站內(nèi)容眾多，如新浪、搜狐等門(mén)戶(hù)網(wǎng)站；有的網(wǎng)站只有幾個(gè)頁(yè)面，如個(gè)人網(wǎng)站。l網(wǎng)頁(yè)（web page）實(shí)際上是一個(gè)文件，網(wǎng)頁(yè)經(jīng)由網(wǎng)址（url）來(lái)識(shí)別與存取。當(dāng)瀏覽者輸入一個(gè)網(wǎng)址或單擊某個(gè)鏈接，在瀏覽器中顯示出來(lái)的就是一個(gè)網(wǎng)頁(yè)。2021-10-19131.1 基本概念是在動(dòng)態(tài)網(wǎng)頁(yè)出現(xiàn)后相對(duì)而言的傳統(tǒng)采用html編寫(xiě)的網(wǎng)頁(yè)。指的是采用asp、php、cgi等程序動(dòng)態(tài)生成的頁(yè)面，在網(wǎng)絡(luò)空間中并不

9、存在這個(gè)頁(yè)面，只有在接到用戶(hù)的訪問(wèn)要求后才生成并傳輸?shù)接脩?hù)的瀏覽器中。2021-10-19141.1 基本概念l瀏覽器：用于打開(kāi)顯示網(wǎng)頁(yè)的軟件。最常見(jiàn)的是windows系統(tǒng)自帶的ie瀏覽器。還有火狐firefox、360安全瀏覽器、遨游等等。 1）網(wǎng)址：用于定位某個(gè)網(wǎng)站某個(gè)頁(yè)面的一串字符，通常是這種格式http:/2）主頁(yè)：訪問(wèn)網(wǎng)站時(shí)，默認(rèn)打開(kāi)的第一個(gè)頁(yè)面就是主頁(yè)也叫首頁(yè)。2021-10-19151.2 網(wǎng)站整體策劃l規(guī)范的網(wǎng)站建設(shè)需要進(jìn)行整體的策劃，具體流程如圖所示。2021-10-19161.3 網(wǎng)頁(yè)的基本構(gòu)成l雖然網(wǎng)頁(yè)種類(lèi)繁多，形式內(nèi)容各有不同。但網(wǎng)頁(yè)的基本構(gòu)成要素大體相同。 logo

10、logo 是網(wǎng)站的標(biāo)志。 導(dǎo)航條導(dǎo)航條 導(dǎo)航條可以幫助瀏覽者迅速的找到需要的信息。 2021-10-19171.3 網(wǎng)頁(yè)的基本構(gòu)成 banner 網(wǎng)頁(yè)中的一些廣告。 內(nèi)容板塊內(nèi)容板塊 取決與網(wǎng)站的類(lèi)型。2021-10-19181.3 網(wǎng)頁(yè)的基本構(gòu)成 版尾模塊版尾模塊 置于網(wǎng)頁(yè)的最底端，通常放置網(wǎng)站的版權(quán)信息。2021-10-19191.4 網(wǎng)頁(yè)的基本布局l“同同”字型字型 也稱(chēng)“國(guó)”字型或“口”字型結(jié)構(gòu)布局，此種布局的最上邊是網(wǎng)站的標(biāo)題及橫幅廣告，左右分列兩條內(nèi)容，中間是主要部分，最下邊的是版權(quán)區(qū) 。該布局的優(yōu)點(diǎn)是充分利用版面，信息量大，與其它頁(yè)面的鏈接多，切換方便。缺點(diǎn)是頁(yè)面擁擠，不夠靈活。

11、 如圖：2021-10-19201.4 網(wǎng)頁(yè)的基本布局l“t”字型結(jié)構(gòu)布局 也稱(chēng)“拐角型” 結(jié)構(gòu)布局，該頁(yè)面頂部是標(biāo)題及橫幅廣告，左側(cè)通常放導(dǎo)航鏈接，右側(cè)大部分空間用來(lái)顯示網(wǎng)頁(yè)的內(nèi)容。此種布局的優(yōu)點(diǎn)是頁(yè)面結(jié)構(gòu)清晰，主次分明，欄目擴(kuò)充便利。缺點(diǎn)是規(guī)矩呆板，如果細(xì)節(jié)色彩上不加注意，很容易落入“看之無(wú)味”的感覺(jué)。如圖：2021-10-19211.4 網(wǎng)頁(yè)的基本布局l左右框架型 這是一種左右分割屏幕的框架結(jié)構(gòu)，一般在左面是導(dǎo)航鏈接，最上面有時(shí)會(huì)有一個(gè)小的標(biāo)題或標(biāo)志，右面通常顯示左邊的鏈接內(nèi)容。優(yōu)點(diǎn)是結(jié)構(gòu)清晰，自由活潑，可顯示較多的文字、圖像。缺點(diǎn)是將兩部分有機(jī)的結(jié)合比較困難，不適合數(shù)據(jù)巨大的網(wǎng)站。20

12、21-10-19221.4 網(wǎng)頁(yè)的基本布局l上下框架型 上下框架型與左右框架型類(lèi)似，區(qū)別僅在于這里采用上下分割。l封面型 也稱(chēng)“pop型”或自由型布局，通常以一張精美圖片作為頁(yè)面的設(shè)計(jì)中心，菜單欄目自由地?cái)[放在頁(yè)面上。其優(yōu)點(diǎn)是頁(yè)面令人賞心悅目，缺點(diǎn)是顯示速度慢，文字信息量少，只適合以圖像為主要內(nèi)容的站點(diǎn)。2021-10-19231.4 網(wǎng)頁(yè)的基本布局lflash型 這種結(jié)構(gòu)與封面型類(lèi)似，只是這里采用了目前流行的flash設(shè)計(jì)，與封面型不同的是，頁(yè)面所表達(dá)的信息因flash的強(qiáng)大功能而更為豐富，頁(yè)面上不僅可以有文字、圖像，還可以加入動(dòng)畫(huà)、視頻與音頻效果。l變化型 變化型是上面幾種類(lèi)型的綜合與演變

13、。2021-10-19241.5 網(wǎng)頁(yè)色彩l三原色（rgb）l常見(jiàn)色彩的rgb值： black = #000000 green = #008000 silver = #c0c0c0 lime = #00ff00 gray = #808080 olive = #808000 white = #ffffff yellow = #ffff00 maroon = #800000 navy = #000080 red = #ff0000 blue = #0000ff purple = #800080 teal = #008080 fuchsia= #ff00ff aqua = #00ffff2021-1

14、0-19251.5 網(wǎng)頁(yè)色彩l不同色系的應(yīng)用藍(lán)色系：商業(yè)和宣傳用色，體現(xiàn)一種專(zhuān)業(yè)和正式的氛圍；綠色系：自然色，有很強(qiáng)的自然效果，緩解視力上的疲勞，用于環(huán)保相關(guān)的場(chǎng)合；紅色系：運(yùn)動(dòng)的色彩，有很強(qiáng)的視覺(jué)感染力和號(hào)召力；黃色系：輕松隨意的生活氣息，體現(xiàn)一種友善和多維的效果，非常鮮明可以與許多種顏色搭配；黑色系：神秘而莊重。2021-10-19261.6 常用網(wǎng)頁(yè)設(shè)計(jì)軟件lphotoshop photoshop 簡(jiǎn)介簡(jiǎn)介 photoshop是adobe公司開(kāi)發(fā)的強(qiáng)大的圖像處理軟件，在圖像設(shè)計(jì)及處理方面得到廣泛的應(yīng)用，是公認(rèn)最出色的圖像處理軟件。目前幾乎所有的廣告出版、平面印刷等領(lǐng)域都選擇photosh

15、op 做為制作軟件。2021-10-19271.6 常用網(wǎng)頁(yè)設(shè)計(jì)軟件圖形繪制圖形繪制主要功能主要功能圖像處理圖像處理2021-10-19281.6 常用網(wǎng)頁(yè)設(shè)計(jì)軟件2021-10-19291.6 常用網(wǎng)頁(yè)設(shè)計(jì)軟件2021-10-19301.6 常用網(wǎng)頁(yè)設(shè)計(jì)軟件2021-10-19311.6 常用網(wǎng)頁(yè)設(shè)計(jì)軟件ldreamweaver cs4dreamweaver cs4簡(jiǎn)介簡(jiǎn)介l網(wǎng)頁(yè)三劍客：網(wǎng)頁(yè)三劍客： 網(wǎng)頁(yè)三劍客，顧名思義，是一套強(qiáng)大的網(wǎng)頁(yè)編輯工具，最初是由macromedia公司 (現(xiàn)被adobe公司收購(gòu))開(kāi)發(fā)出來(lái)的。由dreamweaver (網(wǎng)頁(yè)制作 )，fireworks (矢量圖形制

16、作和圖像處理 )，flash (動(dòng)畫(huà)制作 )三個(gè)軟件組成，俗稱(chēng)三劍客。現(xiàn)已逐漸被photoshop取代2021-10-19321.6 常用網(wǎng)頁(yè)設(shè)計(jì)軟件 adobe dreamweaver cs4是建立web站點(diǎn)和應(yīng)用程序的專(zhuān)業(yè)工具。它將可視布局工具、應(yīng)用程序開(kāi)發(fā)功能和代碼編輯支持組合在一起，其功能強(qiáng)大，使得各個(gè)層次的開(kāi)發(fā)人員和設(shè)計(jì)人員都能夠快速創(chuàng)建界面吸引人的基于標(biāo)準(zhǔn)的網(wǎng)站和應(yīng)用程序。從對(duì)基于css的設(shè)計(jì)的領(lǐng)先支持到手工編碼功能dreamweaver提供了專(zhuān)業(yè)人員在一個(gè)集成、高效的環(huán)境中所需的工具。開(kāi)發(fā)人員可以使用dreamweaver 及所選擇的服務(wù)器技術(shù)來(lái)創(chuàng)建功能強(qiáng)大的internet應(yīng)用

17、程序，從而使用戶(hù)能連接到數(shù)據(jù)庫(kù)、web服務(wù)和舊式系統(tǒng)。2021-10-19331.6 常用網(wǎng)頁(yè)設(shè)計(jì)軟件2021-10-19341.6 常用網(wǎng)頁(yè)設(shè)計(jì)軟件2021-10-19351.6 常用網(wǎng)頁(yè)設(shè)計(jì)軟件2021-10-19361.6 常用網(wǎng)頁(yè)設(shè)計(jì)軟件lflash flash 簡(jiǎn)介簡(jiǎn)介 flash是macromedia公司開(kāi)發(fā)的矢量動(dòng)畫(huà)及多媒體開(kāi)發(fā)軟件。l基于矢量繪圖l流式播放技術(shù)l多媒體特性l強(qiáng)大的交互功能l廣泛的平臺(tái)支持l易學(xué)易用、可擴(kuò)展性好2021-10-19371.6 常用網(wǎng)頁(yè)設(shè)計(jì)軟件l矢量圖像僅由線(xiàn)條和線(xiàn)條所封閉的填充區(qū)域組成，所需存儲(chǔ)空間小，可任意縮放尺寸而不影響畫(huà)面質(zhì)量；l位圖圖像由大

18、量的像素點(diǎn)組成，比較逼真，但所需存儲(chǔ)空間大，隨著圖像尺寸的放大畫(huà)面品質(zhì)將大幅度下降。2021-10-19381.6 常用網(wǎng)頁(yè)設(shè)計(jì)軟件l流式（stream）播放技術(shù)使得動(dòng)畫(huà)可以邊播放邊下載，從而緩解瀏覽者焦急等待的情緒。l可以將動(dòng)畫(huà)、視頻、音樂(lè)、聲效等有機(jī)融合在一起l支持多種圖像格式文件導(dǎo)入l可導(dǎo)入photoshop、illustrator、freehand等軟件制作的圖形和圖像l可導(dǎo)入adobe pdf電子文檔和adobe illustrator 10文件l支持視頻、音頻文件導(dǎo)入l可從外部調(diào)用視頻文件l可使用mp3l支持多種動(dòng)畫(huà)輸出格式lswf、spl、gif、ai、bmp、jpg、png、avi、mov、mav、emf、wmf、eps、dxf2021-10-19391.6 常用網(wǎng)頁(yè)設(shè)計(jì)軟件l內(nèi)置的actionscript腳本語(yǔ)言，易于精確實(shí)現(xiàn)復(fù)雜的交互事件行為控制。l可在動(dòng)畫(huà)中加入滾動(dòng)條、復(fù)選框、下拉菜單和拖動(dòng)物體等各種交互組件；l可與java或其他類(lèi)型的程序融合在一起，在不同的操作平臺(tái)和瀏覽器中播放；l支持動(dòng)態(tài)數(shù)據(jù)交互，a