web design

78
2548 1

Upload: somboon-cheng

Post on 11-Mar-2016

218 views

Category:

Documents


1 download

DESCRIPTION

Sheet about web design

TRANSCRIPT

Page 1: Web Design

�������������� ����� ������� ������ 2548 ���� 1

Page 2: Web Design

������������ ���������������� (Sequences)

�������������� ����� ������� ������ 2548 ���� 2

Page 3: Web Design

������������ �����ก��� (Grid)

�������������� ����� ������� ������ 2548 ���� 3

Page 4: Web Design

������������ ��������������� (Hierarchies)

�������������� ����� ������� ������ 2548 ���� 4

Page 5: Web Design

������������ ������������� (Web)

�������������� ����� ������� ������ 2548 ���� 5

Page 6: Web Design

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

�������������� ����� ������� ������ 2548 ���� 6

Page 7: Web Design

��กก����!"ก��������������� ��

���������������#��/#��#�% &���'(�����#��/�)���*��

��!�" �

�����+���+�

�����+���ก

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

���ก���

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

�����������

�������������� ����� ������� ������ 2548 ���� 7

Page 8: Web Design

�������������� ����� ������� ������ 2548 ���� 8

Page 9: Web Design

�����������ก����ก���

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

• ��ก*�&'���+,'��

• ก�#��-��./�� ���$0�����

�������������� ����� ������� ������ 2548 ���� 9

Page 10: Web Design

