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

6.คลกิ ป่มุ OK 7.จะไดส้ ีตามตอ้ งการ 7.8 การใส่ภาพพนื้ หลังใหต้ าราง การใสภ่ าพพืน้ หลงั ใหต้ ารางสามารถทาไดด้ งั นี้ 1.คลิกเลือกตารางท่ตี อ้ งการใสภ่ าพพืน้ หลงั 2.คลิกเลือกคาส่งั Modify >> Edit Tag 3.จะปรากฏหนา้ ตา่ ง Tag Editor – table 4.เลอื กแทบ็ Browser Specific 5.คลิกท่ปี ่มุ Browser เพ่ือเลอื กรูปท่ตี อ้ งการ

6.จะปรากฏหนา้ ตา่ ง Select File ใหเ้ ลอื กไฟลท์ ่ีตอ้ งการ 7.คลกิ ป่มุ OK 8.ท่ชี อ่ ง Background image จะปรากฏช่ือไฟล์ 9.คลกิ ป่มุ OK 10. จะปรากฏภาพพืน้ หลงั ของตารางท่ีกาหนด

7.9 การใส่ข้อมูลในตาราง การใสข่ อ้ มลู ใหก้ บั ตารางสามารถใสไ่ ดท้ งั้ ขอ้ มลู รูปภาพและตวั อกั ษร เพ่อื ให้ ตารางมีขอ้ มลู ตามท่ตี อ้ งการ โดยสามารถใสข่ อ้ มลู ดงั นี้ 7.9.1 การใส่ข้อมูลประเภทข้อความใหก้ บั ตาราง การใสข่ อ้ มลู ใหก้ บั ตาราง สามารถเลือกตาแหน่งท่ีตอ้ งการใสข่ อ้ มลู และพมิ พข์ อ้ ความ ท่ตี อ้ งการไดเ้ ลย หาก ตอ้ งการขนึ้ บรรทดั ใหมโ่ ดยระยะหา่ งบรรทดั เทา่ กบั 1 เทา่ สามารถกดป่มุ Shift + Enter เพ่ือขนึ้ บรรทดั ใหม่ ในระยะ 1 บรรทดั และพิมพข์ อ้ มลู ท่ีตอ้ งการ หากตอ้ งการ เพ่มิ การเวน้ ช่องวา่ งใหก้ บั ขอ้ ความสามารถกดป่มุ Shift + Ctrl + เคาะแปน้ Space Bar เพ่ือเพ่ิมการเยือ้ ง 7.9.2 การใส่ข้อมูลประเภทรูปภาพใหก้ บั ตาราง การใสข่ อ้ มลู ประเภทรูปภาพใหก้ บั ตาราง สามารถทาไดโ้ ดยเลือกตาแหนง่ ท่ีตอ้ งการ คลิกท่ีเคร่อื งมือ Insert แท็บ Common เลือกไอคอนรูปภาพ Images เลือกรูปภาพท่ี ตอ้ งการ จะปรากฏรูปภาพท่ีเลือกในเซลลต์ ารางท่ีกาหนด

7.10 การจัดตาแหน่งตาราง ในการจดั ตาแหนง่ การแสดงผลในตารางสามารถคลกิ ท่ตี ารางท่ีตอ้ งการจดั ตาแหนง่ ท่ีหนา้ ตา่ ง Properties Inspector ในชอ่ ง Align (Alignment) ใหจ้ ดั ก่ึงกลาง ตารางจะถกู จดั กึง่ กลางตามท่ีกาหนด การจดั ตาแหน่งตารางสามารถกาหนดไดต้ ามตวั เลือกในชอ่ ง Align ดงั คาอธิบาย ตอ่ ไปนี้ Default : ไมม่ กี ารกาหนดคา่ ท่ีกาหนดอตั โนมตั ใิ นโปรแกรม Left : กาหนดตาแหนง่ ตารางใหช้ ิดซา้ ย Center : กาหนดตาแหนง่ ตารางใหจ้ ดั ก่ึงกลาง Right : กาหนดตาแหน่งตารางใหช้ ิดขวา หน่วยที่ 8 การใชง้ านเฟรมในเว็บไซต์ 8.1 รู้จักเฟรมและเฟรมเซต เฟรม (Frame) คือ การแบง่ สว่ นพนื้ ท่กี ารแสดงผลหนา้ เว็บเพจ ออกเป็นสว่ น ๆ โดยในแตล่ ะสว่ นจะแสดง หนา้ เว็บเพจหรอื ไฟล์ HTML ท่แี ตกต่างกนั ไดโ้ ดยแบง่ หนา้ เวบ็ เพจท่แี สดงผลออกเป็นสว่ น ๆ บนั ทกึ เป็น ไฟลข์ อ้ มลู แยกเป็นอสิ ระจากกนั อย่าง

ชดั เจน เช่น เฟรม เมนซู า้ ย เฟรมเนือ้ หา เฟรมสว่ นหวั เว็บ เฟรมสว่ นทา้ ย และเฟรม เมนขู วา เป็นตน้ ข้อดี ขอการใชเ้ ฟรมเขา้ มาช่วยในการจดั หนา้ เว็บเพจ , คอื สามารถจดั การ เนือ้ หาไดส้ ะดวกขนึ้ เน่ืองจากหนา้ การแสดงผลของเวบ็ เพจ จะแบง่ ออกเป็น สว่ นประกอบตา่ ง ๆ ท่ีชดั เจน เม่ือตอ้ งการแกไ้ ขสว่ นใด สามารถท่จี ะเรยี กเฟรมสว่ น นนั้ ขนึ้ มาแกไ้ ขไดท้ นั ที ทาใหป้ ระหยดั เวลาใน การพฒั นาระบบเว็บไซต์ ชว่ ยลดการ ทางานซบั ซอ้ นลงได้ เช่น ชว่ ยใหไ้ มต่ อ้ งตามสรา้ งและแกไ้ ขเมนทู ่เี รยี กใชง้ าน ทกุ ๆ หนา้ เว็บเพจ ข้อเสยี ของการใชเ้ ฟรมเขา้ มาช่วยในการจดั หนา้ เว็บเพจ คอื เฟรมควบคมุ ได้ ยาก หากไมม่ กี ารเขา้ ใจ เพียงพอจะทาใหก้ ารสรา้ งเว็บไซตไ์ มม่ ปี ระสทิ ธิภาพได้ นอกจากนนั้ เฟรมไมส่ ามารถนาเสนอแกผ่ พู้ กิ ารทาง สายตาได้ บาง Web Browser อาจไมส่ ามารถเปิดเวบ็ เพจท่ีใชเ้ ฟรมไดแ้ ละเฟรมมกี ารโหลดท่ีชา้ ในครงั้ แรก เพราะวา่ 1 หนา้ แสดงผลตอ้ งทาการโหลดมากกวา่ 1 ไฟลเ์ ว็บเพจขนึ้ ไปในครงั้ เดียว การสรา้ ง เว็บไซตโ์ ดยการ ใชเ้ ฟรมทาใหก้ ารคน้ หาขอ้ มลู ผา่ น Search Engine จากเวบ็ ไซต์ Google คน้ หาขอ้ มลู ไดย้ ากลาบาก ไมเ่ หมาะกบั การทาเวบ็ ไซตป์ ระเภทขายสนิ คา้ หรอื เว็บไซตท์ ่ตี อ้ งการใหผ้ เู้ ขา้ ชมมีจานวนมาก การแบง่ เฟรมสามารถทาได้ เฟรมเซต็ (Frameset)คอื ไฟล์ HTML ท่ปี ระกอบดว้ ยกลมุ่ ของเฟรม และ คณุ สมบตั ติ า่ ง ๆ ของเฟรม เชน่ ขนาดของแตล่ ะเฟรม จานวนเฟรมไฟล์ HTML ท่จี ะ นามาใชแ้ ตล่ ะเฟรม รวมทงั้ การเช่ือมโยงในแตล่ ะเฟรม 8.2 การสร้างเฟรมเซต การสรา้ งเว็บไซตด์ ว้ ยการใชเ้ ฟรม เพ่ือใหก้ ารแสดงเนือ้ หาในหนา้ เว็บแบง่ ออกเป็นสว่ น ๆ โดยแตล่ ะสว่ นท่ีแบง่ เรยี กวา่ เฟรม (Frame) เพ่ือใหผ้ พู้ ฒั นาเวบ็ ไซต์

สามารถจดั การกบั ขอ้ มลู แตล่ ะสว่ นไดโ้ ดยเป็นอิสระจากกนั การสรา้ งเวบ็ ไซตด์ ว้ ยการ ใชเ้ ฟรมสว่ นใหญ่จะใชก้ บั เว็บไซตท์ ่มี กี ารเปล่ียนแปลงเฉพาะสว่ นของเนือ้ หา เชน่ E – Learning ซง่ึ ใชว้ ธิ ีตรงึ รายการเมนหู ลกั (Main Menu) ไวด้ า้ นซา้ ยของจอภาพและให้ สว่ นเนือ้ หา ซง่ึ จดั ไวด้ า้ นขวาสามารถเลื่อนไดโ้ ดยใชแ้ ถบเล่อื น (Scroll bar) สาหรบั การสรา้ งเฟรมและเฟรมเซต พ่ือนาเสนอหนา้ เวบ็ เพจโดยแบง่ ออกเป็นสว่ น ๆท่นี ยิ ม สรา้ งในโปรแกรม Adobe Dreamweaver CS5 สามารถสรา้ งได้ 2 วิธีหลกั คอื การ สรา้ งเฟรมเซตแบบสาเรจ็ รูปและการสรา้ งเฟรมจากการวาดดว้ ยตนเอง 8.2.1 การสร้างเฟรมเซตแบบสาเร็จรูป การสรา้ งเฟรมเซตแบบสาเรจ็ รูปโปรแกรม Adobe Dreamweaver CS5 ไดเ้ ตรยี มไว้ ให้ สามารถสรา้ งได้ 2 วิธี คือ วิธที ี่ 1 การสรา้ งเฟรมเซตจากเมนู File มีขนั้ ตอนการสรา้ งดงั นี้ 1.คลิกท่ีเมนู File >New 2.จะปรากฏหนา้ จอ New Document ใหส้ รา้ งเอกสารให้ 3.เลอื กแท็บ Page from Sample > Frameset 4.เลอื กรูปแบบเฟรมท่ีตอ้ งการ 5.เลือกชนิดของเอกสาร 6.คลกิ Create เพ่ือสรา้ งเฟรม

