สื่อดรีม วิจัย

เมื่อเข้าโปรแกรม Dreamweaver มาสรา้ งเวบ็ กันนะครับ ได้คา่



Welcome Screen เปน็ เครือ่ งมอื สำหรบั ช่วยเลอื กข้ันตอน เรมิ่ ตน้ ในกำรใช้งำนโปรแกรมโดยตวั เลือกจะแบ่งออกเป็น กล่มุ ๆ เลขที่ 1 เปิดไฟล์ทเ่ี คยใช้ งา่ ยๆ เลขที่ 2 สร้ำงไฟลใ์ หม่ เลขที่ 3 ทำงลดั สำหรับเข้ำดรู ำยละเอียดในกำรใช้ งำนของโปรแกรม เลขที่ 4 คำแนะนำกำรใชโ้ ปรแกรม เลขที่ 5 ดำวนโ์ หลดโปรแกรมหรอื ดขู ้อมลู บน เว็บไซต์ของ Adobe เลขท่ี 6 คลกิ ทช่ี อ่ งส่เี หลย่ี มหำกไมต่ อ้ งกำรแสดง Welcome Screen อกี ในครงั้ ต่อไป

ลองทาตามดนู ้า 1. Open a Recent Item : แสดงชือ่ เว็บเพจท่เี คยใช้งำน มำแล้ว 2. Create New : เป็นกำรสร้ำงไฟลง์ ำนใหม่ เชน่ HTML, ColdFusion, PHP, ASP, JavaScript เป็นต้น - HTML : สรำ้ งหนำ้ เว็บธรรมดำ เหมำะสำหรบั ผเู้ รม่ิ ตน้ สรำ้ งเว็บ - ColdFusion : สรำ้ งหนำ้ เว็บแอพพลิเคชั่นทพี่ ฒั นำ ด้วยเทคโนโลยีฝง่ั เซริ ฟ์ เวอร์ ColdFusion

- PHP : สร้ำงหนำ้ เวบ็ แอพพลเิ คช่นั ที่พัฒนำด้วย เทคโนโลยฝี ง่ั เซิรฟ์ เวอร์ PHP - CSS : สรำ้ งไฟล์เกบ็ รปู แบบตวั อักษร ตำรำง สพี น้ื หลงั เพ่อื นำไปใชใ้ นทกุ ๆ หน้ำเว็บเพจ - JavaScript : สรำ้ งไฟลส์ คริปตท์ ี่ทำงำนฝง่ั ไคลเอนต์ และทำงำนทเี่ ครื่องของผ้เู ขำ้ ชมเวบ็ ไซต์ - Dreamweaver Site : สรำ้ งเวบ็ ไซต์ใหม่ 3. Top Features (Videos) : เขำ้ สหู่ นำ้ เว็บ Adobe TV ดูวีดิโอสำธติ กำรใชง้ ำน

1.แถบเมนหู ลัก (Menu bar) เปน็ แถบรวมรวมคำส่ัง ทง้ั หมดของโปรแกรม 2 แถบเครอ่ื งมือ (Insert Bar) เปน็ แหล่งรวมเคร่ืองมอื ซึ่งใชใ้ นกำรวำงออบเจ็กตช์ นดิ ต่ำง ๆ ลงบนหน้ำเว็บเพจ เช่น ขอ้ ควำม รปู ภำพ ลงิ ค์ รปู เคลอ่ื นไหว เปน็ ต้น แถบเครอื่ งมอื ตา่ งๆ

3. Insert Bar เปน็ แถบทีป่ ระกอบดว้ ยปมุ่ คำส่ังทใี่ ชใ้ นกำร แทรกออบเจ็กต์ (องค์ประกอบต่ำงๆ) ลงในเว็บเพจ โดย แบง่ เป็นหมวดหมซู่ ่งึ มีรำยละเอียดดงั น้ี - Common เปน็ กลุ่มเครอ่ื งมอื พน้ื ฐำนในกำรสรำ้ งเว็บเพจ เชน่ รูปภำพ กรำฟกิ ตำรำง ไฟลม์ ีเดยี เป็นตน้ - Layout เป็นกลมุ่ เครอ่ื งมือท่ีชว่ ยในกำรจดั องค์ประกอบ ของหนำ้ เวบ็ เพจ - Forms เปน็ กล่มุ เคร่ืองมอื ทีใ่ ชส้ ร้ำงแบบฟอรม์ รับข้อมลู จำกผู้ชม เช่น ช่องรบั ข้อควำม และฟิลด์ชนิดต่ำงๆ - Data เปน็ กล่มุ เครอ่ื งมือท่ใี ช้สำหรับสร้ำงหน้ำเว็บตดิ ตอ่ กับ ฐำนขอ้ มลู

