คู่มือการพัฒนาเว็บไซต์ สำหรับหน่วยงานงานสังกัดกรมโยธาธิการและผังเมือง

องคค วามรูตามประเดน็ ยุทธศาสตร กดรมาโนยกธาารธบกิ ารรกิ แาลระดผางั นเมชือา งง

1
2
3
4
5
6

ภาพท่ี 7.4.11 แสดงสว่ นต้งั คา่ Menu ให้กับ เทมเพลต (Template)
ตามภาพท่ี 7.4.11 แสดงสว่ นต้งั คา่ Menu ใหก้ บั เทมเพลต (Template)
ขั้นตอนท่ี 1 แก้ไข Menu Control

1.1 สว่ นของ Show : แสดงเมื่อมีการตง้ั ค่าเปน็ ON
1.2 สว่ นของ Type : ชนิดของ Menu เป็น Dropdown-Menu
ขนั้ ตอนท่ี 2 แกไ้ ข Select a Menu
2.1 ส่วนที่ใช้สาหรับเลอื กเมนทู ีจ่ ะนามาแสดง
ข้ันตอนที่ 3 แก้ไข Position
3.1 ส่วนทีใ่ ช้สาหรบั จัดตาแหน่งแสดงผล
ขัน้ ตอนท่ี 4 แกไ้ ข Responsive Menu
4.1 สว่ นท่ีใชเ้ ลอื กชนิดการแสดงผลเมอ่ื แสดงผลแบบ Responsive
ขั้นตอนท่ี 5 แก้ไข Enable ID
5.1 สว่ นที่ใช้เมื่อต้องการใช้ Default Menu
ข้นั ตอนท่ี 6 แกไ้ ข Module Cache
6.1 Module Cache จะเปิดใชง้ านหากมกี ารตั้งค่าเป็น ON

องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกง บาแปรผรแนะลกมาะารณผจังดั พเกม.าศือร.2คง5ว6า1ม1ร4ู 1

คสาํมู หือรกบั ารหพนฒัว ยนงาาเนวบ็สงัไซกตดั กรมโยธาธิการและผังเมอื ง

7.4.2 เทมเพลต (Template DD_Clinic_100)
คลกิ เลอื กเทมเพลต DD_Clinic_100 จากหน้าจัดการเทมเพลต

1

ภาพที่ 7.4.12 แสดงเทมเพลตทีต่ อ้ งการใช้งาน
เม่อื คลิกที่เทมเพลตตามขัน้ ตอนที่ 1 ดงั ภาพท่ี 7.4.12 แล้วหน้าจอจะแสดงผลหนา้ จอหลกั ของเทมเพลต
DD_Clinic ดงั ภาพท่ี 7.4.13

องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 142

DPT KM Action Plan 2018

องคความรตู ามประเดน็ ยทุ ธศาสตร กดรมา โนยกธาารธบกิ ารรกิ แาลระดผา ังนเมชอืางง

1

ภาพที่ 7.4.13 แสดงหน้าแสดงผลหลกั เมือ่ เลือกเทมเพลต DD Clinic 100
การจัดการ Logo
ข้ันตอนท่ี 1 คลิกเลือกแถบ Logo

1.1 เมื่อคลิกท่แี ถบ Logo จะแสดงผลหน้าการจดั การ Logo ดงั ภาพที่ 7.4.14

องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาาํ ธปิกง บาแปรผรแนะลกมาะารณผจังัดพเกม.าศือร.2คง5ว6า1ม1ร4ู 3

คสําูมหอื รกบั ารหพนัฒวยนงาาเนวบ็สังไซกตดั กรมโยธาธกิ ารและผงั เมือง

2

ภาพที่ 7.4.14 แสดงแถบจัดการ Logo

ขน้ั ตอนท่ี 2 การอพั โหลด Logo
2.1 ในส่วนของ Logo : ใช้สาหรบั อัพโหลดรปู ภาพเพอ่ื ใช้สาหรับแสดง Logo

เมื่ออพั โหลด Logo เรียบร้อย ใหท้ าการบนั ทกึ ขอ้ มลู โดยกดปุม่ บันทึก

2

องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 144

DPT KM Action Plan 2018

ภาพที่ 7.4.14 แสดงแถบ

องคค วามรูตามประเดน็ ยุทธศาสตร กดรมาโนยกธาารธบิการรกิ แาลระดผา ังนเมชือา งง

1
2

ภาพที่ 7.4.15 แสดงแถบ Favicon

แถบ Favicon ใช้สาหรบั แก้ไข Favicon ตามทผ่ี ู้ใชต้ ้องการ
ขั้นตอนท่ี 1 กดเลือกแถบ Favicon
ขัน้ ตอนที่ 2 Upload Favicon โดยการกดปมุ่ เลือก เพ่ือเลือกรปู ภาพทีต่ ้องการใช้เปน็ Favicon

องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกงบาแปรผรแนะลกมาะารณผจังดั พเกม.าศือร.2คง5ว6า1ม1ร4ู 5

คสําูมหอื รกบั ารหพนฒัวยนงาาเนว็บสังไซกตัดกรมโยธาธกิ ารและผงั เมือง

1
2
3
4

ภาพท่ี 7.4.16 แสดงแถบ Header contact
แถบ Header Contact ใช้สาหรับแก้ไขขอ้ มลู การตดิ ต่อทีแ่ สดงในสว่ น Header
ข้นั ตอนท่ี 1 Telephone แกไ้ ขเบอรโ์ ทรศัพท์
ขน้ั ตอนที่ 2 E-mail แก้ไขอเี มล์
ขั้นตอนที่ 3 Disable Header Contact เปดิ /ปดิ ส่วนของการติดต่อที่ Header
ขั้นตอนท่ี 4 Disable search เปิดปิดแถบค้นหาภายในเวบ็ ไซต์

องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 146

DPT KM Action Plan 2018

องคค วามรตู ามประเดน็ ยทุ ธศาสตร กดรมาโนยกธาารธบิการรกิ แาลระดผางั นเมชอืางง

1 1
2

3

4
5
6

ภาพที่ 7.4.17 แสดงแถบ Slideshow PRO

แถบ Slideshow PRO ใช้สาหรับแกไ้ ขข้อมลู ใน Slideshow
ข้ันตอนท่ี 1 Upload photo :: อพั โหลดรูปภาพ Slideshow
ข้ันตอนท่ี 2 Title :: ใส่หวั ขอ้ Slideshow
ขน้ั ตอนที่ 3 Text :: เนอื้ หาท่ตี ้องการให้แสดงใน Slideshow
ขัน้ ตอนท่ี 4 Button Name :: ชอื่ ปุม่ สาหรับ Slideshow
ขั้นตอนท่ี 5 http:// :: ใส่ Link ไปยังเนื้อหาหรือบทความท่ตี อ้ งการ
ขั้นตอนที่ 6 Disable Slide เปิดปิด Slideshow

องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาาํ ธปิกง บาแปรผรแนะลกมาะารณผจังดั พเกม.าศือร.2คง5ว6า1ม1ร4ู 7

คสําูม หอื รกบั ารหพนัฒว ยนงาาเนวบ็สังไซกตดั กรมโยธาธิการและผังเมอื ง

1
32
4
5
6

ภาพที่ 7.4.18 แสดงแถบ Person BOX PRO
แถบ Person BOX PRO ใชส้ าหรบั แกไ้ ขขอ้ มลู ใน Person BOX
ขนั้ ตอนที่ 1 Upload image :: อัพโหลดรูปภาพ Person BOX
ขนั้ ตอนท่ี 2 Name :: ชอ่ื Person BOX
ข้ันตอนท่ี 3 Title :: หัวขอ้ ทต่ี อ้ งการให้แสดงใน Person BOX
ข้นั ตอนที่ 4 Text :: ใสข่ ้อความเน้ือหาใน Person BOX
ข้นั ตอนที่ 5 Button Name :: ใสช่ ื่อให้ปมุ่
ข้นั ตอนท่ี 6 http:// :: ใส่ Link ไปยงั เนอ้ื หาหรือบทความทตี่ อ้ งการ

องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 148

DPT KM Action Plan 2018

องคค วามรตู ามประเด็นยุทธศาสตร กดรมาโนยกธาารธบิการรกิ แาลระดผา ังนเมชอืางง

1

2
3

ภาพที่ 7.4.19 แสดงแถบ Info BOX PRO
แถบ Info BOX PRO ใช้สาหรับแก้ไขข้อมูลใน Person BOX
ข้ันตอนท่ี 1 แก้ไข Info box

1.1 สว่ นของ Upload background image :: อพั โหลดรปู ภาพ Info BOX
1.2 ส่วนของ Upload image 1 :: อัพโหลดรปู ภาพ image 1
1.3 ส่วนของ Upload image 2 :: อัพโหลดรปู ภาพ image 2
1.4 สว่ นของ Title :: กาหนดหัวขอ้ 1 Info BOX
1.5 ส่วนของ Title 1 :: กาหนดหวั ข้อ 2 Info BOX
1.6 สว่ นของ Text line :: กาหนดเนอื้ หาท่ตี ้องการแสดงผลใน Info BOX

องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกงบาแปรผรแนะลกมาะารณผจังดั พเกม.าศือร.2คง5ว6า1ม1ร4ู 9

คสาํมู หือรกับารหพนัฒว ยนงาาเนว็บสังไซกตัดกรมโยธาธกิ ารและผงั เมอื ง

ขัน้ ตอนท่ี 2 แก้ไข Button
2.1 สว่ นของ Name Button :: กาหนดชื่อปุ่ม
2.2 สว่ นของ Url Button :: กาหนด Link ทีต่ ้องการให้แสดงผล

ข้ันตอนท่ี 3 แก้ไข Close info BOX
3.1 ส่วนของ Display Info Box :: กาหนดหนา้ ท่ีตอ้ งการใหแ้ สดงผล

1

2

3
4

ภาพท่ี 7.4.20 แสดงแถบ Footer BOX PRO
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 150

DPT KM Action Plan 2018

องคความรตู ามประเด็นยทุ ธศาสตร กดรมา โนยกธาารธบกิ ารริกแาลระดผา งั นเมชอืางง

แถบ Footer BOX PRO ใชส้ าหรับแกไ้ ขข้อมลู ใน Footer BOX
ขนั้ ตอนที่ 1 แก้ไข Abouts

1.1 สว่ นของ Header Title :: หัวข้อของ Footer BOX
1.2 ส่วนของ Text :: เน้ือหาของ Footer BOX
ขน้ั ตอนที่ 2 แกไ้ ข Google Maps
2.1 ส่วนของ city :: กาหนดชอื่ เมือง
2.2 สว่ นของ street :: กาหนดช่ือถนน
ขั้นตอนที่ 3 แก้ไข Footer
3.1 ส่วนของ Site name :: กาหนด Site name
3.2 Display Footer :: กาหนดหนา้ ทีต่ ้องการให้ Footer แสดง

องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกงบาแปรผรแนะลกมาะารณผจังดั พเกม.าศือร.2คง5ว6า1ม1ร5ู 1

คสํามู หือรกับารหพนัฒวยนงาาเนว็บสังไซกตัดกรมโยธาธกิ ารและผงั เมอื ง

7.5 การอพั โหลดไฟลภ์ าพและไฟลเ์ อกสาร ขนึ้ ระบบเว็บไซต์ด้วยระบบมีเดยี (Media)
ขนั้ ตอนการจัดการไฟล์ต่างๆ มีขั้นตอนดงั นี้
ขน้ั ตอนท่ี 1 ทาการต้งั ค่าประเภทไฟล์ท่ีต้องการนาขึน้ ระบบเว็บไซต์ Joomla โดย เลือกเมนู ระบบ

(System), เลือกเมนู ตงั้ คา่ ระบบหลกั (Global Configuration), เลอื กตงั้ ค่า มีเดีย (Media)

1

2

ภาพที่ 7.5.1 แสดงเมนเู พอื่ เข้าถึงการต้งั ค่าการจัดการระบบมีเดีย (Media)
ขั้นตอนที่ 2 ที่ช่อง ขา้ มการตรวจสอบ ใหร้ ะบุ นามสกุลของไฟล์ ทีต่ ้องการนาข้นึ ระบบเว็บไซต์ Joomla
ตามภาพท่ี 7.5.2
ข้นั ตอนท่ี 3 การเขา้ ระบบมีเดีย (Media)

ขั้นตอนท่ี 3.1 เลอื กเมนู เน้ือหา (Content), เลือกเมนู มเี ดยี (Media) หรือ
ขั้นตอนที่ 3.2 เลือกเมนู มเี ดยี (Media) ในส่วนของ คอนโทลพาเนล (Control Panel) หน้าผ้ดู แู ล
ระบบเว็บไซต์

องค์ความรูเ้ รื่อง คมู่ ือการพฒั นาเว็บไซต์ สาหรบั หน่วยงานสงั กัดกรมโยธาธกิ ารและผงั เมอื ง 152

DPT KM Action Plan 2018

องคความรูตามประเดน็ ยุทธศาสตร กดรมาโนยกธาารธบกิ ารรกิ แาลระดผา ังนเมชอืางง

3.1
3.2

ภาพท่ี 7.5.2 แสดงเมนเู พ่อื เข้าถงึ จัดการไฟล์และโฟลเดอรข์ องระบบมเี ดยี (Media)

ภาพท่ี 7.5.3 แสดงหนา้ ระบบการจัดการมีเดยี (Media)
องค์ความร้เู ร่อื ง คมู่ ือการพัฒนาเวบ็ ไซต์ สาหรับหนว่ ยงานสงั กัดกรปมรโะยจธําาปธงิกบแาปผรรนแะกมลาาะรณผจัดังพกเม.าศอืร.2คง5ว6า1ม1ร5ู 3

คสํามู หอื รกับารหพนฒัวยนงาาเนว็บสงัไซกตดั กรมโยธาธิการและผงั เมือง

5.2 4.1 5.6
5.3
4.4
4.2 4.3
5.1

ภาพท่ี 7.5.4 แสดงเครื่องมือในการจัดการไฟลแ์ ละโฟลเดอรข์ องระบบมเี ดีย (Media)

5.4
5.5

ภาพท่ี 7.5.5 แสดงการเลือกไฟลเ์ พ่ือจะนาเขา้ ระบบเวบ็ ไซต์ Joomla ผ่านระบบมีเดีย (Media)
องค์ความรเู้ รือ่ ง คมู่ อื การพัฒนาเว็บไซต์ สาหรับหนว่ ยงานสงั กัดกรมโยธาธกิ ารและผงั เมอื ง 154

DPT KM Action Plan 2018

องคค วามรตู ามประเด็นยุทธศาสตร กดรมา โนยกธาารธบิการริกแาลระดผา งั นเมชือางง

ตามภาพที่ 7.5.4
ขนั้ ตอนท่ี 4 การสร้างโฟลเดอร์ระบบมีเดยี (Media)
ขนั้ ตอนที่ 4.1 กดปมุ่ สรา้ งโฟลเดอรใ์ หม่ (Create New Folder), เลือกเมนู มีเดีย (Media) หรือ
ขั้นตอนที่ 4.2 สังเกตวา่ ปัจจบุ ันอย่ภู ายใต้ โฟลเดอร์ อะไร
ขน้ั ตอนท่ี 4.3 ใสช่ ื่อโฟลเดอร์ท่ีจะสร้าง (ภาษาองั กฤษ หา้ มเวน้ วรรค)
ขัน้ ตอนท่ี 4.4 กดป่มุ สร้างโฟลเดอร์ (Create Folder)

