ÍอºบÃรÁมÊสÃร ŒÒา§งàเÇว็ºบ´ด ŒÇวÂย
www.colorpack.co.th
พิศาล เชื้อชาติไชย (บู)
Project Manager - ColorPack Creations Co., Ltd. !
www.facebook.com/chueachatchai !
www.colorpack.co.th ! !
www.colorpack.co.th
·ท∙ÓำàเÇว็ºบàเ¾พÍอ×ื่ ÍอÐะäไÃร ?
www.colorpack.co.th
àเ¢ข ŒÒาãใ¨จàเ»ป ‡ÒาËหÁมÒาÂย¢ขÍอ§งàเÇว็ºบ·ท∙Õี·ท∙ ่ Óำ
¡กÒาÃรÇวÒา§งáแ¼ผ¹น·ท∙Õี่´ดÕี ÍอÍอ¡กáแºบºบãใËห Œãใªช Œ§งÒา¹น¹น ‹Òาàเªช×ื่Íอ¶ถ×ืÍอ
www.colorpack.co.th
¡กÓำËห¹น´ด¡กÅลØุ ‹Áมàเ»ป ‡ÒาËหÁมÒาÂย 1. คนกลุ่มไหนที่เราต้องการให้มาเว็บเรา ? 2. เมื่อมาแล้วเขาจะได้อะไรกลับไป ? 3. เมื่อมาแล้วอยากให้เขาจะทำอะไรกับเว็บเรา ?
www.colorpack.co.th
Joomla! เป็นระบบจัดการเนื้อหาบนเว็บ หรือ CMS (Content management system) ที่ เป็น Open Source ที่เขียนด้วยภาษา PHP และ ใช้ฐานข้อมูล MySQL
·ท∙ÓำäไÁมàเÅล×ืÍอ¡ก joomla! - ใช้ง่าย (ต้องเรียนรู้) - เปิดเผยโค้ด Open Source - รองรับเว็บไซต์ขนาดใหญ่ - ฟรี (ถ้าลงมือทำเอง) - ลิขสิทธิ์เป็นแบบ GNU/GPL
www.colorpack.co.th
ãใ¤คÃรãใªช Œ Joomla! ºบ ŒÒา§ง
www.colorpack.co.th
¢ขÑั้¹นµตÍอ¹น¡กÒาÃรÊสÃร ŒÒา§งàเÇว็ºบäไ«ซµต âโ´ดÂย·ท∙Ñั่Çวäไ»ป 1. ¨จ´ดªช×ื่Íอâโ´ดàเÁม¹น (Domain Name) 2. àเªช ‹Òา¾พ×ื้¹น·ท∙Õี่àเ¡ก็ºบàเÇว็ºบ (Hosting) 3. ÍอÍอ¡กáแºบºบàเÇว็ºบäไ«ซµต µตÒาÁมáแ¼ผ¹น§งÒา¹น 4. Upload àเÇว็ºบ¢ขÖึ้¹น hosting 5. »ปÃรÐะªชÒาÊสÑัÁม¾พÑั¹น¸ธ àเÇว็ºบäไ«ซµต ãใËห Œàเ»ป š¹น·ท∙Õี่ÃรÙู Œ¨จÑั¡ก 6. Update áแÅลÐะ¾พÑั²ฒ¹นÒาàเÇว็ºบäไ«ซµต www.colorpack.co.th
IP Address หมายเลขประจำเครื่องคอมพิวเตอร์ หรืออุปกรณ์ที่ใช้เชื่อมต่อกับ internet เช่น !
203.146.102.112 203.150.3.242 192.168.1.1 10.107.1.1
www.colorpack.net
ªช×ื่Íอâโ´ดàเÁม¹น คือ ชื่อเรียกเสมือน เช่น www.webmaster.or.th เป็นชื่อโดเมนของสมาคมผู้ดูแลเว็บไทย ชื่อโดเมนนั้นมีความ สำคัญมาก เพราะบ่งบอกประเภทของหน่วยงาน และสถานที่จด ทะเบียนการใช้งาน
www.colorpack.co.th
www.colorpack.co.th
Install Joomla!
¡กÒาÃรµตÔิ´ดµตÑั้§ง¨จÙูÁมÅล ‹Òา
www.colorpack.co.th
www.colorpack.co.th
Text
www.colorpack.co.th
Text
www.colorpack.co.th
Text
www.colorpack.co.th
www.colorpack.net
Text
www.colorpack.co.th
Text
www.colorpack.co.th
Text
www.colorpack.co.th
Text
www.colorpack.co.th
พิมพ์ /administrator
Text
www.colorpack.co.th
Joomla! Article Manager
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ¹น×ื้ÍอËหÒา
www.colorpack.co.th
Text
www.colorpack.co.th
¢ขÑั้¹นµตÍอ¹น¡กÒาÃร·ท∙Óำ§งÒา¹น
คิด SiteMap
สร้าง Category ตาม Sitemap
ใส่เนื้อหาตาม Category
www.colorpack.co.th
สร้างเมนูเพื่อแสดง เนื้อหา ในCategory
Site Map Ëห¹น ŒÒาáแÃร¡ก
Category ข่าว
Home
บทความ
Sub Category ข่าวบันเทิง
¢ข ‹ÒาÇวºบÑั¹นàเ·ท∙Ôิ§ง1
ข่าวกีฬา
¢ข ‹ÒาÇวºบÑั¹นàเ·ท∙Ôิ§ง1
ข่าวการเมือง
¢ข ‹ÒาÇวºบÑั¹นàเ·ท∙Ôิ§ง1 ¢ข ‹ÒาÇวºบÑั¹นàเ·ท∙Ôิ§ง1
คอมพิวเตอร์ ท่องเที่ยว
ประกาศ
ºบ·ท∙¤คÇวÒาÁม 1 ºบ·ท∙¤คÇวÒาÁม 1
ºบ·ท∙¤คÇวÒาÁม 1 ºบ·ท∙¤คÇวÒาÁม 1
www.colorpack.co.th
Article
www.colorpack.co.th
àเ¾พÔิ่Áม Category
Text
www.colorpack.co.th
Text
www.colorpack.co.th
àเ¾พÔิ่Áม àเ¹น×ื้ÍอËหÒา
Text
www.colorpack.co.th
Text
www.colorpack.co.th
Text
www.colorpack.co.th
àเ¾พÔิ่Áม link ºบ·ท∙¤คÇวÒาÁม
Text
www.colorpack.co.th
ãใÊส ‹ÃรÙู»ปãใ¹นàเ¹น×ื้ÍอËหÒา
Text
www.colorpack.co.th
ãใÊส ‹»ปØุ †ÁมÍอ ‹Òา¹นµต ‹Íอ
Text
www.colorpack.co.th
Joomla! Menu Manager
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเÁม¹นÙู
www.colorpack.co.th
àเÁม¹นÙู
Text
www.colorpack.co.th
Text
www.colorpack.co.th
www.colorpack.net
ÊสÃร ŒÒา§งàเÁม¹นÙู ãใËหÁม ‹
www.colorpack.co.th
ÊสÃร ŒÒา§งàเÁม¹นÙู äไ»ปËหÒา Category
Text
www.colorpack.co.th
ÊสÃร ŒÒา§งàเÁม¹นÙูäไ»ปËหÒา Category àเ»ป š¹นàเÁม¹นÙูÂย ‹ÍอÂย
Text
www.colorpack.co.th
www.colorpack.co.th
ÊสÃร ŒÒา§งàเÁม¹นÙูäไ»ปËหÒา Category àเ»ป š¹นàเÁม¹นÙูÂย ‹ÍอÂย
www.colorpack.co.th
ÊสÃร ŒÒา§งàเÁม¹นÙูäไ»ปËหÒา Category àเ»ป š¹นàเÁม¹นÙูÂย ‹ÍอÂย
www.colorpack.co.th
ÊสÃร ŒÒา§งàเÁม¹นÙูäไ»ปËหÒา Category àเ»ป š¹นàเÁม¹นÙูÂย ‹ÍอÂย
www.colorpack.co.th
Joomla! Module Manager
¡กÒาÃร¨จÑั´ด¡กÒาÃรâโÁม´ดÙูÅล
www.colorpack.co.th
Module Manager โมดูล ใน Joomla เป็นต ัวต ัวแสดงผล บนหน้าเว็บ มี 2 แบบ !
1.โมดูลของ คอมโพเน้น !
2.โมดูล ทีแ < สดงผลได้ดว้ ยต ัวอง
www.colorpack.co.th
Module Manager โมดูลของ คอมโพเน้น !
ั อมูลจาก คอมโพเน้นมาแสดงผล โมดูลประเภทนีB จะอาศยข้ หากคอมโพเน้นไม่มข ี อ ้ มูล โมดูลก็ไม่สามารถแสดงข้อมูลได้ ต ัวอย่าง !
B หาล่าสุด จะนําข้อมูลจาก Component โมดูล แสดงเนือ Content มาแสดง !
โมดูล แสดงเมนู จะนําข้อมูลจาก Component Menu มา แสดง !
โมดูล แสดงกระทูล ้ า่ สุด จะนําข้อมูลจาก Component Webboard มาแสดง
www.colorpack.co.th
Module Manager โมดูลของทีแ < สดงผลด้วยต ัวเอง !
่ โมดูลประเภทนีB จะสามารถแสดงผลได้ดว้ ยต ัวเอง เชน !
ํ ัน เป็นโมดูลทีแ โมดูล แสดงราคาน้าม < สดงผลโดยการดึงหน้า ํ ันมาจากเว็บบริษ ัทน้าม ํ ัน ราคาน้าม !
โมดูล Custom HTML เป็นโมดูลที<เรา ใส่ข้อความรูปภาพลง ไปในโมดูลได้เลย ! !
www.colorpack.co.th
Module Manager
www.colorpack.co.th
New Module
www.colorpack.co.th
New Module
www.colorpack.co.th
New Module 1
ส่วนของ Toolbar
2
3
ส่วนรายละเอียดโมดูล ส่วนการตั้งค่าแสดงผล
4
www.colorpack.co.th
ส่วนของการกำหนด เชื่อมโยงเมนู
New Module
1
2 3
ชื่อของโมดูล ตั้งค่าแสดงชื่อโมดูล เลือกตำแหน่งที่จะ แสดงโมดูล
4 สถานะของโมดูล 5
www.colorpack.co.th
ตั้งค่าสิทธิการเข้าถึง โมดูล
New Module
ส่วนการตั้งค่าแสดงผล !
ส่วนนี้ต้องบอกก่อนเลยว่า แต่ละโมดูลไม่ เหมือนกัน ต้องศึกาาวิธิการตั้งค่าของ แต่ละโมดูล
1. 2. 3. 4. 5.
www.colorpack.co.th
àเÅล×ืÍอ¡ก Category ·ท∙Õี่µต ŒÍอ§ง¡กÒาÃรãใËห ŒâโÁม´ดÙูÅล´ดÖึ§งÁมÒาáแÊส´ด§ง ¨จÓำ¹นÇว¹นàเ¹น×ื้ÍอËหÒา·ท∙Õี่µต ŒÍอ§ง¡กÒาÃรãใËห ŒáแÊส´ด§ง áแÊส´ด§งàเ¹น×ื้ÍอËหÒา·ท∙Õี่àเ»ป š¹น Featured ËหÃร×ืÍอäไÁม ‹ ÅลÓำ´ดÑัºบ·ท∙Õี่µต ŒÍอ§ง¡กÒาÃรãใËห ŒáแÊส´ด§ง ¼ผÙู Œàเ¢ขÕีÂย¹น·ท∙Õี่µต ŒÍอ§ง¡กÒาÃรãใËห ŒáแÊส´ด§ง
New Module
ส่วนของการกำหนดเชื่อมโยงเมนู !
ส่วนนี้จะเป็นการตั้งค่าให้โมดูล ไปแสดงที่ เมนูไหนบ้าง
On All Page คือ แสดงทุกหน้า No Page คือไม่แสดง Only on the pages selected คือ เฉพาะหน้าทีเ< ลือก On all pages except those selected คือ แสดง หน้าทีไ< ม่ได้เลือก !
www.colorpack.co.th
Module Position คือ ตําแหน่งต่างๆบนแทมเพลต โดย ื< ของตําแหน่งจะแตกต่างก ันไป แล้ว ชอ แต่คนทําแทมเพลต 1 ตําแหน่ง สามารถวางได้หลายโมดูล
www.colorpack.co.th
Module Position
www.colorpack.co.th
àเÃรÕีÂย¡ก´ดÙู Module Position
www.colorpack.co.th
àเÃรÕีÂย¡ก´ดÙู Module Position
www.colorpack.co.th
àเÃรÕีÂย¡ก´ดÙู Module Position
www.colorpack.co.th
www.colorpack.co.th
User Viewing Access Levels
www.colorpack.co.th
User Viewing Access Levels Access คือการจำกัดการเข้าถึง
Public = ทุกคน Registered = เฉพาะสมาชิก Special = ผู้มีหน้าที่
www.colorpack.co.th
User Group ¡กÅลØุ ‹Áม Special
¡กÅลØุ ‹Áม·ท∙Óำ§งÒา¹นÊส ‹Çว¹นËหÅลÑั§งºบ ŒÒา¹น Manager = สามารถเข้าหล ังบ้านได้ แต่ไม่สามารถใชง้ าน คอมโพเน้นได้
Administrator = สามารถเข้าหล ังบ้านทํางานได้ทกุ อย่าง ยกเว้น Global Configuration
¡กÅลØุ ‹Áม·ท∙Óำ§งÒา¹นËห¹น ŒÒาàเÇว็ºบ Author =
สามารถเขียนบทความได้ แก้ไขบทความของต ัวเอง
ได้ แต่ไม่สามารถเผยแพร่
Editor =
สามารถเขียนบทความได้ แก้ไขบทความของคนอืน <
ได้ แต่ไม่สามารถเผยแพร่
Publisher =
สามารถเขียนบทความได้ แก้ไขบทความของ
คนอืน < ได้ สามารถเผยแพร่ บทความได้
www.colorpack.co.th
User Manager User Manager เป็นส่วนของการ จัดการสมาชิก จะแสดงรายชื่อสมาชิก ทั้งหมด และสามารถเพิ่มสมาชิกใหม่ได้ จากที่นี่
www.colorpack.co.th
User Manager 1
2
สมาชิกยังไม่เปิดใช้งาน สมาชิกยังไม่ยืนยันตัวตน
3
4
www.colorpack.co.th
แสดงกลุ่มที่สังกัด
ปุ่มสร้างสมาชิกใหม่
User Manager
www.colorpack.co.th
ÊสÃร ŒÒา§ง User Menu ที่ Menu Manager เป็นการเพิ่ม กลุ่มเมนูใหม่ นอกเหนือจาก MainMenu
www.colorpack.co.th
ÊสÃร ŒÒา§ง User Menu 1
2 3
www.colorpack.co.th
ชื่อของกลุ่มเมนู ชื่อชนิดของเมนู รายละเอียด
ÊสÃร ŒÒา§ง User Menu จะเห็นว่าเรามีกลุ่มเมนูใหม่ขึ้นมา แล้ว
www.colorpack.co.th
ÊสÃร ŒÒา§ง User Menu เมนู แก้ไข้ข้อมูลส่วนตัว จะแสดงก็ ต่อเมื่อ สมาชิก Login เข้าสู่ระบบ แล้ว
www.colorpack.co.th
ÊสÃร ŒÒา§ง User Menu เมนู เขียนบทความ จะแสดงก็ต่อ เมื่อ สมาชิก Login เข้าสู่ระบบ เป็นสมาชิกระดับ Special
www.colorpack.co.th
ÊสÃร ŒÒา§ง User Menu
1
ชื่อเมนู 2
Access ของเมนู 3
www.colorpack.co.th
ชนิดของเมนู
ÊสÃร ŒÒา§ง Module User Menu
ที่Module Manager คลิ๊ก New เลือกชนิดโมดูล Menu
www.colorpack.co.th
ÊสÃร ŒÒา§ง Module User Menu
โมดูลเมนูสมาชิก จะแสดง เฉพาะ ที่ Login (3) แล้ว และ ดึงเมนู User Menu มาแสดง (4) และแสดงทุกหน้า (5)
www.colorpack.co.th
User Access View Public
www.colorpack.co.th
Registered
Special
Joomla! Extensions
¡กÒาÃร¨จÑั´ด¡กÒาÃรÊส ‹Çว¹นàเÊสÃรÔิÁม¢ขÍอ§ง Joomla!
www.colorpack.co.th
Êส ‹Çว¹นàเÊสÃรÔิÁม¢ขÍอ§ง Joomla! B หา ทีส joomla! เป็น ระบบจ ัดการเนือ < ามารถเพิม < ความสามารถได้ โดยติดตงัB สว่ นเสริมเข้าไป ซงึ< สว่ นเสริมของจูมล่า จะแบ่งออกเป็น !
• • • • •
www.colorpack.co.th
Components Modules Plugins Templates Languages
Êส ‹Çว¹นàเÊสÃรÔิÁม¢ขÍอ§ง Joomla!
www.colorpack.co.th
Joomla! Component
C
คอมโพเน้น ถือเป็ นสว่ นเสริมใหญ่ทส ี3 ด ุ เรียกได ้ว่าเป็ น โปรแกรมขนาดเล็ก ในจูมล่าอีกทีกไ ็ ด้ คอมโพเน ้นต่าง ๆ จะถูกพัฒนาขึน J มาเพือ 3 ทํางานเฉพาะ ด ้าน และการทํางานของคอมโพเน ้นท์จะอยูท ่ ส ี3 ว่ นของ หลังบ ้าน (back end) เป็นหลัก !
การแสดงผลของคอมโนเน ้นท์ทด ี3 ้านหน ้าเว็บไซต์นัน J จะ สามารถทําได ้โดยการสร ้างเมนูไปหาคอมโพเน ้นท์ และ ้ การทําโมดูลเพือ 3 เรียกใชงานคอมโพเน ้นท์ !
่ Content (com_content) เป็ นคอมโพเน ้น ตัวอย่างเชน ้ ทีใ3 ชแสดงเนื อ J หา โดยคนเข ้าเว็บจะเห็นเนือ J หา สว่ นผู ้ ดูแลก็เพิม 3 แก ้ไขเนือ J หาทีห 3 ลังบ ้าน
www.colorpack.co.th
Joomla! Module
M
โมดูล เป็ นสว่ นเสริมเล็กๆ ทีแ 3 สดงเป็ นกล่องๆ ่ ระกอบตกแต่งเว็บ โดยจะอาศย ั ข ้อมูล สว่ นใหญ่ใชป จาก คอมโพเน ้นมาแสดงผล หากคอมโพเน ้นไม่มข ี ้อมูล โมดูลก็ไม่สามารถแสดงข ้อมูลได ้
่ โมดูล แสดงเนือ B หาล่าสุด ตัวอย่างเชน ( mod_articles_latest) จะนํ าข ้อมูลจาก Component Content มาแสดง !
แต่กม ็ โี มดูลบางตัว จะสามารถแสดงผลได ้ด ้วยตัวเอง ่ โมดูล Custom HTML เป็ นโมดูลทีเ3 รา ใสข ่ ้อความ เชน รูปภาพลงไปในโมดูลได ้เลย
www.colorpack.co.th
Joomla! Plugin
P
ปลก R ั อิน เป็ นสว่ นเสริมทีท 3 ํางานอยูเ่ บือ J งหลัง เสริมการทํางานของคอมโพเน ้น เราจะไม่เห็นรูปร่าง ั เจนของปลัTกอินนัก ชด !
่ ยกตัวอย่างเชน
ปลัTกอิน Search - Content จะทําหน ้าทีไ3 ปค ้นหา ข ้อมูลใน Content (com_content) เมือ 3 มีคนพิพม์คํา ค ้นหา หากปิ ด ปลัTกอิน ตัวนีก J จ ็ ะค ้นหาไม่เจอ
ปลัTกอิน Authentication - Joomla จะทําหน ้าที3 ตรวจสอบ เมือ 3 มีคน Login ว่า User Name กับ Password ตรงกันหรือไม่ หากปิ ด ปลัTกอิน ตัวนีก J จ ็ ะไม่ สามารถ loginได ้
www.colorpack.co.th
Joomla! Plugin
T
แทมเพลต เป็ นสว่ นเสริมทีเ3 ป็ นเหมือน หน ้ากากของเว็บ ทีก 3 ําหนดส ี ขนาดตัวอักษรเป็ นตัว กําหนดการแสดงผลทีห 3 น ้าเว็บ รูปร่างหน ้าตาของ เว็บไซต์ ว่าสามารถวางโมดูลไว ้ตําแหน่งใดๆได ้บ ้าง !
ื3 ตําแหน่งแตกต่าง แทมเพลตมีการวางตําแหน่งและชอ กันไปแล ้วแต่คนสร ้างแทมเพลต !
www.colorpack.co.th
Joomla! Plugin
L
www.colorpack.co.th
ภาษา เป็ นสว่ นเสริมทีแ 3 สดงเมนู คําอธิบายในจูมล่าเป็ น ภาษาต่างๆได ้
Joomla! Extension Install 1
2
3
ใช้เลือกไฟล์แล้วติดตั้ง
ใส่โฟลเดอร์บนเว็บเพื่อติด ตั้ง
4
www.colorpack.co.th
เมนูจัดการส่วนเสริม
ใส่ URL เพื่อติดตั้ง
Joomla! Contact Manager
¡กÒาÃร¨จÑั´ด¡กÒาÃร ¡กÒาÃรµตÔิ´ดµต ‹Íอ
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร¡กÒาÃรµตÔิ´ดµต ‹Íอ ระบบจ ัดการการติดต่อในจูมล่า ใช ้ สร้างฟอร์มในการติดต่อและแสดง ข้อมูลการติดต่อ !
สามารถแบ่งหมวดหมูข ่ องผูต ้ ด ิ ต่อออก เป็นฝ่ายได้
www.colorpack.co.th
¢ขÑั้¹นµตÍอ¹น¡กÒาÃร·ท∙Óำ§งÒา¹น - ¡กÒาÃรµตÔิ´ดµต ‹Íอ
สร้าง Category ในการติดต่อ
www.colorpack.co.th
สร้าง รายชื่อผู้ติดต่อ
สร้างเมนูเพื่อแสดง ผลการติดต่อ
¡กÒาÃร¨จÑั´ด¡กÒาÃร¡กÒาÃรµตÔิ´ดµต ‹Íอ - àเ¾พÔิ่ÁมËหÁมÇว´ดËหÁมÙู ‹
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร¡กÒาÃรµตÔิ´ดµต ‹Íอ - àเ¾พÔิ่ÁมËหÁมÇว´ดËหÁมÙู ‹
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร¡กÒาÃรµตÔิ´ดµต ‹Íอ - àเ¾พÔิ่Áม¼ผÙู ŒµตÔิ´ดµต ‹Íอ
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร¡กÒาÃรµตÔิ´ดµต ‹Íอ - àเ¾พÔิ่Áม¼ผÙู ŒµตÔิ´ดµต ‹Íอ
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร¡กÒาÃรµตÔิ´ดµต ‹Íอ - ÊสÃร ŒÒา§งàเÁม¹นÙู
* ¡กÒาÃรÊสÃร ŒÒา§งàเÁม¹นÙู ¨จÐะ¹นÓำäไ»ปäไÇว Œ¡กÅลØุ ‹ÁมàเÁม¹นÙูäไËห¹น¢ขÖึ้¹นÍอÂยÙู ‹¡กÑัºบàเ¨จ ŒÒา¢ขÍอ§งàเÇว็ºบ äไÁม ‹¨จÓำàเ»ป š¹นµต ŒÍอ§งàเ»ป š¹น Mainmenu www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร¡กÒาÃรµตÔิ´ดµต ‹Íอ - ÊสÃร ŒÒา§งàเÁม¹นÙู List All Contact Categories = แสดงรายการ หมวดหมูก ่ ารติดต่อทงหมด ัB
ื< ผู ้ List Contacts in a Category = แสดงรายชอ ติดต่อในหมวดหมูท ่ เี< ลือก
Single Contact = แสดงรายละเอียดผูต ้ ด ิ ต่อคน ใดคนหนึง<
Featured Contacts = แสดงรายชื่อผู้ติดต่อที่ ถูกเลือกให้เป็น Featured Contacts
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร¡กÒาÃรµตÔิ´ดµต ‹Íอ - ÊสÃร ŒÒา§งàเÁม¹นÙู
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร¡กÒาÃรµตÔิ´ดµต ‹Íอ - ÊสÃร ŒÒา§งàเÁม¹นÙู
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร¡กÒาÃรµตÔิ´ดµต ‹Íอ - ÊสÃร ŒÒา§งàเÁม¹นÙู
www.colorpack.co.th
Joomla! Weblink Manager
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเÇว็ºบÅลÔิ§ง¤ค
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเÇว็ºบÅลÔิ§ง¤ค ระบบจ ัดการเว็บลิงค์ เป็นระบบเอาไว้ รวบรวมเว็บลิงค์ทน ี< า ่ สนใจ ทีเ< กีย < วข้อง ก ับเว็บเรา สามารถสร้างหมวดหมูไ่ ด้
www.colorpack.co.th
¢ขÑั้¹นµตÍอ¹น¡กÒาÃร·ท∙Óำ§งÒา¹น - àเÇว็ºบÅลÔิ§ง¤ค
สร้าง Category ของเว็บลิงค์
www.colorpack.co.th
สร้าง รายการเว็บลิงค์
สร้างเมนูเพื่อแสดง ผลเว็บลิงค์
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเÇว็ºบÅลÔิ§ง¤ค - ÊสÃร ŒÒา§งËหÁมÇว´ดËหÁมÙู ‹
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเÇว็ºบÅลÔิ§ง¤ค - ÊสÃร ŒÒา§งËหÁมÇว´ดËหÁมÙู ‹
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเÇว็ºบÅลÔิ§ง¤ค - ÊสÃร ŒÒา§งàเÇว็ºบÅลÔิ§ง¤ค
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเÇว็ºบÅลÔิ§ง¤ค - ÊสÃร ŒÒา§งàเÇว็ºบÅลÔิ§ง¤ค
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเÇว็ºบÅลÔิ§ง¤ค - ÊสÃร ŒÒา§งàเÁม¹นÙู
* ¡กÒาÃรÊสÃร ŒÒา§งàเÁม¹นÙู ¨จÐะ¹นÓำäไ»ปäไÇว Œ¡กÅลØุ ‹ÁมàเÁม¹นÙูäไËห¹น¢ขÖึ้¹นÍอÂยÙู ‹¡กÑัºบàเ¨จ ŒÒา¢ขÍอ§งàเÇว็ºบ äไÁม ‹¨จÓำàเ»ป š¹นµต ŒÍอ§งàเ»ป š¹น Mainmenu www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเÇว็ºบÅลÔิ§ง¤ค - ÊสÃร ŒÒา§งàเÁม¹นÙู List All Weblink Categories = แสดงรายการ หมวดหมูเ่ ว็บลิงค์ทงหมด ัB
List Weblink in a Category = แสดงรายชื่อ เว็บลิงค์ในหมวดหมูท ่ เี< ลือก
Submit a Web Link แนะนํา
www.colorpack.co.th
ิ สง ่ เว็บ = เมนูให้สมาชก
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเÇว็ºบÅลÔิ§ง¤ค - ÊสÃร ŒÒา§งàเÁม¹นÙูàเÇว็ºบÅลÔิ§ง¤ค
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเÇว็ºบÅลÔิ§ง¤ค - ÊสÃร ŒÒา§งàเÁม¹นÙูàเÇว็ºบÅลÔิ§ง¤ค
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเÇว็ºบÅลÔิ§ง¤ค - ÊสÃร ŒÒา§งàเÁม¹นÙูàเÇว็ºบÅลÔิ§ง¤ค
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเÇว็ºบÅลÔิ§ง¤ค - ÊสÃร ŒÒา§งàเÁม¹นÙูàเÇว็ºบÅลÔิ§ง¤ค
www.colorpack.co.th
Joomla! Newsfeeds Manager
¡กÒาÃร¨จÑั´ด¡กÒาÃร Newsfeeds
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Newsfeeds Newsfeeds เป็นระบบเอาไว้รวบรวม ื< ข่าวจากเว็บทีน < า ่ สนใจ โดยจะดึง ชอ B หาบางสว่ นมาแสดงทีเ< ว็บเรา ข่าว เนือ ได้
www.colorpack.co.th
¢ขÑั้¹นµตÍอ¹น¡กÒาÃร·ท∙Óำ§งÒา¹น - Newsfeeds
สร้าง Category Newsfeeds
www.colorpack.co.th
สร้าง รายการ Newsfeed
สร้างเมนูเพื่อแสดง Newsfeeds
¡กÒาÃร¨จÑั´ด¡กÒาÃร Newsfeeds - ÊสÃร ŒÒา§งËหÁมÇว´ดËหÁมÙู ‹
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Newsfeeds - ÊสÃร ŒÒา§งËหÁมÇว´ดËหÁมÙู ‹
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Newsfeeds - ÊสÃร ŒÒา§ง Feed
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Newsfeeds - ÊสÃร ŒÒา§ง Feed
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Newsfeeds - ËหÒา¢ข ‹ÒาÇว·ท∙Õี่»ปÅล ‹ÍอÂย Feed
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Newsfeeds - ËหÒา¢ข ‹ÒาÇว·ท∙Õี่»ปÅล ‹ÍอÂย Feed
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Newsfeeds - ÊสÃร ŒÒา§งËหÁมÇว´ดËหÁมÙู ‹
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Newsfeeds - ÊสÃร ŒÒา§ง Feed
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Newsfeeds - ÊสÃร ŒÒา§งàเÁม¹นÙู
* ¡กÒาÃรÊสÃร ŒÒา§งàเÁม¹นÙู ¨จÐะ¹นÓำäไ»ปäไÇว Œ¡กÅลØุ ‹ÁมàเÁม¹นÙูäไËห¹น¢ขÖึ้¹นÍอÂยÙู ‹¡กÑัºบàเ¨จ ŒÒา¢ขÍอ§งàเÇว็ºบ äไÁม ‹¨จÓำàเ»ป š¹นµต ŒÍอ§งàเ»ป š¹น Mainmenu www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Newsfeeds - ÊสÃร ŒÒา§งàเÁม¹นÙู List All News Feeds Categories = แสดง รายการหมวดหมู่ News Feeds ทงหมด ัB
List News Feeds in a Category = แสดงราย ชื่อ News Feeds ในหมวดหมูท ่ เี< ลือก
Single News Feeds Feeds เดียว
www.colorpack.co.th
= แสดงข่าว News
¡กÒาÃร¨จÑั´ด¡กÒาÃร Newsfeeds - ÊสÃร ŒÒา§งàเÁม¹นÙู
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Newsfeeds - ÊสÃร ŒÒา§งàเÁม¹นÙู
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Newsfeeds - ÊสÃร ŒÒา§งàเÁม¹นÙู
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Newsfeeds - ÊสÃร ŒÒา§งàเÁม¹นÙู
www.colorpack.co.th
Joomla! Banner Manager
¡กÒาÃร¨จÑั´ด¡กÒาÃร»ป ‡ÒาÂยâโ¦ฆÉษ³ณÒา
www.colorpack.co.th
¢ขÑั้¹นµตÍอ¹น¡กÒาÃร·ท∙Óำ§งÒา¹น - Banner สร้าง Category Banner สร้าง Clients
สร้าง รายการ Banner
สร้างModule เพื่อแสดง Banner
* àเ¾พÃรÒาÐะÅลÑั¡กÉษ³ณÐะ¡กÒาÃรáแÊส´ด§ง¼ผÅล¢ขÍอ§งáแºบ¹นàเ¹นÍอÃร µต ŒÍอ§ง¹นÓำäไ»ปáแÊส´ด§งµตÒาÁม¨จØุ´ดµต ‹Òา§งæๆ ¨จÖึ§งÍอÒาÈศÑัÂยâโÁม´ดÙูÅลãใ¹น¡กÒาÃรáแÊส´ด§ง
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Banner Banner เป็นคอมโพเน้นที่ใช้ จัดการ ป้ายโฆษณา สามารถกำหนด ให้จำนวนครั้งในการแสดงได้ สามารถ แสดงตาม tag ได้ และสามารถแสดง ั ได้หลายจุดบนหน้าเว็บโดยอาศย ความสามารถของโมดูล
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Banner - ÊสÃร ŒÒา§ง Clients
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Banner - ÊสÃร ŒÒา§ง Clients
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Banner - ÊสÃร ŒÒา§ง ËหÁมÇว´ดËหÁมÙู ‹
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Banner - ÊสÃร ŒÒา§ง ËหÁมÇว´ดËหÁมÙู ‹
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Banner - ÊสÃร ŒÒา§ง Banners
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Banner - ÊสÃร ŒÒา§ง Banners
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Banner - ÊสÃร ŒÒา§ง âโÁม´ดÙูÅล
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Banner - ÊสÃร ŒÒา§ง âโÁม´ดÙูÅล
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Banner - ÊสÃร ŒÒา§ง âโÁม´ดÙูÅล
www.colorpack.co.th
Joomla! Search Manager
¡กÒาÃร¨จÑั´ด¡กÒาÃรÊส¶ถÔิµตÔิ¤คÓำ¤ค Œ¹น
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Êส¶ถÔิµตÔิ¤คÓำ¤ค Œ¹น
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Êส¶ถÔิµตÔิ¤คÓำ¤ค Œ¹น - àเ»ป ´ด¡กÒาÃรàเ¡ก็ºบÊส¶ถÔิµตÔิ
¤คÅลÔิ๊¡ก·ท∙Õี่ Options àเ¾พ×ื่ÍอµตÑั้§ง¤ค ‹Òา
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Êส¶ถÔิµตÔิ¤คÓำ¤ค Œ¹น - àเ»ป ´ด¡กÒาÃรàเ¡ก็ºบÊส¶ถÔิµตÔิ
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Êส¶ถÔิµตÔิ¤คÓำ¤ค Œ¹น - àเ»ป ´ด¡กÒาÃรàเ¡ก็ºบÊส¶ถÔิµตÔิ
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃร Êส¶ถÔิµตÔิ¤คÓำ¤ค Œ¹น - àเ»ป ´ด¡กÒาÃรàเ¡ก็ºบÊส¶ถÔิµตÔิ
àเÁม×ื่ÍอàเÃรÒาàเ»ป ´ดÃรÐะºบºบÊส¶ถÔิµตÔิ¤คÓำ¤ค Œ¹นáแÅล ŒÇว ËหÒา¡กÁมÕี¤ค¹นÁมÒา¤ค Œ¹นËหÒา¢ข ŒÍอÁมÙูÅลãใ¹นàเÇว็ºบàเÃรÒา ÃรÐะºบºบ¨จÐะàเ¡ก็ºบ¤คÓำ¤ค Œ¹นáแÅลÐะ Êส¶ถÔิµตÔิ Çว ‹ÒาÁมÕี¤คÓำ äไËห¹นºบ ŒÒา§ง ¤ค Œ¹น¡กÕี่¤คÃรÑั้§ง ¤ค Œ¹นáแÅล ŒÇวàเ¨จÍอ ¡กÕี่ºบ·ท∙¤คÇวÒาÁม àเ¾พ×ื่ÍอãใËห Œàเ¨จ ŒÒา¢ขÍอ§งàเÇว็ºบ¹นÓำäไ»ปÇวÔิàเ¤คÃรÒาÐะËห ¤คÇวÒาÁมÊส¹นãใ¨จ ¢ขÍอ§ง¤ค¹นàเ¢ข ŒÒาàเÇว็ºบ
* ËหÒา¡กàเÇว็ºบÁมÕี¤ค¹นàเ¢ข ŒÒาàเÂยÍอÐะ ¡กÒาÃรàเ¡ก็ºบÊส¶ถÔิµตÔิ¨จÐะÁมÕี¡กÒาÃรãใªช Œ¾พ×ื้¹น·ท∙Õี่ãใ¹น°ฐÒา¹น¢ข ŒÍอÁมÙูÅลÁมÒา¡ก¢ขÖึ้¹น www.colorpack.co.th
Joomla! Language Manager
¡กÒาÃร¨จÑั´ด¡กÒาÃรÀภÒาÉษÒา
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรÀภÒาÉษÒา - ¡กÒาÃรµตÔิ´ดµตÑั้§งÀภÒาÉษÒาàเ¾พÔิ่Áม
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรÀภÒาÉษÒา - ¡กÒาÃรµตÔิ´ดµตÑั้§งÀภÒาÉษÒาàเ¾พÔิ่Áม
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรÀภÒาÉษÒา - ¡กÒาÃรµตÔิ´ดµตÑั้§งÀภÒาÉษÒาàเ¾พÔิ่Áม
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรÀภÒาÉษÒา - ¡กÒาÃรµตÑั้§ง¤ค ‹ÒาÀภÒาÉษÒาËหÅลÑั¡ก Ëห¹น ŒÒาàเÇว็ºบ
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรÀภÒาÉษÒา - ¡กÒาÃรµตÑั้§ง¤ค ‹ÒาÀภÒาÉษÒาËหÅลÑั¡ก Ëห¹น ŒÒาàเÇว็ºบ
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรÀภÒาÉษÒา - ¡กÒาÃรµตÑั้§ง¤ค ‹ÒาÀภÒาÉษÒาËหÅลÑั¡ก ¼ผÙู Œ´ดÙูáแÅล
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรÀภÒาÉษÒา - ¡กÒาÃรµตÑั้§ง¤ค ‹ÒาÀภÒาÉษÒาËหÅลÑั¡ก ¼ผÙู Œ´ดÙูáแÅล
www.colorpack.co.th
Joomla! Template Manager
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต เทมเพลต เป็น รูปร่างหน้าตาของ เว็บไซต์ทเี< ราเห็นทงหมด ัB ทงล ัB ักษณะ ต ัวอ ักษร ส ี และรูปแบบการจ ัดวาง โมดูล เทมเพลตจึงเปรียบเหมือน บ้าน พร้อมอยูท ่ รี< อการตกแต่ง ด้วยโมดูล ต่างๆ
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - ¡กÒาÃรµตÑั้§ง¤ค ‹Òาàเ·ท∙Áมàเ¾พÅลµตËหÅลÑั¡ก
เทมเพลตที่มีรูปดาวอยู่คือเทมเพลตที่เราใช้งานเป็นเทมเพลตหลักอยู่ หากต้องการเปลี่ยนให้คลิ๊กที่รูปดาวสีขาว www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - ¡กÒาÃรµตÔิ´ดµตÑั้§งàเ·ท∙Áมàเ¾พÅลµต
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - ¡กÒาÃรµตÔิ´ดµตÑั้§งàเ·ท∙Áมàเ¾พÅลµต
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - ¡กÒาÃรµตÔิ´ดµตÑั้§งàเ·ท∙Áมàเ¾พÅลµต
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - ¡กÒาÃรµตÔิ´ดµตÑั้§งàเ·ท∙Áมàเ¾พÅลµต
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - ¡กÒาÃรµตÑั้§ง¤ค ‹Òาàเ·ท∙Áมàเ¾พÅลµตËหÅลÑั¡ก
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - ¡กÒาÃรµตÑั้§ง¤ค ‹Òาàเ·ท∙Áมàเ¾พÅลµตËหÅลÑั¡ก
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - ¡กÒาÃร´ดÙูµตÓำáแËห¹น ‹§งâโÁม´ดÙูÅล
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - ¡กÒาÃร´ดÙูµตÓำáแËห¹น ‹§งâโÁม´ดÙูÅล
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - ¡กÒาÃร»ปÃรÑัºบâโÁม´ดÙูÅลãใËห ŒµตÃร§งµตÒาÁมµตÓำáแËห¹น ‹§ง
เมื่อเราเปลี่ยนเทมเพลตแล้ว ตำแหน่งโมดูลจะเปลี่ยนไป ตามเทมเพลตนั้น ชื่อเรียกจะไม่เหมือนกัน เมื่อเรารู้ตำแหน่ง โมดูลของแต่ละแทมเพลตแล้ว ให้ มาเปลี่ยนตำแฟน่งของ โมดูลให้ตรงกับเทมเพลตที่เราใช้งาน
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - ¡กÒาÃร»ปÃรÑัºบâโÁม´ดÙูÅลãใËห ŒµตÃร§งµตÒาÁมµตÓำáแËห¹น ‹§ง
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - ¡กÒาÃร»ปÃรÑัºบâโÁม´ดÙูÅลãใËห ŒµตÃร§งµตÒาÁมµตÓำáแËห¹น ‹§ง
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - ¡กÒาÃร»ปÃรÑัºบâโÁม´ดÙูÅลãใËห ŒµตÃร§งµตÒาÁมµตÓำáแËห¹น ‹§ง
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - ¡กÒาÃร»ปÃรÑัºบâโÁม´ดÙูÅลãใËห ŒµตÃร§งµตÒาÁมµตÓำáแËห¹น ‹§ง
2
1 คลิ๊กเลือกตำแหน่ง
www.colorpack.co.th
เลือกเทมเพลต
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - ¡กÒาÃร»ปÃรÑัºบâโÁม´ดÙูÅลãใËห ŒµตÃร§งµตÒาÁมµตÓำáแËห¹น ‹§ง
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - ¡กÒาÃร»ปÃรÑัºบâโÁม´ดÙูÅลãใËห ŒµตÃร§งµตÒาÁมµตÓำáแËห¹น ‹§ง
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - ¡กÒาÃร»ปÃรÑัºบâโÁม´ดÙูÅลãใËห ŒµตÃร§งµตÒาÁมµตÓำáแËห¹น ‹§ง
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - ¡กÒาÃร»ปÃรÑัºบâโÁม´ดÙูÅลãใËห ŒµตÃร§งµตÒาÁมµตÓำáแËห¹น ‹§ง
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - ¡กÒาÃร»ปÃรÑัºบâโÁม´ดÙูÅลãใËห ŒµตÃร§งµตÒาÁมµตÓำáแËห¹น ‹§ง
www.colorpack.co.th
Joomla! Backup
¡กÒาÃรÊสÓำÃรÍอ§ง¢ข ŒÍอÁมÙูÅล
www.colorpack.co.th
¡กÒาÃรÊสÓำÃรÍอ§ง¢ข ŒÍอÁมÙูÅล - Backup การสำรองข้อมูล หรือ Backup เป็นเรื่องสำคัญ เพราะ การทำเว็บ มีความเสี่ยงต่อการที่ข้อมูลสูญหายอยู่ตลอดเวลา การ สำรองข้อมูลจึงเป็นเรื่องสำคัญ !
การวางแผนการสำรองข้อมูลขึ้นอยู่กับ เจ้าของเว็บ ว่าจะทำการสำรอง เป็น รายสัปดาห์ รายเดือน หรือรายวัน !
*เมื่อทำการสำรองข้อมูลแล้วให้โหลดมาเก็บ อย่าทิ้งไว้บนเว็บ !
www.colorpack.co.th
¡กÒาÃรÊสÓำÃรÍอ§ง¢ข ŒÍอÁมÙูÅล - Backup
คอมโพเน้นที่เราจะใช้สำรองข้อมูลคือ Akeeba backup !
จากเว็บ http://akeebabackup.com/
www.colorpack.co.th
¡กÒาÃรÊสÓำÃรÍอ§ง¢ข ŒÍอÁมÙูÅล - µตÔิ´ดµตÑั้§ง Akeeba Backup
www.colorpack.co.th
¡กÒาÃรÊสÓำÃรÍอ§ง¢ข ŒÍอÁมÙูÅล - µตÔิ´ดµตÑั้§ง Akeeba Backup
www.colorpack.co.th
¡กÒาÃรÊสÓำÃรÍอ§ง¢ข ŒÍอÁมÙูÅล - µตÔิ´ดµตÑั้§ง Akeeba Backup
www.colorpack.co.th
¡กÒาÃรÊสÓำÃรÍอ§ง¢ข ŒÍอÁมÙูÅล - µตÔิ´ดµตÑั้§ง Akeeba Backup
www.colorpack.co.th
¡กÒาÃรÊสÓำÃรÍอ§ง¢ข ŒÍอÁมÙูÅล - µตÑั้§ง¤ค ‹Òา Akeeba
www.colorpack.co.th
¡กÒาÃรÊสÓำÃรÍอ§ง¢ข ŒÍอÁมÙูÅล - µตÑั้§ง¤ค ‹Òา Akeeba Backup
www.colorpack.co.th
¡กÒาÃรÊสÓำÃรÍอ§ง¢ข ŒÍอÁมÙูÅล - Akeeba Backup
หากเว็บมีขนาดใหญ่เกิน 1GB ให้ใช้ JPA
www.colorpack.co.th
¡กÒาÃรÊสÓำÃรÍอ§ง¢ข ŒÍอÁมÙูÅล - Backup
www.colorpack.co.th
¡กÒาÃรÊสÓำÃรÍอ§ง¢ข ŒÍอÁมÙูÅล - Backup
www.colorpack.co.th
¡กÒาÃรÊสÓำÃรÍอ§ง¢ข ŒÍอÁมÙูÅล - Backup Progress
www.colorpack.co.th
¡กÒาÃรÊสÓำÃรÍอ§ง¢ข ŒÍอÁมÙูÅล - Backup Completed
www.colorpack.co.th
¡กÒาÃรÊสÓำÃรÍอ§ง¢ข ŒÍอÁมÙูÅล - Download Backup
www.colorpack.co.th
Joomla! Restore
¡กÒาÃร¡กÙู Œ¤ค×ื¹น¢ข ŒÍอÁมÙูÅล
www.colorpack.co.th
¡กÒาÃร¡กÙู Œ¤ค×ื¹น¢ข ŒÍอÁมÙูÅล - Restore
การกู้คืน ข้อมูลจาก Akeeba Backup ให้เราแตกไฟล์ ที่เราสำรองไว้ จากนั้นนำโฟลเดอร์และไฟล์ทั้งหมด ไปไว้บน Server ที่ต้องการติดตั้ง แล้วเรียกหน้าเว็บ
www.colorpack.co.th
¡กÒาÃร¡กÙู Œ¤ค×ื¹น¢ข ŒÍอÁมÙูÅล - Restore
www.colorpack.co.th
¡กÒาÃร¡กÙู Œ¤ค×ื¹น¢ข ŒÍอÁมÙูÅล - Restore
www.colorpack.co.th
¡กÒาÃร¡กÙู Œ¤ค×ื¹น¢ข ŒÍอÁมÙูÅล - Restore
www.colorpack.co.th
¡กÒาÃร¡กÙู Œ¤ค×ื¹น¢ข ŒÍอÁมÙูÅล - Restore
www.colorpack.co.th
¡กÒาÃร¡กÙู Œ¤ค×ื¹น¢ข ŒÍอÁมÙูÅล - Restore
www.colorpack.co.th
¡กÒาÃร¡กÙู Œ¤ค×ื¹น¢ข ŒÍอÁมÙูÅล - Restore
www.colorpack.co.th
¡กÒาÃร¡กÙู Œ¤ค×ื¹น¢ข ŒÍอÁมÙูÅล - Restore
www.colorpack.co.th
CSS Basic
àเÃรÕีÂย¹นÃรÙู Œ CSS àเºบ×ื้Íอ§งµต Œ¹น
www.colorpack.co.th
àเÃรÕีÂย¹นÃรÙู Œ CSS àเºบ×ื้Íอ§งµต Œ¹น - ÃรÙู Œ¨จÑั¡ก CSS CSS ย่อมาจากคำว่า Cascading Style Sheets อาจจะเรียกว่า Style Sheets
CSS กำหนดการแสดงผลของสิ่งต่างบนเว็บ เช่น สีอักษร สีพิ้นหลัง ขนาดตัว อักษร จัดการเลย์เอ้าท์
àเÃรÕีÂย¹นÃรÙู Œ CSS àเºบ×ื้Íอ§งµต Œ¹น - ÃรÙู Œ¨จÑั¡ก CSS
¡กÒาÃร·ท∙ÓำàเÇว็ºบäไ«ซµต áแºบºบ Responsive
www.colorpack.co.th
¡กÒาÃร·ท∙ÓำàเÇว็ºบäไ«ซµต áแºบºบ Responsive
Responsive Web Design เป็นการออกแบบ web layout ให้สามารถนำเสนอ content ได้อย่างถูกต้องและ เหมาะสมกับการใช้งาน ในทุก Device อย่าง Tablet และ Smartphone หรือ Desktop
www.colorpack.co.th
¡กÒาÃร·ท∙ÓำàเÇว็ºบäไ«ซµต áแºบºบ Responsive
จุดประสงค์เพื่อ ? !
“ทำให้ User ใช้งานได้ง่ายที่สุด”
www.colorpack.co.th
àเËหµตØุ¼ผÅล ·ท∙Õี่¤คÇวÃร·ท∙Óำ Responsive Design
ผู้ใช้งานผ่าน Mobile Device จะมากกว่าผู้ใช้งานผ่าน Desktop ในปี
2014 www.colorpack.co.th
àเËหµตØุ¼ผÅล ·ท∙Õี่¤คÇวÃร·ท∙Óำ Responsive Design
16 %
www.colorpack.co.th
ผู้ใช้งาน Smartphone /Tablet จะเลิกเข้าเว็บที่ “โหลดช้า”
àเËหµตØุ¼ผÅล ·ท∙Õี่¤คÇวÃร·ท∙Óำ Responsive Design
คิดว่าเว็บไซต์แบบ Mobile Website นั้นน่าจะดีกว่า Desktop Version
www.colorpack.co.th
§ง ‹ÒาÂยÊสØุ´ดãใªช Œ Media Queries CSS3 Media Queries เป็นการ กำหนด CSS แสดงผลได้อย่างเหมาะสม ในทุก Device
§ง ‹ÒาÂยÊสØุ´ดãใªช Œ Media Queries วิธีแรก คือใส่ในแท็ก link เพื่อเรียกโหลดไฟล์ CSS สำหรับหน้าจอนั้นๆ !
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href=“iphone.css” />
ตัวอย่างนี้ หากหน้าจอมีความกว้างมากสุด 480px จะเรียกไฟล์ iphone.css มาใช้งานด้วย
วิธีที่2 ใส่ CSS3 Media Query ก็คือ ใส่ลงไปในไฟล์ CSS โดยตรง @media screen and (กฏ 1) and (กฏ 2) { CSS ที่ต้องการใช้ถ้าเครื่องตรงตามกฏด้านบน * !
}
@media screen and (max-width: 400px) and (max-width: 767px) { .uk-navbar { background: #9D2C24 ; } }
CSS for Responsive
www.colorpack.co.th
Responsive image เปลี่ยนขนาดภาพตามขนาดหน้าจอ <!-- กําหนด image เป็น 100% —> !
img { max-width:100%; border:none; }
Responsive embeds ในกรณีที่เราจะใส่ วีดีโอ จาก Youtube กรณี ใส่แบบ iframe ่ บบปรกติ —> <!-- การใสแ !
<iframe width="560" height="315" src="www.youtube.com/embed/ hkCDWRKnXU0" frameborder="0" allowfullscreen></iframe>
<!-- ให้ลบ width/height ออกไป--> !
<iframe src="www.youtube.com/embed/hkCDWRKnXU0" frameborder="0" allowfullscreen></iframe>
ต้องตัด การกำหนดความสูงและความกว้างออกไป เพื่อเราจะควบคุมด้วย CSS
Responsive embeds
ต่อมาให้เรา สร้าง div เพื่อ ครอบ ตัว embed หรือ iframe <!-- สร้าง div เพื<อ ครอบ ตัว embed—> !
<div class="responsive-embed"> <!-- ใส ่ code embed หรือ iframe ในนีB --> </div>
กำหนด คลาสให้ div ในที่นี้ใส่เป็น class="responsive-embed"
Responsive embeds จากนั้นเราไปเพิ่ม css class .responsive-embed ในไฟล์ css .responsive-embed { position: relative; padding-bottom: 56.25%; /* 16/9 ratio */ padding-top: 30px; /* IE6 workaround*/ height: 0; overflow: hidden; } .responsive-embed iframe, .responsive-embed object, .responsive-embed embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Responsive embeds เมื่อนำไปใช้งาน !
<div class="responsive-embed"> !
<iframe src="www.youtube.com/embed/hkCDWRKnXU0" frameborder="0" allowfullscreen></iframe> !
</div> !
<div class="responsive-embed"> !
<iframe src="http://www.slideshare.net/slideshow/ embed_code/14167122" frameborder="0" ></iframe> !
</div>
Responsive HTML5 Frameworks
http://getbootstrap.com
http://foundation.zurb.com/
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - Auto Responsive
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - Responsive module
www.colorpack.co.th
¡กÒาÃร¨จÑั´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - Responsive module
www.colorpack.co.th