網頁設計的步驟

網頁設計的步驟

　　對于很多剛入行的網頁設計來說，總有很多迷惘和不安，特別是在設計過程中，遇到反復修改，更是有想揍人的沖動，有句話怎么說來著，每一次網頁設計師背后，都有一群指點江山的大神。下面是小編整理的網頁設計的步驟，希望對你有幫助!

　　網頁制作步(1) 打開軟件

　�、� 單擊“開始”—“所有程序”—“Microsoft Office”→“Microsoft Office FrontPage 2003”，啟動FrontPage 2003，進入網頁編輯窗口;

　�、� 在網頁編輯窗口，單擊“文件”—“保存”，彈出Windows保存窗口，指定目標文件夾為“我的文檔”，指定文件名稱“index.htm”;

　�、� 單擊“保存”，則index.htm文件建立完畢。

　　網頁制作步驟⑵ 添加標題圖片

　　① 單擊菜單“插入”—“圖片”—“來自文件”，彈出打開圖片對話框，選擇所要插入的圖片;

　�、� 單擊“插入”，標題圖片插入完成。

　　網頁制作步驟⑶ 在標題圖片下添加滾動文字

　�、� 單擊回車鍵，使光標位于標題圖片下最左端;

　�、� 單擊“插入”—“Web組件”，在“組件類型”欄中選擇“動態效果”，在“選擇一種效果”欄中選擇“字幕”;

　　③ 單擊“完成”;

　�、� 在文本欄內輸入比如“你好!歡迎訪問我的個人網頁……”，單擊“樣式”—“格式”，彈出格式菜單。單擊“字體”，彈出“字體”對話框。在“字體”欄內選擇文本字體，在“大小”欄內改大小，在“顏色欄”內選擇顏色，單擊“字符間距”選項卡，顯示字符間距欄，在“間距”欄內選擇間距，在“間距大小”欄內填入大小;

　�、� 單擊“確定”關閉所有對話框，添加字幕完畢。

　　網頁制作步驟⑷ 在網頁中添加四條橫線

　�、� 光標移到字幕末尾，敲擊鍵盤上回車鍵，使光標位于字幕的下一行左側;

　�、� 單擊“插入”—“水平線”，插入一條水平線;雙擊該水平線，彈出“水平線屬性”對話框;在“顏色”欄內選擇顏色，在“高度”欄內填寫高度;單擊“確定”，退出“水平線屬性”對話框;

　　③ 單擊菜單“格式”—“邊框和底紋”，彈出“邊框和底紋”對話框;在“樣式”欄內選擇樣式，然后單擊“確定”，退出“邊框和底紋”對話框。

　�、� 復制水平線;單擊菜單“編輯”—“復制”;重復三次：單擊菜單“編輯”→“粘貼”，繪制水平線。

　　網頁制作步驟⑸ 插入表格

　�、� 在第一條水平線下添加一個表格，邊框粗細為0，編輯表格文字的文本和大小，居中;分別填寫你自己需要的內容;

　�、� 移動光標至第二條水平線首;敲擊回車鍵，使第一條水平線與第二條水平線之間留出空行;

　　③ 插入表格：單擊菜單“表格”—“插入”—“表格”，彈出“插入表格”對話框;在“大小”欄內分別填寫：行數和列數;在“邊框”欄的“粗細”欄中輸入0;在“布局”欄內的“對齊方式”欄中選擇方式;

　　④ 表格字體設置：選定表格;在格式工具欄內選定字體，字號

　�、� 填寫文字：分別選定表格單元格，依次填寫：你所需要的內容。

　�、� 在第四條水平線下添加一個的表格，表格文字居中;并在表格中分別填寫內容。

　�、� 移動光標至第四條線末尾，敲擊回車鍵;

　�、� 插入表格：單擊菜單“表格”—“插入”—“表格”，彈出“插入表格”對話框;在“大小”欄內分別填寫：行數列數;在“邊框”欄的“粗細”欄中輸入0;在“布局”欄內的“對齊方式”欄中選擇方式;

　�、� 填寫文字：分別選定表格單元格，依次填寫。

　�、� 添加文字：移動光標至第四條線末尾;敲擊回車鍵，留出空行;輸入文字。

　　網頁制作步驟⑹ “我的學�！敝谱� 在第二條水平線下添加文字：“我的學�！�，另起一行添加學校介紹并設置字體。

　　① 移動光標至第三條線首;敲擊回車鍵，使第二條線與第三條線之間留出空行;輸入文字“我的學�！�，回車另起一行;

　�、� 輸入或復制所需要的文字。光標定位到網頁文件“我的學�！毕乱恍行惺�;粘貼學校說明文字。

　�、� 調整文字對齊方式;調整文字字體、字號。

　　網頁制作步驟⑺ “所有城市”制作 在第三條水平線下添加文字：“所有城市”，另起一行，添加兩張圖片。

　�、� 移動光標至第四條線首;敲擊回車鍵，使第三條線與第四條線之間留出空行;輸入文字“所在城市”，回車另起一行;

