1 คู่มือ การทาเวบ็ไซต์หน่วยงาน...

1

คมอ การท าเวบไซตหนวยงาน

ดวยโปรแกรมเวบส าเรจรป Joomla Version 2.5

งานเทคโนโลยสารสนเทศ ศนยการแพทยฯ มศว

คณะแพทยศาสตร มหาวทยาลยศรนครนทรวโรฒ

สารบญ

2

เนอหา หนา - การเขาระบบผดแลเวบ (Administrator) 3 - รจกสวนตางๆของหนาผดแลระบบ Joomla 4 - การเขาสรางชอผเขาใชงานและก าหนดสทธ 6 - การสราง หมวดหม Category 8 - การสราง บทความ,ขาว Content Article 10 - การใสภาพ ลงบทความ 13 - การใสลงค แนบเอกสารดาวโหลด ลงบทความ 16 - การสรางเมน และเชอมตอเมนไปยงบทความ 20 - การใสภาพลงสไลดในหนาหลก และ การปรบขนาดภาพ 23 - การสรางหองภาพกจกรรม Gallery 29

3

การเขาระบบผดแลเวบ (Administrator)

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

เขาพบกบหนา Administrator ใส username และ password ทไดมาหรอสรางแลว กเปนการเขาสระบบเรยบรอย ดงรป

4

รจกสวนตางๆของหนาผดแลระบบ Joomla

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

- User ส ำหรบจดกำรผใชงำนในระบบ จดกลมผใชงำน ก ำหนดสทธในกำรเขำถงหรอแกไขบทควำมขอมลตำงๆ

- Menu ส ำหรบสรำงเมน ทงเมนหลก เมนยอย เปนลงคทำงเชอมตอไปยงบทควำมตำงๆหรอ เวบภำยนอกไดดวย

- Content สวนนส ำหรบสรำง/ลบ/จดกำรบทควำม จดกำรหมวดหมของบทควำมหรอขำว

5

- Components เปนสวนของกำรจดกำรหรอตงคำเครองมอทชวยอ ำนวยหรอสนบสนนกำรท ำเวบไซต ทมำกบระบบหรอตดตงเพมเตม

- Extensions เปนสวนทจดกำรเกยวกบหนำตำรปแบบของเวบไซตเปนหลก plugin module

6

การเขาสรางชอผเขาใชงานและก าหนดสทธ

เขามาทเมน User > User Manager แลวกด ปม + New ตามรป

จะพบหนาฟอรมกรอก รายละเอยดตามน - name ชออะไรกได ภาษาไทยหรอ องกฤษกได

- Login name ภาษาองกฤษหรอตวเลขเทานน - Pass เชนเดยวกบ login name - Confirm password ใสเหมอนกบ password ขางตน - Email ใสเมล ทใชปจจบนทตดตอไดจรง - เอา Registered ออก แตให เลอก Super Users แทน

จากนน บนทก & ปด เพอเซฟ

7

8

การสราง หมวดหม Category

Category หรอ หมวดหม ในการท าเวบไซตดวยจมลาเปรยบเสมอน ต เกบเอกสารหรอแฟมทเกบ ส าหรบแยกประเภท

หรอกลมของเอกสารบทความตางๆ เปนหมวดหม ซงกอนทจะท าการสรางหรอเขยนขาวบทความ จ าเปนตองม

หมวดหมรองรบ บทความขาวทเราเขยนกอน

ขนตอนการสรางหมวดหม

1. ไปคลกเขาเมน “เนอหา” เลอก “การจดการหมวดหม” จะเจอกบหนารายการหมวดหม

2. คลก “สรางใหม” แลวจะเขาหนาตามภาพ

9

3. จะพบกบหนาเวบทท าการกรอก การสรางหมวดหมดงน

- ชอ ใสชอภาษาไทยหรอองกฤษกได ตงชอหมวดหมทตองการ

- เอเลยส หมายถง ชอทค าส าคญและตวชวยท าใหเวบสะดวกตอการจดการหมวดหมแยกประเภทและเรยกการ

ใชงาน จะใสหรอไมใสกได แตตองเปน ภาษาองกฤษหรอตวเลขเทานน - หมวดหมหลก ไมตองเปลยน แตจะใชถาตองการสรางเปนหมวดหมยอยจากหมวดหมหลก

4. เมอใสรายละเอยดครบ คลก บนทกและปด

5. หมวดหมทเราสรางกจะปรากฏอยในรายการ หมวดหมแลว

10

การสราง บทความ,ขาว Content Article

