Page 1
Chapter 3: ปรบแตงเวบไซต
ระบบปรบแตงเวบไซต เปนระบบทใชบรหารจดการรปแบบเวบไซต รปแบบการแสดงผลของหนาจอในสวนของ Frontend โดยจดการผานระบบ Backend เปนหนาจอทใชส าหรบเรยกดรปแบบเวบไซตทงหมดในระบบ สามารถท าการรปแบบเวบไซตใหมความสวยงาม การเลอกใชเทมเพลต รวมไปถงภาษาทใชบนหนาเวบ โดยผทมสทธเขาใชจะตองม Role (สทธการเขาถง) เปนผดแลระบบเทานน
หวขอยอย
วดเจต
เลยเอาต
เทมเพลต
หนา Intro
Page 2
วดเจต
ผดแลระบบจะตองท าการเขาสระบบ (Login) และเลอกเมน “ปรบแตงเวบไซต” จากนนเลอก “วดเจต” เปนหนาจอส าหรบการปรบแตงหนาเวบไซต รวมทงการเพม CSS เพอใหเวบไซตเปนไปตามความตองการได โดยสามารถแบงออกเปน 15 หวขอ ดงรป
Page 3
1. ปมบนทกวดเจต 2. ปมลบวตเจต 3. ปมแสดง/ไมแสดงวดเจต 4. ปม Move To Store 5. ปมพนหลง 6. ปม CSS 7. ปมเปด/ปดเวบไซต 8. การคนหา
9. สวนของ Wrapper Bar 10. สวนของ Header 11. สวนจดการวดเจตตางๆ 12. สวนของ Section-center และ Body 13. สวนของ Section-side 14. สวนของ Wrapper-Bottom 15. ปมแกไข
Page 4
1. ปมบนทกวดเจต
เมอท าการแกไขสวนตางๆ เชน การยายวดเจต ใหกดปม “บนทก”
2. ปมลบวดเจต
2.1 การลบวดเจตทละรายการ : คลกท “ ” ตรงวดเจตทตองการลบ จากนนเลอก “ ลบ ”
2.2 การลบวดเจตทละหลายรายการ : เลอกรายการวดเจตทตองการลบ โดยคลกทกลอง Checkbox ดานซายสด จากนนคลกปม “ลบ” ดงรป
หมายเหต
ระบบจะแสดง Pop-up เพอยนยนการท ารายการ ใหคลกปม “ยอมรบ”
Page 5
3. ปมแสดง/ไมแสดงวดเจต
หมายเหต
สญลกษณ “ ” คอ แสดงวดเจต
สญลกษณ “ ” คอ ไมแสดงวดเจต
3.1 การแสดง/ไมแสดงวดเจตทละรายการ : คลกปม “ ” หรอ “ ” ตรงวดเจตทตองการแสดง/ไมแสดง
3.2 การแสดง/ไมแสดงวดเจตทละหลายรายการ : เลอกรายการวดเจตทตองการแสดง/ไมแสดง โดยคลกทกลอง Checkbox ดานซายสด จากนนคลกปม “แสดง” หรอ “ไมแสดง” ดงรป
หมายเหต
ระบบจะแสดง Pop-up เพอยนยนการท ารายการ ใหคลกปม “ยอมรบ”
Page 6
4. ปม Move To Store
4.1 การ Move To Store วดเจตทละรายการ : คลกปม “ ” ตรงวดเจตทตองการจากนนเลอก “ Move To Store ”
4.2 การ Move To Store วดเจตทละหลายรายการ : เลอกรายการวดเจตทตองการ Move To Store โดยคลกทกลอง Checkbox ดานซายสด จากนนคลกปม “Move To Store” ดงรป
หมายเหต
ระบบจะแสดง Pop-up เพอยนยนการท ารายการ ใหคลกปม “ยอมรบ”
Page 7
5. ปมพนหลง
5.1 รปแบบพนหลงกรณใชตาม Template
5.2 รปแบบพนหลงกรณใชรปภาพเปนพนหลง
หมายเหต
ลอค คอ การลอคพนหลงไมใหเลอนไปกบเนอหาของเวบไซต
Page 8
5.3 รปแบบพนหลงกรณใชสเปนพนหลง
6. ปม CSS
เมอคลกแลวจะแสดง หนาจอ Pop-up การปรบแตง CSS ดงรป
Page 9
7. ปมเปด/ปดเวบไซต
เมอคลกแลวจะแสดง หนาจอ Pop-up การเปด/ปดการใชงานเวบไซต ดงรป
7.1 กรณทปดการใชงานเวบไซตใชงานตามเทมเพลต
Page 10
7.2 กรณทปดการใชงานเวบไซตใชงานแบบก าหนดเอง
8. การคนหา
Page 11
9. สวนของ Wrapper Bar
เหมาะส าหรบใชแสดงวดเจต ลอคอน ภาษา และ ตะกราสนคา
10. สวนของ Header
10.1 ปมแกไขโลโกและสโลแกน : ใชส าหรบปรบแตงโลโก, ชอเวบไซต, สโลแกน เมอคลกแลวจะแสดง Pop-up การแกไขโลโก ดงรป
Page 12
10.2 ปมแกไขพนหลงสวนหว : เมอคลกแลวจะแสดง หนาจอ Pop-up การแกไขพนหลงสวนหว 1. กรณทเลอกใชตาม Template
2. กรณทเลอกใชรปภาพเปนพนหลง
3. กรณทเลอกใชแฟลช
Page 13
11. สวนจดการวดเจตตางๆ
11.1 วดเจตบทความ
Page 16
11.4 วดเจตแบนเนอร
Page 17
11.5 วดเจตเวบบอรด
11.6 วดเจตสมาชก
Page 18
11.7 วดเจตตดตอเรา
11.8 วดเจตค าถามทพบบอย
Page 19
11.9 วดเจตคนหา
11.10 วดเจตเมน
Page 20
11.1 วดเจตอนๆ
12. สวนของ Section-center และ Body
12.1 Section-center : ใชส าหรบจดการวดเจตตางๆ เชน วดเจตเมน วดเจตแบนเนอร วดเจตบทความ วดเจตสนคา เปนตน ดงรป
12.2 Body : ใชส าหรบแสดงเนอหาของเวบไซต (ยกเวนหนาหลกเวบไซต) ดงรป
Page 21
13. สวนของ Section-side
ใชส าหรบจดการวดเจตตางๆ เชน วดเจตเมน วดเจตแบนเนอร วดเจตบทความ วดเจตสนคา เปนตน
14. สวนของ Wrapper-Bottom
ใชส าหรบจดการวดเจตตางๆ เชน วดเจตเมน วดเจตแบนเนอร วดเจตบทความ วดเจตสนคา เปนตน
15. ปมแกไข
ใชส าหรบปรบแตง Footer โดยคลกทปม “ ” จะแสดง หนาจอ Pop-up การแกไข Footer ดงรป
Page 22
เพมเตม Widget Store เปนสวนทสามารถเกบ widget ทสรางแลว แตยงไมตองการใช เพอความสะดวกในการ
จดการ Widget โดยการเลอก widget ทตองการเกบ คลก แลว ลากลงมาเกบใสสวน Widget Store ดงรป
Page 23
เลยเอาต
หนาจอจดการเลยเอาต เปนหนาจอส าหรบการเลอกใช และจดการ ในสวนของการวาง Layout ของเวบไซตโดยรวม สามารถแบงออกเปน 5 หวขอ ดงรป
1. การเพมเลยเอาต 2. การลบเลยเอาต 3. การเปด/ปดใชงานเลยเอาต
4. การคนหาเลยเอาต 5. ตารางแสดงรายการเลยเอาต
Page 24
1. การเพมเลยเอาต
คลกปม “เพม” สามารถเลอกใชเลยเอาตทแตกตางกนออกไป ส าหรบหนาตางๆ เชน หนาแรกใช เลยเอาต L001และ หนาบทความ ใช เลยเอาต L002 เปนตน
1. เลยเอาต : เลอกรปแบบเลยเอาตทจะใช ซงม 11 รปแบบดวยกน คอ L001,L002 ,L003 ,L004 ,L005 ,L006 ,L007 ,L008 ,L009 ,L010, L011
2. หนาหลก : เลอกหนาทตองการใชรปแบบเลยเอาต เชน หนาหลก หนาการตดตอ 3. การแสดง : เปนการเลอกใช หรอ ไมใชเลยเอาต
Page 25
2. การลบเลยเอาต
2.1 การลบเลยเอาตทละรายการ : คลกปม “ ” ตรงรายการเลยเอาตทตองการลบ
2.2 การลบเลยเอาตทละหลายรายการ : เลอกรายการเลยเอาตทตองการลบ โดยคลกทกลอง Checkbox ดานซายสด จากนนคลกปม “ลบ” ดงรป
หมายเหต
ระบบจะแสดง Pop-up เพอยนยนการท ารายการ ใหคลกปม “ยอมรบ”
หนาทลบเลยเอาตออกนน จะแสดงเปนคา Default ของ Template ทเลอก
Page 26
3. การเปด/ปดใชงานเลยเอาต
หมายเหต
สญลกษณ “ ” คอ เปดใชงาน (แสดงบนหนาเวบไซต)
สญลกษณ “ ” คอ ปดใชงาน (ไมแสดงบนหนาเวบไซต)
3.1 การเปด/ปดใชงานเลยเอาตทละรายการ : คลกท “ ” หรอ “ ” ตรงรายการเลยเอาตทตองการเปด/ปด การใชงาน
3.2 การเปด/ปดใชงานเลยเอาตทละหลายรายการ : เลอกรายการเลยเอาตทตองการเปด/ปด การใชงาน โดยคลกทกลอง Checkbox ดานซายสด จากนนคลกปม “ใชงาน” หรอ “ไมใชงาน” ดงรป
หมายเหต
ระบบจะแสดง Pop-up เพอยนยนการท ารายการ ใหคลกปม “ยอมรบ”
Page 27
4. การคนหาเลยเอาต
1. Layout : เลอกรปแบบเลยเอาตทตองการคนหา และ เลอกสถานการณใชงานเลยเอาตคอ ใชงาน และ ไมใชงาน
2. หนาหลก : เลอกหนาทตองการคนหา
5. ตารางแสดงรายการเลยเอาต
1. หนา : แสดงชอหนาเวบไซต 2. Layout : แสดงรปแบบ Layout ทเลอก
3. ใชงาน : แสดงการใชงาน “ ” หรอ ไมใชงาน “ ” ของเลยเอาต 4. จดการ : มรายการดงน
ปมประวต : คลกท “ ” ตรงรายการเลยเอาตทตองการดประวต
ปมแกไข : คลกท “ ” ตรงรายการเลยเอาตทตองการแกไข
ปมลบ : คลกท “ ” ตรงรายการเลยเอาตทตองการลบ
Page 28
เทมเพลต
หนาจอเปลยนเทมเพลตเปนหนาจอส าหรบใหเจาของเวบไซตเลอกใชเทมเพลตททาง SoGoodWeb เตรยมไวให และมการแสดงเทมเพลตทก าลงใชอยในปจจบน รายละเอยดเบองตนของเทมเพลตประกอบไปดวย ชอเทมเพลต วนทเทมเพลตเปดใหใชงาน ตวเลอกใชเทมเพลต และ จ านวนผใชงานเทมเพลต ในสวนของ “เปลยนเทมเพลต” สามารถแบงออกเปน 4 หวขอ ดงรป
1. เทมเพลตทใชอย 2. รายการเทมเพลต
3. ปม Live Preview และ Detail 4. ใชงานเทมเพลต
Page 29
1. เทมเพลตทใชอย
เปนสวนส าหรบแสดงเทมเพลตและรายละเอยดของเทมเพลตทเจาของเวบไซตก าลงเลอกใชงานอย
2. รายการเทมเพลต
เปนสวนส าหรบแสดงเทมเพลตและรายละเอยดของเทมเพลตท sogoodweb มใหเลอกใชงาน โดยสามารถเลอกคนหาเทมเพลตตามหมวดหมได
3. ปม Live Preview และ Detail
คลกเลอกเพอแสดงตวอยาง หรอ รายละเอยดเกยวกบเทมเพลต
4. ใชงานเทมเพลต
คลก “ ใชงานเทมเพลต” เพอเลอกใชเทมเพลตทตองการ
Page 30
หนา Intro
หนาจอตงคาหนา Intro เปนหนาจอส าหรบเปด/ปด หนา Intro กอนเขาสเวบไซต โดยสามารถเลอกไดทงแบบท Template เตรยมไวให แบบรปภาพ วดโอ ไฟลแฟลช หรอก าหนดเอง คา Default จะเปนใชรปแบบตาม Template ในสวนของ “หนา Intro” สามารถแบงออกเปน 5 กรณ
1. กรณรปแบบใชตามเทมเพลต 2. กรณรปแบบรปภาพ 3. กรณรปแบบวดโอ
4. กรณรปแบบแฟลช 5. กรณรปแบบก าหนดเอง
Page 31
1. กรณรปแบบใชตามเทมเพลต
จะใชตามทเทมเพลตใหมา
2. กรณรปแบบรปภาพ
สามารถเลอกอพโหลดรปภาพทตองการ เพอเลอกเปนหนา Intro และกรอกขอความลงก เพอลงกไปยงหนาหลก หรอหนาอนทตองการแสดง
Page 32
3. กรณรปแบบวดโอ
สามารถเลอกอพโหลดวดโอทตองการ หรอใช URL วดโอ ใน web browser ตางๆ ในการแสดงหนา Intro และกรอกขอความลงก เพอลงกไปยงหนาหลก หรอหนาอนทตองการแสดง
4. กรณรปแบบแฟลช
สามารถเลอกอพโหลดไฟลแฟลตทตองการ เพอเลอกเปนหนา Intro และกรอกขอความลงก เพอลงกไปยงหนาหลก หรอหนาอนทตองการแสดง
Page 33
5. กรณรปแบบก าหนดเอง
สามารถเลอกปรบแตงหนา Intro ดวยตวเอง โดยใชขอความ , ภาพ หรอ Css&html