การจัดเว็บไซต์-งานครูแหม่ม

การจัดเวบ็ ไซตด์ ้วยDreamweaver CS6

การจดั เว็บไซต์ด้วย Dreamweaver CS6 โปรแกรม Adobe Dreamweaver CS6 เป็นเคร่ืองมือท่ใี ชใ้ นการสรา้ งและพฒั นาเว็บไซต์ ซ่ึงในโปรแกรม Adobe Dreamweaver CS6 ไดร้ วบรวมคาสง่ั และยงั สามารถแบง่ การทางานออกเป็นแบบการเขียนคาสง่ั (Coding) การออกแบบ (Design) หรือสามารถเขยี นคาสง่ั และออกแบบไดใ้ นเวลาเดียวกนั สาระการเรียนรู้ 1. การใชง้ านโปรแกรม Dreamweaver CS6 2. การจดั หนา้ เว็บเพจ 3. การใสข่ อ้ ความและตกแตง่ หนา้ เว็บเพจ 4. กาสรา้ งลิงค์ ภายนอก และ ภายในเว็บไซต์ 5. การสรา้ งฟอรม์ 6. การสรา้ งแมแ่ บบเอกสารเว็บไซต์

การจดั เวบ็ ไซต์ด้วย Dreamweaver CS6 จดุ ประสงคก์ ารเรียนรู้ 1. สามารถใชง้ านโปรแกรม Dreamweaver CS6 ได้ 2. สามารถจดั หนา้ เว็บเพจได้ 3. สามารถใสข่ อ้ ความและตกแตง่ หนา้ เว็บเพจได้ 4. สามารถสรา้ งลิงค์ ภายนอก และ ภายในเว็บไซตไ์ ด้ 5. สามารถสรา้ งฟอร์มได้ 6. สามารถสรา้ งแมแ่ บบเอกสารเว็บไซต์

การจดั เว็บไซต์ด้วย Dreamweaver CS6การใชง้ านโปรแกรม Dreamweaver CS6

การจดั เว็บไซต์ด้วย Dreamweaver CS6 การใชง้ านโปรแกรม Dreamweaver CS6 Adobe Dreamweaver CS6 เป็นโปรแกรมสำเรจ็ รปู ทใ่ี ชส้ ำหรบั สรำ้ งเวบ็ ไซต์ เหมำะสำหรบั นักพฒั นำเวบ็ ไซตต์ งั้ แตม่ อื ใหมไ่ ปจนถงึ มอื อำชพี โดยสำมำรถนำขอ้ ควำมและภำพมำประกอบเป็นหนำ้ เวบ็ เพจไดอ้ ยำ่ งงำ่ ย ๆ และสำมำรถเพม่ิ ลกู เลน่ ทำงดำ้ นมลั ติมเี ดยี ตลอดจนกำรตดิ ตอ่ กบั ฐำนขอ้ มลู ทท่ี ำไดง้ ำ่ ยนอกจำกน้ี Adobe Dreamweaver CS6 ยงั เป็นโปรแกรมประเภท WYSIWYG อำ่ นวำ่ \"วซิ ชี วกิ ,, (What You See Is What You Get) แปลวำ่ คุณเหน็ อยำ่ งไรคุณกไ็ ดร้ บั อยำ่ งนนั้ หมำยควำมวำ่ ลกั ษณะขอ้ ควำม กำรวำง ภำพกรำฟิก บนเวบ็ เพจทำไวอ้ ยำ่ งไร เมอ่ื ทำกำรแสดงผล บนบรำวเซอรแ์ ลว้ ลกั ษณะของขอ้ ควำมหรอื ภำพกรำฟิกทไ่ี ดก้ ็จะเหมอื นกนั ท่ี ทำไว้ 1.1 กำรตดิ ตงั้ โปรแกรม Adobe Dreamweaver CS6 ควำมตอ้ งกำรของระบบ กำรตดิ ตงั้ โปรแกรม Adobe Dreamweaver CS6 บนระบบปฏบิ ตั กิ ำร Windows ใหส้ ำมำรถใชง้ ำนไดน้ นั้ จะตอ้ งมอี งคป์ ระกอบของฮำรด์ แวรแ์ ละระบบปฏบิ ตั กิ ำรดงั นนั้ 1. หน่วยประมวลผลกลำง (CPU) Intel Pentium 4 หรอื AMD Athlon 64 2.หน่วยควำมจำ (RAM) 512 MB ขน้ึ ไปฮำรด์ ดสิ กม์ พี น้ื ท่วี ำ่ ง 1 GB ขน้ึ ไป 3.ควำมละเอยี ดของจอภำพไมน่ ้อยกวำ่ 1024 X 576 พกั เซล และกำรด์ จอสนบั สนุนกำรแสดงผลแบบ 16 bit 4.ไดร์ DVD ROM 5.ระบบปฏบิ ตั กิ ำรไมต่ ่ำกวำ่ Windows XP (SP3)

