Website Webportal

กรมสรรพสามติ

21) เมือ่ เปดิ Region Template ขน้ึ มาจะพบกับส่วนแก้ไขข้อมลู
22) ทำการแกไ้ ข Region Template โดยการนำขอ้ มูลทง้ั 2 ส่วนมาจัดรปู แบบการแสดงผล

245

กรมสรรพสามติ

23) เมื่อสร้างส่วน Region Definition และ Region Template เสร็จแล้วต่อมาเป็นการเพิ่ม
ทง้ั สอง เขา้ ไปใน Placeholder เพือ่ สามารถนำไปใช้งานในหนา้ เว็บได้

24) โดยวิธีการเพิ่ม Region Definition คือ คลิกที่ปุ่ม Add ในส่วน Allowed Region
Definitions

246

กรมสรรพสามติ

25) เมื่อคลิกที่ปุ่ม Add แล้ว ระบบจะให้ทำการเลือก Region Definition ที่ต้องเพิ่มตรงส่วน
dropdown เมอ่ื เลือกเรยี บร้อยแล้วคลกิ ป่มุ OK

26) เมื่อคลิกปุ่ม OK เพื่อเป็นการยืนยันการเพิ่มเรียบร้อยแล้ว จะเห็น Region Definition เพิ่ม
ในส่วน Allowed Region Definitions

247

กรมสรรพสามิต

27) เมื่อเพิ่ม Region Definition เรียบร้อยแล้ว ต่อมาเป็นการเพิ่ม Region Template
โดยการคลกิ ปุม่ Add ในสว่ น Associated Region Templates

28) เมื่อคลิกที่ปุม่ Add แล้ว ระบบจะให้ทำการเลอื ก Region Template ที่ต้องการเพิ่มตรงส่วน
dropdown เมอื่ เลือกเรยี บรอ้ ยแลว้ คลิกปุม่ OK

248

กรมสรรพสามิต

29) เมื่อคลิกปุ่ม OK เพื่อเป็นการยืนยันการเพิ่มเรียบร้อยแล้ว จะเห็น Region Template เพ่ิม
ในสว่ น Associated Region Templates

249

กรมสรรพสามิต

5.6.2. ส่วนหน้าเพจ
1) จากขั้นตอนที่แล้วได้ทำการสร้างส่วนข้อมูลเรียบร้อยแล้ว ต่อมาเป็นการหน้าเพจ โดยเริ่มจาก

การสร้าง Section ให้คลกิ ขวาท่ี Home แล้วเลอื ก Add New Section

2) จากนนั้ คลิกปุ่ม OK เพ่อื ยืนยันการสรา้ ง section

250

กรมสรรพสามติ

3) ทำการกรอกชื่อ Section และ URL เมอ่ื เรียบร้อยแลว้ คลิกป่มุ OK
4) เมื่อทำการสร้าง Section เรียบร้อยแล้ว จะเห็นโฟลเดอร์ชื่อ เกี่ยวกับสำนักงานเพิ่มมาในส่วน
แสดงโครงสรา้ งเวบ็ ไซต์

251

กรมสรรพสามิต

5) ต่อมาให้ทำการสร้าง Section ย่อยของ Section เกี่ยวกับสำนักงาน ให้คลิกขวาที่โฟลเดอร์
เก่ียวกับสำนักงาน แลว้ เลอื ก Add New Section

6) จากน้นั คลิกปุ่ม OK เพอ่ื ยืนยันการสรา้ ง Section
7) ทำการกรอกชอ่ื Section และ URL เมอ่ื เรียบร้อยแลว้ คลิกปุ่ม OK

252

กรมสรรพสามิต

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

9) ตอ่ มาเป็นการเลือก Layout ของหน้าเพจ คอื การเลือกวา่ หนา้ เพจนี้จะแสดงผลในรูปแบบไหน
คลิกขวาที่โฟลเดอรป์ ระวัติกรมสรรพสามิต และเลือก Select Primary Page

253

กรมสรรพสามิต

10) จากน้ันเลอื กที่ Select existing page template from the content server คลกิ OK

