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

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

ในที่นจี้ ะเพม่ิ การพิมพข์ ้อความเขา้ มาในภาพ เมือ่ คลิกจะปรากฏดังภาพ สามารถพิมพ์ข้อความและตงั้ คา่ ตา่ งๆ
ท่ีเก่ียวกับขอ้ ความ เชน่ เปลี่ยนแบบอักษร ขนาด สี การจัดรูปแบบ ความทึบ เงา เส้นรอบ ในส่วนของการตรงึ ตาแหนง่
ไมต่ อ้ งกาหนดกไ็ ด้ เพราะเราสามารถเลือ่ นตวั อักษรไปวางในท่ีตอ้ งการได้
เมื่อต้งั ค่าตา่ งๆ เปน็ ท่พี อใจแลว้ เราจะแปลงรูปภาพท้ังหมด ซง่ึ ภาพทีไ่ ดจ้ ะมลี กั ษณะตา่ งๆ ท่เี ราไดต้ ้ังค่าไวเ้ หมอื นกนั
ทกุ ประการ คลิกที่แปลงทัง้ หมด

ภาพที่ 5.4.48 การเลือกภาพ
จะปรากฏแถบบันทึกภาพ
1. เลอื กโฟลเดอรป์ ลายทางท่ีจะบันทึกภาพ
2. การกาหนดชื่อ ในทน่ี ี้ใชช้ ื่อเดมิ
3. เสรจ็ แลว้ คลิกบันทึก

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

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

จากน้นั โปรแกรมจะทาการแปลงภาพทัง้ หมด( 3 ภาพ)

ภาพท่ี 5.4.50 การแปลงรปู ภาพเสรจ็ สิ้น
เมอื่ เสรจ็ แลว้ จะแจ้งสถานะวา่ การแปลงเสร็จแลว้ คลกิ OK
ในกรณีทต่ี อ้ งการจะย้ายตวั อกั ษรในภาพ ไปไวใ้ นตาแหนง่ อืน่ เป็นบางภาพ เมื่อยา้ ยแล้วหากต้องการแปลงเฉพาะภาพ
ท่ที าคอื ภาพปัจจุบัน ให้คลิกท่ี แปลงภาพปัจจุบัน โปรแกรมจะแปลงเฉพาะภาพนั้นภาพเดยี ว

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

DPT KM Action Plan 2018

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

หรือในกรณที ีภ่ าพบางภาพตอ้ งการทาฟิลเตอรท์ ี่แตกต่างออกไป กส็ ามารถแปลงเฉพาะภาพนน้ั ได้ โดยคลกิ ที่แปลง
ภาพปจั จุบนั เชน่ กัน
เมอ่ื ทาเสรจ็ เรียบรอ้ ยแลว้ ภาพทแี่ ปลงแล้วจะถูก Save ไว้ในโฟลเดอร์ output ในโฟลเดอรภ์ าพนั้น

ภาพที่ 5.4.52 แสดงผลการแปลงรูปภาพ ชื่อ Folder output
คลกิ เข้าไปดใู นโฟลเดอร์ ก็จะไดภ้ าพตามทเ่ี ราต้ังค่าและแปลงจากโปรแกรม

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

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

การเปลี่ยนชอ่ื ภาพหลายๆ ภาพในครั้งเดยี ว
การเปล่ียนช่อื ไฟลห์ ลายๆ ไฟล์พรอ้ ม โดยชื่อไฟล์จะอยู่ในรูปแบบเดียวกัน หากมไี ฟล์รปู ภาพท่ีตอ้ งการจะเปล่ียนช่อื ให้
สื่อความหมายถงึ ภาพน้นั แต่ไม่ต้องการมานัง่ เปลย่ี น ที่ละรูป ซ่งึ photoscape จะชว่ ยใหเ้ ราเปล่ยี นชอื่ ไดใ้ นครง้ั เดยี ว
อยา่ งรวดเรว็

ภาพที่ 5.4.54 การเปลย่ี นชือ่ ภาพ
ในตัวอยา่ งเปน็ ไฟล์ภาพทมี่ ชี อ่ื เรียงตามไฟลจ์ ากกล้องดจิ ิตอล ซึ่งต้องการจะเปลย่ี นชอื่ รูปภาพเปน็ barcamp ซึง่ มีเลข
ตง้ั แต่ 01 เป็นตน้ ไป
วธิ กี ารเรมิ่ จากเปดิ โปรแกรม photoscape เลือกการเปลย่ี นชือ่ ไฟล์

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

DPT KM Action Plan 2018

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

เขา้ มาท่ีหน้าตา่ งเปลีย่ นช่ือไฟล์ จะมีการต้ังชื่อไฟล์ให้เลอื ก ซึ่งตัวอยา่ งไฟลจ์ ะแสดงอยดู่ า้ นลา่ ง
ในภาพเลอื กเป็นแบบชื่อไฟล์เดมิ ตามดว้ ยวันท่ใี นรปู แบบ YYYYMMDD ปีเดือนวัน
ชื่อไฟลเ์ ดมิ คือ test.jpg ชอื่ ไฟล์ใหมจ่ ะเปล่ียนเป็น 20120112-test.jpg

ภาพที่ 5.4.56 ตัวอย่างการเปลีย่ นชื่อไฟล์
ซ่งึ รปู แบบของการตั้งช่อื จะมใี หเ้ ลอื กหลายแบบ คลกิ เลือกตามต้องการ

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

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

เราต้องการเปล่ียนชือ่ ไฟลเ์ ปน็ new และตามดว้ ยหมายเลข กเ็ ลือกเปน็ แบบหมายเลข สงั เกตว่าด้านหนา้ และดา้ นหลัง
จะมีช่อื วา่ งใหพ้ ิมพ์ สามารถพมิ พข์ อ้ ความทตี่ อ้ งการเป็นชอ่ื ได้ ในที่น้ีพมิ พ์ว่า new ดา้ นหนา้ และตามดว้ ยหมายเลข
สว่ นด้านหลังไม่ใสอ่ ะไร จากนนั้ เลือกตง้ั คา่ ตัวเลข ด้านบน คือ หมายเลขท่ีจะเริ่ม ด้านล่าง คือ จานวนหลักของตัวเลข ถ้า
เลือก 3 คือจะเป็นเลข 3 หลกั ตง้ั แต่เลขท่เี ราเร่ิมคือ 001 ถา้ เปน็ 4 หลกั จะเปน็ 0001 ตัวอยา่ งช่อื จะแสดงอยูด่ ้านลา่ ง

ภาพที่ 5.4.58 การเปลย่ี นชื่อไฟล์
จากน้นั คลิกท่เี พ่ิมภาพเพือ่ เปิดภาพทีเ่ ราตอ้ งการจะเปลี่ยนชอ่ื เม่ือคลิกเพม่ิ ภาพแล้ว จะได้ดงั ภาพ เลือกภาพที่
ตอ้ งการเปลี่ยนท้ังหมดแล้วคลิกตกลง การเลือกภาพกด Ctrl หรือ Shift คา้ งไว้แล้วคลิกเลอื กภาพ หรอื หากเลอื ก
ท้งั หมดก็ลากเม้าส์คลุม จากน้ันคลิกตกลง

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

DPT KM Action Plan 2018

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

