เอกสารประกอบการอบรม โครงการอบรมเชงปฏบตการดานไอทส าหรบบคลากรสายสนบสนนประจ าปงบประมาณ 2556

กจกรรมท 4 สรางเวบไซตดวย Rmutto Template Website II

วนท 14 - 15 ตลาคม 2556

บทน า

รจกเวบไซต

เวบไซต (Website) หมายถง แหลงความรหรอขอมลขาวสารทถกเกบไวบนระบบ

เนตเวรก (Network) ออนไลน (Online) ทเรยกวา อนเตอรเนต (Internet) ไมวาคณจะ

อยทใดบนโลกนถา คอมพวเตอร (Computer) ของคณไดถกเชอมตอไวกบระบบ

อนเตอรเนต คณกสามารถทจะเขาชมเวบไซตผานทางซอฟตแวร (Software) ทเรยกวา เวบ

เบราวเซอร (Web Browser) ได

เราจะเรยกเวบแตละเวบวา โฮมเพจ (Homepage) และจะเขาโฮมเพจผานทาง

เวลดไวดเวบ (World Wide Web, WWW, W3) เชน การจะเขาเวบไซต กเกล ดอท คอม

เรากจะพมพ www.google.com ในชอง address แลวกด Enter เพอเขาสเวบไซต และ

เรยกชอดงกลาววา URL หรอชอของเวบนนเอง

เราสามารถเรยกเวบไซตไดหลายแบบ ทมกพบในภาษาไทย เชน เวบไซต เวบ-ไซด

เวบ เวบเพจ ซงมความหมายเดยวกน และทใชในภาษาองกฤษ เชน Website, Web Site,

Web, Web Page เปนตน

เวบส าเรจรป (Web template) คออะไร

ความหมายโดยทวไปของ เวบส าเรจรป คอ “บรการเวบไซตส าเรจรปหรอเวบไซต

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

ได”

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

เวบไซตเสรจเทานน อยาลมวาเวบไซตทดคอเวบไซตทไมมวนสรางเสรจ ภารกจยงไมหมด

ภารกจตอไปหลงจากทสรางเวบไซตเรยบรอยแลวเปนภารกจทส าคญมากๆ ภารกจหนง นน

คอ การโปรโมทเวบไซตหรอโฆษณาเวบไซตทสรางขนมาใหเปนทรจกของสาธารณชนทวไป

ผคนเขาถงงาย เวบไซตอยในโลกมดหรออกโลกหนงทเรยกกนวาโลกออนไลนนนเอง ถาไม

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

ทสด ถงแมจะใชเงนทนสรางจ านวนมากมายกตาม

ในปจจบนมผใหบรการเวบไซตจ านวนมาก ซงประเภทการใหบรการเวบไซตนน

สามารถแบงไดเปน 2 ประเภท ดงน

ประเภทรบจางเขยนโปรแกรมสรางเวบไซต ผรบจางตองมความรในการ

เขยนโปรแกรมเปนอยางด

สวนอกประเภทหนงทก าลงมาแรงในปจจบนกคอผใหบรการเวบไซตส าเรจรป

หรอเวบไซตอตโนมต

เวบไซตอตโนมต ปจจบนมผใหบรการเวบไซตประเภทนมากขนเรอยๆ ทงสวน

บคคลและบรษท ในการเลอกใชบรการเวบไซตตองค านงถงหลายๆ ดาน ทงในสวนผ

ใหบรการเองวาเปนมออาชพมากนอยเพยงใด เพอความมนคงในระยะยาวแนะน าใหใช

บรการทเปนนตบคคลทใหบรการมานาน เพราะถาคดเลอกผใหบรการเวบไซตผดเทากบ

ลมเหลวไปลวงหนาสวนหนงแลว

เวบไซตในปจจบนม 2 รปแบบ ดงน

1. เวบไซตทเขยนขนเองโดยใชโปรแกรม html และโปรแกรมอนๆ ผสมผสานกน

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

ท าได ขอด กคอสามารถสรางไดตามความตองการยดหยนสง

2. เวบไซตส าเรจรปหรอเวบไซตอตโนมต ซงเปนบรการเวบไซตทถกสรางขนมาเพอ

อ านวยความสะดวกกบผทตองการมเวบไซตเปนของตนเอง แตเขยนโปรแกรมสรางไมเปน

นกโปรแกรมเมอรจงไดสรางรปแบบทส าเรจรปหรอโปรแกรมอตโนมตในการสรางเวบไซตวาง

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

อตโนมต ผกรอกขอมลไมตองเขยนโปรแกรมใหยงยากล าบากใจ ทกๆ คนทมพนฐานทาง

คอมพวเตอรบางเลกนอยกสามารถท าไดแลว

บรการเวบไซตส าเรจรปแตละเจาของกมรปแบบหรอฟงกชนไมเหมอนกน ความยาก

งายหรอสลบซบซอนในการสรางกแตกตางกนออกไป ซงเราไดค านงถงจดนจงไดท าการ

พฒนาบรการเวบไซตส าเรจรปทดทสด โดยใหความส าคญกบ

1. รปแบบเวบไซตท าไดงายไมสลบซบซอน

