Create a Website with Dreamweaver

สร้างเว็บไซต์ด้วย Dreamweaver

วิธีใช้ Dreamweaver CS6เกี่ยวกบั Dreamweaverทำควำมรูจ้ กั โปรแกรม DreamweaverMacromedia Dreamweaver เป็ นโปรแกรมสำหรบั ออกแบบและพฒั นำเวบ็ ไซต์ ท่ีไดร้ บั ควำมนิยมอยำ่ งมำกในปัจจุบนั เนื่องดว้ ยสำมำรถใชง้ ำนไดง้ ำ่ ย มีเคร่ืองมือใหใ้ ชง้ ำนมำกมำย ซ่ึงสำมำรถพฒั นำเวบ็ ไดอ้ ยำ่ งรวดเร็ว และง่ำยดำยนอกจำกโปรแกรม Macromedia Dreamweaver จะออกแบบมำใหใ้ ชส้ รำ้ งเวบ็ อยำ่ งง่ำยดำยแลว้ ยงั เพิ่มคุณสมบตั ิต่ำง ๆ ท่ีมีประสิทธิภำพ และเอ้ ือประโยชน์สำหรบั ผทู้ ำเวบ็ อยำ่ งเต็มท่ี ไม่วำ่ จะเป็ นระบบกำรจดั กำรเกี่ยวกบั Site และกำรจดั เก็บไฟล์นอกจำกน้ ียงั มีระบบชว่ ยจดั กำรเกยี่ วกบั กำร Upload ไฟลไ์ ปยงัเซิรฟ์ เวอรอ์ ีกดว้ ยนอกจำกน้ ีแลว้ ปัจจุบนั Macromedia Dreamweaver รุ่นใหม่ ๆยงั สนับสนุนกำรใชง้ ำนเวบ็ แบบไดนำมิคเพมิ่ มำกข้ ึน มีกำรรองรบั สคริปภำษำต่ำง ๆ เช่น CSS , Java Script , ภำษำ XMLและรองรบั ลกู เล่นเกีย่ วกบั กำรทำภำพเคล่ือนไหว GifAnimation และสนับสนุนกำรใชง้ ำน Flash เพิม่ ข้ นึ อีกดว้ ย

ที่กล่ำวมำขำ้ งตน้ เป็ นคุณสมบตั ิและควำมสำมำรถของโปรแกรมตวั เกง่ ตวั น้ ี ซ่ึงสำมำรถครองใจผูท้ ำเวบ็ มำอยำ่ งยำวนำน ต้งั แต่เร่ิมตน้ กอ่ ต้งั ซ่ึงจำกอดีตจนถึงปัจจุบนัMacromedia Dreamweaver มีออกมำแลว้ หลำยเวอรช์ นั่ ซ่ึงมีท้งั หมดดงั น้ ีDreamweaver 1.0 (ธนั วำคม ค.ศ. 1997)Dreamweaver 1.2 (มนี ำคม ค.ศ. 1998)Dreamweaver 2.0 (ธนั วำคม ค.ศ. 1998)Dreamweaver 3.0 (ธนั วำคม ค.ศ. 1999)Dreamweaver UltraDev 1.0 (มิถุนำยน ค.ศ. 2000)Dreamweaver 4.0 (ธนั วำคม ค.ศ. 2000)Dreamweaver UltraDev 4.0 (ธนั วำคม ค.ศ. 2000)Dreamweaver MX (พฤษภำคม ค.ศ. 2002)Dreamweaver MX 2004 (10 พฤศจิกำยน ค.ศ. 2003)Dreamweaver 8 (13 พฤศจิกำยน ค.ศ. 2005)

Dreamweaver CS3 (9.0) รุน่ ทดลอง ล่ำสุด (27 มีนำคมพ.ศ. 2550)ในอดีตโปรแกรม Macromedia Dreamweaver ถูกสรำ้ งข้ ึนโดยบริษัท แมโครมีเดีย แต่ปัจจุบนั น้ ีควบกิจกำรรวมกบั บริษัท อะโดบีซิสเต็มส์ ดงั น้ันเวอรช์ นั่ ท่ีถูกพฒั นำข้ ึนในภำยหลงั จึงมีกำรใชช้ ือ่ ใหม่ จำกช่ือเดิม แมโครมเี ดีย ดรีมวฟี เวอร์ (MacromediaDreamweaver) เปล่ียนเป็ น อะโดบี ดรีมวฟี เวอร์ (AdobeDreamweaver)กำรสรำ้ ง Site เพอื่ จดั เก็บไฟลแ์ ละโฟลเดอร์ในกำรสรำ้ งเวบ็ ไซตน์ ้ัน จะประกอบไปดว้ ยไฟลต์ ่ำง ๆ มำกมำยไม่วำ่ จะเป็ นไฟล์ HTML รปู ภำพ และโฟลเดอร์ ซึ่งเรำจะตอ้ งมีกำรเตรียมกำรจดั เกบ็ ส่วนประกอบเหล่ำน้ ี เพื่อไมใ่ หเ้ กดิ ควำมสบั สนในภำยหลงั ซ่ึงกำรสรำ้ ง Site สำมำรถชว่ ยจดั กำรได้

