網頁設計基礎

　　網頁設計，是根據企業希望向瀏覽者傳遞的信息（包括產品、服務、理念、文化），進行網站功能策劃，然后進行的頁面設計美化工作下面是小編為大家整理的網頁設計基礎，僅供參考，歡迎大家閱讀。

　　網頁設計基礎

　　第一章 ASP使用基礎

　　要求：配置ASP運行環境

　　根據所用Windows版本，安裝適當的Web服務器軟件(PWS或IIS)，然后創建一個名為ASP的虛擬目錄，并在該目錄中創建一個ASP動態網頁，最后在IE瀏覽器中運行該頁。

　　(1)如果當前使用Windows 98操作系統，練習PWS 4.0的安裝和卸載操作;如果當前使用Windows 2000，練習IIS 5.0的安裝和卸載操作。

　　提示：安裝PWS通過其安裝程序來實現;安裝IIS通過控制面板來實現。

　　(2)在“我的文檔”文件夾中創建一個名為ASP的文件夾，將其設置為Web站點中的一個虛擬目錄，其別名與實際文件夾名稱相同。

　　(3)在記事本程序中編寫一個ASP動態網頁，用于顯示當前日期和時間，將文件保存在上述ASP文件夾中，文件名為ShowNow.asp。

　　(4)在IE瀏覽器中運行ASP文件ShowNow.asp，并按F5鍵刷新頁面，以查看動態內容。

　　第二章 HTML語言

　　要求：用HTML語言創建網頁

　　1. 在網頁中使用BODY標記的有關屬性設置網頁的背景圖片和文本顏色。

　　提示：用BODY標記的BACKGROUD屬性設置網頁的背景圖片;用該標記的TEXT屬性設置文本顏色。

　　2. 在網頁中設置文本的字體、字號和顏色。

　　提示：分別用FONT標記的FACE、SIZE和COLOR屬性設置文本的字體、字號和顏色。

　　3. 在網頁中分別創建一個無序列表和無序列表。

　　提示：有序列表用OL和標記LI來創建;無序列表用UL和LI標記來創建。

　　4. 在網頁中插入一幅圖像，然后設置該圖像的格式。

　　提示：用IMG標記插入圖像，用該標記的有關屬性設置圖像格式。

　　5. 在網頁中播放視頻文件(.avi)。

　　提示：用IMG標記在網頁中播放多媒體文件，此時應設置IMG標記的CONTROLS、DYNSRC、START和LOOP屬性，以控制播放過程。

　　6. 編寫一個網頁，選擇一首mp3文件作為其背景音樂，并在網頁中插入一個字幕。

　　提示：用BGSOUND標記在網頁中添加背景音樂，并通過SRC屬性指定一個mp3音樂文件的URL;用MARQUEE標記在頁面中插入一個字幕。

　　7. 在網頁中創建一個表格并設置表格、行和單元格的屬性，然后將表格中的某些單元格合并起來。

　　提示：用TABLE、TR和TD(或TH)標記創建表格，并通過這些標記的屬性來設置表格、行和單元格的屬性;若要合并一些單元格，則應設置TD(或TH)標記的COLSPAN、ROWSPAN屬性。

　　8. 編寫一個框架網頁，在頂部創建一個用于顯示網站標題的橫幅框架，在左邊創建一個用于顯示網頁連接的目錄框架，并在右下方創建一個用于顯示內容的主要框架。要求在目錄框架中單擊不同鏈接時，在主要框架中顯示相應的網頁。

　　提示：在框架網頁中，用FRAME標記的NAME屬性指定各個框架的名稱，例如將右下方的框架名稱指定為main;在目錄網頁中，用A標記的TARGET屬性指定在哪個框架中顯示超鏈接指向的目標文檔。

　　9. 在網頁中創建一個表單，并要求在該表單中包含文本框、密碼框、滾動文本框、單選按鈕、復選框、下拉菜單、提交按鈕和重置按鈕等控件。

　　提示：為了便于安排表單控件的布局，可以將控件放置在表格的單元格內，并對單元格的屬性進行設置。

　　第三章 VBScript語言

