50
กก Dreamweaver Macromedia Dreamweaver กก ก HTML ก Dreamweaver กก Dreamweaver กก กก กก กก HTML กก ก CSS (Cascading Style Sheet) JavaScript , XML Flash Dreamweaver

Dreamweaver Basic

Embed Size (px)

DESCRIPTION

What is Dreamweaver, Dreamweaver

Citation preview

Page 1: Dreamweaver Basic

ก����������ก�� Dreamweaver

������������� !"���ก�� � Macromedia Dreamweaver ��������ก�����������ก������ �!���"#�$%&' ()"*ก����)�+

�"#�� ,����"#��� �-�./�0� &10ก����+����&10�-*��������)�+�"#�$%&'2��3,,4��� ��50�+,�ก2/)+��+6�* �(*��������7&10,�,�("�+8)�."�� �9�:� ;���+8)��9� ���<��'� =�= �+$�2��"#�� ,$()�*6�++6�*(�*�(*$�6,������;)�+2/)�.)( HTML %A0+�18�B�;��*46+*�ก���%��%)�� &��2�)�1��ก��C-( ��($()+6�* 2� Dreamweaver �1�.�50�+�5���ก��*2�)2/)2�ก�� �!���"#�$()�*6�+�"(��#" �"*+�� ����1����-&D-:� �9+

� Dreamweaver �1�.�50�+�5�2�ก��,�(ก�������-����"#�$%&' &10/6"*2�)���,�(ก��ก��$%&'���$<�'&10�ก10*"8)�+ก��$%&'8�+��� �/6� ��)�+ �� *)�* ������10*�/50�$<�'����;)� ��ก,�ก�1B*�+�1�.�50�+�5�2�ก���� ���($<�'8�+���8AB��"#��%-�'<�"��'� 50��C*� �68)��9��96�-��;��'��#;$()�(*;�+

� 2��"#�� ,��ก,�ก,��1�.)(:�E� HTML ��)" 2��3,,4����"#�� ,,��1ก���;);��ก��C9)2/)$() %A0+,�;)�+��F�*�&.����*1�50�G�����-� � 50�2�)ก��������8)��9��1����-&D-:� �&.����*1���6��1B$()�ก6 CSS (Cascading Style Sheet) :�E� JavaScript , :�E� XML ������;-�1�(1* Flash ����;)� %A0+ Dreamweaver $()������4��&.����*1;6�+G���6��1B�*6�+���9�X'���

Page 2: Dreamweaver Basic

ก��#$%��ก�� ก����Y(����ก�� Dreamweaver &��$()�(* 1. .�-ก&10�4\� Start 8�+"-��("�' ,�ก��B���50��$�&10 Programs ��5�ก Macromedia ���.�-ก&10

Macromedia Dreamweaver MX 2. ,����ก_��)�;6�+G�1B2�)��5�ก"6�;)�+ก����)�;�2�ก��2/)+������ก�����$�� ,����

Dreamweaver MX ��5���� �"��'/�0� 4 (2�ก�X1��Y(.��B+��ก) 3. ,�ก��B�,����ก_��)�;6�+ Welcome 8AB���2�)��5�ก��1*��9)ก��&��+��ก�� Dreamweaver 2�

��"8)�;6�+G(7)�$�6;)�+ก����1*��9)ก#.�-ก&10�4\� Close � 50��Y(��)�;6�+$�) 4. ,�ก��B�,��8)� 5B�&10ก��&��+��8�+����ก�� Dreamweaver MX

�&���'ก"�!"���ก��

���%�( Document ���%�( Document .5��6"�&10,�2�6��5B������,�(�+.'���ก��8�+�"#�� ,�+$� ก��2/)+��

"-��("'�1B,�.�)�*ก��ก��2/)+���"-�'(����%��%��'&�0"$� .5�ก�� -� '8)�."�� 2�6�9�:� ��)�+;���+8)��9� �(*��5B���;6�+G&10�&�ก�+$�,����ก_2�)��#�.�)�*ก��&10���ก_2����"�"��' *ก�")�8)��9�

Page 3: Dreamweaver Basic

