Joomla2 5 print

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

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

àเ¢ข�ŒÒาãใ¨จàเ»ป�‡ÒาËหÁมÒาÂย¢ขÍอ§งàเÇวºบ·ท∙Õ·ท∙Óำ

¡กÒาÃรÇวÒา§งáแ¼ผ¹น·ท∙Õ´ดÕ

ÍอÍอ¡กáแºบºบãใËห�Œãใªช�Œ§งÒา¹น¹น�‹Òาàเªช×Íอ¶ถ×Íอ

www.colorpack.co.th

¡กÓำËห¹น´ด¡กÅลØ�‹Áมàเ»ป�‡ÒาËหÁมÒาÂย

2. เมอมาแลวเขาจะไดอะไรกลบไป ?

3. เมอมาแลวอยากใหเขาจะทำอะไรกบเวบเรา ?

1. คนกลมไหนทเราตองการใหมาเวบเรา ?

Joomla! เปนระบบจดการเนอหาบนเวบ หรอ CMS (Content management system) ทเปน Open Source ทเขยนดวยภาษา PHP และ

ใชฐานขอมล MySQL

www.colorpack.co.th

- ใชงาย (ตองเรยนร) - เปดเผยโคด Open Source - รองรบเวบไซตขนาดใหญ - ฟร (ถาลงมอทำเอง) - ลขสทธเปนแบบ GNU/GPL

·ท∙ÓำäไÁมàเÅล×Íอ¡ก joomla!

www.colorpack.co.th

ãใ¤คÃรãใªช�Œ Joomla! ºบ�ŒÒา§ง

www.colorpack.co.th

¢ขÑ¹นµตÍอ¹น¡กÒาÃรÊสÃร�ŒÒา§งàเÇวºบäไ«ซµต�âโ´ดÂย·ท∙ÑÇวäไ»ป

1. ¨จ´ดªช×Íอâโ´ดàเÁม¹น (Domain Name)

2. àเªช�‹Òา¾พ×¹น·ท∙Õàเ¡กºบàเÇวºบ (Hosting)

3. ÍอÍอ¡กáแºบºบàเÇวºบäไ«ซµต� µตÒาÁมáแ¼ผ¹น§งÒา¹น

4. Upload àเÇวºบ¢ขÖ¹น hosting

5. »ปÃรÐะªชÒาÊสÑÁม¾พÑ¹น¸ธ�àเÇวºบäไ«ซµต�ãใËห�Œàเ»ป�š¹น·ท∙ÕÃรÙ�Œ¨จÑ¡ก

6. Update áแÅลÐะ¾พÑ²ฒ¹นÒาàเÇวºบäไ«ซµต�

www.colorpack.net

IP Address หมายเลขประจำเครองคอมพวเตอรหรออปกรณทใชเชอมตอกบ internet เชน !

203.146.102.112 203.150.3.242 192.168.1.1 10.107.1.1

www.colorpack.co.th

ªช×Íอâโ´ดàเÁม¹น คอ ชอเรยกเสมอน เชน 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.net

Textwww.colorpack.co.th

www.colorpack.co.th

Text

www.colorpack.co.th

Text

พมพ /administrator

www.colorpack.co.th

Joomla! Article Manager

¡กÒาÃร¨จÑ´ด¡กÒาÃรàเ¹น×ÍอËหÒา

www.colorpack.co.th

Text

www.colorpack.co.th

สราง Category ตาม Sitemapคด SiteMap

¢ขÑ¹นµตÍอ¹น¡กÒาÃร·ท∙Óำ§งÒา¹น

ใสเนอหาตาม Category

สรางเมนเพอแสดงเนอหา

ในCategory

www.colorpack.co.th

Ëห¹น�ŒÒาáแÃร¡ก Category Sub Category

ขาวกฬา

ขาวการเมอง

Article

¢ข�‹ÒาÇวºบÑ¹นàเ·ท∙Ô§ง1




ทองเทยว ºบ·ท∙¤คÇวÒาÁม 1

ºบ·ท∙¤คÇวÒาÁม 1

คอมพวเตอรบทความ



ประกาศ

ขาวบนเทง

ขาว

Home

Site Map

www.colorpack.co.th

www.colorpack.co.th

Text

àเ¾พÔÁม Category

www.colorpack.co.th

Text

www.colorpack.co.th

Text

àเ¾พÔÁม àเ¹น×ÍอËหÒา

www.colorpack.co.th

Text

www.colorpack.co.th

Text

àเ¾พÔÁม link ºบ·ท∙¤คÇวÒาÁม

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.net

www.colorpack.co.th

ÊสÃร�ŒÒา§งàเÁม¹นÙ ãใËหÁม�‹

www.colorpack.co.th

Text

ÊสÃร�ŒÒา§งàเÁม¹นÙ äไ»ปËหÒา Category

