Upload
duangnapa27
View
3.933
Download
0
Embed Size (px)
Citation preview
หลั�กการออกแบบแลัะพั�ฒนาเว็�บไซท์�
ขั้��นตอนการพั�ฒนาเว็�บไซท์�
ท์�มงานพั�ฒนาเว็�บไซท์� ที�มงานพั�ฒนาเว็�บไซที�ประกอบด้�ว็ยบ�คลากรต่�างๆ ด้�งน�
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 > ช)*อพัาเนลที�*ต่�องการเป<ด้ / ป<ด้
ออบเจั�คที�*
คล$กซ�อน/แสด้ง
คล$กซ�อน/แสด้งช�ด้พัาเนลที� งหมด้ที�*อย#�ด้�าน
คล$กย�อ / ขยาย