Wd ch01 p20_01

40
บบบบบ 1 บบบบบบบบบบบบบ บบบบบบบบบบบบ บบบบบบ บบบบบบบ บบบบบบบบบบบ

Transcript of Wd ch01 p20_01

Page 1: Wd ch01 p20_01

บทท�� 1ความรู้��เบ��องต้�นเกี่��ยวกี่�บโฮมเพจ เว�บเพจ

และเว�บไซต้!

Page 2: Wd ch01 p20_01

ความหมายของโฮมเพจ เว�บเพจ และเว�บไซต้!โฮมเพจ (Home Page) ค�อ คำ��ที่��ใช้เรี�ยกหน้�

แรีกของเว็�บไซต์�ที่��ปรีะกอบไปด้ว็ยเมน้� และเน้"#อห�ต์$�งๆคำล�ยก&บหน้�ปกน้'ต์ยส�รี ซ)�งม�ก�รีออกแบบหน้�โฮมเพจใหสว็ยง�ม และน้$�สน้ใจ ก�ส�ม�รีถด้)งด้�ด้ผู้�ช้มใหเข�ม�อ$�น้ขอม�ลภ�ยใน้โฮมเพจได้อ�กอ�กด้ว็ย

รู้�ปท��1.1 หน�าโฮมเพจเว�บไซต้! NASA (http://www.nasa.gov/news/index.ht

ml)

Homepag

e

Page 3: Wd ch01 p20_01

เว�บเพจ (Web Page) ค�อ หน้�หน้)�งๆ ของเว็�บไซต์�ที่��เป1ด้ข)#น้ม�ใช้ง�น้ โด้ยเว็�บเพจ ส$ว็น้ใหญ่$จะอย�$ใน้รี�ปแบบของเอกส�รี HTML หรี"อ XHTML โด้ยม� link เช้"�อมโยงไปย&งหน้�เว็�บเพจอ"�น้ๆ

รู้�ปท��1.2 หน�าเพจเว�บของ Song chai's BLOG (http://www.songchaiblog.com/397)

หน้� Web page ที่��ม�

link เช้"�อมโยงไปย&งหน้�เว็�บเพ

จอ"�น้ๆ ของเว็�บไซต์�

Link ที่��เช้"�อมโยงไปย&งหน้�เว็�บเพจอ"�น้ๆ ของเว็�บไซต์�

Page 4: Wd ch01 p20_01

เว�บไซต้! (Web Site) ค�อ กล3$มของเว็�บเพจ ภ�ยใน้ที่��จะปรีะกอบไปด้ว็ยหน้�โฮมเพจ และเว็�บเพจ ส$ว็น้ใหญ่$ม&กใช้เรี�ยกเว็�บไซต์�ที่��ม�ขน้�ด้ใหญ่$และม�ก�รีจด้ที่ะเบ�ยน้ ช้"�อเว็�บไซต์�ไว็แลว็เช้$น้ www.google.com

รู้�ปท��1.3 หน�าเว�บไซต้!ของ iGetWeb (http://www.igetweb.com/)

ใน้กรีอบส�เหล"องน้�#

คำ"อเว็�บไซต์� ที่��ภ�ยใน้จะ

ม�ที่&#ง Home page

และ Web page ใน้ก�รีเช้"�อมโยงไปย&งเอกส�รีต์$�งๆภ�ยใน้ของ

เว็�บไซต์�

Page 5: Wd ch01 p20_01

ใน้ป4จจ3บ&น้ที่&#งองคำ�กรีของรี&ฐหรี"อเอกช้น้ต์$�งก�ม�เว็�บไซต์�เป6น้ของต์น้เอง เพ"�อใช้น้��เสน้อขอม�ลเผู้ยแพรี$ขอม�ลข$�ว็ส�รีต์$�งๆ เน้"�องจ�กเว็�บไซต์�ส�ม�รีถเผู้ยแพรี$ขอม�ลด้ว็ยขอคำว็�ม ภ�พ เส�ยง และภ�พยน้ต์รี�จ)งที่��ใหองคำ�กรีม�ก�รีสรี�งและพ&ฒน้�เว็�บไซต์� เพ"�อเสน้อขอม�ลใน้รี�ปแบบต์$�งๆ ได้ด้&งน้�#

ปรู้ะโยชน!ของเว�บไซต้!

Page 6: Wd ch01 p20_01

รู้�ปท��1.4 เว�บไซต้!รู้ายงานข&าวของ The Nation (http://www.nationmultimedia.com/breakingnews/

)

1. น'าเสนอข&าวและเหต้)กี่ารู้ณ์!ในป,จจ)บ�นก�รีน้��เสน้อข$�ว็ส�รีใน้ป4จจ3บ&น้ น้อกจ�กจะน้��เสน้อ

ใน้รี�ปแบบของส"�อส'�งพ'มพ� โที่รีที่&ศน้�หรี"อส"�ออ"�น้ๆ แลว็บน้เว็�บไซต์�ก�เป6น้อ�กช้$องที่�งหน้)�งที่��ส�ม�รีถน้��เสน้อได้อย$�งรีว็ด้เรี�ว็ที่&น้ต์$อเหต์3ก�รีณ์�ต์$�งๆ ที่��เก'ด้ข)#น้จ�กที่&�ว็โลกได้รีว็ด้เรี�ว็

(ต้&อ)

Page 7: Wd ch01 p20_01

2. ให�ความรู้��และห�องสม)ดก�รีคำน้ห�ขอม�ล และคำว็�มรี� ต์$�งๆ น้อกจ�กจะอย�$

เฉพ�ะใน้หองสม3ด้แลว็ ป4จจ3บ&น้เว็�บไซต์�ก�ได้น้��ม�เป6น้เคำรี"�องม"อรีว็บรีว็มคำว็�มรี� ไว็เป6น้คำล&งขน้�ด้ใหญ่$ ไม$ย3$งย�กใน้ก�รีด้�แลรี&กษ� เช้$น้ ฐ�น้ขอม�ลว็'ที่ย�น้'พน้ธ์�และง�น้ว็'จ&ย เป6น้ต์น้ และย&งเผู้ยแพรี$ขอม�ลต์$�งๆ ได้อย$�งกว็�งขว็�งอ�กด้ว็ย