11) เมื่อเลือกใชง้ าน Layout จาก Content Server ระบบจะถามอีกคร้ัง คลิก OK เพอ่ื ยนื ยนั

254

กรมสรรพสามติ

12) ทำการคน้ หา Layout ท่ใี ชง้ านใน Content Server

13) จากการค้นหาพบ Layout ของเว็บไซต์อยู่ 3 รูปแบบ ให้คลิกปุ่ม Select ที่ Layout 3
คอื PT_REGION12019_LAYOUT3

255

กรมสรรพสามิต

14) เมอ่ื ทำการเลอื ก Layout เรยี บรอ้ ยแล้ว จะแสดง Layout ทเ่ี ราเลอื กภายใต้ โฟลเดอร์ ประวัติ
กรมสรรพสามิต

15) เมื่อเลือก Layout แล้ว ต่อมาจะทำการเพิ่มส่วนต่าง ๆ ของหน้าเพจ โดยใน Layout นี้
แบง่ ออกเปน็ 4 สว่ นคอื HEADER, MENU, BODY และ FOOTER

256

กรมสรรพสามิต

16) เรม่ิ เพ่มิ ท่ีสว่ นแรก คือ HEADER โดยคลกิ ที่ ในสว่ น HEADER
17) ทำการเลอื กสว่ น Menu และคลกิ ปมุ่ Finish

257

กรมสรรพสามิต

18) เมอ่ื เลือกสว่ น Header เรียบรอ้ ยแลว้ ในหน้าเพจจะแสดงสว่ น Header ต่อไปทำการเพิ่มส่วน
เมนขู องเว็บไซต์ โดยคลกิ ที่ ของส่วน MENU

19) ทำการเลอื กสว่ น Header และคลกิ ป่มุ Finish

258

กรมสรรพสามติ

20) เม่ือเลอื กส่วน Menu เรยี บรอ้ ยแลว้ ในหนา้ เพจจะแสดงส่วนเมนู ต่อไปทำการเพ่ิมส่วนข้อมูล
ของหนา้ เพจ โดยคลิกที่ ของส่วน BODY

21) เลือก Region Definition และคลิกปุ่ม Next

259

กรมสรรพสามิต

22) เมื่อเลือก Region Definition เรียบร้อยแล้ว เลือก New Contributor data file เพื่อเป็น
การสร้างไฟล์ใหม่ และคลิกป่มุ Next

23) ทำการกรอกรายละเอยี ดของไฟล์ข้อมูล

260

กรมสรรพสามิต

24) เลอื กโฟลเดอรส์ ำหรบั จดั เกบ็ ไฟล์ โดยเขา้ ท่ที โี่ ฟลเดอร์ของเว็บไซต์พ้นื ท่ีและเก็บไวใ้ นโฟลเดอร์

ช่ือ CDF

25) เมื่อเลือกโฟลเดอร์เรียบร้อยแล้ว ข้อมูลจะมาแสดงที่ช่อง Folder และเมื่อกรอกข้อมูล
เรียบร้อยแลว้ คลิกทป่ี ุ่ม Next

261

กรมสรรพสามติ

26) แสดงผลการสรา้ งส่วนขอ้ มลู ใหค้ ลิกปุ่ม Finish เพอื่ เสรจ็ สน้ิ การสรา้ ง

27) เมื่อทำการสร้างสว่ นขอ้ มลู เรยี บร้อยแล้ว ตอ่ ไปเปน็ การแก้ไขข้อมูล โดยคลกิ ท่ี

262

กรมสรรพสามติ

28) เมื่อกดเข้ามาส่วนแก้ไขข้อมูล ก็ให้ทำการเพิ่มข้อมูลลงไปทั้ง 2 ส่วน โดยส่วนแรก ส่วน Title
จะเป็นชื่อหัวข้อ และส่วน Detail จะเป็นส่วนรายละเอียดข้อมูล เมื่อทำการเพิ่มข้อมูลเรียบร้อยแล้ว ให้ทำการ
บันทึกการแก้ไขโดยคลกิ ท่ปี ุ่ม Save and Close

