ทำเมนูลิ้งค์ ในแบบฉบับของตัวเองกันดีกว่า

ทำเมนูลิ้งค์ ในแบบฉบับของตัวเองกันดีกว่า

อย่างที่ได้กล่าวไว้แล้วครับ สำหรับบทความนี้ ผมได้ไอเดียมาจาก พี่เจี๊ยบ ซึ่งเป็นสมาชิกเว็บเรา รุ่นแรกเลยครับ เป็นสมาชิกมาตั้งแต่ตอนเปิดเว็บนั่นเลย แล้วก็เป็นสมาชิก Freeweb รุ่นแรกด้วยครับ หุๆๆ แต่ด้วยเวลาที่เดินผ่านไป ทำให้พี่เค้าพัฒนาฝีมือได้อย่างรวดเร็ว ซึ่งขนาดผมยังแทบไม่เชื่อสายตาเลยครับ ผมจำได้ จากช่วงแรกๆที่พี่เค้ายังมาถามเรื่อง HTML อยู่เลย ตอนนี้ พี่เค้าพัฒนาจนมาเป็นที่นี่แล้วครับ http://www.sadood.com ลองแวะไปดูได้ ระยะเวลาที่ผ่านไปนั้นแค่ 3เดือนเองครับ ยังไงใครที่รู้สึกท้อ ก็สู้ๆต่อไปนะครับ 3 เดือนพี่เค้ายังทำได้เลย

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

เริ่มต้นด้วยการ หารูป Button ก่อนเลยครับ ก็รูปปุ่มนั้นล่ะครับ สำหรับผมผมจะใช้

และอันนี้ในการสร้างสรรค์ผลงานนะครับ

เอาให้ง่ายเลยเนี่ย เราก็ต้องใช้ โปะแกรมช่วยเขียน HTML ครับ เช่น Dreamweaver นั่นเอง ช่วยเราสร้างตารางและ เอารูปนี้ไปใส่เป็น Background ครับ แต่ถ้าใครที่ไม่มี ไม่เป็นไรครับ ผมจะเอาโค้ดมาให้ใช้ด้วย

เมนู
-=หน้าหลัก=-
-=กระดานข่าว=-
-=บทความ=-
-=ดาวน์โหลด=-

อันนี้คือตัวอย่างที่เราจะทำครับ ซึ่งโค้ดมันมีดังนี้

  1. echo "<center>";
  2. echo "<table width='120' border='0' cellspacing='0' cellpadding='0'>";
  3. echo :"<tr>";
  4. echo "<td height='22' background='".IMAGES."CRAYON_B.GIF'><div align='center'><strong>เมนู</strong></div></td& gt;</tr>";
  5. echo "<tr>";
  6. echo "<td height='22' background='".IMAGES."CRAYON_C.GIF'><div align='center'><a href='".BASEDIR."index.php'>-=หน้าหลัก=-</a></div>< /td></tr>";
  7. echo "<tr>";
  8. echo "<td height='22' background='".IMAGES."CRAYON_C.GIF'><div align='center'><a href='".BASEDIR."forum/index.php'>-=กระดานข่าว=-</a></div& gt;</td></tr>";
  9. echo "<tr>";
  10. echo "<td height='22' background='".IMAGES."CRAYON_C.GIF'><div align='center'><a href='".BASEDIR."articles.php'>-=บทความ=-</a></div>< /td></tr>";
  11. echo "<tr>";
  12. echo "<td height='22' background='".IMAGES."CRAYON_C.GIF'><div align='center'><a href='".BASEDIR."downloads.php'>-=ดาวน์โหลด=-</a></div& gt;</td></tr>";
  13. echo "</table>";
  14. echo "</center>";
  15. echo "<br>";