Content Article หรอ บทความ ในระบบจมลา เปนสวนทส าคญหรอเปนองคประกอบทส าคญทสดในการท าเวบดวยจมลา ซงการเขยนบทความ และการใชเครองมอไมยาก เหมอนกบการใชงาน Word Excel office

ขนตอนการสราง Content หรอ บทความ ดงตอไปน

1. เขาไปทเมน “เนอหา” > “การจดการเนอหา” จะปรากฏหนาตางรายการบทความทงหมดดงรป

2. เลอก “สรางใหม” จะเขาหนาส าหรบการเขยนบทความ

11

3. สวนประกอบของการเขยน บทความ คลายกบการสรางหมวดหม จะตางกนเพยงเลกนอย - ชอ ตงชอตามบทความทเราตองการ - เอเลยส ภาษาองกฤษหรอตวเลขเทานนท เกยวของกบบทความเรา หรอจะไมใสกได - หมหมวด จ าเปนตองเลอกใหตรงกบประเภทหมวดหมของบทความ ซงจะมผลตอการแสดงผลในหนาเวบของเรา(ต าแหนงของบทความทเราเขยน จะอธบายในสวนของโมดล)

- ในสวน editor หรอ เครองมอเขยนบทความ จะเหมอนกบ office Word Excel ใชงานไมยากแตจะมสวนบางจดทใชงานส าคญเพมเตมดงน * insert/edit imageปมแทรกภาพ เปนการใสภาพประกอบบทความทเขยน จะอธบายในหวขอถดไป * insert/edit link ปมแทรกลงค เปนการใสลงคหรอเชอมโยงการดาวนโหลด หรอเชอมโยงไปยงเวบอนๆ หวขออน * Fullscreen เปนปมท าใหพนทการท างาน ขยายใหญเตมจอ หากไมใชงานใหกดอกครงจะเปนปกต

12

4. เมอเขยนบทความรายละเอยดครบแลว ให บนทก&ปด

5. บทความเราจะปรากฏขนในรายการ แตถาตองการดหนาตาของบทความทเราเขยน คลกท “ดหนาเวบ” ทมมขวาบน

ตามภาพ

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

13

การใสภาพ แนบเอกสารดาวโหลด ลงค ลงบทความ

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

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

- การ อพโหลดรปภาพ และใสรปภาพ 1. สรางบทความ และเขยนรายละเอยด พรอมใสรปภาพ (หรอจะใสระหวางเขยนกได)

คลกจดทตองการใหภาพไปปรากฏ แลวเลอก Insert / Edit Image

2. ในกรณทเซฟเวอรหรอเวบยงไมมรปภาพทเราตอง ซงภาพอยในเครองของเรา จ าเปนตองท าการ Upload ขนไปท

เซฟเวอรกอน โดยขนตอนตอไปน 2.1 กอนจะอพรปใดๆควรตองมการเกบภาพลงใน Folder หรอแฟม เพอใหเปนระเบยบและงายตอการคนหาใชงานภาพ ฝงซายทเปนแถบของ “Folder” (ตามรป) จะม Folder อย

* ในกรณทไมม Folder ไวจดเกบตามตองการ ตองการสรางใหม คลกเลอก Root แลวคลกเลอก ตามรป

14

จะแสดงหนาตางตามภาพใสชอของ Folder ในชอง Name ตองเปนภาษาองกฤษหรอตวเลขเทานน แลวกด OK จะปรากฏ Folder ตามรป

* คลกเลอก Folder ทสรางหรอทมอยเพอตองการอพโหลด และกด Upload จะแสดงหนาตางใหมส าหรบการ Upload คลก Browse เลอกภาพทตองการ Upload สามารถอพทละหลายภาพกได เมอไดภาพทตองการจะมรายการภาพทเราเลอกขนมา แลวให กด Upload

ภาพทไดจะปรากฏใน Folder ทเราท าการ Upload แลว

15

2.2 คลกเลอกภาพทเราตองการ (เลอกไดทละภาพ) ชอง Url ทอยดานบนจะปรากฏขอความต าแหนงของไฟลภาพ กด Insert เพอท าการใสภาพ

ภาพจะไปปรากฏบนพนทเขยนบทความ ซงอาจจะมขนาดใหญเกนไป สามารถปรบขนาดภาพไดเองเหมอนกบระบบ office

16

กำรใส Link หรอแนบไฟลเอกสำร ส ำหรบกำร Download หรอไปหนำเวบอนๆ

1. ท าการลากคลมขอความ (ใหเปนสฟาคลม) หรอคลกทภาพทตองการสราง Link

