01網(wǎng)站項(xiàng)目的策劃和制作ppt課件

1、網(wǎng)站工程的謀劃和制造裘森偉.網(wǎng)站工程工程進(jìn)展過(guò)程 謀劃階段主題方案的設(shè)計(jì)過(guò)程HTML文件化操作 CSS運(yùn)用以及上傳測(cè)試網(wǎng)站開通 檢測(cè) 如上所示，一個(gè)工程不僅僅是構(gòu)建一個(gè)簡(jiǎn)單的網(wǎng)站。在進(jìn)展一個(gè)工程時(shí)，要基于網(wǎng)站的理念和用途，先制造一份謀劃案。然后根據(jù)謀劃案開場(chǎng)實(shí)踐制造，開通網(wǎng)站后還要進(jìn)展檢測(cè)等各項(xiàng)任務(wù)。.工程制造的第一步-謀劃階段與客戶交流 制造網(wǎng)站之前，首先和客戶交流網(wǎng)站的性質(zhì)、理念、用途以及客戶方擔(dān)任人的選定等各種網(wǎng)站制造中的相關(guān)事項(xiàng)，然后以這些交流為根底，制造相當(dāng)于設(shè)計(jì)圖的謀劃案和網(wǎng)站圖、導(dǎo)游圖等文件，搭建網(wǎng)站的框架。.工程制造的第一步-謀劃階段制造網(wǎng)站時(shí)需求和客戶交流的事項(xiàng)網(wǎng)站的理念和用

2、途網(wǎng)站的菜單構(gòu)造和內(nèi)容構(gòu)造方案效力器NT，Linux設(shè)定制造網(wǎng)站時(shí)需求的技術(shù)Flash，程序設(shè)計(jì)言語(yǔ)，動(dòng)畫相關(guān)Web Hosting效力器、域等相關(guān)事項(xiàng)實(shí)踐任務(wù)時(shí)間和最終開通日期的設(shè)置客戶方擔(dān)任人的選定.工程制造的第一步-謀劃階段制造謀劃案 謀劃案是為了在工程進(jìn)展過(guò)程中到達(dá)最高的效率而制定的方案。謀劃案沒(méi)有固定的格式，每個(gè)公司都持有不同的款式。有的謀劃案是從主頁(yè)到子夜詳細(xì)進(jìn)展闡明，而有的謀劃案是以中心設(shè)計(jì)部分為框架來(lái)進(jìn)展制造。.工程制造的第一步-謀劃階段謀劃案中普通包括的事項(xiàng)組織框架圖網(wǎng)站圖設(shè)計(jì)導(dǎo)游圖主、子頁(yè)的設(shè)計(jì)構(gòu)造界面導(dǎo)游設(shè)計(jì)版面設(shè)計(jì)顏色系統(tǒng)字體系統(tǒng)畫面編碼構(gòu)造表目錄構(gòu)造規(guī)那么文件的命名規(guī)

3、那么.工程制造的第一步-謀劃階段程序邏輯圖：對(duì)程序邏輯進(jìn)展闡明.工程制造的第一步-謀劃階段組織構(gòu)造圖和網(wǎng)站圖 組織構(gòu)造圖明晰的整理出了主菜單和子菜單的構(gòu)造，而網(wǎng)站圖更加詳細(xì)的表達(dá)了組成菜單的顯示方式。例如，網(wǎng)站圖將會(huì)指定各個(gè)菜單的相關(guān)網(wǎng)頁(yè)稱號(hào)，并顯示各自網(wǎng)頁(yè)翻開的窗口方式。.組織構(gòu)造圖.工程制造的第一步-謀劃階段網(wǎng)格系統(tǒng)和版面設(shè)計(jì)構(gòu)造 下面引見(jiàn)下謀劃案中起到框架作用的網(wǎng)格系統(tǒng)和版面設(shè)計(jì)構(gòu)造方式。構(gòu)成根本版面之前要對(duì)許多網(wǎng)站進(jìn)展定標(biāo)比超。定標(biāo)比超是在新版面的制造中提供創(chuàng)意的重要手段。將這種過(guò)程作為根底，先制造整體上最大框架網(wǎng)格系統(tǒng)后，再根據(jù)他整理導(dǎo)航位置子菜單位置，內(nèi)容部分等事項(xiàng)，從而構(gòu)成版面，