** ในกรณที ่ีไม่ไดก้ ดปุ่มเพ่ิมภาพ สามารถเปิดหน้าตา่ งโฟลเดอรท์ ี่มภี าพทีต่ ้องการเปลย่ี นช่ือ
แลว้ คลิกเลอื กรปู ภาพแล้วลากมาวางทห่ี นา้ ตา่ งเปลยี่ นชอ่ื ไดเ้ ลย

ภาพที่ 5.4.60 การเลือกไฟล์
หลักจากท่ีเพิ่มภาพ หรอื ลากภาพมาวางแลว้ หากตอ้ งการเพิ่มภาพอีกคลิกท่ี เพ่ิมภาพ
หากตอ้ งการลบไฟล์ใดให้คลิกแลว้ กดลบ หรอื หากตอ้ งการลบท้ังหมดเลอื กลบทงั้ หมด
หากต้องการแกไ้ ขชื่อสามารถแกไ้ ขท่ีด้านล่าง เมือ่ เสรจ็ เรยี บรอ้ ยคลกิ ท่ี แปลง

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

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

โปรแกรมจะทาการเปลยี่ นชื่อ กด OK เมอ่ื เสรจ็ สมบรู ณ์

ภาพที่ 5.4.62 การแปลงไฟลเ์ สร็จสมบูรณ์
ชอ่ื ไฟล์ทงั้ หมดจะถูกเปลย่ี นและเรียงตามลาดับเดิม

ภาพท่ี 5.4.63 แสดงผลชื่อไฟล์ทท่ี าการเปล่ยี นแปลง
ทาใหเ้ ราเปลี่ยนชื่อไฟลไ์ ดอ้ ย่างรวดเร็วทีละหลายๆ ไฟล์

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

DPT KM Action Plan 2018

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

การทาภาพเคลอ่ื นไหว
การทาภาพเคลือ่ นไหว จะเปน็ ภาพเคลอื่ นไหวออกแนวสไลดโ์ ชว์ ทน่ี าภาพท่ีต้องการมาใส่ Effect แล้ว Save ไฟลเ์ ปน็
รปู ภาพทม่ี ีนามสกลุ เปน็ gif เพือ่ นาไปตดิ ใน Blog หรืออื่นๆ วิธกี ารทากไ็ มย่ าก เรม่ิ จากเปิดโปรแกรม Photoscape
คลกิ เลอื กเมนภู าพเคล่ือนไหว

ภาพที่ 5.4.64 การทาภาพเคล่ือนไหว
จากนั้นเปดิ โฟลเดอรภ์ าพท่ีต้องการ และลากภาพทตี่ ้องการทาภาพเคลอ่ื นไหวมาใสใ่ นพ้นื ที่งาน

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

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

ภาพทเ่ี ลอื กมาจะปรากฏอยดู่ า้ นบน สามารถคลิกลากรปู เพื่อสลบั ตาแหน่งได้ ด้านขวาจะเปน็ คาสัง่ การตัง้ คา่ ตา่ งๆ
ส่วนดา้ นลา่ งจะเป็นภาพ Preview ของ Animation ทีจ่ ะได้

ภาพท่ี 5.4.66 การแสดงผลรปู ภาพ
มาดสู ่วนบนกอ่ น เป็นส่วนทเี่ ราเลือกรปู และลากมาใส่ จะเหน็ วา่ ดา้ นลา่ ง ตวั เลขในวงเล็บดา้ นหนา้ แสดงลาดับภาพ
และตามมาด้วยเวลาในการเปลีย่ นภาพ
เม่อื คลกิ ท่ีปุม่ > ที่ดา้ นล่างแต่ละภาพ จะสามารถแกไ้ ขเวลาและเลอื กคาส่ังอืน่ ๆ ได้

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

DPT KM Action Plan 2018

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

มาดแู ถบการต้งั ค่าดา้ นขา้ งบ้าง จะมีในส่วนบนคือ
ปมุ่ เพ่ิม = เพม่ิ รปู ภาพลงในสไลด์
บันทกึ = บนั ทึกงานเมื่อเสรจ็ ข้ันตอนการทา
พรีวิวในเว็บเบราซ์เซอร์ = ดูตัวอย่างงานในหนา้ เวบ็ เบราซ์เซอร์
ปมุ่ Play ดา้ นลา่ งถ้ากดไว้ จะแสดงภาพตัวอย่างเป็นแบบเคลอื่ นไหวตลอด
สว่ นต่อมาคือการแก้ไขเวลา นอกจากจะคลกิ ที่ภาพด้านบนแลว้ ยงั สามารถคลกิ เปลยี่ นเวลาไดท้ ี่ปมุ่ นี้ได้
เม่อื คลิกปุ่มแก้ไขเวลาจะปรากฏดังภาพ พิมพต์ ัวเลขเวลาที่ต้องการลงไป ในตัวอย่าง 125 คอื 1.25 วินาที สามารถ
เลอื กไดว้ ่า จะเปลีย่ นเฉพาะเฟรม (ภาพ) ที่เลือก หรอื เปล่ยี นเวลาใหก้ ับทุกเฟรม (ภาพ)

ภาพท่ี 5.4.68 การแก้ไขเวลาแสดง

ปุม่ แกไ้ ขเอฟเฟค มใี หเ้ ลอื ก 8 แบบ

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

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

เมอื่ กาหนดทกุ อยา่ งเรยี บร้อยแลว้ ก็คลกิ ท่บี ันทึก เลอื กท่เี ก็บไฟล์และตัง้ ช่อื ภาพทไ่ี ด้จะเปน็ นามสกุล .gif เม่อื คลิก
แล้วรอสักครโู่ ปรแกรมกาลังทางาน

ภาพท่ี 5.4.70 การแปลงไฟล์
จากนนั้ เม่ือเสร็จเรยี บร้อยจะแจง้ ผลและบอกขนาดไฟล์ ขนาดไฟล์ที่ไดจ้ ากการทาจะคอ่ นข้างใหญ่ ถา้ ต้องการใหไ้ ด้
ขนาดไฟล์ gif ทเ่ี ล็กรปู ที่นามาทา ตอ้ งมขี นาดไมใ่ หญ่มาก

ภาพที่ 5.4.71 การแสดงขนาดไฟล์
มาลบตาหนแิ ละทาหนา้ เนียนกันดีกว่า
สว่ นใหญเ่ วลาถา่ ยภาพบุคคล สงิ่ ท่ีตอ้ งการแก้ไขในภาพถ่ายคงหนไี มพ่ ้นการลบรอยดา รอยสิวตา่ งๆ บนใบหน้า การ
ปรับผิวใหเ้ นียนและขาวขน้ึ ซึง่ ส่วนใหญ่จะใช้โปรแกรม Photoshop เขา้ มาชว่ ยในการปรบั ซ่ึงตอ้ งอาศัยทักษะและ
ความชานาญในการปรับแตง่ ใน Photoscape การปรับแต่งภาพ ได้แก่ การลบรอยตาหนิและการปรับความเนียน
สามารถทาได้ ผลอาจจะได้ไม่ดีเท่า Photoshop แต่วิธีการทาไม่ยาก เปน็ การลบรอยตาหนิและการปรบั แสงใหด้ ู
สวา่ งขึน้ การเลือกปรับกข็ นึ้ อยกู่ บั แต่ละคนชอบแบบไหน

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