การใช้งานโปรแกรม Dreamweaver CS6 การติดตง้ั โปรแกรม Adobe Dreamweaver CS6 มขี นั้ ตอนการติดตง้ั

การใช้งานโปรแกรม Dreamweaver CS6

การใช้งานโปรแกรม Dreamweaver CS6

การใช้งานโปรแกรม Dreamweaver CS6

การใช้งานโปรแกรม Dreamweaver CS6การเปิ ดและออกจากโปรแกรม Adobe Dreamweaver CS6 กำรเปิดโปรแกรม Adobe Dreamweaver CS6เมอ่ื ตดิ ตงั้ โปรแกรม Adobe Dreamweaver CS6 เรยี บรอ้ ยแลว้ สำมำรถเปิดใชง้ ำนโปรแกรมไดท้ นั ที มขี นั้ ตอน

การใช้งานโปรแกรม Dreamweaver CS6

การใช้งานโปรแกรม Dreamweaver CS6 1. Open a Recent Item : แสดงช่ือเวบ็ เพจท่ีเคยใช้งานมาแล้ว หรอื คลิกที่ป่ มุ Open เพื่อค้นหาไฟลท์ ี่ต้องการ 2. Create New : เป็นการสร้างไฟลง์ านใหม่ เช่น HTML, ColdFusion, PHP, ASP, JavaScript เป็นต้น - HTML : สรา้ งหน้าเวบ็ ธรรมดา เหมาะสาหรบั ผเู้ ร่ิมต้นสรา้ งเวบ็ - ColdFusion : สร้างหน้าเวบ็ แอพพลิเคชนั ่ ที่พฒั นาด้วยเทคโนโลยีฝัง่ เซิรฟ์ เวอร์ ColdFusion - PHP : สร้างหน้าเวบ็ แอพพลิเคชนั ่ ท่ีพฒั นาด้วยเทคโนโลยีฝัง่ เซิรฟ์ เวอร์ PHP - CSS : สร้างไฟลเ์ กบ็ รปู แบบตวั อกั ษร ตาราง สีพืน้ หลงั เพื่อนาไปใช้ในทุก ๆ หน้าเวบ็ เพจ - JavaScript : สรา้ งไฟลส์ คริปตท์ ี่ทางานฝัง่ ไคลเอนต์ และทางานท่ีเครอื่ งของผเู้ ข้าชมเวบ็ ไซต์ - Dreamweaver Site : สร้างเวบ็ ไซตใ์ หม่ 3. Top Features (Videos) : เข้าส่หู น้าเวบ็ Adobe TV ดวู ีดิโอสาธิตการใช้งาน

การใช้งานโปรแกรม Dreamweaver CS6การออกจากโปรแกรม Adobe Dreamweaver CS6 กำรออกจำกโปรแกรม สำมำรถทำได้ 2 วธิ ดี งั น้ี

การจดั เวบ็ ไซต์ด้วย Dreamweaver CS6การจดั หน้าเวบ็ เพจ Dreamweaver CS6

