文字與圖片是構成一個網頁的兩個最基本的元素。你可以簡單地理解為：文字，就是網頁的內容。圖片，就是網頁的美觀。除此之外，網頁的元素還包括動畫、音樂、程序等等。

在網頁上點擊鼠標右鍵，選擇菜單中的“查看源文件”，就可以通過記事本看到網頁的實際內容。可以看到，網頁實際上只是一個純文本文件。它通過各式各樣的標記對頁面上的文字、圖片、表格、聲音等元素進行描述（例如字體、顏色、大小），而瀏覽器則對這些標記進行解釋并生成頁面，于是就得到你現在所看到的畫面。為什么在源文件看不到任何圖片？網頁文件中存放的只是圖片的鏈接位置，而圖片文件與網頁文件是互相獨立存放的，甚至可以不在同一臺計算機上。

自適應網頁設計 也稱為 響應性的Web設計 -設計網頁，提供一個很好的感知上的各種設備連接到互聯網。

自適應網絡設計的目的是為不同設備的多功能網站。網站是為了更方便地查看不同的分辨率和格式的設備，技術，自適應網頁設計沒有為特定類型的設備創建一個單獨的版本的網站。一個網站可能無法在您的手機，平板電腦，筆記本電腦和電視上網，要滿足全范圍的設備最佳顯示。

網站架構是一個網站，如建筑本身，涉及到技術，美學和功能的標準設計和規劃方法。傳統建筑，重點是正確的用戶和用戶的要求。這需要特別注意的網頁內容，商業計劃，易用性，交互設計，信息架構和網頁設計。

獨特的設計是比較貴的，但還涉及到一個特定的順序從頭開始，完全獨特的設計圖紙。根據不同的專業性和/或本公司或網頁設計師的政策發展的想法和概念設計，完全獨立，或接收一個數的要求（顏色，風格，等等），在客戶端或創意總監（藝術總監）的期望和想法，并嘗試保持這個趨勢的發展布局。大多數客戶錯誤地等同于一個網頁設計師和網站主，指控他和發布網站。

網絡技術的發展帶動了軟件業的發展，所以用于制作Web頁面的工具軟件也越來越豐從最基本的HTML編輯器到非常流行的Flash互動網頁制作工具，各種各樣的Web頁面制作工具，下面是耀杰科技幾款具有代表性的網頁制作器：

1.HTML編輯器。雖然HTML代碼復雜，編輯和調試要花費大量的時間，但因HTML的穩定性、廣泛支持性及可創建復雜的頁面效果，仍受高級網頁制作人員的青睞。就來說，有眾多的編輯器供選擇，這些編輯器廣泛支持復雜頁面創建及高級HTML規范，使用較為普遍的有Hotdog等專業HTML編輯器。

2.所見即所得的網頁編輯器。其中以Microsoft Frontpage為代表，它具有如Word一樣的操作界面，熟知Word功能的操作者，只要稍加培訓就能輕松編制網頁。而且，Frontpage還能解析網頁的HTML源代碼，并提供了預覽支持。但Frontpage的一些特殊顯示功能并不能在其它非IE瀏覽器下實現。所以Frontpage是一款非常適合初、中級網頁制作人員使用的工具軟件。

3.非常流行的 Macromedia公司(已被Adobe公司收購)出品的Flash互動網頁制作工具。這是一款功能非常強大的交互式矢量多媒體網頁制作工具。能夠輕松輸出各種各樣的動畫網頁，它不需要特別繁雜的操作，也比JAVA小巧精悍!但它的動畫效果、互動效果、多媒體效果十分出色。而且還可以在Flash動畫中封裝Mp3音樂、填寫表單等;并且由于Flash編制的網頁文件比普通網頁文件要小得多，所以xxx加快了瀏覽速度。這是一款十分適合動態Web制作的工具。

4.Dreamweaver: Dreamweaver是美國MACROMEDIA公司開發的集網頁制作和管理網站于一身的所見即所得網頁編輯器，它是xxx套針對專業網頁設計師特別發展的視覺化網頁開發工具，利用它可以輕而易舉地制作出跨越平臺限制和跨越瀏覽器限制的充滿動感的網頁。

●盡可能刪除那些與主題無關的欄目；

●盡可能將網站內最有價值的內容列在欄目上；

●盡可能從訪問者角度來編排欄目以方便訪問者的瀏覽和查詢；輔助內容，如站點簡介、版權信息、個人信息等大可不必放在主欄目里，以免沖淡主題。