www.colorpack.co.th

Text

ÊสÃร�ŒÒา§งàเÁม¹นÙäไ»ปËหÒา Category àเ»ป�š¹นàเÁม¹นÙÂย�‹ÍอÂย

www.colorpack.co.th

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

สวนของ Toolbar1

สวนรายละเอยดโมดล2

สวนการตงคาแสดงผล3

สวนของการกำหนดเชอมโยงเมน

4

www.colorpack.co.th

New Module ชอของโมดล1

ตงคาแสดงชอโมดล2

เลอกตำแหนงทจะแสดงโมดล

3

ตงคาสทธการเขาถงโมดล

5

สถานะของโมดล

4

www.colorpack.co.th

New Moduleสวนการตงคาแสดงผล

!สวนนตองบอกกอนเลยวา แตละโมดลไมเหมอนกน ตองศกาาวธการตงคาของ

แตละโมดล

1. àเÅล×Íอ¡ก Category ·ท∙Õµต�ŒÍอ§ง¡กÒาÃรãใËห�ŒâโÁม´ดÙÅล´ดÖ§งÁมÒาáแÊส´ด§ง

2. ¨จÓำ¹นÇว¹นàเ¹น×ÍอËหÒา·ท∙Õµต�ŒÍอ§ง¡กÒาÃรãใËห�ŒáแÊส´ด§ง

3. áแÊส´ด§งàเ¹น×ÍอËหÒา·ท∙Õàเ»ป�š¹น Featured ËหÃร×ÍอäไÁม�‹

4. ÅลÓำ´ดÑºบ·ท∙Õµต�ŒÍอ§ง¡กÒาÃรãใËห�ŒáแÊส´ด§ง

5. ¼ผÙ�Œàเ¢ขÕÂย¹น·ท∙Õµต�ŒÍอ§ง¡กÒาÃรãใËห�ŒáแÊส´ด§ง

www.colorpack.co.th

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

www.colorpack.co.th

User Viewing Access Levels

www.colorpack.co.th

User Viewing Access Levels

Public = ทกคน

Registered = เฉพาะสมาชก

Special = ผมหนาท

Access คอการจำกดการเขาถง

www.colorpack.co.th

User Group ¡กÅลØ�‹Áม Special

Manager = สามารถเขาหลงบานได แตไมสามารถใชงาน คอมโพเนนได

Author = สามารถเขยนบทความได แกไขบทความของตวเอง

ได แตไมสามารถเผยแพร

Administrator = สามารถเขาหลงบานทางานไดทกอยาง ยกเวน Global Configuration

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


ชอของกลมเมน1

ชอชนดของเมน2

รายละเอยด3

www.colorpack.co.th


จะเหนวาเรามกลมเมนใหมขนมาแลว

www.colorpack.co.th


เมน แกไขขอมลสวนตว จะแสดงกตอเมอ สมาชก Login เขาสระบบแลว

www.colorpack.co.th


เมน เขยนบทความ จะแสดงกตอเมอ สมาชก Login เขาสระบบเปนสมาชกระดบ Special

www.colorpack.co.th


ชอเมน1

Access ของเมน2

ชนดของเมน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 ViewPublic Registered Special

www.colorpack.co.th

Joomla! Extensions

¡กÒาÃร¨จÑ´ด¡กÒาÃรÊส�‹Çว¹นàเÊสÃรÔÁม¢ขÍอ§ง Joomla!

www.colorpack.co.th

Êส�‹Çว¹นàเÊสÃรÔÁม¢ขÍอ§ง Joomla!

joomla! เปน ระบบจดการเนBอหา ท<สามารถเพ<มความสามารถได โดยตดต Bง สวนเสรมเขาไป ซ<งสวนเสรมของจมลา จะแบงออกเปน !• Components • Modules • Plugins • Templates • Languages

www.colorpack.co.th

Êส�‹Çว¹นàเÊสÃรÔÁม¢ขÍอ§ง 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 ภาษา เปนสวนเสรมท3แสดงเมน คาอธบายในจมลาเปนภาษาตางๆได

www.colorpack.co.th

Joomla! Extension Install

เมนจดการสวนเสรม1

ใชเลอกไฟลแลวตดตง2

ใสโฟลเดอรบนเวบเพอตดตง

3

ใส URL เพอตดตง4

www.colorpack.co.th

Joomla! Contact Manager

¡กÒาÃร¨จÑ´ด¡กÒาÃร ¡กÒาÃรµตÔ´ดµต�‹Íอ

www.colorpack.co.th

¡กÒาÃร¨จÑ´ด¡กÒาÃร¡กÒาÃรµตÔ´ดµต�‹Íอ

