14
หหหหหหหห 1 เเเเเเเเเเเเเเเเเเเเเเเเเเ

หน่วยที่ 1

Embed Size (px)

Citation preview

Page 1: หน่วยที่ 1

หน่�วยที่�� 1เริ่��มต้�นกับกัาริ่สริ่�างเว็�บเพจ

Page 2: หน่วยที่ 1

เวบเพจ คื�อ เอกัสาริ่ที่��ใช้�ในกัาริ่เผยแพริ่�ข้�อม�ลข้�าว็สาริ่ซึ่"�ง ปริ่ะกัอบด้�ว็ยข้�อคืว็าม ภาพ เส�ยง และภาพยนต้ริ่' ผ�านที่าง เคืริ่�อข้�ายอ�นเต้อริ่'เน�ต้ เว็�บเพจจะถู�กัน)ามาใช้�ปริ่ะโยช้น'ในกัาริ่

ปริ่ะช้าสมพนธ์' และน)าเสนอข้�อม�ลคืว็ามริ่� �ต้�างๆ จ"งส�งผลให้�แต้�ละเว็�บเพจม�คืว็ามแต้กัต้�างกันไปต้ามว็ต้ถู/ปริ่ะสงคื'ข้องกัาริ่น)าไปใช้�งานน0นเอง

เวบเพจคื�อ

Page 3: หน่วยที่ 1

เวบเพจน่��น่มี�ประโยชน่�ใน่ป�จจ�บ�น่มีาก ที่�าให เราคื น่หาสิ่"�งต่�างๆได้ เช�น่ ข่�าวและเหต่�การณ์�ใน่ป�จจ�บ�น่ ข่ อมี,ลคืวามีร, และห องสิ่มี�ด้ ประชาสิ่�มีพ�น่ธ์�บร"ษั�ที่และองคื�กร คืวามีบ�น่เที่"ง การเง"น่ การลงที่�น่ ซื้��อ- ข่ายสิ่"น่คื า และบร"การ ด้าวน่�โหลด้ข่ อมี,ล บร"การต่"ด้ต่�อสิ่��อสิ่าร

ประโยชน่�ข่องเวบเพจ

Page 4: หน่วยที่ 1

การที่�างาน่ข่องเวพเพจ ข่��น่ต่อน่ที่�� 1 ผ��ใช้�พ�มพ'ต้)าแห้น�งเว็�บเพจในโปริ่แกัริ่มบริ่าว็เซึ่อริ่' กั�จะม�กัาริ่ริ่�องข้อ

ข้�อม�ลไฟล'เว็�บเพจห้น�าน0น ไปยงเคืริ่��องเซึ่�ริ่'ฟเว็อริ่'(SERVER คื�อ เคืริ่��องที่��เกั�บและเผยแพริ่�เว็�บเพจ)

ข่��น่ต่อน่ที่�� 2 ฝั่3� งเซึ่�ริ่'ฟเว็อริ่'จะที่)ากัาริ่คื�นห้าไฟล'ที่��ริ่ �องข้อได้� ข่��น่ต่อน่ที่�� 3 เว็�บเซึ่�ริ่'ฟเว็อริ่'ส�งข้�อม�ลไปยงเคืริ่��องผ��ใช้�และแสด้งผลบนบริ่าว็เซึ่อริ่'

แสด้งข้�อคืว็าม และด้"งข้�อม�ลภาพ เส�ยง ว็�ด้�โอ ออกัมาแสด้งให้�อย��ในริ่�ปแบบและ

ต้)าแห้น�งต้ามที่��โปริ่แกัริ่ม กั)าห้นด้ ซึ่"�งเริ่าจะเริ่�ยกัว็�ธ์�กัาริ่เข้�ยนภาษา HTML เพ��อสริ่�างและ

ต้กัแต้�งเว็�บเพจภายในเน�0อห้า

Page 5: หน่วยที่ 1

ส��งที่��คืว็ริ่ริ่� �กั�อนสริ่�างเว็�บเพจ คื�อ คื)าศัพที่'ต้�างๆที่��ช้�ว็ยที่)าให้�เริ่าเข้�าใจและสามาริ่ถูสริ่�างเว็�บเพจได้�อย�างถู�กัต้�อง

