สร้างปุ่มลิงค์

1. เปิดโปรแกรม Adobe Photoshop ขึ้นมา
2. สร้างไฟล์ใหม่ขึ้นมาให้มีขนาด 235 x 55px โดยไปที่เมนู File > New

button1

 

3. เลือกสีตามต้องการ (ในบทเรียนนี้ให้เลือกสีเดียวกับแบนเนอร์) แล้วใช้เครื่องมือ Paint Bucket Tool เพื่อเทสีลงไปในแผ่นงาน

button2

 

4. ใช้เครื่องมือ Horizontal Type Tool พิมพ์ข้อความไปในแผ่นงาน

button3

 

5. ปรับแต่งขนาด สี แบบอักษรของข้อความตามความต้องการ เมื่อได้แบบที่ต้องการแล้วคลิกที่เครื่องหมายถูก หรือกดปุ่ม Enter ที่คีย์บอร์ด

button4

 

6. ไปที่เมนู File > Save As… แล้วบันทึกไว้ที่โฟลเดอร์ Mysite > images ชื่อ button1-1
7. ใช้เครื่องมือ Set the text color เพื่อเปลี่ยนสีตัวอักษรเป็นสีอื่น (ในตัวอย่างปรับเป็นสีขาว)

button5

 

8. ไปที่เมนู File > Save As… แล้วบันทึกไว้ที่โฟลเดอร์ Mysite > images ชื่อ button1-2
9. ใช้เครื่องมือ Horizontal Type Tool พิมพ์ข้อความลิงค์ที่ต้องการไปเรื่อยๆ และบันทึกในชื่อ button2-1 , button2-2 , button3-1 , button3-2 ไปเรื่อยๆ จนกว่าจะครบทุกลิงค์
10. เปิดไฟล์ index.html ขึ้นมาในโปรแกรม Dreamweaver
11. คลิกที่ช่องที่เตรียมไว้สำหรับใส่ลิงค์
12. ใช้เครื่องมือแทรกรูปภาพ Rollover Image

button6

 

13. จะปรากฏหน้าต่าง Insert Rollover Image คลิกที่ปุ่ม Browse… เพื่อเลือกไฟล์รูปภาพปุ่มที่ได้ทำไว้ เลือกทั้งช่อง Original image และ Rolloverimage (ดังภาพด้านล่าง)

button7

 

14. คลิกที่ปุ่ม OK
15. ทำแบบนี้ทุกปุ่มจนครบ

 

 

เมื่อได้หน้าเว็บไซต์ที่ต้องการแล้ว จัดการบันทึกหน้าเว็บไซต์นี้ไว้ในโฟลเดอร์ Mysite >page ชื่อ page2.html , page3.html ไปเรื่อยๆ จนได้ตามจำนวนที่ต้อง

แทรกเนื้อหาสามารถทำได้โดยพิมพ์ตัวอักษรลงไปในกล่องที่สร้างไว้ในชื่อ content

addcontent2