html代碼<ul class="nav"><li><img src="a1.jpg"></li><li><img src="a2.jpg"></li><li><img src="a3.jpg"></li></ul>css代碼.nav li{ float:left; padding-left:10px;}注:float:left定義圖片向左漂浮,,padding-left:10px定義圖片左側(cè)內(nèi)邊距為10px(即圖片與左邊圖片的間隔空隙);

1.精通Photoshop、Dreamweaver、Flash、Illustrator或Freehand等矢量圖形編輯軟件；2.具備較強的網(wǎng)頁美術(shù)設(shè)計能力和很深的美術(shù)功底，極好地把握視覺色彩與網(wǎng)站布局；3.較強的分析問題和解決問題的能力；細致的觀察能力，較強的創(chuàng)造力；對產(chǎn)品流程、用戶操作流程及用戶使用習(xí)慣有深入理解，掌握用戶研究、可用性測試和評估技能，有很強的交互和視覺創(chuàng)新能力；4.熟悉HTML，XML，DIV，CSS，熟練運用DIV+CSS制作網(wǎng)頁，能夠手寫代碼者優(yōu)先。關(guān)系：交互設(shè)計師主要是研究用戶需求和界面的關(guān)系，并且根據(jù)這種關(guān)系，對產(chǎn)品的功能和界面交互模塊進行設(shè)計和規(guī)劃。例如要做一個網(wǎng)站，交互設(shè)計師主要考慮的問題是，這個網(wǎng)站的目標人群是誰，滿足他們的什么需求，目標用戶有什么樣的操作習(xí)慣。根據(jù)分析相關(guān)的需求調(diào)研數(shù)據(jù)，交互設(shè)計師會建立一個或者幾個用戶模型，然后分析這些用戶的使用習(xí)慣，建立網(wǎng)站的設(shè)計原型，這個原型可以是普通的相框稿，也有可能是一個高保真模型，但是并不需要設(shè)計元素細節(jié)和具體的視覺效果。一般來說，交互設(shè)計師的工作內(nèi)容就到此為止了。UI設(shè)計師，顧名思義，會更側(cè)重用戶界面的設(shè)計，前面那些用戶模型、需求分析什么的，UI設(shè)計師一般不用參與，等交互設(shè)計師把這些工作都搞定了，完成了一個設(shè)計原型之后，UI設(shè)計師再對頁面的細節(jié)進行設(shè)計和優(yōu)化，所以UI設(shè)計師的工作會根偏向視覺一些。不過這兩個工作的交叉點還是很多的，如果做交互的有UI設(shè)計的經(jīng)歷，那么做產(chǎn)品原型的時候就會更加規(guī)范和美觀，如果做UI設(shè)計的有交互設(shè)計的經(jīng)歷，那么在進行具體設(shè)計的時候就會更加關(guān)注用戶需求和用戶體驗，所以有的公司招交互設(shè)計師，要負責(zé)UI方面的工作，有的招UI，卻要有交互的從業(yè)背景~~你要想學(xué)UI設(shè)計的話，建議你去國信安吧。很好的。

PSD最好做1366*768的尺寸，網(wǎng)頁頂部、底部、導(dǎo)航條部分需要百分百寬 內(nèi)容根據(jù)PSD設(shè)定具體像素

網(wǎng)頁設(shè)計也分很多部門，你做平面的不如做網(wǎng)頁美工比較簡單，至于你想獨立完成一個網(wǎng)站的制作全過程，首先得學(xué)軟件，比如DreamWeaver，那也只能做靜態(tài)的網(wǎng)頁，動態(tài)的還需要學(xué)數(shù)據(jù)庫，如ACCESS，學(xué)網(wǎng)頁代碼制作。網(wǎng)頁要美觀，還得學(xué)FLASH等等。。。 網(wǎng)頁代碼從簡單學(xué)起，ASP應(yīng)該算是比較簡單的了，沒有條件系統(tǒng)的學(xué)的話就下載ASP代碼的網(wǎng)站，然后學(xué)習(xí)編輯修改天下文章一大抄，就算你不會編輯代碼，只要把上面說的亂七八糟的都弄的7,8不離10，你可以把下載下來的網(wǎng)站修改成任何你想要的樣式。www.chinaz.com，這個網(wǎng)站去看看

