Manualjoomla1 5

เว็บไซตงาย รวดเร็วดวย Joomla (version 1.
5)
บุญเลิศ อรุณพิบูลย
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี (http://stks.or.th)
สํานักงานพัฒนาวิทยาศาสตรและเทคโนโลยีแหงชาติ
คํานํา
การพัฒนาเว็บไซตในปจจุบนั ไดมีการพัฒนาไปอยางมาก โดยเฉพาะเมื่อมีการสราง

เครื่องมือชวยจัดการเนื้อหาของเว็บไซตทเี่ รียกวา CMS: Content Management System สงผล
ใหการออกแบบพัฒนาเว็บเปนเรื่องงาย สะดวกและรวดเร็วมากขึ้น
Joomla นับเปน CMS ที่มีความสามารถสูงมากโปรแกรมหนึ่ง มีจุดเดนในการจัดการ
เนื้อหาบทความที่หลากหลายรูปแบบ รองรับสื่อหลายฟอรแมต อีกทั้งมีหนาตาของเว็บที่
สวยงาม พรอมดวยโปรแกรมเสริมใหเลือกตามความตองการของหนวยงาน โดยเฉพาะ
จุดสําคัญคือ เปนซอฟตแวรในกลุมเปดเผยตนฉบับ (Source Code) หรือ Open Source Software
ทําใหไมมีคาใชจายในการจัดหาซอฟตแวร อีกทั้งสามารถปรับประยุกตแกไขใหเหมาะสมกับ
แตละหนวยงานได
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี เห็นความสําคัญของการจัดสื่อและ
คูมือเผยแพรการใชงาน Joomla จึงไดจัดทําคูมือฉบับนี้ขึ้นมาเพื่อเปนเอกสารตั้งตนสําหรับ
ผูสนใจทุกทาน ทั้งนี้เนื้อหาและเทคนิคเพิ่มเติมทานที่สนใจสามารถติดตามไดจากเว็บไซต
http://stks.or.th/elearning
หากคูมอื นี้มีขอ ผิดพลาดประการใด ผูเขียนขออภัยไว ณ ที่นี้และขอขอบคุณสําหรับ
คําแนะนําจากทุกทานเพื่อปรับปรุงในโอกาสตอไป
16 เมษายน 2551
สารบัญ
เทคโนโลยีเว็บเพจ .............................................................................................................................................1
องคประกอบของเทคโนโลยีเว็บ .......................................................................................................................3
เทคโนโลยีอินเทอรเน็ต...............................................................................................................................3
เอกสารเว็บ ..................................................................................................................................................3
เว็บเบราวเซอร (Web Browser)..................................................................................................................4
Markup Language ......................................................................................................................................7
HTML ...................................................................................................................................................7
SGML....................................................................................................................................................8
XML......................................................................................................................................................8
Style Sheet Technology .............................................................................................................................9
CSS........................................................................................................................................................9
XSL .......................................................................................................................................................9
รูปภาพ ......................................................................................................................................................10
ไฟลสกุล GIF (Graphics Interlace File)..............................................................................................10
ไฟลสกุล JPG (Joint Photographer’s Experts Group)........................................................................10
ไฟลสกุล PNG (Portable Network Graphics).....................................................................................11
การออกแบบเว็บเพจ........................................................................................................................................12
หลักการพัฒนาเว็บเพจ.....................................................................................................................................13
ขั้นเตรียมการ ............................................................................................................................................14
คําถามเพื่อชวยในการวางแผนเว็บไซต ...............................................................................................14
กําหนดโครงรางของเว็บ ...........................................................................................................................14
กําหนดโฟลเดอร (Folder) ที่ใชเก็บเอกสารเว็บ .......................................................................................16
สรางภาพหรือจัดหาภาพที่เกี่ยวของกับเนื้อหา .........................................................................................17
สรางเอกสารประกอบ...............................................................................................................................17
เลือกเครืองแมขาย WWW และระบบการสรางงาน .................................................................................17
สรางเอกสารเว็บ .......................................................................................................................................18
ตรวจสอบเอกสารเว็บ ...............................................................................................................................19
สงขอมูลขึ้นเครื่องบริการเว็บ ...................................................................................................................19
เครื่องมือพัฒนาเว็บ ..........................................................................................................................................21
Text Editor................................................................................................................................................21
HTML Editor ......................................................................................................................................22
HTML Generator ................................................................................................................................22
โปรแกรมบริหารจัดการเนื้อหาเว็บ (CMS).........................................................................................23
CMS เครื่องมือเด็ดพัฒนาเว็บไซต ...................................................................................................................24
Joomla: CMS เด็ดนาใช...................................................................................................................................26
ติดตั้ง Joomla บนพีซีจําลอง............................................................................................................................28
ติดตั้ง Joomla...................................................................................................................................................33
สํารวจเว็บใหม .................................................................................................................................................38
เขาสูระบบผาน Front-end ...............................................................................................................................41
แกไขขอมูลสมาชิก ..........................................................................................................................................42
แกไขบทความ .................................................................................................................................................43
แบงตอนเนื้อหาดวย Read more…..................................................................................................................45
สารบัญเนื้อหา..................................................................................................................................................47
แทรกรูปภาพ ...................................................................................................................................................48
ไฟลภาพ ...................................................................................................................................................51
ควบคุมการแสดงผลบทความ..........................................................................................................................52
สืบคนบทความไดงายๆ ดวย Metadata...........................................................................................................53
สรางบทความใหม...........................................................................................................................................54
ปรับแตงเว็บไซตผาน Back-end......................................................................................................................56
ขอมูลประกอบการสืบคนของเว็บ...................................................................................................................58
เขาถึงเนื้อหาไดงาย..........................................................................................................................................60
การปรับเปลี่ยนโฉมหนาของเว็บไซต .............................................................................................................61
จัดการบทความในเว็บไซต..............................................................................................................................64
การแกไขเนื้อหา .......................................................................................................................................66
เพิ่มประสิทธิภาพการสืบคนใหกับบทความ............................................................................................70
ตกแตงดวยรูปภาพ...........................................................................................................................................71
ลบภาพ......................................................................................................................................................72
ทํางานกับสื่อรูปแบบตางๆ ..............................................................................................................................73
ทํางานกับเมนู ..................................................................................................................................................74
ปรับแกไขเมนู...........................................................................................................................................74
Components ....................................................................................................................................................77
แบบสอบถามออนไลน (Poll) ..................................................................................................................77
ปายโฆษณา (Banner)...............................................................................................................................79
ดึงขาวมาแสดงผลอัตโนมัติ ......................................................................................................................81
ดาวนโหลด/ติดตั้ง Components...............................................................................................................82
พัฒนาเว็บตามตองการ ....................................................................................................................................83
ปรับเว็บไซตในโหมด Backend ......................................................................................................................89
ปรับคาระบบเว็บไซต (Global Configuration).........................................................................................89
วิเคราะหเนื้อหาเว็บไซต ..................................................................................................................................94
สรางเนื้อหา “แนะนําเว็บไซต” ........................................................................................................................96
สรางเนื้อหา “ทีมพัฒนา” ...............................................................................................................................101
เนื้อหาหมวดคลังความรู ................................................................................................................................108
แบบสอบถามออนไลน (Poll)........................................................................................................................115
Web Resources..............................................................................................................................................117
ปายโฆษณา (Banner) ....................................................................................................................................121
คลังภาพออนไลน ..........................................................................................................................................125
คลังเอกสาร คลังดาวนโหลด .........................................................................................................................129
Upload เอกสารดวย Media Manager .....................................................................................................131
สรางคลังดาวนโหลดเอกสาร .................................................................................................................131
ขาวประกาศอัตโนมัติแบบ RSS Feed ...........................................................................................................135
ติดตอทีมพัฒนา ผูดูแลเว็บ .............................................................................................................................138
เพิ่มชุดเมนู .....................................................................................................................................................140
สรางบัญชีสมาชิก ..........................................................................................................................................142
เมนูเฉพาะสมาชิก ..........................................................................................................................................146
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี -1-
เทคโนโลยีเว็บเพจ
การนําเสนอขอมูลในระบบ WWW (World Wide Web) พัฒนาขึ้นมาในชวงปลายป

1989 โดยทีมงานจากหองปฏิบัติการทางจุลภาคฟสิกสแหงยุโรป (European Particle Physics
Labs) หรือที่รูจักกันในนาม CERN (Conseil European pour la Recherche Nucleaire) ประเทศ
สวิตเซอรแลนด ทีมงานไดคดิ คนวิธีการถายทอดเอกสารขอมูลที่อยูในรูปแบบ HyperText ไป
ยังระบบคอมพิวเตอรอื่นๆ และเครือขายอินเทอรเน็ต ผลที่ไดคือ โปรโตคอล HTTP
(HyperText Transport Protocol) และภาษาที่ใชสนับสนุนการเผยแพรเอกสารของนักวิจัย หรือ
เอกสารเว็บ (Web Document) จากเครื่องแมขาย (Server) ไปยังสถานที่ตางๆ ในระบบ WWW
เรียกวา ภาษา HTML (HyperText Markup Language)
ดวยเทคโนโลยี HTTP และ HTML ทําให
การถายทอดขอมูลเอกสารมีความคลองตัว สามารถเชื่อมไปยังจุด
ตางๆ ของเอกสาร เพิ่มความนาสนใจในการอานเอกสาร ใชงาน
เอกสาร จนไดรับความนิยมอยางสูงในปจจุบัน การเผยแพรขอมูล
ทางอินเทอรเน็ตผานสื่อประเภทเว็บเพจ (Webpage) เปนที่นยิ ม
กันอยางสูง ไมเฉพาะขอมูลโฆษณาสินคา ยังรวมไปถึงขอมูลทางการแพทย การเรียน งานวิจยั
ตางๆ เพราะเขาถึงกลุมผูสนใจไดทั่วโลก ตลอดจนขอมูลที่นําเสนอออกไป สามารถเผยแพรได
ทั้งขอมูลตัวอักษร ขอมูลภาพ ขอมูลเสียง และภาพเคลื่อนไหว มีลูกเลนและเทคนิคการนําเสนอ
ที่หลากหลาย อันสงผลใหระบบ WWW เติบโตเปนหนึ่งในรูปแบบบริการที่ไดรับความนิยม
สูงสุดของระบบอินเทอรเน็ต
ลักษณะเดนของการนําเสนอขอมูลเว็บเพจ คือ สามารถเชื่อมโยงขอมูลไปยังจุดอืน่ ๆ
บนหนาเว็บได ตลอดจนสามารถเชื่อมโยงไปยังเว็บอืน่ ๆ ในระบบเครือขาย อันเปนทีม่ าของคํา
วา HyperText หรือขอความที่มีความสามารถมากกวาขอความปกตินั่นเอง จึงมีลกั ษณะคลาย
กับวาผูอานเอกสารเว็บ สามารถโตตอบกับเอกสารนั้นๆ ดวยตนเอง ตลอดเวลาที่มกี ารใชงาน
นั่นเอง ดวยความสามารถดังกลาวขางตน จึงมีผูใหคํานิยาม Web ไวดังนี้
The Web is a Graphical Hypertext Information System. การนําเสนอขอมูลผาน
เว็บ เปนการนําเสนอดวยขอมูลที่สามารถเรียกหรือโยงไปยังจุดอืน่ ๆ ในระบบกราฟก ซึ่งทําให
ขอมูลนั้นๆ มีจุดดึงดูดใหนาเรียกดู
2 เว็บไซตงาย รวดเร็วดวย Joomla
The Web is Cross-Platform. ขอมูลบนเว็บไมยดึ ติดกับระบบปฏิบัติการ (Operating

System: OS) เนื่องจากขอมูลนั้นๆ ถูกจัดเก็บเปน Text File ดังนั้นไมวาจะถูกเก็บไวใน
คอมพิวเตอรทใี่ ช OS เปนUNIX หรือ Windows NT ก็สามารถเรียกดูจากคอมพิวเตอรที่ใช OS
ตางจากคอมพิวเตอรที่เปนเครื่องแมขายได
The Web is distributed. ขอมูลในเครือขายอินเทอรเน็ตมีปริมาณมากจากทัว่ โลก และ
ผูใชจากทุกแหงหนที่สามารถตอเขาระบบอินเทอรเน็ตได ก็สามารถเรียกดูขอมูลไดตลอดเวลา
ดังนั้นขอมูลในระบบอินเทอรเน็ตจึงสามารถเผยแพรไดรวดเร็ว และกวางไกล
รูปแสดงการเชื่อมตอของคอมพิวเตอรหลากหลายรูปแบบ (Cross-platform)
The Web is interactive. การทํางานบนเว็บเปนการทํางานแบบโตตอบกับผูใชโดย

ธรรมชาติอยูแลว ดังนัน้ เว็บจึงเปนระบบ Interactive ในตัวมันเอง เริ่มตั้งแตผูใชเปดโปรแกรมดู
ผลเว็บ (Browser) พิมพชอื่ เรียกเว็บ (URL: Uniform Resource Locator) เมื่อเอกสารเว็บ
แสดงผลผานเบราวเซอร ผูใชก็สามารถคลิกเลือกรายการ หรือขอมูลที่สนใจ อันเปนการทํางาน
แบบโตตอบไปในตัวนั่นเอง
องคประกอบของเทคโนโลยีเว็บ
เมื่อเว็บเพจเปนสื่อในการนําเสนอขอมูลที่ไดรับความสนใจมาก การเรียนรูเทคโนโลยี
ดานนี้ เพื่อนํามาพัฒนาเว็บเพจดวยตนเอง จึงเปนสิ่งที่นา สนใจ ทั้งนี้การพัฒนาเว็บเพจ จะตอง
ทําความรูจักกับสวนประกอบตางๆ หลายสวนไดแก เว็บเบราวเซอร, ภาษากํากับ รวมทั้ง
ฟอรแมตภาพตางๆ ที่เหมาะสมกับการพัฒนาเว็บ
เทคโนโลยีอินเทอรเน็ต
อินเทอรเน็ต (Internet) เปนระบบเครือขายที่เชื่อมโยงคอมพิวเตอรจากทุกระบบ ทุก
รูปแบบ เขาสูระบบรวม ทําใหคอมพิวเตอรในระบบสามารถติดตอสื่อสารกันได อันเกิดใหเกิด
ความสะดวก รวดเร็วในการติดตอประสานงาน เผยแพรขาวสาร การใชอินเทอรเน็ต มี
หลากหลายลักษณะ เชนการใชอินเทอรเน็ตกับคอมพิวเตอรในสํานักงาน, ที่บาน, ระบบ
เคลื่อนที่หรือพกพาดวย Notebook Computer/Palmtop รวมทั้งโทรศัพทมือถือบางรุน
เอกสารเว็บ
เอกสารเว็บ นับเปนหัวใจหลักของการเผยแพรขอมูลในเครือขายอินเทอรเน็ต ขอมูล
ตางๆ จะถูกสรางและพัฒนาออกมาในรูปของเอกสารเฉพาะรูปแบบทีส่ ามารถนําเสนอไดอยาง
เหมาะสม อยางไรก็ตามเอกสารเว็บก็มีลักษณะคลายคลึงกับเอกสารงานพิมพทั่วไป คือ
ประกอบดวยหนาเว็บมากกวา 1 หนาโดยมีหนาแรกเปนหนาปก แตมีการเรียกชื่อแตกตางจาก
เอกสารงานพิมพทั่วไป ดังนี้
ชุดเอกสารเว็บ (Web Presentation) – ชุดของขอมูลที่ตองนําเสนอบนระบบ
อินเทอรเน็ต ประกอบดวยเว็บเพจ (Web Page) ตั้งแต 1 หนาขึ้นไป
เว็บเพจ (Web Pages หรือ Web Documents) – เอกสารที่นาํ เสนอผลงานบนระบบ
อินเทอรเน็ต
Home Page – หนาแรกของเอกสารเว็บ
Homepage
Webpage Webpage Webpage Webpage Webpage
ปจจุบันมีหลายคนที่มักสับสนกับการใชคําวา เว็บเพจ เว็บไซด และโฮมเพจ โฆษณา

หลายแหงลงประกาศรับจางสรางโฮมเพจ ถาแปลกันตรงๆ หมายถึงวา เขารับจางสรางกันแค
หนาโฮมเพจหนาเดียว หนาเว็บเพจอื่นๆ ไมรับ? บางคนใชเว็บไซดแทนเว็บเพจ ใชโฮมเพจ
แทนเว็บไซด ปนกันไป อยางไรก็ดีคนไทยหลายคนคุน เคยกับคําวา โฮมเพจ มากกวา เว็บเพจ
ดังนั้นการสื่อสารบางครั้งตองระวัง
เว็บเบราวเซอร (Web Browser)
เอกสารเว็บทีพ่ ัฒนาแลวสามารถเรียกดูไดดวยโปรแกรมเว็บเบราวเซอร (Web
Browser) โดยโปรแกรมจะทําหนาแปลภาษา HTML หรือภาษาอืน่ ๆ ที่นํามาสรางเอกสารเว็บ
แลวแสดงผลดวยขอกําหนดบนจอภาพ โปรแกรมเบราวเซอรตัวแรกไดแก Mosaic ซึ่งพัฒนา
โดยทีมงานจาก NCSA (National Center for Supercomputing Application) มหาวิทยาลัย
อิลลินอยส ประเทศสหรัฐอเมริกา เปนโปรแกรมที่ทําหนาที่แปลคําสั่ง และขอมูลที่อยูในรูป
ของภาษา HTML ใหเปนรูปแบบที่นาสนใจบนจอคอมพิวเตอร
โปรแกรมเบราวเซอรตัวแรกไดแก Mosaic ซึ่งพัฒนาโดยทีมงานจาก NCSA (National
Center for Supercomputing Application) มหาวิทยาลัยอิลลินอยส ประเทศสหรัฐอเมริกา เปน
โปรแกรมที่ทําหนาที่แปลคําสั่ง และขอมูลที่อยูในรูปของภาษา HTML ใหเปนรูปแบบที่
นาสนใจบนจอคอมพิวเตอร (http://archive.ncsa.uiuc.edu/SDG/Software/Mosaic/NCSAMosaicHome.html)
รูปแสดงโลโกของเว็บเบราวเซอร Mosaic
ในปจจุบนั มีผผู ลิตโปรแกรมเบราวเซอรออกมาเผยแพรหลายราย เว็บเบราวเซอรแตละ
คายแขงขันกันในเรื่องความเร็ว ขนาดแฟมภาพที่มีขนาดเล็ก ฟงกชันชวยเหลือตางๆ เชน ระบบ
ปองกันการบุกรุก การจดจําขอมูลของผูใช การตรวจสอบและปรับปรุงอัตโนมัติ ตัวอยางเว็บเบ
ราวเซอรที่มีการใชกันในปจจุบัน ไดแก
Internet Explorer www.microsoft.com/ie
Netscape www.netscape.com
Mozilla www.mozilla.org
Opera www.opera.com
American Online www.aol.com
Lynx lynx.browser.org
Amaya www.w3.org/amaya
รูปแสดงเบราวเซอรคาย Microsoft
รูปแสดงเบราวเซอรคาย Mozilla
เนื่องจากเว็บเบราวเซอรมีการพัฒนาออกมาจากหลากหลายบริษัท แตละบริษัทพัฒนา
ฟงกชันการแสดงผลเอกสารเว็บที่แตกตางกันออกไป การพัฒนาเว็บไซตจึงจําเปนตองศึกษาถึง
คุณสมบัติของเว็บเบราวเซอรแตละโปรแกรม ทั้งนี้ไดสรุปคุณสมบัติในการแสดงผลเอกสาร
เว็บ ดังตาราง (ขอมูลจาก http://en.wikipedia.org/wiki/Comparison_of_web_browsers, 14 มิถุนายน 2551)
VoiceXML/X
XHTML 1.0
XHTML 1.1
Web Forms
Nav LINKs
MathML
XForms
CSS2.1
Frames
Atom
WML
XSLT
Browser
RSS
Java
Amaya Yes No No ? No Yes Yes Yes No No No No No No
AOL Explorer Partial Yes Yes No Yes No No No † No Yes Yes No No No
Avant Partial Yes Yes ? Yes No No No No Yes Yes No No No
Camino Yes Yes Yes No Yes Yes Yes Yes No Partial Partial No No No
Dillo No Partial † No No No No No No No No No No No No
ELinks Partial Yes No ? No No No No No No No No No ?
Epiphany Yes Yes Yes No Yes Yes Yes Yes Yes Partial † Partial † No † No No
Flock Yes Yes Yes ? Yes Yes Yes Yes Yes Yes Yes No No No
Galeon Yes Yes Yes ? Yes Yes Yes Yes No No No No No No
iCab Yes Yes Yes Yes No No No No No Yes No No No No
Internet
Partial Yes Yes No † Yes No No No † No Yes † Yes † No † No No
Explorer
Internet
Explorer for Partial Yes Yes ? Partial No Yes No No No No No No No
Mac
K-Meleon Yes Yes Yes ? Yes Yes Yes No No Yes Yes No No No
Konqueror Yes Yes Yes Yes No Yes Yes No No Yes † Yes † No No No
Links No Yes No Yes No No No No No No No No No No
Lynx No Partial No Yes No No No No No No No No No No
Maxthon Partial Yes Yes ? Yes No No No No Yes Yes No No No
Mosaic No No No ? No No No No No No No No No No
Mozilla Yes Yes Yes Yes Yes Yes Yes Yes No No No No No No
Mozilla Firefox Yes Yes Yes No † Yes Yes Partial † Yes Yes Yes Yes No † No No
Netscape Yes Yes Yes ? Yes Yes Yes Yes No No No No No No
Netscape
Depends Yes Yes ? Yes Depends Depends Depends No Yes Yes No No No
Browser
Netscape
No Yes Yes No No No No No No No No No No No
Navigator
Netscape
Yes Yes Yes No Yes Yes Yes Yes Yes Yes Yes No No No
Navigator 9
OmniWeb Yes Yes Yes ? No Yes Yes No No Yes Yes No No No
Opera Yes Yes Yes Yes Yes Yes Yes Yes † No Yes Yes Yes Yes Yes
e-Capsule TM
Yes Yes Yes Yes Yes Yes Yes Yes Partial No No No No No
Private Browser
Safari Yes Yes Yes No Yes Yes Yes No No Yes Yes No No No
VoiceXML/X
XHTML 1.0
XHTML 1.1
Web Forms
Nav LINKs
MathML
XForms
CSS2.1
Frames
Atom
WML
XSLT
Browser
RSS
Java
SeaMonkey Yes Yes Yes Yes Yes Yes Yes Yes Yes No No No No No
Shiira Yes Yes Yes ? Yes Yes Yes No No Yes Yes No No No
WorldWideWeb No No No ? No No No No No No No No No ?
w3m ? Yes No ? No Yes ? No ? No No No No No
Markup Language
Markup Language หรือภาษากํากับ เปนภาษาทีน่ ิยมใชในการพัฒนาเอกสารเว็บ
มีลักษณะโครงสรางคือ พิมพในเครื่องหมาย < > และมีการเปด/ปดคําสั่ง เพื่อระบุตําแหนง
เริ่มตนคําสั่ง และตําแหนงสุดทายของคําสั่ง ภาษากํากับที่รูจักกันดีในการพัฒนาเว็บ ก็คือภาษา
HTML ในปจจุบันมีการพัฒนาภาษากํากับหลายลักษณะ นอกเหนือจาก HTML เชน ภาษา
XHTML (eXtensible HTML), XML (eXtensible Markup Language), MathML (Math Markup
Language)
HTML
HTML หรือ HyperText Markup Language เปนภาษาคอมพิวเตอรรปู แบบหนึ่ง ทีม่ ี
ลักษณะเปนภาษาในเชิงการบรรยายเอกสารไฮเปอรมีเดีย (Hypermedia Document Description
Language) เพือ่ นําเสนอเอกสารนั้นเผยแพรในระบบเครือขาย WWW (World Wide Web) มี
โครงสรางการเขียนที่อาศัยตัวกํากับ เรียกวา แท็ก (Tag) ควบคุมการแสดงผลของขอความ,
รูปภาพหรือวัตถุอื่นๆ ผานโปรแกรมเบราวเซอร (Browser)
HTML มีพัฒนาจากภาษา SGML (Standardized General Markup Language) โดย
นํามาปรับปรุงใหใชงานไดงา ยขึ้น สะดวกกวา SGML พัฒนามาเรื่อยๆ จาก HTML 2 จนถึง
4.01 ในปจจุบนั รายละเอียดการพัฒนาภาษา HTML สามารถศึกษาไดจาก http://www.w3.org
<HTML>
<HEAD>
<TITLE>ทดสอบการสรางเอกสารเว็บ</TITLE>
</HEAD>
<BODY>
ทดสอบการสรางเอกสารเว็บ<BR>
การสรางเอกสารเว็บ จะอาศัยภาษา HTML
<IMG SRC= “image.jpg”>
</BODY>
</HTML>
SGML
SGML (Standardized Markup Language) เปนภาษาตนแบบของภาษากํากับทั้งหมด
พัฒนามาในป ค.ศ. 1986 เนื่องจากปญหาในการแลกเปลี่ยนเอกสารขอมูลระหวางกันในระบบ
เครือขายอินเทอรเน็ตยุคแรกๆ จึงมีนักวิจยั กลุมหนึ่ง พัฒนาเครื่องมือในการแลกเปลี่ยนขอมูล
ระหวางกัน ซึง่ คุณสมบัติเบือ้ งตนของเครื่องมือดังกลาว คือ ตองยืดหยุน สามารถรองรับขอมูล
รูปแบบแปลกๆ ในอนาคตได ใชไดทวั่ โลก และในคอมพิวเตอรทุกรูปแบบ จากขอกําหนด
ดังกลาว จึงเกิดภาษา SGML มีการเก็บขอมูลในรูปรหัส ASCII เพราะคอมพิวเตอรทั่วไป
สามารถอานขอมูลลักษณะนีไ้ ดเหมือนๆ กัน และแบงการทํางานของ SGML เปน 2 สวนคือ
สวนประกาศโครงสรางขอมูล (DTD: Document Type Definition) ทําหนาที่
ประกาศรายละเอียดของแท็กี่จะใชแสดงขอมูล
สวนตัวเอกสาร (Document Body) เปนสวนหลักของเอกสาร ประกอบดวยแท็ก
คําสั่งตางๆ
ภาษา SGML เปนขอกําหนด (เชนเดียวกับมาตรฐาน ISO) ที่กําหนดวิธีการอธิบาย
โครงสรางของเอกสารฝงไวในตัวเอกสารเอง หมูนักศึกษา อาจารยและผูจดั ทําเอกสาร
อิเล็กทรอนิกส นิยมใช SGML ในการสรางรูปแบบตางๆ จากเอกสารฉบับเดียว และใชในการ
นําเอาเอกสารมาใชใหม อยางไรก็ตาม SGML ไมไดรบั ความนิยมมากนัก เพราะมีความยุงยาก
ในการนําไปประยุกตใชงาน การจัดเก็บขอมูล ความยืดหยุนและลักษณะเฉพาะที่เกินความ
ตองการ ทําใหยากตอการเขียนโปรแกรม
XML
XML (eXtensible Markup Language) ถูกออกแบบมาเพื่อใหผูสรางเอกสารสามารถ
นําไปใชงานในรูปแบบวิธีการที่งาย มีความชัดเจนและเปนเซตยอยของ SGML (Standard
Generalized Markup Language) ซึ่งเปนภาษาที่นยิ มใชและไดรับการพัฒนาใหมีประสิทธิภาพ
สูงสุดในการทํางานบนเว็บ โดย XML ประกอบดวย 3 สวนพื้นฐานดวยกัน คือ เอกสารขอมูล
(Data document) เอกสารนิยามความหมาย (definition document) และนิยามภาษา (definition
language)
XML เปนภาษาที่กําลังมาแรงมากที่สุด สําหรับใชในการพัฒนาระบบขอมูลขาวสารใน
ปจจุบัน ดวยความงายในการนําไปใชงานสําหรับการแลกเปลี่ยนขอมูลขาวสารทาง
อิเล็กทรอนิกสหรือ EDI ทําใหสามารถนํารูปแบบขอมูลกลับมาพัฒนาใชใหมได จึงทําใหลด
เวลาในการพัฒนาและการสรางขึ้นมาใหม
Style Sheet Technology

เทคโนโลยีสไตลชีท เปนสวนเพิ่มเติมขยายความสามารถของ Markup Language ชวย
ใหการแสดงผลเอกสารเว็บ มีความสวยงาม มาตรฐาน ระบบระเบียบในทิศทางเดียวกัน
CSS
CSS (Cascading Style Sheet) ถูกนํามาใชในการควบคุมการแสดงผลเอกสารของ
เอกสาร HMTL และ XML ทั้งนี้ CSS มีจดุ เดน คือ การควบคุม HTML แท็กแตละตัว และการ
ควบคุมการแสดงผลกราฟกตางๆ ที่สามารถทําไดงาย นอกจากนี้เมื่อมีการเปลี่ยนแปลง
ขอกําหนดของ CSS ในเอกสารหลัก ก็จะมีผลตอเพจอื่นๆ ทั้งหมด ทําใหประหยัดเวลาในการ
ปรับเปลี่ยนแกไขเว็บไซต อยางไรก็ตาม CSS ก็ยังมีปญหาการแสดงบนเบราวเซอรตา งคายตาง
รุน กอนใชงาน CSS จึงควรตรวจสอบผลกับเว็บเบราวเซอรใหครบ หรือมากที่สุด
<STYLE TYPE="text/css">

</STYLE>
XSL
XSL ยอมาจาก the eXtensible Style Language เปนมาตรฐานใหมที่เกิดขึ้นมาเพือ่
รองรับกับขอมูลที่เปน XML ทั้งนี้ XSL จะเปนสวนทีบ่ อกวาขอมูล หรือเอกสารที่จัดเก็บเปน
แฟมเอกสาร XML จะมีการแสดงผลเปนรูปรางหนาตาเชนไร นอกจากนี้ยังใช XSL ในการ
แปลงรูปแบบ (format) ของขอมูลไดดวย เชน แปลงเอกสาร XML ไปเปน HTML หรือ PDF
เปนตน
เอกสาร XSL คลายกับเอกสาร CSS ในกรณีที่ทั้งสองเอกสารมีการกําหนดสไตลที่
ประยุกตไปยัง element ที่แนนอน แตมีสงิ่ แตกตางกันเล็กนอย CSS จะกําหนดสไตลการพิมพ
เฉพาะ HTML Element เทานั้น ในทางตรงขาม XSL สามารถที่จะควบคุมขอมูลที่สงออกมาได
อยางสมบูรณกวา อีกทั้งขอมูลที่จะนําเสนอนั้นจะมีอิสระตอการปรับปรุงหรือเพิ่มขอมูล XSL
ใหสามารถจัดเรียงและกรองขอมูล XML ไดงายกวาดวย
การยกเลิกการแบงตอนเนื้อหา ก็สามารถทําไดโดยคลิกที่เสนประสีแดง แลวกดปุม

<Delete> แลวบันทึก บทความจะแสดงผลยาวตอเนื่องไมมีลิงก “Read more…” ดังนี้
รูปภาพ
เอกสารเว็บคงขาดสวนแสดงผลดวยรูปภาพมิไดอยางแนนอน อยางไรก็ตามการ
นําเสนอรูปภาพสําหรับเอกสารเว็บก็มีฟอรแมตภาพเฉพาะ ภาพกราฟก หรือรูปกราฟกที่
นํามาใชในการทําเว็บเพจ หรือนํามาใชในอินเทอรเน็ต จะตองเปนแฟมลักษณะเฉพาะ ปจจุบนั
นิยมใชกัน 3 ฟอรแมต คือ
• แฟมภาพฟอรแมต JPEG (Joint Photographer’s Experts Group File)
• แฟมภาพฟอรแมต GIF (Graphics Interlace File)
• แฟมภาพฟอรแมต PNG (Portable Network Graphics)
แฟมภาพสกุล GIF (Graphics Interlace File)

ภาพกราฟกสกุล GIF พัฒนาโดยบริษัท CompuServe จัดเปนแฟมภาพสําหรับ
การเผยแพรผานอินเทอรเน็ตตั้งแตยุคแรก เนื่องจากมีลักษณะเดน คือ
• สามารถใชงานขามระบบ (Cross Platform) ไมวาจะใช Windows หรือ Unix ก็
สามารถเรียกใชแฟมภาพสกุลนี้ได
• มีขนาดแฟมเอกสารเล็กจากเทคโนโลยีการบีบอัดภาพ ทําใหสามารถสงแฟม
ภาพไดรวดเร็ว
• สามารถทําพื้นของภาพใหเปนพื้นแบบโปรงใสได (Transparent)
• มีระบบแสดงผลแบบหยาบและคอยๆ ขยายไปสูละเอียดในระบบ Interlace
• มีโปรแกรมสนับสนุนการสรางจํานวนมาก
• เรียกดูไดกับ Graphics Browser ทุกตัว
• ความสามารถดานการนําเสนอแบบภาพเคลื่อนไหว (GIF Animation)
• แฟมภาพชนิดนี้ก็มีจุดดอยในเรื่องของการแสดงสี ซึ่งแสดงไดเพียง 256 สี
แฟมภาพสกุล JPG (Joint Photographer’s Experts Group)

เนื่องจากแฟมภาพสกุล GIF แสดงผลไดเพียง 256 สี จึงมีการพัฒนาแฟมภาพสกุล
JPEG เพื่อสนับสนุนสีไดถึง 24 bit และคุณสมบัติอื่นๆ อีกคือ
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี - 11 -
• สามารถใชงานขามระบบ (Cross Platform) หมายความวา ระบบคอมพิวเตอร

ทุกระบบ ไมวา จะใช Windows, Unix ก็สามารถเรียกใชแฟมภาพสกุลนีไ้ ด
• สามารถกําหนดคาการบีบแฟมไดตามที่ตอ งการ ดวยเทคนิคการบีบอัดคง
สัญญาณหลัก (Lossy compression) โดยนําบางสวนของภาพที่ซ้ําซอนออกไป
คงไวเฉพาะขอมูลสําคัญเทานั้น
• มีระบบแสดงผลแบบหยาบและคอยๆ ขยายไปสูละเอียดในระบบ Progressive
คลาย Interlaced
• มีโปรแกรมสนับสนุนการสรางจํานวนมาก
• เรียกดูไดกับ Graphics Browser ทุกตัว
อยางไรก็ตามแฟมภาพสกุลนี้ก็มีจุดดอย คือ
• พื้นของภาพโปรงใสไมได
• ถามีการบันทึกซ้ําหลายๆ ครั้ง จะทําใหคณ
ุ ภาพของภาพลดลงไปดวย
แฟมภาพสกุล PNG (Portable Network Graphics)

แฟมภาพสกุลลาสุดที่นําจุดเดนของแฟมภาพ GIF และ JPEG มาพัฒนารวมกัน ทําให
ภาพในสกุลนีแ้ สดงผลสีไดมากกวา 256 สี และยังสามารถทําพื้นภาพใหโปรงใสได จึงเปนไฟล
ภาพที่ไดรับความนิยมมากในปจจุบันดวยอีกสกุลหนึ่ง คุณสมบัติของภาพคือ
• สามารถใชงานขามระบบ (Cross Platform) หมายความวา ระบบคอมพิวเตอรทุก
ระบบ ไมวาจะใช Windows, Unix ก็สามารถเรียกใชแฟมภาพสกุลนี้ได
• ขนาดแฟมภาพเล็ก ดวยเทคนิคการบีบอัดคงสัญญาณ LZW
• สามารถทําภาพโปรงใสจากสีพื้น 256 ระดับ
• แสดงภาพแบบสอดประสานเชนเดียวกับ GIF โดยมีความคมชัดที่ดีกวา
• มีคุณสมบัติ Gamma ทําใหภาพสามารถปรับตัวเองไดตามจอภาพ และปรับระดับ
ความสวางที่แทจริงตามที่ควรจะเปน
การออกแบบเว็บเพจ
การออกแบบและพัฒนาเว็บเพจ สามารถทําไดหลายระบบ ขึ้นอยูก ับลักษณะของ

ขอมูล ความชอบของผูพัฒนา ตลอดจนกลุมเปาหมายที่ตองการนําเสนอ เชน หาก
กลุมเปาหมายเปนเด็กวัยรุน และนําเสนอขอมูลเกี่ยวกับความบันเทิง อาจจะออกแบบใหมี
ทิศทางการไหลของหนาเว็บที่หลากหลายใชลูกเลนไดมากกวาเว็บทีน่ ําเสนอใหกับผูใหญ หรือ
เว็บดานวิชาการ ทั้งนี้การออกแบบเว็บเพจ สามารถแบงไดสามลักษณะ คือ
• แบบลําดับขั้น (Hierarchy) เปนการจัดแสดงหนาเว็บเรียงตามลําดับกิ่งกานแตก
แขนงตอเนื่องไปเหมือนตนไมกลับหัว เหมาะสําหรับการนําเสนอขอมูลที่มี
การแบงเปนหมวดหมูทไี่ มมากนัก และมีขอ มูลยอยไมลกึ มาก เชนเว็บไซตแนะนํา
ประวัติสวนตัว ที่มีขอมูล 4 - 5 หนาเปนตน
• แบบเชิงเสน (Linear) เปนการจัดแสดงหนาเว็บเรียงตอเนื่องไปในทิศทางเดียว

เหมาะสําหรับการนําเสนอขอมูลที่เปนรูปภาพ เชนเว็บไซตนําเสนอสไลดจาก
Microsoft PowerPoint
• แบบผสม (Combination) เปนการจัดหนาเว็บชนิดผสมระหวางแบบลําดับขั้น และ

แบบเชิงเสน มักจะเปนแบบที่นิยมใชกันอยางแพรหลายในปจจุบนั เนือ่ งจาก
สามารถควบคุมการนําเสนอและการเรียกดูไดสะดวก และรวดเร็ว
หลักการพัฒนาเว็บเพจ
การพัฒนาเว็บเพจ ควรมีการวางแผนกอนเสมอ เพื่อใหการแสดงผลเว็บถูกตอง ตรงกับ

ความตองการ เพราะขบวนการพัฒนาเว็บเพจ จะตองเกีย่ วของกับระบบปฏิบัติการหลายระบบ
กลาวคือ ขณะที่สรางเอกสารเว็บ ผูพฒ ั นาอาจจะใชคอมพิวเตอรทมี่ ีระบบปฏิบัติการ MS
Windows แตหลังจากทีพ่ ัฒนาเสร็จแลวจะตองโอนเอกสารเว็บไปเก็บไวในเครื่องบริการเว็บ
(Web Server) ซึ่งมักจะเปนเครื่องที่ใชระบบปฏิบัติการ UNIX หรือไมก็ Windows 2000
เอกสารเว็บที่โอนไปยังเครื่องบริการเว็บนี้ อาจจะถูกเรียกดูจากคอมพิวเตอรระบบอื่นๆ เชน
Macintosh ซึ่งใชระบบปฏิบัติการ System 7 จะเห็นไดวาเอกสารเว็บจะตองเกี่ยวของกับ
ระบบปฏิบัติการหลายระบบ ดังนั้นการพัฒนาเว็บเพจตองคํานึงถึงสิ่งเหลานี้ดวย
Macintosh
FTP Browse
PC: Win Me Intranet
พัฒนาเว็บบนระบบ Win98/Me/XP Web Server
Win2000/Unix
รูปแสดงการทํางานของเอกสารเว็บที่สัมพันธกับระบบปฏิบัติการตางๆ
จากความสัมพันธดังกลาว นักพัฒนาเว็บเพจ จึงควรจะศึกษาถึงขอกําหนดพืน้ ฐานที่
ควรทราบกอน อันไดแก การกําหนดชื่อโฟลเดอร แฟมเอกสารเว็บ แฟมภาพกราฟก ตลอดจน
แฟมเอกสารอืน่ ๆ ที่จะนํามาใชในการทําเว็บเพจ เพราะระบบปฏิบัติการ UNIX มีลักษณะการ
ตั้งชื่อแบบ Case-Sensitive หมายถึง ตัวอักษรตัวพิมพใหญ และตัวพิมพเล็ก (A และ a) จะถือวา
เปนตัวอักษรคนละตัวกัน ไมเหมือนกับระบบปฏิบัติการดอส และวินโดวส จะถือวาเปน
ตัวอักษรตัวเดียวกัน
Index.html ≠ index.html
ดังนั้นหากผูพฒ
ั นาใชระบบปฏิบัติการดอส และวินโดวส สรางเอกสารเว็บ และ
กําหนดชื่อไฟล Index.htm แตขณะที่ปอนคําสั่งเพื่อลิงกแฟมเอกสารผานแปนพิมพเปน
index.html เมือ่ โอนถายเอกสารเว็บนั้นๆ ไปยังเครื่องบริการเว็บที่ใช UNIX เปนระบบปฏิบัติ
จะเกิดปญหาในการเรียกดูได เพราะระบบปฏิบัติการที่เครื่องบริการเว็บจะเห็นเปนแฟมคนละ
แฟม เนื่องจากชื่อแฟมเอกสารไมเหมือนกัน
ขั้นเตรียมการ
การพัฒนาเว็บไซต ควรกําหนดวัตถุประสงค เปาหมายการจัดทํา ศึกษาจุดเดนจุดดอย
ของเทคโนโลยีที่จะนํามาใชงาน เพื่อใหการพัฒนาเกิดผลสัมฤทธิ์สูงสุด
คําถามเพื่อชวยในการวางแผนเว็บไซต
• ชื่อโครงการ/เว็บไซต
• กลุมเปาหมาย
• วัตถุประสงค/เปาหมาย
• ขอมูลที่ตองการนําเสนอตอกลุมเปาหมาย
• ขอมูลใดที่พรอมสําหรับนําเสนอ
• ขอมูลอื่นๆ ประกอบเว็บไซต
• จํานวนหนาเว็บที่ตองการพัฒนา
• หนวยงาน/กลุม /ทีมงานพัฒนาเว็บไซต
• หัวหนาโครงการ
• ผูบริหารระบบ
• ความถี่ในการปรับปรุงเว็บไซต
• การตรวจสอบขอมูลยอนกลับจากกลุมเปาหมาย
• ผูรับผิดชอบตรวจสอบขอมูลยอนกลับจากกลุมเปาหมาย/ตอบคําถาม
• คียเวิรดสําหรับเว็บไซต
• หมวดของเว็บไซต
• การประชาสัมพันธเว็บไซต
• ระบบคอมพิวเตอร เครือขายที่ตองการ
• เทคโนโลยีที่ตองการ
• Domain name สําหรับเว็บไซต
กําหนดโครงรางของเว็บ
การกําหนดโครงรางของเว็บ เปนขั้นตอนสําคัญขั้นแรกก็วาได เพราะเอกสารเว็บที่
สรางจะเพิ่มจํานวนเรื่อยๆ และมีจุดเชื่อม (Link) จํานวนมาก หากไมมกี ารวางแผนไวกอน จะ
ทําใหการปรับปรุง แกไขเกิดปญหาไดงาย ปญหาที่ประสบแนนอนคือ ลืมวาแฟมเอกสารที่เคย
สรางไวแลว มีชื่ออะไรบาง ซึ่งจะสงผลใหการทําจุดเชื่อมเกิดปญหาตามไปดวย เพราะแฟม
เหลานี้อาจจะทิ้งชวงเวลานานพอสมควร จึงจะปรับปรุงอีกครั้ง วิธีการที่ดีที่สดุ เพื่อปองกัน
ปญหาดังกลาว ควรวางแผนออกแบบเอกสารเว็บบนกระดาษ และกําหนดชื่อแฟมเอกสารเว็บ

แตละแฟม จากขั้นตอนนีจ้ ะทําใหผูพฒ
ั นาสามารถมองเห็นภาพการไหล (Data Flow) ของ
เอกสารเว็บไดชัดเจน และพิจารณาตอไดวาเอกสารเว็บแตละแฟมมีความสัมพันธกับเอกสาร
อื่นๆ อยางไร และสัมพันธกบั แฟมเอกสารใดบาง
การกําหนดชื่อแฟมเอกสารเว็บ มีขอกําหนดทีแ่ ตกตางไปจากการกําหนดชื่อแฟม
เอกสารปกติทวั่ ไป คือ
ชื่อแฟมและนามสกุล จะถูกควบคุมจาก Web Administer ดังนั้นผูพฒ ั นาที่ไมใช
Web Administer จะตองสอบถามกฎการตั้งชื่อโดยละเอียด โดยปกติ มีหลักคราวๆ
ดังนี้
- ควรใชตัวอักษร a – z หรือตัวเลข 0 – 9 หรือผสมกัน
- ตัวอักษร a – z ควรเปนตัวพิมพเล็ก
- หามใชเครื่องหมายอื่นใดรวมทั้งชองวาง ยกเวน Dash (ขีดกลาง)
นอกจากนี้ยังจะตองพิจารณาถึงลักษณะหนาเว็บ, ลักษณะของสีพื้น, สีอักษรและสีของ
จุดเชื่อม (Links) ดวย โดยสามารถรางหนาเว็บคราวๆ เพื่อใหเห็นภาพโดยรวมกอนสรางงาน
จริง รวมทั้งการใชสีของหนาเว็บ ควรใชสีที่อานงาย สบายตา และมีลักษณะรวมกันในทุกๆ
หนาเว็บ ไมควรเปลี่ยนสีพนื้ ใหฉูดฉาด รวมทั้งศึกษาหนาเว็บไซตที่มกี ารพัฒนาในเครือขายเพื่อ
เปนแนวทางในการออกแบบ
รูปแสดงภาพรางของหนาเว็บ
กําหนดโฟลเดอร (Folder) ที่ใชเก็บเอกสารเว็บ

การกําหนดโฟลเดอรกอนที่จะสรางชุดเอกสารเว็บเพจ เปนลําดับขั้นตอนที่ควรปฏิบัติ
ดวยทุกครั้ง เพื่อใหเอกสารเว็บแตละชุดมีระบบการจัดเก็บที่เปนระบบ สามารถคนหา และ
เรียกใชงานไดสะดวก ในการสรางชุดเอกสารเว็บแตละชุด จะมีไฟลตางๆ จํานวนมาก ทั้งไฟล
เอกสาร HTML, ไฟลภาพกราฟก, ไฟลเสียง, ไฟลวดี ิทัศน และอื่นๆ ทีเ่ กี่ยวของ ไฟลทั้งหมดนี้
ควรจัดเก็บไวในที่ที่เดียวกัน อาจจะสรางโฟลเดอรยอยเพื่อแยกกลุมไฟลได แตจะตองสราง
ภายใตโฟลเดอรหลักที่สรางไวกอนแลว ไมควรแยกไวคนละที่ เพราะจะทําใหการจัดการเว็บมี
ปญหายุงยากได (การตั้งชื่อโฟลเดอรใชหลักการเดียวกับชื่อไฟล)
การสรางโฟลเดอร
เลือกไดรฟและโฟลเดอรหลักที่ตองการสรางโฟลเดอรยอ ย
เลือกเมนูคําสั่ง File, New, Folder ปรากฏไอคอนโฟลเดอร ชื่อ New Folder
พิมพชื่อโฟลเดอรใหม หากไมสามารถพิมพได ใหกดปุมฟงกชัน @ กอน

เมือ่ พิมพชื่อโฟลเดอรเสร็จแลว ใหกดปุม E
สามารถสรางโฟลเดอรยอยๆ ภายใตโฟลเดอรนี้ได
สรางภาพหรือจัดหาภาพที่เกี่ยวของกับเนื้อหา
เอกสารเว็บตองเกี่ยวของกับรูปภาพโดยตรง ดังนั้นควรสรางภาพ หรือจัดหาภาพ แลว
คัดลอกมาไวในโฟลเดอรที่ไดจัดเตรียมไว เพื่อใหสะดวกในการเรียกใชงาน และการบริหาร
เว็บไซตในอนาคตการจัดเก็บไฟลไวในโฟลเดอรที่เตรียมไว ยังรวมถึงไฟลตางๆ ที่จะนํามาใช
ประกอบการสรางเว็บ เชนไฟลเอกสารจากเวิรด กระดาษคํานวณ นําเสนอผลงานตางๆ จะตอง
ดําเนินการลักษณะเดียวกับไฟลภาพเชนกัน ทั้งนี้ชื่อไฟลตา งๆ ที่นํามาใชประกอบการสรางเว็บ
ก็ตองตั้งโดยยึดหลักเดียวกับการตั้งชื่อไฟลเอกสารเว็บ
ไฟลภาพที่ไมสามารถนํามาสรางเอกสารเว็บ เพราะมีสวนขยายเปน .bmp, .tif
สรางเอกสารประกอบ
นอกจากภาพแลว อาจจะมีไฟลประกอบอืน่ ๆ เชน Word, PowerPoint, PDF Document
ก็จะตองเตรียมไวในโฟลเดอรที่สรางไวใหพรอม โดยอาจจะสรางเปนโฟลเดอรเฉพาะของแต
ละไฟลฟอรแมต
ไฟลเอกสารตางๆ ที่ผิดพลาด เพราะชื่อไฟลเปนภาษาไทย หรือมีชองวาง

เลือกเครืองแมขาย WWW และระบบการสรางงาน
การสรางเว็บไซตในปจจุบนั ยอมหนีไมพนความตองการดานโปรแกรมมิ่ง เชน
ตองการตัวนับจํานวนการเขาชมเว็บไซต (Counter) ตองการกระดานขาว (Web board) ตองการ
สมุดเยี่ยม (Guestbook) หรือฟงกชันสูงๆ เชน ระบบสมาชิก แตนักพัฒนาเว็บไซตมักจะลืมไป
วาระบบโปรแกรมบนเว็บ เปนระบบที่สัมพันธกับระบบปฏิบัติการ ดังนั้นกอนสรางเว็บไซต
ควรพิจารณาใหแนนอนวาเว็บที่พัฒนา จะนําไปเก็บไวบนเครื่องแมขายที่ใชระบบปฏิบัติการใด
เพราะหากเลือกผิดพลาด ก็จะทําใหเว็บนั้นมีปญหาอีกมากมาย
ระบบปฏิบัติการและอื่นๆ ระบบปฏิบัติ Windows ระบบปฏิบัติ UNIX

ภาษาโปรแกรมที่สนับสนุน ASP, VB Script, Java, Perl, PHP, JavaScript, Java
JavaScript
ชื่อไฟลแรก default.htm index.html
นามสกุล .htm, .html มักเปน .html
การตั้งชื่อไฟล, โฟลเดอร สนับสนุนภาษาไทย ภาษาอังกฤษเทานั้น
ดังนั้นการพิจารณาเลือกเครื่องแมขาย WWW และระบบปฏิบัติกอนสรางเว็บไซต จะ
ชวยใหเว็บไซตนั้น ไมเกิดปญหาตามมาทีหลัง เชน รันโปรแกรมไมได, มีปญหาเรื่องการเรียก
ไฟลตางๆ ซึ่งเปนปญหาที่นกั พัฒนาเว็บมือใหมเกือบทุกรายประสบ
สรางเอกสารเว็บ
ไฟลเอกสาร HTML เปนไฟลขอความปกติ (Text File) ดังนั้นสามารถใชโปรแกรม
สรางเอกสารโปรแกรมใดก็ได ชวยในการลงรหัสคําสั่ง HTML เชน NotePad, WordPad
นอกจากนี้ในปจจุบันมีโปรแกรมชวยในการสรางเอกสารเว็บอีกหลายระบบ ดังที่แนะนําไป
แลว
จากที่กลาวไววาไฟลเอกสาร HTML เปนไฟลขอความปกติ ดังนั้นเพือ่ ใหโปรแกรมเบ
ราวเซอรทราบวาไฟลเอกสารนี้ เปนไฟลเฉพาะสําหรับกําหนดรูปแบบการแสดงผลผาน
อินเทอรเน็ต จึงมีลักษณะเฉพาะของไฟลเอกสารรูปแบบนี้คือ ในการจัดเก็บไฟล จะตอง
กําหนดนามสกุล หรือสวนขยายของไฟล (File Extension) เปน .htm หรือ .html โดยขอกําหนด
เกี่ยวกับนามสกุลของไฟลนี้ ขึ้นอยูกับผูบริหารเครือขายเว็บ ดังนั้นกอนสรางเอกสาร HTML
ควรสอบถามจากผูบริหารเครือขายที่ทานจะนําขอมูลไปฝากไวกอนวาใหกําหนดนามสกุลของ
ไฟลอยางไร
นอกจากการกําหนดนามสกุลของไฟล ชื่อไฟลก็เปนอีกสวนหนึ่งที่ผูพัฒนาตอง
ตระหนักดวย เพราะผูใหบริการเผยแพรขอ มูล หรือผูดูแลระบบเครือขาย อาจจะกําหนดชื่อไฟล
เอกสาร HTML แตกตางกันออกไป
สําหรับการตั้งชื่อและนามสกุลของไฟล HTML เปนภาษาไทย เปนสิ่งที่ไมควรกระทํา
เปนอยางยิ่ง เพราะระบบปฏิบัติการหลายระบบไมสนับสนุนภาษาไทย และควรใชตัวอักษร
ตัวพิมพเล็กในการกําหนดชื่อและนามสกุลของไฟลทุกครั้ง เพื่อปองกันปญหาการทํางานขาม
ระบบปฏิบัติการ เนื่องจากระบบปฏิบัติการหลายระบบ โดยเฉพาะ UNIX จะเห็นตัวอักษร
ตัวพิมพใหญ และตัวพิมพเล็กเปนคนละตัวกัน (Case-Sensitive)
ตรวจสอบเอกสารเว็บ
ขณะที่สรางเอกสารเว็บ ควรตรวจสอบผลผานโปรแกรมแสดงผลเบราวเซอรหลายคาย
หลายรุน (หากทําได) เพราะโปรแกรมเบราวเซอรแตละคาย แตละรุน จะรูจัก หรือใหผลลัพธ
จากคําสั่ง HTML ไมเหมือนกัน จะไดทราบขอบกพรอง ขอผิดพลาด และสามารถแกไขไดทัน
กอนที่จะสงขึ้นไปแสดงผลจริงในระบบอินเทอรเน็ต
ขอที่ควรคํานึงถึงในการทําเว็บเชิงพาณิชยกค็ ือ ภาษา HTML เปนภาษาที่ยังไมตาย ยังมี
การพัฒนาชุดคําสั่งใหมๆ อยูเรื่อยๆ ดังนั้นอยาพยายามไลตามเทคโนโลยีใหมๆ เหลานี้ ควร
พัฒนาเว็บเพจที่สามารถเรียกดูไดจากเบราวเซอรหลายๆ รุน หลายคาย ดีกวายึดคายใด คายหนึ่ง
หรือรุนใด รุนหนึ่ง มิฉะนั้นอาจจะทําใหพลาดจากลูกคาบางกลุมไปได
ขอมูลจาก http://truehits.net/ (วันที่ 14 มิถุนายน 2551)

สงขอมูลขึ้นเครื่องบริการเว็บ
เมื่อไดพัฒนาเอกสารเว็บ และตรวจสอบผลไดตามที่ตองการแลว ก็สามารถโอนขอมูล
นั้นๆ ไปยังเครื่องบริการเว็บได โดยใชโปรแกรมกลุมถายโอนขอมูล (FTP Software) เชน
WinFTP, CuteFTP รวมทั้งฟงกชัน FTP ของ Macromedia Dreamweaver เปนตน
กอนโอนขอมูล จะตองขอสิทธิ์และพื้นที่จากผูดูแลระบบกอนเสมอ และตลอดจนตอง
สอบถามขอมูลที่จําเปนในการโอนขอมูล เชนชื่อบัญชีของผูมีสิทธิ์ (Login Name / Account
Name), รหัสผานของบัญชี (Password) เปนตน
ตัวอยางขอมูลเครื่องบริการเว็บ (Web Server)

Site Name abc.com
Email Contact administrator@abc.com
DNS Primary Name Server:
ns5.thdns.net 111.111.111.111
Secondary Name Server:
ns6.thdns.net 222.222.222.22
Admin Site www.abc.com/admin
Administrator User Name abc
Password bbc9999
Mail Site www.abc.com/mail
User Site www.abc.com/user
Name Based Address 111.111.111.111
FTP 333.333.333.333
Username webmaster@abc.com
Password Abc9090
Disk Space 500.0 MB
เครื่องมือพัฒนาเว็บ
การพัฒนาเว็บเพจ สามารถกระทําไดโดยการใชภาษา HTML ซึ่งมีลักษณะการเขียน

โปรแกรมภาษาดวยวิธีการลงรหัสคําสั่ง คลายกับการเขียนโปรแกรมภาษาคอมพิวเตอรทั่วๆ ไป
แตในปจจุบันมีเครื่องมือชวยพัฒนาหลากหลายรูปแบบ ทั้งแบบชวยลงรหัส HTML และแบบ
สรางงานอัตโนมัติ (Wizard) ทั้งนี้สามารถจําแนกการสราง/พัฒนาเว็บเพจดวยโปรแกรมตางๆ
ได 4 วิธี คือ
• การพัฒนาเว็บเพจดวยการลงรหัส HTML ดวยโปรแกรม Text Editor
• การพัฒนาเว็บเพจดวยการลงรหัส HTML ดวยโปรแกรม HTML Editor
• การพัฒนาเว็บเพจดวยโปรแกรมสรางงานอัตโนมัติ หรือ HTML Generator
• การพัฒนาเว็บเพจดวยซอฟตแวรบริหารจัดการเนื้อหา (Content Management
Software)
Text Editor
การใช Text Editor เชน NotePad, Qeditor เปนวิธีที่เหมาะสําหรับนักพัฒนาเว็บเพจทีม่ ี
ความรูเกี่ยวกับภาษา HTML ในระดับสูง และตองการใสลูกเลนใหกบั เว็บเพจ เพราะผูพัฒนา
สามารถควบคุมตําแหนง และจํานวนรหัสคําสั่งไดอิสระ อยางไรก็ตามวิธีนี้ก็ไมเหมาะสําหรับ
ผูพัฒนาในระดับตน เพราะตองศึกษาคําสัง่ HTML และใชเวลาในการพัฒนาพอสมควรในแต
ละหนาเว็บ ตลอดจนไมเห็นผลลัพธจากการปอนคําสั่งทันที ตองเรียกผานโปรแกรมเบราวเซอร
HTML Editor
โปรแกรม HTML Editor ที่นิยมกันอยางสูงในปจจุบนั ไดแก โปรแกรม HomeSiteX,
Coffee Cup HTML Editor, HTML Assistant, HotDog Professional โดยโปรแกรมเหลานี้ จะ
ชวยใหการลงรหัสกระทําไดสะดวก และรวดเร็ว เพราะมีปุมคําสั่งควบคุมรหัสคําสั่ง HTML
คลายๆ กับปุมคําสั่งใน Microsoft Office อยางไรก็ตามโปรแกรมกลุมนี้ก็มีจุดดอย คือ จะไม
รูจักคําสั่ง HTML ใหมๆ จึงไมมีปุมคําสั่งเหลานี้ ผูใชยังตองพิมพเองเชนเดิม
จอภาพโปรแกรม HTML Editor
HTML Generator
HTML Generator เปนโปรแกรมรุนใหม ที่ชวยใหการพัฒนาเอกสารเว็บ กระทําได
สะดวก และรวดเร็ว เพราะการปอนขอมูลในโปรแกรมเหลานีจ้ ะกระทําคลายกับการปอน
ขอมูลใน Microsoft Word มีปุมคําสั่งเชนเดียวกัน ตลอดจนผูใชสามารถเห็นผลจากการใชคําสั่ง
ไดทันที ซึ่งเรียกวาการทํางานแบบ WYSIWYG (What You See Is What You Get) หลังจาก
นั้นโปรแกรมจะแปลงเอกสารนั้นเปนเอกสาร HTML ใหโดยอัตโนมัติ โดยที่ผูใชไมตองยุงยาก
กับศึกษาชุดคําสั่ง HTML ตลอดจนการลงรหัส HTML อยางไรก็ตามโปรแกรมกลุมนี้ก็มีจุด
ดอยที่วา ชุดคําสั่ง HTML ในโปรแกรมแตละโปรแกรมจะมีจาํ กัด และบางโปรแกรมยังไม
สนับสนุนการทํางานกับภาษาไทย หรืออาจจะตองปรับปรุงโปรแกรมกอน จึงจะใชงาน
ภาษาไทยได ซึ่งสรางความยุงยากใหกับผูใชไดพอสมควร ตัวอยางโปรแกรมในกลุมนี้ เชน
MS-Office 97/2000/XP, FrontPage 97/98, Netscape Editor, Netscape Composer, Macromedia
DreamWeaver และ Yahoo SiteBuilder
จอภาพโปรแกรม Yahoo Site Builder
โปรแกรมบริหารจัดการเนื้อหาเว็บ (CMS)
ปจจุบันมีการพัฒนาซอฟตแวรทําหนาที่บริหารจัดการเนื้อหาเว็บ (CMS: Content
Mnagement System) ที่ประกอบดวยฟงกชันการทํางานตางๆ เชน การจัดการสมาชิก การ
จัดการหมวดเนื้อหา การจัดทําแบบสํารวจพรอมใชงานอยางไรก็ตามผูใชจะตองมีความรูใน
ดานระบบปฏิบัติการในระดับที่สูงมาก รวมทั้งตองมีเครื่องแมขายเว็บพรอมใชงาน โปรแกรม
ในกลุมนี้ไดแก PHPNuke, PostNuke, Joomla, Mambo, Drupal
รูปแสดงสวนควบคุมการจัดการเนื้อหาลักษณะตางๆ ของโปรแกรม PHPNuke
CMS เครื่องมือเด็ดพัฒนาเว็บไซต
การออกแบบพัฒนาเว็บไซตในปจจุบันไดกาวไปอีกขัน้ จากเดิมทีที่ผูพัฒนาจะตอง
ศึกษาภาษา HTML หรือเว็บโปรแกรมมิ่งเชน PHP ASP แตดว ยพัฒนาการของเทคโนโลยีเว็บ
ในดานเครื่องมือออกแบบเว็บไซตสําเร็จรูปที่เรียกวา ซอฟตแวรบริหารจัดการเนือ้ หาเว็บไซต
(Content Management System: CMS) ทําใหการออกแบบพัฒนาเว็บไซตเปนเรื่องงาย สะดวก
และรวดเร็ว
CMS เปนซอฟตแวรที่ออกแบบมาเพื่อชวยอํานวยความสะดวกในการบริหารจัดการ
เอกสารและเนือ้ หารูปแบบตางๆ โดยเฉพาะสื่อดิจิทัลของเว็บไซต โดยมาก CMS จะเปน
ซอฟตแวรที่ทาํ งานผานระบบเครือขาย พัฒนาดวยภาษาคอมพิวเตอรสําหรับเว็บ (Web
Programming) เชน PHP, ASP ผสานกับระบบจัดการฐานขอมูล ปจจุบัน CMS ที่ชวยในการ
ออกแบบเว็บไซตมีหลากหลาย เชน Joomla, Mambo, PHPNuke, PostNuke, Drupal ซึ่งทานที่
สนใจสามารถเปรียบเทียบความสามารถของ CMS ไดที่เว็บไซต http://www.cmsmatrix.org
รูปแสดงเว็บไซต www.cmsmatrix.org
การเปรียบเทียบก็ทําไดไมยาก โดยคลิกเลือก CMS ที่ตองการเชน Drupal กับ Joomla

แลวคลิกปุม compare รอสักครูจะปรากฏรายงาน ดังนี้
รูปแสดงผลการเปรียบเทียบ CMS จากเว็บไซต cmsmatrix.org
Joomla: CMS เด็ดนาใช
Joomla นับเปน CMS ที่มีความโดดเดนมากโปรแกรมหนึ่ง เนื่องจากรองรับงานที่

หลากหลาย และเนื้อหาหลากฟอรแมต ดวยการพัฒนาในรูปแบบเปดเผยตนฉบับ (Open
Source) ทําใหมีชุมชนนักพัฒนาขนาดใหญที่รวมกันพัฒนาโปรแกรมเสริม (Extensions)
ตลอดเวลา
รูปแสดงการเลือกใช Joomla, Mambo และ Drupal จากเว็บ trends.google.com

(ณ วันที่ 13 กรกฎาคม 2551)
Joomla เปนซอฟตแวรทมี่ ีระบบจัดการเนื้อหาอยางเปนระบบ ทั้งการจัดหมวดหมู
การนําเขา การเผยแพร และกระบวนการทํางานกับผูใชประเภทตางๆ สามารถนําไปประยุกตใช
กับงานไดหลากหลาย ทั้งเว็บสวนตัว เว็บหนวยงาน เว็บจัดการความรู เว็บทางการคา และ
การศึกษา สําหรับทานที่สนใจเลือกใช Joomla สามารถดาวนโหลดที่ http://www.joomla.org
รูปแสดงเว็บ joomla.org
ฟงกชันทํางานในสวน CMS ของ Joomla มีลักษณะเปน Graphics User Interface ทํา

ใหงายตอการจัดการเนื้อหาที่มีความหลากหลายทางดานรูปแบบ โดยมีจุดเดนดังนี้
1. Front-end และ Back-end
Joomla มีหนาเว็บไซตสําหรับการเขาชมของผูเยี่ยมชมและสามารถล็อกอิน
เพื่อเขาทํางานของสมาชิก เรียกวา Front-end รวมทั้งไดออกแบบสวนทํางาน
เบื้องหลังที่เรียกวา Back-end เพื่อควบคุมระบบการทํางานในภาพรวมของ
Joomla โดยแยก URL ออกจากกันอยางชัดเจน
2. Access rights
Joomla กําหนดสิทธิ์ในการเขาถึงเนื้อหาของเว็บไวหลายรูปแบบ โดยแยกเปน
สิทธิ์เขาถึงจากหนาเว็บ Front-end และ Back-end แตกตางกันออกไป
3. Content
Joomla แบงประเภทของเนื้อหาออกเปนหลากหลายประเภท เชน บทความ
เว็บแนะนํา แบบสอบถาม แตจัดการไดงา ยดวยสวนบริหารจัดการทีจ่ ดั เตรียม
มาใหเฉพาะและพรอมใชงาน พรอมระบบติดตาม/นําเสนอเนื้อหาอยางงาย
(Simple workflow system) และการสรุปเนือ้ หาในรูปแบบ RSS
จากจุดเดนดังกลาวขางตนสงผลให Joomla เปน CMS ที่ไดรับความนิยมอยางมาก จน
ไดรับรางวัล The Best CMS Award ป 2550
ที่มา: http://www.packtpub.com/article/joomla-wins-best-php-open-source-content-management-system
ติดตั้ง Joomla บนพีซีจําลอง
หลายๆ ทานทีส่ นใจใชงาน Joomla คงมีปญหาเกี่ยวกับพื้นที่บริการเว็บ (Web Hosting)

เนื่องจากตองอาศัยเครื่องแมขายเว็บ (Web Server) ที่ติดตั้งโปรแกรมภาษา PHP ฐานขอมูล
MySQL แตปญหานี้หมดไปไดโดยการจําลองเครื่องพีซีธรรมดาใหเปนเครื่องแมขายเว็บ
แบบจําลอง ทัง้ นี้โปรแกรมจําลองเครื่องพีซีเปนเครื่องแมขายเว็บจําลอง มีหลายโปรแกรม เชน
XAMPP หรือ AppServ ทั้งนี้โปรแกรมทีจ่ ะแนะนําในเอกสารคูมือนี้คือ AppServ โปรแกรม
สําเร็จรูปที่ประกอบดวยโปรแกรมจําลองเครื่องแมขายเว็บ Apache โปรแกรมจัดการฐานขอมูล
MySQL และโปรแกรมแปลภาษา PHP ไวดว ยกัน รุนปจจุบนั ดาวนโหลดไดที่เว็บไซต
http://www.appservnetwork.com
ไฟลที่ดาวนโหลดมาได คือ appserv-win32-2.5.9.exe เมื่อดับเบิลคลิกจะปรากฏสวน

ติดตั้งโปรแกรม ดังนี้
จากจอภาพตอนรับการติดตั้ง AppServ ใหคลิกปุม Next เพื่อเขาสูสวนลิขสิทธิ์
คลิก I Agree เพื่อยอมรับลิขสิทธิ์การใชงานเชนกัน
จอภาพถัดไปคือระบุไดรฟ และโฟลเดอรสําหรับติดตั้ง Appserv โดยโปรแกรม

กําหนดไวทไี่ ดรฟ C โฟลเดอร AppServ ใหคลิก Next เพื่อยอมรับการกําหนดไดรฟและ
โฟลเดอร
สวนนี้เปนการเลือกวาจะติดตั้งโปรแกรมใดบาง กรณีนใี้ หคลิกเลือกทุกรายการ แลว

คลิกปุม Next
สวนสําคัญในการติดตั้ง คือ
1. การระบุชื่อเครื่องแมขายเว็บ (Server Name) กรณีที่เปนการติดตั้งจําลองมักจะ
ระบุเปน localhost (สําหรับการติดตั้งจริง จะตองสอบถามจากผูดูแลเครื่องแม
ขายเว็บโดยตรง)
2. การระบุอีเมลของผูดูแล (Administrator’s Email Address)
3. การระบุหมายเลขชองทางติดตอ (Apache HTTP Port) มักจะระบุเปนเลข 80
เมื่อกําหนดคาตางๆ แลวก็คลิกปุม Next เพื่อเขาสูสวนกําหนดคาควบคุมของฐานขอมูล

MySQL
1. กําหนดรหัสผานของการเขาถึงฐานขอมูล MySQL ในรายการ Enter root

password และระบุซ้ําในรายการ Re-enter root password
2. เลือกรหัสภาษาไทยใหถูกตองตามคากําหนดของเครื่องแมขาย กรณีนี้ควรระบุ
เปน UTF-8 Unicode หรือ TIS-620 (ตามขอกําหนดของเครื่องแมขายเว็บ)
Account ชุดแรกที่ตองจําคือ Account ควบคุมฐานขอมูล MySQL โดย User Name คือ

root และรหัสผาน คือ ..............................................
เมื่อระบุคาเกีย่ วกับการเขาถึงฐานขอมูล MySQL แลวใหคลิกปุม Install เพื่อเริ่มติดตั้ง

โปรแกรมตางๆ ของ AppServ
จอภาพแสดงผลเมื่อการติดตัง้ สมบูรณ
คลิกเลือก Start Apache และ Start MySQL เพื่อใหโปรแกรมทั้งสองทํางาน จากนัน้

คลิกปุม Finish เพียงเทานี้ก็เสร็จสิ้นการติดตั้ง AppServ ซึ่งสามารถทดสอบไดโดยเปด
เว็บเบราวเซอร จากนั้นพิมพคําสั่ง http://localhost หรือ http://127.0.0.1
ติดตั้ง Joomla
พีซีธรรมดาไดถูกจําลองเปนเครื่องแมขายเว็บแลว ตอนนีก้ ็ถึงเวลาที่จะติดตั้ง Joomla

เพื่อเนรมิตเว็บไซตภายในไมกี่นาที โดยเริม่ จากดาวนโหลดโปรแกรม joomla รุนลาสุด (1.5.2
ณ วันที่ 1 เม.ย. 2551) จากเว็บไซต http://www.joomla.org/
ไฟลที่ดาวนโหลดมาไดคือ Joomla_1.5.2-Stable-Full_Package.zip ใหแตกไฟลซงึ่ จะ
ไดโฟลเดอรชอื่
ไฟลทั้งหมดในโฟลเดอรดังกลาวคือไฟลตน ฉบับของ Joomla ใหคัดลอกโฟลเดอรนี้

ไปไวที่โฟลเดอร www ของ AppServ แลวเปลี่ยนชื่อโฟลเดอรตามตองการ เชน ถาตองการ
สรางเว็บไซตของตนเอง ก็ใชชื่อตัวเปนชือ่ โฟลเดอร หรือเว็บหนวยงาน ก็อาจจะใชชื่อยอของ
หนวยงานเปนชื่อโฟลเดอร (ตัวอยางขอใชชื่อ joomla15)
ตอนนี้ก็พรอมจะติดตั้ง Joomla โดยเปดเบราวเซอร แลวพิมพคําสั่ง

http://localhost/ชื่อโฟลเดอร
หรือ
http://127.0.0.1/ชื่อโฟลเดอร
(ตัวอยางคือ http://localhost/joomla15 หรือ http://127.0.0.1/joomla15)
ขั้นตอนแรกของการติดตั้งคือ การเลือกภาษาของการติดตั้ง โดยสามารถเลื่อนจอภาพ

ลงมาเลือกภาษาไทย (th-TH – Thai)ได
จากนั้นคลิกปุม Next เพื่อเขาสูการตรวจสอบสิทธิ์การติดตั้ง

ขั้นตอนนี้จะเปนการตรวจสอบสิทธิ์การเขียนลงในไฟล configuration.php และ

ฟงกชันการทํางานของตัวแปลภาษา PHP แลวคลิกปุมถัดไปจะเขาสูสวนลิขสิทธิ์ของโปรแกรม
ในหนานี้ก็คลิกปุมถัดไปไดเชนกัน
สวนนี้เปนหัวใจของการติดตั้ง จะตอง
1. เลือกชนิดของฐานขอมูลที่ตองการใชงาน กรณีนใี้ หเลือก mysql
2. ระบุชื่อโฮสตของฐานขอมูล โดยพิมพ localhost
3. ระบุชื่อผูใชฐานขอมูล ใหพมิ พ root
4. กําหนดรหัสผานของฐานขอมูล mysql
5. ระบุชื่อฐานขอมูล เชน joomla15 (แนะนําใหกําหนดชือ่ เดียวกับชื่อโฟลเดอร)
เมื่อระบุขอมูลขางตนแลว ก็คลิกปุมถัดไป จะเขาสูสวนกําหนดคา FTP (File Transfer

Protocol)
ใหคลิกปุมถัดไปไดเลยครับ เพื่อกําหนดขอมูลเกี่ยวกับเว็บไซตที่ใกลจะเสร็จสมบูรณ
คาที่ตองระบุไดแก
• ชื่อเว็บไซต เชน Joomla15 : CMS for you
• อีเมลของผูดูแลเว็บ
• รหัสผานของผูดูแลเว็บ (จะตองจําใหไดดว ยครับ)
• คลิกปุมติดตั้งขอมูลตัวอยาง
จากนั้นคลิกปุม ถัดไป เพื่อใหกระบวนการเสร็จสิ้นอยางสมบูรณ ควรลบโฟลเดอร

installation ดวยนะครับ
คลิกปุมดูหนาเว็บไซตจะปรากฏเว็บไซตพรอมขอมูลตัวอยางดังนี้
สํารวจเว็บใหม
เว็บไซตตวั อยางของ Joomla ไดติดตัง้ เรียบรอยแลว การเขาสูเว็บไซตเมื่อติดตัง้

เรียบรอยแลวทําไดโดยพิมพ URL ดังนี้
http://localhost/ชื่อโฟลเดอร หรือ http://127.0.0.1/ชื่อโฟลเดอร
ตัวอยาง http://localhost/joomla15 โดยจอภาพของเว็บไซตที่สรางจากขอมูลตัวอยาง
ของ Joomla นับเปนเว็บตัวอยางทีน่ าสนใจ มีขอมูลหลากหลาย ทั้งนี้สวนแรกของเว็บคือ
Header ประกอบดวย
Logo ของเว็บไซต ขาวประกาศ
Navigation bar Top Menu Search box
ขาวประกาศ หรือ New Flash แสดงขาวประกาศโดยการสุมขาว

Navigation bar เมนูเขาถึงเนื้อหา เพิ่มความสะดวกในการกลับสู
เนื้อหากอนหนาหนาหรือหนาหลัก
สวนประกอบในหนาเว็บ ปรับเปลี่ยนตําแหนงและการนําเสนอตาม
Template ที่เลือก โดยจะแนะนําในเนื้อหา “การปรับเปลี่ยนโฉมหนาเว็บไซต”
สวนที่สองคือสวนเนื้อหาหลักของเว็บ ประกอบดวย
Menu ตางๆ Module ตางๆ
เนื้อหาหลัก
Menu Menu ของ Joomla มีหลายหมวด และสามารถเพิ่มไดตามลักษณะ

รวมทั้งสามารถกําหนดตําแหนงการแสดงผลไดตามงาย สะดวก
Module กรอบเนื้อหาเล็กๆ ที่วางกระจายในหนาเว็บ แสดงเนื้อหาที่
หลากหลาย เชน Module Latest News แสดงขาวประกาศลาสุด Module Popular แสดง
บทความที่นิยมอาน 5 อันดับแรก Module Polls สอบถามความคิดเห็นของผูใชเว็บ และ
Module Who’s Online แสดงขอความจํานวนผูชมเว็บทั้งที่เปนผูเยีย่ มชม (Guest) และสมาชิก
(Member) ณ เวลาปจจุบนั โดย Module นี้สามารถควบคุมใหแสดง/ไมแสดง สรางใหม และ
กําหนดตําแหนงใหมได
Main Content พื้นที่กลางจอภาพของเว็บไซตที่แสดงบทความหลักของเว็บ โดย
บทความลาสุด (หรือบทความหลัก) จะแสดงไวบนสุด และบทความที่มีลําดับรองจะแสดงใน
ลักษณะคอลัมนถัดลงมา
บทความแตละบทความ ประกอบดวยสวนประกอบดังนี้
Title Icons
Author/Created date & time
Read more link Modified date & time Content
Title หัวเรื่องของบทความ สามารถกําหนดใหแสดง/ไมแสดง และเปน

Link ไดดวยคาควบคุมของ Joomla
Author/Created date & time ขอมูลแสดงผูสรางบทความ และวัน/เวลาที่สราง
บทความ กําหนดใหแสดงหรือไมแสดงไดเชนกัน
Icons ไอคอนสําหรับแปลงบทความ (Convert) ในรูปเอกสาร PDF ไอคอน
สั่งพิมพบทความ และไอคอนแนะนําบทความทางอีเมล สามารถเลือกแสดง/ไมแสดงได ทั้งนี้
ไอคอนสั่งพิมพบทความนับเปนไอคอนทีม่ ีประโยชนมาก โดย Joomla จะตัด Menu และ
Header ออกเพื่อใหสามารถสั่งพิมพไดเฉพาะเนื้อหาบทความเทานั้น
Read more link กรณีที่บทความยาว สามารถกําหนดใหแสดงสวนตนของบทความ
และ Joomla จะสรางลิงก Read more เพื่อขยายอานเนื้อหาที่เหลือใหอัตโนมัติ
Modified date & time ขอมูลแสดงวันที่/เวลาปรับปรุงเนื้อหา เปนสวน
สําคัญที่ควรกําหนดใหแสดง เพื่อระบุความทันสมัยของบทความ
Content พื้นที่แสดงเนือ้ หาของบทความ
เขาสูระบบผาน Front-end
เว็บไซตหนาแรกที่เขาถึงของ Joomla เรียกวาสวน Front-end ซึ่งก็คือ Home page ของ

เว็บไซตนนั่ เอง สมาชิกสามารถเขาสูระบบและปรับแกไขบทความ รวมทั้งนําเสนอบทความ
ใหมไดตามสิทธิ์ของสมาชิกที่ถูกกําหนดไวโดยผูดูแลเว็บ (Web Administrator)
สมาชิกชุดแรกของเว็บก็คือ admin นั่นเอง โดยการเขาสูระบบผาน Front-end ทําได
โดยปอนชื่อผูใ ช (User name) และรหัสผาน (Password) ในสวน Login Form
เมื่อเขาสูระบบแลว สวน Login Form จะแสดงชื่อสมาชิกดังนี้
นอกจากนี้ยังปรากฏไอคอนสําหรับแกไขเอกสารบทความ ดังนี้
แกไขขอมูลสมาชิก
เมื่อสมาชิก Login เขาสูระบบผาน Front-end แลวจะปรากฏชุดกรอบเมนูเพิ่มอีก 1 ชุด

คือ User Menu
ซึ่งสมาชิกสามารถที่จะปรับแกไขขอมูลสวนตัว หรือแกไขรหัสผาน โดยคลิกที่รายการ

เมนู Your Details จากชุดเมนู User Menu
นอกจากนี้ยังสามารถเลือกรูปแบบเว็บไซตและการทํางาน ไดดังนี้
1. Back-end Language การกําหนดภาษาของเว็บในสวน Back-end
2. Front-end Language การกําหนดภาษาของเว็บในสวน Front-end
3. User Editor เลือกประเภทของ Editor ในการสราง/แกไขบทความ กรณีนี้แนะนํา
ใหเลือก TinyMCE 2.0 สําหรับเลือกใช Editor ในรูปแบบ WYSIWYG เพื่อความ
สะดวกในการสราง/แกไขบทความโดยไมตองยุงยากกับการลงรหัส HTML
4. Help Site กําหนดความชวยเหลือจากเว็บที่ติดตั้ง Joomla หรือจากเว็บไซต
ทางการของ Joomla (www.joomla.org)
5. Time Zone เลือก Time zone กรณีน้คี ือ UTC+07:00
แกไขบทความ
การแกไขบทความผาน Front-end ทําไดโดยคลิกที่ปุม Edit Article ของบทความนั้นๆ
ปรากฏจอภาพสวนแกไขบทความดังนี้
ตองการแกไขชื่อบทความ ทําไดโดยแกไขในรายการ Title
เมื่อคลิกปุม Save จะปรากฏผลลัพธทางเว็บไซตดังนี้
สําหรับการแกไขบทความ จอภาพแกไขบทความมีลักษณะคลายกับจอภาพการทํางาน
ของ Word Processor ที่หลายๆ ทานคุนเคยเปนอยางดีมากแลว และการทํางานก็ใชหลักการ
เดียวกัน จึงไมใชเรื่องยากทีจ่ ะแกไขผานปุม เครื่องมือ ดังนี้
ไมควรปรับเปลี่ยนแบบอักษร (Font) และขนาดอักษร (Font size)
สามารถทํางานในโหมด HTML ไดโดยคลิกปุม HTML ในแถบเครื่องมือ

แบงตอนเนื้อหาดวย Read more…
กรณีที่เนื้อหาในบทความมีความยาวมากๆ การนําเสนอทั้งหมดผานเว็บไซตอาจจะไม
นาสนใจเทาทีค่ วร Joomla มีคําสั่งแบงตอนและแสดงลิงก Read more… กํากับเพื่อใหคลิก
แสดงเนื้อหาทีเ่ หลือ
การแบงตอนเนื้อหา จากตัวอยางจะแสดงดวยเสนประสีแดง ซึ่งเกิดจากการคลิกบนปุม

ดังนั้นถาตองการแบงตอนขอความ ณ ตําแหนงใด ก็ใหคลิกเมาส ณ ตําแหนง
นั้นแลวคลิกปุม
เสนแบง
Read more
สารบัญเนือ้ หา
นอกจากการแสดงผลโดยแบงตอนดวย Read more… ยังสามารถแบงตอนเนื้อหา

หลายๆ ตอนแลวแสดงผลในรูปแบบสารบัญเนื้อหา ดังตัวอยาง
การสรางสารบัญเนื้อหาทําไดโดยคลิกเมาส ณ ตําแหนงที่ตองการแบงหนาเนื้อหา
จากนั้นคลิกปุม โปรแกรมจะใหกําหนดชือ่ กํากับสารบัญ จากนั้นคลิกปุม Insert
แลวทําซ้ํา ณ ตําแหนงอืน่ ๆ ตามตองการ
• Page Title ควรระบุดว ยภาษาอังกฤษ เปนชื่อกํากับตอนแตละตอน

• Table of Contents Alias สามารถใชภาษาไทยได จะเปนขอความที่ปรากฏใน
รายการเมนูเลือก
ตําแหนงทีก่ ําหนดเปน Pagebreak จะแสดงดวยเสนประสีฟาออน สามารถลบไดโดย
ดับเบิลคลิกที่เสนแลวกดปุม <Delete>
แทรกรูปภาพ
การแทรกรูปภาพในบทความ ใหคลิกเมาส ณ ตําแหนงที่ตองการวางภาพ แลวคลิกปุม

จะปรากฏสวนนําเขาภาพดังนี้
คลิกเลือกภาพที่ตองการ แลวกําหนดรายละเอียดเกีย่ วกับภาพ

• Image Description คําอธิบายภาพ
• Image Title ชื่อกํากับภาพ ซึ่งสามารถกําหนดเปน Caption ได
โดยคลิกเลือกเพิ่มเติม
• Align ตําแหนงวางภาพ
เมื่อคลิกปุม Insert จะปรากฏภาพดังนี้
เมื่อบันทึกจะแสดงผลดังนี้
ภาพที่นําเขาบทความ สามารถแกไขไดโดยคลิกที่ภาพ แลวคลิกปุม Insert/Edit Image

ในแถบเครื่องมือ
โดยปรากฏสวนปรับแกไขดังนี้
กรณีที่ตองการนําเขาภาพเพิม่ เติมจากที่ Joomla จัดเตรียมไว ทําไดโดยคลิกปุม

แลวเลื่อนจอภาพไปที่รายการ Upload
คลิกปุม Browse Files
เลือกไดรฟและโฟลเดอรที่เก็บภาพ แลวเลือกภาพจากนั้นคลิกปุม Open โปรแกรม

Joomla อนุญาตใหเลือกไฟลภาพในการโอนเขาเว็บไซตไดครั้งละหลายภาพ
เมื่อไดภาพที่ตอ งการครบจํานวนแลวจึงคลิกปุม Start Upload
โปรแกรมจะแสดงภาพที่นําเขาเพื่อพรอมใชงานตอไป
ไฟลภาพ
ไฟลภาพที่นําเขาในเว็บควรปรับแตงดวยโปรแกรมตกแตงภาพใหมีขนาดที่เหมาะสม
เชน ความกวางไมควรเกิน 500 pixel ความละเอียดภาพ (Resolution) 72 จุดตอนิ้ว และมีสวน
ขยายเปน .jpg, .gif หรือ .png ตามความเหมาะสมของภาพนั้นๆ
นอกจากนี้ชื่อไฟลภาพควรเปน
• ภาษาอังกฤษ ตัวพิมพเล็ก
• หามเวนวรรค
• ใชไดเฉพาะเครือ่ งหมาย Underscore ( _ )
ควบคุมการแสดงผลบทความ
บทความที่สรางไวแลวสามารถปดการแสดงผลหรือระบุวันสิ้นสุดการแสดงผลไดงาย
และสะดวก ในโหมดการแกไขบทความ จะปรากฏสวนควบคุมการแสดงผล ดังนี้
รายการ
• Published เลือกใหแสดง หรือไมแสดงบทความ
• Show on Front Page เลือกใหแสดง หรือไมแสดงในหนาแรก
• Start Publishing ระบุวัน/เวลาใหแสดงบทความ
• Finish Publishing ระบุวัน/เวลาทีใ่ หยตุ ิการแสดงบทความ
• Access Level สิทธิ์ในการเขาถึงบทความ
o Public ทุกคนเปดดูบทความได
o Registered ใหสมาชิกที่ลอ็ กอินเทานัน้ เปดดูบทความได
o Special ใหสมาชิกที่เปน Admin เทานั้นที่เปดดูบทความได
สืบคนบทความไดงา ยๆ ดวย Metadata
Joomla ไดเตรียมฟงกชนั สืบคนบทความผานชองสืบคน (Search)
โดยโปรแกรมจะสืบคนทั้งจากชื่อเรื่อง (Title) เนื้อหาบทความ รวมทั้งสวนเพิม่

ความสามารถการสืบคนในรูปแบบ Metadata ดังนั้นควรกําหนด Metadata ของบทความให
สมบูรณ
• Description ระบุคําอธิบายหรือเนื้อหาสรุปของบทความ
• Keywords ระบุคําคนโดยใชเครื่องหมาย , คั่นแตละคํา
สรางบทความใหม
การสรางบทความใหม ทําไดโดยคลิกเลือกรายการ Submit an Articles จาก User

Menu
ปรากฏสวนสรางบทความใหม ดังนี้
การสรางบทความใหม มีการทํางานลักษณะเดียวกับการแกไขบทความเดิมที่ได
แนะนําไปกอนหนาแลว แตจะตองเลือก Section และ Category ใหตรงกับหมวดเนื้อหา
นอกจากนั้นผูใ ชตองกําหนดรายละเอียดเกีย่ วกับการนําเสนอ (Publishing) และ

Metadata ของบทความดวย
เมื่อปอนเนื้อหาและบันทึก จะปรากฏผลดังนี้
ปรับแตงเว็บไซตผาน Back-end
การปรับแตงเว็บไซต เชน การเพิ่มสมาชิก การปรับเปลี่ยนโฉมหนาเว็บไซต

การควบคุมเว็บไซต จะตองทําในโหมด Administrator โดยเขาสูเว็บไซตผาน Back-end ดวย
คําสั่ง http://localhost/ชื่อโฟลเดอร/administrator
จอภาพเขาสูระบบในโหมด Administrator ใหปอนบัญชีผูใชเปน admin และปอน

รหัสผานตามที่ไดกําหนด เมื่อคลิกปุม Login จะเขาสูจอภาพ Control Panel ของเว็บไซต ดังนี้
การทํางานผาน Back-end สามารถดําเนินการผานแถบเมนู ซึ่งประกอบดวยคําสั่ง

ควบคุมตามหมวดหมูด ังนี้
หรือจะสั่งการผานไอคอนในสวน Control Panel
นอกจากนี้ยังสามารถตรวจสอบสมาชิกที่ออนไลน การสรางบทความ หรือสถิติตางๆ

ผานทางแท็บคําสั่งตอไปนี้
ขอมูลประกอบการสืบคนของเว็บ
ชื่อเว็บไซต หรือ Title ของเว็บเปนสวนสําคัญที่ทําใหเว็บไซตที่พัฒนาไดรับการสืบคน

ผาน Search Engine ตางๆ ได ดังนั้นควรกําหนดชื่อเว็บไซตใหเหมาะสม โดยกําหนดดวยคํา
ภาษาอังกฤษ ตามดวยคําภาษาไทย เชน
STKS – Science and Technology Knowledge Services ศูนยบริการความรูทาง
วิทยาศาสตรและเทคโนโลยี (ศวท.) สํานักงานพัฒนาวิทยาศาสตรและเทคโนโลยีแหงชาติ
ประเทศไทย
ทั้งนี้ชื่อเว็บไซตจะปรากฏในแถวแรกของเว็บเบราวเซอร
การปรับแกไขชื่อเว็บไซตของ Joomla ทําไดโดยคลิกไอคอน Global Configuration

จากหนา Control Panel ของ Joomla
โดยจะปรากฏจอภาพการทํางาน ดังนี้
คลิกเลือกแท็บ Site แลวปรับแกไขคา ดังนี้

จากนั้นคลิกปุม Save เพื่อบันทึกการปรับแกไขชื่อเว็บไซต
นอกจากชื่อเว็บไซต ควรกําหนดคําอธิบายเว็บ และคําคน (Keyword) สําหรับเว็บไซต

เพิ่มเติมจากรายการ
โดย Global Site Meta Description เปนขอความอธิบายเว็บไซต โดยจะปรากฏผลผาน

การสืบคนของ Search engine เชน Google ดังนี้
คําอธิบายเว็บไซต
สําหรับคําคน (Keyword) เปนการระบุคําทีผ่ ูใชมักจะนึกถึงสําหรับการสืบคน โดยระบุ

ไดหลายคํา คัน่ ดวยเครื่องหมาย , แตควรขึ้นตนดวยภาษาอังกฤษ
ขอความอธิบายเว็บไซต และคําคนจะไมปรากฏผานเว็บเบราวเซอร แตจะ

เปนขอมูลสําหรับ Search Engine
เขาถึงเนื้อหาไดงาย
Joomla มีระบบสนับสนุนการเขาถึงเนื้อหาไดงายขึ้นดวยความสามารถ Search Engine

Friendly ที่จะแปลงรหัสประจําบทความ (Article ID) เปนชื่อเรียก
ตัวอยาง บทความชื่อ Joomla Overview ถูกสรางเปนลําดับที่ 19 ซึ่งเมื่อแสดงเนื้อหา

บทความนี้ จะปรากฏ URL ดังภาพขางตน
URL ดังกลาวเปนการสงคาพารามิเตอรของโปรแกรมภาษา PHP ที่จาํ ไดยาก และทํา
ให Search Engine ไมบันทึกเพื่อสืบคน แต Joomla มีคําสั่งที่สนับสนุนการแปลงพารามิเตอร
ของ PHP เปนการเขาถึงดวยชื่อบทความ (Article Title) แทน โดยคลิกเลือกไอคอน Global
Configuration จากหนา Control Panel จากนั้นคลิกเลือกรายการ Search Engine Friendly URLs
เปน Yes
เมื่อบันทึกแลว Joomla จะแปลงคาพารามิเตอรของบทความเปนการเขาถึงดวยชื่อ

บทความแทน ดังนี้
การใชงาน Search Engine Friendly ผูพัฒนาจะตองระบุ Alias ใหกับ

บทความทุกบทความ และตองเปนภาษาอังกฤษตัวพิมพเล็ก หามเวนวรรค สามารถใช
เครื่องหมาย Underscore หรือ Dash ไดเทานั้น
การปรับเปลี่ยนโฉมหนาของเว็บไซต
Joomla อนุญาตใหปรับเปลีย่ นโฉมหนาของเว็บไดงายและสะดวกผาน Template โดย

Joomla เตรียม Template สําเร็จรูปใหใชงานหลากหลายรูปแบบ และสามารถดาวนโหลดติดตั้ง
เพิ่มเติมได โดยการปรับเปลี่ยน Template คลิกเลือกเมนู Extensions, Template Manager
ปรากฏรายการดังนี้
คลิกเลือก Template ที่ตองการใชงาน แลวคลิกปุม Default จากนั้นกลับไป Reload

เว็บไซตอีกครัง้
เห็นไหมครับ การปรับเปลี่ยนหนาตาของเว็บไซตไมใชเรื่องยากเลย มี Template

สําเร็จรูปใหดาวนโหลดและเลือกใชงานมากมายในเว็บไซต เนื่องจาก Template พัฒนาดวย
ภาษา HTML, PHP & CSS แตสําหรับผูใชมือใหม ไมตองกังวลเพราะสามารถดาวนโหลด
Template สําเร็จรูปไดมากมายหลายรอยจาก Google
จะตองเลือก Template ใหตรงกับ Version ของ Joomla ที่ติดตั้ง
เมื่อดาวนโหลดมาแลวจะไดไฟล Template ของ Joomla เปน Zip และสามารถนําเขา

ไปใชงานไดงา ยผานระบบ Control Panel ของ Joomla ดังนี้ คลิกเลือกเมนู Extensions จากนั้น
เลือกคําสั่งยอย Install/Uninstall แลวคลิกเลือกรายการ Install จะปรากฏสวนติดตั้ง ดังนี้
คลิกปุม Browse จากรายการ Upload Package File เลือกไฟล zip ของ Template แลว
คลิกปุม Upload & Install จากนั้นคลิกแท็บ Templates จะปรากฏรายการ Template ที่นําเขา
และรายการเดิมดังนี้
ถาตองการลบรายการใด ก็คลิกเลือกแลวคลิกปุม Uninstall
บาง Template จะไมมีพื้นที่ดานขวามือ (Right Column) ทําให Module ที่

กําหนดใหแสดงดานขวาไมแสดงผล จึงตองระมัดระวังในการเลือกใช Template หรือใชวิธีการ
ปรับเปลี่ยน Template ใหอยูต ําแหนงอืน่
จัดการบทความในเว็บไซต
เนื้อหาในเว็บไซตเปนเนื้อหาจากขอมูลตัวอยาง เรียกวา Article หรือบทความ ซึ่ง

สามารถปรับแกไขไดโดยเลือกเมนูคําสั่ง Content, Article Manager
เมนูควบคุมการจัดการบทความประกอบดวยปุมตางๆ ดังนี้
Archive/Unarchive กําหนดใหบทความที่นําเสนอเก็บเขาคลังเอกสาร
หรือยกเลิกจากคลังเอกสาร
Publish/Unpublish กําหนดใหแสดงหรือไมแสดงบทความ
Move ยายหมวดบทความ
Copy คัดลอกบทความไปหมวดอืน่
Trash ลบบทความ
Edit แกไขบทความ
New สรางบทความใหม
Parameters คาควบคุมเกี่ยวกับการแสดงผลบทความ
เชน ถาตองการแกไขบทความรายการใด ก็คลิกเลือกบทความนั้นๆ
คลิกปุม Edit จะปรากฏสวนแกไขในโหมดการทํางานแบบ WYSIWYG ดังนี้

แกไขชื่อบทความ (Title) จากรายการ
ชื่อบทความสามารถระบุไดทั้งภาษาไทย และภาษาอังกฤษ
แกไข URL ของบทความจากรายการ
ขอความ Alias นี้ควรระบุเปนภาษาอังกฤษ ไมมีชองวาง

ปรับแกไขหมวดเนื้อหาไดจากรายการ Section และ Category
Section จะเปนหมวดใหญกวา Category
กําหนดการแสดงผลบทความไดจากรายการ
• Published แสดงหรือไมแสดงบทความในเว็บไซต
• Front Page แสดงหรือไมแสดงบทความผานหนาแรกของเว็บ
ลําดับการแสดงบทความในหนา Front Page ควบคุมไดจากไอคอน Front
Page Manager
นอกจากนี้ยังสามารถกําหนดชวงเวลาในการบทความไดจากรายการ
การแกไขเนื้อหา
การแกไขเนื้อหา ใชหลักการลักษณะเดียวกับการแกไขใน Word Processor ทั่วไป
และมีปุมจัดแตงรูปแบบลักษณะเดียวกัน
กรณีที่เนื้อหามีความยาว และกําหนดใหแสดงผาน Front Page จะปรากฏผล ดังนี้
กรณีนี้ควรเลือกแสดงผลเนื้อหาเพียงบางสวน และกํากับดวย Link โดย

คลิกเมาส ณ ตําแหนงที่ตองการเลือกแสดงผล แลวคลิกปุม Read more…
เมื่อบันทึกจะแสดงผลผาน Front Page ดังนี้
จะปรากฏเนื้อหา ณ ตําแหนงที่ระบุ Read more และลิงก Read more: … เพื่อคลิกแสดง

เนื้อหาสวนที่เหลือ
นอกจากนี้ยังสามารถสรางสารบัญใหกับเอกสารได ดังนี้
การสรางสารบัญขางตน ก็ทําไดโดยคลิกเมาส ณ ตําแหนงที่ตองการ แลวคลิกปุม

Pagebreak
ทําซ้ํา ณ ตําแหนงอื่นๆ ที่ตอ งการ และถาตองการยกเลิกใหคลิกเมาส ณ เสนแบงแลว

กดปุม <Delete>
นอกจากนี้ Joomla ยังอนุญาตใหระบุเงือ่ นไขเกีย่ วกับการแสดงผลบทความไดอิสระ

จากกันจากการควบคุมของ Parameters - Advanced
โดยรายการทีป่ รากฏบางรายการ อธิบายจากภาพประกอบ ดังนี้

Title ของบทความ กําหนดใหแสดงหรือไมแสดงจากรายการ Show Title
และกําหนดใหคลิกไดหรือไมได จากรายการ Title Linkable
วันที่แกไข/วันที่สราง และผูสรางบทความ กําหนดใหแสดง

หรือไมใหแสดงไดจากรายการ Author Name, Created
Date and Time และ Modified Date and Time
ไอคอนแปลงเปนเอกสาร PDF สั่งพิมพ และสงแนบอีเมล

ควบคุมไดจากรายการ PDF Icon, Print Icon และ E-mail Icon
เพิ่มประสิทธิภาพการสืบคนใหกับบทความ
การสืบคนบทความของ Joomla จะควบคุมดวย Metadata โดยแตละบทความสามารถ
กําหนด Metadata ไดอิสระ รวมทั้งยังเปนขอมูลสําหรับ Search Engine ดวย การกําหนด
Metadata ใหกบั บทความทําไดโดยเขาสูโหมดแกไข/สรางบทความ จากนั้นคลิกขยาย Metadata
Information ระบุรายละเอียดเกีย่ วกับคําอธิบายบทความ/เนื้อหายอ (Description) และคําคน
(Keyword) รวมทั้งชื่อเจาของบทความ (Author)
โดยการสืบคนสามารถปอนคําคนในชองรายการ Search ซึ่งจะปรากฏผลการสืบคน

ดังนี้
ตกแตงดวยรูปภาพ
การนําเสนอผานเว็บไซตจําเปนตองสรางจุดเดนดวยรูปภาพ Joomla ทํางานกับรูปภาพ

ไดงายและสะดวก โดยมีปุมเครื่องมือและระบบโอนภาพเขาสูเครื่องแมขายเว็บพรอมใชงาน
เชน การนําเขาภาพในบทความเริ่มจากคลิกเมาส ณ ตําแหนงที่ตองการวางภาพ แลวคลิกปุม
Image ที่ดานลางขวาของกรอบขอความ ปรากฏจอภาพทํางานเกีย่ วกับภาพดังนี้
คลิกเลือกภาพที่ตองการ แลวระบุคําอธิบายภาพในรายการ Image Description และ

Image Title จัดตําแหนงภาพจากรายการ Align แลวคลิกปุม Insert
หากยังไมมีภาพที่ตองการก็สามารถคลิกปุม Browse แลว Upload ภาพเขาสูระบบก็ได
หรือจะใชคําสั่ง Site, Media Manager เพื่อจัดการภาพและสื่ออื่นๆ ประกอบเว็บก็ได
Joomla แบงโฟลเดอรจัดการภาพไดดังนี้
โดยโฟลเดอรสําคัญที่ควรทราบคือ
• Banners เก็บภาพสําหรับใชกับ Component Banner
• Stories เก็บภาพสําหรับใชในบทความ
อยางไรก็ตามสามารถสรางเพิ่มเติมไดโดยคลิกเลือกโฟลเดอรหลัก จากนั้นกําหนดชือ่
โฟลเดอรใหม (ภาษาอังกฤษหรือผสมตัวเลข หามเวนวรรค ใชเฉพาะเครื่องหมาย Underscore)
แลวคลิกปุม Create Folder
ลบภาพ
ภาพที่ไมตองการใชงานสามารถลบไดโดยคลิกที่ปุมเครื่องหมาย x สีแดงที่กํากับภาพ
หรือคลิกเลือกหลายๆ ภาพแลวใชปุม Delete
ภาพที่นําเขา Joomla จะตองตั้งชื่อเปนภาษาอังกฤษ หามเวนวรรค ใชเฉพาะ

เครื่องหมาย Underscore และมีฟอรแมตเปน .jpg, .gif หรือ .png เทานั้น
นอกจากการนําเขาภาพแลว Media Manager ยังสามารถนําเขา Flash Movie,

PDF ไดเชนกัน
ทํางานกับสื่อรูปแบบตางๆ
Joomla สนับสนุนการทํางานกับสื่ออื่นๆ นอกจากรูปภาพ เชน Flash Movie, Song,

Audio, Movie โดยมีหลักการทํางานดังนี้
1. สรางโฟลเดอรสําหรับสื่อแตละประเภทผาน Media Manager
2. โอนสื่อเขาสูระบบ
3. เขาสูระบบสรางหรือแกไขบทความ คลิก ณ ตําแหนงทีต่ องการวางสือ่ คลิก

ปุม Insert/Edit Embedded Media ระบุประเภทสื่อ พรอมทั้งระบุ
path/filename.extension ของสื่อใหถูกตอง จากนัน้ ระบุความกวาง/ความสูงที่
ตองการนําเสนอ
4. คลิกปุม Insert แลวบันทึก
ทํางานกับเมนู
Joomla อนุญาตใหปรับแตงเมนูไดอิสระ ทั้งการสรางเมนูชุดใหม การปรับแตงเมนูชดุ

เดิม การสรางรายการเมนู หรือปรับยายตําแหนงการแสดงผลเมนู
ปรับแกไขเมนู
การปรับแกไขเมนู ทําไดโดยคลิกเลือกเมนูคําสั่ง Menus แลวคลิกเลือกที่ชื่อเมนูชดุ ที่
ตองการแกไข หรือคลิก Menu Manager เพือ่ ปรับแกไขชือ่ เมนูรวมทั้งสราง/ลบเมนู
ปรากฏจอภาพทํางานดังนี้
จะพบวาการทํางานกับรายการเมนู มีลักษณะเดียวกับการทํางานบทความใน Article

Manager
ตัวอยาง ตองการสรางรายการเมนูแสดงบทความในหมวด Media ทําไดโดย

1. คลิกปุม New
2. เลือกวาจะสรางเมนูลักษณะใด กรณีนี้คือ การสรางเมนูใหกับบทความ จึง

เลือก Articles
3. เลือกรูปแบบของการเชื่อมกับบทความ กรณีนี้ตองการเชื่อมกับทุกบทความ
ในหมวด Media จึงตองเลือก Category ซึ่งมี 2 รูปแบบยอย คือ Blog Layout
โดยจะแสดงเนื้อหายอและลิงกอานตอในลักษณะกรอบเนื้อหา หรือจะเลือก
List Layout โดยจะแสดงเปนรายการตามลําดับ
4. เมื่อเลือกรูปแบบของการเชื่อมกับบทความแลว ก็จะเปนสวนกําหนด
รายละเอียดเกีย่ วกับการแสดงผล ดังนี้
5. เมื่อกําหนดรายละเอียดเชน Title แลวก็คลิกปุม Save เพือ่ บันทึก
6. และตรวจสอบการสรางรายการเมนูไดจากหนา Front end ของเว็บ

Components
Components คือ ชุดโปรแกรมสําเร็จรูปที่ออกแบบพัฒนาขึ้นมาเพือ่ รองรับการทํางาน

ใดๆ ในลักษณะโปรแกรมเสริม เพื่อให Joomla มีความสามารถเพิ่มขึ้น เชน โปรแกรมควบคุม
การแสดงผลปายโฆษณา กระดานสนทนา Joomla มี Components ใหเลือกใชงานหลากหลาย
ดาวนโหลดไดจากเว็บไซตของ Joomla หมวด Extensions โดย Extension ที่เปน Components
จะแสดงดวยสัญลักษณ
แบบสอบถามออนไลน (Poll)
Poll เปน Component ที่มากับ Joomla เปนชุดคําสั่งสําหรับสรางแบบสอบถาม
ออนไลนอยางงาย ปกติจะแสดงผลในรูปแบบ Module ดานขวาของหนาเว็บไซต เมื่อคลิกเลือก
จะแสดงผลลัพธการเลือกเปนกราฟแทงแนวนอน (Bar chart)
การเพิ่มแบบสอบถามใหกับ Poll ทําไดโดยเลือกเมนูคําสั่ง Components, Polls
คลิกปุม New
ปอนคําถามในรายการ Title: ตัวเลือกในรายการ Options: และการนําเสนอจากรายการ

Published: จากนั้นคลิกปุม Save
จากนั้นเขาสูการกํากับการแสดงผล Polls ซึ่งควบคุมดวย Extensions, Module

Manager
เลื่อนหารายการ Polls แลวคลิกเขาสูการแกไข
ตัวเลือกสําคัญคือ Module Parameters ในสวน Poll
ผลลัพธของ Poll ที่สรางใหมในหนา Front end
ปายโฆษณา (Banner)
Joomla ยังเตรียมการจัดการเกี่ยวกับปายโฆษณาหรือ Banner ซึ่งมีความสามารถ
แสดงผลแบบสุมในแตละการ Reload หนาเว็บ รวมทั้งสวนลิงกไปยังเว็บไซตที่เกี่ยวของ โดย
ทํางานผาน Components, Banner
1. เตรียมภาพ Banner โดย Upload ดวย Media Manager ไปไวทโี่ ฟลเดอร
banners
2. สราง Category ของ Banner ดวยคําสั่ง Components, Banner, Category
3. สรางชุดยอยของ Banner ดวยคําสั่ง Components, Banner, Clients
4. สรางรายการ Banner ดวยคําสั่ง Components, Banner, Banners
5. ระบุรายละเอียดแลวคลิกปุม Save จากนั้นทําซ้ําจนครบทุกภาพที่ตองการ

6. ปรับแตงการนําเสนอดวยคําสั่ง Extension, Module Manager คลิกเลือก
Banners ปรับแตงคาที่จําเปน เชน
7. จากนั้นคลิกปุม Save แลวดูผลที่ปรากฏในหนา Front page

ดึงขาวมาแสดงผลอัตโนมัติ
ดวยเทคโนโลยี RSS หรือ Really Simple Syndication หรือ Rich Site Summary เปน
รูปแบบในการนําเสนอขาวหรือบทความ ใหอยูในรูปแบบมาตรฐาน (xml format) เพื่อใหผูที่
สนใจสามารถติดตามขาวสารใหมๆไดทันที
Joomla รองรับการสรางชุดขาว RSS อัตโนมัติผาน Components, News Feeds โดย
เริ่มตนจะตองสราง Category กอนดวยคําสั่ง Components, News Feeds, Category
จากนั้นจึงสรางรายการ RSS แตละรายการดวยคําสั่ง Components, News Feeds, Feeds
เว็บไซตที่สามารถดึงขาวมาได เชน
• http://www.norsorpor.com/chooseRSS.php
• http://www.rssthai.com
ดาวนโหลด/ติดตั้ง Components
นอกจากนี้ยังสามารถดาวนโฆลดมาติดตั้งเพิ่มได โดยComponents ที่ดาวนโหลดมา
มักจะขึน้ ตนดวย com เชน com_xmap-1.1_for_Joomla_1.5.zip การติดตั้งจะตองทํางานใน
โหมด Admin ผาน Control Panel โดยเลือกคําสั่ง Extensions, Install/Uninstall
โดย Components ที่ติดตั้งแลวจะปรากฏรายการดังนี้

พัฒนาเว็บตามตองการ
เมื่อทราบความสามารถของ Joomla แลวตอไปจะเปนการออกแบบพัฒนาเว็บไซตตาม

ตองการ โดยไมใชขอมูลตัวอยางของ Joomla ดังนัน้ จะตองเริ่มจากการวางแผนการพัฒนา
เว็บไซตกอน ดังนี้
ลักษณะของเว็บไซต
กลุมเปาหมาย
ชื่อเว็บ (Web Title)
คําอธิบายเว็บ (Web Description)
คําคน (Keywords)
เนื้อหาที่ตองการนําเสนอ
ความตองการเพิ่มเติม
Poll
Web Resources
Banner
คลังภาพ
คลังดาวนโหลด
RSS News feed
…
จากตารางวิเคราะหความตองการพัฒนาเว็บขางตน สมมติเว็บที่ตองการพัฒนามีขอมูล
ดังนี้
ลักษณะของเว็บไซต เว็บไซตนําเสนอสาระความรูทางดาน
บรรณารักษศาสตร และสารสนเทศศาสตร
กลุมเปาหมาย นักศึกษา ครูอาจารยสาขาบรรณารักษศาสตร
และสารสนเทศศาสตร
ชื่อเว็บ (Web Title) Lib4You : แหลงรวมสาระความรูสาขา
บรรณารักษศาสตร และสารสนเทศศาสตร
คําอธิบายเว็บ (Web Description) แหลงรวมสาระความรูสาขาบรรณารักษศาสตร
และสารสนเทศศาสตรสําหรับครู อาจารย
นักศึกษา บรรณารักษ และนักสารสนเทศ
คําคน (Keywords) Library, Information, Librarian, Information
Officer, บรรณารักษศาสตร, สารสนเทศศาสตร,
หองสมุด, ศูนยสารสนเทศ, สํานักวิทยบริการ
เนื้อหาที่ตองการนําเสนอ
แนะนําเว็บไซต
ทีมพัฒนา
คลังความรู
ความตองการเพิ่มเติม
Poll แบบสํารวจออนไลน
Web Resources รวมลิงกเว็บไซตหองสมุด ศูนยสารสนเทศ
สํานักวิทยบริการ และภาควิชา
บรรณารักษศาสตร สารสนเทศศาสตร
Banner Banner แนะนํากิจกรรมเดนของเว็บไซตใน
ลักษณะแสดงผลแบบสุมเมื่อมีการโหลดหนาเว็บ
คลังภาพ รวมภาพกิจกรรมและภาพอืน่ ๆ
คลังดาวนโหลด แหลงดาวนโหลดเอกสาร ซอฟตแวร
RSS News feed ดึงขาวนาสนใจจากเว็บไซตผูใหบริการ RSS
เมื่อวิเคราะหความตองการไดแลว ขั้นตอนถัดไปก็จะเปนการติดตั้งเว็บไซต Joomla ใน

โฟลเดอรใหมแบบวางเปลา (ไมเอาขอมูลตัวอยาง) ซึ่งมีขั้นตอนดังนี้
1. สรางโฟลเดอรใหมภายใต C:\AppServ\www เชน lib4you
2. คัดลอกไฟลตน ฉบับ Joomla 1.5 มาวางในโฟลเดอรใหม
3. เปดเว็บเบราวเซอรแลวพิมพ URL เปน http://127.0.0.1/lib4you
4. เลือกโหมดการติดตั้งเปนภาษาไทย
5. คลิกปุม Next เพื่อเขาสูขั้นถัดไปของการติดตั้ง คือ ขั้นตอนการตรวจสอบ

ขอมูลกอนติดตั้ง หากเปนการติดตั้งใน Server จริงอาจจะตองเขาไปเปลี่ยน
Permission ของโฟลเดอรและแฟมบางแฟมกอน ในกรณีนี้เปนการติดตั้งดวย
Server จําลองใหคลิกปุม “ถัดไป”
6. จอภาพถัดไปคือ การยอมรับลิขสิทธิ์การใชงานโปรแกรม ใหคลิกปุม “ถัดไป”
7. ขั้นตอนสําคัญของการติดตั้งคือ การกําหนดรายละเอียดเกี่ยวกับเครื่องแมขาย
เว็บและฐานขอมูล MySQL
ใหระบุขอมูลดังนี้
• ชนิดฐานขอมูล เลือกเปน mysql

• ชื่อโฮสต ระบุเปน localhost
• ชื่อผูใชฐานขอมูล ระบุเปน root
• รหัสผาน ระบุรหัสผานตามที่กําหนดไวในขั้นตอน
ติดตั้ง AppServ
• ชื่อฐานขอมูล ระบุใหตรงกับชื่อโฟลเดอร ตัวอยางคือ
lib4you
8. เมื่อกําหนดขอมูลเกี่ยวกับเครือ่ งแมขายและฐานขอมูล MySQL แลวใหคลิก
ปุม “ถัดไป” เพื่อเขาสูขั้นตอนการตั้งคา FTP สําหรับ Server ที่อนุญาตใหผูใช
โอนขอมูลดวยฟงกชนั FTP ใหระบุคาใหถูกตอง แตกรณีนี้ใหเลือก “No”
แลวคลิกปุม “ถัดไป”
9. ขั้นตอนนี้เปนการกําหนดขอมูลเกี่ยวกับเว็บไซต โดยมีรายการที่ตองกําหนด
ดังนี้
รายการที่ตองระบุไดแก
• ชื่อเว็บไซต ใหระบุชื่อของเว็บ กรณีนี้คือ Lib4You : แหลงรวม
สาระความรูสาขาบรรณารักษศาสตร และสารสนเทศศาสตร
• ระบุอีเมลของผูดูแลเว็บ และรหัสผานของ Admin เว็บไซต
10. เมื่อกําหนดขอมูลชื่อเว็บไซต อีเมล และรหัสผานของผูดูแลเว็บแลว ใหคลิก

ปุม “ถัดไป” ก็จะเปนขัน้ ตอนสุดทายของการติดตั้ง
ทั้งนี้บัญชีแรกของเว็บนี้คือ admin ซึ่งเปนบัญชีผูดูแลเว็บที่มีสิทธิ์เต็ม และ

รหัสผานตามที่ระบุไวในขัน้ ตอนกอนหนา
11. เมื่อติดตั้ง Joomla จนถึงขั้นตอนนี้แลว จะตองกลับไปลบโฟลเดอร
Installation ออกจากโฟลเดอรเว็บใน C:\AppServ\www\lib4you
12. เพียงเทานี้ก็จะไดเว็บไซตที่พรอมใชงาน และเขาถึงไดดว ย URL

http://127.0.0.1/lib4you
เว็บไซตใหมทไี่ ดจะไมมีขอมูลใดๆ เนื่องจากไมไดติดตั้งขอมูลตัวอยางของ Joomla

ดังนั้นขั้นตอนถัดไป จะเปนการสรางเนื้อหา สรางเมนู และสวนจัดการเพิ่มเติม (Extension)
ใหกับเว็บไซต โดยจะเริ่มตนกับการทํางานในโหมด Backend กอน
ปรับเว็บไซตในโหมด Backend
เว็บใหม ควรกําหนดคาควบคุมตางๆ ใหเหมาะสมกอนใชงาน โดยเขาสูสวนควบคุม

เว็บไซตดว ย URL http://127.0.0.1/lib4you/administrator
ปอนบัญชีผูใช (User name) เปน admin และรหัสผานที่กําหนดไว จากนัน้ คลิกปุม

Logins เพื่อเขาสูระบบ
Domain name และ ชื่อ lib4you ปรับเปลี่ยนไดตามจริง

ปรับคาระบบเว็บไซต (Global Configuration)
เริ่มตนควรปรับคาระบบเว็บไซตโดยคลิกที่ไอคอน Global Configuration
ปรากฏจอภาพสวนควบคุมคาระบบเว็บไซต ดังนี้
• Site Offline เลือกเปน No ทั้งนี้จะเลือกเปน Yes เมื่อตองการปดเว็บไซต

เปนการชั่วคราว ซึ่งผูใชจะพบขอความตามที่กําหนดในรายการ Offline
Message (ขอความดังกลาวปรับแกไขไดตามตองการ)
• Site Name ชื่อเว็บไซต เปนสวนสําคัญมากที่ Search Engine จะเขาถึง
จึงควรกําหนดดวยคําที่คน ไดงาย นําดวยขอความภาษาอังกฤษเปนหลัก
• Default WYSIWYG Editor เลือกโปรแกรมที่ใชเปนสวนจัดการเนื้อหา
(Editor) แบบ WYSIWYG (What You See Is What You Get) กรณีนใี้ หเลือก
เปน TinyMCE 2.0
• List Length จํานวนรายการที่จะใหแสดงผลกรณีที่เลือกรูปแบบการ
แสดงผลแบบ List กรณีนี้คือ 20 รายการตอจอภาพ
• Feed Length จํานวนรายการที่ดึงอัตโนมัตจาก RSS กรณีคือ 10 รายการ
ตอจอภาพ
• Global Site Meta Description คําอธิบายเว็บไซต ขอมูลสําคัญอีกสวน
สําหรับ Search Engine กรณีนี้ใหปรับแกไขเปน แหลงรวมสาระความรูสาขา
บรรณารักษศาสตร และสารสนเทศศาสตรสําหรับครู อาจารย นักศึกษา
บรรณารักษ และนักสารสนเทศ
• Global Site Meta Keywords คําคน (Keyword) สําหรับเว็บไซต ใช
ประโยชนกับ Search Engine กรณีนใี้ หปรับแกไขเปน Library, Information,
Librarian, Information Officer, บรรณารักษศาสตร, สารสนเทศศาสตร,
หองสมุด, ศูนยสารสนเทศ, สํานักวิทยบริการ
• Show Title Meta Tag อนุญาตใหนํา Title ของบทความแสดง

ประกอบกับ Title เว็บไซตหรือไม กรณีนใี้ หเลือกเปน No
• Show Author Meta Tag อนุญาตใหนํา Author ของบทความแสดง
ประกอบกับ Title เว็บไซตหรือไม กรณีนใี้ หเลือกเปน No
• Search Engine Friendly URLs กําหนดใหแสดงผล URL แบบสนับสนุน
การสืบคนของ Search Engine หรือไม กรณีนี้ใหเลือกเปน No (หากตองการ
เลือกเปน Yes ทุกบทความจะตองกําหนด Alias Title เปนภาษาอังกฤษ หาม
เวนวรรค ทุกบทความ)
เมื่อกําหนดขอมูลขางตนจากชุดรายการ Site แลวใหคลิกที่ชุดรายการ System
เพื่อกําหนดรายการเกีย่ วกับ User Settings
• Allow User Registration อนุญาตใหผูใชลงทะเบียนเปนสมาชิกได

หรือไม (กรณีนี้เลือกเปน Yes)
• New User Registration Type ประเภทของสมาชิกที่ลงทะเบียน
o Registered สมาชิกที่มีสิทธิ์สงลิงกเว็บแนะนํา และเขาถึงเนื้อหา
เฉพาะสมาชิกไดเทานัน้
o Author สมาชิกที่สามารถเขียนบทความใหมสงเขาสูระบบ
ได แตไมมีสิทธิ์แกไขบทความ
o Editor สมาชิกที่สามารถเขียนและแกไขบทความได
o Publisher สมาชิกที่สามารถเขียน/แกไขบทความของสมาชิก
คนอื่นได
• New User Account Activation ผูใชที่ลงทะเบียนจะตองยืนยันการเปน

สมาชิกหรือไม (แนะนําใหเลือกเปน Yes)
• Front-end User Parameters อนุญาตใหสมาชิกปรับคาควบคุมเกี่ยวกับ
สมาชิกไดหรือไม เชน ระบบภาษา Editor ที่เลือกใชงาน (แนะนําใหเลือกเปน
Hide)
เมื่อกําหนดคาที่จําเปนดังที่อธิบายขางตน ใหคลิกปุม Save เพื่อบันทึกคา

จากนั้นจะตองกําหนดใหแสดงผล Module การล็อกอินเขาสูระบบ (Login-form Module) โดย
1. เลือกเมนูคําสั่ง Extension, Module Manager
2. คลิกปุม New เพื่อเลือกพื้นทีแ่ สดงผล Module ใหม
3. เลือก Module ชื่อ Login
4. ตั้งชื่อใหกับ Module เชน Login Form และกําหนดตําแหนงทีจ่ ะแสดงผล

เชน Left
5. คลิกปุม Save แลวคลิกปุม Preview เพื่อสังเกตผลจากหนาเว็บไซต
6. ตอนนี้เว็บไซตก็พรอมจะรับสมาชิกที่สนใจเขารวมสรางสรรคเว็บไซตได
แลว โดยคลิกที่ Create an account เพื่อสรางสมาชิกใหม
วิเคราะหเนื้อหาเว็บไซต
การนําเนื้อหาเขาเว็บไซต จะตองวิเคราะหเนื้อหากอน โดยเนื้อหาที่กําหนดไว ไดแก

แนะนําเว็บไซต เปนเนื้อหาเพียง 1 หนาจอ ใหขอมูลเกี่ยวกับเว็บไซต ที่มาของ
เว็บไซต เชน
เว็บไซต lib4you พัฒนาขึ้นมาเพื่อเปนสื่อกลาง
สําหรับบุคลากรสาขาบรรณารักษศาสตร สารสนเทศ
ศาสตรของประเทศไทย ไดมารวมสรางสรรค
แบงปนบทความ เนื้อหาสาระ ประสบการณ และ
ความรูรวมกัน ทีมพัฒนาขอขอบคุณผูเยี่ยมชม และ
สมาชิกทุกทานที่รวมสงเสริม สรางสรรค lib4you
ทีมพัฒนา เปนเนื้อหาเพียง 1 หนา นําเสนอขอมูลของทีมพัฒนา
ประกอบดวยรูปภาพสมาชิกในทีมพัฒนา ชื่อ/นามสกุล สังกัด
และความชํานาญ
คลังความรู เปนหมวดเนื้อหาใหญ ประกอบดวยหมวดยอย คือ
• หมวดบรรณารักษศาสตร
• หมวดสารสนเทศศาสตร
• หมวดสถานศึกษาที่เปดสอน
จากตารางขางตน ผูพัฒนาจะตองวิเคราะห ออกแบบเนื้อหาใหเหมาะสมกอน เพือ่ ให
สอดคลองกับรูปแบบการพัฒนา ดังนัน้ จากตารางขางตน เมื่อนํามาวิเคราะหลักษณะรูปแบบ
เนื้อหาของ Joomla จะไดผลดังนี้
แนะนําเว็บไซต เปนเนื้อหาเพียง 1 หนาจอ ใหขอมูลเกี่ยวกับเว็บไซต ที่มาของ

เว็บไซต
เนื้อหาแบบ Static Content ไมตองกําหนด Section และ
Category
ทีมพัฒนา เปนเนื้อหาเพียง 1 หนา นําเสนอขอมูลของทีมพัฒนา
เนื้อหาแบบ Static Content ไมตองกําหนด Section และ
Category
คลังความรู เปนหมวดเนื้อหาใหญ ประกอบดวยหมวดยอย คือ

• หมวดบรรณารักษศาสตร
• หมวดสารสนเทศศาสตร
• หมวดสถานศึกษาที่เปดสอน
เนื้อหาแบบ Dynamic Content ตองกําหนด Section และ
Category โดย
Section ซึ่งเปนหมวดใหญ กําหนดดวยชือ่ Knowledge
Category ซึ่งเปนหมวดยอยของ Section Knowledge กําหนด
เปน
• Library Science
• Information Science
• Institution
Section
Knowledge
Category Category Category

Library Science Information Science Institution
สรางเนื้อหา “แนะนําเว็บไซต”
การสรางเนื้อหา “แนะนําเว็บไซต” ทําไดโดย

1. จากหนา Control Panel ใหคลิกไอคอน Add New Article
2. ปอนขอมูลดังนี้
หมายเหตุ ทุกบทความควรกําหนด Metadata โดยคลิกจากชุดรายการ

Metadata Information
3. คลิกปุม Save เพื่อบันทึกขอมูล
เมื่อสรางเนื้อหา “แนะนําเว็บไซต” แลวขัน้ ตอนถัดไปคือ การสรางเมนูควบคุมเนื้อหา

สวนนี้ โดย
1. คลิกเลือกเมนู Menus, Main Menu* เพื่อสรางรายการเมนูเพิ่มในเมนูหลักของ
2. ปรากฏสวนควบคุมการสรางรายการเมนูของเมนูหลัก (Main Menu) ดังนี้
3. คลิกปุม New เพื่อสรางรายการคําสั่งใหม
4. เลือกประเภทของรายการเมนู กรณีนี้เลือกเปน Articles
5. เมื่อคลิก Articles แลวจะปรากฏรายการเลือกดังนี้
คลิกเลือก Article Layout เนื่องจากเนื้อหาที่จะเชื่อมมายังรายการเมนูนี้ เปน

เนื้อหาแบบ Static ที่ไมไดกําหนด Section และ Category ซึ่งจะปรากฏ
รายการเลือก ดังนี้
6. เลือกเนื้อหาทีต่ องการเชื่อมกับรายการเมนู โดยคลิกปุม Select จากรายการ

Select Article
ปรากฏรายการบทความ ดังนี้
คลิกเลือกบทความ “แนะนําเว็บไซต”
7. เมื่อเลือกบทความที่ตองการแลว ก็มาถึงขั้นตอนกําหนดขอความกํากับรายการ
เมนู
• Title ขอความที่ตองการใหปรากฏ ไมควรยาวเกินไป

(ตัวอยางระบุเปน แนะนําเว็บไซต)
• Alias ขอความที่ระบุในรายการนีต้ องเปนภาษาอังกฤษ
หามเวนวรรค ใชเปนสวนควบคุมเมื่อเลือกคา Global Configuration ใน
สวน SEO (กรณีนี้ไมตองระบุ)
• Link URL ที่เขาถึงเนื้อหา (ไมตองปรับแกไข)
• Parent Item ลําดับการนําเสนอเมนู ใหแสดงเปนรายการหลักตอจาก
รายการเมนู Home จึงเลือกเปน Top
• Published กรณีที่ไมตองการแสดงรายการคําสั่งใหเลือกเปน No (กรณี
นี้ใหเลือกเปน Yes เพื่อใหแสดงผล)
• Order กรณีที่มีรายการเมนูมากกวา 2 รายการ สามารถ
เลือกลําดับไดวาตองการใหแสดงตอทายรายการใด
• Access Level สิทธิ์ในการเขาถึงรายการเมนูนี้ กรณีนี้ใหเลือกเปน
Public คือทุกคนสามารถคลิกเลือกรายการเมนูนี้ได
• On Click, Open in เมื่อคลิกเลือกรายการเมนูนี้ ตองการใหเปดเนื้อหา
ลักษณะใด กรณีนี้ใหเลือกเปน Parent Window with Browser Navigation
คือ แสดงในหนาตางเดิมพรอมแถบควบคุม
เมื่อกําหนดคาดังขางตนแลว ก็คลิกปุม Save เพื่อบันทึกการสรางรายการเมนูเพิ่มเติม

ในเมนูหลัก
จากนั้นตรวจสอบการสรางรายการเมนูเพิม่ เติมโดยคลิกเลือกรายการ Preview ที่
ปรากฏมุมขวาของจอภาพ
จะปรากฏรายการคําสั่งเพิ่มในแถบเมนูหลัก ดังนี้
เมื่อคลิกที่รายการเมนู “แนะนําเว็บไซต” จะปรากฏเนื้อหาดังนี้

สรางเนื้อหา “ทีมพัฒนา”
การสรางเนื้อหา “ทีมพัฒนา” ใชหลักการเดียวกับ “แนะนําเว็บไซต” แตเนื่องจากขอมูล

ประกอบดวยภาพ ชื่อ/นามสกุล สังกัด และความเชีย่ วชาญ จึงตองเตรียมภาพกอน โดยภาพที่
เตรียมควรมีขนาดความกวางไมเกิน 150 pixels ตั้งชื่อแฟมภาพเปนภาษาอังกฤษ หามเวนวรรค
(ตัวอยางใชภาพในโฟลเดอร image ที่จัดเตรียมไวให)
1. นําเขาภาพเขาสู Joomla ดวยคําสั่ง Site, Media Manager
2. คลิกเลือกโฟลเดอรยอย stories
3. เลื่อนจอภาพมาดานลาง แลวคลิกที่ปุม Browse Files
4. คลิกเลือกภาพที่เตรียมทีละภาพ จนครบทุกภาพ
หากเลือกภาพผิด สามารถลบภาพจากรายการไดโดยคลิกปุม ทายภาพ

5. เมื่อเลือกภาพไดครบตามตองการแลว ใหคลิกปุม Start Upload เพื่อนําเขาภาพ
6. จากนั้นสรางเนื้อหาใหม โดยคลิกไอคอน Add New Article หรือเลือกเมนู

Content, Article Manager จากนั้นคลิกปุม New
7. ปอนขอมูล Title และ Metadata ดังนี้
8. สรางตารางขนาด 2 คอลัมน 3 แถว โดยคลิกปุม Insert New Table
กําหนดจํานวน Columns เทากับ 2 และจํานวน Rows เทากับ 3 ระบุคาความ

กวางตาราง (Width) เทากับ 100% เพื่อใหตารางยาวเต็มจอภาพ จากนั้นคลิก
ปุม Insert เพื่อแทรกตาราง
9. ตารางที่ไดจะปรากฏดังนี้
10. คลิกเมาสในเซลลแรก (แถวแรกคอลัมนแรก) เลือกภาพที่ตองการแสดง โดย

คลิกปุม
ปรากฏจอภาพเลือกภาพดังนี้
คลิกเลือกภาพที่ตองการ ปอนคําอธิบายภาพในรายการ Image Description

และ Image Title จากนัน้ คลิกปุม Insert
คลิกเมาสในคอลัมนดานขวาของแถวแรก พิมพขอมูลทีมพัฒนาคนที่ 1 จัด
แตงตามเหมาะสม เชน
ทําซ้ํากับรายการอื่นจนครบ
11. คลิกปุม Save เพื่อบันทึกขอมูล

เมื่อสรางเนื้อหา “ทีมพัฒนา” แลวขั้นตอนถัดไปคือ การสรางเมนูควบคุมเนื้อหาสวนนี้
โดย
1. คลิกเลือกเมนู Menus, Main Menu* เพื่อสรางรายการเมนูเพิ่มในเมนูหลักของ
2. ปรากฏสวนควบคุมการสรางรายการเมนูของเมนูหลัก (Main Menu) ดังนี้
3. คลิกปุม New เพื่อสรางรายการคําสั่งใหม
4. เลือกประเภทของรายการเมนู กรณีนี้เลือกเปน Articles
5. เมื่อคลิก Articles แลวจะปรากฏรายการเลือกดังนี้
คลิกเลือก Article Layout เนื่องจากเนื้อหาที่จะเชื่อมมายังรายการเมนูนี้ เปน

เนื้อหาแบบ Static ที่ไมไดกําหนด Section และ Category ซึ่งจะปรากฏ
รายการเลือก ดังนี้
6. เลือกเนื้อหาทีต่ องการเชื่อมกับรายการเมนู โดยคลิกปุม Select จากรายการ

Select Article
ปรากฏรายการบทความ ดังนี้
คลิกเลือกบทความ “ทีมพัฒนา”
7. เมื่อเลือกบทความที่ตองการแลว ก็มาถึงขั้นตอนกําหนดขอความกํากับรายการ
เมนู
เมื่อกําหนดคาดังขางตนแลว ก็คลิกปุม Save เพื่อบันทึกการสรางรายการเมนูเพิ่มเติม

ในเมนูหลัก
จากนั้นตรวจสอบการสรางรายการเมนูเพิม่ เติมโดยคลิกเลือกรายการ Preview ที่
ปรากฏมุมขวาของจอภาพ
จะปรากฏรายการคําสั่งเพิ่มในแถบเมนูหลัก และเมื่อคลิกที่รายการเมนู “ทีมพัฒนา” จะ

ปรากฏเนื้อหาดังนี้
เนื้อหาหมวดคลังความรู
การสรางเนื้อหาหมวดคลังความรู ตามที่ไดออกแบบไวจะประกอบดวยหมวดยอย
3 หมวด ซึ่ง Joomla ไดกําหนดหมวดเนื้อหาหมวดใหญเปน Section และเนื้อหาหมวดยอยใน
แตละ Section เปน Category
Articles
Section A Section B Static Content
Category A-1 Category A-2 Category B-1
Content 1 Content 1 Content 1
Content 2 Content 2
รูปแสดงโครงสรางการจัดการเนื้อหาของ Joomla
จากแผนการวิเคราะหดังกลาว จึงตองสราง Section กอน โดย

1. เลือกเมนูคําสั่ง Content, Section Manager
2. คลิกปุม New เพื่อสราง Section ใหม

3. กําหนดชื่อ Section และรายละเอียดเพิ่มเติมไดจากรายการ Description
ตัวอยางระบุชอื่ Section เปน Knowledge แลวคลิกปุม Save
4. เมื่อสราง Section แลวขั้นตอนถัดไปเปนการสราง Category ใหกับ Section

Knowledge จํานวน 3 Categories โดยคลิกเลือกเมนูคําสั่ง Content, Category
Manager
คลิกปุม New แลวกําหนดชือ่ Category
ตัวอยางกําหนดชื่อ Category เปน Library Science และเลือก Section

เปน Knowledge จากนั้นคลิกปุม Save เพื่อบันทึกและทําซ้ําจนครบทั้ง 3
Categories
5. เมื่อสราง Section และ Categories แลวขั้นถัดไปเปนการสรางเนือ้ หาตาม

หมวดดวยวิธีการเดียวกับทีไ่ ดแนะนําไปกอนหนานี้ แตจะตองเลือก Section
และ Category ใหตรงกับเนือ้ หา ดังนี้
ปกติเนื้อหาลักษณะนี้ มักจะนําเสนอในหนาแรกของเว็บไซต (Front Page) จึง

ควรคลิกเลือกรายการ Front Page เปน Yes ดวย
จากนั้นปอนเนื้อหา จัดรูปแบบการแสดงผลใหเหมาะสม จึง Save เนือ้ หา
6. เนื้อหาที่สรางจะปรากฏผาน Articles Manager ดังนี้
7. และเมื่อคลิกปุม Preview จะแสดงผลหนาเว็บ ดังนี้
8. จากหนาเว็บไซตดังกลาว ยังไมมีเมนูควบคุมการแสดงผล จึงควรสรางเมนู

ควบคุม
9. จากหนา Control Panel คลิกเลือกคําสั่ง Menu, Main Menu

10. คลิกปุม New เพื่อสรางรายการเมนูใหมแบบ Articles
11. ตองการสรางรายการเมนู “คลังความรู” ซึ่งเปนการโยงไปหา Section

Knowledge จึงตองคลิกเลือก Section และมีรายการยอย 2 ตัวเลือกคือ Section
Blog Layout เพื่อตองการใหแสดงขอมูลในลักษณะ Blog หรือ Section
Layout เพื่อตองการใหแสดงขอมูลในลักษณะลําดับรายการ (List) กรณีนี้ให
คลิกเลือกเปน Section Layout
12. จากนั้นปอนชือ่ รายการเมนูเปน “คลังความรู” และเลือก Section เปน

Knowledge
คลิกปุม Save เพื่อบันทึก แลวคลิกปุม Preview เพื่อตรวจสอบผล
13. เพื่อใหเขาถึงขอมูลไดตรงมากขึ้น สามารถสรางรายการเมนูยอยภายใต “คลัง

ความรู” ตัวอยางตองการสรางรายการเมนูยอย ชื่อ “บรรณารักษ” ซึ่งทําได
ดังนี้
14. จากหนา Control Panel คลิกเลือกคําสั่ง Menu, Main Menu
15. คลิกปุม New เพื่อสรางรายการเมนูใหมแบบ Articles
16. ตองการสรางรายการเมนู “บรรณารักษ” ซึ่งเปนการโยงไปหา Category

Library Science จึงตองคลิกเลือก Category และมีรายการยอย 2 ตัวเลือกคือ
Category Blog Layout เพื่อตองการใหแสดงขอมูลในลักษณะ Blog หรือ
Category Layout เพื่อตองการใหแสดงขอมูลในลักษณะลําดับรายการ (List)
กรณีนใี้ หคลิกเลือกเปน Category Blog Layout
17. ระบุชื่อรายการเมนูเปน “บรรณารักษ” และเนื่องจากเปนรายการเมนูยอยของ

“คลังความรู” จึงตองคลิกเลือก คลังความรู จากรายการ Parent Item
18. เลือก Category เปน Library Science จากรายการ Category
19. คลิกปุม Save เพื่อบันทึกและทําซ้ํากับ Category ที่เหลือจนครบทั้ง 3 หมวด

ยอย
20. เมื่อคลิกปุม Preview จะปรากฏผลหนาเว็บ ดังนี้
เพียงเทานี้ก็ไดเนื้อหาและเมนูที่สรางดวยงานของตนเองจาก Joomla อยางรวดเร็ว ที่

เหลือก็คือการปรับแตงและเพิ่มเนื้อหาใหเหมาะสม กอนเผยแพรใหผูสนใจเขาถึงได
นําเนื้อหาจากโฟลเดอร data สรางเปนบทความตามหมวดเนื้อหาทีก่ ําหนดไว

แบบสอบถามออนไลน (Poll)
เว็บไซตในปจจุบันควรใหความสําคัญกับผูชมเว็บ และมีขอมูลความคิดเห็นจากผูช ม
เว็บประกอบการพัฒนาปรับปรุง Poll เปน Components ที่มากับ Joomla สําหรับสราง
แบบสอบถามออนไลนจากผูใชอยางงาย แสดงผลลัพธเปนกราฟแทงแนวนอน (Bar chart) ดวย
สีสันที่สวยงาม
การสรางแบบสอบถามออนไลนทําไดโดยเลือกเมนูคําสั่ง Components, Polls
ปอนคําถามในรายการ Title: ตัวเลือกในรายการ Options: และการนําเสนอจากรายการ

Published: โดยคลิกเลือกรายการ Published เปน Yes เพื่อให Poll ที่สรางเผยแพรใหกับผูชม
จากนั้นคลิกปุม Save
เมื่อสราง Poll แลวขั้นถัดไปเปนการแสดงผล Polls บนหนาเว็บ โดยเลือกคําสั่ง

Extensions, Module Manager จากนั้นคลิกปุม New เพื่อสราง Module ใหม
คลิกที่รายการ Poll ตั้งชื่อ Poll ในรายการ Title และเลือก Poll จากรายการ Select poll
ทั้งนี้สามารถเลือกตําแหนงที่จะแสดงผล Poll ดานซายหรือดานขวาของจอภาพจากรายการ
Position
คลิกปุม Save และคลิกปุม Preview เพื่อแสดงผลจากหนาเว็บไซต

Web Resources
เกือบทุกเว็บไซตมักจะหนีไมพนกับการนําเสนอเว็บเครือขายที่คัดสรรแลว โดย
แสดงผลเปนลิงกเว็บไซตแยกหมวดหมู Joomla เตรียมความสามารถจัดการเว็บไซตไดงายๆ
ดวย Components ชื่อ Web Links
การสราง Web Resources จะตองเริ่มจากการสรางหมวดหมูของเว็บ (Categories) กอน

โดยคลิกเลือกคําสั่ง Components, Web Links, Categories
คลิกปุม New เพื่อสรางหมวดเว็บ
ปอนชื่อหมวดเว็บในรายการ Title: แลวคลิกปุม Save และทําซ้ํากับหมวดอื่นๆ จนครบ

ตามตองการ
เมื่อสรางหมวดเว็บแลว ขัน้ ถัดไปจะเปนการสรางรายการลิงกเว็บไซตตามหมวดเว็บ

โดยเลือกคําสั่ง Components, Web Links, Links
คลิกปุม New เพื่อสรางรายการลิงกเว็บไซต
• ระบุชื่อรายการลิงกเว็บใน Name
• ระบุ URL ของเว็บใน URL
• คําอธิบายเว็บใน Description
• เลือกรายการ Target เปน New Window with Browser Navigation เพื่อใหแสดงผล
เว็บในจอภาพใหม
เมื่อบันทึกจะปรากฏรายการลิงกเว็บไซต ดังนี้
ตอนนี้ก็ไดคลังเว็บไซตแลว แตการนําเสนอใหผูชมเขาถึงไดแลว จะตองสรางเมนู

ควบคุมแสดงผลกอน โดย
1. เลือกเมนูคําสั่ง Menu, Main Menu แลวคลิกปุม New
2. คลิกรายการ Web Links
3. คลิกรายการ All Categories, Web Link Category List Layout
4. ระบุคําอธิบายรายการเมนูในรายการ Title เชน คลังเว็บไซต แลวคลิกปุม Save

จากนั้นคลิกปุม Preview เพือ่ แสดงผล
ปายโฆษณา (Banner)
เนื้อหาเดน หรือกิจกรรมเดนมักจะนําเสนอในรูปแบบภาพโฆษณาที่สามารถสุม
แสดงผลอัตโนมัติเมื่อมีการโหลดหนาเว็บไซต (Re-load) Joomla จึงไดเตรียมการจัดการ
เกี่ยวกับปายโฆษณาหรือ Banner รวมทั้งสวนลิงกไปยังเว็บไซตที่เกี่ยวของ โดยทํางานผาน
Components, Banner
การสรางปายโฆษณา จะตองเตรียมภาพใหมีขนาดที่เหมาะสมกอน เชน ภาพฟอรแมต
JPEG ขนาด 450 × 100 พิกเซล
ภาพตัวอยางอยูที่โฟลเดอร image/banner
เมื่อเตรียมภาพแลวขั้นถัดไปให Upload ภาพดวย Media Manager ไปไวที่โฟลเดอร
banners
จากนั้นเริ่มเขาสูการสรางปายโฆษณา โดย
1. สราง Category ของปายโฆษณาดวยคําสั่ง Components, Banner, Category
2. สรางชุดยอยของปายโฆษณาดวยคําสั่ง Components, Banner, Clients เชน
3. สรางรายการปายโฆษณาดวยคําสั่ง Components, Banner, Banners
• Name: ระบุชื่อปายโฆษณา
• Category เลือกหมวดปายโฆษณา
• Client Name เลือกชุดยอยของปายโฆษณา
• Click URL ระบุ URL ที่ตอ งการใหแสดงผล กรณีไมมี URL ให
ระบุ URL ของเว็บไซตหลักหรือระบุดว ย # ก็ได
• เลือกภาพปายโฆษณาใหตรงกับเนื้อหาในรายการ Banner Image
Selector
4. ระบุรายละเอียดแลวคลิกปุม Save จากนั้นทําซ้ําจนครบทุกภาพที่ตองการ
5. กําหนดการนําเสนอดวยคําสั่ง Extension, Module Manager คลิกเลือก

Banners
6. ปรับแตงคาที่จาํ เปน
• Title ระบุชื่อ Module เชน Banner

• Show Title ใหเลือกเปน No
• Position ใหเลือกเปน user1
• Randomise เลือกเปน Sticky, Randomise
7. จากนั้นคลิกปุม Save แลวดูผลที่ปรากฏในหนา Front page
การระบุตําแหนง (Position) ในการแสดงผล Module จะตองเลือกใหเหมาะสม กรณี

เชน Banner ควรเลือกเปน user1 ทั้งนี้เจาหนาที่ที่ดูแลเว็บจะตองตรวจสอบตําแหนงของ
Template แตละ Template ที่เลือกใชวากําหนดตําแหนงไวอยางไร โดยคลิกเลือกคําสั่ง
Extensions, Template Manager
จากนั้นคลิกที่ Radio Box หนา Template ที่เลือก แลวคลิกปุม Edit ปรากฏจอภาพดังนี้
คลิกปุม Preview โปรแกรม Joomla จะแสดงชื่อตําแหนง (Position Name) ดวยอักษรสีแดงใน

กรอบดังตัวอยาง
จากภาพตัวอยาง จะพบวา
• Main Menu, Login Form แสดงผล ณ ตําแหนง Left
• Poll แสดงผล ณ ตําหนง Right
• Banner แสดงผล ณ ตําแหนง user1
คลังภาพออนไลน
“ภาพ” สื่อแทนขอความที่ไดรับความสนใจมากสื่อหนึ่ง เว็บไซตหากไมนําเสนอภาพก็

คงไมสามารถเรียกผูชมไดมากเทาที่ควร ดังนั้นการสรางคลังภาพออนไลนจึงเปนแนวทางหนึ่ง
ที่ชวยใหจํานวนผูชมเว็บสูงขึ้นได
Joomla เตรียม Extension ที่เกี่ยวกับ Photo Gallery ไวใหเลือกใชหลากหลายโดยดาวน
โหลดไดจากเว็บ http://www.joomla.org ทั้งนี้จะขอแนะนําการสรางคลังภาพออนไลนดว ย
Extension ชื่อ Ozio Gallery โดยไฟลติดตั้งคือ com_oziogallery-0.24.zip
การใชงานจะตองเริ่มจากการติดตั้ง Components กอนดวยคําสั่ง Extension,
Install/Uninstall
จากนั้น Browse เลือกไฟลแลวคลิกปุม Upload File & Install เพื่อติดตั้ง
Component ที่ติดตั้งแลวจะไปแสดงผลที่เมนู Components
เมื่อคลิกเลือก Components, Ozio Gallery จะปรากฏจอภาพดังนี้
แสดงวา Components Ozio Gallery ติดตั้งไดสมบูรณ ขัน้ ตอนถัดไปคือการเตรียมภาพ

ที่จะแสดงผล โดยควรเปนภาพฟอรแมต JPEG (.jpg) ขนาดความกวางไมเกิน 640 พิกเซล ชื่อ
ไฟลภาพจะตองเปนภาษาอังกฤษ หามเวนวรรค และ Upload ดวย Media Manager ไปไวที่
โฟลเดอร images/oziogallery
ขั้นตอนสุดทายคือ การสรางรายการเมนูควบคุม Ozio Gallery โดยเลือกคําสั่ง Menu,

Main Menu แลวคลิกปุม New
เลือก Ozio Gallery

กําหนดขอความกํากับรายการเมนูในรายการ Joomla Ozio Gallery Components for

Joomla เชน คลังภาพ แลวบันทึกดวยปุม Save
เมื่อแสดงผลทางหนาเว็บจะปรากฏรายการเมนู และปรากฏผลคลังภาพดังนี้
เพียงเทานี้ก็ไดคลังภาพไมยาก อีกทั้งมีลูกเลนในการนําเสนอที่นาสนใจมาก
นอกจากนี้โปรแกรมยังอนุญาตใหปรับเปลี่ยนรูปแบบการแสดงผลไดโดยเลือกเมนู
คําสั่ง Components, Ozio Gallery
จากนั้นคลิกปุม Settings ปรากฏรายการเลือกรูปแบบการแสดงผลในรายการ Skin

รวมทั้งแท็บ Skin ยอยทีใ่ ชปรับแตงการแสดงผลแตละ Skin ที่เลือก
คลังเอกสาร คลังดาวนโหลด
คลังเอกสาร คลังดาวนโหลดฟงกใจอีกฟงกชันทีเ่ ปนหัวใจของระบบจัดการเอกสาร

ออนไลน เพราะเอกสารในระบบเว็บไซตมักจะมีจํานวนเพิ่มขึ้นตามเวลา การจัดหมวดหมู
เอกสารใหคนหาไดงายจึงมีความสําคัญมาก Joomla ไดเตรียม Extension บริหารจัดการเอกสาร
พรอมความสามารถอื่นๆ ไวหลากหลายโปรแกรม
โปรแกรมที่จะนําเสนอเปนตัวอยางคือ IonFiles ดาวนโหลดไดจาก Extensions ของ
http://www.joomla.org และไดไฟลดังนี้ ionFiles-4[1].2.zip
การติดตั้งก็คลายคลึงกับการติดตั้ง Extension อื่นๆ ที่ไดแนะนําไปแลว คือ Extension,
Install/Uninstall
เมื่อติดตั้งแลวจะปรากฏสวนควบคุมในเมนู Components, ionFiles
เริ่มตนจะตองปรับแตงระบบใหเหมาะสมกอน โดยคลิก Configuration
แท็บ Configuration เลือกวาจะแสดงหรือไมใหแสดงขอมูลตามรายการเลือกหรือไม

เมื่อปรับคาตามตองการแลวใหคลิกปุม Save
ขั้นตอนถัดไปคือ สรางหมวดเอกสาร (Categories) โดยคลิกที่แท็บ Manage Categories
สรางหมวดเอกสารโดยคลิกปุม New แลวปอนชื่อหมวดเอกสาร
คลิกปุม Save เพื่อบันทึก แลวสรางหมวดเอกสารอื่นตามตองการ
เมื่อสรางหมวดเอกสารไดแลว ขั้นตอนสุดทายคือ การนําเขาแฟมเอกสาร โดยสามารถ

นําเขาแฟมเอกสารไดหลายฟอรแมตทั้ง .pdf, .doc, .xls, .ppt, .odt เปนตน
การนําเขาเอกสารมี 2 ขั้นตอนคือ
1. การ Upload แฟมเอกสารเขาสูระบบเว็บ Joomla ผานทาง Media Manager
2. การสรางคลังดาวนโหลดเอกสารดวย ionFiles
Upload เอกสารดวย Media Manager

การ Upload แฟมเอกสารดวย Media Manager ทําไดโดยเลือกคําสั่ง Site, Media
Manager และสรางโฟลเดอรสําหรับเอกสารโดยเฉพาะ เชน documents
คลิกเลือกโฟลเดอร Media แลวระบุชื่อโฟลเดอรใหมเปน document จากนัน้ คลิกปุม

Create Folder
จากนั้นคลิกเลือกโฟลเดอร documents เลือกไฟลที่ตองการ Upload แลวคลิกปุม Start

Upload
สรางคลังดาวนโหลดเอกสาร
เมื่อนําเขาแฟมเอกสารเขาสู Media Manager แลวขั้นถัดไปคือการนําลิงกเอกสารไปยัง
ionFiles โดยเลือกคําสั่ง
ปรากฏสวนควบคุมการจัดการแฟมเอกสารดังนี้
คลิกปุม New แลวระบุขอมูลเอกสารประกอบการทําลิงกแฟมเอกสาร ดังนี้
ปอนขอมูลรายการที่จําเปน ดังนี้
• File Title ชื่อเอกสารที่ตองการใหแสดงในหนาเว็บ
• File Name ชื่อแฟมเอกสาร
• Description คําอธิบายเอกสาร
• Version รุนของเอกสาร
• Licenses type ประเภทลิขสิทธิ์ เชน (c) คือ Copyright, (cc) คือ Creative
Commons, Public Domain คือ ของสาธารณะ หรืออื่นๆ
• Category หมวดของแฟมเอกสาร
• Size ขนาดแฟมเอกสาร (ระบุหนวยตอทายเปน KB หรือ MB)
• Release Date วันที่เผยแพรแฟมเอกสาร
• File URL สวนสําคัญมากจะตองระบุเปน images/documents/ชื่อแฟม
เอกสาร.สวนขยาย
• Author เจาของแฟมเอกสาร
เมื่อระบุขอมูลจําเปนดังกลาวแลวก็คลิกปุม Save เพื่อบันทึก
ขั้นตอนสุดทายคือการสรางรายการเมนูควบคุม ionFiles ดวยวิธีการสรางเมนูที่เคย

แนะนําไปกอนแลว คือ เลือกคําสั่ง Menu, Main Menu คลิกปุม New
เลือก ionFiles กําหนดชื่อรายการเมนู
เมื่อคลิกปุม Save จะปรากฏรายการเมนูเพิม่ ใน Main Menu และจะแสดงผลเมื่อคลิก

เลือก ดังนี้
ขาวประกาศอัตโนมัติแบบ RSS Feed
RSS ยอมาจาก “Really Simple Syndication” ซึ่งอาจแปลเปนไทยไดวา “การกระจาย

ขาวสารอยางงายๆ” เปนเทคโนโลยีที่นําขอมูลที่ผูพัฒนาสรางขึ้น ดึงมานําเสนอบนเว็บไซตของ
เราโดยอัตโนมัติ ทําใหลดภาระในการคัดลอกขาวหรือเนื้อหา ไดขาวหรือเนื้อหาทีป่ รับปรุงได
ตลอดเวลาเมื่อตนฉบับเปลี่ยนแปลง
Joomla รองรับการทํางาน RSS โดยผานทาง Components, News Feed
โดยจะตองเริ่มจากการสรางหมวดขาวกอน คลิกที่ Categories จากนัน้ คลิกปุม News

ระบุชื่อหมวดขาว ดังตัวอยาง
• Title ชื่อหมวดขาว
• Published เลือก Yes เพื่อใหหมวดขาวทํางาน
เมื่อคลิกปุม Save จะปรากฏหมวดขาว ดังนี้
สามารถสรางหมวดขาวประเภทอื่นๆ ไดตามตองการ เมื่อเรียบรอยแลวก็จะเปน

การระบุ URL ของ RSS Feed จากเว็บผูใหบริการดวยคําสั่ง Components, News Feeds, Feeds
คลิกปุม New เพื่อสรางรายการขาวใหม
• Name ชื่อขาวที่จะดึง เชน ผูจัดการ

• Published เลือก Yes เพื่อใหรายการนี้ทาํ งาน
• Category เลือกหมวดขาว
• Link ระบุ URL ของ RSS Feeds ที่ตองการดึง
• Number of Articles จํานวนขาวที่ตอ งการใหแสดงในหนาเว็บ
• Cache Time เวลา (วินาที) ที่ตองการใหปรับปรุงรายการขาว
เมื่อไดกําหนดขอมูลแลวจึงคลิกปุม Save
การหา URL ของ RSS Feeds ทําไดโดยเขาไปยังเว็บไซต (แนะนําใหใช

Firefox) เชน หนังสือพิมพผูจัดการ ดวย URL http://www.manager.co.th แลวเลื่อนหา
สัญลักษณ ในหนาเว็บ ดังนี้
คลิกปุมขวาของเมาสที่สัญลักษณ ในหมวดขาวที่ตองการ แลวเลือกคําสั่ง Copy

Link Location เพื่อคัดลอก URL ของ RSS ขาวในหมวดที่เลือก
จากนั้นจึงนํา URL ที่คัดลอกไป Paste ในรายการ Link ของ News Feeds
เมื่อไดหมวดขาว RSS Feeds ตามตองการแลว จึงสรางเมนูควบคุมการแสดงผลตอไป
ติดตอทีมพัฒนา ผูดแู ลเว็บ
เว็บไซตควรจะมีเนื้อหาที่แสดงถึงขอมูลการติดตอสื่อสาร อยาใหความสําคัญกับการ
ติดตอดวย e-Mail หรือ Web board เพียงอยางเดียว การระบุขอมูลการติดตอทีมพัฒนา หรือ
ผูดูแลเว็บมีความสําคัญมาก Joomla ไดเตรียม Components Contact เปนสวนควบคุมโดย
สามารถสรางเนื้อหาไดหลายหมวด จึงตองเริ่มจากการสรางหมวดขอมูลการติดตอกอน ดวย
คําสั่ง Components, Contacts, Categories
สามารถสรางไดหลายหมวดดังนี้
เมื่อสรางหมวดขอมูลการติดตอแลว ก็จะเปนการสรางรายการติดตอดวยคําสั่ง
Components, Contacts, Contacts โดยรายการระบุเมื่อคลิกปุม New ไดแก
• Name ระบุชื่อรายการติดตอ เชน Web Master

• Category เลือกหมวดการติดตอที่สรางไวกอนหนา
• Links to User กรณีที่มีการสรางสมาชิกมากกวา 1 สามารถระบุไดวาการ
ติดตอนี้ จะหมายถึงสมาชิกใด
จากนั้นก็ระบุขอมูลการติดตอ ดังนี้
เมื่อระบุขอมูลที่จําเปนครบแลวจึงคลิกปุม Save และสราง Menu ควบคุมการแสดงผล

ตอไป
เพิ่มชุดเมนู
ปกติ Joomla ไดเตรียมชุดเมนูไวใหแลว 1 ชุดมาตรฐานคือ ชุดเมนูหลัก (Main Menu)

แตผูพัฒนาสามารถสรางชุดเมนูเพิ่มไดตามตองการ เชน ตองการเพิ่มชุดเมนูในแนวนอนวางไว
ที่ตําแหนง user3 ประกอบดวยรายการ Home, RSS News และ Contact Us
1. เลือกเมนูคําสั่ง Menu, Menu Manager คลิกปุม New เพือ่ สรางชุดเมนูชุดใหม
2. กําหนดชื่อชุดเมนูเปน Top Menu ทั้ง 4 รายการ แลวจึงคลิกปุม Save
3. คัดลอกรายการเมนู Home จาก Main Menu ไปยัง Top Menu โดย

1) เลือกคําสั่ง Menu, Main Menu
2) คลิก Radio Box หนา Home แลวคลิกปุม Copy
3) เลือก Top Menu แลวคลิกปุม Copy
4) รายการเมนู Home จะถูกคัดลอกมาไวที่ Top Menu ดังนี้