4、同時(shí)，設(shè)置版面設(shè)計(jì)中畫面分辨率的基準(zhǔn)以及各個(gè)區(qū)域的畫面分割比例。畫面分割可以設(shè)置為詳細(xì)的數(shù)據(jù)。也可以將各個(gè)區(qū)域以3左區(qū)域，5內(nèi)容區(qū)域，2右側(cè)區(qū)域的比例進(jìn)展分割。.工程制造的第一步-謀劃階段定標(biāo)比超的概念 經(jīng)過(guò)分析與目的網(wǎng)站具有一樣性質(zhì)的其他網(wǎng)站，從而搜集嶄新的創(chuàng)意，內(nèi)容以及導(dǎo)航系統(tǒng)構(gòu)造等相關(guān)資料，不僅對(duì)于謀劃者，對(duì)于普通的設(shè)計(jì)者來(lái)說(shuō)這也是平常生活中需求積累的知識(shí)。網(wǎng)格 在網(wǎng)站的謀劃階段經(jīng)常會(huì)涉及到“網(wǎng)格系統(tǒng)，版面設(shè)計(jì)“，等相關(guān)詞匯，在這里的網(wǎng)格指的是格子方式，而網(wǎng)格系統(tǒng)可以了解為網(wǎng)站的整體構(gòu)造，即構(gòu)成版面的方式，經(jīng)過(guò)網(wǎng)格系統(tǒng)可以分割區(qū)域。并決議各個(gè)內(nèi)容的位置，從而構(gòu)成復(fù)雜的版面.工程制造的第一

5、步-謀劃階段初步方案操作以及畫面闡明 普通情況下是先提出謀劃案，再以其為根底進(jìn)展初步方案的操作。但有時(shí)候，也有能夠在制造謀劃案的過(guò)程中同時(shí)進(jìn)展網(wǎng)站初步方案的操作。這是由于實(shí)踐上客戶最想知道的不只是謀劃案等的文件，而更是以后所要制造的網(wǎng)站效果。假設(shè)謀劃中包括了初步方案，不僅要具有和謀劃案為根底的內(nèi)容構(gòu)造，而且還要添加對(duì)圖像的設(shè)計(jì)性思想以及flash等運(yùn)用部分的相關(guān)大綱闡明。并且也要添加整個(gè)網(wǎng)站的幀構(gòu)造和運(yùn)用到的技術(shù)，以及運(yùn)用程序時(shí)所需的程序設(shè)計(jì)言語(yǔ)asp或php，效力器環(huán)境等相關(guān)闡明。.工程制造的第一步-謀劃階段顏色系統(tǒng) 顏色系統(tǒng)為整個(gè)網(wǎng)站構(gòu)造決議一個(gè)與理想相符合的顏色構(gòu)造規(guī)那么。經(jīng)過(guò)反響網(wǎng)站性

6、質(zhì)和理念的顏色規(guī)那么，可以表現(xiàn)出網(wǎng)站的整體性、一致性。在和客戶的交流中，可以根據(jù)客戶要求來(lái)構(gòu)成適宜網(wǎng)站性質(zhì)的顏色系統(tǒng)。顏色系統(tǒng)除了中心性主顏色以外，也可以根據(jù)各個(gè)區(qū)域子網(wǎng)頁(yè)的性質(zhì)，分別用獨(dú)立的顏色群來(lái)表達(dá)。例如： Brown：傳達(dá)深棕色系列的平整感強(qiáng)調(diào)網(wǎng)頁(yè)以及內(nèi)容的可信度。 gray：無(wú)顏色的灰色系列表達(dá)了符合菜單性質(zhì)的顏色系列。 blue：具有清涼感的藍(lán)色系列新穎并能刺激獵奇心的顏色.工程制造的第一步-謀劃階段字體系統(tǒng) 所謂字體系統(tǒng)指的是根據(jù)網(wǎng)站的需求預(yù)先制定將要運(yùn)用到的字體大小和類型。普通要運(yùn)用可讀性較高的字體。在一個(gè)網(wǎng)站中最好把字體限制在34種以內(nèi)，字體過(guò)多，能夠會(huì)影響網(wǎng)站的一致性。.工