รู้�ปท��1.5 เว�บไซต้!ส�บค�นหน�งส�อของ มมส (http://www.library.msu.ac.th/web/)

(ต้&อ)

Page 8: Wd ch01 p20_01

3. เป.นกี่ารู้ปรู้ะชาส�มพ�นธ์!องค!กี่รู้หรู้�อหน&วยงานหน้$ว็ยง�น้หรี"อองคำ�กรีต์$�งๆ ที่&#งของรี&ฐ และ

เอกช้น้ น้'ยมสรี�งเว็�บไซต์� เพ"�อใช้เป6น้เคำรี"�องม"อใน้ก�รีแน้ะน้��ปรีะว็&ต์' คำว็�มเป6น้ม� ข$�ว็ ส'น้คำ�และบรี'ก�รีต์$�งๆ รีว็มไปถ)งโคำรีงสรี�งก�รีบรี'ห�รีง�น้ และที่��อย�$ส��หรี&บก�รีต์'ด้ต์$อต์$�งๆ ด้ว็ย

รู้�ปท��1.6 เว�บไซต้!ปรู้ะสาส�มพ�นธ์!ของ กี่รู้มปรู้ะชาส�มพ�นธ์! (http://www.prd.go.th/main.php?filename=index)

(ต้&อ)

Page 9: Wd ch01 p20_01

4. ให�ความบ�นเท0งเว็�บไซต์�ที่��ใหคำว็�มบ&น้เที่'ง เป6น้เว็�บไซต์�ที่��ม�ที่& #งภ�พ

เส�ยง และว็'ด้�โอ รีว็มถ)งข$�ว็ส�รีต์$�งๆ ใน้แว็ด้ว็งบ&น้เที่'งที่��น้��เสน้อต์$อผู้�เข�ช้ม เช้$น้ ก�รีฟั4งว็'ที่ย3 ฟั4งเพลงออน้ไลน้� เกมส� และเรี"�องต์ลกข��ข&น้ต์$�งๆ เป6น้ต์น้

รู้�ปท��1.7 เว�บไซต้!บ�นเท0งของ MSNบ�นเท0ง (http://entertainment.th.msn.com/)

(ต้&อ)

Page 10: Wd ch01 p20_01

5. เป.นปรู้ะโยชน!ในกี่ารู้เง0น กี่ารู้ลงท)นทางธ์)รู้กี่0จเว็�บไซต์�ที่��เป6น้ปรีะโยช้น้�ที่�งธ์3รีก'จ คำ"อ เว็�บไซต์�ที่��ม�

ก�รีน้��เสน้อขอม�ลที่�งก�รีเง'น้และก�รีลงที่3น้ใน้ธ์3รีก'จต์$�งๆ อ&ต์รี�ก�รีเปล��ยน้แปลงของคำ$�เง'น้ บรี'ก�รีส��หรี&บที่��ธ์3รีกรีรีมก�รีเง'น้ออน้ไลน้�ผู้$�น้เคำรี"อข$�ยอ'น้เที่อรี�เน้�ต์ รีว็มไปถ)งข$�ว็ส�รีขอม�ลเศรีษฐก'จที่��ส��คำ&ญ่