��+�*6�+ �/6� :� �.�50��$�" ��5� Movie Flash (�;6������� Flash ��������7.�-ก&10�4\� Play ��6�:� �.�50��$�"$()

"-��("' Document �1�4���+2�ก��&��+�� 3 �4���+ .5� 1. �4���+��ก��� (Design View) 2. �4���+�.)( HTML(Code View) 3. �4���+�.)(�����ก���(Code & Design View)

2�ก��&��+��ก���4���+;6�+G &��2�)ก����)�+�"#�� ,��("ก�"(��#" � ��������7&10,�&��+��$()���*"-D1����ก��$�;��."���������

����"�""ก���

Page 4: Dreamweaver Basic

����"���%

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

Page 5: Dreamweaver Basic

Insert bar

Page 6: Dreamweaver Basic
Page 7: Dreamweaver Basic
Page 8: Dreamweaver Basic

Panel �&��4

ก( F4 � 50�%6����5���(+Panel

Page 9: Dreamweaver Basic

ก����%��5��'��6�7� �8 Dreamweaver MX ��������ก��&10$�6$()������4�:�E�$&*�(*;�+ f���B��"��;-(;�B+

����ก����)"��-0�2/)+����* ,���#�"6��"�� -� ':�E�$&*�+$�2��"#�� ,,��6��$�6��ก (�;62����"�%��',��6����ก) �;6���$�6;)�+;ก2,� ��������7&10,�;-(;�B+;�"/6"*���5�:�E�$&*$()(Dreamweaver MX Thai Addon) &��2�)ก��2/):�E�$&*$�6�1�3h���1ก;6�$� �;6;)�+$�(�"�'���($<�',�ก�-��;��'��#;&10�"#�$%&' Thaiware.com ��5��"#�$%&' marianasgraphix.com ��5�,��8)�$�&10 google.com ,�ก��B� Search ��.��"6� Dreamweaver MX �����+"6��1�"#�$%&'2�)(�"�'���(��ก��* ���+,�ก(�"�'���(����)"ก#;-(;�B+� -0��+$�&10�<��(��'(1<��;'8�+����ก��.5� C:\Program Files\Macromedia\Dreamweaver MX\Configuration\ (����ก����5�ก2�)�*96��)") ���+,�ก��B�ก#�����72/):�E�$&*$()��)"

Dreamweaver MX Thai Addon �1.4X����;-(�+�1B � � -0�ก���8)����� (Encoding) ��� windows-874 ��� tis-620 ��������"#�� ,:�E�$&* � &��2�)�����7��(+C���� -� ':�E�$&*2� ����;6�+G � �ก)$8ก����(+C�:�E�$&*;�����92�)2�h68AB�

ก������@�""ก���#�A� B�( 1. กE�F�%#G�F��8!"�#�A� B�(Dreamweaver MX

� 50�&10,�$() �!���"#�$%&'$();�+ก��."��;)�+ก�� ���&��2�)&���7A+��5B��� ����.�50�+�5�&10,�2/)2�ก�� �!���"#�$%&' 2. กE�F�%ก.�&�#G�F��8!"�@I�#!���� ก��ก����(ก�46���s����*&10,��8)���/��"#�$%&' � 50�&10,�$()��ก����"#�� ,$()������� ก����5�ก:�E���� Interface &10,�2/);-(;6�ก��C9)/� ����;)� 3. K�%��������#�A� B�( ก��,�(�.�+��)�+� 50�&10���,�$(),�(�ก#�$<�' HTML ,$<�'�9�:� ����+.'���ก���50�G2�)������"(��96 �(*��)�+&10�ก#�����"��"�$<�' � 50�&10,�$().���+6�*���$�6�ก#�$<�'%B��%)��ก�� �����("ก�������"�� Upload $<�'8AB��"#��%-�'<�"��' 4. ""ก�������&��F.�ก!"�#�A� B�( ���;)�+ก��2�)�"#�$%&'��ก���9����2( ,�("�+�+.'���ก�����$�� �;6����)�;)�+�1��$��)�+&10�����+.'���ก�����ก �/6� ���ก)ก��<Yก ��"-�ก/�0����' ��5��-+.'&10,��/50���*+$�*�+��)����ก ����;)� �(*"�(��ก�������.�+�6�+.�6�"G