การจดั เว็บไซต์ด้วย Dreamweaver CS6 การจดั หนา้ เวบ็ เพจ Dreamweaver CS6 คอื โปรแกรมสร้างเวบ็ เพจแบบเสมือนจริง ของค่าย Adobe ซ่ึงช่วยให้ผทู้ ี่ตอ้ งการ สร้างเวบ็ เพจไม่ตอ้ งเขยี นภาษา HTML หรือโคด๊ โปรแกรม เอง หรือที่ศพั ทเ์ ทคนิคเรียกวา่ \"WYSIWYG \" โปรแกรม Dreamweaver มีฟังกช์ นั ทที่ าใหผ้ ใู้ ชส้ ามารถจดั วางขอ้ ความ รูปภาพ ตาราง ฟอร์ม วดิ ีโอ รวมถึงองคป์ ระกอบอ่ืน ๆ ภายใน เวบ็ เพจไดอ้ ยา่ งสวยงามตามทีผ่ ใู้ ชต้ อ้ งการ โดยไม่ตอ้ งใชภ้ าษาสคริปตท์ ี่ยงุ่ ยากซบั ซ้อนเหมือนก่อน Dreamweaver มีท้งั ใน ระบบปฏบิ ตั ิการ แมคอินทอช และไมโครซอฟทว์ นิ โดวส์ Dreamweaver ยงั สามารถทางานบนระบบปฏิบตั กิ ารแบบ ยนู ิกซ์ ผา่ นโปรแกรมจาลองอยา่ ง WINE ได้ เวอร์ชนั่ ล่าสุดของโปรแกรมตวั น้ีคอื Adobe Dreamweaver CS5.5 ตวั อยา่ งหนา้ แรกของโปรแกรม Adobe Dreamweaver CS5.5

การสร้างเวบ็ เพจและเวบ็ ไซต์•กาหนดโครงร่างเวบ็ ไซต์•เริ่มตน้ สร้างเวบ็ ไซตใ์ น Dreamweaver CS6•ถา้ ตอ้ งการแกไ้ ขไซตท์ ี่สร้างไว้ มีวธิ ีการดงั น้ี•การจดั การโครงสร้าง Files•การกาหนดคุณสมบตั ิของเวบ็ เพจ•การสร้างหนา้ เวบ็ เพจใหม่•การบนั ทึกไฟลเ์ วบ็ เพจ•การเปิ ดเวบ็ เพจเดิม

กาหนดโครงร่างเว็บไซต์ ก่อนทาการสร้างเวบ็ ไซต์ ตอ้ งกาหนดโครงสร้างเวบ็ ไซตก์ ่อน เพอ่ื สร้างความสมั พนั ธ์ระหวา่ งเวบ็ เพจและไฟลต์ า่ ง ๆ ให้ เป็นไป อยา่ งถูกตอ้ ง โดยภายในเวบ็ ไซตป์ ระกอบดว้ ยโฟลเดอร์และไฟลเ์ ป็นจานวนมาก ซ่ึงไฟลห์ นา้ แรกของเวบ็ ไซต์ (Homepage) จะตอ้ งอยใู่ นตาแหน่งโฟลเดอร์หลกั เสมอ และควรจดั เก็บไฟลห์ นา้ เวบ็ ไวใ้ นโฟลเดอร์แยกตามหัวขอ้ เพือ่ ทา ให้สามารถจดั การเวบ็ เพจไดอ้ ยา่ งเป็นระเบยี บและง่ายตอ่ การแกไ้ ขขอ้ มูล โครงสร้างของโฟลเดอร์ภายในเวบ็ ไซตจ์ ะมีลกั ษณะเช่นเดียวกบั โครงสร้างของโฟลเดอร์ในระบบไฟลข์ องวนิ โดว์ คือ ประกอบดว้ ยโฟลเดอร์หลกั (Root) ของเวบ็ ไซต์ และสามารถสร้างโฟลเดอร์ยอ่ ย ๆ เป็นช้นั ๆ เพ่อื จดั เกบ็ ไฟลใ์ ห้เป็น หมวดหมู่ เช่น ไฟลร์ ูปภาพ กจ็ ะถูกเก็บไวใ้ นโฟลเดอร์ images สาหรับไฟล์ Index.html ซ่ึงเป็นไฟลห์ นา้ แรกของเวบ็ ไซต์ จะตอ้ งอยใู่ นตาแหน่งโฟลเดอร์หลกั เสมอ

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