7、程制造的第一步-謀劃階段畫面編碼構(gòu)造表 畫面編碼構(gòu)造表是在實(shí)踐任務(wù)中為了組員之間的意見(jiàn)交流而制定的一些規(guī)那么。投入的人力越多，一定要在畫面編碼構(gòu)造的操作上控制執(zhí)行錯(cuò)誤的發(fā)生。普通情況下畫面編碼構(gòu)造是為各種菜單分別賦予相關(guān)英文略稱制造的。這是為了使一個(gè)類型所包含的各個(gè)目錄及相關(guān)文件的稱號(hào)具有一定的銜接性。.工程制造的第二步-主體方案的設(shè)計(jì)過(guò)程主體方案的設(shè)計(jì)過(guò)程 設(shè)置分辨率界面的分割網(wǎng)站要素的設(shè)計(jì)設(shè)置分辨率 在設(shè)計(jì)過(guò)程中，最先要做的就是設(shè)置分辨率。假設(shè)設(shè)置為1024768，操作文件最適宜的橫向大小為995像素，而縱向大小事可調(diào)的。.工程制造的第二步-主體方案的設(shè)計(jì)過(guò)程界面的分割 界面分割時(shí)根據(jù)不同

8、要素的重要程度來(lái)分割界面大小的過(guò)程。通常運(yùn)用的根本方式是分割為主圖像界面、主導(dǎo)航界面、內(nèi)容界面、banner或子菜單界面等34個(gè)界面方式。 留意：在進(jìn)展界面分割的時(shí)候，重要的是在不破壞整體均勻的范圍內(nèi)進(jìn)展界面分割。主圖像不僅在主頁(yè)當(dāng)中，在子網(wǎng)頁(yè)也是表現(xiàn)該頁(yè)整體視覺(jué)效果的重要圖像要素。.工程制造的第二步-主體方案的設(shè)計(jì)過(guò)程網(wǎng)站要素的設(shè)計(jì)主圖片的圖像設(shè)計(jì) 在網(wǎng)站的設(shè)計(jì)過(guò)程中，有時(shí)需求將圖片進(jìn)展一些修飾操作，將照片圖像與網(wǎng)站的理念有機(jī)的結(jié)合起來(lái)。主導(dǎo)航器設(shè)計(jì) 利用flash來(lái)構(gòu)成主導(dǎo)航器，最好先方案選擇的flash方式。Banber以及子菜單設(shè)計(jì) 首先為了區(qū)分左側(cè)區(qū)域和右側(cè)區(qū)域，可以稍加一些變化，可

9、以利用photoshop的圖層蒙版和陰影效果，在沒(méi)有很大變化的形狀下明顯區(qū)分各個(gè)平面。4. 內(nèi)容設(shè)計(jì) 網(wǎng)站主頁(yè)的內(nèi)容區(qū)域通常根據(jù)內(nèi)容的重要性由上至下安排的。.工程制造的第三步-制造html文件為了把photoshop中設(shè)計(jì)的psd文件上傳到網(wǎng)絡(luò)上，首先要將他切割成幾個(gè)小圖像。通常這個(gè)過(guò)程稱為限幅過(guò)程。假設(shè)將設(shè)計(jì)的整體文件一次性上傳到網(wǎng)絡(luò)中，讀取的時(shí)間會(huì)過(guò)長(zhǎng)，為了防止這種景象，需求把這種文件切割成多個(gè)部分，以最正確的文件方式上傳，并且，為了在網(wǎng)站上添加運(yùn)用程序或flash等各種功能，必需經(jīng)過(guò)限幅操作，使文件優(yōu)化為圖像的方式。切割后的圖像文件網(wǎng)站所需功能的相關(guān)程序設(shè)計(jì)過(guò)程以及flash文件等應(yīng)該陳