29) เมอื่ ทำการแกไ้ ขสว่ นขอ้ มูลเรียบร้อยแลว้ จะพบขอ้ มูลแสดงในหน้าเพจ

263

กรมสรรพสามิต

30) ต่อมาทำการเพิ่มสดุ ท้ายของหนา้ คอื สว่ น Footer โดยการคลกิ ที่
31) ทำการเลอื กสว่ น footer ช่ือ STP_REGION12019_FOOTER และคลิกป่มุ Next

264

กรมสรรพสามติ

32) แสดงการเพิ่ม Footer คลิกปมุ่ Finish เพื่อสิ้นสดุ การเพ่มิ Footer

33) เมอ่ื เพ่มิ Footer เสรจ็ แล้ว จะแสดงส่วน Footer ในหน้าเพจ

265

กรมสรรพสามิต

34) แสดงหนา้ เพจท่ที ำการเพ่มิ ข้อมลู ครบทุกสว่ น

266

กรมสรรพสามิต

5.7 การแก้ไขเมนขู องเว็บไซต์
ส่วนเมนู เปน็ ส่วนทบ่ี อกข้อมูลตา่ ง ๆ ในเวบ็ ไซต์

267

กรมสรรพสามิต

5.7.1. การแกไ้ ขลงิ กเ์ มนขู องเว็บไซต์
1) เปิดโปรแกรม site studio ไปที่ส่วน Site Asset เลือก Subtemplates แล้วคลิกสองคลิกที่

STP_REGION12019_MENU

2) เมื่อเปิดส่วนเมนู จะพบกับโค้ดแสดงชื่อและ Link ของเมนู ตัวอย่างนี้ทำการแก้ไข Link
ของหนา้ ประวัตกิ รมสรรพสามิต

268

กรมสรรพสามติ

3) การเปิดหนา้ ประวัติกรมสรรพสามติ เพือ่ ทำการคัดลอก URL ของหนา้ ไปใสใ่ นเมนู

4) เมื่อคัดลอก URL ของหน้าประวัติกรมสรรพสามิตไว้แล้ว ให้นำ URL มาว่าไว้ระหว่าง
เคร่อื งหมาย “ ” ตรงส่วน href

269

กรมสรรพสามิต

5) แล้วเลื่อนลงมาที่ด้านล่าง ซึ่งเป็นส่วนเมนูของการแสดงผลในหน้าจอขนาดเล็ก หาเมนูประวัติ
กรมสรรพสามติ แล้วใหน้ ำ URL มาวา่ ไวร้ ะหว่างเครอ่ื งหมาย “ ” ตรงสว่ น href

6) เมื่อทำการแก้ไขเรียบร้อยแล้ว ทำการทดสอบการเข้าหน้าประวัติกรมสรรพสามิต โดยคลิกที่
เมนปู ระวัติกรมสรรพสามติ

270

กรมสรรพสามติ

7) เมือ่ คลิกทเี่ มนปู ระวตั กิ รมสรรพสามิตแล้ว ก็จะเขา้ มายังหนา้ ประวตั ิกรมสรรพสามิต

271

กรมสรรพสามิต

5.7.2. การเพ่ิมเมนูของเว็บไซต์
1) ตรวจสอบเมนหู ้องข่าว

2) ทำการเปดิ สว่ นเมนู แลว้ เพิ่มเมนูขา่ วประกวดราคา เพ่มิ เขา้ ไปอกี 1 บรรทดั ในเมนหู ้องขา่ ว

272

กรมสรรพสามติ

3) สว่ นเมนูห้องขา่ ว มีเมนูข่าวประกวดราคาเพิ่มมา

4) เมื่อคลิกเมนูขา่ วประกวดราคา เขา้ มาสู่หนา้ ข่าวประกวดราคา

273

กรมสรรพสามิต

5.7.3. การลบเมนขู องเวบ็ ไซต์
1) ตรวจสอบเมนหู อ้ งข่าว

2) ทำการเปิดโค้ดสว่ นเมนู แลว้ ทำการลบเมนศู ูนยข์ ้อมลู ข่าวสารออก

