ReadyPlanet.com
dot

dot
เลือกเวอร์ชั่น Text Editor
Editor Manual
แนะนำวิธีทำเว็บไซต์เบื้องต้น
Function Update
dot
dot
เว็บไซต์รูปแบบ Responsive web design
จัดการเมนูหลัก
เมนูโค้ดและสคริปต์ภายใต้ <head>
ประวัติการใช้งานระบบ
ตัวนับผู้ชมเว็บ
Google Service/Sitemap
จัดการอีเมลสมัครรับข่าวสาร
dot
dot
ระบบผู้ช่วย
ระบบ Chat
dot
dot
การตั้งอีเมล Pop Mail
dot
dot
bulletจัดการเว็บไซต์
bulletระบบพื้นฐาน
bulletระบบเสริม
bulletบริการสมาชิก
bulletเทคนิคอื่นๆ
bulletText Editor
dot
dot
bulletจัดการแบบฟอร์มติดต่อกลับ


การเลือกรูปแบบเว็บไซต์ (Template) และจัดโครงสร้างหน้าแรก (Layout)


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

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

วิธีเลือกรูปแบบเว็บไซต์ (Template)

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

หน้าที่ของ Template

1. กำหนดการแสดงผลของเมนูหลัก ซึ่งจะแสดงผลด้านบนหรือด้านล่างของรูปส่วนหัว

2. กำหนดการแสดงผลรูปภาพส่วนหัวเริ่มต้น 

3. กำหนดรูปแบบเมนูย่อยอยู่ทั้งทางด้านซ้าย และด้านขวา และแบบไม่แสดงแถบเมนูย่อย

4. กำหนดเฉดสีของหน้าเว็บไซต์เริ่มต้น ทั้งสีตัวอักษร สีพื้นหลัง สีหัวข้อเมนูต่าง ๆ 

5. กำหนดขนาดการแสดงผลของเว็บไซต์บนหน้าจอคอมพิวเตอร์

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

 

ประเภทของ Template แบ่งเป็น 2 ประเภทได้แก่

 

 

1. Template รูปแบบเดิม

มีให้เลือกใช้งานถึง 260 แบบ เว็บมาสเตอร์สามารถเลือกใช้ตามรูปแบบ เฉดสีที่ชอบ หรือเลือกตามหมวดหมู่ธุรกิจ นอกจากนี้ยังเลือกใช้งานได้จากขนาด หรือชนิดของภาพส่วนหัวที่ต้องการ ได้แก่

     1.1. เลือกใช้ตามขนาดของเทมเพลต มีให้เลือกใช้งานได้ 3 ขนาด ด้แก่

1) เทมเพลตขนาดเล็ก 800x600 pixels

2) เทมเพลตขนาดกลาง 1024x768 pixels 

3) เทมเพลตขนาดเต็มจอ Full Screen 
  

     1.2. เลือกใช้ตามชนิดของภาพส่วนหัว

1) เทมเพลตแฟลช บริเวณภาพส่วนหัวจะมีการเคลื่อนไหว ใช้โปรแกรม Flash ออกแบบ ไฟล์นามสกุล .swf

2) เทมเพลตธรรมดา บริเวณภาพส่วนหัวจะเป็นภาพนิ่ง ใช้โปรแกรม photoshop ออกแบบ ไฟล์นามสกุล .jpg / .gif


โดยเว็บไซต์ที่ใช้เทมเพลตรูปแบบเดิม จะมีเมนู "เลือกรูปแบบบนมือถือ" เพิ่มขึ้นมา เพื่อให้สามารถเลือกกลุ่มข้อมูลที่ต้องการ ไปแสดงผลเมื่อผู้ชมเข้าดูเว็บไซต์ผ่านอุปกรณ์ เช่น โทรศัพท์มือถือ Smartphone , Tablets เป็นต้น ได้อย่างสะดวก ข้อมูลแสดงผลรวดเร็ว

   

 

