Top Banner
Mr.Warawut Khangkhan Mr.Warawut Khangkhan Facebook: http://www.facebook.com/AjWarawut Twitter: http://twitter.com/awarawut E-Mail: [email protected] Mobile: 089-461-9591
71

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

Nov 02, 2014

Download

Education

Warawut

ความสำคัญของการออกเว็บไซต์ วงจรชีวิตการพัฒนาเว็บไซต์ การออกแบบโครงสร้างหน้าตาของเว็บไซต์ องค์ประกอบพื้นฐานที่ควรมีในการออกแบบเว็บไซต์ ทีมงานพัฒนาเว็บไซต์ โครงสร้างเว็บไซต์ ขั้นตอนการออกแบบเว็บไซต์ ความผิดพลาดในการออกแบบเว็บไซต์
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: การออกแบบและพัฒนาเว็บไซต์

Mr.Warawut KhangkhanMr.Warawut KhangkhanFacebook: http://www.facebook.com/AjWarawut

Twitter: http://twitter.com/awarawutE-Mail: [email protected]

Mobile: 089-461-9591

Page 2: การออกแบบและพัฒนาเว็บไซต์

��������������� ������������� ������������

� ��� ������� �������������

� �� ������ �� ������������������

� ��� !���"#�$��%�&�� ��'��� ������������� ��� !���"#�$��%�&�� ��'��� ������������

� %������������������

� �� �� �����������

� �#����� ������������

� ����(�)�*�)'��� ������������

Mr.Warawut Khangkhan 2�%%�& 2 �� �����*!�������������

Page 3: การออกแบบและพัฒนาเว็บไซต์

Mr.Warawut Khangkhan 3�%%�& 2 �� �����*!�������������

Page 4: การออกแบบและพัฒนาเว็บไซต์

������ �������������������������� ��������������������� (-�'����"�%.����!����������%�&������/���

� ���� '�����%�&�!)�������0�����%�&)-������.0���/ ����-*�����/�����������0��!� ��0��

� '����*���)�(*��0*!�������� '����*���)�(*��0*!�������

Mr.Warawut Khangkhan 4�%%�& 2 �� �����*!�������������

Page 5: การออกแบบและพัฒนาเว็บไซต์

������ �������������������� ������ �������������������� (Cont.)(Cont.)� �� ��������������0�)����/12�*��34!������������������/�/0���)�/� ��0���&/���%�#���)��#���0�� �����)� 5����/ �� !�.�*.0�� 5����/ �� ��) !����-* �� � ��� !����������� �� ������������ ��� 12��� '��� �67� �� �*"�'���� �*!�� ��) - ��������3 �������#�/���������2�12���������0����*"�'���� �*!�� ��) - ��������3 �������#�/���������2�12���������0����"&�*���� ��)�(*�������� �)���0 ���)� .0��� ���� � ��)����������� � ����*!��/)���'� !�� ��� 12� Plug-in ���)�0��8 %�&(-�'����/-0 ��"&'��(-�'�����)�����2��'�%�&�!%0�� '�����������#�

� ��������%�&)-��/���� "��*-��*0������/��#� ���!��0���� 9��� ����%�&)����)� 1��������/����*!*-��*0���*0���#���0����!�����*��34!���������

� ���%��'��� ����'���0*!��������2#�/-0���� 5���/�*!*��34!���������

Mr.Warawut Khangkhan 5�%%�& 2 �� �����*!�������������

Page 6: การออกแบบและพัฒนาเว็บไซต์

������ �������������������� ������ �������������������� (Cont.)(Cont.)����

� �� ������������%�&)� �" �� ����'������!���� 5����/�*!*��34!��������� �)/����2�12������!)��'��� '������(-�'��� 9��*���������� ��������%�&� 9� Search Engine ��� 5����/%�&�!'����-*%�&(-�'����� �������� ��������%�&� 9� Search Engine ��� 5����/%�&�!'����-*%�&(-�'����� /0�� �)� �� �*!��(-������'��� ��� �������-*� 9����������'���0*!��� )����#���&�%�&������'��� ������������ !�:%��#���" ���� 1��)���������/0�� �)� ����"&(-�'��� 7)����� �*!�� !���"������-*%�&�� !��%;�:�� ��"&'���)�(**��;�%�& �)� ��

Mr.Warawut Khangkhan 6�%%�& 2 �� �����*!�������������

Page 7: การออกแบบและพัฒนาเว็บไซต์

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 7

Page 8: การออกแบบและพัฒนาเว็บไซต์

����������� �������������������� ���������� ����� ���*�� �� � �������������0�)���*��)���#��������� ��0�!� �/��%�/��� � ���������������� ����� !���6���� �������� � �)/%�&�� ����� !��')8 ���)�#��)���!'����� ������� ����� (Software Development Life Cycle: SDLC) ��� Waterfall Model Cycle: SDLC) ��� Waterfall Model

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 8

Page 9: การออกแบบและพัฒนาเว็บไซต์

<2�3������ 9�� �)�

���� �!��

����

� ����*!� ����

� ��������1-��������#�%�&(0����

� ��������1-��������#�%�&(0����

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 9

� ����*!%)��

�(/�� 0

��� .� ��3�

� ��������1-��������#�%�&(0����

� ��������1-��������#�%�&(0����

� ��������1-��������#�%�&(0����

Page 10: การออกแบบและพัฒนาเว็บไซต์

����� �������� ���������������������� ������� waterfall model

���� ������� �� ������ �������������

<2�3������ 9�� �)�(Feasibility)

��)���'��0�������������� !� � "����%�&��/-0�*������� �� .�

• �%������ �� ����-* )��/��;��� ���:�34��.��*%�&/-0�*������� �� .�

!� 1���� ���!%���� !���� ����*!����

���:�34��.��*%�&���&/���

• �� ���� �!�� ����*!(*���� '���� �����4��(*���� ����� *�%.�

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 10

Page 11: การออกแบบและพัฒนาเว็บไซต์

����� �������� ���������������������� ������� waterfall model

���� ������� �� ������ �������������

���� �!��(Analysis)

�����)���1. !��������� �*.0�� 5����/ ��"#�� �*!6=���������%�&

• �%������ �� ����-*

• �� ���� �!�� ����*!��"#�� �*!6=���������%�&�!���)2#�'��������� ��&��"��)���'��0������ !� ����

• �� ���� �!�� ����*!(*����

• �)����)*�� �� �����"#�������������

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 11

Page 12: การออกแบบและพัฒนาเว็บไซต์

����� �������� ���������������������� ������� waterfall model

���� ������� �� ������ �������������

�� ����(Design)

������������ (%�#��� �� ����*!�0����)���������) %�&� ����(*��

• �)����)*�� �� �����������

• HTML CSS ��������) %�&� ����(*�� ���� �!����������� ����#��� ���� �!��

• HTML CSS

JavaScript �*!�6���� ��� ��������� ��0� Adobe

Dreamweaver ���� ���� � �����������������

• �6���� �����0�:��Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 12

Page 13: การออกแบบและพัฒนาเว็บไซต์

����� �������� ���������������������� ������� waterfall model

���� ������� �� ������ �������������

�� � ����*!�� %)��(Construction and Testing)

� ����*!%)����������%�#���� !����� ��#���%��� � ��8 ��� ��"&

• HTML CSS

JavaScript �*!�6���� ��� �����and Testing) %��� � ��8 ��� ��"&

5�����(�)�*�)'��� � �����������

�6���� ��� ��������� ��0� Adobe

Dreamweaver �*!Flash ���� ���� � �����������

• �6���� �����0�:��• �� %)���)�)/(-�������� ��(0�� internet

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 13

Page 14: การออกแบบและพัฒนาเว็บไซต์

����� �������� ���������������������� ������� waterfall model

���� ������� �� ������ �������������

�� �(/�� 0(Launch)

�� ����*)���������2#�� ����� �6�� �:�/�*���� %)���������- 4�

• FTP

�� %)���������- 4��*�� ��%�#��(/�� 0����)��/

�� ��� .� ��3�(Maintenance)

�� �����(�)�*�) �� ���� ) �*!�� ���&����� !������������� 9�

• '��%.��� "&��"����#���%�&(0����

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 14

Page 15: การออกแบบและพัฒนาเว็บไซต์

Mr.Warawut Khangkhan 15�%%�& 2 �� �����*!�������������

Page 16: การออกแบบและพัฒนาเว็บไซต์

���������!�����"����"����������������������!�����"����"�������������• ������ ��������"#�������0� - :�� �2&�'���� �� ������ ��� 9��*�� ��"&'�0�������������� ��� �*! - :�� !��%�&����)�*��8

����������������%�&������ ��������"#��� 9��*��

• ��0���������:�/'�������� ��0�!����'��:��� �67�� 9��*�� �*!� ���*����%�&:��� /�������������"&�8 �2&���� ��������� �� �� �67��0��8 ��0� PhotoShop � 9����

����������������%�&����:��� �67�� 9��*��

• ��� - ���%�#�:���*!��"#����(����� �)/������ ��)���:���*!��"#�����!���*!��/���

����������������%�&��%�#�:���*!��"#��

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 16

Page 17: การออกแบบและพัฒนาเว็บไซต์

��������"��������#�$��"�������������������%&��' �

������ ��������"#�������0� - :�� �2&�'�������0� - :�� �2&�'���� �� ������ ��� 9��*�� ��"&'�0�������������� ��� �*! - :�� !��%�&����)�*��8

Mr.Warawut Khangkhan 17�%%�& 2 �� �����*!�������������

Page 18: การออกแบบและพัฒนาเว็บไซต์

��������"��������#�$��"�(�����)*��%&��' �

��0���������:�/'�������� ��0�!����'��������� ��0�!����'��:��� �67�� 9��*�� �*!� ���*����%�&:��� /�������������"&�8 �2&���� ��������� �� �� �67��0��8 ��0�PhotoShop � 9����

Mr.Warawut Khangkhan 18�%%�& 2 �� �����*!�������������

Page 19: การออกแบบและพัฒนาเว็บไซต์