　　② 插入圖片：單擊菜單“插入”—“圖片”—來自文件”，彈出打開圖片對話框;選定所要的圖片然后單擊“打開”;

　�、� 重復以上步驟

　　網頁制作步驟⑻ 添加鏈接 添加本網頁內鏈接

　　① 指定書簽：選定第一條水平線下的文字“我的學�！�;單擊菜單“插入”—“書簽”，彈出“書簽”對話框;單擊“確定”，第一個書簽設置完成。

　�、� 選定第二條水平線下的文字“所在城市”;單擊菜單“插入”—“書簽”，彈出“書簽”對話框;單擊“確定”，第二個書簽設置完成。

　�、� 選定第四條水平線下的文字“友情鏈接”;單擊菜單“插入”—“書簽”，彈出“書簽”對話框;單擊“確定”，第三個書簽設置完成。

　　④ 添加網頁內第一個鏈接。選定第一個表中的文字“我的學�！�;單擊菜單“插入”—“超鏈接”，彈出的“插入超鏈接”對話框;在“鏈接到”內單擊“本文檔中的位置”;在書簽中選擇“我的學�！睒撕�;

　�、� 添加網頁內第二個和第三個鏈接，參照第一個鏈接進行設置。 添加Internet鏈接。

　�、� 添加第一個鏈接：選定第四條水平線下表中的文字“百度”;單擊菜單“插入”→“超鏈接”，彈出的“插入超鏈接”對話框;在“鏈接到”內單擊“原有文件或網頁”;在“地址”欄內填寫如：http://www.baidu.com。

　　⑦ 添加第二個、第三個、第四個和第五個鏈接，參照第一個鏈接進行設置。鏈接設置完成。

　　網頁制作步驟⑼ 添加背景顏色

　�、� 單擊菜單“格式”—“背景”，彈出“網頁屬性”對話框;

　�、� 單擊“格式”選項卡;

　�、� 單擊“顏色一背景”—“其他顏色”，打開Windows顏色對話框;選擇淡黃色后單擊“確定”，背景顏色插入完畢。

　　網頁制作步驟⑽ 保存網頁 單擊菜單“文件”—“保存”，保存以上修改內容。退出FrontPage 2003。

　　網頁制作步驟⑾ 使用IE查看建立的網頁

　�、� 單擊桌面上IE圖標;

　　② 單擊菜單“文件”—“打開”，彈出打開對話框;選擇“我的文檔”下文件“index.htm”，

　�、� 單擊打開，即可查看瀏覽效果

　　設計網頁需要哪些步驟

　　一、確定主題

　　網站主題就是你建立的網站所要包含的主要內容,一個網站必須要有一個明確的主題。特別是對于個人網站,你不可能像綜合網站那樣做得內容大而全,包羅萬象。 你沒有這個能力,也沒這個精力,所以必須要找準一個自己最感興趣內容,做深、做透,辦出自己的特色,這樣才能給用戶留下深刻的印象。網站的主題無定則,只要是你感興趣的,任何內容都可以,但主題要鮮明,在你的主題范圍內內容做到大而全、精而深。

　　二、搜集材料

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

　　三、規劃網站

　　一個網站設計得成功與否,很大程度上決定于設計者的規劃水平,規劃網站就像設計師設計大樓一樣,圖紙設計好了,才能建成一座漂亮的樓房。網站規劃包含的內 容很多,如網站的結構、欄目的設置、網站的風格、顏色搭配、版面布局、文字圖片的運用等,你只有在制作網頁之前把這些方面都考慮到了,才能在制作時駕輕就 熟,胸有成竹。也只有如此制作出來的網頁才能有個性、有特色,具有吸引力。如何規劃網站的每一項具體內容,我們在下面會有詳細介紹。

　　四、選擇合適的制作工具

　　盡管選擇什么樣的工具并不會影響你設計網頁的好壞,但是一款功能強大、使用簡單的軟件往往可以起到事半功倍的效果。網頁制作涉及的工具比較多,首先就是網 頁制作工具了,目前大多數網民選用的都是所見即所得的建站系統軟件(前面提到的網站管理系統)。除此之外,還有圖片編輯工具,如firework 、Photoshop等；動畫制作工具,如Flash等;網上有許多這方面的軟件下載,你可以根據需要靈活運用。

　　五、確定網站內容

　　1、首先確定你要制作的網頁的主題,就是你建這個網站的內容是什么。

　　2、確定你的網頁的閱讀對象,就是你的網頁是準備給那些人看的。

　　3、選擇制作網頁的工 具軟件,比如PageAdmin系統、shopex系統、discuz系統這些,當然還有很多優秀軟件,大家可以在以后慢慢接觸到。

　　4、如果你作好了頁 面，就需要考慮你的網頁放到什么地方發表,也就是平常我們說的發表空間，我們學校的用戶網絡中心已經申請好了空間，大家可以直接使用(有發布空間的標志是 你有了FTP 賬號，這個需要申請)，也可以按我前面說的把自己電腦配置為服務器(需安裝IIS等軟件,這個自己百度一下)。

　　六、制作網頁