ผูท้ ่ีเริ่มตน้ สรำ้ งเวบ็ ไซตใ์ หม่ ๆ อำจจะคิดวำ่ กำรสรำ้ งเวบ็ ไซตไ์ ม่น่ำจะยุง่ ยำกมำกนัก รวมท้งั สว่ นประกอบกไ็ มไ่ ดส้ รำ้ งควำมสบั สน แต่จะเกดิ ปัญหำข้ ึนไดใ้ นภำยหลงั เมื่อคุณมเี วบ็ ไซตท์ ่ีประกอบไปดว้ ยไฟลจ์ ำนวน มำกเพ่ิมข้นั ซึ่งหำกคุณไม่จดั เกบ็ ให้ดี คุณจะไดเ้ จอกบั ปัญหำน้ ีแน่ ๆ คะ่ เชน่ เมื่อตอ้ งกำรจะแกไ้ ขไฟลภ์ ำพสกั ภำพ คุณกต็ อ้ งมำเสียเวลำคิดวำ่ ไฟลท์ ี่ใชง้ ำนในหนำ้ น้ ี ถูกจดั เกบ็ ไวท้ ่ีไหน ช่อื ไฟลอ์ ะไร เป็ นตน้ บำงคร้งั แกไ้ ขเสร็จเซฟไวค้ นละ่ ที่ ทำใหเ้ กดิ ปัญหำลิงคผ์ ิดพลำด หรือ บำงทีลบไฟล์ หรือเซฟไฟลท์ บั ผิดท่ี เป็ นตน้เพรำะฉน้ัน เพ่อื ป้องกนั ปัญหำยุง่ ยำกเหล่ำน้ ี เรำจงึ ตอ้ งมีกำรวำงแผนในกำรจดั เก็บไฟลต์ ่ำง ๆ ใหเ้ ป็ นระเบียบ มแี บบแผนเช่น จำกรูปขำ้ งตน้ จะเป็ นตวั อยำ่ งลกั ษณะกำรจดั เก็บไฟลท์ ่ีWebmaster กำหนดข้ นึ ซึ่งขอ้ มูลของเวบ็ ไซตจ์ ะถูกเก็บอยใู่ นโฟลเดอรช์ ือ่ nextstepdev โดยภำยในโฟลเดอรน์ ้ ีจะเป็ นขอ้ มลูของเวบ็ nextstepdev เท่ำน้ัน ซึ่งจะประกอบไปดว้ ย ไฟล์ HTPและรูปภำพต่ำง ๆโดย Webmaster วำงแผนใหไ้ ฟลต์ ่ำง ๆ ท่ีเป็ นไฟลเ์ ก่ยี วกบั เวบ็ถูกจดั เก็บอยดู่ ำ้ นนอกสุด และไดส้ รำ้ งโฟลเดอรเ์ พ่อื จดั เกบ็รูปภำพโดยเฉพำะ คือ โฟลเดอร์ images สำหรบั เกบ็ รูปภำพท่ี

เป็ นภำพที่เป็ นโครงร่ำงของเพจ ส่วนโฟลเดอร์ imgs ถูกสรำ้ งข้ นึ มำเพื่อเก็บภำพท่ีเป็ นภำพ ประกอบเน้ ือหำ เป็ นตน้ซึ่งเมื่อเรำวำงแผนไวแ้ ลว้ แบบน้ ี เม่ือมกี ำรจดั เกบ็ ไฟลเ์ พมิ่ ข้ ึนหรือเรียกใชง้ ำนไฟล์ เรำกจ็ ะสำมำรถใชง้ ำนไดส้ ะดวก เพรำะจะทรำบโดยอตั โนมตั ิ วำ่ จะเซฟไฟลไ์ วท้ ี่ไหน จะเรียกไฟลจ์ ำกที่ไหน เป็ นตน้ซึ่งในโปรแกรม Macromedia Dreamweaver กม็ ีสว่ นที่สนับสนุนกำรจดั กำรเก่ียวกบั กำรจดั เก็บไฟลแ์ ละโฟลเดอรอ์ ยู่ ซึ่งเรำเรียกวำ่ กำรสรำ้ ง Site เพอื่ อำนวยควำมสะดวกในกำรสรำ้ งเวบ็ ไซต์ เวลำเรียกใชง้ ำน กจ็ ะสำมำรถเรียกใชง้ ำนไดอ้ ยำ่ งรวดเร็วซึ่งทุก ๆ คร้งั ท่ีเรำมีกำรสรำ้ งเวบ็ ไซตใ์ หม่ เรำควรจดั กำรสรำ้ งSit ในโปรแกรม Macromedia Dreamweaver เป็ นลำดบั แรกกอ่ นคะ่ โดยมีข้ ึนตอนในกำรสรำ้ งดงั น้ ีคะ่ข้นั ตอนที่ 1 คลิกเลือกคำสงั่ Site --> Manage Sites... จำกMenu Bar

ข้นั ตอนที่ 2 จะปรำกฏไดอะล็อกบ็อกซ์ Manage Site ใหท้ ำกำรคลิกท่ีป่ ุม New... จำกน้ันเลือก Siteข้นั ตอนท่ี 3 รอสกั ครู่จะปรำกฏไดอะล็อกบ็อกซ์ Site Definitionใหท้ ำกำรต้งั ช่อื ไซต์ ในช่อง Site nameข้นั ตอนท่ี 4 ระบุโฟลเดอรท์ ี่จะใชใ้ น กำรจดั เกบ็ เวบ็ ไซต์ โดยกำรคลิกท่ีรูปโฟลเดอร์ ที่บริเวณ Local root folder ซึ่งจะมีไดอะล็อกบ็อกซใ์ หมเ่ พ่ิมมำ ใหเ้ ลือกไปยงั โฟลเดอรท์ ่ีเรำจะจดั เก็บขอ้ มูล จำกน้ัน คลิกป่ ุม Select (เลือกไปยงั โฟลเดอรท์ ี่จะจดั เก็บเวบ็ ไซต์ โดยตอ้ งสรำ้ งโฟลเดอรน์ ้ ีไวก้ อ่ น จำกตวั อยำ่ งWebmaster สรำ้ งโฟลเดอรช์ ่ือ nextstepdev ไวท้ ่ี C:\AppServ\www ดงั น้ัน Webmaster จงึ เลือกเขำ้ ไปในโฟลเดอร์ชอื่ nextstepdev แลว้ จงึ กดป่ ุม Select )