前端設(shè)計主要的工作無非就是按照效果圖使用前端的代碼來做出符合要求的靜態(tài)頁面，使用的軟件大致如下（不同人是使用的可能不同）：1、以Photoshop為代表的圖片處理技術(shù)。網(wǎng)頁設(shè)計的第一步是按照客戶的需求來設(shè)計網(wǎng)站效果圖，這個工作是由美工來完成的，現(xiàn)在網(wǎng)頁設(shè)計嚴格的來說不包括美工的工作，即美工只負責(zé)設(shè)計效果圖網(wǎng)頁的設(shè)計師只負責(zé)嚴格按照效果圖將效果圖的樣式以網(wǎng)頁的形式做出來，那可能有人會問為什么網(wǎng)頁設(shè)計師還需要ps呢？那是因為網(wǎng)頁設(shè)計師也就是前端設(shè)計師需要將美工制作的效果圖（一般是psd格式的）使用ps的切片功能將其中用的到的圖片裁切出來放到網(wǎng)頁上去用，此時就要使用photoshop來完成這個工作，所以作為網(wǎng)頁設(shè)計師或者前端設(shè)計師會一些基本的Photoshop知識還是很有必要的。2、前端代碼編輯器如dreamweave、hubuilder等，建議初學(xué)者使用記事本等文本編輯器。我們知道現(xiàn)在的網(wǎng)頁設(shè)計都是純手寫代碼基本沒有使用可視化編輯的了，原因是可視化編輯的網(wǎng)頁有很多弊端如代碼冗余、后期改版難以控制和維護、網(wǎng)頁的執(zhí)行效率和性能不高等。此時解決的辦法就是純手寫htm、css、js等代碼來做我們的網(wǎng)頁，但是我們在實際開發(fā)過程中又有些問題，學(xué)習(xí)的網(wǎng)頁的初期我們可以使用記事本或者有些簡單的文本編輯工具來寫代碼，但是在實際開發(fā)過程中我們需要借助有些好的編輯器來提高我們的效率， 此時就需要使用功能強大的編輯器，提供代碼高亮、代碼提示等功能來提高開發(fā)的速度，常見的前端代碼編輯器有dreamweave、hubuilder、sublime等等，這個根據(jù)個人的習(xí)慣和工作的環(huán)境進行選擇即可。但是建議初學(xué)者使用記事本等文本編輯器，這樣能讓我們記住一些關(guān)鍵詞，有利于學(xué)習(xí)。3、一些更高級的前端工具和軟件我們也需要學(xué)習(xí)。在實際的開發(fā)過程中，以上的工具并不能完全滿足我們的需要，尤其是開發(fā)一些大型的項目的時候，我們需要使用和借助的工具來幫助我們進行開發(fā)，這里簡要說一些。例如當(dāng)我們進行團隊合作的時候，我們可能還會使用一些版本控制工具來進行團隊合作，如svn、github等，在進行項目管理的時候我們可能還需要一些前端的包管理工具如grunt、webpack等。這些工具都是一個專業(yè)前端工程師應(yīng)該學(xué)些的?？偨Y(jié)：簡單的介紹了一些網(wǎng)頁設(shè)計中需要使用的軟件和工具，可能不是很全面，但是可以給大家作為一個參考。

要成為一名網(wǎng)頁設(shè)計工程師，必須你要懂得網(wǎng)頁設(shè)計，可以到學(xué)校學(xué)習(xí)或者自學(xué)。成為網(wǎng)頁設(shè)計工程師需要掌握的有：一、熟練操作Dreamweaver及Photoshop； 二、能夠簡單操作Flash、Firework、Illstrator等作圖工具； 三、如果是涉及編程，需要能夠操作asp、php、.NET其中一種編程語言； 四、盡可能多的理解熟悉各種網(wǎng)站的基本架構(gòu)表現(xiàn)。 五、理解能力及溝通能力強。

《網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)實戰(zhàn)大全》《實戰(zhàn) Dreamweaver網(wǎng)頁制作教程》《JavaScript  語言精粹》