ระบบจดการการตดตอในจมลา ใชสรางฟอรมในการตดตอและแสดงขอมลการตดตอ !สามารถแบงหมวดหมของผตดตอออกเปนฝายได

www.colorpack.co.th

สราง รายชอผตดตอสราง

Category ในการตดตอ

¢ขÑ¹นµตÍอ¹น¡กÒาÃร·ท∙Óำ§งÒา¹น - ¡กÒาÃรµตÔ´ดµต�‹Íอ

สรางเมนเพอแสดงผลการตดตอ

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

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

¡กÒาÃร¨จÑ´ด¡กÒาÃรàเÇวºบÅลÔ§ง¤ค� - ÊสÃร�ŒÒา§งàเÁม¹นÙ

List All Weblink Categories = แสดงรายการหมวดหมเวบลงคท Bงหมด

List Weblink in a Category = แสดงรายชอเวบลงคในหมวดหมท <เลอก

Submit a Web Link = เมนใหสมาชกสงเวบแนะนา

www.colorpack.co.th

¡กÒาÃร¨จÑ´ด¡กÒาÃรàเÇวºบÅลÔ§ง¤ค� - ÊสÃร�ŒÒา§งàเÁม¹นÙàเÇวºบÅลÔ§ง¤ค�

www.colorpack.co.th

Joomla! Newsfeeds Manager

¡กÒาÃร¨จÑ´ด¡กÒาÃร Newsfeeds

www.colorpack.co.th

¡กÒาÃร¨จÑ´ด¡กÒาÃร Newsfeeds

Newsfeeds เปนระบบเอาไวรวบรวมขาวจากเวบท<นาสนใจ โดยจะดง ช<อขาว เนBอหาบางสวนมาแสดงท<เวบเราได

www.colorpack.co.th

สราง รายการ Newsfeed

สราง Category

Newsfeeds

¢ขÑ¹นµตÍอ¹น¡กÒาÃร·ท∙Óำ§งÒา¹น - Newsfeeds

สรางเมนเพอแสดง Newsfeeds

www.colorpack.co.th

¡กÒาÃร¨จÑ´ด¡กÒาÃร Newsfeeds - ÊสÃร�ŒÒา§งËหÁมÇว´ดËหÁมÙ�‹

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 - ÊสÃร�ŒÒา§งàเÁม¹นÙ


www.colorpack.co.th


List All News Feeds Categories = แสดงรายการหมวดหม News Feeds ท Bงหมด

List News Feeds in a Category = แสดงรายชอ News Feeds ในหมวดหมท <เลอก

Single News Feeds = แสดงขาว News Feeds เดยว

www.colorpack.co.th


www.colorpack.co.th

Joomla! Banner Manager

¡กÒาÃร¨จÑ´ด¡กÒาÃร»ป�‡ÒาÂยâโ¦ฆÉษ³ณÒา

www.colorpack.co.th

สราง รายการ Banner

สราง Category Banner

¢ขÑ¹นµตÍอ¹น¡กÒาÃร·ท∙Óำ§งÒา¹น - Banner

สรางModule เพอแสดง Banner

สราง Clients

* àเ¾พÃรÒาÐะÅลÑ¡กÉษ³ณÐะ¡กÒาÃรáแÊส´ด§ง¼ผÅล¢ขÍอ§งáแºบ¹นàเ¹นÍอÃร� µต�ŒÍอ§ง¹นÓำäไ»ปáแÊส´ด§งµตÒาÁม¨จØ´ดµต�‹Òา§งæๆ ¨จÖ§งÍอÒาÈศÑÂยâโÁม´ดÙÅลãใ¹น¡กÒาÃรáแÊส´ด§ง

www.colorpack.co.th

¡กÒาÃร¨จÑ´ด¡กÒาÃร Banner

Banner เปนคอมโพเนนทใชจดการ ปายโฆษณา สามารถกำหนดใหจำนวนครงในการแสดงได สามารถแสดงตาม tag ได และสามารถแสดงไดหลายจดบนหนาเวบโดยอาศยความสามารถของโมดล

www.colorpack.co.th

¡กÒาÃร¨จÑ´ด¡กÒาÃร Banner - ÊสÃร�ŒÒา§ง Clients

www.colorpack.co.th

¡กÒาÃร¨จÑ´ด¡กÒาÃร Banner - ÊสÃร�ŒÒา§ง ËหÁมÇว´ดËหÁมÙ�‹

www.colorpack.co.th

¡กÒาÃร¨จÑ´ด¡กÒาÃร Banner - ÊสÃร�ŒÒา§ง Banners

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

Joomla! Language Manager

¡กÒาÃร¨จÑ´ด¡กÒาÃรÀภÒาÉษÒา

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


เลอกเทมเพลต1

คลกเลอกตำแหนง2

www.colorpack.co.th


www.colorpack.co.th

Joomla! Backup

