การสร้างเว็บเบื้องต้น

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 เลือกสีท่ีตอ้ งการ