– ไคืลเอนต้' เซึ่�ริ่'ฟเว็อริ่' (Client - Server)

ในกัาริ่ต้�ด้ต้�อส��อสาริ่บนเคืริ่�อข้�ายอ�นเต้อริ่'เน�ต้ที่��คือมพ�ว็เต้อริ่'ที่ �ว็โลกัเช้��อมโยงถู"งกันน0น จะ ม�กัาริ่ต้�ด้ต้�อส��อสาริ่อย�� 2 แบบ คื�อ แบบส�งข้�อม�ลและริ่บข้�อม�ล โด้ยที่��เคืริ่��องคือมพ�ว็เต้อริ่'

ที่��ที่)ากัาริ่ส�งข้�อม�ลเริ่าจะเริ่�ยกัว็�าเคืริ่��องให้�บริ่�กัาริ่ (Server) และเคืริ่��องคือมพ�ว็เต้อริ่'ที่��ริ่ บ ข้�อม�ล เริ่าจะเริ่�ยกัว็�า เคืริ่��องริ่บบริ่�กัาริ่ (Client)

คื�าศั�พที่�พ��น่ฐาน่เก��ยวก�บการสิ่ร างเวบเพจ

Page 6: หน่วยที่ 1

บริ่�กัาริ่ริ่�ปแบบห้น"�งข้องอ�นเต้อริ่'เน�ต้ที่��เช้��อแน�ว็�าเริ่าที่/กัคืนต้�องเคืยสมผสกั� คื�อ www ห้ริ่�อมริ่าเริ่�ยกัส0นๆ ว็�า เว็�บ น0นเองกัาริ่ให้�บริ่�กัาริ่ในริ่�ปแบบน�0 คื�อ กัาริ่เริ่�ยกับริ่าว็เซึ่อริ่' เช้�น

Internet Explorer ห้ริ่�อ Firefox จากัเคืริ่��องข้องเริ่าและริ่ะบ/ URL เพ��อใช้�ในกัาริ่อ�าง ถู"งที่��อย��ที่��เกั�บเว็�บเที่�าน0นเริ่ากั�สามาริ่ถูเป6ด้ด้�เว็�บได้�แล�ว็ ด้งต้ว็อย�างเม��อริ่ะบ/ URL ที่��

ต้�องกัาริ่เป6ด้เป7น www.bangkokcity.com กั� จะเป7นกัาริ่เป6ด้ด้�เว็�บไซึ่ต้'Bangkokcity

เว็�บไซึ่ต้' (Web Site) “ ” เริ่าจะเริ่�ยกัข้องกัล/�มห้น�าเว็�บ ห้ริ่�อเว็�บห้ลายๆห้น�าริ่ว็มกัน ว็�า เว็�บไซึ่ต้' (Web Sits)

“ ” โด้ยจะม�กัาริ่กั)าห้นด้เว็�บเพจห้น�าห้น"�งไว็�ห้น�าแริ่กั และเริ่�ยกัว็�า โฮมเพจ (Home Page) ที่��เป7นช้�องที่างเข้�าเว็�บเพจที่0งภายในเว็�บไซึ่ต้'น0น

เคืร�อข่�ายใยแมีงมี�มี WWW

Page 7: หน่วยที่ 1

บราวเซื้อร� คื�อ โปริ่แกัริ่มที่��เข้�าส��โลกั World Wide Web ซึ่"�งเป7นโปริ่แกัริ่มที่��อย��ใน เคืริ่��องคือมพ�ว็เต้อริ่'ล�กัข้�าย ม�ห้น�าที่��ในกัาริ่ส�งข้�อม�ลริ่�องข้อและน)าเสนอข้�อม�ลเว็�บ โด้ยต้ว็

เว็�บบริ่าว็เซึ่อริ่'จะเข้�าใจในภาษา HTML ที่��เป7นมาต้ริ่ฐานข้องเว็�บ ป3จจ/บนบริ่าว็เซึ่อริ่'ริ่าได้�ริ่บ คืว็ามน�ยม กั�ม� ซึ่"�งเป7นบริ่าว็เซึ่อริ่'โอเพ�นเซึ่อริ่'ส

  เวบเซื้"ร�ฟเวอร� (Web Server) เป7นที่��เกั�บเว็�บแพจ เม��อใด้ที่��เริ่าต้�องกัาริ่เป6ด้ด้�เว็�บเพจ

