powerpoint-04

Adobe Dreamweaver คือ โปรแกรมสำหรบั สร้ำงและ พฒั นำเวบ็ ไซตท์ ี่พฒั นำโดยบริษทั Adobe โดยเป็นที่ นิยมมำกในปัจจบุ นั เพรำะว่ำมหี น้ำตำกำรใช้งำนที่ เรียนรไู้ ด้งำ่ ยสำหรบั ทกุ คน ไม่ว่ำจะเป็นมือใหม่หรือมอื อำชีพในด้ำนกำรสรำ้ ง เวบ็ ไซตก์ ต็ ำม เพรำะว่ำสำมำรถใช้งำนได้ครอบคลมุ ตงั้ แต่สรำ้ งเวบ็ ไซตต์ กแต่ง พฒั นำ ไปถงึ ขนั้ ตอนกำรอปั โหลดและนำไปใช้ โดยในกำรสร้ำงเวบ็ ไซตน์ ัน้ ไม่ จำเป็นท่ีจะต้องเขยี นโค้ดภำษำ HTML ด้วยตวั เอง สำมำรถใช้โปรแกรมในกำร ออกแบบ และจดั วำงเนื้อหำในเวบ็ ไซตโ์ ดยท่ีโปรแกรมจะเขียนโค้ดให้โดยอตั โนมตั ิ ทำให้สำมำรถทำงำนได้อยำ่ งรวดเรว็ ขึน้ นอกจำกนัน้ ยงั รองรบั ภำษำอ่ืนๆ อีก มำกมำย รวมถงึ รองรบั เคร่ืองมอื ในกำรสรำ้ งเวบ็ ไซต์ เช่น CSS เป็นต้น และใช้ ประยกุ ตร์ ว่ มกบั เวบ็ แอปพลิเคชนั ได้ 2

ควำมสำมำรถพืน้ ฐำน 1. มีกำรทำงำนแบบ WYSIWYG (What You See Is What You Get) คือ สำมำรถใช้อินเทอรเ์ ฟสของโปรแกรมในกำรสร้ำงเวบ็ เพจไดเ้ ลย และ โปรแกรมจะเขยี นโค้ด HTML ให้แสดงผลไดต้ ำมแบบที่เขียนต่ำงจำกกำร กำรเขียนเวบ็ ไซตย์ คุ เก่ำ ที่ต้องเขียนบนโปรแกรม เช่น Notepad ซ่ึงต้อง เขียนโค้ดทงั้ หมดเองและทดสอบเอง 2. ในกรณีที่ไมต่ ้องกำรทำงำนแบบ WYSIWYG และต้องกำรเขียนโค้ดเอง สำมำรถใช้งำนเป็น Editor แบบเดียวกนั กบั โปรแกรม Notepad ได้ โดยจะมี เครื่องมือท่ีจะช่วยให้เขียนโค้ดได้งำ่ ยและยดื หยนุ่ ขนึ้ 3

3. สนับสนุนภำษำสคริปต์ ทงั้ ฝัง่ Client และ Server เช่น Java, PHP, CGI, VBScript 4. มีเครื่องมือสำหรบั อปั โหลดเวบ็ ไซตใ์ นตวั และสำมำรถจดั กำรเวบ็ ไซต์ ท่ีกำลงั ใช้งำนได้โดยมีเครอ่ื งมือ เช่น 4.1 FTP คือ กำรแก้ไขหน้ำเวบ็ เพจที่ต้องกำร และส่งไปแสดงผลที่ เซิรฟ์ เวอรไ์ ด้ทนั ที 4.2 Site Map คือ เคร่ืองมือท่ีแสดงผลเวบ็ ไซตใ์ ห้เป็นรปู เป็นรำ่ ง 5. รองรบั มลั ติมีเดีย เช่น กำรใส่เสียง กำรแทรกไฟลว์ ิดีโอ กำรใช้งำน รว่ มกบั โปรแกรม Flashท่ีใช้ในกำรสร้ำงแฟลชแอนิเมชนั Fireworks ท่ี ใช้ในกำรสร้ำงป่ มุ และอินเทอรเ์ ฟสต่ำง ๆ เป็นต้น 4

ควำมต้องกำรของระบบ สำหรบั กำรใช้งำนโปรแกรม Adobe CS6 นัน้ เครื่องคอมพิวเตอรท์ ่ีใช้ จำเป็นต้องมีคณุ ลกั ษณะขนั้ ตำ่ ดงั นี้ 5

กำรดำวน์โหลด 1. เข้ำไปที่ลิงก์ https://helpx.adobe.com/dowrload-install.thml และทำ กำร sing In-ลงทะเบียนเข้ำส่หู น้ำเวบ็ 6

2. เข้ำส่หู น้ำเวบ็ เพจของ Adobe และเลือก Dreamweavev จะปรำกฎกำร ดำวน์โหลด มีทงั้ แบบ trial ใช้ 30 วนั และ Buy now สำหรบั กำรซื้อใช้งำน และ ทำกำรดำวน์โหลด 7