Page 10: Dreamweaver Basic

5. กE�F�% Dreamweaver Site 2� Dreamweaver ,��1�.�50�+�5�&102/)2�ก����)�+���,�(ก��ก���"#�$%&'8�+��� �(*,��"��"�$<�'&102/)2�ก����)�+�"#�$%&' ���.�*;�",����-+.'&10�/50���*+*�+�"#�� ,;6�+G��50��1ก���ก)$8$<�'

ก��������.'�ก� !#�A� B�( �-0+&10;)�+&�������*6�+��ก2�ก�� �!���"#�$%&'()"* Dreamweaver .5� ก����)�+ Dreamweaver

Site ก6�� � 50�&10,�ก����(/50��"#�$%&'������4�<��(��'&102/)2�ก���ก#�$<�'8�+��� Dreamweaver Site �1 3 �6"�()"*ก��.5�

1. Local Folder ����$(��#ก&��10&10�ก#��"#�$%&'&10�����)�+8AB�:�*2��.�50�+.�� -"�;��'8�+�����+ %A0+ Dreamweaver ,���1*ก"6� Local Site

2. Remote Folder ����$(��#ก&��10&102/)�ก#�����C*� �6�"#�$%&'&10�*96���"#��%-�'<�"��' %A0+ Dreamweaver ��1*ก"6� Remote Site

3. Folder For Dynamic Page ����$(��#ก&��10&102/)2�ก��,�(�ก#��������"�C� Dynamic Page ��5��"#�� ,&10�1ก��2/) Server Side Script &10��)�+8AB�:�*2��"#�$%&'8�+���

2���5B�+;)�7)�*�+$�6�1�"#��%-�'<�"��'&10,�2/)�ก#�����C*� �6�"#�$%&' ก#�����7&10,���)�+ Local Site ก6�� ���+,�ก&10�"#�$%&'8�+������#,���9�X'�1�"#��%-�'<�"��'��)" ,A+.6�*ก����(��*����1*(�50�G � -0��;-�

!�5��"�ก�������#�A� B�(�F�& 1. ��5�ก.����0+ Site � New Site ,�ก���9 2. ,����ก_$(���#�ก�#�ก%' Site Definition for Untitled Site 1 2�).�-ก&10�&#� Basic 3. 2� Edit Files ��)���ก -� '/50��"#�$%&'�+$�&10/6�+ What would you like to name your site

? ���.�-ก�4\� Next 4. 2� Edit Files, Part 2 ��5�ก Server Technology ��)"��5�ก No , I do not want to use server

technology ���.�-ก&10 Next 5. 2� Edit Files , Part 3 2�)��5�ก$(��#ก&��10&10,�&�������"#�$%&' �(*.�-ก&10$�.�� � 50���Y(�8)�$�

2��<��(��'&10;)�+ก����)".�-ก Select ,�ก��B�.�-ก�4\� Next 6. ���+,�ก��B�,����ก_��)�,�8�+ก����5�กก�� Sharing Files 2�)��5�ก���� None ���.�-ก�4\�

Next

Page 11: Dreamweaver Basic

7. ,����ก_��)�,� Summary %A0+��(+��*����1*(8�+�"#�$%&'8AB��� 2�).�-ก&10�4\� Done � 50��-B��4(ก����)�+ Site

Page 12: Dreamweaver Basic
Page 13: Dreamweaver Basic

ก���ก� !#�A� B�(

Page 14: Dreamweaver Basic

,�ก��B�2�)&��;��8�B�;��

| .�-ก��5�ก/50�$%&'&10;)�+ก���ก)$8 | .�-ก&10�4\� Edit | ��5�ก�ก)$88)��9�;6�+G;��;)�+ก�� �/6� Site , Name , Local Root Folder ����;)� | .�-ก�4\� OK

Page 15: Dreamweaver Basic

ก�������#�A�#TK�F�& &4ก.��B+&10��Y( Dreamweaver 8AB��� ,����ก_�"#�� ,"6�+8AB���2�) 1 ��)� � 50�2�)��������7�+

�5���)�+$()&��&1 �;67)�;)�+ก����)�+�"#�� ,� -0� ��������7&��$()�(* 1. .�-ก��5�ก.����0+ File � New ��5� ก( Ctrl+N 2. ,����ก_$(���#�ก�#�ก%' New Document 3. ��5�ก ����:&8�+�"#�� ,2��6&10,���)�+ ,�ก Category 4. ��5�ก����:&8�+�"#�� ,(�(*�6"�2�h6.5� HTML) 5. .�-ก�4\� Create