2. ข้อมูลความรู้และห้องสมดุ เวบ็ เพจเป็นเอกสารที่เช่ือมโยงขอ้ มูลถึงกนั ได้ ทาให้มีการรวบรวมความรู้ไวเ้ ป็นคลงั ขนาดใหญ่ ไม่ยงุ่ ยากในการ ดูแลรักษา และยงั เผยแพร่ไดอ้ ยา่ งกวา้ งขวางอีกดว้ ย ตวั อยา่ งเวบ็ ไซตส์ ารานุกรรมท่เี กบ็ ความรู้มากมากหลายภาษา

3. ประชาสัมพนั ธ์บริษทั และองค์กร สร้างเวบ็ เพจเพ่อื แนะนาความเป็นมา สินคา้ บริการ ที่อยทู่ ตี่ ดิ ต่อ และข่าวประชาสมั พนั ธอ์ งคก์ ร ตวั อยา่ งหนา้ เวบ็ เพจนาเสนอขอ้ มูลต่างๆขององคก์ าร

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

5. การเงนิ การลงทนุ เป็นเวบ็ ไซตท์ นี่ าเสนอขอ้ มูลทางการเงินและการลงทุน รวมไปถึงบริการสาหรับทาธุรกรรมการเงินออนไลน์ผา่ นเครือขา่ ยอินเทอร์เน็ต ตวั อยา่ งเวบ็ ไซตบ์ ริการทาธุรกรรมทางการเงิน

การจดั เว็บไซต์ด้วย Dreamweaver CS6การใสข่ ้อความและตกแตง่ หน้าเวบ็ เพจ Dreamweaver CS6

การใสข่ ้อความในเวบ็ เพจด้วย Dreamweaver เร่ิมต้นใส่ข้อความ ขอ้ ความนบั วา่ เป็นขอ้ มูลพ้นื ฐานในการส่ือสารถึงผเู้ ขา้ ชมเวบ็ ไซต์ การใส่ขอ้ ความบนหนา้ เวบ็ เพจ สามารถกระทาได้เหมือนกบั การพิมพใ์ นโปรแกรม Microsoft Word โดยสามารถพมิ พบ์ นหนา้ เวบ็ เพจไดเ้ ลย

1. คลิกวางเคอร์เซอร์ตรงตาแหน่งท่ีตอ้ งการพมิ พข์ อ้ ความ2. พมิ พข์ อ้ ความทีต่ อ้ งการการขนึ้ บรรทดั ใหม่การข้ึนบรรทดั ใหม่ ใชว้ ธิ ีกดป่ ุม Enter จะเวน้ บรรทดั ทว่ี า่ งก่อนและหลงั ให้ 1 บรรทดัการขนึ้ บรรทดั ใหม่ไม่ต้องเว้นทว่ี ่าง ถา้ ตอ้ งการใหก้ ารข้นึ บรรทดั ใหม่โดยไม่ตอ้ งเวน้ ที่วา่ ง ให้คลิกหนา้ ขอ้ ความหรือบรรทดั ท่ีตอ้ งการจะข้นึ บรรทดั ใหม่แลว้ กดป่ ุม Shift พร้อมกบั กดป่ ุม Enterการตกแต่งและจัดรูปแบบให้ข้อความเมื่อพิมพข์ อ้ ความลงในเวบ็ เพจแลว้ การเลือกขอ้ ความ เพอ่ื จดั การกบั ขอ้ ความน้นั ๆ เช่นกาหนดรูปแบบของตวั อกั ษร การลบ คดั ลอก ยา้ ย ฯลฯ มีรายละเอียดดงั น้ี1. การเลือกข้อความ- เลือกข้อความเฉพาะส่วนทีต่ ้องการ

