怎麼設計網站首頁

『壹』 一個優秀的網站首頁是如何設計的

在製作網站前端時，需要遵循一些設計規范；
①使用當前最流行的設計理念
②網頁特效更具有趣味性，建議使用目前最流行的H5流動效設計。
③如果是需要製作營銷型網站，那麼首頁內容要豐富，內頁頁面也不能沿用傳統的固定格局，可以考慮多單獨製版一些頁面，這樣更能體現公司實力。
④內頁設計與欄目名對應的主題圖片，應該每個欄目頁均有一張Banner圖；
⑤內頁左側製作相對應的二級欄目，增加訪客良好體驗；
⑥不出現文字錯誤和圖片錯誤；
⑦對於可預料的內容進行提前設置，比如圖片變形預案，字數多時頁面會換行的解決辦法；
⑧最後，網頁編碼時一定要按照W3C標准編寫代碼，這樣才能讓瀏覽器更好地閱讀和展現網頁。

『貳』 怎麼把網站設置為首頁

1、ie瀏覽器把網站設置為首頁的方法，第一步先點擊如圖所示圖標，然後點擊添加或更改主頁。

『叄』 怎樣學習網頁設計

可以自學也可以報培訓班學習！

『肆』 高質量的網站首頁應當如何設計

首頁是用戶進入網站看到的第一面，直接決定用戶的第一印象，夠不夠吸引，有沒有繼續瀏覽的慾望？一個不夠吸引人的網站首頁，就算你推廣做的再好，IP量再高，但是往往就是因為網站首頁設計的不夠好、不夠精緻、不夠吸引，從而導致了網站轉化率不高。網站首頁的設計不但在網站建設過程中很重要，在網站優化中也起到了關鍵作用。那麼一個優質的網站首頁該怎麼樣設計呢？一個震撼的網站首頁用什麼設計呢？

網站首頁無論是放在網站設計，還是網站建設和網站優化中都是首要針對的步驟。不管是企業網站、個人網站，還是商城網站、分銷網站。網站首頁都要足夠精緻、獨特、設計風格鮮明，這樣才能讓瀏覽的用戶視覺上的沖刺，從而可以觸發用戶的消費慾望或者繼續瀏覽的念頭。
首先需要給網站定位，明確目標人群，明確網站發展方向，其次需要知道首頁應該由哪些板塊組成？需要將企業哪些重要的信息展示出來？需要怎樣的搭配才能讓搜索引擎重視？
對於網站首頁設計你知道需要注意哪些方面嗎？網站定位一般都是根據業務產品用戶決定的，首先建設網站是為用戶服務的，是向用戶傳達信息的，所以設計網站時，我們首要就是站在用戶角度考慮，明確用戶的瀏覽習慣；首頁的內容不易過多，只需要將重要的信息展示出來即可，圖片的選取要切合網站的主題，只要是站在用戶的角度建設的網站，一定都會是高質量的網站。
對於網站首頁設計你還需要注意四個方面：
1. 要懂得有取有舍
網站首頁一定不能直接性的塞一堆東西進行展示，什麼新聞，產品，案例，全都弄上去了。全部弄上去的話，第一不光讓用戶眼花繚亂，還會讓用戶感覺到你網站很亂。所以如果你是服務型企業網站，可以把核心業務簡介和鏈接放出來。如果是產品型企業網站，可以放最新熱線產品。如果是工程類企業網站，可以放最新項目案例。必須有所側重取捨，這樣才能更好的展現。
2. 要懂得動感合適
有人塞一堆圖，不斷切換，切到瀏覽者都不耐煩，還有一種是彈出窗體，人家第一反應就是關閉，還有一些因為兼容性沒做好，打開之後，動感的部分都疊加在一起，讓人直呼太丑了！所以在圖片的搭配方面要有所注意，什麼樣的圖片吸引用戶眼球你要知道！
3. 要懂得色彩明亮
色彩太重要，很多網站看起來死氣沉沉，最關鍵一步，就是色彩沒有用心設計。如果搞不清楚怎麼弄，其實就可以參照logo色，以此為核心，進行構思，加上黑，白，灰，進行搭配，基本就可以搞出很有韻味的東西。
4. 要懂得對比設計
對比設計很重要，比如色彩明暗度，暖色與冷色，文字大小，模塊位置對比，滑鼠響應前後對比，很多企業網站一打開，索然無味，為何？該對比的地方全部混為一談，完全沒有感染力。
網站首頁設計更多的是一種學問，這不單單是考驗你懂不懂做的問題，一個高質量的網站首頁的製作已經是上升到懂不懂搭配；懂不懂設計；懂不懂組合；懂不懂瀏覽體驗的設計高度了，當然不是每個人都能有這樣的設計感，所以我們只需要遵循幾個來進行設計，那樣你的網站首頁肯定要比其他網站好.雍熙設計師設計水平高，能為你設計高質量的網站首頁。