ข้นั ตอนที่ 5 เมื่อระบุโฟลเดอรส์ ำหรบั เก็บขอ้ มลู เรียบรอ้ ยแลว้คลิกป่ ุม OKขน้ั ตอนที่ 6 จะปรำกฏชอ่ื Site name ท่ีเรำสรำ้ งข้ ึนในหน้ำต่ำงManage Site ดงั ภำพ จำกน้ันใหเ้ รำคลิกป่ ุม Doneแคน่ ้ ีกเ็ รียบรอ้ ยแลว้ คะ่ Site ท่ีเรำสรำ้ งข้ ึน จะปรำกฏข้ ึนที่บริเวณ File Panel ทำงดำ้ นขวำมอื ดงั ภำพ

กำรกำหนดคณุ สมบตั พิ ้ ืนฐำนของเว็บเพจกอ่ น ที่เรำจะเร่ิมตน้ สรำ้ งเวบ็ เพจ หลงั จำกเรำไดส้ รำ้ งไฟลใ์ หม่แลว้ เรำควรกำหนดคุณสมบตั ิพ้ นื ฐำนใหก้ บั หน้ำเวบ็ เพจของเรำกอ่ น เพ่ือใชเ้ ป็ นคำ่ เริม่ ตน้ ในกำรทำเวบ็ เพจของเพจน้ันคุณสมบตั ิพ้ นื ฐำนหรือคำ่ เร่ิมตน้ ของเวบ็ เพจ ซ่ึงเรำจะตอ้ งเร่ิมกำหนดกอ่ นทำเวบ็ ไดแ้ ก่ กำรกำหนดคำ่ ของฟอนต์ ขนำดของฟอนต์ สีของขอ้ ควำม สีของพ้ นื หลงั เป็ นตน้ซึ่งมีวธิ ีกำหนดคำ่ คุณสมบตั ิพ้ นื ฐำนของเวบ็ เพจ ดงั น้ ีข้นั ตอนแรก คลิกท่ีเมนู Modify --> Page Properties จะมีไดอะล็อกบ็อกซ์ ปรำกฏข้ ึนข้นั ตอนที่ 2 กำหนดคำ่ ในสว่ นของ Appearance ซ่ึงจะประกอบไปดว้ ย รำยละเอียดท่ีตอ้ งกำหนดดงั น้ ี

1. ขอ้ มลู เกียวกบั ลกั ษณะของขอ้ ควำม ท่ีจะปรำกฏทำงหน้ำเวบ็เพจ เชน่ จะเป็ นฟอนตอ์ ะไร ขนำดเท่ำไหร่ สีอะไรเป็ นตน้2. ขอ้ มลู เกี่ยวกบั พ้ นื หลงั ของเวบ็ เพจ ซ่ึงสำมำรถกำหนดได้ วำ่ตอ้ งกำรใหพ้ ้ นื หลงั ของเวบ็ เพจเป็ นสีอะไร หรือหำกไมก่ ำหนดเป็ นสีก็สำมำรถกำหนด เป็ นพ้ นื หลงั แบบรูปภำพก็ได้3. สว่ นของระยะขอบของเวบ็ เพจ ซึ่งหำกคุณไม่ไดก้ ำหนดไว้ คำ่เริ่มตน้ ของเวบ็ เพจของคุณจะมีลกั ษณะเวน้ วำ่ งบริเวณขอบท้งั ส่ีดำ้ น หำกไมต่ อ้ งกำรใหม้ ขี อบใหก้ ำหนดคำ่ margin ท้งั ส่ีดำ้ นให้เท่ำกบั 0ขน้ั ตอนท่ี 3เมอ่ื กำหนดเรียบรอ้ ยแลว้ ใหท้ ำกำรคลิกป่ ุม OKเพจของคุณกจ็ ะมคี ุณสมบตั ิตำมคำ่ เร่ิมตน้ ท่ีคุณไดก้ ำหนดค่ำไว้

คุณสมบตั ิส่วนน้ ี หำกคุณไมไ่ ดก้ ำหนดไว้ ชนิดของฟอนตแ์ ละขนำด ท่ีแสดงผลใน Dreamweaver จะถูกแสดงผลตำมคำ่ ดีฟอลตท์ ่ีคุณไดก้ ำหนดที่ในส่วน Preferences ของโปรแกรม(ติดตำมอำ่ นไดใ้ นบทควำมต่อไปค่ะ)ส่วนกำรแสดงผลทำงบรำวเซอร์ หำกคุณไมไ่ ดก้ ำหนดชนิดของฟอนต์ ขนำด สีของฟอนต์ และสีพ้ นื หลงั กำรแสดงผลจะข้ ึนอยู่กบั ค่ำดีฟอลตท์ ่ีกำหนดไวท้ ี่เวบ็ บรำวเซอรข์ องผูเ้ ยยี่ ม ชมแต่ละคนกำรใชง้ ำน CSS Style กำหนดรูปแบบตวั อกั ษรกำรทำ เวบ็ เพจน้ันบำงคร้งั เรำจะตอ้ งมกี ำรทำงำนหลำย ๆอยำ่ ง และบำงคร้งั ก็ตอ้ งทำซ้ำ ๆ หลำย ๆ คร้งั ซึ่งจะทำใหเ้ กดิควำมไม่สะดวก และทำใหเ้ สียเวลำได้ ซึ่งโปรแกรมMacromedia Dreamweaver กเ็ ตรียมเครื่องมือท่ีเรียกวำ่ CSSStyle มำชว่ ยแกป้ ัญหำน้ ี จะมีวธิ ีแกป้ ัญหำอยำ่ งไร ดูไดท้ ่ีบทควำมน้ ีค่ะ

