คู่มือ อบรม สร้างเว็บด้วย Joomla 2 5

ÍอºบÃรÁมÊสÃร ŒÒา§งàเÇว็ºบ´ด ŒÇวÂย

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