ใบความรู้หน่วยที่ 2การสร้างเว็บไซต์

ใบความรู้ วิชาการสรา้ งเวบ็ ไซต์เรอ่ื ง เริ่มต้นใช้งานด้วยโปรแกรม Adobe Dreamweaver CS6การเปดิ โปรแกรมวธิ ีที่ 1 คลิก start -> All Programs -> Adobe Dreamweaver CS6 ดังตวั อย่างดา้ นลา่ งวิธที ี่ 2 ดบั เบลิ คลิกไอคอน ท่หี น้าจอ Desktopส่วนประกอบของ welcome screen หลงั จากเปดิ โปรแกรมขนึ้ มาจะปรากฏหนา้ ตา่ ง welcome screen ซึง่ แบ่งออกเปน็ 3 กลมุ่ หลกัดงั ภาพดา้ นล่าง ดงั น้ีA BC A. เปดิ ไฟล์งานเก่าทเ่ี คยเรยี กใชง้ าน (open a recent ltem) B. สรา้ งงานใหม่ (create new) ใชส้ าหรบั สร้าง ไฟลง์ านใหม่ ซงึ่ สามารถเลอื กสรา้ งไฟล์งานได้ หลายชนดิ ไม่ว่าจะเป็น ไฟล์ html, php, asp, หรอื JavaScript C. สรา้ งงานสาเรจ็ รปู (create from samples) สรา้ งเวบ็ เพจใหม่โดยใชไ้ ฟลต์ ัวอย่าง ทโ่ี ปรแกรม จัดเตรยี มเอาไว้ให้ หรอื ที่เรียกกันว่า เทมเพลท (template) มีใหเ้ ลอื กใชม้ ากมายหลายประเภท

สว่ นประกอบหนา้ จอโปรแกรม Adobe Dreamweaver CS6 2. แถบ insert bar 1.เมนหู ลัก 5. กลุ่ม 4.หนา้ ต่าง properties inspector หน้าต่าง พาเนล 3. พืน้ ที่สร้างเว็บ 6.แถบสถานะ1. แถบเมนหู ลัก (Menu bar) เป็นแถบรวมรวมคาสงั่ ท้ังหมดของโปรแกรม โดยแบง่ คาสง่ั ทง้ั หมดออกเป็นหมวดหมตู่ ามลกั ษณะของการใชง้ าน2. แถบเครือ่ งมอื (Insert Bar) เปน็ แหลง่ รวมเคร่ืองมอื ซึ่งใชใ้ นการวางออบเจ็กต์ชนดิ ตา่ ง ๆ ลงบนหน้าเว็บเพจเช่น ขอ้ ความ รูปภาพ ลิงค์ รูปเคลือ่ นไหว เป็นตน้ โดยจะแบ่งเปน็ กล่มุ คาสงั่ เพ่อื ใหใ้ ชง้ านได้สะดวก ซ่ึงจะประกอบด้วยกล่มุ คาสงั่ ดังน้ี - Common ใชว้ างออบเจก็ ต์ทีต่ อ้ งใช้งานบ่อย ๆ เชน่ รปู ภาพ ตาราง ไฟลม์ ลั ติมีเดีย เปน็ ตน้ - Layout ใชว้ างออบเจก็ ตท์ ี่ใช้จดั โครงสรา้ งของเว็บเพจ เช่น ตาราง เฟรม และ AP element (หรอื เลเยอร)์ - Forms ใช้วางออบเจก็ ตท์ ่ีใช้ในการสร้างแบบฟร์อมรบั ขอ้ มูล เช่น ช่องรบั ข้อความ ปุ่มตัวเลอื กต่าง ๆ เป็นตน้ - Data ใชว้ างคาส่ังท่ีใช้การจดั การฐานข้อมูล และดงึ ขอ้ มลู จากฐานข้อมลู มาแสดงบนเวบ็ เพจ - Sary ใชว้ างออบเจ็กต์ทใี่ ชเ้ ทคโนโลยีของ Ajax - jQuery Mobile ใช้สรา้ งหนา้ เพจทแ่ี สดงบนอุปกรณ์มือถือและแทบ็ เลต็ โดยใช้เทคโนโลยแี บบ jQuery - InContext Edting ใชส้ ร้างออบเจ็กตท์ ี่ช่วยอานวยความสะดวกให้ผใู้ ช้งานสามารถแกไ้ ขเว็บเพจได้ - Text ใชส้ าหรบั จัดปรบั แต่งหรอื จดั รปู แบบของตวั อักษรและข้อความสะดวกให้ผใู้ ชง้ าน เช่น หัวเรื่อง ตวั หนา้ ตวั เอียง รวมท้ังแทรกสญั ลกั ษณ์พิเศษต่าง ๆ เชน่ $ (Dollar) © (Copyright) เปน็ ตน้ - Favorites เปน็ กลุม่ ทสี่ ามารถเพมิ่ ปุ่มคาส่งั ท่ใี ชบ้ อ่ ยจากกลุ่มอ่ืน ๆ เขา้ มาเก็บไวใ้ ช้งานเอง เพื่อความ สะดวกในการใชง้ าน