　　要求：使用VBScript語言編程

　　1. 編寫一個網頁，在其HEAD部分編寫一段腳本代碼，當該頁被加載時顯示一個輸入對話框，提示讓訪問者輸入姓名，單擊“確定”按鈕后，在對話框中顯示對該訪問者的歡迎信息。

　　提示：在網頁的HEAD部分編寫一個過程(如名稱為Welcome)，通過InputBox函數輸入用戶信息，通過MsgBox函數顯示歡迎信息，并將BODY標記的onLoad屬性設置為該過程名稱，以便該頁被加載時執行該過程。

　　2. 編寫一個網頁，其顯示效果如圖3.18所示。在上面兩個文本框中分別輸入一個整數，要求兩者大小不相等。當單擊“顯示結果”按鈕時，在最下面的文本框中顯示兩者中的較小數;當單擊“清除結果”按鈕時，將三個文本框中的內容清空;如果未同時在上面兩個文本框中輸入內容而單擊“顯示結果”按鈕，則顯示一個對話框，提示用戶在上面兩個文本框中分別輸入一個整數。

　　提示：“顯示結果”按鈕為普通按鈕，在其onClick事件過程中編寫腳本，以實現所需操作;“清除結果”按鈕為重置按鈕。為了保證比較結果的正確性，應使用CInt或CLng函數轉換文本框的值。

　　3. 編寫一個網頁，用于求解一元二次方程ax2 + bx + c = 0，頁面效果如圖3.19所示。在文本框中分別輸入二次項系數a、一次項系數b和常數項c的值，然后單擊“求解”按鈕，此時根據二次項系數a和判別式Δ= b2 - 4ac的取值情況分別進行不同的處理：如果a = 0，則在“求解情況”框中顯示“二次項系數不能等于0。”;如果Δ> 0，則“求解情況”框中顯示“方程有兩個相異的實數根。”，并在“x1 =”和“x2 =”框中顯示這兩個根;如果Δ= 0，則在“求解情況”框中顯示“方程有兩個相等的實數根。”，并在“x1 =”和“x2 =”框中顯示此根;如果Δ< 0，則在“求解情況”框中顯示“方程沒有實數根。”。如果單擊“重置”按鈕，則清除所有文本框的內容。

　　提示：為了便于安排表單控件的布局，可以考慮將控件放置在表格中;“求解”按鈕為一普通按鈕，在其onClick事件過程中編寫腳本來實現所需操作;“重置”按鈕的TYPE屬性應為submit。

　　4. 編寫一個網頁，該頁上部列出一些專業的編號和名稱，下部有一個文本框和一個按鈕，顯示結果如圖3.20所示。如果在文本框中輸入一個專業編號(1-6)并單擊“確定”按鈕，則出現一個對話框，顯示當前所選擇的專業名稱;如果輸入的專業編號大于6，則顯示所選擇的是其他專業。

　　提示：專業列表用一個有序列表來顯示;“確定”按鈕為一普通按鈕，在其onClick事件過程中編寫腳本，并使用Select Case語句來實現所需操作。

　　5. 編寫一個網頁，用于計算和輸出101～1 000之間所有奇數之和。

　　提示：在網頁中添加一個普通按鈕，在其onClick事件過程中編寫腳本，使用Do...Loop或For...Next語句實現求和操作，并通過MsgBox函數來顯示計算結果。

　　6. 編寫一個網頁，利用于下面的公式來計算自然數e的值，直到最后一項小于10-4為止。

　　提示：在網頁中添加一個普通按鈕，在其onClick事件過程中編寫腳本，使用While...Wend語句實現所需操作，并通過MsgBox函數來顯示計算結果。

　　7. 編寫一個網頁，其顯示效果如圖3.21所示。要求在單擊“顯示結果”按鈕時，將所有表單控件的名稱和當前值顯示在滾動文本框中。

　　提示：“顯示結果”按鈕是一個普通按鈕，在其onClick事件過程中編寫腳本，并通過For Each...Next語句來測試第一個表單控件的名稱和當前值，代碼如下：

　　Sub btnShow-onClick

　　' Elements表示由表單上所有控件構成的集合

