หลักการออกแบบและพัฒนาเว็บไซท์
description
Transcript of หลักการออกแบบและพัฒนาเว็บไซท์
����� ����� 11 ������ �� ������������ �� ��������������������������������������Mr.Warawut Khagkhan
Twitter: http://twitter.com/awarawut
Facebook: http://www.facebook.com/AjWarawut
E-Mail: [email protected]
Mobile: 083-0698-410
������������
• �������������� ������• ����������� ������
�������� ����������������� ������
Mr.Warawut Khangkhan 2����� 1 "#�������$��$#%����� ������
����������� ������• �������� ����������������� ������• ��&��"����� ��'�� ������• "#�������$��� ������• �����$��� ���( (Page Design)
Mr.Warawut Khangkhan
����� 1 "#�������$��$#%����� ������
3
����������������������������������������1) �)�"�*�+,�"��- $#% ��$��
(Site Definition and Planning)
2) .���%"� $#%(�*/��0��������#(Analysis and Information Architecture)
Mr.Warawut Khangkhan 4����� 1 "#�������$��$#%����� ������
(Analysis and Information Architecture)
3) ���$��� ���( $#%���-������#(Page Design and Content Editing)
4) #��&�0��� $#%�*0��(Construction and Testing)
5) ��-$1 $#%01��0.�'"��+2������(��(Publishing and Promotion)
6) *�$# $#%����(Maintenance and Innovation)
Mr.Warawut Khangkhan
����� 1 "#�������$��$#%����� ������
5
����������������������������������
• Web Master
• Web Design
• Web Programmer
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 6
• Web Programmer
• Content Writer / Editor
Mr.Warawut Khangkhan
����� 1 "#�������$��$#%����� ������
7
��� !���"������#$"%������������ !���"������#$"%���������
• �����# (Content) "&���&��"�"#������)��0��'�� ������• �1� 0�� ����#&����" (News) ����- ���0.����/�.��
�.(���1��3 ���� ������"&����"�1 ���
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 8
�1� 0�� ����#&����" ����- ���0.���� �.�� �.(���1��3 ���� ������"&����"�1 ���• ���4� (Free Service) • ����+5.0����6� (Interactive) ��1� ��7��/���+89"�• � �������.� (Entertainment)
Mr.Warawut Khangkhan
����� 1 "#�������$��$#%����� ������
9
���������!����&������������������!����&���������
• �����#����- ����.��� ����� "&����(�*�)� (About Us)• �-#%���-*����#.�:�;<�"&��.�� (Product / Service
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 10
�-#%���-*����#.�:�;<�"&��.��Information)
• �1� 0� (News / Press Release) • �)�7�� / �)���� (Frequently Asked Question) • �����#'����.*�1� (Contact Information)
Mr.Warawut Khangkhan
����� 1 "#�������$��$#%����� ������
11
������ ���������������� ����������
• �����$��/��0���� ������ (Site Structure Design)• �����$��%���� .������ (Site Navigation Design)
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 12
�����$��%���� .������
��� ��'!��(�"���������(Site Structure Design)• �+2�$����������#)�*����&��"�"&���(�* ���)�$"�1�� ���(
����"�* ����(%�)�'"��� 1������ ������+%����+*� -��&��"��%����� $#%��� ���("����"��������- ������&���/-�7�����
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 13
�%����� $#%��� ���("����"��������- ������&���/-�7�����• .6�(�*/��0���� ������0���7�)��*�"#�-$�� $�1$� �.*
"#��3 ����.-�'��������-�1 2 $�� �&�▫ (�*����#=1���&��"� (Content-Based Structure)▫ (�*����#=1������ (User-Based Structure)
��� ��'!��(�"��������� (�*�)(Site Structure Design)�������������� ���������• $����-�#)�*�� (Sequence)
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 14
$����-�#)�*��• $��%*������ (Hierarchy)• $���0� (Combination)
������������������������
• �"��%0)�"��� �����������()�� �� ���(��1������ "&�� ��������������)��0�������#$����#%�������
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 15
���� ����������� �������
• �"��%0)�"��� �����������()�� �� ���(������� �+2��+$�������*���� �+
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 16
������������
• �"��%0)�"��� ���������������� �+2����)����*�����+$������ 2 ����������0����
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 17
��� ���������,�%���(Site Navigation Design)• �+,�"��-��� ���������� ��� ��������� �&� �1 -'"������
����7�������#����������*��-1�� *�� $#%��1"#����• ����+%������%���)����(���� 2 01 �*� -��� �&�
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 18
• ����+%������%���)����(���� 2 01 �*� -��� �&�▫ ��&����)���� (Navigation Controls)▫ ��&�������)�$"�1� (Location Indicator)
��������������������
�&� ��&����&�0)�"��'"�������+@*�+-��� ���(�1��3 :�-'�� ������ /*-$-��*��+2�• �������� - �+@*�+-��"� �����&��"�"#������ ������ ����-�1'��+
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 19
• �������� - �+@*�+-��"� �����&��"�"#������ ������ ����-�1'��+����#=1�#.�������+2����� ��"&�:���44@� $#%� ��+��5�-�1��� ���(�=�"���• ������� ���� � - ��&���/-�� ���(+8((=������� ���(�&��:�-'�
�#=1�-1�-�������&��"�����- ��&�����1����� ����-�1'��+����#=1�#.������� ��"&���4@���1����• ��&����0.� 0)�"���1 -�0.����)����������� ���*�
��������������������
• ��!"���!����#� - �1 -�0.����)����������� ���*�"#��"#�-�+$�� ��1� �1�����"������# (Search Box), ����$��*��+*� �� (Drop-Down Menu), �.���($�
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 20
�+$�� ��1� �1�����"������# ( ����$��*��+*� �� (Drop-Down Menu), �.���($� (Image Map), $������ ������ (Site Map)
��������������������������������
• '��$0*� 1��;%���������)�#���-�1����)�$"�1�'*'�� ������ ��&�������)�$"�1����*�"#�-�+$�� ��1� ���� ��"&�:���4@����$0*��&��� ���( "&����� ���1�����)�������
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 21
$0*��&��� ���( "&����� ���1�����)�������
Books > Computers & Internet > Hardware
�� -��������,�%������.�
• �-�1'��)�$"�1�����"���*���*�(�$#%����7���1�- ��1� 01 ���"&�*��-���-���� ���(• ����'(�1�-"&������� ���)������*�(� �����'���*������/*-��1
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 22
• ����'(�1�-"&������� ���)������*�(� �����'���*������/*-��1�����0�-� #������• ��� ��0��)��0�� $#%�+2�%�� ��1�1 -'"�0��0�"&��#���+
�#����• �������0�����&��'����� ��1� �+#��-�0���&�������������0�"&�
�#.�
�� -��������,�%������.� (�*�)
• ��()�� ��-����"��% ��1�����.��+• ��"#�-����#&��'"�'�� ��1� ������4@�, �������� ��, �1�����"�
�����# (Search Box), ����$��*��+*� ��
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 23
��"#�-����#&��'"�'�� ��1� ������4@�, �������� ��, �1�����"������# (Search Box), ����$��*��+*� �� (Drop-Down Menu), $������ ������ (Site Map)• ��#.���'"��#.��#���+-��/B��(�*��0�� �&��'"�������#���+
�.�����'"�1�*�'��;����"#������1�� 1��� ����-�1����)�$"�1�'*
Mr.Warawut Khangkhan
����� 1 "#�������$��$#%����� ������
24
��� ��������/��� ��������/ (Page Design)(Page Design)
• .6����0%* ����0=*'������$��� ���( �&� '��/+$��0���:���4@� ��1� Photoshop "&� Fireworks ������/�����"���$#%0�������+%����1��3 ������'"���
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 25
:���4@� ��1� "&� ������/�����"���$#%0�������+%����1��3 ������'"���0���;�'�:��*�-
(*��0���������"������/
• 01 �"� (Page Header)• 01 ������&��"� (Page Body)
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 26
01 ������&��"�• 01 ����- (Page Footer)• $7����� (Side Bar)
�������������� (Page Header)(Page Header)
• �-�1�����0=*���"��� �+2��.� ;���0)���9���0=* ��&���(�����'��(%����"���1���.� ;�&�� 01 �'"91�.-�'�� ��/#/�� �&��� ������ +,�-/C�;� #.���0)�"�����.*�1�"&�#.������0)���9
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 27
�&��� ������ +,�-/C�;� #.���0)�"�����.*�1�"&�#.������0)���9 $#%%���)����
�������������������������� (Page Body)(Page Body)
• �-�1����#��"��� '��$0*���&��"����� ���(���� ������((%+%����+*� -���� ��, :���4@�, ���������# $#%�&��3 �����������"#��"&������D�%�#=1���(���-�1'�01 �������*�
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 28
�����������"#��"&������D�%�#=1���(���-�1'�01 �������*� /*-���(% ��� �*������-�&�0=* ��&���(�����'��(%����"���1�-� 1�
�������������� (Page Footer)(Page Footer)
• �-�1*���#1��0=*���"��� 01 �'"91(%�.-�'�� ��%���)����$������+2�#.������� ���1�-3 ���(���������((%���&������(����� ���� ��$0*�#.�0.�6.E $#%����#�$�*�*0������*�$#� ��
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 29
�(����� ���� ��$0*�#.�0.�6.E $#%����#�$�*�*0������*�$#� ������
� ����� ���� (Side Bar)(Side Bar)
• +8((=����.-����$��*����������"���� ���('"��1�0�'( �&��'�� ��+,�-$������ "&�#.���$�%�)�����- ������.������ ������ �+2����
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 30
� ������ �+2����
��!,.&���� ��������/
• �����(��� �������&��3• +%-=����+$��(��0.��.��
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 31
+%-=����+$��(��0.��.��
�� ��������/�1*���&�".$.�
• �������$ ���%�� - ���$���*��-1���"��%0�'�*������+.��;���� ��$#%�+:�����*���� �)�'"�*�0��-��"������#�*��1�-
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 32
�*��1�-• �������$ ���&$�� $�����'�����&$� – ���$���*��-1��
��-��1�- ��%���-�$#%�)��0�������#�-1���+2�"� *"��1• (��� ��) �*���� �������������+ – �����(%0����0�*������
��&���+@*���������"������� ������ /#/��/�&��� ������, $������/C�;�, ���"������#
�� ��������/�1*���&�".$.� (�*�)
• ��� ���,��� ��) �*�����!-�� – �1 -����'"����������"�� 1�01 ��"�0)���9���"&����-�*��-1�� *�� ��1� ���� �����*'"91$0*� 1�0)���9� 1����� �����*�#�� �+2����
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 33
���*'"91$0*� 1�0)���9� 1����� �����*�#�� �+2����#���;%����+%����1��3 ��������)����7����*�����▫ %) ��� �����) ,����������������������+▫ �& ����� ,������������▫ � �(.�/ ���!"����� ��!����� ��&"��!"������,� �0"�+�,0�,�,� $% � ��� �����������"���
�� ��������/�1*���&�".$.� (�*�)
• (.��� 12�(����,& – ��'��:���4@���� ���((%'"��#���� 2 *��� �&� *���"�����1 -'"�� ���(0 -���$#%�1�0�'( $�1���*���"����7��'01��4@������.��+��(�)�'"�*���� $#%� ���(
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 34
*��� �&� *���"�����1 -'"�� ���(0 -���$#%�1�0�'( $�1���*���"����7��'01��4@������.��+��(�)�'"�*���� $#%� ���(/"#*�*���� ����������0�-� #����� *������� ()���*+.��;���:���4@�����)���'��'"��"��%0�
�� ��������/�1*���&�".$.� (�*�)
• �������� ,���������+(����,&������ +� – �����)�����#=1�������+,�"��-01 �'"91 1�'��(�:������� ��#%���-*(resolution) ���.���# $#%�)�"�* 1�(%'"�� ���($0*�
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 35
������+,�"��-01 �'"91 1�'��(�:������� ��#%���-*(resolution) ���.���# $#%�)�"�* 1�(%'"�� ���($0*��#�*�*���(�� ��#%���-*��1�'*� ��#%���-*���(�:����'��������'�+8((=��� ���-�1 2 %*��▫ 1024 x 768 pixel▫ 1280 x 800 "&� 1280 x 1024 pixel
�� ��������/�1*���&�".$.� (�*�)
• ��!��(.��&�$ ���� ��� – �����$��� ���('"�0 -������� 01 �"����(%�����-�1������#&��'���=*0�����0��#��#&���� �� 0����&��� ���(, 0����� �� $#%0��������+%����&��3 ��1�
Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 36
���&��� ���(, 0����� �� $#%0��������+%����&��3 ��1� ��4@�, +=F����� "&�#.��� $#%��'��0�����-���1�����=�#.����� ������*� - 1���&��"������'�$� �"