¡กÒาÃรÊสÓำÃรÍอ§ง¢ข�ŒÍอÁมÙÅล

www.colorpack.co.th

¡กÒาÃรÊสÓำÃรÍอ§ง¢ข�ŒÍอÁมÙÅล - Backup

การสำรองขอมล หรอ Backup เปนเรองสำคญ เพราะการทำเวบ มความเสยงตอการทขอมลสญหายอยตลอดเวลา การสำรองขอมลจงเปนเรองสำคญ !การวางแผนการสำรองขอมลขนอยกบ เจาของเวบ วาจะทำการสำรองเปน รายสปดาห รายเดอน หรอรายวน !*เมอทำการสำรองขอมลแลวใหโหลดมาเกบ อยาทงไวบนเวบ !

www.colorpack.co.th


คอมโพเนนทเราจะใชสำรองขอมลคอ Akeeba backup !

จากเวบ http://akeebabackup.com/

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


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

CSS Basic

àเÃรÕÂย¹นÃรÙ�Œ CSS àเºบ×Íอ§งµต�Œ¹น

CSS ยอมาจากคำวา Cascading Style Sheets อาจจะเรยกวา Style Sheets

àเÃรÕÂย¹นÃรÙ�Œ CSS àเºบ×Íอ§งµต�Œ¹น - ÃรÙ�Œ¨จÑ¡ก CSS

CSS กำหนดการแสดงผลของสงตางบนเวบ เชน สอกษร สพนหลง ขนาดตวอกษร จดการเลยเอาท

àเÃรÕÂย¹นÃรÙ�Œ CSS àเºบ×Íอ§งµต�Œ¹น - ÃรÙ�Œ¨จÑ¡ก CSS

www.colorpack.co.th

¡กÒาÃร·ท∙ÓำàเÇวºบäไ«ซµต�áแºบºบ Responsive

www.colorpack.co.th


Responsive Web Design เปนการออกแบบ web layout ใหสามารถนำเสนอ content ไดอยางถกตองและเหมาะสมกบการใชงาน ในทก Device อยาง Tablet และ

Smartphone หรอ Desktop

www.colorpack.co.th


จดประสงคเพอ ? !

“ทำให User ใชงานไดงายทสด”

www.colorpack.co.th

àเËหµตØ¼ผÅล ·ท∙Õ¤คÇวÃร·ท∙Óำ Responsive Design

ผใชงานผาน Mobile Device จะมากกวาผใชงานผาน Desktop

ในป 2014

www.colorpack.co.th


ผใชงาน Smartphone /Tablet จะเลกเขาเวบท “โหลดชา”

16 %

www.colorpack.co.th


คดวาเวบไซตแบบ Mobile Website นนนาจะดกวา

Desktop Version

§ง�‹ÒาÂยÊสØ´ดãใªช�Œ Media Queries

CSS3 Media Queries เปนการ กำหนด CSS แสดงผลไดอยางเหมาะสม ในทก Device

§ง�‹ÒาÂยÊสØ´ดãใªช�Œ Media Queries

!<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href=“iphone.css” />

วธแรก คอใสในแทก link เพอเรยกโหลดไฟล CSS สำหรบหนาจอนนๆ

ตวอยางน หากหนาจอมความกวางมากสด 480px จะเรยกไฟล iphone.css มาใชงานดวย

@media screen and (max-width: 400px) and (max-width: 767px) { .uk-navbar { background: #9D2C24 ; } }

วธท2 ใส CSS3 Media Query กคอ ใสลงไปในไฟล CSS โดยตรง

@media screen and (กฏ 1) and (กฏ 2) { CSS ทตองการใชถาเครองตรงตามกฏดานบน * !}

www.colorpack.co.th

CSS for Responsive

Responsive image

เปลยนขนาดภาพตามขนาดหนาจอ

<!-- กาหนด image เปน 100% —> !img { max-width:100%; border:none; }

Responsive embeds

ในกรณทเราจะใส วดโอ จาก Youtube กรณ ใสแบบ iframe

ตองตด การกำหนดความสงและความกวางออกไป เพอเราจะควบคมดวย CSS

 !<iframe src="www.youtube.com/embed/hkCDWRKnXU0" frameborder="0" allowfullscreen></iframe>

Responsive embeds

ตอมาใหเรา สราง div เพอ ครอบ ตว embed หรอ iframe

กำหนด คลาสให div ในทนใสเปน

class="responsive-embed"

 </div>

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/

www.colorpack.co.th

¡กÒาÃร¨จÑ´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - Auto Responsive

www.colorpack.co.th

¡กÒาÃร¨จÑ´ด¡กÒาÃรàเ·ท∙Áมàเ¾พÅลµต - Responsive module

Joomla2 5 print

Documents

Transcript of Joomla2 5 print