DreamChaser's Factory

การสร้างไดนามิกเมนูสำหรับตกแต่งบล็อก : ตอน 1 การสร้างเมนู
ระดับความยุ่งยาก : มาชเมลโล่ 10 ดวง
เนื่องจากมันยาวเทให้สิบดวงเลย =w= (มาชเมลโล่บ้านแกเรียกเป็นดวงเรอะ)
แต่ถ้าใครคุ้นเคยกับการทำไดนามิกเมนูอยู่แล้ว ลดราคาให้เหลือ 5 ดวง

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


อุปกรณ์ที่ต้องเตรียม
1. อาวุธคู่กายนักตกแต่งโค้ดระดับเบสิก (Notepad นั่นแหละ จะใช้คำให้เข้าใจยากไปทำไมฟะ)
2. โฮสติ้งที่ไหนสักแห่งที่อนุญาตให้อัพโหลดไฟล์นามสกุล .js ได้
3. โปรแกรมสร้างเมนู DHTML ในตัวอย่างนี้ขอแนะนำ --> SothinkDHTMLMENU <-- จิ้มดาวน์โหลดได้จากลิ้งค์นี่เลย เวอร์ชั่น 4.2 เก่าหน่อยนะ อย่าลืมติดตั้ง patch ด้วยไม่งั้นอาจมีปัญหาเซฟไม่ได้หรือ time out ก่อนทำเสร็จ



วิธีการสร้างไดนามิกเมนู

- การสร้างเมนูหลักและเมนูย่อย



ดูที่แถบเครื่องมือ Menu จะเห็นตัวสี่เหลี่ยมผืนผ้าสีฟ้าอยู่สองอัน
อันใหญ่คือคำสั่ง Insert Item ซึ่งเอาไว้เพิ่มหัวข้อที่จะทำเมนูนั่นเอง
ส่วนอันเล็กคือคำสั่ง Insert Separator คือเพิ่มเส้นที่เอาไว้แยกหัวข้อเมนูแต่ละเมนูออกจากกันเวลาต้องการเน้นแต่ละเมนูชัดๆ

ต่ำลงมาอีกนิดจะเห็นเมนูแต่ละเมนูที่เพิ่มเข้ามา
คลิ้กขวาที่ < Top-Level Menu > จะมีคำสั่ง Aspend Sub Menu Item ที่ใช้เพิ่มเมนูใหม่

พอลองทำดูก็จะได้เมนูหน้าตาแบบนี้...



มันจะออกมาเป็นเมนูแนวตั้ง แต่เปลี่ยนเป็นแนวนอนได้ด้วยการเปลี่ยน Display ใน popup ที่เด้งขึ้นจาก vertically เป็น horizontally

ในหน้าต่าง popup จะมีแท็บอยู่สามส่วน แต่ล่ะส่วนทำอะไรได้บ้างมาดูกันต่อ...

แท็บ General

Display - ใช้สลับแนวตั้งแนวนอนของเมนู vertically คือแนวตั้ง horizontally คือแนวนอนตามที่บอกไปแล้วข้างบน
Spacing - ใช้กำหนดระยะห่างกับเมนูใกล้ๆ ยิ่งตัวเลขสูงยิ่งห่างกันมาก
Padding - ใช้กำหนดระยะห่างจากขอบ ยิ่งตัวเลขสูงยิ่งห่างกันมาก
BG color - สีพื้นหลังของกรอบเมนู (ถ้าคลิ้กถูกหน้า Transparent จะเป็นพื้นใส)
BG image - สีพื้นหลังแบบรูปภาพ
Border -  สีกรอบ คลิ้กที่ตำแหน่งแต่ละด้านเพื่อเปลี่ยนสีแยกกัน แต่ถ้าคลิ้กเครื่องหมายถูกหน้า Synchronize all ไว้ กรอบทุกด้านจะกลายเป็นสีเดียวกันหมด

แท็บ Advance
อันนี้จะใช้ได้เฉพาะเวลาที่มีเมนูย่อยเพิ่มเข้าไปในเมนูนั้นแล้ว ไว้ค่อยพูดถึงทีหลังนะ

แท็บ Effects

Drop Shadow - ใช้สำหรับสร้างเงา จะมีเงาให้เลือกสองแบบคือ Simple(เงาแบบชัด) กับ Complex(เงาแบบเบลอ) ตัวเลขทางขวามือคือขนาของเงา ส่วนสีเงาก็เลือกจากทางขวาได้เลย
Effect for showing - เอฟเฟ็กต์ตอนแสดงเมนูขึ้นมา
Effect for hiding - เอฟเฟ็กต์ตอนที่เมนูจะหายไป
Effect Speed - ความเร็วของเอฟเฟ็กต์ เลขยิ่งสูงเอฟเฟ็กต์ยิ่งจบเร็ว

...
ต่อมามาดูวิธีการสร้างเมนูย่อยกัน

คลิ้กขวาที่เมนูหลักที่มีอยู่แล้ว จะมีคำสั่งพวกนี้อยู่