85% (��'���&�'% ����

10% (���%���+5'�'�����+,'���� �����&'�����'

�� �.�6�����7ก(���� ก �5'�����+,'��-�������'

(��'� �!�'ก���' Download ����ก8�($

(��/'��$9�� ���:����/�,��:+5'.���&��"7�&�'��� �5!�'�ก��

/'�.����!� ��+'ก �5/�����!�ก�(��%�'�(��./�

����ก����������������

�������������� ����� ������� ������ 2548 ���� 10

Page 11: Web Design

&�������' 800 X 600 #�

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

�������������� ����� ������� ������ 2548 ���� 11

Page 12: Web Design

800 Pixels

600 Pixels

���������� 14-15 � �� ���ก������������ 800 X 600 Pixels

760 Pixels410 Pixels

842 Pixels

560 Pixels

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

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

�������������� ����� ������� ������ 2548 ���� 12

Page 13: Web Design

����������

ก������ก���

������

ก���������ก���

����������

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

�������������� ����� ������� ������ 2548 ���� 13

Page 14: Web Design

ก��ก��������������������

�������������� ����� ������� ������ 2548 ���� 14

Page 15: Web Design

ก��ก��������������������

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

�������������� ����� ������� ������ 2548 ���� 15

Page 16: Web Design

��

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

�������������� ����� ������� ������ 2548 ���� 16

Page 17: Web Design

• Layout grid

• Style

• Rhythm

• Unity

�!ก"�������#������

�������������� ����� ������� ������ 2548 ���� 17

Page 18: Web Design

�!ก"�������#������

�������������� ����� ������� ������ 2548 ���� 18

Page 19: Web Design

��� Layout ���� Grid

�����

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

• �������

• ������

• ����������

�������������� ����� ������� ������ 2548 ���� 19

Page 20: Web Design

�$�!����������� ��

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

������ ������!��

����ก�� �

!�# �$

�������������� ����� ������� ������ 2548 ���� 20

Page 21: Web Design

�$�!����������� ��

• (��% ��� �ก8� 2 ����'

• ��#���� ��( � �,�!'�����

!'�����&'�����

• "���� �ก8� 2 ���� .�� ��#����

��ก���($����� ����� �

• ��+,'�� �5.��:8�:�''กก���*

% ���. �.�ก�'����� ก��

�������������� ����� ������� ������ 2548 ���� 21

Page 22: Web Design

�!������������ ��%��%��

• ��&�'% ��

• % ���� ��� ��

• ��%'�����

• ก��� ��/�'� ���

• ��+'ก���'�ก*�

• ��+'ก&���'�ก*�

• ����&�'% ��

�������������� ����� ������� ������ 2548 ���� 22

Page 23: Web Design

�!������������ ��%��%��

� � �

�� �

• ��&�'% ��

• % ���� ��� ��

• ��%'�����

• ก��� ��/�'� ���

• ��+'ก���'�ก*�

• ��+'ก&���'�ก*�

• ����&�'% ��

�������������� ����� ������� ������ 2548 ���� 23

Page 24: Web Design

�!������������ ��%��%��

• ��&�'% ��

• % ���� ��� ��

• ��%'�����

• ก��� ��/�'� ���

• ��+'ก���'�ก*�

• ��+'ก&���'�ก*�

• ����&�'% ��

3 นิ้ว

50 – 70 วรรคตอบรรทัด

�������������� ����� ������� ������ 2548 ���� 24

Page 25: Web Design

�!������������ ��%��%��

• ��&�'% ��

• % ���� ��� ��

• ��%'����� �

• ก��� ��/�'� ���

• ��+'ก���'�ก*�

• ��+'ก&���'�ก*�

• ����&�'% ��

�������������� ����� ������� ������ 2548 ���� 25

Page 26: Web Design

�!������������ ��%��%��

• ��&�'% ��

• % ���� ��� ��

• ��%'�����

• ก��� ��/�'� ���

• ��+'ก���'�ก*�

• ��+'ก&���'�ก*�

• ����&�'% ��

�������������� ����� ������� ������ 2548 ���� 26

Page 27: Web Design

�!������������ ��%��%��

• ��&�'% ��

• % ���� ��� ��

• ��%'�����

• ก��� ��/�'� ��� �

• ��+'ก���'�ก*�

• ��+'ก&���'�ก*�

• ����&�'% ��

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

Page 28: Web Design

�!������������ ��%��%��

• ��&�'% ��

• % ���� ��� ��

• ��%'�����

• ก��� ��/�'� ���

• ��+'ก���'�ก*�

• ��+'ก&���'�ก*�

• ����&�'% ��

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 (&nbsp;) 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

Page 29: Web Design

�!������������ ��%��%��

• ��&�'% ��

• % ���� ��� ��

• ��%'�����

• ก��� ��/�'� ���

• ��+'ก���'�ก*�

• ��+'ก&���'�ก*�

• ����&�'% ��

�������������� ����� ������� ������ 2548 ���� 29

Page 30: Web Design

�!������������ ��%��%��

�����ก���������� ก��

% � ก&�� ��� Angsana� ��ก�������� Cordia

� ��ก�������� � Browallia

% '�ก*����%����� Eucrosia% ��ก������� Freesia– ��ก������� Iris

�����ก������������� ก��

– ��ก������ Jasmine

– ��ก��ก���� Kodchiang

– ��ก������� Lily

– อักษรทาโฮมา Tahoma

�������������� ����� ������� ������ 2548 ���� 30

Page 31: Web Design

�!������������ ��%��%��

• ��&�'% ��

• % ���� ��� ��

• ��%'�����

• ก��� ��/�'� ���

• ��+'ก���'�ก*�

• ��+'ก&���'�ก*� �

• ����&�'% ��

�������������� ����� ������� ������ 2548 ���� 31

Page 32: Web Design

�!������������ ��%��%��

• ��&�'% ��

• % ���� ��� ��

• ��%'�����

• ก��� ��/�'� ���

• ��+'ก���'�ก*�

• ��+'ก&���'�ก*�

• ����&�'% ��

�������������� ����� ������� ������ 2548 ���� 32

Page 33: Web Design

�!������������ ��%��%��

Italics ��ก������

Bold �#ก%�&#����

Underlined '�ก*�&������.!�

Colored text !� '�ก*���

CAPITAL LETTERS !� :8�:�.�6�

Spacing and indentation � �� ��%����'����

• ��&�'% ��

• % ���� ��� ��

• ��%'�����

• ก��� ��/�'� ���

• ��+'ก���'�ก*�

• ��+'ก&���'�ก*�

• ����&�'% ��

�������������� ����� ������� ������ 2548 ���� 33

Page 34: Web Design

&�"'(�(��� �!�������� ���'��

Color wheel

�������������� ����� ������� ������ 2548 ���� 34

Page 35: Web Design

&�"'(�(��� �!�������������&�,� �5 1

Primary colors

�������������� ����� ������� ������ 2548 ���� 35

Page 36: Web Design

&�"'(�(��� �!�������������&�,� �5 2

Secondary colors

�������������� ����� ������� ������ 2548 ���� 36

Page 37: Web Design

&�"'(�(��� �!�������������&�,� �5 3

Tertiary colors

�������������� ����� ������� ������ 2548 ���� 37

Page 38: Web Design

&�"'(�(��� �!��������

Complementary

Analogous

�������������� ����� ������� ������ 2548 ���� 38

Page 39: Web Design

&�"'(�(��� �!��������

Triad

Analogous

�������������� ����� ������� ������ 2548 ���� 39

Page 40: Web Design

&�"'(�(��� �!��������

Rectangle

Square

�������������� ����� ������� ������ 2548 ���� 40

Page 41: Web Design

&�"'(�(��� �!��������

�%�������&'���Hue, Saturation, Lightness

�������������� ����� ������� ������ 2548 ���� 41

Page 42: Web Design

&�"'(�(��� �!��������

Tints �:85���&�

Shades �:85������

Tones �:85���� �

ก��$�������&'���

�������������� ����� ������� ������ 2548 ���� 42

Page 43: Web Design

&�"'(�(��� �!��������

ก����+'ก./���

�������������� ����� ������� ������ 2548 ���� 43

Page 44: Web Design

&�"'(�(��� �!��������

ก����+'ก./���

�������������� ����� ������� ������ 2548 ���� 44

Page 45: Web Design

&�"'(�(��� �!��������

ก����+'ก./���

�������������� ����� ������� ������ 2548 ���� 45

Page 46: Web Design

&�"'(�(��� �!��������

"Browser-safe" colors

Standard of colors palette

"������!�>��

�������������� ����� ������� ������ 2548 ���� 46

Page 47: Web Design

ก������)*&(#�%��

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

Page 48: Web Design

ก������)*&(#�%��

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

Page 49: Web Design

����������!�ก!

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

Page 50: Web Design

����������!�ก!

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

Page 51: Web Design

����������!�ก!

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

Page 52: Web Design

����������!�ก!

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

Page 53: Web Design

����!ก��������

ก��%��&��.���������� ��.����#*��%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

Page 54: Web Design

ก�����ก��+,ก

ก��G9ก/� �.��•� �������.

•���8�% ���&��.

�������������� ����� ������� ������ 2548 ���� 54

Page 55: Web Design

ก�����ก��+,ก

/�8�&'�ก��G9กJPG – GIF – PNG

• F�:"��� Photographic

• F�: �� Drawing

• F�:�-�F��8 Chart

• F�:��6��ก*�� Symbolic

�������������� ����� ������� ������ 2548 ���� 55

Page 56: Web Design

ก�����ก��+,ก

• F�:"��� Photographic

• F�: �� Drawing

• F�:�-�F��8 Chart

• F�:��6��ก*�� Symbolic

/�8�&'�ก��G9กJPG – GIF – PNG

�������������� ����� ������� ������ 2548 ���� 56

Page 57: Web Design

ก�����ก��+,ก

• F�:"��� Photographic

• F�: �� Drawing

• F�:�-�F��8 Chart

• F�:��6��ก*�� Symbolic

/�8�&'�ก��G9กJPG – GIF – PNG

�������������� ����� ������� ������ 2548 ���� 57

Page 58: Web Design

ก�����ก��+,ก

• F�:"��� Photographic

• F�: �� Drawing

• F�:�-�F��8 Chart

• F�:��6��ก*�� Symbolic

/�8�&'�ก��G9กJPG – GIF – PNG

�������������� ����� ������� ������ 2548 ���� 58

Page 59: Web Design

ก�������(��-�$ก��

Audio

• ��$�����8�• �������������� 56�...

• ?�����8�$���ก��?�

• 6$������@D�8�ก�� ��Cก

�������������� ����� ������� ������ 2548 ���� 59

Page 60: Web Design

ก������(��&!./

Video

• C� E �����8�

• ���������B$8� 56�..• 6$��������? $

�������������� ����� ������� ������ 2548 ���� 60

Page 61: Web Design

-0��ก!ก����(#����

ก��!'��(�!'���� ��!��(���) *�"��� +�...

���!�-$���*��.-/!��(�0�(*�"���!12�

�������������� ����� ������� ������ 2548 ���� 61

Page 62: Web Design

�!��)*� ��-1����%��2

• ?��� ���

• ?�����ก��?�

• ������

• �B$8����

�������������� ����� ������� ������ 2548 ���� 62

Page 63: Web Design

ก��� � !��������!����

• C� E �����8�

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

• ���6FE$���

�������������� ����� ������� ������ 2548 ���� 63

Page 64: Web Design

�������������� ����� ������� ������ 2548 ���� 64

Page 65: Web Design

Navigation & User interface

!"#���กUser Center

�������������� ����� ������� ������ 2548 ���� 65

Page 66: Web Design

Navigation & User interface

%��&��'��(�#�ก��sense of context

�������������� ����� ������� ������ 2548 ���� 66

Page 67: Web Design

Navigation & User interface

�)����ก*'�������������+�����#�"���,��

�������������� ����� ������� ������ 2548 ���� 67

Page 68: Web Design

Navigation & User interface

'����'����*�./��*��!�'�

���*'�'��0'� �+(#���1#�����

�������������� ����� ������� ������ 2548 ���� 68

Page 69: Web Design

Navigation & User interface

�'�� �+��(�#����2�%��#���03�����"4#�� �+(�#�ก��0��

�������������� ����� ������� ������ 2548 ���� 69

Page 70: Web Design

Navigation & User interface

(�#�0��������/�•��.���•Dead end

�������������� ����� ������� ������ 2548 ���� 70

Page 71: Web Design

Navigation & User interface

��ก����� �� �+•&������������ •�1��/����•/&� Text - Graphic

�������������� ����� ������� ������ 2548 ���� 71

Page 72: Web Design

Navigation & User interface

/&�ก����� �������8����� - !#�����

�������������� ����� ������� ������ 2548 ���� 72

Page 73: Web Design

Navigation & User interface

��8�����-!#�������'� Button bars

�������������� ����� ������� ������ 2548 ���� 73

Page 74: Web Design

Navigation & User interface

�1��!)�1�#������*�8ก0���ก8� 2 *��4�

/&��'������ก0���ก8�*��4�� 10 '8�� �

�������������� ����� ������� ������ 2548 ���� 74

Page 75: Web Design

Navigation & User interface

��ก�������

���� ��������ก��

�������������� ����� ������� ������ 2548 ���� 75

Page 76: Web Design

Navigation & User interface

/���� Feedback��/��%��/&�0��(8�(�#ก�� Webmaster

�������������� ����� ������� ������ 2548 ���� 76

Page 77: Web Design

Navigation & User interface

&�'���� ����'�•Site Map

•Search engine

�������������� ����� ������� ������ 2548 ���� 77

Page 78: Web Design

Navigation & User interface

�#ก(������������ ����'�

Header - Footer

�������������� ����� ������� ������ 2548 ���� 78