網(wǎng)頁(yè)模版,個(gè)人網(wǎng)站建設(shè)入門(mén)知識(shí)(2)

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

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

m.theoat.com.cn_021T95315-7.jpg
<點(diǎn)圖片看大圖>


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

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

m.theoat.com.cn_021Ta430-8.jpg
<點(diǎn)圖片看大圖>


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

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

m.theoat.com.cn_021T923V-9.jpg


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

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

然后我們回到DW,在HTML中,有兩種方法插入圖片,先讓我們?cè)囋嚨谝环N,直接在頁(yè)面插入。

m.theoat.com.cn_021T9B17-10.jpg


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

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

m.theoat.com.cn_021T952J-11.jpg

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

  • 一定要打開(kāi)PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問(wèn):新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
孤芳不自賞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)友求助,請(qǐng)回答!