cut, copy, delete ทุกท่านคงรู้ดีอยู่แล้ว ไม่อธิบายล่ะนะ
Append Sub Menu Item - เพิ่มเมนูย่อย
Insert Item Before - เพิ่มเมนูก่อนหน้าเมนูที่คลิ้กไว้
Insert Item After - เพิ่มเมนู่หลังจากเมนูที่คลิ้กไว้
Insert Separator Before - เพิ่มเส้นคั่นก่อนเมนูที่คลิ้กไว้
Insert Separator After - เพิ่มเส้นคั่นหลังจากเมนูที่คลิ้กไว้
Move Up - เลื่อนเมนูขึ้น
Move Down - เลื่อนเมนูลง

จะทำเมนูย่อยลงไปกี่ชั้นก็ได้ ใช้วิธีเดียวกันนั่นแหละ คลิ้กขวาที่หัวข้อนำก่อน แล้วก็ Append แค่นี้เอง...
ลองดูตัวอย่างที่ทำออกมาก่อนนะ...

ตัวอย่างนี้เป็นเมนูแบบสามชั้น...


เอาล่ะ ได้เมนูย่อยแล้ว เรามาดู
แท็บ Advance ที่ตอนแรกไม่ได้อธิบายกัน

แท็บ Advance

Popup direction - คือตำแหน่งที่จะให้เมนูย่อยปรากฏของเมนูหลัก มีให้เลือกคือ Auto(ปล่อยให้มันคิดเองว่าควรจะอยู่ตรงไหน แต่ปกติจะขึ้นที่ด้านล่างชิดซ้าย), Left(ด้านซ้าย), Right(ด้านขวา), Up(ด้านบน), Down(ด้านล่าง)
The Corner’s x coordinate - เลื่อนระยะตามแกนแนวนอน ค่าปกติจะเลื่อนไปทางขวา ค่าติดลบจะเลื่อนไปทางซ้าย
The Corner’s x coordinate - เหมือนข้างบน แต่อันนี้ตามแกนแนวตั้ง


…
ต่อไปก็จัดการกับตัวข้อความและลิ้งค์ในเมนูได้แล้ว

ดูที่กล่องเครื่องมือ Menu Item มีแท็บอยู่ 4 แท็บ ดูกันไปทีละแท็บเลยนะ...
แท็บ General

ตรงที่ให้เลือก Text, HTML, Image ให้เลือก Text แล้วพิมพ์ข้อความที่ต้องการลงไป
Algin : ตำแหน่งของตัวอักษรตามแกนแนวนอน เลือก Left(ซ้าย), Center(กลาง), Right(ขวา) เลือกอย่างใดอย่างหนึ่ง
Valign : ตำแหน่งของตัวอักษรตามแกนแนวตั้ง เลือก Top(บน), Middle(กลาง), Bottom(ล่าง) เลือกอย่างใดอย่างหนึ่ง
Link : ใส่ url ที่จะให้เมนูนั้นชี้ไป
Target : _parent สถานเดียว ถ้าจะทำเป็นเมนูสำหรับ Exteen (แต่ถ้าจะชี้ไปที่อื่น ใช้ _blank)

ตอนพิมพ์ Text ที่เป็นหัวข้อเมนูเวลาที่ publish แล้วจะมีปัญหากับภาษาไทย แต่มีวิธีแก้ไข
ตอนนี้ให้มาร์คไว้ด้วยภาษาอังกฤษไว้ด้วยเพื่อตอนแก้จะได้ไม่หลง... อย่างจะตั้ง -> ตกแต่งเอ็กซ์ทีน ก็พิมพ์เป็น Exteen Decorate ตกแต่งเอ็กซ์ทีน ประมาณนี้อ่ะ~ (ป.ล.ถ้ากดเว้นวรรค หรือ enter เปลี่ยนบรรทัดตัวเมนูก็จะเปลี่ยนตามเหมือนกันนะ)

แท็บ Mouse out กับ Mouse over ขอรวมยอดกันเลยนะ
หน้าตาเหมือนกันเปี๊ยบ ต่างกันแค่ Mouse out คือตอนที่ไม่ได้ชี้เม้าส์ที่เมน ส่วน Mouse over คือตอนชี้อยู่

แท็บ Mouse out + Mouse over
 
Font : รูปแบบตัวอักษร
Size : ขนาดตัวอักษร เลือกเป็น pt หรือ px แล้วแต่ชอบ
ทางขวาก็สีอักษร, ตัวหนา, ตัวเอียง, ขีดเส้นใต้, ขีดฆ่า, ขีดเหนือหัว ตามลำดับ
BG color : สีพื้นหลัง (Transparent = พื้นใส)
BG image : รูปภาพพื้นหลัง
Border : กรอบเมนู (เหมือนที่เคยอธิบายไปแล้วนั่นแหละ)
Width : ขนาดกรอบเมนู
Style : รูปแบบของกรอบ
Icon : ภาพไอค่อนทางซ้ายมือของเมนู (W:ความกว้าง, H:ความสูง Border:ขนาดกรอบ)
Arrow : ภาพไอค่อนทางขวามือของเมนู (W:ความกว้าง, H:ความสูง Border:ขนาดกรอบ)

