摘要：基本任務與角色在每一個開發(fā)階段，都需要相關各方人員的共同合作，包括客戶、設計師和程序開發(fā)員等不同角色，每個角色在不同的階段有各自需要承擔的責任。下圖列出了在網站建設與網頁設計的各個階段中需要參與的人員角色。網站建設與網頁設計流程中的人員角色...
在每一個開發(fā)階段，都需要相關各方人員的共同合作，包括客戶、設計師和程序開發(fā)員等不同角色，每個角色在不同的階段有各自需要承擔的責任。下圖列出了在網站建設與網頁設計的各個階段中需要參與的人員角色。
網站建設與網頁設計流程中的人員角色
通常，客戶會提出要求，并提供要在網站中呈現(xiàn)的具體內容。設計師負責進行頁面設計，并構建網站。程序開發(fā)員為網站添加動態(tài)功能。在測試階段，需要大家共同配合，尋找不完善的地方，并對其加以改進，等各方人員滿意后才能把網站發(fā)布到互聯(lián)網上。因此，每個參與者都需要以高度的責任感和參與感投入項目的開發(fā)過程中，只有這樣才能開發(fā)出高水平的網站。
經過近?20?年的發(fā)展，互聯(lián)網已經深入社會的各個領域。伴隨著這一發(fā)展過程，網站開發(fā)已經成為一個擁有大量從業(yè)人員的行業(yè)，因此，其整個工作流程也日趨成熟和完善。通常開發(fā)一個網站需要經過下圖所示的環(huán)節(jié)，下面就對其中的每一個環(huán)節(jié)進行介紹。
網站開發(fā)的工作流程
在動手制作網站之前需要給要做的網站一個準確的定位，明確建站的目的是什么。誰能決定網站的定位呢？如果網站是做給自己的，比如一個個人網站，那么自己決定網站定位；如果是為客戶建立網站，那么一定要與客戶?(?的決策層人士?)?共同討論，要理解他們的想法，這是十分重要的。
在理解了客戶的想法后，就要站在客戶的立場上探討網站的定位。根據經驗，如果設計師能夠從客戶的立場出發(fā)，給客戶提出一些中肯的建議并融入策劃中去，那么可以說設計工作已經成功了一半，這也可以大大減小在日后與客戶在溝通中發(fā)生不愉快的可能性。
在明確建站目的和網站定位后，即可開始收集相關意見，這一過程要結合公司其他部門的實際情況，這樣可以發(fā)揮網站的最大作用。
這一步是前期策劃中最為關鍵的一步，因為網站是為公司服務的，所以全面地收集相關意見和想法可以使網站的信息和功能趨于完善。收集來的信息需要整理成文檔，為了保證這個工作的順利進行，可以讓相關部門配合提交一份本部門需要在網站上開辟的欄目的計劃書。這份計劃書一定要考慮充分，因為如果要把網站作為一個正式的站點來運營，那么每個欄目的設置都應該是有規(guī)劃的。如果考慮不充分，會導致以后突如其來的新加內容破壞網站的整體規(guī)劃和風格。當然，這并不意味著網站成形后不許添加欄目，只是在添加的過程中需要結合網站的具體情況，過程更加復雜，因此最好在策劃時考慮全面。
對收集的相關信息進行整理后，要找出重點，根據重點以及公司業(yè)務的側重點，結合網站定位來確定網站的欄目。開始時可能會因為欄目較多而難以確定最終需要的欄目，這就需要展開另一輪討論，需要所有的設計和開發(fā)人員在一起闡述自己的意見，反復比較，將確定下來的內容進行歸類，形成網站欄目的樹形列表，用以清晰表達站點結構。
對于比較大的網站，可能還需要討論和確定二級欄目以下的子欄目，對它們進行歸類，并逐一確定每個二級欄目的主頁面需要放哪些具體內容，二級欄目下面的每個小欄目需要放哪些具體內容，讓欄目負責人清楚了解本欄目的細節(jié)。討論完以后，就應由欄目負責人按照討論過的結果寫欄目策劃書。欄目策劃書要求寫得詳細具體，并有統(tǒng)一的格式，以便網站留檔。此時寫的策劃書只是第一版，以后在制作的過程中如果出現(xiàn)問題應及時修改該策劃書，并且也需要留檔。
策劃書完成后，需要美術設計師?(?也稱為美工?)?根據每個欄目的策劃書來設計頁面。這里需要再次指出，在設計之前，應該讓欄目負責人把需要特殊處理的地方跟美術設計師講明。在設計頁面時，美術設計師要根據策劃書把每個欄目的具體位置和網站的整體風格確定下來。為了讓網站有整體感，應該在網頁中放置一些貫穿性的元素。最終美術設計師要拿出至少?3?種不同風格的方案。每種方案應該考慮到公司的整體形象，與公司的精神相契合。確定設計方案后，相關人員經討論后定稿。最后挑選出兩種方案交給客戶選擇，由客戶確定最終的方案。
方案設計完成后，下一步是實現(xiàn)靜態(tài)頁面，由程序開發(fā)員負責根據美術設計師給出的設計方案制作頁面，并制成模板。在這個過程中，需要十分注意網站頁面之間的邏輯，并區(qū)分靜態(tài)頁面和需要服務器端實現(xiàn)的動態(tài)頁面。
在制作頁面的同時，欄目負責人應該開始收集每個欄目的具體內容并整理。模板制作完成后，由欄目負責人往每個欄目里添加具體內容。對于靜態(tài)頁面，將內容添加到頁面中即可；對于需要服務器端編程實現(xiàn)的頁面，則應交由程序開發(fā)員繼續(xù)完成。
為了便于讀者理解，在這里舉一個例子，以區(qū)分動態(tài)頁面和靜態(tài)頁面的含義。例如某個公司的網站，需要展示?1000?種商品，每個頁面中展示?10?種商品。如果只用靜態(tài)頁面來制作，那么一共需要?100?個靜態(tài)頁面，在日后需要修改某商品的信息時，需要重新制作相應的頁面，修改得越多，工作量就越大。如果借助于服務器端的程序，制作動態(tài)頁面，例如使用?ASP?技術，則只需要制作一個頁面，把?1000?種商品的信息存儲在數(shù)據庫中。頁面根據瀏覽者的需求調用數(shù)據庫中的數(shù)據，動態(tài)地顯示這些商品的信息。需要修改商品信息時，只要修改數(shù)據庫中的數(shù)據即可。這就是動態(tài)頁面的作用。
將動態(tài)頁面設計好后，只剩下程序部分需要完成了。在這一步中，由程序開發(fā)員根據功能需求來編寫程序，實現(xiàn)動態(tài)功能。
需要說明的是，網站建設過程中，“如何統(tǒng)籌”是一個比較重要的問題。在上面所講述的過程進行的同時，網站的程序開發(fā)員正處于開發(fā)程序的階段，如果實現(xiàn)的過程中出現(xiàn)什么問題，程序開發(fā)員應和設計師及時溝通，以免程序開發(fā)完成后發(fā)現(xiàn)問題再進行大規(guī)模的返工。
當制作和編程的工作都完成后，就要把程序和頁面進行整合。整合完成后，需要進行內部測試，測試成功后即可上傳到服務器上，交由客戶檢驗。通常客戶會提出一些修改意見，這時根據客戶的意見完成修改即可。
如果這時客戶提出會導致結構性調整的問題，工作量就會很大?？蛻舨⒉涣私饩W站建設的流程，很容易與網站開發(fā)人員產生不愉快的情況。因此最好在開發(fā)的前期準備階段就充分理解客戶的想法和需求，同時將一些可能發(fā)生的情況提前告訴客戶，這樣就容易與客戶保持愉快的合作關系。
從上面的講解中可以看出，一個完善的網站實際上是由若干個不同角色的人員共同配合完成的。本書重點介紹的是與頁面制作相關的內容。
制作?Web?頁面前，應該對一些和制作相關的技術因素和設計因素有所了解。下面首先介紹幾個常用的技術因素。
在介紹頁面布局前，對網頁設計中首先會遇到的一些參數(shù)做一介紹。因為在設計一個頁面前，首先要確定這個頁面要設計成多大尺寸，以及用戶的瀏覽器是否能夠正確顯示。
在移動設備沒有出現(xiàn)之前，人們通常只在臺式計算機上訪問網站，當時只需要“屏幕顯示分辨率”這一個因素。
“屏幕顯示分辨率”是顯示器在顯示圖像時的分辨率。分辨率是用“點”來衡量的，顯示器上的這個“點”就是指像素?(?pixel?)?。
顯示分辨率的數(shù)值是指整個顯示器所有可視面積上水平像素和垂直像素的數(shù)量。例如?800?像素×600?像素的分辨率，是指在整個屏幕上水平顯示?800?個像素，垂直顯示?600?個像素。顯示分辨率的水平像素和垂直像素的總數(shù)總是成一定比例的，一般為?4∶3、5∶4?或?8∶5。每個顯示器都有自己的最高分辨率，并且可以兼容其他較低的顯示分辨率，所以一個顯示器可以設置多種不同的分辨率。
為什么設計頁面時要考慮顯示分辨率呢？這是因為瀏覽同一個頁面的訪問者所用的計算機顯示器不同，分辨率設置不同，顯示的效果也會不同。例如，如果以最常見的?1024?像素×768?像素的分辨率為目標設計了一個頁面，那么使用?800?像素×600?像素分辨率顯示器的訪問者瀏覽這個網頁時會看到頁面顯示不完整，需要反復拖動瀏覽器的滾動條來查看未顯示出來的部分。
十年前主流的顯示分辨率是?1024?像素×768?像素，因此當時的大多數(shù)網站按照這個分辨率來進行頁面設計，就可以保證絕大多數(shù)用戶非常舒服地瀏覽網頁。
而近十年來移動設備大量普及，也導致顯示分辨率變化極大，同時“高分辨率顯示屏”?(?簡稱“高分屏”?)?的出現(xiàn)又增加了相關的復雜性。原來通常將一個像素作為長度單位，而現(xiàn)在將分辨率區(qū)分為“物理分辨率”和“邏輯分辨率”兩個概念。
物理分辨率的含義就是設備本身的分辨率，是由設備上的像素數(shù)量決定的。而邏輯分辨率則是將若干像素合起來當作一個像素看待而算得的分辨率，它的目的是使各種設備的分辨率有大致相當?shù)目杀刃浴?/p>
以一臺?iPhone?12?Pro?Max?手機為例，它的屏幕尺寸是?6.7?英寸?(?1?英寸=2.54?厘米?)?，物理分頻率為?1284?像素×2778?像素，邏輯分辨率為?428?像素×926?像素，二者之間的比例是?3∶1,1?個邏輯像素的大小相當于?9?個物理像素的大小。它的物理像素密度高達?458?像素/英寸，而邏輯像素密度為?153?像素/英寸。
再如一臺?2015?款?MacBook?Air?13?英寸的筆記本電腦，它的物理分辨率和邏輯分辨率都是?1440?像素×900?像素，二者之間的比例是?1∶1。它的邏輯像素密度只有?128?像素/英寸。
這樣，一部面積小得多的手機，它的實際像素數(shù)卻要比面積比它大很多的計算機的像素數(shù)多得多。
這時如果希望制作一個能夠同時適應這兩種設備的頁面，但沒有邏輯像素的概念，那么就會非常不好計算。因此，在頁面設計和軟件開發(fā)時，我們都使用邏輯分辨率，不同的設備其邏輯分辨率是接近的。這樣就可以方便在基本相同的尺度上進行設計和開發(fā)了。
因此，實際上在網頁設計和開發(fā)中使用的像素單位都是邏輯分辨率。例如?2020?款的?MacBook?Air?13?英寸屏幕，它的物理分辨率是?2560?像素×1600?像素，邏輯分辨率是?1280?像素?×?800?像素，二者之間的比例是?2∶1。它的邏輯像素密度是?114?像素/英寸。
可以看到，上面?3?種設備雖然包含手機、計算機以及跨越好幾年的設備，但是它們的邏輯像素密度是接近的，因此在設計時，它們的尺度也是接近的，比如一個?100?像素寬的頁面元素，其實際寬度在不同設備上也是大致接近的。
當然這也引出了一個問題，即如果在高分辨率的設備上，將幾個像素當作一個像素，那何必還要高分屏呢？這是因為邏輯分辨率只是用來作為單位使用的，真正顯示時的效果還是根據物理分辨率來實現(xiàn)的。比如一張寬度是?300?像素?(?物理像素?)?的圖片，在頁面中按照邏輯像素設置為?100?像素寬，如果是?1∶3?的高分屏顯示，它實際上每個像素都會對應到一個物理像素上，因此不會損失清晰度；而如果顯示到一個?1∶1?的屏幕上，就會損失清晰度。例如，在一個頁面上，正文文字大小通常為?14?像素或者?16?像素，而在高分屏上看到的文字就非常清晰，低分屏上就會模糊很多。
瀏覽器類型也是在網頁設計時會遇到的一個問題。由于各個軟件廠商對?HTML?的標準支持有所不同，同樣的網頁在不同的瀏覽器下會有不同的表現(xiàn)。
隨著?CSS?在網頁設計中的普及和流行，瀏覽器的因素變得比以往傳統(tǒng)網頁設計中更為重要。這是因為，各種瀏覽器對?CSS?標準支持的差異遠遠大于對?HTML?標準的支持。因此，讀者必須認識到，設計出來的網頁在不同的瀏覽器上的效果可能會有很大差異。具體的相關內容，在本書后面的章節(jié)中還會多次提及，這里先提醒讀者注意。
下圖顯示了中國國內瀏覽器的使用情況。
2020 年中國國內瀏覽器的使用情況