DPT KM Action Plan 2018

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

ตาหนิท่ตี ้องการลบ เปน็ รอยดาต่างๆ บนใบหน้า รวมถงึ จุด และไฝตา่ งๆ ภาพยอ่ แล้วเลยเห็นไมช่ ัด

ภาพที่ 5.4.73 การลบตาหนิ
เปดิ โปรแกรม Photoscape ขึ้นมา เลือกแกไ้ ขภาพเปิดรูปท่ีต้องการแก้ไขขึน้ มา
เลอื ก แกไ้ ขเฉพาะจุด > ลบตาหนิ จากน้ันคลกิ เมา้ ส์คลมุ พื้นที่ท่เี ปน็ ตาหนทิ ีต่ อ้ งการลบ แลว้ ปล่อยเมา้ ส์ ตาหนนิ น้ั จะ
เลือนไป ถ้าไม่ไดใ้ นทเี ดยี วให้ทาซ้า ขอ้ ควรระวังคือไม่ควรเลอื กคลุมพ้ืนท่กี วา้ งไป ไม่เชน่ นัน้ จะเป็นรอยไม่เนียน

ภาพท่ี 5.4.74 เครื่องมือการลบ
หลังจากลบรอยดาหมดแล้ว จะเลอื กลบรอยตาหนิผวิ อตั โนมัตอิ กี รอบเพอ่ื เพ่ิมความเนียน โดยไปคลิกที่ ฟลิ เตอร์ >
ลบรอยตาหนผิ ิวอตั โนมตั ิ

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

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

ภาพท่ี 5.4.75 เครือ่ งมือการลบตาหนิ
จากนั้นเลอื่ นปรับ radius ตามตอ้ งการ จะมีคา่ ตง้ั แต่ 0.1 - 0.8 เสร็จแลว้ คลิกตกลง

ภาพท่ี 5.4.76 แสดงผลการลบตาหนิเรยี บร้อย

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

DPT KM Action Plan 2018

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

5.5 การแปลงไฟล์ Document ให้อยใู่ นรูปแบบไฟล์ PDF ดว้ ยโปรแกรม PDFCreator
- การตดิ ตั้งโปรแกรม PDFCreator
1. ให้ดาวน์โหลดโปรแกรม PDFCreator ผ่านทางอนิ เทอร์เนต็ เลอื กเวอรช์ ่นั ฟรี http://www.pdfforge.org/
2. ทาการตดิ ตั้งโปรแกรม โดยดับเบ้ิลคลิกไฟลต์ ิดตั้งทีด่ าวน์โหลดมา และคลกิ Run เลอื กภาษา English แลว้ คลิก OK

ภาพท่ี 5.5.1 ขนั้ ตอนการตดิ ตง้ั โปรแกรม PDFCreator
3. ดาเนนิ การตดิ ตั้งโดยคลิก Next และ Finish จนเสร็จส้ินข้ันตอนการตดิ ตั้ง

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

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

ภาพท่ี 5.5.2 ขั้นตอนการติดตงั้ โปรแกรม PDFCreator
- การใช้งานโปรแกรม PDFCreator เพือ่ การแปลงไฟล์ Document ให้อย่ใู นรูปแบบไฟล์ PDF
1. เปิดโปรแกรม PDFCreator จะปรากฏหน้าจอดงั ภาพ โดยใหค้ ลิกท่ี Choose a File to Convert

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

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

2. ทาการเลอื กไฟลท์ เ่ี อกสารตอ้ งการแปลงให้อยใู่ นรปู แบบไฟล์ PDF

เลอื กไฟลท์ ต่ี อ้ งการ
แปลง
ภาพท่ี 5.5.4 การเลือกไฟลเ์ อกสารท่ตี อ้ งการแปลงให้เปน็ ไฟล์ pdf
3. ให้ระบุรายละเอยี ดต่างๆ ดงั ภาพ เมือ่ เรียบรอ้ ยแลว้ ให้คลกิ ปุม่ Save

1. เลอื กรปู แบบเปน็ pdf
2. กาหนดชื่อไฟล์ pdf

3. กาหนดที่จดั เกบ็ ไฟล์ pdf

4. กดปมุ่

Save

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

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

การลดขนาดไฟล์เอกสาร PDF
วธิ ที ่ี 1 การใช้โปรแกรม Adobe Acrobat Professional

1. เปดิ ไฟล์เอกสาร PDF ทตี่ ้องการลดขนาด (ใช้โปรแกรม Adobe Acrobat Professional)

เลอื กไฟลท์ จ่ี ะลด
ภาพที่ 5.5.6 แสดงขนาดไฟลเ์ อกสาร PDF ขนาด
2. เลือกเมนู Document แลว้ เลอื ก Reduce file size...
1.คลกิ เมนู “Document”

2.เลือกเมนู “Reduce File Size”

ภาพท่ี 5.5.7 แสดงขัน้ ตอนการลดไฟล์เอกสาร

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

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

1.คลิกเลอื ก “Retain existing”

2. คลิก “OK”

ภาพที่ 5.5.8 แสดงขน้ั ตอนการลดไฟลเ์ อกสาร
กอ่ นทีจ่ ะทาการลดขนาดไฟล์ มขี นาด 6.9 MB หลังจากทาการลดขนาดไฟล์ เหลือ 4.6 MB
ไฟลเ์ อกสาร “กอ่ นลดขนาด”

ไฟลเ์ อกสาร “หลงั ลดขนาด”
ภาพที่ 5.5.9 แสดงข้นั ตอนการลดไฟล์เอกสาร

1 กิโลไบต์ (KB) ตารางเปรียบเทยี บ
1 เมกะไบต์ (MB) เทา่ กบั 1,024 ไบต์ (B)
1 กกิ ะไบต์ (GB) เท่ากบั 1,024 กิโลไบต์ (KB)
1 เทระไบต์ (TB) เท่ากบั 1,024 เมกะไบต์ (MB)
1 เพตะไบต์ (PB) เทา่ กบั 1,024 กกิ ะไบต์ (GB)
เท่ากับ 1,024 เทระไบต์ (TB)

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

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

วธิ ที ี่ 2 การลดขนาดใช้แบบ Online
1. เปิดหน้า Web Browser แลว้ พิมพใ์ น URL: http://www.jinapdf.com/thai/compress-pdf-file.php

คลกิ เลอื ก “เลอื กไฟล์ PDF”
ภาพท่ี 5.5.10 คลิกเลอื กไฟล์ “PDF”
แล้วเลือกไฟล์ PDF ทต่ี ้องการลดขนาด ตวั อยา่ งเลอื กไฟล์ชื่อ “VMware+vCenter...”

เลอื กไฟลท์ ต่ี อ้ งการจะ
ลดขนาด

ภาพท่ี 5.5.11 เลอื กไฟลเ์ อกสารท่ีตอ้ งการ

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

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

ภาพท่ี 5.5.12 แสดงการทางานลดขนาดไฟลเ์ อกสาร
2. ก่อนท่จี ะทาการลดขนาดไฟล์ มีขนาด 6.75 MB หลังจากทาการลดขนาดไฟล์ เหลือ 3.91 MB

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



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