8

3. เมื่อดำวน์โหลดเสรจ็ แล้ว ให้เปิ ดโฟลเดอร์ และทำกำรติดตงั้ กำรใช้งำน 9

4. รอกำรติดตงั้ พร้อมเปิ ดใช้งำน โปรแกรม Dreamweavev 10

กำรติดตงั้ 1. ดบั เบิ้ลคลิกที่ไฟล์ Dreamweaver_12_LS16 ที่เกบ็ ไว้ 11

2. จะปรำกฏหน้ำต่ำงนี้ขึ้นมำ ไฟล์นี้จะเป็ นไฟล์ที่รวมรวบไฟล์ข้อมูลที่ใช้ ในกำรติดตัง้ โปรแกรมแล้วบีบอดั รวมกนั เป็ นไฟล์เดียวไว้ จึงต้องแตกไฟล์ ออกมำก่อนโดยทำกำรเลือกตำแหน่งโฟลเดอรท์ ่ีจะแตกไฟลแ์ ล้วกด Next 12

3. เม่ือแตกไฟลอ์ อกมำแล้วจะเป็ นโฟลเดอรช์ ื่อว่ำ Adobe Dreamweaver CS6 อยู่ในโฟลเดอรท์ ี่เลือกไว้ ให้กดเข้ำไปและดบั เบิ้ลคลิกเพ่ือเปิ ดไฟล์ Set-Up ขึน้ มำ 4. จะปรำกฏหน้ำต่ำงนี้ขึน้ มำ เป็นกำรโหลดข้อมลู ให้รอจนเสรจ็ 13

5. และจะปรำกฏหน้ำต่ำงนี้ขึน้ มำ มีเมนูต่ำง ๆ ดงั นี้ 14

Install with a serial number คือ ในกรณีท่ีซื้อโปรแกรมตวั เตม็ มำแล้ว สำมำรถใช้รหสั ที่ให้มำเพ่ือติดตงั้ โปรแกรมตวั เตม็ แบบไม่จำกดั เวลำได้เลย Start my subscription คือ ในกรณีท่ีเป็นสมำชิกของ Adobe แบบท่ีมีกำร จ่ำยเงินรำยเดือน ให้นำรหสั มำกรอกเพ่ือใช้งำนได้ทนั ที โดยทวั่ ไปนิยมใช้ กบั Adobe CC Install a trial คือ ติดตงั้ โปรแกรมแบบให้ทดลองใช้ได้ 30 วนั จำกนัน้ ต้อง จ่ำยเงินเพื่อใช้งำนต่อ ในกรณีนี้ที่ต้องกำรติดตงั้ แบบทดลองใช้ 30 วนั ให้ เลือกที่ Install Trial 15

6. จะปรำกฏข้อตกลงทำงซอฟต์แวรข์ อง Adobe ขึ้นมำ หลงั จำกที่อ่ำน แล้วให้กด Accept 16

7. จะปรำกฏหน้ำต่ำงให้ลอ็ กอินด้วย Adobe ID ในกรณีท่ีมีแล้วให้กรอก อีเมลและพำสเวิรด์ ลงไปแล้วคลิก Sing In หรือในกรณีท่ียงั ไม่มีให้เลือก Get an Adobe ID เพ่ือลงทะเบียนก่อน จำกนัน้ นำอีเมลและพำสเวิรด์ มำกรอกก่อนจะ คลิก Sing In เช่นเดียวกนั 17

8. จะปรำกฏหน้ำต่ำงให้เลือกภำษำ และโฟลเดอรท์ ่ีจะติดตงั้ เมื่อเลือก เสรจ็ แล้วให้คลิก Install 18

9. จำกนัน้ จะเร่ิมทำกำรติดตงั้ โปรแกรม ให้รอจนเสรจ็ 19

10. ติดตงั้ เสรจ็ แล้วจะปรำกฏหน้ำต่ำงดงั นี้ คลิก Close เพ่ือปิ ดหน้ำต่ำงหรือ คลิก Launch Now เพ่ือเปิ ดโปรแกรมขึน้ มำใช้งำนทนั ที 20

กำรเปิ ดโปรแกรม Dreamweaver CS6 ขึน้ มำใช้งำนนัน้ สำมำรถทำ ได้หลำยวิธี โดยกำรเข้ำส่โู ปรแกรมบน Windows 8 และ 8.1 โดยมีวิธีกำร ดงั นี้ ผำ่ น Desktop Icon ถ้ำหำกว่ำมีไอคอน Dreamweaver CS6 บน เดสกท์ อ็ ปอย่แู ล้ว สำมำรถ ดบั เบิ้ลคลิกเพื่อเข้ำสู่ โปรแกรมได้ 21