　　For Each k In Document.Form1.Elements

　　s = s & k.Name & "=" & k.Value & vbCrLf

　　Next

　　' txtResult為滾動文本框的名稱

　　Form1.txtResult.Value = s

　　End Sub

　　8. 編寫一個網頁，用于計算兩個整數的最大公約數，其顯示效果如圖3.22所示。在上面的兩個文本框中分別輸入一個整數，然后單擊“顯示結果”按鈕，使這兩個整數顯示在下面的文本框中。

　　提示：“顯示結果”按鈕為普通按鈕，在其onClick事件過程中編寫腳本，并調用一個自定義函數來實現計算最大公約數的功能。

　　9. 編寫一個網頁，其顯示效果如圖3.23所示。如果單擊“打開新網頁”按鈕，則在另一個窗口中打開指定的網頁;如果單擊“關閉當前窗口”按鈕，則出現一個對話框，提示關閉當前窗口，單擊“是”，即關閉當前窗口。

　　提示：“打開新網頁”和“關閉當前窗口”兩個按鈕均為普通按鈕，在它們的onClick事件過程中編寫腳本，并調用Window對象的有關方法來實現所需操作。

　　10. 編寫一個網頁，利用Window對象的有關方法實現在狀態欄顯示滾動文本。

　　提示：用Window.Status屬性設置在狀態欄顯示的文本，用Window.SetTimeout方法設置兩次過程調用之間的時間間隔。

　　第四章 使用ASP對象

　　要求：使用ASP對象

　　要求掌握5個ASP內置對象的使用方法，即Response對象、Request對象、Server對象、Session對象和Application對象。學習這一章時，關鍵掌握這些ASP內置對象的一個重要特征，即不用創建便可以在腳本中使用。

　　1. 編寫一個ASP頁，以不同的字號顯示“ASP動態網頁設計”。

　　提示：用For…Next語句實現所要求的功能，將要顯示的內容放置在和標記之間，以循環變量的值作為FONT標記的SIZE屬性值。

　　2. 編寫一個ASP頁，使用Response.Write方法向客戶端瀏覽器輸出一個完整的HTML文件。

　　提示：使用Response.Write方法向客戶端瀏覽器輸出數據時，如果參數值包含字符組合 %>，則使用轉義序列 %> 來代替。Web服務器在處理腳本時，將轉換這一轉義序列。要輸出一個完整的HTML文件，既可以用Response.Write方法逐行輸出，也可以將所有內容放在一個字符串中，利用Split函數從字符串中返回數組并使用循環語句來輸出所有數組元素。

　　3. 編寫兩個ASP文件，功能都是將整數1～5 000輸出到客戶端瀏覽器上并計算所用時間，要求在一個文件中將Buffer屬性為設置True，在另一個文件中將Buffer屬性設置為False。

　　提示：在.asp文件中，設置Buffer屬性的語句應該放在命令后面的第一行。如果在HTML或腳本輸出之后更改Buffer屬性值，則會出現錯誤。

　　4. 編寫一個靜態網頁和一個ASP動態網頁，在靜態網頁中包含著文本框、單選按鈕、復選框、提交按鈕和重置按鈕等控件，并且通過POST方法提交來用戶名、E-mail、性別以及個人愛好等數據，在動態網頁中通過Form集合檢索這些數據并顯示出來。

　　提示：在靜態網頁中，用戶名和E-mail用文本框來輸出，性別通過單選按鈕來選擇，個人愛好則通過復選框為選擇。在動態網頁中，用Request.Form("控件名稱")形式來檢索所提交的表單數據。

　　5. 編寫一個ASP動態網頁，通過使用Cookie制作一個簡單的網頁計數器。

　　提示：在動態網頁中，用Request.Cookies集合檢索用于保存訪問次數的Cookie值，若該值為空，則通過Response.Cookies集合將它設置為1，否則將它加1。

　　6. 編寫一個ASP動態網頁，用于顯示當前網頁的虛擬路徑、發出請求的客戶端的IP地址、服務器的名稱、所用HTTP協議的版本號以及服務器軟件版本號。