รู้�ปท��1.8 เว�บไซต้!กี่ารู้เง0น กี่ารู้ลงท)นทางธ์)รู้กี่0จของ กี่รู้)งเทพธ์)รู้กี่0จ (http://www.bangkokbiznews.com/home/)

(ต้&อ)

Page 11: Wd ch01 p20_01

6. เป.นแหล&งซ��อขายส0นค�า และบรู้0กี่ารู้ป4จจ3บ&น้องคำ�กรีต์$�งๆ ม�ก�รีน้��เว็�บไซต์�ม�เป6น้ส"�อ

กล�งใน้ก�รีซ"#อข�ยส'น้คำ� และบรี'ก�รีม�กข)#น้ รีว็มไปถ)งก�รีโฆษณ์�ส'น้คำ� ปรีะช้�ส&มพ&น้ธ์� และฝ�กข�ยส'น้คำ�หล�กหล�ยปรีะเภที่ผู้$�น้ที่�งเว็�บไซต์�เหล$�น้�#ได้อ�กด้ว็ย

รู้�ปท��1.9 เว�บไซต้!ซ��อขายส0นค�า และบรู้0กี่ารู้ของWeloveshopping.com

(http://www.weloveshopping.com/)

(ต้&อ)

Page 12: Wd ch01 p20_01

7. ให�บรู้0กี่ารู้ดาวน!โหลดข�อม�ลต้&างๆเว็�บไซต์�ที่��ใหบรี'ก�รีด้�ว็น้�โหลด้ไฟัล�ต์$�งๆ เช้$น้

โปรีแกรีม เพลง หน้&ง ว็'ด้�โอ และรี�ปภ�พ เป6น้ต์น้ซ)�งเป6น้เว็�บไซต์�อ�กรี�ปแบบหน้)�งที่��ได้รี&บคำว็�มน้'ยมอย$�งส�งใน้ป4จจ3บ&น้

รู้�ปท��1.10 เว�บไซต้!บรู้0กี่ารู้ดาวน!โหลดข�อม�ลต้&างๆ ของกี่รู้ะป)กี่ดอทคอม (http://download.kapook.com/)

(ต้&อ)

Page 13: Wd ch01 p20_01

8. ให�บรู้0กี่ารู้ต้0ดต้&อส��อสารู้ข�อม�ลเป6น้เว็�บไซต์�ที่��ใหบรี'ก�รีต์'ด้ต์$อส"�อส�รีถ)งก&น้ใน้รี�ป

แบบของส"�ออ'เล�กที่รีอน้'กส� เช้$น้ อ�เมล� เว็�บบอรี�ด้และก�รีสน้ที่น้�ต์$�งๆ เป6น้ต์น้

รู้�ปท��1.11 เว�บไซต้!บรู้0กี่ารู้ต้0ดต้&อส��อสารู้ ของYahoo! mail (http://th.mail.yahoo.com/)

(ต้&อ)

Page 14: Wd ch01 p20_01

ว0ธ์�กี่ารู้สรู้�างโฮมเพจและเว�บไซต้!ก�รีสรี�งโฮมเพจน้&#น้ม�ว็'ธ์�ก�รีที่��หล�กหล�ย และม�

คำว็�มย�กง$�ยแต์กต์$�งก&น้ออกไปต์�มล&กษณ์ะของภ�ษ� หรี"อเคำรี"�องม"อที่��ใช้ใน้ก�รีพ&ฒน้� โด้ยที่&�ว็ไปม� 3 ว็'ธ์�ก�รีใหญ่$ๆ ด้&งน้�#

1. กี่ารู้สรู้�างโฮมเพจด�วยโปรู้แกี่รู้มของเว�บโฮสต้!ต้0�ง (Web Hosting)เว็�บโฮสต์�ต์'#ง (Web Hosting) คำ"อ บรี'ก�รีใหเช้$�พ"#น้ที่�� หรี"อรี&บฝ�กเว็�บไซต์�บน้เว็�บเซ'รี�ฟัเว็อรี� (Web Server) ซ)�งเรี�ยกว็$�เว็�บโฮส (Web Host) ที่��หน้�ที่��เป6น้ศ�น้ย�กล�งเก�บขอม�ล ส��หรี&บเช้"�อมบรี'ก�รีต์$�งๆ ผู้$�น้ที่�งอ'น้เที่อรี�เน้�ต์ เช้$น้ รี�ปภ�พ และว็'ด้�โอผู้$�น้ที่�งเว็�บ เป6น้ต์น้ และช้$ว็ยใหผู้�ใช้บรี'ก�รีที่��ต์องก�รีม�เว็�บไซต์�เป6น้ของต์&ว็เองได้ โด้ยที่��ไม$เส�ยคำ$�ใช้จ$�ยใน้ด้�น้ ฮ�รี�ด้แว็รี�(Hardware) ซอฟัต์�แว็รี�(Software) และ คำน้ (People ware) เลย

Page 15: Wd ch01 p20_01

องค!ปรู้ะกี่อบท��ใช�ในกี่ารู้พ0จารู้ณ์าเว�บโฮสต้!ต้0�งองคำ�ปรีะกอบที่��ใช้ใน้ก�รีพ'จ�รีณ์�เว็�บโฮสต์�ต์'#งม�หล�ยขอด้ว็ยก&น้ ด้&งน้�#

1. บรี'ษ&ที่ที่��ใหบรี'ก�รี (Company)2. คำว็�มน้$�เช้"�อถ"อ (Reliability)3. คำว็�มส�ม�รีถใน้ก�รีใหบรี'ก�รี (Availability)4. จ��น้ว็น้ของช้$องที่�งใน้ก�รีเช้"�อมต์$ออ'น้เที่อรี�เน้�ต์

(Redundancy)5. ฮ�รี�ด้แว็รี�ที่��ใหบรี'ก�รี (Hardware)6. ก�รีต์รีว็จสอบ (Monitoring)7. ก�รีส��รีองขอม�ล (Backup)8. ก�รีใหบรี'ก�รีที่�งเที่คำน้'คำ (Technical

Support)9. เว็ล�ใหบรี'ก�รีเว็ล�ที่��ม�ป4ญ่ห� (Support

Hours)10. น้โยบ�ยใน้ก�รีใหบรี'ก�รี (Policies)

Page 16: Wd ch01 p20_01

องค!ปรู้ะกี่อบท��ใช�ในกี่ารู้เล�อกี่ความสามารู้ถของเว�บโฮสต้!ต้0�งก�รีใช้บรี'ก�รีเว็�บโฮสต์�ต์'#งโด้ยที่&�ว็ไปอ�จม�คำ$�ใช้จ$�ยเข�

ม�เก��ยว็ของ ด้&งน้&#น้ก�รีที่��จะเล"อกใช้บรี'ก�รีเว็�บโฮสต์�ต์'#งเพ"�อสรี�งโฮมเพจใหต์รีงก&บคำว็�มต์องก�รีม�กที่��ส3ด้คำว็รีที่��ก�รีต์รีว็จสอบด้&งต์$อไปน้�#

1. รีะบบปฏิ'บ&ต์'ก�รี (Operating System)2. พ"#น้ที่��ใน้ก�รีใหบรี'ก�รี (Disk Space)3. คำว็�มส�ม�รีถใน้ก�รีเข�ถ)งขอม�ล (Data

Transfer)4. ก�รีใหบรี'ก�รีที่�งด้�น้อ�เมล� (e-Mail)5. ก�รีใหบรี'ก�รีด้�น้ฐ�น้ขอม�ล (Database)6. ภ�ษ�โปรีแกรีมที่��ใหบรี'ก�รี (Script

Languages)7. หม�ยเลข IP Address ที่��ได้รี&บ (Unique IP

Address)8. คำว็�มปลอด้ภ&ยใน้ก�รีใหบรี'ก�รีแบบ E-

Commerce (Secure Server)9. ก�รีช้��รีะเง'น้คำ$�บรี'ก�รี (Payment Terms)10. คำ$�ใช้จ$�ยใน้ก�รีใช้บรี'ก�รี (Price)

Page 17: Wd ch01 p20_01

ข�อด�ของกี่ารู้สรู้�างเว�บไซต้!ด�วยเว�บโฮสต้0�ง ค�อ ผู้�ใช้บรี'ก�รีส�ม�รีถเป1ด้เว็�บไซต์�ได้รีว็ด้เรี�ว็ และไม$ต์องเส�ยคำ$�ใช้จ$�ยใน้ด้�น้ฮ�รี�ด้แว็รี� ซอฟัต์�แว็รี� และผู้�ด้�แล เพรี�ะม�คำ$�ใช้จ$�ยเฉพ�ะคำ$�เช้$�พ"#น้ที่��บรี'ก�รีเที่$�น้&#น้

