ใบความรู้ที่ 1 หลักการท างานของ...

Templates เนองจาก เทมเพลตเปนรปแบบในการจดวางเนอหา การใชขอความ ส และกราฟกโดยรวม

ใหกบเวบไซต ซงมการออกแบบเทมเพลตทใชงานกบ Joomla สามารถหาดาวนโหลดไดจากแหลงตาง ๆมากมาย และสามารถเลอกใชงานไดอยางเหมาะสม

การใชงาน joomla นน เมอเราท าการตดตงโปรแกรม joomla ใหกบระบบเวบไซตแลว joomla จะมการตดตงเทมเพลตรปแบบตาง ๆ ซงประกอบไปดวยสไตสเทมเพลต 1 สไตสขนไป ซงสามารถเขาสหนาตางโดยเลอก Extensions > Templates

โดยสไตสเทมเพลตตางๆ ประกอบไปดวย - Beez3 ซงประกอบไปดวย Beez3_Default เปนสไตสเรมตน และ eez3_Fruit

Shop เปนสไตสส าหรบรานคา - Photostar จะมเฉพาะ Photostar_Default เปนสไตสเรมตนของเทมเพลต

ใบความรท 1 หลกการท างานของเทมเพลต

เทมเพลตและสไตสใน joomla

7

ทมา : นายพสนธ ชทอง

แทบ Styles ส าหรบใชก าหนดสไตสของแตละเทมเพลต

แทบ Templates ส าหรบแสดงรายละเอยดของเทมเพลตทงหมด

ชอแทบ Style

ชอ Style แตละเทมเพลต สไตสทถกใชงานอย ชอของเทมเพลต

ชอแทบ Templates

คลกเพอดตวอยาง คลกเพอเขาไปปรบแตงโคดของเทมเพลต

วนทเผยแพร ขอมลผออกแบบ/จดท า

8

ทมา : นายพสนธ ชทอง

ทมา : นายพสนธ ชทอง

การเปลยนเทมเพลตใหกบเวบไซตเปนกระบวนการปรบเปลยนหนาตาของเวบไซตใหมความเหมาะสม ตามทผใชงานตองการ เพอใหหนาตาของเวบไซตมลกษณะแปลกใหมขน ซงมวธการดงน

คลดเลอก Extensions > Templates

ตวอยางเวบไซตทแสดง

เปลยนเทมเพลตใหกบเวบไซต

2. คลกเพอดตวอยางเวบไซต

1. คลกรปดาว (Set default) เพอใชงานเทมเพลต

9

ทมา : นายพสนธ ชทอง

ทมา : นายพสนธ ชทอง

Template หรอบางครงเรยกสนๆวา ธม ซงเปนรปรางหนาตาของเวบไซตทผเขาชมเหน

ทงหมด ไมวาจะเปนลกษณะของตวอกษร ส พนหลง เมน รปภาพ ปม การจดวางต าแหนงสวนประกอบตางๆ ของ Moldule เปนตน ซง Joomla ไดจดแบง Template แยกออก จากการจดการขอมลและบทความในเวบไซตออกจากกนอยางชดเจน ถาหากวาเราท าการเปลยน Template ใหมกจะไมกระทบกบขอมลเนอหาบทความทเราเขยนแตอยางใด อาจจะมบางในเรองของต าแหนง Module ตางๆทอาจจะผดเพยนไป แตกสามารถปรบแตงไดในภายหลง เราสามารถดาวนโหลด Template ฟรมาใชงานไดจาก http://www.joomla24.com เมอดาวนโหลดไฟล เทมเพลตเสรจแลว ใหท าการปฏบตตามขนตอนตอไปน

เลอก Extensions > Manage > Install

2. คลกเพอเลอกไฟลเทมเพลตทตองการตดตง

3. ต าแหนงไฟลเทมเพลต แลวคลก Open

1. เลอก Extensions > Manage > Install

4. คลกเพอตดตงเทมเพลต

10