4. ถัดไปก็สรางรายการเมนู RSS News และ Contact Us ดวยวิธีการที่ไดแนะนํา

ไปกอนแลว แตใหเลือกชุดเมนูเปน Top Menu ดังนี้
5. กําหนดการแสดงผล Top Menu ณ ตําแหนง user3 โดยเลือกคําสั่ง Extension,

Module Manager
6. คลิกเลือก Top Menu
7. เลือก Enabled เปน Yes และ Position เปน user3
8. เมื่อบันทึกการปรับแสดงผล Top Menu จาก Module Manager แลวแสดงผล

เว็บ เมนูใหมทสี่ รางจะปรากฏในหนาเว็บ ดังนี้
สรางบัญชีสมาชิก
จุดเดนของ CMS คือการอนุญาตใหสมาชิกมีสวนรวมสรางสรรค ปรับปรุงเว็บไซตทํา

ใหเว็บไซตมีความเคลื่อนไหวอยูตลอดเวลาจากกลุมสมาชิก การสรางสมาชิกสามารถทําได
หลายวิธี เชน เปดระบบลงทะเบียนสมาชิกอัตโนมัติจากหนาเว็บ หรือ Admin ของเว็บเปน
ผูสรางบัญชีสมาชิก
การลงทะเบียนสมาชิกอัตโนมัติจากหนาเว็บ จะทําไดเมื่อ Admin กําหนดคา Global
Configuration ในสวน User Settings ดังนี้
Allow User Registration

