หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 173 ไฟลส์ าํ หรับดาวน์โหลด รูปที่ 5-99 ขอ้ ความไฟลด์ าวน์โหลดแสดงท่ีช่อง Link 5.3.6 การตกแต่ง จัดรูปแบบข้อความ และแทรกสัญลกั ษณ์พเิ ศษ เวบ็ ไซต์ท่ีคุณเห็นหรือสร้างด้วย Dreamweaver โดยการพิมพ์หรือวางรูปภาพลงไป เมื่อ นาํ ไปแสดง ในเวบ็ บราวเซอร์ก็จะเห็นผลเหมือนตอนสร้างไว้ ดงั น้ีหากตอ้ งการใส่เน้ือหาลงไปใน เวบ็ เพจ กใ็ หท้ าํ การพิมพข์ อ้ ความท่ีตอ้ งการลงไปในส่วนของ Document Window ไดเ้ ลย 5.3.6.1 การข้ึนบรรทดั ใหมใ่ นโปรแกรม Dreamweaver สามารถทาํ ได้ 2 วธิ ีคือ 1) กดป่ ุม Enter โดยตรง รูปท่ี 5-100 การข้ึนบรรทดั ใหม่ กดป่ ุม Enter 2) กดป่ ุม Shift คา้ งไว้ แลว้ กด Enter รูปที่ 5-101 การข้ึนบรรทดั ใหม่ กดป่ ุม Shift+Enter
หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 174 5.3.6.2 การเลือกขอ้ ความ เม่ือใดท่ีตอ้ งการตกแต่งขอ้ ความท่ีพมิ พไ์ ว้ ใหเ้ ลือกขอ้ ความเฉพาะส่วนท่ีตอ้ งการ ก่อน 1) การเลือกขอ้ ความเฉพาะส่วนที่ตอ้ งการ คลิกเมาส์วางเคอร์เซอร์ไวห้ นา้ ขอ้ ความ และลากเมาส์ไปจนถึงคาํ สุดทา้ ยท่ี เลือกใหเ้ กิดแถบสีดาํ หรือถา้ ตอ้ งการเลือกท้งั หมดท้งั บรรทดั ใหด้ บั เบิลคลิกท่ีบรรทดั ท่ีตอ้ งการ รูปท่ี 5-102 การเลือกขอ้ ความเฉพาะส่วนที่ตอ้ งการ 2) เลือกขอ้ ความภายในยอ่ หนา้ เดียวกนั คลิกที่บรรทดั แรกของยอ่ หนา้ และลากเมาส์มาถึงบรรทดั สุดทา้ ยในยอ่ หนา้ ที่ตอ้ งการใหเ้ กิดแถบสีดาํ รูปท่ี 5-103 คกลาิกรลเลาืกอเกมขาสอ้ ์ตค้งั วแาตม่บภรารยทใดั นแยรกอ่ หจนนถา้ ึงเดบียรรวทกดันั สุดทา้ ยท่ีเลือก 3) เลือกขอ้ ความท้งั หมด เลือกคาํ ส่งั Edit > Select All หรือ กดคียล์ ดั <Ctrl>+A เลือกคาํ สงั่ Edit > Select All รูปท่ี 5-104 การเลือกขอ้ ความท้งั หมด 5.3.6.3 การตกแต่ง และจดั รูปแบบขอ้ ความ หลงั จากคลิกเมาส์เลือกขอ้ ความแลว้ เราสามารถปรับแต่ง และจดั รูปแบบขอ้ ความ โดยกาํ หนดค่าใน Property Inspector ซ่ึงมีให้เลือกกาํ หนด 2 รูปแบบ คือ แบบ CSS และแบบ HTML ดงั น้ี
หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 175 การจดั รูปแบบตวั อกั ษร HTML โดยกาํ หนดคา่ Property มีดงั น้ี 12 3 รูปท่ี 5-105 การจดั รูปแบบตวั อกั ษร HTML 1) รูปแบบของตวั อกั ษร เป็น Paragraph, Heading 16 2) กาํ หนดแม่แบบอกั ษร (Style sheet) 3) การเชื่อมโยง การจดั รูปแบบตวั อกั ษร CSS โดยกาํ หนดคา่ Porperty มีดงั น้ี 45 67 รูปที่ 5-106 การจดั รูปแบบตวั อกั ษร CSS 4) การกาํ หนด Font ตวั อกั ษร 5) การจดั ตาํ แหน่ง 6) การกาํ หนดขนาดตวั อกั ษร (Font) size 1-7 7) การกาํ หนดลกั ษณะอกั ษรใส่สีอกั ษร การเลือกใชง้ านฟอนต์ สําหรับการพิมพข์ อ้ ความบนเวบ็ เพจเป็ นภาษาไทย ควรกาํ หนดให้ เป็ น Microsoft Sans Serif, MS Sans Serif หรือ Tahoma และสําหรับขอ้ ความบนเวบ็ เพจเป็ น ภาษาองั กฤษให้ทาํ การกาํ หนดเป็ น Arial เท่าน้นั เพราะหากเราทาํ การกาํ หนดเป็ นฟอนต์ตวั อ่ืน นอกเหนือจากน้ี อาจทาํ ใหค้ อมพวิ เตอร์บางเครื่อง ไมส่ ามารถทาํ การเปิ ดอา่ นขอ้ ความบนเวบ็ เพจได้
หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 176 5.3.6.4 ข้นั ตอนในการใส่อกั ษรพิเศษแบบตา่ ง ๆ ดงั น้ี ไปท่ีแถบ Insert > เลือก Character: Other Characters รูปท่ี 5-107 อกั ษรพเิ ศษ เม่ือคลิกท่ี Other Characters จะปรากฏหนา้ ตา่ ง ดงั น้ี รูปท่ี 5-108 การแทรกสญั ลกั ษณ์พเิ ศษ หากตอ้ งการใส่อกั ษรพิเศษตวั ใด ใหท้ าํ การคลิก หลงั จากน้นั โปรแกรม Dreamweaver จะ ทาํ การ Insert อกั ษรพิเศษน้นั ลงใน Document Window 5.3.6.5 การทาํ ตวั อกั ษรเคลื่อนไหว คาํ สั่ง <marquee> เป็นคาํ สง่ั ท่ีใชส้ าํ หรับกาํ หนดให้ตวั อกั ษรเคลื่อนไหว ทาํ ให้ เอกสารมีความน่าสนใจมากยง่ิ ข้ึน ซ่ึงมีข้นั ตอนดงั น้ี 1) ใหค้ ลิกเลือกตาํ แหน่งที่ตอ้ งการสร้างตวั อกั ษรเคลื่อนไหว จากน้นั ให้ คลิกท่ีมุมมอง Code ดงั รูป
หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 177 คลิกมุมมอง Code เลือกตาํ แหน่งท่ีตอ้ งการสร้างขอ้ ความเคลื่อนไหว รูปที่ 5-109 เลือกตาํ แหน่งที่ตอ้ งการสร้างขอ้ ความเคล่ือนไหว 2) เมื่อเขา้ สู่มุมมอง Code แลว้ ใหเ้ ขียนคาํ สั่ง <marquee> ยนิ ดีตอ้ นรับสู่ เวบ็ ไซต์ Jewelry </marquee> เสร็จแลว้ ใหค้ ลิกป่ ุม Design ดงั รูป ทาํ การเขียน Code รูปที่ 5-110 เขียนคาํ สัง่ marquee
หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 178 3) ผลลพั ธ์ท่ีได้ ปรากฏขอ้ ความ ถา้ แสดงผลที่เวบ็ บราวเซอร์ ตวั อกั ษรกจ็ ะเคลื่อนไหว รูปท่ี 5-111 ผลลพั ธ์จากการสร้างขอ้ ความเคล่ือนไหว 5.3.7 การบนั ทกึ ไฟล์เวบ็ เพจทสี่ ร้าง หลงั จากท่ีเราสร้างเว็บเพจไดต้ ามตอ้ งการแลว้ ให้ทาํ การบนั ทึกไฟล์เวบ็ เพจ โดยเลือก คาํ สัง่ File > Save (หรือกดคียล์ ดั <Ctrl>+S) เน่ืองจากเรายงั ไม่เคยบนั ทึกไฟลน์ ้ีมาก่อน โปรแกรม Dreamweaver จะใหเ้ ราระบุชื่อไฟลใ์ หมด่ ว้ ย มีข้นั ตอนดงั น้ี 1) เลือกคาํ สั่ง File> Save เพ่ือบนั ทึกไฟล์ รูปท่ี 5-112 ใชค้ าํ สัง่ Save
หน่วยที่ 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 179 2) เลือกตาํ แหน่งเกบ็ ไฟล์ พร้อมท้งั ต้งั ชื่อไฟลท์ ่ีตอ้ งการ เลือกตาํ แหน่งท่ีจะจดั เก็บ ต้งั ชื่อไฟล์ คลิกป่ ุม Save รูปที่ 5-113 การเลือกตาํ แหน่งไฟลท์ ี่ตอ้ งการบนั ทึก จากน้นั เม่ือใดท่ีเราทาํ การแกไ้ ขหน้าเวบ็ น้ี และตอ้ งการบนั ทึกการเปล่ียนแปลง ก็ให้เลือก คาํ สั่ง File>Save เพื่อบนั ทึกหนา้ เวบ็ แทนที่ไฟล์เดิมที่เคยบนั ทึกไวไ้ ด้ แต่ถา้ เราตอ้ งการบนั ทึกไฟล์ น้ีไวท้ ี่ตาํ แหน่งใหม่หรือบนั ทึกเป็ นไฟล์ใหม่ ให้เลือกคาํ ส่ัง File > Save As และกาํ หนดตาํ แหน่ง เก็บและช่ือไฟลใ์ หมไ่ ด้ 5.3.7.1 คาํ สง่ั อ่ืน ๆ ในการบนั ทึกไฟลเ์ วบ็ เพจ 1) คาํ สั่ง File >Save All บนั ทึกไฟลท์ ุกไฟลท์ ี่เปิ ดอยู่ (ใชใ้ นกรณีที่เราเปิ ด หลายไฟลพ์ ร้อมกนั ) 2) คาํ สั่ง File > Save to Remote Sever บนั ทึกไฟลไ์ ปเกบ็ ที่เวบ็ เซิร์ฟเวอร์ (คือการอพั โหลดไฟลไ์ ปเกบ็ ที่เวบ็ เซิร์ฟเวอร์นนั่ เอง) ในการต้งั ช่ือไฟล์หรือโฟลเดอร์ ไม่แนะนาํ ให้มีช่องว่าง หรือมีการใช้อกั ขระพิเศษ หรือ ; / . เพราะเม่ือนาํ ไฟลไ์ ปไวบ้ นเวบ็ เซิร์ฟเวอร์ บางทีอกั ขระเหล่าน้ีอาจจะถูกเปล่ียน ทาํ ให้เกิด ปัญหา เช่น ในการเช่ือมโยงไฟล์ระหว่างหน้าเว็บอาจหาไฟล์ที่เช่ือมโยงไม่พบ เพราะช่ือไฟล์ เปลี่ยนไปแลว้ นอกจากน้นั ไมแ่ นะนาํ ใหข้ ้ึนตน้ ชื่อดว้ ยไฟลด์ ว้ ยตวั เลข 5.3.7.2 การแสดงผลเวบ็ เพจบนเวบ็ บราวเซอร์ เม่ือเราทาํ การบนั ทึกไฟลเ์ วบ็ เพจเรียบร้อยแลว้ หากตอ้ งการดูผลลพั ธ์วา่ เวบ็ เพจท่ี สร้างข้ึนมีการแสดงผลอยา่ งไรบนเวบ็ บราวเซอร์ มีข้นั ตอนการแสดงผลเวบ็ เพจบนเวบ็ บราวเซอร์ ดงั น้ี
หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 180 1) ใหท้ าํ การ Save เวบ็ เพจก่อนทาํ การแสดงผลบน Browser ทุกคร้ัง 2) ไปท่ี Document Toolbar แลว้ คลิกท่ีสญั ลกั ษณ์คลา้ ยกบั รูปโลก รูปที่ 5-114 สัญลกั ษณ์การแสดงผลหนา้ เวบ็ เพจ 3) เลือกเมนู Preview in IExplore รูปท่ี 5-115 เลือก Browser ในการแสดงผล หลงั จากน้นั โปรแกรม Dreamweaver จะทาํ การแสดงผลของเวบ็ เพจที่โปรแกรม Internet Explorer รูปท่ี 5-116 หนา้ เวบ็ ที่แสดงผล
หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 181 5.4 บทสรุป Dreamweaver เป็นโปรแกรมสาํ เร็จรูปที่ช่วยในการสร้างงานเวบ็ ไซตไ์ ดอ้ ยา่ งง่าย ๆ โดยเรา สามารถนาํ รูปภาพ และขอ้ ความที่ตอ้ งการมาประกอบเป็ นหนา้ เวบ็ เพจ อีกท้งั ยงั สามารถเพิ่มลูกเล่น ทางดา้ นเสียง ภาพเคลื่อนไหว นอกจากน้นั Dreamweaver ยงั เป็ นโปรแกรมแบบ What You See Is What You Get (WYSIWYG) คือการจดั วางรูปภาพ หรือข้อความแบบไหน โปรแกรมจะทาํ การเขียนโค้ดให้ อตั โนมตั ิตามการจดั วาง ทาํ ใหผ้ อู้ อกแบบหนา้ เวบ็ ไซตท์ ่ีเรียกวา่ Web Designer สามารถมีส่วนเขา้ มาพฒั นาเว็บไซต์ด้วยตนเองได้มากข้ึน แม้จะไม่ถนัดการเขียนโคด้ ก็ตาม ส่งผลให้เว็บไซต์ใน ปัจจุบนั น้ีมีความสวยงามน่าสนใจมากกวา่ ในยคุ แรก ๆ
หน่วยท่ี 5 การสร้างเวบ็ ไซตด์ ว้ ยโปรแกรมสาํ เร็จรูป Dreamweaver 182 บรรณานุกรม จีระสิทธ์ิ อ้ึงรัตนวงค.์ **สร้างเวบ็ Mobile Application ด้วย Dreamweaver CS6.**กรุงเทพฯ*:* โปรวชิ นั่ ,*2556. ดวงพร**เกี๋ยงคาํ .**คู่มอื สร้าง Web Site ฉบับสมบูรณ์.**นนทบุรี*: *ไอดีซี พรีเมียร์ จาํ กดั ,*2556. ธนั ยพฒั น์ วงศร์ ัตน์.**คู่มือการใช้งาน Dreamweaver CS6.**กรุงเทพฯ*:*บริษทั สวสั ดี ไอที จาํ กดั ,*2556. บญั ชา**ปะสีละเตสงั .** การพฒั นาเวบ็ แอปพลเิ คชั่นด้วย PHP ร่วมกบั MySQL และ Dreamweaver.**กรุงเทพฯ*:*ซีเอด็ ยเู คชน่ั ,*2553. ฝ่ ายตาํ ราวชิ าการคอมพวิ เตอร์.**การสร้างเวบ็ ไซต์.**กรุงเทพฯ*:*ซีเอด็ ยเู คชนั่ ,*2557. พนั จนั ทร์ ธนวฒั นเสถียร.**ออกแบบและสร้างเวบ็ สวยด้วย Dreamweaver CS6 สําหรับ ผู้เริ่มต้น.**กรุงเทพฯ*:*รีไววา่ ,*2557. _______________________.**ออกแบบและสร้างเวบ็ สวยด้วย Dreamweaver CS6 ฉบับ สมบูรณ์.**กรุงเทพฯ*:*รีไววา่ ,*2558. สุธี นวกลุ .**ออกแบบและสร้างเวบ็ ไซต์ด้วย Dreamweaver CS6.**กรุงเทพฯ*:*ซีเอ็ดยเู คชน่ั , 2555.
Search