2. รบขอมลสอดคลองกบเสรชเอนจนไดด มระบบรองรบการตดตอขอมลใน

Google เราค านงถงสงเหลาน เพอใหผใชไดสงทดทสด

3. รปแบบของเวบไซตส าเรจรปตองประยกตไดงาย เนนความสวยงาม ไมชา ไม

แขงจนเกนไป

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

ใหบรการเวบไซตส าเรจรป หรอเวบไซตอตโนมตส าหรบลกคาทกๆคน ซงบรการเวบไซต

ส าเรจรป (Web template) ของเราทกๆทานจะสามารถสรางเวบไซตดวยมอของทานเอง

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

โปรแกรมแตประการใด เพยงมความรพนฐานเกยวกบคอมพวเตอรเลกนอยกพอแลว

บรการเวบไซตส าเรจรปสามารถท าไดตลอดเวลา สะดวก งาย และรวดเรว สามารถ

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

และพาสเวรดกสามารถเขาไปสรางเวบไซตไดแลว

เหตผลทเราเลอกบรการเวบไซตส าเรจรปใหทกทานกเพอใหทกทานสามารถสราง

เวบไซตไดดวยตวของทานเอง บรหารและจดการตางๆดวยตวเอง ซงจะสงผลใหทานเกด

ทกษะตางๆรวมถงมความเชยวชาญมากขนตามกาลเวลา ในอนาคตทานกจะเชยวชาญในเรอง

เวบไซตโดยอตโนมต

ขอดและขอเดนของบรการเวบไซตส าเรจรปหรอ Web template

1) คณไมจ าเปนตองมความรอบรในคอมพวเตอรมากมายกสามารถท าไดอยาง

งายดาย

2) ท าไดรวดเรวดงใจ ภายในไมกนาท

3) ไมยงยากและสลบซบซอนหลายขนตอนเหมอนกรณทวๆไป

4) ท าไดจากเครองคอมพวเตอรออนไลนไดทวโลกตลอดเวลา 24 ชม. ไมตองใช

โปรแกรม ftp ใหยงยากและวนวาย

5) ทกๆคนสามารถท าไดอยางงายดาย

6) ท าไดดวยตวเองตลอดเวลา

ขอเสยของการใชเวบไซตส าเรจรป

บางธรกจตองการความเปนสวนตว หรอระบบเฉพาะงาน ทเวบไซตส าเรจรปอาจม

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

ฉะนนการเลอกใชเวบไซตส าเรจรป จงควรค านงถงความจ าเปนและระบบตางๆ ทเรา

ตองการใหดเสยกอน หากธรกจของเราตองการระบบการจดการขอมลทเรยบงาย ธรรมดา

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

หากเปนเวบไซตขนาดใหญทตองการความเปนเอกลกษณเฉพาะตว หรอตองการสรางความ

ไดเปรยบทางดาน SEO (Search Engine Optimization) หรอการตลาดบนระบบเครอขาย

Internet ดวยแลว การเลอกปรกษาและวางแผนในการจดท าเวบไซตกบผเชยวชาญเฉพาะ

ดานถอเปนทางออกทดทสดอกทางส าหรบการลงทนทางเวบไซตเลยทเดยว

การออกแบบเวบเพจ (Page Design)

สวนประกอบของหนาเวบเพจแบงออกเปน 3 สวนหลกๆ คอ

1. สวนหวของหนา (Page Header) เปนสวนทอยตอนบนสดของหนา และเปนสวน

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

กราฟฟกเพอสรางความประทบใจ สวนใหญประกอบดวย

โลโก (Logo) และ ไตเตล (Title) เปนสงทเวบไซตควรม เพราะทงสองสงน

เปนตวแทนของเวบไซตไดเปนอยางด และยงท าใหเวบไซตนาเชอถอ

ชอเวบไซต

เมนหลกหรอลงค (Main Menu) เปนจดเชอมโยงไปสเนอหาของเวบไซต

แบนเนอร ( Banner ) เปนสวนทใหประกาศขาวดวน ขาวใหม ท าเพอใหผท

เขามาชมเวบไซตไดเหนขาวไดงายขน โดยทวไปผทจะน าขาวมาลงตองไปท า

แบนเนอรใหมขนาดตามทระบบก าหนดกอนแลวเซฟขอความทท ามาเปน

รปภาพกอน แลวคอยน ามาลงในระบบ

2. สวนของเนอหา (Page Body) เปนสวนทอยตอนกลางของหนา ใชแสดงขอมล

เนอหาของเวบไซต ซงประกอบดวยขอความ ตารางขอมล ภาพกราฟก วดโอ และอนๆ และ

อาจมเมนหลก หรอเมนเฉพาะกลมวางอยในสวนนดวย

ส าหรบสวนเนอหาควรแสดงใจความส าคญทเปนหวเรองไวบนสด ขอมลมความ

กระชบ ใชรปแบบตวอกษรทอานงาย และจด Layout ใหเหมาะสมและเปนระเบยบ

3. สวนทายของหนา (Page Footer) เปนสวนทอยดานลางสดของหนา จะม

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

เกยวกบเนอหาภายในเวบไซต เชน เจาของเวบไซต ขอความแสดงลขสทธ วธการตดตอกบ