　　提示：通過Request.ServerVariables ("服務器環境變量名")格式來讀取所指定的各項信息。讀取當前網頁的虛擬路徑時，服務器環境變量名為SCRIPT-NAME;讀取客戶端的IP地址時，服務器環境變量為REMOTE-ADDR;讀取服務器的名稱時，服務器環境變量名為SERVER-NAME;讀取HTTP協議的版本號時，服務器環境變量名為SERVER-PROTOCOL;讀取服務器軟件的版本號時，服務器環境變量名為SERVER-SOFTWARE。

　　7. 編寫一個HTML靜態網頁和一個ASP動態網頁，在靜態網頁中創建一個登錄表單，用于提交用戶名和密碼，在動態網頁中檢查是否輸入了用戶名和密碼，如果沒有輸入這些信息則重定向到靜態網頁中，如果已經輸入了這些信息則顯示歡迎信息。

　　提示：在動態網頁中通過Request.Form集合檢索所提交的用戶名和密碼，如果相應的值均為空，則通過Response.Redirect或Server.Transfer方法轉換到靜態網頁上。

　　8. 編寫一個ASP動態網頁，用于顯示每個用戶的會話標識和頁面被刷新的次數。

　　提示：用戶的會話標識通過Session對象的SessionID屬性返回;頁面的刷新次數保存在一個會話變量中，若該變量的值為空串，則將其設置為1，否則將其加1。

　　9. 利用Internet信息服務管理單元創建一個基于ASP的應用程序。

　　提示：選擇“開始→程序→管理工具→Internet服務管理器”命令，然后在左側的“樹”窗格中右擊“默認Web站點”并選擇“新建→虛擬目錄”命令，接著按照虛擬目錄創建向導的提示操作即可。

　　10. 在global.asa文件中編寫應用程序事件和會話事件的腳本，然后編寫一個ASP動態網頁，用于顯示目前在線人數。

　　提示：用一個應用程序變量來保存目前在線人數，在Application-OnStart事件中初始化該變量，在Session-OnStart事件中將該變量加1，在Session-OnEnd事件中將該變量減1。

　　第五章 使用ASP組件

　　要求：使用ASP組件

　　1. 使用內容輪顯組件在ASP頁面上自動輪換顯示一首詩、一幅圖像和一段視頻。

　　提示：在內容列表文件中包含3個HTML內容字符串條目，分別顯示一首詩、一幅圖像和一段視頻;在ASP頁中通過調用ContentRotator對象的ChooseContent方法從內容列表文件中檢索一個HTML內容字符串并將其顯示出來。

　　2. 使用廣告輪顯組件在ASP頁面上自動輪換顯示3個廣告，它們各占用30%、30%和40%的顯示時間。

　　提示：在輪顯列表文件中包含3個廣告，其相對權值分別為3、3和4，在ASP頁面上通過調用廣告輪顯組件對象的GetAdvertisement方法從輪顯列表文件中獲取下一個廣告。

　　3. 使用內容鏈接組件在ASP頁面上創建“上一頁”和“下一頁”鏈接。

　　提示：首先創建內容鏈接列表文件，在該文件中包含要顯示的Web頁的列表;然后在ASP頁面中通過調用Nextlink對象的GetPreviousURL方法獲取鏈接列表文件中前一項的URL;通過調用GetPreviousDescription方法獲取內容鏈接列表文件中前一項的描述文字;通過調用GetNextURL("Nextlink.txt")獲取內容鏈接列表文件中下一項的URL;通過調用GetNextDescription方法內容鏈接列表文件中下一個項的描述文字。

　　4. 使用頁面計數器組件顯示ASP頁面被瀏覽的次數。

　　提示：首先創建頁面計數器對象實例，然后通過調用該對象的PageHit使當前ASP頁面的訪問數加1，再通過調用該對象的Hits方法獲取當前頁被打開或刷新的次數。

　　5. 使用計數器組件創建一個投票系統。

　　提示：在global.asa文件中，用OBJECT標記創建一個應用程序作用域的數器組件對象實例;在ASP頁面中通過調用該對象的Increment方法使指定項目的選票數加1;通過該對象的Get方法獲取指定項目的當前選票數。

