1. 首頁 > 生活經驗 > >

新手學做網頁的20個技巧 怎樣設計網頁的主頁

知識百科經驗分享


網頁設計的基本步驟及設計方法
網頁設計通常有哪些基本步驟呢？要想設計出漂亮的頁面 。需要熟悉哪些設計方法呢？以下僅供參考！
第一步. 收集與歸納素材
確定項目設計方案、確定項目創意要點、確定項目表現形式、確定項目文案以及確定項目相關素材 。
第二步. 處理醞釀,構思畫出項目原型圖
讓思想自由馳騁，發揮思維的靈活性；對前期收集的信息進行綜合處理；運用各種方法勾畫出若干可實施方案 。
第三步：討論并 總結可實施方案
對一眾方案進行篩選并挑選出最具備可行性特質的方案 。
第四步. 項目設計實施與后期校驗
在整個項目進行過程中，都要對項目的各個關鍵點進行全面的思考，并要與項目相關的各個角色保持高效的溝通，善于抓住問題核心并能給出相應的解決方案，很多時候設計師的溝通水平決定了項目的進展、推進速度與最后輸出成果的質量 。
網頁設計創意方法之一——借鑒創意法
特點：較適用于短平快．但又要求有細節的項目 。
借鑒創意法可以從我們已知的一切入手，一如街邊的路牌、途中的風景、斑駁的墻漆、月夜下的街燈，再到同行的案例啟發，這些都是我們可以吸取的地方 。相信我們都有逛網的習慣，這不僅是積累各方知識及了解時下流行視覺趨勢的好方法，無形中也豐富了我們的創意閱歷，為借鑒創意種下良好的因子 。在工作中，當我們黔驢技窮，為找不出一個好的創意解決方案而撓頭時，可以吸取日常工作、生活中的所見所聞，從其中的一個點，或者一個表現出發，借鑒其成功之處，拓寬創意思路，結合項目現狀，給出優質的創意設計 。
網頁設計創意方法之二——情景(情感)映射創意法
特點：較適用于短平快．對情感有一定訴求的項目 。
說明：情景創意法的'進行要求對一個想法進行縱向深入發掘，思維忌橫向發散 。
生活中，我們都是獨一無二的，不同的成長的歷程賦予了我們不同的閱歷、不同的性格、不同的想法與世界觀 。我們每個人都有自己獨一無二的想像力、理解力和判斷力 。于是乎，當我們面對同一件事物時，會做出不同的情感反映 。同樣的，在我們的日常創作過程中，也就有了不同視覺風格，不同創意想法的出現 。
情景映射創意法是把我們所要表達的概念化的、抽像化的東西（如文案、主題等）豐富化、立體化 。把這些所要表達的概念逐步的從低級抽象向高級抽象演變，直至獲得滿意的創意表達為止 。
比如說春天，在想到春天的時候 。在腦海里我們都會出現不同的元素，豐富而有詩意，綠色、和風、細雨、春泥、青草，還有風箏、燕子、踏青諸如此類 。由此，我們可以充份發揮我們的主觀能動性，融合主題創造出富有感染力的創意畫面 。
網頁設計創意方法之三——思維導圖創意
特點：要求有較好的視覺表現力，有思想深度、延展度的項目，如海報、平面、廣告、富媒體等 。
思維導圖是一種放射性的創意模式，被認為是最自然的一種創意工具(自認為是這樣)，很多時候，當項目對創意表達有較高的要求時，它是一個既簡單有效又具有美感的創意工具 。思維導圖法以需要解決的問題為起點，把我們所認識的、與問題有關的元素進行聯想細分，向外延展，再延展，充分發揮聯想的創造力 。然后思維再跳出來，把這些之前創造性的想法都結合起來，進而激發出我們創意的火花 。
網頁設計創意方法之四——頭腦風暴與逆向思維
說明：較適用對整體創意有較高要求的項目，如大中型項目的創意起始階段 。
局限性：頭腦風暴方法對會議的主持人有一定要求，要求具備相當的專業性與組織能力 。
說起頭腦風暴，似乎已經沒有人不知道了；在創意工作開始的時候，想到的最優先的，也應該是頭腦風暴，但在這里還是想提一下 。因為始終覺得在眾多創意方法中，頭腦風暴確實是優秀的且可行性很高的創意方法之一 。
頭腦風暴的特點是：眾志成城 。是集眾人才智解決創意缺失的良好方法 。是眾多創意方案的集合 。是創意工作中的捷徑 。