แท็บ Style
รูปแบบเมนูแบบสำเร็จที่เค้าทำไว้ให้เลือกอยู่แล้ว
*โครม* (รองเท้าเขวี้ยงมา ~ มีแบบสำเร็จแล้วทำไมไม่บอกแต่แรกฟะ ~ me:ก็เวลาอยากจะปรับให้ได้อย่างใจก็จะได้ทำเองได้ไง รู้ไว้ใช่ว่าใสบ่าแบกหามนะตัวเอง)

สไตล์หลากหลายให้เลือก

หรือจะคลิ้กที่เมนูของโปรแกรม
File -> New -> From Template…
ก็จะมีแบบสำเร็จที่ทำเป็นชุดมาให้แล้ว แก้ไขนิดหน่อยก็เอามาใช้ได้



ขั้นตอนสร้างเมนูสอนไปหมดม้วนแล้ว
ต่อไปคือขั้นตอน Public เพื่อสร้างไฟล์สำหรับใช้...

ก่อนอื่นสร้างโฟลเดอร์สำหรับเก็บไฟล์ขึ้นมาก่อนเพื่อความสะดวกจะได้ไม่ปนกับไฟล์อื่น
แล้วเลือกเมนู...

File -> Public…
เลือก View or copy  resource files a specifies directory คลิ้ก Next -> Next -> เลือกโฟลเดอร์แล้วกด Next -> คลิ้ก Finish
เสร็จแล้วจะไฟล์ภาพทั้งหมดที่ต้องใช้ กับไฟล์ stm31.js มา

กลับมาที่โปรแกรม SothinkDHTMLMENU

File -> Public…
เลือก Create a Javascript(*.js) include file -> คลิ้ก Next
เลือกโฟลเดอร์ ตั้งชื่อไฟล์ที่ต้องการใช้ แล้วกด Save -> คลิ้ก Next


คราวนี้โปรแกรมเทพ(?) Notepad ออกโรงได้แล้วจ้า
เปิดขึ้นมาเลย..

แล้วก็
File -> Public… (ที่โปรแกรม SothinkDHTML นะ)
เลือก View or copy code -> คลิ้ก Next

คลิ้กปุ่ม Copy All แล้วเอาไปวางที่ใน Notepad
วางเสร็จแล้วให้คร่อมด้วย <head>…</head> ในโค้ดด้วย
-> คลิ้ก Next ที่หน้า Sothink DHTML จะเจอโค้ดตัวที่สอง ให้ Copy All ใส่ระหว่าง <body>…</body>
 

** เซฟไฟล์เป็นชื่ออะไรก็ได้ตามต้องการ แต่ต้องเซฟเป็นนามสกุล .html นะ **


ลองใช้บราวเซอร์เปิดไฟล์ html ที่เพิ่งเซฟไปขึ้นมา
จะพบว่าตัวอักษรภาษาไทยมันเป็นตัวกระยึกกระหยึย


ดูที่ไฟล์ html ใน Notepad นะ
ให้ใส่โค้ดที่ทำไฮไลท์ข้างล่างลงไปในส่วนของ <head>…</head>

<meta http-equiv="Content-Type" content="text/html; charset=tis-620">

พอใส่เสร็จมันก็ยังยึกหยึยอยู่ดีแหละ~ (อ้าว ~ แว้ก อย่าเพิ่งปารองเท้ามา~)
ให้ดูใน Notepad ตัวอักษรภาษาไทยที่เราพิมพ์ไว้จะกลายเป็นภาษาต่างดาว
ซึ่งถ้าไม่มาร์คภาษาอังกฤษไว้คงหาไม่เจอแน่ๆ ว่าอันไหนเป็นอะไร เพราะไม่รู้จะพิมพ์ค้นหาจาก search อีท่าไหน
ให้ใช้คำสั่ง Edit -> Find… แล้วใช้คำค้นหาจากภาษาอังกฤษที่มาร์คไว้




เห็นแล้วใช่มั้ย~
ภาษาไทยที่กลายเป็นภาษาต่างดาวนั่นน่ะ~

ทีนี้ก็แก้ให้ถูกต้องทุกอันซะ ถ้าจำไม่ได้ว่าเคยตั้งภาษาไทยไว้ว่าอะไรก็ลองเทียบกับในหน้าของ SothinkDHTMLMENU ดูนะ
เสร็จแล้วบราวเซอร์ก็จะแสดงผลภาษาไทยได้อย่างสมบูรณ์...



อัพโหลดไฟล์ทั้งหมดได้แล้วจ้า
ต้องให้อยู่ในโฟลเดอร์เดียวกันทั้งหมดนะ

…
ส่วนของการสร้างไดนามิกเมนูก็ต้องขอฆ่าตัดตอน เอ๊ย ตัดจบเพียงเท่านี้ก่อน เหนื่อย พิมพ์ไม่ไหวแล้ว~
แล้วตอน 2 จะมาสอนวิธีเอาใส่บล็อก Exteen ให้นะ~

See ya~