經(jīng)過網(wǎng)站規(guī)劃階段后,網(wǎng)頁設(shè)計者對所面臨的任務(wù)有了一個大概的了解,接下來將進人工作流程中的第二步——網(wǎng)站設(shè)計。來自深圳網(wǎng)站建設(shè)公司分享:
(1)建立站點的目錄結(jié)構(gòu)
在設(shè)計站點時,應(yīng)該事先在計算機硬盤中建立一個文件夾,以它作為工作的起點。具有良好組織結(jié)構(gòu)的站點文件夾會使得網(wǎng)站更易于制作和維護。
通常的做法是:首先將站點中的各種信息資源進行整理、歸類,然后在計算機硬盤上新建一個站點文件夾(即根文件夾);再根據(jù)需要,在文件夾中新建若干個子文件夾,以便將不同類型的文件存放在站點中;最后,是在這個站點根文件夾中新建一個主頁文件。
在網(wǎng)站開發(fā)中,一定要特別注意文件、文件夾、圖像等網(wǎng)頁素材的命名。由于這些命名規(guī)則受到不同操作系統(tǒng)的影響,故應(yīng)該在網(wǎng)站中使用通用名稱。
網(wǎng)站命名一般應(yīng)遵循以下規(guī)則:
?、?最好使用小寫英文名稱(可以用漢語拼音代替),但中間不能有空格。例如mypage. Htm、youmain. Htm
?、?)可以包含數(shù)字或下畫線,例如mypagel. Htm、you_main.htm等
?、?》注意正確使用文件的擴展名。網(wǎng)頁文件的擴展名為. Htm或. Html,
的擴展名,例如:logo. Gif、image_l. jpg 等。一般情況下,文件的擴展名都是由響應(yīng)軟件自動添加的。
(2)設(shè)計導(dǎo)航系統(tǒng)
網(wǎng)站中的導(dǎo)航系統(tǒng),實質(zhì)上是指一組使用了超鏈接技術(shù)的網(wǎng)頁對象(包括文字、按鈕、小圖片等),它們將網(wǎng)站中的內(nèi)容有機地鏈接在一起,是瀏覽者獲取網(wǎng)頁信息的基本界面。
導(dǎo)航設(shè)計的基本原則是:通過最少的點擊次數(shù)得到最多的信息。這意味著應(yīng)該根據(jù)頁面內(nèi)容的邏輯關(guān)系制作網(wǎng)站的導(dǎo)航系統(tǒng),而不是將網(wǎng)站中的所有信息都用超鏈接鏈接起來,否則瀏覽者將無法進行有效瀏覽。設(shè)計網(wǎng)站導(dǎo)航系統(tǒng)時應(yīng)該注意以下要點:
① 瀏覽者應(yīng)該能夠方便地知道他們現(xiàn)在正處于網(wǎng)站中的什么位置,也就是說要提供‘頁面的位置信息。
?、?)在頁面中提供返回首頁或上一級頁面的超鏈接。
③ 提供與站點制作者聯(lián)系的電子郵件鏈接。
?、?》整個導(dǎo)航系統(tǒng)的風(fēng)格應(yīng)該一致,否則會使瀏覽者產(chǎn)生一種已經(jīng)離開該網(wǎng)站的錯覺。
(3)設(shè)計頁面的版式頁面版式就是如何安排網(wǎng)頁中的元素(包括文本、圖像、動畫等),或者指明用什么形式表現(xiàn)網(wǎng)頁的內(nèi)容。
在設(shè)計頁面布局之前,首先應(yīng)確定頁面中要放置什么內(nèi)容,包括導(dǎo)航欄、文本、圖像或其他多媒體信息的詳細數(shù)目,然后在紙上或圖像處理軟件(如photoshop。Fireworks 等)中繪制出頁面的布局效果,最后選擇使用特定排版技術(shù)(如表格、層或框架等),對內(nèi)容進行排版。
設(shè)計頁面版式應(yīng)注意以下要點:
① 設(shè)計頁面應(yīng)以網(wǎng)站目標(biāo)為準(zhǔn),最大限度地體現(xiàn)網(wǎng)站的功能。
?、?》形象簡明,易于接受。設(shè)計頁面時應(yīng)當(dāng)始終為目標(biāo)用戶著想,網(wǎng)頁中的任何信息都應(yīng)該是為瀏覽者服務(wù)的,要確保網(wǎng)頁中的信息能夠被用戶接受??傊?,設(shè)計頁面布局時,簡單即是美,和諧即是美。
(4)網(wǎng)頁中的顏色
在網(wǎng)頁制作過程中通過設(shè)置文本顏色、背景顏色、鏈接顏色以及圖像的顏色,可以構(gòu)造出很多網(wǎng)頁布局效果。設(shè)計顏色方案時應(yīng)遵循以下要點:
① 保持一致性。若選擇了一種顏色作為網(wǎng)站的主色調(diào),那么,最好在網(wǎng)頁中保持這種風(fēng)格,另外,頁面中的圖像或其他多媒體信息的顏色也應(yīng)該與之匹配。
?、?》注意可讀性。獲取信息是絕大多數(shù)訪問者瀏覽的目的,故不論是文本式的網(wǎng)頁還是畫廊式的網(wǎng)頁,應(yīng)該注意頁面的可讀性。例如,白底黑字顯然比黑底白字的可讀性好,而在黑色背景下的紫色超鏈接,可能會被訪問者忽略掉。
(5)文字、圖像、動畫等對象的使用
網(wǎng)頁中的文字設(shè)計也是體現(xiàn)站點風(fēng)格的一種方式。為確保網(wǎng)頁中的所有字體能夠被訪問者的瀏覽器正確顯示,中文網(wǎng)站中的字體最好使用默認的“宋體”,或是“楷體”“黑體”等基本字體。
閱讀本文的人還閱讀:網(wǎng)站CSS代碼是什么?