บทททที่ 2 ทฤษฎทและงานววิจ จัยททเที่ กทย ที่ วขข้อง นิ ในการดดาเนนินโครงการระบบร ร้านขายนาฬกาข ร้อมมือออนไลนน์ พพ ร้ ผผ ร้พพัฒนาได ร้ทดาการศก ศ ษา ค ร้นคว ร้าทฤษฎพ เอกสารทพท เอ วอชชอป เกพย ท วข ร้องกพับการสร ร้างระบบเวว็บไซตน์ ไมม่วาม่ จะเปว็ นโครงสร ร้างเวว็บไซตน์ การจพัดการระบบฐานข ร้อมผล หรมือในสวม่ นของ การออกแบบระบบ ซงศท สวม่ น พั ทฤษฎพทส ตม่างๆ เหลม่านพจ นี้ ดาเปว็ นต ร้องอาศย พท ดาคพัญในการจพัดการอยม่างยนิงท เพมือ ท ศ ษาโครงการ ซงศท สามารถแจกแจงได ร้ ดพังนพนี้ นด ามาประกอบการศก 2.1 ทฤษฎพโครงสร ร้างเวว็บไซตน์ 2.2 ทฤษฎพอน นิ เตอรน์เนว็ ต 2.3 ทฤษฎพหลพักการออกแบบเวว็บไซตน์ 2.4 ทฤษฎพการจพัดการระบบฐานข ร้อมผล 2.5 ทฤษฎพโปรกรม Xampp 2.6 ทฤษฎพการใช ร้ Adobe Photoshop CS6 2.7 ทฤษฎพ Adobe Dreamweaver CS6 2.8 งานวนิจพัยทพเท กพย ท วข ร้อง 2.1 ทฤษฎทโครงสรข้างเวว็ บไซตต ในการกดาหนดโครงสร ร้างของเวว็บไซตน์นพัน นี้ จะเปว็ นการออกแบบสวม่ น ประกอบทพังนี้ หมดของเวว็บไซตน์ทต พท ร้องการจะแสดงให ร้ผผ ร้เข ร้าชมเวว็บไซตน์รผ ร้วม่า เวว็บไซตน์เรานพั น นี้ มพทงพั นี้ หมดกพห ท น ร้า ในแตม่ละหน ร้าเปว็ นสวม่ นการแสดงของราย มืท มโยงกพันอยม่างไร ละเอพยดอะไรและเชอ การออกแบบโครงสร ร้างเวว็บไซตน์ คมือ การวางแผนการจพัดลดาดพับ เนมือ นี้ หาสาระของเวว็บไซตน์ ออกเปว็ นหมวดหมผม่ เพมือ ท จพัดทดาเปว็ นโครงสร ร้างใน การจพัดวางหน ร้าเวว็บเพจทพังนี้ หมด เปรพยบเสมมือนแผนทพท ทพท ท ดาให ร้เหว็น โครงสร ร้างทพังนี้ หมดของเวว็บไซตน์ ชวม่ ยให ร้นพั กพพัฒนาเวว็บไซตน์ไมม่หลงทาง การจพัดโครงสร ร้างของเวว็บไซตน์ มพจด จุ มจุงม่ หมายสดาคพัญคมือ การทพจ ท ะทดาให ร้ผผ ร้ เข ร้าเยพย ท มชม สามารถค ร้นหาข ร้อมผลในเวว็บเพจได ร้อยม่างเปว็ นระบบ ซงศท ถมือวม่า เปว็ นขพัน นี้ ตอนทพส ท ดาคพัญ ทพส ท ามารถสร ร้างความสดาเรว็จให ร้กพับผผ ร้ทพท ท ดาหน ร้าทพใท น การออกแบบและพพัฒนาเวว็บไซตน์ (Webmaster) การออกแบบ พั เจน แยกยม่อยเนมือ โครงสร ร้างหรมือจพัดระเบพยบของข ร้อมผลทพช ท ด นี้ หาออกเปว็ น พั พพันธน์กน สวม่ นตม่าง ๆ ทพส ท ม พั และให ร้อยผใม่ นมาตรฐานเดพยวกพัน จะชวม่ ยให ร้นม่าใช ร้ ร้ บไซตน์ งานและงม่าย ตม่อการเข ร้าอม่านเนมือ นี้ หาของผผ ร้ใชเวว็
2.1.1 รผปแบบโครงสร ร้างเวว็บไซตน์ การออกแบบโครงสร ร้างเวว็บไซตน์ ขศน นี้ อยผก ม่ บ พั ลพักษณะของข ร้อมผล และความชอบของผผ ร้ออกแบบ ตลอดจนกลจุม ม่ เปร้ าหมายทพต ท ร้องการนด า เสนอโครงสร ร้างของเวว็บไซตน์ประกอบไปด ร้วย 4 รผปแบบใหญม่ๆ ได ร้ดพังนพนี้ 2.1.1.1 โครงสร ร้างแบบเรพยงลดาดพับ (Sequential Structure) เปว็ นโครงสร ร้างแบบธรรมดาทพใท ชกพัร้ นมากทพส ท ด จุ เนมือ ท งจากงม่ายตม่อ การจพัดระบบข ร้อมผล ข ร้อมผลทพน ท ย นิ ม จพัดด ร้วยโครงสร ร้างแบบนพม นี้ พักเปว็ นข ร้อมผลทพท ม่ การเรพยงลดาดพับตามตพัว มพลพักษณะเปว็ นเรมือ ท งราวตามลดาดพับของเวลา เชน พั ทน์ โครงสร ร้างแบบนพนี้ เหมาะกพับ อพักษร ดรรชนพ สารานจุกรม หรมืออภนิธานศพ พั ซอนใช ร้ ร้ เวว็บไซตน์ทม พท ข พ นาดเลว็ก เนมือ นี้ หาไมม่ซบ การลนิ งกน์ (Link) ไปทพละหน ร้า ทนิศทางของการเข ร้าสผเม่ นมืนี้อหา (Navigation) ภายในเวว็บจะเปว็ นการ ร้ ดดาเนนินเรมือ ท งในลพักษณะเสนตรง โดยมพ ปจุม่ มเดนินหน ร้า-ถอยหลพังเปว็ นเครมือ ท ง พ ของโครงสร ร้างระบบนพค ร้ มมือหลพักในการกดาหนดทนิศทาง ข ร้อเสย นี้ อ มื ผผ ร้ใชไมม่ สามารถกดาหนดทนิศทางการเข ร้าสผเม่ นมือ นี้ หาของตนเองได ร้
2.1.1.2 โครงสร ร้างแบบลดาดพับขพัน นี้ (Hierarchical Structure) พั เปว็ นวนิธท พ ด พท ท พ ส พท ด จุ วนิธห พ นศงท ในการจพัดระบบโครงสร ร้างทพม ท ค พ วามซ บ ร้ ซอนของข ร้อมผล โดยแบม่งเนมือ นี้ หา ออกเปว็ นสวม่ นตม่างๆ และมพรายละเอพยด ยม่อยๆ ในแตม่ละสวม่ นลดหลพัทนกพันมาในลพักษณะแนวคนิดเดพยวกพับ แผนภผม นิ องคน์กร จศงเปว็ นการงม่ายตม่อการทดาความเข ร้าใจกพับโครงสร ร้างของเนมือ นี้ หาใน เวว็บลพักษณะนพนี้ ลพักษณะเดม่นเฉพาะของ เวว็บประเภทนพค นี้ อ มื การมพจด จุ เรนิม ท ต ร้นทพท มืท มโยงไปสผม่ จจุดรม่วมจจุดเดพยว นพัทนคมือ โฮมเพจ (Homepage) และเชอ เนมือ นี้ หา ในลพักษณะเปว็ นลดาดพับจากบนลงลม่าง
2.1.1.3 โครงสร ร้างแบบตาราง (Grid Structure) พั ซอนมากกวม่ ร้ โครงสร ร้างรผปแบบนพม นี้ ค พ วามซบ ารผปแบบทพผ ท าม่ นมา การออกแบบเพนิม ท ความยมืดหยจุน ม่ ให ร้แกม่การเข ร้าสผเม่ นมือ นี้ หาของผผ ร้ใช ร้ โดยเพนิม ท มืท มโยงซงศท กพันและกพันระหวม่างเนมือ การเชอ นี้ หาแตม่ละสวม่ น เหมาะแกม่ การ พั พพันธน์กน ร้ แสดงให ร้เหว็นความสม พั ของเนมือ นี้ หา การเข ร้าสผเม่ นมือ นี้ หาของผผ ร้ใชจะไมม่ ร้ ร้ เปว็ นลพักษณะเชงนิ เสนตรง เนมือ ท งจากผผ ร้ใชสามารถเปลพ ย ท นทนิศทางการเข ร้าสผม่ ม่ ในการศก ศ ษาข ร้อมผลประวพัตศ เนมือ นี้ หาของตนเองได ร้ เชน นิ าสตรน์ สมพัย นิ ทรน์ โดยในแตม่ละสมพัยแบม่งเปว็ น สจุโขทพัย อยจุธยา ธนบจุรพ และรพัตนโกสน หพัวข ร้อยม่อยเหมมือนกพันคมือ การปกครอง ศาสนา วพัฒนธรรม และภาษา ใน ศ ษาข ร้อมผลทางประวพัตศ ขณะทพผ ท ผ ร้ใชกดร้ าลพังศก นิ าสตรน์เกพย ท วกพับ การปกครองใน ร้ ศ ษาหพัวข ร้อศาสนาเปว็ นหพัวข ร้อตม่อไปกว็ได ร้ หรมือจะ สมพัยอยจุธยา ผผ ร้ใชอาจศ ก นิ ทรน์กอ ข ร้ามไปดผหพัวข ร้อ การปกครองในสมพัยรพัตนโกสน ม่ นกว็ได ร้เพมือ ท เปรพยบ เทพยบลพักษณะข ร้อมผลทพเท กนิดขศน นี้ คนละสมพัยกพัน
2.1.1.4 โครงสร ร้างแบบใยแมงมจุม (Web Structure) โครงสร ร้างประเภทนพจ นี้ ะมพความยมืดหยจุน ม่ มากทพส ท ด จุ ทจุกหน ร้าในเวว็บ มืท มโยงไปถศงกพัน ได ร้หมด เปว็ นการสร ร้างรผปแบบการเข ร้าสผม่ สามารถจะเชอ
ร้ เนมือ นี้ หาทพเท ปว็ นอนิสระ ผผ ร้ใชสามารถกด าหนดวนิธก พ ารเข ร้าสผเม่ นมือ นี้ หาได ร้ด ร้วย มืท มโยงเนมือ พั การโยงใยข ร้อความทพม ตนเอง การเชอ นี้ หาแตม่ละหน ร้าอาศย ท ม พ โน ทพัศนน์ (Concept) เหมมือนกพัน ของแตม่ละหน ร้าในลพักษณะของไฮเปอรน์ น์ รมือไฮเปอรน์มเพ ดพย โครงสร ร้างลพักษณะนพจ เทว็กซห นี้ พัดเปว็ นรผปแบบทพท ไมม่ม พ มืท ม โครงสร ร้างทพแ ท นม่นนอนตายตพัว (Unstructured) นอกจากนพก นี้ ารเชอ มืท มโยงออก โยงไมม่ได ร้จดากพัดเฉพาะเนมือ นี้ หา ภายในเวว็บนพั น นี้ ๆ แตม่สามารถเชอ ไปสผเม่ นมือ นี้ หาจากเวว็บภายนอกได ร้
2.2 ทฤษฎท อวินเตอรตเนว็ ต มืท มตม่อถศงกพันทพัทวโลก โดย อนินเตอรน์เนว็ ต หรมือ เครมือขม่ายขนาดใหญม่ทเพท ชอ มพมาตรฐานการรพับสงม่ ข ร้อมผลระหวม่างกพันเปว็ นหนศงท เดพยว ซงศท คอมพนิวเตอรน์ ม่ ตพัวอพักษร ภาพ แตม่ละเครมือ ท งจะสามารถรพับสงม่ ข ร้อมผลในรผปแบบตม่าง ๆ เชน พ งได ร้ รวมทพังนี้ สามารถค ร้นหาข ร้อมผลจากทพต และเสย ท าม่ ง ๆ ได ร้อยม่างรวดเรว็ว อนินเตอรน์เนว็ ตประกอบด ร้วยองคน์ประกอบ 2 สวม่ นคมือสวม่ นทพเท ปว็ นเครมือขม่ายทพท มืท มคอมพนิวเตอรน์เข ร้าด ร้วยกพัน และสวม่ นทพเท ปว็ นข ร้อมผลทพค เชอ ท อมพนิวเตอรน์แตม่ละ เครมือ ท งเกว็บเอาไว ร้ พร ร้อมกพับมพความสามารถทพช ท วม่ ยให ร้เราค ร้นหาข ร้อมผลทพท พั นี้ อนินเตอรน์เนว็ ตเปว็ นสงนิท ทพป ต ร้องการได ร้ในเวลาอพันสน ท ฏนิวพัตค นิ วามเปว็ นอยผข ม่ อง มนจุษยชาตนิ เปลพย ท นแปลงพฤตนิกรรมมนจุษยน์ ชวม่ ยให ร้คนเรามพอส นิ รเสรพใน การเรพยนรผ ร้และการทดางานมากขศน นี้ พบวม่ามพประชากรโลกกวม่า 650 ล ร้าน คน ใชอนิร้ นเตอรน์เนว็ ตในปพั จจจุบพัน (ค.ศ. 2003) ดพังนพั น นี้ คนไทยยจุคนพค นี้ วร เรพยนรผ ร้การใชอนิร้ นเตอรน์เนว็ ตเพราะเปว็ นสงนิท ทพจ ท ดาเปว็ นอยม่างยนิงท อนินเตอรน์เนว็ ตมพ พั เจนและเปว็ นหนศงท เดพยวกพันทดาให ร้ การเชอ มืท ม มาตรฐานการรพับสงม่ ข ร้อมผลทพช ท ด ตม่อคอมพนิวเตอรน์คนละประเภทเปว็ นไปได ร้อยม่างงม่ายดาย ไมม่วาม่ จะเปว็ น พพซ พ แมคอนินทอช หรมือ เครมือ ท งประเภทใด ๆ กว็ตาม โดยทพัทวไปแล ร้ว คอมพนิวเตอรน์ทป พท ระกอบกพันเข ร้าเปว็ นเครมือขม่ายหลพักของอนินเตอรน์เนว็ ตมพักจะ เปว็ นระบบเครมือขม่ายของมนินค นิ อมพนิวเตอรน์หรมือระบบเครมือขม่ายท ร้องถนิน ท (Local Area Network หรมือ LAN) และเครมือขม่ายเมนเฟรม
คอมพนิวเตอรน์บางคนจศงเรพยกอนินเตอรน์เนว็ ตวม่าเปว็ น “เครมือขม่ายของ คอมพนิวเตอรน์” สวม่ นคอมพนิวเตอรน์สวม่ นบจุคคลมพักจะไมม่ได ร้ตม่ออยผก ม่ บ พั มืท มตม่อเมมือ ร้ อนินเตอรน์เนว็ ตตลอดเวลา แตม่จะเชอ ท ต ร้องการใชงานเทม่ านพั น นี้ 2.3 ทฤษฎทหล จักการออกแบบเวว็ บไซตต มืท ทพไท ด ร้รพับความนนิยมอยม่ามากบนอนินเตอรน์เนว็ ต ซงศท เวว็บไซตน์เปว็ นสอ มืท ทพอ ร้ เวว็บไซตน์เปว็ นสอ ท ยผใม่ นความควบคจุมของผผ ร้ใชโดยสมบผ รณน์ กลม่าวคมือ ผผ ร้ใช ร้ นิ ใจเลมือกได ร้วม่าจะดผเวว็บไซตน์ใดและจะไมม่เลมือกดผเวว็บไซตน์ใด สามารถตพัดสน ร้ มค ได ร้ตามต ร้องการ จศงทดาให ร้ผผ ร้ใชไมม่ พ วามอดทนตม่ออจุปสรรคและปพั ญหาทพท ร้ นวม่าเวว็บทพก เกนิดจากการออกแบบเวว็บไซตน์ผด นิ พลาดถ ร้าผผ ร้ใชเหว็ ท ดาลพังดผอยผน ม่ พั น นี้ ร้ ไมม่มป พ ระโยชนน์ตอ ม่ ตพัวเขา หรมือไมม่เข ร้าใจวม่าเวว็บไซตน์นจ พนี้ ะใชงานอยม่ างไร เขา กว็สามารถทพจ ท ะเปลพย ท นไปดผเวว็บไซตน์อน มืท ๆ ได ร้อยม่างรวดเรว็ว เนมือ ท งจากใน ปพั จจจุบพันมพเวว็บไซตน์อยผม ม่ ากมาย และยพังมพเวว็บไซดน์ทเพท กนิดขศน นี้ ใหมม่ ๆ ทจุกวพัน ผผ ร้ ใชจศร้ งมพทางเลมือกมากขศน นี้ และสามารถเปรพยบเทพยบคจุณภาพของเวว็บไซดน์ ตม่าง ๆ ได ร้เอง ร้ เวว็บไซดน์ทไพท ด ร้รพับการออกแบบอยม่างสวยงาม มพการใชงานทพ ส ท ะดวก ยม่อม พั สนวจุน ได ร้รพับความสนใจจากผผ ร้ใช ร้ มากกวม่าเวว็บไซดน์ทด พท ส ผ บ ม่ วาย มพข ร้อมผล ร้ มากมายแตม่หาอะไรไมม่เจอ นอกจากนพย นี้ พังใชเวลาในการแสดงผลแตม่ ละ หน ร้านานเกนินไป ซงศท ปพั ญหาเหลม่านพล นี้ ร้วนเปว็ นผลมาจากการออกแบบเวว็บ นินี้ ไซดน์ไมม่ดท พ พังนี้ สน ดพังนพั น นี้ การออกแบบเวว็บไซดน์จงศ เปว็ นกระบวนการสดาคพัญในการสร ร้างเวว็บ ไซดน์ ให ร้ประทพับใจผผ ร้ใช ร้ ทดาให ร้เขาอยากกลพับเข ร้ามาเวว็บไซดน์เดนิมอพกใน อนาคต ซงศท นอกจากต ร้องพพัฒนาเวว็บไซดน์ทด พท ม พ ป พ ระโยชนน์แล ร้ว ยพังต ร้อง คดานศงถศงการแขม่งขพันกพับเวว็บไซดน์อน มืท ๆ อพกด ร้วย
2.3.1 องคตประกอบของการออกแบบเวว็ บไซตต นิ ธนิภาพนพั น การออกแบบเวว็บไซตน์ทม พท ป พ ระสท นี้ ต ร้องคดานศงถศง องคน์ประกอบ สดาคพัญดพังตม่อไปนพนี้ 2.3.1.1 ความเรพยบงม่าย (Simplicity) หมายถศง การจดากพัดองคน์ประกอบเสรนิมให ร้เหลมือเฉพาะองคน์ประกอบ มืท สารเนมือ หลพัก กลม่าวคมือในการสอ นี้ หากพับผผ ร้ใชนพัร้ น นี้ เราต ร้องเลมือกเสนอสงนิท ทพท พ น พั ตพัวอพักษรและ เราต ร้องการนด าเสนอจรนิง ๆ ออกมาในสวม่ นของกราฟนิ ก สส ภาพเคลมือ ท นไหว ต ร้องเลมือกให ร้พอเหมาะ ถ ร้าหากมพมากเกนินไปจะรบกวน สายตาและสร ร้างความคดาราญตม่อผผ ร้ใชตพัร้ วอยม่างเวว็บไซตน์ทไพท ด ร้รพับการ
ม่ Apple ออกแบบทพด ท พ ได ร้แกม่ เวว็บไซตน์ของบรนิษพัทใหญม่ ๆ อยม่างเชน Adobe Microsoft หรมือ Kokia ทพม ท ก พ ารออกแบบเวว็บไซตน์ในรผปแบบทพท พั ซอน ร้ และใชงานอยม่ ร้ เรพยบงม่าย ไมม่ซบ างสะดวก 2.3.1.2 ความสมดทาเสมอ ( Consistency) หมายถศง การสร ร้างความสมดทาเสมอให ร้เกนิดขศน นี้ ตลอดทพังนี้ เวว็บไซตน์ โดย อาจเลมือกใชรผร้ ปแบบเดพยวกพันตลอดทพังนี้ เวว็บไซตน์กว็ได ร้ เพราะถ ร้าหากวม่า แตม่ละหน ร้าในเวว็บไซตน์นพัน นี้ มพความแตกตม่างกพันมากจนเกนินไป อาจทดาให ร้ผผ ร้ ร้ ดความสบ พั สนและไมม่แนม่ใจวม่ากดาลพังอยผใม่ นเวว็บไซตน์เดนิมหรมือไมม่ เพราะ ใชเกนิ ฉะนพั น นี้ การออกแบบเวว็บไซตน์ในแตม่ละหน ร้าควรทพจ ท ะมพรป ผ แบบ สไตลน์ของ พัท (Navigation) และโทนสท พ ม กราฟนิ ก ระบบเนวนิเกชน พท ค พ วามคล ร้ายคลศง กพันตลอดทพังนี้ เวว็บไซตน์ 2.3.1.1 ความเปว็ นเอกลพักษณน์ (Identity) ในการออกแบบเวว็บไซตน์ต ร้องคดานศงถศงลพักษณะขององคน์กรเปว็ นหลพัก เนมือ ท งจากเวว็บไซตน์จะสะท ร้อนถศงเอกลพักษณน์และลพักษณะขององคน์กร การ เลมือกใชตพัร้ วอพักษร ชจุดส พ รผปภาพหรมือกราฟนิ ก จะมพผลตม่อรผปแบบของ ม่ ถ ร้าเราต ร้องออกแบบเวว็บไซตน์ของ เวว็บไซตน์เปว็ นอยม่างมาก ตพัวอยม่างเชน พ น พั และกราฟนิ กมากมาย อาจทดาให ร้ผผ ร้ใชคนิร้ ดวม่า ธนาคารแตม่เรากลพับเลมือกสส มืท ถมือขององคน์กรได ร้ เปว็ นเวว็บไซตน์ของสวนสนจุกซงศท สงม่ ผลตม่อความเชอ 2.3.1.4 เนมือ นี้ หา (Useful Content) ถมือเปว็ นสงนิท สดาคพัญทพส ท ด จุ ในเวว็บไซตน์ เนมือ นี้ หาในเวว็บไซตน์ต ร้องสมบผรณน์และ ได ร้รพับการปรพับปรจุงพพัฒนาให ร้ทพันสมพัยอยผเม่ สมอ ผผ ร้พพัฒนาต ร้องเตรพยมข ร้อมผล และเนมือ นี้ หาทพผ ท ผ ร้ใชตร้ ร้องการให ร้ถผกต ร้องและสมบผรณน์ เนมือ นี้ หาทพส ท ดาคพัญทพส ท ด จุ คมือ เนมือ นี้ หาทพท ท ม พ ผผ ร้พพัฒนาสร ร้างสรรคน์ขน ศนี้ มาเอง และไมม่ไปซดนี้ากพับเวว็บอมืน ท เพราะ ร้ ร้เข ร้ามาเวว็บไซตน์ได ร้เสมอ แตม่ถ ร้าเปว็ นเวว็บทพล จะถมือเปว็ นสงนิท ทพด ท งศ ดผดผผ ร้ใชให ท งนิ คน์ ร้ ข ร้อมผลจากเวว็บอมืน ท ๆ มาเมมือ ท ใดกว็ตามทพผ ท ผ ร้ใชทราบวม่ า ข ร้อมผลนพั น นี้ มาจากเวว็บ ร้ ใด ผผ ร้ใชกว็ร้ ไมม่จดาเปว็ นต ร้องกลพับมาใชงานลนิ งคน์เหลม่านพั น นี้ อพก พัท (User-Friendly Navigation) 2.3.1.5 ระบบเนวนิเกชน เปว็ นสวม่ นประกอบทพม ท ค พ วามสดาคพัญตม่อเวว็บไซตน์มาก เพราะจะชวม่ ยไมม่ให ร้ ร้ ดความสบ พั สนระหวม่างดผเวว็บไซตน์ ระบบเนวนิเกชน พัท จศงเปรพยบเสมมือน ผผ ร้ใชเกนิ พัท จศงควรให ร้เข ร้าใจงม่าย ใชงาน ร้ ปร้ ายบอกทาง ดพังนพั น นี้ การออกแบบเนวนิเกชน ร้ มืท ความหมาย ตดาแหนม่งของการวาง ได ร้สะดวก ถ ร้ามพการใชกราฟนิ กกว็ควรสอ พัท กว็ควรวางให ร้สมดทาเสมอ เชน ม่ อยผต เนวนิเกชน ม่ ดาแหนม่งบนสจุดของทจุกหน ร้า พัท ทพเท ปว็ นกราฟนิ กกว็ควรเพนิม เปว็ นต ร้น ซงศท ถ ร้าจะให ร้ดพเมมือ ท มพเนวนิเกชน ท ระบบเนวนิเกช พัท นทพเท ปว็ นตพัวอพักษรไว ร้สวม่ นลม่างด ร้วย เพมือ ท ชวม่ ยอดานวยความสะดวกให ร้กพับผผ ร้ใช ร้ ทพย ท กเลนิกการแสดงผลภาพกราฟนิ กบนเวว็บเบราเซอรน์
2.3.1.6 คจุณภาพของสงนิท ทพป ท รากฏให ร้เหว็นในเวว็บไซตน์ (Visual Appeal) ลพักษณะทพน ท ม่าสนใจของเวว็บไซตน์นพัน นี้ ขศน นี้ อยผก ม่ บ พั ความชอบสวม่ นบจุคคล เปว็ นสดาคพัญ แตม่โดยรวมแล ร้วกว็สามารถสรจุปได ร้วม่าเวว็บไซตน์ทน พท ม่าสนใจนพั น นี้ ม่ กราฟนิ กควรสมบผรณน์ไมม่มรพ อยหรมือ สวม่ นประกอบตม่าง ๆ ควรมพคณ จุ ภาพ เชน ร้ ขอบขพัน นี้ บพันได ร้ให ร้เหว็น ชนนิดตพัวอพักษรอม่านงม่ายสบายตา มพการเลมือกใชโทน พ เพท ข ร้ากพันอยม่างสวยงาม เปว็ นต ร้น สท ร้ 2.3.1.7 ความสะดวกของการใชในสภาพตม่ าง ๆ (Compatibility) ร้ การใชงานของเวว็ บไซตน์นพัน นี้ ไมม่ควรมพขอบจดากพัด กลม่าวคมือ ต ร้องสามารถใช ร้ งานได ร้ดพในสภาพแวดล ร้อมทพห ท ลากหลาย ไมม่มก พ ารบพังคพับให ร้ผผ ร้ใชตร้ ร้องตนิด ตพังนี้ โปรแกรมอมืน ท ใดเพนิม ท เตนิม นอกเหนมือจากเวว็บบราวเซอรน์ ควรเปว็ นเวว็บทพท แสดงผลได ร้ดพในทจุกระบบปฏนิบพัตก นิ าร สามารถแสดงผลได ร้ในทจุกความ ร้ การมากและกลจุม ละเอพยดหน ร้าจอ ซงศท หากเปว็ นเวว็บไซตน์ทม พท ผ พ ผ ร้ใชบรนิ ม่ เปร้ า หมายหลากหลายควรให ร้ความสดาคพัญกพับเรมือ ท งนพในี้ ห ร้มาก 2.3.1.8 ความคงทพใท นการออกแบบ (Design Stability) ร้ ศ วม่าเวว็บไซตน์มค มืท ถมือได ร้ ถ ร้าต ร้องการให ร้ผผ ร้ใชงานรผ ร้สก พ ณ จุ ภาพ ถผกต ร้อง และเชอ ควรให ร้ความสดาคพัญกพับการออกแบบเวว็บไซตน์เปว็ นอยม่างมาก ต ร้องออกแบบ วางแผนและเรพยบเรพยงเนมือ นี้ หาอยม่างรอบคอบ ถ ร้าเวว็บทพจ ท พัดทดาขศน นี้ อยม่างลวก ๆ ไมม่มม พ าตรฐานการออกแบบและระบบการจพัดการข ร้อมผล ถ ร้ามพปพัญหามาก ร้ มืท ถมือ ขศน นี้ อาจสงม่ ผลให ร้เกนิดปพั ญหาและทดาให ร้ผผ ร้ใชหมดความเช อ 2.3.1.9 ความคงทพข ท องการทดางาน (Function Stability) ระบบการทดางานตม่าง ๆ ในเวว็บไซตน์ควรมพความถผกต ร้องแนม่นอน ซงศท ต ร้องได ร้ ม่ ลนิงคน์ตาม่ ง รพับการออกแบบสร ร้างสรรคน์และตรวจสอบอยผเม่ สมอ ตพัวอยม่างเชน ๆ ในเวว็บไซตน์ ต ร้องตรวจสอบวม่ายพังสามารถลนิงคน์ข ร้อมผลได ร้ถผกต ร้องหรมือไมม่ เพราะเวว็บไซตน์อน มืท อาจมพการเปลพย ท นแปลงได ร้ตลอดเวลา ปพั ญหาทพเท กนิดจาก ลนิงคน์ กว็คอ มื ลนิงคน์ขาด ซงศท พบได ร้บม่อยเปว็ นปพั ญหาทพส ท ร ร้างความรดาคาญกพับผผ ร้ ร้ นอยม่างมาก ใชเปว็ 2.3.2 การออกแบบเวว็บไซตต ในการออกแบบเวว็บไซตน์นพัน นี้ ประกอบด ร้วยกระบวนการตม่าง ๆ มากมาย ม่ การออกแบบโครงสร ร้าง ลพักษณะหน ร้าตา หรมือการเขพยนโปรแกรม เชน แตม่มห พ ลายคนทพพ ท พัฒนาเวว็บไซตน์ โดยขาดการวางแผนและทดางานไมม่เปว็ น ม่ การลงมมือออกแบบโดยการใชโปรแกรมช ร้ ระบบ ตพัวอยม่างเชน วม่ ยสร ร้าง เวว็บ เนมือ นี้ หาและรผปแบบกว็เปว็ นไปตามทพน ท ก ศ ขศน นี้ ได ร้ขณะนพั น นี้ และเมมือ ท เหว็นวม่าดผ
ดพแล ร้วกว็เปนิ ดตพัวเลย ทดาให ร้เวว็บนพั น นี้ มพเปร้ าหมายและแนวทางทพไท มม่แนม่นอน พท งกพับความล ร้มเหลวคม่อนข ร้างมาก ผลลพัพธน์ทไพท ด ร้จศงเสย ความล ร้มเหลวทพพ ท บเหว็นได ร้ทพัทวไป ได ร้แกม่ เวว็บทพแ ท สดงข ร้อความวม่าอยผม่ ระหวม่างการกม่อสร ร้าง (Under Construction หรมือ Coming soon) ซงศท แสดงให ร้เหว็นถศงการขาดการวางแผนทพด ท บ พ างเวว็บถมือได ร้วม่าตายไปแล ร้ว เนมือ ท งจากข ร้อมผลไมม่ทพันสมพัย ขาดการพพัฒนาปรพับปรจุงเทคโนโลยพล ร้าสมพัย ลนิงคน์ผด นิ พลาด สงนิท เหลม่านพแ นี้ สดงให ร้เหว็นถศงการขาดการดผแล ตรวจสอบและ พพัฒนาให ร้ทพันสมพัยอยผเม่ สมอ การออกแบบเวว็บไซตน์อยม่างถผกต ร้องจะชวม่ ยลดความผนิดพลาดเหลม่านพนี้ และ พท งทพจ ชวม่ ยลดความเสย ท ะทดาให ร้เวว็บประสบความล ร้มเหลว การออกแบบ พั การออกแบบและจพัดระบบข ร้อมผลอยม่างเหมาะสม เวว็บไซตน์ทด พท ต พ ร้องอาศย กระบวนการแรกของการออกแบบเวว็บไซตน์คอ มื การกดาหนดเปร้ าหมายของ เวว็บไซตน์กดาหนดกลจุม ม่ ผผ ร้ใช ร้ ซงศท การจะให ร้ได ร้มาซงศท ข ร้อมผล ผผ ร้พพัฒนาต ร้องเรพยน รผ ร้ผผ ร้ใช ร้ หรมือจดาลองสถานการณน์ สงนิท เหลม่านพจ นี้ ะชวม่ ยให ร้เราสามารถออกแบบ ร้ เนมือ นี้ หาและการใชงานเวว็ บไซตน์ได ร้อยม่างเหมาะสม ตรงกพับความต ร้องการ ร้ างแท ร้จรนิง ของผผ ร้ใชอยม่ 2.3.3 รรูปแบบการออกแบบเวว็ บไซตต เวว็บไซตน์ในปพั จจจุบพันจะมพการออกแบบทพแ ท ตกตม่างกพันไมม่มากนพั ก ซงศท การ ออกแบบหน ร้าตาเวว็บไซตน์สวม่ นใหญม่จะมองดผองคน์ประกอบขององคน์กร หนม่วยงาน หรมือเนมือ นี้ หาเรมือ ท งทพน ท ด าเสนอเปว็ นหลพัก ซงศท การออกแบบหน ร้าของ เวว็บไซตน์มอ พ ยผม่ 3 แบบ คมือ 2.3.3.1 การออกแบบเวว็บไซตน์ทเพท น ร้นการนด าเสนอเนมือ นี้ หา เปว็ นการออกแบบเวว็บไซตน์ทเพท น ร้นการนด าเสนอเนมือ นี้ หามากกวม่ารผปภาพ โดยโครงสร ร้างใชรผร้ ปแบบตารางเปว็ นหลพัก มพการออกแบบหน ร้าตารผปแบบ ม่ มพเมนผสารบพัญ และเนมือ งม่าย เชน นี้ หา 2.3.3.2 การออกแบบเวว็บไซตน์ทเพท น ร้นภาพกราฟนิ ก เปว็ นการออกแบบเวว็บไซตน์ทเพท น ร้นภาพกราฟนิ กทพส ท วยงาม ซงศท อาจจะใช ร้ โปรแกรม Photoshop สดาหรพับการตกแตม่งภาพ ข ร้อดพ สวยงาม นม่าสนใจ พ อาจจะใชเวลาในการโหลดเวว็ ร้ ข ร้อเสย บนาน 2.3.3.3 การออกแบบเวว็บไซตน์ทม พท ท พ พังนี้ ภาพและเนมือ นี้ หา เปว็ นการออกแบบเวว็บทพน ท ย นิ มในปพั จจจุบพันซงศท ประกอบด ร้วยข ร้อความ รผปภาพ โดยมพการจพัดองคน์ประกอบตม่าง ๆ เพมือ ท ให ร้เวว็บนม่าสนใจ 2.4 ทฤษฎทการจ จัดการระบบฐานขข้อมรูล
Database หรมือ ฐานข ร้อมผล คมือ กลจุม ม่ ของข ร้อมผลทพถ ท ก ผ เกว็บรวบรวมไว ร้ พั พพันธน์ซงศท กพันและกพัน โดยไมม่ได ร้บพังคพับวม่าข ร้อมผลทพังนี้ หมดนพจ โดยมพความสม นี้ ะ ต ร้องเกว็บไว ร้ในแฟร้ มข ร้อมผลเดพยวกพันหรมือแยกเกว็บหลาย ๆ แฟร้ มข ร้อมผล ระบบฐานข ร้อมผล (Database System) คมือ ระบบทพรท วบรวมข ร้อมผล พั พพันธน์ระหวม่าง ตม่าง ๆ ทพเท กพย ท วข ร้องกพันเข ร้าไว ร้ด ร้วยกพันอยม่างมพระบบมพความสม พั เจน ในระบบฐานข ร้อมผลจะประกอบด ร้วยแฟร้ มข ร้อมผล ข ร้อมผลตม่าง ๆ ทพช ท ด พั พพันธน์กน หลายแฟร้ มทพม ท ข พ ร้อมผล เกพย ท วข ร้องสม พั เข ร้าไว ร้ด ร้วยกพันอยม่างเปว็ นระบบ ร้ ร้ และเปนิ ดโอกาสให ร้ผผ ร้ใชสามารถใช งานและดผ แลรพักษาปร้ องกพันข ร้อมผลเหลม่า นิ ธนิภาพ โดยมพซอฟตน์แวรน์ทเพท ปรพยบเสมมือนสอ มืท กลาง นพนี้ ได ร้อยม่างมพประสท ร้ ร้ ระหวม่าง ผผ ร้ใชและโปรแกรมตม่ าง ๆ ทพเท กพย ท วข ร้องกพับการใชฐานข ร้อมผล เรพยก วม่า ระบบจพัดการฐานข ร้อมผล หรมือ DBMS (data base ร้ ร้าถศงข ร้อมผลได ร้งม่าย management system)มพหน ร้าทพช ท วม่ ยให ร้ผผ ร้ใชเข นิ ธนิภาพ การเข ร้าถศงข ร้อมผลของผผ ร้ใชอาจเปว็ ร้ สะดวกและมพประสท นการสร ร้าง ฐานข ร้อมผล การแก ร้ไขฐานข ร้อมผล หรมือการตพังนี้ คดาถามเพมือ ท ให ร้ได ร้ข ร้อมผลมา ร้ จดาเปว็ นต ร้องรพับรผ ร้เกพย โดยผผ ร้ใชไมม่ ท วกพับรายละเอพยดภายในโครงสร ร้างของ ฐานข ร้อมผล
2.5 ทฤษฎทโปรกรม Xampp Xampp คมือโปรแกรมสดาหรพับจดาลองเครมือ ท งคอมพนิวเตอรน์ของเรา ให ร้ ทดางานในลพักษณะของ WebServer นพัท นคมือเครมือ ท งคอมพนิวเตอรน์ของเรา จะสามารถเปนิ ดตพัวเองให ร้เปว็ น internet ในการเปนิ ดเวว็บไซตน์ทถ พท ก ผ จพัดทดา มืท มตม่อกพับ Internet ขศน นี้ มาในเครมือ ท งคอมพนิวเตอรน์นพนี้ โดยทพเท ราไมม่ต ร้องเชอ ภายนอก เรากว็สามารถทดสอบเวว็บไซตน์ทเพท ราสร ร้างขศน นี้ ได ร้ ซงศท ปพั จจจุบพันได ร้ รพับความนนิยมจากผผ ร้ใช ร้ CMS ในการสร ร้างเวว็บไซตน์ XAMPP ประภอบด ร้วย Apache, PHP, MySQL, PHP MyAdmin, Perl ซงศท เปว็ นโปรแกรมพมืน นี้ ฐานทพรท องรพับการทดางาน การทดา เวว็บไซตน์ไมม่วาม่ จะในรผปแบบ ทพเท ปว็ น HTML ธรรมดา หรมือแบบทพเท ปว็ น Database รวมถศงการเลมือกใช ร้ CMS (Content Management System) เปว็ นระบบทพน ท ด ามาชวม่ ยในการสร ร้างและบรนิหารเวว็บไซตน์แบบ สดาเรว็จรผป ซงศท เปว็ นชจุดโปรแกรม สดาหรพับออกแบบเวว็บไซตน์ทไพท ด ร้รพับความ ม่ Joomla , Wordpress เปว็ นต ร้น นนิยม เชน
ร้ การเรพยกใชงาน XAMPP ร้ XAMPP เปว็ นโปรแกรมทพเท ราต ร้องเรพยกใชงาน (ในคม่าเบมือ นี้ งต ร้น ร้ ร้ นพ)นี้ ซงศท จะมพ Control Panel ในการเรพยกใชงาน หลพังจากเปนิ ดใชงานแล ร้ว คอมพนิวเตอรน์ของเราถศงจะสามารถเรพยกหน ร้าเวว็บไซตน์ทเพท ราสร ร้างขศน นี้ ผม่าน URL ทพข ท น ศนี้ ต ร้นด ร้วย localhost หรมือ ทพเท ปว็ น IP กว็คอ มื 127.0.0.1 (ปกตนิ ม่ นนิยมเรพยกด ร้วย localhost เปว็ นหลพัก) เชน 1. http://localhost มืท localhost เปว็ นการเรพยก URL ผม่านชอ 2. http://127.0.0.1 เปว็ นการเรพยก URL ผม่าน IP เครมือ ท ง คอมพนิวเตอรน์ 127.0.0.1 2.6 ทฤษฎทการใช ข้ Adobe Photoshop CS6 โปรแกรม Adobe Photoshop CS6 คมือ โปรแกรมทพส ท ามารถสร ร้าง ออกแบบกราฟฟนิ คแก ร้ไข ภาพเคลมือ ท นไหวรวมทพังนี้ การออกแบบหน ร้าเวว็บเพจซงศท โปรแกรม Adobe ว็ ปซเพ อส 6 มพ โฟโต ร้ชอ นินี้ งานประเภทตม่างๆได ร้แกม่ประเภทสงนิท เครมือ ท งมมือเพมือ ท สนพับสนจุนการสร ร้างชน พนิมพน์งานนด าเสนอตลอดจน การออกแบบเวว็บเพจดพังนพั น นี้ โปรแกรม Adobe Photoshop CS6 จศง เปว็ นโปรแกรมทพม ท ค พ วามนนิยมสผง นินี้ งานด ร้านกราฟฟนิ กการแก ร้ไขภาพและการ และเหมาะสมกพับการสร ร้างชน ออกแบบประเภทตม่างๆ พ ฐานของ Adobe Photoshop 2.6.1 ความสามารถพพน 2.6.1.1 ตกแตม่งหรมือแก ร้ไขรผปภาพ 2.6.1.2 ตพัดตม่อภาพบางสวม่ น หรมือทพเท รพยกวม่า crop ภาพ
พ องภาพ จากสห พ นศงท เปว็ นอพกสห พ นศงท ได ร้ 2.6.1.3 เปลพย ท นแปลงสข 2.6.1.4 สามารถลากเสนร้ แบบฟรพสไตลน์ หรมือใสรม่ ป ผ ภาพ สเพท หลพย ท ม วงกลม หรมือสร ร้างภาพได ร้อยม่างอนิสระ พั นี้ ของภาพเปว็ น Layer สามารถเคลมือ 2.6.1.5 มพการแบม่งชน ท นย ร้ายภาพ ได ร้เปว็ นอนิสระตม่อกพัน 2.6.1.6 การทดา cloning ภาพ หรมือการทดาภาพซดนี้าในรผปภาพเดพยวกพัน 2.6.1.7 เพนิม ท เตนิมข ร้อความ ใส ม่ effect ของข ร้อความได ร้ 2.6.1.8 Brush หรมือ แปรงทาส พ ทพส ท ามารถเลมือกรผปแบบสดาเรว็จรผปใน การสร ร้างภาพได ร้และอมืน ท ๆ อพกมากมา โปรแกรม Adobe Photoshop CS6 เมมือ ท ทดาการเปนิ ดโปรแกรมแล ร้ว จะ พบ หน ร้าตาของ โปรแกรม ดพัง รผป
2.6.2 สวม่ นสดาคพัญหลพัก ของ Adobe Photoshop CS6 เมนผของโปรแกรม Application menu หรมือ Menu bar ประกอบ ด ร้วย 2.6.2.1 File หมายถศง รวมคดาสงพัท ทพใท ชจพัร้ ดการกพับไฟลน์ ม่ สร ร้างไฟลน์ใหมม่, เปนิ ด, ปนิ ด, บพันทศกไฟลน์, นด าเข ร้าไฟลน์, สงม่ รผปภาพ เชน ออกไฟลน์ และอมืน ท ๆ ทพเท กพย ท วกพับไฟลน์ 2.6.2.2. Edit หมายถศง รวมคดาสงพัท ทพใท ชสร้ ดาหรพับแก ร้ไขภาพ และปรพับ ม่ กก๊อปปพนี้ ,วาง,ยกเลนิกคดา แตม่งการทดางานของโปรแกรมเบมือ นี้ งต ร้น เชน สงพัท ,แก ร้ไขเครมือ ท งมมือ และอมืน ท ๆ ร้ บแตม่งภาพ เชน ม่ ส,พ แสง, 2.6.2.3 Image หมายถศง รวมคดาสงพัท ทพใท ชปรพั ขนาดของภาพ (image size), ขนาดของเอกสาร (canvas), โหมด พ องภาพ, หมจุนภาพ และอมืน สข ท ๆ
2.6.2.4 Layer หมายถศง รวมคดาสงพัท ทพใท ชจพัร้ ดการกพับเลเยอรน์ ทพังนี้ การ สร ร้างเลเยอรน์, แปลงเลเยอรน์ และการจพัดการกพับเลเยอรน์ในด ร้านตม่าง ๆ 2.6.2.5 select รวม คดาสงพัท เกพย ท วกพับการเลมือกวพัตถจุหรมือพมืน นี้ ทพบ ท นรผปภาพ ร้ ม่ เลมือกเพมือ (Selection) เพมือ ท นด าไปใชงานรม่ วมกพับคดาสงพัท อมืน ท ๆ เชน ท เปลพย ท น ร้ ส,พ ลบ หรมือใชเอฟเฟว็ กตน์ตาม่ ง ๆ กพับรผปภาพ 2.6.2.6 Filter เปว็ นคดาสงพัท การเลม่น Effects ตม่างๆสดาหรพับรผปภาพและ วพัตถจุ 2.6.2.7 View เปว็ นคดาสงพัท เกพย ท วกพับมจุมมองของภาพและวพัตถจุในลพักษณะ ม่ การขยายภาพและยม่อภาพให ร้ดผเลว็ก ตม่างๆ เชน 2.6.2.8 Window เปว็ นสวม่ นคดาสงพัท ในการเลมือกใชอจุร้ ปกรณน์เสรนิมตม่างๆทพท ร้ ร้าง Effects ตม่างๆ จดาเปว็ นในการใชสร ร้ 2.6.2.9 Help เปว็ นคดาสงพัท เพมือ ท แนะนด าเกพย ท วกพับการใชโปรแกรมฯและจะ มพลายละเอพยดของโปรแกรมอยผใม่ นนพั น นี้ 2.6.3 เมนผของพมืน นี้ ทพท ท ดางาน Panel menu ร้ อกรายละเอพยด หรมือคดา Panel (พาเนล) เปว็ นวนินโดวน์ยอ ม่ ย ๆ ทพใท ชเลมื สงพัท ควบคจุมการทดางานตม่าง ๆ ของโปรแกรม ใน Photoshop มพพาเนล ม่ พาเนล Color ใชสร้ ดาหรพับเลมือกส,พ พาเนล อยผเม่ ปว็ นจดานวนมาก เชน ร้ พ รง Layers ใชสร้ ดาหรพับจพัดการกพับเลเยอรน์ และพาเนล Info ใชแสดงคม่ าสต ตดาแหนม่งทพช ท เพนี้ มาส น์ รวมถศงขนาด/ตดาแหนม่งของพมืน นี้ ทพท ท เพท ลมือกไว ร้ 2.6.4 พมืน นี้ ทพท ท ดางาน Stage หรมือ Panel เปว็ นพมืน นี้ ทพวท าม่ งสดาหรพับแสดงงานทพก ท ดาลพังทดาอยผม่ ร้ 2.6.5 เครมือ ท งมมือทพใท ชงาน Tools panel หรมือ Tools box Tool Panel (ทผลพาเนล) หรมือ กลม่องเครมือ ท งมมือ จะประกอบไป ร้ ด ร้วยเครมือ ท งมมือตม่าง ๆ ทพใท ชในการวาด ตกแตม่ง และแก ร้ไขภาพ เครมือ ท งมมือ เหลม่านพม นี้ จ พ ดานวนมาก ดพังนพั น นี้ จศงมพการรวมเครมือ ท งมมือทพท ท ดาหน ร้าทพค ท ล ร้าย ๆ กพัน ไว ร้ในปจุม่ มเดพยวกพัน โดยจะมพลพักษณะรผปสามเหลพย ท มอยผบ ม่ รนิเวณมจุมด ร้านลม่าง ดพังภาพ 2 เพมือ ท บอกให ร้รผ ร้วม่าในปจุม่ มนพย นี้ พังมพเครมือ ท งมมืออมืน ท อยผด ม่ ร้วย ร้ 2.6.6 สงนิท ทพค ท วบคจุมเครมือ ท งมมือทพใท ชงาน Tools control menu หรมือ Option bar พัท บารน์) เปว็ นสวม่ นทพใท ชปรพั ร้ บแตม่งคม่าการทดางาน Option Bar (ออปชน พัท บารน์จะเปลพย ของเครมือ ท งมมือตม่าง ๆ โดยรายละเอพยดในออปชน ท นไปตาม ม่ เมมือ เครมือ ท งมมือทพเท ราเลมือกจากทผลบว็อกซใน์ นขณะนพั น นี้ เชน ท เราเลมือกเครมือ ท งมมือ พัท บารน์จะปรากฏออปชน พัท ทพใท ชในการกด ร้ Brush (พผก ม่ น พั ) บนออปชน าหนด ขนาด และลพักษณะหพัวแปรง, โหมดในการระบายความโปรม่งใสของส พ และอพัตราการไหลของส พ เปว็ นต ร้น
2.6.7 เครมือ ท งมมือพมืน นี้ ฐานของโปรแกรม Tools
Tool Panel (ทผลพาเนล) หรมือ กลม่องเครมือ ท งมมือ จะประกอบไปด ร้วย ร้ เครมือ ท งมมือตม่าง ๆ ทพใท ชในการวาด ตกแตม่ง และแก ร้ไขภาพ เครมือ ท งมมือเหลม่า นพม นี้ จ พ ดานวนมาก ดพังนพั น นี้ จศงมพการรวมเครมือ ท งมมือทพท ท ดาหน ร้าทพค ท ล ร้าย ๆ กพันไว ร้ใน ปจุม่ มเดพยวกพัน โดยจะมพลพักษณะรผปสามเหลพย ท มอยผบ ม่ รนิเวณมจุมด ร้านลม่างดพังภาพ 2 เพมือ ท บอกให ร้รผ ร้วม่าในปจุม่ มนพย นี้ พังมพเครมือ ท งมมืออมืน ท อยผด ม่ ร้วย 2.6.8 ทดาการแบม่งกลจุม ม่ เครมือ ท งมมือได ร้ดพังภาพตม่อไปนพนี้
2.6.9 นินี้ มพ แตม่ละชน
เครมือ ท งมมือ คจุณสมบพัตด นิ งพั นพนี้
2.6.9.1 Move ใชสร้ ดาหรพับเลมือกพมืน นี้ ทพบ ท นภาพเปว็ นรผปสเพท หลพย ท ม วงกลม วงรพ หรมือเลมือกเปว็ นแถวคอลพัมนน์ ขนาด 1 พนิเซล
2.6.9.2 Marquee ใชสร้ ดาหรพับย ร้ายพมืน นี้ ทพท ท เพท ลมือกไว ร้ของภาพ หรมือย ร้าย ร้ ภาพในเลเยอรน์หรมือย ร้ายเสนไกดน์
ร้ อกพมืน 2.6.9.3 Lasso ใชเลมื นี้ ทพบ ท นภาพเปว็ นแนวเขตแบบอนิสระ
ร้ อกพมืน 2.6.9.4 Magic Wand ใชเลมื นี้ ทพด ท ร้วยวนิธรพ ะบายบนภาพ หรมือ พ ใพท กล ร้เคพยงกพัน เลมือกจากสท
2.6.9.5 Crop ใชตพัร้ ดขอบภาพ
2.6.9.6 Slice ใชตพัร้ ดแบม่งภาพเพมือ ท บพันทศกไฟลน์ ภาพยม่อย ๆ ทพเท รพยกวม่าสไลซ น์ (Slice) สดาหรพับนด าไปสร ร้างเวว็บเพจ
2.6.9.7 บนภาพ
ร้ อกสจ พ ากสต พ าม่ ง ๆ Eyedropper ใชเลมื
ร้ 2.6.9.8 Healing Brush ใชตกแตม่ งลบรอยตดาหนนิในภาพ
ร้ 2.6.9.9 Brush ใชระบายลงบนภาพ
ร้ าสดาเนาภาพ โดยกก๊อปปพนี้ ภาพจาก 2.6.9.10 Clone Stamp ใชทด บรนิเวณอมืน ท มาระบาย หรมือระบายด ร้วยลวดลาย
ร้ 2.6.9.11 History Brush ใชระบายภาพด ร้วยภาพของขพัน นี้ ตอนเดนิมทพท ผม่านมา หรมือภาพของสถานะเดนิมทพบ ท พันทศกไว ร้
ร้ 2.6.9.12 Eraser ใชลบภาพบางส วม่ นทพไท มม่ต ร้องการ
ร้ มสแ พ บบไลม่ระดพับโทนสห พ รมือความทศบ 2.6.9.13 Gradient ใชเตนิ
ร้ 2.6.9.14 Blur ใชระบายภาพให ร้เบลอ
ร้ 2.6.9.15 Bern ใชระบายเพมื อ ท ให ร้ภาพมมืดลง
ร้ 2.6.9.16 Dodge ใชระบายเพมื อ ท ให ร้ภาพสวม่างขศน นี้
ร้ ร้ 2.6.9.17 Pen ใชวาดเส นพาธ (Path)
ร้ มพน์ตวพั อพักษรหรมือข ร้อความลงบน 2.6.9.18 Horizontal Type ใชพนิ ภาพ
ร้ อกและปรพับแตม่งรผปทรงของเสนพาธ ร้ 2.6.9.19 Path Selection ใชเลมื
ร้ 2.6.9.20 Rectangle ใชวาดรผ ปทรงเรขาคณนิตหรมือรผปทรงสดาเรว็จรผป
ร้ อ 2.6.9.21 Hand ใชเลมื ท นดผสวม่ นตม่าง ๆ ของภาพ
2.6.9.22 Zoom ใชยม่ร้ อหรมือขยายมจุมมองภาพ
2.6.9.23 set Foreground Color, Set Background Color ใช ร้ สดาหรพับกดาหนดส พ - Foreground Color และ Background Color
2.6.9.24 เปนิ ดแสดงหน ร้ากระดาษ แบบ Full screen 2.6.10 ความหมายและความสดาคพัญของเลเยอรน์ Layer นินี้ งานยม่อย หรมือเรพยกให ร้เข ร้าใจงม่ายคมือ ชน พั นี้ ของชน นินี้ เลเยอรน์ Layer ชน งานใหญม่ เปว็ นหลพักการทดางานของโปรแกรม Photoshop นพัท นคมือการนด า พั นี้ ตม่างๆ มาผสมกพันเพมือ ชน ท ปรพับแตม่งให ร้เกนิดความสวยงามมากขศน นี้
Layer ม่ น (Show or Hide Layer) การคลนิกทพรท ป แสดงหรมือซอ ผ ดวงตาแตม่ละ นิพ อ ม่ นสงทพ ม่ ถ ร้า ครพังนี้ จะเปว็ นการเปนิ ดเพมือ ท แสดงหรมือปนิ ดเพมือ ท ซอ ท ยผใม่ นเลเยอรน์ เชน ม่ น เราไมม่ต ร้องการให ร้แสดงภาพของเลเยอรน์ใดกว็ทดาการปนิ ดหรมือซอ 2.6.10.1 คพัดลอก และ ทดาซดนี้าเลเยอรน์ (Copy and Duplicate Layer) นินี้ งานหนศงท ไปยพังอพกชน นินี้ งานหนศงท ทดาได ร้หลายวนิธ พ การคพัดลอเเลเยอรน์จากชน ร้ - คลนิกเลเยอรน์ทต พท ร้องการทดาการคพัดลอก ใชโปรแกรมเมนผ Edit เลมือก นินี้ งานทพเท ราต ร้องการจะให ร้ Copy หรมือกดปจุม่ ม Ctrl C คลนิก Tab ของชน เลเยอรน์นพัน นี้ มาวางไว ร้แล ร้วคลนิก Edit เลมือก Paste หรมือกดปจุม่ ม Ctrl V - คลนิกเลเยอรน์ทต พท ร้องการทดาการคพัดลอก คลนิกขวาทพเท ม ร้าส น์ เลมือก ม่ อ มืท ในชอ ม่ ง Duplicate Layer จะได ร้หน ร้าตม่างตามภาพด ร้านลม่าง ใสช มืท ชน นินี้ งานทพเท ราต ร้องการนด าเลเยอรน์นไ Destination ให ร้เปว็ นชอ พนี้ ปไว ร้ - คลนิกเลเยอรน์ทต พท ร้องการทดาการคพัดลอกค ร้างไว ร้ แล ร้วลากไปยพังอพก Tab นินี้ หนศงท โดยตรง ของอพกชน
นินี้ งานเดพยวกพัน การคพัดลอกเลเยอรน์ในชน ร้ - คลนิกทพเท ลเยอรน์ ใชโปรแกรมเมนผ Layer เลมือก Duplicate ม่ กพัน แตม่ชอ ม่ ง Layer จะมพหน ร้าตม่างเหมมือนภาพทพด ท ร้านบนเชน มืท ชน นินี้ งานอมืน Destination ไมม่ต ร้องกดาหนดชอ ท ร้ - คลนิกทพเท ลเยอรน์ ใชโปรแกรมเมนผ Layer เลมือก new เลมือก Layer via Copy (คพยล น์ พัด Ctrl + J) - คลนิกทพเท ลเยอรน์นพัน นี้ และกดคพย น์ Alt พร ร้อมกพับลากเลเยอรน์ไปยพังตดาแหนม่ง ใน Panel ทพต ท ร้องการวาง ปลม่อยเม ร้าส น์ 2.6.10.2 ย ร้ายตดาแหนม่งเลเยอรน์ (MoveLayer) ขพัน นี้ ตอนการทดาคล ร้ายกพับการคพัดลอก เพพยงเปลพย ท นคดาสงพัท จาก Edit นินี้ งาน แตม่ถ ร้า Copy เปว็ น Edit Cut หรมือ Ctrl X ในกรณพทย พท ร้ายคนละชน นินี้ งานเดพยวกพันเพพยงคลนิกทพเท ลเยอรน์ และทดาการเลมือ ชน ท นไปยพังตดาแหนม่งบน Panel ทพต ท ร้องการเทม่านพัน 2.6.10.3 เพนิม ท เลเยอรน์ (Add Layer) เพพยงแคม่คลนิกไอคอน Create a new Layer ซงศท อยผด ม่ ร้านลม่างของ Layer Panel ตนิดกพับรผปถพัง กว็จะได ร้เลเยอรน์เพนิม ท แล ร้ว หรมือถ ร้าต ร้องการใช ร้ มืท คดาสงพัท จากเมนผโปรแกรม เลมือก Layer เลมือก New เลมือก Layer ตพังนี้ ชอ และ Enter กว็ได ร้เหมมือนกพัน
2.6.10.4
ลบเลเยอรน์ (Delete Layer)
วนิธล พ บเลเยอรน์ทดาโดย คลนิกทพเท ลเยอรน์ทต พท ร้องการลบ กดปจุม่ ม Backspace ร้ หรมือใชโปรแกรมเมนผ Layer เลมือก Delete เลมือก Layer หรมือโดยการ คลนิกทพเท ลเยอรน์แล ร้วลากมาทพรท ป ผ ถพัง 2.6.10.5 การลว็อค และ ปลดลว็อค เลเยอรน์ (Lock and Unlock Layer) การลว็อคเลเยอรน์ ทดาได ร้โดย คลนิกทพเท ลเยอรน์ทต พท ร้องการลว็อค แล ร้วคลนิกทพรท ป ผ กจุญแจสวม่ นการปลดลว็อคกว็เพพยงทดา ซดนี้าขพัน นี้ ตอนเดพยวกพัน
2.6.10.6 การปลดลว็อคเลเยอรน์ Background วนิธป พ ลดลว็อคทดาได ร้โดย ดพับเบนิล นี้ คลนิกทพเท ลเยอรน์ จะมพหน ร้าตม่างดพังภาพขศน นี้ มา มืท เลเยอรน์ใหมม่หรมือไมม่กว็ได ร้ เลเยอรน์นพัน จะตพังนี้ ชอ นี้ กว็จะปลดลว็อคเปว็ นเลเยอรน์ ธรรมดา
มืท 2.6.10.7 ตพังนี้ ชอ เลเยอรน์ (Name Layer) มืท ให ร้กพับเลเยอรน์ทดาโดยดพับเบนิล มืท บนเลเยอรน์นพัน วนิธต พ งพั นี้ ชอ นี้ คลนิกทพช ท อ นี้ และพนิมพน์ มืท เสรว็จแล ร้ว Enter สดาหรพับ Photoshop CS6 เมมือ มืท เลเยอรน์ ชอ ท พนิมพน์ชอ หนศงท เสรว็จแล ร้ว สามารถกด Tab เพมือ ท เลมือ ท นไปยพังเลเยอรน์อน มืท เพมือ ท ทดาการ มืท ได ร้เลย ไมม่ต ร้องมาทดาซดนี้าขพัน พนิมพน์ชอ นี้ ตอนเดนิม ทดาให ร้ประหยพัดเวลาได ร้มาก 2.6.10.8 คลนิปปนินี้ งเลเยอรน์ (Clipping Layer หมายถศงการทดาให ร้เลเยอรน์หนศงท มพผลกพับอพกเลเยอรน์หนศงท เทม่านพั น นี้ ไมม่ ไปกระทบเลเยอรน์อน มืท ซงศท อยผถ ม่ พัดลงไป อม่านแล ร้วคงจะ งง ลองดผภาพด ร้าน ลม่างนะครพับ จากภาพจะเหว็นเลเยอรน์ Wood Gain ซงศท เปว็ นลายไม ร้
ต ร้องการให ร้ลายไม ร้นพม นี้ ผ พ ลกพับกรอบภาพซงศท เปว็ นเลเยอรน์ Frame ทพอ ท ยผถ ม่ พัด ร้ ลงไปด ร้านลม่างเทม่านพั น นี้ ผมจศงใชการ Clipping ซงศท จะเหว็นลผกศรอยผท ม่ ด พท ร้าน ม่ นพนี้ จะทดาให ร้ได ร้กรอบภาพทพม หน ร้านของเลเยอรน์ Wood Gain การทดาเชน ท พ พ ดงเหลมืองในเลเยอรน์Frame ลายไม ร้สวยงามขศน นี้ มาแทนกรอบสแ การทดา Clipping โดยการใชคพร้ ยล น์ พัด ให ร้กดปจุม่ ม Alt แล ร้ววางเม ร้าส น์ ไว ร้ระหวม่างทพังนี้ สองเลเยอรน์ จากนพั น นี้ คลนิก หรมือถ ร้าจะใชคดร้ าสงพัท โปรแกรมเมนผ Layer เลมือก Create Clipping Mask (คพยล น์ พัด Alt + Ctrl + G) ถ ร้าต ร้องการยกเลนิกกว็เพพยงแคม่ทดาซดนี้าวนิธเพ ดนิม โปรแกรมเมนผ Layer เลมือก น์ เพท ดนิมอพก Release Clipping Mask หรมือ กดปจุม่ ม Alt แล ร้วคลนิกเม ร้าสท ครพังนี้
ร้ ร้ 2.6.10.9 การเปนิ ดพมืน นี้ ทพก ท ารใชงาน การนด าภาพเข ร้าใชงาน และการ บพันทศกงาน ร้ การเปนิ ดพมืน นี้ ทพก ท ารใชงานใหมม่ 1. ไปทพท Application menu เลมือก File > New จะปรากฎหน ร้าตม่าง ดพังรผปดม่าน ลม่าง
2. จากรผปมพการกดาหนดคม่าตม่างๆมากมาย
- ชชอง Name คคือการกกาหนดชคืชื่อของชชชนงาน - ชชอง Preset คคือ ชนช ดของงานตชางๆ ททชื่กาก หนดไวว้ใหว้แลว้ว มทใหว้เลคือกมากมาย เชชน Web , Photo ,U.S.paper , international paper - ชชอง size จะสสัมพสันธธ์กบสั ชชอง Preset คคือ ขนาดของงานแตชละชนช ด เชชน คชา Preset เปป็ น International paper ชชอง Size กป็จะมทตวสั เลคือก คคือ A4 , A3 , A2 ,A1 และอคืชื่นๆ - ชชอง width คคือขนาดความกวว้างของชชชนงาน หากตว้องการกกาหนดเอง มทหนชวย ใหว้เลคือก 7 ชนชด - ชชอง Hight คคือขนาดความสสู งของชชชนงาน - ชชอง Resolution คคือ ความละเอทยดของงาน มทหนชวยเปป็ น Pixel ตชอนชชว และ Pixel ตชอเซนตชเมตร - ชชอง Color mode คคือชนช ดของพคืชนททชื่สทในการทกางาน มทใหว้เลคือกหลาก หลาย เชชน RGB , CMYK และมทคชาความละเอทยดใหว้เลคือกเปป็ น bit - ชชอง Background Contents คคือเลคือกชนช ดของ พคืชนหลสังงาน มท 3 แบบ คคือ แบบขาว แบบสท และแบบโปรช งใส เมมือ ท ทดาการกดาหนดขนาดของงานเสรว็จเรพยบร ร้อยแล ร้ว ให ร้คลนิปปจุม่ ม OK เพมือ ท ทดาการเปนิ ดพมืน นี้ ทพก ท ารทดางานดพังตพัวอยม่างภาพ เปนิ ดพมืน นี้ ทพงท านขนาด พ าว A4 พมืน นี้ หลพัง สข
2.6.10.10 การนกาภาพเขว้า ใชว้งาน ร้ หากเรามพภาพทพต ท ร้องการเปนิ ดเข ร้าใชงานในโปรแกรม ในทดาการ ตาม ขพัน นี้ ตอนตม่อไปนพนี้ - ไปททชื่ File > open เลคือก Floder ททชื่มทรสูปททชื่เราตว้องการ เลคือกรสู ปนสัชน แลว้วกด Open
- จะไดว้รสูปมาปรากฎอยสูทช ทชื่ Stage หรคื อพคืชนททชื่การทกางานดสังรสู ป ตามตสัวอยชางดว้าน ลชาง ใชว้รสูปดอกบสัว
2.6.10.11 สมมมุตชวาช ทราย ดสัง ลชาง เสรป็ จเรท ยบรว้อยแลว้ว เราตว้องการบสันททึกการทกางาน ทกาตามขสัชนตอนดสังตชอไปนทช
การบสันททึกงาน เราไดว้แตชงรสู ป พระ ตสัวอยชางภาพดว้าน
1. ไปทพท File > Save as จะปรากฎหน ร้าตม่างดพังรผปด ร้านลม่าง ม่ ง File name คมือให ร้เราตพังนี้ ชอ มืท งาน - ชอ ม่ ง Format คมือ การบพันทศกไฟลน์งานประเภทตม่างๆ เชน ม่ PSD , - ชอ JPEG , TIFF และอมืน ท ๆ
- เมมือ ท เลมือกเสรว็จเรพยบร ร้อยแล ร้ว กด Save กว็จะทดาการบพันทศกสดาเรว็จ
2.6 ทฤษฎทการใช ข้ Adobe Dreamweaver CS6 Dreamweaver เปว็ นโปรแกรมของบรนิษพัท Macromedia Inc. ทพใท ชสร้ ดาหรพับออกแบบ และพพัฒนาเวว็บไซตน์ เวว็บเพจและเวว็บ แอปพลนิ พัท ด ร้วยโปรแกรม Dreamweaver เราสามารถทพจ เคชน ท ะออกแบบและ ร้ อ พพัฒนาเวว็บไซตน์โดยการเขพยนโคก๊ดภาษา HTML หรมือใชเครมื ท งมมือ ทพท โปรแกรม Dreamweaver มพให ร้ ซงศท เครมือ ท งมมือเหลม่านพจ นี้ ะสร ร้างโค ร้ดภาษา HTML ให ร้เราโดยอพัตโนมพัต นิ โดยทพเท ราไมม่จดาเปว็ นต ร้องเขพยนโคก๊ดภาษา HTML เอง ในปพั จจจุบน พั โปรแกรม Dreamweaver นอกจากจะ ร้ ร้ สนพั บสนจุนการใชงานกพั บภาษา HTML และยพังสนพั บสนจุนการใชงานรม่ วมกพับ ม่ CSS และ Java Script เปว็ นต ร้น เทคโนโลยพทางด ร้านเวว็บอมืน ท ๆ ด ร้วย เชน พัท (Web Application) ด ร้วยโปรแกรม การสร ร้างเวว็บแอปพลนิเคชน Dreamweaver นพั น นี้ สามารถทพจ ท ะสร ร้าง การตนิดตม่อกพับฐานข ร้อมผลและดศง ข ร้อมผลจากฐานข ร้อมผลโดยไมม่จดาเปว็ นทพต ท ร้องเขพยนโค ร้ดของเซรนิ ฟ น์ เวอรน์ สครนิปตน์ (Server Script)เลย ตพัวโปรแกรมจะสร ร้างให ร้เองโดยอพัตโนมพัต นิ ร้ พัท นพั น ซงศท จะทดาให ร้เวลาทพใท ชในการพพั ฒนาเวว็บแอปพลนิเคชน นี้ น ร้อยลง การเรวิม ที่ ตข้นในการออกแบบเวว็ บไซตต
พั พพันธน์เอกสารข ร้อมผล โดยเรพยงลดาดพับความสดาคพัญ ของ 1.สร ร้างความสม ร้ มืท ไฟลน์ของเอกสารเวว็บ ให ร้สามารถสอ มืท ข ร้อมผลทพใท ชในการนด าเสนอกดาหนดชอ มืท ไฟลน์เปว็ น ภาษาอพังกฤษเทม่านพั น เข ร้าใจได ร้งม่าย และต ร้องทดาการตพังนี้ ชอ นี้ 2.สร ร้างโฟลเดอรน์เฉพาะ สดาหรพับเอกสารเวว็บแตม่ละชจุด/เรมือ ท ง เพมือ ท ความ มืท โฟลเดอรน์เปว็ นภาษาอพังกฤษเทม่านพั น เปว็ นระเบพยบ และต ร้องทดาการตพังนี้ ชอ นี้ 3.จพัดหาภาพ หรมือสร ร้างภาพทพเท กพย ท วข ร้องกพับเนมือ นี้ หา หลพังจากนพั น นี้ ให ร้นด า ร้ ภาพทพต ท ร้องใชงานทพั งนี้ หมดบพันทศกไว ร้ ในโฟลเดอรน์ทส พท ร ร้างไว ร้กม่อน เพมือ ท ร้ ความสะดวกตม่อการเรพยกใชงาน ร้ 4.สร ร้างเอกสารเวว็บ โดยการลงรหพัส HTML หรมือใชโปรแกรมช วม่ ย หลพัง จากนพั น นี้ ให ร้นด าไฟลน์เอกสาร HTML ทจุกไฟลน์บพันทศกไว ร้ในโฟลเดอรน์ทส พท ร ร้าง ร้ ไว ร้กม่อน เพมือ ท ความสะดวกตม่อการเรพยกใชงาน 5.ตรวจสอบผล เอกสาร HTML ด ร้วยเวว็บเบราเซอรน์ เพมือ ท แก ร้ไขข ร้อผนิด พลาดทพอ ท าจเกนิดขศน นี้ เนมือ ท งจากเวว็บเบราเซอรน์แตม่ละคม่าย แตม่ละรจุน ม่ รผ ร้จพักคดา สงพัท HTML ไมม่เทม่ากพัน การกกาหนดคค่าเรวิม ที่ ตข้น Dreamweaver การดรู Preferences การดผและกดาหนดคม่า Preferences ของ โปรแกรม Macromedia Dreamweaver เปว็ นสงนิท ทพส ท ดาคพัญทพส ท ด จุ ของการสร ร้างเวว็บไซตน์ ด ร้วย โปรแกรมนพนี้ เพราะ Preferences ของโปรแกรมกว็คอ มื การกดาหนดคม่า เบมือ นี้ งต ร้นทพังนี้ หมดของโปรแกรม ถ ร้าเราออกแบบเวว็บโดยไมม่ได ร้กดาหนดคม่า เวว็บกว็จะมพคาม่ ผนิดพลาด เพพย นี้ นจากความเปว็ นจรนิง และไมม่สามารถแก ร้ไขได ร้ ในเหน ร้านพั น นี้ เราต ร้อง set คม่าแล ร้วกว็ออกแบบใหมม่ มาดผวธนิ ก พ ารกดาหนดทพท สดาคพัญดพังนพนี้ การตงกก จัพ าหนดคค่าของเอกสารเรวิม ที่ ตข้น การกดาหนด Font 1. ไปทพเท มนผ Edit >Preferences จะได ร้หน ร้าตม่างการกดาหนดคม่า
2. หลพังจากนพั น นี้ ให ร้เลมือก Front settings เปว็ น Thai แล ร้วในสวม่ น ของ Proportional font และ Code view เปว็ น Tahoma เพมือ ท เปว็ นการกดาหนดคม่า Front เรนิม ท ต ร้น
มืท ไฟลน์ และนามสกจุลของไฟลน์เอกสารเวว็บ การกดาหนดชอ 1. 2. 3. 4.
ควรใชตพัร้ วอพักษร a - z หรมือตพัวเลข 0 - 9 หรมือผสมกพัน ตพัวอพักษร a - z ควรเปว็ นตพัวพนิมพน์เลว็ก มืท ไฟลน์เปว็ นภาษาไทย ห ร้ามตพังนี้ ชอ มืท ไฟลน์แรกของเอกสารเวว็บ มพักจะใชชร้ อ มืท index หรมือ default ชอ
การตพังนี้ คม่าไฟลน์เอกสารเรนิม ท ต ร้น นิ บนสจุด ซายสจุ ร้ ด หากต ร้องการกดาหนดคม่าตดาแหนม่งเรนิม ท ต ร้นชด 1. เลมือก Modify > Page Properties… 2. กดาหนดคม่า Left margin : 0 และ Top margin : 0 ร้ กดาหนดคม่า Title เพมือ ท ใชแสดงใน Title bar บนโปรแกรมเวว็บเบราเซอรน์
1. เลมือก Modify > Page Properties… แล ร้วเลมือกทพท Title/Encoding ม่ ร้อความลงไปใน Title 2. ใสข พ งตข้นในโปรแกรม Dreamweaver การทกางานเบพอ 1. Document Window ร้ อยผด ม่ ร้านลม่างของ Document Toolbar ซงศท เปว็ นสวม่ นทพใท ชแสดง เนมือ นี้ หาของเวว็บเพจทพเท ราสร ร้างขศน นี้ และกดาลพังทดางานอยผใม่ นขณะนพั น นี้ 2. Insert Bar ร้ ม่ ประกอบไปด ร้วยปจุม่ มทพใท ชแทรกอก๊ อบเจก๊กตน์ (Object) ชนนิดตม่างๆ เชน รผปภาพ ตาราง และ เลเยอรน์ เปว็ นต ร้น ลงในเวว็บเพจทพเท รากดาลพังทดางานอยผม่ ในขณะนพั น นี้
3. Property Inspector ร้ ใชแสดงคจุ ณสมบพัตข นิ องวพัตถจุหรมือ ข ร้อความทพเท ราเลมือกในเวว็บเพจ โดย เราสามารถทพจ ท ะเปลพย ท นแปลงแก ร้ไขคจุณสมบพัตต นิ าม่ งๆของวพัตถจุทเพท ราเลมือก ผม่านทาง Property Inspector ได ร้
4. Tag Selector อยผใม่ น Status Bar ทพอ ท ยผท ม่ างด ร้านลม่างของ Document Window เมมือ ท เราคลนิกวพัตถจุในเอกสารจะปรากฏ Tag Select ใน Status Bar ขศน นี้ มา เมมือ ท เราคลนิกเลมือก Tag Selector แล ร้วแทว็กตม่างๆ ทพถ ท ก ผ ล ร้อมด ร้วยแทว็ก ทพเท ราเลมือกจะถผกเลมือกด ร้วย
5. Site Panel ร้ ร้ ใชในการจพั ดการไฟลน์และ โฟลเดอรน์ทใพท ชในการสร ร้างเวว็บไซตน์ นอกจากนพย นี้ พังสามารถใชดผร้ ไฟลน์ตาม่ งๆในเครมือ ท งได ร้อพกด ร้วย
6. Document Toolbar ประกอบไปด ร้วยปจุม่ มและปก๊ อปอพัพเมนผทใพท ชกดร้ าหนดรผปแบบมจุมมองของ Document Window ทพเท รากดาลพังทดางานอยผแ ม่ ละคดาสงพัท ตม่างๆทพใท ช ร้ ม่ การแสดงเวว็บเพจทพส ทดางานกพับ Document Window อยม่างเชน ท ร ร้าง พัท ของ Document ขศน นี้ ในเวว็บบราวเซอรน์หรมือ การกดาหนดอว็อปชน Window เปว็ นต ร้น หล จักเกณฑตการใช ข้ Multimed ร้ ในการใชงาน Multimedia บนเวว็บไซตน์ จะมพข ร้อดพคอ มื ทดาให ร้ มพความ พ คมืออาจทดาให ร้ สวยงามแปลกและเพนิม ท ความนม่าสนใจมากขศน นี้ แตม่จะมพข ร้อเสย ร้ เกนิดความลม่าชาในการ Download หน ร้าเวว็บเพจ เพนิม ท มากขศน นี้ และการใช ร้ ไฟลน์ Multimedia บางประเภทจาเปว็ นทพเท ครมือ ท งคอมพนิวเตอรน์ของผผ ร้เข ร้า ชมต ร้องทดาการตนิดตพังนี้ โปรแกรมเพนิม ท เตนิมทดาให ร้ไมม่สามารถแสดงผลได ร้กพับ คอมพนิวเตอรน์ทย พท พังไมม่ได ร้ตนิดตพังนี้ โปรแกรมดพังกลม่าว ร้ 1. หลพักเกณฑน์ในการใชงานไฟลน์ Multimedia แบบ Flash ได ร้แกม่ ไมม่ ควรสร ร้าง Multimedia ทพป ท ระกอบด ร้วยรผปภาพจดานวนมากควรจะใช ร้
เครมือ ท งมมือวาดรผปของโปรแกรม Flash เอง เพมือ ท ให ร้ได ร้ขนาดไฟลน์ทไพท มม่ ใหญม่จนเกนินไปและ Download ได ร้เรว็วกวม่า ร้ ร้ 2. หลพักเกณฑน์ในการใชไฟลน์ Video และ Audio ไมม่ควรใชไฟลน์ แบบ ร้ ม่ WAV เพราะจะมพขนาดใหญม่ควรเปลพย ท นมาใชไฟลน์ ทม พท ข พ นาดเลว็กกวม่าเชน mp3,ram หรมือ wmv หากต ร้องการแสดงผล Video ควรจะใช ร้ กระบวนการแบบ Streaming ซงศท เปว็ นการลดระยะเวลาในการ ม่ ไฟลน์แบบ Download ทดาให ร้การแสดงผลรวดเรว็วยนิงท ขศน นี้ เชน Streaming ของ Real,Quick Time และ Windows Media เปว็ นต ร้น ร้ 3. หากมพการเรพยกใชไฟลน์ Multimedia ทพต ท ร้องการโปรกรมพนิเศษใน การเรพยกดผควรทพจ ท ะทดา Link สดาหรพับการ Download โปรแกรมเหลม่านพั น นี้ ไว ร้ด ร้วยหากเปนิ ดโอกาสให ร้ผผ ร้เข ร้าชมสามารถ Download โปรแกรมเหลม่า นพั น นี้ จากเวว็บไซตน์ หนม่วยงานนพั น นี้ จะต ร้องทดาการตรวจสอบข ร้อมผลทางด ร้าน นิ ธน์ของเจ ร้าของโปรแกรมคอมพนิวเตอรน์นพัน ลนิขสท นี้ ๆกม่อนวม่าสามารถทดาได ร้ หรมือไมม่ หล จักเกณฑตในการเลพอกภาพ Graphic 1. ขนาดไฟลน์ไมม่ควรเกนิน 80 กนิโลไบตน์ เพมือ ท ความรวดเรว็วในการแสดง ผล ร้ 2. ใชไฟลน์ แบบ JPEG สดาหรพับรผปถม่าย หรมือรผปทพม ท ส พ เพ กนิน 256 ส พ ร้ 3. ใชไฟลน์ แบบ GIF สดาหรพับภาพวาดหรมือภาพการน์ตน ผ ทพม ท ส พ ไพ มม่เกนิน 256 ส พ พ เวลาทพเท สย พ 4. เลมือกภาพทพม ท ค พ วามนม่าสนใจและดศงดผด เพมือ ท ไมม่ให ร้เสย ไปในการ Download 5. ภาพเปลม่าประโยชนน์ ไฟลตภาพกราฟวิ กททน ที่ ามาใชใข้ นการทกาเวว็ บ ร้ ภาพกราฟนิ ก หรมือรผปกราฟนิ กทพน ท ามาใชในการทด าเวว็บเพจ หรมือนด ามาใช ร้ ในอนินเทอรน์เนว็ ตจะต ร้องเปว็ นไฟลน์ลพักษณะเฉพาะ ปพั จจจุบพันนนิยมใชกพัร้ น 3 ฟอรน์แมต คมือ 1. ไฟลน์ฟอรน์แมต JPEG (Joint Photographer's Experts Group File) 2. ไฟลน์ฟอรน์แมต GIF (Graphics Interlace File) 3. ไฟลน์ฟอรน์แมต PNG (Portable Network Graphics) ไฟลตสกกุล JPG (Joint Photographer’s Experts Group)
ร้ Internet มพักใชกรณพ ร้ เปว็ นอพกไฟลน์หนศงท ทพน ท ย นิ มใชบน 1. ภาพทพต ท ร้องการนด าเสนอมพความละเอพยดสผง และใชสร้ พ จดานวนมาก (สนพับสนจุนถศง 24 bit color) 2. ต ร้องการบพบไฟลน์ตามความต ร้องการของผผ ร้ใช ร้ 3. ไฟลน์ชนนิดนพม นี้ พักจะใชกพัร้ บภาพถม่ายทพน ท ด ามาสแกน และ ร้ พั และความละเอพยด ต ร้องการนด าไปใชบนอนิ นเทอรน์เนว็ ต เพราะให ร้ความคมชด ของภาพสผง ไฟลตสกกุล GIF (Graphics Interlace File) ภาพกราฟนิ กสกจุล GIF พพัฒนาโดยบรนิษพัท CompuServe จพัดเปว็ น ไฟลน์ภาพสดาหรพับการเผยแพรม่ผาม่ นอนินเทอรน์เนว็ ต ตพังนี้ แตม่ยค จุ แรก ไฟลตสกกุล PNG (Portable Network Graphics) ไฟลน์สกจุลลม่าสจุดทพน ท ด าจจุดเดม่นของไฟลน์ GIF และ JPEG มาพพัฒนารม่วม กพัน ทดาให ร้ภาพในสกจุลนพแ นี้ สดงผลสไพ ด ร้มากกวม่า 256 ส พ และยพังสามารถ ทดาพมืน นี้ ภาพให ร้โปรม่งใสได ร้ จศงเปว็ นไฟลน์ภาพทพไท ด ร้รพับความนนิยมมากใน ปพั จจจุบพันด ร้วยอพกสกจุลหนศงท การบทบอ จัดภาพ พั ญาณ เทคนนิคการบพบอพัดภาพสกจุล GIF เปว็ นเทคนนิคการบพบอพัดคงสญ LZW (Lempel-Ziv-Welch) Lossless compression โดยข ร้อมผล พ ากสท พ ซ ร้ และใกล ร้เคพยง เดนิมจะถผกสร ร้างขศน นี้ ใหมม่ด ร้วยวนิธส พ ร ร้าง Index สจ พท าๆ กพัน โดยจะ Scan แนวตพังนี้ ของภาพทพังนี้ หมด และ Scan แนวนอนของ ภาพทพังนี้ หมด และเปรพยบเทพยบวม่าแนวใดได ร้ข ร้อมผลทพจ ท ะบพันทศกเปว็ นไฟลน์ น ร้อยกวม่ากพัน หลพังจากทพเท ราวางโครงสร ร้างเวว็บไซตน์ของเราแล ร้ว ตม่อมาเราจะใช ร้ Dreamweaver Site เข ร้ามาชวม่ ยในการสร ร้างและ จพัดการเวว็บไซตน์ของ เรา การนด า Dreamweaver Site เข ร้ามาจพัดการเวว็บไซตน์ของเราจะ ร้ ทดาให ร้เราสามารถทพจ ท ะทดาการอพัพโหลดไฟลน์ทใพท ชในการสร ร้างเวว็บไซตน์ไป ในเวว็บเซรนิฟเวอรน์ได ร้ งม่ายขศน นี้ นอกจากนพนี้Dreamweaver Site ยพังชวม่ ย มืท โยงของไฟลน์ตาม่ งๆ ให ร้อพกด ร้วยเมมือ ในการตรวจสอบการชอ ท เวลามพการ แก ร้ไขไฟลน์ตาม่ งๆ ในเวว็บไซตน์ ด ร้วย การกกาหนด Dreamweaver Site
การสรข้าง Site 1. ไปทพเท มนผ Site > New Site 2. กดาหนดคม่า Site name และ Local Site folder หลพังจากนพั น นี้ กด นินี้ การสร ร้าง Site แล ร้วจะปรากฏอยผใม่ นสวม่ นของ ปจุม่ ม Save เมมือ ท เสรว็จสน Site Panel พ หาใหข้ก จับเวว็บเพจ การใสเค่ นพอ โปรแกรม Dreamweaver ซงศท มพคณ จุ สมบพัตแ นิ บบ WYSIWYG (What you see is what you get)ซงศท หมายถศง เวว็บไซตน์ทค พท ณ จุ เหว็นหรมือสร ร้าง ด ร้วย Dreamweaver โดยการพนิมพน์หรมือวางรผปลงไป เมมือ ท นด าไปแสดง ในเวว็บบราวเซอรน์กว็จะเหว็นผลเหมมือนกพับทพค ท ณ จุ สร ร้างไว ร้ ดพังนพั น นี้ หากต ร้องการใสเม่ นมือ นี้ หาลงไปในเวว็บเพจ กว็ให ร้ทดาการพนิมพน์ข ร้อความ ทพต ท ร้องการลงไปในสวม่ นของ Document Window ได ร้เลย การขศน นี้ บรรทพัดใหมม่ในโปรแกรม Dreamweaver สามารถทดาได ร้ 2 วนิธ พ คมือ 1. กดปจุม่ ม Enter โดยตรง (Tag <p>) 2. กดปจุม่ ม Shift ค ร้างไว ร้ แล ร้วกด Enter (Tag <br>) การจ จัดรรูปแบบต จัวอ จักษร HTML โดยการกาหนดคค่า Property มท ด จังนทพ
1.Fomat : รผปแบบของตพัวอพักษร เปว็ น Paragraph, Heading 1-16 2.Class : การกดาหนดแมม่แบบอพักษร (Style sheet) มืท มโยง 3. Line : การเชอ
4. 5. 6. 7.
Font : การกดาหนด Font ตพัวอพักษร การจพัดตดาแหนม่ง การกดาหนดขนาดอพักษร (Font) size 1-7 ม่ อ พ ก การกดาหนดลพักษณะอพักษร ใสส พั ษร
ร้ การเลมือกใชงานฟอนตน์ สดาหรพับการพนิมพน์ข ร้อความบนเวว็บเพจเปว็ นภาษา ไทย ควรกดาหนดให ร้เปว็ น Microsoft Sans Serif, MS Sans Serif หรมือ Tahoma และสดาหรพับข ร้อความบนเวว็บเพจเปว็ นภาษาอพังกฤษให ร้ ทดาการกดาหนดเปว็ นกดาหนดเปว็ น Arial เทม่านพั น นี้ เพราะหากเราทดาการ กดาหนดเปว็ นฟอนตน์ตวพั อมืน ท นอกเหนมือจากนพนี้ อาจทดาให ร้คอมพนิวเตอรน์บาง เครมือ ท ง ไมม่สามารถทดาการเปนิ ดอม่านข ร้อความบนเวว็บเพจของทม่านได ร้ การใสรค่ ป รู ภาพใหข้ก จับเวว็บเพจ ขพัน นี้ ตอนในการแทรกรผปภาพลงบนเวว็บเพจ มพ 3 วนิธ พ ดพังนพนี้ 1. ไปทพเท มนผ Insert > Image 2. ไปทพก ท ลจุม ม่ คดาสงพัท Common แล ร้วเลมือกทพป ท มการแทรกรผ จุม่ ปภาพ 3. ทดาการลากไฟลน์รป ผ ภาพจาก Files Panel มาวางในสวม่ นของ Document Windows การกกาหนดคกุณสมบ จัตวิของรรูปภาพ 1. W : ขนาดของภาพ 2. Src : ทพอ ท ยผข ม่ องภาพ 3. Ait : คดาอธนิบายรผปภาพ มืท มโยงด ร้วยรผปภาพ 4. Link :การเชอ พที่ มโยงเอกสาร การเชอ ในโปรแกรม Dreamweaver เราสามารถสร ร้างเมนผ Link ได ร้ 2 แบบ คมือ การทดาเมนผข ร้อความ Link และการทดาเมนผรป ผ ภาพ Link การทดาเมนผข ร้อความ Link มพขน พั นี้ ตอน ดพังนพนี้ 1. พนิมพน์เมนผข ร้อความทพต ท ร้องการ 2. Crop ข ร้อความทพต ท ร้องการทดา Link ม่ อ มืท เวว็บเพจทพต มืท มโยงข ร้อมผล 3. ไปทพท Properties แล ร้วใสช ท ร้องการเชอ ม่ ง Link ลงในชอ การทดาเมนผรป ผ ภาพ Link มพขน พั นี้ ตอน ดพังนพนี้ 1. Insert รผปภาพทพต ท ร้องการสร ร้างเปว็ นเมนผลงบน Document Window 2. คลนิกทพรท ป ผ ภาพ ม่ อ มืท เวว็บเพจทพต มืท มโยงข ร้อมผล 3. ไปทพท Properties แล ร้วใสช ท ร้องการเชอ ม่ ง Link ลงในชอ
การกกาหนดล จักษณะการเปวิ ดหนข้าเวว็ บเพจ หล จังจากคลวิกททที่ Lin มืท มโยงเองสาร โดยการใสช ม่ อ มืท เวว็บเพจลงในชอ ม่ ง Link เมมือ ท ทดาการการเชอ แล ร้วให ร้คลนิกเลมือกทพท Target ความหมายของ Target มพดงพั นพนี้ มืท มโยงในหน ร้าตม่าง Browser _blank ให ร้เปนิ ดหน ร้าเวว็บใหมม่ทเพท ชอ ใหมม่อก พ หน ร้าตม่าง มืท มโยงในหน ร้าตม่าง Browser _new ให ร้เปนิ ดหน ร้าเวว็บใหมม่ทเพท ชอ ใหมม่อก พ หน ร้าตม่าง มืท มโยงในหน ร้าตม่าง Browser _parent ให ร้เปนิ ดหน ร้าเวว็บใหมม่ทเพท ชอ เดนิม มืท มโยงในเฟรมเดนิม _self ให ร้เปนิ ดหน ร้าเวว็บใหมม่ทเพท ชอ มืท มโยงในหน ร้าตม่าง Browser _top ให ร้เปนิ ดหน ร้าเวว็บใหมม่ทเพท ชอ เดนิม โดยแสดงให ร้เตว็มพมืน นี้ ทพห ท น ร้าตม่าง ขนตอนการแสดงผลเวว็ จัพ บบนหนข้าเพจ 1. ให ร้ทดาการ Save เวว็บเพจ กม่อนทดาการแสดงผลบน Browser ทจุก ครพังนี้ พั ลพักษณน์คล ร้ายกพับรผปโลก 2. ไปทพท Document Toolbar แล ร้วคลนิกทพส ท ญ 3. เลมือกเมนผ Preview in IExplore หลพังจากนพั น นี้ โปรแกรม Dreamweaver จะทดาการแสดงผลของเวว็บเพจ ทพโท ปรแกรม Internet Explorer Cascading Style Sheet (CSS) คพออะไร CSS เปว็ นกลจุม ม่ ของรผปแบบการแสดงผลทพเท ราได ร้สร ร้างไว ร้เพมือ ท ใช ร้ กดาหนดการแสดงผลของเนมือ นี้ หาในเวว็บเพจ การนด า CSS เข ร้ามา กดาหนดการแสดงผลจะชวม่ ยให ร้การกดาหนดการแสดงผลของเนมือ นี้ หาทพอ ท ยผม่ ในเวว็บเพจทดาได ร้งม่ายและ ถผกต ร้องมากขศน นี้ นอกจากนพนี้ CSS ยพังสามารถ ควบคจุมการแสดงผลบางอยม่างทพท HTML ไมม่สามารถควบคจุมได ร้ด ร้วย ม่ ขนาดของตพัวอพักษรบนเวว็บเพจใน CSS จะกดาหนดขนาดเปว็ น อยม่างเชน พนิกเซล ซงศท จะทดาให ร้แสดงผลของตพัวอพักษรในทจุกๆ เวว็บบราเซอรน์เหมมือน กพัน หรมือ ตดาแหนม่งของเลเยอรน์ซงศท ด ร้วย CSS เราสามารถทพจ ท ะกดาหนด ตดาแหนม่งการแสดงผลของมพันได ร้ เปว็ นต ร้น
ค่ นประกอบของ CSS สว มืท ของ CSS 1. Selector เปว็ นชอ 2. Declaration เปว็ นสวม่ นทพใท ชกดร้ าหนดวม่า CSS นพม นี้ รพ ป ผ แบบอะไรบ ร้าง ซงศท ประกอบไปด ร้วยคจุณสมบพัต นิ และคม่าของคจุณสมบพัต นิ ประโยชนน์ทส พท ดาคพัญของการนด า CSS มาใชกว็ร้ คอ มื เมมือ ท เราเปลพย ท นแปลงรผป แบบทพก ท ดาหนดไว ร้ใน CSS เมมือ ท ใดแล ร้ว รผปแบบการแสดงผลของข ร้อความ หรมือ วพัตถจุทพังนี้ หมดทพใท ช ร้ CSS ดพังกลม่าวจะเปลพย ท นแปลงด ร้วย ซงศท ประเภท ของ CSS มพดงพั นพนี้ ร้ ร้ 1. Customer CSS Style เปว็ น CSS ทพส ท ร ร้างขศน นี้ และสามารถใชได ทจุกทพข ท องเวว็บ 2. HTML Tag Style เปว็ น CSS ทพม ท ก พ ารกดาหนดรผปแบบให ร้กพับ HTML เดนิมทพม ท อ พ ยผแ ม่ ล ร้ว 3. CSS Sector Style เปว็ น CSS ทพม ท ก พ ารกดาหนดรผปแบบให ร้กพับแทว็กทพท มพการผสมกพันหรมือทจุกแทว็กทพม ท พ id ตรงกพับทพเท รากดาหนดใน CSS การอ จัพโหลดเวว็บไซตต (FTP) ขพัน นี้ ตอนสจุดท ร้ายสดาหรพับการจพัดทดาเวว็บไซตน์ กว็คอ มื ทดาการอพัพโหลดข ร้อมผลขศน นี้ ไปยพัง Web Server ซงศท ในตพัวโปรแกรม Dreamweaver นพนี้ มพเครมือ ท ง ร้ มมือสดาหรพับการอพัพโหลดทพงท าม่ ย สะดวก และรวดเรว็วตม่อการใชงานเปว็ น อยม่างมาก ขพัน นี้ ตอนการสร ร้าง FTP Connection มพดงพั นพนี้ 1. คลนิกทพป ท ม จุม่ ทพท Files Panel 2. ในกรณพทย พท พังไมม่ได ร้มพการกดาหนดคม่า FTP จะขศน นี้ หน ร้าตม่าง Site Setup for mysite ให ร้เลมือกทพป ท มเครมื จุม่ อ ท งหมายบวก + 3. จากนพั น นี้ ทดาการกดาหนดคม่าตม่างๆ ดพังนพนี้
ม่ าม่ สดาหรพับการ FTP 4. ใสค
มืท มตม่อ 5. เมมือ ท กดาหนดคม่าเสรว็จเรพยบร ร้อยแล ร้ว ให ร้ลองทดาสอบการเชอ โดยการกดปจุม่ ม Test ถ ร้าสดาเรว็จจะขศน นี้ ข ร้อความ ขพัน นี้ ตอนการอพัพโหลดข ร้อมผลขศน นี้ Web Server มพขน ศนี้ ตอน ดพังนพนี้ 1. คลนิกเลมือกไฟลน์ทต พท ร้องการอพัพโหลดทพท Files Panel
2. คลนิกทพป ท ม จุม่ เพมือ ท ทดาการ upload ข ร้อมผลขศน นี้ Web Server ขพัน นี้ ตอนการดาวนน์โหลดข ร้อมผลจาก Web Server ลงมาแก ร้ไข มพขน ศนี้ ตอน ดพังนพนี้ 1. คลนิกเลมือกไฟลน์ทต พท ร้องการดาวนน์โหลดทพท Files Panel
2. คลนิกทพท เพมือ ท ทดาการดาวนน์โหลดข ร้อมผลจาก Web Server ลงมา แก ร้ไข