โค้ดนั้นสามารถอธิบายได้ดังนี้(เพื่อนำไปปรับแก้เอง)
1.<table width='120' เป็นคำสั่งสร้างตารางความกว้าง 120 อันนี้เพราะว่า รูปที่ผมใช้นั้นกว้าง 120ครับ เลยต้องปรับตารางให้กว้างเท่ากัน ไม่งั้นมีจะมีรูปที่สองโผล่ขึ้นมาแบบไม่เต็มครับ
2.border='0' cellspacing='0' cellpadding='0' เป็นคำสั่งบอกว่าตารางนี้ไม่มีเส้นขอบ ถ้าใครสั่งให้มันมีก็ต้องคำนวนค่าดีๆด้วยนะครับ
3.echo "<tr>";
echo "<td height='22' background='".IMAGES."CRAYON_C.GIF'><div align='center'><a href='".BASEDIR."index.php'>-=หน้าหลัก=-</a></div>< /td></tr>";
; สองบรรทัดนี้คือชุดเดียวกันนะครับ อย่างที่บทความอันเก่าของผมเรื่อง Theme ได้บอกเอาไว้ว่า มันจะต้องมีการสร้างตารางแนวดิ่งก่อน แล้วจึงสร้างตารางแนวนอน <tr><td>....</td></tr> ไงครับ อันนี้ถ้าสังเกตุจากคำสั่งผมให้มันสูง 22 ครับ เพราะว่า รูปผมสูง22เช่นกัน และ ".IMAGES." อันนี้บอกเราว่า ให้เรียกที่ root/images/ ครับ เช่น www.meewebfree.com/images/ มันมีค่าเท่ากับตัวแดงๆนั่นล่ะครับ ต่อมา CRAYON_C.GIF อันนี้คือชื่อรูปที่ผมเก็บไว้ในแฟ้ม images ครับ สรุปว่า background='".IMAGES."CRAYON_C.GIF' เมื่อเรียกเต็มๆมันจะได้ www.meewebfree.com/images/CRAYON_C.GIF โดยชื่อเว็บมันจะเปลี่ยนเอง ตามการตั้งค่าของแต่ละคนในส่วนผู้ควบคุมครับ ต่อมา <a href= คือคำสั่งสร้างลิ้งค์ครับ และอันนี้ ก็หมายถึงเว็บหลัก(root)ของเรา ".BASEDIR." อย่างที่นี่คือ www.meewebfree.com/ นั่นเอง ดังนั้น '".BASEDIR."index.php' เมื่อแสดงผลออกมามันจะได้ http://www.meewebfree.com/index.php ยังไงล่ะครับ -=หน้าหลัก=- อันนี้ก็ข้อความที่เราต้องการให้มันลิ้งค์ไป ลองดูตามรูปด้านบนก็ได้ครับ อ้อออ เกือบลืมไปอย่างนึง <div align='center'> อันนี้คือบอกว่า ให้จัดตัวหนังสืออยู่ตรงกลาง
4.</table> ก็คำสั่งปิดตารางครับ
5.<center>......</center> ส่วนที่ ...... ก็คือส่วนที่เราต้องการให้จัดกึ่งกลางไงครับ
6.<br> เว็นบรรทัดทีนึง มันจะได้ไม่ติดอันล่างเกินไป
จบแล้วครับ พอจะเข้าใจใหมครับ ก็คือ echo "<tr>";
echo "<td height='22' background='".IMAGES."CRAYON_C.GIF'><div align='center'><a href='".BASEDIR."index.php'>-=หน้าหลัก=-</a></div>< /td></tr>";
อันนี้ 1ชุด เราจะได้ตารางมา1บรรทัด

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

แค่นี้เองครับ ง่ายๆ สบายๆ ไม่ต้องเครียด แต่บทความนี้มีเรื่องนึงที่ท่านต้องระวังคือ มันเป็น ภาษา php ที่ผสม html ครับ จะเห็นได้ว่า echo "........"; มันคือคำสั่งแสดงผลออกมาครับ เป็นคำสั่งในภาษา php ซึ่ง ...... นั้น จะต้องไม่มี " อยู่ภายในนะครับ ยกเว้นการเรียกตัวแปรมาใช้ต้องใส่ดังนี้ ".ชื่อตัวแปร." จึงจะใช้ได้ ดังนั้น Tag HTML ภายใน ผมจึงได้ทำการเปลี่ยน " เป็น ' ทั้งหมดยังไงล่ะครับ

Create: Modify : 2006-11-19 07:00:00 Read : 8896 URL :