ข�อเส�ยของว0ธ์�กี่ารู้สรู้�างเว�บไซต้!ด�วยเว�บโฮสต้0�ง ค�อ ผู้�ใหบรี'ก�รีอ�จม�รี�ปแบบหน้�โฮมเพจใหเล"อกน้อย และไม$ส�ม�รีถออกแบบล&กษณ์ะได้ต์รีงต์�มคำว็�มต์องก�รี ถ�เป6น้ฟัรี�เว็�บโฮสต์'#งก�ม�เน้"#อที่��ใหใช้ง�น้ จ��ก&ด้ ไม$รีองรี&บก�รีที่��ง�น้ภ�ษ�โปรีแกรีม และไม$ม�คำว็�มปลอด้ภ&ยใน้ก�รีใหบรี'ก�รีซ"#อ-ข�ยอ'เล�กที่รีอน้'กส�

(ต้&อ)

Page 18: Wd ch01 p20_01

2. กี่ารู้สรู้�างด�วยโปรู้แกี่รู้มส'าหรู้�บสรู้�างเว�บไซต้!โปรีแกรีมที่��ช้$ว็ยใน้ก�รีสรี�งเว็�บเพจ ม�อย�$หล�ยต์&ว็ใน้

ป4จจ3บ&น้ ก�รีเล"อกใช้ง�น้ก�ข)#น้อย�$ก&บรี�ปแบบของก�รีสรี�งเว็�บไซต์� หรี"อคำว็�มถน้&ด้ของผู้�พ&ฒน้�เอง ด้&งน้&#น้โปรีแกรีมที่��ใช้เข�ยน้โคำด้เว็�บเพจด้ว็ยภ�ษ�ม�รี�คำอ&พ และภ�ษ�สคำรี'ปต์�ภ�ษ�ม�รี�คำอ&พ (Markup Language) คำ"อ ภ�ษ�ที่��ใช้ว็'ธ์�ก�รีรีะบ3เน้"#อห�และจ&ด้รี�ปแบบโคำรีงสรี�งขอม�ลด้ว็ย Text File และส�ม�รีถใช้โปรีแกรีม Text Editor ที่&�ว็ๆ ไป เช้$น้ โปรีแกรีม Notepad หรี"อ Edit Plus ใน้ก�รีเข�ยน้โคำด้เว็�บเพจด้ว็ยภ�ษ�ม�รี�คำอ&พ และภ�ษ�สคำรี'ปต์�ได้

Page 19: Wd ch01 p20_01

ข�อด�ของโปรู้แกี่รู้มเข�ยนโค�ดเว�บเพจด�วยภาษามารู้!คอ�พ และภาษาสครู้0ปต้! ค�อ เป6น้โปรีแกรีมที่��ม�ใหใช้ง�น้ฟัรี� โด้ยโปรีแกรีม Notepad จะม�ม�พรีอมก&บรีะบบปฏิ'บ&ต์'ก�รี Windows ส$ว็น้ Edit Plus ส�ม�รีถด้�ว็น้�โหลด้ได้จ�กอ'น้เที่อรี�เน้�ต์

ข�อเส�ยของโปรู้แกี่รู้มเข�ยนโค�ดเว�บเพจด�วยภาษามารู้!คอ�พ และภาษาสครู้0ปต้! ค�อ ผู้�พ&ฒน้�จะต์องใช้คำว็�มส�ม�รีถและคำว็�มช้��น้�ญ่ใน้ก�รีเข�ยน้โปรีแกรีมพอสมคำว็รี เน้"�องจ�กเป6น้ก�รีพ'มพ�โคำด้คำ��ส&�งที่��ต์องก�รีลงไปเองที่&#งหมด้ จ�กน้&#น้โปรีแกรีมเหล$�น้�#จะที่��ก�รีแปลงขอม�ลใหกล�ยเป6น้ภ�พหรี"อขอคำว็�มที่��ต์องก�รี

Page 20: Wd ch01 p20_01

โปรู้แกี่รู้มท��ใช�สรู้�างเว�บเพจและจ�ดองค!ปรู้ะกี่อบบนหน�าเว�บ

ป4จจ3บ&น้ได้ม�ก�รีพ&ฒน้�โปรีแกรีมส��เรี�จรี�ปที่��ใช้สรี�งเว็�บไซต์�ได้อย$�งง$�ยๆ เพ�ยงแคำ$น้��รี�ปภ�พและขอคำว็�มที่��ต์องก�รีม�ว็�งบน้หน้�เว็�บเพจ รีว็มไปถ)งม�เคำรี"�องม"อที่��ช้$ว็ยจ&ด้ว็�งหน้�เว็�บไซต์� และเพ'�มล�กเล$น้ต์$�งๆ ใหก&บเว็�บเพจ เช้$น้ ใส$เส�ยง หรี"อภ�พเคำล"�อน้ไหว็ได้ด้ว็ย โด้ยโปรีแกรีมส��เรี�จรี�ปที่��ได้รี&บคำว็�มน้'ยมใช้สรี�งเว็�บไซต์�ม�กที่��ส3ด้ใน้ป4จจ3บ&น้ คำ"อ Dreamweaver เน้"�องจ�กม�ก�รีใช้ง�น้ง$�ยและไม$จ��เป6น้ต์องม�คำว็�มรี� เรี"�องของภ�ษ� HTML ม�กน้&ก

Page 21: Wd ch01 p20_01