เลือกเปน Yes
และสราง Module Login ใหทํางานในหนา Front-end ของเว็บ
Module Login
โดยจะปรากฏสวน Login ในหนา Front-End ของเว็บดังนี้
เมื่อผูสนใจคลิกรายการเมนู Create an account จะปรากฏจอภาพลงทะเบียนเปน

สมาชิกดังนี้
ผูสมัครปอนขอมูลตามฟอรมลงทะเบียน และคลิกปุม Register กรณีที่ Web Server

และเว็บไซตไดกําหนดคา Mail Server ไวถูกตองระบบจะสงอีเมลไปยังผูสมัครตามอีเมลที่ระบุ
เพื่อใหยืนยันการสมัคร
การกําหนดคา Mail Server ใหระบุที่ Global Configuration ในสวน Server, Mail

Settings
กรณีที่ Web Server และเว็บไซตไมไดกําหนดคา Mail Server ไวผูสมัครจะไมไดรับ

อีเมลยืนยัน Admin จะตองเปนผูแจงผูสมัครดวยวิธีการอื่นแทน โดย Admin เขาไปตรวจสอบ
บัญชีผูสมัครไดทาง Control Panel คลิกที่ไอคอน User Manager
จากภาพตัวอยางจะพบวามีบญ ั ชีใหมคือ courseware2u ที่ยังไมไดเปดใช สังเกตุไดที่

