Chapter 3: ปรับแต่งเว็บไซต์Chapter 3: ปร บแต งเว...

Chapter 3: ปรบแตงเวบไซต

ระบบปรบแตงเวบไซต เปนระบบทใชบรหารจดการรปแบบเวบไซต รปแบบการแสดงผลของหนาจอในสวนของ Frontend โดยจดการผานระบบ Backend เปนหนาจอทใชส าหรบเรยกดรปแบบเวบไซตทงหมดในระบบ สามารถท าการรปแบบเวบไซตใหมความสวยงาม การเลอกใชเทมเพลต รวมไปถงภาษาทใชบนหนาเวบ โดยผทมสทธเขาใชจะตองม Role (สทธการเขาถง) เปนผดแลระบบเทานน

หวขอยอย

วดเจต

เลยเอาต

เทมเพลต

หนา Intro

วดเจต

ผดแลระบบจะตองท าการเขาสระบบ (Login) และเลอกเมน “ปรบแตงเวบไซต” จากนนเลอก “วดเจต” เปนหนาจอส าหรบการปรบแตงหนาเวบไซต รวมทงการเพม CSS เพอใหเวบไซตเปนไปตามความตองการได โดยสามารถแบงออกเปน 15 หวขอ ดงรป

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. ปมแกไข

1. ปมบนทกวดเจต

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

2. ปมลบวดเจต

2.1 การลบวดเจตทละรายการ : คลกท “ ” ตรงวดเจตทตองการลบ จากนนเลอก “ ลบ ”

2.2 การลบวดเจตทละหลายรายการ : เลอกรายการวดเจตทตองการลบ โดยคลกทกลอง Checkbox ดานซายสด จากนนคลกปม “ลบ” ดงรป

หมายเหต

ระบบจะแสดง Pop-up เพอยนยนการท ารายการ ใหคลกปม “ยอมรบ”

3. ปมแสดง/ไมแสดงวดเจต

หมายเหต

สญลกษณ “ ” คอ แสดงวดเจต

สญลกษณ “ ” คอ ไมแสดงวดเจต

3.1 การแสดง/ไมแสดงวดเจตทละรายการ : คลกปม “ ” หรอ “ ” ตรงวดเจตทตองการแสดง/ไมแสดง

3.2 การแสดง/ไมแสดงวดเจตทละหลายรายการ : เลอกรายการวดเจตทตองการแสดง/ไมแสดง โดยคลกทกลอง Checkbox ดานซายสด จากนนคลกปม “แสดง” หรอ “ไมแสดง” ดงรป

หมายเหต

ระบบจะแสดง Pop-up เพอยนยนการท ารายการ ใหคลกปม “ยอมรบ”

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 เพอยนยนการท ารายการ ใหคลกปม “ยอมรบ”

5. ปมพนหลง

5.1 รปแบบพนหลงกรณใชตาม Template

5.2 รปแบบพนหลงกรณใชรปภาพเปนพนหลง

หมายเหต

ลอค คอ การลอคพนหลงไมใหเลอนไปกบเนอหาของเวบไซต

5.3 รปแบบพนหลงกรณใชสเปนพนหลง

6. ปม CSS

เมอคลกแลวจะแสดง หนาจอ Pop-up การปรบแตง CSS ดงรป

7. ปมเปด/ปดเวบไซต

เมอคลกแลวจะแสดง หนาจอ Pop-up การเปด/ปดการใชงานเวบไซต ดงรป

7.1 กรณทปดการใชงานเวบไซตใชงานตามเทมเพลต

7.2 กรณทปดการใชงานเวบไซตใชงานแบบก าหนดเอง

8. การคนหา

9. สวนของ Wrapper Bar

เหมาะส าหรบใชแสดงวดเจต ลอคอน ภาษา และ ตะกราสนคา

10. สวนของ Header

10.1 ปมแกไขโลโกและสโลแกน : ใชส าหรบปรบแตงโลโก, ชอเวบไซต, สโลแกน เมอคลกแลวจะแสดง Pop-up การแกไขโลโก ดงรป

