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

1. Mr.Warawut Khangkhan
Facebook: http://www.facebook.com/AjWarawut
Twitter: http://twitter.com/awarawut
E-Mail: awarawut@hotmail.com
Mobile: 089-461-9591

2. F
F
F F F
F F
F
F F
F
F
Mr.Warawut Khangkhan 2 F 2

3. Mr.Warawut Khangkhan 2 F 3

4. F
F F F
F F F F F F
F
F F F
Mr.Warawut Khangkhan 2 F 4

5. F (Cont.)
F F F F F F F
F F F
F F F F
F F F
F F F F F F
F Plug-in F F F F
F F F F F
F F F F F
F F F F
F F F F
Mr.Warawut Khangkhan 2 F 5

6. F (Cont.)
F F
F F F F
F F Search Engine F F F F
F F F F F F F
F F F
F F F F F F F F
Mr.Warawut Khangkhan 2 F 6

7. Mr.Warawut Khangkhan 2 F 7

8. F
F F F F F F
F F F F F
F (Software Development Life
Cycle: SDLC) Waterfall Model
Mr.Warawut Khangkhan 2 F 8

9. F
F
F F
F
F
F F
F
F
F
F
F
Mr.Warawut Khangkhan 2 F
F 9

10. F
waterfall model
F F
F F F •
(Feasibility) F F F
F F F F
F F
• F
F
Mr.Warawut Khangkhan 2 F 10

11. F
waterfall model
F F
F F •
(Analysis) F F
F • F
F
F F • F F
F F F
Mr.Warawut Khangkhan 2 F 11

12. F
waterfall model
F F
F( • F F
(Design) F F F
F ) • HTML CSS
F F JavaScript
F F F
F Adobe
Dreamweaver
F F
F
Mr.Warawut Khangkhan 2 F
• F F F 12

13. F
waterfall model
F F
F F F • HTML CSS
F JavaScript
(Construction
and Testing) F F F
F F Adobe
F F Dreamweaver
Flash F
F
• F F F
• F
Mr.Warawut Khangkhan 2 F
F internet
13

14. F
waterfall model
F F
F F • FTP
(Launch) F F
F
F F
F
F F • F
(Maintenance) F
Mr.Warawut Khangkhan 2 F 14

15. Mr.Warawut Khangkhan 2 F 15

16. F F F
F F F • F F F
F F F
F
• F F F F F F
F F F F F
F F
F F PhotoShop F
F F • F
Mr.Warawut Khangkhan 2 F 16

17. F
F F
F
F F
F
F F
F
Mr.Warawut Khangkhan 2 F 17

18. F
F F
F F F
F F F
F F
F
F
F F
PhotoShop
F
Mr.Warawut Khangkhan 2 F 18

19. F
F
F
Mr.Warawut Khangkhan 2 F 19

20. Mr.Warawut Khangkhan 2 F 20

21. F
F
1. F
(Simplicity)
F F
F
F F
F
Mr.Warawut Khangkhan 2 F 21

22. F
F
2. (Consistency)
F F F
3. F (Identity)
F F
F F F F
4. F (Useful Content)
F F F F F F F
F F F F
F F F F F F F
F
Mr.Warawut Khangkhan 2 F 22

23. F
F
5. F F (User-Friendly Navigation)
F F F F F F F F F
F F
F F F
6. F (Visual Appeal)
F F F F F F
F F F F F
F F F F F
F
Mr.Warawut Khangkhan 2 F 23

24. F
F
7. F F F F (Compatibility)
F F F FF F F F F F F F
F F F F
F F F
F F F F
8. (Design Stability)
F F F FF F F F F F
F F F F
F
Mr.Warawut Khangkhan 2 F 24

25. F
F
9. F F (Functional Stability)
F F F F F F F
F
10. F (About the Company)
F F F F
F F F F F
11. F (Product Information)
F F F F F
F F F F F F F F
F FF F F F F F F
Mr.Warawut Khangkhan 2 F 25