2. จากนนคลกเครองมอ Insert/edit Link (รปโซ ขางปมใสภาพ) จะแสดงหนาตางขนมาตามรป คลกปม Browse ตามลกศร หากตองการ link กบไฟล แตถาหากท า Link ออกไปภายนอก ใหพมใสในชอง url ไดเลยเชน www.google.co.th

17

3. จะปรากฏหนาตางตามรป ซงเราตองท าการอพโหลดไฟลทตองการหากไมมบนเซฟเวอร วธการจะเหมอนกบการอพโหลดรป กรณไมม Folder ไวจดเกบ คลกฝงซาย Folder เลอก Root แลวคลก new folder ตามภาพ

ใสชอของ Folder ตามใจ *หามเปนภาษาไทยเดดขาด แลว ok

4. เมอม Folder แลว คลก Folder ทตองการ แลวคลกปม upload ตามภาพ

18

5. จะแสดงหนาตางตามภาพ กด Browse เลอกไฟลทตองการ แลวกดปม upload ตามล าดบ ดงรป

6. คลกเลอกไฟลทอพโหลดมาแลว (อยชองกลาง) แลวกดปม Insert ตามรป

19

7. ถาไฟลทคลกเลอกมา ชอง url ดานบนจะแสดงขอความของต าแหนงไฟล ใหกดปม Insert

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

20

การสรางเมน และเชอมตอเมนไปยงบทความ

เมนหลกเปนเมนส าหรบลงคเชอมไปยงหวขอหรอสวนส าคญเกยวกบเวบหนวยงานของเรา วธการสรางเมนและการเชอมโยงดงน 1. เลอกเมน “เมน” > “Main Menu” จะเขาหนา การจดการเมน

21

- 2. กดปม สรางใหม จะขนหนาตางส าหรบสรางเมนใหม

อนดบแรก ตองเลอกชนดของเมนกอน คลกตามรป จะปรากฏหนาตางลอยใหเลอกประเภทของเมน ใหเลอก “เนอหาเดยว”

3. เมอเลอกชนดเมนแลว ฝงขวา ในสวน การตงคาทตองการ ตรงสวน เลอกเนอหา ใหกดปม เลอก/เปลยน

22

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

4. กรอกรายละเอยดของเมนตามรป

เมอกรอกครบ กดปม บนทก&ปด เพอบนทกเมน คลก ดหนาเวบ เพอดการบนทก

23

กำรใสภำพลงสไลดในหนำหลก สวนประกอบเวบหนวยงานนทส าคญและเปนจดเดน คอ สไลดภาพ เปนจดทแสดงภาพกจกรรมหรอการประชาสมพนธของเวบไซตเรา กอนทจะใสภาพลงสไลด ตองมการเตรยมภาพใหมขนาดเหมาะสมกบสไลดกอน ซงตองมการใชโปรแกรม Photoshop หรอ acdsee ในการปรบแตภาพ แตใน ทนจะสอนวธการใชโปรแกรม Photoshop

- การสรางและปรบขนาดภาพดวยโปรแกรม Photoshop 1. เปดโปรแกรม Photoshop ขนมา แลวไปเมน File > Open แลวเลอกภาพทตองการ

2. ไปทเมนอกครง File > New.. จะปรากฏหนาตาง เลอกและตงคาใหตรงตามรป

24

3. เลอกเครองมอ Move Tool ดงรป จากนนคลกลากรปทเราตองการขามกรอบ มายงกรอบวางอกอนทได

สรางไว

4. ยอหรอขยายภาพใหเหมาะสมพอดกบกรอบพนท โดย กดปมบนคบอรด Ctrl+T หรอกดทเมน Edit>Free Transform เมอกดแลวรปทลากมา จะแสดงกรอบและสเหลยมเลกๆเพอใหคลกลากและปรบขนาด ปรบตามความเหมาะสมและควรใหภาพดสมสวน หากพอใจแลวให กดปม Enter ท keyboard สามารถใชเครองมอ Move Tool เลอนต าแหนงของภาพใหตรงเหมาะสมตามใจ

25

5. เมอปรบภาพหรอสงตางๆตามใจและเหมาะสมแลว ท าการบนทก โดยท ไปท เมน File > save As… ตงชอภาพตามใจ ตองเปนภาษาองกฤษหรอตวเลขเทานน และปรบคานามสกลไฟล เปน JPEG และคลก Save กจะไดภาพทขนาดพรอมใชงาน

26

- กำรใสภำพลงสไลด 1. ไปทเมน สวนเสรม > การจดการโมดล จะมา หนาการจดการโมดล