　　6. 使用瀏覽器功能組件檢查客戶端瀏覽器的名稱和版本號。

　　提示：首先使用Server.CreateObject方法創建瀏覽器功能組件的對象實例，然后通過該對象的Browser屬性獲取瀏覽器名稱;通過該對象的Version屬性獲取瀏覽器的版本號。

　　7. 使用文件存取組件創建一個HTML網頁，并通過單擊超鏈接打開該網頁。

　　提示：首先創建FileSystemObject對象實例fso，然后通過調用fso對象的CreateTextFile方法創建一個文本文件并返回TextStream對象，并通過調用該對象的WriteLine方法寫入HTML代碼行;接著用A標記創建一個指向該文件的超鏈接。

　　第六章 使用ADO對象

　　要求：使用ADO對象

　　要求通過ADO對象(Connection、Recordset、Command)來訪問數據庫。通過這些ADO對象不僅可以連接到Access和SQL Server等格式的數據庫，而且可以將數據庫中的信息顯示在網頁上，還可以對數據庫中的數據進行增刪改等操作。

　　1. 使用Connection對象通過OLE DB提供程序連接到Microsoft SQL Server示例數據庫pubs。

　　(1) 將連接信息保存在連接字符串中。

　　(2) 將連接信息保存數據鏈接文件中。

　　提示：對SQL Server數據庫創建OLE DB連接時，可以將連接信息保存在連接字符串中，該字符串包含著以下5個參數：PROVIDER參數指定OLE DB提供程序的名稱，對于SQL Server數據庫，OLE DB提供程序名稱為SQLOLEDB;DATA SOURCE參數指定SQL Server數據庫服務器的名稱;UID參數指定連接中使用的SQL Server登錄標識;PWD參數指定SQL Server登錄密碼;DATABASE參數指定位于數據庫服務器上的一個指定數據庫(在本題中為pubs)。創建數據鏈接文件時，首先在記事本創建一個擴展名為.udl的文本文件，然后打開該文件并利用“數據鏈接屬性”對話框對有關屬性進行設置，最后在連接字符串中使用FILE NAME參數來引用該文件。

　　2. 使用Connection對象通過ODCB驅動程序連接到Microsoft SQL Server示例數據庫Northwind。

　　(1) 創建系統DSN，將連接信息保存在Windows注冊表中。

　　(2) 創建文件DSN，將連接信息在文本文件中。

　　(3) 將連接信息保存在字符串中，直接包含在ASP腳本代碼中。

　　提示：系統DSN和文件DSN均通過ODBC數據源管理器來創建，前者在連接字符串中用DSN參數來引用，后者在連接字符串中用FILEDSN參數來引用;如果將連接信息保存在字符串中，則應在連接字符串中包含以下4個參數：DRIVER參數指定所用的ODBC驅動程序(本題中為{SQL Server})，UID和PWD給出用戶標識和密碼，DATABASE參數指定要連接的數據庫(本題中為Northwind)。

　　3. 使用Connection對象通過OLE DB提供程序連接到Microsoft Access示例數據庫Northwin.mdb。

　　(1) 將連接信息保存在連接字符串中。

　　(2) 將連接信息保存數據鏈接文件中。

　　提示：通過OLE DB提供程序連接到Microsoft Access數據庫時，連接字符串中應包含PROVIDER和DATA SOURCE兩個參數：前者指定連接數據庫所使用的OLE DB提供程序(在本題中為Microsoft.Jet.OLEDB.4.0)，后者指定要連接的Access數據庫的完整路徑;數據鏈接文件在連接字符串中可以通過FILE NAME參數。

　　4. 使用Connection對象通過ODCB驅動程序連接到Microsoft Access示例數據庫Northwin.mdb。

　　(1) 創建系統DSN，將連接信息保存在Windows注冊表中。

　　(2) 創建文件DSN，將連接信息在文本文件中。

　　(3) 將連接信息保存在字符串中，直接包含在ASP腳本代碼中。