ประเภทของเฟรมมใี หเ้ ลือก 15 รูปแบบ ดงั นี้ Fixed Bottom : เฟรมท่ีแบง่ ออกในแนวนอนขอบดา้ นลา่ งมีขนาดคงท่ี Fixed Bottom , Nested Left: เฟรมท่ีมีขอบดา้ นลา่ งขนาดคงท่ีและขอบ ดา้ นซา้ ยทบั ซอ้ นกนั Fixed Bottom , Nested Right : เฟรมท่ีมขี อบดา้ นลา่ งขนาดคงท่ีและขอบ ดา้ นขวาทบั ซอ้ นกนั Fixed Left : เฟรมท่ีแบง่ ในแนวตงั้ ท่ีมีขอบดา้ นซา้ ยขนาดคงท่ี Fixed Left Nested Bottom : เฟรมท่ีมขี อบดา้ นซา้ ยขนาดคงท่ีและขอบ ดา้ นลา่ งท่ีทบั ซอ้ นกนั Fixed Left Nested Top : เฟรมท่ีมขี อบดา้ นซา้ ยขนาดคงท่ีและขอบ ดา้ นบนทบั ซอ้ นกนั

Fixed Right : เฟรมท่ีแบง่ ออกในแนวตงั้ มขี อบดา้ นขวาขนาดคงท่ี Fixed Right ,Nested Bottom : เฟรมท่มี ขี อบดา้ นขวาขนาดคงท่ีและขอบ ดา้ นลา่ งท่ีทบั ซอ้ นกนั Fixed Right ,Nested Top : เฟรมท่ีมขี อบดา้ นขวาขนาดคงท่ีและขอบ ดา้ นบนทบั ซอ้ นกนั Fixed Top : เฟรมท่ีแบง่ ออกในแนวนอนท่ีมีขอบดา้ นบนขนาดคงท่ี Fixed Top, Fixed Bottom : เฟรมท่ีมขี นาดคงท่ที งั้ ดา้ นบนและดา้ นลา่ ง Fixed Top, Nested Left : เฟรมท่ีมขี นาดคงท่ดี า้ นบนและขอบดา้ นซา้ ย ซอ้ นกนั Fixed Top, Nested Right : เฟรมท่ีมีขนาดคงท่ดี า้ นบนและขอบดา้ นขวา ซอ้ นกนั Split Horizontal : เฟรมท่ีแบง่ ครง่ึ ในแนวนอน Split Vertical : เฟรมท่ีแบง่ ครง่ึ ในแนวตงั้ 7.จะปรากฏกลอ่ งขอ้ ความ กาหนดคณุ สมบตั ิการเขา้ ถงึ โดยการระบคุ ณุ สมบตั ิ แตล่ ะเฟรมและการระบุ ช่ือใหก้ บั เฟรม 8.ตงั้ คา่ เฟรมใหเ้ ป็นเฟรมหลกั 9.คลิก OK 10.จะไดเ้ ฟรมตามท่ีกาหนด วิธีท่ี 2 การสรา้ งเฟรมเซต จากหนา้ ตา่ งแถบเคร่อื งมอื Insert แท็บ Layout มี ขนั้ ตอนการสรา้ งดงั นี้ 1.เม่ือเปิดไฟล์ html ขนึ้ มาจะพบเอกสารเปลา่ 2.ท่แี ถบเครอ่ื งมอื Insert คลกิ ท่แี ทบ็ Layout 3. คลิกท่ี เฟรมเซต เลือกรูปแบบเฟรมเซตตามท่ีตอ้ งการ

แถบเคร่อื งมอื Insert แท็บ Layout เคร่อื งมือ เฟรมเซต มีเฟรมเซตทงั้ หมด 13 รูปแบบ ใหเ้ ลือกใช้ แตล่ ะรูปแบบสามารถอธิบายไดด้ งั นี้ 4.จะปรากฏกลอ่ งขอ้ ความ กาหนดคณุ สมบตั ิการเขา้ ถงึ โดยการระบคุ ณุ สมบตั แิ ตล่ ะ เฟรมและการระบชุ ่ือใหก้ บั เฟรม 5.ตงั้ คา่ เฟรมใหเ้ ป็นเฟรมหลกั 6.คลิก OK 7.จะไดเ้ ฟรมตามท่ีกาหนด 8.2.2 การสร้างเฟรมจากการวาดดว้ ยตนเอง สาหรบั โปรแกรม Adobe Dreamweaver CS5 มขี นั้ ตอนดงั นี้ 1.คลิกเปิดหนา้ ตา่ งเอกสารเปลา่ HTML

2.ท่แี ถบเครอ่ื งมอื Document คลิก Visual Aids > Frame Borders 3.จะปรากฏเสน้ ขอบของเฟรมขนึ้ มา เลอื่ นเมาสไ์ ปท่ีเสน้ ขอบของเฟรมคลกิ และลาก (Click and Drag) เพ่ือสรา้ งเฟรม ถา้ ตอ้ งการสรา้ งกรอบดา้ นใดใหค้ ลิกท่ี กรอบของเฟรมดา้ นนนั้ ๆ

8.3 การปรับแต่งคุณสมบตั ขิ องเฟรม การออกแบบคณุ สมบตั ติ ามท่ผี อู้ อกแบบตอ้ งการสามารถทาได้ ไมว่ า่ จะเป็นการ ปรบั ขนาดของเฟรม การเพ่มิ เฟรม การลบเฟรม การแกไ้ ขเฟรม การใสส่ ใี หก้ บั เฟรม เป็นตน้ 8.3.1 การปรับขนาดของเฟรม การปรบั ขนาดของเฟรมสามารถทาไดโ้ ดยการใชเ้ มาสค์ ลกิ แลว้ ลากเฟรม ตามขนาดท่ี ตอ้ งการ 8.3.2 การเพม่ิ เฟรม การเพ่มิ เฟรมนนั้ สามารถเลือกโดยคลกิ ท่ีเฟรม ใชค้ าส่งั Modify > Frameset จะ ปรากฏรูปแบบใหเ้ ลอื กดงั นี้ EditNoFrames Content : แกไ้ ขเนือ้ หาโดยไมใ่ ชเ้ ฟรม Split Frame Left : เพ่มิ เฟรมแยกดา้ นซา้ ย Split Frame Right : เพ่มิ เฟรมแยกดา้ นขวา Split Frame Up : เพ่มิ เฟรมแยกดา้ นบน

Split Frame Down : เพ่มิ เฟรมแยกดา้ นลา่ ง เลือกรูปแบบตามท่ีตอ้ งการเพ่มิ จะไดเ้ ฟรมขนึ้ มา จะไดเ้ ฟรมแยกท่ีเพ่ิมเขา้ มาดา้ นลา่ ง 8.3.3 การลบเฟรม สามารถทาไดโ้ ดยการคลกิ ลากท่ีเสน้ แบง่ ของเฟรมท่ตี อ้ งการลบออกจากพนื้ ท่ีการ ทางานจะปรากฏกลอ่ งขอ้ ความขนึ้ เพ่อื ใหบ้ นั ทกึ เป็นเฟรมใหม่ เฟรมท่ตี อ้ งการลบจะ หายไป เฟรมท่ตี อ้ งการ ลบจะหายไป เฟรมท่ตี อ้ งการจะหายไป

8.3.4 การปรับแต่งเฟรม การปรบั แตง่ เฟรมนนั้ สามารถทาไดโ้ ดยการคลกิ เลือกเฟรมท่ตี อ้ งการปรบั แตง่ ท่ีแถบ เคร่อื งมอื Properties Inspector คลิกป่มุ ท่มี มุ ลา่ งขวาของแถบเคร่อื งมอื Properties Inspector เพ่ือใหแ้ สดงสว่ นท่ีถกู ซอ้ นแสดงเอาไว้ 1.Frameset : เฟรมเซตท่ีเลอื กจะบอกจานวน Rows และ Cols ท่กี าลงั ถกู เลอื ก อยู่ 2.Borders : กาหนดวา่ เสน้ ขอบจะกาหนดในเฟรมท่เี ลอื กเม่ือเอกสารถกู แสดงผลในบราวเซอรเ์ พ่ือแสดงเสน้ ขอบ เลือก Yes เพ่ือปอ้ งกนั ไมใ่ หบ้ ราวเซอร์ แสดงเสน้ ขอบ เลือก No เพ่ือใหแ้ สดงผลเสน้ ขอบ ตามท่ีกาหนดปรากฏ ในบราวเซอร์ หรอื จะเลอื กใหแ้ สดงค่าเรม่ิ ตน้ ของโปรแกรมโดยเลือกท่ี Default 3.Border width : ระบคุ วามกวา้ งเสน้ ขอบในเฟรม 4.Border color : กาหนดชดุ สสี าหรบั เสน้ ขอบเฟรม ใชต้ วั เลือกสีเพ่ือเลอื กสี หรอื สามารถพิมพค์ า่ ฐานสบิ หก สาหรบั กาหนดสใี หก้ บั เสน้ ขอบเฟรมได้