- Spry เป็นกลมุ่ เคร่อื งมือที่ใช้ในกำรจดั กำรหนำ้ เวบ็ เพจ - jQuery Mobile เปน็ กลมุ่ เครือ่ งมอื ทชี่ ว่ ยในกำรสรำ้ ง หน้ำเวบ็ บนมือถือ - InConext Editing เป็นกลมุ่ เครื่องมือท่ีช่วยอำนวยควำม สะดวกใหผ้ ใู้ ช้งำนสำมำรถแก้ไขเวบ็ เพจได้ - Text เปน็ กลุ่มเครื่องมอื ทใ่ี ชจ้ ัดรูปแบบข้อควำมในเวบ็ เพจ - Favorite เป็นกลุ่มเคร่ืองมือทใ่ี ช้งำนบ่อยๆ เพอ่ื ควำม สะดวกในกำรใช้งำน - Color Icons แสดงสีของปุ่มเครื่องมอื - Hide Labels ซ่อนช่อื เรียกของปุ่มเครอื่ งมือ

การใสต่ ารางจ้า โอโ้ หว

รายละเอียดตารางคะ่ กลุ่มที่ 1 : Table size (กำหนดรำยละเอียดของตำรำง) - Rows : จำนวนแถว - Columns : จำนวนคอลมั น์ - Table width : ควำมกวำ้ งของตำรำง (หนว่ ยทใ่ี ช้ วัดเป็นเปอร์เซน็ ตห์ รอื พกิ เซล) - Border thickness : ควำมหนำของเสน้ ขอบตำรำง - Cell padding : ระยะหำ่ งระหว่ำงขอบเซลลก์ ับ เนอ้ื หำ - Cell spacing : ระยะห่ำงระหว่ำงเซลลใ์ นตำรำง

กลุ่มท่ี 2 : Header (เลือกตำแหน่งของหวั เรอื่ งภำยใน ตำรำง) - None : ไมใ่ ชห้ ัวเร่อื งในตำรำง - Left : กำหนดให้มีหัวเร่ืองทำงดำ้ นซำ้ ย - Top : กำหนดให้มหี ัวเรื่องทำงด้ำนบน - Both : กำหนดใหม้ หี วั เรอ่ื งด้ำนซ้ำยและด้ำนบน กลุ่มที่ 3 : Accessibility (กำหนดขอ้ มลู ทวั่ ไปในตำรำง) - Caption : กำหนดหวั ขอ้ ของตำรำง - Summary : คำอธบิ ำยกำกบั ตำรำง 5. เมื่อกำหนดคุณสมบตั ติ ่ำง ๆ เสรจ็ เรยี บร้อยแลว้ ไดต้ ำรำง ตำมทีเ่ รำต้องกำร วา้ วว

1. คลิกเมำสว์ ำงเคอร์เซอรต์ รงตำแหนง่ ของเซลลท์ ต่ี อ้ งกำร 2. คลกิ เมำส์ปุม่ ขวำ จะปรำกฏเมนูยอ่ ย ให้เลอื ก Table 3. จะปรำกฏรำยกำรให้เลอื ก ดงั น้ี - Insert Row : แทรกแถว - Insert Column : แทรกคอลัมน์ - Insert Rows or Columns : แทรกแถวหรือแทรก คอลัมน์ - Delete Row : ลบแถว - Delete Column : ลบคอลัมน์

2. การรวมเซลล์ / การแบ่งเซลล์ 1. เลือกเซลล์ทีต่ อ้ งกำรรวม (ต้องเปน็ เซลลท์ ่ีตดิ กนั ) 2. คลิกเมำส์ป่มุ ขวำ จะปรำกฏเมนยู ่อย ใหเ้ ลือก Table 3. จะปรำกฏรำยกำรใหเ้ ลอื ก ดงั น้ี - Merge Cells : แทรกเซลล์ หยู ย - Split Cell : แบ่งเซลล์ 4. เซลลท์ ถี่ ูกเลอื กจะรวมเซลลเ์ ข้ำดว้ ยกนั ดงั รปู

