下面我介紹下我們所用的軟件
Adobe Photoshop CS4 這個也就是我們常說的PS軟件,是一款比較好的圖像處理軟件,它的功能非常多,劃分為圖像編輯、圖像合成、校色調色及特效制作部分。 不怕你不會,就怕你不學,沒人會一步登天的...專家也是慢慢變成的 Macromedia Dremweaver MX2004 這個是一款網頁制作和管理網站于一身的所見即所得網頁編輯器,它的優點在于最佳的制作效率,網站管理和無可比拟的控制能力。我們并不是專業,也不喜歡做到專業一樣。我們隻要利用它就行了好,我們來看看如何運動這兩款軟件
首先是打開你要獲取代碼的圖片,選擇切片工具,是要把圖片切分開來,這樣可以把想填加鍊接的圖片做到,每個切片大小可以不一樣
第二步,在圖片的左上方開始,點擊左鍵拖拉,會出現一個虛線框
然後放開左鍵後,軟件會自動設置,左上角的數字代表這個切片的序号
然後繼續切片,第二切片要于第一個切片貼邊,要不然會樣切片1變小或切片不完整
然後按自己的要求來劃分,注意一定要把整個圖片劃分起來,即使是沒有用的PS:你切分多少等下會得到相對應的圖片,所以你要把你想添加鍊接的那部分要分開來
然後切分後,我們就保存為web和設置所用格式,馬上就結束PS的工作
點擊保存
記住要保存為圖象和html類型
好的,保存之後,PS可以關閉了。下面我們運用Dreamweaver
剛得到兩個文件,把images上傳到圖片空間,html的文件就用Dreamweaver來制作
注意,剛剛因為我們切片的時候是分了4份,所以得到的圖片也就是4個
好的,我們打開Dreamweaver,
Dreamweaver是網頁制作和管理網站于一身的所見即所得網頁編輯器,它是第一套針對專業網頁設計師特别發展的視覺化網頁開發工具,利用它可以輕而易舉地制作出跨越平台限制和跨越浏覽器限制的充滿動感的網頁。
我用的版本是MX 2004,比較舊了,呵呵.好的我們會看到這樣的一個模版
我先在簡單介紹一下Dreamweaver....Dreamweaver一般打開頁面後的界面包括:菜單欄、面闆組、工具欄、代碼編輯區、屬性和面闆組。
我們要運用好這軟件,就必須了解一些基本。連基本都不會,是很難操作起來的,首先是菜單欄一共分文件,編輯,查看,插入,修改,文本,命令,站點,窗口和幫助。我們也不需要對每個都深入研究。
文件菜單:就是包括對文件的各種操作,例如新建,保存等。
編輯菜單:對文件的一些指令,例如是拷貝,粘貼和替換等。
查看彩單:使用查看菜單可以查看文檔的相關内容。
接下來就認識一下快捷鍵
Ctrl-B或Ctrl-I來為文字應用黑體或斜體格式,
選中的文本應用HTML格式:
Ctrl-0: 無格式
Ctrl-T: 段落
Ctrl-1: 标題 1
Ctrl-2: 标題 2
然後我們認識一下屬性闆,因為等下需要用到,屬性版上可以對選種的對象來進行修改,比如說地址,鍊接,格式,字體等。還有一點,屬性闆是根據當前對象來設置的,你選擇的對象不同,它的顯示出來的屬性調整就會不同
好了,我們可以開始去做了。。縮小一下窗口,直接把HTML文件拖進去可以了,好的,現在我們看到這樣的畫面,上方是我們等下需要的代碼,中間就是我們的圖片,下面是屬性設置
然後我們按照切片的位置來修改,把圖片的地址改成上傳之後的圖片地址,鍊接是超鍊接的地址,填加對應的地址點擊圖片會打開,當然沒有需要的部分也不用填加
圖片地址改了後。會變成這樣,是正常的,然後我們繼續去改換其他
圖片地址改完後,鍊接也填加了,下面馬上完工,拷貝代碼
到我是賣家版面,選擇裝修店鋪
到自定義版塊,點擊編輯HTML,
把剛拷貝的代碼複制下去,然後保存
這樣,我們的圖片就完成了,若有填加鍊接的圖片,點擊是可以打開的
有話要說...