1. คลิกเมาส์วางเคอร์เซอร์หนา้ ขอ้ ความและลากเมาส์ไปจนถึงคาสุดทา้ ย แลว้ ปล่อยเมาส์2. บริเวณเมาส์ลากผา่ นจะมีแถบสีดาข้นึ มา- เลือกข้อความท้งั หมด1. คลิกทีเ่ มนู Edit2. เลือก Select All หรือ Ctrl + A3. ขอ้ ความท้งั หมดจะถูกเลือก โดยเป็นแถบสีดาคลุมขอ้ ความหมายเหตุ ถา้ ตอ้ งการยกเลิกการเลือกเอกสาร ทาไดโ้ ดยคลิกพ้ืนที่วา่ งบนหนา้ เวบ็ เพจ

2. การตกแต่งและจัดรูปแบบของข้อความ ขอ้ ความทีพ่ ิมพล์ งในเวบ็ เพจ สามารถจดั รูปแบบของขอ้ ความ เช่น กาหนดรูปแบบตวั อกั ษร ขนาด สี ลกั ษณะตวั อกั ษร รวมไปถึงการจดั ตาแหน่งของขอ้ ความ เพื่อเพิม่ ความสวยงามหรือเนน้ ความสาคญั มีวธิ ีการดงั น้ี 1. เลือกขอ้ ความท่ตี อ้ งการตกแตง่ หรือจดั รูปแบบของขอ้ ความ 2. เครื่องมือสาหรับจดั รูปแบบขอ้ ความใน Properties Inspector ซ่ึงมีให้เลือก 2 รูปแบบคือ แบบ HTML และแบบ CSS ดงั น้ี - จัดรูปแบบด้วย HTML

หมายเลข 1 : เปิ ดการทางานกบั HTMLหมายเลข 2 : Format : เลือกรูปแบบหัวขอ้ Heading (ขนาดตวั อกั ษร) ระดบั 1-6 หมายเลข 3 : Class : ดึงสไตลข์ อง CSS มาใชก้ บั ขอ้ ความ หมายเลข 4 : กาหนดลกั ษณะตวั อกั ษรใหเ้ ป็นตวั หนา หมายเลข 5 : กาหนดลกั ษณะตวั อกั ษรให้เป็นตวั เอียง หมายเลข 6 : ใส่ Bullet หรือหัวขอ้ ยอ่ ย หมายเลข 7 : จดั ยอ่ หนา้ ของขอ้ ความ- จัดรูปแบบด้วย CSS

หมายเลข 1 : เปิ ดการทางานกบั CSS หมายเลข 2 : Targeted Rule : สร้างหรือกาหนดสไตล์ CSS หมายเลข 3 : Font : เลือกรูปแบบของตวั อกั ษร หมายเลข 4 : Size : ขนาดของตวั อกั ษร หมายเลข 5 : สีของตวั อกั ษร หมายเลข 6 : กาหนดลกั ษณะตวั อกั ษรใหเ้ ป็นตวั หนา หมายเลข 7 : กาหนดลกั ษณะตวั อกั ษรให้เป็นตวั เอียง หมายเลข 8 : จดั ตาแหน่งของขอ้ ความ เช่น ชิดซา้ ย ก่ึงกลาง ชิดขวาจดั ใหต้ รงกนั ท้งั ซ้ายและขวา

หมายเหตุ หมายเลข 2 : Targeted Rule : สร้างหรือกาหนดสไตล์ CSS - ถา้ เลือก <New Inline Style> คุณสมบตั ทิ ี่กาหนดจะมีผลต่อขอ้ ความทีเ่ ลือกทนั ที - ถา้ เลือก <New CSS Rule> จะเป็นการสร้าง CSS ใหม่ ซ่ึงสามารถนาไปใชซ้ ้าได้ มีวธิ ีการดงั น้ี 1. เลือกขอ้ ความ 2. ช่อง Targeted Rule เลือก <New CSS Rule> 3. ตกแต่งหรือจดั รูปแบบตาม หมายเลข 3-8 (กรณีน้ี สาธิตการกาหนดสีของตวั อกั ษร)