ใบความรท 2 การตดตงเทมเพลต

ทมา : นายพสนธ ชทอง

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

เทมเพลตทไมไดใชงานนนจะสงผลใหพนทในการเกบขอมลลดนอยลง เราจงตองท าการลบเทมเพลตทไมใชงานออกไปเพอเปนการประหยดพนทในการจดเกบขอมลและประหยดฐานขอมล ซงสามารถปฏบตตามขนตอนตอไปน

5. แสดงการตดตงเทมเพลตเสรจสมบรณ

การลบเทมเพลตทไมใชงาน

11

ทมา : นายพสนธ ชทอง

ส าหรบเทมเพลตทถกก าหนดการใชงานโดยระบบใหเปนคาเรมตน จะไมสามารถสงลบ

ออกไปได การท างานของเทมเพลตนนบางครงเทมเพลตทเราใชงานอยอาจไมถกใจผใชงาน เชน ฟอนต

สฟอนต สพนหลง และรปภาพ ซงมรปแบบทตองการเขาไปแกไขโคดค าสงของเทมเพลต โดยผทจะท าการแกไขนนตองมความรเบองตนทเกยวของกบ CSS และ PHP โดยโคดของเทมเพลตนนแบงออกเปน 2 กลม คอ

1. Template Master Files ใชในการก าหนดโครงราง และควบคมการท างานของ เทมเพลต กลมนจะเขยนดวยภาษา HTML JavaScript และ PHP

2. Stylesheet ใชในการก าหนดรปแบบตางๆ เชน ส ฟอนต โคดในกลมนจะเขยนใน รปแบบของ CSS

โดยมรายละเอยดดงน

1. เลอก Extensions > Manage

3. เลอกเทมเพลตทตองการจะลบ

2. คลก Manage 4. เลอก Uninstall

13

ทมา : นายพสนธ ชทอง

การแกไขเทมเพลต

1. คลกเลอก Templates

2. คลกเทมเพลตทตองการแกไขโคด

12

ทมา : นายพสนธ ชทอง

3. คลกเลอกโฟลเดอร css แลวเลอก Templates.css

4. แกไข css ในสวนทตองการ

5. เลอกบนทกและปด

ทมา : นายพสนธ ชทอง

ใบกจกรรมท 1 หลกการท างานของเทมเพลต

ค าชแจง ใหนกเรยนตอบค าถามใหไดใจความถกตอง ชดเจน (10 คะแนน)

1. เทมเพลต เปนรปแบบในการจดการแบบใด จงอธบายมาพอเขาใจ (5 คะแนน) ............................................................................................................................. .............................. ............................................................................................................................. .............................. .................................................................................................. ......................................................... ............................................................................................................................. .............................. ........................................................................................................................................................... ............................................................................................................................. .............................. 2. เหตใด Joomla จงไดรบความนยมกนอยางแพรหลาย จงอธบายมาพอเขาใจ (5 คะแนน) ............................................................................................................................. .............................. ................................................................................................... ........................................................ ............................................................................................................................. .............................. ........................................................................................................................................................... ............................................................................................................................. .............................. ............................................................................................................................. .............................. .................................................................................. .........................................................................

ชอ-สกล……………………………………………………………………….เลขท..............ชน ม...................

13

เกณฑการใหคะแนน ตอบถกทง 2 ขอ ครบถวนสมบรณ ได 10 คะแนน ตอบถกทง 2 ขอ แตไมครบถวนสมบรณ ได 9 คะแนน ตอบถก 1 ขอ ครบถวนสมบรณ ได 8 คะแนนตอบถกแตไมครบถวนสมบรณ ได 7 คะแนน ตอบไมถก ไมผานเกณฑ

ใบกจกรรมท 2 การตดตงเทมเพลต