รายการ Enabled เปนกากบาทสีแดง หาก Admin ตองการใหสมาชิกนีม้ ีสิทธิ์ทํางานกับเว็บไซต
ก็ใหคลิกกากบาทสีแดง ใหเปนเครื่องหมายถูกสีเขียว
การแกไขขอมูลสมาชิก ทําไดโดยคลิกที่ชอื่ สมาชิกนั้นๆ
สําหรับการสรางบัญชีสมาชิกใหมโดย Admin ทําไดโดยเขามาที่ User Manager แลว

แลวปอนขอมูลสมาชิก ในสวน Group เปนสวนสําคัญมากคือการสิทธิ์ของสมาชิกวามี

สิทธิ์อยางไรกับเว็บไซต โดยกําหนดสิทธิไ์ ดดังนี้
• Public Front-end สิทธิ์เฉพาะการล็อกอินทางหนาเว็บ Front-end

o Registered มีสิทธิ์เฉพาะสง URL เว็บแนะนํา และอานเนื้อหาบางสวนที่
กําหนดไวเฉพาะสมาชิก
o Author มีสิทธิ์สรางเนื้อหาและเหมือนกับ Registered
o Editor มีสิทธิ์สราง/แกไขเนื้อหาและเหมือนกับ Author
o Publisher มีสิทธิ์สราง/แกไขเนื้อหาทั้งของคนเองและสมาชิกทานอื่น
รวมทั้งสิทธเหมือนกับ Author
• Public Back-end สิทธิ์ล็อกอินทางหนาเว็บ Front-end และ Back-end
ของเว็บไซต
o Manager มีสิทธิ์เหมือน Publisher แตสามารทํางานจาก Back-end
Control Panel ของเว็บได
o Administrator มีสิทธิ์คลายกับ Super Admin แตยังไมสิทธิ์เปลี่ยน
คา Configuration ของระบบ
o Super Administrator มีสิทธิ์ทุกอยางในการจัดการเว็บไซต
เมนูเฉพาะสมาชิก
การเขาทํางานสําหรับสมาชิกในโหมด Front-end ผูพัฒนาเว็บควรสรางเมนูการทํางาน

