บอร์ด บงกช คอมมิวนิตี้

ทำเวบอย่างง่าย (2)


สวัสดีค่ะ พบกันอีกครั้งนะคะ ได้รับรู้เสียงจากผู้อ่านผ่านมาเกี่ยวกับเรื่องสกรีนโทน และการทำโดจินชิดังที่เคยแนะนำไปเมื่อครั้งก่อนๆ รู้สึกดีใจที่มีคนอ่าน และนำเอาที่แนะนำไปทดลองปฏิบัติ อย่างไรก็ตาม... สิ่งที่อยู่ในคอลัมน์นี้ หรือแม้กระทั่งเมลที่เราตอบกลับก็เป็นเพียงตัวหนังสือ บทเรียนที่สำคัญที่สุดคือ การลงมือทำค่ะ จะทำให้เราได้เทคนิกเล็กน้อยๆ ที่ไม่ได้บอกไว้ในคอลัมน์นี้อีกเยอะแยะเลย
มาทำเวบกันต่อนะ คราวที่แล้วเราพูดค้างไว้ถึงเรื่องการทำลิงค์ คิดว่าทุกคนน่าจะเคยเข้าเวบคอมมิคคลับนะ เคยสังเกตไหมคะว่า เมนูด้านซ้ายที่เป็นห้องภาพของนักเขียนการ์ตูน เวลาเอาเม้าส์ชี้ตัวหนังสือจะเปลี่ยนเป็นภาพของคนๆ นั้น

นั่นแหละค่ะ เขาเรียกว่า Rollover Image
สงสัยไหมเอ่ย ว่าเขาทำยังไง (ไม่สงสัยก็จะบอกแหละ) แฮ่ม ว่าแล้วก็มาทดลองกับเวบตัวเองอีกอันนึงดีกว่า


เรามาเปลี่ยนเมนูตัวอักษรธรรมดาแบบนี้ให้เป็น Rollover image กันเถอะ!
เริ่มแรกก็ต้องทำรูปก่อน เพราะฉะนั้นเปิด Photoshop ค่ะ (โปรแกรมคู่ชีพ) จากขนาดตารางที่ทำไว้ เราก็ควรจะทำภาพที่มีขนาด 230 x 20 pixel เพื่อไม่ให้รูปแบบตารางเสียไป แต่ถ้าจะสร้างเวบใหม่ก็กำหนดขนาดได้ตามใจค่ะ


พิมพ์ตัวหนังสือที่ต้องการลงไป ด้วยอุปกรณ์ Type tools ตกแต่งให้ถูกใจแล้วก็เซฟไฟล์แรกที่ต้องการให้ผู้เข้าชมเห็นก่อนเอาเม้าส์ชี้


จากนั้นเซฟไฟล์ที่สองเป็นไฟล์ที่ต้องการให้เห็นตอนเอาเม้าส์ชี้


ทำไปเรื่อยๆ จนครบจำนวนเมนูที่ต้องการ แล้วก็มาวางรูปในโปรแกรม Dreamweaver กัน

คลิกที่ปุ่ม Insert Rollover Image จะมีหน้าต่างนี้ขึ้นมา

ช่องแรก Image nameไม่ต้องไปแก้ ปล่อยไว้เฉยๆ
Original Image เลือกรูปที่ต้องการให้เห็นตอนยังไม่เอาเม้าส์ชี้
Rollover Image เลือกรูปที่ต้องการให้เห็นตอนเอาเม้าส์ชี้แล้ว
When Clicked, Go to URL อันนี้เขาบอกกันชัดๆ คือ เวลาคลิกแล้วจะให้ลิงค์ไปที่ไหน
Browse เสร็จก็กด OK ทำไปเรื่อยๆ จนหมดจำนวนรูป
ทีนี้จากเมนูตัวอักษรธรรมด๊า ธรรมดาก็จะกลายเป็นแบบนี้ค่ะ

ลายตาจังเลยเนอะ แหะๆ
* การทำ Rollover Image นั้นมีข้อแม้เล็กน้อย คือ รูปที่จะทำมา Roll กันนั้นจะต้องมีขนาดpixel เท่ากันค่ะ ไม่งั้นภาพที่เล็กกว่าจะไม่คม และผิดสัดส่วน

ลองทำดูนะ แล้วคราวหน้าเรามาหาของฟรีใช้กัน

ติดตามอ่านได้ใน