��������"��������#�$�# ��(���'+�������

��� - ���%�#�:���*!��"#����(����� �)/��"#����(����� �)/������ ��)���:���*!��"#�����!���*!��/���

Mr.Warawut Khangkhan 19�%%�& 2 �� �����*!�������������

Page 20: การออกแบบและพัฒนาเว็บไซต์

Mr.Warawut Khangkhan 20�%%�& 2 �� �����*!�������������

Page 21: การออกแบบและพัฒนาเว็บไซต์

����%�+�������,��#�$���-��������������%�+�������,��#�$���-������������������������1. �������� ��

(Simplicity)�" �� �"&�� ��"#��12�(-�'���)/�����)��� !���� ��%�&�)/�����)��� !���� ��%�&���&/�������� ������'����*"�@��!��&�%�&���� 9��%0���#�

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 21

Page 22: การออกแบบและพัฒนาเว็บไซต์

����%�+�������,��#�$���-��������������%�+�������,��#�$���-������������������������2. ������!����� (Consistency)

�" �� ������������'���� - ����)�/�����*)%�#���������

3. �����"�������#$� (Identity)�� �����������2�12�*��34!����� � 9��*�� ��"&���� - ������ �����������2�12�*��34!����� � 9��*�� ��"&���� - ���������������� 1�!%��12���*��34!�*!*��34!����� ��#��)�

4. ���������������%���� (Useful Content)�� ��)�� �/���"#���*!��-*%�&(-�'������� '��1-�����*!���- 4� �)/���� �� .��*!���&�����'��%���0���.�� 4�/-0��� ��"#��%�&������%�&�.)�" ��"#��%�&� ���2#����� �)/��0�#���������"&� �� �!�!� 9���&�%�&)2�)-)(-�'��'�������'���������/-0���

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 22

Page 23: การออกแบบและพัฒนาเว็บไซต์

����%�+�������,��#�$���-��������������%�+�������,��#�$���-������������������������5. ������&����������� �� �� (User-Friendly Navigation)

�������'��(-�'�����'��0�/�*!'������)��!)�� �)/'��� �67�%�&�"&�������/ 0��������;���/%�&��)��� ��%�#��� - ����*!*��)��� �/�� %�&��&����� ��0� ������'�������0��)�/�����%.�8 ����������'�������0��)�/�����%.�8 ����

6. �����#$�� ����' (Visual Appeal)����������������!������������;�����.4:������ !���0��8 ��0� �.4:���� �67�%�&�!������- 4� ��0�� 0� /��������/��/� 9��.))0��� "���� 9��#�����)'������ ���)�����3 %�&0���0�/ �*!�%���%�&������/0����/��� � 9����

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 23

Page 24: การออกแบบและพัฒนาเว็บไซต์

����%�+�������,��#�$���-��������������%�+�������,��#�$���-������������������������7. ������ �� ���� � (� '!���) (Compatibility)

�� ������������'��(-�'�0�0��'��0���12��)����%�&�.) �)/��0���� ������'��(-�'�������)��#�� �� �')8 ���&����� � "����*"�'��� ���� ����)')���)��2&��2��!���� 1���12���"#���)� ���� 1��)�(*�)�'�%.� !�� A������� �*!%�&�������� 1���12���"#���)� ���� 1��)�(*�)�'�%.� !�� A������� �*!%�&����*!��/)������0��8 ���/0����0�� =���

8. ��$*�+��������,�� (Design Stability)1��/��'��(-�'�� -��2��0������������.4:�� 1-���� �*!��"&1"�)� ���� '����������������� ������������/0����� ��0��)�/�����"& !�:%"&�8 %�&����� �����*!� �/�� �/���"#��/0�� ���

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 24

Page 25: การออกแบบและพัฒนาเว็บไซต์

����%�+�������,��#�$���-��������������%�+�������,��#�$���-������������������������9. ���������� ������.��� (Functional Stability)

!���� %������0��8 '����������!�����������0���*!%������%�&�)�/0��1-����

10. ����.�����������&#�� (About the Company)10. ����.�����������&#�� (About the Company)� 9���-*�"#�$���� �3�%'�)����0��8 ��0� !�����*!����� 9��� � 5����/�� �3�% ��)�*!������&����� �3�% ������������� �*!����� "&�8 %�&���&/��� ��"&'��(-�'����������"&��&�'�����������*!� ��� �� �3�%

11. ���������)/�&*�$0� (Product Information)���� 9�������0��%�&'����-*���&/����(*��:�4B� � ��� � �� ����<3 �*!"&�8 %�&���&/��� 1��(*��:�4B�� 9��6���� � �-0�"�� '������*!�%�������<3�0��8 ��"&(-�'�� -��2���'��������/0���6���� �'��)������*)� �� �%)*�'��

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 25

Page 26: การออกแบบและพัฒนาเว็บไซต์

����%�+�������,��#�$���-��������������%�+�������,��#�$���-������������������������12. � �����������,��� �'���������� (New/Press Releases)

�� ���0���0���� ��"&�"&'��(-���'��)� ��% ����-*%�&%�����.�� 4�/-0���

13. ����.������&) � (Contact Information)��"&'��*-����'��'��� ��)�0���� �3�% ��0� ���*��)�) � %�&/-0�� �3�% �� ���"&'��*-����'��'��� ��)�0���� �3�% ��0� ���*��)�) � %�&/-0�� �3�% �� ��% <��%��*!�% �� � 9����

14. �!������)�&�� (Frequently Asked Question: FAQ)�0�/'��(-���'��)� �������%�&����� /0�� �)� ��

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 26

Page 27: การออกแบบและพัฒนาเว็บไซต์

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 27http://www.adobe.com/solutions/professionalvideo/

Page 28: การออกแบบและพัฒนาเว็บไซต์

Mr.Warawut Khangkhan 28�%%�& 2 �� �����*!�������������

Page 29: การออกแบบและพัฒนาเว็บไซต์

#����� ���������#����� ���������1. ��������� � (Web Master)

2. (-������)�� �� �����-* (Information Architect)

3. ����)����� (Web Designer)

4. ����� �� ��� � (Web Programmer)4. ����� �� ��� � (Web Programmer)

5. (-�)-�* !�� (System Administrator)

6. (-�� ������"#�� (Content Editor / Writer)

Mr.Warawut Khangkhan 29�%%�& 2 �� �����*!�������������

Page 30: การออกแบบและพัฒนาเว็บไซต์

1. ��������� (Web Master)� �" (-�%�&)-�*�������� (-�%�&�!�/����.�%�<%�������������#�8 �0��!� '�%�<%��') ��#���0��"#��:�/'����� �*)��12���������������

� ��������� � ���!��0���%����%�#���)� "�!��0%���*/���)� �� �!��������� �� �/����"�(-�� ��� ���� ��2&� �" �/)-�* �����)���%�� �*! �/*!��/)%��� �/����"�(-�� ��� ���� ��2&� �" �/)-�* �����)���%�� �*! �/*!��/)%���%���� ��� 12���)����;�� ��������0���'�'������������� ��"&'����(-������'��� ��� ���8

� �� ������ -����&/����� !����� �������������*!���'��*���� %�#���)���&�%�&���&/��������������

� ��&�%�&��������� ���� -��*!���'���/0���"� "&�� Protocol, URL, FTP, Image, Web Server �*! Database

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 30

Page 31: การออกแบบและพัฒนาเว็บไซต์

2. ��� ����� !�������"���� (Information

Architect)� %������%�&��) !���/���-*�*!%)�� !��%;�:���� '�������������

� ������0���#�� ���������'�'��� ��) !����-*�*! !���� '������0��8 �*!�������2�12����%���� /�/��)��������'��'��02#�'����� �)/��0� ������������'�����(-�'�� ��� 12���)��� 10�/����-*%�&������������;�������� 9������� '�����(-�'�� ��� 12���)��� 10�/����-*%�&������������;�������� 9������� (Site Map)

� ������0���#�� ���"#�$�����&/������ � ��� ��)�� ��-* � "�� !���� 4�� 9�� 4� ��3� � "��������"��������0�

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 31

Page 32: การออกแบบและพัฒนาเว็บไซต์

3. �����#$�� (Web Designer)� %������%�&� 9�(-�����*��34!������%�#���)���������

� �� ������ -�%��<�* !�*!���� 1'��� �� �� �67��0��8 �)�� 9�/0��)� ��0�PhotoShop � " Illustrator � 9���� ��%�#���� -������;��� ����)�6*�� �67�'�� �� ��0��8 ��0� Fireworks � " ImageReady � 9���� �*!� �67�'�� �� ��0��8 ��0� Fireworks � " ImageReady � 9���� �*!�� '������ �� ��0�/� ������� ��0� Dreamweaver � 9���� ��%�#���������� -����&/���� - ��������3 (Typography)

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 32

Page 33: การออกแบบและพัฒนาเว็บไซต์

4. ��� %�& ����� (Web Programmer)� %������%�&��/��� � ���*!� �� ��� '������0��8 :�/'��������� �0�/����� !���� %�����%�&�� !�/���'�����(-�'�� �*!��������&/������ !��$����-* �� ������ -����&/���� HTML (XHTML), DHTML, JavaScript,

Cascading Style Sheets (CSS), Internet Protocol (IP), Cascading Style Sheets (CSS), Internet Protocol (IP), PHP, Database (DB) �*! AJAX � 9���� ��� 12��� � �����������)/�<�/� �� ����� �� - ��0� Dreamweaver � 9���� �*!�%������ � *�&/�� *���-*:�/'���������'�������� �)� �� ��%�#� -������ '������ �� �FTP '��� ����*)�6*���-*)��/

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 33

Page 34: การออกแบบและพัฒนาเว็บไซต์

5. �����&����� (System Administrator)� %������%�&����.� )-�*������� �6�� � ��12�C� �)�� ��*!�6���� �"&�%�&���&/���

� ���� 1���� �!���*! ����#� !����"&�� %�����%�&�� !��%;�:��

� �� ������ -����&/���� Routing, Client/Server Programming ��� 12�%��3!���&/����:�3�%�&���� 9� ��0� Tk, Perl �*! Shell � 9����� 12�%��3!���&/����:�3�%�&���� 9� ��0� Tk, Perl �*! Shell � 9����

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 34

Page 35: การออกแบบและพัฒนาเว็บไซต์

6. ����������'(�� (Content Editor /

Writer)� %������%�&'��� ��)�� �/���"#��%�#���)'��������� �)/ �� ����"#��%�&�� !�/����*!�0���'�'�����(-�'��/-0��� �������#/������/� ��������1-�����*!�.4:�����"#����0'�������(�)� "�����%�&0���*������� �2&�������0���#�!� �/��)����� 4�;��� �*!�����/��)����� 4�;��� �*!�����/�

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 35

Page 36: การออกแบบและพัฒนาเว็บไซต์

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 36

Page 37: การออกแบบและพัฒนาเว็บไซต์

!�����"���������!�����"���������� �� �� ������� �/�*��)�� (Sequence)

� �� �� ������*��)����#� (Hierarchy)

� �� �� ������'/����.� (Web)

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 37

Page 38: การออกแบบและพัฒนาเว็บไซต์

!�������&������������ (Sequence)� � 9��� �� ���%�&��������"#��� 9�*��)�� ����� � (-����'��� ��� Website �!���0����"#��'����%�*!�������*��)�� ��0���� 1������"#������"&��)� Web �!�*��/�*2������ �������%� �/�������� ��0�/����� Liner

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 38

Page 39: การออกแบบและพัฒนาเว็บไซต์

!�������&������������ (Sequence)� �0��'��0�� ��������"#����� Sequence ��#�!� 9� !�:%� ��� $����-*��0� Search Engine �0��8 ��0� Google.com, Yahoo.com � " Search Engine %�&�"������-*'������.) *��34!�� ������� 9�)��:��������������

� �� ������ !)�� Main Page �!1-����������� �/�*��)�� �0�� !)�� �/*!��/) Detail Page �!������'� !)��*0��*��� /0��� ����� �������� �!)-��"#��'����� Main Page 1�)� �!��0���� 1%���)� �!���0���0�� Detail Page '����� "&���#�'�������/�0� )��:�����*0��

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 39

Page 40: การออกแบบและพัฒนาเว็บไซต์

"���-"���� !�������&���������������)� �������� ����!���� ���� ������'� - ������ � ��� $����-* ��0� Search Engine �0��8 !��

� (-�'��� ��� �!������/��*�0��'�%.�8 ���� ��0���� 1���� � "&�"&�8 ����"&�8 %�&��'��)�� "�Search Engine �0��8 !��

$����-*�����.) !��$����-* Video on Demand �� �!��-*%.�����(-�'��� ��� �!���0��'������*!��/))-%.�������"&��0'���*�)��-*%�&���������

"&�8 ����"&�8 %�&��'��)�� "�������� Page %��%��)�

� ��0����!���� ���� ��������"& !��������;�� "��"&�� <2�3� �� �!(-�'��� ��� �!��0� 9��� !�! -��2����"�1-�������'��0�� ��0� Webpage �%�� ���� � 9����Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 40

Page 41: การออกแบบและพัฒนาเว็บไซต์

!�������&����������(� (Hierarchy)� *��34!�� �������!� 9����"��#�����) �)/�!������'������*���0� �����#�(-�'��� ��� ���� 1�*"�����%�&������'�0���)��*!��0���0��%.�������0���� Sequence

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 41

Page 42: การออกแบบและพัฒนาเว็บไซต์

!�������&����������(� (Hierarchy)� ��"&(-�'��� ��� �*"�����%�&������'��)��*�������� 1���0��'��0�� �/*!��/)

Page �)� '�4!%�&0�������� 1�������� �/*!��/)� �-0�����*���)���#�8 �)� �����#����*"�����%�&��'������*����#�8 �0�

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 42

Page 43: การออกแบบและพัฒนาเว็บไซต์

"���-"���� !�������&����������(����)� �������� (-�'��� ��� ���� 1�*"�0��'�����%�&��'��)� �)/��0���0��%.����� (-�'��� ��� �!��0 -��2��0���

� ����� Link ����')���/� �*!(-�'��� ��� %�&� 9�(-�'��� ��� '��0�!��0���� 1�) .D� Back �)��*!�!���� (-�'��� ��� �!��0 -��2��0���

��"#�� �/*!��/)%�&�!���0����� ��"&����'���%������ ������� 9��#�����) Sequence �*!(-�'��� ��� �!��0���)�� �*�%���� �!�!% ���1��!�����0�/-0 4 %�&')� Website ����!���� ����������"&�� � �/��� ��

��0���� 1�) .D� Back �)��*!�!���)�� �*�%��%��%� ���� 9�������� ���� Site Structure Design �0��2����� 1������'��%������#�)�)�

43

Page 44: การออกแบบและพัฒนาเว็บไซต์

!�������&��*�&���+� (Web)� � 9��� ������%�&������/")�/.0��-���� �� �!����%.�������0�0��!� 9������*��� "���� �/*!��/)�!1-���"&��012������) (-�'��� ��� ���� 1����-0����')������2&��0����)� �*!��"&����� �� ����"&�8 ������ 1%���)�%��%�

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 44

Page 45: การออกแบบและพัฒนาเว็บไซต์

"���-"���� !�������&��*�&���+����)� �������� ��"&����%.�����1-���"&��0�������)(-�'��� ��� �2����� 1����-0�����0��/0�� �)� �� ����!���� ��

� ��"&������ ��"&�%.��������������� �������%.������2���0� 9�*��)�� (-�'��� ��� �!���)�� �*�%������������0��/0�� �)� �� ����!���� ��

Website %�&����� '��(-����'��� ��� '�*��34!�/�&/�����"&0����-*�����)�/0�� �)� ��

(-�'��� ��� �!���)�� �*�%���������"#���0������)�0��!� � �0��*������ ��0����!��� Website ��"&�� !��������;� �� �"&�� �� � �/��� ��

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 45

Page 46: การออกแบบและพัฒนาเว็บไซต์

Mr.Warawut Khangkhan 46�%%�& 2 �� �����*!�������������

Page 47: การออกแบบและพัฒนาเว็บไซต์

� ���������������������� ���������������������

4.

3. �����)�� �� �����-*

2. �����)� 5����/

1. �� �����)���

9. �6��*)��������

8. *�%!���/��"#�%�&��������

7. � ������������0*!�������%�&����

6. ��0��6 ��"#�%�&�� ��)�(*

5. � ���������� (Site Map)

4. �����)�� �"�%)��-*

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 47

Page 48: การออกแบบและพัฒนาเว็บไซต์

1. �� �����"�"�� �� ���������������0�)����*���� � "�� �����)���%�&��/��� ��0�!2#�/-0���� 5����/�*!��������� '��� '���������������#��0�� �����"&!� ��0� ��"& !��������;�� �3�%� "��"&�/������ � 9����

� (-�������!���<2�3���������� �(-�'��/0��*!��/)�0� ��"&'��� 9����%��'�� (-�������!���<2�3���������� �(-�'��/0��*!��/)�0� ��"&'��� 9����%��'��� � �����������'������ 1�������������� �(-�'���)�/0��1-����

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 48

Page 49: การออกแบบและพัฒนาเว็บไซต์

���&� "�(��� �� �����"�"�1. ���� ,/� (Strategy)

� 9��#������� �� ����-*���&/����� 5����/�*!��������� �(-�'�� �0��� ������������� ��0� �� �����)�� ���� %����� �� !��4%�&'�� % ��/�� �*!%������ "�.��*%�& ��(�)�� � 9�����*!%������ "�.��*%�& ��(�)�� � 9����

2. ���� ��%�� (Deliverable)� 9��#����� � ���*��)���(��� %����� ��"&��)�� !����� %�������#���0�������

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 49

Page 50: การออกแบบและพัฒนาเว็บไซต์

���&� "�(��� �� �����"�"�3. ����!���)���&1�� (Assumption)

� 9��#����� �����)��"&���*!������)�0��8 %�&'�������)��� �*!� 5����/�� '���������������#�8

4. ���'�)�������� (Scope Management)4. ���'�)�������� (Scope Management)� 9��#����� ��)�� ������������%�&���� � *�&/�� *�'� !��0���� )��������� �*!��(*� !%��0���%�&�)������)���'���� � ��"&'������ 1)�������� ��������������0� �)�/0���0��"&�

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 50

Page 51: การออกแบบและพัฒนาเว็บไซต์

2. �����%,������ �����)� 5����/� "���1. !���� �!�0�/'��(-���������� 1�����)%�<%���� )��������� �� !��4 ��%�#� !/!��*��)�/0������!��

� �� �����)� 5����/ �� ����2��*!'��������������� =���/)���0� ��#�������� �������� – 1"� 9���&�������'��� )��������� (-�������!��� �� ��� �������� �������� – 1"� 9���&�������'��� )��������� (-�������!��� �� ����������� �*-����/0��*!��/)�0������ ������'� - ���')

� ��������������� – �0��� �������������(-���������% ��12�� 5����/� "���1. !�����*-�����0������ � �������������"&���%��)���')

� ������������ – ���)�� ���� � ������� � �� '������������� �*!�.) !������� � ����������� ��� 12��� ��/�� �� ���"&'����������%�����

� ������������ ������ – � 9���&�%�&(-���������������������2�12� �2&��� ������������'����/��� �*!�0���'���� 9����0����2&�%�&���� 1)2�)-)(-����/�&/����)�

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 51

Page 52: การออกแบบและพัฒนาเว็บไซต์

3. ����� !�������"����� �0�/'��(-���������� 1�����)*��)���� %������0��8 :�/'����������)��0�/ �*!�!)��/�&�2#� ��� 12�%��'��*-���������� �� ������������ ���%���� ���� �*! - ������ %������0��8 �2&��)/�0��'��0�!� 9������� !)�3�0�%�&�!���� ������ �������� ��

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 52

Page 53: การออกแบบและพัฒนาเว็บไซต์

����-�� ����� !�������"����� �. 4�$� �����) ����� �0�����'��� ��������������� ����������-*:�/'� �. �)/����� '����)� �/*!��/)��-*� �. �)�%�#���) ��0� !���� ��/��/ ���;!��� (*��� �������*!� ��� � 9���� *-�������� 1��)�0���%��� �3�%(0��%�����������)� ��%�#����� 1��)��F34�������� "� ��� ��-*0���� �*! �/*!��/)�)� ��%�#����� 1��)��F34�������� "� ��� ��-*0���� �*! �/*!��/)�0��8 �� �3�%�)�

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 53

Page 54: การออกแบบและพัฒนาเว็บไซต์

����-�� ����� !�������"����� ������0� �)�<2�3���������� �*-����� �/� �/�*�� ���� 1�����)�� �� �����-*�*!�����"#��'����������)�)����#� ���� � (Index) ���� ����)� �/*!��/)� �.� �����)� !������ �0��#� �.� �����)� !������ �0��#� �.

� �����)���/��/ �*!���;!���� �.

� ���������(*���%�&�)� ��� �.

� �����)� �/*!��/)��������*!� ���

� ����� ��)�0 !��0��*-������� �.

� ���"&�8 %�&���&/���

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 54

Page 55: การออกแบบและพัฒนาเว็บไซต์

55/����0���� 1 !�.�)��0���0*!����� /-0'��0��')���������

Page 56: การออกแบบและพัฒนาเว็บไซต์

4. ����� ���'�.�"����� �� �����)�� �� �����-*�����������/�/0���)�/��!/����0���� 1����������������;����0*!����)� �2&�(-�������!���%���� � *�&/��� �� �����-*� � 9��� �"�%)��-* � " - ����� �� �����-*��������� (Tree Structure) �0��0�

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 56

Page 57: การออกแบบและพัฒนาเว็บไซต์

4. ����� ���'�.�"����� ��"&��0��*.0����"#���*���)��*���!%��'���������� �� ����� %��������������'� !)���0��8 �)��0�/2#� �������#/��������&����%�&���&/������&����%�&���&/���'���0*!�0������ )��/ ��"&'������ �/*!��/) �*!������������"#����0*!�0���)���)���/�&�2#�

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 57

Page 58: การออกแบบและพัฒนาเว็บไซต์

5. �����#$��&��% (Site Map)� � 9��� �����)�� �� ����� ��"&��/�����'��������� ��"&�����!)����"&�����!)��'��� ����� � "� 9��� ������ !��%�#���)'�������������)*��)��� 9�*��)����#�%�&���&/������

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 58

Page 59: การออกแบบและพัฒนาเว็บไซต์

6. &�-�/���'(�.�0 ��&������ �� ��0��6 �� 9��� ��0��"#�%�&�� ��)���"#��������� - ���%�&����0������� ������������ �(-������� "*-�������/0�� �� ��0��6 ���� index.html ��������� �. 4�$� �����) �)/��0���-*%�&����� ����:�/'���� �)�)����#

(Logo)� �*��� (Logo) � �. 4�$� �����)� ���-�*�� (Menu) � "�� ��"&��/��**��� ��"#���*��� �� ��"&��/�%�&���&/���� �� ��"&��/�/0/� �F34��0��8 %�&����� ��)������� ��-**���%;�G

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 59

Page 60: การออกแบบและพัฒนาเว็บไซต์

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 60

Page 61: การออกแบบและพัฒนาเว็บไซต์

7. ����������&�-���������.�0 &��� � 9��#����� � �����������������%�&�)�������� )��/:�3�� "�� "&��"�0��8 ���%�&(-������������������� ��0� HTML, PHP, ASP.NET � "� �� �Dreamweaver � 9����

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 61

Page 62: การออกแบบและพัฒนาเว็บไซต์

8. ��.�����"�'(�.�0���#$��� � 9��#����*������� ����#��� �������������

� � 9��#����� ������������ �(/�� 0���� "0�/���% ����� ��"&'��(-������� 1����������������)�

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 62

Page 63: การออกแบบและพัฒนาเว็บไซต์

9. �/ ������#$��� � 9��#����.)%��/'��� ����6*���������%�#���)2#�� �������'��"#�%�&%�&�)���)�� �/����)��/� �� � FTP � "�� "&�"�%�&(-�'��� ��� �)���)�� �/����'��

Mr.Warawut Khangkhan �%%�& 2 �� �����*!������������� 63

Page 64: การออกแบบและพัฒนาเว็บไซต์

Mr.Warawut Khangkhan 64�%%�& 2 �� �����*!�������������

Page 65: การออกแบบและพัฒนาเว็บไซต์

��.�/�'�/-�������������������.�/�'�/-�����������������1. ���%�� ���� �����2���"������3�� – !���6 �� ������������'�����(-�'��

�*!��0���� 1%�&�! bookmark �� ��)��"&�6*�� url ��01-���� �� ��&������(**��;���0��0�� �������#�(-�'��/����0���� 1��)�� 4��)��0��!���)�� � *�&/�� *�2#�%�&�6 ���� �*������*��%�&*�����*��� *�&/�� *�2#�%�&�6 ���� �*������*��%�&*�����*��

2. ������%�%��������. %)�(� '!���"� – (-�'���0��'��0��'������"#���*!�� '����������0� �*!��0������� ��%�&�!'���%����*/��#��-�%�&�2&����*0��.) '��� '���%����*/��#��-�����!����*.0�(-�'��%�&�� !���� 4��-��%0���#�

3. ������� �������*�+����������(���)��� – '�����������0�� ����� !��%�&��*"&�����*)��*��������� ��0�0��!� 9� Scrolling

Text, Blink Text, Marquess

Mr.Warawut Khangkhan 65�%%�& 2 �� �����*!�������������

Page 66: การออกแบบและพัฒนาเว็บไซต์

��.�/�'�/-�������������������.�/�'�/-�����������������4. �����. �2�(4����4��4��� (URL) – /���0�� �)����*!����� %�&/-0��������%�&

��������#����!/-0'� - ��"&%�&������/����� �!�)*����� �� '�������3 ������*��(�������������'��0 ��� 12��� '�������3 ���<3 ��0� _, - �*! ~ %�&����!%��'������� �������#%�&/-0����������� �"&12��� �� ������-*����!%��'������� �������#%�&/-0����������� �"&12��� �� ������-*:�/'���������)��/

5. (� �����,�) ����,�������. �� �2�(4��������2��+' – ��"&����(-�'��������!����-0����%�&� 9���-*(0�� !�������� " Search Engine �)/��0�)�(0�������C�������0� %��'��(-�'����0���� 1 -��)��0����*��'���������!� �*!�!�*�������'�����)�/0��� �� �!'�������#���0���"&� "%�&/-0���������'������

Mr.Warawut Khangkhan 66�%%�& 2 �� �����*!�������������

Page 67: การออกแบบและพัฒนาเว็บไซต์

��.�/�'�/-�������������������.�/�'�/-�����������������6. ��������� ���������&�(� – %��'�����)��������������-*%�&�����������

����� ��������%�&������/������!%��'�����/��*�'��� ��*)��� �*!/��� ����������"&/*��'��� 0��'�������� �1����� �#����)��� ��*�/������&�%�&����� ��0������� ��0��

7. ��)������&��������������&�5&*�+ – ����������2&������� 9����'�� !������������*�/ - ��� 0����� ��"&����/�����!)��'�����(-�'�����%�&�.)

8. ������� �& ��(� ������� – ��� ��� *����%�&���� �-0����%�&/����0�)����� )-��#��!� 9����#������ �0��*����%�&�)����� ���� �*���!� 9����0�� �� � *�&/�� *�� "�*����)���*0��/0����0 ��� �!%��'��(-�'����0��0'��0��0������"*���� �*!*�������%�&�)��*������ �*������

Mr.Warawut Khangkhan 67�%%�& 2 �� �����*!�������������

Page 68: การออกแบบและพัฒนาเว็บไซต์

��.�/�'�/-�������������������.�/�'�/-�����������������9. ����.��� �(� ������������ ���������� – �!���)������0��"&1"�*!��0/��

�*����'��� ��� ��

10. �2��+',�) /���� – � �67���)'��0�!��(*%��'�����������#����'����*�'��� )������*)���2#� �)/1��'����*������0� 15 ����%� 2#�� �����!%��'��(-�'���� )������*)���2#� �)/1��'����*������0� 15 ����%� 2#�� �����!%��'��(-�'���)������'� ��"&����(-�'��������)%� �� ��)�(*���������)������) �2&��� �/�������/���)��0� 1����*)������ 8 ����%� (-�'����0� 90% �!� *�&/�� )-����"&��%�

Mr.Warawut Khangkhan 68�%%�& 2 �� �����*!�������������

Page 69: การออกแบบและพัฒนาเว็บไซต์

Mr.Warawut Khangkhan �%%�& 1 ���� -���"#�������&/�����C���� ������� �*!�������� 69

Page 70: การออกแบบและพัฒนาเว็บไซต์

Web SiteWeb Site� !��<�� ��3������/. (2554). ������������������&�� ������,��,��+�6���2�(4�. �"������"& 7 ���/�/�, 2554, ���http://dit.dru.ac.th/home/004/tachakorn/WEBDE/Chapter2.pdfapter2.pdf

� Thai WBI, Website. (2554). Web Site Design. �"������"& 20 �J<����/�, 2554, ��� http://www.thaiwbi.com/course/WebDesign/index2.html

Mr.Warawut Khangkhan �%%�& 1 ���� -���"#�������&/�����C���� ������� �*!�������� 70

Page 71: การออกแบบและพัฒนาเว็บไซต์

BookBook� �.��� 1� !��� . (2554). �2�(4�: �8#9�,���������. ����� ��� : ����������������%/�*�/����� ���.

Mr.Warawut Khangkhan �%%�& 1 ���� -���"#�������&/�����C���� ������� �*!�������� 71