5.RowCol Selection : กาหนดขนาดและคอลมั นส์ าหรบั เฟรมท่ีเลือกใหค้ ลิกท่ี แทบ็ ทางดา้ นซา้ ยหรอื ดา้ นบนของพืน้ ท่ี RowCol เลอื กแลว้ ปอ้ นความสงู หรอื ความ กวา้ งในกลอ่ งขอ้ ความ 6.Tab Selection : แทบ็ ท่ีแสดงเลือกแต่ละสว่ นของเฟรม 8.4 การใส่เนือ้ หาลงในเฟรม เฟรมเซตเปรยี บเสมอื นเวบ็ เพจแตล่ ะหนา้ ท่ีวางทบั ซอ้ นกนั แสดงผลอยใู่ นหนา้ เว็บเพจ เดยี วกนั ในโปรแกรมเวบ็ บราวเซอร์ ดงั นนั้ ในการใสเ่ นือ้ หาขอ้ มลู หรอื อกแบบแตล่ ะ เฟรมจงึ สามารถจดั การ ไดอ้ ย่างเป็นอิสระจากกนั สามารถพมิ พข์ อ้ ความ แทรกภาพ แทรกตาราง หรอื ตกแตง่ เฟรมไดโ้ ดยไมก่ ระทบเฟรมอ่นื โดยมีวธิ ีการใสเ่ นือ้ หาในเฟรม ดงั นี้ 1.สรา้ งเฟรมเซตใหมต่ ามท่ตี อ้ งการ 2.เม่ือไดเ้ ลอื กเฟรมเซตหรอื สรา้ งเฟรมเซตเสรจ็ แลว้ เช่น สรา้ งแบบ Fixed Top Nested Left โดยกาหนดให้ Top Frame เป็นสว่ นหวั ของบรษิ ัท ประกอบดว้ ยช่ือ และโลโก้ สว่ น Main Frame เป็นเนือ้ หารายละเอยี ดสินคา้ และสว่ นดา้ น ซา้ ยเป็นลงิ ก์ ตา่ ง ๆ จะไดเ้ วบ็ เพจลกั ษณะดงั นี้ การนาไฟล์ HTML ท่สี รา้ งเสรจ็ แลว้ มาประกอบเป็นเฟรมเซต ทาไดด้ งั นี้

1.สรา้ งเฟรมเซตตามจานวนเฟรม แลว้ กดแปน้ Shift + F2เพ่ือเรยี กพาเนลเฟรม เซต 2.คลกิ ท่ีตาแหน่งของเฟรมท่ตี อ้ งการเพ่มิ เช่น สว่ นของเนือ้ หา (Main Frame) 3.คลิก Src ท่หี นา้ ตา่ ง Properties Inspectorn 4.จะปรากฏหนา้ จอ HTML ท่ตี อ้ งการเพ่มิ 5.คลกิ OK 6.จะปรากฏกลอ่ งขอ้ ความใหบ้ นั ทกึ คลกิ Yes เพ่ือบนั ทกึ 7.จะปรากฏเนือ้ หาท่ีแทรกเขา้ มาจากไฟล์ HTML

8.5 การบันทกึ เฟรม การบนั ทกึ เฟรมสามารถบนั ทกึ เฟรมหลกั และเฟรมยอ่ ยไดด้ งั นี้ 8.5.1 การบันทกึ เฟรมหลัก ในการบนั ทกึ เฟรมหลกั (Frameset)มีขนั้ ตอนดงั นี้ 1.คลิกท่ีโครงสรา้ งเฟรมหลกั ในเฟรม 2.คลกิ เมน File > Frameset เพ่ือบนั ทกึ โครงเฟรม กอ่ นท่ีจะบนั ทกึ เฟรมเซต ทงั้ หมด ตอ้ งบนั ทกึ เฟรมยอ่ ยแต่ละสว่ นใหเ้ รยี บรอ้ ยกอ่ น 3.เลอื กสถานท่เี ก็บไฟลจ์ ากช่อง Save in 4. พมิ พช์ ่ือไฟล์ Main Frame ลงในช่อง File name 5.คลกิ ป่มุ Save เพ่ือบนั ทกึ เฟรม 8.5.2 การบันทกึ เฟรมย่อย การบนั ทกึ เฟรมยอ่ ยมีขนั้ ตอน ดงั นี้ 1. คลกิ ท่ีโครงเฟรมยอ่ ย ในหนา้ ตา่ งเฟรมพาเนล เฟรมยอ่ ยตามท่ีตอ้ งการ

2.คลิกเมมนู File >Save Frame set As หรอื กดป่มุ Ctrl + Shift +S เพ่ือบนั ทกึ โครงเฟรม 3.เลอื กสถานท่เี ก็บไฟลจ์ ากช่อง Save in 4. พมิ พช์ ่ือไฟลล์ งในช่อง File name 5. คลกิ ป่มุ Save เพ่ือบนั ทกึ เฟรมยอ่ ยแตล่ ะสว่ นตามท่ีตอ้ งการ ในการบนั ทกึ เฟรมยอ่ ยนนั้ จะตอ้ งบนั ทกึ ใหค้ รบตามเฟรมท่ีแยกไว้ ใหบ้ นั ทกึ ตาม สว่ นประกอบ ดงั นี้ Topframe : เฟรมดา้ นบน Mainframe : เฟรมสว่ นเนือ้ หา Leftframe : เฟรมดา้ นซา้ ย Page : เฟรมเซตทงั้ หมด สามารถพมิ พช์ ่ืออ่ืนได้

8.6 การเชอ่ื โยงเวบ็ เพจในเฟรม การสรา้ งเว็บไซตโ์ ดยการใชเ้ ฟรมอาจมีการแบง่ สว่ นของหนา้ จอออกเป็นสว่ น ๆ โดยแตล่ ะสว่ นจะมีการทางานท่ีเป็นอสิ ระแยกออกจากกนั แตส่ ามารถเช่ือมโยงการ ทางานเขา้ หากนั ไดด้ งั นี้ 1.เลอื กขอ้ ความท่ตี อ้ งการเช่ือมโยง 2.ในPropertiesท่ชี อ่ ง Link เลอื ก เปิดไฟลเ์ วบ็ เพจ 3.จะปรากฏกลอ่ งขอ้ ความ Select File เลือกไฟลท์ ่ตี อ้ งการเช่ือมโยง 4.คลิก OK 5.จะปรากฏเสน้ ใตห้ นา้ ขอ้ ความท่เี ช่ือมโยง 6.ท่ชี อ่ ง Target เลอื กสว่ นของเฟรมหลกั Mainframe ท่ตี อ้ งการใหผ้ ลการ เช่ือมโยงปรากฏ 7.แสดงผลเฟรมผา่ นโปรแกรมเวบ็ บราวเซอรก์ ด F12 จะแสดงผล

หน่วยท่ี 9 การเพมิ่ ลูกเล่นเวบ็ ไซต์ 9.1 การสร้างเมนู Spry Menu Bar การเพ่มิ ลกู เลน่ ใหก้ บั เวบ็ ไซตส์ าหรบั โปรแกรม Adobe Dreamweaver CS5 นีไ้ ด้ นา Ajax มาพฒั นาใชก้ บั โปรแกรม Adobe Dreamweaver และตงั้ ช่ือเครอ่ื งมือนนั้ วา่ spry ซง่ึ ถือเป็นการเขียนเว็บเพจใหต้ อบโตก้ บั ผใู้ ชไ้ ดอ้ ยา่ งรวดเรว็ และนมุ่ นวล ในสว่ น ของ spry Menu Bar นนั้ การเพ่มิ ลกู เลน่ ใหก้ บั เว็บไซตส์ าหรบั โปรแกรม Adobe Dreamweaver CS5 นีไ้ ด้ นา Ajax มาพฒั นาใชก้ บั โปรแกรม Adobe Dreamweaver และตงั้ ช่ือเครอ่ื งมือนนั้ วา่ spry Manu Bar นนั้ เป็นเมนใู นลกั ษณะท่ี Navigation แบบท่ีเม่ือเอาเมาสไ์ ปวางบน เมนขู อ้ ความนนั้ แลว้ จะมีรายการแสดงรายละเอียดเมนขู อ้ ความเพ่มิ เติม หรอื มีเมนู เพ่มิ ขนึ้ มา ซง่ึ การเขยี น Navigation แบบนนั้ จาเป็นตอ้ งใชค้ วามรูเ้ รอ่ื ง CSS แตต่ อนี้ Dreamweaver CS5 นนั้ ไดเ้ ตรยี มเครอ่ื งมือสาหรบั สรา้ ง Navigation แบบง่าย ๆ ดว้ ย spry Manu Bar ใหใ้ ชใ้ นการสรา้ งเว็บไซตม์ ืออาชีพแลว้ ซง่ึ มขี นั้ ตอนการสรา้ ง spry Manu Bar ดงั นี้ 1.เปิดเว็บเพจท่ตี อ้ งการแทรก Navigation ขนึ้ มา 2.คลิกตาแน่งท่ีตอ้ งการวาง spry Manu Bar

3.คลกิ ท่ี แถบเครอ่ื งมือ Insert เลอื กแท็บ Spry จะปรากฏเคร่อื งมอื สาหรบั สรา้ ง Spry ดงั นี้ 4. จะปรากฏกลอ่ งขอ้ ความใหเ้ ลอื กรูปแบบของเมนู ซง่ึ มีอยู่ 2 รูปแบบคอื - Horizontal : แนวนอน - Vertical : แนวตงั้ 5.เลอื กรูปแบบตามท่ีตอ้ งการคลกิ OK 6.จะไดเ้ มนตู ามรูปแบบท่เี ลอื ก 7. กาหนดคณุ สมบตั เิ พ่มิ เตมิ ไดจ้ ากหนา้ ตา่ ง Properties Inspector ดงั นี้