1. ใหนกเรยนฝกปฏบตในการตดตงและเรยกใชงานเทมเพลต และสรปขนตอนการตดตงมาพอเขาใจ (5 คะแนน) ........................................................................................ ................................................................... ............................................................................................................................. .............................. ........................................................................................................................................................... ............................................................................................................................. .............................. ............................................................................................................................. .............................. ............................................................................................................................. .............................. 2. ใหนกเรยนฝกปฏบตในการลบเทมเพลตทไมใชงาน และสรปขนตอนการตดตงมาพอเขาใจ (5 คะแนน) ............................................................................................................................. .............................. ........................................................................................... ................................................................ ............................................................................................................................. .............................. ........................................................................................................................................................... ............................................................................................................................. .............................. ............................................................................................................................. ..............................

ชอ-สกล……………………………………………………………………….เลขท..............ชน ม...................

14

เกณฑการใหคะแนน ตอบถกทง 2 ขอ ครบถวนสมบรณ ได 10 คะแนน ตอบถกทง 2 ขอ แตไมครบถวนสมบรณ ได 9 คะแนน ตอบถกทง 1 ครบถวนสมบรณ ได 8 คะแนนตอบถกแตไมครบถวนสมบรณ ได 7 คะแนน ตอบไมถก ไมผานเกณฑ

ค าชแจง 1. ใหนกเรยนเลอกค าตอบทถกทสดเพยงค าตอบเดยว แลวท าเครองหมายกากบาท ()

ลงในกระดาษค าตอบ 2. ใชเวลาในการท าแบบทดสอบ 10 นาท 1. เหตใด Joomla จงเปนทนยมใชกนอยางแพรหลาย

ก. joomla สามารถท างานรวมกบเวบไซตอนได ข. joomla เปนโปรแกรมทเปดโอกาสใหสามารถดาวนโหลดไดฟร ค. joomla สามารถท างานดานกราฟก และมรปแบบการตกแตงเทมเพลตทหลากหลาย ง. joomla มการท างานดานกราฟกทหลากหลายสามารถดาวนโหลดมาใชไดฟร

2. ขอใดกลาวถงคณสมบตของเทมเพลตไดถกตอง

ก. เทมเพลต คอ การท างานระหวางเวบไวต ข. เทมเพลต คอ การปรบแตงหนาตางเวบไซต ค. เทมเพลต คอ รปแบบในการจดการเนอหา ขอความ และกราฟกโดยรวมของเวบไซต ง. เทมเพลต คอ ลกษณะการท างานเกยวกบส บทความ และรปแบบการท างานของเวบไซต

3. ขอใดกลาวถงแทบ Styles ไดถกตอง

ก. สวนทใชในการก าหนดสไตลของเทมเพลต ข. สวนทใชก าหนดการท างานของเทมเพลตบนเวบไซต ค. สวนทใชในการปรบแตงเทมเพลตในการท างานของเวบไซต ง. สวนทแสดงรายละเอยดของเทมเพลตทงหมดของเวบไซต

4. ขอใดกลาวถงแทบ Templates ไดถกตอง

ก. สวนทใชในการก าหนดสไตลของเทมเพลต ข. สวนทใชก าหนดการท างานของเทมเพลตบนเวบไซต ค. สวนทใชในการปรบแตงเทมเพลตในการท างานของเวบไซต ง. สวนทแสดงรายละเอยดของเทมเพลตทงหมดของเวบไซต

15

แบบทดสอบหลงเรยน

5. ขอใดจดเปนเวบไซตทใหบรการในการดาวนโหลดเทมเพลตมาใชงาน

ก. http://www.joomla24.org ข. http://www.joomla24.com ค. http://www.joomla24.go.th ง. http://www.joomla24.net

6. ขอใดเปนขนตอนในการเรยกใชงานเทมเพลต ก. Extensions > Plugins ข. Extensions > Templates ค. Extensions > Mamage > Discover ง. Extensions > Mamage > Templates

7. เมอเราตดตง joomla ระบบจะมการตดตงเทมเพลตรปแบบตาง ๆ มาให ขอใดไมจดเปนเทมเพลต ทระบบตดตงมา