ผดแลเวบไซต ค าแนะน าการใชเวบไซต เปนตน

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

ตวอยาง แสดงสวนประกอบของหนาเวบไซต

โลโก และ ไตเตล ( Logo and Title )

สวนหว (Header)

ปมเปลยนภาษา (Language)

สวนทาย (Footer)

แบนเนอร (Banner)

เมนยอย (SubMenu)

พนหลง (Background)

เมนหลก (MainMenu)

บทท 2

การใชงานหนา Login Template

ในบทนจะสอนในการใชงานโปรแกรม RMUTTO Template Design จะมขนตอน

ตางๆมากมายในขนตอนแรกจะเขาสระบบ Login ในโปรแกรม RMUTTO Template

Design โดยใหผเขารวมอบรมพมพ ตามน www.rmutto.ac.th/webtemplate/template

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

โดยใชโปรแกรม RMUTTO Template Design จะตองพมพ

www.rmutto.ac.th/person/template แตในตวอยางจะใช

www.rmutto.ac.th/webtemplate/template เพอใหเขาใจตรงกน

1. หนา Login RMUTTO Template Design

รปท 2.2 หนา Login RMUTTO Template Design

1. พมพ www.rmutto.ac.th/webtemplate/template ในชอง Address bar

2. พมพ User และ Password อนเดยวกบอเมลของมหาวทยาลย

3. เมอกรอกขอมลครบแลวใหคลกปม “เขาสระบบ” ถากรอกขอมลถกตองจะ

ปรากฏหนาตางดงรป 2.3 ใหกดปมตกลง จากนนจะปรากฏหนาตางดงรป 2.4 ขนมา

รปท 2.3 แสดงการเขาสระบบเรยบรอยแลว

2. หนาเลอกหนวยงาน

รปท 2.4 หนาเลอกหนวยงาน

ใหเลอกหนวยงานของตนเอง จากนนกดปมเลอก ถาเลอกหนวยงานผดจะเขา

ระบบไมได แตถาเลอกหนวยงานถกจะปรากฏหนาตางดงรป 2.5

3. หนาเมนหลก

รปท 2.5 หนาเมนหลก

ในหนานประกอบดวย 3 เมนหลกคอ

1. หนาออกแบบ Template (รายละเอยดอยในบทท 3)

2. หนาจดการขอมลขาวสาร (รายละเอยดอยในบทท 4)

3. หนาฝากไฟลขอมล (รายละเอยดอยในบทท 5)

4. คมอการใชงาน ส าหรบใหผใชดาวนโหลดคมอการใชงาน RMUTTO

Template Website II

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

บทท 3

หนาออกแบบ Template

หนาออกแบบ Template จะอธบายในเรองการออกหนาเวบไซตในสวนตางๆ เชน

รปแบบเวบไซต (Layout) สวนหวเวบไซต (Header) สวนทายเวบไซต (Footer) และ

พนหลง (Background) เปนตน ดงรปท 3.1

1. หนาออกแบบ Template

รปท 3.1 แสดงหนาออกแบบ Template ส าหรบเวบไซตภาษาไทย

รปท 3.2 แสดงหนาออกแบบ Template ส าหรบเวบไซตภาษาองกฤษ

1. ในสวนของปมเปลยนภาษา ใหกดปม “ภาษาไทย” เมอตองการออกแบบ

เวบไซตทเปนภาษาไทย จะปรากฏหนาตางดงรปท 3.1 และกดปม “English” เมอ

ตองการออกแบบเวบไซตทเปนภาษาองกฤษ จะปรากฏหนาตางดงรปท 3.2

2. กดปม “กลบสเมนหลก (Main Menu)” เมอตองการกลบสเมนหลก จะ

ปรากฏหนาตาง ดงรปท 2.5

3. กดปม “ออกจากระบบ (Logout)” เมอตองการออกจากระบบ

4. กดปม “รปแบบเวบไซต (Layout)” เมอตองการจดการกบธม (Theme)

และหนาเพจ (Page) ดงรปท 3.3

5. กดปม “สวนหว (Header)” เมอตองการจดการกบสวนหว (Header) ไต

เตล (Title) และโลโก (Logo) ดงรปท 3.5

6. กดปม “เมนหลก (Main menu)” เมอตองการจดการกบเมนหลก (Main

menu) ทง 4 ระดบ ดงรปท 3.9

7. กดปม “เมนยอย (Sub menu)” เมอตองการจดการกบเมนยอย (เมนยอย

(Sub menu) คอ เมนทวางอยดานซายหรอดานขวาของเวบไซต) ดงรปท 3.15

8. กดปม “ปายโฆษณา (Banner)” เมอตองการจดการกบปายโฆษณา

(Banner) ดงรปท 3.18

9. กดปม “สวนทาย (Footer)” เมอตองการจดการกบสวนทายของเวบไซต

(Footer) ดงรปท 3.19

10. กดปม “พนหลง (Background)” เมอตองการจดการกบพนหลง

(Background) ดงรปท 3.21

11. กดปม “ดาวนโหลด (Download)” เมอตองการจดการกบไฟลส าหรบ

ดาวนโหลด (Download) ดงรปท 3.23

