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

71
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

Upload: warawut

Post on 02-Nov-2014

983 views

Category:

Education


0 download

DESCRIPTION

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

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