8.พมิ พร์ ายการเมนแู ตล่ ะเมนตู ามรายการ 9. จะไดเ้ มนู ดงั รูป 9.2 การสร้าง Tab ดว้ ย Spry Tabbed Panels การสรา้ ง Spry Tabbed Panels Dreamweaver CS5 คอื แสดงผลขอ้ มลู แบบ Tab เนือ้ หาท่เี ก่ียวขอ้ ง เป็นการแสดงผลขอ้ มลู ท่มี ปี ระสทิ ธิภาพมากวิธีหนง่ึ ผใู้ ชง้ าน สามารถเลือกหวั ขอ้ เนือ้ หาดา้ นบน เนือ้ หาดา้ นลา่ งจะถกู แสดงผลตามหวั ขอ้ ท่ีเลอื ก มี

ขนั้ ตอนการสรา้ ง ดงั นี้ 1.คลกิ เลอื กตาแหนง่ ท่ตี อ้ งการสรา้ ง Spry Tabbed Panels 2.คลกิ ท่ีแท็บ Insert เลือก ดงั รูป 3.เม่อื คลกิ แลว้ จะได้ Spry Tabbed Panels 4. สามารถปรบั แตง่ คณุ สมบตั ิท่หี นา้ ต่าง Properties Inspector 5.สามารถแกไ้ ขโดยคลิกท่ี Spry Tabbed Panels : Tabbed Panels1 หวั แทบ็ สฟี า้ จะแสดง Properties ใหเ้ ลือก Tab ท่ตี อ้ งการเพ่มิ ขอ้ มลู โดยสามารถเพ่มิ ขอ้ มลู ไดท้ ่ี Content ท่ีเลือก

6.บนั ทกึ ขอ้ มลู กด F12 เพ่ือแสดงผลผา่ นเว็บบราวเซอร์ 9.3 การสร้างแถบเลอื่ นด้วย Spry Accordion การสรา้ งแถบเลือ่ นดว้ ย Spry Accordion เป็นการสรา้ งการแสดงผลแบบ พบั ได้ โดยสรา้ งการแสดงผลแบบท่สี ามารถแบง่ หมวดหมู่ และผใู้ ชง้ านสามารถกด เพ่ือแสดงผลตามหมวดหมทู่ ่ตี อ้ งการได้ โดยมีขนั้ ตอนการสรา้ ง ดงั นี้ 1.คลิกท่ตี าแหน่งท่ีตอ้ งการแทรก Spry Accordion คลกิ ท่แี ทบ็ Insert > Spry 2.เมนู Spry เลือกป่มุ 3.เม่ือคลกิ แลว้ จะไดผ้ ลลพั ธ์ ดงั รูป

4.สามารถแกไ้ ขขอ้ ความท่หี วั ขอ้ การแสดงการแกไ้ ขหวั ขอ้ สามารถวางเมาส์ เหนือหวั ขอ้ ท่ีตอ้ งการจะปรากฏ รูปตาขนึ้ มา ใหค้ ลิกท่รี ูปตาท่ปี รากฏจะสามารถแกไ้ ข เนือ้ หาในหวั ขอ้ นนั้ ได้ 5.เม่อื เพ่มิ บทความตามท่ีตอ้ งการเรยี บรอ้ ยแลว้ สามารถแสดงผลลพั ธผ์ า่ น โปรแกรมเว็บบราวเซอรไ์ ด้ กด F12 เพ่ือแสดงผลลพั ธเ์ ม่อื คลกิ หมวดท่ี 2 จะแสดงเร่อื ง ท่สี องโดยพบั ท่ีไมไ่ ดเ้ ลอื กเอาไว้ เม่ือคลกิ ท่หี มวดเร่อื งใดจะ แสดงหมวดเร่อื งนนั้ และ พบั เรอ่ื งท่ีไมเ่ ก่ียวขอ้ งไว้

9.4 การเพม่ิ ลูกเล่นโดยใช้ JavaScript Behavior ในการสรา้ ง JavaScript Behavior เพ่ือเป็นการสรา้ งชดุ รูปแบบในการโตต้ อบ กบั ผเู้ ขา้ ชม เวบ็ ไซตท์ าใหเ้ วบ็ ไซตม์ ีลกู เลน่ ท่ีแปลกตา ทาใหผ้ เู้ ขา้ ชมเวบ็ ไซตไ์ มเ่ บ่อื หน่าย แตก่ ่อนท่ีจะมีการสรา้ งจาเป็น อยา่ งย่งิ ท่ีจะตอ้ งทาความเขา้ ใจกบั JavaScript Behavior ดงั นี้ พฤติกรรม (Behavior) คือคาส่งั JavaScript สาหรบั รูปท่ี Dreamweaver โดย Adobe ไดเ้ ตรยี มไวใ้ หซ้ ง่ึ สามารถเลือกใชไ้ ดท้ นั ทีโดยไมต่ อ้ งมาน่งั เขยี นภาษา JavaScript สาหรบั องคป์ ระกอบในการทางานของพฤติกรรม (Behavior) มีอยู่ ดว้ ยกนั 2 สว่ น ดงั นี้ 9.4.1 เหตุการณ์ (Event) หมายถึงการกาหนดเหตกุ ารณท์ ่ีจะใหเ้ กิดขนึ้ กบั วตั ถทุ ่เี ลือก ซง่ึ วตั ถุ (Object) แตล่ ะชนิดกจ็ ะมีเหตกุ ารณ์ (Event) ท่ตี า่ งกนั ไป คาส่งั ท่ี ใชบ้ อ่ ยๆ มีดงั นี้

9.4.2 การกระทา (Action) หมายถงึ สง่ิ ท่ีตอ้ งการใหเ้ กิดขนึ้ หลงั จากเหตกุ ารณ์ (Event) แลว้ เช่น เม่ือเล่อื นเมาสไ์ ปชีแ้ ลว้ ใหแ้ สดงกลอ่ งขอ้ ความหรอื เปลี่ยนภาพ เป็น ตน้ การกระทา (Action) ท่นี ิยมใชม้ ี ดงั นี้

เปิ ดวนิ โดวแ์ บบป๊ อบอัพ (Open Browser Window) การกระทา (Action) ใชส้ รา้ งไฮเปอรล์ ิงก์ (Hyperlink) โดยเวบ็ เพจปลายทางจะถกู เปิดวนิ โดวใ์ หม่ ท่สี ามารถกาหนดขนาดและคณุ สมบตั ติ า่ ง ๆ ไดใ้ น Popup Message เชน่ การซอ่ น แถบเคร่อื งมือ เมนหู ลกั และแถบเล่อื น เป็นตน้ แสดงกล่องข้อความ (Popup Message) การกระทา (Action) นีใ้ ช้ สาหรบั แสดงขอ้ ความแจง้ เตือนตา่ ง ๆ เชน่ การปอ้ งกนั การส่งั บนั ทกึ ภาพนีจ้ ากเมนลู ดั สามารถใชก้ ลอ่ งขอ้ ความรว่ ม (Event) ช่ือ onMouseDown แสดงขอ้ ความบนแถบสถานะ (Set Text of Status Bar) การกระทา (Action) นีใ้ ชส้ าหรบั แสดงขอ้ ความบนสถานะ ตามปกติเม่ือผชู้ มชีเ้ มาสท์ ่ลี ิงกใ์ ด ๆ แถบสถานะจะแสดง URL ปลายทางของลิงกน์ นั้ แตส่ ามารถใช้ Action นีเ้ พ่ือแสดง คาอธิบายอ่ืนท่สี ื่อความหมายกวา่ แทน หรอื ใชซ้ อ่ น URL ของลิงกป์ ็นตน้ คลกิ ลากย้าย AP Element (Drag AP Element) เป็น Action ท่ที าให้ ผชู้ มเขา้ เวบ็ ไซตส์ ามารถคลกิ ลากยา้ ย วตั ถุ (Object) การทางานของ การกระทา (Action) นีแ้ บง่ ออกเป็น 2 แท็บ คอื 1.AP Element เลือกช่ือ AP Element ท่จี ะใหล้ ากได้ 2. Movement รูปแบบการเคลอ่ื นยา้ ย AP Element ขั้นตอนการเพม่ิ ลูกเล่นโดยใช้ JavaScript Behaviors 1. คลกิ ท่เี มนู Window เลอื ก Behaviors หรอื กดคียล์ ดั Shift + F4 2.จะปรากฏหนา้ ตา่ ง Behaviors

3.คลกิ เลือกวตั ถทุ ่ตี อ้ งการเพ่มิ Behaviors ในกรณีนีเ้ ลือกรูปภาพ 1 รูป 4. คลิกเคร่อื งหมาย + เลือก Action ท่จี ะใหก้ ระทา ในกรณีเลอื ก Effect เพ่ือสรา้ งลกั ษณะพเิ ศษ ใหก้ บั รูปภาพ คณุ ลกั ษณะพเิ ศษสาหรบั รูปภาพมดี งั นี้ -Appear/fade : วตั ถทุ ่เี ลอื กจะปรากฏแลว้ จางหาย -Blind : วตั ถทุ ่เี ลอื กจะบีบเลก็ ลงแลว้ หาย -Grow/shrink : วตั ถทุ ่เี ลอื กจะขยายแลว้ หดตวั ลง -Highlight : ไฮไลท์ เนน้ วตั ถทุ ่เี ลอื ก -Shake : วตั ถทุ ่เี ลอื กส่นั ในแนวนอน -Slide : วตั ถทุ ่เี ลือกจะเล่อื น -Squish : วตั ถทุ ่เี ลือกจะยอ่ ลงแลว้ หายไป 5.คลิกเลือก Effects > Shake เพ่ือใหว้ ตั ถสุ ่นั ในแนวนอน 6.จะปรากฏกลอ่ งขอ้ ความ Shake การส่นั เลอื ก Target Element ท่ี

