การโปรแกรมเว็บเบื้องต้น

2. จะปรากฏหนา้ ตา่ ง Page Properties เลือกแท็บ Appearance (HTML) 3. คลกิ ป่มุ Browse เพ่ือเลือกรูปภาพท่ีตอ้ งการ 4. คลิกรูปภาพ 5. คลิก OK 6. จะแสดงช่ือไฟลร์ ูปภาพท่ีเลอื ก

7. คลกิ ป่มุ Apply เพ่ือใชง้ าน 8. คลิกป่มุ OK 9. จะแสดงผลการใสร่ ูปภาพพืน้ หลงั ดงั รูป 4.7 การบันทกึ เอกสารเวบ็ เพจ การบนั ทกึ เวบ็ เพจ สามารถทาไดด้ งั นี้ 1. คลิกท่ีเมนู Modify > Page Properties

2. จะปรากฏกลอ่ งขอ้ ความการบนั ทกึ ถา้ ในกรณีตอ้ งการใหแ้ สดงเป็นหนา้ แรก ของ เวบ็ ไซต์ ใหบ้ นั ทกึ ไฟลช์ ่ือ Index.html เพ่ือกาหนดใหห้ นา้ เวบ็ เพจนีเ้ ป็นหนา้ แรก ของระบบเวบ็ ไซต์ หลักการตัง้ ชอื่ ไฟล์ ในการตงั้ ช่ือไฟลเ์ วบ็ เพจนนั้ ตอ้ งตงั้ ช่ือไฟลเ์ ป็นภาษาองั กฤษ เป็นตวั เลก็ ทงั้ หมด ไมค่ วรยาวเกินไป และหากตอ้ งการเวน้ วรรณ ควรค่นั ดว้ ยเครอ่ื งหมาย _(Underscore) เชน่ moblle_Asha, mobile_nokia เป็นตน้ นอกจากนนั้ ไฟลเ์ ว็บเพจควรบนั ทกึ ใหเ้ ป็นไฟล์ .html หรอื .htm ถา้ เป็นเว็บ เพจท่ีถกู เขียนดว้ ยภาษา Script ก็สามารถใชน้ ามสกลุ ตามภาษานนั้ ๆ เช่น ภาษา php จะมีนามสกลุ .php หรอื ภาษา JavaScript จะมีนามสกลุ .java เป็นตน้ 3. คลิกป่มุ Save เพ่ือบนั ทกึ ขอ้ มลู 4. ท่หี นา้ ตา่ ง Panel จะพบไฟลท์ ่บี นั ทกึ ดงั รูป หน่วยที่ 5 การจดั การหน้าเวบ็ เพจด้วย AP Element Object 5.1 ความหมายของ AP Element AP Element (Absolutely Positioned Element) หรอื ในโปรแกรม Adobe Dreamweaver รุน่ ก่อนๆ เรยี กวา่ เลเยอร์ (Layer) เปรยี บเสมอื นแผน่ ใสท่ีสามารถใส่ เนือ้ หา ขอ้ ความ รูปภาพ วีดีโอ หรอื ส่อื มลั ติมีเดยี ชนิดตา่ ง ๆ ลงไปและสามารถนามา วางเรยี งซอ้ นกนั เป็นชนั้ ๆ ได้ ดดยสามารถจดั วาง AP Element แต่ละชนั้ ไวต้ รง ตาแหนง่ ใดของเว็บเพจก็ได้ 5.2 การสร้าง AP Element

โดยสามารถสรา้ งได้ 2 วธิ ี คอื วิธีที่ 1 การวาดดว้ ยเคร่อื งมือ Draw AP Div มขี นั้ ตอนการวาดดงั นี้ 1. คลกิ ท่ี หนา้ ตา่ ง Insert เลอื ก แทบ็ Layout 2. คลิกท่ีป่มุ AP Div 3. นามาวาดตามขนาดท่ีตอ้ งการ 4. จะได้ AP Element ท่สี ามารถเคล่อื นยา้ ยไดต้ ามตอ้ งการ วิธที ี่ 2 การวาด AP Element โดยใชค้ าส่งั Insert > Layout Objects > AP Div มขี นั้ ตอนการวาดดงั นี้ 1. คลิก ท่ีเมนู Insert > Layout Objects > AP Div

2. จะได้ AP Element ตามท่ตี อ้ งการ 5.3 การซอ่ นหนือแสดงจดุ ยืด AP Element มีคณุ สมบตั ิท่ดี เู หมอื นว่าสามารถเคลื่อนยา้ ยหรอื ลอยอย่บู นเว็บไซต์ ไดอ้ ยา่ อิสระ แตค่ วามจรงิ แลว้ ทกุ ชิน้ จะยดึ กบั เว็บเพจท่ีจดุ หน่งึ ซงึ้ เรยี ก จดุ แองเคอร์ (Anchor Point) โดยทีสญั ลกั ษณแ์ สดงดว้ ยไอคอนใน กรณีท่สี รา้ ง AP Element ดว้ ย วธิ ีวาด ไอคอนนีจ้ ะอย่ทู ่มี มุ ซา้ ยบนของเวบ้ เพจ สว่ นกรณีใชค้ าส่งั Insert ไอคอนนี้ จะ อยตู่ รงจดุ ท่ีวางเคอรเ์ ซอร์ จดุ ยดึ มีความสาคญั เพราะสามารถใชอ้ า้ งองิ ตาแหน่งของ AP Element จะคิดเทียบจาก มมุ ซา้ ยบนขององคป์ ระกอบหลกั ท่ีจดุ ยดึ นนั้ ถกู วางไว้ ซง่ึ อาจจะเป็นการวางบนเวบ็ เพจหรอื AP Element อ่ืนก็ได้ นอกจากนนั้ AP Element ย่อยยงั สามารถสืบทอด (Inherit) คณุ สมบตั ไิ ปจาก AP Element หลกั อีกดว้ ย การ ซอ่ น/แสดงจดุ ยดึ มีขนั้ ตอนดงั นี้ 1. คลกิ ท่ีเมนู Edit > Preferences เพ่ือตรวจสอบการตงั้ คา่ ของ โปรแกรม

2. จะปรากฏหนา้ ตา่ ง Preferences คลิกท่ีแทบ็ Invisible Elements ดทู ่ี ออบชนั Anchor points for AP elements ซง่ึ ออปชนั นีจ้ ะตอ้ งถกู เลือกไว้ มจิ ะนนั้ จะ ไมส่ ามารถซอ่ น/แสดงจดุ ยืนของ AP Element 3. คลิกท่ปี ่มุ OK เพ่ือปิดหนา้ ตา่ ง Preferences

4. เลอื กคาส่งั View > Visual Aids 5. คลิกเลือก Invisible Elements

6. จะปรากฏจดุ ยดึ รูป 7. สาหรบั การซอ่ นจดุ ยดึ สามารถทาไดโ้ ดย เลอื กคาส่งั View > Visual Aids > Invisible Elements 8. คลกิ ป่มุ เอาเคร่อื งหมายถกู หนา้ คาส่งั Invisible elements ออก 9. จดุ ยดึ จะหายไป 5.4 การกาหนดคุณสมบตั ใิ หก้ บั AP Element

5.4.1 กาหนดชอ่ื AP Element เม่อื ไดส้ รา้ ง AP Element ใหม่ โปรแกรมจะตงั้ ช่ือโดยอตั โนมตั ิ คอื apDiv1, apDiv2, apDiv3... ตามลาดบั แตส่ มารถเปล่ยี นไดเ้ พ่ือ ลดความสบั สนเวลาใชง้ านโดยใชว้ ิธีตา่ งๆ เชน่ เปลี่ยน apDiv2 เป็น Header เพ่ือใช้ สาหรบั ทาสว่ นหวั เว็บไซต์ 5.4.2 ย้ายหรือกาหนดตาแหน่ง AP Element สามารถวาง AP Element ไว้ ตรงตาแหน่งใดกไ็ ดบ้ นเวบ็ เพจ โดยใช้ วิธีตา่ งๆ ดงั นี้ 1. ยา้ ยตาแหนง่ โดยคลกิ ลากท่ีเสน้ กรอบ 2. เลือก AP Element 3. กาหนดตาแหน่งใหมโ่ ดยปอ้ นคา่ ในชอ่ ง L และ T บนพาเนล Properties 5.4.3 ปรับขนาด ทาไดโ้ ดยใชว้ อธีตา่ ง ๆ ดงั นี้ 1. ปอ้ นคา่ ท่ีชอ่ ง W และ H บนพาเนล Properties 2. คลิกลากท่ีจดุ แฮนเดิล (Handle)

