1. เปิดโปรแกรม Adobe Photoshop ขึ้นมา
2. สร้างไฟล์ใหม่ขึ้นมาให้มีขนาด 235 x 55px โดยไปที่เมนู File > New
3. เลือกสีตามต้องการ (ในบทเรียนนี้ให้เลือกสีเดียวกับแบนเนอร์) แล้วใช้เครื่องมือ Paint Bucket Tool เพื่อเทสีลงไปในแผ่นงาน
4. ใช้เครื่องมือ Horizontal Type Tool พิมพ์ข้อความไปในแผ่นงาน
5. ปรับแต่งขนาด สี แบบอักษรของข้อความตามความต้องการ เมื่อได้แบบที่ต้องการแล้วคลิกที่เครื่องหมายถูก หรือกดปุ่ม Enter ที่คีย์บอร์ด
6. ไปที่เมนู File > Save As… แล้วบันทึกไว้ที่โฟลเดอร์ Mysite > images ชื่อ button1-1
7. ใช้เครื่องมือ Set the text color เพื่อเปลี่ยนสีตัวอักษรเป็นสีอื่น (ในตัวอย่างปรับเป็นสีขาว)
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
13. จะปรากฏหน้าต่าง Insert Rollover Image คลิกที่ปุ่ม Browse… เพื่อเลือกไฟล์รูปภาพปุ่มที่ได้ทำไว้ เลือกทั้งช่อง Original image และ Rolloverimage (ดังภาพด้านล่าง)
14. คลิกที่ปุ่ม OK
15. ทำแบบนี้ทุกปุ่มจนครบ
เมื่อได้หน้าเว็บไซต์ที่ต้องการแล้ว จัดการบันทึกหน้าเว็บไซต์นี้ไว้ในโฟลเดอร์ Mysite >page ชื่อ page2.html , page3.html ไปเรื่อยๆ จนได้ตามจำนวนที่ต้อง
การแทรกเนื้อหาสามารถทำได้โดยพิมพ์ตัวอักษรลงไปในกล่องที่สร้างไว้ในชื่อ content
Comments are closed.