2. เทมเพลตรูปแบบ Responsive 

ผู้ใช้อินเทอร์เน็ตในปัจจุบัน มีการใช้อุปกรณ์ประเภทพกพา อาทิเช่น Laptop, Smartphone, Tablet ในการเข้าอินเทอร์เน็ตมากกว่าการใช้คอมพิวเตอร์ตั้งโต๊ะแบบทั่วไปเสียแล้ว จึงเป็นสิ่งจำเป็นที่เว็บไซต์ในปัจจุบันจะต้องรองรับพฤติกรรมการเข้าถึงข้อมูลแบบ Multi Screen ของผู้บริโภค

พื่อให้รองรับกับ “พฤติกรรม” ของผู้บริโภคที่ “เปลี่ยนไป” ตาม Multi-Screen Trend ทางฝ่ายพัฒนาระบบของ ReadyPlanet  จึงได้พัฒนา ระบบเว็บไซต์สำเร็จรูป VelaClassic ให้เป็น “Web Responsive” ซึ่งจะทำให้สามารถแสดงผลเนื้อหาเว็บไซต์ให้เหมาะสมกับหน้าจอของอุปกรณ์ที่ใช้ ไม่ว่าจะเป็น คอมพิวเตอร์, แท็บเล็ต หรือโทรศัพท์มือถือ ซึ่งจะช่วยให้ผู้เข้าชมสามารถเข้าถึงเนื้อหาบนเว็บไซต์ได้ง่ายและรวดเร็วยิ่งขึ้นกว่าเดิม

ดูรายละเอียด การจัดการเว็บไซต์รูปแบบ Responsive Web design เพิ่มเติม คลิกที่นี่ 

  

วิธีเลือกใช้ Template

หลังจากล็อกอินเข้าส่วนสมาชิก ที่เมนู "จัดการเว็บไซต์" คลิกเลือก "เลือกรูปแบบTemplate" จากนั้น เลือกประเภทของเทมเพลต (รูปแบบเดิม / รูปแบบ Responsive) หากมีการกดเปลี่ยนประเภท หลังจากเลือกแล้ว ให้รอจนระบบ Refresh การเลือกจนเสร็จ

 

จากนั้น จะปรากฎเทมเพลตตามประเภทที่เลือก ให้คลิก "เลือกใช้" เทมเพลตที่ต้องการ เพียงเท่านี้ เว็บไซต์ของคุณก็จะเปลี่ยนภาพส่วนหัว สีสัน และการตำแหน่งแสดงผลของเมนูตามเทมเพลตใหม่ที่เลือกใช้งานค่ะ

 

หลังจากที่คุณเลือกรูปแบบ Template ที่ต้องการแล้ว สามารถตั้งค่าการแสดงผลเพิ่มเติม เช่น เปลี่ยนรูปภาพส่วนหัว และรูปภาพ Background ของเว็บไซต์ เป็นต้น โดยสามารถดูวิธีการใช้งานที่ได้เมนู ตั้งค่าพื้นฐานเว็บไซต์ คลิกที่นี่ ได้เลยค่ะ


 

จัดโครงสร้างการแสดงผลของเว็บไซต์ (Layout) 

หน้าที่ของ Layout

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

 

ประเภทของ Layout

ในเว็บไซต์สำเร็จรูป VelaClassic จะมี Layout หรือโครงร่างเนื้อหาหน้าแรกให้คุณเลือกใช้ได้ 2 ประเภท ดังนี้ค่ะ



1. Static Layout

เป็น Layout มาตรฐาน ซึ่งมีให้เลือกใช้งานกว่า 30 รูปแบบ [ยกเว้น Layout ID : 99]   หากมีการเลือกใช้งานแล้วจะไม่สามารถปรับเปลี่ยน เพิ่มเติม ย้ายตำแหน่งข้อมูลกลุ่มบทความบนหน้าแรกได้ (บังคับการแสดงผลตามรูป Layout ที่เลือก)

