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

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 ของเวบ็ ไซตต์ ามที่อยใู่ นอเี มลล