2. ทแถบ เลอกต าแหนง ใหเลอก zt-position1 รายการโมดลจะถกคนหาเหลอเทาทเราจ ากด คลกเลอก โมดลทชอ ZT Headline ตามรป

27

3. จะมาทหนาโมดลส าหรบจดการสไลดภาพ ฝงขวาจะมแทบสเทาจาง คลกท Content Option จะแสดง ภาพทอยในสไลด

กดปม ADD NEW SLIDE

4. จะปรากฏหนาการใสรปภาพ ใสคาตางๆตามภาพ เมอครบแลว กดปม Save

*เมอกดปม Image ใหดหวขอ การ Upload ในขอถดไป

28

5. เมอกดปม image จะปรากฏหนาตางลอย เพอท าการเลอกภาพ ในกรณทไมมภาพบน Server 1. ใหคลกเลอก Folder “slide” 2.แลวกดปม เลอกไฟล เลอกภาพทตองการ 3.กด เรมอพโหลดท าการอพโหลดไฟลภาพ 4.เมอภาพอพโหลดแลว เลอกภาพทตองการ คลกปม “เพมในเนอหา” ต าแหนงของไฟลภาพจะไปปรากฏในชอง

- เมอกด Save แลว ตองการท าการ กดปม บนทก&ปด ทอยดานขวาบน (รวมเปนการเซฟบนทกสองครง)

Option Tool อนๆ ส าหรบจดการภาพสไลด ดงรป

29

การสรางหองภาพกจกรรม Gallery

การสรางแกลอรหองภาพในจมลา จะใชเครองมอปลกอนทชอวา Phoca Gallery ซงการใชงานจะไมตางกบการอพรปทผานมา กอนอนตองรจกกบสวนประกบตางๆใน Phoca กอน วธเขาและจดการ Phoca Gallery 1. ไปทเมน คอมโพเนนท > Phoca Gallery แลวจะพบกบหนา Control Panel ของ Phoca

2. กอนจะอพรปใดๆ เราตองมการจดหมวดหมกลมของภาพดวย วธการสราง หมวดหมคลายกบในการสรางหมวดหมบทความดงน กด ปม categories ตามรป

30

3. จะเขามาทหนา Categories แลวกดปม สรางใหม มมขวาบน

4. ตงชอและใสรายละเอยดตามรป (เหมอนกบการใสหมวดหมในหวขอกอนหนาน)

5. กรอกครบแลว กด บนทก&ปด เปนการสรางหมวดหม Categories เรยบรอย

>>

31

6. เมอสรางหมวดหมเรยบรอยแลว กตองน าภาพมาอพใสไปในหมวดหม ใหกดปม Images (ในหนา Cotrol panel หรอ ทเมนของ Phoca กได) จะเขามาหนาการจดการรปภาพของ Phoca

7. กดปม สรางใหม หรอ Multiple Add สรางใหมจะเปนการ อพโหลดทละภาพ แต Multiple จะเปนการอพทละหลายภาพในทเดยว แตในทนจะท าการอพทละหลายๆภาพ ใหเลอก Multiple Add

32

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

9. เมอสรางโฟลเดอรเสรจแลว กท าการอพโหลดตอ ดงตอไปน และภาพประกอบ 9.1 เลอกแถบ Multiple Upload 9.2 กดปม Add Image จะปรากฏหนาตาง เลอกภาพทอยในเครองเพอท าการอพโหลดสามารถอพทหลายๆไฟลไดโดย การกด ปม Ctrl คางแลวคลกเลอกทละรป เมอไดครบแลว กด Open 9.3 รปทเลอกจากแสดงรายการตามภาพ 9.4 กดปม Start Upload เพอท าการอพโหลดภาพทงหมด

33

10. เมอท าการอพโหลดรปครบแลว รปจะยงไมไดถกใชงานทนท ใหกรอกรายละเอยดดงตอไปน - Title ใสชอหวขอของกลมภาพ ภาษาไทย ภาษาองกฤษ กได - Alias ไมตองใสหรอใสกได แตตองเปนภาษาองกฤษหรอตวเลขเทานน - Category ใหเลอกตาม หมวดหมทเราตองการทเราสรางไว

11. เมอกรอกรายละเอยดครบ ให กด บนทก&ปด รอการประมวลผลหากภาพจ านวนมากตองใชเวลามาก

34

12. ภาพทโหลดจะปรากฏเปนรายการดงรป และสามารถเขาไปด แกลอรหองภาพ ทเมน ภาพกจกรรม