另外，板塊的編排設置也要合理安排與劃分。板塊比欄目的概念要大一些，每個板塊都有自己的欄目。一般來說，個人站點內容較少，只要分個欄目也就夠了，不需要設置板塊。如果有必要設置板塊的，應該注意：

●各板塊要有相對獨立性；

●各板塊要有相互關聯；

●各板塊的內容要圍繞站點主題。

網站的目錄是指建立網站時創建的目錄。目錄的結構是一個容易忽略的問題，大多數站長都是未經規劃，隨意創建子目錄。目錄結構的好壞，對瀏覽者來說并沒有什么太大的感覺，但是對于站點本身的維護，以后內容的擴充和移植有著重要的影響。鏈接結構

網站的鏈接結構是指頁面之間相互鏈接的拓撲結構。它建立在目錄結構基礎之上，但可以跨越目錄。形象的說：每個頁面都是一個固定點，鏈接則是在兩個固定點之間的連線。一個點可以和一個點連接，也可以和多個點連接。更重要的是，這些點并不是分布在一個平面上，而是存在于一個立體的空間中。一般的，建立網站的鏈接結構有兩種基本方式：

●樹狀鏈接結構（一對一），這類似DOS的目錄結構，首頁鏈接指向一級頁面，一級頁面鏈接指向二級頁面。這樣的鏈接結構瀏覽時，一級級進入，一級級退出，條理比較清晰，訪問者明確知道自己在什么位置，不會“不知身在何處”，但是瀏覽效率低，一個欄目下的子頁面到另一個欄目下的子頁面，必須回到首頁再進行。

●星狀鏈接結構（一對多），類似網絡服務器的鏈接，每個頁面相互之間都建立有鏈接。這樣瀏覽比較方便，隨時可以到達自己喜歡的頁面。但是由于鏈接太多，容易使瀏覽者迷路，搞不清自己在什么位置，看了多少內容。

因此，在實際的網站設計中，總是將這兩種結構混合起來使用。網站希望瀏覽者既可以方便快速地達到自己需要的頁面，又可以清晰地知道自己的位置。所以，xxx的辦法是：首頁和一級頁面之間用星狀鏈接結構，一級和二級頁面之間用樹狀鏈接結構。關于鏈接結構的設計，在實際的網頁制作中是非常重要一環，采用什么樣的鏈接結構直接影響到版面的布局。

網站的設計可以從以下幾點出發：

●設計網站標志(LOGO)。LOGO是指網站的標志，標志可以是中文、英文字母，也可以是符號、圖案等。標志的設計創意應當來自網站的名稱和內容。比如：網站內有代表性的人物、動物、植物，可以用它們作為設計的藍本，加以卡通化或者藝術化；專業網站可以以本專業有代表的物品作為標志。最常用和最簡單的方式是用自己網站的英文名稱作標志，采用不同的字體、字母的變形、字母的組合可以很容易制作好自己的標志。

●設計網站色彩。網站給人的xxx印象來自視覺沖擊，不同的色彩搭配產生不同的效果，并可能影響到訪問者的情緒。“標準色彩”是指能體現網站型象和延伸內涵的色彩，要用于網站的標志，標題，主菜單和主色塊。給人以整體統一的感覺。至于其它色彩也可以使用，但應當只是作為點綴和襯托，絕不能喧賓奪主。一般來說，一個網站的標準色彩不超過3種，太多則讓人眼花繚亂。適合于網頁標準色的顏色有：藍色，黃、橙色，黑、灰、白色三大系列色。

●設計網站字體。和標準色彩一樣，標準字體是指用于標志，標題，主菜單的特有字體。一般網頁默認的字體是宋體。為了體現站點的“與眾不同”和特有風格，可以根據需要選擇一些特別字體。制作者可以根據自己網站所表達的內涵，選擇更貼切的字體。需要說明的是：使用非默認字體只能用圖片的形式，因為很可能瀏覽者的計算機里沒有安裝特別字體，那么辛苦設計制作便可能付之東流了。

●設計網站宣傳語。也可以說是網站的精神、主題與中心，或者是網站的目標，用一句話或者一個詞來高度概括。用富有氣勢的話或詞語來概括網站，進行對外宣傳，可以收到比較好的結果。

●網站制作背景音樂。打開需要添加背景音樂的頁面，點擊“代碼”打開代碼編輯視圖，在之間輸入“<”在彈出的代碼提示框中選擇bgsound。