ก. Beez3_Default ข. Beez3_Fruit Shop ค. Photostar_Default ง. JSN Ferado Free _Default

8. ขอใดเปนขนตอนในการลบเทมเพลต ก. Extensions > Manage > เลอกไฟลทตองการลบ > Uninstall ข. Extensions > Database > เลอกไฟลทตองการลบ > Uninstall ค. Extensions > Manage > Manage > Waming > Uninstall ง. Extensions > Manage > Manage > เลอกไฟลทตองการลบ > Uninstall

9. ขอใดเปนขนตอนในการแกไขขอรายละเอยดของเทมเพลต ก. Extensions > Manage > เลอกไฟลทตองการแกไข ข. Extensions > Manage > เลอก Templates > เลอกไฟลทตองการแกไข ค. Extensions > Manage > เลอก Templates > Waming > Uninstall ง. Extensions > Manage > เลอก Templates > เลอกโฟลเดอร css > Templates.css >

.แกไข css ในสวนทตองการ

10. การก าหนดรปแบบ ฟอนต สของฟอนต นกเรยนตองด าเนนการแกไขในสวนใด ก. Fonts Styles ข. Fonts Manager ค. Stylesheet ง. Template Master Files

16

กระดาษค าตอบ

ชอ..........................................................................เลขท.............ชน..................

ขอท ก ข ค ง จ

1

2

3

4

5

6

7

8

9

10

17

คะแนนทได

บรรณานกรม กฤตยา พลหาญ. (2557). การพฒนาเวบไซตดวย CMS Joomla. [Online].

เขาถงไดจาก : https://krukikz.com. [2558, สงหาคม 16]. ชษณพงศ ธญญลกษณ. (2559). สรางและบรหารเวบไซตอยางมออาชพ.

กรงเทพฯ : ซคเซสมเดยจ ากด. ปยะ นากสงค. (2556). ขนตอนการตดตงการสรางเเละบรหารเวบไซตดวย Joomla. กรงเทพฯ : ซคเซสมเดย. พรรณภา โพธหล า. (2557). หองเรยนออนไลน By Krutao’s Blog. [Online].

เขาถงไดจาก : https://www. krutao.com. [2558, สงหาคม 9]. ยงยทธ สสมเหลา. (2558). สรางเวบไวตดวย Joomla manual_joomla. [Online].

เขาถงไดจาก : https://www.bsru.ac.th/downloads/manual_joomla2558.pdf [2558, ธนวาคม 3].

รตน วงษเนตร. (2558). สรางเวบไซตดวย Joomla 3.3.6. ส านกสงเสรมและพฒนาการเกษตร เขต 8 จงหวดสราษฎรธาน.

วรทธ พรมภกด. (2558). CMS คออะไร. [Online]. เขาถงไดจาก : https://www.sites.google.com/site/cb5630122115002/cms_report. [2558, สงหาคม 9].

วภารตน พศภมวถ. (2555). คมอสรางเวบไซตดวย Joomla ฉบบ basic & workshops. กรงเทพฯ : วตตกรปจ ากด.

ไวยวทย แคนเสาร. (2557). ชนดของ CMS ประเภทตางๆ. [Online]. เขาถงไดจาก : https://www.Sites.google.com/site/cb553012215051 [2557, มถนายน 24].

สาธต ชยววฒนตระกล. (2559). สรางเวบไซตใหครบสตร ดวย Joomla! 3.x ฉบบ Quick Start. กรงเทพฯ : วตตกรปจ ากด. เรยนท าเวบไซตดวย Joomla 3.x ใหมลาสด ไมตองจายเงนสกบาทกมเวบไซตได. [Online].

เขาถงไดจาก : https://www.pantip.com/topic/31070889/desktop. [2558, กรกฎาคม 11

18

ภาคผนวก

เฉลยแบบทดสอบกอนเรยน ปรบแตงหนาตาเวบไซตดวยเทมเพลต