10.2 ปมแกไขพนหลงสวนหว : เมอคลกแลวจะแสดง หนาจอ Pop-up การแกไขพนหลงสวนหว 1. กรณทเลอกใชตาม Template

2. กรณทเลอกใชรปภาพเปนพนหลง

3. กรณทเลอกใชแฟลช

11. สวนจดการวดเจตตางๆ

11.1 วดเจตบทความ

11.2 วดเจตสนคา

11.3 วดเจตอลบม

11.4 วดเจตแบนเนอร

11.5 วดเจตเวบบอรด

11.6 วดเจตสมาชก

11.7 วดเจตตดตอเรา

11.8 วดเจตค าถามทพบบอย

11.9 วดเจตคนหา

11.10 วดเจตเมน

11.1 วดเจตอนๆ

12. สวนของ Section-center และ Body

12.1 Section-center : ใชส าหรบจดการวดเจตตางๆ เชน วดเจตเมน วดเจตแบนเนอร วดเจตบทความ วดเจตสนคา เปนตน ดงรป

12.2 Body : ใชส าหรบแสดงเนอหาของเวบไซต (ยกเวนหนาหลกเวบไซต) ดงรป

13. สวนของ Section-side

ใชส าหรบจดการวดเจตตางๆ เชน วดเจตเมน วดเจตแบนเนอร วดเจตบทความ วดเจตสนคา เปนตน

14. สวนของ Wrapper-Bottom

ใชส าหรบจดการวดเจตตางๆ เชน วดเจตเมน วดเจตแบนเนอร วดเจตบทความ วดเจตสนคา เปนตน

15. ปมแกไข

ใชส าหรบปรบแตง Footer โดยคลกทปม “ ” จะแสดง หนาจอ Pop-up การแกไข Footer ดงรป

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

จดการ Widget โดยการเลอก widget ทตองการเกบ คลก แลว ลากลงมาเกบใสสวน Widget Store ดงรป

เลยเอาต

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

1. การเพมเลยเอาต 2. การลบเลยเอาต 3. การเปด/ปดใชงานเลยเอาต

4. การคนหาเลยเอาต 5. ตารางแสดงรายการเลยเอาต

1. การเพมเลยเอาต

คลกปม “เพม” สามารถเลอกใชเลยเอาตทแตกตางกนออกไป ส าหรบหนาตางๆ เชน หนาแรกใช เลยเอาต L001และ หนาบทความ ใช เลยเอาต L002 เปนตน

1. เลยเอาต : เลอกรปแบบเลยเอาตทจะใช ซงม 11 รปแบบดวยกน คอ L001,L002 ,L003 ,L004 ,L005 ,L006 ,L007 ,L008 ,L009 ,L010, L011

2. หนาหลก : เลอกหนาทตองการใชรปแบบเลยเอาต เชน หนาหลก หนาการตดตอ 3. การแสดง : เปนการเลอกใช หรอ ไมใชเลยเอาต

2. การลบเลยเอาต

2.1 การลบเลยเอาตทละรายการ : คลกปม “ ” ตรงรายการเลยเอาตทตองการลบ

2.2 การลบเลยเอาตทละหลายรายการ : เลอกรายการเลยเอาตทตองการลบ โดยคลกทกลอง Checkbox ดานซายสด จากนนคลกปม “ลบ” ดงรป

หมายเหต

ระบบจะแสดง Pop-up เพอยนยนการท ารายการ ใหคลกปม “ยอมรบ”

หนาทลบเลยเอาตออกนน จะแสดงเปนคา Default ของ Template ทเลอก

3. การเปด/ปดใชงานเลยเอาต

หมายเหต

สญลกษณ “ ” คอ เปดใชงาน (แสดงบนหนาเวบไซต)

สญลกษณ “ ” คอ ปดใชงาน (ไมแสดงบนหนาเวบไซต)