　　材料有了,工具也選好了,下面就需要按照規劃一步步地把自己的想法變成現實了,這是一個復雜而細致的過程,一定要按照先大后小、先簡單后復雜來進行制作。 所謂先大后小,就是說在制作網頁時,先把大的結構設計好,然后再逐步完善小的結構設計。所謂先簡單后復雜,就是先設計出簡單的內容,然后再設計復雜的內 容,以便出現問題時好修改。在制作網頁時要多靈活運用網站管理系統后臺功能,這樣可以大大提高制作效率。

　　七、上傳測試

　　網頁制作完畢,最后要發布到Web 服務器上,才能夠讓全世界的朋友觀看,現在上傳的工具有很多,推薦LeapFTP軟件,你可以很方便地把網站發布到自己制作的網站存放服務器上。網站上傳以測試完畢就可以把你的網址告訴給朋友或客戶,讓他們來瀏覽。

　　八、推廣宣傳

　　網頁做好之后,還要不斷地進行宣傳,這樣才能讓更多的朋友認識它,提高網站的訪問率和知名度。推廣的方法有很多,例如到搜索引擎上注冊、與別的網站交換鏈接、加入廣告鏈等。

　　九、維護更新

　　網站制作要注意經常維護更新內容,保持內容的新鮮,不要一做好就放在那兒不變了，草撲建站整理發布，只有不斷地給它補充新的內容,才能夠吸引住瀏覽者。

　　簡潔網頁設計小貼士

　　選用富有沖擊力的圖片元素

　　設計任何網站類型，恰到好處又吸引眼球的圖片總是非常重要的。雖然讀者通常只關注網站的內容，但吸引人的相關圖片也可以起到對內容補充的作用，同時也增添了美感。不過，在網頁中使用圖片元素時，不管它是靜態還是動態圖片，都要注意顏色的搭配。顏色使用過多容易造成視覺混亂，使用單一顏色往往會產生強烈的視覺沖擊。

　　小心使用頁面空白

　　毫無疑問，簡潔的網頁設計成功的先決條件之一就是做到整潔有序。設計師在網頁中熟練地添加flash動畫，視頻，3D圖形等多種元素的同時，不過應盡量避免過度使用這些元素。如今，大家都經常使用各種便攜式設備瀏覽網頁，因此也應該充分考慮到移動網絡用戶的需求。在網頁設計中，應該小心，準確地處理頁面的邊距和空白。但是，空白間距過多會讓網站失去吸引力。因此維持設計過程中的流動性非常重要，切勿過度使用。

　　開啟你的像素眼

　　任何與設計的相關工作，小細節都發揮大作用。網頁設計也不例外。想要成功設計出簡潔的網站，你需要“第三只眼”來監控這些小細節。網站的邊框，投影，高光和紋理等元素容易讓瀏覽者印象深刻，但設計師們往往卻忽略了這些小細節。在某些情況下，忽視動畫和圖片的優化問題會影響到網頁圖像質量。為了設計出最佳的網站圖片，可在Photoshop中啟用“對齊到像素”(Snap to Pixels)，對圖片進行適當的優化。網頁中內容排版錯亂時有發生，這會從視覺上降低內容的吸引力，影響讀者閱讀。

　　選用合適的字體

　　簡潔的網頁設計成功離不開排版，排版應該獲得和圖片同樣的重視。雖然可供選擇的字體很多，設計師要考慮的方面很多，比如說，目標客戶和客戶公司的性質。為網站頁眉和內容選用合適的字體是必不可少的，無襯線字體(sans serif)和有襯線(sans serif)字體通常會為設計帶來良好的效果。除此之外，你還可以結合其它字體，專為孩子和女性打造網站。

　　為你的網站選擇合適的配色方案

　　任何網站的設計都離不了合適的配色方案，這對創建一個整潔干凈的網站同樣適用。堅持使用淡色和非彩色的投影對成功設計一個簡潔網站大有裨益。淺色的投影可以幫助用戶把焦點轉向網站內容。標志使用黑色和較深的投影，網頁中的頁眉和導航元素使用淺色背景，這些都是不錯的案例，并沒有規定在簡潔網頁設計中不能使用大膽的顏色，但是這樣的顏色要小心，克制地使用。有時候，網站有必要使用深色背景色來吸引某些目標用戶。比起漸變色，有些網站更鐘愛純色。如果你的網站非得要使用紋理和漸變色，也不要用得太過火。

　　導航欄與可用性

　　你對網站設計滿意時，認為一切都趨于完美，這時，你可以通過實際試用來測試它的使用性。不妨站在局外人的角度，客觀地對網站作出評價。在網站發布之前，你可以詢問一下跟網站設計無關的人的看法。保持網站導航的直觀性，避免使用的導航元素讓初次訪問者和技術新手產生挫敗感。

【網頁設計的步驟】相關文章：

網頁設計基礎08-26

網頁設計課程08-26

模具設計步驟06-12

網頁設計制作要領08-13

網頁版式設計構成11-15

模具設計步驟詳解05-19

如何提高網頁設計的功力08-24

最佳的網頁設計色彩搭配11-06

網頁設計常用尺寸大小07-27