定制網站建設必備知識?在每一個開發階段，都需要相關各方人員的共同合作，包括客戶、設計師和程序開發員等不同角色，每個角色在不同的階段有各自需要承擔的責任下圖列出了在網站建設與網頁設計的各個階段中需要參與的人員角色，我來為大家科普一下關于定制網站建設必備知識?下面希望有你要的答案，我們一起來看看吧!

定制網站建設必備知識

在每一個開發階段，都需要相關各方人員的共同合作，包括客戶、設計師和程序開發員等不同角色，每個角色在不同的階段有各自需要承擔的責任。下圖列出了在網站建設與網頁設計的各個階段中需要參與的人員角色。

網站建設與網頁設計流程中的人員角色

通常，客戶會提出要求，并提供要在網站中呈現的具體内容。設計師負責進行頁面設計，并構建網站。程序開發員為網站添加動态功能。在測試階段，需要大家共同配合，尋找不完善的地方，并對其加以改進，等各方人員滿意後才能把網站發布到互聯網上。因此，每個參與者都需要以高度的責任感和參與感投入項目的開發過程中，隻有這樣才能開發出高水平的網站。

經過近 20 年的發展，互聯網已經深入社會的各個領域。伴随着這一發展過程，網站開發已經成為一個擁有大量從業人員的行業，因此，其整個工作流程也日趨成熟和完善。通常開發一個網站需要經過下圖所示的環節，下面就對其中的每一個環節進行介紹。

網站開發的工作流程

在動手制作網站之前需要給要做的網站一個準确的定位，明确建站的目的是什麼。誰能決定網站的定位呢？如果網站是做給自己的，比如一個個人網站，那麼自己決定網站定位；如果是為客戶建立網站，那麼一定要與客戶 ( 的決策層人士 ) 共同讨論，要理解他們的想法，這是十分重要的。

在理解了客戶的想法後，就要站在客戶的立場上探讨網站的定位。根據經驗，如果設計師能夠從客戶的立場出發，給客戶提出一些中肯的建議并融入策劃中去，那麼可以說設計工作已經成功了一半，這也可以大大減小在日後與客戶在溝通中發生不愉快的可能性。

在明确建站目的和網站定位後，即可開始收集相關意見，這一過程要結合公司其他部門的實際情況，這樣可以發揮網站的最大作用。

這一步是前期策劃中最為關鍵的一步，因為網站是為公司服務的，所以全面地收集相關意見和想法可以使網站的信息和功能趨于完善。收集來的信息需要整理成文檔，為了保證這個工作的順利進行，可以讓相關部門配合提交一份本部門需要在網站上開辟的欄目的計劃書。這份計劃書一定要考慮充分，因為如果要把網站作為一個正式的站點來運營，那麼每個欄目的設置都應該是有規劃的。如果考慮不充分，會導緻以後突如其來的新加内容破壞網站的整體規劃和風格。當然，這并不意味着網站成形後不許添加欄目，隻是在添加的過程中需要結合網站的具體情況，過程更加複雜，因此最好在策劃時考慮全面。

對收集的相關信息進行整理後，要找出重點，根據重點以及公司業務的側重點，結合網站定位來确定網站的欄目。開始時可能會因為欄目較多而難以确定最終需要的欄目，這就需要展開另一輪讨論，需要所有的設計和開發人員在一起闡述自己的意見，反複比較，将确定下來的内容進行歸類，形成網站欄目的樹形列表，用以清晰表達站點結構。

對于比較大的網站，可能還需要讨論和确定二級欄目以下的子欄目，對它們進行歸類，并逐一确定每個二級欄目的主頁面需要放哪些具體内容，二級欄目下面的每個小欄目需要放哪些具體内容，讓欄目負責人清楚了解本欄目的細節。讨論完以後，就應由欄目負責人按照讨論過的結果寫欄目策劃書。欄目策劃書要求寫得詳細具體，并有統一的格式，以便網站留檔。此時寫的策劃書隻是第一版，以後在制作的過程中如果出現問題應及時修改該策劃書，并且也需要留檔。

