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จัดการแบบฟอร์มติดต่อกลับ


4 วิธี เคลียร์เนื้อหายาวๆ ในเว็บไซต์ ให้น่าอ่าน

 


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

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


อย่ารอช้า! มาเคลียร์ปัญหา ปรับเรื่องราวยาว ๆ นี้ ให้ดูดีได้ ด้วย 4 วิธีง่าย ๆ
ดังต่อไปนี้ค่ะ

 

1. แบ่งข้อมูลเป็นตอน

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

เว็บมาสเตอร์อาจ จัดกลุ่มแยกเนื้อหาออกเป็น 2-3 ตอน และนำมาใส่ในเว็บไซต์ โดยใช้ฟังก์ชันต่างๆ เช่น จัดการ กลุ่มบทความ / บทความ หรือจัดกลุ่มง่ายๆ ด้วย เมนู Pulldown ที่เมนูด้านข้าง เป็นต้น 
  

  

 

และสะดวกขึ้นไปอีกขั้น หากเว็บมาสเตอร์สร้างลิงก์ไปยังเนื้อหาเรื่องเดียวกันนี้ ในตอนถัดไป หรือ อ่านตอนก่อนหน้า ด้วยเครื่องมือ Hyperlink in Text หรือ Insert / Edit Link ในส่วนท้ายของเนื้อหาตอนนั้น ๆ เพื่อเพิ่มโอกาสที่ผู้ชมจะคลิกอ่านต่อได้ไม่ยากเลยค่ะ
  

 

2. ใช้รูปภาพช่วย

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

ด้วยการใส่ภาพคั่นระหว่างข้อความแต่ละย่อหน้า หรือใส่ภาพประกอบควบคู่เนื้อหา ซึ่งกำหนดง่ายๆ ด้วยเครื่องมือ Insert/Edit Image เลือกจัด Alignment เป็น Left , Right เพื่อให้ข้อความแสดงผลด้านข้างซ้าย หรือขวา ของรูปภาพ ตามต้องการค่ะ
  

  

 

3. เพิ่มเส้นตรงคั่นระหว่างเนื้อหาในบทความ 

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

เพียงคลิกเมาส์วางในตำแหน่งที่ต้องการ จากนั้น คลิกที่เครื่องมือ Insert Horizontal Line (สัญลักษณ์  ) ก็จะปรากฎเส้นคั่นระหว่างเนื้อหาทันทีค่ะ
 

 

 

4. อำนวยความสะดวกด้วยปุ่ม "กลับสู่ด้านบน"

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

ในเว็บไซต์สำเร็จรูป ReadyPlanet เองก็มีเครื่องมือ Text Editor ในการสร้างลิงก์ลักษณะนี้เช่นกันค่ะ ชื่อว่า "Anchor" สังเกตง่ายๆ ก็คือ สัญลักษณ์รูปสมอเรือ ซึ่งช่วยในการสร้างลิงก์ในหน้าเดียวกัน

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

 

จะปรากฎตำแหน่งของ Anchor ชื่อ top ที่ส่วนบนของเนื้อหาบทความ

 

ต่อมา สร้างลิงก์ที่ส่วนล่างของเว็บเพจ โดย พิมพ์ข้อความ เช่น "กลับสู่ด้านบน" หรือ จะใส่เป็นภาพสัญลักษณ์ก็ได้นะคะ และผูกลิงก์โดย ไฮไลท์ข้อความ จากนั้นคลิกที่คำสั่ง  (Hyperlink in Text)  หรือ  Insert / Edit Link สุดท้าย คลิกเลือกชื่อ Anchors ที่ต้องการ และคลิก Insert

(สามารถอ่าน วิธีการผูกลิงก์ด้วย Anchor เพิ่มเติม คลิกที่นี่ ค่ะ) 

 

 

ตัวอย่าง แสดงผลการสร้างลิงก์ในหน้าเดียวกัน ด้วยคำสั่ง Anchor

กลับสู่ด้านบน

 

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



Jittima  Suebsook
www.ReadyPlanet.com





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

เตรียมข้อมูลทำเว็บไซต์อย่างไรดี
เริ่มต้นใส่ข้อมูลในระบบเว็บไซต์สำเร็จรูป
วิธีใส่รูปภาพในเนื้อหาของเว็บไซต์
วิธีอัพโหลดไฟล์เอกสารและสร้างลิงก์สำหรับดาวน์โหลด
วิธีสร้างลิงก์ให้กับข้อความและรูปภาพ
การเลือกรูปแบบเว็บไซต์ (Template) และจัดโครงสร้างหน้าแรก (Layout)
เทคนิคการจัดการเมนูหลักที่สวยและดี
จัดการข้อมูลเมนูย่อยด้านข้างอย่างไรดี?
เลือกใช้สีในหน้าเว็บไซต์อย่างไรให้เหมาะสม?
ข้อควรระวังในการทำเว็บไซต์และวิธีใส่ข้อมูลในเว็บไซต์ที่ถูกต้องปลอดภัย article
แนะนำการวาง Code Youtube ในเว็บไซต์
วิธีสร้างลิงก์ E-Mail
ติดต่อง่าย เก็บได้ข้อมูลดังใจกับ "แบบฟอร์มอิสระติดต่อกลับ"
ไม่พลาดการติดต่อด้วย "แบบฟอร์มมาตรฐาน"
ย่อรูปภาพอย่างง่ายด้วยเครื่องมือ "กำหนดขนาดรูปภาพ"
สร้างลิงก์รูปภาพเล็กไปรูปภาพใหญ่ ด้วยเครื่องมือ 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! บนหน้าเว็บไซต์ ช่วยผู้ชมแชทง่าย แชร์ข้อมูลได้สะดวก