網(wǎng)頁制作從入門到精通
如何有技術(shù)含量地開發(fā)一個網(wǎng)頁？針對這個問題，今天小編總結(jié)這篇網(wǎng)頁制作的文章，希望幫助更多想學(xué)習(xí)網(wǎng)頁設(shè)計的同學(xué)找到更加簡單易行的辦法。
疑問：
1、那些網(wǎng)頁是怎么做得那么漂亮的呀？比如圓角以及鏡面渲染。
2、學(xué)習(xí)網(wǎng)頁制作要學(xué)習(xí)些什么？
3、怎樣的網(wǎng)頁設(shè)計才是好的設(shè)計？
下面就通過闡述我的學(xué)習(xí)歷程，來發(fā)現(xiàn)這些問題的答案。
學(xué)習(xí)網(wǎng)頁制作，一般先學(xué)習(xí)HTML語言，這是專門用來作為網(wǎng)頁文檔的腳本語言（也有人叫它編程語言）。HTML用一些標(biāo)簽（tags）來格式化網(wǎng)頁的內(nèi)容。比如：
<h2>
我是一個大標(biāo)題
</h2>
就是將“我是一個大標(biāo)題”作為大標(biāo)題。這樣通過一些tags，就可以將一些塊元素和內(nèi)聯(lián)元素組裝到html文檔里面。學(xué)習(xí)html就是學(xué)習(xí)各種各樣的標(biāo)簽，段落、表格、div等等，通過網(wǎng)絡(luò)上的一些教程，可以在幾小時或者幾天之內(nèi)掌握基本的一些元素以及他們的使用方法。這時候應(yīng)該找一個好的網(wǎng)站，例如w3school,里面有一整套的網(wǎng)絡(luò)編程教程，按照它的流程學(xué)習(xí)下來（html->css->javaScript->php），相信會受益匪淺。當(dāng)然也可以買一兩本書來學(xué)習(xí)，《head first html and css》就很不錯，可以在看書的過程中立馬學(xué)會怎樣編寫html文檔。往后則學(xué)習(xí)CSS，CSS是層疊樣式表，它可以讓你的網(wǎng)頁看起來更加漂亮，沒錯，那些漂亮的圓角以及渲染效果都是CSS做的，以前我一直以為是用ps搞出來的，原來CSS是如此的神奇。
學(xué)習(xí)了html，就應(yīng)該在自己的計算機上用dreamweaver或者nvu試試，可以任選一款編輯器編輯網(wǎng)頁文檔。我目前比較喜歡在linux下用bluefish或者Gvim直接編寫html文檔，然后在本地用瀏覽器打開即可查看效果。html里面很重要的一些元素是需要理解的，比如div元素將邏輯上為一個整體的各個元素圈在一起。還有一個很厲害的屬性是float，使得網(wǎng)頁可以漂浮在左邊或者右邊。這時，你應(yīng)該會用css的-webkit等來渲染網(wǎng)頁，從而做出很美的效果。
例如上圖中的好看的標(biāo)題底圖是用下面的css做的：
h3{
padding: 10px;
background-p_w_picpath: -webkit-gradient(linear,left top,left bottom,from(#ccc),to(#fff));
/*指定背景圖片是一個由顏色#ccc漸變到#fff的樣式*/
-webkit-border-top-left-radius:5px; /*設(shè)定邊框的角的半徑，就是倒角（圓角）*/
-webkit-border-top-right-radius:5px;
}
還可以使用background-color屬性，繪制透明的背景：
#content {
background-color: rgba(0,0,0,0.2); /*透明的黑色，透明度0.8，alpha值表示透明度*/
size: auto;
padding: 20px;
margin: auto;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
}
總之有了CSS，一切都變得很容易。
接下來就要學(xué)習(xí)一些瀏覽器端的腳本語言了，例如javaScript。因為
服務(wù)器不可能時時刻刻和客戶端瀏覽器進行互動，這就需要客戶端有腳本語言來相應(yīng)客戶的操作，讓用戶覺得沒有受到冷落（例如我想看到網(wǎng)頁上有個時鐘，服務(wù)器不可能每秒鐘發(fā)信息來刷新時間，這種任務(wù)最好交給瀏覽器來做，在本機上可以隨時刷新時間）。學(xué)習(xí)javascript也能做出很強悍的效果，這時一般要下載別人寫的庫，例如jquery，可以寫成很炫的上拉下拉、淡入淡出等效果。螞蟻師兄說過“javascript甚至可以在網(wǎng)頁上模擬一個操作系統(tǒng)的桌面”，不信的同學(xué)可以去ubuntu的官網(wǎng)看看http://www.ubuntu.com/tour/en/簡直炫瞎了。學(xué)習(xí)jquery也可以到w3school去，那里真的是個寶庫。學(xué)習(xí)網(wǎng)頁制作要學(xué)習(xí)很多東西，從html到css再到j(luò)avascript然后到php，最后可能會接觸linux服務(wù)器以及網(wǎng)絡(luò)編程，不管怎樣這個過程是必須的，我們也能從中獲取很多樂趣。
bibo自身也沒有怎么好好學(xué)習(xí)php編程，只是稍微接觸過，要做出真正有用的網(wǎng)站，還得繼續(xù)深入學(xué)習(xí)php。但是在這里，我還想討論一些怎樣做出好的網(wǎng)頁。我認(rèn)為好的網(wǎng)頁：
1、在外觀上典雅大方，能夠突出文檔內(nèi)容
2、在編碼程序上，能夠做到簡潔，簡單即是美
雖然我自己沒有多少設(shè)計網(wǎng)頁的經(jīng)驗，但是品位還是不差的，有些國內(nèi)網(wǎng)頁做得很糟糕，可能內(nèi)容沒有多少，但是掛的廣告卻是——滿天飛。一流的網(wǎng)頁設(shè)計者絕對不會讓網(wǎng)頁看起來雜亂不堪，他們利用各種布局技術(shù)，將內(nèi)容整潔放置。甚至有簡單到極致者，只有一個背景圖片，再沒有多余的效果以及渲染。
在代碼上也能清晰明了，使人能讀懂。css代碼指哪打哪，javascript也物盡其用。修煉之道還很長很長，通過努力，我們也能到達這個境界。
ps:編寫html代碼也要注意規(guī)范化以及測試等問題
關(guān)于
設(shè)計網(wǎng)頁的經(jīng)驗就分享到這里了，希望以上內(nèi)容可以對大家有一定的參考價值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。
