การใช้งาน โปรแกรม Adobe Dreamweaver CS6

การใช้งาน โปรแกรม Adobe Dreamweaver CS6

Adobe Dreamweaver CS6

        Adobe Dreamweaver คือโปรแกรมทำเว็บ แก้ไข HTML สำหรับการออกแบบเว็บไซต์ในรูปแบบ WYSIWYG กับการควบคุมของส่วนแก้ไขรหัส HTML ในการพัฒนาโปรแกรมที่มีการรวมทั้งสองแบบเข้าด้วยกันแบบนี้ ทำให้ ดรีมวีฟเวอร์เป็นโปรแกรมที่แตกต่างจากโปรแกรมอื่นๆ ในประเภทเดียวกัน Dreamweaver สามารถทำงานกับภาษาคอมพิวเตอร์ในการเขียนเว็บไซต์แบบไดนามิค ซึ่งมีการใช้ HTML เป็นตัวแสดงผลของเอกสาร เช่น ASP, ASP.NET, PHP, JSP และ ColdFusion รวมถึงการจัดการฐานข้อมูลต่างๆ อีกด้วย

ความสามารถของโปรแกรม Dreamweaver

ในการเขียนเว็บเพจ จะมีลักษณะคล้ายกับการพิมพ์งานในโปรแกรม Text Editor ทั่วไป คือว่ามันจะเรียงชิดซ้ายบนตลอดเวลา ไม่สามารถย้าย หรือ นำไปวางตำแหน่งที่ต้องการได้ทันที่เหมือนโปรแกรมกราฟิก เพราะฉะนั้นหากเราต้องการจัดวางรูปแบบตามที่เราต้องการ ก็ใช้ตาราง Table เข้ามาช่วยจัดตำแหน่ง ซึ่งเมื่อมีการจัดวางรูปแบบที่ซับซ้อนมากขึ้น การเขียนภาษา HTML ก็ซับซ้อนยิ่งขึ้นเช่นกัน โปรแกรม Dreamweaver อาจจะไม่สามารถเขียนเว็บได้ตามที่เราต้องการทั้งหมด วิธีการแก้ไขปัญหาที่ดีที่สุดคือ ควรจะเรียนรู้หลักการของภาษา HTML ไปด้วย ซึ่งถือว่าเป็นสิ่งที่จำเป็นมากสำหรับผู้ที่ต้องการประกอบอาชีพ Webmaster แบบจริงจัง อาจจะไม่ต้องถึงกับท่องจำ Tag ต่าง ๆ ได้ทั้งหมด แต่ขอให้รู้ เข้าใจหลักการก็พอแล้ว เพราะหลาย ๆ ครั้งที่เราจะเขียนเว็บใน Dreamweaver แล้วกลับได้ผลผิดเพี้ยนไป ไม่ตรงตามที่ต้องการ ก็ต้องมาแก้ไข Code HTML เอง และความสามารถของ Dreamweaver สรุปได้ดังนี้

1. สนับสนุนการทำงานแบบ WYSIWYG (What You See Is What You Get) หมายความว่า เว็บที่เราเขียนหน้าจอ Dreamweaver ก็จะแสดงแบบเดียวกับเว็บเพจจริงๆ ช่วยให้เราเขียนเว็บเพจง่ายขึ้น ไม่ต้องเขียน Code HTML เอง
2. มีเครื่องมือในการช่วยสร้างเว็บเพจ ที่มีความยืดหยุ่นสูง
3. สนับสนุนภาษาสคริปต์ต่างๆ ทั้งฝั่ง Client และ Server เช่น Java, ASP, PHP, CGI, VBScript
4. มีเครื่องมือในการ Upload หน้าเว็บเพจไปที่เครื่อง Server เพื่อทำการเผยแพร่งานที่เราสร้างในอินเทอร์เน็ต โดยการส่งผ่าน FTP หรือ โดยการใช้โปรแกรม FTP ภายนอกช่วย เช่น WS FTP
5. รองรับมัลติมีเดีย เช่น การใส่เสียง, การแทรกไฟล์วิดีโอ, การใช้งานร่วมกับโปรแกรม Flash , Fireworks