เฉพาะสมาชิกขึ้นมา เชน การปรับแกไขขอมูลสมาชิก (Updated Profile) การสงบทความเขาสู
เว็บ (Submit Article) การสงเว็บไซตแนะนํา เปนตน โดยชุดเมนูนจี้ ะแสดงเมื่อสมาชิกล็อกอิน
เทานั้น
การสรางชุดเมนูเฉพาะสมาชิกทําไดโดยเลือกคําสั่ง Menu, Menu Manager แลวคลิก
ปุม New สรางชุดเมนูใหม เชน User Menu
เมื่อสรางชุดเมนูใหมแลว จะตองเปดใหแสดงผลดวยโดยคลิกเมนูคําสั่ง Extension,

Module Manager แลวคลิก Enabled
แตเนื่องจากชุดเมนูนจี้ ะอนุญาตเฉพาะสมาชิกเทานั้น จึงตองปรับคา Access Level ดวย

โดยคลิกที่ Module User Menu เพื่อเขาไปปรับคา Access Level เปน Registered รวมทั้งปรับ
ตําแหนง (Position) และ Order ใหเหมาะสมดวย
เพิ่มรายการคําสั่งใน User Menu เชน รายการคําสั่งสําหรับปรับปรุงขอมูลของสมาชิก

โดยคลิกเลือกคําสั่ง Menu, User Menu แลวคลิกปุม New
เลือกคําสั่ง User
เลือกคําสั่งยอยเปน User Form Layout จากนั้นระบุชื่อรายการเมนู เชน Update Profile
เมื่อคลิกปุม Save จากนัน้ กลับไปทํางานในหนา Front-end แลว Login เขาสูระบบจะ

