網(wǎng)頁模版,個人網(wǎng)站建設(shè)入門知識(2)
用切片工具切出上面分出的那些區(qū)域,注意切片與切片之間不能相交,也不能有間隙,仔細(xì)點(diǎn)調(diào)整好。切片的時候大小不合適可以隨時調(diào)整大小,方法和使用變形工具類似。
切片完成之后想調(diào)整還可以用切片選擇工具重新選擇任意切片然后調(diào)整,這句話像不像在念經(jīng)。。。
然后存儲為web所用格式,快捷鍵就不說了,你懂的。格式選擇JPG,尺寸不要動,點(diǎn)存儲,文件名先隨便,格式選僅限圖像,默認(rèn)設(shè)置,所有切片。
這里其實(shí)有個小支線任務(wù),格式可以選擇HTML和圖像,PS會幫你生成一個網(wǎng)頁,不過那個太LOW了,咱大俠們不屑一顧,嗯,不管你們信不信反正我信了。
保存后打開你存的文件夾,PS有生成一個images文件夾,表改這位夾兄的名字喲,實(shí)際上網(wǎng)站保存圖片的文件夾都叫這個名字。打開images文件夾,我們可以看到切好的圖。
然后分別給它們命名,簡單點(diǎn)可以1234,復(fù)雜點(diǎn)就是為了SEO和可維護(hù)性考慮,命名得語義化,例如LOGO,就命名首頁-頭部-logo,home_top_logo。這樣的話在其他地方用的另外尺寸的logo就不會和這個logo搞混。
命名好后,把images文件夾整個復(fù)制到網(wǎng)頁文件所在位置,這點(diǎn)很重要別忘記喲。
然后我們回到DW,在HTML中,有兩種方法插入圖片,先讓我們試試第一種,直接在頁面插入。
看到那個img標(biāo)簽了嗎,那就是直接插入一張圖片的意思,格式反正你記住就這么寫就行,src后面的引號里的是圖片文件的相對位置,這里的意思就是與網(wǎng)頁文件同級的文件夾images里的1.jpg。相對位置的理解得練習(xí)一段時間,不過不難放心。
除了相對位置,還有絕對位置,你百度一張圖片右鍵屬性可以看到地址那里有一長串的網(wǎng)址,把那個復(fù)制下來替換掉相對地址就行,不過網(wǎng)站一般沒有用到這個的時候,這個先不深究。
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- ps網(wǎng)頁設(shè)計(jì)
- ps做網(wǎng)站
- 網(wǎng)頁模版
- 網(wǎng)站入門
- 個人網(wǎng)站
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- Photoshop打造蒼桑感網(wǎng)頁Header
- Photoshop制作筆記本電子商務(wù)網(wǎng)站首頁模板
- PS設(shè)計(jì)教程:房地產(chǎn)網(wǎng)站設(shè)計(jì)流程
- Photoshop設(shè)計(jì)銀灰色的WEB模板教程
- Photoshop教程:制作深藍(lán)色質(zhì)感網(wǎng)站模板
- PhotoShop設(shè)計(jì)制作商業(yè)地產(chǎn)網(wǎng)站的教程
- Photoshop繪制高雅清新的網(wǎng)站首頁模板
- Photoshop設(shè)計(jì)蘋果系統(tǒng)風(fēng)格的網(wǎng)頁模板
- ps設(shè)計(jì)商業(yè)web頁面
- Photoshop繪制精美的企業(yè)網(wǎng)站模板