จำกปัญหำขำ้ งตน้ ท่ีไดก้ ล่ำวไป เพ่ือน ๆ บำงคนอำจจะยงั ไม่เหน็ภำพชดั เจน วำ่ อะไรบำ้ งที่เรำตอ้ งทำหลำย ๆ อยำ่ ง และตอ้ งทำซ้ำ ๆ หนึ่งในน้ันที่ Webmaster จะขอยกตวั อยำ่ งใหเ้ หน็ กนัชดั ๆ ก็คือ เกย่ี วกบั กำรพิมพข์ อ้ ควำมกำรพิมพข์ อ้ ควำมน้ันเรำตอ้ งปรบั แต่งคุณสมบตั ิ ของขอ้ ควำมอยู่หลำย ๆ อยำ่ งดว้ ยกนั ไมว่ ำ่ จะเป็ นกำรปรบั เลือกฟ้อนต์ เลือกขนำดของขอ้ ควำม เลือกสีของขอ้ ควำม เหน็ ไหมละค่ะ เรำตอ้ งปรบั คำ่ ต้งั 3 คร้งั ถึงจะไดล้ กั ษณะรูปแบบขอ้ ควำมท่ีเรำตอ้ งกำรแลว้ เมอ่ื เรำตอ้ งพิมพข์ อ้ ควำมหลำย ๆ ขอ้ ควำม หลำย ๆตำแหน่ง เรำก็ตอ้ งมำทำขน้ั ตอนที่กล่ำวมำซ้ำ ๆ อีกเพื่อแกไ้ ขปัญหำน้ ี Macromedia Dreamweaver ก็เตรียมเคร่ืองมือท่ีเรียกวำ่ CSS Style มำช่วยลดข้นั ตอนกำรทำงำนซ้ำ

ๆ แบบที่กล่ำวมำ โดยแคก่ ำหนดค่ำไวท้ ี่ CSS Style แลว้ เรียกใช้CSS Style แคเ่ พียงคร้งั เดียวก็เป็ นอนั เสร็จเรียบรอ้ ยค่ะกอ่ นจะไปพบวธิ ีกำรสรำ้ ง CSS Style เรำมำรูจ้ กั CSS Style กนัสกั หน่อย CSS Style ยอ่ มำจำก Cascading Style Sheets เป็ นเครื่องมือท่ีช่วยกำหนดคุณสมบตั ิของส่ิงต่ำง ๆ ในหนำ้ เว็บเพจไมว่ ำ่ จะเป็ นกำรกำหนดคุณสมบตั ิของฟอนต์ เชน่ ลกั ษณะของฟอนต์ ขนำด กำหนดคุณสมบตั ิของสี เกย่ี วกบั พ้ ืนหลงั เก่ียวกบัตำรำง และอ่ืน ๆ อีกมำกมำย รปู ร่ำงหน้ำตำ CSS Style ในMacromedia Dreamweaver Mx 2004 ก็มลี กั ษณะดงั ภำพดำ้ นบนค่ะ ซ่ึงก็ประกอบไปดว้ ยส่วนต่ำง ๆ ตำมที่เหน็ ในภำพคะ่เอำละครบั เรำมำเร่ิมสรำ้ ง CSS Style เพ่ือกำหนดรปู แบบตวั อกั ษรและขอ้ ควำมกนั เลยค่ะขน้ั ตอนแรก ใหค้ ุณคลิกที่ป่ ุม สรำ้ งสไตลใ์ หม่ ซึ่งอยบู่ ริเวณดำ้ นล่ำง (ตำแหน่ง สรำ้ งสไตลใ์ หม่ ตำมรูปท่ี 1 ค่ะ)ขน้ั ตอนที่ 2 ถำ้ ทำข้นั ตอนแรกถูกตอ้ ง คุณก็จะเจอไดอะล็อกบ็อกซ์ New CSS Style ตำมภำพที่ 2 คะ่ ใหค้ ุณทำกำรต้งั ช่ือของ Style ท่ีช่อง Name ตอ้ งต้งั ชอื่ ใหส้ ่ือควำมหมำยนะค่ะ เพรำะช่ือน้ ีจะปรำกฏใหเ้ รำเลือกเมือ่ ตอ้ งกำรใชง้ ำน ต้งั

