Tech &Tips

1.การเลือกThemeและตกแต่งเว็บไซต์..  เว็บมาสเตอร์สามารถเลือกรูปแบบของเว็บไซต์ หรือ Theme สำเร็จรูป จากระบบเว็บไซต์ VelaEasy เพื่อเป็นค่าเริ่มต้น และสามารถปรับเปลี่ยน แก้ไขการแสดงผลได้  เช่น - สามารถกำหนด สีพื้นหลัง สีตัวอักษร และรูปแบบตัวอักษร ของทุกส่วนในหน้าเว็บไซต์ - สามารถเลือกรูปแบบ Theme สำเร็จรูป มาปรับแต่งเพิ่มเติม แล้วบันทึกรูปแบบที่ปรับแต่งเองไว้ได้ถึง 3 ชุดรูปแบบ วิธีเลือก Theme 1. คลิกเมนู "ตกแต่ง" โดยระบบจะเลือกการแสดงผลชุด Theme เริ่มต้นอยู่ที่รูปแบบที่ 1 ให้คลิกที่รูป Theme ที่ปรากฎอยู่ภายใต้หัวข้อ "เลือก Theme"  ↑ 2. จะปรากฎหน้าต่าง Theme สำเร็จรูป ให้คลิกเลือกใช้ที่รูปแบบตามที่ต้องการ 3. เมื่อคลิกเลือก Theme แล้ว สามารถดูการแสดงผลรูปแบบของ Theme น้้น ๆ บนหน้าเว็บไซต์จริงได้ทันที และสามารถคลิกเลือกเปลี่ยนได้เรื่อย ๆ ไม่จำกัดจำนวนครั้ง  สุดท้ายเมื่อเจอ Theme ที่ต้องการใช้งานแล้ว ให้คลิกปุ่ม "บันทึกและใช้กับเว็บไซต์" เพื่อยืนยันค่ะ หมายเหตุ : การเลือกรูปแบบ Theme สำเร็จรูปนี้จะเปลี่ยนภาพพื้นหลัง ภาพส่วนหัวที่คุณได้อัพโหลดไว้ก่อนหน้า และรวมถึงรูปแบบและสีของตัวอักษรให้แสดงตามรูปแบบ theme ใหม่ที่เลือกใช้งาน  วิธีแก้ไขตกแต่ง Theme ใหม่ ให้เป็นสไตล์คุณ แม้จะมี Theme เว็บไซต์สำเร็จรูปให้เลือกใช้อย่างง่ายดาย แต่เชื่อว่าเว็บมาสเตอร์ทุกท่านก็ย่อมต้องการเติมแต่งหน้าตาเว็บไซต์ เพื่อสื่อถึงตัวตนที่แท้จริงของธุรกิจ/องค์กร และสิ่งนี้เองที่ทำให้เว็บไซต์สำเร็จรูปที่ทุกคนเลือกใช้เหมือนกัน เกิดความแตกต่างกันนั่นเองค่ะ โดยหลังจากที่คุณคลิกเลือก Theme หลักเรียบร้อยแล้ว ระบบจะแสดงพื้นที่ให้กำหนดค่าการแสดงผลในส่วนต่าง ๆ ของเว็บไซต์ โดยในแต่ละเมนูจะแยกเป็น 2 แท็บหลัก คือ ส่วนปรับแต่ง "พื้นหลัง" และ "ข้อความ" ตามรายละเอียดดังต่อไปนี้ค่ะ                                               การตั้งค่าการตกแต่ง Theme เว็บไซต์ในแท็บ "พื้นหลัง"   หมายเลข 1. ส่วนสำหรับเลือกเมนูที่ต้องการตั้งค่าการแสดงผล : จะปรากฎเครื่องมือสำหรับแก้ไขการตั้งค่า ตามตำแหน่งหมายเลข 2-5 ค่ะ (ในที่นี้ยกตัวอย่างการตั้งค่า แถบเมนูด้านบน ระดับ 1 ค่ะ) หมายเลข 2. สีพื้นหลัง : สีพื้นหลังของเมนูหรือพื้นที่ส่วนต่าง ๆ ซึ่งจะปรากฎให้เห็นก็ต่อเมื่อไม่มีการใช้ภาพพื้นหลังหรือภาพพื้นหลังแสดงไม่เต็มพื้นที่ค่ะ นอกจากนี้ยังสามารถกำหนดค่าทึบแสง (Opacity) ซึ่งเป็นการกำหนดให้ตำแหน่งที่ต้องการนั้นโปร่งใสขึ้นได้ ดูรายละเอียด วิธีการกำหนดค่าทึบแสงของพื้นหลัง เพิ่มเติม คลิกที่นี่ ค่ะ หมายเลข 3. สีพื้นหลังเมื่อถูกเมาส์ : สามารถตั้งค่าให้สีพื้นหลังของเมนูเปลี่ยนไปเมื่อนำเมาส์ไปชี้ที่เมนูนั้น ๆ ได้ โดยเลือกสีในส่วนนี้ให้แตกต่างกับสีพื้นหลังค่ะ รวมถึงสามารถ กำหนดค่าทึบแสง (Opacity) ได้เช่นเดียวกับสีพื้นหลังปกติ   ตัวอย่างการแสดงผลสีพื้นหลังของเมนูด้านบนแบบปกติ และสีพื้นหลังเมนูเมื่อถูกเมาส์   หมายเลข 4. ภาพพื้นหลัง :  สามารถใส่รูปภาพเพื่อแสดงผลเป็นภาพพื้นหลังในส่วนต่างๆ ของเว็บไซต์ ได้แก่ ภาพพื้นหลังเว็บไซต์ ภาพพื้นที่ส่วนหัว (แบนเนอร์ส่วนหัวของเว็บไซต์) ภาพพื้นหลังแถบเมนูด้านบน ภาพพื้นหลังแถบเมนูด้านบน ระดับ 1 ภาพพื้นหลังแถบเมนูด้านบน ระดับ 2 ภาพื้นหลังพื้นที่ด้านข้าง ภาพพื้นหลังเมนูด้านข้าง ระดับ 1 ภาพพื้นหลังเมนูด้านข้าง ระดับ 2 ภาพพื้นหลังหัวข้อ Show Boxes ภาพพื้นหลังปุ่มสั่งซื้อ  ข้อแนะนำเกี่ยวกับภาพพื้นหลัง รองรับการใส่ภาพพื้นหลัง ที่มีขนาดไฟล์ภาพไม่เกิน 5 MB   ประเภทของไฟล์รูปภาพที่สามารถอัพโหลดได้คือ .jpg , .jpeg , .png และ .gif    รูปภาพพื้นหลังควรเป็นภาพกราฟฟิคที่มีการแสดงผลต่อเนื่องได้ เพื่อรองรับกับการแสดงผลกับหน้าจอคอมพิวเตอร์ทุกขนาดอย่างสวยงาม ดูตัวอย่างภาพกราฟฟิค คลิกที่นี่ ค่ะ (สามารถเซฟภาพมาใช้กับเว็บไซต์ของคุณได้ฟรีค่ะ) วิธีใส่ภาพพื้นหลัง ให้คลิกเลือกที่เมนูที่ต้องการ จากนั้น 4.1 ที่หัวข้อ "ภาพพื้นหลัง"  (แก้ไขภาพพื้นหลัง) จะปรากฎหน้าต่างให้เลือกอัพโหลดรูป ซึ่งมีสองรูปแบบคือ   - "เลือกภาพสำเร็จรูป" คือ ใช้ภาพที่ทาง ReadyPlanet ออกแบบมาให้เลือกใช้งานได้ทันที หรือ   - "อัพโหลดภาพใหม่" เพื่อเลือกรูปภาพที่คุณออกแบบเองจากเครื่องคอมพิวเตอร์ของคุณ กรณีเลือกภาพสำเร็จรูป : จะแสดงผลภาพพื้นหลังของเมนูหลากรูปแบบ หลายสีสัน มาให้คุณได้ใช้งานอย่างง่าย เพียงแค่คลิกเลือกใช้รูปแบบที่ต้องการ   กรณีเลือก Upload ภาพใหม่ : จะปรากฎหน้าต่างให้คุณคลิกอัพโหลดรูปภาพพื้นหลังเมนูที่ต้องการจากเครื่องคอมพิวเตอร์ และหลังจากที่อัพโหลดรูปไปแล้ว คุณสามารถกลับมาเลือก แก้ไขภาพเดิม เพื่อปรับการแสดงของภาพพื้นหลังว่า จะแสดงผลครั้งเดียว , แสดงต่อเนื่องจนเต็มพื้นที่, หรือแสดงแบบขยายภาพเต็มพื้นที่ (หากรูปภาพที่อัพโหลดมีขนาดใหญ่ อาจจะทำให้ไม่เห็นความแตกต่างระหว่างแสดงครั้งเดียว กับ แสดงต่อเนื่อง) ตัวอย่างการแสดงผลเมนูด้านบนระดับ 1 แบบใช้สีพื้นหลังปกติ และแบบใส่ภาพพื้นหลังเมนู การลบภาพพื้นหลังเมนู สามารถลบภาพพื้นหลังเมนูเพื่อแสดงผลสีพื้นหลังปกติได้ โดยภายใต้หัวข้อ "ภาพพื้นหลัง" คลิก(ลบภาพพื้นหลัง) จากนั้นคลิกปุ่ม "บันทึกและใช้กับเว็บไซต์" เพื่อยืนยันการเปลี่ยนแปลง   หมายเลข 5. ปุ่มบันทึกและใช้กับเว็บไซต์ : คลิก ปุ่มบันทึกและใช้กับเว็บไซต์ เพื่อยืนยันการแก้ไขเปลี่ยนแปลง  และสามารถคลิกปุ่ม กลับสู่ค่าเดิมหากต้องให้การแสดงผลเมนูต่าง ๆ ย้อนกลับไปเป็นเหมือนที่บันทึกไว้ก่อนการแก้ไขครั้งนี้ค่ะ หมายเลข 6. ตำแหน่งการแสดงผล : แสดงตัวอย่างการเปลี่ยนแปลงในเมนูที่คุณกำลังทำการปรับแต่งอยู่ในขณะนั้น                                             การตั้งค่าการตกแต่ง Theme เว็บไซต์ในแท็บ "ข้อความ" หมายเลข 7. ตัวอักษรปกติ : สามารถเลือกสีตัวอักษร และการแสดงผลตัวอักษรแบบตัวหนา ตัวเอียง หรือขีดเส้นใต้ตัวอักษรได้ในหัวข้อนี้ หมายเลข 8. ตัวอักษรเมื่อถูกเมาส์ : สามารถตั้งค่าให้สีและการแสดงผลตัวอักษรเปลี่ยนไปเมื่อนำเมาส์ไปชี้ที่เมนูนั้น ๆ ได้ โดยต้องกำหนดค่าให้ต่างกับตัวอักษรปกติค่ะ ตัวอย่างการแสดงผลตัวอักษรปกติ และตัวอักษรเมื่อถูกเมาส์ ของเมนูด้านบน หมายเลข 9. แบบอักษรและขนาด คุณสามารถเลือกใช้ Font ตัวอักษรรูปแบบต่าง ๆ มากมาย ทั้ง Fonts พิเศษสวยงามนับร้อยแบบ ทั้งสำหรับตัวอักษรภาษาไทย, ตัวอักษรภาษาอังกฤษ หรือ Fonts มาตรฐานสุดคลาสสิค รวมกว่า 160 รูปแบบ  เพียงคลิกที่หัวข้อแบบอักษร ก็จะปรากฎหน้าต่าง Pop Up ขึ้นมาแสดงผลรูปแบบตัวอักษรต่าง ๆ เป็นตัวอย่างในขณะที่กำลังเลือกรูปแบบตัวอักษรทันที และสามารถคลิกเลือกใช้ได้ตามต้องการค่ะ หมายเลข 10 การจัดตำแหน่ง : สามารถเลือกจัดตำแหน่งการแสดงผลของ "ชื่อเว็บไซต์" และ "Tag line" (คำอธิบายหรือสโลแกนเว็บไซต์) ให้แสดงผลแบบ ชิดซ้าย, กึ่งกล่าง, หรือ ชิดขวา บนพื้นที่ส่วนหัวของเว็บไซต์ได้ นอกจากนี้ ยังมีอีกหนึ่งช่องทางในการปรับแต่งเว็บไซต์ในจุดที่ต้องการได้อย่างง่ายและสะดวกยิ่งขึ้น  เพียงนำเมาส์ไปบริเวณตำแหน่งที่ต้องการแก้ไข เช่น บริเวณพื้นที่ด้านบนที่แสดงผลภาพส่วนหัวของเว็บไซต์ ให้คลิกที่เมนู "ตกแต่ง"   ระบบจะแสดงผลเมนู "ตกแต่ง" พร้อมเข้าสู่ตำแหน่งเมนูที่คุณได้เลือกปรับแต่งให้ทันทีค่ะ (ในตัวอย่างนี้คือเมนู พื้นที่ด้านบน ค่ะ) และคุณสามารถปรับแต่งแก้ไขเว็บไซต์ได้ตามขั้นตอนหมายเลข 1 - 10 ข้างต้นค่ะ ตัวอย่างการแสดงผลเมนู "ตกแต่ง" ที่ตำแหน่งเมนูด้านบนระดับ 1 ตัวอย่างการแสดงผลเมนู ตกแต่ง ที่ตำแหน่งรายละเอียดเนื้อหา 2.วิธีการกำหนดค่าทึบแสงของพื้นหลัง การกำหนดค่าทึบแสง เป็นการกำหนดให้พื้นที่บริเวณที่ต้องการนั้นโปร่งใสขึ้น สามารถกำหนดค่าทึบแสงได้ที่ตำแหน่งดังนี้ - พื้นที่ส่วนหัว - แถบเมนูด้านบน - เมนูด้านบนระดับ 1 - เมนูด้านบนระดับ 2 - เมนูด้านข้าง - เมนูด้านข้างระดับ 1 - เมนูด้านข้างระดับ 2 - พื้นที่เนื้อหา - หัวข้อ Show Boxes - ปุ่มสั่งซื้อ - พื้นที่ด้านล่าง การกำหนดค่าทึบแสง มีวิธีดังนี้ 1. คลิกที่เมนู ตกแต่ง และคลิกที่ ชุดรูปแบบธีม ที่ใช้งานอยู่ 2. คลิกตำแหน่งที่ต้องการกำหนดค่าทึบแสง (เช่น พื้นที่เนื้อหา ดังตัวอย่างด้านล่าง)  3. ในแท็บ "พื้นหลัง" หัวข้อ ทึบแสง ให้ทำการเลื่อน slide เพื่อกำหนดตัวเลขของค่าทึบแสง ซึ่งการแสดงผลความทึบแสงของพื้นหลัง จะขึ้นอยู่กับการกำหนดตัวเลขของค่าทึบแสง หากกำหนดตัวเลขที่มีค่าน้อยลง จะยิ่งทำให้พื้นหลังโปร่งใสขึ้น ตัวอย่างการแสดงผลของพื้นที่เนื้อหา ก่อนกำหนดค่าทึบแสง ตัวอย่างการแสดงผลของพื้นที่เนื้อหา หลังจากที่กำหนดค่าทึบแสงเหลือ 50% จะมองเห็นพื้นหลังของเว็บไซต์ในบริเวณเนื้อหาค่ะ 3.วิธีการใส่รูปภาพพื้นหลังเว็บไซต์ ภาพพื้นหลังเว็บไซต์ (Website Background) แสดงผลในส่วนพื้นหลังที่เป็นที่ว่างทางซ้ายและขวาของส่วนพื้นที่เนื้อหา เว็บมาสเตอร์สามารถอัพโหลดรูปภาพพื้นหลังด้วยภาพนามสกุล .jpg , .gif , .png ขนาดไฟล์รูป (File size) ไม่เกิน 5 MB ภาพพื้นหลังเว็บไซต์ แบ่งออกเป็น 2 ส่วนการใช้งานให้เลือก คือ เลือกรูปภาพสำเร็จรูปจากระบบ หรือ อัพโหลดรูปภาพใหม่เองค่ะ ขั้นตอนการใส่รูปภาพพื้นหลังเว็บไซต์ 1. นำเมาส์ไปวางตำแหน่งของภาพพื้นหลังเว็บไซต์ ระบบจะแสดงไอคอน  ให้นำเมาส์ไปวาง และคลิก "แก้ไขภาพพื้นหลัง" 1.        2.ระบบแสดงหน้าต่างสำหรับจัดการรูปภาพ ให้คลิกที่ เลือกภาพสำเร็จ เพื่อเลือกรูปภาพจากระบบ หรือ Upload ภาพใหม่ เพื่อเลือกใช้ภาพพื้นหลังที่คุณออกแบบตกแต่งมาเอง 2.1. เลือกใช้ภาพพื้นหลังสำเร็จรูป : ระบบมีภาพพื้นหลังเว็บไซต์ให้เลือกใช้งานได้ทันที 2.2. Upload ภาพใหม่ : สามารถ Upload ภาพพื้นหลังที่ได้ออกแบบตกแต่งมา จากเครื่องคอมพิวเตอร์ของคุณเอง  3.หลังจากใส่ภาพพื้นหลังทั้งแบบเลือกภาพจากระบบหรืออัพโหลดภาพเองแล้ว รวมถึงการคลิกตัวเลือก "แก้ไขภาพเดิม" คุณสามารถเลือกการแสดงผลของภาพได้ 3 รูปแบบ คือ แสดงผลครั้งเดียว , แสดงผลต่อเนื่อง (แสดงภาพซ้ำจนเต็มพื้นที่ภาพพื้นหลัง) หรือ แสดงเต็มพื้นที่ (แสดงผลภาพเดียวจนเต็มพื้นที่ภาพพื้นหลัง)      3.1. แสดงครั้งเดียว : จะแสดงผลภาพตามขนาดจริงเพียงครั้งเดียวเท่านั้น จึงควรเตรียมภาพให้มีขนาดที่เหมาะสมคือ 1280x800 pixelsซึ่งจะแสดงผลพอดีกับหน้าจอคอมพิวเตอร์ทั่วไปในปัจจุบัน      ตัวอย่างการแสดงผลภาพพื้นหลัง แสดงครั้งเดียว (ภาพเล็กกว่าพื้นหลังเว็บไซต์ ทำให้มองเห็นสีพื้นหลังเว็บไซต์สีชมพูที่ขอบเว็บไซต์ซ้ายและขวา) 3.2. แสดงต่อเนื่อง : เหมาะสำหรับกรณีที่ภาพพื้นหลังของท่านเป็นภาพขนาดเล็ก จึงควรเลือกให้การแสดงผลภาพแสดงต่อเนื่องจนเต็มส่วนพื้นหลัง ตัวอย่างการแสดงผลภาพพื้นหลัง แสดงต่อเนื่อง  (มีรอยต่อเกิดขึ้นระหว่างขอบซ้ายขวาของภาพ)  3.3. แสดงพอดีจอ : เหมาะกับการแสดงภาพพื้นหลังที่มีขนาดพอดีกับหน้าจอคอมพิวเตอร์ ขนาดที่เหมาะสมคือ 1280x800 pixels หากภาพมีขนาดเล็กระบบจะขยายภาพนั้นให้เต็มจอ ส่งผลให้ภาพแสดงผลไม่ชัดเจน ตัวอย่างการแสดงผลภาพพื้นหลัง แสดงพอดีจอ (ไม่แสดงสีพื้นหลังหรือขอบรอยต่อระหว่างภาพ)