5.5 การจัดลาดบั ชั้น AP Element เม่อื วาง AP Element ซอ้ นทบั กนั เนือ้ หาของชิน้ บนจะบงั ชิน้ ท่อี ยดู่ า้ นลา่ งไป ตามลาดบั ชนั้ ยกเวน้ เฉพาะบรเิ วณท่ีชิน้ ลา่ ยเหลือ่ มออกมาหรอื บรเิ วณท่ีชิน้ บนไมม่ ี ขอ้ มลู ลาดบั ชนั้ (Z-Index) ของ AP Element มีคา่ เป็นจานวนเตม็ บวกหรอื จานสน เต็มลบ เช่น -2, -1, 0, 1, 2 โดยคา่ ท่ีมากกวา่ หมายถงึ ชิน้ ท่อี ยดู่ า้ นบน ดงั นนั้ AP Element ท่ีมี Z-Index = 2 จะอยเู่ หนือและบงั ชิน้ ท่มี ี Z-Index = 1 สาหรบั คา่ 0 คือ ชนั้ ของเนือ้ หาท่วั ไป บนเวบ็ เพจ ดงั นนั้ AP Element ท่มี ีลาดบั ชนั้ เป็นลบจงึ ถกู บงั โดย เนือ้ หาท่วั ไปบนเวบ็ เพจได้ ซง่ึ ผพู้ ฒั นาเว็บไซต์ สมารถเปลยี่ นลาดบั ชนั้ ของ AP Element ไดด้ ดยใชว้ ธิ ีตา่ งๆ ดงั้ นี้ วธิ ีที่ 1 กาหนกคา่ ลาดบั ชนั้ บนพาเนล Properties วธิ ีที่ 2 บนพาเนล Properties ใหค้ ลดิ ตรงคา่ สาดบั ขนั้ ของ AP Element ท่ี ตอ้ งการ แลว้ ปอ้ นคา่ ใหมล่ งไป วธิ ีท่ี 3 บนพาเนล AP Element ใหค้ ลิกลากช่ือ AP Element ขนึ้ หรอื ลงไปยงั ตาแหนง่ ใหมท่ ่ตี อ้ งการ

จากรูปเป็นการกาหนด AP Element 2 อนั ใหว้ างทบั กนั โดย AP Div 1 กาหนด Z-Index = 1 ใสส่ พี ืน้ เป็นสมี ว่ ง และ apDir2 กาหนด Z-Index=2 ใสส่ ีเป็นสี ชมพอู อ่ น จะพบวา่ AP Div2 จะทบั AP Div1 5.6 การซอ่ นหรือแสดง AP Element การซอ่ นหรอื แสดง AP Element ทาไดโ้ ดยใชว้ ิธีตา่ งๆ ดงั นี้ วธิ ที ี่ 1 เลือก Option จากช่อง Vis บนพาเนล Properties 1. Default ระบสุ ถานะ

2. Inherit ใชค้ ณุ สมบตั ิตาม AP Element หบกั ท่ีครอบชนิ้ ปัจจบุ นั 3. Visible ใหแ้ สดง AP Element นี้ 4. Hidden ใหซ้ อ่ น AP Element นีไ้ ว้ วธิ ีท่ี 2 บนพาเนล AP Element ใหค้ ลิกท่ีคอลมั น์ จะปรากฏไอคอนแสดง สถานะ 1. AP Element นีจั ะถกู ซอ่ นไว้ 2. AP Element นีจ้ ะแสดงออกมา 3. ไมม่ ไี อคอนไมร่ ะบสุ ถานะ วธิ แี สดงเนือ้ หาทม่ี ีขนาดใหญ่กว่า AP Element 1. Visible ใหข้ ยาย AP Element ออกไปทางขวาและดา้ นลา่ งจนแสดง เนือ้ หาไดค้ รบ 2. Hidden ใหซ้ อ่ นเนือ้ หาสว่ นท่ีเกินไว้ 3. Scroll ซอ่ นเนือ้ หาสว่ นเกิน โดยใหแ้ สดง Scroll Bar 4. Auto ซอ่ นเนือ้ หาสว่ นท่ีเกิน โดยแสดง Scroll Bar เฉพาะกรณีท่ีเนือ้ หา จรงิ ใหญ่เกินขนาด AP Element เทา่ นนั้ 5. ชอ่ งวา่ ง หมายถงึ ไมร่ ะบุ บราวเซอรม์ กั แสดงผลเหมือนกรณี Visible

5.7 การกาหนดใหแ้ สดงเนือ้ หาเพยี งบางส่วน สามารถกาหนดให้ AP Element แสดงเนือ้ หาออกมาเพียงสว่ นและซอ่ นท่เี หลอื ไว้ คณุ สมบตั นิ ีม้ กั ใชร้ ว่ มกบั โปรแกรม JavaScript เพ่ือสรา้ งเอฟเฟกตพ์ เิ ศษตา่ ง ๆ ทงั้ นีก้ ารซอ่ นจะใชว้ ิธีตดั ขอบของเนือ้ หาบางดา้ นออกไป โดยจะกาหนดไดท้ ่อี อปชนั ก ลมุ่ Clip บนพาเนล Properties ดงั นี้ 1. L (Left) ตดั ของซา้ ยออก ตามจาสวนพิกเซลลท์ ่กี าหนด 2. T (Top) ตดั ขอบบนออก ตามจานวนพิกเซลลท์ ่กี าหนด 3. R (Right) ตดั ขอบขวาออก ตามจานวนพกิ เซลท่ีกาหนด 4. B (Bottom) ตดั ขอบลา่ งออก ตามจานวนพกิ เซลลท์ ่กี าหนด 5.8 การสร้าง AP Element ซอ้ นกัน

วิธีที่ 1 คลกิ ลากไอคอน ของ AP Element ยอ่ ออกมาจาก AP Element หลกั โดยนาไปวางท่ีใดบนเว็บเพจ วธิ ที ี่ 2 บนพาเนล AP Element ใหค้ ลกิ ลากช่ือ AP Element ย่อยขนึ้ ไปเหนือ AP Element หลกั 5.9 การจัดเรยี งและการปรับขนาดใหก้ บั AP Element 5.9.1 จัดเรียง AP Element 1. เลือก AP Element ท่ตี อ้ งการจดั เรยี งโดยคลกิ ท่ปี ่มุ Shift เพ่ือเลือก AP Element 2. คลกิ ท่ีเมนู Modify 3. เลอื ก Arrange

4. เลอื กการจดั เรยี ง Align Left จะได้ การจดั เรยี งแบบใหช้ ิดขอบขวา ของ AP Element อย่ใู นแนวเดียวกนั 5.9.2 ปรับขนาด AP Element ใหเ้ ท่ากัน

1. คลิกเลอื ก AP Element ทงั้ หมกท่ตี อ้ งการปรบั ขนาด โดยคลกิ ท่ีป่มุ Shift 2. คลิกท่เี มนู Modify 3. เลอื ก Arrange 4. คลกิ เลือก Make Same Width

5.10 การใช้ AP Element จดั เลยเ์ อาตใ์ หเ้ ว็บเพจ สามารถกาหนกโครงสรา้ งใหก้ บั เว็บเพจไดด้ งั นี้ แปลง AP Element ใหเ้ ป็ นตาราง 1. เลือก AP Element ทงั้ หมด โดยใชป้ ่มุ Shift ในการเลอื ก 2. คลกิ ท่ีเมนู Modify 3. เลือก Convert 4. เลอื ก AP Divs to Table ...

5. จะปรากฏหนา้ ตา่ ง AP divs to Table โดยมี Option หน่วยท่ี 6 การตกแตง่ หน้าเว็บไซตด์ ้วย ภาพ ขอ้ ความ และ มลั ติมีเดยี

6.1 การแทรกรูปภาพใหก้ บั เวบ็ ไซต์ การแทรกรูปภาพ (Image) ใสนหน่วยเรยี นนีจ้ ะไดเ้ รยี นรูก้ ่ียวกบั การนารูปภาพ มาปรกอบในหนา้ เวบ็ ซง่ึ มีสว่ นสาคญั อย่างย่ิงในการตกแต่งหนา้ เวบ็ เพจ ชว่ ยใหเ้ วบ็ เพจมีความน่าสนใจมากขนึ้ ประเภทของไฟลร์ ูปภาพ สาหรบั ประเภทของไฟลร์ ูปภาพท่ีใชง้ านในเวบ็ เพจนนั้ มอี ยหู่ ลายประเภท ซง่ึ จะ แยกประเภทของไฟลเ์ หลา่ นีด้ ว้ ยนามสกลุ ของไฟล์ ไดแ้ ก่ .bmp, .pcx, .tix, .tga, .wmf, .gif, .jpg, .png และอ่นื ๆ แตส่ าหรบั ประเภทของไฟลท์ ่ี สามารถนามาใชบ้ นเว็บเพจและโปรแกรมเว็บบราวเซอรโ์ ดยท่วั ไปสามารถ อา่ นไดม้ ี 4 ประเภท คอื .bmp, .jpg, .gif และ .png วธิ ีท่ี 1 แทรกรูปภาพโดยใช้ Icon image 1. ท่ี หนา้ ตา่ ง Insert คลิกท่แี ท็บ Common 2. คลิกท่ี Icon Image เพ่ือแทรกรูปภาพ 3. จะปรากฏหนา้ ตา่ งใหเ้ ลอื กรูปภาพท่ีจดั เตรยี มไว้ 4. คลกิ ป่มุ Ok เพ่ือแทรกรูปภาพ