เหมาะกับเว็บไซต์ที่มีข้อมูลที้ต้องการแสดงผลไม่เกิน 6 กลุ่มบทความ  และไม่ต้องการแสดงผลสินค้าจากระบบร้านค้าออนไลน์ VelaCommerce ในหน้าแรกของเว็บไซต์ค่ะ

2. Dynamic Layout

กรณีที่มีข้อมูลกลุ่มบทความที่ต้องการแสดงผลบนหน้าแรกของเว็บไซต์หลายกลุ่ม หรือแสดงผลสินค้าจากระบบร้านค้าออนไลน์ VelaCommerce จะต้องใช้งาน Layout ID 99 : Dynamic Layout ช่วยให้การจัดวางข้อมูลหน้าแรกสวยโดดเด่น ไม่ซ้ำใคร

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

 

แต่คุณหากไม่แน่ใจว่าจะดึงกลุ่มบทความ หรือสินค้ากลุ่มใดมาแสดงผลที่หน้าแรกบ้างนั้น ลองทำตามวิธีดังต่อไปนี้ดูนะคะ

 

เริ่มต้นด้วยการวาดโครงร่างเว็บไซต์หน้าแรก (Sitemap)

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

     ตัวอย่างการจัดวางข้อมูลในหน้าแรก

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

ตำแหน่งหมายเลข 2 แสดงกลุ่มสินค้าขายดี หรือสินค้ามาใหม่ 

ตำแหน่งหมายเลข 3 แสดงกลุ่มสินค้าที่มีการจัดโปรโมชั่น ลดราคา ฯลฯ

ตำแหน่งหมายเลข 4 แสดงกลุ่มบทความแจ้งข่าวสาร กิจกรรมที่จัดไปแล้ว หรือกำลังจะจัด

ตำแหน่งหมายเลข 5 แสดงกลุ่มบทความให้ความรู้ แนะนำเคล็ดลับ หรือเทคนิคต่าง ๆ ที่เกี่ยวข้องกับสินค้าหรือบริการของธุรกิจ เป็นต้น

 Layout / Sitemap ของเว็บไซต์

 

วิธีใช้งาน Layout

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

 

จากตัวอย่างการจัดวางโครงสร้างข้อมูลหน้าแรกข้างต้น เนื่องจาก มีสินค้าจากระบบร้านค้าออนไลน์ Vela Commerce ที่ต้องการนำมาแสดงบนหน้าแรกของเว็บไซต์ จึงเลือกใช้ Dynamic Layout และทำการเลือกกลุ่มข้อมูลมาแสดงผลบนหน้าแรก ตามโครงสร้างที่จัดวางไว้ค่ะ

 
 
 

 ตัวอย่างการแสดงผลหน้าแรกของเว็บไซต์ ตามโครงสร้าง Layout ที่กำหนดไว้

 

หมายเหตุ 

1. คุณสามารถคลิกที่ภาพ Template ขนาดเล็กเพื่อชม ภาพตัวอย่างของ Template ในขนาดใหญ่ได้

2. การเลือก Layout เป็นโครงสร้างของการแสดงผลบนหน้าแรกของเว็บไซต์นั้น คุณสามารถเปลี่ยนแปลง Layout ได้ไม่จำกัดจำนวนครั้งตามต้องการ และ

3. หากคุณเลือกใช้เทมเพลตรูปแบบ Responsive จะสามารถใช้งานได้เฉพาะ Dynamic Layout เท่านั้นค่ะ ดูรายละเอียด วิธีการใช้งาน Dynamic Layout เพิ่มเติม คลิกที่นี่

 

Jittima  Suebsook
www.ReadyPlanet.com




วิธีใส่ข้อมูลและตกแต่งเว็บไซต์สำเร็จรูป ReadyPlanet เบื้องต้น