274

กรมสรรพสามติ

3) แสดงโคด้ สว่ นเมนทู ล่ี บเมนศู นู ย์ข้อมูลข่าวสารออกไปแล้ว
4) สว่ นเมนหู อ้ งขา่ ว ไม่มเี มนูศูนยข์ อ้ มูลขา่ วสาร

275

กรมสรรพสามิต

5.8 วธิ ีแก้ไขรายละเอียดขอ้ มลู
ในหวั ข้อนเี้ ป็นการแสดงวธิ ีการเพ่มิ ข้อมลู เปน็ ตัวอยา่ งบางส่วน โดยมีหวั ขอ้ ดงั น้ี

1. การเพม่ิ รปู ภาพและการจัดตำแหน่ง
1) เข้าหน้าเวบ็ ผ่านเบราวเ์ ซอร์ เพอ่ื ทำการแกไ้ ขข้อมูล โดยคลิกที่

276

กรมสรรพสามติ

2) เมอ่ื เขา้ สหู่ น้าการแกไ้ ขแล้ว ต่อไปทำการเพิ่มรูปภาพ คลิกที่

3) ทำการค้นหารปู ภาพจากใน content server โดยการค้นหาดว้ ย ID

277

กรมสรรพสามติ

4) เม่อื คน้ หารูปทต่ี ้องการพบแล้ว ใหเ้ ลือกรูปภาพโดยการคลกิ ปุ่ม Select

5) เมอ่ื เลอื กรปู ภาพเรยี บรอ้ ยแล้ว เห็นได้ว่ามีรปู ภาพเพ่มิ มาในส่วน Detail

278

กรมสรรพสามติ

6) ต่อไปทำการจัดตำแหน่งการแสดงรูปภาพ ให้อยู่กึ่งกลางด้วยการคลิกท่ี และคลิก Save and
Close เพ่อื บนั ทึก

7) เม่อื เพิ่มรูปเรียบรอ้ ยแลว้ จะมาแสดงในหนา้ เวบ็

279

กรมสรรพสามติ

2. การจัดการตวั อักษร
1) ตอ่ ไปทำการเพม่ิ ข้อมูล โดยคลกิ ท่ี เพอ่ื ทำการแกไ้ ขขอ้ มลู

2) เมื่อเข้าสูห่ นา้ การแกไ้ ขแล้ว ทำการเพม่ิ ข้อมลู หวั ขอ้

280

กรมสรรพสามติ

3) ทำให้หวั ข้อเป็นตวั อกั ษรตวั หนา โดยคลิกท่ี และทำการบันทกึ ขอ้ มลู

4) แสดงสว่ นหวั ขอ้ ทีเ่ ปน็ ตัวอกั ษรหนา

281

กรมสรรพสามิต

5) ต่อมาทำการเพิม่ รายละเอยี ดข้อมูล และทำการบนั ทกึ

6) แสดงสว่ นรายละเอียดข้อมลู ในหน้าเว็บ

282

กรมสรรพสามติ

7) จากนั้นลองทำการเปลี่ยนรูปแบบของตัวอักษร โดยทำการลากเพื่อเลือกข้อมูลที่จะทำการเปลี่ยน
รปู แบบตัวอกั ษร และทำการบันทึก

8) จากการแก้ไขรปู แบบตัวอกั ษร จะเปน็ ไดว้ ่าตวั อกั ษรแสดงผลรปู แบบตา่ งจากเดมิ

283

กรมสรรพสามิต

9) จากนั้นมาลองทำการเปลี่ยนสีตัวอักษร โดยการลากคลุมข้อความที่ต้องการเปลี่ยนสีตัวอักษรและ
คลกิ ที่ เพอื่ เลอื กสีตัวอักษร

10) หลังจากเปลี่ยนตัวอักษรแล้ว เหน็ ว่าหวั ขอ้ เปลย่ี นเป็นสีนำ้ เงนิ ตามท่ีเลือกแลว้ และทำการบันทกึ

284

กรมสรรพสามิต