策劃書完成後，需要美術設計師 ( 也稱為美工 ) 根據每個欄目的策劃書來設計頁面。這裡需要再次指出，在設計之前，應該讓欄目負責人把需要特殊處理的地方跟美術設計師講明。在設計頁面時，美術設計師要根據策劃書把每個欄目的具體位置和網站的整體風格确定下來。為了讓網站有整體感，應該在網頁中放置一些貫穿性的元素。最終美術設計師要拿出至少 3 種不同風格的方案。每種方案應該考慮到公司的整體形象，與公司的精神相契合。确定設計方案後，相關人員經讨論後定稿。最後挑選出兩種方案交給客戶選擇，由客戶确定最終的方案。

方案設計完成後，下一步是實現靜态頁面，由程序開發員負責根據美術設計師給出的設計方案制作頁面，并制成模闆。在這個過程中，需要十分注意網站頁面之間的邏輯，并區分靜态頁面和需要服務器端實現的動态頁面。

在制作頁面的同時，欄目負責人應該開始收集每個欄目的具體内容并整理。模闆制作完成後，由欄目負責人往每個欄目裡添加具體内容。對于靜态頁面，将内容添加到頁面中即可；對于需要服務器端編程實現的頁面，則應交由程序開發員繼續完成。

為了便于讀者理解，在這裡舉一個例子，以區分動态頁面和靜态頁面的含義。例如某個公司的網站，需要展示 1000 種商品，每個頁面中展示 10 種商品。如果隻用靜态頁面來制作，那麼一共需要 100 個靜态頁面，在日後需要修改某商品的信息時，需要重新制作相應的頁面，修改得越多，工作量就越大。如果借助于服務器端的程序，制作動态頁面，例如使用 ASP 技術，則隻需要制作一個頁面，把 1000 種商品的信息存儲在數據庫中。頁面根據浏覽者的需求調用數據庫中的數據，動态地顯示這些商品的信息。需要修改商品信息時，隻要修改數據庫中的數據即可。這就是動态頁面的作用。

将動态頁面設計好後，隻剩下程序部分需要完成了。在這一步中，由程序開發員根據功能需求來編寫程序，實現動态功能。

需要說明的是，網站建設過程中，“如何統籌”是一個比較重要的問題。在上面所講述的過程進行的同時，網站的程序開發員正處于開發程序的階段，如果實現的過程中出現什麼問題，程序開發員應和設計師及時溝通，以免程序開發完成後發現問題再進行大規模的返工。

當制作和編程的工作都完成後，就要把程序和頁面進行整合。整合完成後，需要進行内部測試，測試成功後即可上傳到服務器上，交由客戶檢驗。通常客戶會提出一些修改意見，這時根據客戶的意見完成修改即可。

如果這時客戶提出會導緻結構性調整的問題，工作量就會很大。客戶并不了解網站建設的流程，很容易與網站開發人員産生不愉快的情況。因此最好在開發的前期準備階段就充分理解客戶的想法和需求，同時将一些可能發生的情況提前告訴客戶，這樣就容易與客戶保持愉快的合作關系。

從上面的講解中可以看出，一個完善的網站實際上是由若幹個不同角色的人員共同配合完成的。本書重點介紹的是與頁面制作相關的内容。

制作 Web 頁面前，應該對一些和制作相關的技術因素和設計因素有所了解。下面首先介紹幾個常用的技術因素。

在介紹頁面布局前，對網頁設計中首先會遇到的一些參數做一介紹。因為在設計一個頁面前，首先要确定這個頁面要設計成多大尺寸，以及用戶的浏覽器是否能夠正确顯示。

在移動設備沒有出現之前，人們通常隻在台式計算機上訪問網站，當時隻需要“屏幕顯示分辨率”這一個因素。

“屏幕顯示分辨率”是顯示器在顯示圖像時的分辨率。分辨率是用“點”來衡量的，顯示器上的這個“點”就是指像素 ( pixel ) 。

顯示分辨率的數值是指整個顯示器所有可視面積上水平像素和垂直像素的數量。例如 800 像素×600 像素的分辨率，是指在整個屏幕上水平顯示 800 個像素，垂直顯示 600 個像素。顯示分辨率的水平像素和垂直像素的總數總是成一定比例的，一般為 4∶3、5∶4 或 8∶5。每個顯示器都有自己的最高分辨率，并且可以兼容其他較低的顯示分辨率，所以一個顯示器可以設置多種不同的分辨率。

