網(wǎng)頁制作簡介課件

第一課《網(wǎng)頁制作簡介》第一課網(wǎng)頁制作簡介靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁區(qū)別二兩種設(shè)計模式：表格、DIV+CSS三

網(wǎng)頁制作的要領(lǐng)四一什么是網(wǎng)頁制作1網(wǎng)頁制作具體流程

五什么是網(wǎng)頁制作一、什么是網(wǎng)頁制作1定義2什么是網(wǎng)頁制作3網(wǎng)頁設(shè)計1、定義網(wǎng)站是企業(yè)向用戶和網(wǎng)民提供信息(包括產(chǎn)品和服務(wù))的一種方式,網(wǎng)頁制作是企業(yè)開展電子商務(wù)的基礎(chǔ)設(shè)施和信息平臺，離開網(wǎng)站（或者只是利用第三方網(wǎng)站）去談電子商務(wù)是不可能的。企業(yè)的網(wǎng)址被稱為“網(wǎng)絡(luò)商標(biāo)”，也是企業(yè)無形資產(chǎn)的組成部分，而網(wǎng)站是INTERNET上宣傳和反映企業(yè)形象和文化的重要窗口。

2、什么是網(wǎng)頁制作制作要能充分吸引訪問者的注意力，讓訪問者產(chǎn)生視覺上的愉悅感。因此在網(wǎng)頁創(chuàng)作的時候就必須將網(wǎng)站的整體設(shè)計與網(wǎng)頁設(shè)計的相關(guān)原理緊密結(jié)合起來。網(wǎng)站設(shè)計是將策劃案中的內(nèi)容、網(wǎng)站的主題模式，以及結(jié)合自己的認(rèn)識通過藝術(shù)的手法表現(xiàn)出來；網(wǎng)頁制作通常就是將網(wǎng)頁設(shè)計師所設(shè)計出來的設(shè)計稿，按照W3C規(guī)范用html語言將其制作成網(wǎng)頁格式。

