網(wǎng)頁(yè)制作簡(jiǎn)介課件

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

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

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

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

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

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

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

2、Div+Css于是隨著主流網(wǎng)頁(yè)瀏覽器對(duì)CSS的支援四、網(wǎng)頁(yè)制作的要領(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)行四、網(wǎng)頁(yè)制作的要領(lǐng)1確定網(wǎng)站主題2選擇好域名3確定網(wǎng)站界面41、要領(lǐng)一：確定網(wǎng)站主題

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

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

2、要領(lǐng)二：選擇好域名域名是網(wǎng)站在互聯(lián)網(wǎng)上的名字。一個(gè)非產(chǎn)3、要領(lǐng)三：確定網(wǎng)站界面

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

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

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

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

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

2、前臺(tái)網(wǎng)站頁(yè)面的設(shè)計(jì)制作，包括版式規(guī)劃、色彩應(yīng)用、版面設(shè)計(jì)、切片輸出、頁(yè)面整合、動(dòng)畫和多媒體設(shè)計(jì)、交互環(huán)節(jié)設(shè)計(jì)和頁(yè)面代碼編寫等。(從這里可以看出，前臺(tái)美工的任務(wù)很重，而且還涉及到公司形象，潛在形象廣告宣傳的勞動(dòng)能力。為公司的整體付出了潛在的市場(chǎng)價(jià)值。唉，但現(xiàn)在各行業(yè)不重視美工，造成