網(wǎng)頁設(shè)計的基礎(chǔ)知識有哪些
對于剛步入或者想要步入網(wǎng)頁設(shè)計領(lǐng)域的朋友們來說，需要掌握很多網(wǎng)頁設(shè)計的基礎(chǔ)知識，以下是小編為大家精心整理的網(wǎng)頁設(shè)計的基礎(chǔ)知識有哪些，歡迎大家參考！
網(wǎng)頁與網(wǎng)站的關(guān)系
1、首先介紹一下什么是網(wǎng)頁，網(wǎng)頁是由HTML組成的一個特殊文檔，它存放在網(wǎng)絡(luò)中某臺服務(wù)器中，我們?nèi)绻懒诉@個文檔的存放位置，然后在網(wǎng)頁瀏覽器中輸入這個文檔的存放地址，即可看到這個網(wǎng)頁。
2、接著介紹一下什么是網(wǎng)站，由幾個或多個相互有關(guān)聯(lián)的網(wǎng)頁組成的一個集合，我們可以稱之為網(wǎng)站。
網(wǎng)頁是由什么組成的？
1、網(wǎng)頁由HTML超文本標(biāo)記語言編寫構(gòu)成。那么如何查看一個網(wǎng)頁的HTML代碼？以IE瀏覽器為例，在頁面的空白處點擊右鍵，點擊“查看源”。
2、會出現(xiàn)如圖所示的頁面，這個頁面所顯示的就是該網(wǎng)頁的HTML代碼。
瀏覽網(wǎng)頁的工作原理
首先電腦必須要聯(lián)上網(wǎng)，然后打開瀏覽器輸入網(wǎng)址點擊回車，這個網(wǎng)址就代表我們要訪問的網(wǎng)站的服務(wù)器所在的地址，點擊回車就是我們向服務(wù)器發(fā)送訪問請求，服務(wù)器接收請求，返回結(jié)果給瀏覽器，瀏覽器再將結(jié)果翻譯成我們所看到的頁面。
靜態(tài)網(wǎng)頁與動態(tài)網(wǎng)頁
1、靜態(tài)網(wǎng)頁，由HTML組成的網(wǎng)頁格式后綴名為“html”或“htm”，這種網(wǎng)頁我們一般俗稱我靜態(tài)網(wǎng)頁，全部由這些頁面組成的網(wǎng)站稱為靜態(tài)網(wǎng)站。
2、動態(tài)網(wǎng)頁，一般以數(shù)據(jù)庫技術(shù)為基礎(chǔ)，配合其他一些編輯語言，網(wǎng)頁中的內(nèi)容基本上都可以由數(shù)據(jù)庫進行管理，HTML只是描述網(wǎng)頁的基本外觀的頁面形勢可稱為動態(tài)網(wǎng)頁，現(xiàn)在的網(wǎng)絡(luò)上基本上都是這種形式的網(wǎng)頁。
網(wǎng)頁設(shè)計的一般流程
1、如果是基于商業(yè)型的網(wǎng)站，可大致分為七步：
一、購買空間和域名；
二、整理客戶資料，要根據(jù)客戶的要求來構(gòu)建我們的網(wǎng)站；
三、初步設(shè)計頁面效果，先設(shè)計幾個主要的頁面出來；
四、根據(jù)客戶的要求修改網(wǎng)站；
五、整體網(wǎng)站制作；
六、將做好的網(wǎng)站上傳到網(wǎng)絡(luò)空間；
七、后期維護及推廣。
2、如果是基于個人的網(wǎng)站，可大致分為五步：
一、申請免費空間域名，因為是個人的網(wǎng)站，如果購買的話很不劃算；
二、整理個人網(wǎng)站的資料，想好要做一個什么樣的網(wǎng)站；
三、整體網(wǎng)站制作；
四、上傳到網(wǎng)絡(luò)空間；
五、后期維護及推廣。
什么是域名和空間
1、域名，因為網(wǎng)頁是放置在網(wǎng)絡(luò)中的某臺計算機中，要訪問它就需要知道這臺計算機的IP地址，但IP地址比較難記，所以就推出了域名系統(tǒng)，如xxx等。
2、空間，也稱“虛擬空間”或“虛擬主機”，就是用來存放網(wǎng)站的硬盤空間。
網(wǎng)頁設(shè)計中的極簡主義
1、極簡主義材質(zhì)
設(shè)計師將把鮮明的背景樣式擴展到其他之前沒有注意到的材質(zhì)上，但這種擴展依然以極簡主義設(shè)計美學(xué)為主。這種脫離純粹的簡約設(shè)計風(fēng)格的趨勢目前剛剛起步，但已經(jīng)具備了更多可能性。
2、相反的色彩
白色背景曾經(jīng)是簡約設(shè)計的主要特征，未來的極簡主義設(shè)計則將繼續(xù)通過使用更多的色彩、背景、黑色與淺色的文字來突破單色配色方案，以實現(xiàn)更豐富的效果。
3、更多互動效果
極簡主義的傳統(tǒng)定義之一是“不使用特效”。而現(xiàn)在，簡單的動畫正使簡約風(fēng)格變得更加受歡迎，因為更多的設(shè)計師意識到極簡并不等于一成不變。
4、打破對稱
目前極簡主義依然傾向于對稱，但這并不是一個鐵定的法則。平衡是重要的，但對稱其實并不是。事實上，更多的網(wǎng)站將使用不對稱的理念。由于對稱設(shè)計的作品日趨飽和，網(wǎng)頁設(shè)計師可以大膽使用不對稱的UI模式，以創(chuàng)造一個既熟悉又新鮮的模式。
5、更好的易用性
由于站點的內(nèi)容更為明確，不存在分散注意力的情況，極簡網(wǎng)站則應(yīng)該更為有用(理論上說)。然而事實常并非如此，正如Delwin Campbell在一篇文章中描述過的，使用純粹的圖標(biāo)導(dǎo)航系統(tǒng)可能會令用戶迷惑，如果你的視覺隱喻不易理解的話。或者，如果網(wǎng)站設(shè)計者可以只允許用戶探索以線性方式去限制用戶自由選擇他們最有效的途徑的話，也會令用戶不快。
網(wǎng)頁設(shè)計需要的基礎(chǔ)知識
以下就是網(wǎng)頁設(shè)計需要的基礎(chǔ)知識等等的介紹，希望為您帶來幫助。
網(wǎng)頁設(shè)計雖然挺藝術(shù)，存在很多隨意的成分。網(wǎng)頁設(shè)計師的目的就是要把網(wǎng)頁設(shè)計的漂亮，得體。所以很多人都認(rèn)為網(wǎng)頁設(shè)計像藝術(shù)設(shè)計一樣可以隨意發(fā)揮自己主觀能動力，盡量追求強烈的視覺沖擊。這樣做的設(shè)計師很多，成功的也很多，像很多外國的個人網(wǎng)站就是這樣。但我想說的是并不是所有的設(shè)計師都可以這樣隨意發(fā)揮，功底不夠的人，往往會把頁面做的很花哨，不得體。
其實，網(wǎng)頁設(shè)計并不就是藝術(shù)設(shè)計。網(wǎng)頁設(shè)計存在很多約定俗成的規(guī)則，了解這些規(guī)則，可以使你更快的完成設(shè)計。
網(wǎng)頁的大小：計算機不同于電視，顯示器的尺寸并不不同，最小尺寸為640x480，最大尺寸為1280x1024。如果網(wǎng)頁寬度為1000像素，而用戶顯示器寬度為640像素，這時用戶需要拉動水平滾動條瀏覽頁面，這樣的視覺效果會大打折扣。如果網(wǎng)頁寬度為640像素，而用戶顯示器寬度為1200像素，顯現(xiàn)的文本尺寸就會很小，不易閱讀。所以，在開始設(shè)計之前，我們應(yīng)該想想我們所設(shè)計的網(wǎng)站主要會有哪些人瀏覽，進而就會知道瀏覽網(wǎng)頁的屏幕主要是多大，從而決定了我們網(wǎng)頁設(shè)計的大小。一般來說，寬度以1000，950，600的居多，高度在一屏到三屏之間。
設(shè)計中，配色始終都是一個難題，配色很不好把握，但并不是一點都不能把握。一個大的原則是我們的配色要看用戶的喜好，這還得要求我們在設(shè)計之前要想一想網(wǎng)頁主要是那些人在訪問，進而去分析他們的顏色喜好。當(dāng)然這就要求我們要有一定的心理學(xué)知識。總體來說我們的設(shè)計最好不要超過三種主色調(diào)，在設(shè)計中，灰色，藍(lán)色，白色，紅色是用的比較多的顏色。在顏色搭配上我們應(yīng)該多注意積累，想紅配白或者黑就會很好看，但紅配綠就顯得很不協(xié)調(diào)。
網(wǎng)頁設(shè)計的模塊：這其實不是個難問題，但很多人往往會在這方面出問題，對于一個網(wǎng)頁，瀏覽者往往關(guān)心的是第一屏的內(nèi)容，如果你的網(wǎng)頁有好幾屏，但第一屏有沒有瀏覽者想看到的信息，瀏覽者往往會毫不客氣的關(guān)掉頁面，所以在設(shè)計中，我們應(yīng)該盡量做到在第一屏能看到網(wǎng)站所有的重要內(nèi)容，或者是能吸引瀏覽者的內(nèi)容。
網(wǎng)頁設(shè)計中的字體，這往往會被很多設(shè)計師忽略掉，但其實把網(wǎng)頁中的字體設(shè)計的得體美觀，無疑會給網(wǎng)頁增色不少，但字體用的不好反而會影響網(wǎng)頁的整體和諧度，一般來說稍微正式一點的網(wǎng)站，文本字體都會用12px，宋體。顏色以黑色為主。
網(wǎng)頁設(shè)計中，我們還應(yīng)該考慮的一個很重要的問題是，盡量做到節(jié)約，意思是盡量把網(wǎng)站文件大小降到最低，因為打開一個網(wǎng)站的速度完全起決于網(wǎng)站的大小，如果網(wǎng)站太大，很久都沒打開，網(wǎng)名就會失去耐心。所以這就要求我們在設(shè)計的過程中要盡量減少圖片的使用，能用顏色平鋪就用顏色平鋪，好多大型的門戶網(wǎng)站都只有很少的兩三張圖片。
其實網(wǎng)頁設(shè)計是有套路的，在平時的學(xué)習(xí)實踐過程中，要注意積累經(jīng)驗，不但總結(jié)，我們才能不斷的進步!
網(wǎng)頁設(shè)計小技巧分享
應(yīng)用解析：有不少人都會對LOGO進行透明處理以融入head部分的漸變背景。
解決方案：采用JS代碼實現(xiàn)或CSS濾鏡功能，當(dāng)然問題也存在部分，導(dǎo)致圖片質(zhì)成像量不高。
小技巧1：將透明的LOGO用高于IE6的瀏覽器打開網(wǎng)頁，然后采用FF的PearlCrescentPageSaver全屏截圖插件截屏。再采用 PS或者Fireworks進行裁切LOGO部分。并替換透明背景LOGO。這樣即使是漸變背景也能和LOGO保持一致。
小技巧2：布局上頁面與頁面之間存在相同部分，要學(xué)會簡化。當(dāng)兩個頁面有部分板塊相同，最好不要去讓兩個頁面獨立存在，可以將兩個相同部分獨立出來。采用程序調(diào)用共同部分。以減少網(wǎng)頁代碼。
小技巧3：網(wǎng)站重要頁面最好有可更新或者可調(diào)用更新內(nèi)容的板塊。以達(dá)到日常更新引蜘蛛爬行的目的，原因很簡單，利于網(wǎng)站SEO優(yōu)化。
小技巧4：網(wǎng)站要和互聯(lián)網(wǎng)接軌，要跟得上時代，別忘了在網(wǎng)站完成后給網(wǎng)站安裝一個百度分享工具，或者新浪微博，這樣做利于網(wǎng)站推廣。
小技巧5：新手設(shè)計網(wǎng)站困難，photoshop水平不高，怎么辦?AXURE讓網(wǎng)站設(shè)計更輕松。很多高端網(wǎng)站設(shè)計師都采用PS對網(wǎng)站進行美化設(shè)計以達(dá)到更絢麗的網(wǎng)頁效果，對于新手而言，PS的學(xué)習(xí)無疑是一道門檻。采用Axure并結(jié)合“扁平化設(shè)計”也可以讓新手也能很簡單“拖”出很精致的網(wǎng)頁。
小技巧6：Jiasale將小型企業(yè)站變成小型電商平臺，無需注冊直接即可購買產(chǎn)品。針對部分微小型企業(yè)，很多企業(yè)無力承擔(dān)高昂的建站費用，但又希望自己的網(wǎng)站能帶來商機或者達(dá)成線上交易，那么龐大的會員管理系統(tǒng)，以及產(chǎn)品訂購功能無疑是一大難題，Jiasale是一款購物按鈕可以讓網(wǎng)站快速實現(xiàn)電子商務(wù),只需要在網(wǎng)站中添加一段代碼,就能輕松實現(xiàn)站中店。(非廣告)。連接支付寶無需注冊，即可購買。對于一些有著線上交易需求的站長而言，還是挺方便的。
當(dāng)然相信每個人都有自己的網(wǎng)站建設(shè)方面的技巧。也有自己解決問題的方法。希望這篇文章能帶給大家?guī)椭?/p>
網(wǎng)頁制作工具介紹
1. Macromedia Dreamweaver
Macromedia Dreamweaver是個著名網(wǎng)站開發(fā)工具，它使用所見即所得的界面，亦有HTML編輯的功能。是個可視化的網(wǎng)頁設(shè)計和網(wǎng)站管理工具，支持最新的Web技術(shù)，包含HTML檢查、HTML格式控制、HTML格式化選項、可視化網(wǎng)頁設(shè)計、圖像編輯、處理Flash和Shockwave等富媒體格式和動態(tài)HTML、基于團隊的Web創(chuàng)作。用戶可以選擇可視化方式或者喜歡的源碼編輯方式。
2. 佳易網(wǎng)頁王
佳易網(wǎng)頁王是一套易學(xué)易用、功能強大、快速高效的新型網(wǎng)頁制作系統(tǒng)，不但集成了Frontpage、Dreamweaver等網(wǎng)頁制作軟件的主要功能，而且更簡便易用。其最大特點是：即使不懂網(wǎng)頁制作技術(shù)，也可以輕松制作出高質(zhì)量的網(wǎng)站。即使不懂編程技術(shù)，也可以輕松制作出BBS論壇、留言板、聊天室、計數(shù)器、數(shù)據(jù)庫在線查詢和用戶管理等功能。
3. web page maker
web page maker是一款簡化但功能十足的網(wǎng)頁制作工具，非常容易上手，能滿足個人使用的需要。它是一款所見即所得的工具，并不需要html語言底子，當(dāng)然，如果了解的話則對網(wǎng)頁的制作會更有幫助。
4. Sharepoint Designer
SharePoint Designer是微軟的下一代網(wǎng)站創(chuàng)建工具，用來取代FrontPage，微軟官方提供了免費下載，并且由其提供了序列號。Office SharePoint Designer提供一些強大的工具，可幫助您在 SharePoint 平臺上建立引人入勝的 SharePoint 網(wǎng)站，快速構(gòu)建啟用工作流的應(yīng)用程序和報告工具。所有這些都在一個 IT 管理環(huán)境中進行。
5. fireworks
Adobe Fireworks是Adobe推出的一款網(wǎng)頁作圖軟件，軟件可以加速 Web 設(shè)計與開發(fā)， 是一款創(chuàng)建與優(yōu)化 Web 圖像和快速構(gòu)建網(wǎng)站與 Web 界面原型的理想工具。Fireworks不僅具備編輯矢量圖形與位圖圖像的靈活性，還提供了一個預(yù)先構(gòu)建資源的公用庫。 在 Fireworks 中將設(shè)計迅速轉(zhuǎn)變?yōu)槟Ｐ停?或利用來自 Illustrator、Photoshop 和 Flash 的其它資源。然后直接置入，輕松地進行開發(fā)與部署。
【網(wǎng)頁設(shè)計的基礎(chǔ)知識有哪些】相關(guān)文章：
網(wǎng)頁設(shè)計技巧有哪些03-04
axure網(wǎng)頁設(shè)計的方法有哪些06-02