ตัวอย่าง เล่มโครงการ

การสร้างและพฒั นาเวบ็ ไซต์ เศรษฐกจิ พอเพยี ง
สุวรรณี ฮะบุญมี
ดารกา สอนศรี

โครงการวชิ าชีพนีเ้ ป็ นส่วนหน่ึงของการศึกษาหลกั สูตรประกาศนียบตั รวชิ าชีพช้ันสูง
สาขาวชิ าคอมพวิ เตอร์ธุรกจิ

วทิ ยาลยั เทคโนโลยกี ารจัดการเพชรเกษม
ประจาํ ปี การศึกษา 2556

การสร้างและพฒั นาเวบ็ ไซต์ เศรษฐกจิ พอเพยี ง
สุวรรณี อะบุญมี
ดารกา สอนศรี

โครงการวชิ าชีพนีเ้ ป็ นส่วนหน่ึงของการศึกษาหลกั สูตรประกาศนียบตั รวชิ าชีพช้ันสูง
สาขาวชิ าคอมพวิ เตอร์ธุรกจิ

วทิ ยาลยั เทคโนโลยกี ารจัดการเพชรเกษม
ประจาํ ปี การศึกษา 2556

คณะกรรมการการประเมินผลการศึกษาเอกสารโครงการการสร้างและการพฒั นาเวบ็ ไซต์
เศรษฐกิจพอเพียง พิจารณาการศึกษาฉบบั น้ีแลว้ เห็นควรรับเป็ นส่วนหน่ึงของการศึกษา ตาม
หลกั สูตรประกาศนียบตั รวชิ าชีพ

……………………………………………………………………………….…. อาจารย์ ที่ปรึกษาโครงการ
(อาจารยส์ มพงษ์ มณั ฑะจิตร)

กรรมการ…………………………………………………………………………………….
(อาจารยส์ มพงษ์ มณั ฑะจิตร)

กรรมการ….........………………….…….………………………………..……..………..
(อาจารยว์ สิ ิษฐ จนั ทร์แกว้ )

ผเู้ ชี่ยวชาญ….........………………….…….………………………………..……..………..
( )……….…….………………………………..……..………..

ผเู้ ชี่ยวชาญ….........………………….…….………………………………..……..………..
( )……….…….………………………………..……..………..

ผเู้ ชี่ยวชาญ….........………………….…….………………………………..……..………..
( )……….…….………………………………..……..………..

โปรแกรมวชิ าคอมพวิ เตอร์รับรอง

………………………………………
(อาจารยศ์ ุภชยั สุขเกษม)

หวั หนา้ โปรแกรมวชิ าคอมพิวเตอร์
31 มีนาคม 2557

ลิขสิทธ์ิของโปรแกรมวชิ าคอมพวิ เตอร์ธุรกิจ วทิ ยาลยั เทคโนโลยกี ารจดั การเพชรเกษม

กติ ตกิ รรมประกาศ

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

ขอขอบคุณ อาจารยส์ มพงษ์ มณั ฑะจิตร ท่ีปรึกษาและคณะกรรมการ อาจารยว์ ิสิษฐ
จนั ทร์แกว้ คณะกรรมการ และอาจารยแ์ ผนกคอมพิวเตอร์ทุกท่านซ่ึงเป็ นคณะกรรมการ การสอบ
โครงการ

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

นางสาวสุวรรณี ฮะบุญมี
นางสาวดารกา สอนศรี

31 มีนาคม 2557

สารบญั หน้า

บทคดั ยอ่ (ก)
กิตติกรรมประกาศ (ข)
สารบญั (ค)
สารบญั ตาราง (ฉ)
สารบญั ภาพ (ช)
บทท่ี 1 บทนาํ 1
1
ความเป็นมาและความสาํ คญั ของปัญหา 1
วตั ถุประสงคข์ องการศึกษา 1
ขอบเขตของการศึกษา 2
นิยามศพั ทเ์ ฉพาะ 3
ประโยชน์ที่คาดวา่ จะไดร้ ับ
4
บทท่ี 2 เอกสารและงานที่เก่ียวขอ้ ง 4
อินเตอร์เน็ต (Internet) 5
หนา้ ท่ีและความสาํ คญั ของอินเตอร์เน็ต 5
อินเตอร์เน็ตในประเทศไทย 6
โปรแกรม Macromedia Dreamweaver Cs4 7
การติดต้งั โปรแกรม Macromedia Dreamweaver Cs4 7
ส่วนประกอบ Macromedia Dreamweaver Cs4 7-8
หนา้ จอการทาํ งานของโปรแกรม 8-9
แถบเครื่องมือ (Object Palette) 9 - 10
แถบเคร่ืองมือเอกสาร 10 - 11
หนา้ ต่างออกแบบเวบ็ เพจ ใชพ้ มิ พข์ อ้ ความและจดั เรียงรูปภาพ 11
โปรแกรม Adobe Photoshop CS4 12 - 20
การติดต้งั โปรแกรม Adobe Photoshop CS4 20
ส่วนประกอบ Adobe Photoshop CS4 21
ออปชนั่ (Option Bar)

(ง)

สารบัญ (ต่อ) หน้า

กล่องเคร่ืองมือ (Toolbox) 21
พาเล็ต (Palette) 21

บทที่ 3 วธิ ีการดาํ เนินการศึกษา 22
การกาํ หนดประชากร 22
เครื่องมือที่ใชใ้ นการวจิ ยั 22
การสร้างและหาคุณภาพเครื่องมือที่ใชใ้ นการวจิ ยั 23
วธิ ีการดาํ เนินการศึกษา 24
ลาํ ดบั ข้นั ตอนการดาํ เนินงาน 24
การสร้างและออกแบบเวบ็ ไซต์ 24
การเขา้ สู่โปรแกรม Macromedia Dream weaver Cs4 24 - 25
การสร้างเอกสารใหม่ 25
หนา้ จอของโปรแกรม Macromedia DreamweaverCs4 26
กาํ หนดเวบ็ ไซตใ์ หมใ่ น Dreamweaver 27 - 28
การสร้าง Banner บน Webpage ดว้ ยโปรแกรมAdobe Photoshop CS4 29 - 30
การใส่ Banner บนหนา้ เวบ็ 30 - 31
การสร้างป่ ุม Button ดว้ ยโปรแกรม Adobe Photoshop 31
การใส่ Background Image หรือพ้ืนหลงั 32
การสร้างตาราง 32
การใส่รูปภาพ 33
การใส่สีพ้ืนตาราง 34
สถิติที่ใชใ้ นการวเิ คราะห์ขอ้ มลู 35
คา่ เบี่ยงเบนมาตรฐาน 35

สารบัญ (ต่อ) (จ)

บทท่ี 4 ผลการดาํ เนินการศึกษา หน้า
ผลการสร้างเวบ็ ไซตเ์ ศรษฐกิจพอเพียง 36
ผลการประเมินคุณภาพของเวบ็ ไซตเ์ ศรษฐกิจพอเพยี ง จากผเู้ ชี่ยวชาญ 37
38
บทท่ี 5 สรุป อธิปรายผล และขอ้ เสนอแนะ
สรุป 39
อภิปรายผล 39
ขอ้ เสนอแนะ 39
40
บรรณานุกรม
ภาคผนวก ก 41
42
รายชื่อผเู้ ชี่ยวชาญประเมินคุณภาพดา้ นเน้ือหาและดา้ นการออกแบบ 43
ตารางผลการประเมินของผเู้ ชี่ยวชาญดา้ นเน้ือหาและดา้ นการออกแบบ 44
แบบประเมินคุณภาพเวบ็ ไซตเ์ ศรษฐกิจพอเพียง
45
ภาคผนวก ข 46
ประวตั ิยอ่ ผทู้ าํ โครงการ

สารบัญตาราง หน้า
35
ตารางที่
42
4.1 คา่ เฉล่ีย คา่ เบ่ียงเบนมาตรฐานและระดบั คุณภาพของเวบ็ ไซต์
เศรษฐกิจพอเพียง จากผเู้ ช่ียวชาญดา้ นเน้ือหา 43
44
4.2 ค่าเฉล่ีย คา่ เบ่ียงเบนมาตรฐานและระดบั คุณภาพของเวบ็ ไซต์
เศรษฐกิจพอเพยี ง จากผเู้ ช่ียวชาญดา้ นการออกแบบ