เริ่าต้�องใช้�บริ่าว็เซึ่อริ่'ด้"งข้�อม�ล โด้ยที่��บริ่าว็เซึ่อริ่'จะที่)ากัาริ่ต้�ด้ต้�อกับเซึ่�ริ่'ฟเว็อริ่'ที่��เกั�บเว็�บไซึ่ต้' น0น เพ��อให้�ม�กัาริ่โอนย�ายข้�อม�ลมาแสด้งที่��เคืริ่��องข้องเริ่า

โด้เมีน่เน่มี (Domain Name) กัาริ่ต้�ด้ต้�อกันบนอ�นเที่อริ่'เน�ต้ จะใช้�ไอพ�แอด้เด้ริ่สในกัาริ่ที่)างาน แต้�เป7นต้ว็เลข้ที่��ยาว็

ที่)าให้�ผ��ใช้�จ)าได้�ยากั จ"งได้�ม�กัาริ่ใช้�โด้เมนเนม ห้ริ่�ออ�นเที่อริ่'เน�ต้แอด้เด้ริ่ส มาใช้� ซึ่"�งเป7นกัาริ่ น)าต้ว็อกัษริ่ที่��จ)าง�ายมาใช้�แที่นไอพ�แอด้เด้ริ่ส โด้เมนเนมจะไม�ซึ่)0ากัน และมกัจะต้0งให้�ถู�กั

สอด้คืล�องกับช้��อบริ่�ษที่ ห้ริ่�อองคื'ผ��เป7นเจ�าข้อง เพ��อสะด้ว็กัในกัาริ่จด้จ)าช้��อ เช้�น บริ่�ษที่ ด้� แที่คื ม�โด้เมนเนมเป7น www.dtac.co.th

เวบบราวเซื้อร� และเวบเซื้"ร�ฟเวอร�

Page 8: หน่วยที่ 1

โปรแกรมีที่��ใช เข่�ยน่โคื ด้เวบเพจด้ วยภาษัา HTML เน�0อห้าในห้นงส�อเล�มน�0 ม�คืว็ามต้�องกัาริ่ที่��จะเน�นกัาริ่เข้�ยนภาษา HTML เพ��อสริ่�าง

เว็�บเพจ เพ��อให้�เริ่าสามาริ่ถูเข้�าโคืริ่งสริ่�างข้องภาษา และคื)าส �ง จะน)าไปส��กัาริ่เป7นนกัพฒนา เว็�บต้�อไป ซึ่"�งกัาริ่เข้�ยนโปริ่แกัริ่ม HTML เพ��อสริ่�างเว็�บเพจน0น เริ่าสามาริ่ถูใช้�โปริ่แกัริ่ม

Text Editor ที่�ว็ๆไป อย�างเช้�น โปริ่แกัริ่ม Notepad ที่��มาพริ่�อมกับ Windows ได้�

โปรแกรมีที่��ใช สิ่ร างเวบเพจและจ�ด้องคื�ประกอบบน่หน่ าเวบ ป3จจ/บนได้�ม�ผ��ผล�ต้โปริ่แกัริ่มส)าเริ่�จริ่�ปที่��ช้�ว็ยสริ่�างงานบนเว็�บไซึ่ต้'ได้�อย�างง�ายๆ โด้ยแคื�

น)าภาพและข้�อคืว็ามที่��ต้�องมาว็างบนห้น�าเว็�บเพจได้�เลย แถูมยงจะม�เคืริ่��องม�อที่��ช้�ว็ยจด้ว็าง ห้น�าเว็�บไซึ่ต้'ได้�อย�างสว็ยงาม และล�กัเล�นในกัาริ่ใส�เส�ยง ห้ริ่�อภาพ