การใช้งานโปรแกรม
ถา่ ยโอนขอ้ มลู (FTP)

.................................................................... ....................

6.1 การถ่ายโอนข้อมูลระหวา่ งเครอ่ื งคอมพิวเตอรส์ ่วนบุคคล (Personal Computer) และเคร่อื งแมข่ ่ายคอมพิวเตอร์
(Web Server) ดว้ ยโปรแกรม FileZilla Client
ความหมายของ FTP

FTP (File Transfer Protocol) คอื โพรโทคอลท่ีออกแบบมาเพ่อื ใช้ในการรบั สง่ ไฟล์ระหว่าง Client และ
Server โดยจะมพี อรต์ ทใ่ี ช้งานอยู่ ๒ พอรต์ คือ พอร์ต ๒๐ สาหรับใชใ้ นการรบั สง่ ไฟล์ สว่ นอีกพอรต์ คือ พอร์ต ๒๑
ใช้สาหรบั ควบคุมหรือสง่ คาส่ัง FTP เชน่ ตรวจสอบสิทธ์กิ ารเข้าถึงโปรแกรมจากผ้ใู ชง้ าน ซึง่ ในปจั จุบัน ผูใ้ ห้บรกิ าร
Web Hosting ส่วนใหญม่ กั จะให้บริการแลกเปล่ียนไฟล์ผ่าน FTP Server เพราะการติดตง้ั ระบบและการบริหาร
จัดการไฟลม์ คี วามงา่ ยและสะดวก ในท่นี ี้จะกล่าวถึงโปรแกรม FileZilla Client เปน็ โปรแกรมหนงึ่ ทนี่ ิยมใช้สาหรบั
การรบั ส่งไฟล์ระหว่าง Client และ Server โดยจะติดตง้ั ลงบนเคร่ือง Client
การติดตัง้ FileZilla Client

1. ดาวน์โหลดโปรแกรม FileZilla Client มาติดตง้ั ก่อน สามารถดาวน์โหลดได้จากเว็บไซด์
https://filezilla-project.org จากตัวอยา่ งเปน็ การดาวนโ์ หลด FileZilla Client v.3.29 สาหรบั
Windows 64Bit

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

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

2. เมอ่ื ดาวน์โหลดมาแลว้ ตามตวั อยา่ ง จะได้
ไฟล์ FileZilla_3.29.0_win64-
setup_bundled.exe ให้ Double Click ท่ี
ไฟล์ เพื่อทาการตดิ ต้งั โปรแกรม FileZilla
Client

คลกิ ปมุ่ Run จากนน้ั ในหนา้ License agreement and privacy policy ใหค้ ลิกป่มุ I Agree

3. จากหนา้ Choose Installation
Options ให้เลอื ก Anyone who
users this computer (all
users) จากนัน้ คลิกปุ่ม Next

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

DPT KM Action Plan 2018

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

4. จากหน้า Choose
Components คลิกปมุ่ Next

5. จากหนา้ Choose Install Location ให้เลือกตาแหนง่ ทต่ี ้องการติดตง้ั จากนั้นคลิกป่มุ Next , Next

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

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

6. จากหน้า Choose Start Menu Folder คลิกปมุ่ Next แล้วโปรแกรมจะถูกทาการติดตั้งลงบนเคร่ือง
ผ้ใู ช้งาน
องค์ความรู้เร่ือง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมโยธาธิการและผังเมือง 116

7. เมอื่ ตดิ ตงั้ เสรจ็ แลว้ คลิกปมุ่ Finish

8. เมื่อติดตงั้ เสร็จแลว้ จะได้ไอคอนโปรแกรม ให้ Double Click ท่ไี อคอนโปรแกรม เพือ่ เปดิ ใชง้ าน

DPT KM Action Plan 2018

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

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

การใช้งานโปรแกรม FileZilla Client
1. เพอ่ื การเชื่อมโยงตดิ ตอ่ กบั Server จาก Client จาเป็นท่ีจะตอ้ งทราบขอ้ มูลท่ีจาเป็นจากผู้ให้บริการ Server หรอื

Web Hosting ดงั นี้ (๒.๑)
2.1 Host : ชอ่ื เคร่อื ง Server หรือ Web Hosting อาจอยใู่ นรปู แบบ Domain Name หรอื IP Address
2.2 User Name : ชื่อผใู้ ชง้ านเพ่อื พสิ จู นส์ าหรับการเขา้ ถึงข้อมูล
2.3 Password : รหสั ผา่ นผู้ใช้งาน
2.4 Port : พอร์ตสาหรบั การตดิ ต่อ ซึ่งโดยคา่ ปกติจะเปน็ พอรต์ ๒๑ ท้ังน้ขี ้นึ อยูก่ ับผู้ใหบ้ ริการ
2. เมือ่ เปิดโปรแกรม FileZilla Client ขึน้ มาแลว้ จะมีหน้าต่างโปรแกรมดงั ภาพ

๒.๑
๒.๒ ๒.๓

๒.๔

2.1 สาหรบั ระบขุ อ้ มูลเพอ่ื เขา้ ถึงหรือเช่ือมต่อกับแหล่งเก็บข้อมูลไฟล์เวบ็ ไซต์ตามท่ีไดอ้ ธิบายไว้ในข้อ ๑
2.2 Local Site คอื ส่วนของเครื่องคอมพิวเตอรข์ องผใู้ ช้งาน (My Computer , Drive C, Drive D, ข้อมูลไฟล์

ต่าง ๆ ของเคร่ืองผูใ้ ชง้ าน) หรอื เครื่อง Client
2.3 Remote Site คือส่วนของเครือ่ ง Server หรือ Directory Path ทีผ่ ู้ใชง้ านมสี ิทธเ์ิ ขา้ ถงึ ซ่งึ เป็นท่ีเก็บข้อมลู

ไฟลเ์ วบ็ ไซต์ท่กี าหนดให้โดยผู้ใหบ้ รกิ าร
2.4 ส่วนแสดงสถานะการรับ-สง่ ไฟลร์ ะหว่าง Client กับ Server


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

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

3. ระบุขอ้ มลู Host , User Name , Password , Port แล้วคลิกปุ่ม Quickconnect หรือ Enter
4. เมอ่ื ระบขุ อ้ มูลถูกต้องและเข้าถงึ ขอ้ มูลได้ จะแสดงสถานะ Successful พรอ้ มแสดงขอ้ มลู ไฟล์เวบ็ ไซต์ (Directory

Path ตามสิทธ์ิทไ่ี ด้ถกู กาหนดไว้)
สถานะการเชอ่ื มต่อ
ข้อมูลฝั่ง Remote Site

5. การอพั โหลดไฟล์ขน้ึ Server สามารถทาได้โดยเลือกไฟล์หรอื โฟลเดอร์ที่ต้องการจาก Local site ลากไปวางส่วน
ของ Remote site หรอื คลกิ ขวาบนไฟล์หรอื โฟลเดอร์ทตี่ ้องการครัง้ ละหนึ่งหรอื มากกวา่ แล้วเลอื ก Upload
ระบบจะสง่ ไฟลห์ รือโฟลเดอรท์ ีเ่ ลอื กน้ันไปเกบ็ ไวท้ ่ี Server

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