หมายเหตุ กรณแี บง่ เซลล์ เมอื่ คลกิ ท่ี Split Cell จะปรำกฏหน้ำต่ำง Split Cell ดงั รปู Rows : เลอื กแบ่งเซลลอ์ อกเป็นแถว Columns : เลือกแบ่งเซลลอ์ อกเปน็ คอลัมน์ Number of ... : กำหนดจำนวนเซลล์ที่ตอ้ งกำรจะแบง่ ทาได้มั้ยหนๆู ได้ค่ะ

การแทรกข้อความและรปู ภาพลงในตาราง 1. คลิกเซลล์ทต่ี อ้ งกำรจะแทรกข้อควำม แล้วพมิ พ์ข้อควำม ลงไปเหมือนโปรแกรม Microsoft Excel 2. คลิกเซลลท์ ตี่ ้องกำรจะแทรกรปู ภำพ 3. คลิกท่ีเมนู Insert 4. เลือก Image หรอื กดปมุ่ Ctrl + Alt + I จะปรำกฏ หนำ้ ต่ำง Select Image Source

5. คลกิ ทชี่ อ่ ง Look in เพอ่ื เลอื กโฟลเดอรท์ ี่เกบ็ รูปภำพ 6. คลิกเลอื กรปู ภำพ 7. คลกิ ปุม่ OK รูปภำพจะแทรกในเซลล์น้นั ทนั ที สำมำรถ ปรบั แต่งไดต้ ำมตอ้ งกำร

เชื่อมโยงภายในเวบ็ ไซต์เดียวกัน เป็นกำรสร้ำงกำรเชอ่ื มโยงจำกเวบ็ เพจไปยังไฟล์ ปลำยทำงภำยในเว็บไซต์เดยี วกัน ซ่งึ ไฟลน์ ้ีอำจจะเป็นเว็บ เพจ ไฟล์เอกสำรเชน่ .pdf, .doc หรือไฟลโ์ ปรแกรม เช่น ไฟล์ .zip เป็นต้น มีขั้นตอนดงั นี้ 1. คลกิ เลือกขอ้ ควำมท่ตี อ้ งกำรสร้ำงกำรเช่ือมโยง 2. ท่ี Insert Panel เลือก Panel Common แล้ว คลกิ Hyperlink เชอ่ื มเว็บเดียวกนั นะ โอเค

4. เลือกตำแหน่งไฟล์ เว็บเพจทีต่ ้องกำร 5. คลิกไฟล์ เว็บเพจทีต่ อ้ งกำร 6. คลิกปมุ่ OK วา้ วว 7. ในช่อง Target คลิกปมุ่ แลว้ เลอื กกำรแสดงบน วนิ โดวเ์ ปำ้ หมำยทตี่ อ้ งกำร 8. ในชอ่ ง Title พิมพ์ขอ้ ควำมท่ตี ้องกำรให้แสดงเม่อื ชี้ เมำส์ท่ีลิงค์ หรอื ปล่อยว่ำงไว้ 9. คลิกปุ่ม OK 3. ในช่อง Link คลิกไอคอน Browse

การสร้างการเชื่อมโยงไปยังเวบ็ ไซต์อน่ื ๆ หำกตอ้ งกำรสรำ้ งกำรเช่ือมโยงไปยังเวบ็ ไซต์ ภำยนอก เพอ่ื เปน็ กำรอ้ำงอิงแหลง่ ข้อมูล หรอื ต้องกำร เชอ่ื มโยงกบั เว็บไซตต์ ำ่ งๆ มขี น้ั ตอน ดังน้ี 1. คลิกเลอื กรปู หรอื ข้อควำมทต่ี ้องกำรสร้ำงกำรเชอื่ มโยง 2. ที่ Panel Properties ในชอ่ ง Link พมิ พ์ URL ของ เว็บไซตท์ ่ตี ้องกำร (URL ตอ้ งเปน็ แบบเตม็ รปู คือ http://www.pcw.ac.th) 3. ในชอ่ ง Target เลือกกำรแสดงบนวินโดวเ์ ปำ้ หมำยที่ ตอ้ งกำร

เย้!! จบแล้ว