這種添加背景音樂的方法是最基本的方法，也是最為常用的一種方法，對于背景音樂的格式支持大多的主流音樂格式，如WAV、MID、MP3等。如果要顧及到網速較低的瀏覽者，則可以使用MID音效作為網頁的背景音樂，因為MID音樂文件小，這樣在網頁打開的過程中能很快加載并播放，但是MID也有不足的地方，它只能存放音樂的旋律，沒有好聽的和聲以及唱詞。如果你的網速較快，或是覺得MID音樂有些單調，也可以添加MP3的音樂。

“風格”是抽象的，是指站點的整體形象給瀏覽者的綜合感受。這個“整體形象”包括站點的CI（標志，色彩，字體，標語）、版面布局、瀏覽方式、交互性、文字、語氣、內容價值等等諸多因素，網站可以是平易近人的、生動活潑的也可以是專業嚴肅的。不管是色彩、技術、文字、布局，還是交互方式，只要你能由此讓瀏覽者明確分辨出這是你網站獨有的，這就形成了網站的“風格”。

風格是有人性的，通過網站的色彩、技術、文字、布局、交互方式可以概括出一個站點的個性：是粗獷豪放的，還是清新秀麗的；是溫文儒雅的，還是執著熱情的；是活潑易變的，還是墨守成規的。

總之，有風格的網站與普通網站的區別在于：在普通網站上你看到的只是堆砌在一起的信息，你只能用理性的感受來描述，比如信息量多少，瀏覽速度快慢等；在有風格的網站上你可以獲得除內容之外的更感性的認識，比如站點的品位，對瀏覽者的態度等。

在明確自己想給人以怎樣的印象后，要找出網站中最有特色的東西，就是最能體現網站風格的東西。并以它作為網站的特色加以重點強化、宣傳。總之，風格的形成不是一次定位的，你可以在實踐中不斷強化、調整、改進。

通過網站制作技術的功能來創建和顯示不同的網站：

對于顯示技術

靜態-包括一個靜態的HTML（標準通用標記語言下的一個應用）頁（HTM，DHTML），組成一個整體。用戶得到的形式，它們被存儲在服務器上的文件。

動態-包括HTM，動態HTML（DHTML）的母版頁，信息，腳本和其他東西作為單獨的文件。需求的特殊的腳本（程序）的其他數據的基礎上，從任何來源產生內容。

間服務商的專業水平和服務質量。這是選擇網站空間的xxx要素，如果選擇了質量比較低下的空間服務商，很可能會在網站運營中遇到各種問題，甚至經常出現網站無法正常訪問的情況，或者遇到問題時很難得到及時的解決，這樣都會嚴重影響網絡營銷工作的開展。

網站空間的穩定性和速度等。這些因素都影響網站的正常運作，需要有一定的了解，如果可能，在正式購買之前，先了解一下同一臺服務器上其他網站的運行情況。

網站空間的價格提供網站空間服務的服務商很多，質量和服務也千差萬別，價格同樣有很大差異，一般來說，著名的大型服務商的虛擬主機產品價格要貴一些，而一些小型公司可能價格比較便宜，可根據網站的重要程度來決定選擇哪種層次的虛擬主機提供商。

一、主題規劃

主題不可過于分散，網站主題越集中，一般情況下網站所有者在這方面投入的精力會更多，因此所提供信息的質量也會越高。

二、豐富內容

兩者相輔相成，有著豐富內容的通常會受訪問者的歡迎。但是這里的內容豐富并不是指內容的繁雜，而是指內容的深度。搜索引擎在排名網站時，不僅要看網頁的信息相關度，同時也會考慮網站的聲望如何，比如外部鏈接有多少，網頁的點擊率有多高等等。因此一個內容充實的網站肯定會排在內容貧乏的網站前面由于不同的搜索引擎在網頁支持方面存在差異，因此在網頁設計時不要只注意外觀漂亮，許多平常設計網頁時常用到的元素到了搜索引擎那里會產生問題。

三、框架結構

有(如FAST)是不支持框架結構的，他們的“蜘蛛”：程序無法閱讀這樣的網頁。圖象區塊(Image Maps)，除AltaVista、Google明確支持圖像xxx接，其他引擎是不支持它的。當“蜘蛛”程序遇到這種結構時，往往會感到茫然不知所措。因此盡量不要設置Image Map鏈接。

四、xxx連接

有不少的網站為導航鏈接加上了xxx，如點擊某個項目會展開下層鏈接等。這些效果一般通過Java script實現，視覺上非常新穎，但在搜索引擎爬蟲程序的眼里則沒那么誘人，相反它無法解讀這種鏈接。能夠讓搜索引擎順利檢索到網頁，還是犧牲掉一些花哨的東西。