2. หนารปแบบเวบไซต (Layout)

ในหนานจะแบงการจดการออกเปน 2 สวนคอ ธม (Theme) และหนาเพจ (Page)

2.1 ธม (Theme) คอรปแบบเวบไซตส าเรจรปทผใชตองเลอกน าไปใช ถาผใชไม

เลอกธมใดๆ เลยระบบจะท าการก าหนดคาใหเปนธมพนฐาน ดงรปท 3.3

รปท 3.3 หนาจดการรปแบบเวบไซต (Layout)

2.1 หนาเพจ (Page) คอสวนทใหผใชเลอกการจดวางเมนยอย สตวอกษร ส

ตวอกษรทเปนลงค สตวอกษรเมอเมาสเลอนผาน สตวอกษรเมอถกคลกไปแลว และส

ตวอกษรเมอแอคทฟ ดงรปท 3.3 (ตอ)

รปท 3.3 (ตอ) หนาจดการรปแบบเวบไซต (Layout)

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

ดงรปท 3.4 ใหกดปม “ตกลง” เพอเสรจสนกระบวนการบนทกขอมล

รปท 3.4 แสดงขอความเมอแกไขขอมลเรยบรอยแลว

3. หนาสวนหวเวบไซต (Header)

ในหนานจะแบงออกเปน 3 สวน คอ สวนหว (Header) ไตเตล (Title) และโลโก

(Logo)

3.1 สวนหว (Header)

รปท 3.5 แสดงหนาสวนหว (Header) ในสวนของสวนหวเวบไซต

3.1.1 กดปม “เลอกไฟล” เพอเลอกรปภาพมาท าเปนสวนหวของเวบไซต

โดยทรปภาพทเลอกนนจะตองมขนาดกวาง 1000 pixel เทานน สวนความสงเทาใดกได

ดงรปท 3.5

หมายเหต หากเลอกอพโหลดรปภาพสวนหว จะไมสามารถใชรปแมแบบสวนหว

เวบไซตได

3.1.2 เลอกแมแบบสวนหวเวบไซต ซงมแมแบบใหเลอกใชถง 18 แบบ

ดวยกน ในกรณทไมตองการใชแมแบบสวนหวเวบไซตใหเลอก “ไมใชแมแบบสวนหว

เวบไซต” ดงรปท 3.5

รปท 3.5 (ตอ) แสดงหนาสวนหว (Header) ในสวนของสวนหวเวบไซต

3.1.3 พมพขอความสวนหวเวบไซต ในชองขอความสวนหวเวบไซต โดย

สามารถจดรปแบบไดเหมอนกบการจดเอกสาร Word ทวไป ดงรปท 3.6

3.2 ไตเตล (Title)

รปท 3.6 แสดงหนาสวนหว (Header) ในสวนของสวนไตเตล

พมพขอความในสวนของไตเตลเวบไซต ลงในชอง ขอความ Title Web ดงรปท

3.6

3.3 โลโก (Logo)

รปท 3.7 แสดงหนาสวนหว (Header) ในสวนของโลโก (Logo)

3.3.1 กดทปม “เลอกไฟล” เพอเลกรปภาพมาท าเปนโลโกของเวบไซต

โดยรปภาพทเลอกมานนจะตองเปนไฟล .ico เทานน

3.3.2 กดทรป เพอลบรปโลโก

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

ดงรปท 3.8 ใหกดปม “ตกลง” เพอเสรจสนกระบวนการบนทกขอมล

รปท 3.8 แสดงขอความเมอแกไขขอมลเรยบรอยแลว

4. หนาเมนหลก (Main menu)

ในหนานจะแบงเมนออกเปน 4 ระดบ ดงน

4.1 เมนหลกระดบท 1

รปท 3.9 แสดงหนาเมนหลก (Main Menu) ในสวนของเมนหลกระดบท 1

4.1.1 พมพชอเมนในชอง ชอเมน

4.1.2 กดปม “บนทก” เมอพมพชอเมนเรยบรอยแลว จากนนจะปรากฏ

กลองขอความ ดงรปท 3.10 ใหกดปม “ตกลง” เพอเสรจสนกระบวนการบนทกขอมล

จากนนชอเมนทสรางจะมาปรากฏอยในตารางดานลาง

รปท 3.10 แสดงกลองขอความเมอบนทกขอมลเรยบรอย

4.1.3 ใหกดทรป หลงชอเมน จะปรากฏหนาตางดงรปท 3.11

ขนมา

รปท 3.11 แสดงหนาเมนหลก (Main Menu) ในสวนของการแกไขเมน

- เลอกประเภทของเมน โดยจะมใหเลอก 2 ประเภทคอ 1. สรางหนา

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

- ในกรณทประเภทของเมนเปนลงค ใหผใชใส URL ทจะลงคไปในชอง

Link to url

- ในกรณทประเภทของเมนเปนสรางหนา ใหผใชใสรายละเอยดทตองการ

แสดงในหนาลงในชอง รายละเอยด

- ใหกดทปม “บนทก” เมอกรอกขอมลครบถวนแลว และกดทปม

“ยกเลก” เมอตองการยกเลกการบนทกขอมล