ขอท ค าตอบ 1 ง 2 ง 3 ง 4 ก 5 ง 6 ข 7 ค 8 ง 9 ง 10 ง

20

เฉลยใบกจกรรมท 1 หลกการท างานของเทมเพลต

ค าชแจง ใหนกเรยนตอบค าถามใหไดใจความถกตอง ชดเจน (10 คะแนน)

1. เทมเพลต เปนรปแบบในการจดการแบบใด จงอธบายมาพอสงเขป (5 คะแนน) เทมเพลตเปนรปแบบในการจดวางเนอหา การใชขอความ ส และกราฟกโดยรวมใหกบเวบไซต ซงมการออกแบบเทมเพลตทใชงานกบ joomla สามารถหาดาวนโหลดไดจากแหลงตางๆ มากมาย และสามารถเลอกใชงานไดอยางเหมาะสม . 2. เหตใด Joomla จงไดรบความนยมกนอยางแพรหลาย จงอธบายมาพอสงเขป (5 คะแนน) Joomla เปนโปรแกรมประเภท Open Source ทสามารถดาวนโหลดมาใชงานไดฟร เปนโปรแกรมทชวยเพมความสะดวกในการท างานบนเวบไซต มระบบการบรหารจดการทไมยงยาก บนพนฐานการท างานการเพมบทความ การเพมรปภาพ หรอการปรบแตงโยกยายโมดลตาง ๆ ไมจ าเปนจะตองมานงเขยนโคดค าสงดวยตนเอง เพยงแตเรยนรวธการตดตง การปรบแตง การใชงาน CMS เทานน . .

ชอ-สกล……………………………………………………………………….เลขท..............ชน ม...................

21

เฉลยใบกจกรรมท 2 การตดตงเทมเพลต

. ค าชแจง ใหนกเรยนตอบค าถามใหไดใจความถกตอง ชดเจน (10 คะแนน)

1. ใหนกเรยนฝกปฏบตในการตดตงและเรยกใชงานเทมเพลต และสรปขนตอนการตดตง มาพอเขาใจ (5 คะแนน) การตดตงเทมเพลต 1. เลอก Extensions > Manage > Install . 2. คลกเพอเลอกไฟลเทมเพลตทตองการตดตง . 3. ต าแหนงไฟลเทมเพลต แลวคลก Open . 4. คลกเพอตดตงเทมเพลต . 2. ใหนกเรยนฝกปฏบตในการลบเทมเพลตทไมใชงาน และสรปขนตอนการตดตงมาพอเขาใจ (5 คะแนน) การลบเทมเพลต 1. เลอก Extensions > Manage . 2. คลก Manage . 3. เลอกเทมเพลตทตองการจะลบ . 4. เลอก Uninstall .

ชอ-สกล……………………………………………………………………….เลขท..............ชน ม...................

22

เมอเราท าการดาวนโหลดเทมเพลตเรยบรอยแลว

การเปลยนเทมเพลตใหกบเวบไซต เปนกระบวนการปรบเปลยนหนาตาของเวบไซตใหมความเหมาะสมตามทผใชงานตองการ เพอใหหนาตาของเวบไซตมลกษณะแปลกใหมขน ซงมวธการดงน

คลดเลอก Extensions > Templates

เปลยนเทมเพลตใหกบเวบไซต

2. คลกเพอดตวอยางเวบไซต

1. คลกรปดาว (Set default) เพอใชงานเทมเพลต

แนวปฏบตในการฝกทกษะ

23