5. ปรากฏกลอ่ งขอ้ ความสาหรบั ใส่ Alternate Text ซง่ึ เอาไวส้ าหรบั เป็นคา บรรยายภาพ จะแสดงแทนภาพ เม่ือภาพท่ีกาหนกโหลดขนึ้ มาแสดงไมไ่ ด้ หรอื สาหรบั IE จะแสดงเม่อื มีเมาสอ์ ยเู่ หนือภาพ ถา้ เขียนคาบรรยาย ไวใ้ นไฟลอ์ ่ืนก็สามารถทา ลงิ กไ์ ปหาไดโ้ ดยเลอื กจากหวั ขอ้ Long description 6. คลิก OK ท่กี ลอ่ งขอ้ ความ Image Tag Accessibility Attribute 7. รูปภาพจะถกู แทรกเขา้ มา

วธิ ีที่ 2 การลากรูปภาพมาวางจากหนา้ ตา่ ง Local Files สามารถทาไดด้ งั นี้ 1. ท่หี นา้ ตา่ ง Local Files เลือกรูปภาพท่ีตอ้ งการ 2. ลากรูปภาพมาวางในตาแหน่งท่ีตอ้ งการ 3. จะปรากฏกลอ่ งขอ้ ความสาหรบั ใส่ Alternate Text ซง่ึ เอาไวส้ าหรบั คา บรรยายภาพ 4. คลิก OK 5. จะปรากฏภาพท่ีสว่ นหวั เว็บ

วิธที ่ี 3 การแทรกรูปภาพโดยใชเ้ มนคู าส่งั 1. คลิกเลอื กตาแหน่งท่ีตอ้ งการแทรกรูปภาพ 2. คลกิ ท่ีเมนู File > Image หรอื ใชค้ ียล์ ดั Ctrl + Alt + I 3. จะปรากฏกลอ่ งขอ้ ความใหเ้ ลอื กแหลง่ ท่ีอย่ขู องรูปภาพและเลอื กรูปท่ี ตอ้ งการ 4. คลิก OK เพ่ือแทรกรูปภาพ

5. จะปรากฏกลอ่ งขอ้ ความสาหรบั ใส่ Alternate Text ซง่ึ เอาไวส้ าหรบั เป็น คาบรรยายภาพ 6. คลกิ OK 7. จะปรากฏภาพท่ีสว่ นหวั เว็บ

วิธีที่ 4 การใสร่ ูปภาพโดยใช้ Code ในมมุ มอง Split มขี นั้ ตอนดงั นี้ 1. คลกิ ท่ีตาแหน่งท่ตี อ้ งการใสร่ ูปภาพในมมุ มองออกแบบ 2. คลิกท่ีแถบ Document เลือกมมุ มอง Split จะพบเคอรเ์ ซอรแ์ รากฏใน ตาแหน่งท่ีเลอื ก ในสว่ นนีใ้ หเ้ ลือก สว่ นหวั ของเวบ็ ไซต์ 3. ในสว่ น Code ท่ตี าแหนง่ ท่เี คอรเ์ ซอรอ์ ยู่ ใหพ้ ิมพ์ <img src=\"imge/header.hpg\"width=\"1010\"height=\"125\" border=0/> 4. รูปภาพจะแสดงท่มี มุ มอง Design

6.2 การปรับแต่งรูปภาพ สามารถใชห้ นา้ ตา่ ง Properties ในการปรบั แตง่ รูปภาพไดด้ งั นี้ รายละเอยี ด Property Inspector เมื่อเลอื กทร่ี ูปภาพ - Image Name (Name) กาหนดช่ือใหก้ บั รูปภาพเพ่ือใชส้ าหรบั การเขียน Script อา้ งอิงภาพ - W (Width) กาหนดความยาวของรูปภาพท่ีตอ้ งการใหแ้ สดงผลโดยไมม่ ผี ลกบั ไฟลร์ ูปภาพเดิม

- H (Height) กาหนดความสงู รูปภาพท่ีตอ้ งการใหแ้ สดงผล โดยไมม่ ปี ลกบั ไฟล์ รูปภาพเดมิ - Src (Source File of Image) บอก Folder ท่ใี ชเ้ ก็บไฟลร์ ูปภาพ - Link (Hyperlink(HREF)) ใชก้ าหนด Hyperlink ของรูปภาพท่เี ลือก - Alt (Alternate Text) เพ่มิ คาบรรยายรูปภาพจะปรากฏก็ตอ่ เม่อื รูปภาพไม่ สามารถแสดงผล คือ นาเมาส์ ไปวางบนรูปภาพ - Edit ท่เี พ่มิ เขา้ มาเป็นเคร่อื งมือของ Dreamweaver ทาหนา้ ท่ีแกไ้ ขไฟลร์ ูป โดยตรง - Photoshop แกไ้ ขรูปดว้ ยโปรแกรม Photoshop - Edit Image Setting กาหนดการแกไ้ ขขนาดของไฟล์ - Crop ใชต้ ดั รูปภาพใหไ้ ดข้ นาดท่ีตอ้ งการ - Resample ยกเลกิ การแกไ้ ขรูปภาพครงั้ ลา่ สดุ - Brightness and Contrast ปรบั ความสวา่ งของรูปภาพตามท่ตี อ้ งการ - Sharpen ใชแ้ กไ้ ขความคมชดั ของรูปภาพตามท่ตี อ้ งการ - V space (Vertical Spacing in Pixel) กรหนดระยะหา่ งระหวา่ งรูปภาพกบั วตั ถอุ ่ืน - H Space (Horizontal Spacing in Pixel) กาหนกระยะหา่ งระหวา่ งรูปภาพ กบั วตั ถอุ ่ืน - Border (Border Width in Pixel)

- Align (Alignment) ใชก้ าหนดตาแหน่งการวางของรูปภาพ - Class (CSS Setting) ถา้ เขียน CSS เอาไว้ ตวั เลือกนีจ้ ะใชเ้ ลอื ก CSS ท่เี ขียน ไว้ - Map (Map Name) ใชก้ าหนดช่ือใหก้ บั Map Image ท่ตี อ้ งการอา้ งถงึ - Target (Name) กาหนดตวี เลือกของหนา้ ท่ีเปิด link - Hot spot Tool (Name) เป็นเครอ่ื งท่ีใชร้ ว่ มกบั Map Name 6.2.1 เคร่ืองมอื การปรับแตง่ ภาพ เคร่อื งมือใหมข่ อง Dreamweaver CS6 ท่เี ก่ียวกบั การจดั การรูปนนั้ ไดเ้ พ่มิ ขนึ้ มามาก เชน่ ปรบั ขนาดภาพ, ปรบั ความคมชดั ของภาพ, ปรบั แสง และเครอ่ื งมือท่ีใชใ้ นการบบี อดั ไฟลร์ ูป ซง่ึ ทาใหส้ ามารถจดั การกบั รูปไดง้ ่ายและสะดวกย่งิ ขนึ้ เคร่อื งมือท่ีใช้ จดั การกบั รูปจะอยทู่ ่ี Property inspector โดยจะแสดงเม่ือเราคลกิ ท่รี ูปภาพ ดงั รูป เคร่อื งมอื ท่ีทาใหใ้ ชง้ านไดส้ ะดวก คือ เครอ่ื งมอื ปรบั แตง่ ภาพโดยใช้ Firework โคย เม่อื คลกิ ท่ีป่มุ นี้ จะเป็นการเปิดโปรแกรม Firework ขนึ้ มา (Firework เป็นโปรแกรมท่ี

ทางานคลา้ ยกบั Illustrator) เม่ือเราทาการปรบั แตง่ ภาพเรยี บรอ้ ยแลว้ ภาพท่ีทาการ ปรบั แตง่ แลว้ จะอพั เดทท่ีหนา้ Dreamweaver CS6 อตั โนมตั ิ 6.2.2 เครื่องมือสาหรับการตดั ภาพ เคร่อื งมือนีใ้ ชใ้ นการตดั ภาพเอาเฉพาะสว่ นท่ีเราตอ้ งการเทา่ นนั้ หรอื เรยี กวา่ การ Crop ภาพ ซง่ึ การแกไ้ ขไฟลร์ ูปของ Dreamweaver CS6 จะแกไ้ ขท่ีไฟลต์ น้ ฉบบั ถา้ เราไม่ ตอ้ งการใหแ้ กไ้ ขไฟลต์ น้ ฉบบั ก็ให้ copy ไฟลน์ นั้ และใชไ้ ฟลท์ ่ี copy แทน จะเป็น ทางเลือกท่ีดกี วา่ เพราะปอ้ งกนั ความผดิ พลาดหรอื อาจตอ้ งการใชไ้ ฟลน์ นั้ อีกครงั้ ขนั้ ตอนการการตดั ภาพมดี งั นี้ 1. คลิกเลือกรูปท่ีตอ้ งการตดั 2. ไปท่ี Property inspector เลือกเครอ่ื งมือท่ีใชต้ ดั 3. เม่ือเลอื กเครอ่ื งมือท่ีใชต้ ดั แลว้ จะมีหนา้ ตา่ งคาเตือนขนึ้ มาวา่ การแกไ้ ขไฟลจ์ ะทาท่ี ไฟลต์ น้ ฉบบั ใหเ้ ราคลกิ OK 4. เม่ือคลกิ OK ก็จะมกี ลอ่ งขนึ้ มาในรูป เราสามารถเลอื กปรบั ขนาดพืน้ ท่ี ของรูปท่ีเรา ตอ้ งการใหอ้ ยใู่ นกลอ่ งนนั้ 5. เม่ือปรบั ขนาดเสรจ็ แลว้ ให้ ดบั เบิลคลกิ ในกลอ่ งการตดั ภาพก็จะเสรจ็ สมบรูณไ์ ด้ ภาพตามพนื้ ท่ีและขนาดท่ีตอ้ งการ