- กดปม “ยอนกลบ” เมอตองการยอนกลบไปยงหนาสรางเมนหลก

4.2 เมนหลกระดบท 2, 3 และ 4

เมนหลกระดบท 2, 3 และ 4 จะมลกษณะในการจดการทเหมอนกนแตจะ

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

เมนหลกระดบท 1 สวนเมนหลกระดบท 3 จะเปนเมนยอยของเมนหลกระดบท 2 และ

เมนหลกระดบท 4 จะเปนเมนยอยของเมนหลกระดบท 3 ตามล าดบ

รปท 3.12 แสดงหนาเมนหลก (Main Menu) ในสวนของเมนหลกระดบท 1, 2, 3 และ 4

4.1.1 เลอกวาเมนทสรางนเปนเมนยอยของเมนหลกใด ในชองเปนเมนยอย

ของเมน

4.1.2 พมพชอเมนในชอง ชอเมน

4.1.3 กดปม “บนทก” เมอพมพชอเมนเรยบรอยแลว จากนนจะปรากฏ

กลองขอความ ดงรปท 3.13 ใหกดปม “ตกลง” เพอเสรจสนกระบวนการบนทกขอมล

จากนนชอเมนทสรางจะมาปรากฏอยในตารางดานลาง

รปท 3.13 แสดงกลองขอความเมอบนทกขอมลเรยบรอย

4.1.3 จากนนเมอบนทกเรยบรอยแลว ใหกดทรป หลงชอเมน จะ

ปรากฏหนาตางดงรปท 3.14 ขนมา

รปท 3.14 แสดงหนาเมนหลก (Main Menu) ในสวนของการแกไขเมนหลกระดบท 2, 3

และ 4

- เลอกประเภทของเมน โดยจะมใหเลอก 2 ประเภทคอ 1. สรางหนา

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

- ในกรณทประเภทของเมนเปนลงค ใหผใชใส URL ทจะลงคไปในชอง

Link to url

- ในกรณทประเภทของเมนเปนสรางหนา ใหผใชใสรายละเอยดทตองการ

แสดงในหนาลงในชอง รายละเอยด

- ใหกดทปม “บนทก” เมอกรอกขอมลครบถวนแลว และกดทปม

“ยกเลก” เมอตองการยกเลกการบนทกขอมล

- กดปม “ยอนกลบ” เมอตองการยอนกลบไปยงหนาสรางเมนหลก

5. หนาเมนยอย

ในหนานจะแบงออกเปน 2 สวนคอ สวนทสรางชอหวขอเมน และสวนทสรางเมน

ยอยในหวขอเมน

รปท 3.15 แสดงหนาเมนยอย

5.1 หนาสรางหวขอเมน

5.1.1 พมพชอหวขอเมน ในชองชอหวขอเมน

5.1.2 กดปมบนทก เมอกรอกขอมลครบถวนแลว จากนนจะปรากฏกลอง

ขอความ ดงรปท 3.16 ใหกดปม “ตกลง” เพอเสรจสนกระบวนการบนทกขอมล จากนน

ชอเมนทสรางจะมาปรากฏอยในตารางดานลาง

รปท 3.16 แสดงกลองขอความเมอบนทกขอมลเรยบรอย

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

ในหวขอเมนน จะปรากฏหนาตางดงรปท

5.1.4 กดทรป เมอตองการแกไขชอหวขอเมน ซงเมอกดแลวขอมล

จะปรากฏในชองชอหวเมน ใหท าการแกไขและกดปมบนทกเปนสนการแกไขขอมล

5.1.5 กดทรป เมอตองการลบชอหวขอเมน ซงถาลบชอหวขอเมนจะ

ท าใหเมนยอยทอยในหวขอเมนนนๆ ถกลบไปดวย

5.2 หนาสรางเมนยอยในหวขอเมน

รปท 3.17 แสดงหนาสรางเมนยอยในหวขอเมน

5.2.1 เลอกประเภทของเมน โดยจะมใหเลอก 2 ประเภทคอ 1. สราง

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

อน

5.2.2 ในกรณทประเภทของเมนเปนลงค ใหผใชใส URL ทจะลงคไปใน

ชอง Link to url

5.2.3 ในกรณทประเภทของเมนเปนสรางหนา ใหผใชใสรายละเอยดท

ตองการแสดงในหนาลงในชอง รายละเอยด

5.2.4 ใหกดทปม “บนทก” เมอกรอกขอมลครบถวนแลว และกดทปม

“ยกเลก” เมอตองการยกเลกการบนทกขอมล จากนนเมนทสรางจะปรากฏในตาราง

ดานลาง

5.2.5 ในตารางดานลาง หากตองการแกไขเมนใดใหกดทรป หลง

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

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

เชนกน

6. หนาปายโฆษณา (Banner)

รปท 3.18 แสดงหนาปายโฆษณา (Banner)

1. กดท “เลอกไฟล” เพอเลอกรปภาพส าหรบท าเปนปายโฆษณา (Banner)

ซงรปภาพทเลอกนนจะตองมขนาด (กวาง * ยาว) 650 * 300 pixels เทานน

2. พมพ URL ทตองการใหลงคไป ในชอง Link to url

