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