ที่มาของข้อมูล : http://aster.spu.ac.th/

คลิปวีดีโอ "สอนวิธีติดตั้ง" โปรแกรม Adobe Dreamweaver

การใช้งาน โปรแกรม Adobe Dreamweaver CS6

การใช้งาน โปรแกรม Adobe Dreamweaver CS6

ͧ���Сͺ�ͧ����� Dreamweaver

Adobe Dreamweaver CS6 �������������㹡�����ҧ���䫵� ��������������Ѻ�ѡ�Ѳ�����䫵��������

������ö���ٻ�Ҿ���͢�ͤ����һ�Сͺ�����ྨ �ա�ѧ�����١��蹵�ҧ � �� ���§ �Ҿ����͹��� �մ���

��������繵�ͧ�����ѡ�����¹������������� HTML ������ö���ҧ���䫵���

��ǹ��Сͺ�ͧ˹�Ҩ������

การใช้งาน โปรแกรม Adobe Dreamweaver CS6

1.  Application bar ��ᶺ����ء�� ��Сͺ����ᶺ����ͧ��� Application bar ��Сͺ����

·       ����ͧ�������Ѻ���͡�ٻẺ����ʴ���鹷������Ѻ���ҧ˹�����ྨ �� Code Split ���� Design �繵�

·       ����ͧ�������Ѻ���� ��еԴ������������� 

·       ����ͧ�������Ѻ�����èѴ���䫵� �����ҧ䫵�����

2.  Menu bar �繷���������觷������ͧ����� Dreamweaver �����㹡�èѴ��áѺ������ྨ

     Menu bar ��Сͺ������������ �ѧ���

          2.1 File �����٤��������Ѻ�Ѵ��áѺ������ྨ �� ���ҧ���ྨ���� �ѹ�֡���ྨ �Դ���ྨ �ʴ����ྨ��ҹ�������� �����͡�ҡ����� �繵�

          2.2 Edit �����٤��������Ѻ������ �� �Ѵ�ͧ �Ѵ �ҧ ���� ����֧��õ�駤�ҡ�÷ӧҹ (Preference) ��ҧ � �繵�

          2.3 View �����٤��������Ѻ��Ѻ����¹����ͧ�ͧ���ྨ��зӧҹ �繵�

          2.4 Insert �����٤��������Ѻ�á�ѵ�ص�ҧ � �� �ٻ�Ҿ ���§���ҧ �������ҧ � ŧ�����ྨ �繵�

          2.5 Modify �����٤��������Ѻ����ѵ�ص�ҧ� �����ྨ �� �������ٻẺ����ѡ�� �������ٻ�Ҿ ��èѴ��õ��ҧ ���͡�á�˹��س���ѵԢͧ���ྨ �繵�

          2.6 Format �����٤��������Ѻ����¹�ٻẺ������ͧ��ͤ��������ྨ �� ��èѴ�ٻẺ��ͤ��� ������ҧ��Ǣ����¡�� �繵�

          2.7 Command �����٤��������Ѻ�Ѵ��áѺ�ش����觵�ҧ� �����ྨ���ӧҹ����

          2.8 Site �����٤��������Ѻ�Ѵ��áѺ Site �� ���ҧ Site ������� Site ���ӧҹ ����֧��õ�Ǩ�ͺ�ԧ���ҧ� � Site �繵� 

          2.9 Window �����ٷ����㹡���Դ���ͻԴ���ŷ��ӧҹ����

          2.10 Help �����ٷ����㹡�âͤ�����������ͼ�ҹ���䫵� Adobe       

3. Workspace �繻�������Ѻ����¹����ͧ��鹷��ӧҹ (Workspace) ������ö���͡����ҵ�ͧ�����ҹ�ٻẺ��ѡɳ�� ���� Adobe Dreamweaver CS6 ��������͡�� 11