เตรียมข้อมูลทำเว็บไซต์อย่างไรดี
เริ่มต้นใส่ข้อมูลในระบบเว็บไซต์สำเร็จรูป
วิธีใส่รูปภาพในเนื้อหาของเว็บไซต์
วิธีอัพโหลดไฟล์เอกสารและสร้างลิงก์สำหรับดาวน์โหลด
วิธีสร้างลิงก์ให้กับข้อความและรูปภาพ
เทคนิคการจัดการเมนูหลักที่สวยและดี
จัดการข้อมูลเมนูย่อยด้านข้างอย่างไรดี?
เลือกใช้สีในหน้าเว็บไซต์อย่างไรให้เหมาะสม?
ข้อควรระวังในการทำเว็บไซต์และวิธีใส่ข้อมูลในเว็บไซต์ที่ถูกต้องปลอดภัย article
แนะนำการวาง Code Youtube ในเว็บไซต์
วิธีสร้างลิงก์ E-Mail
4 วิธี เคลียร์เนื้อหายาวๆ ในเว็บไซต์ ให้น่าอ่าน
ติดต่อง่าย เก็บได้ข้อมูลดังใจกับ "แบบฟอร์มอิสระติดต่อกลับ"
ไม่พลาดการติดต่อด้วย "แบบฟอร์มมาตรฐาน"
ย่อรูปภาพอย่างง่ายด้วยเครื่องมือ "กำหนดขนาดรูปภาพ"
สร้างลิงก์รูปภาพเล็กไปรูปภาพใหญ่ ด้วยเครื่องมือ Text Editor
สร้างรูปภาพเคลื่อนไหวแบบ Marquee
วิธีสร้างไฟล์ภาพ Favorite Icon เพื่อแสดงผลในช่อง Address Bar
เทคนิคการสร้างลิงค์ ในหน้าเดียวกันด้วยคำสั่ง Anchor
เทคนิคการสร้างลิงก์เมนูและรูปภาพแบนเนอร์ ในพื้นที่ด้านล่างของเว็บไซต์
วิธีใส่คีย์เวิร์ดในเว็บไซต์เพื่อให้ Google จัดเว็บไซต์ในอันดับที่ดี
วิธีติดตั้ง Facebook Page Plugin (Like Box) ในเว็บไซต์
วิธีแสดงผลเครื่องเล่น VDO บนหน้าเว็บไซต์
5 องค์ประกอบของเว็บไซต์ที่ดี
5 สิ่งที่ต้องมี บนโฮมเพจเว็บไซต์
แนะนำโปรแกรมตกแต่งและใส่กรอบรูปภาพฟรี! ใช้ง่าย นำไปแต่งเว็บให้โดดเด่นได้เลย
ใช้ระบบ Chat บนหน้าเว็บไซต์ ช่วยถามตอบทุกข้อสงสัย พร้อมเพิ่มโอกาสปิดการขายได้มากกว่า
โชว์เส้นทาง สร้างแผนที่บนเว็บไซต์ง่ายๆ ใช้ Google Map
Google Verification (วิธียืนยันการเป็นเจ้าของเว็บไซต์กับทาง Google)
วิธีการสร้างและยืนยัน Sitemap ของเว็บไซต์กับ Google
วิธีติดตั้งโค้ด Google Analytics
วิธีติดตั้งเครืองมือแปลภาษา Google Translate บนหน้าเว็บไซต์
ไขข้อข้องใจ "การทำเว็บไซต์ภาษาที่สอง"
สร้างฐานลูกค้าออนไลน์อย่างง่ายแต่มั่นคง ด้วยระบบสมาชิก
เทคนิคสร้างลิงค์และปุ่มโทรบนเว็บไซต์ เพื่อการติดต่อที่ง่าย แค่คลิก แล้วโทร
วิธีเพิ่มลิงก์ Add LINE และปุ่ม LINE it! บนหน้าเว็บไซต์ ช่วยผู้ชมแชทง่าย แชร์ข้อมูลได้สะดวก