五、FLASH

雖然FLASH制作的網頁視覺效果較好，但搜索引擎對此卻不太感冒。明智的做法是提供FLASH和非FLASH網頁兩種選擇，這樣即增加了網頁的觀賞性，又照顧到了搜索引擎的情緒。

根據網站所用編程語言分類：例如 asp網站、php網站、jsp網站等;

根據網站的用途分類：例如 企業網站、門戶網站(綜合網站)、行業網站、娛樂網站等;

根據網站的持有者分類：例如 個人網站、商業網站，政府網站等;

根據網站的內容分類：網站搜索()、資訊(新華網)、下載(華軍軟件園)、圖片等;

網址(比如 hao123)、音樂(比如 MP3)、視頻(影視)等;

商務(比如 阿里巴巴)、網店(比如 有啊)等;

問答(比如 知道)

百科(比如 百度百科、維基百科、全球百科)等。

網站制作時，也要充分考慮到結構的優化。網站的結構應該盡量的人性化，讓用戶方便快捷的尋找信息。混亂的結構模式不僅用戶不喜歡，就連自己看了也不舒服。所以，在結構設置的時候，框架要設定好，哪個模塊包含哪些內容，哪個模塊要分幾個子目錄等等。同時，網站xxx有一個關鍵字搜索的功能，因為這樣可以減少用戶尋找感興趣信息的時間，對于提高客戶體驗是十分有幫助的。

一、確定網站主題

網站主題就是你建立的網站所要包含的主要內容，一個網站必須要有一個明確的主題。特別是對于個人網站，你不可能像綜合網站那樣做得內容大而全，包羅萬象。

二、搜集資料

明確了網站的主題以后，你就要圍繞主題開始搜集材料了。常言道：“巧婦難為無米之炊”。要想讓自己的網站有血有肉，能夠吸引住用戶，你就要盡量搜集材料，搜集得材料越多，以后制作網站就越容易。材料既可以從圖書、報紙、光盤、多媒體上得來，也可以從互聯網上搜集，然后把搜集的材料去粗取精，去偽存真，作為自己制作網頁的素材。

三、規劃網站

四、選擇合適的制作工具

盡管選擇什么樣的工具并不會影響你設計網頁的好壞，但是一款功能強大、使用簡單的軟件往往可以起到事半功倍的效果。網頁制作涉及的工具比較多，首先就是網頁制作工具了，大多數網民選用的都是所見即所得的編輯工具。

五、網頁制作

六、上傳測試

網頁制作完畢，最后要發布到Web服務器上，才能夠讓全世界的朋友觀看， 而上傳的工具有很多，有些網頁制作工具本身就帶有FTP功能，利用這些FTP工具，你可以很方便地把網站發布到自己申請的主頁存放服務器上。網站上傳以后，你要在瀏覽器中打開自己的網站，逐頁逐個鏈接的進行測試，發現問題，及時修改，然后再上傳測試。全部測試完畢就可以把你的網址告訴給朋友，讓他們來瀏覽。

七、域名、空間綁定解析

（1）網站規劃和欄目設置不合理。主要表現在欄目設置有重疊、交叉、或者欄目名稱意義不明確，容易造成混淆，使得用戶難以發現需要的信息，有些網站則欄目過于繁多和雜亂，網站導航系統又比較混亂（41.0%的企業網站導航系統基本清晰合理，有1/3的企業網站存在嚴重的導航問題，1/4的網站導航存在不同程度的問題，但不至于造成用戶嚴重迷失）；

（2）重要信息不完整。企業介紹、聯系方式、產品分類和詳細介紹、產品促銷等是企業網站最基本的信息，但為數不少的企業網站上這些重要信息不完整（例如同時公布地址、電話和Email地址的企業網站僅有42.7%，即半數以上的企業網站聯系方式不完整），尤其是產品介紹過于簡單，有些甚至沒有公布任何聯系方式；

（3）網頁信息量小。包括兩種情況：一種頁面上的內容過少，或者將本來一個網頁可以發布的內容分為多個網頁，而且各網頁之間沒有相互鏈接，需要主頁點擊；另一方面是盡管內容總量不少，但有用的信息少，籠統介紹的內容多；

（4）欄目層次過深。一般來說，重要的信息應該出現在最容易被用戶發現的位置，應盡可能縮短信息傳遞的渠道，以使企業信息更加有效地傳遞給用戶，石由于網站欄目層次過深，用戶需要多次點擊才能獲取有效信息，在這個過程中，一些有價值的用戶可能已經離開了網站；