ก��#$% U.(#�A�#TK

Page 16: Dreamweaver Basic

ก��กE�F�%���������TV5�W��!"�#�A�#TK

Page 17: Dreamweaver Basic
Page 18: Dreamweaver Basic

ก����&#�V5"F�.���#�A�#TK

Page 19: Dreamweaver Basic

ก��K�%�I���!�"����

Page 20: Dreamweaver Basic

ก������I���8&"F���!"� HTML

Page 21: Dreamweaver Basic

ก��กE�F�%!��%���"�ก7� ก��ก����(�1B����$�;��.4X����;-8�+ HTML %A0+,��18��(;�"��กE�&�B+�;6 1 � 7 �&6���B� �(*8��(�ก;-.5� 3 (�&1*�$()ก��ก��ก����( Text Side = Medium 2����"�%��' ) ��ก,�ก�1B���*�+�����7ก����(����&1*�ก��8��(�(-� �(*��5�ก� -0� +1 7A+ +7 ��5��(8��( -1 7A+ -7 �;6$�6"6�2�ก�X12( 8��(&10$(),�-+,��*962�/6"+ 1 7A+ 7 �&6���B�

ก���ก� !�.'#T�����8ก��U"��(

7)�$�6��5�ก<��;'2�)ก��8)�."�� (.5���6�*2�)���� Default Font ) ก����(+C�,�8AB��*96ก��ก��ก����(2����"�%��'8�+C9)/� �;67)�ก����(<��;' ��กEX�8�+ HTML ,���4h�;2�)��5�ก<��;'$()���*<��;'2�.��"�(1*" %A0+���"�%��',���5�ก��2/);�����(�� ��)"�;6"6�2��.�50�+8�+C9)/��1<��;'2(;-(;�B+�*96

��������7&10,�� -0� �� ��5��ก)$8��*ก��<��;'&10�*962� Properties Inspector %A0+��*ก��8�+<��;'&10,�2/)ก����(ก����(+C�8�+8)�."��2����"�%��' �(*&��$()(�+�1B

1. .�-ก&10�9กF�&)�*��*ก��<��;' �����5�ก Edit Font List 2. ��5�ก<��;',�ก/6�+ Available Fonts ��)".�-ก&10�4\� /50�<��;',�$���(+&10

Choosen Fonts ()��%)�* (��5�ก;�����(��&10;)�+ก��2�)���"�%��'��5�ก��2/)��(+C�) 3. ,���+�ก;"6����ก_/50���*ก��<��;'&10()���� ,�ก��B�.�-ก OK

Page 22: Dreamweaver Basic

ก��กE�F�%�Y!"����"�ก7�

Page 23: Dreamweaver Basic

ก���������8ก�����F��!�"

���"8&��F��!�"��8ก��

ก��K�%8&"F���!�"����

Page 24: Dreamweaver Basic