『伍』 如何設計個人網站首頁

大致提綱如下:
○版面布局的竅門
○色彩的搭配
○字體的設置和表格的嵌套
○細微之處見功力
○考慮不同的瀏覽器和解析度
○設計好你的banner和位置
○meta標簽的重要性
○首頁設計的小建議
這里只是關於首頁設計的一個引子。讓我們來大致了解一下首頁設計的步驟。
首頁，從根本上說就是全站內容的目錄，是一個索引。但只是羅列目錄顯然是不夠的，如何設計好一個首頁呢?一般的步驟是:
●確定首頁的功能模塊
●設計首頁的版面
●處理技術上的細節
一).確定首頁的功能模塊。
首頁的內容模塊是指你需要在首頁上實現的主要內容和功能。一般的站點都需要這樣一些模塊:
網站名稱(logo),
廣告條(banner),
主菜單(menu),
新聞(what's
new),
搜索(search),
友情鏈接(links),
郵件列表(maillist),計數器(count),
版權(right).
選擇哪些模塊，實現哪些功能，是否需要添加其他模塊都是首頁設計首先需要確定的。
二).設計首頁的版面
在功能模塊確定後，開始設計首頁的版面。就象搭積木，每個模塊是一個單位積木，如何拼搭出一座漂亮的房子，就看你的創意和想像力了。
設計版面的最好方法是:找一張白紙，一支筆，先將你理想中的草圖勾勒出來，然後再用網頁製作軟體實現。
三).處理技術上的細節
製作的主頁如何能在不同解析度下保持不變形，如何能在IE和NC下看起來都不至於太醜陋，如何設置字體和鏈接顏色....等等。
首頁設計是整個網站設計的難點和關鍵，總結出一套較為合理易學的設計方法，從而舉一反三，使我們能夠更加輕松的完成整個站點的設計製作。

『陸』 怎麼用ps設計網頁主頁

製作主頁是一項非常復雜的工作，跟創意合成有點類似。首先要根據客戶的要求去找一些好的作品作為參考，找出一些靈感，然後搜集相關的素材，並按照自己的思路去慢慢溶圖、渲染顏色，處理明暗及細節等。最終效果
一、網頁首頁模版創建
1、首先打開我們下載的ps軟體，左上角選擇文件-新建（快捷鍵ctrl+N），然後創建一個1920x3000的畫布，網頁設計解析度選擇72就可以，顏色模式我們選擇RGB,點擊創建；（注意寬度選擇的是像素）
為什麼我們要創建1920寬的呢，目前我們的顯示器解析度一般為1920px，所以創建1920px寬度的可以使我們的網頁背景正好顯示完整，左右不會出現空白。

2、接下來我們要將單位與標尺調整為像素，方便我們測量寬高。操作步驟為：編輯-首選項-單位與標尺（快捷鍵ctrl+K，找到單位與標尺）
3、選擇 視圖-標尺（快捷鍵ctrl+R）調用我們的刻度尺，方便直觀的看到寬度和高度；左擊刻度尺拖出2條參考線分別到360和1560刻度，使中間留有1200px的寬度。兩個刻度尺中間的距離就為我們內容展示的區域，使用 （快捷鍵ctrl+; ）可以顯示關閉刻度。

為什麼要使用1200px的寬度呢，因為目前主流的網頁設計主體內容寬度為980px和1200px，而1200px可以顯示更多的內容，網頁也可以顯得更加的高端大氣。

二、使用矩形工具製作黑色背景導航條：
1.選擇「矩形工具」，設置填充色為「#333」，描邊設為空；

2.創建「圖層1」點擊畫布，在彈出的窗口中設置寬度1920，高度25，點擊創建；

3.使用移動工具將導航條移動到左上角；
三、logo圖片導入

1、使用文件->打開（ctrl+o），將logo圖片打開；

2、ctrl+A選中圖片，然後復制粘貼到當前頁面中；

3、移動圖片到指定的位置；

