การแทรกตัวหนังสือ

การแทรกวัตถุในหน้าเว็บเพจ

การแทรกตัวหนังสือเพื่อการสร้างปุ่มเมนู และแนบ Link

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

สามารถกำหนดค่า โดยคลิ้กที่ช่องเมนู ในหน้าต่าง Properties สามารถกำหนดค่าต่างๆของตัวอักษรได้ ให้การตั้งค่าตารางเมนูส่วน นี้ให้ โดยคลิ้กเม้าส์ที่ขอบตาราง เพื่อปรับความกว้างของแต่ละช่องให้พอดี และใส่สีให้ตัวอักษรตามที่ได้ออกแบบไว้ ในช่องของ Horz เลือก Center (กึ่งกลาง) และ Vert เลือก Middle (กึ่งกลาง) สำหรับหน้าเว็บเพจนี้ อาจเป็นค่าอื่นๆได้ตามรูปแบบของเว็บเพจนั้นๆ

กำหนดค่าสีตัวอักษร

กำหนดค่าสีพื้นหลังในช่องตาราง(เมนู)

สามารถกำหนดค่า โดยคลิ้กที่ช่องเมนู ในหน้าต่าง Properties สามารถกำหนดค่าต่างๆของตัวอักษรได้ ให้ทำ การตั้งค่าตารางเมนู ส่วนนี้ให้ โดยคลิ้กเม้าส์ที่ขอบตาราง เพื่อปรับความกว้างของแต่ละช่องให้พอดี และใส่สีให้ ตัวอักษรตามที่ได้ออกแบบไว้ ในช่องของ Horz เลือก Center (กึ่งกลาง) และ Vert เลือก Middle (กึ่งกลาง) สำหรับหน้าเว็บเพจนี้ อาจเป็นค่าอื่นๆได้ตามรูปแบบของเว็บเพจนั้นๆ ทำการ เซฟไฟล์งาน ไปที่ File เลือก Save As

เลือกไปยังโฟลเดอร์ที่เก็บไฟล์งาน และรูป ให้ Save เก็บไว้ยังที่เดียวกัน ไฟล์งานทั้งหมดต้องอยู่ในโฟลเดอร์เดียวกัน และหน้าแรกต้อง ใช้ชื่อว่า index.html เสมอแล้วกด Save

ให้ทำการเซฟไฟล์งานอีกรอบเพื่อสร้างหน้าอื่นๆ ไปที่ File เลือก Save As แล้วเปลี่ยนชื่องานตามเมนู ทำให้ครบทุกเมนู ได้แก่ ABOUT , TYPOGRAPHY และCONTACTS รวมหน้าแรก (index) ก็จะมีทั้งหมด 4 หน้า ทำการ Save 4 ครั้ง ไฮไลท์หรือลากครอบข้อความ ในส่วนที่เราต้องการแนบ Link

ในช่องของ Properties กดปุ่ม <>HTML เมนูจะเปลี่ยน ในช่องของ Link ให้คลิ้กที่ไอคอนรูปโฟลเดอร์เพื่อเรียกที่อยู่เว็บเพจของเรา ถ้าต้องการ Link ไปยังเว็บไซต์ภายนอกสามารถพิมพ์ที่อยู่ URL ได้เลย เช่น http://www.jbac.ac.th/

ปุ่ม HOME คือหน้าหลักของเราให้ Link ไปที่ index ส่งนเมนูอื่นๆ ให้ Link ไปยังไฟล์งานตามชื่อปุ่มเมนูนั้นๆ เช่น ABOUT

ก็ Link ไปยังไฟล์งานชื่อ ABOUT ทำให้ครบทุกปุ่มเมนู

ไปที่เมนู File เลือก Open

เปิดไฟล์งานทั้งหมดที่เราเซฟไว้ แล้วเพิ่ม Link ที่ปุ่มเมนูให้ครบทุกหน้า โดยแต่หน้าละจะแสดงใน Tab ด้านบน สามารถกด เพื่อไปแก้ไขหน้าอื่นๆได้เลย

ไปที่เมนู File เลือก Save All คือการบันทึกงานไว้ทีเดียวทั้งหมดนั่นเอง

กดปุ่ม F12 เพื่อทำการเปิดไฟล์เว็บเพจจริงที่ได้สร้างไว้ สิ่งที่แสดงผลคือหน้าเว็บเพจของเราจริงๆ

ให้ลองคลิ้กที่เมนู ไปยังหน้าต่างๆเพื่อทดสอบว่าได้แนบ Link ไว้ได้ถูกต้องหรือไม่ แต่กดไปแล้วก็เหมือนๆกันทุกหน้า เพราะเรายังไม่ได้เพิ่มเนื้อหาเข้าไปในแต่ละหน้านั่นเอง ถ้าเมนูแบบตัวอักษร ใครลองทำแล้วไม่ถูกใจ ก็สามารถสร้าง ภาพให้มีขนาดเท่ากับช่องเมนู แล้วใส่รูปภาพเข้าไปแทนตัวหนังสือ แนบ Link ด้วยวิธีการเดียวกันก็ได้น่ะจ๊ะ.....