6.2.3 เคร่ืองมือปรับความคมชัดของรูป เคร่อื งมือนีใ้ ชใ้ นการปรบั ความคมชดั ของภาพ ซง่ึ การแกไ้ ขไฟลร์ ูปของ Dreamweaver CS6 จะแกไ้ ขท่ไี ฟลต์ น้ ฉบบั ถา้ เราไมต่ อ้ งการใหแ้ กไ้ ขไฟลต์ น้ ฉบบั ก็ ให้ copy ไฟลน์ นั้ และใชไ้ ฟลท์ ่ี copy มาแทน จะเป็นทางเลอื กท่ดี ีกวา่ เพราะปอ้ งกนั ความผดิ พลาดหรอื อาจตอ้ งการใชไ้ ฟลน์ นั้ อีกครงั้ ขนั้ ตอนมดี งั นี้ 1. เลอื กรูปท่ตี อ้ งปรบั ความคมชดั 2. ไปท่ี Property inspector เลอื กเครอ่ื งมือท่ีใชป้ รบั ความคมชดั 3. เม่อื เลือกเครอ่ื งมือท่ีใชต้ ดั แลว้ จะมีหนา้ ตา่ งคาเตอื นขนึ้ มาวา่ การแกไ้ ขไฟลจ์ ะทาท่ี ไฟลต์ น้ ฉบบั ใหค้ ลกิ OK 4. เม่อื คลิก OK ก็จะมีหนา้ ตา่ งขนึ้ มาใหเ้ ราเลือกปรบั ความคมชดั 5. คลกิ OK ก็จะไดค้ วามคมชดั ท่ีตอ้ งการ

6.2.4 เครื่องมือบบี อดั ไฟลร์ ูป โปรแกรม Dreamweaver CS6 มเี ครอ่ื งมอื ท่ีใชใ้ นการบบี อดั ไฟลร์ ูป ซง่ึ การบบี อดั ไฟล์ สามารถเลอื กฟอรเ์ มตไฟลต์ า่ งๆ ไดด้ งั นี้ JPEG, GIF และ PNG และยงั บอก รายละเอียดขนาดของไฟลท์ ่บี บึ อดั ใหท้ ราบ ขอ้ ดีของการบบี อดั คอื จะใหไ้ ฟลร์ ูปนนั้ มี ขนาดเลก็ ทาใหโ้ หลดหนา้ เวบ็ เพจนนั้ ไดเ้ รว็ โดยการแกไ้ ขไฟลร์ ูปของ Dreamweaver CS3 จะแกไ้ ขท่ไี ฟลต์ น้ ฉบบั ถา้ ไมต่ อ้ งการใหแ้ กไ้ ขไฟลต์ น้ ฉบบั กใ็ ห้ copy ไฟลน์ นั้ และ ใชไ้ ฟลท์ ่ี copy มาแทน จะเป็นทางเลือกท่ดี ีกวา่ เพราะปอ้ งกนั ความผดิ พลาดหรอื อาจ ตอ้ งการใชไ้ ฟลน์ นั้ อีกครงั้ ขนั้ ตอนมดี งั นี้ 1. เลอื กรูปท่ตี อ้ งบีบอดั 2. ไปท่ี Property inspector เลือกเครอ่ื งมือท่ีใชบ้ บี อดั รูป 3. เม่อื เลือกเคร่อื งมือท่ีใชบ้ ีบอดั แลว้ จะมีหนา้ ตา่ งขนึ้ มา 4. เลือกฟอรเ์ มตของไฟลท์ ่ตี อ้ งการบบี อดั 5. เม่ือเลอื กฟอรเ์ มตแลว้ ภาพท่ีแสดงผลจะเปลี่ยนไปตามฟอรเ์ มตท่เี ลือก 6. คลิก OK การบีบอดั ไฟลเ์ สรจ็ เรยี บรอ้ ย 6.3 การแทรกไฟลม์ ลั ตมิ ีเดียใหก้ บั เว็บไซต์

ไฟลม์ ลั ตมิ ีเดีย คือไฟลท์ ่สี ามารถแสดงภาพ เสยี ง ขอ้ ความ หรอื ส่อื ต่างๆ ซง่ึ ไฟลท์ ่ี นยิ มนามาใชง้ านกบั โปรแกรม Adobe Dreamweaver CS6 คอื ไฟลจ์ ากโปรแกรม Flash ซง่ึ เป็นโปรแกรมท่นี ิยมนามาใชส้ รา้ งภาพเคล่อื นไหว หรอื ใชเ้ ปิดไฟลว์ ีดีโอ เปิด เพลงผา่ นเว็บไซต์ หรอื แมแ้ ตก่ ารทา Slide ภาพผา่ นเวบ็ ไซต์ ในปัจจบุ นั โปรแกรม Flash ไดร้ บั ความนิยมอยา่ งมากในการเพ่มิ ลกู เลน่ หรอื มลั ตมิ ีเดียตา่ งๆ ใหก้ บั เว็บไซต์ สาหรบั เว็บไซตม์ ีการใสไ่ ฟลป์ ระเภท Flash ซง่ึ ถือวา่ เป็นไฟลข์ นาดใหญ่นนั้ จะมจี ดุ ดอ้ ยตรงท่ีการแสดงผลผา่ นโปรแกรมเว็บบราวเซอรน์ นั้ ตอ้ งใชเ้ วลาในการแสดงผลชา้ ลง แตก่ ็เพ่ิมความมีสสี นั ใหก้ บั เว็บไซตไ์ ดเ้ ป็นอย่างดี วิธีการแทรกไฟลม์ ลั ติมีเดยี Flash ใหก้ บั เว็บไซตม์ ดี งั นี้ 1.วางเคอเซอรใ์ นตาแหน่งท่ีตอ้ งการจะแทรก ในตวั อยา่ งจะแทรกไฟล์ Flash ในสว่ น หวั เวบ็ ไซตแ์ ทนไฟลท์ ่เี ป็นรูปภาพคลิกท่เี มนู Insert > Media > SWF ดงั รูป 2. จะปรากฏหนา้ ตา่ ง Select SWF ใหเ้ ลอื กไฟล์ Flash ท่ตี อ้ งการแทรก โดย ผพู้ ฒั นาเว็บไซตจ์ ะตอ้ งเตรยี มไฟลม์ ลั ตมิ เี ดีย ตา่ งๆ ท่ีจะใหแ้ สดงผลในเว็บไซตใ์ น โฟลเดอรท์ ่ีเกบ็ ใน Site ท่เี ก็บไฟลข์ องเว็บไซตท์ งั้ หมด เม่ือทาการแทรกไฟลภ์ าพ มลั ติมเี ดยี ตา่ งๆ จะทาใหป้ รากฏไฟลท์ ่ตี อ้ งการ ในสว่ นนีเ้ ลือก header คอื ไฟลห์ วั เวบ็ ไซตท์ ่เี ป็น Flash ท่เี ตรยี มไว้ 3. เม่อื เลอื กไฟล์ Flash ท่ตี อ้ งการ 4. คลิก OK 5. จะปรากฏหนา้ ตา่ ง Object Tag Accessibility Attributes เพ่ือใหใ้ สช่ ่ือหรอื คณุ ลกั ษณะตา่ ง ๆ ถา้ ไมต่ อ้ งการท่ีจะปอ้ นขอ้ มลู นีส้ ามารถคลิกท่ีวตั ถเุ พ่ือเพ่มิ คณุ ลกั ษณะท่ีแถบ Preferences ไดใ้ หค้ ลกิ ท่ีป่มุ OK โดยไม่ตอ้ งกาหนดคา่