ก-1 แสดงค่าคะแนนการประเมินคุณภาพ ของเชี่ยวชาญดา้ นเน้ือหา
ก-2 แสดงค่าคะแนนการประเมินคุณภาพ ของเชี่ยวชาญดา้ นการออกแบบ

สารบญั ภาพ หน้า

ภาพที่ 7

2.1 แสดง Folderโปรแกรมที่อยใู่ น CD 7

2.2 แสดงไฟล์ Folderใน Marcomedia Dreamweaver Cs4 8
8
2.3 แสดงชื่อโปรแกรม 9
2.4 รอการขยาย Files 9
10
2.5 หนา้ จอตอ้ นรับของโปรแกรม Marcomedia Dreamweaver Cs4 10

2.6 หนา้ จอของสญั ญาลิขสิทธ์ 11
2.7 การสร้าง Shortcut 11
13
2.8 การกาํ หนดชนิดไฟลข์ องโปรแกรม Marcomedia 19
Dreamweaver Cs4 20
20
2.9 แสดงการยนื ยนั เพื่อทาํ การติดต้งั 21
2.10 แสดงการติดต้งั สมบรู ณ์ 21
2.11 หนา้ จอการทาํ งานของโปรแกรม Marcomedia Dreamweaver Cs4 22
2.12 หนา้ จอการตอ้ นรับโปรแกรม Adobe Photoshop CS4 22
2.13 แสดงสิขสิทธ์ิของโปรแกรม Adobe Photoshop CS4 23
2.14 แสดงหนา้ จอลูกคา้ 23
2.15 แสดง Folder ที่ทาํ การติดต้งั โปรแกรม 24
2.16 แสดงหนา้ จอประเภทของรูปภาพท่ีนาํ มาใชง้ าน 24
2.17 แสดงการคดั ลอกไฟลล์ งเคร่ือง 25
2.18 แสดงความคืนหนา้ ของการติดต้งั โปรแกรม 25
2.19 แสดงการติดต้งั องคป์ ระกอบของโปรแกรม 26
2.20 หนา้ จอของการติดต้งั เสร็จสมบูรณ์
2.21 แสดงการคลิกเลือกตวั เลือก
2.22 แสดงการใส่เลข Activation Number
2.23 การใส่ Request Code
2.24 การใส่ตวั เลขท่ีสร้างข้ึนจาก Keygen
2.25 ข้นั ตอนสุดทา้ ยในการติดต้งั สมบรู ณ์

(ซ)

สารบญั ภาพ (ต่อ) หน้า

ภาพท่ี 32
32
3.1 การเขา้ สู่โปรแกรม Macromedia Dreamweaver Cs4 33
3.2 การสร้างเอกสารใหม่ 34
3.3 เมื่อคลิก HTML จะพบหนา้ ตาของโปรแกรม 34
3.4 ใส่ชื่อโฟลเดอร์เพื่อใชเ้ ก็บเวบ็ เพจ 35
3.5 การเลือกใชเ้ ทคโนโลยดี า้ นเซิร์ฟเวอร์ 35
3.6 เลือกไฟลเ์ ก็บขอ้ มลู 36
3.7 เลือกหวั ขอ้ สาํ หรับควบคุมเวบ็ ไซต์ 37
3.8 การนาํ รูปมาวางบนเอกสารเพอ่ื สร้าง banner 37
3.9 banner ท่ีไดจ้ ากการตกแตง่ ดว้ ย Gradient Tools 38
3.10 การนาํ banner มาใส่ 38
3.11 ผลลพั ธ์ที่ได้ banner ถูกนาํ มาใส่เรียบร้อย 39
3.12 การสร้างป่ ุม 39
3.13 การใส่ภาพพ้ืนหลงั background image 40
3.14 ผลลพั ธ์ท่ีไดจ้ ากการใส่ background image 40
3.15 รายละเอียดของการสร้างตาราง 41
3.16 การนาํ รูปภาพมาใส่ 41
3.17 หนา้ ตา่ งสาํ หรับนาํ รูปภาพมาใส่บนเวบ็ เพจ 42
3.18 หนา้ ต่างการ Copy ภาพเก็บไวใ้ นโฟลเดอร์เวบ็ ไซต์ 42
3.19 หนา้ ตา่ ง Image Tag Accessibility Attributes 44
3.20 กาํ หนดสีพ้นื ใหก้ บั เมนูสารบญั เวบ็ ในแตล่ ะแถวของตาราง 45
4.1 หนา้ แรกของเวบ็ ไซต์ 45
4.2 ประวตั ิความเป็นมาของเศรษฐกิจพอเพียง
4.3 รูปภาพเศรษฐกิจพอเพียง

หวั ขอ้ โครงการวชิ าชีพ การสร้างและพฒั นาเวบ็ ไซต์ เศรษฐกิจพอเพียง 551120107
นกั ศึกษา นางสาวสุวรรณ ฮะบุญมี รหสั นกั ศึกษา 551120108
นางสาวดารกา สอนศรี รหสั นกั ศึกษา
หลกั สูตร ประกาศนียบตั รวชิ าชีพช้นั สูง
สาขาวชิ า คอมพิวเตอร์ธุรกิจ
ปี การศึกษา
คณะกรรมการควบคุม 2556
อาจารยว์ สิ ิษฐ จนั ทร์แกว้
อาจารยว์ ลิดา พระโนราช

บทคดั ย่อ

ก า ร ศึ ก ษ า ก า ร ทํา โ ค ร ง ง า น ด้า น เ ว็บ ไ ซ ต์ โ ป ร แ ก ร ม ค อ ม พิ ว เ ต อ ร์ ใ น ค ร้ ั ง น้ี มี
วตั ถุประสงคเ์ พ่ือสร้างและพฒั นาเวบ็ ไซตโ์ ปรแกรม โดยใชโ้ ปรแกรม Macromedia Dreamweaver
Cs4 และโปรแกรม Adobe Photoshop Cs4 ในการสร้างและพฒั นาเวบ็ จดั ทาํ ออกมาเป็ นส่ือการ
นาํ เสนอเวบ็ ไซตใ์ นการศึกษาใหผ้ ทู้ ่ีสนใจตอ้ งการขอ้ มูลเก่ียวกบั เวบ็ ไซตโ์ ปรแกรมน้ี โดยสามารถ
ที่จะเรียนรู้ไดด้ ว้ ยตนเองและนาํ ไปใชง้ านไดจ้ ริง ในปัจจุบนั
รูปแบบของการทาํ งานของเวบ็ ไซต์

1. แสดงหนา้ โฮมเพจของเวบ็ ไซต์
2. ลิงคเ์ พือ่ เชื่อมโยงขอ้ มูลของแตล่ ะเวบ็ เพจ
3. แสดงรายละเอียดของคุณสมบตั ิของ เศรษฐกิจพอเพยี ง

เครื่องมือทใ่ี ช้ในการศึกษา

- โปรแกรม Macromedia Dreamweaver Cs4
- โปรแกรม Adobe Photoshop Cs4

ผลการทดสอบพบวา่ สามารถทาํ งานไดต้ ามขอบเขตที่ไดศ้ ึกษา และเม่ือไดป้ ระเมิน
คุณภาพโดยผเู้ ชี่ยวชาญแลว้ อยใู่ นระดบั คุณภาพดี

บทที่ 1

บทนํา

ความเป็ นมาและความสําคญั ของปัญหา

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

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

เน่ืองจากในปัจจุบนั เศรษฐกิจพอเพียง กาํ ลงั เป็ นท่ีนิยมมากในสังคมปัจจุบนั และมีความ
16 16

สะดวกสบายมากกวา่ การซ้ือขายสินคา้ อีกท้งั หาซ้ือไดง้ ่ายและราคาถูกมากเม่ือเปรียบเทียบกบั เม่ือปี
ก่อน

ดว้ ยเหตุผลทาํ ให้เกิดแนวคิดที่จะพฒั นาการขายอาหารทางเวบ็ โดยการใชค้ อมพิวเตอร์เพ่ือ
เป็ นอุปกรณ์ในการจดั เก็บขอ้ มูลและสามารถปรับปรุงและพฒั นาฐานขอ้ มูลเก่ียวกบั สินคา้ ให้เป็ น
ปัจจุบนั มากที่สุด เพ่อื ความสะดวกและใชร้ ะบบเทคโนโลยที ่ีทนั สมยั และเจริญกา้ วหนา้ ในปัจจุบนั

วตั ถุปะสงค์ของการศึกษา

1. เพ่ือสร้างและพฒั นาเวบ็ ไซต์ เศรษฐกิจพอเพียง
16