『柒』 網站怎麼設計

一、設計的任務

設計是一種審美活動，成功的設計作品一般都很藝術化。但藝術只是設計的手段，而並非設計的任務。設計的任務是要實現設計者的意圖，而並非創造美。
網頁設計的任務，是指設計者要表現的主題和要實現的功能。站點的性質不同，設計的任務也不同。從形式上，可以將站點分為以下三類。
第一類是資訊類站點，像新浪、網易、搜狐等門戶網站。這類站點將為訪問者提供大量的信息，而且訪問量較大。因此需注意頁面的分割、結構的合理、頁面的優化、界面的親和等問題。
第二類是資訊和形象相結合的網站，像一些較大的公司、國內的高校等。這類網站在設計上要求較高，既要保證資訊類網站的上述要求，同時又要突出企業、單位的形象。然而就現狀上來看，這類網站有粗製濫造的嫌疑。
第三類則是形象類網站，比如一些中小型的公司或單位。這類網站一般較小，有的則有幾頁，需要實現的功能也較為簡單，網頁設計的主要任務是突出企業形象。這類網站對設計者的美工水平要求較高。
當然，這只是從整體上來看，具體情況還要具體分析。不同的站點還要區別對待。別忘了最重要的一點，那就是客戶的要求，它也屬於設計的任務。
明確了設計的任務之後，接下來要想的就是如何完成這個任務了。

二、設計的實現

設計的實現可以分為兩個部分。第一部分為站點的規劃及草圖的繪制，這一部分可以在紙上完成。第二部分為網頁的製作，這一過程是在計算機上完成的。
設計首頁的第一步是設計版面布局。我們可以將網頁看作傳統的報刊雜志來編輯，這裡面有文字、圖像乃至動畫，我們要做的工作就是以最適合的方式將圖片和文字排放在頁面的不同位置。 除了要有一台配置不錯的計算機外，軟體也是必需的。不能簡單地說一個軟體的好壞，只要是設計者使用起來覺得方便而且能得心應手的，就可以稱為好軟體。當然，它應該能滿足設計者的要求。筆者常用的軟體是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解析度下，在其它情況下只要保證基本一致，不出現較大問題即可。
想設計製作網頁網站的也可以十我交流：前面是dzh，後面是xx09。

『捌』 網站首頁設計需要注意哪些

1、網站首頁的頂部

網站首頁一般都會在頂部放置企業網站的logo，讓用戶一眼望去就知道企業網站是從事什麼行業的產品服務，清楚地傳達給用戶能解決什麼樣的需求或服務。在logo的另一側需要放置網站的定位語，讓用戶明白自家網站與其他網站之間的區別，凸顯出網站企業的實力所在。

2、網站首頁的banner圖

對於企業網站來說，網站中的banner設計圖可以適當搭配一些過往的成功案例或者企業的主推產品服務，幫助企業凸顯核心優勢，要求網站banner設計具有一定的高大上風格。但是有很多站長在進行網站banner圖設計的同時沒有兼顧與企業的相關性，因此，就顯得banner圖格外不搭調，進而可能會影響到企業網站的整體運營形象。

3、網站首頁重點介紹內容

對於企業網站來說，站內必然有著自己主推的產品或服務，然而在眾多的產品中又分屬不同類別，如果想要在首頁中展現出這些分類，就要針對每個產品類別下進行簡要介紹，以便於用戶加深了解和記憶。另外，用戶根據不同類別的介紹自然也能理解產品之間細微的差別，發揮出網站首頁的導航作用。

4、網站聯系方式

網站首頁底部一般都會設置企業的聯系方式，以便於用戶在解決疑問或需要溝通時的需求，增強用戶與企業之間的交互性，為用戶引導點擊在網站中的相應內容，也能凸顯出企業網站的服務水平，有利於增強網站用戶的黏性，培養更多地優質忠誠用戶，進而促進網站排名和權重的進一步提升。

關於網站首頁設計需要注意哪些，環球青藤小編今天就先和您分享到這里了。如若您對互聯網營銷有濃厚的興趣，希望這篇文章可以為您提供幫助。如果您還想了解更多關於文案優化、廣告營銷文案寫作的方法及素材等內容，可以點擊本站的其他文章進行學習。

『玖』 如何製作一個網頁頁面