ตอ้ งการใหว้ ตั ถสุ ่นั โดยเลือกท่ี Current Selection หมายถงึ วตั ถทุ ่เี ลือกอยใู่ นปัจจบุ นั 7.คลกิ OK 8.จะปรากฏ Action และ Event ท่หี นา้ ตา่ ง Behaviors 9. เลือก onMouseOver คอื เหตกุ ารณจ์ ะเกิดขนึ้ เม่ือนาเมาสม์ าวางไว้ บนรูปภาพ 10.เม่ือเปล่ยี น Action เรยี บรอ้ ยแลว้ Action จะเปลี่ยนเป็น onMouseOver Event หรอื Shake 11.บนั ทกึ < Ctrl + S และแสดงผลผา่ นโปรแกรมเว็บบราวเซอรก์ อ F12 จะไดผ้ ลลพั ธ์ 9.5 การทา Swap Image การทา Swap Image หมายถึง การกาหนดให้ Object เปลย่ี นจากรูปภาพหน่งึ เป็นอีกรูปภาพหนง่ึ โดยสามารถกาหนด Action ไดห้ ลายประเภทตามท่ีตอ้ งการ มี ขนั้ ตอนการทา Swap Image ดงั นี้

1. คลิกเลือก รูปภาพท่ีตอ้ งการ 2.ท่หี นา้ ตา่ ง Behaviors คลิกเครอ่ื งหมาย 3.เลอื ก Swap Image 4.จะปรากฏกลอ่ งขอ้ ความ เพ่ือใหเ้ ลือกรูปภาพท่ีตอ้ การใหเ้ ปลย่ี น 5. คลกิ Browse เพ่ือเลอื กแหลง่ ท่ีเก็บรูปภาพ 6.จะปรากฏกลอ่ งขอ้ ความ Select Image Source เพ่ือเลือกแหลง่ ท่ีเก็บ รูปภาพ 7.เม่อื ไดร้ ูปภาพท่ีตอ้ งการแลว้ คลิก OK 8.รูปภาพท่ีเลือกจะปรากฏท่ีช่อง Set source to : 9.เลอื ก Option 2 คือ -Preload Images : ตอ้ งทาการโหลดรูปภาพมาแสดงผลก่อน -Restore Images onMouseOut : จะคนื คา่ รูปภาพเม่ือเลล่อื นเมาส์

ออก 10.คลิกป่มุ OK 11.ท่หี นา้ ตา่ ง Behaviors จะปรากฏดงั นี้ 12.บนั ทกึ ผลกด Ctrl + S แสดงผลลพั ธผ์ า่ นเว็บบราวเซอรก์ ด F12 วางเมาสอ์ ยเู่ หนือภาพ onMouseOut เพ่ือเล่อื นเมาสอ์ อกจาก ภาพ onMouseOut

9.6 การเพมิ่ Counter ใหก้ บั เว็บไซต์ Counter คือ ตวั นบั สถิตผิ เู้ ขา้ ชมเว็บไซตโ์ ดยปัจจบุ นั มเี ว็บไซตต์ า่ ง ๆมากมายท่ี แจกชดุ คาส่งั สถิตผิ เู้ ขา้ ชมเว็บไซต์ สาหรบั โปรแกรม Adobe Dreamweaver CS5 สามารถฝังชดุ คาส่งั เพ่ือใหแ้ สดงผลในมมุ มอง Code ไดท้ นั ที ดงั นนั้ ผพู้ ฒั นาสามารถ หาชดุ คาส่งั จากเว็บท่ีใหบ้ รกิ าร Counter ฟรจี ากเว็บไซต์ เช่น http://www.rapidcounter.com เพ่ือลงทะเบียนรบั ชดุ คาส่งั เม่ือไดช้ ดุ คาส่งั Counter มาแลว้ สามารถฝังชดุ คาส่งั นีไ้ ด้ 1.คลกิ เลือกตาแหนง่ ท่ีตอ้ งการวาง Counter 2.คลกิ ท่ีมมุ มอง Spilt 3.วาง ชดุ คาส่งั ท่ีลงในมมุ มอง Code ท่เี คอรเ์ ซอรอ์ ยู่ 4.เม่อื วางชดุ คาส่งั แลว้ ทางซา้ ยจะปรากฏ Counter ขนึ้ มา 5.บนั ทกึ กด Ctrl + S และแสดงผลลพั ธก์ ด F12

9.7 การเพม่ิ วดิ โี อ YouTube ใหก้ ับเวบ็ ไซต์ การเพ่มิ วิดีโอ YouTube ใหก้ บั เว็บไซต์ ถือเป็นการเพ่มิ ลกู เลน่ ใหก้ บั เว็บไซตท์ า ใหเ้ ว็บไซตม์ คี วามทนั สมยั โดยเคร่อื งคอมพวิ เตอรท์ ่จี ะเพ่มิ วดิ โี อจากเว็บ YouTube นนั้ เป็นเคร่อื งท่ีเช่ือมตอ่ อินเทอรเ์ น็ตเน่ืองจากวิดีโอท่นี าเสนอนนั้ ไดเ้ ผยแพรผ่ า่ น เวบ็ บราวเซอรแ์ ลว้ การเพ่ิมวดิ โี อ YouTube ในโปรแกรม นAdobe Dreamweaver CS5 นนั้ จาเป็นตอ้ งศกึ ษาชดุ คาส่งั เพ่ือส่งั ให้ URL ของวดิ โี อแสดงผลโดยแบง่ เป็น 3 สว่ น รายละเอยี ด ดงั นี้ ส่วนที่ 1 <iframe width= “200” height= “119” คอื HTML CODE ท่ใี ชใ้ นการดงึ หนา้ เวบ็ อ่ืนมาแสดงผลในอีกเวบ็ หนง่ึ โดยสามารถกาหนดขนาดความกวา้ งและความ สงู ของกรอบท่ีแสดงผล ส่วนท่ี 2 src= http://www.youtube.com/embed/MmUOXuRhvCo?rel=transparent&au toplay=1 คือ ท่อี ยขู่ องวดิ โี อท่ีฝากไวใ้ นเวบ็ เซิรฟ์ เวอรโ์ ดยการฝังชดุ คาส่งั ใหแ้ สดงผล ในเวบ็ อา้ งองิ โดยตาแหน่งของวดิ ีโอ ท่อี ยใู่ นเวบ็ โดยใชต้ วั อกั ษร 11 ตวั คือ MmUOXuRhvCo วดิ โี อแตล่ ะตวั จะไมเ่ หมอื นกนั ถา้ ตอ้ งการใหแ้ สดง วดิ โี อจาก YouTube เรอ่ื งใดสามารถเปลี่ยนขอ้ มลู ท่ีคาส่งั Scr=”……ท่อี ย่ขู องวิดีโอ /embed/… รหสั ตาแหน่ง ลงิ กข์ องวดิ ีโอจาก YouTube กาหนดการแสดงค่าทงั้ หมดโดยไมม่ สี พี ืน้ หลงั รวมทงั้ กาหนดมีการใหเ้ ลน่ อตั โนมตั ”ิ

ส่วนท่ี 3 frameborder= “0”allowfullscreen></iframe> กาหนดระยะห่าง จากขอบเท่ากบั 0 สามารถแสดงผลแบบเตม็ จอภาพได้ สาหรบั การเพ่มิ วิดโี อ YouTube ใหแ้ สดงผลใน Dreamweaver CS5 นนั้ สามารถแกไ้ ขในสว่ นท่ี 2 เฉพาะท่ีอยขู่ องวดิ โี อท่ีฝากไวใ้ นเวบ็ เซริ ฟ์ เวอรโ์ ดยการฝัง ชดุ คาส่งั ใหแ้ สดงผลในเว็บอา้ งอิงตาม ตาแหนง่ ของวิดโี อท่ีอยใู่ นเว็บโดยใชต้ วั อกั ษร 11 ตวั ในวิดโี อ YouTube ท่ตี อ้ งการไดเ้ ลย โดยมีขนั้ ตอนการจดั การเพ่มิ วดิ โี อ ดงั นี้ 1.เขา้ ไปท่เี ว็บไซต์ www.youtube.com 2.หาวิดีโอท่เี หมาะสมกบั เวบ็ ไซต์ 3.คลิกท่ี Share 4.เลอื ก Embed 5.คดั ลอกเฉพาะท่ีอยขู่ องวดิ ีโอท่ีฝากไวใ้ นเซริ ฟ์ เวอรโ์ ดยการฝังชดุ คาส่งั ให้ แสดงผลในเว็บอา้ งอิงตาม ตาแหน่งของวิดโี อท่ีอยใู่ นเว็บโดยใชต้ วั อกั ษร 11 ตวั ใน วดิ โี อ YouTube ท่ตี อ้ งการ 6.โปรแกรม Adobe Dreamweaver คลกิ เลอื กตาแหน่งท่ีตอ้ งการฝังวิดโี อ 7. คลิกมมุ มอง Split ท่สี ว่ นของ Code จะปรากฏเคอรเ์ ซอรก์ ระพรบิ อยใู่ น ตาแหน่งท่เี ลือก พิมพ์ Code ดงั นี้

8.คลิกท่ีฝ่ัง Design จะปรากฏกรอบแสดงผลขนาดกวา้ ง 200 สงู 199 Pixels 9.วางท่ีอยขู่ องวิดีโอท่ฝี ากไวใ้ นเว็บเซริ ฟ์ เวอรโ์ ดยการฝังชดุ คาส่งั ใหแ้ สดงผลลใน เวบ็ อา้ งอิงตามตาแหน่งของ วิดีโอท่ีอยใู่ นเว็บโดยใชต้ วั อกั ษร 11 ตวั ในวดิ โี อ YouTube ท่ไี ดค้ ดั ลอกไวใ้ นขนั้ ตอนท่ี 5 ลงในตาแหน่ง Src=” 10. จะปรากฏวดิ โี อ YouTube ในฝ่ัง Design 11.คลิกท่ีมมุ มอง Design จะปรากฏกรอบสีดาวิดีโอท่แี ทรกสาเรจ็ 12.บนั ทกึ ผลลพั ธก์ ด Ctrl+Sแสดงผลลพั ธผ์ า่ นโปรรแกรมเว็บบราวเซอรก์ ด F12 9.8 การทาตัวอักษารเคล่อื นที่ การทาตวั อกั ษรเคลื่อนท่โี ดยการเพ่มิ Marquee Tag เอาไวใ้ ชส้ าหรบั ทา ตวั อกั ษรเคลอ่ื นท่ี น่นั คือเล่อื นไปเล่ือนมาโดยสามารถกาหนดคณุ สมบตั ใิ หก้ บั ตวั อกั ษรเล่ือนเพ่มิ เตมิ ได้ ไมว่ า่ จะเป็นความเรว็ ทศิ ทาง และอ่ืน ๆ การใช้ Marquee Tag นนั้ จะขนึ้ ตน้ ดว้ ย <marquee> และปิดทา้ ยดว้ ย