ข�อด�ของโปรู้แกี่รู้มท��ใช�สรู้�างเว�บเพจและจ�ดองค!ปรู้ะกี่อบบนหน�าเว�บ ค�อ ผู้�พ&ฒน้�ไม$จ��เป6น้ต์องเข�ใจโคำรีงสรี�ง และคำ��ส&�งของภ�ษ� HTML/XHTML ก�ส�ม�รีถสรี�งเว็�บเพจได้ เพ�ยงแคำ$ส�ม�รีถใช้ง�น้เคำรี"�องม"อต์$�งๆ ที่��ที่�งผู้�ผู้ล'ต์ได้จ&ด้เต์รี�ยมไว็ใหได้

ข�อเส�ยของโปรู้แกี่รู้มท��ใช�สรู้�างเว�บเพจและจ�ดองค!ปรู้ะกี่อบบนหน�าเว�บ ค�อ ผู้�ใช้อ�จต์องม�คำ$�ใช้จ$�ยเก'ด้ข)#น้ใน้ส$ว็น้ของล'ขส'ที่ธ์'Aซอฟัต์�แว็รี�

(ต้&อ)

Page 22: Wd ch01 p20_01

3. กี่ารู้สรู้�างเว�บไซต้!ด�วยรู้ะบบบรู้0หารู้จ�ดกี่ารู้เน��อหาเว�บไซต้! หรู้�อ CMSรีะบบบรี'ห�รีจ&ด้ก�รีเน้"#อห�เว็�บไซต์� หรี"อ CMS

(Content Management System) เป6น้โปรีแกรีมที่��ผู้�พ&ฒน้�เว็�บไซต์�จ�กที่&�ว็โลกน้��ไปใช้สรี�งเว็�บไซต์�แบบได้น้�ม'ก ซ)�งช้$ว็ยใหเจ�ของเว็�บไซต์�ส�ม�รีถเพ'�มเต์'มหรี"อเปล��ยน้แปลงเน้"#อห�ได้ง$�ย สะด้ว็ก และรีว็ด้เรี�ว็ โด้ยไม$ต์องเส�ยเว็ล�ไปก&บก�รีเข�ยน้โปรีแกรีมอ�กที่&#งที่��ใหก�รีเผู้ยแพรี$ขอม�ลผู้$�น้เว็�บไซต์�เป6น้ไปอย$�งม�ปรีะส'ที่ธ์'ภ�พม�ย'�งข)#น้ป4จจ3บ&น้โปรีแกรีม CMS ม�ใหเล"อกใช้ง�น้หล�ยต์&ว็ด้ว็ยก&น้ เช้$น้ Mambo, XOOP, PHPNuke และ Joomla! ซ)�งแต์$ละโปรีแกรีมก�ม�คำว็�มส�ม�รีถที่��แต์กต์$�งก&น้ออกไป

Page 23: Wd ch01 p20_01

ข�อด�ของกี่ารู้สรู้�างเว�บไซต้!ด�วยโปรู้แกี่รู้ม CMS ค�อ ส�ม�รีถสรี�งเว็�บไซต์�ได้รีว็ด้เรี�ว็ โด้ยที่��ผู้�พ&ฒน้�ไม$จ��เป6น้ต์องม�คำว็�มรี� ใน้ก�รีเข�ยน้ภ�ษ�ต์$�งๆ เช้$น้ HTML/XHTML และ PHP อ�กที่&#งย&งเป6น้ซอฟัต์�แว็รี�ที่��ม�ใหใช้ง�น้ฟัรี� (Open Source Software) ที่��ใหปรีะหย&ด้และเว็ล�ได้ใน้รีะยะย�ว็

ข�อเส�ยของกี่ารู้สรู้�างเว�บไซต้!ด�วยโปรู้แกี่รู้ม CMS ค�อ โปรีแกรีม CMS ย&งไม$ส�ม�รีถสรี�งเว็�บไซต์�ใหได้ต์รีงก&บคำว็�มต์องก�รีได้ที่&#งหมด้ ผู้�พ&ฒน้�ย&งต์องเส�ยเว็ล�ด้�ว็น้�โหลด้โปรีแกรีมเสรี'ม(Extension)ต์$�งม�ต์'ด้ต์&#งเพ'�มเต์'มใหก&บรีะบบ เพ"�อใหได้เว็�บไซต์�ที่��ต์องก�รี เช้$น้ เว็�บบอรี�ด้ เป6น้ต์น้ ซ)�งม�ที่& #งเส�ยคำ$�ใช้จ$�ย และไม$ม�คำ$�ใช้จ$�ย

(ต้&อ)

Page 24: Wd ch01 p20_01

ปรู้ะเภทของเว�บไซต้!ในป,จจ)บ�นป4จจ3บ&น้ม�เว็�บไซต์�ม�กม�ยเก'ด้ข)#น้ เว็�บไซต์�ก�ม�รี�ป

รี$�งหน้�ต์� รีว็มไปถ)งก�รีใช้ง�น้ที่��แต์กต์$�งก&น้ออกไป ซ)�งส�ม�รีถจ��แน้กปรีะเภที่ได้ด้&งน้�#

Page 25: Wd ch01 p20_01

รู้�ปท��1.12 เว�บไซต้!ส&วนต้�ว (https://sites.google.com/site/webtanakorn54/prawati-

swn-taw)

1. เว�บไซต้!ส&วนต้�ว หรู้�อโฮมเพจเป6น้เว็�บไซต์�ที่��จ&ด้ที่��ข)#น้เพ"�อใช้รีว็บรีว็มเรี"�องรี�ว็

คำว็�มรี� ของผู้�จ&ด้ที่�� โด้ยอ�จไม$ต์องก�รีเผู้ยแพรี$ส�$ส�ธ์�รีณ์ช้น้ที่&�ว็ไป แต์$ใช้เพ"�อก'จธ์3รีะ หรี"อง�น้บ�งอย$�ง เช้$น้ โฮมเพจรีว็บรีว็มผู้ลง�น้ (Portfolio) และโฮมเพจใน้ก�รีสม&คำรีง�น้ เป6น้ต์น้

(ต้&อ)

Page 26: Wd ch01 p20_01

