網(wǎng)頁(yè)設(shè)計(jì)01概念序言.ppt

面對(duì)ing的設(shè)計(jì),網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),主講人：王爽,面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),變化中的一些不變,面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)概念：,一種多媒體文檔，可以包含文字、圖片、動(dòng)畫(huà)、視頻。通過(guò)一種叫做瀏覽器的軟件觀看。網(wǎng)頁(yè)被制作完成之后存放在一種叫服務(wù)器的高性能電腦上，瀏覽網(wǎng)頁(yè)的過(guò)程就是將網(wǎng)頁(yè)從服務(wù)器上復(fù)制到用戶(hù)的電腦上。,面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),ing網(wǎng)頁(yè)概念：,能夠?yàn)g覽網(wǎng)頁(yè)的不只是計(jì)算機(jī)，隨著無(wú)線(xiàn)網(wǎng)的誕生，網(wǎng)頁(yè)能夠被手機(jī)上安裝的網(wǎng)頁(yè)瀏覽器上進(jìn)行瀏覽。而網(wǎng)頁(yè)可以使用每臺(tái)電腦上自帶的免費(fèi)軟件，如微軟的記事本等直接生成，而瀏覽器也已經(jīng)實(shí)現(xiàn)在每臺(tái)電腦都能夠免費(fèi)安裝，所有具有3G功能的手機(jī)也都全部安裝有瀏覽器，網(wǎng)頁(yè)有望成為文檔的唯一格式。,面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),網(wǎng)站：,一種特殊的文件夾，這個(gè)文件夾里包含有一個(gè)網(wǎng)址包含的所有網(wǎng)頁(yè)文件以及在網(wǎng)頁(yè)中顯示的圖片、動(dòng)畫(huà)、視頻文件。 由于文字占用硬盤(pán)空間非常小，在多數(shù)情況下是包含在網(wǎng)頁(yè)之內(nèi)，但也有一部分網(wǎng)站的文本是以純文本的形式存在。 也要一些網(wǎng)頁(yè)使用的內(nèi)容是通過(guò)技術(shù)手段顯示其它網(wǎng)站的內(nèi)容，需要標(biāo)注引用，否則稱(chēng)為盜鏈。,面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),網(wǎng)址：,網(wǎng)站文件夾的名字，每個(gè)文件夾在世界范圍內(nèi)只有唯一的一組數(shù)字名稱(chēng)，通常由.間隔的四組數(shù)字構(gòu)成，例如：202.101.225.779 由于數(shù)字組合非常難以記憶，因此由每個(gè)網(wǎng)站的法人代表申請(qǐng)，國(guó)際組織給每個(gè)數(shù)字網(wǎng)址命名一個(gè)或幾個(gè)便于記憶且與網(wǎng)站內(nèi)容相關(guān)的名字，這個(gè)名字叫做網(wǎng)址。我們?cè)跒g覽器上方地址欄輸入網(wǎng)址，由網(wǎng)址服務(wù)器自動(dòng)將這個(gè)名字指向?qū)?yīng)的數(shù)字名稱(chēng)文件夾。,面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),網(wǎng)站設(shè)計(jì),面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),網(wǎng)站設(shè)計(jì)：,由于網(wǎng)頁(yè)出現(xiàn)早期，網(wǎng)絡(luò)傳輸速度極低，因此每個(gè)網(wǎng)頁(yè)的內(nèi)容非常少，而一個(gè)網(wǎng)頁(yè)又不能承載全部?jī)?nèi)容，因此每頁(yè)網(wǎng)頁(yè)上有一個(gè)和其它頁(yè)面的連接，用鼠標(biāo)點(diǎn)擊這個(gè)連接就會(huì)顯示鏈接的頁(yè)面。如果不點(diǎn)擊鏈接就不會(huì)使用這個(gè)傳輸量，因?yàn)樵缙诰W(wǎng)絡(luò)是按信息傳輸量計(jì)費(fèi)，因此如果讀者可以選擇看一個(gè)網(wǎng)站中的若干頁(yè)面而不是全部。 今天雖然已經(jīng)不需要這樣了，但這種內(nèi)容加鏈接的設(shè)計(jì)已經(jīng)成為網(wǎng)站約定俗成的設(shè)計(jì)模式。,面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),網(wǎng)站設(shè)計(jì)：,下面找了十個(gè)鞋類(lèi)的網(wǎng)站，大家可以看出，這十個(gè)網(wǎng)站分別屬于十個(gè)不同的廠家，但是頁(yè)面的內(nèi)容安排卻是非常相似的。 因此網(wǎng)站設(shè)計(jì)可以說(shuō)是給昆蟲(chóng)設(shè)計(jì)外觀，盡管昆蟲(chóng)千變?nèi)f化，但是三節(jié)身子六條腿的基本特征不變，這種生物就還是昆蟲(chóng)。網(wǎng)站設(shè)計(jì)也一樣，也是由每一頁(yè)的內(nèi)容和按照不同內(nèi)容組織鏈接構(gòu)成。,面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),ing網(wǎng)站設(shè)計(jì)：,隨著網(wǎng)速的加快，網(wǎng)頁(yè)能夠在手機(jī)上應(yīng)用，新的網(wǎng)頁(yè)設(shè)計(jì)理念，長(zhǎng)單頁(yè)的設(shè)計(jì)開(kāi)始出現(xiàn)，我們使用的人人網(wǎng)，微博等就是沒(méi)有鏈接的長(zhǎng)單頁(yè)網(wǎng)頁(yè)設(shè)計(jì)。 形成這種風(fēng)格受到兩個(gè)因素影響，第一是人人網(wǎng)或微博的內(nèi)容是每個(gè)使用者自己組織內(nèi)容，因此內(nèi)容直接沒(méi)有邏輯聯(lián)系，無(wú)法使用鏈接歸類(lèi)。第二是手機(jī)的屏幕通常都是縱向長(zhǎng)方形，因此看長(zhǎng)度更長(zhǎng)的網(wǎng)頁(yè)更加方便。,面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),ing網(wǎng)站設(shè)計(jì)：,同學(xué)們可以直接觀看微博頁(yè)面和人人網(wǎng)來(lái)體會(huì)這種變化。,面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),如何從事網(wǎng)頁(yè)設(shè)計(jì),面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),如何進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)：,1997年之前，網(wǎng)頁(yè)設(shè)計(jì)只有一個(gè)工具。,面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),如何進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)：,之后在微軟office97套件中出現(xiàn)了一個(gè)軟件frontpage97，使用者可以以類(lèi)似于使用word的方式設(shè)計(jì)網(wǎng)頁(yè)，只有會(huì)使用平面設(shè)計(jì)的排版類(lèi)軟件的設(shè)計(jì)師都可以利用這款軟件設(shè)計(jì)網(wǎng)頁(yè)。 其后一家叫做Macromedia的軟件公司開(kāi)發(fā)了用于網(wǎng)站設(shè)計(jì)的軟件dreamweaver，以及配套的網(wǎng)頁(yè)圖像設(shè)計(jì)軟件fireworks與網(wǎng)頁(yè)動(dòng)畫(huà)軟件flash。合稱(chēng)為網(wǎng)頁(yè)設(shè)計(jì)三劍客。 網(wǎng)頁(yè)設(shè)計(jì)的可見(jiàn)部分幾乎全部由網(wǎng)頁(yè)設(shè)計(jì)師完成,面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),如何進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)：,隨著網(wǎng)頁(yè)在更多媒介上的播放，網(wǎng)頁(yè)設(shè)計(jì)在外觀上沒(méi)有顯著變化，但構(gòu)成網(wǎng)頁(yè)的程序語(yǔ)言卻有了完全的變化。能夠適應(yīng)不同媒體的網(wǎng)頁(yè)其后臺(tái)語(yǔ)言已經(jīng)到了一般藝術(shù)設(shè)計(jì)人員無(wú)法掌握的程度。因此在網(wǎng)頁(yè)設(shè)計(jì)的團(tuán)隊(duì)中出現(xiàn)了一個(gè)新職位“前端設(shè)計(jì)工程師” 網(wǎng)頁(yè)設(shè)計(jì)軟件也做了一些相應(yīng)的調(diào)整。但在過(guò)程中出網(wǎng)頁(yè)設(shè)計(jì)行業(yè)出現(xiàn)了非常大的變化。,面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),如何進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)：,首先是Macromedia公司被ADOBE公司收購(gòu)，旗下的三款軟件目前主要的改進(jìn)是強(qiáng)化與ADOBE公司其它軟件如PHOTOSHOP的兼容能力，在網(wǎng)頁(yè)設(shè)計(jì)的方面沒(méi)有更多的強(qiáng)化與改進(jìn)。特別是fireworks作為和photoshop功能類(lèi)似的軟件，大部分功能已經(jīng)被吸收進(jìn)photoshop，因此我們主要使用photoshop設(shè)計(jì)網(wǎng)頁(yè)。,面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),如何進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)：,dreamweaver目前主要的提高點(diǎn)在于和adobe的其它軟件兼容性更好，目前的版本沒(méi)有太大提高，而且漢化程度仍然是Macromedia最后的版本8.0的質(zhì)量最高，因此我們這次講課仍然使用Macromedia 的8.0版本。 微軟的frontpage由于生成的代碼只能在ie中使用，今天的手機(jī)制造商很多使用的不是IE瀏覽器，因此在今天office集成包中出現(xiàn)了一款叫sharepoint的軟件，比dreamweaver更像程序編寫(xiě)軟件，有興趣的同學(xué)也可以使用一下。,面對(duì)ing的設(shè)計(jì)網(wǎng)絡(luò)廣告與網(wǎng)站設(shè)計(jì),Hello,the world,面對(duì)i