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


วิธีใส่รูปภาพในเนื้อหาของเว็บไซต์


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

     - เป็นไฟล์ภาพนามสกุล (Type) เป็น  .jpeg/ .gif/ .png 

     - ตั้งชื่อภาพเป็นภาษาอังกฤษและตัวเลข หลีกเลี่ยงการใช้ภาษาไทยและสัญลักษณ์อักรขระพิเศษ

     - ควรย่อภาพให้มีขนาดไม่เกิน (File Size) 500 KB ยิ่งไฟล์ภาพมีขนาดเล็กเท่าไร ก็จะช่วยให้หน้าเว็บไซต์แสดงผลได้เร็วขึ้นเท่านั้นค่ะ

 

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

1. Log in เข้าส่วนสมาชิก ที่เมนู "ระบบพื้นฐาน"  คลิก "จัดการกลุ่มบทความ / บทความ" (หรือเมนูอื่น ๆ ที่มีเครื่องมือ Text Editor ที่ต้องการเพิ่มรูปภาพเพื่อผูกลิงก์จากภาพเล็กไปยังภาพใหญ่ค่ะ)

 

2. เข้าสู่หน้า "จัดการกลุ่มบทความ / บทความ" คลิกที่ชื่อกลุ่มบทความ  จากนั้นคลิก  เพื่อเพิ่มบทความใหม่ หรือคลิก  เพื่อแก้ไขบทความเดิมที่สร้างไว้แล้วตามต้องการ

 

3. คลิกแท็บ "เนื้อหาของบทความ" คลิกเลือกคำสั่ง  (Upload Image) หรือ  Easy Upload Image เพื่อเพิ่มรูปภาพ

 

  Easy Upload Image (แทรก/แก้ไข รูปภาพแบบง่าย)

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

คุณสมบัติของรูปภาพที่เหมาะสมในการแสดงผลบนหน้าเว็บไซต์ ไฟล์ภาพมีนามสกุล (Type) เป็น .gif / .jpeg / .png  ตั้งชื่อไฟล์เป็นภาษาอังกฤษหรือตัวเลข  และควรย่อภาพให้มีขนาดไม่เกิน (Size) 500 KB เพื่อให้ภาพมีขนาดพอเหมาะกับการแสดงผลบนหน้าเว็บไซต์  ไม่ทำให้หน้าเว็บไซต์โหลดข้อมูลช้าค่ะ
 

     ขั้นตอนการใส่รูปภาพด้วยเครื่องมือ Easy Upload Image

1. คลิกเครื่องมือ Easy Upload Image จากนั้นคลิกปุ่ม "Choose File"  

2. ปรากฎหน้าต่าง "Open" ให้คลิกเลือกรูปที่ต้องการอัพโหลด จากเครื่องคอมพิวเตอร์ของคุณ

3. คลิกปุ่ม "Open"



 

4. ระบบจะอัพโหลดรูปตัวอย่างเข้ามาในหน้าต่าง Easy Upload Image คุณสามารถปรับตั้งค่าการแสดงผลรูปภาพได้ ดังนี้

  • Width กำหนดขนาดความกว้างของรูปภาพ

  • Height กำหนดขนาดความสูงของรูปภาพ

  • Border ใส่เส้นกรอบให้รูปภาพ โดยยิ่งใส่ตัวเลขมากขึ้น เส้นกรอบก็จะแสดงผลหนาขึ้นค่ะ

  • HSpace กำหนดระห่างระหว่างรูปภาพและข้อความในแนวนอน โดยยิ่งใส่ตัวเลขมากขึ้น ระยะห่างก็จะมากขึ้นค่ะ

  • VSpace กำหนดระห่างระหว่างรูปภาพและข้อความในแนวตั้ง โดยยิ่งใส่ตัวเลขมากขึ้น ระยะห่างก็จะมากขึ้นค่ะ

  • Align เลือกการแสดงผลระหว่างรูปภาพและข้อความประกอบ โดยสามารถดูตัวอย่างการจัดวางได้จากกรอบ Preview ค่ะ

  • Short Description ใส่คำอธิบายรูปภาพสั้น ๆ

  • กด OK เพื่อยืนยันการตั้งค่าและใส่รูปภาพลงในส่วนเนื้อหา
      


 

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

 

 Upload Image (แทรก/แก้ไข รูปภาพ)

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

     วิธีการใช้งานเครื่องมือ Upload Image

1. คลิกเครื่องมือ   (Upload Image) 

 

2. จะปรากฎหน้าต่าง "Image Properties" คลิกที่ปุ่ม "Browse Server"


3. ปรากฎหน้าต่าง FCKeditor ให้คลิกปุ่ม Choose File 

4. ปรากฎหน้าต่าง "Open" คลิกเลือกรูปภาพที่ต้องการจากเครื่องคอมพิวเตอร์ของคุณ

5.คลิกปุ่ม "Open"

6. คลิกปุ่ม Upload


หลังจากคลิก Upload จะปรากฏรูปภาพที่คุณเลือก ให้คลิกที่รูปภาพ  (และคุณสามารถคลิกรูปกากบาทสีแดงที่อยู่ทางขวาของรูปภาพ เพื่อลบรูปภาพที่ไม่ต้องการใช้งานออกจากเซิฟเวอร์ เพื่อประหยัดพื้นที่การใช้งานได้ค่ะ)


7. รูปภาพที่ Upload มาจะปรากฎในช่อง Preview คุณสามารถกำหนดคุณสมบัติของรูปภาพได้ เช่น 

  • Width กำหนดขนาดความกว้างของรูปภาพ

  • Height กำหนดขนาดความสูงของรูปภาพ

  • Border ใส่เส้นกรอบให้รูปภาพ โดยยิ่งใส่ตัวเลขมากขึ้น เส้นกรอบก็จะแสดงผลหนาขึ้นค่ะ

  • HSpace กำหนดระห่างระหว่างรูปภาพและข้อความในแนวนอน โดยยิ่งใส่ตัวเลขมากขึ้น ระยะห่างก็จะมากขึ้นค่ะ

  • VSpace กำหนดระห่างระหว่างรูปภาพและข้อความในแนวตั้ง โดยยิ่งใส่ตัวเลขมากขึ้น ระยะห่างก็จะมากขึ้นค่ะ

  • Align เลือกการแสดงผลระหว่างรูปภาพและข้อความประกอบ โดยสามารถดูตัวอย่างการจัดวางได้จากกรอบ Preview ค่ะ

  • Short Description ใส่คำอธิบายรูปภาพสั้น ๆ

  • กด OK เพื่อยืนยันการตั้งค่าและใส่รูปภาพลงในส่วนเนื้อหา
      

 

8. รูปภาพที่อัพโหลดจะแสดงผลในส่วนเนื้อหา คุณสามารถเพิ่มรายละเอียดอื่น ๆ ได้ตามต้องการ หรือหากต้องการแก้ไขการตั้งค่ารายละเอียดรูปภาพอีกครั้ง ก็สามารถ คลิกที่รูปและคลิกที่เครื่องมือ Upload Image ก็จะปรากฎหน้าต่าง Image Properties ค่ะ

เมื่อเรียบร้อยแก้ไขแล้ว คลิก "ตกลง" เพื่อบันทึก

 

  

ข้อควรระวังในการใส่รูปภาพ

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

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

 

 

Jittima  Suebsook
www.ReadyPlanet.com




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

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