2. เว�บไซต้!ให�ความรู้��และความบ�นเท0งเป6น้เว็�บไซต์�ที่��เผู้ยแพรี$คำว็�มรี� และคำว็�มบ&น้เที่'งให

ก&บผู้�เข�ช้ม ไม$ว็$�จะเป6น้เรี"�องคำอมพ'ว็เต์อรี�กรี�ฟั1กด้�ไซน้� ด้�หน้&ง ฟั4งเพลง และก�รีศ)กษ� เช้$น้ www.pantip.com เป6น้ต์น้

รู้�ปท��1.13 เว�บไซต้!ความรู้��และความบ�นเท0ง (http://www.baanmaha.com/community/)

(ต้&อ)

Page 27: Wd ch01 p20_01

3. เว�บไซต้!เพ��อกี่ารู้บรู้0กี่ารู้เป6น้เว็�บไซต์�ที่��ใหบรี'ก�รีเก��ยว็ก&บเรี"�องรี�ว็ต์$�งๆ เช้$น้

เว็�บไซต์�เก��ยว็ก&บก�รีที่$องเที่��ยว็ และก�รีซ"#อ ข�ยของผู้$�น้–อ'น้เที่อรี�เน้�ต์ เป6น้ต์น้ ป4จจ3บ&น้เว็�บไซต์�ที่��เป1ด้ม�เพ"�อจ3ด้ปรีะสงคำ�ก�รีบรี'ก�รีต์$�งๆ ม�ม�กม�ยยกต์&ว็อย$�งเช้$น้ www.amazon.com เป6น้ต์น้

รู้�ปท��1.14 เว�บไซต้!เพ��อกี่ารู้บรู้0กี่ารู้ (http://www.thaisecondhand.com/)

(ต้&อ)

Page 28: Wd ch01 p20_01

4. เว�บไซต้!เพ��อกี่ารู้ค�นหา (Search Engine)เป6น้เว็�บไซต์�ที่��ม�คำว็�มส�ม�รีถใน้ก�รีคำน้ห�เรี"�องรี�ว็

ต์$�งๆ โด้ยใช้ว็'ธ์�ก�รีด้)งคำ��ส��คำ&ญ่ที่��บรีรีจ3อย�$ใน้แต์$ละหน้�เว็�บเพจม�แสด้งผู้ลหน้�บน้เว็�บไซต์� และที่��ใหส�ม�รีถเช้"�อมโยงไปย&งเว็�บไซต์�เหล$�น้&#น้เพ"�ออ$�น้เน้"#อห�ที่��ต์องก�รีได้ เช้$น้ www.google.com หรี"อ www.sanook.com เป6น้ต์น้

รู้�ปท��1.15 เว�บไซต้!เพ��อกี่ารู้ค�นหา (http://www.bing.com/)

(ต้&อ)

Page 29: Wd ch01 p20_01

ขนาดของหน�าโฮมเพจก�รีออกแบบหน้�โฮมเพจใหม�คำว็�มส&มพ&น้ธ์�ก&น้ก&บ

ขน้�ด้หน้�จอคำอมพ'ว็เต์อรี�ที่��ก��ล&งใช้ง�น้อย�$ใน้ขณ์ะน้&#น้ หรี"อแลว็แต์$คำว็�มต์องก�รีของผู้�ใช้แต์$ละคำน้ ขน้�ด้เว็�บไซต์�ที่��เป6น้ม�ต์รีฐ�น้ จะส�ม�รีถแสด้งขอม�ลได้อย$�งคำรีบถว็น้ช้&ด้เจน้ ขน้�ด้ของหน้�เว็�บไซต์�ที่��น้'ยมใช้ก&น้ม�กที่��ส3ด้ม� 2 ขน้�ด้ ด้&งน้�#

-ขนาด 800 x 600Pixels เป6น้ขน้�ด้ม�ต์รีฐ�น้ที่��ใช้ก&บหน้�จอคำอมพ'ว็เต์อรี�ได้ที่3กขน้�ด้

-ขนาดเว�บไซต้!แบบ 800x600pixels แสด้งผู้ลใน้หน้�จอคำอมพ'ว็เต์อรี�ขน้�ด้ 800x600pixels จะแสด้ง

รู้�ปท��1.16 เว�บไซต้! ขนาดเว�บไซต้!แบบ 800x600pixels

Page 30: Wd ch01 p20_01

-ขนาดเว�บไซต้!แบบ 800x600pixels แสด้งผู้ลใน้หน้�จอคำอมพ'ว็เต์อรี�ขน้�ด้ 1024x768pixels จะเหล"อพ"#น้ที่��ด้�น้ข�งไว็

(ต้&อ)

รู้�ปท��1.17 เว�บไซต้! ขนาดเว�บไซต้!แบบ 800x600pixels

Page 31: Wd ch01 p20_01

-ขนาดเว�บไซต้!แบบ 1024x768pixels แสด้งผู้ลใน้หน้�จอคำอมพ'ว็เต์อรี�ขน้�ด้ 800x600pixels จะไม$ส�ม�รีถแสด้งหน้�เว็�บไซต์�ได้คำรีบถว็น้

(ต้&อ)-ขนาด 1024 x 768Pixels เป6น้ขน้�ด้ที่��

ก��ล&งได้รี&บคำว็�มน้'ยมเพ'�มม�กข)#น้ใน้ป4จจ3บ&น้ เน้"�องจ�กจอคำอมพ'ว็เต์อรี�ใน้ป4จจ3บ&น้ม�รี�คำ�ถ�กและคำว็�มส�ม�รีถใน้ก�รีแสด้งผู้ลม�คำว็�มละเอ�ยด้ม�กข)#น้ จ)งที่��ใหผู้�พ&ฒน้�เว็�บไซต์�ห&น้ม�สรี�งเว็�บไซต์�ที่��ม�ขน้�ด้ใหญ่$ม�กข)#น้ต์�มไปด้ว็ย

รู้�ปท��1.18 เว�บไซต้! 1024x768pixels

Page 32: Wd ch01 p20_01

-ขนาดเว�บไซต้!แบบ 1024x768pixels แสด้งผู้ลใน้หน้�จอคำอมพ'ว็เต์อรี�ขน้1024x768pixels จะแสด้งเว็�บไซต์�ได้เต์�มหน้�จอพอด้�โด้ยที่&�ว็ไปแลว็ขน้�ด้ของหน้�โฮมเพจที่��ใช้ก&น้ม�กที่��ส3ด้ใน้ป4จจ3บ&น้ คำ"อ 800 x 600 Pixels เน้"�องจ�กเป6น้ขน้�ด้ที่��ส�ม�รีถใช้ง�น้ได้สะด้ว็กไม$ว็$�จะปรี&บคำว็�มละเอ�ยด้ของจอภ�พคำอมพ'ว็เต์อรี�ที่��ก��ล&งใช้ง�น้อย�$เป6น้ขน้�ด้เที่$�ใด้ก�ต์�ม

(ต้&อ)

รู้�ปท��1.19 เว�บไซต้! 1024x768pixels

Page 33: Wd ch01 p20_01

ส&วนปรู้ะกี่อบในหน�าโฮมเพจ1. โลโกี่� (Logo)

โลโก เป6น้ส'�งส��คำ&ญ่ที่��จะช้$ว็ยใหผู้�เข�ช้มส�ม�รีถจด้จ��เว็�บไซต์�ได้ รีว็มที่&#งที่��ใหเว็�บไซต์�ด้�ม�เอกล&กษณ์� ซ)�งก�รีสรี�งโลโกเพ"�อใช้ง�น้บน้เว็�บไซต์�จะม�รี�ปแบบที่��ไม$ซ&บซอน้น้&ก คำ"อ เน้น้ไปใน้ที่�งด้�น้ก�รีออกแบบที่��เรี�ยบง$�ย และส�ม�รีถอ$�น้ช้"�อเว็�บไซต์�ได้ช้&ด้เจน้ ก�รีจ&ด้ว็�งโลโกน้'ยมว็�งไว็ที่��ม3มบน้ซ�ยของหน้�โฮมเพจ เพรี�ะว็$�เป6น้จ3ด้ที่��ส�ม�รีถส&งเกต์เห�น้ได้ง$�ย

รู้�ปท��1.20 ต้�วอย&างโลโกี่�เว�บไซต้!ต้&างๆ และต้�วอย&างโลโกี่�บนเว�บไซต้! Hotmail (https://login.live.com/)

Page 34: Wd ch01 p20_01

2. เมน�หล�กี่ (Link Menu)เมน้�หล&กถ"อได้ว็$�เป6น้ส'�งส��คำ&ญ่อ�กอย$�งหน้)�งที่��

จ��เป6น้ต์องม�อย�$ภ�ยใน้เว็�บไซต์�ที่3กช้น้'ด้ เพ"�อใช้เป6น้จ3ด้เช้"�อมโยงไปย&งส$ว็น้ต์$�งๆ ใน้เว็�บไซต์�เด้�ยว็ก&น้หรี"อต์$�งเว็�บไซต์� รีว็มไปถ)งช้$ว็ยใหผู้�เข�ช้มรี&บรี� ได้ว็$�ภ�ยใน้เว็�บไซต์�ม�เรี"�องรี�ว็อะไรีบ�ง โด้ยรี�ปแบบของเมน้�ที่��น้'ยมใช้ก&น้จะม�ที่&#งแบบที่��เป6น้แน้ว็น้อน้ และแน้ว็ต์&#ง ซ)�งอ�จอย�$ใน้รี�ปของขอคำว็�มหรี"อป3Bมต์$�งๆ

รู้�ปท��1.21 เมน�หล�กี่ ของGmail (https://mail.google.com/)

เมน�แนวต้��ง

เมน�แนวนอน

(ต้&อ)

Page 35: Wd ch01 p20_01

3. ป5ายโฆษณ์า (Banner)ปC�ยโฆษณ์�ถ"อได้ว็$�เป6น้ส$ว็น้ส��คำ&ญ่อ�กอย$�งหน้)�ง

เช้$น้เด้�ยว็ก&น้ เพรี�ะเว็�บไซต์�ที่��ม�โฆษณ์�จะช้$ว็ยส$งเสรี'มภ�พล&กษณ์� คำว็�มน้$�เช้"�อถ"อ และกรีะต์3น้คำว็�มสน้ใจของผู้�เข�ช้มได้ด้�ย'�งข)#น้ เพรี�ะม�ก�รีใช้ภ�พเคำล"�อน้ไหว็ หรี"อล�กเล$น้ต์$�งๆ ปรีะกอบ อย$�งไรีก�ต์�มก�ไม$คำว็รีใหม�โฆษณ์�ม�กเก'น้ไป

รู้�ปท��1.22 ป5ายโฆษณ์าแบบต้&างๆ

(ต้&อ)

Page 36: Wd ch01 p20_01

4. ภาพปรู้ะกี่อบและเน��อหา (Images and Content)

ภ�พปรีะกอบและเน้"#อห�เป6น้ส$ว็น้ส��คำ&ญ่อย$�งย'�งที่��จะที่��ใหผู้�เข�ช้มอย�กจะเข�ม�เย��ยมช้ม และใช้บรี'ก�รีเว็�บไซต์�อย$�งสม���เสมอ ถ�เว็�บไซต์�ใด้ที่��ม�ก�รีปรี&บปรี3งเน้"#อห�ใหที่&น้สม&ยอย�$เสมอ ม�เน้"#อห�ที่��น้$�สน้ใจ ม�รี�ปแบบก�รีอ$�น้ที่��ง$�ย เน้"#อห�ไม$ย�ว็หรี"อไม$ส&#น้เก'น้ไป ม�รี�ปภ�พปรีะกอบก�รีบรีรีย�ยที่��คำรีบถว็น้ สว็ยง�มแลว็ก�จะที่��ใหได้เปรี�ยบเว็�บไซต์�อ"�น้ๆ ที่��น้��เสน้อเรี"�องรี�ว็ใน้แบบเด้�ยว็ก&น้

รู้�ปท��1.23 ป5ายโฆษณ์าแบบต้&างๆ

(ต้&อ)

Page 37: Wd ch01 p20_01

ข�อแนะน'าในกี่ารู้จ�ดท'าโฮมเพจก�รีออกแบบโฮมเพจ หรี"อเว็�บไซต์�ไม$ได้ม�รี�ปแบบที่��

ต์�ยต์&ว็และแน้$น้อน้ แต์$ก�ม�องคำ�ปรีะกอบหล�ยอย$�งที่��จะช้$ว็ยใหเว็�บไซต์�ที่��สรี�งข)#น้สว็ยง�มและน้$�ใช้ ด้&งน้�#

1. เล�อกี่ใช�ส�ให�เหมาะสม ส�ถ"อว็$�เป6น้ส$ว็น้หน้)�งที่��ม�อ'ที่ธ์'พลอย$�งม�กต์$อเว็�บไซต์�ใน้ภ�พรีว็มเน้"�องจ�กส�แต์$ละส�น้&#น้จะม�ผู้ลต์$ออ�รีมณ์�และคำว็�มรี� ส)กของผู้�เข�ช้มที่��แต์กต์$�งก&น้ออกไป ด้&งน้&#น้ผู้�พ&ฒน้�เว็�บไซต์�คำว็รีเล"อกส�ใหเหม�ะสมก&บปรีะเภที่ของเว็�บไซต์�ที่��ได้จ&ด้สรี�งข)#น้

2. ม�ความเป.นเอกี่ล�กี่ษณ์! คำ"อ ออกแบบโฮมเพจ หรี"อเว็�บไซต์�ใหม�คำว็�มเป6น้เอกล&กษณ์� โด้ยก�รีเล"อกใช้ส�ฟัอน้ต์�และภ�พปรีะกอบที่��ม�คำว็�มคำล�ยคำล)งก&น้ใน้ที่3กๆ หน้� เพ"�อใหจด้จ��ได้ง$�ย น้อกจ�กน้�#ย&งคำว็รีม�จ3ด้สน้ใจอ"�น้ๆ เป6น้ส$ว็น้ปรีะกอบอ�ก เช้$น้ โลโก เป6น้ต์น้

Page 38: Wd ch01 p20_01

3. สามารู้ถใช�งานได�อย&างเหมาะสม คำ"อ สรี�งหรี"อออกแบบเว็�บไซต์�ใหม�ก�รีใช้ง�น้ที่��ง$�ย ไม$ซ&บซอน้จน้เก'น้ไป เพรี�ะถ�เว็�บไซต์�ม�ก�รีที่��ง�น้ที่��ซ&บซอน้อ�จที่��ใหผู้�เข�ช้มไม$อย�กกล&บเข�ม�ใช้ง�น้อ�ก

4. สามารู้ถแสดงผลได�อย&างรู้วดเรู้�ว ใน้ก�รีสรี�งเว็�บไซต์�น้อกจ�กจะคำ��น้)งถ)งคำว็�มสว็ยง�มแลว็ก�รีแสด้งผู้ลขอม�ลที่��รีว็ด้เรี�ว็ก�ถ"อว็$�เป6น้ส$ว็น้ส��คำ&ญ่อย$�งหน้)�งที่��ต์องคำ��น้)งถ)ง เน้"�องจ�กช้$ว็ยใหผู้�เข�ช้มไม$เก'ด้คำว็�มเบ"�อหน้$�ยใน้รีะหว็$�งใช้ง�น้เว็�บไซต์�ล&กษณ์ะของต์&ว็อ&กษรีที่��ใช้ก�เป6น้ส$ว็น้ส��คำ&ญ่ที่��จะช้$ว็ยใหโฮมเพจด้�ที่&น้สม&ย ม�คำว็�มน้$�เช้"�อถ"อม�กข)#น้ เน้"�องจ�กต์&ว็หน้&งส"อแต์$ละล&กษณ์ะจะใหคำว็�มรี� ส)กที่��แต์กต์$�งก&น้ไป ต์&ว็อย$�งเช้$น้