ก�����ก��Z.�ก7�(T�#[7

ก�����ก#�����&�#�V5"F�

Page 25: Dreamweaver Basic

���"8&��#�����&��Y� %�

ก����&�I.���#�A�#TK :� ก��<Yก&10,��������(+2��"#�$%&'�1ก���*96��ก��*���*��� �;6&10�-*������2/)+��ก����ก

&10�4($()�ก6��� GIF ��� JPG 2�����ก�� Dreamweaver ��50�����9�:� ��"�+2���ก��� ����ก��,���)�+�.)( HTML &10

����.����0+2�ก���&�ก�9�:� .5� �&#ก <IMG> &10,����4;�����6+&10�ก#��9�:� ���8��(8�+�9�:� � 50�2�)ก��&��+������$��*6�+79ก;)�+ ���,�;)�+���&Aก�9�:� ��B��ก#�$")2��"#�$%&'8�+���()"* ก��"�+�9�:� �+2��"#�� ,�18�B�;��(�+�1B

Page 26: Dreamweaver Basic
Page 27: Dreamweaver Basic

ก�������&�����������&��4!"��I6�T

ก����&ก�"��F�ก��6�T

Page 28: Dreamweaver Basic

ก��K�%�E��F�&�6�T#�Y8�ก��!�"����

Page 29: Dreamweaver Basic
Page 30: Dreamweaver Basic

ก������� \#"�(.���(

$�����'�-+.' ��5���1*ก��B�G"6� �-+.' (Link) .5�ก����)�+,4(�/50���*+��ก���,�ก,4(��A0+$�*�+�1ก,4(��A0+ ��5�,�ก��ก�����A0+$�*�+��ก�����A0+ �(*2/) 8)�."�� �9�:� ��5����9 ����;�"���&�+$�*�+��ก���(�+ก�6�" %A0+��5B���8)��9���,�ก10*"8)�+ก�� ��5�$�6�ก10*"8)�+ก��ก#$()� �����ก����"#�� ,�1����,���"���ก���$�6�����7�����"�+��)��(1*"ก��$()&�B+��( ,A+�-*���)�+�-+.'8AB���� 50�2�)C9)/������7.�-กก���(($�*�+;�����6+;6�+G:�*2��"#�$%&'$()+6�*8AB� 2��-��;��'��#;�;6��$<�'��5��;6���"#�� ,&10��)�+8AB�,��1&10�*96&10��������7�)�+7A+&10$�6%B��ก�� %A0+��1*ก"6� Uniform Resource Locator (URL) �9����8�+ URL ���ก��()"* 3 �6"�.5� ����;.��(Protocol) �(���(Domain) ���&10�*96$<�'2��(��� (Path)

"��(�'ก"�!"� \#"�(.���( $�����'�-+.',��ก-(8AB�$();)�+�1�+.'���ก�� 2 �6"�()"*ก��.5�

� ;)�&�+ (Source Anchor) ���*7A+8)��9����"#�� ,&10��50�C9)/���50������'$�/1B ����' �*�'�;��',����10*������9��5� �����50�C9)/�.�-ก ��ก�����58)��9����*&�+,�79ก��1*ก8AB��� ;)�&�+��,,����� �9�:� ��5�8)�."��ก#$() ��ก,�ก��B�*�+�����7����9�:� � 1*+:� �(1*"����6+*6�*����$�����'�-+.'$�*�+���*&�+���*��6+&10;6�+ก��&10��1*ก"6� Image Map

Page 31: Dreamweaver Basic

� ���*&�+ (DestinationnAchor) .5� URL &10�)�+7A+��ก��� $<�'����ก�� ��5����6+8)��9�2(G��-��;��'��#; ����������*&�+&10�*962��"#�$%&'�(1*"ก��,�2/)$()&�B+ URL ���*6� ��� URL ����;#� �;67)��������*&�+&10�"#�$%&'�50�;)�+��������;#��&6���B�

ก����)�+$�����'�-+.'�����7ก����(���*&�+$()���*���(�+�1B � ก���-+.':�*2��"#�� #,�(1*"ก��(Name Anchor) � ก���-+.':�*2��"#�$%&'(Web Page/File) � ก���-+.'$�*�+�"#�$%&'�50� � ก���-+.'�1���' � ก���-+.'(�"�'���(

ก��.���(6�8��#�A�#TK#%Y8�ก�� ,�2/)2�ก�X1&10��ก����"#�� ,��B��1��5B���*�" �����5B�����,,���6+������"8)�*6�*G &��2�)C9)/�

��50��$�*�+;�����6+&10;)�+ก��$()/)� ก�+��B���,,��1ก��&�������h��5�(�/�1$")&10;����8�+�"#�� , �����)�+�-+.'$�*�+�6"�;6�+G:�*2���ก��� ก����)�+�-+.':�*2��"#�� ,�(1*"ก�����ก��()"* 2 8�B�;��.5�

1. ��)�+ Name Anchor ��5�ก����(/50�2�)ก��,4(&10,��/50���*+$� 2. ��)�+�-+.'$�*�+ Name Anchor &10��)�+$")

Page 32: Dreamweaver Basic
Page 33: Dreamweaver Basic

ก�������.���(6�8��#�A� B�( ����ก����)�+�-+.':�*2��"#�$%&'�(1*"ก�� ,�ก�"#�� ,��A0+$�*�+�1ก�"#�� ,��A0+($<�' HTML ��5�$�*�+$<�'�50�G

1. ��5�ก8)�."����5��9�:� &10;)�+ก����)�+�����-+.' 2. .�-ก&10�4\� Browse for File 3. .�-ก��5�ก/50�$<�'&10,��-+.'$��� 4. .�-ก�4\� OK 5. 7)�;)�+ก��ก����(�<����5�"-��("'���*&�+&10;)�+ก��2�)�"#�� ,�1B��(+C�2�)��5�ก

,�ก/6�+ Target _blank 2�)��Y(�"#�� ,���*&�+2�"-��("'2��6 _self 2�)��(+�"#�� ,2��<���(-�,�ก&10��5�ก�-+.' _parent 2�)��(+�"#�� ,2��<��&10.����<���3,,4����*96 _top 2�)��(+�"#�� ,2�"-��("'�(-� �(**ก��-ก�<��&10.����*96&�B+��(

6. &(���ก��&��+��8�+�-+.':�*2��"#�$%&'

Page 34: Dreamweaver Basic
Page 35: Dreamweaver Basic

ก��.���( 8��#�A� B�("V�� ����ก���-+.'$�*�+�"#�$%&' �"#�� , �9�:� ����ก�� ��5����6+8)��9��50�&10�*96:�*��ก�"#�

$%&'8�+��� 1. ��5�ก8)�."����5��9�:� &10,�&�������-+.' 2. 2�6 URL ���*&�+2�/6�+ Link �� Properties Inspector (URL ���*&�+;)�+���4���

�;#� �/6� http://www.microsoft.com 3. ��5�ก"-��("'��5��<�����*&�+&10,���(+�"#�� ,2�/6�+ Target(7)�;)�+ก��)

Page 36: Dreamweaver Basic

ก��.���( 8��"Y#�.( ก����)�+�-+.'$�*�+�1���' .5�ก�����4/50��1���'��(�(���������*&�+8�+�-+.' %A0+��50�C9)/�.�-ก&10

�-+.',��1ก����Y(����ก���1���'8AB��� (;��.6�(1<��;'&10ก����($")2��.�50�+8�+C9)/� �/6� Outlook Express) �)��ก�����&10�*96�1���'2��-+.'$�2�62�/6�+ To �(*��;����;-&��2�)C9)/������7ก��ก8)��9�����6+�1���'$()��*

1. ��5�ก8)�."����5��9�:� &10,�&�������-+.' 2. 2�6��(�(�����*&�+2�/6�+ Link �� Properties Inspector �(*��(�(�����*&�+;)�+

���42��9���� mailto:emailaddress �/6� mailto:[email protected]

Page 37: Dreamweaver Basic

ก������� Image Map Image Map .5� ก������9�:� ����6+�����6"�*6�*G � 50�ก����(����$�����'�-+.'&10�;ก;6�+ก��

�(*�����7��)�+$()���*�-+.'2���A0+�9� ��ก,�ก�1B*�+�����7ก����(�9�&�+8�+$�����'�-+.'$()���*�9���� �/6� �10���10*� "+ก�� ����9����*���10*� ����;)� ������� 5B�&10*6�*�;6���6"�8�+$�����'�-+.'��B�,���1*ก"6� �#�;����;(Hotspot)

Image Map �1����*/�';�+&10�����7��)�+."���6���2,2�)ก���"#�� , �(*&102/)�9�:� 2�h6����)�+����$�����'�-+.' ,�(9(1ก"6�&10,���)�+$�����'�-+.'&10����8)�."��D���(�&�0"$� �(*�ก;-,��-*������&����)���ก8�+�"#�$%&' &10�����1*ก"6� ���� , 8�B�;��ก����)�+ Image Map

1. .�-ก��5�ก�9�:� &10,��������)�+���� Image Map 2. ��5�ก�.�50�+�5� Image Map �� Properties Inspector &�+()���6�+%)�* 3. .�-ก��ก���9�:� � 50�"�(�9�&�+ก����(8���8;8�+ Image Map 4. .�-ก2�/6�+ Link � 50�ก����( URL ��5�/50�$<�'&10,��-+.'$��� 5. ก����(�<����5�"-��("'���*&�+&10,���(+C�2�/6�+ Target (7)�;)�+ก��) 6. 2�68)�."���D-��*�-+.' %A0+,���(+��50�C9)/���50������'$�/1B&10�-+.'2�/6�+ Alt (7)�;)�+ก��) 7. &��%B��8�B�;��&10 2-6 � 50���)�+ Hotspot �6"��50�G2��9�:� 8. &(���ก��&��+��8�+ Image map �(*ก( F12 ��)"��50������'$�.�-ก��8���8;&10

ก����($")

Page 38: Dreamweaver Basic

ก���ก� ! Image Map

ก���ก)$8 Image Map �/6�ก������*6�- 8*�* *)�*;�����6+ �� Hotspot ������10*����+ Link ��5� Target ����;)� �����7&��$()�(* 1. ��5�ก�9�:� Image Map ��)".�-ก&10�.�50�+�5� ���7� Properties Inspector 2. .�-ก��5�ก�9�&�+8�+ Hotspot &10;)�+ก���ก)$8

� ก����2�)ก(.1*' Delete � ก������8��(2�)/1B����'&10,4(�10���10*����G Hotspot ��)".�-ก��ก;��;)�+ก�� � ก��*)�*;�����6+2�).�-ก��ก����'&10ก��+�9�&�+��5�ก(.1*'�9กF� � ก���ก)$8�-+.' 2�)���10*�.6�2�/6�+ Link �� Properties Inspector � ก������;�����6+��)�-���+8�+ Hotspot &10%)��&��ก��2�).�-ก8"����9�&�+��)"��5�ก

Bring To Font ��5� Send to Back

ก�������.���(��� Rollover ก����)�+$�����'�-+.'ก���9�:� �1ก"-D1��A0+.5� ก��2/)��<�<.����ก���9�:� &10��1*ก"6� Rollover

Image ��<�<.�1B����.4X����;-8�+ DHTML (Dynamic HTML) Rollover Image ,�&��+����50�C9)/���50������'$�"�+���5��9�:� ,�ก��B��9�:� ,����10*������1ก�1ก�9���A0+

ก����)�+ Rollover Image ��B� ก6���50�;)�+�;�1*��9�:� &10�18��(�&6�ก��$") 2 �9� � 50��"�����10*�:� ,�$()(9�46��"� :� $�6ก��;4ก��ก �18�B�;��(�+�1B

1. ��5�ก.����0+ Insert } Interactive Image } Rollover Image ,����ก_$(���#�ก�#�ก%' Insert Rollover Image 8AB���

2. -� '/50�8�+ Rollover �+2�/6�+ Image Name 3. .�-ก�4\� Browse ��5�ก Original Image (�9�&10��(+.��B+��ก) 4. .�-ก�4\� Browse ��5�ก Rollover Image (�9�&10��(+��50�C9)/�"�+����'���5��9�) 5. -� ' Alternate Text (8)�."���D-��*�-+.') 6. -� '/50��"#�� ,��5��"#�$%&'&10,��-+.'$���2�/6�+ When Click Go To URL ���.�-ก OK

