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

36
1 Mr.Warawut Khagkhan Twitter: http://twitter.com/awarawut Facebook: http://www.facebook.com/AjWarawut E-Mail: [email protected] Mobile: 083-0698-410

Upload: warawut

Post on 02-Nov-2014

1 views

Category:

Education


0 download

DESCRIPTION

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

TRANSCRIPT

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

����� ����� 11 ������ �� ������������ �� ��������������������������������������Mr.Warawut Khagkhan

Twitter: http://twitter.com/awarawut

Facebook: http://www.facebook.com/AjWarawut

E-Mail: [email protected]

Mobile: 083-0698-410

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

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

• �������������� ������• ����������� ������

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

Mr.Warawut Khangkhan 2����� 1 "#�������$��$#%����� ������

����������� ������• �������� ����������������� ������• ��&��"����� ��'�� ������• "#�������$��� ������• �����$��� ���( (Page Design)

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

Mr.Warawut Khangkhan

����� 1 "#�������$��$#%����� ������

3

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

����������������������������������������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)

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

Mr.Warawut Khangkhan

����� 1 "#�������$��$#%����� ������

5

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

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

• Web Master

• Web Design

• Web Programmer

Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 6

• Web Programmer

• Content Writer / Editor

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

Mr.Warawut Khangkhan

����� 1 "#�������$��$#%����� ������

7

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

��� !���"������#$"%������������ !���"������#$"%���������

• �����# (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)

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

Mr.Warawut Khangkhan

����� 1 "#�������$��$#%����� ������

9

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

���������!����&������������������!����&���������

• �����#����- ����.��� ����� "&����(�*�)� (About Us)• �-#%���-*����#.�:�;<�"&��.�� (Product / Service

Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 10

�-#%���-*����#.�:�;<�"&��.��Information)

• �1� 0� (News / Press Release) • �)�7�� / �)���� (Frequently Asked Question) • �����#'����.*�1� (Contact Information)

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

Mr.Warawut Khangkhan

����� 1 "#�������$��$#%����� ������

11

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

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

• �����$��/��0���� ������ (Site Structure Design)• �����$��%���� .������ (Site Navigation Design)

Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 12

�����$��%���� .������

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

��� ��'!��(�"���������(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)

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

��� ��'!��(�"��������� (�*�)(Site Structure Design)�������������� ���������• $����-�#)�*�� (Sequence)

Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 14

$����-�#)�*��• $��%*������ (Hierarchy)• $���0� (Combination)

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

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

• �"��%0)�"��� �����������()�� �� ���(��1������ "&�� ��������������)��0�������#$����#%�������

Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 15

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

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

• �"��%0)�"��� �����������()�� �� ���(������� �+2��+$�������*���� �+

Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 16

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

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

• �"��%0)�"��� ���������������� �+2����)����*�����+$������ 2 ����������0����

Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 17

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

��� ���������,�%���(Site Navigation Design)• �+,�"��-��� ���������� ��� ��������� �&� �1 -'"������

����7�������#����������*��-1�� *�� $#%��1"#����• ����+%������%���)����(���� 2 01 �*� -��� �&�

Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 18

• ����+%������%���)����(���� 2 01 �*� -��� �&�▫ ��&����)���� (Navigation Controls)▫ ��&�������)�$"�1� (Location Indicator)

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

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

�&� ��&����&�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.����)����������� ���*�

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

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

• ��!"���!����#� - �1 -�0.����)����������� ���*�"#��"#�-�+$�� ��1� �1�����"������# (Search Box), ����$��*��+*� �� (Drop-Down Menu), �.���($�

Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 20

�+$�� ��1� �1�����"������# ( ����$��*��+*� �� (Drop-Down Menu), �.���($� (Image Map), $������ ������ (Site Map)

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

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

• '��$0*� 1��;%���������)�#���-�1����)�$"�1�'*'�� ������ ��&�������)�$"�1����*�"#�-�+$�� ��1� ���� ��"&�:���4@����$0*��&��� ���( "&����� ���1�����)�������

Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 21

$0*��&��� ���( "&����� ���1�����)�������

Books > Computers & Internet > Hardware

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

�� -��������,�%������.�

• �-�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�"&�

�#.�

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

�� -��������,�%������.� (�*�)

• ��()�� ��-����"��% ��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�'*

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

Mr.Warawut Khangkhan

����� 1 "#�������$��$#%����� ������

24

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

��� ��������/��� ��������/ (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���;�'�:��*�-

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

(*��0���������"������/

• 01 �"� (Page Header)• 01 ������&��"� (Page Body)

Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 26

01 ������&��"�• 01 ����- (Page Footer)• $7����� (Side Bar)

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

�������������� (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 28: หลักการออกแบบและพัฒนาเว็บไซท์

�������������������������� (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 29: หลักการออกแบบและพัฒนาเว็บไซท์

�������������� (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������*�$#� ������

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

� ����� ���� (Side Bar)(Side Bar)

• +8((=����.-����$��*����������"���� ���('"��1�0�'( �&��'�� ��+,�-$������ "&�#.���$�%�)�����- ������.������ ������ �+2����

Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 30

� ������ �+2����

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

��!,.&���� ��������/

• �����(��� �������&��3• +%-=����+$��(��0.��.��

Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 31

+%-=����+$��(��0.��.��

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

�� ��������/�1*���&�".$.�

• �������$ ���%�� - ���$���*��-1���"��%0�'�*������+.��;���� ��$#%�+:�����*���� �)�'"�*�0��-��"������#�*��1�-

Mr.Warawut Khangkhan����� 1 "#�������$��$#%����� ������ 32

�*��1�-• �������$ ���&$�� $�����'�����&$� – ���$���*��-1��

��-��1�- ��%���-�$#%�)��0�������#�-1���+2�"� *"��1• (��� ��) �*���� �������������+ – �����(%0����0�*������

��&���+@*���������"������� ������ /#/��/�&��� ������, $������/C�;�, ���"������#

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

�� ��������/�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�,�,� $% � ��� �����������"���

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

�� ��������/�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�

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

�� ��������/�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

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

�� ��������/�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���&��"������'�$� �"