??網(wǎng)頁在我們當(dāng)今這個(gè)大數(shù)據(jù)時(shí)代是普遍存在于我們的生活和工作中的一個(gè)產(chǎn)品，網(wǎng)頁的設(shè)計(jì)關(guān)系到企業(yè)的對(duì)外宣傳形象，也關(guān)系到數(shù)據(jù)的運(yùn)行效果。設(shè)計(jì)網(wǎng)頁的方法和步驟也有一定的要求。

??設(shè)計(jì)網(wǎng)頁的步驟

??由于目前所見即所得類型的工具越來越多，使用也越來越方便，所以制作網(wǎng)頁已經(jīng)變成了一件輕松的工作，不像以前要手工編寫一行行的源代碼那樣。一般初學(xué)者經(jīng)過短暫的學(xué)習(xí)就可以學(xué)會(huì)制作網(wǎng)頁，于是他們認(rèn)為網(wǎng)頁制作非常簡單，就匆匆忙忙制作自己的網(wǎng)站，可是做出來之后與別人一比，才發(fā)現(xiàn)自己的網(wǎng)站非常粗糙，這是為什么呢？常言道：“性急吃不了熱豆腐”。建立一個(gè)網(wǎng)站就像蓋一幢大樓一樣，它是一個(gè)系統(tǒng)工程，有自己特定的工作流程，你只有遵循這個(gè)步驟，按部就班地一步步來，才能設(shè)計(jì)出一個(gè)滿意的網(wǎng)站。

??1.工具/原料

??Photoshop

??Dreamweaver

??2.步驟/方法

??確定分辨率。和不同分辨下對(duì)應(yīng)的效果.與平面的載體的不同,決定了網(wǎng)頁具有比平面更靈活的表達(dá)方式.

??站點(diǎn)的滿屏概念其實(shí)是分相對(duì)和絕對(duì)兩種,相對(duì)的,是針對(duì)當(dāng)前分辨率的滿屏。而絕對(duì)滿屏幕,則是不同的顯示器不同的分辨率下都是滿屏,一般我會(huì)給出一個(gè)最小分辨率,最大到無限.相對(duì)滿屏,比如1024×768,800×600等.最好是用絕對(duì)寬度來定義,就是像素為單位.而絕對(duì)滿屏,則用百分比.在確定分辨率之后,你的PS圖要比實(shí)際設(shè)計(jì)的圖要大.要考慮用戶使用高于你設(shè)計(jì)的分辨率下,網(wǎng)頁以怎樣的形式表達(dá),是居左,還是居中,還是靠在右邊.

??大背景。3條輔助線及邊界處理.結(jié)構(gòu)(頭部,中間,底部的大概位置.)整體是否有背景.左邊界線,右邊界線,和中間線.如果是絕對(duì)寬度的設(shè)計(jì),那么用戶使用較高分辨率瀏覽時(shí),內(nèi)容與多出的屏幕是否有分割.結(jié)構(gòu),究竟是上中下結(jié)構(gòu),還是左中右結(jié)構(gòu),還是其他的.每一塊,大概放什么內(nèi)容。

??導(dǎo)航和標(biāo)志。網(wǎng)站的100-1%是導(dǎo)航.這是一句被傳爛了的話。

??網(wǎng)頁設(shè)計(jì)的一般步驟

??網(wǎng)頁設(shè)計(jì)一般可以分為以下幾個(gè)步驟：

??1.網(wǎng)站的主題

??網(wǎng)頁設(shè)計(jì)的首要任務(wù)就是確定網(wǎng)站的主題，即決定整個(gè)網(wǎng)站的方向、中心內(nèi)容及提供的主要信息。這些都需要從瀏覽者的角度去考慮，也就是你設(shè)計(jì)的網(wǎng)頁是準(zhǔn)備給誰看。

??例如：個(gè)人網(wǎng)頁主要是個(gè)人的一些資料庫，主要是讓他人了解自己的。而“電腦報(bào)信息網(wǎng)”則是為訪問者提供各種即時(shí)的電腦技術(shù)知識(shí)的。

??2.規(guī)劃網(wǎng)站內(nèi)容的結(jié)構(gòu)

??網(wǎng)站的目標(biāo)明確之后，就要考慮網(wǎng)站里存放的具體內(nèi)容，同時(shí)還要考慮如何使內(nèi)容系統(tǒng)化，如何把各項(xiàng)內(nèi)容以頁面的形式表現(xiàn)出來。還要規(guī)劃頁面之間的關(guān)系。

??3.搜集有關(guān)資料

??網(wǎng)站的骨架搭建起來以后，就需要進(jìn)行內(nèi)容的搜集各整理了。

??4.設(shè)計(jì)網(wǎng)頁版面

??有了骨干，有了內(nèi)容，接下來就要考慮如何將這些信息展現(xiàn)給訪問者，即進(jìn)行網(wǎng)頁版面設(shè)計(jì)階段。決定各部分資料顯示在什么位置，以及以什么樣的方式呈現(xiàn)出來等等。我們可以通過畫草圖完成這一步的工作。

??網(wǎng)頁設(shè)計(jì)制作詳細(xì)流程

??1、首先下載安裝Dreamweaver，打開后，新建一個(gè)網(wǎng)頁，一般選擇“HTML”建立網(wǎng)頁。選擇“經(jīng)典”界面，有助于我們更便捷使用這個(gè)軟件。

??2、下面選擇這三個(gè)界面，代碼、拆分、設(shè)計(jì)，一般默認(rèn)設(shè)計(jì)界面，對(duì)于新手這個(gè)功能具有可視化，能更好的制作網(wǎng)頁。

??3、下面我們來制作網(wǎng)站站點(diǎn)，在電腦上建一個(gè)文件作為根目錄。我們所建網(wǎng)站的所有文件和網(wǎng)頁都保存在這個(gè)文件中。站點(diǎn)的作用就是使你的網(wǎng)站網(wǎng)頁之間框架清晰。同時(shí)給站點(diǎn)起個(gè)名字。

??4、然后再在站點(diǎn)根目錄下建立一個(gè)專門儲(chǔ)存網(wǎng)站圖片的文件，并設(shè)置默認(rèn)。這樣你添加到這個(gè)網(wǎng)站的所有圖片都自動(dòng)保存到這個(gè)文件，不會(huì)丟失。注意文件命名要用英文。下面我用我建立的（籃球資訊網(wǎng)）來介紹，點(diǎn)擊右下方籃球資訊網(wǎng)——下拉點(diǎn)擊管理站點(diǎn)——點(diǎn)擊高級(jí)設(shè)置——設(shè)置默認(rèn)圖像文件夾為剛建立的images。保存。

??5、下面我們來制作這個(gè)網(wǎng)站首頁，先學(xué)習(xí)添加圖片。插入——圖像——選擇素材添加。點(diǎn)擊圖片，下面屬性可以編輯修改圖片大小，添加超鏈接等等。下面我修改圖片大小做示范。

??6、下面學(xué)習(xí)添加文本。編輯“新網(wǎng)”，下面屬性可以設(shè)置文本字體、添加超鏈接等等，點(diǎn)擊頁面屬性，可以詳細(xì)編輯文本屬性。

??以上內(nèi)容就是關(guān)于設(shè)計(jì)網(wǎng)頁的所有相關(guān)內(nèi)容。通過簡單的學(xué)習(xí)，大家應(yīng)該也對(duì)其有了一定的的了解了吧。如果還想更進(jìn)一步的了解相關(guān)信息，可以在新網(wǎng)上查找。