เคืล��อนไห้ว็ได้�ด้�ว็ย โด้ยโปริ่แกัริ่มที่��ใช้�ในกัาริ่สริ่�างเว็�บไซึ่ต้' คื�อ Macromedia Dreamweaver , Microsoft FrontPage และ Net0bjects Fusion เป7นต้�น ซึ่"�งโปริ่แกัริ่มเห้ล�าน�0จะเป7น

โปริ่แกัริ่มปริ่ะเภที่ What You See Is What You Get (WYSIWYG) คื�อ เริ่าจด้ว็าง ภาพ

ห้ริ่�อข้�อคืว็ามแบบไห้น โปริ่แกัริ่มจะที่)ากัาริ่เข้�ยนโคื�ด้ HTML ให้�อต้โนมต้�

โปรแกรมีที่��ใช สิ่ร างเวบเพจ

Page 9: หน่วยที่ 1

ก�าหน่ด้ข่น่าด้ข่องเวบเพจ เริ่าจะเห้�นว็�าข้นาด้ข้องจอคือมพ�ว็เต้อริ่'ในป3จจ/บนม�ห้ลายข้นาด้ เช้�น 14” 15” และ 17”

เป7นต้�น ซึ่"�งข้นาด้ที่��แต้กัต้�างกันด้�ว็ย เริ่าจ"งคืว็ริ่กั)าห้นด้ข้นาด้เว็�บไซึ่ต้ให้�ม�ริ่�ปแบบที่��มาริ่ต้ริ่าฐาน เพ��อที่)าให้�กัาริ่แสด้งข้�อม�ลได้�อย�างคืริ่บถู�ว็นช้ด้เจน โด้ยข้นาด้ข้องเว็�บไซึ่ต้'ที่��เห้�นกันมากัที่��ส/ด้ม�

อย�� 2 ข้นาด้คื�อ 1. ข้นาด้ข้องเว็�บไซึ่ต้'แบบ 800 x 600 pixels ซึ่"�งเป7นข้นาด้มาริ่ต้ริ่าฐานที่��ใช้�กับห้น�าจอ

คือมพ�ว็เต้อริ่'ได้�ที่/กัๆ ข้นาด้ 2. ข้นาด้ข้องแบบเว็�บไซึ่ต้' 1024 x 768 pixels ซึ่"�งข้นาด้แบบน�0กั)าลงได้�ริ่บคืว็ามน�ยมเพ��ม

มากัข้"0น เน��องจากัจอคือมพ�ว็เต้อริ่'ในป3จจ/บนม�ริ่าคืาถู�กัลงมากั ด้งน0นผ��ใช้�คือมพ�ว็เต้อริ่'จ"งห้ด้ไปใช้�จอคือมพ�ว็เต้อริ่'ที่��ม�ข้นาด้ให้ญ่�ข้"0นด้�ว็ยเห้ม�อนกัน

หล�กการออกแบบเวบไซื้ต่�

Page 10: หน่วยที่ 1

1.ออกแบบหน่ าเวบไซื้ต่�ที่��เน่ น่การน่�าเสิ่น่อเน่��อหามีากๆ

2.ออกแบบหน่ าเวบไซื้ต่�ที่��เน่ น่ภาพกราฟ4กเป5น่หล�ก

3.ออกแบบหน่ าเวบไซื้ต่�ที่��มี�ที่��งภาพและเน่��อหา

การออกแบบโคืรงสิ่ร างเวบไซื้ต่�

Page 11: หน่วยที่ 1

เริ่าสามาริ่ถูน)าไฟล'เว็�บเพจมาริ่�อยเริ่�ยงและน)าเสนอเป7นกัล/�มข้�อม�ลเริ่�ยกัว็�า เวบไซื้ต่� ซึ่"�งจะ ม�ว็�ธ์�กัาริ่คื�ด้ต้0งแต้�กั)าห้นด้โคืริ่งริ่�างข้องเว็�บเพจ จนถู"งกัาริ่อพโห้ลด้เว็�บข้"0นบนอ�นเที่อริ่'เน�ต้

ที่0งห้มด้ 6 ข้0นต้อน ด้งน�0

ข่��น่ต่อน่การสิ่ร างเวบไซื้ต่�

Page 12: หน่วยที่ 1