ผำ่ น Start Menu ใน Windows 8 และ 8.1 Start Menu จะเปลี่ยนเป็นแบบ Metro UI และกลำยเป็นหน้ำใหม่อีกหน้ำแทนที่จะเป็นเมนูเหมือนใน Windows เวอรช์ นั เก่ำ โดยสำมำรถเข้ำถึงได้ โดยคลิกท่ีมมุ ล่ำงซ้ำยของหน้ำจอ หรอื กด Windows Button บนคียบ์ อรด์ จำกนัน้ จึงเลื่อนหำไอคอน Dreamweaver CS6 และคลิก เพ่ือเปิ ดใช้งำน 22

ผำ่ น Taskbar 1. เข้ำไปท่ี Start Menu เลื่อนหำไอคอน Dreamweaver CS6 จำกนัน้ คลิก ขวำ จะปรำกฏเมนูขึน้ ด้ำนล่ำง ให้คลิกที่ Pin To Taskbar 23

2. เมื่อเรียบรอ้ ยแล้ว ไอคอนจะถกู ปักหมดุ ไว้ที่ Taskbar เม่ือต้องกำรเปิ ด ใช้งำนให้คลิกท่ีไอคอนดงั กล่ำวได้ตลอดเวลำ กำรเข้ำสู่ Dreamweaver ครงั้ แรก เมื่อใช้วิธีใดวิธีหนึ่งดงั กล่ำวข้ำงต้น หำกเป็นกำรเปิ ดใช้งำนครงั้ แรก ถ้ำติดตงั้ โปรแกรมแบบทดลองใช้จะขึน้ หน้ำต่ำงดงั นี้ ให้เลือกท่ี Start Trial เพ่ือเร่ิมใช้งำนตวั ทดลอง หรือ License This Software เพอ่ื กรอกรหสั ปลดล็ อกโปรแกรมตวั เตม็ 24

หลงั จำกนัน้ รอให้โปรแกรมโหลดสกั คร่กู ่อนที่จะพร้อมใช้งำน 25

ส่วนประกอบของ Welcome Screen Welcome Screen คือ หน้ำจอแรกที่จะปรำกฏเม่ือเปิ ดใช้งำน โปรแกรม โดยแบ่งออกเป็นเมนู 3 กล่มุ คือ 26

1. Open a Recent Item คือ กำรเปิ ดไฟลท์ ่ีใช้งำนไฟลล์ ่ำสดุ ขึน้ มำใช้งำน 2. Create New คือ กำรสรำ้ งไฟลง์ ำนใหม่ขึน้ มำโดยมีให้เลือกหลำยชนิด ทงั้ html, php, asp เป็นต้น 3. Top Features (Videos) เป็นรำยกำรวิดีโอตวั อย่ำงฟี เจอรใ์ นโปรแกรม ที่มีให้ใช้งำนให้คลิกดไู ด้ 27

ส่วนประกอบหน้ำจอโปรแกรม Adobe Dreamweaver CS6 ส่วนประกอบหน้ำจอโปรแกรม Adobe Dreamweaver CS6 ประกอบด้วย 1. แถบเมนูหลกั (Menu Bar) 2. แถบเคร่อื งมอื (Insert Bar) 3. พนื้ ที่สรำ้ งงำน (Document Area) 5. หน้ำต่ำงคณุ สมบตั ิ 6. 4. กล่มุ หน้ำต่ำงพำเนล (Panels) (Properties Inspector) แถบสถำนะ (Status Bar) 28

แถบคำสงั่ บน Menu Bar Menu Bar คือ แถบรวบรวมคำสงั่ ที่ใช้จดั กำรกบั ไฟลเ์ วบ็ เพจแบบต่ำง ๆ โดยเมนูบำรแ์ ต่ละเมนูบำรจ์ ะมีคำสงั่ เป็นหมวดหม่ตู ำมลกั ษณะกำรใช้งำนที่ แตกต่ำงกนั 29

กำรปิ ดไฟล์ เมอ่ื ต้องกำรเลิกใช้ ไฟลเ์ วบ็ เพจที่กำลงั ใช้งำนอยู่ อำจเป็นเพรำะต้องกำรที่จะเปิ ด ไฟลอ์ ่ืนขนึ้ มำแทน หรอื ต้องกำร ออกจำกโปรแกรม สำมำรถทำได้ โดยกำรคลิกท่ีป่ มุ บริเวณ ขวำมอื ของแทบ็ ชื่อไฟลท์ ี่ใต้แถบ เมนู โดยหลงั จำกปิ ดแลว้ โปรแกรม จะกลบั มำอยทู่ ี่ Welcome Screen 30

กำรออกจำกโปรแกรม เมื่อเลิกทำงำนบนโปรแกรม Dreamweaver CS6 แล้ว หลงั จำกกำร บนั ทึกไฟลเ์ รียบร้อยแล้วสำมำรถปิ ดโปรแกรมได้ด้วยกำรคลิกป่ มุ รปู กำกบำทท่ีมมุ ขวำบนสดุ ของโปรแกรม 31