11) แสดงผลการเปล่ยี นสตี ัวอกั ษร

285

กรมสรรพสามิต

3. การเพิ่ม link
1) เข้ามาท่สี ว่ นการแก้ไข แล้วเพิม่ ข้อความ คลกิ ทนี่ ี่ เพ่อื จะทำเป็น Link ไปยังเอกสาร โดยวธิ ีการทำคือ

ทำการลากคลุมขอ้ ความท่ีต้องการทำ Link แล้วคลกิ ท่ี

2) ต่อมาเป็นการใส่ link ให้คลิกเลือกที่ Link to the following URL และใส่ URL ของเอกสาร แล้ว
คลิกปุม่ Next

286

กรมสรรพสามติ

3) ระบบแสดง URL ของ Link

4) เม่อื เพิ่ม link เรยี บรอ้ ยแล้ว ทำการทดสอบโดยคลกิ ท่ีคำวา่ “คลิกท่ีนี”่ จะ link ไปท่ไี ฟลเ์ อกสาร

287

กรมสรรพสามิต

5) แสดงไฟลเ์ อกสาร

288

กรมสรรพสามิต

5.9 ตวั อย่างการโอนยา้ ยข้อมูล
ในหัวข้อนี้เป็นการแสดงตัวอย่างบางส่วนของการโอนย้ายข้อมูลจากเว็บไซต์เดิมมายังเว็บไซต์ใหม่

เพอื่ ให้เหน็ ตัวอย่างวิธกี ารในการโอนยา้ ยข้อมูลมายังเว็บไซตใ์ หม่ โดยมี 2 ตวั อยา่ ง
1. ตวั อย่างท่ี 1

1) เร่มิ จากการสรา้ ง Section ของเกีย่ วกับสำนกั งานและเวบ็ ไซต์ที่เกย่ี วขอ้ ง

289

กรมสรรพสามติ

2) ทำการสรา้ ง Section ของเก่ยี วกบั สำนกั งาน โดยคลกิ ขวาที่ Home และเลือก Add New Section

3) สรา้ ง Section โดยกรอกรายละเอยี ดของ Section และคลิกปมุ่ OK

290

กรมสรรพสามติ

4) เมื่อสร้าง Section เรียบร้อยแล้ว จะแสดง Section เกี่ยวกับสำนักงานเพิ่มมาในส่วนโครงสร้าง
ดา้ นซา้ ย

5) ต่อมาทำการสร้าง Section เว็บไซต์ที่เกี่ยวข้อง ภายใต้ Section เกี่ยวกับสำนักงาน โดยคลิกขวา
ที่เกี่ยวกบั สำนกั งานและเลือก Add New Section

291

กรมสรรพสามติ

6) สร้าง Section โดยกรอกรายละเอยี ดของ Section และคลกิ ปุ่ม OK
7) แสดง Section เวบ็ ไซตท์ ี่เกี่ยวขอ้ งเพิม่ มาในส่วนโครงสรา้ งด้านซ้าย

292

กรมสรรพสามิต

8) จากนั้นทำการสร้างหน้าเว็บไซต์ที่เกี่ยวข้อง โดยคลิกขวาที่โฟลเดอร์เว็บไซต์ที่เกี่ยวข้องและเลือก
Select Primary Page

9) ทำการเลือก Layout ของหนา้ เว็บไซต์ทเ่ี กี่ยวขอ้ ง เปน็ Layout 3 และคลิกปุ่ม OK

293

กรมสรรพสามิต

10) เมื่อเลือก Layout ของหน้าเว็บไซต์ที่เกี่ยวข้องเรียบร้อยแล้ว จะเห็นหน้าเพจเพิ่มมาใต้ Section
เวบ็ ไซต์ทเ่ี กย่ี วข้องขน้ั ตอนตอ่ ไปเป็นการประกอบหน้าเพจ

11) เปดิ หน้าเวบ็ ไซตท์ ่เี กยี่ วขอ้ งในเบราว์เซอร์ โดยคลิกขวาท่หี น้าเพจและเลอื ก View in Browser

294