</marquee> การสร้างตัวอักษรเลื่อนมขี ั้นตอนดงั นี้ 1.คลิกตาแหน่งท่ีตอ้ งการสรา้ งตวั อกั ษรเคลือ่ นท่ี 2.คลิกท่ีหนา้ ตา่ ง Insert แถบ Common เลอื ก Tag Chooser 3.จะปรากฏหนา้ ตา่ ง Tag Chooser 4.เลือก HTML tags > Page Elements 5.เลอื กแท็ก Marquee 6.คลกิ ป่มุ Insert 7.คลกิ ป่มุ Close 8.จะปรากฏ <marquee>…….</marquee> พมิ พข์ อ้ ความท่ตี อ้ งการให้ เคล่อื นลงไประหวา่ งแท็กตาม ท่ีตอ้ งการ พรอ้ มทงั้ สามารถพมิ พช์ ดุ คาส่งั เพ่ือกาหนด คณุ สมบตั เิ พ่มิ เตมิ ใหก้ บั ตวั อกั ษรได้ 9. สามารถเพ่มิ คณุ สมบตั โิ ดยใชห้ นา้ ตา่ ง Tag Inspector ดา้ นขวามือ โดยยสามารถเลอื กกาหนด คณุ สมบตั ติ า่ ง ๆ เพ่มิ เติมได้ 10.บนั ทกึ และแสดงผลขอ้ มลู ผา่ นโปรแกรมเวบ็ บราวเซอร์ หน่วยท่ี 10 การสร้างฟอรม์ ตดิ ตอ่ กบั ฐานข้อมูล 10.1 รู้จกั กับฟอรม์ รับคา่ ข้อมูล ฟอรม์ (Form) คือ การสรา้ งหนา้ จอเพ่ือรบั คา่ ขอ้ มลู จากผเู้ ขา้ ชมเว็บไซตผ์ า่ น หนา้ ตา่ งของเวบ็ เพจ โดยหนา้ ท่ีรบั ขอ้ มลู จากผชู้ ม แลว้ สง่ ไปยงั เว็บเซิรฟ์ เวอ่ รเ์ พ่ือ ประมวลผลอย่างใดอยา่ งหนง่ึ ภายในฟอรม์ จะประกอบดว้ ย อ็อบเจ็กต์ (Object) ตา่ ง ๆ ท่ีเป็นตวั รบั สง่ คา่ ขอ้ มลู ซง่ึ มีหลายชนิด เช่น Text Field, Text Area, Checkbox, Radio Button, Select Manu / List. Jump Manu เป็นตน้

10.1.1 หลักการทางานของเว็บเพจในการรับค่าข้อมูลจากผู้ชม เม่อื ผเู้ ขา้ ชมเว็บไซตก์ รอกขอ้ มลู ลงใน ฟอรม์ บนเวบ็ เพจแลว้ คลิกป่มุ Submit ขอ้ มลู ทงั้ หมดจะถกู สง่ ไปยงั เวบ็ เซริ ฟ์ เวอร์ ซง่ึ โปรแกรมสครปิ ตห์ รอื แอปพลิเคช่นั ท่ีกาหนด ไวจ้ ะนาขอ้ มลู ดงั กลา่ วไปประมวลผล ดงั นนั้ การทางานของฟอรม์ จะตอ้ งมี องคป์ ระกอบ เพ่มิ ขนึ้ จากเวบ็ เพจปกติ 2 อย่าง คือ 1. ฟอรม์ บนเวบ็ เพจเพ่ือใชร้ บั คา่ ขอ้ มลู จากผชู้ ม 2. โปรแกรมบนเวบ็ เซิรฟ์ เวอร์ เพ่ือประมวลผลขอ้ มลู และสง่ ผลลพั ธก์ ลบั ไปยงั ผชู้ ม สาหรบั โปรแกรมท่ีใชป้ ระมวลผลขอ้ มลู จากฟอรม์ นนั้ ขนึ้ อยกู่ บั ความตอ้ งการของ งานแตล่ ะอยา่ ง ดงั นนั้ จงึ ตอ้ ง ใชโ้ ปรแกรมท่ีถกู เขียนมาโดยเฉพาะ ซง่ึ โปรแกรมเว็บ เซิรฟ์ เวอรจ์ ะเป็นเพียงตวั กลาง ท่ีคอยรบั สง่ ขอ้ มลู ใหเ้ ทา่ นนั้ โปรแกรมดงั กลา่ วจะใช้ ทางานอะไรและเขียนขนึ้ ดว้ ยภาษาใดก็ได้ แต่สว่ นใหญ่แลว้ นยิ มใชภ้ าษาประเภทท่ี เรยี กวา่ “สครปิ ต”์ (script) เชน่ PHP,ASP เป็นตน้ 10.1.2 องคป์ ระกอบของฟอรม์ การสรา้ งฟอรม์ เพ่อื รบั คา่ ขอ้ มลู บนเว็บเพจประกอบดว้ ยสว่ นตา่ ง ๆ ดงั นี้

1.ตวั ฟอรม์ (From) เป็นโครงสรา้ งท่ีใช่กาหนดขอบเขตของฟอรม์ แทก็ ท่ีใช้ คือ <form>…</form> โดยจะกาหนดขอบเขตของฟอรม์ ซง่ึ จะปรากฏเป็นกรอบเสน้ ประ สีแดงบนวินโดว์ Document 2.ฟอรม์ วตั ถุ (From Object) เป็นองคป์ ระกอบสาหรบั ใชส้ รา้ งฟิลดเ์ พ่ือรบั ขอ้ มลู จากผชู้ มโดยมีใหเ้ ลอื กหลาย ชนิด ขนึ้ อยกู่ บั ลกั ษณะเง่อื นไขและขอ้ มลู ท่ี ตอ้ งการรบั คา่ ขอ้ มลู เขา้ มาในระบบนนั้ 3.ป่มุ Submit และ Reset ป่มุ Submit ใชส้ าหรบั สง่ ขอ้ มลู จากฟอรม์ ไปยงั เวบ็ เซริ ฟ์ เวอรส์ ว่ นป่มุ Reset ใชล้ า้ งขอ้ มลู ท่ีไดก้ รอกไวใ้ นฟอรม์ กลบั เป็นคา่ เรม่ิ ตน้ 4.องคป์ ระกอบอ่นื ๆ คือ เนือ้ หาปกติของเว็บเพจท่ีถกู นาไปใสไวใ้ นฟอรม์ เชน่ คาอธิบายวธิ ีกรอกขอ้ มลู ลง ในฟอรม์ ภาพกราฟิกสาหรบั ตกแตง่ ฟอรม์ และตารางท่ี ช่วยจดั ตาแหน่งของ ออ็ บเจกตต์ า่ ง ๆในฟอรม์ ใหส้ วยงาม 10.2 เครื่องมือทใ่ี ช้ในการสร้างฟอรม์ ในโปรแกรม Adobe Dreamweaver CS5 มีเครอ่ื งท่สี ามารถอานวยความสะดวก ในการสรา้ งฟอรม์ รบั ค่าขอ้ มลู โดยสามารถเลอื กเคร่อื งมือสรา้ งฟอรม์ ไดจ้ าก เมนู Insert > from สามารถเลือกเคร่อื งมือท่ีตอ้ งการสรา้ งได้ และการเลอื กเคร่อื งมือสรา้ ง ฟอรม์ จาก แถบเคร่อื งมือ Insert เลือกฟอรม์

10.3 การตดิ ตัง้ โปรแกรม AppServ ก่อนท่ีจะทาการสรา้ งฟอรม์ เพ่ือรบั คา่ ขอ้ มลู ผา่ นชดุ คาส่งั PHP นนั้ จาเป็นตอ้ ง สรา้ งฐานขอ้ มลู เพ่ือเก็บคา่ ขอ้ มลู ท่ไี ดร้ บั จากฟอรม์ รบั ค่าขอ้ มลู ดงั นนั้ กอ่ นท่จี ะสรา้ ง ฟอรม์ เพ่ือตดิ ตอ่ ฐานขอ้ มลู นนั้ จงึ ตอ้ งมีการติดตงั้ โปรแกรม AppServ ซง่ึ เป็น โปรแกรมประเภท Open Source ประกอบดว้ ย 4 โปรแกรมหลกั ไดแ้ ก่ 1.Apach Web Server 2.PHP Script Language 3.MySQL Database 4phpMyAdmin โดยมีวตั ถปุ ระสงคห์ ลกั คอื ช่วยในการติดตงั้ ของโปรแกรมดงั กลา่ ว นอกจากนนั้ สามารถดาวนโ์ หลดโปรแกรมเพ่ือ นามาพฒั นาเว็บไซตไ์ ดฟ้ รี ขนั้ ตอนการตดิ ตงั้ โปรแกรม Appserv โดยสามารถดาวนโ์ หลดโปรแกรมฟรี ได้ ท่ี http://www.appservnetwork.com เลือกโปรแกรม AppServ 2.5.10 มีขนั้ ตอน การตดิ ตงั้ โปรแกรมดงั นี้ 1.ดบั เบลิ้ คลกิ ไอคอน AppServ2.5.10 2.จะปรากฏหนา้ จอการตดิ ตงั้ โปรแกรมคลกิ Next 3. จะปรากฏหนา้ ตา่ ง ขอ้ ตกลงของโปรแกรม คลกิ I Agree

