導航:首頁 > 萬維百科 > 創意網頁版面設計

創意網頁版面設計

發布時間:2020-10-06 09:45:11

1、單頁面網站頁面創意怎麼製作

你是說一個只有一個頁面的網站嗎?還不是跟多頁面一樣的做法。

2、我想為自己家鄉設計一個網站,就是想不出有創意的網頁布局,誰可以幫我設計一下頁面

網頁設計網站建設 應用Macromedia DreamWeaver 8,Macromedia Flash 8,Macromedia FireWorks 8 設計網站至少包括5個欄目,整個站點的網頁數不少於10個,站點中使用圖片數不少於20個。主頁上最少有8個鏈接,其中必須包含5個以上站內鏈接。主頁名稱保存為index.html或index.asp,路徑保存在站點根目錄下,圖片保存在根目錄下images文件夾中。技術方面:HTML、表格、模板,框架、層、時間軸、超聯接、樣式、表單、行為、庫、導航條、下拉菜單、圖像查看器等
內容方面:文本、聲音、圖像、動畫、視頻、符號等積極健康向上的內容
其它:特效(時間、狀態、滑鼠、頁面過渡等)
 主題突出,內容充實、健康向上,布局合理、結構清晰、規范;
 色彩搭配合理、美觀,設計新穎,有創意;頁面布局盡可能平衡,色彩應用注意諧調,文本注意格式化

3、如何設計網站版面

版面布局的步驟:

一.草案

新建頁面就象一張白紙,沒有任何錶格,框架和約定俗成的東西,你可以盡可能的發揮你的想像力,將你想到的"景象"畫上去(我們建議您用一張白紙和一支鉛筆,當然用作圖軟體photoshop等也可以)。這屬於創造階段,不講究細膩工整,不必考慮細節功能,只以粗陋的線條勾畫出創意的輪廓即可。盡你的可能多畫幾張,最後選定一個滿意的作為繼續創作的腳本。

二.粗略布局

在草案的基礎上,將你確定需要放置的功能模塊安排到頁面上。(註:功能模塊我們在"首頁設計-引子"中提過,主要包含網站標志,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表,計數器,版權信息等)。注意,這里我們必須遵循突出重點、平衡諧調的原則,將網站標志,主菜單等最重要的模塊放在最顯眼,最突出的位置,然後在考慮次要模塊的排放。

三.定案

將粗略布局精細化,具體化。(靠你的智慧和經驗,旁敲側擊多方聯想,才能作出具有創意的布局。)

在布局過程中,我們可以遵循的原則有:

1、正常平衡---亦稱"勻稱"。多指左右、上下對照形式,主要強調秩序,能達到安定誠實、信賴的效果。
2、異常平衡---即非對照形式,但也要平衡和韻律,當然都是不均整的,此種布局能達到強調性、不安性、高注目性的效果。
3、對比---所謂對比,不僅利用色彩、色調等技巧來作表現,在內容上也可涉及古與今、新與舊、貧與富等對比。
4、凝視---所謂凝視是利用頁面中人物視線,使瀏覽者仿照跟隨的心理,以達到注視頁面的效果,一般多用明星凝視狀。
5、空白---空白有兩種作用,一方面對其他網站表示突出卓越,另一方面也表示網頁品位的優越感,這種表現方法對體顯網頁的格調十分有效。
6、盡量用圖片解說---此法對不能用語言說服、或用語言無法表達的情感,特別有效。圖片解說的內容,可以傳達給瀏覽者的更多的心理因素。

以上的設計原則,雖然枯燥,但是我們如果能領會並活用到頁面布局裡,效果就大不一樣了。比如:

○網頁的白色背景太虛,則可以加些色快;
○版面零散,可以用線條和符號串聯;
○左面文字過多,右面則可以插一張圖片保持平衡;
○表格太規矩,可以改用導角試試。

經過不斷的嘗試和推敲,你的網頁一定會亮麗起來的哦:)

4、如何製作網站專題頁面

一、以下是網站專題頁製作的基本功:

1、創意設計 
說到創意,應該是設計師最擅長,但肯定也是最頭疼的問題,如何評判一個創意的好壞,借用周董的一句話「哎呦,不錯哦」。當別人看到你的頁面的時候,能發出這種感慨,那基本上你的這個頁面應該是做到位了。這里介紹5種小方法: 
2、版式設計 
版式設計應該算是最基本的設計原則,這個雖然闡述起來比較簡單,如果要運用的好還是需要多下工夫。這里通過一個簡單的例子來解釋版式設計中的幾個原則: 
3、色彩設計 
這里的色彩設計並不是對色彩理論的解釋,也不是對色彩感覺的解釋,因為本人是個色彩感覺一般的設計師。這里只說3個原則:色彩對比、色彩大小與形狀、彩色位置。 
4、趣味設計 
趣味設計更多的是一種親切感,並不是所有的頁面都要求有,但是偶爾為之,會讓頁面添色不少。 
5、關於頁面載入 
圖片設計的時候注意大小,這個是關繫到頁面的載入時間。 
二、以下是網站專題頁製作的整體思路: 
1、確定產品專題頁面表現形式 
電腦端網站上面目前主流的專題頁面就是是長頁面滾動條,還是多屏滾動切換的形式。如果是移動端的話可以使用H5做一個多屏滾動切換的效果來展現;表現形式本身並沒有什麼,個人建議是在電腦端如果是信息比較多的可以優先考慮長頁面滾動條的形式,如果是針對產品某一個點展開討論,內容相對比較少,可以優先考慮多屏滾動切換形式。 
2、順著用戶心思架構樓層 
不同的產品,不同的主題,不同的切入點,不同的人策劃出來的專題頁面布局都是不一樣的,所以無法非常固定提供給大家一個類似公式的東西去嵌套,大家要確定好思路。 
3、別忘了你要干什麼 
產品專題頁面設計到最後的時候,不要忘了你的初衷:你想要通過這個專題頁實現什麼?如用戶注冊會員,點擊咨詢產品,點擊下單,關注公眾號,參與活動等等。 
如果你前面的布局策劃的非常好,完全牽著用戶的想法在走,那麼走到這一步,應該說離你的目標距離又近了一步,只差臨門一腳了!甭管最後能不能實現目標,你要做的就是再添「一把火」,告訴用戶的緊迫性,讓用戶自己著急。

5、如何做好網頁的版式設計

網站的欄目策劃是在網站製作過程中容易忽視的一個細節,因為在網站製作的過程中都比較重視頁面的設計和網站實現的功能,其實網站的欄目策劃在網站製作過程中起著決定性的作用,是用戶的一個導航索鏈,有的欄目設置精妙,就可以把用戶帶入到另一個頁面,讓用戶在網站中停留,使用戶更加了解企業。所以,網站欄目也是一個核心要點,下面沃然建站總結了一些關於網站欄目策劃的小建議,
1、 網站欄目策劃的重點是導航:
在網站策劃中要注意導航條的位置要明顯且統一,有一些網站是無法做到,這個會給用戶帶來易進不易出的一個環繞,從而導致用戶直接關閉網站,跳出率就會增長。

2、 網站欄目結構要層級分明,條理清晰:
打開一個網站,有的是有很多內容的,有各式各樣的產品,而欄目就是方便用戶找到所需內容的一個重要導航,所以嘉陵道小程序製作公司建議要做到層次分明、條理清晰,網站欄目最好不要超過三層,不要讓用戶層層剝繭似的找到所需內容,同時對推廣也是有影響的。

3、網站欄目命名要清晰、易懂:
中國文字博大精深,有些企業喜歡別出心裁的取一些欄目名,創意確實很好,但是想要知道名稱意思並不是自己為主,這樣容易產生反效果,如果你能創造通俗易懂,又有創意的那就更好了。

4、網站欄目在網站建設中布局要合理:
嘉陵道小程序製作公司提醒欄目不是隨便放著就可以了,也需要配合網站建設中網頁設計的整體搭配,做到二者兼得是最佳的狀態。

6、網頁排版設計是做什麼

網頁排版設計指的是網頁美工,其相當於平面設計,將平面設計中的審美觀點套用其上面,只能進行靜態頁面設計,不可實現動態頁面,平面設計的審美的觀點在網頁設計上非常實用。