2. เพื่อคุณภาพของผเู้ ขา้ เยยี่ มชมเวบ็ ไซต์ เศรษฐกิจพอเพยี ง
16

ขอบเขตของการศึกษา

ขอบเขตการศึกษามดี งั นี้
ขอบเขตดา้ นเน้ือหา
1. ประวตั ิความเป็นมาของ เศรษฐกิจพอเพยี ง

16

2

2. รายการอาหารของทาง เศรษฐกิจพอเพียง
16

3. สินคา้ และราคา เศรษฐกิจพอเพยี ง
16

ขอบเขตด้านประชากร

อาจารยแ์ ผนกคอมพิวเตอร์ธุรกิจและเทคโนโลยสี ารสนเทศ วทิ ยาลยั เทคโนโลยกี าร
จดั การเพชรเกษม จาํ นวน 3 ท่าน

นิยามศัพท์เฉพาะ

Macromedia Flash หมายถึง โปรแกรมท่ีสร้างภาพเคล่ือนไหวแบบ2มิติ และสามารถ
กาํ หนดทิศการเคลื่อนไหว และใส่โคด้ Java รูปภาพ เสียง วดี ีโอได้ และเชื่อมโยงเวบ็ ไดท้ ุกประเภท

Macromedia Flash Player หมายถึง โปรแกรมที่มาพร้อมกบั Macromedia Flash
เพือ่ แสดงผลและเล่นจากผลงานท่ีสร้างดว้ ยมาจาก โปรแกรมMacromedia Flash

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

Adobe Photoshop หมายถึง โปรแกรมตกแต่งและจดั ตาํ แหน่งภาพน่ิง และสร้าง
เอฟเฟกของตวั ภาพ และส่วนใหญ่นาํ ไปใชง้ านในดา้ นส่ือสิงพิมพ์ นาํ เสนองาน และนาํ ไปใช่งาน
บนเวบ็ ไซต์

Upload หมายถึง การถ่ายโอนขอ้ มูลจากคอมพิวเตอร์เครื่องหน่ึงไปยงั คอมพิวเตอร์
อีกเครื่องคอมพวิ เตอร์อีกเคร่ืองหน่ึง

Download หมายถึง การคดั ลอกแฟ้ มขอ้ มูลหรือโปรแกรมจากคอมพิวเตอร์เคร่ืองเขา้
มาในเคร่ืองคอมพวิ เตอร์ท่ีเราใชง้ านอยู่

Web Site หมายถึง แฟ้ มขอ้ มูลหรือกลุ่มแฟ้ มขอ้ มูลที่มีอย่บู นเวลิ ด์ ไวด์ เวบ็ (World
Wide Web) ดูประกอบ

WWW (World Wide Web) หมายถึง สถานที่รวมของกลุ่มคอมพิวเตอร์ท่ีมีขอ้ มูล
เตรียมพร้อมไวใ้ หผ้ อู้ า่ นผา่ นทาง Internet โดยภาษา HTTP

Animation หมายถึง การนําภาพหลายๆภาพมาต่อกันจนทําให้ดู
เหมือนวา่ เป็นภาพที่เคล่ือนไหวไดแ้ บบเดียวกบั การทาํ หนงั การ์ตูน

Web browser หมายถึงโปรแกรมท่ีทาํ ใหเ้ ราสามารถอ่านไฮเปอร์เท็กซ์บน World Wide
Web เช่นโปรแกรมInternet Explorer.Nestcape เป็นตน้

3

Code หมายถึงการใชร้ หสั หรือบางทีใชค้ วามหมายถึง การเขียนโปรแกรมจริงๆ
โดยการใชร้ หสั ที่กาํ หนดไวใ้ นภาษาคอมพิวเตอร์ต่าง ๆ

ประโยชน์ทค่ี าดว่าจะได้รับ

1. ไดเ้ วบ็ ไซต์ เศรษฐกิจพอเพียง
16

2. ไดร้ ับการประเมินคุณภาพของเวบ็ ไซต์ เศรษฐกิจพอเพียง
16

4

บทที่ 2

เอกสารและงานทีเ่ กย่ี วข้อง

ในการศึกษาคร้ังน้ี ผศู้ ึกษาไดศ้ ึกษาเอกสารและงานท่ีเก่ียวขอ้ ง และไดน้ าํ เสนอตามหวั ขอ้
ต่อไปน้ี

1. อินเตอร์เน็ต
2. โปรแกรม Macromedia Dreamweaver Cs4
3. โปรแกรม Adobe Photoshop Cs4

อนิ เตอร์เน็ต (Internet)

ในสังคมยุคข่าวสารเช่นปัจจุบนั น้ี แทบจะไม่มีใครไม่เคยไดย้ ินคาํ วา่ “อินเตอร์เน็ต” เหตุ
เพราะอินเตอร์เน็ตได้กลายเป็ นส่วนหน่ึงในชีวิตประจาํ วนั ของคนจาํ นวนมากในโลกน้ีไปแล้ว
ประมาณกนั วา่ ในแต่ละวนั มีผคู้ นมากกว่า 50 ลา้ นคนในประเทศต่างๆ กวา่ 150 ประเทศทว่ั โลก
กาํ ลงั ใชอ้ ินเตอร์เน็ตกนั อยู่ อาจเป็นนกั ศึกษาคนหน่ึงในประเทศออสเตรเลียที่กาํ ลงั สืบคน้ ขอ้ มูลจาก
หอ้ งสมุดแห่งหน่ึงในประเทศองั กฤษ หรือเป็ นอาจารยม์ หาวิทยาลยั คนหน่ึงในประเทศญี่ป่ ุนกาํ ลงั
สัง่ ซ้ือหนงั สือจากประเทศไทย เป็ นตน้ การประกอบกิจกรรมต่างๆ ในอินเตอร์เน็ตดงั ที่ไดก้ ล่าวมา
น้ี เป็นตวั อยา่ งท่ีสะทอ้ นใหเ้ ห็นภาพของการส่ือสารท่ีไร้พรมแดนไดอ้ ยา่ งชดั เจน

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

“อินเตอร์เน็ต” มาจากคาํ วา่ International Network เป็ นเครือข่ายของการส่ือสารขอ้ มูล
ขนาดใหญ่ อนั ประกอบดว้ ยเครือข่ายคอมพิวเตอร์จาํ นวนมาก เช่ือมโยงแหล่งขอ้ มูลจากองค์กร
ตา่ งๆ ทว่ั โลกเขา้ ดว้ ยกนั

5

คาํ วา่ “เครือขา่ ย” หมายถึง
1. การที่มีคอมพวิ เตอร์ต้งั แต่ 2 เคร่ืองข้ึนไป เช่ือมต่อเขา้ ดว้ ยกนั ดว้ ยสายเคเบิล (ทางตรง)
และหรือสายโทรศพั ท์ (ทางออ้ ม)
2. มีผใู้ ชค้ อมพวิ เตอร์
3. มีการถ่ายเทขอ้ มลู ระหวา่ งกนั

หน้าทแี่ ละความสําคญั ของอนิ เตอร์เน็ต

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

อินเตอร์เน็ต ถือเป็ นระบบเครือข่ายคอมพิวเตอร์สากลท่ีเชื่อมต่อเข้าด้วยกนั ภายใต้
มาตรฐานการส่ือสารเดียวกนั เพื่อใชเ้ ป็ นเคร่ืองมือส่ือสารและสืบคน้ สารสนเทศจากเครือข่ายต่างๆ
ทวั่ โลก ดงั น้นั อินเตอร์เน็ตจึงเป็ นแหล่งรวมสารสนเทศจากทุกมุมโลก ทุกสาขาวิชา ทุกดา้ น ท้งั
บนั เทิงและวชิ าการ ตลอดจนการประกอบธุรกิจตา่ งๆ

