ประเภท : บทความเทคนิคการเขียนโฮมเพจ
เขียนโดย : ธีรพงษ์ สุทธิวราภิรักษ์
ดาว์นโหลดไปอ่าน (113 k.) : musicroom.zip
ตีพิมพ์ลงนิตยสาร "Internet Magazine" ฉบับเดือนกันยายน 2540
ถ้าคำตอบคือทุกคนชอบฟังเพลง
แล้วทำไมเราจะไม่ทำห้องฟังเพลงไว้บนโฮมเพจละ
บทความนี้เสนอรูปแบบห้องฟังเพลงแบบหนึ่ง
ที่คุณก็ทำเองได้ไม่ยากจ้ะ.."
- เกริ่นกันหน่อย
ถ้าโฮมเพจคือห้องรับแขกของคุณบนไซเบอร์สเปซ แน่นอนว่าคุณต้องพิถีพิถันกับการจัดวาง องค์ประกอบต่างๆใน"ห้องรับแขก"อย่างดี อย่างน้อยต้องให้เกิดความประทับใจแรกเห็น (first impression)กับแขกผู้ตั้งใจ/พลัดหลงเข้ามาเยี่ยม และหวังว่าแขกของเราจะกลับมาเยี่ยม อีกในโอกาสหน้า ความประทับใจแรกเห็นโฮมเพจไม่ต่างกับความพึงใจในเพศตรงข้ามเลยครับ เพราะคุณต้องมี"อะไร"บางอย่างที่ถูกใจผู้พบเห็น จึงจะเกิดการจดจำและปรารถนาจะแวะเวียน มาหากันอีก ประเภทที่ขอให้เป็นเพศตรงข้ามเถอะเป็นชอบหมดนะมีไม่มากหรอกครับไอ้เจ้า"อะไร"บางอย่างนี่แหละครับตัวดี หากเป็นคนก็แต่งเนื้อแต่งตัว แต่งหน้าทาปาก ฉีดเสปรย์ ใส่น้ำหอมกันอะไรทำนองนี้ บนโฮมเพจของเราก็ทำสวยกันได้ไม่ต่างกัน แต่คนเราจะหลงไหลได้ ปลื้มกับภาพภายนอกกันได้ไม่นาน ถ้าเนื้อแท้ไม่มี"อะไร"น่าสนใจจริงๆ แวะมาสักครั้งสองครั้งก็ เบื่อกันแล้วละครับ ดังนั้นเมื่อคิดจะทำโฮมเพจขึ้นมาจึงต้องตกลงใจให้ได้ว่าแก่นแท้ของโฮมเพจ ที่กำลังทำขึ้นมานี้ทำขึ้นมาเพื่ออะไร ใครเป็นกลุ่มเป้าหมาย และมีอะไรเป็นจุดสนใจที่สำคัญ
โฮมเพจบางแห่งทำขึ้นมาเพื่อให้ข้อมูลทางวิชาการ แม้รูปแบบจะไม่สะสวยอะไรนัก แต่เนื้อหาที่ บรรจุไว้เป็นแม่เหล็กที่ดึงดูดผู้คน ใครต้องการข้อมูลก็จะแวะเวียนไปตรวจทาน/อัพเดทข้อมูลกัน ตลอดเวลา นั่นเพราะโฮมเพจนี้มีความชัดเจนในตัวเองว่าฉันเกิดมาเป็นโปรแฟสเซอร์นะ อยากได้ เนื้อหามาที่นี่ น้ำท่วมทุ่งแบบผมไม่มีให้เห็นนะจ๊ะ อะไรทำนองนี้
- จุดแวะคลายเครียดบนเว็บ
แต่ถ้าคุณตั้งใจจะทำโฮมเพจเพื่อ
เป็นจุดแวะพักสบายๆ เพื่อคลาย
ความเครียดแก่ผู้คนที่ท่องทะเล
ข้อมูลผ่านมา ผมมีวิธีสร้างห้อง
ฟังเพลงบนโฮมเพจมาฝากครับ
ผู้คนส่วนใหญ่เค้าชอบฟังเพลง
ร้องเพลงกันทั้งนั้น และไฟล์เพลง
midi รวมทั้งเนื้อเพลงก็หาได้ไม่
ยากบนอินเตอร์เน็ท เราสามารถ
รวบรวมเพลงที่ถูกใจ แล้วทำเป็น
ห้องฟังเพลง แถมมีเนื้อเพลงให้
ร้องคลอไปด้วย คราวนี้ไม่ใครก็ใครต้องเผลอมาหลงเสน่ห์โฮมเพจ ของคุณบ้างละน่า ก็เอาใจ
กันขนาดนี้นี่นา (ภาพตัวอย่าง ห้องฟังเพลงบนศาลานกน้อย)
- โครงสร้างของห้องฟังเพลง
แรกสุดเราต้องกำหนดภาพร่างในใจก่อนว่าจะให้เว็บเพจที่จะถูกสมมุติว่าเป็นห้องฟังนี้ มีหน้าตา อย่างไร มีองค์ประกอบอะไรบ้าง สิ่งที่จำเป็นสำหรับห้องฟังเพลงแน่นอนว่าจะต้องมีส่วนควบคุม การเล่นเพลง (sound control) ส่วนแสดงเนื้อเพลง และเมนูเพลง เราอยากให้แขกของเรา เพียงคลิกชื่อเพลง เพลงที่ถูกคลิกจะต้องเล่นให้ฟัง แถมเนื้อเพลงจะต้องถูกแสดงให้ได้ร้องตาม ไปด้วย ถ้าภาพร่างในใจเป็นเช่นนี้ เราต้องกำหนดให้เว็บเพจนี้ แสดงองค์ประกอบต่างๆบนเฟรม ย่อยจำนวน 3 เฟรม ด้วยการสร้างเอกสาร HTML 4 ไฟล์ดังนี้- music_room.html เป็นไฟล์หลักที่จะถูกเปิดขึ้นเป็นไฟล์แรก มีหน้าที่แบ่งหน้าจอของ browser ออกเป็นเฟรมย่อย 3 เฟรม
- lyrics.html เป็นไฟล์บรรจุเนื้อเพลงทั้งหมด
- song01.html เป็นไฟล์บรรจุ midi files ที่จะเล่นเป็นเพลงแรก
- menu.html เป็นไฟล์บรรจุรายชื่อเพลงสำหรับเลือกฟัง
- แบ่งเฟรมกันก่อน
เว็บบร๊าวเซอร์ที่นิยมใช้ในปัจจุบันล้วนสนับสนุนการแสดงผลด้วยเฟรมทั้งสิ้น และแท็กคำสั่งที่ใช้ ในการสร้างเฟรม <FRAMESET> จะต้องอยู่บนไฟล์ๆแรกสุดที่ถูกโหลดจากผู้ใช้ ซึ่งในที่นี้เรา จะตั้งชื่อไฟล์ว่า music_room.html ขั้นแรกแบ่งเว็บเพจเป็นสองเฟรมตามแนวตั้งก่อนโดยให้ เฟรมซ้ายขนาด 70%ของพื้นที่สำหรับแสดงเนื้อเพลง สำหรับเฟรมขวาอีก30%ของพื้นที่เราจะ แบ่งเป็นอีกสองเฟรมย่อยตามแนวนอน โดยเฟรมบนขนาด 20% ใช้สำหรับ sound control และเฟรมล่างขนาด 80% ใช้สำหรับแสดงเมนูเพลง โค้ดเริ่มแรกจะได้ดังนี้
- บรรทัดที่ 4, 10 : <FRAMESET COLS="70%,30%">
</FRAMESET>
เป็นแท็กแบ่งเฟรมแนวตั้ง แท็กคำสั่งที่อยู่ระหว่างสองบรรทัดนี้(บรรทัดที่ 5 ถึง 9) คือรายละเอียดของคู่แท็กนี้ทั้งสิ้นCOLS="70%,*" หมายความว่าให้แบ่งเฟรมตามแนวตั้งจำนวนสองเฟรม เฟรมแรกด้านซ้ายขนาด 70%ของความกว้างทั้งหมด และที่เหลือคือเฟรมที่สอง คุณอาจระบุขนาดเป็นจำนวนพิกเซล(pixel)ก็ได้ หรือจะใช้เครื่องหมายดอกจันทร์(*) เพื่อระบุแทนขนาดที่เหลือก็ได้ครับ (เช่น *,240)
โปรดสังเกตว่าจำนวนของเฟรมที่แบ่งจะเท่ากับจำนวนเครื่องหมายจุลภาค(,)+1 ดังนั้นหากต้องการแบ่งเฟรมมากกว่านี้คุณเพียงระบุขนาดของเฟรมและคั่นด้วยเครื่อง หมายจุลภาค (เช่น "20%,*,50%" = 3 เฟรม)
-
บรรทัดที่ 5 : <FRAME NAME="LYRICS" SRC="lyrics.html"> บรรทัดนี้เป็น
รายละเอียดของเฟรมแรกด้านซ้าย
NAME="LYRICS" หมายความว่าขอตั้งชื่อเล่นให้เฟรมนี้ว่า LYRICS (ปกติเฟรมนี้จะถูก
อ้างถึงในชื่อ frames[0] โดย browser จะเริ่มนับจากเลข 0 และไล่นับจากเฟรมซ้ายบน
สุดเป็นเฟรมแรก และเฟรมขวาล่างสุดเป็นเฟรมสุดท้าย ดูภาพประกอบที่ 1 เพื่อป้องกัน
ความสับสนเราควรตั้งชื่อเรียกเองจะได้ไม่งงครับ) ชื่อที่ระบุนี้ถือสาเรื่องตัวเล็กตัวใหญ่
ด้วยนะครับ เวลาอ้างถึงชื่อนี้ในภายหลังจะต้องระวังตรงนี้ด้วย
SRC="lyrics.html" หมายความว่าให้แสดงเอกสาร HTML ชื่อ lyrics.html บนเฟรมนี้
หน้าตาของเฟรมที่แบ่งได้ และชื่อของแต่ละเฟรม -
บรรทัดที่ 6, 9 : <FRAMESET ROWS="20%,80%">
</FRAMESET>
เป็นแท็กแบ่งเฟรมแนวนอน ตรงจุดนี้ต้องทำความเข้าใจสักหน่อย เนื่องจากคู่แท็กนี้อยู่ ระหว่างคู่แท็ก FRAMESET บนบรรทัดที่ 4 กับ 10 และอยู่ถัดจากเฟรม "LYRICS" ในบรรทัดที่ 5 ซึ่งถูกระบุเป็นเฟรมด้านซ้าย ดังนั้นแท็ก FRAMESET ในบรรทัดที่ 6 นี้จึงเป็นคำสั่งแบ่งเฟรมด้านขวาที่เกิดจากแท็ก FRAMESET คู่แรก ROWS="20%,80%" หมายความว่าให้แบ่งเฟรมตามแนวนอนจำนวนสองเฟรมๆแรก ด้านบนขนาด 20%ของความสูงทั้งหมด และเฟรมที่สองด้านล่างขนาด 80% -
บรรทัดที่ 7 : <FRAME NAME="CONTROL" SRC="song01.html">
เป็นรายละเอียดของเฟรมขวาบน ตั้งชื่อว่า CONTROL และใช้แสดงไฟล์ชื่อ song01.html - บรรทัดที่ 8 : <FRAME NAME="MENU" SRC="menu.html">
เป็นรายละเอียดของเฟรมขวาล่าง ตั้งชื่อว่า MENU และใช้แสดงไฟล์ชื่อ menu.htmlหน้าตาของเฟรมที่แบ่งๆได้ และชื่อของแต่ละเฟรมจะเป็นตามภาพประกอบข้างต้น
- บรรทัดที่ 4, 10 : <FRAMESET COLS="70%,30%">
</FRAMESET>
- ไม่ชอบเส้นกรอบเฟรม
บางทีเส้นกรอบเฟรมที่ดูแข็งทื่อ ก็ทำให้เว็บเพจพลอยแข็งกระด้างตามไปด้วย หากไม่ต้องการ เส้นกรอบเฟรม ก็ต้องปรับปรุงโค้ดกันหน่อย โค้ดต่อไปนี้ปรับปรุงเรื่องการแสดงเส้นกรอบและ แถบเลื่อนเฟรม(scrolling bar) ตามตัวอย่างภาพประกอบ"ห้องดนตรี" ของศาลานกน้อยครับ
ไฟล์ music_room.html ที่ปรับปรุงแล้ว - ไฟล์แสดงเนื้อเพลง
จากไฟล์แบ่งเฟรมข้างต้นเราระบุชื่อไฟล์ที่แสดงบนเฟรม LYRICS ว่า lyrics.html ซึ่งจะเป็น ไฟล์แสดงเนื้อเพลงทั้งหมดที่ตั้งใจจะให้บริการในห้องฟังเพลงนี้ ให้เราสร้างไฟล์และป้อนเนื้อ เพลงไล่ไปที่ละเพลงโดยทำเครื่องหมายก่อนหน้าบรรทัดชื่อเพลงทุกเพลงด้วยแท็ก
<A NAME="xx"></A> โดยที่ "xx"เป็นชื่อที่เราตั้งขึ้นเอง ขอสมมุติตั้งเป็นหมายเลข 01,02 เรียงกันไป ลองดูโค้ดตัวอย่างครับ
- จากโค้ดตัวอย่างจะเห็นว่าเรา"ปักธง"<A NAME="xx"></A>ไว้ที่บรรทัดที่ 11 และ 17 ซึ่งเป็นบรรทัดก่อนหน้าจะเริ่มเพลงใหม่ จุดประสงค์เพื่อเป็นตัวบอกบร๊าวเซอร์ให้แสดง เนื้อเพลงบนจอให้ตรงกับการคลิกเลือกเพลงของผู้ใช้บนเฟรมเมนูที่จะกล่าวถึง ในช่วงต่อไป
- เรากำหนดให้เนื้อเพลงทั้งหมดอยู่ภายในกรอบตารางที่มีขนาดความกว้าง=80%ของเฟรม (บรรทัดที่ 9, 22) และกำหนดให้ตารางอยู่ตรงกลางเฟรม(บรรทัดที่ 8, 23)ด้วย ทำเช่นนี้ เพื่อบังคับให้เนื้อเพลงอยู่กลางเฟรมแต่ยังคงชิดซ้ายครับ คุณอาจใช้วิธีอื่นก็ได้
- มีเรื่องที่อยากพูดถึงเกี่ยวกับการแสดงภาษาไทยบนโฮมเพจสักเล็กน้อย อยากจะเชิญชวน ให้ผู้เขียนโฮมเพจภาษาไทยทุกท่าน สร้างเอกสารแบบระบุฟ้อนต์(document-specified fonts)ภาษาไทยลงบนเอกสาร HTML ที่สร้างขึ้นมาทุกครั้งครับ เพื่อให้ความสะดวก กับผู้เข้าเยี่ยมชมไม่ต้องคอยสับเปลี่ยนฟ้อนต์ของบร็าวเซอร์ทุกครั้งที่เข้าโฮมเพจภาษาไทย ของคุณ เมื่อคุณระบุฟ้อนต์ไทยไว้บนเอกสารแล้ว เว็บบร๊าวเซอร์จะแสดงภาษาไทยให้เลย ตามตัวอย่างข้างต้น บรรทัดที่ 6, 10 บนเอกสารถูกระบุเป็น BrowalliaUPC ไว้เลยครับ
- ไฟล์สำหรับเล่นเพลง
ไฟล์ชื่อ song01.html ถูกระบุไว้บนไฟล์แบ่งเฟรม(music_room.html)ว่าจะถูกแสดงบนเฟรมชื่อ CONTROL ซึ่งอยู่มุมบนด้านขวาของเว็บเพจ ไฟล์นี้จะเป็นไฟล์สำหรับเล่นเพลงแรกเมื่อเว็บเพจ นี้ถูกโหลดขึ้นมา และเราต้องสร้างไฟล์แบบนี้เพิ่มขึ้นตามจำนวนของเพลงที่ตั้งใจจะบริการบนเพจ เรามาดูโค้ดกันครับ
การแสดงผล แท๊ก embed และส่วนขยาย 
<EMBED SRC="ไฟล์เพลง.mid" WIDTH=145 HEIGHT=36> 
<EMBED SRC="ไฟล์เพลง.mid" WIDTH=145 HEIGHT=60> 
<EMBED SRC="ไฟล์เพลง.mid" CONTROLS=smallconsole WIDTH=145 HEIGHT=15> 
<EMBED SRC="ไฟล์เพลง.mid" CONTROLS=smallconsole WIDTH=50 HEIGHT=15> 1) หากต้องการซ่อน sound console ไม่ให้แสดงตัวให้ใช้ส่วนขยาย hidden=true แทน
2) ถ้าต้องการให้เล่นเพลงทันทีที่โหลดเสร็จใช้ autostart=true
3) หากต้องการให้เล่นวน ไปเรื่อยๆให้เพิ่ม loop=trueโค้ดทั้งหมดข้างต้นเป็นคำสั่งเล่นเพลงของเน็ทสเคปบร๊าวเซอร์ หากผู้เข้าเยี่ยมโฮมเพจของเราใช้ Internet explorer จะฟังเพลงของเราไม่ได้ เนื่องจาก IE <BGSOUND> ในการเล่นเพลง ดังนั้นเราจึงต้องตรวจสอบก่อนว่า แขกของเราใช้บร๊าวเซอร์ตัวไหน จะได้ใช้แท็กคำสั่งที่เหมาะสม วิธีการตรวจสอบเราใช้ JavaScript คร่อมแท็กไว้ ดังนั้นไฟล์ที่สมบูรณ์จะเป็นดังนี้
ไฟล์ song01.html ที่ปรับปรุงแล้วมีความแตกต่างในการแสดงผลของทั้งสองบร๊าวเซอร์ยอดนิยมนี้เล็กน้อย คือจะไม่มีการแสดง sound console สำหรับผู้เข้าเยี่ยมห้องฟังเพลงของเราที่ใช้ Internet explorer
ส่วน"ไฟล์เพลง.html"อื่นๆที่จะเปิดตามเมนูเพลงบนโฮมเพจของเรา ก็ใช้รูปแบบไฟล์เดียวกันนี้ เปลี่ยนเพียงชื่อเพลง และชื่อไฟล์เพลง(*.mid)เท่านั้น ตามตัวอย่างนี้จะตั้งชื่อเป็น song01.html, song02.html, ไปพลางๆก่อนครับ
- เฟรมเมนูเพลง
เฟรมนี้บรรจุไฟล์ menu.html ซึ่งจะแสดงรายการเพลงทั้งหมดที่ให้บริการในห้องฟังเพลง หน้าที่ของไฟล์นี้จะคอยสับเปลี่ยนเนื้อเพลงในเฟรม LYRICS และเล่นเพลงในเฟรม CONTROL ให้สัมพันธ์กับการคลิกชื่อเพลงบนเมนู มีข้อจำกัดของ HTML ในการเชื่อมโยงไฟล์คือ เราจะใช้ แท็ก <A HREF= .>เพื่อสับเปลี่ยนไฟล์บนเฟรมได้เพียงแค่เฟรมเดียว ทางออกของเราจึงต้อง ใช้การดักจับเหตุการณ์ตอนคลิกเมาส์มาเขียนเป็น Javascript เพื่อช่วยในการสับเปลี่ยนไฟล์ บนเฟรมที่สอง เรามาดูโค้ดกันครับ
ภาษา Javascript มีความสามารถดักจับเหตุการณ์ (event handler) ซึ่งเราจะนำมาใช้ ประโยชน์กับไฟล์นี้ในส่วนของการคลิกเมาส์ โดยเริ่มจากการเขียน function m_update() ขึ้นมาก่อนในส่วนหัว<HEAD>ของเอกสาร(บรรทัดที่ 3 ถึง 9)คอยรับค่า(URL)จากอีเวนท์ Onclick เพื่อนำมาสับเปลี่ยนไฟล์บนเฟรม LYRICS ตามต้องการ
เราใช้คู่แท็ก<MENU>(บรรทัดที่ 13, 18)เพื่อให้ชื่อเพลงเหลื่อมไปทางขวาเล็กน้อยเพื่อความ สวยงาม และใช้แท็ก<LI>เพื่อแยกชื่อเพลงแต่ละรายการ
เรามาดูที่บรรทัดที่ 14 เมื่อคลิกที่ชื่อเพลง สิ่งที่จะเกิดขึ้นคือ
- แท็ก<A HREF >จะสับเปลี่ยนไฟล์ song01.html ไปที่เป้าหมาย(TARGET)คือเฟรม CONTROL
- มีการเรียกใช้ฟังก์ชั่น m_update('lyrics.html#01')
- มีการส่งค่า(URL)ในวงเล็บไปให้ฟังชั่น m_update ด้วย
- ฟังก์ชั่น m_update รับ url มาแทนค่าเป็น parent.LYRICS.location='lyrics.html#01' ซึ่งบรรทัดนี้เป็น คำสั่งแสดงเนื้อเพลงๆ แรกบนเฟรม LYRICS ตามที่เราต้องการ
บรรทัดที่ 15 และบรรทัดชื่อเพลงที่เหลือทั้งหมด จะเหมือนกับบรรทัดที่ 14 เพียงเปลี่ยนชื่อเพลง และจุดเชื่อมต่อให้สัมพันธ์กัน
- ห้องฟังเพลงแห่งใหม่ของคุณ
ในที่สุดก็เสร็จเรียบร้อย ลองดูผลงานของคุณบนเว็บบร๊าวเซอร์ทั้งสองตัว (Netscape และ Internet Explorer) เพื่อตรวจหาที่ผิด และปรับแต่งให้สวยงามตามใจคุณ หากอยากเยี่ยม ชมชิ้นงานตัวอย่างของผม ขอเชิญได้ที่ section "ดนตรี" ผมมีเพลงเก่าของ The Beatles และ Elvis Presley คอยให้บริการอยู่ครับอย่าลืมว่าทั้งหมดที่ทำขึ้นมาในวันนี้เป็นเพียงห้องฟังเพลงเปล่าๆเท่านั้น เสน่ห์ของห้องนี้ส่วน สำคัญจึงอยู่ที่เพลงที่คุณจะเป็นผู้เลือกนำขึ้นบริการบนเว็บ ต้องเดาใจกันหน่อยครับว่าเพลงใด จะถูกใจผู้เข้าเยี่ยมชมมากน้อยแค่ไหน แต่อย่างน้อยโฮมเพจของคุณก็พอจะมี "อะไรๆ" ที่พิเศษ อยู่บ้างแล้วละ ไม่ได้แบนเลี่ยนเตียนโล่งจนไม่มีเสน่ห์ซะเลย จริงมั้ยละครับ