DPT KM Action Plan 2018

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

6. ในสว่ นของ Remote site หรือ Server สามารถดาวนโ์ หลดมาไว้ท่เี ครอื่ ง Local site แล้วแกไ้ ขไฟลต์ ่าง ๆ
จากน้ันอพั โหลดไฟลท์ แี่ กไ้ ขแล้วไปเก็บไวท้ เ่ี ดมิ ได้ นอกจากน้นั ยงั สามารถจัดการขอ้ มลู ไฟลท์ ั้งการสร้างโฟลเดอร์
ใหม่ เปล่ียนช่ือ ลบ ไฟลห์ รือโฟลเดอร์

7. หลังจากดาเนนิ การจัดการขอ้ มูลไฟลเ์ รียบรอ้ ยแล้ว ควรตดั การเช่ือมตอ่ หรอื หากตอ้ งการตัดการเชื่อมต่อกบั
Server ให้คลกิ ปุ่มเคร่อื งมือ ระบบจะแสดงสถานการเชอื่ มตอ่ เป็น Disconnected
สถานะการเชอื่ มต่อ

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



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

เเรร่ิมิ่มตต้นน้ กกาารรพพััฒฒนนาาเเวว็บบ็ ไไซซตต์์
J..J..oo......oo....mm........ll..aa......33..........88..........................................................................................................................................

77..11 เเรริ่มิม่ เเปปดิดิ หหนนา้า้ เเวว็บ็บไไซซตต์แ์แลละะหหนน้าา้ ผผ้ดู้ดู แููแลลรระะบบบบ
เกกเววรร็บบ็ ณณไไซซีพพี ตตฒัUUัฒขขUU์์ ั้นั้นRRRRนนLLLLตตาาออแแ((((หหหหนนลลนนนนททะะา้า้า้้าปป่ีี่ 11เดเดรรววูแูแับับบ็็บเเลลขขปปไไรร้าา้ซซรระะโโตตงุงุปปบบ์์))บบรร::บบแแนนhh))กก::เเttคคttรรhhppรรมมtt::ือ่ือ่ttใใ//ppชชงง//::llคคง้้ง//ooาาออ//ccนนllมมooaaออพพllccนินิhhaaิวิวooเเllททเเhhssตตออttooออ//รรssชชรรเ์เ์ttนน์์สส่อือื่//ชชว่ว่เเ็ต็ตววอื่ื่อนนบ็็บออเเตตววไไาาซัวซัว็บบ็ททตตไไิิ ซซII์ทท์ EEตต่ีต่ตี ((ท์์ทง้ั้ังIInnชชต่ี่ีตttือ่่อืง้ัั้งeeชชไไrrววอื่ือ่nn้ใใ้ ไไeeนนววttเเใ้ใ้ คคนนEEรรxxเเื่อ่ือคคppงงรรllooื่ออื่ งงrree//aarr))dd,, mmCChhiinnrrooiissmmttrraaeett,,ooFFrriirreeffooxx แแลลว้้วพพมิมิ พพท์ท์ ีอ่อี่ ยยูู่่
กกรรณณพีีพัฒัฒนนาาแแลละะปปรรบัับปปรรุงงุ บบนนเเคครรื่ออ่ื งงแแมม่ข่ขา่่ายยคคออมมพพวิิวเเตตออรร์์ ((WWeebb SSeerrvveerr)) ใใหห้รร้ ะะบบุตตุ าามมรรหหสัสั ขข้ออ้ มมูลูลใในนเเออกกสสาารรทท่ีไไ่ี ดดร้ร้ บับั ไไปป

ภภาาพพทที่ี่ 77..11..11 แแสสดดงงรราายยลละะเเออียยี ดดทที่ี่ใใชช้้ใในนกกาารรเเขข้า้าถถงึงึ หหนน้า้าเเววบ็็บไไซซตตแ์แ์ ลละะหหนนา้า้ ผผู้ด้ดู แูแู ลลรระะบบบบ

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

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

ภาพท่ี 7.1.3 แสดงหน้าผู้ดแู ลระบบ สาหรบั พฒั นาและปรับปรงุ ขอ้ มูลเว็บไซต์
การเปิดหนา้ เว็บไซตแ์ ละหน้าผู้ดแู ลระบบ ผู้สอนแนะนาใหเ้ ปิดพรอ้ มกันทง้ั 2 หน้า พร้อมกนั เพือ่ ให้
สะดวกในการพัฒนาปรบั ปรงุ และรีววิ หรอื รีเฟรชหน้าเว็บไซต์

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

DPT KM Action Plan 2018

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

1

2
3

45 6
7

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

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

ตามภาพท่ี 7.1.5 สามารถอธบิ ายไดด้ งั นี้
1. ระบบเวบ็ ไซต์ Joomla ทต่ี ิดตงั้ Template และแสดงตาแหนง่ การแสดงผล
2. โมดลู ท่มี กี ารทางานท่สี ามารถแสดงผลในตาแหนง่ บนหน้าเวบ็ ไซตไ์ ด้โดยตรง
3. โมดูลท่ีทางานร่วมกับขอ้ มูลภายในระบบเวบ็ ไซต์ Joomla ตามภาพคอื โมดลู ทนี่ าบทความ (7) ทอ่ี ยู่ใน

หมวดหมู่ (6) ไปแสดงผลบนหน้าเวบ็ ไซต์
4. โมดูลท่ีทางานร่วมกบั ขอ้ มูลภายในระบบเว็บไซต์ Joomla ตามภาพคอื โมดลู ทนี่ าเมนู (5) ทมี่ ีการ

เชื่อมโยงกับ บทความ (7) ไปแสดงผลบนหนา้ เว็บไซต์
5. เมนู ทีท่ าการเชอื่ มโยงกับบทความ
6. หมวดหมู่ ของบทความ
7. บทความ ข้อมูลขา่ วสารต่างๆ ที่ไดส้ รา้ งข้ึนเพื่อนาไปแสดงบนหนา้ เว็บไซต์

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

DPT KM Action Plan 2018

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

7.2 การกาหนดคา่ การใชง้ านต่างๆ ของระบบเวบ็ ไซต์ (Global Configuration)
ขั้นตอนที่ 1 เลือกเมนู ระบบ (System) และเลอื กเมนู ตง้ั ค่าระบบหลัก (Global Configuration)

1

ภาพท่ี 7.2.1 แสดงเมนเู พ่อื เข้าถึงการกาหนดค่าต่างๆ ของระบบเวบ็ ไซต์

2
3

4
5

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

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

6

ภาพที่ 7.2.3 แสดงส่วนตั้งค่าหลกั ของระบบ ส่วนเซิรฟ์ เวอร์
ตามภาพท่ี 7.2.2 แสดงส่วนตั้งคา่ หลักของระบบ ส่วนดา้ นหนา้ เว็บไซต์
ขั้นตอนที่ 2 ระบชุ อื่ เวบ็ ไซต์
ขัน้ ตอนท่ี 3 เลือกตัวช่วยเขียนเน้อื หา (เครือ่ งมอื จดั การบทความ (Editor))
ขั้นตอนท่ี 4 ระบุคาอธิบายเว็บไซต์
ขั้นตอนท่ี 5 ระบคุ าสาคญั (การคน้ หาเวบ็ ไซตบ์ นเครือข่ายอินเทอรเ์ น็ต)
ตามภาพที่ 7.2.3 แสดงส่วนตง้ั คา่ หลกั ของระบบ ส่วนเซิรฟ์ เวอร์
ขน้ั ตอนท่ี 6 ระบเุ ขตเวลา (การคน้ หาเว็บไซต์บนเครือขา่ ยอินเทอร์เนต็ )

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