เหตุผลสาํ คญั ท่ีทาํ ใหอ้ ินเตอร์เน็ตไดร้ ับความนิยมแพร่หลายคือ
1. การสื่อสารบนอินเตอร์เน็ต ไม่จาํ กดั ระบบปฏิบตั ิการของเคร่ืองคอมพิวเตอร์
คอมพิวเตอร์ที่ตา่ งระบบปฏิบตั ิการกนั กส็ ามารถติดตอ่ สื่อสารกนั ได้
2. อินเตอร์เน็ตไม่มีขอ้ จาํ กดั ในเร่ืองของระยะทาง ไม่วา่ จะอยภู่ ายในอาคารเดียวกนั ห่าง
กนั คนละทวปี ขอ้ มลู กส็ ามารถส่งผา่ นถึงกนั ได้
3. อินเตอร์เน็ตไม่จาํ กดั รูปแบบของขอ้ มลู ซ่ึงมีไดท้ ้งั ขอ้ มูลท่ีเป็นขอ้ ความอยา่ งเดียว หรือ
อาจมีภาพประกอบ รวมไปถึงขอ้ มลู ชนิดมลั ติมีเดีย คือมีท้งั ภาพเคลื่อนไหวและมีเสียงประกอบดว้ ย
ได้ คาํ อื่นท่ีใชใ้ นความหมายเดียวกบั อินเตอร์เน็ต คือ Information Superhighway และ Cyberspace

อนิ เตอร์เน็ตในประเทศไทย

ประเทศไทยไดเ้ ร่ิมมีการติดต่อเช่ือมโยงเขา้ สู่อินเตอร์เน็ตใน พ.ศ. 2535 โดยเริ่มที่สํานกั
วิทยาบริการจุฬาลงกรณ์มหาวิทยาลัย ซ่ึงได้เช่าวงจรสื่อสารความเร็ว 9600 บิตต่อวินาทีจาก
การส่ือสารแห่งประเทศไทย ต่อมาใน พ.ศ. 2536 เนคเทคไดเ้ ช่าวงจรส่ือสารความเร็ว 64 กิโลบิตต่อ

6

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

สําหรับภาคเอกชน ไดม้ ีการก่อต้งั บริษทั สําหรับให้บริการอินเตอร์เน็ตแก่เอกชนและ
บุคคลทว่ั ไปที่นิยมเรียกกนั ว่า ISP (Internet Service Providers) หลายราย เช่น ศูนยบ์ ริการ
อินเตอร์เน็ตแห่งประเทศไทย (Internet Thailand) บริษทั เคเอสซีคอมเมอร์เชียลอินเตอร์เน็ตจาํ กดั
(Internet KSC) บริษทั ล็อกซเลยอ์ ินฟอร์เมชนั จาํ กดั (Lox info) เป็ นตน้ โดยในการพิจารณาเลือกใช้
บริการจาก ISP เอกชนเหล่าน้ี สิ่งที่ควรคาํ นึงถึงคือ

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

2. คาํ นวณคู่สายโทรศพั ท์ ว่ามีให้ใช้ติดต่อมากเพียงพอหรือไม่ เพราะถา้ มีไม่มากก็จะ
เสียเวลารอคอยนานกวา่ จะเช่ือมต่อได้

3. ความเร็วของสายที่ใช้
4. พ้ืนท่ีในการให้บริการ ควรเลือกใช้ ISP ที่อยู่ในจงั หวดั หรือพ้ืนที่ใกลเ้ คียงจะ
เหมาะสมกวา่ เพราะ ISP ส่วนใหญ่มกั ใหบ้ ริการในเขตกรุงเทพมหานคร

โปรแกรม Macromedia Dreamweaver Cs4

Dreamweaver เป็ นโปรแกรมประเภท Web Design ซ่ึงมีคุณสมบตั ิในการใชง้ านในแบบ
WYSIWYG (What You See Is What You Get) คือเป็ นโปรแกรมประเภทคุณออกแบบมาอยา่ งไร
กบั โปรแกรมของคุณ คุณก็เห็นงานของคุณเป็ นแบบน้นั การใชง้ านของโปรแกรมจะอาํ นวยความ
สะดวกใหก้ บั การออกแบบ webpage เป็ นอยา่ งมาก เนื่องจาก เราไม่จาํ เป็ นตอ้ งมานงั่ เรียนรู้ CODE
ของ HTML เลย เรากส็ ามารถสร้าง website ไดอ้ ยา่ งมืออาชีพแลว้ ซ่ึงโปรแกรมในแนวทางเดียวกนั
กบั โปรแกรม Dreamweaver กย็ กตวั อยา่ ง เช่น โปรแกรม FrontPage จากคา่ ย Microsoft เป็นตน้

การเข้าสู่ระบบ Macromedia Dreamweaver Cs4
1. คลิกโปรแกรม Macromedia Dreamweaver Cs4 ดงั รูปท่ี 1.1

7

รูปที่ 1.1 เริ่มเขา้ สู่โปรแกรม Macromedia Dreamweaver Cs4
2.หนา้ ต่างโปรแกรม Macromedia Dreamweaver Cs4 ดงั รูปที่ 2.1

รูปท่ี 2.1 เขา้ โปรแกรม Macromedia Dreamweaver Cs4

8

3.หนา้ ตา่ ง Macromedia Dreamweaver Cs4 ดังรูปท่ี 3.1

รูปที่ 3.1 หนา้ ต่าง Macromedia Dreamweaver Cs4

ส่วนประกอบ Macromedia Dreamweaver Cs4

1. แถบคาํ สัง่ เมนู (Menu Bar)

3. แถบเครื่องมือ (Object Palette)

9

4. แถบเคร่ืองมือเอกสาร (Document Bar)

5.หนา้ ต่างออกแบบเวบ็ เพจ
6. Tag Selector
7. Window Size
8. Estimate Download Time
9. Properties
10.Dockable Window

หน้าจอการทาํ งานของโปรแกรม

1.แถบไตเติ้ลบาร์ (Title Bar)
2. แถบคาํ สัง่ เมนู (Menu Bar) 4. แถบเคร่ืองมือเอกสาร (Document Bar)

3. แถบเคร่ืองมือ (Object Palette)

5. หนา้ ตา่ งออกแบบเวบ็ 7. Window Size
6. Tag Selector

รูปท่ี 2.11 หนา้ จอการทาํ งานของโปรแกรม Macromedia Dreamweaver Cs4

10

1.แถบไตเติล้ บาร์ (Title Bar)
คือ ส่วนที่แสดงชื่อโปรแกรม และช่ือไฟลท์ ี่กาํ ลงั ทาํ งานอยู่
(หากมีเครื่องหมาย * ข้ึนท่ีชื่อไฟลแ์ สดงวา่ ยงั ไม่ไดบ้ นั ทึก)

2.แถบคําส่ังเมนู (Menu Bar)
ส่วนที่รวมคาํ สั่งการทาํ งานท้งั หมด แลว้ แบ่งยอ่ ยตามประเภท และในคาํ สง่ั หลกั ๆ

มกั จะมีเมนูลดั ใหก้ ดดว้ ย เช่น Ctrl + N

File เป็นตวั จดั การการเปิ ด ปิ ด และทาํ การบนั ทึกขอ้ มลู
Edit ทาํ หนา้ ที่จดั การตวั เวบ็ เพจ การคดั ลอก การวางขอ้ มูล
View ทาํ หนา้ ที่เป็นมุมมองของเครื่องมือตา่ ง ๆ
Insert ทาํ หนา้ ท่ีเป็นตวั แทรกเครื่องรูปภาพ ตาราง Flash
Modify ทาํ หนา้ ที่เป็นตวั จดั การ แกไ้ ข คา่ ต่าง ๆ
Text ทาํ หนา้ ท่ีเป็นตวั การป้ อนขอ้ ความที่ผใู้ ชป้ ้ อนลงไป
Command ทาํ หนา้ ที่จดั การคาํ ส่งั ในการจดั การ HTML
Site ทาํ หนา้ ที่จดั การเวบ็ เพจใหไ้ ดข้ นาดที่ตอ้ งการ
Window ทาํ หนา้ ท่ีซ่อน/แสดง เคร่ืองมือต่างๆ
Help ทาํ หนา้ เป็นตวั ช่วยแนะนาํ ใหค้ วามช่วยเหลือกบั ผใู้ ชง้ าน
3. แถบเครื่องมอื (Object Palette)
คือแถบแสดงป่ ุมกดต่าง ๆ ของโปรแกรม ป่ ุมท่ีอยใู่ นน้ียอ่ ยมาจาก Insert อีกที (หรือ
เรียกวา่ แถบเคร่ืองมือ Insert)
1. แทบ็ Common จะเป็นส่วนที่รวบรวมอ็อบเจก็ ตต์ ่าง ท่ีเรียกใชง้ านบ่อย ไดแ้ ก่ การ
แทรกภาพ การแทรกตาราง การลิงค์ เป็นตน้

11
2. แทบ็ Layout เป็นส่วนรวมออ็ บเจก็ ตท์ ่ีช่วยในการจดั องคป์ ระกอบของหนา้ เวบ็ เพจ
ใหง้ ่ายกวา่ เดิม