3、網(wǎng)頁設(shè)計網(wǎng)頁設(shè)計是指使用標(biāo)識語言（markuplanguage)，通過一系列設(shè)計、建模、和執(zhí)行的過程將電子格式的信息通過互聯(lián)網(wǎng)傳輸，最終以圖形用戶界面（GUI）的形式被用戶所瀏覽。簡單來說，網(wǎng)頁設(shè)計的目的就是產(chǎn)生網(wǎng)站，什么是網(wǎng)站呢，就是服務(wù)器內(nèi)的一系列網(wǎng)頁的組合，終端用戶發(fā)出請求后[[服務(wù)器通過傳輸特定的網(wǎng)頁向用戶傳輸所需的信息。簡單的信息如文字，圖片（GIFs，JPEGs，PNGs）和表格，都可以通過使用HTML/XHTML/XML放置到網(wǎng)站頁面上。而更復(fù)雜的信息如vectorgraphics,動畫，視頻，聲頻則需要插件程序例如Flash,QuickTime,Javarun-timeenvironment,等等，這些插件程序也是通過HTML/XHTML/XML植入網(wǎng)頁的。隨著瀏覽器和W3C標(biāo)準(zhǔn)一致性的改善，XHTML/XML（可擴(kuò)展標(biāo)識語言）與CSS（層疊樣式表）共同用作網(wǎng)頁內(nèi)容的設(shè)計已經(jīng)被廣泛的接受和使用。最新的標(biāo)準(zhǔn)和建議則是朝著瀏覽器的能力擴(kuò)充和改善發(fā)展，使之能夠不需要插件程序也能夠給用戶傳輸多媒體信息和更多的選擇。二、靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁區(qū)別1靜態(tài)網(wǎng)頁2動態(tài)網(wǎng)頁1、靜態(tài)網(wǎng)頁靜態(tài)網(wǎng)頁頁面上的內(nèi)容和格式一般不會改變，只有網(wǎng)管可根據(jù)需要更新頁面。

2、動態(tài)網(wǎng)頁動態(tài)網(wǎng)頁的內(nèi)容隨著用戶的輸入和互動而有所不同，或者隨著用戶，時間，數(shù)據(jù)修正等而改變。網(wǎng)頁上的內(nèi)容也可以由用戶通過使用客戶端描述語言(JavaScript,JScript,Actionscript,）來改變。當(dāng)然更普遍的是由服務(wù)器端的描述語言（Perl，PHP,ASP,JSP,ColdFusion,等)進(jìn)行編譯，從而對動態(tài)網(wǎng)頁的內(nèi)容進(jìn)行改變。無論是客戶端還是服務(wù)器端的改變都需要使用較為復(fù)雜的應(yīng)用軟件。三、兩種設(shè)計模式：表格、DIV+CSS1表格2Div+Css1、表格從前一般網(wǎng)頁都使用表格進(jìn)行排版設(shè)計，這樣作的優(yōu)點(diǎn)在于設(shè)計制作速度快，尤其在可視化網(wǎng)頁編輯器，如MicrosoftFrontPage中，這樣設(shè)計顯得直觀而方便，然而這讓越來越復(fù)雜的版面需要許多不斷嵌套的表格設(shè)計，致使網(wǎng)頁代碼變得冗長復(fù)雜，使文件體積增大，且不容易被搜索引擎查找。同時，這樣做也不利于大型網(wǎng)站的改版工作。

2、Div+Css于是隨著主流網(wǎng)頁瀏覽器對CSS的支援度提高，近年來興起了一種新的網(wǎng)頁設(shè)計模式。被業(yè)界稱為“網(wǎng)頁重構(gòu)”的革命，其核心在于分隔網(wǎng)頁的風(fēng)格和內(nèi)容(en:Separationofstyleandcontent)，指標(biāo)記語言(如HTML,XML)負(fù)責(zé)定義頁面的內(nèi)容，但不可以定義任何涉及網(wǎng)站外觀(風(fēng)格)的東西。而網(wǎng)站風(fēng)格就由另外的CSS檔案負(fù)責(zé)。在排版方面，新的模式提倡使用由CSS定義的DIV進(jìn)行頁面排版，而將表格還原為排列數(shù)據(jù)的最初功能。這種模式有很多好處，例如可以協(xié)助搜尋引擎查找網(wǎng)頁的情況，減小文件提及提高瀏覽速度，且由于一個CSS檔案可以控制多個頁面，這也給改版帶來了很大方便。由于W3C是該模式極力的倡導(dǎo)者，于是業(yè)界鑒定網(wǎng)頁是否符合W3C標(biāo)準(zhǔn)，就可以在W3C網(wǎng)站自動檢測該網(wǎng)站的情況。這種模式也有缺點(diǎn)，其中一個弱點(diǎn)就是，在不同瀏覽器出來的效果會有分別，但這種情況主要是由于微軟的InternetExplorer對CSS文檔的支持有眾多缺陷造成的。另一方面，開始設(shè)計CSS時，并不能清楚看到目標(biāo)，因此顯得不直觀。網(wǎng)頁實(shí)際是一個文件，他存放在世界某個角落的的某一臺計算機(jī)中，而這臺計算機(jī)必須是與互聯(lián)網(wǎng)相連的。網(wǎng)頁經(jīng)由網(wǎng)址（URL）來識別與存取，當(dāng)我們在瀏覽器輸入網(wǎng)址后，經(jīng)過一段復(fù)雜而又快速的程序，網(wǎng)頁文件會被傳送到你的計算機(jī)，然后再通過瀏覽器解釋網(wǎng)頁的內(nèi)容，再展示到你的眼前。

四、網(wǎng)頁制作的要領(lǐng)1確定網(wǎng)站主題2選擇好域名3確定網(wǎng)站界面4確定網(wǎng)站風(fēng)格5有創(chuàng)意的內(nèi)容選擇6推廣自己的網(wǎng)站7支撐網(wǎng)站日常運(yùn)行1、要領(lǐng)一：確定網(wǎng)站主題

做網(wǎng)站，首先必須要解決的就是網(wǎng)站內(nèi)容問題，即確定網(wǎng)站的主題。美國《個人電腦》雜志(PCMagazine)評出了99年度排名前100位的全美知名網(wǎng)站的十類題材：第1類：網(wǎng)上求職；第2類：網(wǎng)上聊天/即時信息/ICQ；第3類：網(wǎng)上社區(qū)/討論/郵件列表；第4類：計算機(jī)技術(shù)；第5類：網(wǎng)頁/網(wǎng)站開發(fā)；第6類：娛樂網(wǎng)站；第7類：旅行；第8類：參考/資訊；第9類：家庭/教育；第10類：生活/時尚。我們可以參看上面的分類，繼續(xù)細(xì)分。如果自己在某些方面有興趣，或掌握的資料較多，也可以做一個自己感興趣的東西，一者，你可以有自己的見解，做出自己的特色；二者，在制作網(wǎng)站時不會覺得無聊或者力不從心。興趣是制作網(wǎng)站的動力，沒有創(chuàng)作熱情，很難設(shè)計制作出優(yōu)秀的作品。對于內(nèi)容主題的選擇，要做到小而精，主題定位要小，內(nèi)容要精。不要去試圖制作一個包羅萬象的站點(diǎn)，這往往會失去網(wǎng)站的特色，也會帶來高強(qiáng)度的勞動，給網(wǎng)站的及時更新帶來困難。記?。涸诨ヂ?lián)網(wǎng)上只有第一，沒有第二！2、要領(lǐng)二：選擇好域名

域名是網(wǎng)站在互聯(lián)網(wǎng)上的名字。一個非產(chǎn)品推銷的純信息服務(wù)網(wǎng)站，其所有建設(shè)的價值，都凝結(jié)在其網(wǎng)站域名之上。失去這個域名，就將前功盡廢。目前，做個人網(wǎng)站的很多都依賴免費(fèi)個人空間，其域名也是依賴免費(fèi)域名指向，如網(wǎng)易的虛擬域名服務(wù)，其實(shí)這對個人網(wǎng)站的推廣與發(fā)展很為不利，不光是它“適時”開啟的窗口妨礙了瀏覽者的視線和好感，讓人一看就知道是個人網(wǎng)站，而且也妨礙了網(wǎng)頁的傳輸速度。所以，就我個人觀點(diǎn)來說，首先花點(diǎn)錢去注冊一個域名，獨(dú)立的域名就是個人網(wǎng)站的第一筆財富，要把域名起得形象、簡單、易記。

3、要領(lǐng)三：確定網(wǎng)站界面

界面就是網(wǎng)站給瀏覽者的第一印象，往往決定著網(wǎng)站的可看性，在確定網(wǎng)站的界面時要注意以下三點(diǎn)：①欄目與板塊編排②目錄結(jié)構(gòu)與鏈接結(jié)構(gòu)③網(wǎng)站的設(shè)計可以從以下幾點(diǎn)出發(fā)：●設(shè)計網(wǎng)站標(biāo)志(LOGO)●設(shè)計網(wǎng)站色彩?！裨O(shè)計網(wǎng)站字體?！裨O(shè)計網(wǎng)站宣傳語。4、要領(lǐng)四：確定網(wǎng)站風(fēng)格

“風(fēng)格”是抽象的，是指站點(diǎn)的整體形象給瀏覽者的綜合感受。這個“整體形象”包括站點(diǎn)的CI（標(biāo)志，色彩，字體，標(biāo)語）、版面布局、瀏覽方式、交互性、文字、語氣、內(nèi)容價值等等諸多因素，網(wǎng)站可以是平易近人的、生動活潑的，也可以是專業(yè)嚴(yán)肅的。不管是色彩、技術(shù)、文字、布局，還是交互方式，只要你能由此讓瀏覽者明確分辨出這是你網(wǎng)站獨(dú)有的，這就形成了網(wǎng)站的“風(fēng)格”。風(fēng)格是有人性的，通過網(wǎng)站的色彩、技術(shù)、文字、布局、交互方式可以概括出一個站點(diǎn)的個性：是粗獷豪放的，還是清新秀麗的；是溫文儒雅的，還是執(zhí)著熱情的；是活潑易變的，還是墨守成規(guī)的。5、要領(lǐng)五：有創(chuàng)意的內(nèi)容選擇

好的內(nèi)容選擇需要有好的創(chuàng)意，作為網(wǎng)頁設(shè)計制作者，最苦惱的就是沒有好的內(nèi)容創(chuàng)意。網(wǎng)絡(luò)上的最多的創(chuàng)意即是來自于虛擬同現(xiàn)實(shí)的結(jié)合。創(chuàng)意的目的是為了更好的宣傳與推廣網(wǎng)站，如果創(chuàng)意很好，卻對網(wǎng)站發(fā)展毫無意義，那么，網(wǎng)站設(shè)計制作者也應(yīng)當(dāng)放棄這個創(chuàng)意。另外，主頁內(nèi)容是網(wǎng)站的根本之所在，如果內(nèi)容空洞，即使頁面制作地再怎樣精美，仍然不會有多少用戶。從根本上說，網(wǎng)站內(nèi)容仍然左右著網(wǎng)站流量，內(nèi)容為王（ContentIsKing）依然是個人網(wǎng)站成功的關(guān)鍵。

6、要領(lǐng)六：推廣自己的網(wǎng)站網(wǎng)站的營銷推廣在個人網(wǎng)站的運(yùn)行中也占著重要的地位，在推廣個人網(wǎng)站之前，請確保已經(jīng)做好了以下內(nèi)容：網(wǎng)站信息內(nèi)容豐富、準(zhǔn)確、及時；網(wǎng)站技術(shù)具有一定專業(yè)水準(zhǔn)，網(wǎng)站的交互性能良好。一般來說，網(wǎng)站的推廣有以下幾種方式：①搜索引擎注冊與搜索目錄登錄技巧②廣告交換技巧③目標(biāo)電子郵件推廣七、要領(lǐng)七：支撐網(wǎng)站日常運(yùn)行當(dāng)個人網(wǎng)站做到某一程度，就必須把賺錢提到議事日程上來，通常來說，個人網(wǎng)站獲取資金通常有以下兩個渠道：①銷售網(wǎng)站的廣告位②與大型網(wǎng)站合作另外，通過與大型網(wǎng)站合作，獲取經(jīng)費(fèi)，也可以維持個人網(wǎng)站的日常運(yùn)行。不過，個人網(wǎng)站很容易會成為商業(yè)網(wǎng)站的附屬品。有時間和充沛的體力，再加上對新技術(shù)和技巧的學(xué)習(xí)和應(yīng)用，你就能為自己在網(wǎng)上建一個家了。五、網(wǎng)頁制作具體流程

1策劃2前臺3后臺1、策劃網(wǎng)站的整體定位、功能規(guī)劃、應(yīng)用分析、流程設(shè)計和內(nèi)容架構(gòu)組織。

2、前臺網(wǎng)站頁面的設(shè)計制作，包括版式規(guī)劃、色彩應(yīng)用、版面設(shè)計、切片輸出、頁面整合、動畫和多媒體設(shè)計、交互環(huán)節(jié)設(shè)計和頁面代碼編寫等。(從這里可以看出，前臺美工的任務(wù)很重，而且還涉及到公司形象，潛在形象廣