　　提示：連接Microsoft Access數據庫時，系統DSN和文件DSN均通過ODBC數據源管理器來創建，前者在連接字符串中用DSN參數來引用，后者在連接字符串中用FILEDSN參數來引用;如果將連接信息保存在字符串中，則應在連接字符串中包含以下兩個參數：DRIVER參數指定所使用的ODBC驅動程序(本題中為{Microsoft Access Driver })，使用DBQ參數指定要連接的Access數據庫。

　　5. 使用Connection對象完成下列操作：

　　(1) 創建一個SQL Server數據庫，名稱為mydatabase。

　　(2) 在數據庫mydatabase中創建一個新表，名稱為mytable，包含user-id、user-name和password三個列，user-id為表的標識列。

　　(3) 向mytable表中添加若干條記錄(用戶名不得重復)。

　　(4) 對mytable表中的指定記錄進行修改。

　　(5) 刪除mytable表中的指定記錄。

　　(6) 以表格形式顯示mytable表中的全部記錄。

　　提示：使用Connection對象的Execute方法還能夠執行指定的SQL語句，從而完成創建數據庫、創建表、添加記錄、修改記錄、刪除記錄以及檢索記錄等操作，相應的SQL語句分別為CREATE DATABASE語句、CREATE TABLE語句、INSERT語句、UPDATE語句、DELETE語句以及SELECT語句。

　　6. 連接到Microsoft SQL Server示例數據庫pubs，然后使用Recordset對象完成下列操作：

　　(1) 以表格形式顯示authors表中的記錄。要求每頁僅顯示一個作者的資料，并建立“第一頁”、“上一頁”、“下一頁”和“最后一頁”鏈接，通過這些鏈接可以在不同記錄之間移動。

　　(2) 分頁顯示authors表中的記錄，要求每頁顯示五個作者的資料，并在頁面底部列出總頁數、當前頁號和所有頁號(超鏈接)，通過超鏈接可以在不同記錄組之間移動。

　　(3) 按照作者編號從authors表中搜索作者。如果找到，在表格中列出作者資料，否則顯示“沒有找到符合條件的記錄!”。

　　(4) 從authors表中提取來自加利福尼亞州(即state列值為“CA”)的作者記錄，并將該記錄集保存到文件中，隨后從該文件中讀取記錄集，以表格形式顯示出來。

　　提示：利用Recordset對象的有關方法可以在不同記錄之間移動，即：調用MoveFirst方法移動到記錄集內的第一條記錄上，調用Move -1相對于當前記錄向前移動一行，調用Move 1相對于當前記錄向后移動一行，調用MoveLast移動到記錄內的最后一條記錄上;分頁顯示數據庫記錄時，使用Recordset對象的PageSize屬性指定一頁中的記錄數，使用PageCount屬性返回總頁數，使用AbsolutePage屬性指定當前記錄所在的頁;使用Recordset對象的Find方法可以搜索記錄集內滿足指定條件的記錄，如果條件符合，則記錄集的位置設置在找到的記錄上(EOF屬性值為False)，否則位置將設置在記錄集的末尾(EOF屬性值為True);使用Recordset對象的Save方法可以將記錄集保存在文件中，隨后可以使用Open方法來恢復記錄集的內容。

　　7. 連接到前面所創建的mydatabase數據庫，然后使用Command對象和Parameters集合完成下列操作：

　　(1) 創建一個注冊頁面，允許網站訪問者提交用戶名和密碼，并將這些數據保存到mytable表中。

　　(2) 創建一個修改密碼的頁面，允許用戶更改其密碼。

　　提示：使用Command對象添加記錄時，可以將SQL INSERT語句作為CommandText的值，并使用問號“?”來表示VALUES子句中的值，執行命令時所需參數并通過相應的Parameter對象來傳遞;使用Command對象添加記錄時，可以將SQL UPDATE語句作為CommandText的值，并使用問號“?”來表示SET子句和WHERE子句中的值，執行命令時所需參數并通過相應的Parameter對象來傳遞。

　　網站網頁設計知識

