หลั�กการออกแบบแลัะพั�ฒนาเว็�บไซท์�

ขั้��นตอนการพั�ฒนาเว็�บไซท์�

ท์�มงานพั�ฒนาเว็�บไซท์� ที�มงานพั�ฒนาเว็�บไซที�ประกอบด้�ว็ยบ�คลากรต่�างๆ ด้�งน�

Web Master เป!นผู้#�ร �บผู้$ด้ชอบ ออกแบบ และด้#แลเว็�บไซต่�ในภาพัรว็ม ต่�องม�คว็ามร# �ในเร)*องต่�างๆอย�างกว็�างขว็าง

Web Designer เป!นผู้#�ออกแบบหน�าต่าของเว็�บไซต่�ที� งหมด้ ต่�องม�คว็ามร# �ทีางศิ$ลปะและน.ามาประย�กต่�ใช�อย�างเหมาะสม

Web Programer เป!นน�กเข�ยนโปรแกรม สามารถพั�ฒนาด้�ว็ยภาษาต่�างๆในเว็�บไซที�

Content Write/Editor เป!นน�กเข�ยนและบรรณาธิ$การที�*ด้#แลเน) อหาของเว็�บไซที� จั�ด้เต่ร�ยม ต่รว็จัสอบ และปร�บปร�งเน) อหา

ว็$เคราะห� และจั�ด้โครงสร�างข�อม#ล

ก.าหนด้เป6าหมาย และว็างแผู้น

ออกแบบเว็�บเพัจั และเต่ร�ยม

ลงม)อสร�างและทีด้สอบ

เผู้ยแพัร�และส�งเสร$มให�เป!นที�*ร# �จั�ก

ด้#แลและพั�ฒนา

การออกแบบเว็�บเพัจ (Page Design)

1.ส่�ว็นประกอบขั้องหน าเว็�บเพัจ ส่�ว็นห�ว็ (Page Header) อย#�ต่อนบนส�ด้ของหน�า เป!นบร$เว็ณที�*

ส.าค�ญที�*ส�ด้ เน)*องจัากผู้#�ชมมองเห�น ก�อน น$ยมใช�ว็างโลโก� ช)*อเว็�บไซที� ล$งค�ต่�างๆ

ส่�ว็นขั้องเน!�อหา (Page body) อย#�ต่อนกลางหน�า แสด้งเน) อหาในหน�าเว็�บเพัจั ประกอบด้�ว็ยข�อคว็าม ต่ารางข�อม#ล

ส่�ว็นท์ าย (Page Footer) อย#�ด้�านล�างส�ด้ของหน�า อาจัจัะม�ช)*อเจั�าของ ข�อคว็ามแสด้งล$ขส$ทีธิ$8 และ E-Mail ของผู้#�ด้#แลเว็�บไซที�

แถบขั้ าง (Side Bar) ส�ว็นใหญ�น$ยมออกแบบไว็�ด้�านข�างของเว็�บไซที� ใช�ว็างป6ายแบนเนอร� หร)อล$งค�แนะน.าบร$การ

2.แนว็คิ%ดในการออกแบบเว็�บไซท์� ศึ)กษาจากเว็�บไซท์�อ!+นๆ www.rookienet.com แหล�งที�*

รว็บรว็มรายช)*อเว็�บไซที�ที�*ออกแบบสว็ยงาม ประย-กต�ร.ปแบบจากส่%+งพั%มพั� เช�น น$ต่ยสาร แผู้�นพั�บ โปรช�ว็ร�

3.ออกแบบเว็�บเพัจอย�างไรให ด.ด� ออกแบบอย�างลังต�ว็ ปร$มาณร#ปภาพัและข�อคว็ามพัอด้�ก�น เหมาะ

สม ออกแบบเร�ยบง�ายแลัะเป/นระเบ�ยบ น.าเสนอข�อม#ลอย�างเป!น

หมว็ด้หม#� www.cheewajit.com

4.ให คิว็ามส่0าคิ�ญก�บส่�ว็นบนขั้องเว็�บเพัจ ส�ว็นส.าค�ญที�*ส�ด้ของเว็�บเพัจั ค)อส�ว็นบนส�ด้ของหน�า น$ยมจั�ด้ว็างองค�ประกอบเป!นร#ปแบบคล�ายๆ ก�นด้�งน�

5.ส่ร างระด�บคิว็ามส่0าคิ�ญขั้องเน!�อหาต องคิ0าน)ง ต�อไปน��

ต่.าแหน�งและล.าด้�บขององค�ประกอบ ส�และขนาด้ขององค�ประกอบ การใช�ภาพัเคล)*อนไหว็ หร)อข�อคว็ามที�*ด้9งด้#ด้

โลโก� / ช)*อเว็�บไซที�

โลโก� / ช)*อเว็�บไซที�

เนว็$เกช�*น / เมน#

เนว็$เกช�*น / เมน#

แบนเนอร�โฆษณา

แบนเนอร�โฆษณา

ค�นหา

ค�นหา

6.ใช้ กราฟิ4กให พัอด� 7.ออกแบบขั้นาดขั้องเว็�บเพัจให พัอด�ก�บขั้นาดขั้องหน าจอ8.เลั!อกส่�ให เหมาะส่ม

ต่�องค.าน9งส�ของพั) นเว็�บเพัจั , ส�ข�อคว็าม และส�ขององค�ประกอบอ)*นๆ ต่�องออกมาโปนเด้�ยว็ก�น

เท์คิน%คิการจ�ดโคิรงส่ร างหน าเว็�บเพัจ จ�ดหน าเว็�บเพัจด ว็ยตาราง

สามารถจั�ด้การได้�ง�าย สะด้ว็ก และโครงสร�างของข�อม#ลด้#เป!นส�ด้ส�ว็นเพัราะเป!นแถว็และคอล�มน�เราสามารถใช�ต่ารางช�ว็ยในการว็างร#ปแบบโครงสร�างของหน�าเว็�บเพัจัได้�ด้�งต่�อไปน�

ใส�ต่�ว็อ�กษรหร)อใส�กราฟิ<กลงในต่.าแหน�งที�*ต่�องการได้�อย�างเหมาะสมก.าหนด้คว็ามยาว็ของบรรที�ด้ และสร�างคอล�มน�ให�ก�บเน) อหาได้�จั�ด้องค�ประกอบต่�างๆได้�ง�าย รว็มภาพักราฟิ<กหลายๆร#ปให�อย#�ต่$ด้ก�นได้�สร�างพั) นที�*ว็�างหร)อ White Space ข9 นในบร$เว็ณที�*ต่�องการ

จ�ดหน าเว็�บเพัจด ว็ยเลัเยอร�ช�ว็ยให�เราออกแบบโครงสร�างเว็�บเพัจัได้�อย�างอ$สระ โด้ยสามารถว็างเน) อหาต่รงส�ว็นใด้ของหน�าก�ได้�ต่ามต่�องการ

จ�ดหน าเว็�บเพัจด ว็ยเฟิรม เฟิรม ค)อการรว็มเว็�บเพัจัหลายๆ หน�าให�อย#�ภายใต่�หน�าต่�างเด้�ยว็ก�น โด้ยม�หน�าต่�างเฟิรมหล�ก เป!นต่�ว็

คว็บค�มการแบ�งพั) นที�*ของหน�าต่�าง และก.าหนด้ว็�าเว็�บเพัจัใด้จัะแสด้งในเฟิรมย�อยใด้

เฟิรมท์�+แส่ดงเน!�อหาคิงท์�+

เฟิรมท์�+แส่ดงเน!�อหาคิงท์�+

เฟิรมที�*แสด้งเน) อหาเปล�*ยนแปลงได้�

เฟิรมท์�+แส่ดงเน!�อหาคิงท์�+

พั) นที�*ที� งหมด้ค)อ เฟิรมหล�ก

ร. จ�กก�บ Dreamweaver 8

เร%+มต นใช้ งาน Dreamweaver 8

เป4ดโปรแกรมการเป<ด้โปรแกรม Dreamweaver ที.าได้�โด้ยเล)อกค.าส�*ง

>> All Program >> Macromedia >> Macromedia Dreamweaver 8

จัะปรากฏโปรแกรม พัร�อมที� งแสด้งหน�าต่�าง Start Page

Start Page

Start Page เป!นเคร)*องม)อส.าหร�บเร$*มต่�นการที.างานของโปรแกรม แบ�งเป!น 3 กล��มหล�ก ส.าหร�บการสร�างเว็�บเพัจัเปล�าแบบพั) นฐานให�ไปกล��ม Create