網頁設計需要掌握的技能:

1、基礎美術:素描(石膏幾何體、靜物寫生);色彩(色彩構成、簡單色彩靜物寫生)

2、三大構成:色彩構成、平面構成、立體構成Photoshop網頁配色及排版設計;Illustrator網頁設計

其注意事項:

1、有一定的ps功力

2、要有創意,有自己獨到的想法

3、要心細

4、多看別人好的作品,多與人交流想法,取長補短

5、要實用,網民使用方便,為整個網站目標服務

7、網站版面設計要注意哪些問題?

需要注意以下四點:

1.加強視覺效果
2.加強文案的可視度和可讀性
3.統一感的視覺
4.新鮮和個性是布局的最高境界。

設計首頁的第一步是設計版面布局。
就象傳統的報刊雜志編輯一樣,我們將網頁看作一張報紙,一本雜志來進行排版布局。
雖然動態網頁技術的發展使得我們開始趨向於學習場景編劇,但是固定的網頁版面設計基礎依然是必須學習和掌握的。它們的基本原理是共通的,你可以領會要點,舉一反三。

版面指的是瀏覽器看到的完整的一個頁面(可以包含框架和層)。因為每個人的顯示器解析度不同,所以同一個頁面的大小可能出現640*480像素,800*600像素,1024*768像素等不同尺寸。

布局,就是以最適合瀏覽的方式將圖片和文字排放在頁面的不同位置。
你可能注意到:「最適合」是一個不確定的形容詞,什麼才是最適合的呢?抱歉的是阿捷不能也不可能給您一個完整的正確的答案。就好比有人希望知道成功的秘訣是什麼,成功者只能建議您用什麼方法,什麼途徑才能最容易獲得成功,而不可能有一步成功的"秘訣"告訴您。

我們在設計思考系列文章第四篇講過站點整體的創意,版面布局也是一個創意的問題,但要比站點整體的創意容易,有規律的多。讓我們先來了解一下版面布局的步驟:

一.草案
新建頁面就象一張白紙,沒有任何錶格,框架和約定俗成的東西,你可以盡可能的發揮你的想像力,將你想到的"景象"畫上去(我們建議您用一張白紙和一支鉛筆,當然用作圖軟體photoshop等也可以)。這屬於創造階段,不講究細膩工整,不必考慮細節功能,只以粗陋的線條勾畫出創意的輪廓即可。盡你的可能多畫幾張,最後選定一個滿意的作為繼續創作的腳本。

二.粗略布局
在草案的基礎上,將你確定需要放置的功能模塊安排到頁面上。(註:功能模塊我們在"首頁設計-引子"中提過,主要包含網站標志,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表,計數器,版權信息等)。注意,這里我們必須遵循突出重點、平衡諧調的原則,將網站標志,主菜單等最重要的模塊放在最顯眼,最突出的位置,然後在考慮次要模塊的排放。

三.定案
將粗略布局精細化,具體化。(靠你的智慧和經驗,旁敲側擊多方聯想,才能作出具有創意的布局。)

在布局過程中,我們可以遵循的原則有:

1、正常平衡---亦稱"勻稱"。多指左右、上下對照形式,主要強調秩序,能達到安定誠實、信賴的效果。
2、異常平衡---即非對照形式,但也要平衡和韻律,當然都是不均整的,此種布局能達到強調性、不安性、高注目性的效果。
3、對比---所謂對比,不僅利用色彩、色調等技巧來作表現,在內容上也可涉及古與今、新與舊、貧與富等對比。
4、凝視---所謂凝視是利用頁面中人物視線,使瀏覽者仿照跟隨的心理,以達到注視頁面的效果,一般多用明星凝視狀。
5、空白---空白有兩種作用,一方面對其他網站表示突出卓越,另一方面也表示網頁品位的優越感,這種表現方法對體顯網頁的格調十分有效。
6、盡量用圖片解說---此法對不能用語言說服、或用語言無法表達的情感,特別有效。圖片解說的內容,可以傳達給瀏覽者的更多的心理因素。