4. ช่อง Selector Name ใหพ้ มิ พช์ ื่อท่ีเราตอ้ งการสร้างเป็น CSS5. ช่อง Rule Definition เลือก (This document only) เพอื่ กาหนดเฉพาะขอ้ ความที่เลืไว้6. คลิกทป่ี ่ มุ OK เพอื่ บนั ทกึ7. ผลจากการจดั รูปแบบดว้ ย CSS

การจดั เวบ็ ไซต์ด้วย Dreamweaver CS6กาสร้างลงิ ค์ ภายนอก และ ภายในเว็บไซต์ Dreamweaver CS6

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

การจดั เวบ็ ไซต์ด้วย Dreamweaver CS6 การสร้างฟอร์ม Dreamweaver CS6

การสร้างฟอร์ม Dreamweaver CS6การสร้างฟอร์ม Form) ใน Dreamweaver เร่ิมแรกเลยก็คือใหเ้ ปิ ดโปรแกรม Dreamweaver ข้ึนมาโดยไปที่ File —> New …ข้นั ตอนการสร้าง Form เมื่อสร้างไฟล์ใหม่เสร็จแล้ว1. คลิกที่คาสง่ั Insert —> Form จากเมนูบาร์ ข้ึนตอนน้ีจะสงั เกตไดว้ า่ จะมีเส้นปะกรอบสีแดง ๆ เกิดข้ึนให้สงั เกตดูในส่วนของ Properties ที่บริเวณดา้ นล่าง จะมีส่วนของ Form Name ให้ทาการต้งั ชื่อฟอร์มตามวตั ถุประสงของการสร้างฟอร์ม **ตวั อยา่ งฟอร์มสาหรับกรอกขอ้ มูลนกั ศึกษา ต้งั ชื่อวา่ student

2. สร้างตาราง (Table)เพ่อื เตรียมพ้นื ทใ่ี นการวางขอ้ มูล โดยสร้างตารางดงั รูปลงในฟอร์ม(สังเกตุ ตอ้ งสร้างขา้ งในกรอบเสน้ ปะสีแดงเท่าน้นั ) เขียนขอ้ ความตามภาพที่ 1 ซ่ึงฟอร์มทสี่ ร้างน้ีจะเก็บขอ้ มูลของนกั เรียนในส่วนของรหสั ประจาตวั นกั เรียน พร้อมท้งั ชื่อและนามสกุลของนกั เรียน3. สร้าง Input Form สาหรับกรอกขอ้ มูล โดยใชค้ าสั่ง Insert —> Form Objects —> TextField ที่เมนูบาร์โดยสร้างท้งั หมด 3 ฟิ ลด์ ตามภาพท่ี 2 จากน้นั มากาหนดค่าต่าง ๆ ใหก้ บั Text Field แต่ละอนั•Text Field เป็นการกาหนดชื่อฟิ ลด์ ใหต้ ้งั ช่ือให้ส่ือความหมาย•Char Width เป็นการกาหนดขนาดความกวา้ งของฟิ ลด์ (แลว้ แตจ่ ะกาหนด)•Max Chars เป็นการกาหนดจานวนอกั ขระที่สามารถใส่ไดใ้ นฟิ ลด์ ซ่ึงกาหนดไดต้ ามความเหมาะสม•Single line เป็นการกาหนดให้ฟิ ลดม์ ีแคแ่ ถวเดียว