การใช้งาน โปรแกรม Adobe Dreamweaver CS6

4. Toolbar ��ᶺ����ͧ��ͷ���������������觷����繵�ͧ��ҹ�繻�Ш� ����ö �Դ/�Դ�����ҹ�� Tool bars ��Сͺ����ᶺ����ͧ��ʹѧ���

4.1 Document Toolbar �繷�ź������Сͺ仴��»��������㹡�á�˹�����ͧ����ʴ����ྨ ����ʴ����������´�ͧ˹�����ྨ ����͹������� ���͡�á�˹���͸Ժ�����ྨ

การใช้งาน โปรแกรม Adobe Dreamweaver CS6

4.2 Standard Toolbar �繷�ź������Сͺ仴��»�������觾�鹰ҹ�����㹡�èѴ������ �� ������ҧ��� �ѹ�֡��� �Դ��� �Ѵ�͡ ���� �����ҧ������ ��ʹ�����¡��ԡ���ͷӫ�Ӥ���觴���

การใช้งาน โปรแกรม Adobe Dreamweaver CS6

4.3 Style Rendering Toolbar �繷�ź������͡Ẻ����������ʴ���÷ӧҹ�ͧ˹�����ྨ����� Style Sheet ������»�������ҧ� �� ��˹�Ҩͤ��������� ������ͧ����� ���������� ������ �������/Ŵ��Ҵ����ѡ�� ��ʹ������ʴ��բͧʶҹ��ó�������§

การใช้งาน โปรแกรม Adobe Dreamweaver CS6

5. Insert panel �繾��ŷ���Ǻ������������觷��������Ѻ���ҧ����á�ͺ�礵�ҧ� �¨����͡�繡���� ���������ҹ���дǡ ������ҧ���������觷����ҹ

Common �繡�������������Ѻ�ҧ�ͺ�� ����ͧ��ҹ�繻�Ш� �� �ٻ�Ҿ ���ҧ �����ŵ������ �����ԧ�� �繵�

การใช้งาน โปรแกรม Adobe Dreamweaver CS6

Layout �繡�������������Ѻ�ҧ�ͺ�礷����Ѵ˹�����ྨ �� AP Element ���͵��ҧ �繵�

การใช้งาน โปรแกรม Adobe Dreamweaver CS6

Forms �繡�������������Ѻ�ҧ�ͺ�礷���繿�����Ѻ������

การใช้งาน โปรแกรม Adobe Dreamweaver CS6

Text �繡�������������Ѻ�Ѵ�ٻẺ��ͤ��� �蹷ҵ��˹� ���§ ������� list ��¡�� �������á�ѭ�ѡɳ����ɵ�ҧ �

การใช้งาน โปรแกรม Adobe Dreamweaver CS6

Data �繡�������������Ѻ�Ѵ��ðҹ������ ��д֧�����Ũҡ�ҹ���������ʴ������ྨ

การใช้งาน โปรแกรม Adobe Dreamweaver CS6

6. Panel Group �繾���˹�ҵ�ҧ��Ҵ��� ����Ǻ�������ͧ�������繡�������˹�ҷ�� ����Ѻ��ҹ੾������ͧ��� ������ö�Դ���ͻԴ���š�÷ӧҹ���¤�ԡ���٤���� Window ���Ǥ�ԡ���͡ ���ŷ���ͧ���

การใช้งาน โปรแกรม Adobe Dreamweaver CS6

CSS Styles Panel �繾��ŷ��������Ѻ�Ѵ��áѺ����

CSS �� ������ҧ ������ ���ź ���͡�á�˹��س���ѵԵ�ҧ�ͧ CSS

การใช้งาน โปรแกรม Adobe Dreamweaver CS6

File Panel

�繾��ŷ��������Ѻ�Ѵ��áѺ��� ���ྨ �������ٻ�Ҿ ��� HTML �����ŵ������

����������������䫵� ��������ö���ͺ��÷ҧҹ�ͧ���ྨ��ҹ�����������

