การแทรก Navigation Bar
 

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

[1] [2] [3] [4] [5] [6]   หรือ รูปที่ 1

รูปที่ 1

Navigation Bar จะสร้างขึ้นได้ จะต้องทำเว็บในลักษณะ Site มาก่อน โครงสร้างที่เป็นลักษณะต้นไม้ หรือ
Tree คือมีกิ่งก้านสาขา
สาขาที่อยู่ในแนวเดียวกันนั้น ก็คือแต่ละแนวของ Navigation Bar นั้นเอง ซึ่งเราสามารถ
แทรกNaviagation Bar ได้ในทุกหน้าของหน้าเว็บเพจเรา และเราสามารถแก้ไขลักษณะหน้าตาของ
Navigation Bar หรือ ชนิดและสีของฟอนต์ ได้ตามที่เราต้องการ โดยวิธีการก็ให้ไปที่
Site Manager -> ดับเบิลคลิกที่ไฟล์ต้นทางในที่นี้คือ Index.html จากนั้น ให้วาง cursor ลงในในหน้า
Edit เพื่อที่จะวางตำแหน่งของ Navigation bar ดังรูปที่ 2-3

รูปที่ 2

รูปที่ 3

จากนั้นให้คลิกเลือก Insert -> Navigatin Bar และแสดงหน้าต่าง ดังรูปที่ 4

รูปที่ 4

รูปที่ 4 จะเห็นว่ามีหมวดหรือระดับของไฟล์อยู่ 3 กลุ่ม กลุ่มที่ 1 คือกลุ่มภายใต้หน้า Index ซึ่งประกอบไปด้วย
About Mysel + Favorites + Photos + Links ส่วนอีก 2 กลุ่มนั้นอยู่ในระดับเดียวกัน ได้แก่กลุ่ม
Subject 1+ Subject 2 + Subject 3 และอีกกลุ่มคือ Photo 1+ Photo 2 + Photo 3  ในที่นี้จะ
ลองเลือกกลุ่มแรกที่อยู่ภายใต้หน้า Index (หน้าแรกของเว็บ) คลิก Ok ในรูปที่ 4 ดูรูปที่ 5 ประกอบ

รูปที่ 5

ซึ่งเรานำลักษณะนี้ไปแทรกที่หน้าไหนก็ได้ในเว็บเพจของเรา และเมื่อเราเพิ่มหรือลด node ของเราใน Site
Manager Navigation Bar ที่เราแทรกจะถูก Update อัตโนมัติทุกครั้งไปทั้งเว็บ ทำให้สะดวก ไม่ต้อง
แก้ลิงค์ทุกหน้า ลองกลับไปดูรูปที่ 4 จะเห็นว่า Option ให้เลือกชนิดของ Navigation Bar ซึ่งมี Text ,
Smart ClipArt  , Flash Button
รูปที่ 6 แสดงหน้าต่างของ Text
รูปที่ 7 แสดงหน้าต่างของ Smart Clipart
รูปที่ 8 แสดงหน้าต่างของ Flash Button ดังนี้

รูปที่ 6

รูปที่ 7

รูปที่ 8

รูปที่ 8 ซึ่งเป็นการใช้ปุ่มแบบ Flash Button นั้น หากเราคลิกเลือก Modify….จะแสดงหน้าต่างดังรูปที่ 9
ซึ่งมีให้เราแก้ไขข้อความชนิดของฟอนต์และขนาดได้ ก็เช่นเดียวกันสำหรับปุ่ม Smart ClipArt เมื่อคลิก
Modify….ก็จะมีหน้าต่างให้แก้ไขข้อความลักษณะเช่นเดียวกันกับ Flash Button แต่หัวข้อของ Smart
ClipArt button เป็นหัวเรื่องใหญ่ ขอให้ไปดูหัวข้อที่ว่าด้วยเรื่อง Smart ClipArt button อีกครั้งครับ

รูปที่ 9