6. ไฟล์ Flash ท่เี ลือกจะแสดงในตาแหนง่ ท่ตี อ้ งการ 7. คลกิ ท่ีป่มุ Play จากนนั้ จะแสดงผลในพนื้ ท่ี ท่ีกาหนด 8. ไฟล์ Flash ท่แี ทรกเขา้ มาในสว่ นหวั เวบ็ จะแสดงผล 6.4 การจัดข้อความใหก้ บั เวบ็ ไซต์ เว็บไซตส์ ามารถนาเสนอขอ้ มลู ไดห้ ลายรูปแบบ ทงั้ ขอ้ ความ รูปภาพ ตาราฃ เสียง กราฟ ภาพเคล่อื นไหวและมลั ติมเี ดยี ตา่ งๆ แตข่ อ้ มลู พืน้ ฐานท่ีสาคญั ท่ีสดุ คอื การเพ่มิ ขอ้ ความ ซง่ึ การเพ่มิ ขอ้ ความในโปรแกรม Dreamweaver เหมือนกบั การเพ่มิ ขอ้ ความ ลงในโปรแกรมประเภท Microsoft Word คือเรม่ิ จากการคลกิ เลอื กตาแหน่งท่ตี อ้ งการ พิมพข์ อ้ ความเขา้ ไปนอกจากนนั้ ยงั สามารถจดั รูปแบบตวั อกั ษรท่ีแสดงใหม้ ีความ แตกตา่ งกนั ตามความสาคญั ของเนือ้ หาท่วั ๆไป เช่น หวั เร่อื ง (Heading) รูปแบบ ตวั อกั ษร ตา่ งๆไดส้ ามารถใชเ้ ทคนคิ การเลือ่ นเคอรเ์ ซอรก์ ารเลือกขอ้ ความ และการ แกไ้ ขขอ้ ความไดเ้ หมอื นกบั ในโปรแกรมเวริ ด์ โปรเซสเชอรเ์ ชน่ เดยี วกนั ตวั อยา่ งเชน่ 1. ยา้ ยขอ้ ความ ทาไดโ้ ดยเลือกขอ้ ความ แลว้ คลกิ ลากไปวางท่ตี าแหน่งใหมห่ รอื เลือกขอ้ ความ แลว้ ใชค้ าส่งั Edit > Cut (คียล์ ดั Ctrl + x ) จากนนั้ วางเคอรเ์ ซอรต์ รง ตาแหน่งปลายทาง แลว้ ใชค้ าส่งั Edit > Paste (คยี ล์ ดั Ctrl + V) 2. ก็อปปี้ขอ้ ความ ทาไดโ้ ดยเลือกขอ้ ความ แลว้ กดคีย์ Ctrl คา้ งไวพ้ รอ้ มกบั คลิก ลากไปวางท่ีใหมห่ รอื เลอื กขอ้ ความ แลว้ ใชค้ าส่งั Edit > Cut (คียล์ ดั Ctrl + X) จากนนั้ วางเคอรเ์ ซอรต์ รงตาแหน่งปลายทาง แลว้ ใชค้ าส่งั Edit > Paste (คียล์ ดั Ctrl + V) 3. การเวน้ วรรณระหวา่ งขอ้ ความ สามารถกดคยี ์ Ctrl + Shift + เคาะท่ี Space bar จะทาใหส้ ามารถเวน้ วรรณใหก้ บั ตวั อกั ษรเพ่ิมจาก 2 เคาะไดห้ รอื คลกิ ท่พี าเนล Insert

เลอื กแถบ Text (หนา้ Characters) แลว้ เลอื ก Non-BreakingSpace เพ่ือใสต่ วั เวน้ วรรคใหก้ บั ขอ้ ความ 4. การขนึ้ บรรทดั ใหมใ่ นยอ่ หนา้ หนา้ เดมิ เม่อื พมิ พข์ อ้ ความจนเต็มบรรทดั หรอื เต็ม ความกวา้ งของขอบเขตตรงจดุ นนั้ โปรแกรม Adobe Dreamweaver จะปัดขอ้ ความ ขนึ้ บรรทดั ใหมอ่ ตั โนมตั ิ ถา้ กดคีย์ Enter จะถือวา่ เป็นการขนึ้ ย่อหนา้ ใหมซ่ ง่ึ ระยะ บรรทดั จะหา่ กวา่ ปกติ แตถ่ า้ ตอ้ งการปัดขอ้ ความขนึ้ บรรทดั ใหมเ่ อง(ในยอ่ หนา้ เดิม) ก็ ทาได้ 2 วิธีคอื วธิ ีท่ี 1 กดคีย์ Shift + Enter วิธีท่ี 2 ท่พี าเนล Insert ใหค้ ลกิ ท่แี ถบ Text จากนนั้ คลกิ ท่ี V หนา้ Character แลว้ เลอื ก Line Break (Shift + Enter) เพ่ือขนึ้ บรรทดั ใหม่ 6.5 การจัดรูปแบบข้อความ รูปแบบขอ้ ความคอื การกาหนดฟอนต,์ ขนาด, สี, ลกั ษณะตวั หนา-ตวั เอียง ตลอดจน การจดั ตาแหน่งและคณุ สมบตั ิของยอ่ หนา้ ภายในเว็บเพจ สามารถเลือกใชค้ าส่งั จดั รูปแบบขอ้ ความไดห้ ลายวิธีดว้ ยกนั เช่น ใชเ้ คร่อื งมือบนพาเนล Properties การใช้ คาส่งั ในแถบ Text บนพาเนล Insert และใชเ้ มนลู ดั จากการคลิกขวาเป็นตน้ ขนึ้ อยกู่ บั ผใู้ ชง้ านวา่ ตอ้ งการเลือกใหว้ ธิ ีใดเพ่ือใหส้ ะดวกในการทางาน 6.5.1 จดั รูปแบบข้อความดว้ ยพาเนล Properties เครอ่ื งมอื สาหรบั จดั รูปแบบขอ้ ความในพาเนล Properties แบง่ ออกเป็น 2 รูปแบบหลกั ๆ ดงั นี้ 1. จดั รูปแบบดว้ ย HTML เป็นการเรยี กใชค้ าส่งั จากแท็กของ HTML เพ่ือเขา้ สโู่ หมด html ก่อน แลว้ คลกิ กาหนดคาส่งั ตงั้ แตเ่ วอรช์ ่นั CS4 เป็นตน้ มา ไดย้ กเลกิ การ

จดั รูปแบบดว้ ย html แบบเดิมหลาย ๆ คาส่งั ออกไป โดยสนบั สนนุ ใหจ้ ดั รูปแบบดว้ ย CSS แทนมากขนึ้ 2. จดั รูปแบบดว้ ย CSS เป็นการจดั รูปแบบดว้ ยสไตล์ โดยทกุ ครงั้ ท่ีมกี าร คลกิ คาส่งั ใดๆ โปรแกรมจะใหส้ รา้ งสไตล์ CSS ใหมเ่ สมอ แตห่ ากตอ้ งการใชส้ ไตลท์ ่ี สรา้ งไวแ้ ลว้ ก็สามารถคลกิ เลอื กท่ีชอ่ ง Targeted Rule ไดด้ งั รูป 6.5.2 การจดั รูปแบบด้วย CSSStyle ในโปรแกรม Adobe Dreamweaver เวอรช์ ่นั นีไ้ ดป้ รบั ลกั ษณะการจดั รูปแบบ ตา่ งๆ ใหส้ ามารถใชส้ ไตล์ CSS มากขนึ้ โดยไมว่ า่ จะจดั รูปแบบอะไรกต็ ามโปรแกรม จะกาหนดใหเ้ ก็บไวเ้ ป็นสไตล์ CSS ก่อนเสมอ ขอ้ ดคี ือควบคมุ รูปแบบตวั อกั ษรสว่ น ตา่ งๆไดง้ า่ ย (ไมต่ อ้ งใชแ้ ทก็ html). การแกไ้ ขไดท้ ่จี ดุ เดยี วและไฟลเ์ วบ็ เพจมีขนาดเล็ก ขอ้ เสียคือยงุ่ ยากในขนั้ ตอนของการสรา้ งสามารถกาหนด CSSStyle ไดห้ ลายสว่ น ดงั นี้ 6.5.3 สร้างชุดฟอนตต์ ัวอักษร โปรแกรมไดเ้ ตรยี มชดุ ฟอนตต์ วั อกั ษรไวใ้ หแ้ ลว้ บางสว่ น ซง่ึ ถา้ สรา้ งเวบ็ เพจ ภาษาองั กฤษก็สามารถใชไ้ ดท้ นั ที แตถ่ า้ เป็นเว็บเพจภาษาไทยควรสรา้ งชดุ ฟอนต์ ภาษาไทยเพ่มิ ซง่ึ ทาไดต้ ามขนั้ ตอนดงั นี้ 1. การสรา้ งชดุ ฟอนตต์ วั อกั ษรคลกิ CSS ท่ี Properties 2. ท่ชี อ่ ง Font คลิกป่มุ V 3. คลกิ Edit Font List 4. คลกิ เลือก Font ท่ตี อ้ งการ