　　1.在進行網頁設計的時候需要使用到一些軟件，其中像是FrontPage就是經常要使用到的一種，這一種軟件其實還是比較簡單的，使用也是方便的，另外也是高度符合IE瀏覽器的支持設計，DreamWave也是可以使用的，這個軟件的功能還是非常的強大的，設計成品了以后對于很多的瀏覽器都是支持的。

　　2.在圖片的處理上面就是常用的Photoshop 或Fireworks就可以了，動畫制作方面當然使用的還是Flash MX。

　　3.知識儲備方面來說光宇網頁的常識還有HTML的一些基本常識都是應該要知道的，其實這個方面的知識也是很簡單的，在早期的時候只是用來制作網頁，使用筆記本就能夠進行編輯，而且在使用瀏覽器打開以后呈現的是網頁上面的形式，另外哈有CSS只是，這個也是很簡單的，是級聯樣式表，也叫做風格樣式表，在進行網頁的風格設計的時候都是需要使用到的，而且CSS還能夠讓使用者對網站的控制更加的方便，所以大多數現在都在使用這種方式。

　　4.網頁的設計之前，首先要考慮到的是關于網頁的風格，使用什么樣子的風格都是應該要提前考慮好的，但是要保持網站的簡潔性，這樣能夠也讓瀏覽者一目了然的知道網站的建設風格是什么樣子的，而且總體的網站建設也是應該要有穩定性的，但是在設計的時候一定要顯示出來自己網站的主題。

　　網站的設計和制作其實并不困難，但是制作者在制作之前應該有一個目的和計劃，知道自己要做出來的是什么樣子的風格的網站，主要的內容是什么的，而且沒有主題的網站讓瀏覽者也是會失去興趣的，所以網站的主題還是非常重要的。

　　網頁設計的優化知識

　　一、用戶體驗

　　1.速度優先

　　何為速度優先？我的理解就是一切為了網頁的加載速度讓路。這個道理搞網頁都知道，但是又幾乎所有搞網頁都曾經或仍在試圖違反它。為什么會這樣呢？通常是一個極具創意或功能強大的hack在疑惑著網頁設計者，迫使其為了應用這個hack而犧牲一部分速度，但是hack的資源是無窮無盡的，就像毒 品一樣，你用了第一個就想要用第二個，最終的后果是什么？就是你的網頁的打開速度讓人無法忍受，根本沒有訪客來瀏覽，這時候你的hack也就純粹成為了擺設，沒人用的 hack存在有何價值？

　　因此我對于添加hack的原則是凡是會破壞速度與功能的平衡點的hack無論多么具有創意或功能多么強大都必須堅定不移地舍棄或通過舍棄其它hack/改變網頁設計等方法來達到平衡。而我對于使用hack的原則則是對于用戶有用的hack才使用，實用為先。估計很多人都會罵我太現實，沒有一點藝術家的浪漫。但是我也必須很現實地告訴你，網頁設計者不是藝術家，他們存在的價值是使更多用戶訪問你的網頁，網頁設計的根本目的也是為了增加用戶瀏覽量。因此如果你覺得某個hack的效果十分華麗或功能十分有新意但用戶卻極少使用到那我會建議你將其舍棄，這純粹是個妨礙你提高網頁速度的障礙。

　　為何我如此注重速度？因為無數的例子告訴我們速度是信息時代成功的最關鍵的因素，最典型的例子就是Google。如果你是一個Google的用戶，相信你會注意到Google的所有服務都有一個共同點：載入速度極快。而Google的兩大競爭對手Yahoo和 Microsoft的產品相較之下速度慢如蝸牛。這就是Google擊敗他們的一個關鍵因素。現代人的生活節奏很快，他們需要極高的工作效率，而如果你搜索是為了最快找到需要的信息而不是注意搜索引擎的版式多么華麗，打開郵箱是為了查看郵件而不是為了欣賞郵箱的設計風格多么前衛。因此這就是Google兩大服務Google搜索和Gmail的成功原因。Windows Live Mail設計得再前衛，結果我1分鐘都還沒打開郵箱我怎么可能看得到。而Gmai雖然沒有華麗的界面，但卻可以十分快速地打開進行工作，這無疑是用戶所需要的。