以上的設計原則,雖然枯燥,但是我們如果能領會並活用到頁面布局裡,效果就大不一樣了。比如,
○網頁的白色背景太虛,則可以加些色快;
○版面零散,可以用線條和符號串聯;
○左面文字過多,右面則可以插一張圖片保持平衡;
○表格太規矩,可以改用導角試試。
經過不斷的嘗試和推敲,你的網頁一定會亮麗起來的哦:)

看看我們經常用到的版面布局形式:
1."T"結構布局。所謂"T"結構。就是指頁面頂部為橫條網站標志+廣告條,下方左面為主菜單,右面顯示內容的布局,因為菜單條背景教深,整體效果類似英文字母"T",所以我們稱之為"T"形布局。這是網頁設計中用的最廣返的一種布局方式。這種布局的優點是頁面結構清晰,主次分明。是初學者最容易上手的布局方法。缺點是規矩呆板,如果細節色彩上不注意,很容易讓人"看之無味"。

2."口"型布局。這是一個象形的說法,就是頁面一般上下各有一個廣告條,左面是主菜單,右面放友情連接等,中間是主要內容。這種布局的優點是充分利用版面,信息量大(我的主頁首頁即屬於這種布局)。缺點是頁面擁擠,不夠靈活。也有將四邊空出,只用中間的窗口型設計,例如網易壁紙站。

3."三"型布局。這種布局多用於國外站點,國內用的不多。特點是頁面上橫向兩條色塊,將頁面整體分割為四部分,色塊中大多放廣告條。

4.對稱對比布局。顧名思義,採取左右或者上下對稱的布局,一半深色,一半淺色,一般用於設計型站點。優點是視覺沖擊力強,缺點是將兩部分有機的結合比較困難。

5.POP布局。POP引自廣告術語,就是指頁面布局象一張宣傳海報,以一張精美圖片作為頁面的設計中心。常用於時尚類站點,比如ELLE.com。優點顯而易見:漂亮吸引人。缺點就是速度慢。作為版面布局還是值得借鑒的。

以上總結了目前網路上常見的布局,其實還有許許多多別具一格的布局,關鍵在於你的創意和設計了。

8、怎麼設計個性網頁

在網頁設計的認識上,許多人似乎仍停留在網頁製作的高度上。認為只要用好了網頁製作軟體,就能搞好網頁設計了。
其實網頁設計是一個感性思考與理性分析相結合的復雜的過程,它的方向取決於設計的任務,它的實現依賴於網頁的製作。正所謂「功夫在詩外」,網頁設計中最重要的東西,並非在軟體的應用上,而是在我們對網頁設計的理解以及設計製作的水平上,在於我們自身的美感以及對頁面的把握上。

首先,我們要弄清楚網頁設計的任務。

一、設計的任務

設計是一種審美活動,成功的設計作品一般都很藝術化。但藝術只是設計的手段,而並非設計的任務。設計的任務是要實現設計者的意圖,而並非創造美。

網頁設計的任務,是指設計者要表現的主題和要實現的功能。站點的性質不同,設計的任務也不同。從形式上,可以將站點分為以下三類。

第一類是資訊類站點,像新浪、網易、搜狐等門戶網站。這類站點將為訪問者提供大量的信息,而且訪問量較大。因此需注意頁面的分割、結構的合理、頁面的優化、界面的親和等問題。

第二類是資訊和形象相結合的網站,像一些較大的公司、國內的高校等。這類網站在設計上要求較高,既要保證資訊類網站的上述要求,同時又要突出企業、單位的形象。然而就現狀上來看,這類網站有粗製濫造的嫌疑。

第三類則是形象類網站,比如一些中小型的公司或單位。這類網站一般較小,有的則有幾頁,需要實現的功能也較為簡單,網頁設計的主要任務是突出企業形象。這類網站對設計者的美工水平要求較高。

當然,這只是從整體上來看,具體情況還要具體分析。不同的站點還要區別對待。別忘了最重要的一點,那就是客戶的要求,它也屬於設計的任務。

明確了設計的任務之後,接下來要想的就是如何完成這個任務了。

二、設計的實現

設計的實現可以分為兩個部分。第一部分為站點的規劃及草圖的繪制,這一部分可以在紙上完成。第二部分為網頁的製作,這一過程是在計算機上完成的。