3. แทบ็ Forms รวมออ็ บเจก็ ตท์ ่ีใชใ้ นการสร้างแบบฟอร์ม และตวั เลือกตา่ งๆ

4. แทบ็ Data การงานของเวบ็ เพจ
5. แทบ็ Spryใชส้ าํ หรับการทาํ งานใหง้ ่ายมาข้ึนโดยใชโ้ ปรแกรม Spry
6. แทบ็ InContext Editing เป็นแทบ็ ท่ีทาํ งานซ้าํ หรือเขียนขอ้ ความ

12

7. แทบ็ Text ใชก้ ารจดั ตวั หนงั สือ ตวั หนา โดยใชโ้ ปรแกรมน้ี

8. แทบ็ Favorites เป็นหมวดที่คุณสามารถเพิม่ ป่ ุมคาํ ส่งั จากหมวดอ่ืน ๆ เขา้ มาเก็บ
ได้เองเพ่ือความสะดวกในการเขา้ ใช้(โดยคลิกขวาบน Insert Bar แล้วเลือกคาํ สั่ง Customer
Favorites)

4. แถบเคร่ืองมือเอกสาร (Document Bar)

1.แสดงเวบ็ เพจในมุมมองโคด้ HTML
2. แสดงเวบ็ เพจในมุมมองโดและออกแบบ
3. แสดงเวบ็ เพจในมุมมองออกแบบ

13

4. การกรอกช่ือหรือขอ้ ความท่ีอธิบายเวบ็ เพจ ซ่ึงจะถูกนาํ ไปแสดงผลท่ีแถบไตเติ้ล
บาร์องบราวเซอร์เม่ือผชู้ มเปิ ดเวบ็ เพจน้ี

5. ตรวจสอบการทาํ งานของเวบ็ เพจบนบราวเซอร์เป้ าหมาย
6. ตรวจสอบความถูกตอ้ งของแทก็ คาํ สัง่ ภาษาต่าง ๆ ท้งั ในเวบ็ เพจปัจจุบนั หรือท้งั
เวบ็ ไซต์ เช่น แทก็ HTML
7. แสดงเมนู File Management ซ่ึงประกอบดว้ ยคาํ สั่งสาํ หรับจดั การไฟล์ เช่น อพั
โหลด ดาวน์โหลด
8. แสดงเมนูสาํ หรับเปิ ดบราวเซอร์ดีฟอลดเ์ พ่ือทดสอบการทาํ งานของเวบ็ เพจ
9. ปรับปรุงการแสดงผลเวบ็ เพจใหม่หลงั จากท่ีแกไ้ ขคาํ สง่ั ต่าง ๆ ไป
10. ในมุมมองการออกแบบ จะแสดงคาํ สง่ั สาํ หรับซ่อน/แสดงไมบ้ รรทดั เส้นกริค
และเส้นไกด์ ส่วนในมุมมองโคด้ จะแสดงคาํ ส่งั ท่ีใชป้ รับการแสดงผลของแทก็ คาํ สง่ั ต่าง ๆ
11. แสดงป่ ุมสาํ หรับเปิ ด/ปิ ดลกั ษณะพเิ ศษองแทก็ หรือคาํ ส่งั บางอยา่ ง เช่น ตาราง เล
เยอร์ และ CSS เพ่ือช่วยในการแกไ้ ขเวบ็ เพจสะดวกข้ึน
5. หน้าต่างออกแบบเวบ็ เพจ ใช้พมิ พ์ข้อความและจัดเรียงรูปภาพ

1. Tag Selector ใชค้ วบคุมการทาํ งานในรูปแบบ HTML
<body> <table> <tr> <td> <p> กาํ หนดขนาดพ้ืนท่ีใชง้ านตามตอ้ งการ

2. Window Size

14
3. Estimate Download Time แสดงเวลา (โดยประมาณ) ท่ีใชใ้ นการดาวน์โหลด
4. Propertiesใชก้ าํ หนดรูปแบบต่าง ๆ ของตวั อกั ษร และรูปแบบ รวมถึงการสร้าง
ลิงค์
\

หนา้ ต่าง Properties สามารถจะเปิ ดปิ ดไดต้ ามตอ้ งการดว้ ยการคลิกท่ี...
เพ่ือขยายหนา้ ตา่ งการทาํ งานใหม้ ากข้ึน หรือคลิกที่ Window > Properties ก็ไดเ้ ช่นกนั

properties
5. Dockable Window เป็นหนา้ ต่างที่รวบรวมเคร่ืองมืออาํ นวยความสะดวกเอาไว้ โดย
สามารถคลิกท่ี......... เพื่อเปิ ดปิ ดได้ เช่นเดียวกบั Properties

15

โปรแกรม Adobe Photoshop CS4

โปรแกรม Photoshop เป็ นโปรแกรมสร้างและแกไ้ ขรูปภาพอยา่ งมืออาชีพโดยเฉพาะนกั
ออกแบบในทุกวงการยอ่ มรู้จกั โปรแกรมตวั น้ีดี โปรแกรม Photoshop เป็ นโปรแกรมที่มีเครื่องมือ
มากมายเพ่ือสนบั สนุนการสร้างงานประเภทสิ่งพิมพ์ งานวิดีทศั น์ งานนาํ เสนอ งานมลั ติมีเดีย
ตลอดจนงานออกแบบและพฒั นาเวบ็ ไซต์ ในชุดโปรแกรม Adobe Photoshop จะประกอบดว้ ย
โปรแกรมสองตวั ไดแ้ ก่ Photoshop และ ImageReady การที่จะใชง้ านโปรแกรม Photoshop คุณตอ้ ง
มีเคร่ืองที่มีความสามารถสูงพอควร มีความเร็วในการประมวลผล และมีหน่วยความจาํ ท่ีเพียงพอ
ไม่เช่นน้นั การสร้างงานของคุณคง ไม่สนุกแน่ เพราะการทาํ งานจะชา้ และมีปัญหาตามมามากมาย
ขณะน้ีโปรแกรม Photoshop ไดพ้ ฒั นามาถึงรุ่น Adobe Photoshop CS คุณสามารถหาขอ้ มูลเพิ่มเติม
ไดจ้ ากเวบ็ ไซต์ ado เริ่มเรียนรู้โปรแกรม Adobe Photoshop

การตดิ ต้ังโปรแกรม Adobe Photoshop CS4
1. ดบั เบิล้ คลิกที่ ไอคอน My Computer แลว้ เขา้ ท่ีไดวร์ CD-Rom ที่เราไดใ้ ส่แผน่

ติดต้งั Photoshop CS2 ไว้
2. ดบั เบิ้ลคลิกท่ี โฟลเดอร์ Adobe Photoshop CS2 V9.0Setup
3. ก่อนที่จะเขา้ ไปติดต้งั เราตอ้ งหาเลขรหสั การติดต้งั โปรแกรมก่อน โดยเลข

รหสั การติดต้งั Photoshop น้ีจะตอ้ งทาํ 2 คร้ัง โดย
3.1 ใหเ้ ขา้ ท่ีโฟลเดอร์ KeyGen

3.2 ดบั เบิ้ลคลิกท่ีไอคอน Keygen

3.3 ใหเ้ ลือกในส่วนของ Application: เป็น Photoshop CS2 9.0 ตอ่ จากน้นั
คลิกท่ีป่ ุม [Generate] จะมีเลขรหสั ติดต้งั โปรแกรมในช่อง Serial Number: ให้ Copy ตวั เลขในช่อง
น้ีไวค้ รับ โดยกดป่ ุม Ctrl + C หรือคลิกขวาท่ีช่อง แลว้ เลือก Copy พอเสร็จแลว้ กย็ อ่ หนา้ ต่างน้ีไว้
ก่อน เพราะเด๋ียวเราตอ้ งกลบั มาใชอ้ ีกคร้ัง

16

เลือกเป็น Photoshop CS2 9.0
คดั ลอกตวั เลขตรงน้ี

กดป่ ุมเพือ่ สร้าง Serial Number
4.ใหอ้ อกจากโฟลเดอร์ Keygen โดยคลิกป่ ุม Back กลบั กไ็ ด้
5. พอกลบั มาอยทู่ ่ีโฟลเดอร์ Adobe Photoshop CS2 V9.0Setup
แลว้ ใหด้ บั เบิ้ลคลิกท่ีไอคอนติดต้งั โปรแกรม Setup
6. จะเขา้ สู่หนา้ จอการติดต้งั (Welcome) ใหค้ ลิกที่ป่ ุม [ Next> ]