3. กดปม “บนทก” เมอกรอกขอมลครบถวนแลว และกดปม “ยกเลก” เมอ

ตองการยกเลกการบนทกขอมล

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

ตองการแกไขใหกดทรป จากนนขอมลจะปรากฏในชองดานบนใหท าการแกไขและกด

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

โฆษณา

7. หนาสวนทายเวบไซต (Footer)

รปท 3.19 แสดงหนาสวนทายเวบไซต (Footer)

1. กดทปม “เลอกไฟล” เพอเลอกรปภาพส าหรบท าเปนสวนทายเวบไซต ซง

รปภาพทเลอกจะตองมขนาดกวาง 1000 pixels สงเทาใดกได

2. เลอกสสวนทายเวบไซต ในชองสสวนทายเวบไซต

หมายเหต หากมการเลอกรปภาพส าหรบท าเปนสวนทายเวบไซตไว จะไมสามารถใชส

สวนทายเวบไซตได

3. พมพขอความสวนทายเวบไซต ในชองขอความสวนทายเวบไซต โดย

สามารถจดการกบขอความไดเหมอนกบการจดเอกสาร Word ทวไป

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

ขอความ ดงรปท 3.20 ใหกดปม “ตกลง” เพอใหเสรจสนการบนทกขอมล

รปท 3.20 แสดงกลองขอความเมอแกไขขอมลเรยบรอย

8. หนาพนหลง (Background)

รปท 3.21 แสดงหนาพนหลง (Background)

1. กดทปม “เลอกไฟล” เพอเลอกรปภาพส าหรบท าเปนสวนทายเวบไซต ซง

รปภาพทเลอกจะตองมขนาดกวาง 1500 pixels ขนไป สงเทาใดกได

2. เลอกแมแบบพนหลง ซงมใหเลอกใชงานถง 9 แบบ แตถาไมตองการใช

แมแบบพนหลงใหเลอก “ไมใชแมแบบพนหลง”

3. เลอกสพนหลง ในชองสพนหลง

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

ขอความ ดงรปท 3.22 ใหกดปม “ตกลง” เพอใหเสรจสนการบนทกขอมล

รปท 3.22 แสดงกลองขอความเมอแกไขขอมลเรยบรอย

หมายเหต ใหเลอกใชรปภาพพนหลงทอพโหลดเอง หรอแมแบบพนหลง หรอสพนหลง

เพยงอยางใดอยางหนงเทานน เนองจากหนาเวบไซตไมสามารถแสดงผลพรอมกนทง 3

อยางได

9. หนาดาวนโหลด (Download)

รปท 3.23 แสดงหนาดาวนโหลด (Download)

1. กดทปม “เลอกไฟล” เพอเลอกไฟลส าหรบไวใหดาวนโหลดในหนาเวบไซต

2. พมพรายละเอยดไฟล ในชองรายละเอยดไฟล

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

ขอความ ดงรปท 3. 24 ใหกดปม “ตกลง” เพอใหเสรจสนการบนทกขอมล

รปท 3.24 แสดงกลองขอความเมอแกไขขอมลเรยบรอย

4. กดปม “ยกเลก” เมอตองการยกเลกการบนทกขอมล

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

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

แกไข โดยจะสามารถแกไขไดเฉพาะรายละเอยดไฟลเทานน หากตองการแกไขตวไฟลใหท า

การลบแลวเพมใหมแทน เมอแกไขเสรจใหกดปม “บนทก” เพอบนทกการแกไข และหาก

ตองการลบใหกดทรป เพอลบไฟลทสรางไวออกจากระบบ

บทท 4

หนาจดการขอมลขาวสาร

หนาจดการขอมลขาวสาร จะอธบายในเรองการลงขาวสารตางๆ และการเพมรป

กจกรรม ซงในหวขอขาวประชาสมพนธแยกเปนหมวดหมดงนคอ

1. ขาวประชาสมพนธ

2. ขาวประกวดราคา

3. ขาวรบสมครงาน

4. ขาวอบรม/สมมนา

5. ขาวสารบรการศษยเกา

6. ขาวประกาศทวไป ( จะโชวในหนาเวบไซตของหนวยงานตนเองเทานน )

7. ขาวภาษาองกฤษ ( จะโชวในหนาเวบไซตของหนวยงานตนเองเทานน )

ซงแตละหนวยงานจะเหนหวขอขาวไมเหมอนกนแลวแตสทธทหนวยงานไดรบเทานน

1. หนาจดการขอมลขาวสาร

รปท 4.1 หนาจดการขอมลขาวสาร

1. กดปมเขาสระบบ เมอตองการเขาสระบบ จะปรากฏดงรปท 4.2

2. กดปมรายการขาวประชาสมพนธ เมอตองการดรายการขาวประชาสมพนธ

2. หนาเขาสระบบ

รปท 4.2 หนาเขาสระบบ

1. พมพ User และ Password อนเดยวกบอเมลของมหาวทยาลย

2. เมอกรอกขอมลครบแลวใหคลกปม “Login” ถากรอกขอมลถกตองจะปรากฏ

เมนตามสทธของแตละหนวยงาน ดงรป 4.3

3. เมนหลก