4.เลือกตาแหน่งของการติดตงั้ โปรแกรมคลกิ Next 5. เลือกโปรแกรม AppServ Package Components ท่จี ะติดตงั้ ทงั้ หมดคลิก Next 6.พมิ พ์ Localhost ท่ชี อ่ ง Server name และพมิ พ์ Email Address ของผดู้ แู ล ระบบ คลกิ next 7. พิมพ์ Password และยนื ยนั Password ท่จี ะเขา้ สรู่ ะบบคลกิ Install 8.โปรแกรมจะทาการตดิ ตงั้ จนครบ 100% 9.เม่ือตดิ ตงั้ โปรแกรมเสรจ็ เรยี บรอ้ ย คลิกท่ปี ่มุ Finish 10. เขา้ สหู่ นา้ จอ AppServ พิมพ์ Localhost ท่ี Address bar 11. คลิก phpMyAdmin Database Manager Version 2.10.3

12.จะปรากฏกลอ่ งขอ้ ความใหก้ รอก Username และ Password 13.OK 14.จะปรากฏหนา้ จอ phpMyAdmin เพ่ือสรา้ งฐานขอ้ มลู ตอ่ ไป 10.4 การสร้างฐานข้อมูลดว้ ย phpMyAdmin เม่ือติดตงั้ โปรแกรม phpMyAdmin เพ่ือเตรยี มความพรอ้ มในการสรา้ งฐานขอ้ มลู ตดิ ตอ่ กบั ฟอรม์ รบั คา่ ขอ้ มลู ท่ีอย่ใู นโปรแกรม Adobe Dreamweaver เสรจ็ เรยี บรอ้ ย แลว้ ขนั้ ตอนตอ่ ไปคือการออกแบบฐานขอ้ มลู และสรา้ งฐานขอ้ มลู ในการรบั คา่ ขอมลู จากฟอรม์ ซง่ึ ก่อนท่ีจะมีการสรา้ งฐานขอ้ มลู ผพู้ ฒั นาระบบจะตอ้ งวเิ คราะหแ์ ละ ออกแบบระบบกอ่ นวา่ จะเก็บ ขอ้ มลู ท่ีจาเป็นอะไรบา้ ง เชน่ ขอ้ มลู ช่ือ สกลุ ท่ีอยู่ หมายเลขโทรศพั ท์ อีเมล เป็นตน้ เพ่ือท่ีจะนามาวเิ คราะหข์ อ้ มลู ท่จี ะจดั เก็บในระบบ ตวั อยา่ ง เช่นการเก็บขอ้ มลู ลกู คา้ ท่ีตอ้ งการสง่ รายช่ือรว่ มสนกุ ชิงรางวลั และรบั สทิ ธิ

พเิ ศษจากทางรา้ น จะออกแบบตารางขอ้ มลู ดงั นี้ ตารางขอ้ มลู ลกู คา้ (Customers) Field Type Null Description Id int (11) No รหสั ลกู คา้ ตงั้ ค่าเป็น Auto increment Primary Key Name Text (255) No ช่ือลกู คา้ Address Text (255) No ท่อี ยู่ Telephone Text (255) No เบอรโ์ ทร เม่ือไดต้ ารางขอ้ มลู ท่ีตอ้ งการเรยี บรอ้ ยแลว้ สามารถสรา้ งฐานขอ้ มลู ใน phpMyAdmin ไดด้ งั นี้ 1.เม่ือปรากฏหนา้ จอ phpMyAdmin พมิ พช์ ่ือฐานขอ้ มลู ท่ีตอ้ งการ พมิ พ์ Database คลิกสรา้ ง 2.เม่ือสรา้ งฐานขอ้ มลู เรยี บรอ้ ยแลว้ จะปรากฏหนา้ จอใหส้ รา้ งตาราง Customers 3.ระบจุ านวน 4 ฟิลด์ 4.คลิกป่มุ ลงมอื 5.ใสช่ ่ือฟิลดต์ ามท่ไี ดอ้ อกแบบไว้ 6.คลกิ ป่มุ บนั ทกึ 7.จะปรากฏตารางท่ีสรา้ งตามโครงสรา้ งท่ีไดอ้ อกแบบไว้ เม่ือสรา้ งเสรจ็ แลว้ สามารถปิดออกได้

10.5 การเชือ่ มต่อฐานข้อมูล phpMyAdmin เม่อื ไดส้ รา้ งฐานขอ้ มลู จาก phpMyAdmin เรยี บรอ้ ยแลว้ ขนั้ ตอนตอ่ ไป คือ การ เช่ือมตอ่ ฐานขอ้ มลู เพ่ือใหโ้ ปรแกรม Dreamweaver เช่ือมตอ่ กบั โปรแกรม phpMyAdmin ท่ไี ดรฟ์ C:\\AppServ\\www คดั ลอกไฟลเ์ ว็บไซต์ มาเก็บไวเ้ พ่ือใหง้ ่าย ตอ่ การเช่ือมตอ่ ขอ้ มลู โดยมีวิธีการเช่ือมตอ่ ดงั นี้ 1. เปิดโปรแกรม Adobe Dreamweaver CS5 เลือกไฟล์ PHP 2.จะปรากฏหนา้ เอกสารเปลา่ เป็นไฟล์ PHP ท่หี นา้ ตา่ ง Database ท่ีอยู่ ขวามือคลิกสรา้ งขอ้ มลู ตาม Step ท่กี าหนดไว้ 3. กาหนด Site สาหรบั ฟิลด์ พมิ พช์ ่ือ Site เลือก Local Site folder ไฟลท์ ่เี ก็บ C:\\AppServ\\www\\webphoone\\ 4.เม่อื ผา่ นขนั้ ตอนการสรา้ ง Site เรยี บรอ้ ยแลว้ จะปรากฏเครอ่ื งหมายถกู ท่ีขอ้ 1 5. กาหนด Document Type เป็น PHP จะปรากฏเครอ่ื งหมายถกู ขอ้ ท่ี 2

6.คลิก Testing server ตามขอ้ ท่ี 3 เพ่ือทดสอบการเช่ือมต่อ Server 7.จะปรากฏหนา้ ติดตงั้ ระบบเว็บสาหรบั PHP 8.คลิกเคร่อื งหมาย + เพ่ือเพ่มิ Server ใหม่ 9.พมิ พข์ อ้ มลู เพ่ือติดตงั้ ค่าระบบดงั นี้ ใสช่ ่ือ = localhost ประเภทการเช่ือตอ่ ท่ใี ช้ = Local/Network เลือกโฟลเดอรท์ ่เี ก็บไวท้ ่ี Server = C:\\AppServ\\www\\webphoone\\ ระบุ Web URL = htt://localhost/webphone 10. คลกิ Save 11.จะปรากฏขอ้ มลู การเช่ือมตอ่ คลกิ เครอ่ื งหมาย / ท่ชี ่อง Remote เพ่ือ เช่ือมตอ่ ท่ีช่องไฟล์

12.คลิกป่มุ Save 13.ท่หี นา้ ตา่ ง Database ขอ้ ท่ี 3 Testing Server จะปรากฏเครอ่ื งหมายถกู 14.ท่เี ครอ่ื งหมาย + คลิกเพ่มิ ท่ี MySQL Connection 15.เพ่มิ การเช่ือมตอ่ ขอ้ มลู ตามหนา้ ตา่ ง MySQL Connection - Connection name คือ ช่ือของการเช่ือมตอ่ พิมพ์ Myconnection - MySQL server คือ การระบเุ ซริ ฟ์ เวอร์ พิมพ์ localhost - User Name คือ การระบชุ ่ือผใู้ ชพ้ ิมพ์ root - Password คือ การใสร่ หสั ผา่ นท่ีเขา้ สฐู่ านขอ้ มลู พิมพร์ หสั ผา่ นท่ี กาหนดไว้ - Database คือ ฐานขอ้ มลู คลิกท่ีป่มุ Select เพ่ือเลือกฐานขอ้ มลู ท่ี สรา้ งไว้ 16. คลิกป่มุ OK 17.จะปรากฏฐานขอ้ มลู ท่ไี ดเ้ ช่ือตอ่ แลว้ ซง่ึ ภายในจะมตี ารางท่ไี ดส้ รา้ งเอาไวใ้ น

เนือ้ หาท่ีแลว้ 18. ท่หี นา้ ตา่ งไฟลค์ ลิกป่มุ connects to remote เพ่ือใหแ้ นใ่ จวา่ เช่ือตอ่ ไปยงั เซิรฟ์ เวอรแ์ ลว้ จะปรากฏขอ้ ความ File activity complete. การเช่ือมตอ่ ไปยงั Server เสรจ็ สมบรู ณ์ 10.6 การสร้างฟอรม์ รับคา่ ข้อมูล เม่อื ไดส้ รา้ งการเช่ือมตอ่ กบั ฐานขอ้ มลู phpMyAdmin เสรจ็ เรยี บรอ้ ยแลว้ ขนั้ ตอ่ ไป คือการสรา้ งฟอรม์ รบั คา่ ขอ้ มลู ซง่ึ สามารถทาได้ 2 วิธีท่แี ตกต่างกนั ดงั นี้ 1. คือ การบนั ทกึ ขอ้ มลู ท่ีแทรกจากเคร่อื งมอื ฟอรม์ 2. คอื การบนั ทกึ ขอ้ มลู ท่ีแทรกดว้ ยการสรา้ งฟอรม์ ออกแบบเอง 10.7 การสร้างฟอรม์ แสดงข้อมูล เม่อื มีการสรา้ งฟอรม์ กรอกขอ้ มลู ผเู้ ขา้ ชมเว็บไซตเ์ ขา้ สรู่ ะบบฐานขอ้ มลู บางครงั้ ผใู้ ชต้ อ้ งการท่ีจะทราบวา่ ขอ้ มลู ไดก้ รอกเขา้ ไปในระบบเรยี บรอ้ ยหรอื ยงั ดงั นนั้ การ สรา้ งไฟลแ์ สดงผลขอ้ มลู จะเป็นหนา้ จอท่ดี งึ ขอ้ มลู ท่ีไดก้ รอกลงไปเก็บไวใ้ นฐานขอ้ มลู มาแสดงผล ซง่ึ จากเร่อื งการสรา้ งฟอรม์ รบั ค่าขอ้ มลู ไดม้ กี ารสรา้ งไฟล์ PHP เปลา่ เพ่อื ใชใ้ นการแสดงคา่ ขอ้ มลู ไวแ้ ลว้ ดงั นนั้ หากตอ้ งกการสรา้ งไฟลแ์ สดงผลขอ้ มลู จงึ สามารถใชไ้ ฟล์ showtable.php ได้