รูปท่ี 2.12 หนา้ จอการตอ้ นรับโปรแกรม Adobe Photoshop CS
7. ตอ่ มาก็จะเป็ นหนา้ จอลิขสิทธ์ิโปรแกรม (License Agreement) ใหค้ ลิกป่ ุม
[Accept]

17

รูปท่ี 2.13 แสดงสิขสิทธ์ิของโปรแกรม Adobe Photoshop CS
8. ต่อมาก็จะแสดงหนา้ จอลูกคา้ (Customer Information) ใหใ้ ส่ชื่อตรง User Name
และช่ือบริษทั ในช่อง Organization: (ตรงน้ีถา้ ข้ีเกียจพมิ พก์ เ็ อาไวเ้ หมือนเดิมกไ็ ด)้

- ส่วนดา้ นล่าง จะมีใหเ้ ลือก 2 อนั อนั บน Install 30-day trial version อนั น้ีเคา้
ใหท้ ดลองใช้ 30 วนั ส่วนอนั ล่าง I have a serial number

ใหเ้ ลือกที่ I have a serial number, install full version แลว้ วางสาํ เนารหสั การ
ติดต้งั ที่เคยคดั ลอกไว้ ในช่อง Serial Number: (โดยกดป่ ุม Ctrl + V ) ต่อจากน้นั กค็ ลิกป่ ุม [ Next > ]

วางสาํ เนาตวั เลขในช่องน้ี
รูปท่ี 2.14 แสดงหนา้ จอลูกคา้

18
9. หนา้ จอต่อมาจะแสดง Folder ท่ีจะติดต้งั โปรแกรมลงไป (Destination Folder) ให้
คลิกป่ ุม Next

รูปท่ี 2.15 แสดง Folder ที่ทาํ การติดต้งั โปรแกรม
10. หนา้ จอต่อมาจะแสดง ประเภทของ รูปภาพที่สามารถนาํ มาใชง้ านได้ ให้คลิกป่ ุม
[Next]

รูปท่ี 2.16 แสดงหนา้ จอประเภทของรูปภาพที่นาํ มาใชง้ าน

19
11.หนา้ จอต่อมาจะแสดง การคดั ลอกไฟลล์ งเคร่ือง ใหค้ ลิกป่ ุม [Install]

รูปท่ี 2.17 แสดงการคดั ลอกไฟลล์ งเคร่ือง
12. หนา้ จอต่อมาจะแสดง ความคืบหนา้ ของการติดต้งั โปรแกรม

รูปท่ี 2.18 แสดงความคืนหนา้ ของการติดต้งั โปรแกรม
13. ตอ่ จากน้นั ก็จะติดต้งั องคป์ ระกอบของโปรแกรมเพิม่ เติม ช่วงน้ีรอนานหน่อย

20

รูปท่ี 2.19 แสดงการติดต้งั องคป์ ระกอบของโปรแกรม
14. พอติดต้งั โปรแกรมเสร็จ ให้เลือกป่ ุม [Activation Options] เพ่ือไปทาํ ให้ใช้ได้
ตลอดชีวติ

รูปท่ี 2.20 หนา้ จอของการติดต้งั เสร็จสมบูรณ์
15. หน้าจอต่อมา ให้คลิกเลือกที่ By telephone via the Automated Software
Activation System ตอ่ จากน้นั ใหค้ ลิกที่ป่ ุม [Next]

21

รูปท่ี 2.21 แสดงการคลิกเลือกตวั เลือก
16. หนา้ จอต่อมา ใหล้ ากเมาส์คลุมตวั เลขตรง Activation Number แลว้ คดั ลอกไว้
โดยกดป่ ุม Ctrl +C

คดั ลอกเลขตรงน้ีไว้

รูปท่ี 2.22 แสดงการใส่เลข Activation Number
17. เปิ ดหนา้ ตา่ ง Keygen ท่ีไดย้ อ่ ไวข้ ้ึนมา แลว้ ไปดา้ นล่าง (Activation) กาํ หนดตรง
Application: ใหเ้ ป็ น Photoshop CS2 9.0 และใหว้ างสาํ เนาตวั เลขลงในช่อง Request Code: โดยกด
ป่ ุม Ctrl + V ต่อจากน้นั ให้กดป่ ุม [Generate] จะมีตวั เลขเกิดข้ึนท่ีช่อง Answer Code: ใหจ้ ดไว้ หรือ
คดั ลอกไวก้ ไ็ ด้

22

รูปที่ 2.23 การใส่ Request Code
18. สลบั กลบั มาที่หนา้ ตา่ ง Phone Activation วางสาํ เนาตวั เลขลงในช่องดา้ น
ล่างสุดท่ีช่อง หรือจะพิมพใ์ ส่เอง เมื่อเสร็จแลว้ ก็คลิกป่ ุม [Activate]

ใส่ตวั เลขท่ีสร้างข้ึน
จาก หนา้ ตา่ ง Keygen
รูปที่ 2.24 การใส่ตวั เลขท่ีสร้างข้ึนจาก Keygen
19. เม่ือคลิกท่ีป่ ุม [Activate] จะมีหนา้ จอดงั น้ี ใหค้ ลิกยกเลิกท่ี Show the readme
file แลว้ คลิกที่ป่ ุม [Finish] เป็นอนั จบสิ้นกระบวนการติดต้งั

23

รูปท่ี 2.25 ข้นั ตอนสุดทา้ ยในการติดต้งั สมบรู ณ์
ส่วนประกอบ Adobe Photoshop CS

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

-File มีหนา้ ที่จดั การเกี่ยวกบั การสร้าง การเปิ ด การบนั ทึกและการต้งั คา่ ต่าง ๆ
-Edit มีหนา้ ท่ีเก่ียวกบั การยกเลิก การคดั ลอก การปรับเปลี่ยนตา่ ง ๆ
-Image มีหนา้ ท่ีเกี่ยวกบั การปรับภาพใหม้ ีลกั ษณะสีตา่ ง ๆ และเปล่ียนโหมดภาพ
-Layer มีหนา้ ที่จดั การ Layer
-Select มีหนา้ ที่เก่ียวกบั เลือกรูปภาพท่ีจะทาํ การแกไ้ ขปรับเปลี่ยน
-Filter มีหนา้ ท่ีเกี่ยวกบั การใส่ลกั ษณะต่าง ๆ ใหก้ บั ภาพ
-View มีหนา้ ท่ีเก่ียวกบั การกาํ หนดมุมมองแบบต่าง ๆ
-Window มีหนา้ ที่เปิ ด/ปิ ด พาเลต็ ต่าง ๆ
-Help มีหนา้ ท่ีแนะนาํ การใชเ้ ครื่องมือตา่ ง ๆ

24
ออปช่ัน (Option Bar)

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

กล่องเคร่ืองมอื (Toolbox)
เครื่องมือแต่ละไอคอนของ Photoshop น้นั จะมีเคร่ืองมือซ่อนอยภู่ ายในอีกมากมาย

ซ่ึงวธิ ีใชง้ านใหน้ าํ เมาส์ไปคลิกท่ีจุดสามเหลี่ยมคา้ งไว้ จะปรากฏเมนูของเครื่องมือดงั น้ี
Toolbox เป็ นส่วนท่ีใช้ยา้ ยกล่องเครื่องมือ (คลิกเมาส์คา้ งไวแ้ ลว้ ลากตาํ แหน่งที่

ตอ้ งการ) แสดงคาํ สง่ั แป้ นพมิ พค์ ียบ์ อร์ดท่ีใชก้ ดเรียกคาํ สัง่ แทนการคลิกเมาส์
Active Tool สญั ลกั ษณ์แสดงสถานการณ์ใชง้ าน Hidden Tool Triangle สัญลกั ษณ์รูป

สามเหลี่ยมแสดงวา่ ยงั มีเคร่ืองมือยอ่ ยท่ีซ่อนอยอู่ ีก

พาเลต็ (Palette)
Palette เป็ นตัวควบคุมการทาํ งานของโปรแกรมมีลักษณะการทาํ งานคล้ายกับ

ออปชนั่ บาร์ท่ีรวบรวมคุณสมบตั ิพเิ ศษไวจ้ าํ นวนมากเช่น Layer Palette ใชค้ วบคุมการทาํ งานของเล
เยอร์ History Palette ใช้แกไ้ ขงานที่ผา่ นมาแลว้ และอ่ืนๆ ส่วนการเรียกใช้งาน Palette ไดท้ ี่เมนู
Window โดยส่วนประกอบของ Palette มีดงั น้ี

