當(dāng)前位置:首頁>ps實例教程>ps網(wǎng)頁設(shè)計>網(wǎng)頁模板>教程內(nèi)容

網(wǎng)頁模版,個人網(wǎng)站建設(shè)入門知識(2)

來源:站酷 作者:Becky趙 學(xué)習(xí):23471人次

用切片工具切出上面分出的那些區(qū)域,注意切片與切片之間不能相交,也不能有間隙,仔細點調(diào)整好。切片的時候大小不合適可以隨時調(diào)整大小,方法和使用變形工具類似。

www.theoat.com.cn_021T95315-7.jpg
<點圖片看大圖>


切片完成之后想調(diào)整還可以用切片選擇工具重新選擇任意切片然后調(diào)整,這句話像不像在念經(jīng)。。。

然后存儲為web所用格式,快捷鍵就不說了,你懂的。格式選擇JPG,尺寸不要動,點存儲,文件名先隨便,格式選僅限圖像,默認(rèn)設(shè)置,所有切片。

www.theoat.com.cn_021Ta430-8.jpg
<點圖片看大圖>


這里其實有個小支線任務(wù),格式可以選擇HTML和圖像,PS會幫你生成一個網(wǎng)頁,不過那個太LOW了,咱大俠們不屑一顧,嗯,不管你們信不信反正我信了。

保存后打開你存的文件夾,PS有生成一個images文件夾,表改這位夾兄的名字喲,實際上網(wǎng)站保存圖片的文件夾都叫這個名字。打開images文件夾,我們可以看到切好的圖。

www.theoat.com.cn_021T923V-9.jpg


然后分別給它們命名,簡單點可以1234,復(fù)雜點就是為了SEO和可維護性考慮,命名得語義化,例如LOGO,就命名首頁-頭部-logo,home_top_logo。這樣的話在其他地方用的另外尺寸的logo就不會和這個logo搞混。

命名好后,把images文件夾整個復(fù)制到網(wǎng)頁文件所在位置,這點很重要別忘記喲。

然后我們回到DW,在HTML中,有兩種方法插入圖片,先讓我們試試第一種,直接在頁面插入。

www.theoat.com.cn_021T9B17-10.jpg


看到那個img標(biāo)簽了嗎,那就是直接插入一張圖片的意思,格式反正你記住就這么寫就行,src后面的引號里的是圖片文件的相對位置,這里的意思就是與網(wǎng)頁文件同級的文件夾images里的1.jpg。相對位置的理解得練習(xí)一段時間,不過不難放心。

除了相對位置,還有絕對位置,你百度一張圖片右鍵屬性可以看到地址那里有一長串的網(wǎng)址,把那個復(fù)制下來替換掉相對地址就行,不過網(wǎng)站一般沒有用到這個的時候,這個先不深究。

www.theoat.com.cn_021T952J-11.jpg

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
孤芳不自賞2019-01-21 12:58
太棒了
小螞蟻2018-07-20 08:11
必須支持
獅子的星空吧2017-05-28 09:49
想看看
深深的海洋2017-05-28 04:07
好復(fù)雜的趕腳

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!