Page 39: Dreamweaver Basic

ก��""ก���#�A�#TK%��8����� ;���+�����.�50�+�5�&10���2/)2�ก����(+C�8)��9� /6"*2�ก��,�("�+��*'���&'8�+�"#�� ,$()�*6�+

�"*+�� ���*�+/6"*2�ก��,�("�+;�����6+ก����(+C�8�+8)�."����5��9�:� 2�);�+;��;�����6+&10;)�+ก��

;���+���ก��$�()"*.�����'(Column) 2���";�B+ ��� �7"(Row) 2���"��� �1,4(;�(&10�ก-(8AB�,�ก�7"���.�����'��1*ก"6� �%� (Cell)

Page 40: Dreamweaver Basic

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

Page 41: Dreamweaver Basic

ก��#.V"ก�&���&��4!"������

Page 42: Dreamweaver Basic
Page 43: Dreamweaver Basic

ก���8ก#B.

ก�����#B.

Page 44: Dreamweaver Basic
Page 45: Dreamweaver Basic
Page 46: Dreamweaver Basic

ก���E���������&�8K�%#�A�#TK

ก��K�%�I��������"������� ����ก�� Dreamwever $()�;�1*�.����0+2�ก��,�(ก���9������;����;- &10��ก���$")�*6�+

�"*+�� $�6"6�8)�."�� �1 5B� ��)�8�� �(*��)�+���*/4(�����#,2�)��5�ก2/)+��$()��* ก����1*ก2/)�9����ก��,�(;���+�����#,�9� 1. .�-ก2��6"�2(�6"��A0+8�+;���+

2. ��5�ก.����0+,�ก���9 Command 4 Format Table 3. .�-ก��5�ก/50��9�������(9�9�;�"�*6�+&�+()��8"� 4. ��*����1*(&10ก����(2��9����&10��5�ก ��������7���10*����+$();��;)�+ก�� 5. .�-ก Apply � 50�(9C��� D' ��ก*�+$�6 �2,�����7��5�ก���2��6$() 6. .�-ก OK ��50���5�ก�9����$()��)"

Page 47: Dreamweaver Basic

ก��K�%F���#�A�#TK%��8#.#8"�( 2�ก��,�(��)��"#�� ,&10%��%)�� ��ก,�ก;���+��)" Dreamweaver *�+�1�.�50�+�5��1ก/�-(��A0+&10

/6"*2�ก��,�("�+��*'���&'.5� ���*��' (Layer) ���*��'���1*����5���C6�2�&10�����7"�+����,#ก;6�+G�+$� ����������1*+%)��ก�����*G/�B�

�(*����,#./�B���,���+����,#./�B�&10�*967�($� ���*��'�;6��/-B������7,�("�+$")&10�6"�2(8�+��)��"#�� ,ก#$() ��������7&10,�2�6�9�:� 8)�."�� ;���+ ��5�����,#.;6�+G�+$�$()�/6��(1*"ก��2��"#�� ,

Page 48: Dreamweaver Basic
Page 49: Dreamweaver Basic

���������!"�#.#8"�(��T�#�. Layer ��ก,�ก Properties Inspector ��)" ���*��'*�+�1 ����2�)�����;6+.4X����;-� -0� � 50�,�(���(��/�B�

���%6��/��(+���*��' %A0+�����7��Y(8AB���$()�(*��5�ก&10 Windows � Others � Layers ��5 �ก ( F2

Page 50: Dreamweaver Basic

�� Yก����%�#�V5"F��Y��FZ&ก�&�#.#8"�( 7)��1ก��ก����(8��(���*��'��#กก"6���5B���:�*2� ก#�����7��5�ก$()"6�,���(+��5B���:�*2�

�*6�+$� �(*��5�ก���/�0� Overflow ,�ก Properties Inspector (�+�1B � Visible 2�)��(+���*��'��ก,������7��(+��5B���$().�� � Hidden %6����5B���&10�ก-�8��(���*��'$") � Scroll ��(+ Scroll bar &108��8"�8�+���*��'2�)��50��(9��5B���&10�ก-�$() � Auto ��(+ Scroll bar �f ��ก�X1��5B����ก-�8��(���*��'�&6���B� � /6�+"6�+���*7A+$�6���4 .6��ก;- .5� visible