設計首頁的第一步是設計版面布局。我們可以將網頁看作傳統的報刊雜志來編輯,這裡面有文字、圖像乃至動畫,我們要做的工作就是以最適合的方式將圖片和文字排放在頁面的不同位置。

除了要有一台配置不錯的計算機外,軟體也是必需的。不能簡單地說一個軟體的好壞,只要是設計者使用起來覺得方便而且能得心應手的,就可以稱為好軟體。當然,它應該能滿足設計者的要求。筆者常用的軟體是Macromedia的Dreamweaver、Fireworks、Flash以及Adobe的Photoshop、imageready,這些都是很不錯的軟體。

接下來我們要做的就是通過軟體的使用,將設計的藍圖變為現實,最終的集成一般是在Dreamweaver里完成的。雖然在草圖上,我們定出了頁面的大體輪廓,但是靈感一般都是在製作過程中產生的。設計作品一定要有創意,這是最基本的要求,沒有創意的設計是失敗的。在製作的過程中,我們會碰到許多問題,其中最敏感的莫過於頁面的顏色了。

三、色彩的運用

色彩是一種奇怪的東西,它是美麗而豐富的,它能喚起人類的心靈感知。一般來說,紅色是火的顏色,熱情、奔放;也是血的顏色,可以象徵生命。黃色是明度最高的顏色,顯得華麗、高貴、明快。綠色是大自然草木的顏色,意味著純自然和生長,象徵安寧和平與安全,如綠色食品。紫色是高貴的象徵,有莊重感。白色能給人以純潔與清白的感覺,表示和平與聖潔。

我們知道,顏色是光的折射產生的,紅、黃、藍是三原色,其它的色彩都可以用這三種色彩調和而成。換一種思路,我們可以用顏色的變化來表現光影效果,這無疑將使我們的作品更貼近現實。

色彩代表了不同的情感,有著不同的象徵含義。這些象徵含義是人們思想交流當中的一個復雜問題,它因人的年齡、地域、時代、民族、階層、經濟地區、工作能力、教育水平、風俗習慣、宗教信仰、生活環境、性別差異而有所不同。

單純的顏色並沒有實際的意義,和不同的顏色搭配,它所表現出來的效果也不同。比如綠色和金黃、淡白搭配,可以產生優雅,舒適的氣氛。藍色和白色混合,能體現柔順、淡雅、浪漫的氣氛。紅色和黃色、金色的搭配能渲染喜慶的氣氛。而金色和粟色的搭配則會給人帶來暖意。設計的任務不同,配色方案也隨之不同。考慮到網頁的適應性,應盡量使用網頁安全色。

但顏色的使用並沒有一定的法則,如果一定要用某個法則去套,效果只會適得其反。經驗上我們可先確定一種能表現主題的主體色,然後根據具體的需要,應用顏色的近似和對比來完成整個頁面的配色方案。整個頁面在視覺上應是一個整體,以達到和諧、悅目的視覺效果。

四、造型的組合

在網頁設計中,我們主要通過視覺傳達來表現主題。在視覺傳達中,造型是很重要的一個元素。拋去是圖還是文字的問題,畫面上的所有元素可以統一作為畫面的基本構成要素點、線、面來進行處理。在一幅成功的作品裡,是需要點、線、面的共同組合與搭配來構造整個頁面的。

通常我們可以使用的組合手法有秩序、比例、均衡、對稱、連續、間隔、重疊、反復、交叉、節奏、韻律、歸納、變異、特寫、反射等等,它們都有各自的特點。在設計中應根據具體情況,選擇最適合的表現手法,這樣有利於主題的表現。

通過點、線、面的組合,可以突出頁面上的重要元素,突出設計的主題,增強美感,讓觀者在感受美的過程中領會設計的主題,從而實現設計的任務。

造型的巧妙運用不僅能帶來極大的美感,而且能較好地突出企業形象,而且能將網頁上的各種元素有機的組織起來,它甚至還可以引導觀者的視線。

五、設計的原則

設計是有原則的,無論使用何種手法對畫面中的元素進行組合,都一定要遵循五個大的原則:統一、連貫、分割、對比及和諧。