5. คลกิ ป่มุ <<เพ่ือเพ่ิมฟอนตเ์ ขา้ ไปในชดุ 6. Font จะถกู เพ่มิ เขา้ มาใน Font List (ถา้ ตอ้ งการ) ทาซา้ ขนั้ ท่ี 4-5 เพ่ือ เพ่มิ ฟอนตอ์ ่ืนอีกตามลาดบั 7. คลกิ OK 8. จะมีชดุ ฟอนตต์ วั อกั ษร Angsana New ปรากฏในรายการ 6.5.4 การกาหนดชดุ ฟอนตใ์ หก้ บั ขอ้ ความ ในเวบ็ เพจ สามารถเลือกใชฟ้ อนตไ์ ดห้ ลายฟอนตก์ บั ขอ้ ความบรรทดั เดียวกนั ดงั นนั้ การกาหนดฟอนตจ์ งึ เป็นการเลอื กชดุ ฟอนต์ (แทนท่ีจะเลอื กเพียง ฟอนตใ์ ดฟอนตห์ น่งึ ) แตฟ่ อนตท์ ่ีถกู ใชจ้ รงิ จะขนึ้ อยกู่ บั เครอ่ื งของผชู้ มดว้ ย เม่ือเลอื ก ฟอนตแ์ ลว้ โปรแกรมก็จะใหบ้ นั ทึกรูปแบบท่เี ลอื กไวเ้ พ่ือนามาใชไ้ ดก้ บั ขอ้ ความสว่ นอ่ืน ๆ ในเว็บตอ่ ไปมีขนั้ ตอนการกาหนดชดุ ฟอนตใ์ หก้ บั ขอ้ ความดงั นี้ 1. คลมุ เลือกขอ้ ความท่จี ะกาหนดชดุ ฟอนต์ 2. Properties ท่ชี อ่ ง Font คลิก V เพ่ือเลอื กรายการยอ่ ย 3. เลอื กฟอนต์ Angsana New 4. ขอ้ ความท่เี ลอื กไวจ้ ะเปลีย่ นเป็นชดุ รูปแบบตวั อกั ษร Angsana New 6.5.5 การกาหนดขนาดตัวอกั ษร การกาหนดขนาดตวั อกั ษรทาไดโ้ ดยการกาหนดขนาดท่ชี ่อง Size ท่แี ถบ PROPERTIES มีวธิ ีการกาหนดขนาดตวั อกั ษรดงั นี้ 1. เลอื กขอ้ ความท่ีจะกาหนดขนาดใหก้ บั ตวั อกั ษร 2. คลิกป่มุ CSS

3. ท่ชี ่อง Size คลิกป่มุ V เลือกขนาด 16 กาหนดหน่วยเป็น px 4. ตวั อกั ษรท่ีเลือกไวจ้ ะมีขนาด 16 px ขอ้ ควรรูเ้ ก่ียวกบั ขนาดตวั อกั ษร 1. ถา้ ไมม่ กี ารกาหนดขนาดตวั อกั ษรคอื ชอ่ ง Size มคี า่ เป็น None การ แสดงผลในบราวเซอรจ์ ะขนึ้ กบั การกาหนดคา่ Size ในหมวด Appearance ของ Page Properties และถา้ ใน Page Properties ก็ไมไ่ ดก้ าหนดไวก้ ารแสดงผลจะ ขนึ้ อยกู่ บั การตงั้ คา่ ในบราวเซอรข์ องผชู้ ม 2. การกาหนดขนาดตวั อกั ษรทาได้ 2 วธิ ีคอื กาหนดเป็นคา่ ตวั เลขพรอ้ ม ระบหุ นว่ ยซง่ึ จะทาใหไ้ ดข้ นาดตวั อกั ษรคงท่ีแนน่ อน (ยกเวน้ หนว่ ย %) และการ กาหนดเป็นคา่ สมั พนั ธเ์ ทียบกบั ตวั อกั ษรปกติคอื ตงั้ แต่ xx-small ถึง xx-large รวมทงั้ smaller และ larger 3. ผลของขนาดตวั อกั ษรขนึ้ อยกู่ บั โปรแกรมบราวเซอรแ์ ละประเภทของ ฟอนตท์ ่เี ลอื กใชอ้ ีกดว้ ยดงั นนั้ ในบางกรณีผลลพั ธอ์ าจไมเ่ ป็นไปตามท่ีกาหนดไวก้ ็ได้ 6.6 การกาหนดสตี ัวอกั ษร การกาหนดสีตวั อกั ษร หากกาหนดไวใ้ นหมวด Appearance (CSS) ท่หี นา้ Page Properties จะมผี ลกบั ขอ้ ความทงั้ เว็บเพจแตห่ ากตอ้ งการกาหนดสเี ฉพาะขอ้ ความ บางสว่ นขอ้ ความบางสว่ นขอ้ ความท่เี ลอื กจะเป็นสีตามท่กี าหนด โดยมขี นั้ ตอนการทา ไดด้ งั นี้ 1. เลือกขอ้ ความท่จี ะกาหนดสีใหก้ บั ตวั อกั ษร 2. ท่ีแถบ Properties คลกิ CSS

3. คลิกท่ีชอ่ ง จะปรากฏตารางสีใหเ้ ลือก 4. เลอื กสีนา้ เงินจากตารางสี 5. ท่ีช่อง จะเปลีย่ นเป็นสีนา้ เงนิ และดา้ นขา้ งจะปรากฏรหสั สีนา้ เงนิ #00F 6. ขอ้ ความท่เี ลือกไวจ้ ะเป็นสนี า้ เงินตามสที ่เี ลือก 6.7 แทรกสัญลกั ษณพ์ เิ ศษในเวบ็ เพจ สามารถแทรกสญั ลกั ษณพ์ เิ ศษ อยา่ งเชน่ Copyright หรอื Tradermark ดว้ ยการ พมิ พล์ งในเว็บเพจไดด้ งั นี้ 1. คลิกท่ี <> HTML ในแถบ Properties 2. วางเคอรเ์ ซอรต์ รงตาแหน่งท่ีตอ้ งการแทรกสญั ลกั ษณพ์ ิเศษ 3. ท่ีชอ่ ง Horz คลิกป่มุ V เลอื ก Center กาหนดใหอ้ ยจู่ ดุ กง่ึ กลาง 4. คลกิ แถบ Text 5. คลิกเลอื ก BR เลอื กรายการยอ่ ย V 6. เลอื ก สญั ลกั ษณ์ Copyright ท่ตี อ้ งการแทรก 7. สญั ลกั ษณ์ Copyright ท่แี ทรกจะปรากฏในตาแหน่งท่ีกาหนด พิมพข์ อ้ ความ เพ่มิ เติม 6.8 การกาหนดยอ่ หน้าใหข้ อ้ ความ ในการกาหนดยอ่ หนา้ ใหก้ บั ขอ้ ความในเว็บไซตน์ นั้ โปรแกรม Adobe Dreamweaver มเี คร่อื งมอื ในการจดั การกบั ขอ้ ความเพ่ือใหส้ ามารถจดั รูปแบบของ ขอ้ ความท่แี สดงในเว็บไซตไ์ ด้ ซง่ึ มีขนั้ ตอนดงั นี้

1. เลอื กขอ้ ความท่ตี อ้ งการกาหนดยอ่ หนา้ 2. เลือกมมุ มอง Split 3. คลิกแถบ Text 4. คลกิ Paragraph เพ่ือจดั ย่อหนา้ ใหก้ บั ขอ้ ความ 5. ท่ีมมุ มอง Split จะสามารถตรวจสอบ การกาหนดยอ่ หนา้ โดยจะปรากฏ แท็ก <P>……</P> ท่ขี อ้ ความท่ีเลอื กไว้ 6. คลิก บรรทดั แรกของย่อหนา้ เพ่ิมการเยอื้ งโดยคลกิ ท่ี Characters: Non-Breaking space 10 ครงั้ 7. ขอ้ ความจะถอยห่าง 10 ตวั อกั ษรตามจานวนครงั้ ท่ีคลิก 6.9 การใส่ลิสตล์ าดับในเนือ้ หา การใสล่ ิสตล์ าดบั ในเนือ้ หาใหก้ บั ขอ้ มลู จะทาใหก้ ารอ่านขอ้ ความดเู ป็นระเบียบย่ิงขนึ้ ถา้ หากเนือ้ หานนั้ มีขอ้ มลู ท่ีตอ้ งการใสร่ ายการย่อย ซง่ึ มีขนั้ ตอนการใสล่ ิสตเ์ นือ้ หาดงั นี้ 1. คลิกตาแหนง่ ท่ตี อ้ งสรา้ งขอ้ ความรายการย่อย 2. คลกิ แถบ Text 3. คลกิ ท่ปี ่มุ li (List Item) 4. เลอื กมมุ มอง Split ในแท็ก <li>……. ใสข่ อ้ ความตอ้ งการกาหนดเป็นลสิ ต.์ ..... </li> 5. คลิกท่มี มุ มอง Design ฝ่ังขวามอื กดEnter เพ่ือเพ่มิ รายการลสิ ตพ์ ิมพร์ ายการ ลสิ ตต์ ามท่ตี อ้ งการชดุ คาส่งั จะถกู สรา้ งใหเ้ องอตั โนมตั ิ ตามท่ีเพ่มิ ในมมุ มองออกแบบ

