√â“߇«Á∫‡æ®Õ¬à“ßßà“¬¥â«¬ KompoZer ‚ª√·°√¡®—¥°“√ √â“߇«Á∫‡æ® ‚¥¬°“√·°â‰¢„π·∫∫ WYSIWYG (What You See Is What You Get) „™âß“πßà“¬¡“° ºŸâ„™âß“π‰¡à®”‡ªìπμâÕ߇√’¬π√Ÿâ¿“…“ HTML ¡“°àÕπ°Á “¡“√∂„™âß“π‰¥â ‚ª√·°√¡π’È∑”ß“π §≈⓬°—∫‚ª√·°√¡ Dreamweaver
‚ª√·°√¡®—¥°“√ √â“߇«Á∫‡æ® ‚¥¬°“√·°â ‰¢„π·∫∫ WYSIWYG (What You See Is What You Get) „™âß“πßà“¬¡“° ºŸâ „™âß“π‰¡à®”‡ªìπμâÕ߇√’¬π√Ÿâ¿“…“ HTML ¡“°àÕπ°Á “¡“√∂„™âß“π‰¥â ‚ª√·°√¡π’È∑”ß“π§≈⓬°—∫ ‚ª√·°√¡ Dreamweaver
ë °“√‡√’¬°„™âß“π KompoZer 1. §≈‘È°ªÿÉ¡ Start ‡≈◊Õ° All Programs 2. ·≈⫧≈‘È°‡≈◊Õ° KompoZer > KompoZer 3. À√◊Õ¥—∫‡∫‘È≈§≈‘È°™Õ√å짗삪√·°√¡ KompoZer
4. ®–· ¥ßÀπâ“μà“߇∑§π‘§·≈–Àπâ“μà“ß‚ª√·°√¡∑—π∑’
ë Àπâ“μ“‚ª√·°√¡ ¡“¥Ÿ„πÀπâ“μà“ß‚ª√·°√¡°—π«à“¡’‡¡πŸ„Àâ ‰¥â‡≈◊Õ°„™âß“π°—π∫â“ß 1. ‡¡πŸ§” —Ëß„π°“√„™âß“π‚ª√·°√¡ 2. Composition Toolbar ∑Ÿ≈∫“√åøíß°å™—π ”À√—∫„™âß“πÀ≈—°Ê „π°“√ √â“߇«Á∫ 3. Format Toolbar ‡§√◊ËÕß¡◊Õ„π°“√·°â ‰¢‡«Á∫‡æ® ∑—Èß√Ÿª·∫∫ ·∫Á°°√“«π¥å æ“√“°√“ø ¢π“¥ °“√®—¥ μ”·Àπàß ‡ªìπμâπ 4. Tab Browser Toolbar ·∑Á∫∑’Ë· ¥ß¢÷Èπ¡“‡æ◊Ëՙ૬„À⇪հ “√‰¥âÀ≈“¬·∑Á∫μ“¡μâÕß°“√ 5. æ◊Èπ∑’Ë∑”ß“π ”À√—∫ æ‘¡æ委 —Ëß æ‘¡æå´Õ√å ‚§â¥ · ¥ß°“√æ√’«‘« ‡«Á∫‡æ® 6. Edit Mode Toolbar ‚À¡¥ ”À√—∫„π°“√· ¥ß ‡Õ° “√„π√Ÿª·∫∫¢Õß Normal view, HTML Tags view, HTML source view ·≈– Preview mode 7. Site Manager à«π®—¥°“√ ®—¥‡°Á∫‡°’ˬ«°—∫ ‡«Á∫‡æ®μà“ßÊ ∑’Ë¡’„π‡«Á∫‰´μå 8. Status Toolbar · ¥ß ∂“π–‡¡◊ÕË π”‡¡“ å ‰ª«“ß ≈ß∫π·∑Á°´å HTML
Kompozer ( 168
ë °“√ √â“ß ·°â‰¢‡«Á∫‡æ® ¡“¥Ÿ°—π«à“∂Ⓡ√“μâÕß°“√ √â“߇«Á∫‡æ®„À¡à®–μâÕß∑”Õ¬à“߉√
1. ª°μ‘‡«≈“‡ªî¥Àπâ“μà“ß‚ª√·°√¡¡“ °Á®–· ¥ß‡æ® ‡Õ° “√«à“ßÊ 2. ∂â“μâÕß°“√ √â“߇հ “√„À¡àÕ°’ °Á„Àâ§≈‘°È ªÿ¡É ∑Ÿ≈∫“√å New ·≈⫇≈◊Õ° Page in New Tab ‡ªî¥Àπâ“μà“ß ‡Õ° “√„À¡à„π·∑Á∫À√◊Õ Page in New Window ‡ªî¥‡æ®«à“ßÊ „πÀπâ“μà“ß„À¡à 3. À√◊Õ‰ª§≈‘È°‡¡πŸ File > New 4. „π°√≥’μÕâ ß°“√π”‰ø≈å„πŒ“√奥‘ °å¡“·°â ‰¢ °Á„Àâ §≈‘È°‡¡πŸ File ·≈⫇≈◊Õ° Open File 5. ®–· ¥ß‰¥Õ–≈ÁÕ°∫ÁÕ°´å Open HTML File „Àâ§≈‘°È ‡≈◊Õ°μ”·Àπàß®—¥‡°Á∫‰ø≈å 6. §≈‘È°‡≈◊Õ°‰ø≈å‡Õ° “√ 7. ·≈⫧≈‘°È ªÿ¡É Open ‡æ◊ÕË ‡ªî¥‰ø≈å‡Õ° “√ ¡“·°â ‰¢ 8. ®–· ¥ß‡Õ° “√ html „πÀπâ“μà“ß‚ª√·°√¡
169 ) Kompozer
9. À“°‡ªî¥‡Õ° “√‡æ‘Ë¡Õ’°°Á®–· ¥ß·∑Á∫‡Õ° “√ „À¡àª√“°Ø¢÷Èπ
ë °“√∫—π∑÷°‡Õ° “√ ¡“¥Ÿ°“√∫—π∑÷°‡Õ° “√°—π∫â“ßÀ≈—ß®“°∑’ˇ√“‰¥â ‰ª √â“߇հ “√ 1. §≈‘È°‡¡πŸ File > Save As... 2. §≈‘È°‡≈◊Õ°‚ø≈‡¥Õ√å„π°“√®—¥‡°Á∫‰ø≈å 3. æ‘¡æå™◊ËÕ‰ø≈å≈ß„π™àÕß File name : 4. ·≈⫧≈‘È°ªÿÉ¡ Save ‡æ◊ËÕ∫—π∑÷°‡Õ° “√
ë √â“ߢâÕ§«“¡ ¡“¥Ÿ°“√ √â“ߢâÕ§«“¡„π·∫∫μà“ßÊ ¥Ÿ«à“®–μâÕß∑”Õ¬à“߉√
1. §≈‘È°·∑Á∫ Normal 2. ·≈â«æ‘¡æå¢âÕ§«“¡∑’ËμâÕß°“√≈߉ª
Kompozer ( 170
3. μâÕß°“√¢÷Èπ∫√√∑—¥„À¡à·∫∫‰¡à‡«âπ∫√√∑—¥ „Àâ°¥ ·ªÑπ Enter 4. ·≈â«æ‘¡æå¢âÕ§«“¡μàÕ‰ª
5. ∂â“μâÕß°“√ √â“ߢâÕ§«“¡·∫∫‡«âπ∫√√∑—¥ „Àâ§≈‘°È ‡¡“ å≈߬—ß∫√√∑—¥∑’ËμâÕß°“√ 6. ·≈⫧≈‘È°‡≈◊Õ°≈‘ μå∫ÁÕ°´å Paragraph
ë °“√ √â“ß Heading ‡ªìπ°“√ √â“ߢâÕ§«“¡„π·∫∫ Heading1 ∂÷ß Heading6 ‡æ◊ÕË ‡πâπÀ—«¢âÕ À√◊ÕÀ—«¢âÕÀ≈—°„Àâ°∫— ‡«Á∫‡æ®
1. æ‘¡æå¢âÕ§«“¡∑’ËμâÕß°“√≈߉ª 2. ·≈⫧≈‘È°≈‘ μå∫ÁÕ°´å Heading1
3. §≈‘°È ‡≈◊Õ°¢âÕ§«“¡‡¥‘¡ 4. ·≈⫧≈‘È°≈‘ μå∫ÁÕ°´å Heading6
5. °“√· ¥ß¢âÕ¡Ÿ≈∑’ËÕ¬Ÿà §≈‘È°¬—ß∫√√∑—¥∑’ËμâÕß°“√ 6. ·≈⫧≈‘È°≈‘ μå∫ÁÕ°´å Address
7. „Àâ· ¥ß„π·∫∫ Preformat „Àâ§≈‘°È ‡≈◊Õ°¢âÕ§«“¡ 8. ‡≈◊Õ°≈‘ μå∫ÁÕ°´å Preformat
171 ) Kompozer
ë °“√°”Àπ¥øÕπμå·≈– ’ À“°‡√“μâÕß°“√®–°”Àπ¥øÕπμå·≈– ’„π·∫∫∑’ËμâÕß°“√°Á “¡“√∂∑”‰¥â
1. §≈‘È°‡≈◊Õ°¢âÕ§«“¡∑’ËμâÕß°“√·°â ‰¢ 2. ·≈⫧≈‘È°‡≈◊Õ°øÕπμå
3. ‡≈◊Õ°¢âÕ§«“¡ 4. §≈‘È°ªÿÉ¡ Choose color for text 5. „π‰¥Õ–≈ÁÕ°∫ÁÕ°´å Text Color „Àâ§≈‘È°‡≈◊Õ° ’ 6. ·≈⫧≈‘È°ªÿÉ¡ OK
7. ‡¡◊ËÕ°≈—∫¡“„πÀπâ“μà“߇«Á∫ ¢âÕ§«“¡®–‡ª≈’Ë¬π ’ ‰ª∑—π∑’ 8. °”Àπ¥ ’·∫Á°°√“«π¥åÀ≈—ߢâÕ§«“¡ „Àâ§≈‘È°‡≈◊Õ° ¢âÕ§«“¡∑’ËμâÕß°“√ 9. ·≈⫧≈‘È°ªÿÉ¡ Choose color for background
Kompozer ( 172
10. ®–· ¥ß‰¥Õ–≈ÁÕ°∫ÁÕ°´å„Àâ§≈‘È°‡≈◊Õ° ’ 11. ·≈⫉ª§≈‘È°ªÿÉ¡ OK 12. ®–· ¥ß·∑Á∫ ’·∫Á°°√“«π¥åÀ≈—ߢâÕ§«“¡ 13. ·μà∂“â μâÕß°“√‡πâπ ’‡©æ“–∫“ߢâÕ§«“¡°Á “¡“√∂ ∑”‰¥â ‚¥¬‰ª§≈‘È°‡¡“ å‡≈◊Õ°¢âÕ§«“¡ 14. ·≈⫧≈‘°È ªÿ¡É Choose highlight color for text
15. §≈‘È°‡≈◊Õ° ’∑’ËμâÕß°“√ 16. ·≈⫧≈‘È°ªÿÉ¡ OK 17. ®–· ¥ß·∑Á∫ ’‡æ◊ËÕ‡πâπ‡©æ“– à«π¢âÕ§«“¡∑’Ë μâÕß°“√
173 ) Kompozer
ë °“√®—¥μ”·ÀπàߢâÕ§«“¡ „π°“√· ¥ß¢âÕ§«“¡∫π‡«Á∫‡æ®π—πÈ ‡√“ “¡“√∂°”Àπ¥μ”·Àπàß„π°“√· ¥ß¢âÕ§«“¡ ·≈–√Ÿª¿“扥â 1. „Àâ§≈‘È°‡≈◊Õ°∫√√∑—¥∑’ËμâÕß°“√®—¥¢âÕ§«“¡
2. ·≈⫧≈‘È°ªÿÉ¡ Align Center 3. ¢âÕ§«“¡®–· ¥ßμ√ß°≈“ß∑—π∑’
ë °“√„ àÀ¡“¬‡≈¢·≈–∫Ÿ≈‡≈ÁμÀπâ“À—«¢âÕ¬àÕ¬ μâÕß¡’∫“â ß∑’‡Ë Õ° “√„π‡«Á∫‡æ®®–μâÕß¡’°“√·∑√°À¡“¬‡≈¢≈߉ªÀπâ“¢âÕ§«“¡ „π°√≥’‡ªìπÀ—«¢âÕ¬àÕ¬ ∑’ËμâÕß°“√„ àÀ¡“¬‡≈¢·≈–∫Ÿμ‡≈Áμ„Àâ∑”¥—ßπ’È
1. ‰ª§≈‘È°‡≈◊Õ°¢âÕ§«“¡∑’ËμâÕß°“√·∑√°À¡“¬‡≈¢ π”Àπâ“ 2. ·≈⫧≈‘È°ªÿÉ¡ Numbered list 3. ¢âÕ§«“¡¥—ß°≈à“«®–∂Ÿ°„ àÀ¡“¬‡≈¢‡√’¬ß≈”¥—∫ °—π‰ª 4. ·μà∂“â μâÕß°“√·∑√°Àπâ“¢âÕ§«“¡¥â«¬∫Ÿ≈‡≈Áμ≈‘ μå °Á „Àâ „™â‡¡“ å§≈‘È°‡≈◊Õ°¢âÕ§«“¡ 5. ·≈⫧≈‘È°ªÿÉ¡ Bulleted list
Kompozer ( 174
6. Àπâ“™ÿ¥¢âÕ§«“¡®–· ¥ß∫Ÿ≈‡≈Áμ≈‘ μåª√“°Ø¢÷Èπ
ë °“√·∑√°√Ÿª¿“æ „π‡«Á∫‡æ®πÕ°®“°μ—«Àπ—ß ◊Õ·≈â«°Á§ßμâÕß¡’√ªŸ ¿“懢ⓡ“ª√–°Õ∫°“√· ¥ß¢âÕ¡Ÿ≈ ‡π◊ÕÈ À“ ‰ª¥Ÿ°“√ ·∑√°√Ÿª¿“æ°—π
1. ‰ª§≈‘È°‡¡“ å≈߬—ßμ”·Àπàß∑’ËμâÕß°“√«“ß¿“æ 2. ·≈⫧≈‘È°ªÿÉ¡∑Ÿ≈∫“√å Image 3. · ¥ß‰¥Õ–≈ÁÕ°∫ÁÕ°´å Image Properties „Àâ §≈‘È°ªÿÉ¡ Choose File... 4. „Àâ‡≈◊Õ°‚ø≈‡¥Õ√å®—¥‡°Á∫¿“æ 5. §≈‘È°‡≈◊Õ°¿“æ∑’ËμâÕß°“√ 6. ·≈⫧≈‘È°ªÿÉ¡ Open
175 ) Kompozer
7. ®–°≈—∫¡“‰¥Õ–≈ÁÕ°∫ÁÕ°´å‡¥‘¡ À“°μâÕß°“√π”‡¡“ å 8. ·≈⫧≈‘È°ªÿÉ¡ OK ‰ª«“߇Àπ◊Õ√Ÿª·≈â«· ¥ß¢âÕ§«“¡ „Àâæ‘¡æå¢âÕ§«“¡ 9. ®–· ¥ß√Ÿª¿“æ„πÀπⓇ«Á∫‡æ®∑—π∑’ 10. “¡“√∂®—¥μ”·Àπàß°“√«“ß√Ÿª¿“扥âμ“¡μâÕß°“√ ≈߉ª„π™àÕß Alternate text :
ë °“√ª√—∫¢π“¥√Ÿª¿“æ ‡¡◊ËÕπ”¿“æ· ¥ß∫π‡«Á∫‡æ®·≈â« ‡√“¬—ß “¡“√∂ª√—∫¢π“¥√Ÿª¿“æ∑’Ë· ¥ß‰¥â‡™àπ°—π
1. §≈‘È°‡≈◊Õ°√Ÿª¿“æ∑’ËμâÕß°“√·°â ‰¢ 2. π”‡¡“ 剪«“ßμ”·ÀπàߢÕ∫√Ÿª¿“æ‡æ◊ÕË ∑”°“√¬àÕ¢¬“¬√Ÿª¿“æ
3. ‡¡◊ËÕ¬àÕ-¢¬“¬√Ÿª¿“æ°Á®–· ¥ß¢π“¥„À¡à∑—π∑’
Kompozer ( 176
ë °”Àπ¥≈‘ß°å„Àâ°—∫¢âÕ§«“¡·≈–√Ÿª¿“æ ¢âÕ§«“¡·≈–√Ÿª¿“æ„π‡«Á∫‡æ®π—Èπ‡√“ “¡“√∂„ à≈‘ß°å ‡æ◊ËÕ„À⺟⠄™âß“π‰¥â§≈‘È°‰ª¬—߇«Á∫‰´μå∑’Ë°”Àπ¥ 1. §≈‘È°‡≈◊Õ°¢âÕ§«“¡∑’ËμâÕß°“√„ à≈‘ß°å 2. ·≈⫧≈‘È°∑Ÿ≈∫“√å Link 3. ®–„Àâ „ àμ”·Àπà߇«Á∫ °“√≈‘ß°å ‰ª¬—߉ø≈åÕ‡’ ¡≈å anchor ≈߉ª 4. ·≈⫧≈‘È°ªÿÉ¡ OK 5. ¢âÕ§«“¡¥—ß°≈à“«®–∂Ÿ°¢’¥‡ âπ„μâ‚¥¬Õ—μ‚π¡—μ‘ ‡æ◊ÕË ∫àß∫Õ° «à“‡ªìπ≈‘ß°å
6. ‰ª¥Ÿ°“√„ à≈ß‘ °å≈ß∫π√Ÿª¿“æ∫â“ß „Àâ§≈‘°È ‡≈◊Õ° √Ÿª¿“æ∑’ËμâÕß°“√ 7. ·≈⫧≈‘È°∑Ÿ≈∫“√å Link 8. æ‘¡æåμ”·Àπàß URL ∑’ËμâÕß°“√≈߉ª 9. ·≈⫧≈‘È°ªÿÉ¡ OK 10. √Ÿª¿“楗߰≈à“«°Á®–∂Ÿ°„ à≈‘ß°å≈߉ª∑—π∑’
177 ) Kompozer
ë ‡ª√’¬∫‡∑’¬∫øÕ√å°—∫‚ª√·°√¡ Dreamweaver KompoZer
Dreamweaver
¡’ ¡’ ¡’ ¡’
¡’ ¡’ ¡’ ¡’
°“√∑”ß“π¢Õß‚ª√·°√¡‡ªìπ·∫∫ WYSIWYG √Õß√—∫°“√Õ—æ‚À≈¥‰ø≈剪¬—߇´‘√åø‡«Õ√å ‡§√◊ËÕß¡◊Õμà“ßÊ „π°“√ √â“߇«Á∫‰´μå √Õß√—∫°“√ √â“ß Style Sheets
ë °“√·∑√°μ“√“ß≈߉ª„π‡Õ° “√ ¡“¥Ÿ°“√·∑√°μ“√“߇æ◊ËÕ· ¥ß¢âÕ¡Ÿ≈„π·∫∫μ“√“ß°—π∫â“ß
1. §≈‘È°‡¡“ å‡≈◊Õ°μ”·Àπàß∑’ËμâÕß°“√·∑√°μ“√“ß 2. §≈‘È°ªÿÉ¡∑Ÿ≈∫“√å Table 3. „π‰¥Õ–≈ÁÕ°∫ÁÕ°´å Insert Table ‡æ◊ËÕ„Àâ§≈‘È° °”Àπ¥¢π“¥ À√◊Õ§≈‘È°ªÿÉ¡ OK 4. μ“√“ß®–ª√“°Ø¢÷Èπ 5. „Àâæ‘¡æå¢âÕ§«“¡≈߉ª„πμ“√“ß 6. ∑¥≈Õßæ√’«‘«‡æ® ‚¥¬§≈‘È°·∑Á∫ Preview
‡À¡“–¡“° ”À√—∫¡◊Õ„À¡à∑μ’Ë Õâ ß°“√´Õøμå·«√åÕ–‰√ßà“¬Ê „π°“√ √â“߇«Á∫ Õ“®®–‡√‘¡Ë ®“°øíß°å™π— ßà“¬Ê ®“°π—πÈ æÕ‡√‘¡Ë §ÿπâ ‡§¬°Á≈Õß„ à≈°Ÿ ‡≈àπÕ–‰√„π‡«Á∫‡æ®„Àâ¡“°¬‘ßË ¢÷πÈ ∂â“™”π“≠‡¡◊ÕË ‰À√à° Á “¡“√∂„™â´Õøμå·«√åπ’È ‡π√¡‘μ√ √â“ß √√§åº≈ß“π∑’ˬե‡¬’ˬ¡ÕÕ°¡“‰¥â‡≈¬§√—∫
Kompozer ( 178