ตามภาพที่ 7.5.4 และ 7.5.5
ข้นั ตอนท่ี 5 การสรา้ งโฟลเดอร์ระบบมเี ดีย (Media)
ขัน้ ตอนที่ 5.1 เลอื กโฟลเดอร์ท่ีต้องการนาไฟลเ์ ขา้ ไปเก็บ
ขนั้ ตอนท่ี 5.2 กดปุ่ม อพั โหลด (Upload)
ขั้นตอนที่ 5.3 กดปุ่ม เลอื กไฟล์
ขั้นตอนที่ 5.4 เลือก ไฟล์
ขน้ั ตอนที่ 5.5 กดปุ่ม Open
ขน้ั ตอนที่ 5.6 กดปมุ่ เริ่มอพั โหลด (Start Upload)

แนะนา: อยากให้ผ้ดู ูแลเว็บไซตจ์ ดจาพาร์ทหรอื ตาแหนง่ ท่ีอยู่และชื่อไฟล์ไว้ให้ดี กรณตี อ้ งการทาลิงค์มาเปดิ ไฟล์ อาทิ
ประเภทไฟล์ pdf ตวั อย่าง images/Media/*****.pdf คือ เก็บไฟล์ pdf เกบ็ ไฟล์ pdf ไวท้ ีโ่ ฟลเดอร์ Media และ
โฟลเดอร์ Media อยู่ภายใตโ้ ฟลเดอร์ images

องค์ความรู้เรื่อง คมู่ ือการพฒั นาเวบ็ ไซต์ สาหรบั หน่วยงานสงั กัดกรปมรโะยจธําาปธงกิบแาปผรรนแะกมลาาะรณผจัดงั พเกม.าศือร.2คง5ว6า1ม1ร5ู 5

คสาํูม หอื รกบั ารหพนัฒว ยนงาาเนว็บสงัไซกตดั กรมโยธาธิการและผังเมือง

7.6 การสรา้ งหมวดหมู่ (Categories) ของบทความ
ขน้ั ตอนท่ี 1 การสรา้ งหมวดหมู่ (Categories)
ขั้นตอนที่ 1.1 เลือกเมนู เนอื้ หา (Content) และเลือกเมนู หมวดหมู่ (Categories) หรือ
ขั้นตอนที่ 1.2 เลือกเมนู หมวดหมู่ (Categories) ในส่วนของ คอนโทลพาเนล (Control Panel) หนา้ ผู้ดูแล

ระบบเว็บไซต์

1.1

1.2

ภาพที่ 7.6.1 แสดงเมนูเพ่ือเขา้ ถงึ การสร้างหมวดหมู่ (Categories)
ขน้ั ตอนท่ี 2 กดปมุ่ สรา้ งใหม่

2

ภาพท่ี 7.6.2 แสดงรายการหมวดหมู่ที่มีท้งั หมด

DPT KM Action Planอ2ง0ค1์ค8วามรเู้ ร่ือง คู่มอื การพัฒนาเวบ็ ไซต์ สาหรับหนว่ ยงานสังกัดกรมโยธาธกิ ารและผงั เมือง 156

องคค วามรตู ามประเดน็ ยุทธศาสตร กดรมา โนยกธาารธบกิ ารริกแาลระดผา งั นเมชอืางง

3
4
5

ภาพท่ี 7.6.3 แสดงการสร้างและต้งั คา่ การใช้งานของหมวดหมู่
ตามภาพท่ี 7.6.2

ขนั้ ตอนที่ 2 กดปมุ่ สรา้ งใหม่
ตามภาพที่ 7.6.3

ขั้นตอนที่ 3 ระบชุ ่อื หมวดหมู่
ขัน้ ตอนที่ 4 เลือก หมวดหมหู่ ลัก กรณหี มวดหมู่ที่สรา้ งอย่ภู ายใตห้ มวดหมอู่ ่นื
ขั้นตอนท่ี 5 เลือก สถานะ การเผยแพรห่ มวดหมู่
ตามภาพที่ 7.6.4
ขั้นตอนที่ 6 เลือกแถบ ตัวเลือก กาหนด รูปแบบ ในการแสดงผล
ขน้ั ตอนท่ี 7 เมือ่ ดาเนนิ การเสรจ็ ท้ังหมดแล้ว ใหท้ าการ บนั ทกึ หมวดหมู่

องค์ความร้เู ร่อื ง คู่มอื การพัฒนาเวบ็ ไซต์ สาหรับหนว่ ยงานสังกัดกรมปรโยะจธาําปธง กิ บแาปผรรนแะกลมาาะรณผจงััดพเกม.าศือร.2คง5ว6า1ม1ร5ู 7

คสํามู หือรกบั ารหพนัฒวยนงาาเนวบ็สงัไซกตดั กรมโยธาธิการและผังเมอื ง

7
6

ภาพท่ี 7.6.4 แสดงการกาหนดคา่ ตวั เลอื ก ของหมวดหมู่

DPT KM Action Planอ2ง0ค1ค์8วามรเู้ รื่อง คู่มอื การพัฒนาเวบ็ ไซต์ สาหรับหนว่ ยงานสงั กัดกรมโยธาธกิ ารและผงั เมือง 158

องคค วามรูตามประเดน็ ยทุ ธศาสตร กดรมาโนยกธาารธบิการริกแาลระดผา ังนเมชอืางง

7.7 การสร้างบทความ (Articles) สาหรบั เผยแพร่ข้อมูล
ข้ันตอนที่ 1 การสร้างบทความ (Articles)
ขนั้ ตอนท่ี 1.1 เลอื กเมนู เนอื้ หา (Content) และเลอื กเมนู เน้อื หา (Articles) หรือ
ขน้ั ตอนที่ 1.2 เลือกเมนู เนื้อหา (Content) ในส่วนของ คอนโทลพาเนล (Control Panel) หน้า

ผู้ดูแลระบบเวบ็ ไซต์

1.1

1.2

ภาพท่ี 7.7.1 แสดงเมนูเพื่อเขา้ ถงึ การสรา้ งเนอ้ื หา (Articles)

2

ภาพที่ 7.7.2 แสดงรายการเนือ้ หาท้งั หมดที่มีอยู่
ขน้ั ตอนท่ี 2 กดปุม่ สร้างใหม่ (New)
ตามภาพท่ี 7.7.3
ข้นั ตอนท่ี 3 ระบุ ชือ่ ของเนอ้ื หา
ขั้นตอนท่ี 4 พิมพร์ ายละเอียดเน้ือหาลงในพน้ื ทส่ี รา้ งเน้ือหา
ข้ันตอนท่ี 5 เครอื่ งมอื ต่างๆ ทชี่ ว่ ยในการสรา้ งเนื้อหา รูปแบบจะคลา้ ยๆ กบั เครอ่ื งของการสรา้ งเอกสาร
Word Processing

องคค์ วามรเู้ รือ่ ง คู่มือการพัฒนาเวบ็ ไซต์ สาหรับหนว่ ยงานสงั กัดกรมปรโยะจธําาปธงิกบแาปผรรนแะกลมาาะรณผจดังั พเกม.าศอืร.2คง5ว6า1ม1ร5ู 9

คสาํูมหือรกับารหพนฒัว ยนงาาเนว็บสงัไซกตดั กรมโยธาธิการและผังเมือง

3 6

5

4
5.5

5

ภาพที่ 7.7.3 แสดงหน้าต่างการทางานเก่ยี วการสรา้ งเนอื้ หา
อธิบายเคร่ืองมือที่ใช้งานบ่อยๆ ในการสร้างเน้ือ

5.1 5.3
5.2 5.4

ภาพที่ 7.7.4 แสดงเคร่อื งมือท่ใี ช้งานในการสรา้ งเนื้อหา
ตามภาพท่ี 7.7.4

5.1 ลบ ลิงค์ในการเช่อื มโยงเน้ือหา
5.2 สรา้ ง ลงิ ค์ในการเชือ่ มโยงเนอื้ หา
5.3 แทรกภาพ เขา้ ในเนอ้ื หา
5.4 คัน่ เนื้อหา ในรูปแบบข้อความ อา่ นต่อ... หรอื อ่านเพิ่มเตมิ ...

องคค์ วามรู้เรือ่ ง คู่มอื การพฒั นาเวบ็ ไซต์ สาหรับหน่วยงานสงั กัดกรมโยธาธิการและผังเมอื ง 160

DPT KM Action Plan 2018

5.5 แทรกโมดูล เข้าในเน้ือหา องคความรตู ามประเดน็ ยุทธศาสตร กดรมาโนยกธาารธบิการรกิ แาลระดผางั นเมชอืางง

1

2
3

ภาพที่ 7.7.5 แสดงรายละเอียดของเคร่ืองมอื สร้างลงิ คเ์ ชื่อมโยง
รายละเอียดการสรา้ งลิงคเ์ ชื่อมโยง ตามขั้นตอนที่ 5 ขอ้ 5.2 ภาพที่ 7.7.5

1. ระบุ ทอี่ ยูข่ องขอ้ มูลที่จะลงิ ค์เชื่อมโยง
2. ระบุ รูปแบบการแสดงผล
3. กดปุ่ม ยนื ยนั เพอ่ื เพิ่มข้อมลู ลิงค์เชือ่ มโยง
รายละเอยี ดการแทรกรูปภาพเขา้ เนือ้ หา ตามขัน้ ตอนท่ี 5 ข้อ 5.3 ภาพที่ 7.7.6
1. เลอื กรปู ภาพท่ตี ้องการแทรก
2. ระบุ ขนาดของรปู ภาพ
3. กดปมุ่ ยืนยนั เพอ่ื แทรกรูปภาพ
รายละเอยี ดการค่ันเนื้อหา ตามขัน้ ตอนที่ 5 ข้อ 5.4 ภาพที่ 7.7.7
1. เลือกขอ้ ความบรรทัดที่จะคน่ั เนื้อหา
2. กดปุ่ม คั่นเนอ้ื หา
รายละเอียดการแทรกโมดูลเขา้ เนื้อหา ตามขัน้ ตอนที่ 5 ขอ้ 5.5 ภาพที่ 7.7.8

องคค์ วามร้เู ร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหนว่ ยงานสงั กัดกรมปรโยะจธาํ าปธง ิกบแาปผรรนแะกลมาาะรณผจดังั พเกม.าศอืร.2คง5ว6า1ม1ร6ู 1

คสําูมหอื รกบั ารหพนฒัวยนงาาเนวบ็สังไซกตดั กรมโยธาธกิ ารและผงั เมอื ง

1. กดเลอื กที่ช่ือของโมดลู เพ่ือแทรกเข้าเนอื้ หา

2

1

3

ภาพที่ 7.7.6 แสดงรายละเอียดของเครื่องมือแทรกรปู ภาพเข้าเนื้อหา

2
1

ภาพท่ี 7.7.7 แสดงรายละเอยี ดของเครอื่ งมอื ปุม่ อ่านต่อ หรือ อา่ นเพม่ิ ...
องค์ความรูเ้ ร่อื ง คู่มอื การพฒั นาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมอื ง 162

DPT KM Action Plan 2018

องคค วามรตู ามประเด็นยทุ ธศาสตร กดรมา โนยกธาารธบิการริกแาลระดผา งั นเมชอืางง

1

ภาพที่ 7.7.8 แสดงรายละเอียดของการแทรกโมดูลเขา้ เนอ้ื หา

7.1
7.2

7.3
7.4

ภาพที่ 7.7.9 แสดงรายละเอียดการกาหนดตัวเลือกการเผยแพร่ของเนอ้ื หา
ตามภาพที่ 7.7.9

ข้นั ตอนท่ี 7 การกาหนดตวั เลอื กการเผยแพร่ของเนื้อหา
ขน้ั ตอนที่ 7.1 ระบุ วันท่ีเรม่ิ เผยแพร่
ขั้นตอนท่ี 7.2 ระบุ วันสนิ้ สุดการเผยแพร่
ขั้นตอนที่ 7.3 ระบุ วันทีเ่ ขยี น
ขนั้ ตอนที่ 7.4 ระบุ สร้างโดย

องคค์ วามร้เู รือ่ ง คู่มือการพฒั นาเว็บไซต์ สาหรับหนว่ ยงานสังกัดกรมปรโยะจธาําปธงิกบแาปผรรนแะกลมาาะรณผจังดั พเกม.าศือร.2คง5ว6า1ม1ร6ู 3

คสํามู หือรกบั ารหพนัฒวยนงาาเนวบ็สงัไซกตดั กรมโยธาธิการและผงั เมอื ง

ภาพท่ี 7.7.10 แสดงรายละเอียดการตง้ั ค่าของเนอื้ หา
องคค์ วามรเู้ ร่อื ง คู่มือการพฒั นาเว็บไซต์ สาหรับหนว่ ยงานสังกัดกรมโยธาธิการและผงั เมอื ง 164

DPT KM Action Plan 2018

องคค วามรตู ามประเด็นยุทธศาสตร กดรมา โนยกธาารธบกิ ารรกิ แาลระดผาังนเมชอืางง

7.8 การสร้างเมนู (Menu)
ขน้ั ตอนท่ี 1 การสรา้ งบทความ (Articles)
ขน้ั ตอนที่ 1.1 เลือกเมนู เมนู (Menus) และเลอื กเมนู การจัดการ (Manage) หรอื
ข้ันตอนท่ี 1.2 เลอื กเมนู เมนู (Menu(s)) ในสว่ นของ คอนโทลพาเนล (Control Panel) หนา้ ผูด้ ูแล

ระบบเวบ็ ไซต์

1.1

1.2

ภาพที่ 7.8.1 แสดงเมนูเพอ่ื เข้าถงึ การสรา้ งเมนู (Menus)

ภาพท่ี 7.8.2 แสดงโครงสรา้ งการสรา้ งเมนู
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยปธระาจธําิกปาง รบแแปผลรนะะกมผาาัรงณจเมัดพกือ.าศงร.2ค5ว6า11ม6ร5ู

คสําูมหือรกบั ารหพนฒัวยนงาาเนว็บสังไซกตดั กรมโยธาธิการและผงั เมอื ง

2.3
2.1

2.2

ภาพท่ี 7.8.3 แสดงหน้าตา่ งสาหรบั การสร้างหวั ข้อกลุ่มเมนู
ตามภาพท่ี 7.8.3

ขนั้ ตอนท่ี 2 การสร้างหัวข้อกลมุ่ เมนู
ข้ันตอนท่ี 2.1 ระบุ ชอื่ หัวขอ้ กลุ่มเมนู
ข้ันตอนท่ี 2.2 ระบุ ชอ่ื เมนู ภาษาองั กฤษ สาหรับเชอ่ื มโยงกบั โมดูลเมนู
ขน้ั ตอนที่ 2.3 กดป่มุ บนั ทึก หวั ขอ้ กล่มุ เมนู

ภาพท่ี 7.8.4 แสดงเมนเู พื่อเข้าสรา้ งเมนยู ่อย
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 166

DPT KM Action Plan 2018

องคความรูต ามประเด็นยุทธศาสตร กดรมาโนยกธาารธบกิ ารรกิ แาลระดผา งั นเมชอืางง

เมอ่ื สรา้ งหัวข้อกลมุ่ เมนเู สร็จแล้ว ชอื่ หัวขอ้ กลมุ่ เมนจู ะแสดงขน้ึ มาในส่วนของเมนูรอเพม่ิ เมนยู ่อยตอ่ ไป

3

ภาพที่ 7.8.5 แสดงรายการทง้ั หมดของเมนยู อ่ ย 4
ขน้ั ตอนที่ 3 กดปุ่ม สร้างใหม่ เพื่อสรา้ งเมนูย่อย
5
7

6

ภาพที่ 7.8.6 แสดงหนา้ ต่างการสรา้ งเมนูยอ่ ย
ตามภาพที่ 7.8.6

ขน้ั ตอนที่ 4 ระบุ ชื่อเมนู ยอ่ ย
ขน้ั ตอนที่ 5 ตง้ั คา่ ของเมนูย่อย
ข้นั ตอนที่ 6 เลอื กชนิดของเมนู หรือประเภทการเชอ่ื มโยงของเมนูย่อย
ข้ันตอนที่ 7 กดปุ่ม บันทึก การสร้างเมนูยอ่ ย
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยปธระาจธาํ ิกปาง รบแแปผลรนะะกมผาาัรงณจเมัดพกือ.าศงร.2ค5ว6า11ม6ร7ู

คสาํมู หือรกบั ารหพนฒัวยนงาาเนวบ็สงัไซกตดั กรมโยธาธกิ ารและผงั เมือง

5.1
5.2

5.3

5.4

ภาพท่ี 7.8.7 แสดงการตง้ั คา่ ของเมนยู ่อย
ตามภาพที่ 7.8.7 ขนั้ ตอนที่ 5

ขนั้ ตอนที่ 5 การต้ังคา่ ของเมนยู อ่ ย
ข้ันตอนท่ี 5.1 เลือก หัวข้อกลุม่ เมนู
ขนั้ ตอนที่ 5.2 เลอื ก เรยี งลาดับเมนยู อ่ ย
ข้นั ตอนที่ 5.3 เลือก สถานะการเผยแพร่เมนยู ่อย
ขน้ั ตอนท่ี 5.4 เลอื ก สถานะการเขา้ ถงึ เมนยู ่อย

ภาพที่ 7.8.8 แสดงชนิดของเมนูย่อย
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 168

DPT KM Action Plan 2018

องคความรูต ามประเด็นยทุ ธศาสตร กดรมา โนยกธาารธบกิ ารรกิ แาลระดผางั นเมชือางง

6.2
6.1

ภาพท่ี 7.8.9 แสดงชนดิ ของเมนยู ่อย ส่วนของการเช่ือมโยงเนอ้ื หา
ตามภาพท่ี 7.8.9 ข้ันตอนท่ี 6

ขั้นตอนที่ 6 ชนดิ ของเมนยู ่อย
ข้ันตอนที่ 6.1 เลือก เนือ้ หาเดียว คอื เชอ่ื มโยงเนือ้ หาเพียงเร่ืองเดียว
ขนั้ ตอนที่ 6.2 เลือก หมวดหมู่ แสดงแบบลิสรายการและแสดงแบบบล็อก กรณตี อ้ งการเชอ่ื มโยงเนอ้ื หา

ทั้งหมดในหมวดหมู่ทเ่ี ลือก
ข้นั ตอนท่ี 6.3 เลือก ชนดิ เมนู กรณีต้องการเปลย่ี นชนิดของเมนูย่อย
ข้ันตอนท่ี 6.4 เลือก เนอ้ื หา หรอื หมวดหมู่ ที่ต้องการเชอื่ มโยง

องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยปธระาจธําิกปางรบแแปผลรนะะกมผาารังณจเมัดพกือ.าศงร.2ค5ว6า11ม6ร9ู

คสํามู หือรกบั ารหพนฒัวยนงาาเนวบ็สังไซกตดั กรมโยธาธกิ ารและผงั เมือง

6.3
6.4

ภาพท่ี 7.8.10 แสดงชนิดของเมนูย่อย สว่ นของการเชื่อมโยงเนอ้ื หาและหมวดหมู่

ภาพท่ี 7.8.11 แสดงรายการเนือ้ หา กรณีเลอื กเช่ือมโยงเน้อื หา

ภาพท่ี 7.8.12 แสดงรายการหมวดหมู่ กรณีเลือกเชอ่ื มโยงหมวดหมู่
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 170

DPT KM Action Plan 2018

องคความรูตามประเด็นยุทธศาสตร กดรมาโนยกธาารธบกิ ารริกแาลระดผาังนเมชือางง

ภาพที่ 7.8.13 แสดงชนิดของเมนูย่อย ส่วนของการเชือ่ มโยงโดยใช้ท่ีอยู่ (URL) เวบ็ ไซต์

3
1

2

ภาพที่ 7.8.14 แสดงชนิดของเมนูย่อย สว่ นของการเช่ือมโยงโดยใช้ทีอ่ ยู่ (URL) เว็บไซต์
การเลือกชนิดเมนใู นสว่ น แรปเปอร์ (iFrame)

ข้นั ตอนท่ี 1 ระบุ ช่อื เมนู
ขน้ั ตอนที่ 2 ระบุ ชือ่ ทอ่ี ยู่ (URL) ของข้อมลู ทตี่ ้องการเช่อื มโยง
ขนั้ ตอนท่ี 3 กดปุ่ม บันทึก

องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยปธระาจธําิกปางรบแแปผลรนะะกมผาาัรงณจเมดั พกือ.าศงร.2ค5ว6า11ม7ร1ู

คสาํูม หอื รกับารหพนัฒวยนงาาเนว็บสงัไซกตดั กรมโยธาธกิ ารและผงั เมอื ง

7.9 การสรา้ งโมดลู (Modules) ภายในระบบเวบ็ ไซต์ Joomla
ขัน้ ตอนที่ 1 การสรา้ งโมดูล (Modules)
ขน้ั ตอนท่ี 1.1 เลอื กเมนู เมนู (Menus) และเลอื กเมนู โมดูล (Modules) หรือ
ขั้นตอนท่ี 1.2 เลอื กเมนู โมดูล (Modules) ในส่วนของ คอนโทลพาเนล (Control Panel) หนา้ ผูด้ แู ล

ระบบเวบ็ ไซต์

1.1

1.2

ภาพที่ 7.9.1 แสดงเมนเู พื่อเขา้ ถงึ การสรา้ งโมดลู (Modules)

2

ภาพที่ 7.9.2 แสดงรายการโมดลู (Modules) ที่สรา้ งไวท้ ่มี ีอยู่ท้ังหมด

องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 172

DPT KM Action Plan 2018

องคความรตู ามประเดน็ ยุทธศาสตร กดรมา โนยกธาารธบกิ ารริกแาลระดผา ังนเมชอืางง

ขนั้ ตอนท่ี 2 กดปุ่ม สร้างใหม่ เพื่อสรา้ งโมดูล (Modules)

3
3.1

3.2
3.3
3.4
3.5

3.6
3.7
3.8

3.9

ภาพที่ 7.9.3 แสดงรายการโมดูล (Modules) ท้งั หมด
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 173

ประจาํ ปงบแปผรนะกมาารณจดั พก.าศร.2ค5ว6า1มรู

คสาํูมหอื รกบั ารหพนัฒว ยนงาาเนวบ็สงัไซกตดั กรมโยธาธิการและผงั เมือง

ขัน้ ตอนที่ 3 กดท่ีชือ่ โมดูล เพ่อื สรา้ งโมดูล (Modules) ตามภาพที่ 7.9.3
เมอ่ื กดเลือกโมดูลแลว้ ในทกุ โมดูลจะมีการตัง้ คา่ แสดงผลเบอ้ื งตน้ ท่ีเหมอื นกนั ดังนี้

4

5 6
6.1
ภาพท่ี 7.9.4 แสดงรายการโมดูล (Modules) ที่สร้างไวท้ มี่ ีอยทู่ ้ังหมด 6.2

6.3
6.4
6.5
6.6

องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 174

DPT KM Action Plan 2018

องคค วามรูตามประเด็นยทุ ธศาสตร กดรมาโนยกธาารธบิการริกแาลระดผาังนเมชอืางง

ขั้นตอนที่ 4 ระบชุ อื่ โมดูล
ขั้นตอนที่ 5 เลือก การกาหนดการแสดงทเี่ มนู แลว้ เลอื ก กาหนดการแสดงผล
ขัน้ ตอนท่ี 6 กาหนดค่าของโมดลู

ขัน้ ตอนที่ 6.1 กาหนดค่า แสดงชื่อโมดูล
ขนั้ ตอนที่ 6.2 กาหนดค่า ตาแหน่ง ท่ีต้องการแสดงผลบนหน้ารปู แบบ (Template) ระบบเว็บไซต์
ข้นั ตอนที่ 6.3 กาหนดค่า สถานะ สาหรับการแสดงผล
ขนั้ ตอนที่ 6.4 กาหนดค่า วนั ทีจ่ ะใหโ้ มดูลแสดง
ข้นั ตอนท่ี 6.5 กาหนดค่า วันสิน้ สุดการแสดงโมดูล
ขน้ั ตอนที่ 6.6 กาหนดค่า การเขา้ ถึงโมดูล
รายละเอียดชนิดโมดูลภายในระบบเว็บไซต์ Joomla
3.1 โมดลู กาหนด HTML เอง มีรปู แบบการทางานคล้ายกบั การสร้างเน้ือหา (Articles)

ภาพที่ 7.9.5 แสดงหนา้ ตา่ งโมดลู กาหนด HTML เอง
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกง บาแปรผรแนะลกมาะารณผจังดั พเกม.าศือร.2คง5ว6า1ม1ร7ู 5

คสํามู หอื รกบั ารหพนัฒวยนงาาเนว็บสังไซกตดั กรมโยธาธิการและผงั เมือง

3.2 โมดลู เน้อื หา - ยอดนยิ ม เป็นโมดลู ที่เชือ่ มต่อกลมุ่ เนอ้ื หาทมี่ ีความนยิ มเขา้ ชม

ภาพที่ 7.9.6 แสดงหน้าต่างโมดูล เนอ้ื หา - ยอดนยิ ม
3.3 โมดูล เนื้อหา – รายการลา่ สดุ เปน็ โมดูลท่ีเช่ือมต่อกลุ่มเนือ้ หาที่สรา้ งลา่ สุด

ภาพท่ี 7.9.7 แสดงหน้าต่างโมดูล เน้ือหา - รายการลา่ สุด
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 176

DPT KM Action Plan 2018

องคค วามรตู ามประเดน็ ยุทธศาสตร กดรมาโนยกธาารธบิการรกิ แาลระดผางั นเมชือา งง

3.4 โมดูล เนอื้ หา – หมวดหมู่ เปน็ โมดลู ทเี่ ชอ่ื มต่อหมวดหมเู่ พ่ือแสดงเนื้อหาทงั้ หมดในหมวดหมู่

ภาพที่ 7.9.8 แสดงหน้าตา่ งโมดูล เน้อื หา – หมวดหมู่
3.5 โมดูล เมนู เป็นโมดลู ท่ีเช่ือมต่อกบั หัวข้อกลุม่ เมนทู ่สี ร้างไว้

ภาพที่ 7.9.9 แสดงหน้าต่างโมดลู เมนู
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาาํ ธปิกง บาแปรผรแนะลกมาะารณผจังดั พเกม.าศือร.2คง5ว6า1ม1ร7ู 7

คสําูมหือรกับารหพนฒัว ยนงาาเนว็บสงัไซกตดั กรมโยธาธิการและผงั เมอื ง

3.6 โมดูล แร็บเปอร์ (iFrame) เปน็ โมดลู ทเี่ ช่อื มตอ่ กับขอ้ มูลอ่นื ๆ โดยผา่ นท่ีอยู่ (URL) ของขอ้ มูล

ภาพที่ 7.9.10 แสดงหนา้ ตา่ งโมดูล แรบ็ เปอร์ (iFrame)
3.7 โมดลู แสดงฟดี (ดึง RSS) เป็นโมดูลที่เช่ือมต่อดึงข้อมลู จากเว็บไซตท์ ่ีมีการแบง่ ปันข้อมูลไว้ในรูปแบบ RSS

ภาพที่ 7.9.11 แสดงหน้าตา่ งโมดูล แสดงฟดี (ดึง RSS)
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 178

DPT KM Action Plan 2018

องคค วามรตู ามประเดน็ ยุทธศาสตร กดรมาโนยกธาารธบิการรกิ แาลระดผา ังนเมชอืา งง

3.8 โมดูล แสดงภาพสมุ่

ภาพที่ 7.9.12 แสดงหนา้ ตา่ งโมดูล แสดงภาพสุ่ม
3.9 โมดลู ใครออนไลน์

ภาพที่ 7.9.13 แสดงหน้าต่างโมดูล ใครออนไลน์
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกง บาแปรผรแนะลกมาะารณผจังัดพเกม.าศือร.2คง5ว6า1ม1ร7ู 9

คสาํูม หือรกับารหพนฒัวยนงาาเนวบ็สงัไซกตัดกรมโยธาธกิ ารและผังเมือง

7.10 การสร้างแบนเนอร์ (Banner) ขนาดเล็ก เชอ่ื มโยงข้อมลู ภายในระบบเวบ็ ไซต์
การสรา้ งเมนูนน้ั หากสร้างแบบปกติจะแสดงเพยี งตวั อักษรทีเ่ ปน็ ชื่อเมนยู อ่ ย อาจจะดูไมส่ วยงามหรอื หากมี

เมนูทีเ่ ปน็ ตวั อกั ษรท่มี ากจนเกนิ ไปก็จะดไู ม่สวยงามเช่นกัน

[1]
[2]

ภาพที่ 7.10.1 การแสดงผลของเมนูในรปู แบบอกั ษร [1] และรูปแบบแบนเนอร์ [2]
ขนั้ ตอนที่ 1 1.1 สรา้ งเนอื้ หาตามหวั ข้อท่ตี ้องการจะเช่ือมโยง หรอื 1.2 เกบ็ ลงิ ค์ของขอ้ มูลจากเว็บภายนอก
ท่ตี อ้ งการจะเชอ่ื มโยง
ขั้นตอนที่ 2 สรา้ งหวั ข้อกลุ่มเมนู 2.1 สรา้ งเมนยู อ่ ยเช่ือมโยงเนอื้ หา หรือ 1.2 สร้างเมนูยอ่ ยเชอื่ มโยงข้อมูล
จากเว็บภายนอกดว้ ยลงิ ค์ที่เกบ็ ไว้
ข้ันตอนที่ 3 สรา้ งนาแบนเนอร์ที่สรา้ งไว้ไปเก็บไวใ้ นการจัดการมีเดยี (Media)

*** แบนเนอร์ที่ได้สร้างไว้

3

ภาพท่ี 7.10.2 แบนเนอร์และจดั เก็บในมเี ดยี

DPT KM Action Pอlaงnค2์ค0ว1า8มรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 180

4 องคความรูตามประเด็นยุทธศาสตร กดรมาโนยกธาารธบิการริกแาลระดผางั นเมชอืางง
5
6

ภาพท่ี 7.10.3 เมนูและการเชอ่ื มโยงกับโมดูล
ขัน้ ตอนที่ 4 สร้างหัวขอ้ กลุม่ เมนู ชื่อ หัวข้อกลุ่มเมนูซอ่ นเอาลิงค์ และตง้ั ชื่อสาหรับเชื่อมโยง ช่ือ hiddenmenu
ขน้ั ตอนที่ 5 สรา้ งเมนูย่อยโดยตัง้ ชื่อตามข้อมูลที่จะเชอ่ื มโยง
ขนั้ ตอนท่ี 6 สร้างสร้างโมดลู โดยตัง้ ชอ่ื เดียวกันกบั หัวขอ้ กล่มุ เมนู คือ หวั ขอ้ กลุม่ เมนซู อ่ นเอาลิงค์
ข้นั ตอนที่ 7 เปิดการแสดงผลโมดูล หัวขอ้ กล่มุ เมนูซ่อนเอาลงิ ค์ บนหนา้ เว็บไซต์
ขนั้ ตอนที่ 8 กดท่ีเมนยู อ่ ยท่ีสร้างข้นึ และแสดงผลบนหน้าเวบ็ ไซต์

9

7
8

ภาพท่ี 7.10.4 แสดงผลโมดูลเมนแู ละทีอ่ ยู่ (URL) ของข้อมูล
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกง บาแปรผรแนะลกมาะารณผจังดั พเกม.าศือร.2คง5ว6า1ม1ร8ู 1

คสํามู หอื รกับารหพนฒัว ยนงาาเนว็บสงัไซกตัดกรมโยธาธกิ ารและผังเมือง

ขั้นตอนท่ี 9 คัดลอกทอี่ ยูข่ องข้อมูล (URL) เกบ็ ไว้ในโปรแกรม Notepad
ขน้ั ตอนที่ 10 ปดิ การแสดงผลโมดลู หัวข้อกลมุ่ เมนูซอ่ นเอาลิงค์ บนหนา้ เวบ็ ไซต์
ขั้นตอนท่ี 11 สรา้ งโมดลู กาหนด HTML เอง
ขนั้ ตอนท่ี 12 ทาการ แทรกไฟล์ภาพแบนเนอร์ ทจี่ ัดเกบ็ ไวท้ ่มี เี ดีย
ขั้นตอนท่ี 13 เลอื กท่ไี ฟล์ภาพแบนเนอร์ แล้วกดปุม่ ลงิ ค์ (ลูกโซ่) ทาการ แทรกลงิ ค์ ที่จัดเก็บไวท้ ี่ Notepad
ขน้ั ตอนที่ 14 บนั ทกึ โมดูล และเปิดการแสดงผลบนหนา้ เวบ็ ไซต์

DPT KM Action Pอlaงnค2์ค0ว1า8มรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 182

องคความรตู ามประเด็นยุทธศาสตร กดรมาโนยกธาารธบกิ ารรกิ แาลระดผางั นเมชือางง

7.11 การสร้างไอคอน (Favicon) เพ่อื แสดงผลบนแถบบราวเซอร์
การสรา้ งไอคอนแสดงบนแถบบราวเซอรน์ ้ัน เปน็ การแสดงถงึ สญั ลักษณ์ของเว็บไซต์ แสดงความเป็นเจา้ ของ

นอกเหนอื จากการระบุลขิ สทิ ธิ์ด้านล่างของเว็บไซต์

ภาพที่ 7.11.1 ตาแหนง่ แสดงผลไอคอนบนหน้าเวบ็ ไซต์
ข้ันตอนท่ี 1 เตรยี มภาพทต่ี ้องการสรา้ งเปน็ ไอคอนให้อยู่ในรปู แบบนามสกุล *.PNG, *.png
ขนั้ ตอนท่ี 2 เขา้ เว็บไซต์ที่สามารถสร้างไอคอน favicon ไดใ้ นรปู แบบออนไลน์ ในคูม่ ือนเ้ี ลอื กใชเ้ ว็บ
tools.dynamicdrive.com/favicon/

2

ภาพที่ 7.11.2 เว็บไซตเ์ คร่ืองมือสร้างไอคอน Favicon
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกง บาแปรผรแนะลกมาะารณผจังัดพเกม.าศือร.2คง5ว6า1ม1ร8ู 3

คสาํมู หือรกบั ารหพนัฒว ยนงาาเนวบ็สงัไซกตดั กรมโยธาธกิ ารและผังเมือง

ขั้นตอนท่ี 3 เตรยี มภาพท่ีต้องการสร้างเปน็ ไอคอนใหอ้ ยู่ในรูปแบบนามสกุล *.PNG, *.png

4
5
6

7
98

ภาพที่ 7.11.3 เวบ็ ไซต์เครอ่ื งมือสร้างไอคอน Favicon
ขัน้ ตอนที่ 4, 5 กดปมุ่ เลอื ก ไฟลภ์ าพ *.PNG, *.png ทเ่ี ตรียมไว้
ข้นั ตอนท่ี 6 กดปมุ่ Open
ข้นั ตอนท่ี 7 เลอื กขนาดภาพไอคอนท่ตี ้องการ
ขนั้ ตอนท่ี 8 กดปุ่ม Create Icon เพ่ือสร้างภาพไอคอน
ขัน้ ตอนท่ี 9 กดปมุ่ Download FavIcon เพอ่ื สรา้ งภาพไอคอน
ขั้นตอนที่ 10 เปิดโปรแกรม Filezilla Client FTP เพอื่ อัพโหลดไฟลข์ ึ้นไปทบั ไฟลไ์ อคอนเดมิ บนเซริ ์ฟเวอร์
DPT KM Action Pอlaงnค2์ค0ว1า8มรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 184

องคความรูตามประเดน็ ยทุ ธศาสตร กดรมาโนยกธาารธบกิ ารรกิ แาลระดผางั นเมชอืางง

xxxxxxxx

ภาพที่ 7.11.4 ตาแหนง่ ไฟล์ Favicon บนเครื่องเซริ ์ฟเวอร์
ขนั้ ตอนท่ี 11 ตาแหน่งบนเคร่อื งเซริ ์ฟเวอร์ template > เลอื กช่อื เทมเพลต ท่ีเปิดใช้งานอยู่ >
favicon.ico ตามภาพท่ี 7.11.4

องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกงบาแปรผรแนะลกมาะารณผจังัดพเกม.าศือร.2คง5ว6า1ม1ร8ู 5

คสาํูมหอื รกบั ารหพนัฒวยนงาาเนวบ็สังไซกตดั กรมโยธาธิการและผังเมอื ง

7.12 การสรา้ งโค้ดลิงคข์ อ้ มูล (QR Code) เพือ่ เปน็ ทางลัดขอ้ มลู
สรา้ งโคด้ ลงิ คข์ อ้ มูล (QR Code) เพ่อื เป็นทางลัด

1

ภาพท่ี 7.12.1 เวบ็ ไซตเ์ คร่อื งมอื สร้างโคด้ เชอื่ มโยง QR Code
ขน้ั ตอนที่ 1 เขา้ เว็บไซต์เครอ่ื งมอื สร้างโคด้ เชื่อมโยง QR Code ในคูม่ อื นีเ้ ลือกใช้เว็บ
https://www.the-qrcode-generator.com/
ตามภาพท่ี 7.12.2
ข้นั ตอนที่ 2 เลอื กแถบเมนู URL
ข้ันตอนท่ี 3 นา ท่อี ยู่ (URL) ของขอ้ มลู ที่ตอ้ งการสรา้ งเส้นทางเชอ่ื มโยง
ขน้ั ตอนที่ 4 คัดลอก QR Code ไปวางบนหน้าเวบ็ ไซต์ หรอื หนา้ เพจที่ไวร้ วมลงิ ค์ขอ้ มลู

องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 186

DPT KM Action Plan 2018

องคความรตู ามประเดน็ ยทุ ธศาสตร กดรมา โนยกธาารธบิการริกแาลระดผา งั นเมชือางง

ภาพที่ 7.12.2 แสดงการสร้างเส้นทางเชอ่ื มโยงข้อมูล QR Code
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาําธปิกง บาแปรผรแนะลกมาะารณผจังดั พเกม.าศือร.2คง5ว6า1ม1ร8ู 7

คสําูมหอื รกับารหพนฒัว ยนงาาเนวบ็สงัไซกตดั กรมโยธาธิการและผังเมอื ง

เอกสารแนบทา้ ยบท

ศกึ ษาเพม่ิ เตมิ ได้ท่ี แผน่ DVD > โฟลเดอร์ชื่อ เอกสารแนบท้ายบท

บทท่ี 1 กฎหมายตา่ งๆ ท่ีเกี่ยวขอ้ งกับการพัฒนาระบบเวบ็ ไซต์
โฟลเดอร์ชือ่ บทท่ี 1 - กฎหมายตา่ งๆ > 101 - ComLaw-2-50.pdf
โฟลเดอร์ชื่อ บทที่ 1 - กฎหมายต่างๆ > 101 - ComLaw-2-60.pdf
โฟลเดอร์ชอ่ื บทที่ 1 - กฎหมายตา่ งๆ > 103 - NewsLaw-1-4.pdf
โฟลเดอรช์ ื่อ บทที่ 1 - กฎหมายต่างๆ > 104 - CopyrightLaw-1-37.pdf
โฟลเดอรช์ อ่ื บทที่ 1 - กฎหมายต่างๆ > 105 - CopyrightLaw-2-58.pdf
โฟลเดอรช์ อื่ บทท่ี 1 - กฎหมายต่างๆ > 106 - CopyrightLaw-3-58.pdf
โฟลเดอร์ชือ่ บทท่ี 1 - กฎหมายตา่ งๆ > 107 - TransactionLaw-1-44.pdf
โฟลเดอรช์ ือ่ บทที่ 1 - กฎหมายตา่ งๆ > 108 - TransactionLaw-2-51.pdf
โฟลเดอรช์ อ่ื บทท่ี 1 - กฎหมายต่างๆ > 109 - TransactionAnn-1-53.pdf

บทท่ี 2 กฎหมายต่างๆ ท่ีเกีย่ วขอ้ งกับการพัฒนาระบบเวบ็ ไซต์
โฟลเดอรช์ อื่ บทที่ 2 - นโยบาย ขอ้ บงั คบั > 201 - WebsitePolicy.pdf
โฟลเดอรช์ ่อื บทที่ 2 - นโยบาย ขอ้ บงั คับ > 202 - PrivacyPolicy.pdf
โฟลเดอร์ช่ือ บทท่ี 2 - นโยบาย ขอ้ บงั คบั > 203 - WebsiteSecurityPolicy.pdf
โฟลเดอร์ช่อื บทที่ 2 - นโยบาย ข้อบงั คบั > 204 - HostingRules.pdf

บทท่ี 3 มาตรฐานเวบ็ ไซตภ์ าครัฐ
โฟลเดอร์ช่อื บทที่ 3 - มาตรฐานเว็บไซต์ > 301 - WebsiteStandar.pdf
โฟลเดอร์ช่ือ บทท่ี 3 - มาตรฐานเวบ็ ไซต์ > 302 - WebsiteSecurityStandard.pdf
โฟลเดอร์ชอ่ื บทที่ 3 - มาตรฐานเวบ็ ไซต์ > 303 - WebApplicationSecurityStandard.pdf
โฟลเดอร์ชอ่ื บทที่ 3 - มาตรฐานเว็บไซต์ > 304 - ConsentForInformation.pdf
โฟลเดอรช์ อ่ื บทที่ 3 - มาตรฐานเวบ็ ไซต์ > 305 - GovernmentMobileApplicationStandard.pdf

DPT KM Action Plan 2018

ทปี่ รึกษา

นายมณฑล สดุ ประเสรฐิ

อธบิ ดีกรมโยธาธิการและผงั เมือง
ผบู ริหารสงู สดุ ของสว นราชการ (CEO)
นางสมจติ ปยะศลิ ป

รองอธิบดีกรมโยธาธิการและผงั เมอื ง
ผูนำการบรหิ ารการเปลย่ี นแปลง (CCO)
นายอนวัช สุวรรณเดช

รองอธิบดกี รมโยธาธิการและผงั เมือง
ผูบรหิ ารสูงสดุ ดานการจดั การความรู (CKO)
บรรณาธกิ าร
นางอัญชลี ร้ิวธงชัย

ผอู ำนวยการสถาบันพัฒนาบุคลากรดา นการพฒั นาเมือง
หวั หนา คณะทำงานการจดั การความรู (CKM Team)

นายโชตชิ วง ศรหี ริ ญั รตั น

ผูอ ำนวยการศนู ยเ ทคโนโลยีสารสนเทศ
คณะทำงกานอกงารบจัดรกราณรควาาธมิกรู (าKรM Team)
สถาบนั พัฒนาบคุ ลากรดานการพัฒนาเมอื ง
๑. นายมาโนช ขาวขำ
หัวหนากลุมงานวางแผนและประสานงาน คณะทำงานและเลขานุการ
๒. คณะทำงานและผชู วยเลขานกุ าร
๒.๑ นางสาวไพรินทร ดรุ าศวนิ นักทรพั ยากรบคุ คลชำนาญการพิเศษ
๒.๒ นางสาวจิตกุศล เปาประดิษฐ นกั ทรพั ยากรบคุ คลชำนาญการ
๒.๓ นางสาวอรอุมา อาจปกษา พนกั งานพัฒนาทรัพยากรบุคคล
๒.๔ นางสาวอรณี มีสา พนักงานพัฒนาทรพั ยากรบุคคล
ศูนยเ ทคโนโลยีสารสนเทศ
๑. นางลกั ขณา ขาวขำ หวั หนาฝา ยระบบเครือขายสอื่ สารขอมูลและจัดการฐานขอมูล
๒. นางสาวเยาวรตั น โสธาราพศิ นุกลุ หวั หนาฝายระบบคอมพวิ เตอร
๓. นางอทุ ิศา กมโล หวั หนา ฝายระบบสารสนเทศภมู ิศาสตร
๔. นายอำนาจ ธญั ญเจริญ หวั หนาฝายวชิ าการและปฏบิ ัตกิ ารเทคโนโลยีสารสนเทศ
๕. นายศภุ ฤกษ คำพุฒ นกั วิชาการคอมพิวเตอรชำนาญการ
๖. นายวิรัตน วิเศษงามวศนิ นกั วิชาการคอมพิวเตอรช ำนาญการ
๗. นายประยุทธ เวยี งจันทึก นกั วิชาการคอมพวิ เตอรช ำนาญการ
๘. นางสาวเสาวลักษณ จงวัฒนาภิรมย นักวิชาการคอมพิวเตอรช ำนาญการ
๙. นางสาวสุนาถา มหาชนะวงศ นกั วเิ คราะหน โยบายและแผนชำนาญการ
๑๐. นางสาวองั ศมุ าริณ พนั ธแุ ตง เจาพนักงานธุรการปฏบิ ตั ิงาน
๑๑. นางสาวแพรวทิพา เครือเพช็ ร พนกั งานระบบคอมพิวเตอร
๑๒. นายณัฐเดช เตรียมสกลุ พนกั งานระบบคอมพิวเตอร