3.1 การเปด/ปดใชงานเลยเอาตทละรายการ : คลกท “ ” หรอ “ ” ตรงรายการเลยเอาตทตองการเปด/ปด การใชงาน

3.2 การเปด/ปดใชงานเลยเอาตทละหลายรายการ : เลอกรายการเลยเอาตทตองการเปด/ปด การใชงาน โดยคลกทกลอง Checkbox ดานซายสด จากนนคลกปม “ใชงาน” หรอ “ไมใชงาน” ดงรป

หมายเหต

ระบบจะแสดง Pop-up เพอยนยนการท ารายการ ใหคลกปม “ยอมรบ”

4. การคนหาเลยเอาต

1. Layout : เลอกรปแบบเลยเอาตทตองการคนหา และ เลอกสถานการณใชงานเลยเอาตคอ ใชงาน และ ไมใชงาน

2. หนาหลก : เลอกหนาทตองการคนหา

5. ตารางแสดงรายการเลยเอาต

1. หนา : แสดงชอหนาเวบไซต 2. Layout : แสดงรปแบบ Layout ทเลอก

3. ใชงาน : แสดงการใชงาน “ ” หรอ ไมใชงาน “ ” ของเลยเอาต 4. จดการ : มรายการดงน

ปมประวต : คลกท “ ” ตรงรายการเลยเอาตทตองการดประวต

ปมแกไข : คลกท “ ” ตรงรายการเลยเอาตทตองการแกไข

ปมลบ : คลกท “ ” ตรงรายการเลยเอาตทตองการลบ

เทมเพลต

หนาจอเปลยนเทมเพลตเปนหนาจอส าหรบใหเจาของเวบไซตเลอกใชเทมเพลตททาง SoGoodWeb เตรยมไวให และมการแสดงเทมเพลตทก าลงใชอยในปจจบน รายละเอยดเบองตนของเทมเพลตประกอบไปดวย ชอเทมเพลต วนทเทมเพลตเปดใหใชงาน ตวเลอกใชเทมเพลต และ จ านวนผใชงานเทมเพลต ในสวนของ “เปลยนเทมเพลต” สามารถแบงออกเปน 4 หวขอ ดงรป

1. เทมเพลตทใชอย 2. รายการเทมเพลต

3. ปม Live Preview และ Detail 4. ใชงานเทมเพลต

1. เทมเพลตทใชอย

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

2. รายการเทมเพลต

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

3. ปม Live Preview และ Detail

คลกเลอกเพอแสดงตวอยาง หรอ รายละเอยดเกยวกบเทมเพลต

4. ใชงานเทมเพลต

คลก “ ใชงานเทมเพลต” เพอเลอกใชเทมเพลตทตองการ

หนา Intro

หนาจอตงคาหนา Intro เปนหนาจอส าหรบเปด/ปด หนา Intro กอนเขาสเวบไซต โดยสามารถเลอกไดทงแบบท Template เตรยมไวให แบบรปภาพ วดโอ ไฟลแฟลช หรอก าหนดเอง คา Default จะเปนใชรปแบบตาม Template ในสวนของ “หนา Intro” สามารถแบงออกเปน 5 กรณ

1. กรณรปแบบใชตามเทมเพลต 2. กรณรปแบบรปภาพ 3. กรณรปแบบวดโอ

4. กรณรปแบบแฟลช 5. กรณรปแบบก าหนดเอง

1. กรณรปแบบใชตามเทมเพลต

จะใชตามทเทมเพลตใหมา

2. กรณรปแบบรปภาพ

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

3. กรณรปแบบวดโอ

สามารถเลอกอพโหลดวดโอทตองการ หรอใช URL วดโอ ใน web browser ตางๆ ในการแสดงหนา Intro และกรอกขอความลงก เพอลงกไปยงหนาหลก หรอหนาอนทตองการแสดง

4. กรณรปแบบแฟลช

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

5. กรณรปแบบก าหนดเอง

สามารถเลอกปรบแตงหนา Intro ดวยตวเอง โดยใชขอความ , ภาพ หรอ Css&html