ใหส้ ่ือควำมหมำยจะไดจ้ ำได้ (บำงคร้งั เรำกส็ รำ้ ง Style หลำย ๆตวั คะ่ สรำ้ งเยอะถำ้ ชือ่ ไมส่ ื่อควำมหมำยเดียวจะลืมเอำได)้Webmaster ต้งั ชื่อ Style วำ่ \"tahoma_12\" เพรำะจะสรำ้ งรูปแบบฟอนตท์ ี่ใชฟ้ อนตแ์ บบ tahoma และจะกำหนดขนำดฟอนตเ์ ท่ำกบั 12 pixelsเม่ือต้งั ชื่อและกำหนดรำยละเอียดตำมภำพแลว้ กด OKขน้ั ตอนที่ 3 จะปรำกฏไดอะล็อกบ็อกซ์ เพ่อื ใหท้ ำกำรเซฟ StyleSheets ใหท้ ำกำรต้งั ชอ่ื Style Sheets จำกน้ันเซฟไวใ้ น

โฟลเดอร์ Site งำนท่ีกำหนดไวส้ ำหรบั เกบ็ ขอ้ มลู เวบ็ ไซตท์ ่ีเรำจะสรำ้ งข้ นึขน้ั ตอนที่ 4 เมอื่ เรำไดเ้ ซฟ Style Sheets เรียบรอ้ ยแลว้ จะมีไดอะล็อกบ็อกซป์ รำกฏข้ นึ เพอ่ื ใหเ้ รำกำหนดลกั ษณะของ StyleSheets ในที่น้ ีเรำจะกำหนดลกั ษณะของตวั อกั ษรและขอ้ ควำมดงั น้ันใหเ้ ลือก Typeสงั เกตบริเวณทำงขวำมอื จะมีลกั ษณะของ Type ใหเ้ รำกำหนดซึ่ง Webmaster กไ็ ดก้ ำหนดฟอนตแ์ บบ tahoma และกำหนดขนำดฟอนตเ์ ท่ำกบั 12 pixels และกำหนดสีของฟอนต์ เป็ นรหสั สี #333333 และเลือกเป็ นแบบตวั อกั ษรแบบธรรมดำเม่ือกำหนดค่ำต่ำง ๆ เรียบรอ้ ยแลว้ ก็กดป่ ุม OK

เพียงแคน่ ้ ีเรำก็สรำ้ ง Style Sheets ไดแ้ ลว้ ค่ะ สงั เกตที่บริเวณCSS Style จะปรำกฏชอ่ื Style Sheets ที่เรำสรำ้ งข้ ึน พรอ้ มท้งัรำยละเอียดลกั ษณะของสไตล์ และท่ีบริเวณ File Panel ก็จะปรำกฏไฟล์ CSS Style ที่เรำไดส้ รำ้ งข้ นึ ปรำกฏใหเ้ หน็ ค่ะ

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

ข้นั ตอนที่ 3 เลื่อนเมำสม์ ำที่บริเวณ ดำ้ นล่ำง ตรงสว่ นของProperties จำกน้ันคลิกเลือกที่ช่ือ Style ตำมภำพที่ 3 คะ่จำกน้ันเลือก Style ตำมชื่อที่เรำไดส้ รำ้ งไว้ ในบทควำมท่ีแลว้ครบัเสร็จเรียบรอ้ ยแลว้ ค่ะ เพยี งแคน่ ้ ีขอ้ ควำมท่ีเรำใช้ Style น้ ี ก็จะเปลี่ยนคุณสมบตั ิตำมค่ำของ Style ที่เรำไดก้ ำหนดไว้ คือฟอนต์แบบ tahoma ขนำด 12 pixels และมีสีเทำดำ #333333

จำกภำพผลลพั ธ์ Webmaster สรำ้ งสไตลอ์ ีกช่ือ คือtahoma_B12red คือสรำ้ งสไตล์ ฟอนตแ์ บบ tahoma ขนำด 12pixels และมีสีแดง #FF0000 และเป็ นตวั หนำ ซึ่งเมือ่ เลือกใช้Style ตวั น้ ีก็จะไดผ้ ลลพั ธอ์ ยำ่ งท่ีเห็นค่ะกำรใส่สี Background ใหก้ บั เว็บเพจบทควำมน้ ีเป็ นบทควำม Basic ของกำรใชโ้ ปรแกรมDreamweaver เก่ียวกบั กำรใส่สีสนั ใหก้ บั หน้ำเว็บเพจ โดยกำรกำหนดสีพ้ นื หลงั (Background) ใหก้ บั เวบ็ เพจ ซ่ึงสำมำรถใส่สีใหก้ บั พ้ ืนหลงั ของเวบ็ เพจไดง้ ่ำย ๆ ดงั นีข้นั ตอนท่ี 1 ใหเ้ รำเปิ ดโปรแกรม Dreamweaver ข้ นึ มำกอ่ นค่ะจำกน้ันเรำจะมำเร่ิมตน้ กำรใสส่ ีของหน้ำเอกสำร Web Pageโดยคลิกที่ Menu Bar ท่ีเมนู Modify --> Properties ตำมภำพที่1 ค่ะ

ขน้ั ตอนที่ 2 จำกน้ันเมื่อปรำกฏไดอะ ล็อกบ็อกซ์ PageProperties ข้ นึ ใหท้ ำกำรเลือกสีท่ีตอ้ งกำรในตำแหน่งBackground ตำมภำพท่ี 2 จำกน้ันคลิกป่ ุม OKเพยี งแคน่ ้ ี พ้ นื สีเวบ็ เพจของเพ่ือน ๆ ก็จะเปล่ียนเป็ นสีตำมท่ีได้กำหนดไวใ้ นข้ นึ ตอนท่ี 2 แลว้ ค่ะ

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