6. หากตอ้ งการเปล่ียนขอ้ มลู ใหเ้ ป็นแบบเรยี งลาดบั ก็สามารถคลมุ เลือกขอ้ มลู รายการย่อยทงั้ หมด 7. คลกิ ท่ี Text เลอื กป่มุ ol (Ordered List) ขอ้ มลู ท่เี ลือกจะกลายเป็นตวั เลขแบบ เรยี งลาดบั 8. คลิกท่ปี ่มุ Live View เพ่ือดผู ลลพั ธ์ 9. จะไดร้ ายการขอ้ มลู ตวั เลขแบบเรยี งลาดบั 6.10 การสร้างเส้นแบง่ เนือ้ หา การสรา้ งเสน้ แบง่ เนือ้ หา เพ่ือใหผ้ เู้ ขา้ ชมมองภาพรวมของเนือ้ หาไดอ้ ยา่ งชดั เจน ย่งิ ขนึ้ โดยการสรา้ งเสน้ แบง่ เนือ้ หาสามารถแทรกเสน้ แนวนอนสาหรบั ค่นั หรอื แบง่ เนือ้ หาภายในเว็บเพจไดด้ งั นี้ 1. คลกิ ตรงจดุ ท่ีจะแทรกเสน้ แบง่ เนือ้ หา 2. เลือกเมนู Insert เลอื ก HTML เลือก Horizontal Rule 3. จะไดเ้ สน้ แบง่ เนือ้ หาตามกาหนด 6.10.1 การกาหนดสเี ส้นแบ่งเนือ้ หา สามารถกาหนดสีใหก้ บั เสน้ แบง่ เนือ้ หาสามารถทาไดแ้ ตค่ ณุ สมบตั นิ ีจ้ ะแสดง ผลไดบ้ นบางบราวเซอรเ์ ท่านนั้ มีวิธีการกาหนดดงั นี้ 1. คลกิ ขวาบนเสน้ แบง่ เนือ้ หาแลว้ เลอื กคาส่งั Edit Tag <hr 2. จะปรากฏหนา้ ตา่ ง Tag Editor-hr คลกิ เลอื ก Browser Specific 3. ท่ชี อ่ ง Color: คลิกเลอื ก สีเขียวจะปรากฏรหสั สีเขียว #00FF66

4. คลกิ OK 5. บนั ทกึ กด Ctrl + S กด F12 เพ่ือดผู ลลพั ธผ์ า่ นโปรแกรมเวบ็ บราวเซอร์ หน่วยที่ 7 การสร้างตารางเพอ่ื ใช้งานในเวบ็ ไซต์ 7.1 รู้จกั กบั ตาราง ตาราง (Table) เป็นทงั้ รูปแบบการแสดงขอ้ มลู และการจดั เรยี งขอ้ มลู รูปแบบ ของตารางมีความหลากหลาย ทงั้ ทางดา้ นโครงสรา้ ง โดยมีสว่ นประกอบท่ีสาคญั ของ ตาราง คอื “แถว” (หรอื เรยี กวา่ สดมภ)์ และ “คอลมั น”์ ตารางมีสว่ นชว่ ยในการจดั ระเบียบขอ้ ความและรูปภาพ สามารถเพ่มิ เติมคณุ สมบตั ิใหก้ บั ตารางได้ ไมว่ า่ จะเป็น การใสส่ ี ขอ้ ความ รูปภาพ รูปภาพพนื้ หลงั ใหก้ บั ตารางใหต้ รงกบั ความตอ้ งการของ ผพู้ ฒั นาเว็บไซตไ์ ด้ โครงสรา้ ง ของตารางประกอบดว้ ยตาราง (Table) ประกอบดว้ ย แถว (Row) และคอลมั น์ (Column) 7.2 การสร้างตาราง การสรา้ งตารางโดยใชค้ าส่งั เมนู เป็นวธิ ีท่ผี สู้ รา้ งสามารถกาหนดจานวน แถว คอลมั น์ ระยะหา่ งระหวา่ งแถวและคอลมั นจ์ ากกลอ่ งโตต้ อบตอนสรา้ งตาราง ซง่ึ มขี นั้ ตอนดงั นี้

1.คลิกท่ีเมนู Insert > Table หรอื กดป่มุ คียล์ ดั Ctrl + Alt + T 2.จะปรากฏกลอ่ งขอ้ ความ Table กาหนดคณุ สมบตั ิของตารางตามตอ้ งการ ดงั นี้ รายละเอียดของการกาหนดคณุ สมบตั ิใหก้ บั ตารางสามารถกาหนดได้ ดงั นี้ Table size : กาหนดขนาดของตาราง สามารถกาหนดไดด้ งั นี้ -Rows : กาหนดจานวนแถวในตาราง -Columns : กาหนดจานวนคอลมั นใ์ นตาราง -Table width : กาหนดความกวา้ งของตาราง โดยมีหน่วยเป็น Pixels หรอื Percent -Border thickness : กาหนดความหนาของตาราง -Cell padding : กาหนดระยะหา่ งระหวา่ งขอบเซลกบั ขอ้ ความภายในเซลล์ -Cell spacing : กาหนดระยะหา่ งระหวา่ งเซลลท์ งั้ แนวตงั้ และ แนวนอน Header : กาหนดรูปแบบหวั ขอ้ ของเซลลใ์ นตาราง โดยสามารถกาหนดได้ 4 รูปแบบดงั นี้ -None : ไมม่ ีการกาหนดหวั ขอ้ ของขอ้ มลู ในตาราง -Left : กาหนดใหค้ อลมั นแ์ รกเป็นหวั ขอ้ ของตาราง -Top : กาหนดใหแ้ ถวบนสดุ เป็นหวั ขอ้ ของตาราง -Both : กาหนดใหท้ งั้ แถวและคอลมั นแ์ รกเป็นหวั ขอ้ ของตาราง Accessibility : กาหนดการเขา้ ถงึ ขอ้ มลู ในตาราง สามารถกาหนดไดด้ งั นี้ -Caption : กาหนดขอ้ ความเพ่ือใชเ้ ป็นหวั ขอ้ ของตาราง -Summary : เขียนคาอธิบายเก่ียวกบั ตาราง แสดงใหเ้ ห็นบนหนา้ เว็บ 3.คลิกป่มุ OK เพ่ือสรา้ งตาราง

4.จะไดต้ าราง คาส่ังเกย่ี วกบั ตาราง ในมุมมอง Code

<table width =”800” border = ”0” >..</table> เป็นคาส่งั เรม่ิ ตน้ ท่ใี ชใ้ นการสรา้ ง ตารางซง่ึ เป็นการกาหนดจดุ เรม่ิ ตน้ และสิน้ สดุ ของตาราง โดยกาหนดความกวา่ ง ทงั้ หมดของตารางเทา่ กบั 800 pixels กาหนดเสน้ ขอบตารางมีคา่ เทา่ กบั 0 หรอื ไมใ่ ห้ แสดงงเสน้ ขอบตาราง Cell padding = ”0” กาหนดระยะห่างระหวา่ งขอบเซลลก์ บั ขอ้ ความภายในเซลลม์ ีคา่ เทา่ กบั 0 กาหนด Cell spacing = “0” ระยะหา่ งระหวา่ งแตล่ ะเซลลท์ งั้ แนวตงั้ และแนวนอนมีคา่ เทา่ กบั 0 Summary = “ตารางรายละเอียดขอ้ มลู ” กาหนดคาอธิบายใหก้ บั ตารางคอื ตาราง รายละเอยี ดขอ้ มลู <tr>..</tr> เป็นการกาหนดจดุ เรม่ิ ตน้ ของแถว (Row) <td >..</td> เปน้ คาส่งั ในการกาหนดคา่ เรม่ิ ตน้ ของคอลลมั น์ 7.3 เคร่อื งมือทใ่ี ช้ในการจดั ตาราง

เม่ือสรา้ งตารางเรยี บรอ้ ยแลว้ สามารถปรบั เพ่มิ เติมคณุ สมบตั ิใหก้ บั ตารางท่สี รา้ ง ได้ โดยใชห้ นา้ ตา่ ง Properties โดยมีรายละเอียดท่สี ามารถกาหนดตามคาอธิบาย ดงั นี้ 1.Table Name : ช่ือตาราง 2.จานวนแถวและคอลมั น์ Number of Rows : จานวนแถวในตาราง Number of Columns : จานวนคอลมั นใ์ นตาราง 3.Width : ความกวา้ งของตารางมีหน่วยเป็น Pixels 4.กาหนดระยะหา่ ง Space Within Cell : ระยะหา่ งระหวา่ งขอบเซลลก์ บั ขอ้ ความภายในเซลล์ Space Between Cell : กาหนดระยะหา่ งระหวา่ งเซลลแ์ ตล่ ะเซลลท์ งั้ แนวตงั้ และแนวนอน 5.Border Width : กาหนดความกวา้ งของเสน้ ขอบ 6.Alignment : การจดั ตาแหนง่ ตารางโดยสามารถกาหนดไดต้ ามตวั เลือกดงั นี้ (1) Default : ไม่มีการกาหนดคา่ ใหใ้ ชค้ า่ ท่ีกาหนดอตั โนมตั ิในโปรแกรม (2) Left : กาหนดตาแหนง่ ตารางใหช้ ิดซา้ ย (3) Center : กาหนดตาแหนง่ ตารางใหจ้ ดั กงึ่ กลาง (4) Right : กาหนดตาแหนง่ ตารางใหช้ ิดขวา 7.Class :กาหนดรูปแบบ CSS Style ท่ใี ชใ้ นตาราง