การใช้งาน โปรแกรม Adobe Dreamweaver CS6

Database Panel �繾��ŷ��������Ѻ���ҧ��ШѴ���������ྨ����ö �������͡Ѻ�ҹ������

การใช้งาน โปรแกรม Adobe Dreamweaver CS6

7. Document Area  �繾�鹷������Ѻ���ҧ˹�����ྨ �������������� ���ͧ���Сͺ�ͧ���ྨ �� �Ҿ��ҿԡ �к���ŵ������ ����鴵�ҧ � �������ö����ʴ���鹷�������ͧ�� 3 ����ͧ ��� ����ͧ�� (Code View) ����ͧʻ�Է (Split View) �������ͧ�͡Ẻ (Design View)

          7.1 ����ͧ�� (Code View)

          7.2 ����ͧʻ�Է (Split View)

          7.3 ����ͧ�͡Ẻ (Design View)

การใช้งาน โปรแกรม Adobe Dreamweaver CS6

8.  Status bar ��ᶺ��������ҹ��ҧ�ͧ˹�ҵ�ҧ��÷ҧҹ ���ʴ������������������ǡѺʶҹ� ��÷ҧҹ�ͧ���ྨ�����ѧ������ �� �ʴ�������͡�� HTML ��û�Ѻ��Ҵ����ʴ��� ��á�˹���Ҵ˹�ҵ�ҧ ��Ҵ�ͧ���������ҷ����㹡����Ŵ ��С���ʴ��������Ңͧ���ྨ �����ѧ��ҹ

การใช้งาน โปรแกรม Adobe Dreamweaver CS6

9.  Panel Property  �繾��ŷ�������ҹ��ҧ�ͧ˹�Ҩ������ ����ǹ����ͧ��ҹ���·���ش ������㹡�û�Ѻ����������´��С����䢤س���ѵԵ�ҧ � �� ��Ҵ ���˹� ������ �繵� �¾��Ź�������¹仵���ѵ�ط�����͡��ҹ�����ྨ ������ҧ���Ťس���ѵ�

การใช้งาน โปรแกรม Adobe Dreamweaver CS6

���Ťس���ѵ���������͡��÷ӧҹ�Ѻ��ͤ��������ྨ

การใช้งาน โปรแกรม Adobe Dreamweaver CS6

���Ťس���ѵ���������͡��÷ӧҹ�Ѻ�Ҿ��Сͺ�����ྨ

การใช้งาน โปรแกรม Adobe Dreamweaver CS6

���Ťس���ѵ���������͡��÷ӧҹ�Ѻ���ҧ�����ྨ

������ҧ����ҹ

��͹�����Ҩ����ҧ��纴�������� Adobe Dreamweaver CS6 ���繵�ͧ���ҧ��������������红����ŷء������

�����Ҩ����ٻ�Ҿ��ҧ� ��������� ����֧�����䫵���������ҧ�����

�Ըա�����ҧ�������ѧ���仹��

1. ���͡��� �� Drive D:
2. ��ԡ������͡
New
3. �ҡ������͡ Folder
4. �ҡ������ӡ������¹���ͷ����ҵ�ͧ���

����������ҧ�ҹ����

1. �Դ�����Adobe Dreamweaver CS6
2. ���͡���ҷ�����㹡����¹ ���͡
HTML

การใช้งาน โปรแกรม Adobe Dreamweaver CS6

�Ըա�úѹ�֡�ҹ

�ء���駷��ӧҹ���稨е�ͧ�ѹ�֡�ҹ������ͷ�������ҷӧҹ��������级ҹ������Ըա�úѹ�֡�ҹ����ö����ѧ���

1. ���͡��� File
2. ���͡ Save Ass
3. ���͡���������кѹ�֡�ҹ���
4. ��駪��ͷ��
File Name
5. ��
Save

การใช้งาน โปรแกรม Adobe Dreamweaver CS6
การใช้งาน โปรแกรม Adobe Dreamweaver CS6

การใช้งาน โปรแกรม Adobe Dreamweaver CS6