ขน้ั ตอนท่ี 2 เรำจะมำเร่ิมใส่ลิงคใ์ ห้ กบั ขอ้ ควำมและรูปภำพกนัค่ะ กอ่ นอ่ืนเ้ รำมำทำลิงคแ์ บบรูปภำพกนั กอ่ นคะ่ เร่ิมตน้ ก็คลิกที่ภำพที่เรำจะทำลิงคต์ ำมตำแหน่งท่ี 1 ของรูปท่ี 1 จำกน้ันลองสงั เกตบริเวณดำ้ นล่ำงของโปรแกรม Dreamweaver ในส่วนของProperties สงั เกตบริเวณช่องท่ีมชี ือ่ วำ่ Link ตำมภำพที่ 2 ในตำแหน่ง 1.1 หำกตอ้ งกำรลิงคไ์ ฟลเ์ อกสำรเรำสำมำรถลิงคไ์ ด้โดยคลิกที่รปู แฟ้ม (ภำยในวงกลม) เพ่อื Select File ที่ตอ้ งกำรลิงคไ์ ปหำ หรือหำกเรำจะลิงคแ์ บบลิงคเ์ วบ็ ไซต์ เรำกส็ ำมำรถพิมพ์ URL ของเวบ็ ไซตน์ ้ัน ๆ ลงในช่อง Link น้ ีไดเ้ ลย ดงั ท่ีเหน็ในภำพที่ 2 ซ่ึงเป็ นกำรลิงคแ์ บบลิงคไ์ ปเวบ็ ไซต์ โดยตำมตวั อยำ่ งจะลิงคไ์ ปท่ี http://www.thainextstep.comแบบท่ี 2 กำรลิงคแ์ บบลิงคข์ อ้ ควำม หลงั จำกท่ีเรำพมิ พข์ อ้ ควำมแลว้ ใหเ้ รำทำกำรแด็กเมำสท์ ี่บริเวณขอ้ ควำมที่เรำตอ้ งกำรทำลิงค์ ตำมภำพท่ี 1 ตำแหน่งที่ 2

เมือ่ แด็กเมำสท์ ี่ขอ้ ควำมแลว้ สงั เกตบริเวณดำ้ นล่ำงของโปรแกรม Dreamweaver ใน ส่วนของ Properties ตำมภำพที่2.1 ซึ่งจะมีชอ่ งที่ช่ือวำ่ Link อยเู่ หมอื นกนั วธิ ีกำรทำลิงคก์ ็เหมือนกนั กบั แบบลิงคภ์ ำพค่ะ ซ่ึงกจ็ ะมชี ่องใหใ้ สล่ ิงค์ และป่ ุมให้Select Fileเพยี งแคน่ ้ ี กเ็ สร็จแลว้ คะ่ ลองเซฟไฟลแ์ ลว้ ลอง test กนั ดูคะ่ ...เวลำเรำเอำเมำส์ Over บนรูปและลิงค์ เมำสพ์ อยเตอรก์ ็จะเปล่ียนไป จำกเป็ นลูกศรก็จะกลำยเป็ นรูปมอื แทน ถำ้ ไดต้ ำมน้ ีก็ลิงคส์ ำเร็จแลว้ ค่ะกำรสรำ้ งตำรำงใน Dreamweaverบท ควำมน้ ีเรำจะมำเริ่มตน้ สรำ้ งตำรำงใหก้ บั เวบ็ เพจกนั คะ่ ซ่ึงเป็ นบทควำม Basic อีกบทควำมหนึ่ง ใครท่ีเร่ิมตน้ ใชง้ ำนโปรแกรม Deamweaver กเ็ ขำ้ มำดูกนั ไดค้ ะ่ข้นั ตอนที่ 1 ใหเ้ รำเปิ ดโปรแกรม Dreamweaver ข้ นึ มำกอ่ นคะ่จำกน้ันเรำมำเริ่มสรำ้ งตำรำงใหเ้ วบ็ เพจของเรำกนั เลยคะ่ โดยคลิกท่ีรปู ตำรำง ตำมภำพท่ี 1 ค่ะ

ข้นั ตอนท่ี 2 จะปรำกฏไดอะล็อกบีอก Insert Table ข้ นึ มำ ซ่ึงในส่วนน้ ีจะเป็ นส่วนกำหนดรำยละเอียดของตำรำงท่ีเรำตอ้ งกำรจะสรำ้ ง อนั ดบั แรกกค็ อื กำหนดขนำดของตำรำง โดยตำมตวั อยำ่ งจะขอสรำ้ งตำรำงขนำด 3 แถว 3 คอลมั น์ โดยใหม้ ำขนำดควำมกวำ้ งของตำรำงเท่ำกบั 300 pixels และกำหนดขอบของตำรำงใหเ้ ป็ นแบบไมม่ ีขอบเมอื่ กำหนดไดต้ ำมตอ้ งกำรแลว้ คลิกท่ีป่ ุม OKและแลว้ เรำก็จะไดต้ ำรำงขนำด 3 แถว 3 คอลมั น์ และกวำ้ ง300 pixels หำกเรำ Save ไฟลแ์ ลว้ ดูผลลพั ธ์ ก็จะไม่เหน็ อะไรใด ๆ ท้งั ส้ ิน เพรำะเรำกำหนดใหเ้ ป็ นแบบไม่มีขอบ