รปท 4.3 แสดงเมนหลกตามสทธของแตละหนวยงาน

1. กดเพมขาวประชาสมพนธ เมอตองการเพมขาวสาร จะปรากฏดงรปท 4.4 2. กดรายการขาวประชาสมพนธ เมอตองการดรายการขาวประชาสมพนธและ

แกไขสถานะขาว 3. กดเพมอลบมรปกจกรรม เมอตองการเพมรปกจกรรม จะปรากฏดงรปท 4.

4. หนาเพมขาวประชาสมพนธ

4.1 ในสวนของประเภทขาว หวขอขาว และรปประกอบขาว

รปท 4.4 หนาเพมขาวประชาสมพนธ ในสวนของประเภทขาว หวขอขาว และรปประกอบขาว

1. เลอกประเภทขาว ในสวนของประเภทขาว ซงประเภทขาวจะเหนไมเหมอนกนแลวแตสทธทแตละหนวยงานไดรบ

2. กรอกหวขอขาว ในชองหวขอขาว ซงหวขอขาวใหพมพขอความไดไมเกน 500 ตวอกษร ขอความควรกระชบ เขาใจงาย

3. กดปมเลอกไฟล ในสวนของรปกจกรรมเพอเลอกรปภาพขาว รปมขนาดกวาง * ยาว ไมเกน 800 * 800

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

รปท 4.5 หนาเพมขาวประชาสมพนธ ในสวนของรายละเอยดขาว

4.3 ในสวนของระยะเวลาการประกาศขาว ใหเลอกวนทประกาศและจะประกาศถง

วนไหน เมอกรอกขอมลครบถวนแลว ใหกดปมบนทก

รปท 4.6 หนาเพมขาวประชาสมพนธ ในสวนของระยะเวลาการประกาศขาว

หมายเหต กรณทตองการแนบไฟล เมอกดบนทกแลวจะมหนาขนมาใหแนบไฟล ดง

รป 4.6 โดยสามารถแนบไฟลไดหลายชนด เชน pdf word และรปภาพ เปนตน

รปท 4.7 หนาเพมขาวประชาสมพนธ ในสวนของการแนบไฟล

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

ประชาสมพนธ จะปรากฏหนาตางดงรป 4.8

หมายเหต เมอลงขาวเรยบรอยแลวกรณารอ 5 นาท ขาวทลงจงจะปรากฏทหนา

เวบไซตของมหาวทยาลยเทคโนโลยราชมงคลตะวนออก

5. หนารายการขาวประชาสมพนธ

รปท 4.8 หนารายการขาวประชาสมพนธ

1. โดยปกตแลวขาวทลงใหมจะมสถานะเปน รออนมต กดทรป เพอทจะ

เปลยนสถานะใหเปน อนมต ดงรปท 4.9

รปท 4.9 แสดงสถานะขาวทลงใหม

จากนนเมอเปลยนสถานะเสรจ ใหคลกท Update.. เพอท าการยนยนและ

เปลยนแปลงสถานะ

2. กดทรป เพอแกไขขาว เมอกดแลวจะปรากฏหนาตาง ดงรปท 4.10

รปท 4.9 แสดงหนาแกไขขาว

ใหท าการแกไขขาว ซงสามารถท าไดเหมอนกบตอนลงขาวครงแรก เมอแกไข

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

3. กดทรป จะปรากฏกลองขอความขนมาเพอใหยนยนการลบ ถายนยนใหกด

ปม ตกลง จากนนขาวกจะถกลบออกจากระบบเรยบรอย

6. หนาเพมอลบมกจกรรม

จะประกอบดวย 2 สวนใหญๆ คอ

6.1 หนาสรางอลบมกจกรรม เพอจองพนทในการน ารปใส

รปท 4.10 แสดงหนาเพมอลบมกจกรรม

6.1.1 กรอกชออลบม ในชองชออลบมรป โดยชอทใชตองเปนชอสนๆ

ความยาวไมเกน 100 ตวอกษร และหลกเลยงการใชสญลกษณ

6.1.2 กรอกรายละเอยดอลบมรป ในชองรายละเอยดอลบมรป

6.1.3 เมอกรอกขอมลครบถวนแลว ใหกดปม สราง จากนนจะปรากฏชอ

อลบมทสรางอยดานลาง ดงรปท 4.11 หากตองการเพมรปกจกรรมใหกดทรป จะ

ปรากฏหนาตางดงรปท 4.12 แตหากตองการแกไขใหกดทรป และหากตองการลบ

อลบมใหกดทรป

รปท 4.11 แสดงรายชออลบมรปกจกรรมทถกสราง

6.2 หนาเพมรปกจกรรม

รปท 4.12 แสดงหนาเพมรปกจกรรม

6.2.1 ในสวนของการเพมรปกจกรรม กดปม SELECT FILES เพอเลอก

รปภาพ โดยสามารถเลอกหลายๆ รปพรอมกนได ซงรปทเลอกมาลงจะตองมขนาดความ

กวาง * ความยาว ไมเกน 1200 * 1200 pixel เมอเลอกรปภาพเสรจแลวใหกดปมตอไป

เพอบนทกรปภาพทงหมด จากนนรปภาพทงหมดจะปรากฏอยในตารางดานลาง

