Home Training Dreamweaver training การทำ Gradient ภาพโดยใช้ Dream

การทำ Gradient ภาพโดยใช้ Dream

อีเมล พิมพ์ PDF

การทำ Gradient ภาพ บางคนอาจจะรู้จักแแล้วแต่ส่วนใหญ่จะใช้โปรแกรม Graphic ทำแต่ที่จริงแล้ว dreamweaver ก็สามารถทำได้เช่นกัน มาดูขั้นตอนการทำกันเลย

ขั้นตอนการทำ

1. เปิดเอกสาร หรือสร้างเอกสาร Html ที่เราต้องการทำ Gradient ขึ้นมา ดังภาพ




2. จากนั้นให้เราทำการสร้าง CSS Style ขึ้นมาก่อน โดยมีขั้นตอนดังนี้
2.1 คลิกขวาที่พื้นที่ว่างในหน้าจอจะมีเมนูขึ้นมาให้เราเลือก Css Styles --> New Css Style ดังภาพ




2.2 จะมีหน้าต่าง New Css Style แสดงขึ้นมาให้เราใส่ชื่อ gradient ดังภาพ




2.3 เลือก Extensions --> Alpha ดังภาพ



โดยมี Properties ที่เกี่ยวข้องดังนี้ 
Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)

Opacity = ความจางของภาพ ณ ตำแหน่งเริ่มต้น
FinishOpacity = ความจางของภาพ ณ ตำแหน่งสิ้นสุด
Style = รูปแบบของการทำ Alpha มีอยู่ 4 รูปแบบ
StartX = ตำแหน่งที่ให้เริ่มทำ Alpha แกน X
StartY = ตำแหน่งที่เริ่มทำ Alpha แกน Y
FinishX = ตำแหน่งสิ้นสุดการทำ Alpha แกน X
FinishY = ตำแหน่งสิ้นสุดการทำ Alpha แกน Y

ค่าที่ผมกำหนดใน Css มีดังนี้
Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=500, FinishY=500)

3. หลังจากที่เราได้ Css แล้วก็มาถึงขั้นตอนการนำไปใช้ เริ่มต้นให้เรา Insert ภาพลงมาในเว็บเพจของเรา ดังภาพ
* ในที่นี้ผมใช้ภาพขนาด 500x500 px




4. จากนั้นให้เรานำ Mouse ไปคลิกที่รูปภาพ หลังจากนั้นเลือก Quick Tag Editor ที่ Properties ดังภาพ



5. จากนั้นตบแต่ง Background ให้เข้ากับภาพแล้วลอง Preview ดังภาพ



6. เป็นอย่างไรกันบ้างทำได้อย่างตัวอย่างหรือเปล่า แต่คิดว่าคงไม่ยาก ในส่วนของ Extension ยังมี Effect อื่นๆ อีกมากมายลองนำมาใช้งานกับเว็บของเราดูนะครับ

 
ป้ายโฆษณา

รับติดตั้งจานดาวเที่ยม กล้องวงจรปิด

เนื้อโคขุนโพนยางคำ

Login Form


Polls

ปกติใช้คอมพิวเตอร์ for ?
 

Who's Online

เรามี 27 บุคคลทั่วไป ออนไลน์

Counter

จำนวนครั้งเปิดดูบทความ : 2319280

RSS