DPT KM Action Plan 2018

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

7.3 การติดตงั้ กาหนดค่าสมาชิก (Member)
ข้นั ตอนท่ี 1 เลอื กเมนู สมาชกิ (Users), เลอื กเมนู การจัดการ (Manage)

12

ภาพที่ 7.3.1 แสดงเมนเู พื่อเข้าถงึ การกาหนดค่าสมาชิก

2

ภาพท่ี 7.3.2 แสดงรายการสมาชิก
ขั้นตอนที่ 2 กดปุ่ม สรา้ งใหม่ เพื่อเพม่ิ สมาชกิ หรอื
ขั้นตอนที่ 2 เลอื กเมนู สมาชกิ (Users), เลอื กเมนู การจดั การ (Manage) และ เลอื กเมนู เพ่มิ สมาชกิ ใหม่
(Add New User)

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

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

8
3

4
5

6
7

ภาพที่ 7.3.3 แสดงสว่ นระบขุ อ้ มลู รายละเอยี ดสมาชกิ
ขั้นตอนท่ี 3 ระบุ ชื่อ-สกลุ สมาชกิ
ข้นั ตอนท่ี 4 ระบุ ชื่อผ้เู ข้าใชร้ ะบบเวบ็ ไซต์ (Username)
ข้ันตอนท่ี 5 ระบุ รหัสผ่าน (Password)
ขั้นตอนที่ 6 ระบุ ยนื ยันรหัสผา่ น
ขน้ั ตอนท่ี 7 ระบุ อเี มล์
ขนั้ ตอนที่ 8 กดปุ่ม บันทึก ข้อมูลรายละเอียดสมาชกิ

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

DPT KM Action Plan 2018

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

7.4 การติดต้ังรูปแบบแสดงผลหนา้ เวบ็ ไซต์ (Template) และการกาหนดคา่ ใช้งาน
ขนั้ ตอนที่ 1 ติดตงั้ เทมเพลต (Template)
ขนั้ ตอนท่ี 1.1 เลือกเมนู ส่วนเสริม (Extensions) เลอื กเมนู การจดั การ(Manage) และเลือกเมนู

ติดต้ัง (Install) หรือ
ขั้นตอนท่ี 1.2 เลอื กเมนู หมวดหมู่ (Categories) ในส่วนของ คอนโทลพาเนล (Control Panel)

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

1.1
1.2

1.4

1.3 1.5

ภาพที่ 7.4.1 แสดงข้นั ตอนการตดิ ต้งั เทมเพลต (Template)
ขน้ั ตอนท่ี 1.3 กดปุม่ ทาการเลอื กไฟล์
ขนั้ ตอนท่ี 1.4 เลอื กไฟล์ เทมเพลต ท่ีตอ้ งการติดตงั้
ขนั้ ตอนที่ 1.5 กดปุ่ม Open เพอื่ เริม่ ติดตั้ง

อบรมเชิงปฏิบัติการ การพัฒนาและบริหารจัดการเว็บไซต์ตามมาปตระรจฐาํ าปนง บเแวปผ็บรนะไกมซาาตรณจ์ภดั าพกค.าศรร.2ัคฐ5ว6า1ม1ร2ู 9

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

ภาพท่ี 7.4.2 แสดงรายการเทมเพลต (Template) ทงั้ หมด
ขนั้ ตอนท่ี 2 ตัง้ ค่าเทมเพลต (Template) ที่ตอ้ งการใชง้ าน

ขน้ั ตอนท่ี 2.1 กดปมุ่ ดาว ด้านหลังชอื่ เทมเพลตที่ตอ้ งการใช้งานให้เป็น สเี หลือง เพื่อกาหนดให้เทม
เพลตที่เลอื กเปน็ เทมเพลตท่จี ะใชง้ าน

2.1

ภาพที่ 7.4.3 แสดงการตงั้ คา่ เทมเพลต (Template) ทีต่ ้องการใช้งาน
DPT KM Action Planอ2บ0ร1ม8 เชิงปฏิบัติการ การพัฒนาและบริหารจัดการเว็บไซต์ตามมาตรฐานเว็บไซต์ภาครัฐ 130

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

ขน้ั ตอนที่ 3 การดูตาแหนง่ เทมเพลต (Template) เพ่อื แสดงผลโมดูล

3.1

3.2

3.3

ภาพท่ี 7.4.4 แสดงขัน้ ตอนการตง้ั คา่ เพือ่ เปดิ ดตู าแหนง่ ของเทมเพลต (Template)
ขัน้ ตอนที่ 3.1 เลอื กเมนู ระบบ และเลือกเมนู ตงั้ ค่าระบบหลกั
ขัน้ ตอนที่ 3.2 เลอื กต้ังคา่ เทมเพลต
ข้นั ตอนท่ี 3.3 กดปมุ่ เปดิ ให้เปน็ สีเขียว
ขัน้ ตอนที่ 3.4 สงั เกตหมายเลข ID ของเทมเพลต

อบรมเชิงปฏิบัติการ การพัฒนาและบริหารจัดการเว็บไซต์ตามมาปตระรจฐาํ าปนงบเแวปผ็บรนะไกมซาาตรณจ์ภดั าพกค.าศรร.2ัคฐ5ว6า1ม1ร3ู 1

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

ขัน้ ตอนที่ 3.5 พมิ พ์ท่ีอย่เู ว็บไซตแ์ ล้วตามดว้ ยข้อความ /?tp=(หมายเลขเทมเพลต)
ขั้นตอนที่ 3.6 ระบบเวบ็ ไซตจ์ ะแสดงตาแหน่งต่างๆ บนหน้าเวบ็ ไซต์

3.4
3.5

3.6

ภาพท่ี 7.4.5 แสดงขน้ั ตอนการเปิดดูตาแหน่งของเทมเพลต (Template)
DPT KM Action Planอ2บ0ร1ม8 เชิงปฏิบัติการ การพัฒนาและบริหารจัดการเว็บไซต์ตามมาตรฐานเว็บไซต์ภาครัฐ 132

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

การกาหนดค่าการใชง้ านเพอ่ื แสดงผลหน้าเว็บไซต์ (Template)
ขั้นตอนที่ 1 เลือกเมนู สว่ นเสรมิ (Extension) และเลอื กเมนู เทมเพลต (Template)

1

ภาพท่ี 7.4.6 แสดงเมนูเทมเพลตเพ่อื การตง้ั ค่าการแสดงผลใหก้ ับระบบ
เมอื่ เลือกเมนูเทมเพลตดงั ภาพที่ 7.4.6 จะแสดงผลหนา้ จอในการจัดการ เทมเพลต : รปู แบบ โดยให้คลิก
เลอื กเทมเพลต Cloudbase3 เพ่ือทาการแก้ไขการแสดงผลของเทมเพลต ดงั ขน้ั ตอนที่ 2 ดงั ภาพท่ี 7.4.2
7.4.1 เทมเพลต (TemplateCloudbase 3)

