ส่วนหัว
1. หน้านี้ใช้ทำอะไร
หน้า ส่วนหัว ใช้เลือกเค้าโครงของแถบนำทางด้านบน (Navbar) และรูปแบบแถบเมนูเกมที่ผู้เล่นเห็นเมื่อเปิดเข้าสู่หน้าล็อบบี้ผ่านหน้าจอคอมพิวเตอร์และแท็บเล็ต ช่วยปรับแต่งการจัดวางโลโก้ ปุ่มคำสั่ง และแท็บค่ายเกมให้เหมาะสมกับความต้องการของเว็บไซต์ เหมาะสำหรับผู้ดูแลระบบและฝ่ายออกแบบแบรนด์
เค้าโครงที่เลือกในหน้านี้จะใช้เฉพาะบนหน้าจอคอมพิวเตอร์และแท็บเล็ตเท่านั้น ส่วนหน้าจอมือถือจะใช้การจัดวางจากเมนู เมนูมือถือ แยกต่างหากโดยอัตโนมัติ
2. ก่อนเริ่ม
- สิทธิ์การใช้งาน: ต้องได้สิทธิ์ 'ส่วนหัว' จากผู้ดูแลระบบก่อน จึงจะเปิดดูและเปลี่ยนเค้าโครงส่วนหัวในหน้านี้ได้ (หากไม่มีสิทธิ์แก้ไข จะดูตัวอย่างได้อย่างเดียว)
- สิ่งที่ต้องเตรียม:
- ตรวจสอบว่าได้ตั้งค่า โลโก้ และ สีธีม แล้ว หน้าตาตัวอย่างจะได้แสดงครบถ้วนสมบูรณ์
- การพิจารณาจำนวนแท็บเกมที่เปิดใช้งานในระบบ หากมีแท็บเกมหลายแท็บ เค้าโครงบางแบบ (เช่น เมนูข้าง หรือปุ่มกระชับ) อาจช่วยให้ผู้เล่นเลื่อนหาเกมได้สะดวกขึ้น
3. หน้าตาของหน้านี้
เมื่อเปิดเข้ามา จะพบส่วนประกอบสำคัญเรียงจากบนลงล่างดังนี้:
- ส่วนหัวของหน้า (Page Header): แสดงชื่อหน้า ส่วนหัว, คำอธิบายสั้น ๆ และแถบนำทาง (การตั้งค่า / ธีม / ส่วนหัว)
- การ์ดตัวอย่างบนหน้าเว็บ (Preview Card): กรอบจำลองหน้าจอขนาดใหญ่ที่วาดขึ้นจากโลโก้ สีธีม และแท็บเกมจริงของเว็บไซต์ ตามความกว้างหน้าจอของคุณในขณะนั้น
- สวิตช์สลับมุมมองตัวอย่าง (Preview Toggles): อยู่มุมขวาบนของการ์ดตัวอย่าง ใช้ทดสอบการแสดงในสถานะต่าง ๆ:
- สวิตช์ ผู้เล่นเข้าสู่ระบบแล้ว: สลับดูหน้าตาของแถบส่วนหัวระหว่างผู้เยี่ยมชมทั่วไปกับผู้เล่นที่ล็อกอินแล้ว
- สวิตช์ หุบเมนูข้าง: สลับดูหน้าตาเมนูข้างระหว่างแบบกางออกเต็มความกว้างกับแบบหุบย่อเหลือแต่ไอคอน (จะแสดงขึ้นมาเฉพาะเมื่อเลือกเค้าโครงแบบที่ 4: เมนูข้าง)
- แถบประวัติการแก้ไข (Page Audit): แสดงเวอร์ชันข้อมูล, ชื่อผู้บันทึกล่าสุด, ประเภทผู้ใช้ และวันเวลาที่แก้ไขล่าสุด
- ส่วนเลือกเค้าโครงส่วนหัว (Select Layout): แผงการ์ดเค้าโครงทั้งหมด 6 รูปแบบ พร้อมภาพจำลองขนาดเล็กและคำอธิบายจุดเด่นของแต่ละแบบ
- แถบคำสั่งด้านล่าง (Action Bar): แถบลอยแสดงปุ่ม ยกเลิก และปุ่ม บันทึก จะเปิดให้กดเมื่อมีการเลือกเค้าโครงที่ต่างไปจากที่ใช้งานอยู่
4. ค้นหาและตัวกรอง
หน้านี้ไม่มีช่องค้นหาหรือตัวกรองตาราง แต่มีเครื่องมือสลับมุมมองตัวอย่าง 2 ตัวเลือกที่มุมขวาบนของการ์ดตัวอย่าง:
| สวิตช์สลับมุมมอง | เมื่อเปิดใช้งาน (สีน้ำเงิน) | เมื่อปิดใช้งาน (สีเทา) | ประโยชน์ในการตรวจสอบ |
|---|---|---|---|
| ผู้เล่นเข้าสู่ระบบแล้ว | แสดงปุ่ม ฝากเงิน, ถอนเงิน, ยอดเงินคงเหลือในกระเป๋า และชื่อบัญชีผู้เล่น | แสดงปุ่ม เข้าสู่ระบบ และปุ่ม สมัครสมาชิก สำหรับผู้เยี่ยมชมทั่วไป | ตรวจสอบว่าปุ่มการเงินและข้อมูลผู้เล่นจัดวางได้สมดุล ไม่ล้นแถบส่วนหัว |
| หุบเมนูข้าง (เฉพาะเค้าโครงที่ 4) | เมนูเกมด้านซ้ายจะหดเหลือเพียงไอคอนขนาด 88 px | เมนูเกมด้านซ้ายจะกางออกเต็มความกว้าง 224 px พร้อมชื่อหมวดหมู่ | ตรวจสอบว่าหน้าเว็บยังคงใช้งานง่ายเมื่อผู้เล่นเลือกหุบเมนูเพื่อเพิ่มพื้นที่ดูเกม |
5. ตารางข้อมูล
รายละเอียดเค้าโครงส่วนหัวทั้ง 6 รูปแบบ
| รูปแบบ | ชื่อเค้าโครง | การจัดวางแถบบน (Navbar) | ลักษณะแถบเมนูเกม (Game Menu) | ความเหมาะสมในการใช้งาน |
|---|---|---|---|---|
| 1 | แยกสองบาร์ (Two bars) | โลโก้อยู่ฝั่งซ้าย ปุ่มการเงินและปุ่มสมาชิกอยู่ฝั่งขวา | แท็บเกมแบบกล่องไอคอนขนาดใหญ่ในแถวถัดลงมา (สูง 96 px) | รูปแบบคลาสสิก ไอคอนเด่นชัด เหมาะสำหรับเว็บทั่วไป |
| 2 | โลโก้กลางสองบาร์ (Logo in the middle) | โลโก้อยู่ตรงกึ่งกลาง แยกลิงก์เมนูและปุ่มสมาชิกไว้สองฝั่ง | แท็บเกมแบบกล่องไอคอนขนาดใหญ่เหมือนแบบแรก | เหมาะสำหรับแบรนด์ที่ต้องการเน้นความโดดเด่นของโลโก้ |
| 3 | แบบแท็บ (Tabs) | โลโก้อยู่ฝั่งซ้าย ปุ่มสมาชิกรวมอยู่ในแถวเดียวกัน | แท็บเกมบรรทัดเดียว มีเส้นสีธีมขีดใต้แท็บที่เลือก (สูง 72 px) | ดูสะอาดตา เรียบหรู ประหยัดพื้นที่แนวตั้ง |
| 4 | เมนูข้าง (Side menu) | แถบบนแคบลง แสดงเฉพาะข้อมูลสำคัญและปุ่มผู้เล่น | เมนูเกมถูกย้ายไปอยู่เป็นแถบแนวตั้งด้านซ้ายมือ | เหมาะสำหรับเว็บที่มีหมวดเกมเยอะ ผู้เล่นหุบเมนูข้างได้ |
| 5 | ปุ่มแนวนอนกระชับ (Compact buttons) | แถบบนมาตรฐาน พร้อมแถบแท็บเกมในแถวเดียว | แท็บเกมเป็นปุ่มสี่เหลี่ยมมุมมนกระชับเรียงในแนวนอน | เหมาะสำหรับเว็บที่ต้องการความคล่องตัวและทันสมัย |
| 6 | ปุ่มแคปซูลมีขอบ (Outlined capsules) | แถบบนมาตรฐาน โลโก้ซ้าย ปุ่มขวา | แท็บเกมเป็นปุ่มทรงแคปซูลมน มีเส้นขอบบางล้อมรอบ | สไตล์มินิมอล โมเดิร์น และดูสบายตา |
ปุ่มคำสั่งบนการ์ดเค้าโครง
| ปุ่ม / องค์ประกอบ | ลักษณะที่พบ | ผลลัพธ์เมื่อกด | เงื่อนไข |
|---|---|---|---|
| การ์ดเค้าโครง | กรอบสี่เหลี่ยมพร้อมภาพพรีวิวจำลอง | เปลี่ยนภาพตัวอย่างในการ์ดด้านบนตามรูปแบบที่กดเลือกทันที | กดเลือกได้ตลอดเวลา |
| ป้าย "ใช้อยู่" | ป้ายสีเขียวบนการ์ด | บ่งบอกว่าเค้าโครงนี้คือรูปแบบที่หน้าเว็บจริงกำลังใช้งานอยู่ในปัจจุบัน | แสดงบนการ์ดเดียวเท่านั้น |
| เครื่องหมายถูกสีขาว | วงกลมสีฟ้าที่มุมขวาบนของการ์ด | บ่งบอกว่าเค้าโครงนี้กำลังถูกเลือกอยู่ในแบบร่าง | แสดงบนการ์ดที่ถูกกดเลือก |
6. ทีละขั้นตอน
1. การเปลี่ยนเค้าโครงส่วนหัว
- ไปที่เมนู รูปลักษณ์เว็บ > ส่วนหัว จากแถบเมนูด้านซ้าย
- เลื่อนลงมาที่ส่วน เลือกเค้าโครงส่วนหัว
- กดเลือกรูปแบบเค้าโครงที่ต้องการจาก 6 ตัวเลือก
- เลื่อนขึ้นไปดูการ์ด ตัวอย่างบนหน้าเว็บ ด้านบนเพื่อตรวจสอบผลลัพธ์
- ทดลองกดสลับสวิตช์ ผู้เล่นเข้าสู่ระบบแล้ว เพื่อตรวจดูความเรียบร้อยของปุ่มฝากเงินและยอดเครดิต
- เมื่อพอใจแล้ว ให้กดปุ่ม บันทึก ที่แถบลอยด้านล่าง
- ระบบจะแสดงข้อความแจ้งเตือนสีเขียวว่า "บันทึกเค้าโครงส่วนหัวแล้ว"
2. การยกเลิกและคืนค่าเดิมก่อนบันทึก
- หากกดเลือกเค้าโครงใหม่แล้วต้องการเปลี่ยนใจกลับไปใช้รูปแบบเดิม ให้กดปุ่ม ยกเลิก ที่แถบคำสั่งด้านล่าง
- ระบบจะคืนค่าการแสดงกลับเป็นเค้าโครงที่มีป้าย ใช้อยู่ ทันที
7. หน้าแก้ไขหรือหน้าเพิ่ม
หน้านี้เป็นการเลือกรูปแบบโดยตรง ไม่มีช่องกรอกข้อความยาว โดยมีตัวเลือกการตั้งค่าดังนี้:
| ช่อง / ตัวเลือก | ต้องกรอกไหม | ใส่อะไร | ตัวอย่าง | ข้อจำกัด |
|---|---|---|---|---|
| เลือกเค้าโครงส่วนหัว | ต้องเลือก | กดเลือกหนึ่งใน 6 เค้าโครงมาตรฐานที่ระบบกำหนด | แบบแท็บ (Tabs) | เลือกได้ครั้งละ 1 รูปแบบเท่านั้น มีผลกับหน้าจอคอมพิวเตอร์และแท็บเล็ต |
8. หน้าต่างป็อปอัพ (Popup / Modal)
1. หน้าต่างแจ้งเตือนข้อมูลขัดแย้ง (Version Conflict)
- เปิดขึ้นมาเมื่อไหร่: เมื่อกดปุ่ม บันทึก แต่มีผู้ดูแลระบบคนอื่นบันทึกเค้าโครงส่วนหัวตัดหน้าไปก่อน
- สิ่งที่เห็นในหน้าต่าง: ข้อความแจ้งเตือนสีแดงว่า "มีแอดมินคนอื่นบันทึกส่วนหัวก่อน โหลดค่าล่าสุดมาให้แล้ว กรุณาเลือกใหม่อีกครั้ง"
- สิ่งที่ต้องทำ: ระบบจะดึงเค้าโครงล่าสุดที่บันทึกไว้มาแสดง ให้ตรวจดูความถูกต้องและกดเลือกรูปแบบที่ต้องการใหม่อีกครั้งก่อนกดบันทึก
- ผลลัพธ์: ป้องกันการเขียนทับการตั้งค่าของผู้ดูแลระบบคนอื่น
2. หน้าต่างเตือนก่อนออกจากหน้า (Dirty Form Guard)
- เปิดขึ้นมาเมื่อไหร่: เมื่อกดเลือกเค้าโครงใหม่แล้วพยายามปิดหน้าต่างเบราว์เซอร์หรือเปลี่ยนไปเมนูอื่นโดยไม่ได้กดบันทึก
- สิ่งที่เห็นในหน้าต่าง: หน้าต่างแจ้งเตือนของเบราว์เซอร์ว่ามีการตั้งค่าที่ยังไม่ได้รับการบันทึก
- สิ่งที่ต้องทำ: กด ยกเลิก เพื่อกลับมาบันทึก หรือกดยืนยันออกจากหน้าหากต้องการละทิ้งการเปลี่ยนแปลง
9. สถานะและป้ายสี
| ป้ายสถานะ / สัญลักษณ์ | สีของป้าย | ความหมาย | สิ่งที่ต้องทำต่อ |
|---|---|---|---|
| ใช้อยู่ | เขียว | เค้าโครงที่เปิดใช้งานอยู่บนหน้าเว็บไซต์จริงในปัจจุบัน | หากไม่ต้องการเปลี่ยนรูปแบบ ไม่ต้องทำอะไร |
| เครื่องหมายถูกสีขาวในวงกลม | ฟ้า | รูปแบบที่กำลังถูกเลือกอยู่ในแบบร่างขณะนี้ | ตรวจดูพรีวิวด้านบนแล้วกดปุ่มบันทึก |
| กรอบเส้นขอบสีฟ้า | ฟ้า | การ์ดเค้าโครงที่กำลังถูกเลือกและได้รับโฟกัส | ช่วยให้มองเห็นชัดเจนว่าเลือกแบบใดอยู่ |
10. คำถามที่เจอบ่อย / แก้ปัญหาเบื้องต้น
- ถ้าเปลี่ยนเค้าโครงส่วนหัวแล้ว แต่หน้าจอมือถือไม่เปลี่ยน:
- รูปแบบในหน้านี้มีผลเฉพาะบนหน้าจอคอมพิวเตอร์และแท็บเล็ตเท่านั้น หากต้องการปรับเปลี่ยนการจัดวางแถบล่างของมือถือ ให้ไปที่เมนู รูปลักษณ์เว็บ > เมนูมือถือ
- ถ้าปุ่มบันทึกเป็นสีเทา กดไม่ได้:
- ตรวจสอบว่ารูปแบบที่เลือกอยู่คือรูปแบบเดิมที่มีป้าย ใช้อยู่ หรือไม่ หากไม่มีการเปลี่ยนรูปแบบ ปุ่มบันทึกจะไม่เปิดให้กด
- ถ้าเลือกเค้าโครงแบบที่ 4 (เมนูข้าง) แล้วเมนูบังหน้าจอเกม:
- เมนูข้างออกแบบมาให้ผู้เล่นกดปุ่มหุบเมนูย่อเหลือเพียงไอคอนขนาด 88 px ได้ตลอดเวลา ช่วยคืนพื้นที่หน้าจอสำหรับดูเกมได้อย่างเต็มที่
- ถ้าภาพตัวอย่างบนหน้าจอตัดคำหรือแสดงไม่พอดี:
- ภาพตัวอย่างจะคำนวณตามความกว้างจริงของหน้าจอคอมพิวเตอร์ที่คุณกำลังใช้งานอยู่ หากย่อหน้าต่างเบราว์เซอร์ลง ขนาดพรีวิวจะปรับลดสัดส่วนตามจริงอัตโนมัติ