為什麼設計頁面時要考慮顯示分辨率呢？這是因為浏覽同一個頁面的訪問者所用的計算機顯示器不同，分辨率設置不同，顯示的效果也會不同。例如，如果以最常見的 1024 像素×768 像素的分辨率為目标設計了一個頁面，那麼使用 800 像素×600 像素分辨率顯示器的訪問者浏覽這個網頁時會看到頁面顯示不完整，需要反複拖動浏覽器的滾動條來查看未顯示出來的部分。

十年前主流的顯示分辨率是 1024 像素×768 像素，因此當時的大多數網站按照這個分辨率來進行頁面設計，就可以保證絕大多數用戶非常舒服地浏覽網頁。

而近十年來移動設備大量普及，也導緻顯示分辨率變化極大，同時“高分辨率顯示屏” ( 簡稱“高分屏” ) 的出現又增加了相關的複雜性。原來通常将一個像素作為長度單位，而現在将分辨率區分為“物理分辨率”和“邏輯分辨率”兩個概念。

物理分辨率的含義就是設備本身的分辨率，是由設備上的像素數量決定的。而邏輯分辨率則是将若幹像素合起來當作一個像素看待而算得的分辨率，它的目的是使各種設備的分辨率有大緻相當的可比性。

以一台 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 像素/英寸。

這樣，一部面積小得多的手機，它的實際像素數卻要比面積比它大很多的計算機的像素數多得多。

這時如果希望制作一個能夠同時适應這兩種設備的頁面，但沒有邏輯像素的概念，那麼就會非常不好計算。因此，在頁面設計和軟件開發時，我們都使用邏輯分辨率，不同的設備其邏輯分辨率是接近的。這樣就可以方便在基本相同的尺度上進行設計和開發了。

因此，實際上在網頁設計和開發中使用的像素單位都是邏輯分辨率。例如 2020 款的 MacBook Air 13 英寸屏幕，它的物理分辨率是 2560 像素×1600 像素，邏輯分辨率是 1280 像素 × 800 像素，二者之間的比例是 2∶1。它的邏輯像素密度是 114 像素/英寸。

可以看到，上面 3 種設備雖然包含手機、計算機以及跨越好幾年的設備，但是它們的邏輯像素密度是接近的，因此在設計時，它們的尺度也是接近的，比如一個 100 像素寬的頁面元素，其實際寬度在不同設備上也是大緻接近的。

當然這也引出了一個問題，即如果在高分辨率的設備上，将幾個像素當作一個像素，那何必還要高分屏呢？這是因為邏輯分辨率隻是用來作為單位使用的，真正顯示時的效果還是根據物理分辨率來實現的。比如一張寬度是 300 像素 ( 物理像素 ) 的圖片，在頁面中按照邏輯像素設置為 100 像素寬，如果是 1∶3 的高分屏顯示，它實際上每個像素都會對應到一個物理像素上，因此不會損失清晰度；而如果顯示到一個 1∶1 的屏幕上，就會損失清晰度。例如，在一個頁面上，正文文字大小通常為 14 像素或者 16 像素，而在高分屏上看到的文字就非常清晰，低分屏上就會模糊很多。

浏覽器類型也是在網頁設計時會遇到的一個問題。由于各個軟件廠商對 HTML 的标準支持有所不同，同樣的網頁在不同的浏覽器下會有不同的表現。

随着 CSS 在網頁設計中的普及和流行，浏覽器的因素變得比以往傳統網頁設計中更為重要。這是因為，各種浏覽器對 CSS 标準支持的差異遠遠大于對 HTML 标準的支持。因此，讀者必須認識到，設計出來的網頁在不同的浏覽器上的效果可能會有很大差異。具體的相關内容，在本書後面的章節中還會多次提及，這裡先提醒讀者注意。

下圖顯示了中國國内浏覽器的使用情況。

2020 年中國國内浏覽器的使用情況

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!