2

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

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

เมอื่ ดาเนินการ ขนั้ ตอนท่ี 2 ดังภาพที่ 7.4.7 เรียบร้อยแล้วจะแสดงผลหน้าจอหลกั (Overview)
ในการแกไ้ ขเทมเพลต (Template) ดังภาพที่ 7.4.8

3

ภาพท่ี 7.4.8 แสดงสว่ นหนา้ แสดงผลหนา้ จอหลัก (Overview) ของการจัดการเทมเพลต

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

DPT KM Action Plan 2018

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

1
2

3
4
5
6
7
8
9

10
11
12
13
14
15
16
17
18
189

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

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

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

1.1 ส่วนของ Show Logo จะแสดงเมอ่ื มีการต้งั คา่ เป็น ON
1.2 ส่วนของ Position คือการเลือกตาแหน่งทีต่ อ้ งการให้ Logo แสดง
1.3 ส่วนของ Type หากเลือกเปน็ Cloudbase Template จะแสดง Logo เป็น Default หากตอ้ งการ

เลือกรปู ภาพเองให้เลอื ก Custom
ข้นั ตอนที่ 2 แก้ไข Custom Logo

2.1 จะแสดงเม่ือตั้งคา่ Type จาก ขัน้ ตอนท่ี 1 เป็น Custom
2.2 เลือก Select เพื่อเลือกรปู ภาพที่ต้องการนามาเป็น Logo
ขัน้ ตอนท่ี 3 แกไ้ ข Body Style
3.1 สว่ นของ Background Color : การแก้ไขสขี อง Background
3.2 ส่วนของ Text Color : การแกไ้ ขสขี อง text ทแี่ สดงในสว่ นของ Body
3.3 ส่วนของ Link Color : การแกไ้ ขสีของ Link ทแี่ สดงผลในสว่ นของ Body
3.4 สว่ นของ Heading Color : การแก้ไขสีของ Heading ที่แสดงผลในส่วนของ Body
3.5 ส่วนของ Button Background Color : การแก้ไขสีพนื้ หลงั ของปมุ่ ซ่งึ แสดงผลในสว่ นของ Body
3.6 ส่วนของ Button Text Color : การแก้ไขตวั อกั ษรทแี่ สงในป่มุ ซง่ึ แสดงผลในสว่ นของ Body
3.7 สว่ นของ Button Border Color : การแก้ไขสีของเส้นของของปุม่ ซงึ่ แสดงผลในส่วนของ Body
3.8 ส่วนของ Background Pattern : การแก้ไขลวดลายของพ้นื หลังในส่วนของ Body
ข้นั ตอนท่ี 4 แก้ไข Header Style
4.1 สว่ นของ Header Style : เลอื กได้วา่ ต้องการให้ Header แสดงผลเป็น Theme สว่างหรือ มดื
4.2 สว่ นของ Top Border Gradient Start : แก้ไขสขี องเสน้ ดา้ นบนของ Header
4.3 ส่วนของ Top Border Gradient End : แกไ้ ขสีของเสน้ ดา้ นล่างของ Header
ขน้ั ตอนท่ี 5 แก้ไข Menu Style
5.1 ส่วนของ Border Width : กาหนดความหน้าของเส้นกรอบในสว่ นของ Menu
5.2 ส่วนของ Top Border Color : กาหนดสีของเส้นกรอบด้านบนของ Menu
5.3 ส่วนของ Bottom Border Color : กาหนดสีของกรอบด้านลา่ งของ Menu
5.4 สว่ นของ Text Color : กาหนดสีของตวั อกั ษรใน Menu
5.5 ส่วนของ Active and Hover Text Color : กาหนดสี Font เมือ่ เมาสไ์ ปช้ี
5.6 สว่ นของ Active and Hover Background Color : กาหนดสี Back ground เมือ่ เมาสไ์ ปช้ี
ขน้ั ตอนที่ 6 แก้ไข Menu Dropdown Style
6.1 สว่ นของ Background Color : แกไ้ ขสีพ้นื หลังของ Menu Dropdown
6.2 สว่ นของ Subtext Color : แกไ้ ข้สีตัวอักษรของเมนูยอ่ ย
6.3 สว่ นของ Active and Hover Text Color : กาหนดสี Font เมอ่ื เมาสไ์ ปชี้
6.4 สว่ นของ Active and Hover Background Color : กาหนดสี Back ground เมอ่ื เมาส์ไปชี้

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

DPT KM Action Plan 2018

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

ข้นั ตอนที่ 7 แกไ้ ข Showcase Style
7.1 สว่ นของ Gradient Direction : กาหนด Gradient Direction ของ Bottom Style
7.2 สว่ นของ Gradient Start : กาหนด Gradient Start ของ Bottom Style
7.3 ส่วนของ Gradient End : กาหนด Gradient End ของ Bottom Style
7.4 สว่ นของ Text Color : กาหนด Text Color ของ Bottom Style
7.5 ส่วนของ Heading Color : กาหนด Heading Color ของ Bottom Style
7.6 สว่ นของ Link Color : กาหนด Link Color ของ Bottom Style
7.7 สว่ นของ Background Pattern : กาหนด Background Pattern ของ Bottom Style

ขั้นตอนท่ี 8 แก้ไข Feature Style
8.1 ส่วนของ Background Color : กาหนดสีของพ้ืนหลงั ของ Feature
8.2 สว่ นของ Text Color : กาหนดสีของตวั อักษรใน Feature
8.3 ส่วนของ Heading Color : กาหนดสีของ Heading ใน Feature
8.4 สว่ นของ Link Color : กาหนดสขี อง Link ใน Feature
8.5 สว่ นของ Background Pattern : เลือกลวดลายใหก้ บั พืน้ หลังของ Feature

ขน้ั ตอนที่ 9 แก้ไข Maintop, Mainbottom, Extension, Utility, Breadcrumbs, Drawer Style
9.1 ส่วนของ Text Color : กาหนดสีของตัวอกั ษร
9.2 ส่วนของ Heading Color : กาหนดสีของ Heading
9.3 ส่วนของ Link Color : กาหนดสีของ Link

ขนั้ ตอนท่ี 10 แกไ้ ข Bottom Style
10.1 ส่วนของ Gradient Direction : กาหนด Gradient Direction ของ Bottom Style
10.2 สว่ นของ Gradient Start : กาหนด Gradient Startของ Bottom Style
10.3 สว่ นของ Gradient End : กาหนด Gradient End ของ Bottom Style
10.4 ส่วนของ Text Color : กาหนด Text Colorของ Bottom Style
10.5 ส่วนของ Heading Color : กาหนด Heading Colorของ Bottom Style
10.6 สว่ นของ Link Color : กาหนด Link Colorของ Bottom Style
10.7 สว่ นของ Background Pattern : กาหนด Background Patternของ Bottom Style

