web design
DESCRIPTION
Sheet about web designTRANSCRIPT
�������������� ����� ������� ������ 2548 ���� 1
������������ ���������������� (Sequences)
�������������� ����� ������� ������ 2548 ���� 2
������������ �����ก��� (Grid)
�������������� ����� ������� ������ 2548 ���� 3
������������ ��������������� (Hierarchies)
�������������� ����� ������� ������ 2548 ���� 4
������������ ������������� (Web)
�������������� ����� ������� ������ 2548 ���� 5
������������ ������������
�������������� ����� ������� ������ 2548 ���� 6
��กก����!"ก��������������� ��
���������������#��/#��#�% &���'(�����#��/�)���*��
��!�" �
�����+���+�
�����+���ก
��������������
���ก���
�������������
�����������
�������������� ����� ������� ������ 2548 ���� 7
�������������� ����� ������� ������ 2548 ���� 8
�����������ก����ก���
• �!"#$���%�&'�� ��(�!�
• ��ก*�&'���+,'��
• ก�#��-��./�� ���$0�����
�������������� ����� ������� ������ 2548 ���� 9
85% (��'���&�'% ����
10% (���%���+5'�'�����+,'���� �����&'�����'
�� �.�6�����7ก(���� ก �5'�����+,'��-�������'
(��'� �!�'ก���' Download ����ก8�($
(��/'��$9�� ���:����/�,��:+5'.���&��"7�&�'��� �5!�'�ก��
/'�.����!� ��+'ก �5/�����!�ก�(��%�'�(��./�
����ก����������������
�������������� ����� ������� ������ 2548 ���� 10
&�������' 800 X 600 #�
��������������
�������������� ����� ������� ������ 2548 ���� 11
800 Pixels
600 Pixels
���������� 14-15 � �� ���ก������������ 800 X 600 Pixels
760 Pixels410 Pixels
842 Pixels
560 Pixels
���������� ������
��������������
�������������� ����� ������� ������ 2548 ���� 12
����������
ก������ก���
������
ก���������ก���
����������
��������������
�������������� ����� ������� ������ 2548 ���� 13
ก��ก��������������������
�������������� ����� ������� ������ 2548 ���� 14
ก��ก��������������������
��������� ������� � !� ���"���#�!�$���
�������������� ����� ������� ������ 2548 ���� 15
��
����������� � ������
�������������� ����� ������� ������ 2548 ���� 16
• Layout grid
• Style
• Rhythm
• Unity
�!ก"�������#������
�������������� ����� ������� ������ 2548 ���� 17
�!ก"�������#������
�������������� ����� ������� ������ 2548 ���� 18
��� Layout ���� Grid
�����
• �����������
• �������
• ������
• ����������
�������������� ����� ������� ������ 2548 ���� 19
�$�!����������� ��
������������
������ ������!��
����ก�� �
!�# �$
�������������� ����� ������� ������ 2548 ���� 20
�$�!����������� ��
• (��% ��� �ก8� 2 ����'
• ��#���� ��( � �,�!'�����
!'�����&'�����
• "���� �ก8� 2 ���� .�� ��#����
��ก���($����� ����� �
• ��+,'�� �5.��:8�:�''กก���*
% ���. �.�ก�'����� ก��
�������������� ����� ������� ������ 2548 ���� 21
�!������������ ��%��%��
• ��&�'% ��
• % ���� ��� ��
• ��%'�����
• ก��� ��/�'� ���
• ��+'ก���'�ก*�
• ��+'ก&���'�ก*�
• ����&�'% ��
�������������� ����� ������� ������ 2548 ���� 22
�!������������ ��%��%��
� � �
�� �
• ��&�'% ��
• % ���� ��� ��
• ��%'�����
• ก��� ��/�'� ���
• ��+'ก���'�ก*�
• ��+'ก&���'�ก*�
• ����&�'% ��
�������������� ����� ������� ������ 2548 ���� 23
�!������������ ��%��%��
• ��&�'% ��
• % ���� ��� ��
• ��%'�����
• ก��� ��/�'� ���
• ��+'ก���'�ก*�
• ��+'ก&���'�ก*�
• ����&�'% ��
3 นิ้ว
50 – 70 วรรคตอบรรทัด
�������������� ����� ������� ������ 2548 ���� 24
�!������������ ��%��%��
• ��&�'% ��
• % ���� ��� ��
• ��%'����� �
• ก��� ��/�'� ���
• ��+'ก���'�ก*�
• ��+'ก&���'�ก*�
• ����&�'% ��
�������������� ����� ������� ������ 2548 ���� 25
�!������������ ��%��%��
• ��&�'% ��
• % ���� ��� ��
• ��%'�����
• ก��� ��/�'� ���
• ��+'ก���'�ก*�
• ��+'ก&���'�ก*�
• ����&�'% ��
�������������� ����� ������� ������ 2548 ���� 26
�!������������ ��%��%��
• ��&�'% ��
• % ���� ��� ��
• ��%'�����
• ก��� ��/�'� ��� �
• ��+'ก���'�ก*�
• ��+'ก&���'�ก*�
• ����&�'% ��
There are two major schools of thought on denoting paragraphs.
The classic typographic method uses indents to signal the beginning of
a new paragraph (as we have in this book). However, many technical,
reference, and trade publications now use a blank line of white space to
separate paragraphs. Indented paragraphs work especially well for
longer blocks of prose, where the indents signal new paragraphs with
minimal disruption to the flow of text. Blank line spacing between
paragraphs, in contrast, makes a page easy to scan and provides extra
white space for visual relief. Either approach is valid as long as the
paragraph style is implemented consistently throughout the site.
To indent paragraphs without using CSS, you can insert several
non-breaking space characters ( ) at the start of each paragraph.
You can also use a transparent single-pixel GIF graphic as a spacer
and adjust its horizontal spacing. If you are using CSS you can set the
exact spacing for the indentation using the "text-indent" property of
paragraphs.
To separate paragraphs with blank lines you could put a
paragraph tag (<P>) at the end of each paragraph. The paragraph tag
adds a full blank line between paragraphs. To adjust the amount to an
amount less or more than a full blank line you can use the CSS
"margin" property, but beware of spacing inconsistencies between
browsers. You can also use the line break tag (<BR>) followed by a
transparent single-pixel GIF graphic as a spacer to control the space
between paragraphs. As always when using a spacer graphic, be sure
to include empty ALT text to hide the image from assistive technologies
and text only browsers:
��$� $�������$
�������������� ����� ������� ������ 2548 ���� 27
�!������������ ��%��%��
• ��&�'% ��
• % ���� ��� ��
• ��%'�����
• ก��� ��/�'� ���
• ��+'ก���'�ก*�
• ��+'ก&���'�ก*�
• ����&�'% ��
There are two major schools of thought on denoting paragraphs. The
classic typographic method uses indents to signal the beginning of a
new paragraph (as we have in this book). However, many technical,
reference, and trade publications now use a blank line of white space to
separate paragraphs. Indented paragraphs work especially well for
longer blocks of prose, where the indents signal new paragraphs with
minimal disruption to the flow of text. Blank line spacing between
paragraphs, in contrast, makes a page easy to scan and provides extra
white space for visual relief. Either approach is valid as long as the
paragraph style is implemented consistently throughout the site.
To indent paragraphs without using CSS, you can insert several non-
breaking space characters ( ) at the start of each paragraph. You
can also use a transparent single-pixel GIF graphic as a spacer and
adjust its horizontal spacing. If you are using CSS you can set the
exact spacing for the indentation using the "text-indent" property of
paragraphs.
To separate paragraphs with blank lines you could put a paragraph tag
(<P>) at the end of each paragraph. The paragraph tag adds a full
blank line between paragraphs. To adjust the amount to an amount
less or more than a full blank line you can use the CSS "margin"
property, but beware of spacing inconsistencies between browsers.
You can also use the line break tag (<BR>) followed by a transparent
single-pixel GIF graphic as a spacer to control the space between
paragraphs. As always when using a spacer graphic, be sure to include
empty ALT text to hide the image from assistive technologies and text
only browsers:
��$� $������ ���
�������������� ����� ������� ������ 2548 ���� 28
�!������������ ��%��%��
• ��&�'% ��
• % ���� ��� ��
• ��%'�����
• ก��� ��/�'� ���
• ��+'ก���'�ก*�
• ��+'ก&���'�ก*�
• ����&�'% ��
�������������� ����� ������� ������ 2548 ���� 29
�!������������ ��%��%��
�����ก���������� ก��
% � ก&�� ��� Angsana� ��ก�������� Cordia
� ��ก�������� � Browallia
% '�ก*����%����� Eucrosia% ��ก������� Freesia– ��ก������� Iris
�����ก������������� ก��
– ��ก������ Jasmine
– ��ก��ก���� Kodchiang
– ��ก������� Lily
– อักษรทาโฮมา Tahoma
�������������� ����� ������� ������ 2548 ���� 30
�!������������ ��%��%��
• ��&�'% ��
• % ���� ��� ��
• ��%'�����
• ก��� ��/�'� ���
• ��+'ก���'�ก*�
• ��+'ก&���'�ก*� �
• ����&�'% ��
�������������� ����� ������� ������ 2548 ���� 31
�!������������ ��%��%��
• ��&�'% ��
• % ���� ��� ��
• ��%'�����
• ก��� ��/�'� ���
• ��+'ก���'�ก*�
• ��+'ก&���'�ก*�
• ����&�'% ��
�������������� ����� ������� ������ 2548 ���� 32
�!������������ ��%��%��
Italics ��ก������
Bold �#ก%�&#����
Underlined '�ก*�&������.!�
Colored text !� '�ก*���
CAPITAL LETTERS !� :8�:�.�6�
Spacing and indentation � �� ��%����'����
• ��&�'% ��
• % ���� ��� ��
• ��%'�����
• ก��� ��/�'� ���
• ��+'ก���'�ก*�
• ��+'ก&���'�ก*�
• ����&�'% ��
�������������� ����� ������� ������ 2548 ���� 33
&�"'(�(��� �!�������� ���'��
Color wheel
�������������� ����� ������� ������ 2548 ���� 34
&�"'(�(��� �!�������������&�,� �5 1
Primary colors
�������������� ����� ������� ������ 2548 ���� 35
&�"'(�(��� �!�������������&�,� �5 2
Secondary colors
�������������� ����� ������� ������ 2548 ���� 36
&�"'(�(��� �!�������������&�,� �5 3
Tertiary colors
�������������� ����� ������� ������ 2548 ���� 37
&�"'(�(��� �!��������
Complementary
Analogous
�������������� ����� ������� ������ 2548 ���� 38
&�"'(�(��� �!��������
Triad
Analogous
�������������� ����� ������� ������ 2548 ���� 39
&�"'(�(��� �!��������
Rectangle
Square
�������������� ����� ������� ������ 2548 ���� 40
&�"'(�(��� �!��������
�%�������&'���Hue, Saturation, Lightness
�������������� ����� ������� ������ 2548 ���� 41
&�"'(�(��� �!��������
Tints �:85���&�
Shades �:85������
Tones �:85���� �
ก��$�������&'���
�������������� ����� ������� ������ 2548 ���� 42
&�"'(�(��� �!��������
ก����+'ก./���
�������������� ����� ������� ������ 2548 ���� 43
&�"'(�(��� �!��������
ก����+'ก./���
�������������� ����� ������� ������ 2548 ���� 44
&�"'(�(��� �!��������
ก����+'ก./���
�������������� ����� ������� ������ 2548 ���� 45
&�"'(�(��� �!��������
"Browser-safe" colors
Standard of colors palette
"������!�>��
�������������� ����� ������� ������ 2548 ���� 46
ก������)*&(#�%��
ก�����5�6��78�����ก��� �.:. ;<=> � ������ก���������6��?��&@������5�$���� 56�กA���!#�8�$ก �ก�����5�6��7�����ก ก�����8�����6��?��&@������ ��������5�6��7�����ก6 ��56�����5�กB��ก�?��&@���������#���C�����8 ������C��
� �� ����:+5'•��ก$�������+,'��•��% ��'7�'��•����% ����.
�������������� ����� ������� ������ 2548 ���� 47
ก������)*&(#�%��
ก�����5�6��78�����ก����.:. ;<=> � ������ก���������6��?��&@������5�$����56�กA���!#�8�$ก �ก�����5�6��7�����ก
ก�����8�����6��?��&@��������������5�6��7�����ก6 ��56�����5�กB��ก�?��&@���������#���C�
����8 ������C��
� �� ����:+5'•��ก$�������+,'��•��% ��'7�'��•����% ����.
�������������� ����� ������� ������ 2548 ���� 48
����������!�ก!
Exciting HeadlineWants pawn term dare would tilde gull hoe that
search putty holler. Guilty is does nothing. Looks
lift inner ladle cordage saturated shirt orphan toe
hot all. Do wimple teem the nothing of some hot
phone coffee. Otter pop in the toaster can tack
of allowing . We do of not booklet shimmer in the
golden dawn
!��ก���:+5'•�7�% ����.
•ก���+5'% �� �5/����
�������������� ����� ������� ������ 2548 ���� 49
����������!�ก!
Exciting HeadlineWants pawn term dare would tilde gull hoe that
search putty holler. Guilty is does nothing. Looks
lift inner ladle cordage saturated shirt orphan toe
hot all. Do wimple teem the nothing of some hot
phone coffee. Otter pop in the toaster can tack
of allowing . We do of not booklet shimmer in the
golden dawn
!��ก���:+5'•�7�% ����.
•ก���+5'% �� �5/����
�������������� ����� ������� ������ 2548 ���� 50
����������!�ก!
Exciting HeadlineWants pawn term dare would tilde gull hoe that
search putty holler. Guilty is does nothing. Looks
lift inner ladle cordage saturated shirt orphan toe
hot all. Do wimple teem the nothing of some hot
phone coffee. Otter pop in the toaster can tack
of allowing . We do of not booklet shimmer in the
golden dawn
!��ก���:+5'•�7�% ����.
•ก���+5'% �� �5/����
�������������� ����� ������� ������ 2548 ���� 51
����������!�ก!
Exciting HeadlineWants pawn term dare would tilde gull hoe that
search putty holler. Guilty is does nothing. Looks
lift inner ladle cordage saturated shirt orphan toe
hot all. Do wimple teem the nothing of some hot
phone coffee. Otter pop in the toaster can tack
of allowing . We do of not booklet shimmer in the
golden dawn
!��ก���:+5'•�7�% ����.
•ก���+5'% �� �5/����
�������������� ����� ������� ������ 2548 ���� 52
����!ก��������
ก��%��&��.���������� ��.����#*��%8�$��8*>�!� ��& �:+5'./�.�ก��%8���&��%8������ก�����8������ ��ก���*�:+5'./����� 7ก ก��%8���&��85�!���� �ก��./�'#$ก������� ? %+' �8, �+' ก�'��8� ก85�(�����ก? �$�+'ก�'� ����ก$@�
!�'��(��:�A��&7,��$B� "ก����%8���&" ����+5'$����2,600 $Dก�'�%�8�!�E�ก��/ /� ��(��$��8*>� "��ก%8�" &7,�
�$B� �5�8��./��:��������� #ก ����, F�������ก��,�ก�(����ก��$��8*>��%�+5'�� ก��&��%8���&&7,�'�ก�������
����8��!'����(��'� �ก��������ก�"��������ก
./�!�����:+5'•��������&�'% ��•% �%#�% ��ก ���
�������������� ����� ������� ������ 2548 ���� 53
ก�����ก��+,ก
ก��G9ก/� �.��•� �������.
•���8�% ���&��.
�������������� ����� ������� ������ 2548 ���� 54
ก�����ก��+,ก
/�8�&'�ก��G9กJPG – GIF – PNG
• F�:"��� Photographic
• F�: �� Drawing
• F�:�-�F��8 Chart
• F�:��6��ก*�� Symbolic
�������������� ����� ������� ������ 2548 ���� 55
ก�����ก��+,ก
• F�:"��� Photographic
• F�: �� Drawing
• F�:�-�F��8 Chart
• F�:��6��ก*�� Symbolic
/�8�&'�ก��G9กJPG – GIF – PNG
�������������� ����� ������� ������ 2548 ���� 56
ก�����ก��+,ก
• F�:"��� Photographic
• F�: �� Drawing
• F�:�-�F��8 Chart
• F�:��6��ก*�� Symbolic
/�8�&'�ก��G9กJPG – GIF – PNG
�������������� ����� ������� ������ 2548 ���� 57
ก�����ก��+,ก
• F�:"��� Photographic
• F�: �� Drawing
• F�:�-�F��8 Chart
• F�:��6��ก*�� Symbolic
/�8�&'�ก��G9กJPG – GIF – PNG
�������������� ����� ������� ������ 2548 ���� 58
ก�������(��-�$ก��
Audio
• ��$�����8�• �������������� 56�...
• ?�����8�$���ก��?�
• 6$������@D�8�ก�� ��Cก
�������������� ����� ������� ������ 2548 ���� 59
ก������(��&!./
Video
• C� E �����8�
• ���������B$8� 56�..• 6$��������? $
�������������� ����� ������� ������ 2548 ���� 60
-0��ก!ก����(#����
ก��!'��(�!'���� ��!��(���) *�"��� +�...
���!�-$���*��.-/!��(�0�(*�"���!12�
�������������� ����� ������� ������ 2548 ���� 61
�!��)*� ��-1����%��2
• ?��� ���
• ?�����ก��?�
• ������
• �B$8����
�������������� ����� ������� ������ 2548 ���� 62
ก��� � !��������!����
• C� E �����8�
• ��������������
• ���6FE$���
�������������� ����� ������� ������ 2548 ���� 63
�������������� ����� ������� ������ 2548 ���� 64
Navigation & User interface
!"#���กUser Center
�������������� ����� ������� ������ 2548 ���� 65
Navigation & User interface
%��&��'��(�#�ก��sense of context
�������������� ����� ������� ������ 2548 ���� 66
Navigation & User interface
�)����ก*'�������������+�����#�"���,��
�������������� ����� ������� ������ 2548 ���� 67
Navigation & User interface
'����'����*�./��*��!�'�
���*'�'��0'� �+(#���1#�����
�������������� ����� ������� ������ 2548 ���� 68
Navigation & User interface
�'�� �+��(�#����2�%��#���03�����"4#�� �+(�#�ก��0��
�������������� ����� ������� ������ 2548 ���� 69
Navigation & User interface
(�#�0��������/�•��.���•Dead end
�������������� ����� ������� ������ 2548 ���� 70
Navigation & User interface
��ก����� �� �+•&������������ •�1��/����•/&� Text - Graphic
�������������� ����� ������� ������ 2548 ���� 71
Navigation & User interface
/&�ก����� �������8����� - !#�����
�������������� ����� ������� ������ 2548 ���� 72
Navigation & User interface
��8�����-!#�������'� Button bars
�������������� ����� ������� ������ 2548 ���� 73
Navigation & User interface
�1��!)�1�#������*�8ก0���ก8� 2 *��4�
/&��'������ก0���ก8�*��4�� 10 '8�� �
�������������� ����� ������� ������ 2548 ���� 74
Navigation & User interface
��ก�������
���� ��������ก��
�������������� ����� ������� ������ 2548 ���� 75
Navigation & User interface
/���� Feedback��/��%��/&�0��(8�(�#ก�� Webmaster
�������������� ����� ������� ������ 2548 ���� 76
Navigation & User interface
&�'���� ����'�•Site Map
•Search engine
�������������� ����� ������� ������ 2548 ���� 77
Navigation & User interface
�#ก(������������ ����'�
Header - Footer
�������������� ����� ������� ������ 2548 ���� 78