6.2.2 ในสวนของตารางแสดงรปภาพ จะแสดงรปภาพทงหมดทอยในอลบม

หากตองการลบรปภาพรปใดใหกดทรป หลงรปภาพทตองการลบ

บทท 5

หนาฝากไฟลขอมล

หนาฝากไฟลขอมลเปนหนาส าหรบน าไฟลมาฝากกอนน าไปลงเวบไซต ซงเวบฝากไฟล

คอเวบทใหบรการฝากไฟลประเภทตางๆทง รปภาพ วดโอ เพลง เอกสารตางๆ สวนมากไฟล

ทมในคอมพวเตอรอาจมขนาดใหญเกนทจะสงตอทางอเมลหรอโพสตไวในเวบไซตของตวเอง

ดงนนจงตองพงบรการเวบฝากไฟลในการอพโหลดไฟลขนาดใหญของเรา ซงพออพโหลดเสรจ

เรากจะไดลงค URL ทเราสามารถจะ copy แลวกเอาไปใสใน เวบไซต หรอสงตอใหเพอนทาง

เมลได วธนจงงายและสะดวกในการสงขอมลขนาดใหญหากน

1. หนา Login RMUTTO Template Upload

รปท 5.1 หนา Login RMUTTO Template Upload

1. พมพ User และ Password อนเดยวกบอเมลของมหาวทยาลย

2. เมอกรอกขอมลครบแลวใหคลกปม “Login” ถากรอกขอมลถกตองจะปรากฏ

หนาตางดงรป 2.3 ใหกดปมตกลง จากนนจะปรากฏหนาตางดงรป 2.4 ขนมา

รปท 5.2 แสดงการเขาสระบบเรยบรอยแลว

2. หนาสรางอลบม

รปท 5.3 หนาสรางอลบม

1. พมพชออลบม ในชองชออลบม file

2. กดปมสราง จะปรากฏชออลบมทสรางเรยบรอยดงรปท 5.4

รปท 5.4 แสดงอลบมทถกสรางเรยบรอย

3. กดทรปโฟลเดอร ในกรณทตองการอพโหลดไฟลลงในอลบม จะปรากฏหนาตาง

ดงรปท 5.5 และกดทรปถงขยะ ในกรณทตองการลบอลบม

3. หนาอพโหลดไฟล

รปท 5.5 หนาอพโหลดไฟล

1. กดปม Select Files เพอเลอกไฟลทตองการอพโหลด (กรณาอพโหลดไฟลท

มขนาดไมเกน 8 M และแนะน าใหใชชอไฟลเปนภาษาองกฤษ)

2. เมอเลอกไฟลเรยบรอยแลวใหกดปม Upload จากนนไฟลทเลอกไวจะมา

ปรากฏอยดานลาง ดงรปท 5.6 ถาตองการน าไฟลไปใชใหคดลอก URL ของไฟลนนไปวาง

ในสวนทตองการใช

รปท 5.6 แสดงไฟลทอพโหลดเรยบรอย

3. กดทรปโฟลเดอร เมอตองการดาวนโหลดไฟล

4. กดทรปถงขยะ เมอตองการลบไฟลทไดอพโหลด

5. กดปม กลบหนาอลบม เมอตองการกลบไปยงหนาสรางอลบม

ไฟลทอพโหลดเรยบรอยแลว

URL ของไฟล

บทท 6

หนาแสดงผลเวบไซต

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

ออกแบบ Template และหนาจดการขอมลขาวสาร โดยการแสดงผลเปนดงรป 6.1 และ

6.2

รปท 6.1 แสดงหนาเวบไซต

หมายเลข 1 คอ โลโก (Logo) และไตเตล (Title) ของเวบไซต

หมายเลข 2 คอ ปมส าหรบเลอกภาษาของเวบไซต

หมายเลข 3 คอ เมนหลก (Main Menu) ระดบท 1

หมายเลข 4 คอ เมนหลก (Main Menu) ระดบท 2

หมายเลข 5 คอ เมนหลก (Main Menu) ระดบท 3

หมายเลข 6 คอ เมนหลก (Main Menu) ระดบท 4

หมายเลข 7 คอ สวนหวของเวบไซต (Header)

7

6

4

2

1

5

3

รปท 6.2 แสดงหนาเวบไซต (ตอ)

หมายเลข 1 คอ ปายโฆษณา (Banner)

หมายเลข 2 คอ เมนยอย (Sub Menu)

หมายเลข 3 คอ ขาวประเภทตางๆ และรปกจกรรม หากไมมการประกาศขาวใดๆ

หรอลงรปกจกรรม หวขอขาวและหวขอกจกรรมกจะไมแสดง

หมายเลข 4 คอ สวนทายเวบไซต (Footer)

หมายเลย 5 คอ พนหลง (Background)

3

5

4

1 2

งานฝกอบรมและถายทอดเทคโนโลยสารสนเทศ

ส านกวทยบรการและเทคโนโลยสารสนเทศ มหาวทยาลยเทคโนโลยราชมงคลตะวนออก

ตดตอ : 038-358144 เบอรภายใน 8301

http://training.arit.rmutto.ac.th