- ประเภทของ Palette
- ส่วนท่ีใชค้ วบคุมหนา้ ตา่ ง
- คุณสมบตั ิพเิ ศษ

25

- ส่วนท่ีใชค้ วบคุมการทาํ งานของรูปภาพ
- พ้นื ที่การทาํ งาน

บทท่ี 3

วธิ ีการดาํ เนินการศึกษา

ในการศึกษาคร้ังน้ี ผจู้ ดั ทาํ โครงงานไดด้ าํ เนินการตามข้นั ตอนดงั น้ี
1. การกาํ หนดประชากร
2. เครื่องมือท่ีใชใ้ นการวจิ ยั
3. การสร้างและหาคุณภาพเครื่องมือที่ใชใ้ นการศึกษา
4. วธิ ีดาํ เนินการศึกษา
5. สถิติที่ใชใ้ นการวเิ คราะห์ขอ้ มูล

1. การกาํ หนดประชากร

ประชากร
ประชากรที่ใชใ้ นการศึกษาคร้ังน้ีคือ ผูเ้ ช่ียวชาญดา้ นเน้ือหาและดา้ นออกแบบของ

วทิ ยาลยั เทคโนโลยกี ารจดั การเพชรเกษม

2. เคร่ืองมอื ทใี่ ช้ในการวจิ ัย

เคร่ืองมือที่ใชใ้ นการวจิ ยั มีดงั น้ี
1. เวบ็ ไซตก์ ารสร้างแลพฒั นาเวบ็ ไซต์ เศรษฐกิจพอเพยี ง
2. แบบประเมินคุณภาพเวบ็ ไซตก์ ารสร้างและการพฒั นาเวบ็ ไซต์ เศรษฐกิจพอเพียง

สาํ หรับผเู้ ช่ียวชาญ คือ แบบประเมินคุณภาพเวบ็ ไซตก์ ารสร้างและการพฒั นาเวบ็ ไซต์ เศรษฐกิจ
พอเพยี ง สาํ หรับผเู้ ชี่ยวชาญดา้ นเน้ือหา และ ดา้ นการออกแบบ

27

3. การสร้างและหาคุณภาพเครื่องมอื ทใ่ี ช้ในการวจิ ัย

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

3.1.1 ผวู้ จิ ยั ศึกษาขอบเขตเวบ็ ไซตก์ ารสร้างและการพฒั นาเวบ็ ไซต์ เศรษฐกิจ
พอเพียง เสนอหวั ขอ้ โครงงาน

3.1.2 ศึกษาและสร้างเวบ็ ไซตก์ ารสร้างและการพฒั นาเวบ็ ไซต์ เศรษฐกิจพอเพียง
โปรแกรมท่ีใช้ คือ Macromedia Dreamweaver Cs4 ใชใ้ นการสร้างเวบ็ ไซต์ และ Adobe Photoshop
Cs4 ใชใ้ นการตกแตง่ ภาพท่ีจะนาํ มาประกอบเน้ือหาบนเวบ็ ไซต์

3.2 การสร้างแบบประเมนิ คุณภาพเวบ็ ไซต์เบเกอรี่สําหรับผู้เชี่ยวชาญ
3.2.1 ศึกษารายละเอียดการสร้างแบบประเมินคุณภาพเคร่ืองมือที่ใชใ้ นการวจิ ยั
3.2.2 สร้างแบบประเมินคุณภาพบทเวบ็ ไซต์ สําหรับผูเ้ ช่ียวชาญดา้ นเน้ือหาและ

ดา้ นการออกแบบ เพือ่ ตรวจสอบความถูกตอ้ งดา้ นเน้ือหาและการออกแบบ โดยใชแ้ บบสอบถามท่ี
มีลกั ษณะเป็นแบบมาตราส่วนประมาณคา่ (Rating Scale) กาํ หนดระดบั 5 ระดบั ดงั น้ี

5 คะแนน หมายถึงมีคุณภาพระดบั ดีมาก
4 คะแนน หมายถึงมีคุณภาพระดบั ดี
3 คะแนน หมายถึงมีคุณภาพระดบั พอใช้
2 คะแนน หมายถึงตอ้ งปรับปรุงแกไ้ ข
1 คะแนน หมายถึงใชไ้ ม่ได้
3.2.3 นําแบบประเมินคุณภาพที่สร้างข้ึนไปให้อาจารย์ที่ปรึ กษาโครงงาน
ตรวจสอบความเหมาะสมของภาษาที่ใช้ แลว้ นาํ ไปใหผ้ เู้ ชียวชาญดา้ นเน้ือหาและดา้ นการออกแบบ
ใชป้ ระเมินคุณภาพของเวบ็ ไซต์ เศรษฐกิจพอเพียง
3.2.4 นําผลจากการประเมินมาพิจารณาหาค่าเฉล่ียโดยใช้เกณฑ์ในการแปล
ความหมายดงั น้ี
4.51 - 5.00 หมายถึงมีคุณภาพระดบั ดีมาก
3.51 - 4.50 หมายถึงมีคุณภาพระดบั ดี
2.51 - 3.50 หมายถึงมีคุณภาพระดบั พอใช้
1.51 - 2.50 หมายถึงตอ้ งปรับปรุงแกไ้ ข
1.00 - 1.50 หมายพึง ใชไ้ มไ่ ด้

28

4. วธิ กี ารดาํ เนินการศึกษา

ในการดาํ เนินงานการศึกษา ผวู้ จิ ยั ไดส้ ร้างเวบ็ ไซตก์ ารสร้างและการพฒั นาเวบ็ ไซต์
เศรษฐกิจพอเพียง ดงั น้ี

ลาํ ดบั ข้นั ตอนการดําเนินงาน
ข้นั ตอนการดาํ เนินงานเป็ นโครงงานท่ีจดั ข้ึนเพ่ือสร้างและพฒั นาเวบ็ ไซต์เพ่ือ

สุขภาพสะดวกในการดาํ เนินงานและคน้ ควา้ หาไดอ้ ยา่ งสะดวกสบายในการใชง้ านมากยิ่ง ซ่ึงลาํ ดบั
ข้นั ตอน การทาํ งานดงั ต่อไปน้ี

การสร้างและออกแบบเวบ็ ไซต์
เราสามารถสร้างเวบ็ ไซต์ดว้ ยโปรแกรม Dreamweaver Cs4 ได้โดยเริ่มจากการ

กาํ หนดโครงร่างของเวบ็ และสร้างโฟลเดอร์ต่าง ๆ ที่ประกอบกนั เป็ นเวบ็ ไซตข์ องเรามีรายละเอียด
ดงั น้ี

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

สําหรับไฟล์ต่าง ๆ เหล่าน้ีท่ีประกอบเป็ นเว็บไซต์จะถูกเก็บไวใ้ นเครื่องของเรา
นอกจาก (ในกรณีที่เราทาํ งานเป็ นทีมก็อาจมีการกาํ หนดเคร่ืองเซิร์ฟเวอร์ที่เก็บไฟล์เหล่าน้ีไวเ้ ป็ น
ศูนยก์ ลาง)จะเห็นไดว้ า่ การแยกเก็บไฟล.์ html ไฟล์อื่น ๆ อยา่ งเป็ นระบบจะช่วยในการจดั เก็บและ
การคน้ หาไฟล์ ตลอดจนการเช่ือมโยงระหวา่ งไฟลต์ ่าง ๆ ไดง้ ่าย

การเข้าสู่โปรแกรม Macromedia Dream weaver Cs4
1. คลิกป่ ุม Start
2. คลิกป่ ุม Adobe Dream weaver Cs4
รูปท่ี 3.1 การเขา้ สู่โปรแกรม Macromedia Dreamweaver Cs4

29

การสร้างเอกสารใหม่
1. เมนู File เลือก New
2. คลิก Basic page จากน้นั เลือก HTML
3. กดป่ ุม Create
รูปท่ี 3.2 การสร้างเอกสารใหม่

30

หน้าจอของโปรแกรม Macromedia Dreamweaver Cs4

รูปที่ 3.3 เมื่อคลิก HTML จะพบหนา้ ตาของโปรแกรม
กาํ หนดเวบ็ ไซต์ใหม่ใน Dreamweaver