- ต์&ว็หน้&งส"อแบบ Serif (ม�เช้'ง) ใหคำว็�มรี� ส)กของคำว็�มคำล�สส'คำ ด้�เก$�แก$ และคำ$อน้ข�งเป6น้ที่�งก�รี

- ต์&ว็หน้&งส"อแบบ San Serif (ไม$ม�เช้'ง) ใหคำว็�มรี� ส)กเรี�ยบง$�ย ม�คำว็�มที่&น้สม&ยและอ$�น้ง$�ย

(ต้&อ)

Page 39: Wd ch01 p20_01

- Script (ต์&ว็อ&กษรีแบบล�ยม"อ) ใหคำว็�มรี� ส)กสน้3กสน้�น้เป6น้ก&น้เองและด้�ไม$เป6น้ที่�งก�รี น้'ยมใช้ก&บคำ��โฆษณ์�ส&#น้ๆ

- ต์&ว็อ&กษรีแบบม�ห&ว็ ม&กใช้ก&บบที่คำว็�มย�ว็ๆ เพรี�ะช้$ว็ยใหอ$�น้ง$�ย

- ต์&ว็อ&กษรีแบบไม$ม�ห&ว็ เป6น้ต์&ว็หน้&งส"อที่��คำ$อยข�งจะอ$�น้ย�ก แต์$จะใหคำว็�มรี� ส)กที่��ที่&น้สม&ย โด้ยส$ว็น้ใหญ่$ม&กจะใช้ก&บขอคำว็�มส&#น้ๆ

(ต้&อ)

Page 40: Wd ch01 p20_01

จบแล�วครู้�บขอขอบค)ณ์ส'าหรู้�บกี่ารู้

รู้�บฟั,งกี่ารู้เสนอ