New แล�ว็เล)อก HTML

ส่�ว็นประกอบขั้องหน าจอโปรแกรม

การสร�างเว็�บเพัจัเปล�าแบบพั) นฐาน คล$ก HTML

การสร�างเว็�บเพัจัเปล�าแบบพั) นฐาน คล$ก HTML

เป<ด้เว็�บเพัจัที�*เคยใช�งานมาแล�ว็

เป<ด้เว็�บเพัจัที�*เคยใช�งานมาแล�ว็

สร�างเว็�บเพัจัใหม�จัาก File ต่�ว็อย�างของโปรแกรม

สร�างเว็�บเพัจัใหม�จัาก File ต่�ว็อย�างของโปรแกรม

แถบช้!+อโปรแกรม

แถบช้!+อโปรแกรม

แถบช้!+อไฟิลั�เว็�บเพัจ

แถบช้!+อไฟิลั�เว็�บเพัจ

แถบ Insert

Bar

แถบ Insert

Bar

แถบ Menu คิ0า

ส่�+ง

แถบ Menu คิ0า

ส่�+ง

ช้!+อเร!+องเว็�บเพัจ

ช้!+อเร!+องเว็�บเพัจ

ป-6มย-บ / ย�อ ป4ดว็%นโดว็� Document

ป-6มย-บ / ย�อ ป4ดว็%นโดว็� Document

ท์.ลับาร� Documen

t

ท์.ลับาร� Documen

t

ว็%นโดว็� Document

ว็%นโดว็� Document

กลั-�มพัาเนลัต�างๆกลั-�มพัาเนลัต�างๆ

พัาเนลั Properties

พัาเนลั Properties

ว็%นโดว็� Document

ว็$นโด้ว็� Document ค)อ ส�ว็นที�*ใช�ส.าหร�บใส�เน) อหาและจั�ด้องค�ประกอบของเว็�บเพัจัลงไป ม� 3 ม�มมอง ค)อ Design , Code , Code and

Design ช�ว็ยให�สร�างเว็�บเพัจัสะด้ว็กรว็ด้เร�ว็มากข9 น

ม-มมองออกแบบ (Design View)

ม-มมองโคิ ด (CodeView)

ม-มมองโคิ ดแลัะออกแบบ (Design View)

ท์.ลับาร� (Toolbar)

ที#ลบาร� ค)อ แถบเคร)*องม)อที�*รว็บรว็มป�?มค.าส�*งต่�างๆ ที�*เราจั.าเป!นต่�องใช�งานบ�อยๆ View > Toolbars > ช้!+อท์.ลับาร� หร!อคิลั%กขั้ว็าท์�+ท์.ลับาร�ท์�+เป4ดอย.� แลั ว็เลั!อกช้!+อท์.ลับาร�ท์�+ใช้ งานประกอบด้�ว็ย Insert , Style Rendering , Document และ Standard

Properties Inspector

Properties Inspector เป!นพัาเนลที�*ใช�งานมากที�*ส�ด้ โด้ยจัะแสด้งค�ณสมบ�ต่$ของออบเจั�คที�*ก.าล�งเล)อกบนเว็�บเพัจั สามารถก.าหนด้หร)อแก�ไขค�ณสมบ�ต่$ของออบเจั�คน� นได้� รายละเอ�ยด้ Properties Inspector เปล�*ยนแปลงได้�ข9 นอย#�ก�บออบเจั�ค

กลั-�มพัาเนลัต�างๆ พัาเนลเป!นกรอบเล�กๆ ที�*ประกอบด้�ว็ยเคร)*องม)อส.าหร�บใช�ที.างานต่�างๆ เช�น การจั�ด้การก�บ CSS Behaviors รว็มที� งไฟิล�และโฟิลเด้อร�ภายในเว็�บไซที� เป<ด้โด้ยค.าส�*ง Windows > ช)*อพัาเนลที�*ต่�องการเป<ด้ / ป<ด้

ออบเจั�คที�*

คล$กซ�อน/แสด้ง

คล$กซ�อน/แสด้งช�ด้พัาเนลที� งหมด้ที�*อย#�ด้�าน

คล$กย�อ / ขยาย