เริ่มตน้ โดยกาํ หนดเวบ็ ไซตใ์ หม่ในโปรแกรม Dreamweaver (เรียกวา่ เป็ นการสร้าง
Site ใหม่) โดยมีวิธีการสร้างเวบ็ ไซตแ์ บบใชว้ ิซาร์ด โดย Dreamweaver จะใหเ้ ราเลือกเพียงรูปแบบ
การทาํ งาน เช่น ตอ้ งการสร้างเวบ็ ไซตก์ บั เซิร์ฟเวอร์แบบไหน ตอ้ งการสร้างเวบ็ ไซต์คนเดียวหรือ
ทํางานร่วมกันเป็ นทีม เป็ นต้น โดยที่เราไม่ต้องกําหนดรายละเอียดใด ๆ เพิ่มเติม เพราะ
Dreamweaver จะช่วยกาํ หนดใหท้ ้งั หมด

1. เลือกคาํ ส่งั Site > New Site

31

รูปที่ 3.4 ใส่ช่ือโฟลเดอร์เพื่อใชเ้ กบ็ เวบ็ เพจ
2. คลิกเมาส์ท่ีแทบ็ Basic
3. กาํ หนดช่ือใหก้ บั โฟลเดอร์ที่ใชเ้ กบ็ เวบ็ ไซต์
4. คลิกเลือก No, I do not want to use a server technology แลว้ คลิก OK >

รูปท่ี 3.5 การเลือกใชเ้ ทคโนโลยดี า้ นเซิร์ฟเวอร์

32

การสร้าง Banner บน Webpage ด้วยโปรแกรมAdobe Photoshop CS4
ข้นั ตอนการสร้าง
1. กาํ หนดไฟลเ์ อกสาร ขนาด 980x250
2. เมนุFile เลือก Open รุปภาพท่ีตอ้ งการทาํ banner ข้ึนมา
3. นาํ รูปมาวางในเอกสารโดย กดป่ ุม Ctrl+A หรือ เมนู Select เลือก All

รูปท่ี 3.8 การนาํ รูปมาวางบนเอกสารเพ่ือสร้าง banner
4. จากน้นั ทาํ ตามขอ้ 2,3 เพ่ือนาํ รูปมาสร้าง banner อีก2 รูป
5. ทาํ การตกแต่งภาพในลกั ษณะตา่ งๆ
6. บนั ทึกไฟล์
7. เปิ ดไฟลภ์ าพใน Swish ax

33

รูปที่ 3.9 banner ท่ีไดจ้ ากการตกแตง่ ดว้ ยภาพ

การใส่ Banner บนหน้าเวบ็
1. ไปท่ี แถบเครื่องมือ Insert Bar > Common > Flash
รูปท่ี 3.10 การนาํ banner มาใส่
2. จะปรากฏหนา้ ตา่ งการทาํ งานเพ่ือเลือก banner ข้ึนมาใส่

34

3. เลือก banner ที่ตอ้ งการ แลว้ กด OK

รูปที่ 3.11 ผลลพั ธ์ที่ได้ banner ถูกนาํ มาใส่เรียบร้อย
การสร้างป่ ุม Button ด้วยโปรแกรม Adobe Photoshop

1. เมนู file > New > กาํ หนดขนาด 150 x 30 pixels
2. กาํ หนดสี เทสีพ้นื ดว้ ย เครื่องมือ Paint Bucket tool
3. พมิ พข์ อ้ ความ

35

รูปท่ี 3.12 การสร้างป่ ุม
การใส่ Background Image หรือพนื้ หลงั

1. ไปท่ี Page Properties > เลือก background image
2. คลิกท่ีป่ ุม Browse เพอื่ ทาํ การเลือกภาพพ้นื หลงั ท่ีทาํ การเตรียมไวม้ าใส่

รูปท่ี 3.13 การใส่ภาพพ้ืนหลงั background image
3. จากน้นั OK
การสร้างตาราง
1. กาํ หนดใหต้ าราง rows 90 > columns 7 > border 0 > width 800 > align = center

36

รูปที่ 3.15 รายละเอียดของการสร้างตาราง
การใส่ รูปภาพ

ข้นั ตอนการใส่รูปภาพบนหนา้ เวบ็ เพจ
1. Insert bar > Common > Image
2. ไปยงั โฟลเดอร์ท่ีเก็บรูปภาพที่ไดเ้ ตรียมสาํ หรับใส่หนา้ เวบ็ เพจ
รูปที่ 3.16 การนาํ รูปภาพมาใส่
3. ปรากฏ หนา้ ต่างการทาํ งานเพื่อนาํ รูปภาพมาใส่
4. เลือกรูปภาพท่ีตอ้ งการใส่ แลว้ กด OK

37

รูปที่ 3.17 หนา้ ต่างสาํ หรับนาํ รูปภาพมาใส่บนเวบ็ เพจ
5. ต่อมาจะปรากฏหนา้ ต่าง Image Tag Accessibility Attributes เพื่อเป็ นการเพ่ิม
ลูกเล่นใหก้ บั ภาพ

รูปท่ี 3.19 หนา้ ตา่ ง Image Tag Accessibility Attributes
6. เม่ือไดร้ ูปภาพท่ีตอ้ งการแลว้ จดั รูปแบบและตาํ แหน่งใหเ้ หมาะสม

การใส่สีพนื้ ตาราง
กาํ หนดสีพ้นื ใหส้ ่วนของสารบญั เวบ็ โดยเลือกสีพ้ืนเป็นช่องของตารางหรือแถว
Bg color #E5E5E5 Brdr color #E5E5E5

38

รูปท่ี 3.20 กาํ หนดสีพ้นื ใหก้ บั เมนูสารบญั เวบ็ ในแตล่ ะแถวของตาราง

5. สถิตทิ ใ่ี ช้ในการวเิ คราะหข็ ้อมูล

สถิติท่ีใชใ้ นการวเิ คราะห์ขอ้ มูลมีดงั น้ี
คา่ เฉลี่ย (Mean)
คา่ เบ่ียงเบนมาตรฐาน (S.D.)

ค่าเฉลย่ี (Mean)

สูตร X = ∑ fX
n

X แทน ค่าเฉล่ียเลขคณิตของกลุ่มตวั อยา่ ง
fX แทน ผลคูณระหวา่ งความถี่กบั จุดก่ึงกลางของแตล่ ะอนั ตรภาคช้นั
n แทน จาํ นวนขอ้ มูลของกลุ่มตวั อยา่ ง
ค่าเบ่ียงเบนมาตรฐาน

สูตร SD = ∑ f (X − X )
n −1

SD แทน ส่วนเบ่ียงเบนมาตรฐานของกลุ่มตวั อยา่ ง
X แทน คา่ ของขอ้ มลู แตล่ ะหน่วยหรือจุดก่ึงกลางของแตล่ ะอนั ตราภาค
ช้นั
X แทน คา่ เฉล่ียเลขคณิตของกลุ่มตวั อยา่ ง
n แทน จาํ นวนขอ้ มลู ของกลุ่มตวั อยา่ ง
f แทน ความถี่ของขอ้ มูลแต่ละอนั ตรภาคช้นั

บทที่ 4

ผลการดาํ เนินการศึกษา

การวิจยั คร้ังน้ีมีวตั ถุประสงค์เพ่ือสร้างและประเมินคุณภาพของเว็บไซต์ เศรษฐกิจพอเพียง จาก
ผเู้ ชี่ยวชาญ โดยดาํ เนินการสร้างและประเมินคุณภาพของเวบ็ ไซต์ เศรษฐกิจพอเพียง จากผเู้ ช่ียวชาญ
โดยนาํ เสนอผลวจิ ยั ตามลาํ ดบั ดงั น้ี

4.1 ผลการสร้างเวบ็ ไซต์ เศรษฐกิจพอเพยี ง
4.2 ผลการประเมินคุณภาพเวบ็ ไซต์ เศรษฐกิจพอเพยี ง
จากผเู้ ชี่ยวชาญ

ผลการสร้างเวบ็ ไซต์เศรษฐกจิ พอเพยี ง

การสร้างและพฒั นาเวบ็ ไซตก์ ลอ้ งดิจิตอล โดยเม่ือเปิ ดหนา้ เวบ็ ไซตข์ ้ึนมากจ็ ะพบกบั หนา้
หลกั เวบ็ ไซต์ และส่วนตา่ งๆ ของเวบ็ ไซตด์ งั ต่อไปน้ี

รูปที่ 4.1 หนา้ แรกของเวบ็ ไซต์