Template หรอบางครงเรยกสนๆวา ธม นนกคอ รปรางหนาตาของเวบไซตทผเขาชมเหนทงหมด ไมวาจะเปนลกษณะของตวอกษร ส พนหลง เมน รปภาพ ปม การจดวางต าแหนงสวนประกอบตางๆ ของ Moldule เปนตน ซง Joomla ไดจดแบง Template แยกออกจาก การจดการขอมลและบทความในเวบไซตออกจากกนอยางชดเจน ซงถาหากวาเราท าการเปลยน Template ใหมกจะไมกระทบกบขอมลเนอหา บทความทเราเขยนแตอยางใดอาจจะมบางในเรองของต าแหนง Module ตางๆ ทอาจจะผดเพยนไปแตเรากสามารถปรบแตงไดในภายหลง ซงเราสามารถดาวนโหลด template ฟรไดจาก http://www.joomla24.com เมอดาวนโหลดไฟล เทมเพลตเสรจแลว ใหท าการปฏบตตามขนตอนตอไปน

เลอก Extensions > Manage > Install

การตดตงเทมเพลตใหกบเวบไซต

2. คลกเพอเลอกไฟลเทมเพลต ทตองการตดตง

3. ต าแหนงไฟลเทมเพลต แลวคลก Open

1. เลอก Extensions > Manage > Install

4. คลกเพอตดตงเทมเพลต

24

เมอตดตงเสรจแลว ใหท าการเปลยนเทมเพลตมาใชเทมเพลตทเราท าการตดตงไป

การท างานของเทมเพลตนน บางครงเทมเพลตทเราใชงานอยอาจไมถกใจผใชงาน เชน ฟอนต

สฟอนต สพนหลง และรปภาพ ซงมรปแบบทตองการเขาไปแกไขโคดค าสงของเทมเพลต โดยผทจะท าการแกไขนนตองมความรเบองตนทเกยวของกบ CSS และ PHP โดยโคดของเทมเพลตจะแบงออกเปน 2 กลม คอ

3. Template Master Files ใชในการก าหนดโครงราง และควบคมการท างานของ เทมเพลต กลมนจะเขยนดวยภาษา HTML JavaScript และ PHP

4. Stylesheet ใชในการก าหนดรปแบบตางๆ เชน ส ฟอนต โคดในกลมนจะเขยนใน รปแบบของ CSS

โดยมรายละเอยดดงน

5. แสดงการตดตงเทมเพลตเสรจสนสมบรณ

การแกไขเทมเพลต

25

1. คลกเลอก Templates

2. คลกเทมเพลตทตองการแกไขโคด

3. คลกเลอกโฟลเดอร css แลวเลอก Templates.css

4. แกไข css ในสวนทตองการ

5. เลอกบนทกและปด

26

การลบเทมเพลตทเราไมใชงานนน เปนสงส าคญอกประการหนงของผดแลระบบ เนองจาก

เทมเพลตทไมไดใชงานนนจะสงผลใหพนทในการเกบขอมลลดนอยลง เราจงตองท าการลบเทมเพลตทไมใชงานออกไปเพอเปนการประหยดพนทในการจดเกบขอมลและประหยดฐานขอมล ซงสามารถปฏบตตามขนตอนตอไปน

ส าหรบเทมเพลตทถกก าหนดการใชงานโดยระบบใหเปนคาเรมตนจะไมสามารถสงลบออกไป

ได เพราะก าลงถกใชงานอยนนเอง

การลบเทมเพลตทไมใชงาน

1. เลอก Extensions > Manage

3. เลอกเทมเพลตทตองการจะลบ

2. คลก Manage 4. เลอก Uninstall

27

เฉลยแบบทดสอบหลงเรยน

ปรบแตงหนาตาเวบไซตดวยเทมเพลต

ขอท ค าตอบ 1 ง 2 ค 3 ก 4 ง 5 ข 6 ง 7 ง 8 ง 9 ง 10 ค

28

แบบบนทกคะแนนเรอง ปรบแตงหนาตาเวบไซตดวยเทมเพลต

แบบทดสอบ แบบทดสอบ คะแนนเตม คะแนนทได

แบบทดสอบกอนเรยน 10 แบบทดสอบหลงเรยน 10

กจกรรม กจกรรม คะแนนเตม คะแนนทได

กจกรรมท 1 10 กจกรรมท 2 10

รวม 20

29

กรอกคะแนนใหครบทกชอง

นะคะ