4. สร้าง Form Object กค็ อื แบบ ป่ มุ โดยให้เราเพอ่ื แถวข้ึนมาอีกแถว ดงั ภาพที่ 4จากน้ันให้ใชค้ าส่ัง Insert —> Form Objects —> Button จะไดป้ ่ มุ ดงั รูปที่ 4 จากน้ันสามารถเปลี่ยนช่ือป่ มุเปลี่ยนช่ือขอ้ ความบนป่ มุ และเลือกประเภทการทางานของป่ มุ ตามภาพท่ี 55. Save ฟอร์มไวใ้ นโฟลเ์ ดอร์ของเวบ็ งาน6. กดดู Preview ป่ มุ F12 จะไดด้ งั รูป

การจดั เวบ็ ไซต์ด้วย Dreamweaver CS6การสร้างแมแ่ บบเอกสารเวบ็ ไซต์ Dreamweaver CS6

การสร้างแมแ่ บบเอกสารเวบ็ ไซต์ Dreamweaver CS6การสร้าง TemplateTemplate ของโปรแกรม Dreamweaver ทาใหส้ ามารถแบง่ รูปแบบของเอกสารน้นั ๆ ออกเป็นสองส่วน คือ ส่วนทแ่ี กไ้ ขได้ (EditableRegions) และส่วนที่แกไ้ ขไม่ได้ (Non-Editable Regions) เอกสารทสี่ ร้างจาก Template เดียวกนจะมีรูปแบบเหมือนกนั หมด การสร้าง Template สามารถสร้างไดจ้ ากหนา้ เอกสารวา่ ง ๆ หรือหนา้ ท่ีมีขอ้ มูลอยแู่ ลว้ ซ่ึงรวมถึงหนา้ เอกสารทีม่ ีขอ้ มูล แบบไดนามิคเช่น ASP, ColdFusion, JSP หรือ PHP กต็ ามข้นั ตอนการสร้าง Template1. ออกแบบหนา้ เวบ็ เพจตามตอ้ งการ โดยจะกาหนดใหส้ ่วนหัวและส่วนเมนูเป็ น Template2. คลิกเมนู File > Save as Template

จากน้นั จะปรากฏหนา้ ต่าง Dreamweaver ข้ึนมา3. คลิกป่ มุ Edit Sites… จะปรากฏหนา้ ตา่ ง Site Difinition ข้ึนมา4. พมิ พช์ ่ือเวบ็ ไซตท์ ี่ตอ้ งการลงในช่อง What would you like to name your site?5. คลิกป่ มุ Next เพื่อผา่ นไปยงั ข้นั ตอนต่อไป6. คลิกเลือก No, I do not want to use a server technology. เนื่องจากเราจะสร้างเวบ็ ไซตโ์ ดยจะไม่ใชง้ านอะไรเกี่ยวขอ้ งกบั Server7. คลิกป่ มุ Next

8. คลิกเลือกรายการแรก นน่ั คอื Edit local copies on my machine, then upload to server when ready (recommended) เพือ่ เลือกท่จี ะเก็บเวบ็ ไซตท์ ีส่ ร้างไวใ้ น เคร่ืองของเราก่อน เมื่อพร้อมแลว้ จึงจะอพั โหลดข้นึ ไปยงั server9. กาหนดโฟลเดอร์สรหรับเก็บเวบ็ ไซตท์ จ่ี ะสร้างข้นึ ในช่อง Where on your computer do you want to store your files?10. คลิกป่ มุ Next

จากน้นั หนา้ ต่าง Choose Remote Root Folder จะปรากฏข้ึนมา ให้เลือกตาแหน่งที่ตอ้ งการจะเกบ็ ไฟล์11. คลิกวธิ ีการเช่ือมต่อกบั server ที่ช่อง How do you connect to your remote server? โดยในตวั อยา่ งรายการ Local/Network เน่ืองจากเชื่อมต่ออินเตอร์เน็ตผา่ นระบบเครือขา่ ย ภายในองคก์ ร12. คลิกป่ มุ เพ่อื เลือกโฟลเดอร์ทางฝ่ัง server ที่จะอพั โหลดไฟลข์ ้ึนไปเกบ็ ไวใ้ นช่อง What folder on your server do you want to store your files in?13. คลิกเลือกโฟลเดอร์ทจี่ ะเก็บไฟล์