　　因此一個快速打開的頁面帶給用戶的感覺要比一個視覺效果華麗但卻等了N久都無法打開而不能被用戶注意到的網頁要好多了，這將成為你的網站吸引用戶的關鍵因素。

　　2.簡潔最美

　　最好的例子同樣是Google。Google的所有產品的界面都并不華麗，但都是十分簡潔（這也是決定其高速的一個重要因素），用戶可以一目了然地找到需要的功能，同時又有一種舒適的感覺。相關一個十分華麗的界面卻很有可能會造成無法對用戶正確導航的后果。而且簡潔的界面比較容易進行hack的搭配，而華麗的界面由于色彩等因素，添加新的hack很有可能會破壞界面的平衡感。由于各人審美觀的不同，也許有些用戶不喜歡華麗的界面，但簡潔高效的界面無疑是所有用戶都會青睞的。

　　因此大刀闊斧地對你的界面進行改造吧，把那些華而不實影響對用戶的導航的元素去處，只留下真正有用的元素，這將對新用戶起到至關重要的作用。

　　3.個性化的設計

　　網頁設計最忌諱的就是同質化的設計。如果用戶看了N個網站都是使用那令人審美疲勞的模版，而你的網站卻特立標新，那絕對會帶來一種極大的視覺沖擊力。因此如果你看到一個模版十分喜愛，但卻已經被大量網站所使用，一定要堅決放棄，否則你的網站只會被用戶所忽略。

　　盡管用戶對一個網站的評價最主要是取決于網站的內容，但是如果沒有恰當的網頁設計，很可能會使用戶忽略好的內容，網頁設計是用戶對網站的第一印象，因此避免同質化的網頁設計是使用戶關注內容的前提。

　　二、搜索引擎優化

　　可能許多網頁設計者對此都相當不屑，他們的理由也十分正當，如果過于關注搜索引擎的優化就會破壞用戶體驗效果。但是我的看法是實際上一些恰當簡單的搜索引擎優化技巧對于用戶體驗效果不僅不會造成破壞，而且能起到更好的推廣作用，何樂而不為呢？

　　1.網頁結構優化

　　使用div css的架構，這一架構的優勢十分顯著，修改方便，而且可以選擇讓搜索引擎bot先對正文部分進行爬行而避免因Head和Sidebar的信息多次重復而提前中止了對正文部分的爬行，使bot在最短時間內索引到網頁的核心內容。

　　2.標題、描述、關鍵字、排版的優化

　　標題字數控制在35個漢字以內，將你的網頁主要內容和要優化的關鍵字體現在標題上。而描述和關鍵字則要盡量全面地覆蓋你需要優化的關鍵字。排版上要多運用加粗、添加下劃線、使用斜體、使用H1、H2、H3等標簽來突出要優化的關鍵字，并且盡量將關鍵字的密度保持在6%-10%之間。

　　3.細節的優化

　　主要就是注意多交換鏈接和保證交換鏈接的質量。一個頁面內的外鏈數量最多不要超過3個，最好保持在1－2個，內鏈數量越多越好。對于圖片添加鏈接以及添加 alt說明，讓搜索引擎可以讀懂你的圖片并索引你的網頁。搜索引擎對于頁面相似度高的站點會采取一定的懲罰措施。

　　4.制作和提交sitemap

　　提交你的sitemap到Google Webmaster Tools和Yahoo! Site Explorer，以及提交你的網站到其它各大搜索引擎和DMOZ等網站目錄。幫助搜索引擎更好地索引你的站點。

　　基本上我認為對于網頁設計這些是需要注意的，但由于我的實際經驗太少，可能會有錯漏，請各位提出意見。

【網頁設計基礎】相關文章：

網頁設計的色彩運用09-11

如何學好網頁美工設計09-05

網頁設計色彩搭配的基本知識03-28

原理圖設計基礎簡介07-22

web網頁設計心得范文（通用11篇）12-21

網頁美工設計崗位職責(5篇)03-02

網頁美工設計崗位職責（精選28篇）05-10

企業網頁美工設計色彩搭配的技巧09-04

網頁美工設計崗位職責（通用10篇）10-15

網頁美工設計崗位職責(匯編5篇)03-04