ปรากฏชุดเมนูใหม และรายการเมนูดังนี้
เพียงเทานี้ก็ไดเมนูและคําสั่งสําหรับสมาชิกพรอมใชงานแลว แตยงั ไมครบนะครับ

ควรสรางรายการเมนูอื่นๆ ดวย เชน แนะนําเว็บไซต หรือสงบทความเขาสูเว็บเพือ่ กําหนดให
เปนเว็บที่สมาชิกมีสวนรวมในการสรางสรรคอยางแทจริง
คําสั่งแนะนําเว็บไซตสําหรับสมาชิก เลือกไดดังนี้
คําสั่งสงบทความเขาสูระบบ คือ

Manualjoomla1 5

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Manualjoomla1 5

Uploaded by

Copyright:

Available Formats

เว็บไซตงาย รวดเร็วดวย Joomla (version 1.

การพัฒนาเว็บไซตในปจจุบนั ไดมีการพัฒนาไปอยางมาก โดยเฉพาะเมื่อมีการสราง

การนําเสนอขอมูลในระบบ WWW (World Wide Web) พัฒนาขึ้นมาในชวงปลายป

The Web is Cross-Platform. ขอมูลบนเว็บไมยดึ ติดกับระบบปฏิบัติการ (Operating

The Web is interactive. การทํางานบนเว็บเปนการทํางานแบบโตตอบกับผูใชโดย

Webpage Webpage Webpage Webpage Webpage

ปจจุบันมีหลายคนที่มักสับสนกับการใชคําวา เว็บเพจ เว็บไซด และโฮมเพจ โฆษณา

Style Sheet Technology

การยกเลิกการแบงตอนเนื้อหา ก็สามารถทําไดโดยคลิกที่เสนประสีแดง แลวกดปุม

แฟมภาพสกุล GIF (Graphics Interlace File)

• แฟมภาพชนิดนี้ก็มีจุดดอยในเรื่องของการแสดงสี ซึ่งแสดงไดเพียง 256 สี

แฟมภาพสกุล JPG (Joint Photographer’s Experts Group)

• สามารถใชงานขามระบบ (Cross Platform) หมายความวา ระบบคอมพิวเตอร

แฟมภาพสกุล PNG (Portable Network Graphics)

การออกแบบและพัฒนาเว็บเพจ สามารถทําไดหลายระบบ ขึ้นอยูก ับลักษณะของ

• แบบเชิงเสน (Linear) เปนการจัดแสดงหนาเว็บเรียงตอเนื่องไปในทิศทางเดียว

• แบบผสม (Combination) เปนการจัดหนาเว็บชนิดผสมระหวางแบบลําดับขั้น และ

การพัฒนาเว็บเพจ ควรมีการวางแผนกอนเสมอ เพื่อใหการแสดงผลเว็บถูกตอง ตรงกับ

ปญหาดังกลาว ควรวางแผนออกแบบเอกสารเว็บบนกระดาษ และกําหนดชื่อแฟมเอกสารเว็บ

กําหนดโฟลเดอร (Folder) ที่ใชเก็บเอกสารเว็บ

 พิมพชื่อโฟลเดอรใหม หากไมสามารถพิมพได ใหกดปุมฟงกชัน @ กอน

ไฟลภาพที่ไมสามารถนํามาสรางเอกสารเว็บ เพราะมีสวนขยายเปน .bmp, .tif

ไฟลเอกสารตางๆ ที่ผิดพลาด เพราะชื่อไฟลเปนภาษาไทย หรือมีชองวาง

ระบบปฏิบัติการและอื่นๆ ระบบปฏิบัติ Windows ระบบปฏิบัติ UNIX

ขอมูลจาก http://truehits.net/ (วันที่ 14 มิถุนายน 2551)

ตัวอยางขอมูลเครื่องบริการเว็บ (Web Server)

การพัฒนาเว็บเพจ สามารถกระทําไดโดยการใชภาษา HTML ซึ่งมีลักษณะการเขียน

จอภาพโปรแกรม HTML Editor

จอภาพโปรแกรม Yahoo Site Builder

รูปแสดงสวนควบคุมการจัดการเนื้อหาลักษณะตางๆ ของโปรแกรม PHPNuke

การเปรียบเทียบก็ทําไดไมยาก โดยคลิกเลือก CMS ที่ตองการเชน Drupal กับ Joomla

รูปแสดงผลการเปรียบเทียบ CMS จากเว็บไซต cmsmatrix.org

Joomla: CMS เด็ดนาใช

Joomla นับเปน CMS ที่มีความโดดเดนมากโปรแกรมหนึ่ง เนื่องจากรองรับงานที่

รูปแสดงการเลือกใช Joomla, Mambo และ Drupal จากเว็บ trends.google.com

ฟงกชันทํางานในสวน CMS ของ Joomla มีลักษณะเปน Graphics User Interface ทํา

ติดตั้ง Joomla บนพีซีจําลอง

หลายๆ ทานทีส่ นใจใชงาน Joomla คงมีปญหาเกี่ยวกับพื้นที่บริการเว็บ (Web Hosting)

ไฟลที่ดาวนโหลดมาได คือ appserv-win32-2.5.9.exe เมื่อดับเบิลคลิกจะปรากฏสวน

จากจอภาพตอนรับการติดตั้ง AppServ ใหคลิกปุม Next เพื่อเขาสูสวนลิขสิทธิ์

คลิก I Agree เพื่อยอมรับลิขสิทธิ์การใชงานเชนกัน

จอภาพถัดไปคือระบุไดรฟ และโฟลเดอรสําหรับติดตั้ง Appserv โดยโปรแกรม

สวนนี้เปนการเลือกวาจะติดตั้งโปรแกรมใดบาง กรณีนใี้ หคลิกเลือกทุกรายการ แลว

3. การระบุหมายเลขชองทางติดตอ (Apache HTTP Port) มักจะระบุเปนเลข 80

เมื่อกําหนดคาตางๆ แลวก็คลิกปุม Next เพื่อเขาสูสวนกําหนดคาควบคุมของฐานขอมูล

1. กําหนดรหัสผานของการเขาถึงฐานขอมูล MySQL ในรายการ Enter root

Account ชุดแรกที่ตองจําคือ Account ควบคุมฐานขอมูล MySQL โดย User Name คือ

เมื่อระบุคาเกีย่ วกับการเขาถึงฐานขอมูล MySQL แลวใหคลิกปุม Install เพื่อเริ่มติดตั้ง

คลิกเลือก Start Apache และ Start MySQL เพื่อใหโปรแกรมทั้งสองทํางาน จากนัน้

พีซีธรรมดาไดถูกจําลองเปนเครื่องแมขายเว็บแลว ตอนนีก้ ็ถึงเวลาที่จะติดตั้ง Joomla

ไฟลทั้งหมดในโฟลเดอรดังกลาวคือไฟลตน ฉบับของ Joomla ใหคัดลอกโฟลเดอรนี้

ตอนนี้ก็พรอมจะติดตั้ง Joomla โดยเปดเบราวเซอร แลวพิมพคําสั่ง

ขั้นตอนแรกของการติดตั้งคือ การเลือกภาษาของการติดตั้ง โดยสามารถเลื่อนจอภาพ

จากนั้นคลิกปุม Next เพื่อเขาสูการตรวจสอบสิทธิ์การติดตั้ง

ขั้นตอนนี้จะเปนการตรวจสอบสิทธิ์การเขียนลงในไฟล configuration.php และ

เมื่อระบุขอมูลขางตนแลว ก็คลิกปุมถัดไป จะเขาสูสวนกําหนดคา FTP (File Transfer

จากนั้นคลิกปุม ถัดไป เพื่อใหกระบวนการเสร็จสิ้นอยางสมบูรณ ควรลบโฟลเดอร

เว็บไซตตวั อยางของ Joomla ไดติดตัง้ เรียบรอยแลว การเขาสูเว็บไซตเมื่อติดตัง้

Navigation bar Top Menu Search box

ขาวประกาศ หรือ New Flash แสดงขาวประกาศโดยการสุมขาว

Menu Menu ของ Joomla มีหลายหมวด และสามารถเพิ่มไดตามลักษณะ

Read more link Modified date & time Content

Title หัวเรื่องของบทความ สามารถกําหนดใหแสดง/ไมแสดง และเปน

พิมพชื่อโฟลเดอรใหม หากไมสามารถพิมพได ใหกดปุมฟงกชัน @ กอน