（5）網站缺乏促銷意識。促銷意識指通過網站向訪問者展示產品、對銷售提供支持，有多種具體表現方式，如主要頁面的產品圖片、介紹、通過頁面廣告較好體現出企業形象或者新產品信息、列出銷售機構聯系方式、銷售網店信息等，或者具有積累內部網絡營銷資源和拓展外部網絡營銷資源的作用，這方面總體狀況比較欠缺。

（6）企業網站系統，無論大型還是中小型企業，利用網絡傳遞信息在一定程度上提高了辦事的效率，提高企業的競爭力。

靜態網頁，動態網頁主要根據網頁制作的語言來區分：

靜態網頁使用語言：超文本標記語言（標準通用標記語言下的一個應用）或可擴展標記語言（標準通用標記語言下的一個應用子集）

動態網頁使用語言：HTML+ASP 或HTML+ASP,NET或 HTML+PHP 或 HTML+JSP 等。

搜索引擎不支持框架結構的網頁，所以我們在網站制作中，不要采用框架結構，xxx還是采用div+css機構的網站。

什么是動態網頁呢？一般動態網頁的網址中含有"?"、"&"等符號的頁面，大家都知道搜索引擎對靜態頁面比較友好，對動態就不怎么友好了。為了能夠讓蜘蛛更好的爬向你的頁面，xxx還是將網站設計為偽靜態的頁面。

每個網頁中或多或少的都會有圖片，圖片很可能會不利于搜索引擎蜘蛛的抓取，所以為了蜘蛛抓取你的網站，xxx盡量少使用圖片，就算使用了圖片也要加上alt標簽。

網站的導航欄是整個網頁中最為重要的一部分，所以在網站制作中我們就需要保證蜘蛛能夠抓取，那么如何才能夠保證呢？導航欄一般不要用圖片、動畫、javascript等來制作，用文字是xxx的。因為用了圖片、動畫、javascript來制作導航是非常不利于蜘蛛抓取的。

Web設計人員使用各種不同的工具的一部分。這些工具的生產過程中，他們都參與更新，隨著時間的推移，新的標準和軟件，但背后的原理仍然是相同的。

Web圖形設計人員使用向量和光柵圖形包，用于創建Web格式的圖像或設計原型。可以手工編碼所產生的所見即所得的編輯軟件，用于創建網站的技術包括標準化的標記起來。也有專有的軟件插件，繞過客戶端的瀏覽器版本的基礎上，這些往往是所見即所得的，但選擇使用該軟件的腳本語言。搜索引擎優化工具可以用來檢查搜索引擎中的排名，并提出改進建議。

網頁設計師可以使用其他工具，包括標記驗證器和其他測試工具的可用性和易用性，以確保他們的網站符合網頁易讀性指引。

如果你比沒有專業的人士和獨立的團隊，就不妨在外邊找個網站制作的幫手，比如網站開發。強大的團隊支持，專業的網站制作高手，為你的網站量身定做最適合xxx觀的版面，讓關注的人也知道你在有變化，并為之在努力，相信潛在的客戶群會成為優質客戶群。

從前一般網頁都使用表格進行排版設計，這樣作的優點在于設計制作速度快，尤其在可視化網頁編輯器，如Microsoft FrontPage中，這樣設計顯得直觀而方便，然而這讓越來越復雜的版面需要許多不斷嵌套的表格設計，致使網頁代碼變得冗長復雜，使文件體積增大，且不容易被搜索引擎查找。同時，這樣做也不利于大型網站的改版工作。

HTML5網站是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 標準的HTML 標準版本，現在仍處于發展階段，但大部分瀏覽器已經支持某些 HTML5 技術。HTML 5網站有兩大特點：首先，強化了 Web網頁的表現性能。其次，追加了本地數據庫等 Web 應用的功能。

廣義論及HTML5網站時，實際指的是包括HTML、CSS和JavaScript在內的一套技術組合。它希望能夠減少瀏覽器對于需要插件的豐富性網絡應用服務（plug-in-based rich internet application，RIA)，如Ado[1-2]be Flash、Microsoft Silverlight，與Oracle JavaFX的需求，并且提供更多能有效增強網絡應用的標準集。html5簡介HTML標準自1999年12月發布的 HTML 4.01 后，后繼的 HTML 5 和其它標準被束之高閣，為了推動Web標準化運動的發展，一些公司聯合起來，成立了一個叫做 Web Hypertext Application Technology Working Group （Web 超文本應用技術工作組 - WHATWG） 的組織。