10.8 การกาหนดกฎเกณฑใ์ นการกรอกข้อมูลลงฟอรม์ ในการจดั เก็บขอ้ มลู ลงฐานขอ้ มลู นนั้ หากตอ้ งการใหข้ อ้ มลู มคี วามเป็นระเบียบ ไดข้ อ้ มลู ท่ตี อ้ งการตามรูปแบบท่กี าหนดควรจะตอ้ งมกี ารกาหนดเกณฑใ์ นการกรอก ขอ้ มลู ลงในฟิลดต์ า่ ง ๆ เพ่ือใหไ้ ดข้ อ้ มลู ท่ีถกู ตอ้ ง ตรงตามวตั ถปุ ระสงคท์ ่ตี อ้ งการ สาหรบั โปรแกรม Adobe Dreamweaver CS5 นนั้ สามารถสรา้ งกฎเกณฑใ์ นฟอรม์ ได้ โดยการใชเ้ ครอ่ื งมอื Spry Validation เป็นกลมุ่ เคร่อื งมือท่ีใชส้ าหรบั สรา้ ง อ็อบเจ กตร์ บั ขอ้ มลู ของฟอรม์ บาง อ็อบเจกต์ โดยสามารถตรวจสอบความถกู ตอ้ งของขอ้ มลู ท่ี ผใู้ ชง้ านกาลงั กรอก และแจง้ ขอ้ ผิดพลาดนนั้ ไดท้ นั ที หน่วยที่ 11 การเช่ือมโยงข้อมูล 11.1 รู้จกั กบั การเชอื่ มโยงข้อมูล ไฮเปอรล์ งิ ค์ (Hyperlink) หรอื ท่ีเรยี กวา่ “ลิงก”์ เป็นการเช่ือมโยงเว็บไซตบ์ น อินเทอรเ์ น็ตจากจดุ หนง่ึ โยง ไปยงั อีกจดุ หน่งึ การคลิกเพ่ือเช่ือมโยงไปยงั เอกสาร ขอ้ ความ รูปภาพ สอ่ื มลั ติมเี ดยี รวมทงั้ เวบ็ ไซตอ์ ่ืน ๆ ตามท่ีไดก้ าหนดการเช่ือมโยง ดว้ ยวิธีการคลกิ เอาไว้ โดยเฉพาะเก็บเวบ็ เพจซง่ึ จะทางานบนเวบ็ บราวเซอรข์ อ้ ความท่ี ถกู กาหนดใหเ้ ป็นลงิ กม์ กั จะปรากฏเป็นสี ขีดเสน้ ใต้ หรอื รูปแบบโดดเดน่ กวา่ ขอ้ ความ รอบขา้ ง ผใู้ ชง้ านอนิ เทอรเ์ น็ตสามารถคลกิ บนลิงคเ์ พ่ือเปลยี่ นหนา้ ไปยงั เว็บเพจท่ี กาหนดไวไ้ ดแ้ ทนท่จี ะพิมพใ์ นแถบท่ีอยขู่ อง เวบ็ บราวเซอรโ์ ดยตรง ไฮเปรล์ ิงกส์ ามารถ ใชเ้ ป็นการอา้ งองิ ภายในเอกสารขอ้ ความหลายมิติ นอจากนีก้ ารคลิกบนลิงกอ์ าจเป็น การเรยี กใชง้ านสครปตท์ ่เี ขียนไวโ้ ดยผพู้ ฒั นาเว็บหรอื เป็นสอื่ มลั ตมิ เี ดียอ่ืน ๆ ตามท่ี ผพู้ ฒั นาตอ้ งการใหเ้ ช่ือมโยงไปยงั เอกสารนนั้ ๆ

11.2 การเช่ือมโยงด้วยข้อความ ลิงกข์ อ้ ความ หมายถึง ลงิ กท์ ่ใี ชข้ อ้ ความเป็นจดุ เช่ือมโยงไปยงั ตาแหน่ง ปลายทาง ซง่ึ ปกติจะใชส้ ีใหแ้ ตกตา่ ง จากขอ้ ความปกติหรอื มกี ารขีดเสน้ ใตข้ อ้ ความ นนั้ ๆ เพ่อื ใหผ้ เู้ ขา้ ชมเวบ็ ไซตร์ ูว้ วา่ สามารถคลิกเขา้ ไปชมเนือ้ หาได้ 11.3 การเชอ่ื มโยงดว้ ยรูปภาพ ลงิ กร์ ูปภาพ หมายถงึ ลิงกท์ ่ใี ชร้ ูปภาพท่จี ดุ เช่ือมโยง โดยเม่ือนาเมาสไ์ ปวางบน รูปภาพ เคอรเ์ ซอรข์ อง เมาสจ์ ะเปล่ยี นเป็นรูปมือ แลว้ สามารถคลกิ เช่ือมโยงไปยงั เนือ้ หาท่ีกาหนดได้ 11.4 การเชอ่ื มโยงภายในหน้าเว็บเพจเดยี วกัน เว็บเพจบางหนา้ จะมีเนือ้ หามาก ผเู้ ขา้ ชมเว็บไซตต์ อ้ งเล่อื นขนึ้ เลอ่ื นลงเพ่อื อา่ น ขอ้ มลู ทาใหผ้ อู้ า่ นหาขอ้ มลู ท่ตี อ้ งการทราบไดย้ าก ในโปรแกรม Adobe Dreamweaver CS5 จะสามารถ Link ภายในหนา้ เว็บเพจกนั เอาไว้ เพ่ือใหส้ ามารถ เขา้ ถงึ เนือ้ หาท่ตี อ้ งการอา่ นไดง้ ่ายขนึ้ 11.5 การเช่ือมโยงเวบ็ ไซตภ์ ายนอก การลงิ กข์ อ้ มลู ภายนอกเวบ็ ไซตน์ นั้ จาเป็นตอ้ งทราบ URL ของเวบ็ ไซตใ์ น การลงิ กข์ อ้ มลู ท่ีจะเช่ือมโยงไปยงั เวบ็ ไซตด์ งั กลา่ ว โดยมขี นั้ ตอนการสรา้ งลิงก์ ภายนอกดงั นี้ 1. คลิกขอ้ ความหรอื รูปภาพท่ีตอ้ งการลงิ กเ์ ช่ือมโยงขอ้ มลู 2.ท่ชี อ่ งลงิ ก์ URL ของเว็บไซตท์ ่ตี อ้ งการลิงกเ์ ช่ือมโยงไปหาดงั รูป 3.รูปภาพจะปรากฏกรอบการลิงกข์ อ้ มลู 4.บนั ทกึ กด Ctrl+ S และแสดงผลขอ้ มลู ผา่ นโปรแกรมเวบ็ บราวเซอรก์ ด F12

11.6 การเชอ่ื มโยงไปยังอเี มล การสรา้ งลิงกเ์ พ่ือเช่ือมโยงไปยงั อีเมลนนั้ เพ่ือส่งั ใหเ้ ปิดโปรแกรมอีเมลบน เคร่อื งคอมพวิ เตอรข์ องผชู้ มเพ่ือเตรยี มเขียนขอ้ ความสง่ อีเมลท่ีไดก้ าหนดไวใ้ นลงิ ก์ โดยมขี นั้ ตอนนการสรา้ งลิงกเ์ ช่ือมโยงไปยงั อีเมลดงั นี้ 1. เลอื กขอ้ ความท่ตี อ้ งการใหเ้ ช่ือมไปยงั ลงิ กอ์ ีเมล 2. ท่หี นา้ ตา่ ง Properties Inspector พิมพอ์ ีเมลท่ตี อ้ งการลงิ กล์ งไปในชอ่ งลิงก์ โดยระบคุ าวา่ mailto : อีเมลแอดเดรส เช่น mailto:[email protected] 3. บนั ทกึ ขอ้ มลู กด Ctrl+S แสดงผลผา่ นโปรแกรมเว็บบราวเซอรก์ ด F12 การแสดงผล

จะเช่ือมโยงไปยงั โปรแกรม Microsoft Outlook 2010 คลกิ Next เพ่ือเขา้ สกู่ ารตงั้ คา่ อีเมล คลิก Next เพ่ือเขา้ สหู่ นา้ จอการลอ็ กอินเขา้ ระบบ ใสข่ อ้ มลู อีเมลตนเอง คลกิ Next รอสกั ครูเ่ พ่ือให้ Microsoft Outlook ตงั้ ค่าโปรแกรม เสรจ็ แลลว้ คลิก Finish จะปรากฏ หนา้ จออีเมล ใหส้ ง่ จดหมายไปยงั Admin ของเวบ็ ไซตต์ ามท่อี ยใู่ นอเี มลล