O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

คู่มือ อบรม Flexi content

1.447 visualizações

Publicada em

คู่มือ อบรมการใช้งาน FLEXIContent นี้จัดทำเพื่อใช้ประกอบการอบรม การสร้างเว็บไซต์ด้วย Joomla! (เวอร์ชั่น 3) หลักสูตรขั้นสูง Joomla Advanced Content Management System โดย http://colorpack.co.th/

Publicada em: Internet

คู่มือ อบรม Flexi content

  1. 1. www.colorpack.co.th อบรมการใช้งาน Joomla Advanced Content Management System
  2. 2. www.colorpack.co.th พิศาล เชื้อชาติไชย (บู) Project Manager - ColorPack Creations Co., Ltd. www.facebook.com/chueachatchai www.colorpack.co.th www.joomlachannel.com www.colorpackstore.com
  3. 3. www.colorpack.co.th เป็นระบบจัดการเนื้อหา โดยสามารถ สร้างชนิดของเนื้อหา (Type)ได้ โดย สามารถเพิ่มช่องในการกรอกข้อมูลได้ หลายชนิด (CCK) FLEXIContent คืออะไร Content Construction Kit
  4. 4. www.colorpack.co.th FLEXIContent ดีอย่างไร - นำเนื้อหาจาก joomla content มาใช้ได้เลย - ง่ายต่อการใช้งาน - มีความยืดหยุ่นในการใช้งานสูง - รองรับเนื้อหาจำนวนมากได้ - มีระบบ Workflow - รองรับการทำงานหลายภาษาในหน้าเดียว
  5. 5. www.colorpack.co.th ต่างกับ Joomla ปรกติอย่างไร
  6. 6. www.colorpack.co.th ต่างกับ Joomla ปรกติอย่างไร
  7. 7. www.colorpack.co.th การแสดงผล ชนิดของเนื้อหา
  8. 8. www.colorpack.co.th ตัวอย่างเว็บที่ใช้ FLEXIContent
  9. 9. www.colorpack.co.th FLEXIContent เว็บหลัก : www.flexicontent.org Github : https://github.com/ FLEXIcontent/flexicontent-cck
  10. 10. www.colorpack.co.th ติดตั้ง FLEXIContent
  11. 11. www.colorpack.co.th ติดตั้ง FLEXIContent
  12. 12. www.colorpack.co.th ติดตั้ง FLEXIContent
  13. 13. www.colorpack.co.th ติดตั้ง FLEXIContent
  14. 14. www.colorpack.co.th เข้าใช้งาน FLEXIContent
  15. 15. www.colorpack.co.th เตรียมความพร้อม FLEXIContent คลิ๊กอัปเดต ให้หมดแล้ว คลิ๊ก Refresh
  16. 16. www.colorpack.co.th เตรียมความพร้อม FLEXIContent คลิ๊ก Configuration
  17. 17. www.colorpack.co.th เตรียมความพร้อม FLEXIContent คลิ๊ก Save & Close
  18. 18. www.colorpack.co.th เริ่มต้นใช้งาน FLEXIContent
  19. 19. www.colorpack.co.th หน้าหลัก FLEXIContent ส่วนรายงาน แจ้งเตือน Quick Icons เมนู
  20. 20. www.colorpack.co.th ขั้นตอนการทำงาน สร้าง Templates สร้าง Type คิดรูปแบบการ แสดงผล สร้าง Fields นำ Fields ไปแสดง ในแทมเพลต ตั้งค่า Type ให้ใช้ เทมเพลตที่สร้าง
  21. 21. www.colorpack.co.th สร้าง Type
  22. 22. www.colorpack.co.th Type คืออะไร Type หรือ ชนิดของเนื้อหา เป็นการ กำหนดการแสดงผลของเนื้อหาโดย สามารถกำหนดช่องในการกรอกข้อมูล และการแสดงผลให้แตกต่างกันได้
  23. 23. www.colorpack.co.th ตัวอย่าง Type
  24. 24. www.colorpack.co.th หน้ารวม Type คลิ๊กเมนู Type สร้าง Type ใหม่ รายการ Type
  25. 25. www.colorpack.co.th สร้าง Type ใหม่ ใส่ชื่อ ของ Type บันทึก
  26. 26. www.colorpack.co.th หน้ารวม Type หลังจากบันทึก เทมเพลตที่ใช้ชื่อ Type ที่เราสร้าง จำนวน Fields
  27. 27. www.colorpack.co.th สร้าง Fields
  28. 28. www.colorpack.co.th Fields คืออะไร Fields หรือ เขตข้อมูล เป็นการสร้าง ช่องในการกรอกข้อมูล หรือ ช่องในการ ใส่ข้อมูล ซึ่งมีอยู่หลายชนิด เช่น Fields File : ใช้ในการ Download ไฟล์ Fields Images : ใช้ในการ ใส่รูป Fields Text : ใช้ในการ ใส่ข้อความ
  29. 29. www.colorpack.co.th หน้ารวม Fields Firlds เหล่านี้ ไม่ สามารถลบได้เนื่องจาก เป็น ฟิลด์ บังคับที่ต้องมี ทุก Type
  30. 30. www.colorpack.co.th หน้ารวม Fields คลิ๊กเมนู Fields สร้าง Field ใหม่
  31. 31. www.colorpack.co.th ขั้นตอนการสร้าง Fields ใส่ชื่อ ฟิลด์ *ภาษาอังกฤษเท่านั้น ใส่ป้าย ฟิลด์ เลือก ฟิลด์ ที่ต้องการ
  32. 32. www.colorpack.co.th ขั้นตอนการสร้าง Fields คลิ๊กเพื่อเลือก Type ที่จะใช้ ฟิลด์ นี้ เมื่อบันทึก จะเห็น ฟิลด์ ที่เราสร้าง
  33. 33. www.colorpack.co.th สร้าง Templates
  34. 34. www.colorpack.co.th Templates คืออะไร เทมเพลต เป็นพื้นที่ ที่เราจะเอา ฟิลด์ มา วางเพื่อแสดงผล เป็น รูปแบบการแสดง ผลของเนื้อหา ซึ่งแบ่งออกเป็นเทมเพลต ของ Category และแทมเพลตของ item หรือ type โดยการวาง ฟิลด์ ใช้การลาก วาง ฟิลด์ ลงไปในตำแหน่งของเทมเพลต
  35. 35. www.colorpack.co.th Templates เมนู templates ปุ่ม copy templates ปุ่ม จัดการ รูป แบบ item ปุ่ม จัดการ รูป แบบ item ปุ่ม จัดการ รูป แบบ Category
  36. 36. www.colorpack.co.th เทมเพลตรูปแบบต่างๆ
  37. 37. www.colorpack.co.th Title above-description-line1 above-description-line1-nolabel above-description-line2 above-description-line2-nolabel Description under-description-line1 under-description-line1-nolabel under-description-line2 under-description-line2-nolabel แสดงก่อน Description nolabel หมายถึงไม่แสดง ชื่อ ฟิลด์ แสดงหลัง Description nolabel หมายถึงไม่แสดง ชื่อ ฟิลด์ Templates Blog Category Layout
  38. 38. www.colorpack.co.th Templates Blog Category Layout
  39. 39. www.colorpack.co.th Title fields_top before-description Description after-description fields_bottom แสดงก่อน Description โดย fields_top จะถูก กำหนดให้แสดงฟิลด์ Author name ,Created date, Revisor name , Revised date and time, Categories, rating favourites สามารถไปตั้งค่า เปิดปิดได้ ที่ Type แสดงหลัง Description โดย fields_top จะถูก กำหนดให้แสดงฟิลด์ Categories และ tag สามารถไปตั้งค่า เปิดปิดได้ ที่ Type Templates Blog Item Layout
  40. 40. www.colorpack.co.th Templates Blog Item Layout
  41. 41. www.colorpack.co.th Templates Default Category Layout Title Field 1 Field 2 Field 3 Table ตำแหน่ง Table สามารถ นำฟิลด์ที่ต้องการมาแสดง ได้ ช่อง Title จะถูกกำหนด ให้แสดง ชื่อเนื้อหาและลิงค์ ได้
  42. 42. www.colorpack.co.th Templates Default Category Layout
  43. 43. www.colorpack.co.th Templates Default Item Layout Title subtitle1 subtitle2 subtitle3 bottom subtitle_tab1 subtitle_tab2 subtitle_tab3 subtitle_tab4 subtitle_tab5 subtitle_tab6 bottom_tab1 bottom_tab2 bottom_tab3 bottom_tab4 bottom_tab5 bottom_tab6 Images Top Description รายชื่อ ตำแหน่ง ของ เทมเพลต โดยจะมีตำแหน่ง tab ซึ่งชื่อ tab จะตั้งค่าได้ที่ Type
  44. 44. www.colorpack.co.th Templates Default Item Layout
  45. 45. www.colorpack.co.th Templates FAQ Category Layout รายชื่อ ตำแหน่ง ของ เทมเพลต โดย nolabel หมายถึงไม่แสดงชื่อ ฟิลด์ Title aftertitle aftertitle_nolabel aftertitle2 aftertitle_nolabel2 aftertitle3 aftertitle_nolabel3
  46. 46. www.colorpack.co.th Templates FAQ Category Layout
  47. 47. www.colorpack.co.th Templates FAQ Item Layout Title subtitle1 subtitle2 subtitle3 bottom subtitle_tab1 subtitle_tab2 subtitle_tab3 subtitle_tab4 subtitle_tab5 subtitle_tab6 bottom_tab1 bottom_tab2 bottom_tab3 bottom_tab4 bottom_tab5 bottom_tab6 Images Top Description รายชื่อ ตำแหน่ง ของ เทมเพลต โดยจะมีตำแหน่ง tab ซึ่งชื่อ tab จะตั้งค่าได้ที่ Type
  48. 48. www.colorpack.co.th Templates FAQ Item Layout
  49. 49. www.colorpack.co.th Title ItemTitle Item Templates items-tabbed Category Layout รายชื่อ ตำแหน่ง ของ เทมเพลต โดยจะมีตำแหน่ง tab ซึ่งชื่อ tab จะตั้งค่าได้ที่ Type Title Item รูปแบบจะแสดงเนื้อหาแบบ Tap Title subtitle1 subtitle2 subtitle3 bottom subtitle_tab subtitle_tab subtitle_tab subtitle_tab subtitle_tab subtitle_tab bottom_tab1 bottom_tab2 bottom_tab3 bottom_tab4 bottom_tab5 bottom_tab6 Images Top Description
  50. 50. www.colorpack.co.th Templates items-tabbed Category Layout รูปแบบจะแสดงเนื้อหาแบบ Tap
  51. 51. www.colorpack.co.th Templates Presentation Category Layout Title subtitle1 subtitle2 subtitle3 bottom subtitle_tab1 subtitle_tab2 subtitle_tab3 subtitle_tab4 subtitle_tab5 subtitle_tab6 bottom_tab1 bottom_tab2 bottom_tab3 bottom_tab4 bottom_tab5 bottom_tab6 Images Top Description เทมเพลตนี้จะนำเอารูปแบบ ของ Item มาแสดง
  52. 52. www.colorpack.co.th Templates Presentation Category Layout
  53. 53. www.colorpack.co.th การนำ ฟิลด์มาแสดงในแทมเพลต การนำ ฟิลด์มาแสดงในแทมเพลต ใช้วิธีลาก ฟิลด์ ด้านซ้ายมือ มาวางในตำแหน่งของเทมเพลตขวามือ
  54. 54. www.colorpack.co.th การตั้งค่าใช้แทมเพลต ใน Type ไปที่เมนู Type แล้วคลิ๊กที่ ชื่อของ Type ด้านขวามือ ล่างสุดเลือก Default item layout ที่ ต้องการ
  55. 55. www.colorpack.co.th การตั้งค่าใช้แทมเพลต ใน Category
  56. 56. www.colorpack.co.th การตั้งค่าใช้แทมเพลต ใน Category
  57. 57. www.colorpack.co.th สร้าง Type Download ใช้แสดง ข้อมูล ดาวน์โหลดไฟล์
  58. 58. www.colorpack.co.th สร้าง Type Download คลิ๊กเมนู Type สร้าง Type ใหม่
  59. 59. www.colorpack.co.th สร้าง Type Download ใส่ชื่อของ Type บันทึก
  60. 60. www.colorpack.co.th คลิ๊กเมนู Fields สร้าง Field ใหม่ สร้าง Fields Download
  61. 61. www.colorpack.co.th สร้าง Fields Download ใส่ป้ายชื่อฟิลด์ ใส่ชื่อ ฟิลด์ *ภาษาอังกฤษเท่านั้น เลือก ฟิลด์ ที่ต้องการ
  62. 62. www.colorpack.co.th สร้าง Fields Download เลือก Type ที่จะใช้งาน
  63. 63. www.colorpack.co.th สร้าง เทมเพลต Download คลิ๊กเมนู Templates คลิ๊กเพื่อ คัดลอก เทมเพลต
  64. 64. www.colorpack.co.th สร้าง เทมเพลต Download
  65. 65. www.colorpack.co.th สร้าง เทมเพลต Download คลิ๊กเพื่อเข้าไปแก้ไข Item Layout
  66. 66. www.colorpack.co.th สร้าง เทมเพลต Download ลาก ฟิลด์ ไฟล์ดาวน์โหลดด้านซ้ายมือ มาวางใน ตำแหน่งของเทมเพลตขวามือแล้วบันทึก
  67. 67. www.colorpack.co.th สร้าง เทมเพลต Download คลิ๊กเพื่อเข้าไปแก้ไข Category Layout
  68. 68. www.colorpack.co.th สร้าง เทมเพลต Download ลาก ฟิลด์ ไฟล์ดาวน์โหลดด้านซ้ายมือ มาวางใน ตำแหน่งของเทมเพลตขวามือแล้วบันทึก
  69. 69. www.colorpack.co.th สร้าง Category Download คลิ๊กเมนู Category สร้าง Category ใหม่
  70. 70. www.colorpack.co.th สร้าง Category Download ใส่ชื่อ Category ใหม่ เลือกเทมเพลต
  71. 71. www.colorpack.co.th แก้ไข Type ให้ใช้เทมเพลต Download คลิ๊กเมนู Type คลิ๊กชื่อ Type Download เพื่อแก้ไข
  72. 72. www.colorpack.co.th แก้ไข Type ให้ใช้เทมเพลต Download เลือก Default Item layout เป็น เทมเพลต Download แล้ว บันทึก
  73. 73. www.colorpack.co.th สร้าง Item ใหม่โดยใช้ Type Download คลิ๊กเมนู Item คลิ๊กเพื่อสร้างเนื้อหาใหม่
  74. 74. www.colorpack.co.th สร้าง Item ใหม่โดยใช้ Type Download เมื่อคลิ๊กสร้าง Item ใหม่จะมีหน้าต่างมาให้เลือก Type ให้เลือก Download
  75. 75. www.colorpack.co.th สร้าง Item ใหม่โดยใช้ Type Download ใส่ชื่อของเนื้อหา เลือก Category
  76. 76. www.colorpack.co.th สร้าง Item ใหม่โดยใช้ Type Download คลิ๊ก Tap Item Type ฟิลด์ ไฟล์ดาวน์โหลด ให้คลิ๊ก Add File
  77. 77. www.colorpack.co.th สร้าง Item ใหม่โดยใช้ Type Download คลิ๊ก เลือกไฟล์จากเครื่อง ใส่ชื่อไฟล์ ใส่รายละเอียด ไฟล์ อัปโหลดไฟล์
  78. 78. www.colorpack.co.th สร้าง Item ใหม่โดยใช้ Type Download ไฟล์ดาวน์โหลดที่ถูกใช้งานแล้ว จะมีขีดและเป็นสีแดง
  79. 79. www.colorpack.co.th สร้าง Menu ใหม่ * การสร้างเมนู จะนำไปไว้กลุ่มเมนูไหนขึ้นอยู่กับเจ้าของเว็บ ไม่จำเป็นต้องเป็น Mainmenu
  80. 80. www.colorpack.co.th สร้าง Menu ใหม่
  81. 81. www.colorpack.co.th สร้าง Menu ใหม่
  82. 82. www.colorpack.co.th ด้านหน้าเว็บ Category Layout
  83. 83. www.colorpack.co.th ด้านหน้าเว็บ Item Layout
  84. 84. www.colorpack.co.th ตั้งค่า ฟิลด์ไฟล์ เพิ่มเติม
  85. 85. www.colorpack.co.th สร้าง Type Gallery เพื่อแสดงรูปภาพแบบแกลเลอรี
  86. 86. www.colorpack.co.th สร้าง Type Gallery คลิ๊กเมนู Type สร้าง Type ใหม่
  87. 87. www.colorpack.co.th สร้าง Type Gallery ใส่ชื่อของ Type บันทึก Gallery
  88. 88. www.colorpack.co.th คลิ๊กเมนู Fields สร้าง Field ใหม่ สร้าง Fields Gallery
  89. 89. www.colorpack.co.th สร้าง Fields Images Show แสดงหน้า Category ฟิลด์นี้จะแสดงรูปเดียว
  90. 90. www.colorpack.co.th สร้าง Fields Gallery หากต้องการให้ใส่รูปได้หลายรูปเพื่อทำ Gallery ให้ คลิ๊กเลือก Acts as gallery เป็น Yes
  91. 91. www.colorpack.co.th สร้าง เทมเพลต สำหรับ Gallery คลิ๊กเมนู Templates คลิ๊กเพื่อ คัดลอก เทมเพลต
  92. 92. www.colorpack.co.th สร้าง เทมเพลต Gallery Gallery Gallery
  93. 93. www.colorpack.co.th สร้าง เทมเพลต Gallery คลิ๊กเพื่อเข้าไปแก้ไข Item Layout
  94. 94. www.colorpack.co.th สร้าง เทมเพลต Download ลาก ฟิลด์ Galleryด้านซ้ายมือ มาวางในตำแหน่ง ของเทมเพลตขวามือแล้วบันทึก
  95. 95. www.colorpack.co.th สร้าง เทมเพลต Gallery คลิ๊กเพื่อเข้าไปแก้ไข Category Layout
  96. 96. www.colorpack.co.th สร้าง เทมเพลต Download ลาก ฟิลด์ Images Show ด้านซ้ายมือ มาวางใน ตำแหน่งของเทมเพลตขวามือแล้วบันทึก
  97. 97. www.colorpack.co.th สร้าง Category Gallery คลิ๊กเมนู Category สร้าง Category ใหม่
  98. 98. www.colorpack.co.th สร้าง Category Gallery ใส่ชื่อ Category ใหม่ เลือกเทมเพลต
  99. 99. www.colorpack.co.th แก้ไข Type ให้ใช้เทมเพลต Gallery คลิ๊กเมนู Type คลิ๊กชื่อ Type Gallery เพื่อแก้ไข
  100. 100. www.colorpack.co.th แก้ไข Type ให้ใช้เทมเพลต Gallery เลือก Default Item layout เป็น เทมเพลต Gallery แล้ว บันทึก
  101. 101. www.colorpack.co.th สร้าง Item ใหม่โดยใช้ Type Gallery คลิ๊กเมนู Item คลิ๊กเพื่อสร้างเนื้อหาใหม่
  102. 102. www.colorpack.co.th สร้าง Item ใหม่โดยใช้ Type Gallery เมื่อคลิ๊กสร้าง Item ใหม่จะมีหน้าต่างมาให้เลือก Type ให้เลือก Gallery
  103. 103. www.colorpack.co.th สร้าง Item ใหม่โดยใช้ Type Gallery ใส่ชื่อของเนื้อหา เลือก Category
  104. 104. www.colorpack.co.th ใส่รูปลงในฟิลด์ Images Show
  105. 105. www.colorpack.co.th ใส่รูปลงในฟิลด์ Images Show
  106. 106. www.colorpack.co.th ใส่รูปลงในฟิลด์ Images Show ช่องใส่คำอธิบายรูปควร ใส่ทั้งสามช่องหากต้องการลบให้ติ๊ก ช่องนี้แล้วบันทึก
  107. 107. www.colorpack.co.th ใส่รูปลงในฟิลด์ Gallery สังเกตว่าฟิลด์นี้ใส่รูปได้หลายรูปเพราะ Gallery จา กการคลิ๊กเลือก Acts as gallery เป็น Yes ในฟิลด์
  108. 108. www.colorpack.co.th ใส่รูปลงในฟิลด์ Gallery เลือกอัพโหลดแบบ Multiple Upload เลือกไฟล์ได้ทีละหลายไฟล์
  109. 109. www.colorpack.co.th ใส่รูปลงในฟิลด์ Gallery
  110. 110. www.colorpack.co.th ใส่รูปลงในฟิลด์ Gallery คลิ๊กเพื่อเพิ่ม จากนั้นคลิ๊ก Select Images
  111. 111. www.colorpack.co.th ใส่รูปลงในฟิลด์ Gallery หลังจากใส่รูปไปแล้ว ให้คลิ๊กบันทึก
  112. 112. www.colorpack.co.th สร้าง Menu ใหม่ * การสร้างเมนู จะนำไปไว้กลุ่มเมนูไหนขึ้นอยู่กับเจ้าของเว็บ ไม่จำเป็นต้องเป็น Mainmenu
  113. 113. www.colorpack.co.th สร้าง Menu ใหม่
  114. 114. www.colorpack.co.th สร้าง Menu ใหม่
  115. 115. www.colorpack.co.th ด้านหน้าเว็บ
  116. 116. www.colorpack.co.th ปรับแต่งหน้าเว็บ Category Layout ให้เข้าไปปรับแก้ ฟิลด์ Images show กำหนด Display Label เป็น No และเปลี่ยนขนาดของ Thumbnail in Category View เป็น Medium
  117. 117. www.colorpack.co.th ปรับแต่งหน้าเว็บ Item Layout ให้เข้าไปปรับแก้ ฟิลด์ Images show กำหนด Display Label เป็น No และเปลี่ยนขนาดของ Medium thumbnails เป็น 200x150 หรือตามขนาดที่ต้องการ
  118. 118. www.colorpack.co.th สร้าง Type Staff เพื่อแสดงข้อมูลบุคลากร
  119. 119. www.colorpack.co.th สร้าง Type Staff คลิ๊กเมนู Type สร้าง Type ใหม่
  120. 120. www.colorpack.co.th สร้าง Type Staff ใส่ชื่อของ Type บันทึก บุคลากร
  121. 121. www.colorpack.co.th คลิ๊กเมนู Fields สร้าง Field ใหม่ สร้าง Fields Staff
  122. 122. www.colorpack.co.th สร้าง Fields แบบ Radio เลือก Radio
  123. 123. www.colorpack.co.th สร้าง Fields แบบ Checkbox การใส่ข้อมูลจะต้องใส่ เป็นรูปแบบที่กำหนด ข้อมูลที่เก็บลง ฐานข้อมูล ข้อมูลที่แสดงคั่นด้วย :: ปิดด้วย %% เว้นวรรค
  124. 124. www.colorpack.co.th สร้าง Fields แบบ Date เลือก Date
  125. 125. www.colorpack.co.th สร้าง Fields แบบ Select เลือก Select
  126. 126. www.colorpack.co.th สร้าง Fields แบบ Select ข้อมูลที่เก็บลง ฐานข้อมูล ข้อมูลที่แสดงคั่นด้วย :: ปิดด้วย %% เว้นวรรค การใส่ข้อมูลจะต้องใส่ เป็นรูปแบบที่กำหนด press_office::สำนักงบประมาณ%% fisheries_office::สำนักงาน ประมง%% statistical_office::สำนักงานสถิติ%% commercial_office::สำนักงานพาณิชย์%%
  127. 127. www.colorpack.co.th สร้าง Fields แบบ Text เลือก Text
  128. 128. www.colorpack.co.th สร้าง Fields Images เลือก images
  129. 129. www.colorpack.co.th สร้าง เทมเพลต Staff Category คลิ๊กเมนู Templates คลิ๊กเพื่อ คัดลอก เทมเพลต
  130. 130. www.colorpack.co.th สร้าง เทมเพลต Staff Item คลิ๊กเมนู Templates คลิ๊กเพื่อ คัดลอก เทมเพลต
  131. 131. www.colorpack.co.th สร้าง เทมเพลต Staff Category คลิ๊กเพื่อเข้าไปแก้ไข Category Layout
  132. 132. www.colorpack.co.th สร้าง เทมเพลต Staff Category
  133. 133. www.colorpack.co.th สร้าง เทมเพลต Staff Item คลิ๊กเพื่อเข้าไปแก้ไข Items Layout
  134. 134. www.colorpack.co.th สร้าง เทมเพลต Staff Item
  135. 135. www.colorpack.co.th สร้าง Category บุคลากร คลิ๊กเมนู Category สร้าง Category ใหม่
  136. 136. www.colorpack.co.th สร้าง Category บุคลากร ใส่ชื่อ Category ใหม่ เลือกเทมเพลต
  137. 137. www.colorpack.co.th แก้ไข Type ให้ใช้เทมเพลต staff-item คลิ๊กเมนู Type คลิ๊กชื่อ Type บุคลากร เพื่อแก้ไข
  138. 138. www.colorpack.co.th แก้ไข Type ให้ใช้เทมเพลต staff-item เลือก Default Item layout เป็น เทมเพลต staff- item แล้ว บันทึก
  139. 139. www.colorpack.co.th สร้าง Item ใหม่โดยใช้ Type บุคลากร คลิ๊กเมนู Item คลิ๊กเพื่อสร้างเนื้อหาใหม่
  140. 140. www.colorpack.co.th สร้าง Item ใหม่โดยใช้ Type บุคลากร เมื่อคลิ๊กสร้าง Item ใหม่จะมีหน้าต่างมาให้เลือก Type ให้เลือก บุคลากร
  141. 141. www.colorpack.co.th สร้าง Item ใหม่โดยใช้ Type บุคลากร ใส่ชื่อของเนื้อหา เลือก Category
  142. 142. www.colorpack.co.th สร้าง Item ใหม่โดยใช้ Type บุคลากร กรอกข้อมูลให้ครบถ้วน แล้วบันทึก
  143. 143. www.colorpack.co.th สร้าง Menu ใหม่ * การสร้างเมนู จะนำไปไว้กลุ่มเมนูไหนขึ้นอยู่กับเจ้าของเว็บ ไม่จำเป็นต้องเป็น Mainmenu
  144. 144. www.colorpack.co.th สร้าง Menu ใหม่
  145. 145. www.colorpack.co.th สร้าง Menu ใหม่
  146. 146. www.colorpack.co.th ด้านหน้าเว็บ
  147. 147. www.colorpack.co.th แก้ไขรูปแบบ Category ได้
  148. 148. www.colorpack.co.th แก้ไขรูปแบบ การแสดงผลหน้า Item ได้ที่ type
  149. 149. www.colorpack.co.th การใช้งาน โมดูล
  150. 150. www.colorpack.co.th สร้างโมดูลใหม่
  151. 151. www.colorpack.co.th สร้างโมดูลใหม่
  152. 152. www.colorpack.co.th โมดูลของ Universal Content Module for FLEXIcontent มี 4 แบบ
  153. 153. www.colorpack.co.th โมดูล Layout Carousel
  154. 154. www.colorpack.co.th โมดูล Layout News
  155. 155. www.colorpack.co.th โมดูล Layout Select โมดูล Layout Default โมดูล Layout
  156. 156. www.colorpack.co.th โมดูล Layout Select FeaturedFeatured Intro items Intro items โมดูล Layout Newsโมดูล Layout Carousel
  157. 157. www.colorpack.co.th การกำหนด ขอบเขตข้อมูลที่จะนำมาแสดง แท็บ Item List: Select Items จะเป็นที่กำหนด ขอบเขตของข้อมูลว่าจะเอาข้อมูลจาก Category ไหน มาแสดง
  158. 158. www.colorpack.co.th การกำหนด ขอบเขตข้อมูลที่จะนำมาแสดง Category scope จะเป็นที่กำหนดว่าจะนำ เอา ข้อมูลจาก Category ไหนมาแสดง
  159. 159. www.colorpack.co.th การกำหนด ฟิลด์ที่นำมาแสดง Layout: Select fields จะเป็นที่กำหนดว่าจะนำ เส นอขอ้มูลอย่าไร เช่น แสดง วันที่ กำหนดขนาดรูป กำหนดความยาวชื่อ เป็นต้น
  160. 160. www.colorpack.co.th การกำหนด ฟิลด์ที่นำมาแสดง กำหนดการเปิดปิด รูป แบบของ วันที่ได้
  161. 161. www.colorpack.co.th กำหนดการเปิดปิดHits และ Vote การกำหนด ฟิลด์ที่นำมาแสดง
  162. 162. www.colorpack.co.th สามารถเลือกรูปมา แสดงได้ นอกจากนั้นยัง กำหนดขนาดเองได้ การกำหนด ฟิลด์ที่นำมาแสดง
  163. 163. www.colorpack.co.th การกำหนด รูปแบบของแต่ละ Layout เมื่อเราเลือก Layout ใดๆ จะมีการตั้งค่าของแต่ละ Layout
  164. 164. www.colorpack.co.th การกำหนด รูปแบบของแต่ละ Layout
  165. 165. www.colorpack.co.th การกำหนด รูปแบบของแต่ละ Layout เมื่อเราเลือก Layout ใดๆ จะมีการตั้งค่าของแต่ละ Layout
  166. 166. www.colorpack.co.th การกำหนด รูปแบบของแต่ละ Layout
  167. 167. www.colorpack.co.th รู้จักฟิลด์ แต่ละชนิด
  168. 168. www.colorpack.co.th Field type - Radio : การใช้งาน ฟิลด์ Radio จะเป็นแบบตัวเลือกซึ่งจะเลือกได้เพียง ตัวเลือกเดียว
  169. 169. www.colorpack.co.th Field type - Radio : การตั้งค่า ข้อมูลที่เก็บลง ฐานข้อมูล ข้อมูลที่แสดงคั่นด้วย :: ปิดด้วย %% เว้นวรรค
  170. 170. www.colorpack.co.th Field type - Radio Images : การใช้งาน ฟิลด์ Radio จะเป็นแบบตัวเลือกซึ่งจะเลือกได้เพียง ตัวเลือกเดียว แต่จะใช้รูปมาเป็นตัวเลือกแทน
  171. 171. www.colorpack.co.th Field type - Radio Images : การตั้งค่า ข้อมูลที่เก็บลง ฐานข้อมูล ชื่อรูปคั่นด้วย :: ปิดด้วย % % เว้นวรรค ชื่อข้อมูล คั่นด้วย :: สร้างโฟลเดอร์ใส่รูปแล้วนำ รูปมาใส่ตามที่ตั้งค่า
  172. 172. www.colorpack.co.th Field type - Checkbox : การใช้งาน ฟิลด์ Radio จะเป็นแบบตัวเลือกซึ่งจะเลือกได้หลาย ข้อ หรือหลายตัวเลือก
  173. 173. www.colorpack.co.th Field type - Checkbox : การตั้งค่า ข้อมูลที่เก็บลง ฐานข้อมูล ข้อมูลที่แสดงคั่นด้วย :: ปิดด้วย %% เว้นวรรค
  174. 174. www.colorpack.co.th Field type - Radio Images : การใช้งาน ฟิลด์ Radio Images จะเป็นแบบตัวเลือกซึ่งจะ เลือกได้หลายตัวเลือก แต่จะใช้รูปมาเป็นตัวเลือกแทน
  175. 175. www.colorpack.co.th Field type - Radio Images : การตั้งค่า ข้อมูลที่เก็บลง ฐานข้อมูล ชื่อรูปคั่นด้วย :: ปิดด้วย % % เว้นวรรค ชื่อข้อมูล คั่นด้วย :: สร้างโฟลเดอร์ใส่รูปแล้วนำ รูปมาใส่ตามที่ตั้งค่า
  176. 176. www.colorpack.co.th Field type - Select : การใช้งาน ฟิลด์ Select จะเป็นแบบตัวเลือกแบบหนึ่งตัวเลือก เหมาะกับการใช้งานที่มีข้อมูลมากๆ เช่น ตัวเลือกจังหวัด
  177. 177. www.colorpack.co.th Field type - Select : การตั้งค่า ข้อมูลที่เก็บลง ฐานข้อมูล ข้อมูลที่แสดงคั่นด้วย :: ปิดด้วย %% เว้นวรรค
  178. 178. www.colorpack.co.th Field type - Select Multiple : การใช้งาน ฟิลด์ Select จะเป็นแบบตัวเลือกแบบเลือกได้หลาย ตัวเลือก เช่น ชอบรถอะไร
  179. 179. www.colorpack.co.th Field type - Select Multiple : การตั้งค่า ข้อมูลที่เก็บลง ฐานข้อมูล ข้อมูลที่แสดงคั่นด้วย :: ปิดด้วย %% เว้นวรรค
  180. 180. www.colorpack.co.th Field type - File : การใช้งาน ฟิลด์ file จะเป็นฟิลด์ที่ใช้ทำระบบ ดาวน์โหลด โดย สามารถอัปโหลดไฟล์ขึ้นไปหรือใส่ URLไฟล์ ก็ได้
  181. 181. www.colorpack.co.th Field type - File : การใช้งาน คลิ๊ก เลือกไฟล์จากเครื่อง ใส่ชื่อไฟล์ ใส่รายละเอียด ไฟล์ อัปโหลดไฟล์
  182. 182. www.colorpack.co.th Field type - Image or Gallery : การใช้งาน ฟิลด์ Image or Gallery จะเป็นฟิลด์ที่ใช้ ใส่รูป หนึ่งรูปหรือใส่หลายรูปเพื่อทำ Gallery
  183. 183. www.colorpack.co.th ใส่รูปลงในฟิลด์ Images แบบรูปเดียว
  184. 184. www.colorpack.co.th ใส่รูปลงในฟิลด์ Images แบบหลายรูป เลือกอัพโหลดแบบ Multiple Upload เลือกไฟล์ได้ทีละหลายไฟล์
  185. 185. www.colorpack.co.th Field type - Mini Gallery : การใช้งาน ฟิลด์ Mini Gallery จะเป็นฟิลด์ที่ใช้ ใส่รูป ใส่ หลายรูปเพื่อทำ Gallery
  186. 186. www.colorpack.co.th Field type - Mini Gallery : การแสดงผล
  187. 187. www.colorpack.co.th Field type - Shared Video : การใช้งาน ฟิลด์ Shared Video จะเป็นฟิลด์ที่ใช้ ใส่ วีดีโอจากเว็บต่างๆ เช่น YouTube,Vimeo,D ailyMotion โดยใส่ URL ลงไป แล้วกด Fetch ข้อมูล จะมาเอง
  188. 188. www.colorpack.co.th Field type - Date : การใช้งาน ฟิลด์ Date จะเป็นฟิลด์ที่ใช้ ใส่วันที่
  189. 189. www.colorpack.co.th Field type - Text : การใช้งาน ฟิลด์ Text จะเป็นช่องให้ใส่ข้อความสั้นๆ
  190. 190. www.colorpack.co.th Field type - Text Area : การใช้งาน ฟิลด์ Text Area จะเป็นช่องให้ใส่ข้อความขนาด ใหญ่และใส่รูปภาพหรือ HTMLได้ หากอยากเปิดใช้ HTML Editor เปิดตามรูป
  191. 191. www.colorpack.co.th Field type - Weblink : การใช้งาน ฟิลด์ Weblink จะเป็นช่องให้ใส่ URL และสามารถ ใส่ได้หลายช่อง โดยไปเปิดตามรูป
  192. 192. www.colorpack.co.th Field type - Relation : การใช้งาน ฟิลด์ Relation จะเป็นฟิลด์ที่จะแสดงรายชื่อบทความ ที่เกี่ยวข้องโดยเราจะเป็นคนเลือกเอง โดยเลือก บทความจากซ้ายมือ กด +
  193. 193. www.colorpack.co.th ตั้งค่าปรับแต่งเพิ่มเติม
  194. 194. www.colorpack.co.th ซ่อนการแสดง Maintext field บาง Type เราจะไม่ได้ใช้ช่องใส่ข้อความ ใหญ่ๆ เราสามารถไปปิดได้ที่ Type ดังรูป
  195. 195. www.colorpack.co.th แก้ไข ป้าย Title ปรกติจะเป็น Title ต้องการเปลี่ยนเป็น ชื่อ- นามสกุล ให้ไปเปลี่ยนที่ Type นั้นๆ
  196. 196. www.colorpack.co.th ใส่ชื่อให้ Tab ต้องการเปลี่ยนชื่อ Tab ให้ ไปเปลี่ยนที่ Type นั้นๆ

×