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

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

網(wǎng)頁設(shè)計(jì)也分很多部門，你做平面的不如做網(wǎng)頁美工比較簡單，至于你想獨(dú)立完成一個(gè)網(wǎng)站的制作全過程，首先得學(xué)軟件，比如DreamWeaver，那也只能做靜態(tài)的網(wǎng)頁，動(dò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í)編輯修改天下文章一大抄，就算你不會(huì)編輯代碼，只要把上面說的亂七八糟的都弄的7,8不離10，你可以把下載下來的網(wǎng)站修改成任何你想要的樣式。www.chinaz.com，這個(gè)網(wǎng)站去看看

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

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

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

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

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