ขน้ั ตอนที่ 11 แกไ้ ข Footer Style
11.1 สว่ นของ Background Color : กาหนดสขี องพื้นหลงั ของ Footer
11.2 ส่วนของ Text Color : กาหนดสขี องตัวอักษรใน Footer
11.3 สว่ นของ Heading Color : กาหนดสีของ Heading ใน Footer
11.4 ส่วนของ Link Color : กาหนดสขี อง Link ใน Footer
11.5 สว่ นของ Background Pattern : เลือกลวดลายให้กบั พน้ื หลังของ Footer

ข้ันตอนที่ 12 แกไ้ ข Copyright Style
12.1 สว่ นของ Background Color : กาหนดสขี องพนื้ หลงั ของ Copyright
12.2 สว่ นของ Text Color : กาหนดสขี องตัวอกั ษรใน Copyright
12.3 ส่วนของ Heading Color : กาหนดสีของ Heading ใน Copyright
12.4 สว่ นของ Link Color : กาหนดสีของ Link ใน Copyright
12.5 สว่ นของ Background Pattern : เลือกลวดลายให้กับพืน้ หลังของ Copyright
องค์ความรู้เรื่อง คู่มือการพัฒนาเว็บไซต์ สาหรับหน่วยงานสังกัดกรมปโรยะธจาาํ ธปิกงบาแปรผรแนะลกมาะารณผจังดั พเกม.าศือร.2คง5ว6า1ม1ร3ู 7

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

ข้ันตอนท่ี 13 แกไ้ ข Module Variation Box3 Style
13.1 ส่วนของ Link Color : การแก้ไขสีของ Link ท่ีแสดงผลในส่วนของ Variation Box3
13.2 ส่วนของ Background Color : การแก้ไขสีของ Variation Box3
13.3 สว่ นของ Text Color : การแก้ไขสีของ text ทแ่ี สดงในส่วนของ Variation Box3
13.4 สว่ นของ Heading Color : การแก้ไขสีของ Heading ท่ีแสดงผลในส่วนของ Variation Box3
13.5 สว่ นของ Button Background Color : การแกไ้ ขสพี ื้นหลังของปุ่มซึ่งแสดงผล
13.6 ส่วนของ Button Text Color : การแก้ไขตัวอักษรท่ีแสงในปุ่ม
13.7 ส่วนของ Button Border Color : การแกไ้ ขสีของเสน้ ขอบของของปุ่ม

ขนั้ ตอนท่ี 14 แกไ้ ข Title Variation Title3 Style
14.1 ส่วนของ Backgroun Color : แกไ้ ขสีพน้ื หลัง
14.2 ส่วนของ Text Color : แกไ้ ขสีตวั อกั ษร

ขัน้ ตอนที่ 15 แก้ไข Title Variation Title4 Style
15.1 ส่วนของ Backgroun Color : แกไ้ ขสพี ื้นหลัง
15.2 สว่ นของ Text Color : แก้ไขสีตัวอกั ษร

ข้นั ตอนท่ี 16 แกไ้ ข Social Icon Style
16.1 สว่ นของ Icon Color : แกไ้ ขสขี อง Social Icon
16.2 สว่ นของ Border : เปิดปิดเสน้ ขอบ
16.3 ส่วนของ Border Color : แกไ้ ขสเี ส้นขอบ

ขัน้ ตอนท่ี 17 แกไ้ ข Branding Logo
17.1 สว่ นของ theme : กาหนด Theme ของ Branding Logo

ข้นั ตอนท่ี 18 แกไ้ ข Scroll To Top Style
18.1 ส่วนของ Background Color : กาหนดสีพ้ืนหลัง
18.2 สว่ นของ Border Color : แกไ้ ขสีเสน้ ขอบ

ข้ันตอนที่ 19 แก้ไข Scroll To Top Style
19.1 ส่วนของ Background Color : กาหนดสีพื้นหลงั
19.2 สว่ นของ Border Color : แกไ้ ขสีเส้นขอบ

ขั้นตอนที่ 20 แกไ้ ข Font Settings
20.1 ส่วนของ Font Family : กาหนดชนิด Font
20.2 ส่วนของ Font Size : กาหนดขนาด Font

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

DPT KM Action Plan 2018

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

1
2
3
4
5
6
7
8
9

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

1.1 ส่วนของ Show : แสดงเมื่อมีการตั้งค่าเป็น ON
1.2 ส่วนของ Position : การเลอื กตาแหนง่ ทต่ี ้องการให้ Date แสดง
1.3 ส่วนของ Client Side Data : ใช้ขอ้ มูล Date โดยอ้างอิงจากข้อมูลฝัง่ ผู้ใช้
1.4 ส่วนของการเลอื กรูปแบบการแสดงผลของ Date
ขั้นตอนท่ี 2 แกไ้ ข Font-Sizer
2.1 สว่ นของ Show : แสดงเม่ือมีการตั้งค่าเป็น ON
2.2 ส่วนของ Position : การเลอื กตาแหนง่ ท่ีต้องการให้ Font-Sizer แสดง

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

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

ขน้ั ตอนท่ี 3 แก้ไข Branding
3.1 สว่ นของ Show : แสดงเม่อื มีการต้ังค่าเป็น ON
3.2 ส่วนของ Position : การเลือกตาแหน่งทต่ี อ้ งการให้ Branding แสดง

ขน้ั ตอนท่ี 4 แก้ไข To-Top Scroller
4.1 สว่ นของ Show จะแสดงเมื่อมีการตง้ั ค่าเป็น ON

ข้ันตอนที่ 5 แกไ้ ข System Messages
5.1 ส่วนของ Show : แสดงเมือ่ มกี ารตั้งคา่ เป็น ON
5.2 ส่วนของ Position : การเลือกตาแหนง่ ท่ีตอ้ งการให้ System Messages แสดง

ขั้นตอนท่ี 6 แก้ไข Reset Settings
6.1 ส่วนของ Show : แสดงเม่ือมีการต้ังคา่ เปน็ ON
6.2 ส่วนของ Position : การเลือกตาแหนง่ ทีต่ อ้ งการให้ Reset Settings แสดง
6.3 ส่วนของ Text : กาหนดข้อความที่แสดงในสว่ นของ Reset Settings

ขัน้ ตอนท่ี 7 แก้ไข Google Analytics
7.1 ส่วนของ Enable : มกี ารใช้งานเมื่อมีการต้ังคา่ เป็น ON
7.2 สว่ นของ UA Code : สาหรบั กรอก UA Code ทไ่ี ดจ้ าก Google Analytics

ข้ันตอนท่ี 8 แก้ไข Equal heights
8.1 ส่วนของ Enable : มีการใช้งานเมอื่ มีการต้ังค่าเป็น ON

ข้ันตอนที่ 9 แกไ้ ข Social Icons
9.1 ส่วนของ Show : แสดงเม่อื มกี ารตั้งค่าเป็น ON
9.2 สว่ นของ Position : การเลือกตาแหนง่ ทีต่ ้องการให้ Social Icons แสดง
9.3 สว่ นของ Facebook link : กรอก Link Facebook ท่ตี อ้ งการ
9.4 สว่ นของ Twitter link : กรอก Link Twitter ท่ีต้องการ
9.5 สว่ นของ Youtube link : กรอก Link Youtube ท่ีต้องการ
9.6 สว่ นของ Google Plus link : กรอก Link Google Plus ที่ตอ้ งการ

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

DPT KM Action Plan 2018