　　我們對手機網(wǎng)站制作中需要注意哪些方面的問題展開分析，為各位手機網(wǎng)站制作的用戶們提供一些參考，現(xiàn)總結(jié)幾點如下：　　1、明確自己想在手機網(wǎng)站上展示哪些信息：　　在手機網(wǎng)站制作之前應(yīng)該明確自己想在手機網(wǎng)站上展示什么，分析一下可能的瀏覽者會有哪些，然后有針對性地策劃和設(shè)計網(wǎng)站上的相關(guān)內(nèi)容，這樣才能做到有的放矢，不至于手機網(wǎng)站制作好了卻沒人瀏覽，或者瀏覽了不感興趣。如果能做到有針對性的進行手機網(wǎng)站制作，通常手機網(wǎng)站在推廣之后都會為企業(yè)帶來一定量的潛在用戶?！　?、在手機網(wǎng)站制作時要盡量符合滑動屏幕的方式：　　一般的手機屏幕，畫面都不如桌上電腦那么大，尤其是閱讀文字時更需要加以放大。即使智能手機具有網(wǎng)頁放大縮小功能，但是觀看起來也較為麻煩，因為網(wǎng)頁放大后，很可能還要左右滑動才能瀏覽網(wǎng)頁，瀏覽后還要縮小回原大小。因此在設(shè)計手機網(wǎng)頁時，應(yīng)能夠以滑動屏幕的方式來閱讀網(wǎng)頁，因為滑動網(wǎng)頁操作比著放大網(wǎng)頁觀看來要簡單得多?！　?、不能參照PC端網(wǎng)站來設(shè)計手機網(wǎng)站上的導(dǎo)航功能：　　手機網(wǎng)頁與跟一般的PC端網(wǎng)頁不同，由于受到手機屏幕大小和屏幕操作的限制，在設(shè)計導(dǎo)航功能時應(yīng)該按照手機屏幕來設(shè)計，不能完全照搬PC端網(wǎng)站，該簡單的地方簡單化，該去掉的去掉，同時在當(dāng)閱讀文章到最后時，要方便于用戶回到最前頭，減少卷動畫面的機會，讓網(wǎng)頁變得更容易于移動設(shè)備上閱讀?！　?、手機網(wǎng)站制作也要考慮多種瀏覽器的兼容：　　現(xiàn)在的移動瀏覽器能夠處理大多數(shù)網(wǎng)站，一般的瀏覽器都能夠正常瀏覽網(wǎng)頁。但由于手機上的瀏覽器也有多種，比如UC瀏覽器、360瀏覽器、搜狗瀏覽器、其他瀏覽器，如此多的瀏覽器在瀏覽網(wǎng)頁的時候，如果手機網(wǎng)站的兼容性差，就很可能會出現(xiàn)在某些瀏覽器上出現(xiàn)網(wǎng)頁變形、內(nèi)容顯示不全的情況。因此，手機網(wǎng)站制作必須考慮到兼容于多種瀏覽器。　　5、在手機網(wǎng)站制作時一定要減少用戶文字輸入操作：　　現(xiàn)在智能手機一般都沒有實體的鍵盤，或僅只有12鍵的電話輸入功能，因此在輸入文字上會比起使用電腦鍵盤麻煩得多。因此，減少使用者輸入文字的機會，例如用戶名、密碼等，都是手機網(wǎng)站制作時要盡力避免的。　　6、在手機網(wǎng)站制作時就應(yīng)該考慮到日后的推廣和宣傳：　　在手機網(wǎng)站制作時，不要忽略了用戶體驗，否則在日后的網(wǎng)站推廣時將會遇到麻煩。任何一個手機網(wǎng)站，都必須經(jīng)過廣策劃、設(shè)計和推廣的過程，在手機網(wǎng)站制作時需要考慮日后的推廣，手機網(wǎng)站應(yīng)該在豐富站內(nèi)內(nèi)容的同時，提供詳盡的產(chǎn)品信息以及聯(lián)系方式，并收集有關(guān)產(chǎn)品的用戶滿意度和顧客需求方面的反饋信息。這樣的手機網(wǎng)站上線后，其推廣工作也會非常有效果?！　?、手機網(wǎng)站制作要兼顧非觸摸屏幕的設(shè)計：　　雖然大多數(shù)手機都是智能手機，但也有為數(shù)不少的傳統(tǒng)手機，不具備觸摸的功能，使用的是傳統(tǒng)的控制方向鍵做為滑動的工具，這時候，手機網(wǎng)頁的制作應(yīng)兼顧到非觸摸屏的手機瀏覽。比如減少畫面中超鏈接的數(shù)量、加大文字以減少誤點?！　?、在手機網(wǎng)站制作時要記得要簡化網(wǎng)頁內(nèi)容：　　一般的手機、平板電腦等移動設(shè)備，由于屏幕大小的限制，不易容納下個人電腦的大容量的網(wǎng)頁資訊，因此手機網(wǎng)站制作的首要一點就是減少網(wǎng)頁內(nèi)容，最好不用圖片或是影音視頻等，文字也應(yīng)該精簡，但要保持網(wǎng)頁內(nèi)容的可讀性。只需要將最重要的資訊放入移動版網(wǎng)頁，不太重要的內(nèi)容內(nèi)容，可以略去，或者通過超鏈接鏈接到新網(wǎng)頁上?！　?、手機網(wǎng)站制作要注重網(wǎng)頁產(chǎn)品和服務(wù)的展示：　　企業(yè)在手機網(wǎng)站上，需要表現(xiàn)的重點仍然是產(chǎn)品和服務(wù)的展示。移動用戶訪問企業(yè)手機網(wǎng)站往往是有備而來，想了解某個產(chǎn)品或者服務(wù)的詳細價格、服務(wù)內(nèi)容和功能。所以企業(yè)在手機網(wǎng)站上的產(chǎn)品和服務(wù)展示，可選擇企業(yè)的主要產(chǎn)品，對其各類參數(shù)或價格加以詳細說明，對于企業(yè)的新產(chǎn)品，也可以適當(dāng)?shù)募右越榻B，必要時可以采用圖文并茂的方式，但圖片的體積應(yīng)盡量小?！　∫陨鲜窃谑謾C網(wǎng)站制作中需要注意的幾個方面，手機網(wǎng)站頁面設(shè)計需要符合用戶體驗，以方便用戶操作為準則，能夠為用戶帶來切實的幫助，這是手機網(wǎng)站制作上的基本要求，也是滿足用戶需求的基本原則。

設(shè)計出令用戶滿意的網(wǎng)站來。比如說，頁面要美觀、大方，這樣用戶看了才會覺得這個網(wǎng)站是一個高大上的網(wǎng)站;老漁哥認為代碼要精簡，這樣訪問時打開網(wǎng)站就會比較快;內(nèi)容要充實，用戶看了才會覺得你是在用心去為他們服務(wù)，為他們提供最新的信息，才會認可，操作要簡潔，大部分用戶都不是專業(yè)人員，太復(fù)雜的操作他們根本不會，所以越簡單越好。