26. F
F
12. F F F (New/Press Releases)
F F F F F F F F
13. F F (Contact Information)
F F F F F F F F
F F
14. (Frequently Asked Question: FAQ)
F F F F F F
Mr.Warawut Khangkhan 2 F 26

27. http://www.adobe.com/solutions/professionalvideo/
Mr.Warawut Khangkhan 2 F 27

28. Mr.Warawut Khangkhan 2 F 28

29. F
1. F (Web Master)
2. F F F (Information Architect)
3. F (Web Designer)
4. F (Web Programmer)
5. F (System Administrator)
6. F (Content Editor / Writer)
Mr.Warawut Khangkhan 2 F 29

30. 1. F (Web Master)
F F F F F
F F
F F F F F F
F F
F F F F F F F F
F F F
F F
F F F F F Protocol, URL, FTP,
Image, Web Server Database
Mr.Warawut Khangkhan 2 F 30

31. 2. F F F (Information
Architect)
F F F F
F F F F F F
F F F F F
F F F F F F F
(Site Map)
F F F
F F F
Mr.Warawut Khangkhan 2 F 31

32. 3. F (Web Designer)
F F F F
F F F F F F
PhotoShop Illustrator F F F F
F F Fireworks ImageReady F
F F F F Dreamweaver F F
F (Typography)
Mr.Warawut Khangkhan 2 F 32

33. 4. F (Web Programmer)
F F F F F F
F F F F F F F
F HTML (XHTML), DHTML, JavaScript,
Cascading Style Sheets (CSS), Internet Protocol (IP),
PHP, Database (DB) AJAX F F
F Dreamweaver F
F F F F F
FTP F F F
Mr.Warawut Khangkhan 2 F 33

34. 5. F (System Administrator)
F F F F F F F F
F
F Routing, Client/Server Programming
F Tk, Perl Shell F
Mr.Warawut Khangkhan 2 F 34

35. 6. F (Content Editor /
Writer)
F F F
F F F F F F F
F F F F F F
F
Mr.Warawut Khangkhan 2 F 35

36. Mr.Warawut Khangkhan 2 F 36

37. F F
F (Sequence)
F (Hierarchy)
F (Web)
Mr.Warawut Khangkhan 2 F 37

38. F (Sequence)
F F F F F Website F
F F F F F F Web
F F F Liner
Mr.Warawut Khangkhan 2 F 38

39. F (Sequence)
F
F Sequence F
F Search Engine F F Google.com, Yahoo.com
Search Engine F F F
F F
Main Page F
Detail Page F F
F F Main Page F F F F
F Detail Page F F F F
Mr.Warawut Khangkhan 2 F 39

40. F -F F
F F
F F F F
F F F F F
Search Engine F F F
F F F F Page F
Video on Demand F
F F F F F F F
F F F F F F F
F F F FF F
Webpage
Mr.Warawut Khangkhan 2 F
F 40

41. F (Hierarchy)
F F
F F F F F F F F F F
Sequence
Mr.Warawut Khangkhan 2 F 41

42. F (Hierarchy)
F F F F F F F F
Page F F F F F F F
F F F
Mr.Warawut Khangkhan 2 F 42

43. F -F F
F F
F F F Link F
F F F F F F F F F F
F F F FF F F Back F
F F F
F Site Structure
Sequence Design F
F F F F
F F
Website
43

44. F (Web)
F F F FF F
F F F F F F F F
F F F F F
Mr.Warawut Khangkhan 2 F 44

45. F -F F
F F
F F F F
F F F F F F F
F F F F F
Website F F F F F F FF
F F F F
F F F Website F
Mr.Warawut Khangkhan 2 F 45

46. Mr.Warawut Khangkhan 2 F 46

