Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
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. ภาพทโหลดจะปรากฏเปนรายการดงรป และสามารถเขาไปด แกลอรหองภาพ ทเมน ภาพกจกรรม