1. คลิกป่ มุ Select2. คลิกเลือก No, do not enable check in and check out.3. คลิกป่ มุ Next4. คลิกป่ มุ Done

5. คลิกป่ มุ Cancel เพื่อปิ ดหนา้ ต่าง Save As Template ทปี่ รากฏข้ึนมาก่อนการกาหนดส่วนแก้ไขและคงท่ีของ Template จากน้นั เราจะมากาหนดส่วนท่สี ามารถแกไ้ ขขอ้ มูลได้ และไม่สามารถแกไ้ ขขอ้ มูลไดข้ องเทม็ เพลตน้ีก่อน โดยในทีน่ ้ีจะกาหนดใหส้ ่วนทส่ี ามารถแกไ้ ขขอ้ มูลได้ก็คือ ส่วนที่เป็นรูปภาพและส่วนทเ่ี ป็นขอ้ ความวา่ Welcome1. คลิกรูปภาพทต่ี อ้ งการจะกาหนดใหส้ ามารถแกไ้ ขได้2. คลิกรูปภาพ Insert > Template Objects > Editable Region หรือ Ctrl+Alt+V จะปรากฏหนา้ ต่าง New Editable Region ข้นึ มา3. พมิ พช์ ื่อของส่วนทต่ี อ้ งการให้แกไ้ ขไดท้ ช่ี ่อง Name จากตวั อยา่ งพิมพว์ า่ EditPicture014. คลิกป่ มุ OK5. สังเกตทีร่ ูปภาพ จะมีขอ้ ความวา่ EditPicture01 แสดงอยู่ถา้ ตอ้ งการกาหนดใหส้ ่วนที่เป็นขอ้ ความวา่ Welcome สามารถแกไ้ ขไดเ้ หมือนรูปภาพกใ็ หท้ าตามข้นั ตอนที่ 1-4 โดยต้งั ชื่อใหม่ตามตอ้ งการ ในที่น้ีต้งั ช่ือเป็น EditText01 กจ็ ะไดห้ นา้ เทม็ เพลตท่ีเสร็จเรียบร้อยดงั รูปดา้ นล่าง

การบันทึก Template ในกรณีทต่ี อ้ งการบนั ทึกหนา้ เท็มเพลตทส่ี ร้างข้ึน ใหท้ าตามข้นั ตอนดงั แสดงต่อไปน้ี1. คลิกเมนู File > Save As Template… เพอ่ื บนั ทึกหนา้ เวบ็ เพจ จะปรากฏหนา้ ตา่ ง Save AsTemplate ข้นึ มา2. กาหนดช่ือเทม็ เพลตที่สร้างข้นึ ในช่อง Save As:3. คลิกป่ มุ Saveการเปิ ดหน้า Template หลงั จากทสี่ ร้างหนา้ เทม็ เพลตเสร็จเรียบร้อยแลว้ และตอ้ งการเปิ ดหนา้ เทม็เพลตน้นั ข้ึนมาใชง้ าน มีวธิ ีการเปิ ดดงั ต่อไปน้ี1. คลิกเมนู File > New จะปรากฏหนา้ ตา่ ง New From Template ข้นึ มา2. คลิกแทบ็ Templates3. คลิกเลือกไฟลเ์ ทม็ เพลตท่ตี อ้ งการ4. คลิกป่ มุ Create

จะปรากฏหนา้ เทม็ เพลตท่เี ลือกข้นึ มา โดยจะแสดงช่ือเทม็ เพลตที่มุมบนดา้ นขวา โดยส่วนที่สามารถแกไ้ ขไดส้ ัญลกั ษณข์ องเมาส์จะแสดงเป็นรูปเคอร์เซอร์ และส่วนท่ีไม่สามารถแกไ้ ขขอ้ มูลไดน้ ้นั สัญลกั ษณ์เมาส์จะไม่แสดงเครื่องหมายเคอร์เซอร์ข้นึ มา ดงั รูปดา้ นล่าง