手機網頁應該怎樣設計?
步驟：
1、點擊【文件】【新建文件】【常規】【HTML頁面】【打開】
2、如圖所示，新建了一個空白的html頁面，拆分視圖
3、設置頁面body樣式信息
【-webkit-touch-callout: none; -webkit-text-size-adjust: none;】
是防止用戶復制和保存圖片,只支持iphone、ipad、android
4、設置頁面的寬度和高度
【.page-content{background:-webkit-linear-gradient(#2F5A53,#6CA199); top:352px; min-height:550px;_height:550px;width:640px; }】
5、【關鍵點】
【新手學做網頁的20個技巧 怎樣設計網頁的主頁】新建一個div標簽，樣式使用page-content
6、在段落標記<p>里面輸入文字信息，這里天使就不排版了，主要是教大家方法，然后保存網頁 。
7、將網頁上傳到服務器目錄下
8、輸入網站域名，在電腦上訪問可以看見效果，只有左側部分
9、使用手機訪問，得到如圖所示效果，就不會像直接書寫html代碼一樣文字很小

手機網站網頁設計應該注意什么問題：
1、網頁寬度不用像素表示，用百分比表示（如：width=100%）；
2、左間距、上間距設為0；
3、屏蔽圖片顯示；
4、charset使用UTF-8編碼（國際化編碼），不使用gb2312編碼 。

網頁設計的方法有哪些？
第一種，自己手工源碼搭建：
1、國內買域名，必須實名認證，如果國內的服務器必須ICP備案
2、租服務器，一般Cenos Linux系統比較多，win系統的比較少；Nginx和Apache的個人建議Nginx，一般企業類，商城類網站源碼php的占大多數，建議php5.4以上，之前的有些老了
3、添加站點設置域名：你的買域名 2設置根目錄 3設置ftp 4數據庫
4、編輯源代碼，幾乎沒有從零開始的，找些免費開源的改動內容，功能不同選擇不同的系統一般通用系統：PageAdmin ；論壇系統：discuz； 購物系統：ecshop；博客系統：wp；需要授權的系統需要注意授權問題，內容修改一般用deamviewer修改比較方便，如果改動很少，那就用notepad++，注：不要用windows的記事本修改，會出錯，數據庫文件指向一定要設置好 。
5、下載xshell，安裝，填寫服務器ip，密碼，鏈接，上傳源碼到服務器的根目錄
6、設置域名解析，打開買的域名的管理后臺，添加記錄，填寫記錄類型選擇A型，主機記錄寫www，解析線路選擇默認，記錄值輸入服務器的ip，TTL默認10分鐘
在瀏覽器打開域名，瀏覽網站 。
第二種，自己手工一鍵搭建：



  • 第一步：百度搜索菲爾萊斯科技，打開菲爾萊斯科技官網，免費注冊您的賬號，注：（生成的網站二級域名會是：賬號.flspt.com） 。
    請點擊輸入圖片描述


  • 2
    填寫注冊的相關信息
    請點擊輸入圖片描述


  • 3
    注冊成功后進入后臺頁面，點擊管理企業網站
    請點擊輸入圖片描述


  • 4
    填寫網站標題，網站類型，進入電腦站，初次使用的用戶，可以選擇左上方的急速建站
    請點擊輸入圖片描述


  • 5
    選擇適合自己的行業的模板，不同行業模板后期也可改動適應自己的需求
    請點擊輸入圖片描述


  • 6
    例如：選擇數碼、家具、家具百貨欄目里的電腦類，點擊使用
    請點擊輸入圖片描述


  • 7
    免費制作網站后，可對標題、欄目、圖片進行上傳編輯，點擊右上方可以預覽生成的網站，點擊左上方網站管理進入網站后臺管理 。
    請點擊輸入圖片描述


  • 8
    后臺可瀏覽網站數據，如需綁定自己的頂級域名，點擊系統設置-網站域名，按教程進行綁定
    請點擊輸入圖片描述


  • 9
    網站做完后網站上方會有，您的網站試用資格將于 XXXX-XX-XX 到期，打開菲爾萊斯科技官網點擊-產品介紹-開通免費站，提交后即可正常使用 。


該如何設計網頁
一、網站結構設計
網站結構設計包含網站欄目設計和網站模塊設計以來確定網站提供服務的一種邏輯表現形式，也是網頁之間的層次關系 。
1.網站欄目能起到提綱挈領額作用
2.網站欄目具有清晰導航的功能
3.網站模塊要做到順序清晰且緊密結合
二、網站主題設計
網站主題設計實際就是網站視覺呈現風格的設計 。網站的主題風格要能充分吸引用戶的注意力，為用戶提供愉快的訪問體驗 。
1.設計能反映網站內容的logo,并且將logo放在網站的醒目位置 。
2.網站的顏色要統一，要突出網站的主調色彩 。
3.相同類型的圖像要有相同的效果 。
4.網站要有一句明晰的宣傳標語 。
三、網站布局類型
1. 國字型布局
這種布局類型分為上邊欄、左邊欄、中間內容區、右邊欄和底部的頁腳區域，其形狀酷似一個“國”字 。國字型是目前比較常用的一個網頁布局結構，它適用于信息分類繁多、需要良好組織的網站 。
2. T字型布局
這種布局類型由上邊欄、左邊欄、內容區、下邊欄組成，其形狀有點像一個英文字母寫的“T”字 。T字型網站目前在一些權威機構、企事業單位的公司網站出現得比較多 。
3. 左右框架型布局
這類網站主要由左邊欄和內容區組成，組成比較簡潔，主要用于精彩內容的呈現，主要是很多個人站點、博客的首選 。
4. 上下框架型布局
這類網站由上下邊欄組成，上邊欄用來放置logo和鏈接等信息，下邊欄用來放置網頁的內容 。上下型網站經常用來進行個性化展示，在企業門戶網站的公司展示中也比較常用 。
5. 標題正文型布局
這類網站的布局結構由上邊欄和內容區組成，上邊欄用于顯示文章的標題 。主要用于顯示文章的標題，內容區放置文章的內容，這類布局在一些論文、學術網站的設計中比較常用 。
網站設計都不會單獨使用以上列出的某一種布局結構，而是通過混合使用多種布局結構來實現自己想要的效果，這類布局通常稱為“綜合性布局” 。
四、網站頁面設計
網站頁面是網站的最終表現形式 。網站頁面內容的質量度和頁面的美觀度來決定 。頁面設計應該遵循的原則如下：
1.符合企業的行業屬性和企業特點 ?？蛻舸蜷_網站能直觀感受企業所傳遞的理念和特征 。
2.符合用戶的瀏覽習慣 。根據網站內容的重要性進行排序，讓用戶花最短的時間能夠找到自己需要的信息 。
3.符合用戶的使用習慣 。將用戶經常使用的功能放在網站的醒目位置 。
4.圖文搭配 。
5.利于搜索引擎優化 。減少圖片和動畫，多使用文字描述，以便于搜索引擎收錄，讓客戶更容易找到你 。格子網絡解答 。
新手學做網頁的20個技巧
新手學做網頁的20個技巧
導語：新手如何做好網頁設計?在這里我整理了給新手學做網頁的20個技巧，每一個網頁設計新手在開始一個項目之前都應該了解這些知識，在項目開展中也應該注意 。下面一起來看看吧!
01：將你的想法先在紙上畫出來 敢想敢做，有想法就應該畫下來
這是一幅世界各地不同年城市特色建筑的草圖這個想法看起來好像理所當然，似乎每個人開始設計之前都會在紙上畫草圖 。但是據我觀察很多設計師都跳過了這一步，從沒有考慮過他們將會面臨的問題 。設計就是要解決問題，但是這些問題通過漸變、陰影設置是解決不了的，只有通過調整布局和層次結構才能解決 。所以在你開始設計之前，一定要先想好布局 。
02.描繪一個頂層框架
描繪一個基本的框架可以幫助你解決UX方面的問題，同時規劃布局 。當我接手一個項目的時候，做的第一件事就是建立一個頂級框架，這樣可以解決所有的設計問題 。這個框架是指環繞在內容周圍的UI，它可以幫助我們執行操作，更好的操縱頁面 。它包括導航和組件，比如側邊欄和底部的按鈕 。
如果你通過這種方式來做設計，在不看主頁的情況下，你也能清晰的知道應該怎樣布局 。
03.給PSD添加網格
這是一個有978個網格的PSD文件，每條線的寬度為10PX 。畫網格做起來就像聽起來那么簡單，雖然你不畫直接開始設計完全可以，但是我相信設計出來的作品絕對沒有畫了網格好 。網格的好處就是幫助你構建不同板塊的布局，起一個指導作用，幫助你制作響應式模板 。
04.選擇你的字體
網頁設計中很重要的一個原則就是一個網頁中不要出現兩種以上的字體在一個項目中，尋找好看的字體也是很重要的一部分，但是我要提醒你，在同一個網頁中千萬別使用兩種以上的字體 。選擇字體的原則就是要易于用戶閱讀，尤其是文字很多的頁面，文章標題的字體可以有趣一些，這樣能吸引用戶的注意 。在使用字體的時候不要畏首畏尾，個頭大不是問題，只要整體看起來很和諧生動就行了 。
05.選擇合適的顏色主題
使用有限的顏色和色調，減輕用戶的視覺壓力 。在選擇字形的時候，你就應該想好用戶界面、背景、文字該用什么顏色 。我建議你在顏色的原則方面一定要有節制，別想到哪個用哪個，最后五顏六色亂七八糟的，這也是大忌 。
在這一步中，你要根據每個元素的功能選擇顏色，并且在用戶界面中，相同的元素顏色一定要一致 。你可以觀察一下facebook、推特、quora、vimeo等等網站的.頁面，在不干擾功能組件正常使用的情況下，除了用戶界面，它們的插畫和平面細節沒有任何顏色限制 。
06.分開布局
網頁結構越簡單，用戶使用越容易在網站中，每個模塊都要有個故事，要給用戶一個瀏覽的理由和最終的結果 。而設計的作用就是強調這個故事中最重要的那部分 。在現實設計中，主頁面不能將所有的信息都顯示出來，所以你必須在主頁先告訴用戶“進了這個網站你能做什么” 。
發揮你的聰明才智思考一下你能想到的極簡頁面，有最簡單的目標和必要的構件 。最后你會發現，原來保持簡單這么困難 。
07.重新思考
我們真的需要搜索按鈕嗎?在很多案例中，答案是否定 。作為一名設計師，是我們一手決定了用戶瀏覽因特網的方式和界面，由你決定用戶進一個頁面需要多少步驟、一個網頁效率有多高 。在設計完之后，一定要多測試，發現漏洞，及時修改，這樣才能做到極致 。
08.挑戰自我
我鼓勵每個設計師勇于創新，挑戰自我，盡管對一個項目來說，創新并不是要求之一 。挑戰包含什么?比如使用一個新格柵系統、開發一個新的組件或者不使用混合模式、特殊顏色等等，這些都是挑戰 。
09.關注細節
正在制作中的游戲，細節展示這句話你應該聽過很多次也記住并實踐了，但是在最終的產品中卻看不到 。細節可以是一個小互動，一個出人意料的動畫，或者是一個漂亮的漸變按鈕等 。我相信如果你真的喜歡手頭的工作，那么小細節肯定會有的
10.每個組件都需要被溫柔善待
認真對待每一個組件，最終的結果一定比100分要多 。這句話我聽了不下一百遍，但每一次都被深深地震驚了 。在你設計每個組件的時候，你要這樣想：爺設計的組件隨便拿一個出去都可以得設計界的奧斯卡 。只有這樣，整個網頁出來后的效果才能驚艷眾人 。
11. 讓你的作品更加精致
為了避免模糊，在背景和元素之間設置正確的對比度 。除了考慮審美問題，你還要保證作品的干凈整潔無毛邊 。注意邊緣、字體渲染、漸變等問題 。
12.整理你的PSD文件
在用PS做設計的時候，整理PSD文件是一項很重要的工作 。除了整理項目的大小和順序，你還要保持文件的整潔，這對前端工程師的工作是很有幫助的，能加快整個項目推進的速度 。
13.最好的設計，最壞的打算
在大腦中預想一下你做的東西在不同尺寸的屏幕上會是神馬樣子作為設計師，我們還有一個職責就是解決不同設備上的尺寸限制問題 。在網頁設計中，這個限制可以從概念一直排到技術，子子孫孫無窮盡也 。在做網頁的時候，我們不僅要在理想的尺寸中試運行，還要考慮最差的尺寸，因為萬一用戶的手機屏幕尺寸真的很小怎么辦?
14.多看你的設計直到厭倦為止
我相信如果你對設計一直都非常有激情，那么“看自己的作品直到想吐”這件事你一定經歷過 。初入設計這行，每當我完成一件作品，我都覺得非常驕傲，我感覺這個作品就是我生活的一部分，是我的孩子，我將它截圖保存，在不同設備上瀏覽它，把它做我手機電腦的桌面，甚至打印出來掛在墻上…后來我真的有點反感了，我開始覺得它哪都有問題，哪都不好看，最終我重新設計了它 。開始厭倦你先前的作品是成熟的表現，這意味著你從錯誤中學到了新的知識 。
15.不要糾纏于概念
當你和客戶交流的時候，確保你們倆在同一頻道，千萬杜絕雞同鴨講這種情況 。萬一這種情況發生了，千萬冷靜別拍案而起，你要知道你拍走的都是白花花的銀子啊~~~~如果你的顧客連你說的第一個概念都不喜歡，那么你就該反思了，這時候你要收集客戶的反饋信息，為下次交流做準備 。
16.與工程師做好盆友/好基友
在一個項目中，工程師不需要從頭跟到尾，他們只需按時做好自己的事情就OK了 。你以為我說的是真話嗎?呵呵，我要告訴你，這樣想的人是傻瓜 。因為很多好主意都是由工程師提出來的，他們如此高貴冷艷才華橫溢，你怎么能不緊緊的抱住他們的大腿呢?!
17.把我當做你幼齡的孩子，給我講解你的方案
跟顧客講解產品的重要程度不亞于制作產品，如果你說的不合適，那么你的設計就可能被忽略，說清楚比讓別人看清楚更重要 。
18.要喜歡你的每一個點子，但別太過看重
作為一個設計師，你要充分相信自己的才華，相信你的作品 。但同時你也應該有心理準備，要能隨時從一個項目中抽身轉戰下一個 。
19.在開發過程中追蹤你的設計
在你交完PSD文件工作就結束了?圖樣圖森破，很傻很天真 。如果你真的關心自己的設計是否被前端工程師溫柔善待，那就應該多和前端聊天，盡最大的努力幫助他們，哪怕只是一個像素的問題 。
20.展示尚未完成的作品
在社交工具中分享你的樣式表和未完工的組件 。有時候一個項目中最好的部分因為種種原因被忽視，所以你也就忘了 。一旦項目完成，就更沒有心思回頭審視了 。所以，如果可能的話，多在社區和大家交流、分享，眾人拾柴火焰高，我們也會發動大家的力量幫助你，讓你得到有價值的反饋 。
;
Photoshop制作網頁的方法
設計網頁的方法很多，常見的有直接編寫代碼方法，利用可視化軟件設計(例如DreamWeaver)法，利用中間軟件實現格式轉換法(例如Word生成HTML代碼)，還有就是PS設計網頁法 。我們為大家收集整理了關于Photoshop制作網頁，以方便大家參考 。
首先，用Photoshop建立空白畫布，載入一張網頁圖片
利用切片工具，把圖片切片(切成你想要的效果)
然后打開“開始”菜單，找到另存為web格式
然后全選，全部儲存為JPG格式，保存圖像和HTML網頁
保存好的HTML在Dreamweaver打開即可進行其他編輯了，也可直接在網頁中打開 。
關于怎樣設計網頁和怎樣設計網頁的主頁的內容就分享到這兒！更多實用知識經驗，盡在 m.apearl.cn