統一,是指設計作品的整體性,一致性。設計作品的整體效果是至關重要的,在設計中切勿將各組成部分孤立分散,那樣會使畫面呈現出一種枝蔓紛雜的凌亂效果。

連貫,是指要注意頁面的相互關系。設計中應利用各組成部分在內容上的內在聯系和表現形式上的相互呼應,並注意整個頁面設計風格的一致性,實現視覺上和心理上的連貫,使整個頁面設計的各個部分極為融洽,猶如一氣呵成。

分割,是指將頁面分成若干小塊,小塊之間有視覺上的不同,這樣可以使觀者一目瞭然。在信息量很多時為使觀者能夠看清楚,就要注意到將畫面進行有效的分割。分割不僅是表現形式的需要。換個角度來講,分割也可以被視為對於頁面內容的一種分類歸納。

對比就是通過矛盾和沖突,使設計更加富有生氣。對比手法很多,例如:多與少、曲與直、強與弱、長與短、粗與細、疏與密、虛與實、主與次、黑與白、動與靜、美與丑、聚與散等等。在使用對比的時候應慎重,對比過強容易破壞美感,影響統一。

和諧是指整個頁面符合美的法則,渾然一體。如果一件設計作品僅僅是色彩、形狀、線條等的隨意混合,那麼作品將不但沒有「生命感」,而且也根本無法實現視覺設計的傳達功能。和諧不僅要看結構形式,而且要看作品所形成的視覺效果能否與人的視覺感受形成一種溝通,產生心靈的共鳴。這是設計能否成功的關鍵。

六、網頁的優化

在網頁設計中,網頁的優化是較為重要的一個環節。它的成功與否會影響頁面的瀏覽速度和頁面的適應性,影響觀者對網站的印象。

在資訊類網站中,文字是頁面中最大的構成元素,因此字體的優化顯得尤為重要。使用css樣式表指定文字的樣式是必要的,通常我們將字體指定為宋體,大小指定為12px,顏色要視背景色而定,原則上以能看清且與整個頁面搭配和諧為准。在白色的背景上,我們一般使用黑色,這樣不易產生視覺疲勞,能保證瀏覽者較長時間地瀏覽網頁。

圖片是網頁中的重要元素。圖片的優化可以在保證瀏覽質量的前提下將其size降至最低,這樣可以成倍地提高網頁的下載速度。利用Photoshop6或Fireworks4可以將圖片切成小塊,分別進行優化。輸出的格式可以為gif或jpeg,要視具體情況而定。一般我們把有較為復雜顏色變化的小塊優化為jpeg,而把那種只有單純色塊的卡通畫式的小塊優化為gif,這是由這兩種格式的特點決定的。

表格(table)是頁面中的重要元素,是頁面排版的主要手段。我們可以設定表格的寬度、高度、邊框、背景色、對齊方式等參數。很多時候,我們將表格的邊框設為0,以此來定位頁面中的元素,或者籍此確定頁面中各元素的相對位置。我們知道:瀏覽器在讀取網頁html原代碼時,是讀完整個table才將它顯示出來的。如果一個大表格中含有多個子表格,必須等大表格讀完,才能將子表格一起顯示出來。我們在訪問一些站點時,等待多時無結果,按"停止"按鈕卻一下顯示出頁面就是這個原因。因此,我們在設計頁面表格的時候,應該盡量避免將所有元素嵌套在一個表格里,而且表格嵌套層次盡量要少。在使用Dreamweaver製作網頁時,會自動在每一個td內添加一個空字元「 」。如果單元格內沒有填充其它元素,這個空字元會保留,在指定td的寬度或高度後,可以在源代碼內將其刪去。

網頁的適應性是很重要的,在不同的系統上,不同的解析度下,不同的瀏覽器上,我們將會看到不同的結果,因此設計時要統籌考慮。一般我們在800*600下製作網頁,最佳瀏覽效果也是在800*600解析度下,在其它情況下只要保證基本一致,不出現較大問題即可。
(這是怎麼設計)
您可以到找免費空間
www.ik8.com
http://home.icpcn.com/
http://homg4u.china.com
網站還有好多。你可以申請先來用
如果是要動態空間也可以找找。
(這是怎麼申請)

與創意網頁版面設計相關的知識