10、列在表格中。表格的功能是把各個(gè)切割后的小圖像文件和其他程序以及flash合并在一同。這一過(guò)程稱之為html文件化操作。.工程制造的第三步-制造html文件Html文件化操作 photoshop等軟件中設(shè)計(jì)的文件設(shè)置輔助線設(shè)置表格切割圖像優(yōu)化及保管圖像在表格中嵌入文件詳細(xì)設(shè)置表格測(cè)試.工程制造的第三步-制造html文件設(shè)置輔助線 在完成的文件中設(shè)置輔助線后，以設(shè)置的輔助線為基準(zhǔn)切割圖像，并在表格中放置各個(gè)圖像。所以，在設(shè)置輔助線之前，首先要思索后面要設(shè)置的表格方式。再次，我們?cè)谠O(shè)置輔助線之前，首先在白紙上直接繪制大約的表格外形，然后在進(jìn)展操作。 需求輔助線來(lái)區(qū)分的區(qū)域主要有主圖片圖像和主導(dǎo)航界面

11、、主內(nèi)容界面、banner以及子菜單界面。.工程制造的第三步-制造html文件設(shè)置根目錄 設(shè)置根目錄的方法主要有兩種，一種是在機(jī)子的計(jì)算機(jī)中保管，而另一種是直接設(shè)置在效力器上，隨時(shí)運(yùn)用到網(wǎng)絡(luò)中。 制造表格 根本表格：根據(jù)預(yù)先思索的設(shè)計(jì)方案制造的整體表格框架。按照在photoshop中添加的輔助線，構(gòu)成詳細(xì)的表格。集體表格可以制形成各種各樣，但最好不要太復(fù)雜。.工程制造的第三步-制造html文件切割圖像 完成表格構(gòu)造后，根據(jù)photoshop中制造的輔助線切割并保管。切割圖像之前最好將輔助線設(shè)置的原文件圖層合并合并可見(jiàn)圖層或合并圖層。這是由于在photoshop中會(huì)運(yùn)用到各種濾鏡，假設(shè)將運(yùn)用效果

12、的部分切割并保管，那么最后在html中這些部分能夠會(huì)表現(xiàn)出不延續(xù)的覺(jué)得。切割方法：利用裁剪工具利用矩形選框工具選擇切割區(qū)域后，在選擇imagecrop最后，在photoshop中選擇filesave for web命令.工程制造的第三步-制造html文件提示：為了對(duì)photoshop中設(shè)計(jì)的文件進(jìn)展切割后以最優(yōu)化的形狀進(jìn)展保管，普通情況下是利用gif文件格式進(jìn)展保管的。Gif文件以減少像素來(lái)減少容量的方式，不僅減少了網(wǎng)絡(luò)中讀取的時(shí)間，而且可以得到高分辨率的圖像。保管圖像時(shí)，gif文件會(huì)提取經(jīng)常運(yùn)用到的256中顏色來(lái)制造顏色索引，并利用這256中顏色來(lái)表現(xiàn)整個(gè)圖像，因此可以 大大減少圖像容量。.工程制造的第四步-css運(yùn)用及上傳在html文件中運(yùn)用css 即把需求運(yùn)用的一切設(shè)置事項(xiàng)保管到擴(kuò)展名為css的文件中后，在以后執(zhí)行html文件時(shí)，再導(dǎo)入運(yùn)用這些設(shè)置。 可以在html文件中導(dǎo)入css文件，在經(jīng)過(guò)鏈接來(lái)運(yùn)用這些設(shè)置項(xiàng)。 例如可以確定這是導(dǎo)入css文件來(lái)應(yīng)喲個(gè)設(shè)置項(xiàng)的。.工程制造的第四步-css運(yùn)用及上傳上傳ht