โดยส่วนใหญแ่ ลว้ เรำจะกำหนดใหเ้ ป็ นแบบไม่มี ขอบ ในกรณีที่ใชส้ ำหรบั จดั ตำแหน่งของขอ้ ควำมเน้ ือหำซะเป็ นส่วนใหญ่ และหำกเรำตอ้ งกำรแบบใหแ้ สดงผลดว้ ย เรำกจ็ ะตอ้ งปรบั แต่งรำยละเอียดใหก้ บั ตำรำงดว้ ย ไมว่ ำ่ จะเป็ นกำรใส่เสน้ ขอบ กำรใสส่ ีขอบตำรำง กำรใสส่ ีใหพ้ ้ นื ของตำรำง และรวมไปถึงกำรใส่ภำพใหก้ บั พ้ นื ของตำรำงกำรปรบั แตง่ ตำรำง ดว้ ยกำรใสส่ ีพ้ ืนและเสน้ ขอบบท ควำมน้ ีเป็ นบทควำมตอ่ จำกบทควำมสอน Dreamweaverในบทควำมท่ีแลว้ ค่ะ หลงั จำกท่ีบทควำมท่ีแลว้ เรำทำWorkshop Photoshop สรำ้ งตำรำงไดแ้ ลว้ ในบทควำมน้ ีเรำจะมำปรบั แต่งตำรำงของเรำโดยกำรเพมิ่ สีสนั ใหพ้ ้ นื ตำรำงและเสน้ขอบขน้ั ตอนแรก กอ่ นอ่ืนเรำตอ้ งสรำ้ งตำรำงข้ นึ มำกอ่ นนะค่ะ จะกี่แถวกคี่ อลมั น์ก็ได้ Webmaster ขอใช้ Table จำกบทควำม กำร

สรำ้ งตำรำงใน Dreamweaver ท่ีไดส้ รำ้ งไวใ้ นบทควำมท่ีแลว้ นะค่ะเมือ่ สรำ้ งตำรำงแลว้ หำกเรำไมไ่ ดก้ ำหนดเสน้ ขอบตำรำง(เหมอื นบทควำมที่ผ่ำนมำตอนสรำ้ ง Table กำหนด Border=0)ต้งั แต่เร่ิมตน้ สรำ้ ง เม่อื เรำจะใสส่ ีของเสน้ ขอบ ถำ้ เรำใสส่ ีไปจะทำใหไ้ มเ่ หน็ สีของเสน้ ขอบตำรำง ดงั น้ันเรำจงึ ตอ้ งไปกำหนดเสน้ ขอบของตำรำงกนั กอ่ น โดยกำรใชเ้ มำสจ์ บั ท่ีตำรำง จำกน้ันกำหนดคำ่ Border ท่ีสว่ น Properties ใหม้ คี ำ่ เท่ำกบั 1 ดงั ที่ปรำกฏตำมภำพที่ 1เมอื่ เรำกำหนด Border=1 แลว้ เสน้ ขอบของตำรำงจะเปล่ียนไปดงั ภำพท่ี 2 และ เมื่อทดสอบดูผ่ำน Browser ก็ทำใหเ้ รำสำมำรถเหน็ ขอบของตำรำงได้

ข้นั ตอนที่ 2 เม่ือเรำไดเ้ สน้ ขอบของ ตำรำงแลว้ ใหเ้ รำใชเ้ มำส์จบั ท่ีท่ีตำรำง จำกน้ัน สงั เกตที่ส่วนของ Properties แลว้ คลิกเลือก Brdr Color เพ่อื ใส่สีใหก้ บั เสน้ ของตำรำง และเม่อื ใส่สีแลว้กจ็ ะไดเ้ สน้ ขอบตำรำงเหมอื นภำพที่ 3 คะ่ขน้ั ตอนท่ี 3 ขน้ั ตอนน้ ีเรำจะมำใส่สี ใหก้ บั พ้ ืนหลงั ของตำรำงกนัค่ะ เริ่มตน้ โดยใหเ้ รำใชเ้ มำสจ์ บั ท่ีท่ีตำรำง จำกน้ันใส่สีให้Background ของตำรำงโดยคลิกเลือกสีท่ี Bg Color ของProperties จำกน้ันคลิกเลือกสีที่ตอ้ งกำรคะ่

และแลว้ ก็เสร็จเรียบรอ้ ย ไดผ้ ลลพั ธข์ องกำรปรบั แต่งตำรำงตำมภำพท่ี 4 ค่ะกำรใสค่ ำอธิบำยใหร้ ูปภำพ โดยใชโ้ ปรแกรม Dreamweaverกำรใสค่ ำอธิบำยใหร้ ูปภำพ ก็คอื กำรใส่คำสงั่ ALT Tag ในภำษำHTLM นัน่ เอง และเรำสำมำรถใชโ้ ปรแกรม Dreamweaver ในกำรใส่คำอธิบำยใหร้ ปู ภำพได้ ซึ่งสำมำรถทำไดอ้ ยำ่ งง่ำยดำยและรวดเร็ว ติดตำมดูไดใ้ นบทควำมน้ ีค่ะ

ขน้ั ตอนกำรใสค่ ำอธิบำยใหร้ ูปภำพ โดยใชโ้ ปรแกรมDreamweaver อยำ่ งแรกเรำกต็ อ้ งนำภำพเขำ้ มำในโปรแกรมโดยคลิกที่ป่ ุมที่ 1เมื่อเรำไดร้ ูปภำพมำแลว้ ใหเ้ รำ คลิกท่ีรูปภำพตำมรปู ภำพที่ 2จำกน้ันสงั เกตในส่วนบริเวณ Properties เรำจะเห็นในส่วนของช่อง Alt ตำมภำพที่ 3 ใหเ้ รำใสค่ ำอธิบำยรปู ภำพลงในชอ่ ง Altน้ ีค่ะ