ข่��น่ต่อน่ที่�� 2 ก�าหน่ด้การเช��อมีโยงระหว�างเวบเพจ เริ่ากั)าห้นด้ให้�เว็�บเพจแต้�ละห้น�าเช้��อมโยงถู"งกัน เพ��อให้�กัลบไปกัลบมาริ่ะห้ว็�างห้น�าต้�างๆ ได้�โด้ยจะแสด้งช้��อไฟล' html แต้�ละไฟล'ที่��ม�กัาริ่เช้��อมโยงสมพนธ์'กัน

ข่��น่ต่อน่ที่�� 3 ออกแบบเวบเพจแต่�ละหน่ าภายใน่เวบไซื้ต่� เริ่าสามาริ่ถูออกัแบบเว็�บเพจในแต้�ละห้น�าให้�สว็ยงาม เพ��อเต้ริ่�ยมภาพที่��จ)าเป7นส)าห้ริ่บจด้ว็างบนห้น�าเว็�บเพจ เช้�น กัาริ่ออกัแบบโลโกั� เพ��อเป7นสญ่ญ่าลกัษณ์'ให้�กับเว็�บไซึ่ต้'ข้องเริ่ากั�อน จากัน0นจ"งที่)ากัาริ่ออกัแบบห้น�าเว็�บเพจในแต้�ละห้น�าต้ามล)าด้บ

ข่��น่ต่อน่การสิ่ร างเวบไซื้ต่�

Page 13: หน่วยที่ 1

ข่��น่ต่อน่ที่�� 4 สิ่ร างเวบเพจแต่�ละหน่ า เม��อว็างริ่�ปแบบข้องเว็�บเพจในแต้�ละห้น�าแล�ว็จากัน0นเริ่ากั�ที่)ากัาริ่เข้�ยนโปริ่แกัริ่มภาษา HTML เพ��อกั)าห้นด้ให้�แต้�ละเว็�บเพจน)าเสนอ,ข้�อคืว็าม ภาพ เส�ยง ห้ริ่�อว็�ด้�โอ ให้�อย��ในริ่�ปแบบบต้ามที่��เริ่าต้�องกัาริ่น0นเอง

ข่��น่ต่อน่ที่�� 5 ลงที่ะเบ�ยน่ข่อพ��น่ที่��เวบไซื้ต่�ฟร� ห้ลงจากัออกัแบบและสริ่�างเว็�บไซึ่ต้'จนเสริ่�จสมบ�ริ่ณ์'แล�ว็ ข้0นต้อนถูด้ไปกั�คื�อ กัาริ่เผยแพริ่�เว็�บไซึ่ต้'น0นส��เคืริ่�อข้�ายอ�นเต้อริ่'เน�ต้ ให้�คืนอ��นๆ สามาริ่ถูเข้�ามาเย��ยมช้มเว็�บไซึ่ต้'ข้องเริ่าได้� ว็�ธ์�กัาริ่กั�คื�อกัาริ่น)าเว็บไซึ่ต้'ที่��เริ่าสริ่�างข้"0นไปไว็�บนพ�0นที่��ที่��ให้�บริ่�กัาริ่ (Web Hosting) ซึ่"�งม�พ�0นที่��ที่��เริ่าสามาริ่ถูน)าเว็�บไซึ่ต้'ไปฝั่ากัได้�ฟริ่�

ข่��น่ต่อน่การสิ่ร างเวบไซื้ต่�

Page 14: หน่วยที่ 1

ข่��น่ต่อน่ที่�� 6 อ�พโหลด้เวบไซื้ต่� ห้ลงจากัที่��ได้�สริ่�างห้น�าเว็�บไซึ่ต้'จนเสริ่�จแล�ว็ ต้�อไปเริ่าจะที่)ากัาริ่อพโห้ลด้เว็�บไซึ่ต้'ด้�ว็ยโปริ่แกัริ่ม CuteFTP เพ��อให้�คืนที่�ว็โลกัสามาริ่ถูด้�เว็�บไซึ่ต้'ข้องเริ่าได้�ผ�านเคืริ่�อข้�ายอ�นเที่อริ่'เน�ต้

ข่��น่ต่อน่การสิ่ร างเวบไซื้ต่