7.4 การแทรกแถวและคอลมั นข์ องตาราง ในการแทรกแถวและคอลมั นใ์ นโปรแกรม Adobe Dreamweaver CS6 สามารถ แทรกโดยใชแ้ ถบ Layout ในการจดั การกบั ตารางท่ีไดส้ รา้ งไวแ้ ลว้ ซง่ึ โดยสามารถ แทรกแถวและคอลมั นก์ บั ตารางไดด้ งั นี้ 7.4.1 การแทรกแถวและคอลัมนโ์ ดยใชแ้ ถบ Layout การแทรกแถวและคอลมั นโ์ ดยใชแ้ ถบ Layout ซง่ึ สามารถแทรกตาราง แถว คอลมั น์ การผสานเซลล์ เพ่ือจดั การกบั ตารางในรูปแบบตา่ งๆ การแทรกแถวและ คอลมั นส์ ามารถทาไดด้ งั นี้ เครอ่ื งมือท่ีใชใ้ นการจดั การตารางมีดงั นี้ 1. Table: สรา้ งสาหรบั สรา้ งตารางใหม่ 2. Insert Row Above: แทรกแถวดา้ นบนของเซลลท์ ่เี ลอื ก 3. Insert RowBelow: แทรกแถวดา้ นลา่ งของเซลลท์ ่เี ลอื ก 4. Insert Column to the Left: แทรกคอลมั น์ ทางดา้ นซา้ ยของเซลลท์ ่ีเลือก 5. Insert Column to the Right: แทรกคอลมั น์ ทางดา้ นขวาของเซลลท์ ่เี ลอื ก 7.4.2 การแทรกแถวและคอลัมนโ์ ดยเมนู Insert 1. การแทรกแถว ในการแทรกแถวใหก้ บั ตารางท่ไี ดส้ รา้ งไวแ้ ลว้ โดยผสู้ รา้ งสามารถเลอื กไดว้ า่ ตอ้ งการท่ีจะแทรกแถวดา้ นบนหรอื ดา้ นลา่ งของตาราง โดยสามารถแทรกแถวไดต้ าม ขนั้ ตอนดงั นี้

(1) คลิกเลือกท่ตี าแหนง่ ท่ีตอ้ งการแทรกในตาราง คลิกเมนู Insert > Table Object (2) เลอื ก Insert Row Above ถา้ ตอ้ งการแทรกแถวดา้ นบนของตาแหนง่ ท่ี เลือก หรอื เลือก Insert Row Below ถา้ ตอ้ งการแทรกแถวดา้ นลา่ งของตาแหน่งท่เี ลือก (3) จะไดแ้ ถวของตารางท่แี ทรกเขา้ มา 2. การแทรกคอลัมน์ ในการแทรกคอลมั ใหก้ บั ตารางท่ไี ดส้ รา้ งไวแ้ ลว้ โดยผสู้ รา้ งสามารถเลอื ก ไดว้ า่ ตอ้ งการท่ีจะแทรกคอลมั นด์ า้ นซา้ ยหรอื ดา้ นขวาของตาแหนง่ ท่ีเลือกในตาราง โดยสามารถแทรกคอลมั นไ์ ดต้ ามขนั้ ตอนดงั นี้ (1) คลิกเลือกท่ีตาแหน่งท่ตี อ้ งการแทรกในตาราง คลเิ มนู Insert > Table Object (2) เลือก Insert ColumnLeft ถา้ ตอ้ งการแทรกคอลมั นด์ า้ นซา้ ยของ ตาแหน่งท่เี ลอื กหรอื เลือก Insert Column Right ถา้ ตอ้ งการแทรกคอลมั นด์ า้ นขวา ของตาแหน่งท่เี ลอื ก (3) จะไดค้ อลมั นข์ องตารางตามท่ีแทรกเขา้ มา 7.4.3 การขยายขนาดใหก้ ับแถวและคอลมั น์ การขยายขนาดใหก้ บั แถวและคอลมั นส์ ามารถทาไดด้ งั นี้ 1. คลิกท่เี สน้ ของตารางท่ีตอ้ งการขยายนาเมาสม์ าคลิกท่จี ดุ สีดาดา้ นลา่ ง เมาสจ์ ะกลายเป็นลกู ศรท่ีสามารถคลกิ แลว้ ลากขยายขนาดของตาราง

2. นาเมาสม์ าวางท่จี ดุ สดี าดา้ นลา่ งจากนนั้ เมาสจ์ ะปรากฏเป็นลกู ศรทาการ คลิกแลว้ ลากลงตามขนาดเซลลต์ ารางท่ีตอ้ งการ 3. เม่ือปลอ่ ยเมาสจ์ ะไดต้ ารางจะถกู ขยายขนาดตามตอ้ งการ 7.5 การผสานเซลลแ์ ถวและคอลมั นข์ องตาราง การผสานเซลลแ์ ถวและคอลมั นข์ องตาราง คือ การรวมเซลลแ์ ถวและคอลมั น์ ตามท่กี าหนดใหเ้ ป็นเซลลเ์ ดียวกนั โดยมีขนั้ ตอนการผสานเซลล์ ดงั นี้ 1.เลอื กแถวและคอลมั นท์ ่ตี อ้ งการผสานเซลล์ 2. คลิกท่ีเมนู Modify > Table > Merge Cells หรอื กดคยี ล์ ดั Ctrl + Alt + M 3. เซลลแ์ ถวและคอลมั นท์ ่เี ลือกจะผสานเซลลเ์ ป็นเซลลเ์ ดียวกนั

7.6 การใส่เส้นใหต้ าราง ตารางท่ีไมม่ ีการใสเ่ สน้ เม่อื กด F12 เพ่ือแสดงผลผา่ นโปรแกรมเวบ็ บราวเซอรจ์ ะ ไมป่ รากฏเสน้ ตารางแตจ่ ะเหน็ เป็นโครงรา่ งของตารางเม่ืออยใู่ น มมุ มองออกแบบ เทา่ นนั้ ดงั นนั้ ถา้ ตอ้ งการใหเ้ ม่อื แสดงผลเป็นเสน้ ตารางสามารถใสเ่ สน้ ขอบตารางได้ ซง่ึ การใสเ่ สน้ ใหก้ บั ตารางสามารถทาได้ โดยการใชเ้ ครอ่ื งมือ Properties Inspector ท่ี ช่อง Border แลว้ กาหนดขนาดความกวา้ งของเสน้ ใหก้ บั ตาราง ตามขนั้ ตอนดงั นี้ 1.เลอื กตารางท่ีตอ้ งการ 2.ท่หี นา้ ตา่ ง Properties Inspector ท่ชี ่อง Border กาหนดขนาดของเสน้ ตาราง =1 3.จะไดเ้ สน้ ขอบของตาราง

4.เม่อื กด F12 เพ่ือแสดงผลลพั ธจ์ ะพบเสน้ ตารางตามท่ีกาหนด 7.7 การใสส่ ใี หต้ าราง การใสส่ ใี หก้ บั ตารางนนั้ สามารถเลือกท่จี ะใสส่ ีเสน้ ใหก้ บั ตารางหรอื ใสส่ เี ซลลท์ ่ี ตอ้ งการใหก้ บั ตารางได้ โดยในโปรแกรม Adobe Dreamweaver CS5 สามารถทาได้ ดงั นี้ 7.7.1 การใส่สเี สน้ ใหต้ าราง การใสส่ เี สน้ ใหก้ บั ตารางสามารถทาไดด้ งั นี้ 1.คลิกเลือกตารางท่ีตอ้ งการใสส่ ีเสน้ 2.คลกิ เลือกคาส่งั Modify > Edit Tag 3.จะปรากฏหนา้ ตา่ ง Tag Editor – table 4.เลอื กแท็บ Browser Specific 5.ท่ชี ่อง Border color เลือกสที ่ีตอ้ งการ 6.เม่อื ไดส้ เี สน้ ท่ตี อ้ งการแลว้ คลกิ OK

7.จะไดส้ ีเสน้ ตามท่ตี อ้ งการ 7.7.2 การใส่สพี นื้ หลังใหก้ บั ตาราง การใสส่ พี ืน้ หลงั ใหก้ บั ตารางสามารถทาได้ ดงั นี้ 1.คลิกเลือกตารางท่ีตอ้ งการใสส่ พี ืน้ หลงั 2.คลกิ เลอื กคาส่งั Modify >> Editor Tag 3.จะปรากฏหนา้ ตา่ ง Tag Editor – table 4.เลือกแทบ็ General 5.ท่ชี อ่ ง Background color เลือกสีท่ีตอ้ งการ