47. F
1.
2.
3. F F
4. F
5. F F (Site Map)
6. F
7. F F F
8. F
9. F
Mr.Warawut Khangkhan 2 F 47

48. 1.
F F F F F
F F F F F F
F F F
F F F F F F F F
F F F F F F F F F
Mr.Warawut Khangkhan 2 F 48

49. 1. (Strategy)
F F F F F
F F F
F
2. F (Deliverable)
F F F
Mr.Warawut Khangkhan 2 F 49

50. 3. (Assumption)
F F F
F F
4. (Scope Management)
F F
F F F F
F F F F F
Mr.Warawut Khangkhan 2 F 50

51. 2.
F F F F
F F
F F
F F – F F
F F F F F
F – F F F F
F F F F F F F
F – F F F F
F F F F F
– F F F
F F F F F F
Mr.Warawut Khangkhan 2 F 51

52. 3. F F
F F F F F FF
F F F F
F F F F
Mr.Warawut Khangkhan 2 F 52

53. F F F
. F F F F F F F .
F F F . F F
F F F F F F
F F F F
F F
Mr.Warawut Khangkhan 2 F 53

54. F F F
F F F F F F F
F F F
(Index) .
F .
.
F .
F
F F F .
F
Mr.Warawut Khangkhan 2 F 54

55. F FF F F F F 55

56. 4. F
F F F F F
F F F F F F F
F F F F F (Tree Structure)
F
Mr.Warawut Khangkhan 2 F 56

57. 4. F
F F F F F F F
F
FF
F
F
F F F
F F
F F
F
Mr.Warawut Khangkhan 2 F 57

58. 5. F F (Site Map)
F
F
F
F
F
F
Mr.Warawut Khangkhan 2 F 58

59. 6. F
F F F
F F F
F F index.html F . F
F F F
F (Logo) .
(Menu)
F
F
F F
F
Mr.Warawut Khangkhan 2 F 59

60. Mr.Warawut Khangkhan 2 F 60

61. 7. F F F
F F F F F F
F F F F HTML, PHP, ASP.NET
Dreamweaver F
Mr.Warawut Khangkhan 2 F 61

62. 8. F
F
F F F F F F
F F F
Mr.Warawut Khangkhan 2 F 62

63. 9. F
F F F F F F
F FTP F F F F F
Mr.Warawut Khangkhan 2 F 63

64. Mr.Warawut Khangkhan 2 F 64

65. F
1. F F F – F F F F
F bookmark F url F F
F F F F F F F F FF
F F
2. F F – F FF F F
F F F F F F
F F F F F
3. F – F F
F FF Scrolling
Text, Blink Text, Marquess
Mr.Warawut Khangkhan 2 F 65

66. F
4. F F F (URL) – F F F F
F F F
F F F F F _, - ~
F F F F F
F F
5. F F F F – F F
F F F F F F Search Engine F F F
F F F F F F F FF F
F F F F F F F F F
Mr.Warawut Khangkhan 2 F 66

67. F
6. F – F F
F F F
F F F F
F F
7. – F F F
F F F F
8. F F F – F F F F F F
F F F F F F
F F F F F F F F F F F F F
F F F
Mr.Warawut Khangkhan 2 F 67

68. F
9. F F F F – F F
F
10. F – F F F F
F F F F 15 F F F
F F F
FF F 8 F F F 90%
Mr.Warawut Khangkhan 2 F 68

69. Mr.Warawut Khangkhan 1 F F F 69

70. Web Site
F F
. (2554).
.F F 7 , 2554,
http://dit.dru.ac.th/home/004/tachakorn/WEBDE/Ch
apter2.pdf
Thai WBI, Website. (2554). Web Site Design. F
20 , 2554,
http://www.thaiwbi.com/course/WebDesign/index2.h
tml
Mr.Warawut Khangkhan 1 F F F 70

71. Book
. (2554). F
: . :
F .
Mr.Warawut Khangkhan 1 F F F 71