แค่ น้ ีกเ็ สร็จเรียบรอ้ ยแลว้ คะ่ ลองเซฟไฟลเ์ ป็ น HTML ไฟลแ์ ลว้ลองเปิ ดไฟลด์ ู หรือจะกด F12 ดูเลยกไ็ ดค้ ะ่ เม่อื เรำเล่ือนเมำ้ ส์ไปบนรูปภำพ เรำก็จะเห็นคำอธิบำยของรูปภำพ ตำมท่ีเรำกำหนดไวค้ ่ะเพ่ิมอกั ขระพเิ ศษใน Dreamweaverในกำรทำเวบ็ เพจ บำงคร้งั เรำอำจจะตอ้ งใส่อกั ขระพิเศษต่ำง ๆซึ่งทำง Dreamweaver เคำ้ กเ็ ตรียมเคร่ืองมือในสว่ นน้ ีไวใ้ หเ้ รำใช้อยแู่ ลว้ คะ่ ทำไดอ้ ยำ่ งไรเขำ้ มำดูไดท้ ี่บทควำมน้ ีค่ะ

สำหรบั ตวั อยำ่ งอกั ขระที่เรำจะมำลองใส่กนั วนั น้ ี กค็ อื Copyrightท่ีมีลกั ษณะตำมภำพฝัง่ ซำ้ ยมือ วธิ ีทำก็ไมอ่ ยำกคะ่ โดยทำได้ดงั น้ ีก่อนอ่ืนกใ็ หพ้ มิ พข์ อ้ ควำมข้นั มำกอ่ นนะคะ่ จำกน้ันใหว้ ำงเคอเซอรต์ รงตำแหน่ง Xจำกน้ันไปท่ีบริเวณเมนูบำร์ เลือกใชค้ ำสงั่ Insert --> SpecialCharecters --> Copyrightก็จะไดผ้ ลลพั ธต์ ำมภำพดำ้ นล่ำงคะ่

เทคนิคกำรทำภำพ Swap Imageสำหรบั บทควำมน้ ี เรำจะมำทำเทคนิคกำร Swap Image เพื่อเพ่มิ ควำมน่ำสนใจใหก้ บั กำรลิงคร์ ูปภำพบนเวบ็ นอกจำกน้ ีสำมำรถนำไปประยุกต์ ทำใหเ้ วบ็ ไซตด์ ูดี แต่จะประยุกตแ์ บบไหน ดูไอเดียกำรทำไดท้ ่ีนี่ค่ะเทคนิคน้ ีทไดไ้ มอ่ ยำกค่ะ เพรำะเป็ นกำรใชเ้ ทคนิคลูกเล่นท่ีมีอยู่ในโปรแกรม Dreamweaver ... เรำจะทำเทคนิคน้ ีไดน้ ้ัน ก่อนอื่นตอ้ งเตรียมไฟลร์ ปู ภำพไวก้ อ่ น 2 ภำพค่ะ ในบทควำมน้ ีWebmaster เตรียมภำพไว้ 2 ภำพตำมรูปดำ้ นบนคะ่จำกน้ันเม่ือเรำไดร้ ูปภำพมำ 2 รปู แลว้ เรำก็จะมำเร่ิมทำกนั เลยค่ะข้นั ตอนที่ 1 กใ็ หท้ ำกำรสรำ้ งไฟลใ์ หม่ใน Dreamweaver เลยคะ่ขน้ั ตอนท่ี 2 ใหท้ ำกำรดึงรปู เขำ้ มำใน โปรแกรม โดยกำรที่ตำแหน่ง A ตำมภำพค่ะ จำกน้ันจะมไี ดอะล็อกบ็อก SelectImage Source ตำมรปู ดำ้ นล่ำง ใหท้ ำกำรเลือกไฟลภ์ ำพแรกท่ีเตรียมไว้ จำกน้ันกดป่ ุม OK ตำมตำแหน่ง C

ขน้ั ตอนที่ 3 เม่อื ไดร้ ูปมำแลว้ ใหท้ ำกำรคลิกท่ีรปู จำกน้ันสงั เกตท่ี Panel Group ทำงดำ้ นขวำมอื ของโปรแกรม เลือกแท็บBehaviors (หำกไมม่ ี Panel Group Behaviors ใหท้ ำกำรเรียกใชง้ ำน โดยกำรเลือกคำสงั่ Window จำกเมนูบำรด์ ำ้ นบนแลว้ เลือก Behaviors) จำกน้ันคลิกที่รปู เครื่องหมำยบวก ตำมตำแหน่ง A แลว้ เลือก Swap Imageข้นั ตอนท่ี 4 จะปรำกฏไดอะล็อกบ็อก Swap Image ใหท้ ำกำรคลิก Browse... ตำมตำแหน่งท่ี 1 จำกน้ันจะปรำกฏไดอะล็อกบ็อก Select Image Source ตำมรปู ดำ้ นล่ำง ใหท้ ำกำรเลือกไฟลภ์ ำพอีกภำพท่ีเตรียมไว้ จำกน้ันกดป่ ุม OK ตำมตำแหน่ง 2 จะกลบั มำที่ ไดอะล็อกบ็อก Swap Image จำกน้ันกด OK ที่ตำแหน่งที่ 3ขน้ั ตอนท่ี 5 ทำกำรบญั ทึกหนำ้ เวบ็ เพจ เป็ นเอกสำร .html หรือ.htm แคน่ ้ ีก็เสร็จเรียบรอ้ ยแลว้ คะ่