3. พ้ืนท่สี ร้างงาน (Document area) เปน็ สว่ นที่ใช้สรา้ งหนา้ เวบ็ เพจ ใส่เนอ้ื หา และองคป์ ระกอบตา่ ง ๆของเว็บเพจ ซง่ึ สามารถเลอื กเปิดพน้ื ที่สรา้ งงานได้ด้วยกัน 4 มมุ มอง - มมุ มองออกแบบ (Design View) ใชแ้ กไ้ ขและจดั วางเนื้อหาต่าง ๆ ลงบนเวบ็ เพจ - มุมมองโคด้ (Code View) ใช้สาหรับเปดิ ดูคาสั่งตา่ ง ๆ เช่น HTML PHP ASP และ JSP และสามารถ แกไ้ ขคาส่งั ตา่ ง ๆ ได้ตามต้องการ - มุมมองโคด้ และออกแบบ (Code and Design View หรือ Split) แสดงทงั้ แบบมมุ มองออกแบบ และ มมุ มองโคด้ พรอ้ มกัน สามารถปรบั ขนาดพนื้ ทข่ี องแต่ละสว่ นไดโ้ ดยคลกิ ลากที่เสน้ แบ่งระหวา่ งท้งั 2 ส่วนนี้ - มุมมองแสดงเวบ็ เพจเหมอื นดบู นเบราเซอร์ (Live View) แสดงหนา้ เวบ็ เพจเหมือนดบู นเบราเซอร์ท้ัง ในสว่ นของ JavaScript และ Plugin4. หนา้ ตา่ ง properties inspector เป็นหน้าตา่ งเลก็ ๆ ทอ่ี ยู่ดา้ นลา่ งสุดของหนา้ จอโปรแกรม เป็นสว่ นท่ีใช้งานมากทสี่ ุด เนอ่ื งจากเปน็ สว่ นทีใ่ ชก้ าหนดคุณสมบตั ิสาคญั ๆ ของออบเจก็ ต์ที่วางในหนา้ เวบ็ เพจ เชน่ตาแหนง่ ขนาด และสี5. กลุม่ หนา้ ตา่ งพาเนล (Panels) เป็นหน้าต่างเลก็ ๆ ท่รี วบรวมเครือ่ งมอื ไว้เป็นกลมุ่ ตามหนา้ ทีท่ ี่เกย่ี วขอ้ ง ทาใหใ้ ช้งานไดส้ ะดวกข้นึ6. แถบสถานะ (Status Bar) เป็นแถบทีอ่ ยทู่ างด้านลา่ งของหน้าตา่ ง ๆ Document ประกอบด้วย 2 สว่ นคอื ดา้ นซ้ายเปน็ Tag Selector สว่ นด้านขวาเปน็ เคร่ืองมอื ตา่ ง ๆหลกั สาคญั ก่อนการสร้างเว็บเพจ 1. เลอื กรปู แบบพน้ื ทีท่ างาน(Workspace) ใหเ้ หมาะสม 2. จดั การกับหน้าตา่ งไฟล์ 3. เตรียมโฟลเดอรส์ าหรับสรา้ งเว็บไซต์ 4. สร้าง Define Site เพ่อื จดั ระบบให้ข้อมูล

การบันทกึ เวบ็ เพจ 1.คลกิ เลือกคาสง่ั File - > Save (หรือกดคยี ล์ ดั Ctrl+S) - ถา้ ตอ้ งการบนั ทึกเวบ็ เพจเดิมใหเ้ ป็นชื่อใหม่ เลือกคาสงั่ Save As - ถา้ ตอ้ งการบนั ทึกเวบ็ เพจท้งั หมดที่เปิ ดใชง้ านอยู่ เลือกคาสงั่ Save All 2. เปดิ เข้าไปยังโฟลเดอรห์ ลักท่ีจดั เก็บเวบ็ ไซต์และโฟลเดอร์ยอ่ ยทีจ่ ะใชเ้ กบ็ ไฟล์ 3. ตง้ั ชื่อไฟล์ทต่ี อ้ งการ (กรณหี น้าแรกของเวบ็ ไซต์ ตอ้ งตงั้ เป็น Index.html เท่าน้นั นอกจากนน้ั ตง้ัชื่อตามชนิดของไฟล์งาน) 4. เลือกประเภทไฟล์ทีจ่ ะบันทกึ เปน็ html 5. คลกิ ปุ่ม Save

ใบงานเร่ือง เริ่มต้นใช้งานด้วยโปรแกรม Adobe Dreamweaver CS6ให้นักเรยี นตอบคาถามลงในสมุดแล้ว1. อธิบายขั้นตอนการเปิดโปรแกรมAdobe Dreamweaver CS62. สว่ นประกอบของ Welcome Screen มี 3กลุ่มหลกั อะไรบา้ ง3. ส่วนประกอบของหนา้ จอโปรแกรมDreamweaver CS6 มกี ส่ี ว่ น อะไรบา้ ง4. หลกั สาคญั ก่อนการสรา้ งเว็บไซต์ คือ อะไร5. อธยิ ายขั้นตอนการบันทกึ ไฟลง์ าน