如何製作網頁?如何做一個自己喜歡的網站呢?看到別人有自己的網站是不是有點羨慕呢?當然。比較復雜的網站就需要很多技術上面的知識咯。比如javascrpt、jquery、ajax、flash等等!這些都只是讓網站的頁面好看。使靜態的網站變為動態的。那如何製作個簡單的網頁呢?那麼先用Dreamweaver ，Frontpage做,然後細節用Homesite，Hotdog修改,圖片用Photoshop動畫用fireworks ，Adobe ImageReady ，Flash然後申請空間，域名，大多數都是收費的，最後用軟體上傳就成了。

在開始製作之前，我們先對這個頁面進行一下分析。看看這個頁面用到了哪些東西。

1.網頁頂端的標題「我的主頁」是一段文字。

2.網頁中間是一幅圖片。 □最下端的歡迎詞是一段文字。

3.網頁背景是一深紫紅顏色。 構思好這個網頁的結構，我們就可以開始製作了。

1

解決方法與步驟：

1.首先啟動Dreamweaver，確保你已經用站點管理器建立好了一個網站(根目錄)。 為了製作方便，請您事先打開資源管理器，把要使用的圖片收集到網站目錄images文件夾內。

2

2.然後在創建新項目下面點擊HTML，下面常用到的有javascrpt，和CSS樣式。

3.進入頁面編輯設計視圖狀態。在一般情況下，編輯器默認左對齊，游標在左上角閃爍，游標位置就是插入點的位置。如果要想讓文字居中插入，點屬性面板居中按鈕即可。啟動中文輸入法輸入「我的主頁」四個字。字小不要緊，我們可以對它進行設置。

2

4.使用插入欄：單擊插入欄對象按鈕>選按鈕，彈出「選擇圖像源文件」對話框，其餘操作同上。

5.使用面板組「資源」面板(如下圖)：點按鈕，展開根目錄的圖片文件夾，選定該文件，用滑鼠拖動至工作區合適位置。

6.在圖片右邊空白處單擊，回車換行。仍然按照上述方法，輸入文字「歡迎您„„」然後，利用屬性面板對文字進行設置。保存頁面。 一個簡單的頁面就這樣編輯完畢了。

5

7.在頁面編輯器中按F12預覽網頁效果。 網站中的第一頁，也就是首頁，我們通常在存檔時取名為index.htm。

6

在很多時候，我們都需要html的靜態頁面代碼，那麼我們介紹一下靜態頁面的代碼。

<html></html>：靜態網頁源代碼首尾結構標記，代碼內呈現網頁所有內容

<body bgcolor>=背景色；</body>：網頁主體部分

<title></title>：標簽內顯示出網頁台頭的標題名，用於<head></head>標簽之內

<meta name=關鍵字 content=IT，教育，網路」>：設定搜索關鍵字

『拾』 優秀網站首頁設計的四大布局技巧

1、響應式布局

響應式網站設計布局，指的是一種網路頁面設計布局，它所遵循的理念是:集中創建頁面的圖片排版大小，可以智能地根據用戶行為以及使用的設備環境進行相對應的布局。

2、一屏以內

一張照片代表著一個世界，一屏以內的這種布局方式讓讀者的視線不會再受到框線的限制，比起響應式布局方式，這種布局的確多了些開闊和大氣的感覺。此外，網頁主畫面部分還可以靈活處理，既可以向上拓展到logo和導航的頂部位置，也可以向下拓展到內容區域，這種布局方式也是非常常見的布局方式。

3、通欄

這種布局方式相對於大框套小框而言，用戶瀏覽網頁不在受到方框的限制，這種方式顯得大氣些，眼界顯得更開闊些。

另外這種方式還有一個便利之處那就是主視覺部分可以隨機靈活處理，既能往上移到網站logo和導航的位置，也可以移到向下擴展的內容區域。這種布局方式也是網站中常用的布局方式。

4、不對稱布局

不對稱是藝術界長期以來喜歡的技術，在網頁設計師中很受歡迎。但要注意不要將不對稱與不平衡混為一談

不對稱的目標是在不可能或不希望對兩個部分使用相同的權重時創造平衡。使用不對稱性可以創建張力和動態，並且把用戶的注意力集中在各個對象(焦點)上。

關於優秀網站首頁設計的四大布局技巧，青藤小編就和您分享到這里了。如果您對頁面排版、網站設計、圖形處理等有濃厚的興趣，希望這篇文章可以對您有所幫助。如果您還想了解更多關於平面設計的素材及技巧等內容，可以點擊本站的其他文章進行學習。