รายวิชาออกแบบและนำเสนอ ม.4
Embedded Files
หน่วยการเรียนรู้ที่ 1 ความรู้เบื้องต้นเกี่ยวกับเว็บไซต์
1.1 ความหมายของเว็บไซท์ เว็บเพจ โฮมเพจ
เว็บไซต์ (Web Site)
เว็บไซต์ คือ คำที่ใช้เรียกกลุ่มของเว็บเพจ ( ดังนั้นภายในเว็บไซต์จะประกอบไปด้วยโฮมเพจและเว็บเพจ ) โดยเรามักใช้เรียกเว็บที่มีขนาดใหญ่และมีการจดทะเบียนชื่อเว็บไซต์นั้นๆไว้แล้ว (Domain Name) เช่น http://www.geocities.com , http://www.sanook.com , http://www.yahoo.com เป็นต้น
เว็บเพจ (Web Page)
เว็บเพจ คือ คำที่ใช้เรียกหน้าเอกสารต่างๆ ที่อยู่ในรูปแบบไฟล์ HTML (Hyper Text Markup Language) เปรียบเสมือนหน้ากระดาษแต่ละหน้าที่มีเรื่องราวต่างๆมากมายบรรจุอยู่ในนิตรสาร แต่แตกต่างกันตรงที่มีการเชื่อมโยง (Link) ซึ่งเราสามารถคลิกไปที่หน้าใดของโฮมเพจก็ได้
โฮมเพจ (Home Page)
โฮมเพจ คือคำที่ใช้เรียกหน้าแรกของเว็บไซต์ ซึ่งประกอบไปด้วยเมนูต่างๆและเรื่องราวต่างๆมากมายคล้ายกับหน้าปกนิตรสารบ้านเรา ดังนั้นหากเราออกแบบหน้าโฮมเพจให้สวยงามและน่าสนใจ โอกาสที่ผู้ชมจะแวะเข้ามาเยี่ยมเยียนโฮมเพจของเราก็จะยิ่งมากตามไปด้วย
1.2 ประโยชน์ของเว็บไซต์
• เป็นการเพิ่มช่องทางในการขายสินค้าและบริการของบริษัทอีกช่องทางหนึ่ง
• คุณไม่ต้องเสียค่าใช้จ่ายที่สูง สำหรับการที่จะมีเว็บไซต์เพื่อติดต่อกับโลกภายนอก
• เสริมภาพลักษณ์ขององค์กรให้มีความทันสมัยน่าเชื่อถือมากขึ้น
• มีอีเมล์ในการติดต่อลูกค้า เพื่อความเป็นสากล
• สามารถซื้อ-ขายสินค้าหรือบริการของท่านผ่านเว็บไซต์ได้ตลอด 24 ชั่วโมง
• โฆษณาบริษัทฯ หรือองค์กรให้เป็นที่รู้จักทั้งในจังหวัด ต่างจังหวัดและต่างประเทศ
• เป็นอีกช่องทางในการส่งเสริมการขายสินค้าและบริการต่าง ๆ ของบริษัท
• ยกระดับมาตรฐานการซื้อขายภายในประเทศ
• เสริมสร้างธุรกิจให้แข็งแรงด้วยประโยชน์ของ Internet
1.3 ประเภทของเว็บไซต์
เว็บท่า (Portal Site)
เว็บไซต์ประเภทนี้ เป็นเว็บไซต์ที่เรา ๆ พบเจอกันอยู่ทุกวันโดยที่บางทีอาจจะไม่รู้ว่ามันคือเว็บไซต์ที่จัดอยู่ในเว็บไซต์ประเภท เว็บท่า เว็บไซต์ประเภทนี้เรียกอีกชื่อนึงว่า เว็บไซต์วาไรตี้ เช่น เว็บไซต์สนุกดอทคอม, เว็บไซต์กระปุกดอทคอม เว็บไซต์ประเภทนี้ก็จะเป็นคล้าย ๆ กับเว็บข่าว (News site) แต่เว็บไซต์แนวนี้จะได้รับความนิยมมากกว่าเพราะมีความหลากหลายมากกว่าและให้ความบันเทิงมากกว่า
เว็บข่าว (News Site)
เว็บไซต์ประเภทนี้ทุกท่านน่าจะรู้จักและคุ้นเคยกันเป็นอย่างดี เช่น เว็บไซต์ไทยรัฐออนไลน์ ก็จัดว่าเป็นเว็บไซต์ในประเภทนี้ด้วย เว็บไซต์ในประเภทนี้คือเว็บไซต์ที่ให้ข้อมูลข่าวสารต่าง ๆ ไม่ว่าจะเป็นข่าวธุรกิจ, ข่าวการเมือง, ข่าวการศึกษา, ข่าวบันเทิง เป็นต้น
เว็บข้อมูล (Information Site)
เป็นเว็บที่ให้บริการเกี่ยวกับการสืบค้น ข้อมูลข่าวสาร หรือข้อเท็จจริงต่างๆ ที่น่าสนใจ
เว็บธุรกิจหรือการตลาด (Business/Marketing Site)
เป็นเว็บไซต์ที่จัดทำขึ้นโดยบริษัท องกรค์ธุรกิจต่าง ๆ โดยมีจุดประสงค์เพื่อประชาสัมพันธ์สินค้า/บริการของตนให้เป็นที่รู้จัก ซึ่ง เว็บไซต์ CMPRODEV.COM รับทำเว็บไซต์ ที่ เชียงใหม่ ก็จัดว่าอยู่ในกลุ่มเว็บไซต์ประเภทนี้ด้วยเช่นกัน
เว็บการศึกษา (Educational Site)
ส่วนใหญ่เว็บไซต์ประเภทจัดทำขึ้นโดยสถาบันการศึกษา เช่น เว็บโรงเรียน, เว็บมหาวิทยาลัย หรืออีกประเภทนึงก็จะเป็นเว็บแนวให้ความรู้เรื่องเกี่ยวกับการศึกษาหรือที่เรียกว่าเว็บ e-learning
เว็บบันเทิง (Entertainment Site)
เว็บบันเทิงนั้นมุ่งเสนอและให้บริการต่างๆ เพื่อเสริมสร้างความบันเทิง โดยทั่วไปอาจนำเสนอเรื่องราวเกี่ยวกับการบันเทิงทั่วไป เช่น ดนตรี ภาพยนตร์ ดารา กีฬา ความรัก บทกลอน การ์ตูน เรื่องขำขัน รวมถึงการให้บริการดาวน์โหลดโลโก้และริงโทนสำหรับโทรศัพท์เคลื่อนที่อีกด้วย เว็บประเภทนี้อาจมีรูปแบบที่เป็นอินเตอร์แอคทีฟที่ตื่นตาตื่นใจ หรือใช้เทคโนโลยีมัลติมิเดียได้มากกว่าเว็บประเภทอื่น
เว็บองค์กรที่ไม่แสวงหาผลกำไร (Non-profit Organization Site)
ส่วนใหญ่สร้างขึ้นโดยบุคคลหรือองค์การต่าง ๆ ที่มีนโยบายในการสร้างและช่วยเหลือสังคมโดยที่ไม่หวังผลกำไรหรือค่าตอบแทน ซึ่งกลุ่มบุคคลหรือองค์การเหล่านี้ได้แก่ สมาคม ชมรม มูลนิธี และโครงการต่างๆ โดยอาจจะมีจุดประสงค์เฉพาะที่แตกต่างกันเช่น เพื่อทำความดี สร้างสรรค์สังคม พิทักษ์สิ่งแวดล้อม ปกป้องสิทธิมนุษยชน รณรงค์ไม่สูบบุหรี่ เป็นต้น
เว็บส่วนตัว (Personal Site)
บางครั้งอาจเป็นเว็บของคนๆ เดียว เพื่อนฝูง หรือครอบครัวก็ได้ โดยอาจจะจัดทำขึ้นด้วยเหตุผลที่แตกต่างกัน เช่น แนะนำตนเอง แนะนำกลุ่มเพื่อน โชว์รูปภาพ แสดงความคิดเห็น เขียนไดอารี่ประจำวัน นำเสนอผลงาน ถ่ายทอดประสบการณ์เกี่ยวกับสิ่งที่เชี่ยวชาญหรือสนใจ
1.4 โปรแกรมสำหรับการสร้างเว็บไซต์
โปรแกรม Adobe Dreamweaver ช่วยเขียนโฮมเพจคุณภาพสูง มีเครื่องมือหลากหลาย ที่ช่วยให้คุณเขียนโฮมเพจ หรือเว็บไซต์ได้สะดวกสบายขึ้น ด้วยระบบการแสดงผล และคำสั่งอัตโนมัติ
โปรแกรม Web Page Maker เป็นโปรแกรมช่วยออกแบบเว็บ และสร้างเว็บได้ง่ายๆ ด้วยภาษา HTML มีรูปแบบเว็บสำเร็จรูปเพียบ ใช้หลักการลากแล้ววาง เสือกโค้ดสี HTML ได้ สนับสนุน JavaScript และมี FTP อัพโหลดไฟล์ในตัว
โปรแกรม KompoZer เป็น โปรแกรมสร้างเว็บ (โปรแกรมเขียนเว็บ) สำหรับคนอยาก ทำเว็บ เองสนับสนุน HTML CSS เหมือน Dreamwaver แต่เร็วกว่าเยอะ ขนาดเล็ก แจกฟรี อีกด้วย
โปรแกรม PHP Creator โปรแกรมช่วยเขียนโค้ด PHP สำเร็จรูป เช่น เชื่อมต่อกับฐานข้อมูล MySQL ได้ง่ายสุด ตั้งแต่การค้นหา ดึงข้อมูล เพิ่ม ลบ แบ่งหน้า แบ่งคอลัมน์ ดูในรายละเอียด ฯลฯ
ดาวน์โหลดโปรแกรม Aptana โปรแกรมสร้างเว็บ พัฒนาเว็บไซต์ เอาไว้ ออกแบบเว็บ พัฒนาเว็บไซต์ คุณสามารถสร้างเว็บไซต์ หรือ Web Application ต่างๆ ผ่าน โปรแกรมสร้างเว็บ ตัวนี้ได้ ฟรี
ดาวน์โหลดโปรแกรม Adobe Muse โปรแกรมออกแบบเว็บเพจ และเว็บไซต์ สำหรับภาษา HTML ไม่จำเป็นต้องมานั่งเขียนโค้ดให้เสียเวลา แถมมีเทมเพลตเจ๋งๆ ให้เลือกไปใช้งานกันได้อีกด้วยแหละ
โปรแกรม WebSite X5 Evolution สร้างเว็บไซต์ง่ายๆ ด้วยตัวคุณเอง ทั้งการออกแบบหน้าตาเว็บไซต์ การเขียนโค้ดในภาษาต่างๆ ที่จะใช้งาน มีเทมเพลตให้เลือก สะดวก สวยงาม ไม่ต้องเสียเวลาออกแบบให้ยุ่งยาก
การสร้างเว็บไซต์ที่ไม่จำเป็นต้องเขียนโปรแกรมหรือสคริปต์ PageBreeze Free HTML Editor เป็นตัวเลือกที่น่าสนใจทีเดียวครับ...
โปรแกรม TOWeb ซอฟท์แวร์ที่ออกแบบมาสำหรับคนและองค์กรที่ต้องการที่จะสร้าง Blog หรือเว็บไซต์ แม้แต่ผู้ที่ไม่เคยใช้งานมาก่อนก็สามารถใช้ได้อย่างสบายๆ มี Theme ให้เลือกใช้อย่างมากมาย
โปรแกรม WebSite X5 Professional 10 โปรแกรมสำหรับสร้างเว็บไซต์สำหรับเร็จรูปและแสดงผลบนสมาร์ทโฟนแล้วแท็บเล็ตได้ทันที ประหยัดเวลาสร้างสรรค์เว็บไซต์ได้ด้วยตัวเองง่ายๆ
ความหมายของการออกแบบงานกราฟิก
ความหมายของการออกแบบงานกราฟิก กราฟิก หมายถึง ภาพลายเส้นหรือภาพที่เกิดจากการวัด จากการขีดเขียนที่แสดงด้วยตารางหรือแผนภาพ การวาด เขียนหรือการระบายสี การสร้างงานศิลปะบนพื้นระนาบหรือ กระบวนการออกแบบต่าง ๆ ในสิ่งที่เป็นวัสดุ 2 มิติ คือมี ความกว้างและความยาวเท่านั้น เช่น งานออกแบบบ้านของสถาปนิกในการเขียนแบบ ตัวภาพและรายละเอียดบนแปลนบ้าน เรียกว่าเป็นงานกราฟิก การเขียนภาพเหมือนจริงของจิตกร การออกแบบภาพโฆษณาของนักออกแบบ การออกแบบฉลากหรือ ลวดลายหรือภาพประกอบหรือตัวอักษรที่ปรากฎบนฉลากสินค้า บนตัวสินค้าหรือบนภาชนะบรรจุภัณฑ์สินค้า ฯลฯ การออกแบบ หมายถึง การวางแผนสร้างสรรค์รูปแบบโดยวางแผนจัดสัดส่วนประกอบของการออกแบบให้สัมพันธ์ กับประโยชน์ใช้สอย วัสดุ และการผลิตของสิ่งที่ต้องการออกแบบนั้น ซึ่งเป็นองค์ประกอบทางความงามและพิจารณาถึง ประโยชน์ใช้สอยการออกแบบที่ดีนั้นควรจะค านึงถึงปัจจัยต่อไปนี้ 1. รูปแบบที่สร้างสรรค์ 2. มีความงามที่น่าสนใจ 3. สัมพันธ์กับประโยชน์ใช้สอย 4. เหมาะสมกับวัสดุ 5. สอดคล้องกับการผลิต 2 การออกแบบงานกราฟิก หมายถึง กระบวนการทางความคิดสร้างสรรค์ที่ใช้ความรู้ศิลปะร่วมกับหลักการออกแบบ และเทคโนโลยี เพื่อผลิตผลงาน ซึ่งงานนั้นสามารถถ่ายทอดและสื่อความหมายไปยังผู้รับสารได้เข้าใจอย่างตรงกัน
องค์ประกอบงานกราฟิก
เส้น (Line) รูปทรงของเส้นจะสื่อถึงความรู้สึกที่ต่างกันออกไป
เส้นแนวนอน = สงบ ราบเรียบ
เส้นแนวตั้ง = มั่นคง
เส้นทแยง = ไม่มั่นคง
เส้นตัดกัน = แข็งแกร่ง หนาแน่น
เส้นโค้ง = อ่อนน้อม
เส้นประ = ไม่สมบูรณ์
เส้นโค้งแบบคลื่น = นิ่มนวล
เส้นโค้งก้นหอย = ไม่มีที่สิ้นสุด
เส้นซิกแซ็ก = อันตราย
รูปร่าง (Shape) , รูปทรง (Form) , น้ำหนัก (Value)
รูปร่าง = องค์ประกอบต่อจากเส้น ในรูปร่าง 2 มิติ ความกว้างและความยาว หรือสูง
รูปทรง = รูปร่าง 3 มิติ เป็นการเพิ่มความลึกเข้ามา
น้ำหนัก = เป็นส่วนเสริมให้รู้ว่ารูปทรงจะมีขนาดหนักเบา หรือโปร่ง
พื้นผิว (Texture) เป็นอีกองค์ประกอบว่างานนั้นจะออกมาในแนวไหน สื่อถึงความเก่า-ใหม่ สื่อถึงงานปาร์ตี้ ฯลฯ รวมทั้งวัสดุที่ใช้พิมพ์จะเพิ่มให้ผลงานเหมาะวมมากยิ่งขึ้น เช่น การ์ดเชิญไปงานเลี้ยง ก็อาจจะเป็นกระดาษที่หรูหรา แวววาว เป็นต้น
ที่ว่าง (Space) พื้นที่หรือพื้นหลัง ที่ผู้ออกแบบอาจจะตั้งใจหรือไม่ได้ตั้งใจให้มี ซึ่งที่ว่างจะช่วยให้สามารถควบคุมองค์ประกอบไม่ให้หนักหรือบางเกินไป เป็นการช่วยเสริมจุดเด่นมากขึ้น
สี (Color) หัวใจสำคัญของการออกแบบ เพราะสีจะสีอารมณ์ได้อย่างชัดเจน เช่น งานร็อคคอนเสิร์ต ใช้สีโทนร้อน เป็นต้น
สีแดง = อันตราย เร่าร้อน รุนแรง
สีส้ม = สว่าง เร่าร้อน
สีเหลือง = สว่าง สดใส
สีเขียว = สดชื่น พักผ่อน
สีน้ำเงิน = สงบ ผ่อนคลาย
สีม่วง = มีเลศนัย
สีน้ำตาล = สงบเงียบ
สีขาว= บริสุทธิ์ สะอาด
สีดำ =หดหู่ เศร้าใจ
นอกจากสีจะแสดงถึงความรู้สึกต่าง ๆ แล้ว เมื่อนำมาใช้ร่วมกันยังสามารถสื่ออารมณืได้อีกแบบเช่นกัน โดยแบ่งออกเป็น 2 วรรณะ คือ วรรณะร้อน (Warm Tone Color) และ วรรณะเย็น (Cool Tone Color)
เทคนิคการใช้สีมีอยู่มากมาย เพื่อให้ภาพนั้นมีจุดเด่น มีอารมณ์ ตามผลงานหรือวัตถุประสงค์นั้นๆ โดยการใช้สีมีอยู่ 4 รูปแบบ คือ
Mono = การใช้สีโทนเดียว เช่น สีแดง เป็นจุดเด่น ส่วนที่เหลือก็จะเป็นสีที่ใกล้เคียงกับสีแดงหรือลดความเข้มของสีแดงลงไป
Complement = การใช้สีที่ตัดกัน แดง-เขียว หรือ น้ำเงิน-ส้ม เป็นต้น ควรใช้สีหนึ่ง 80% อีกสีที่สอง 20% หรือ 70%-30%
Triad = การใช้ 3 สี สามเหลี่ยมด้านเท่ามาใช้งาน
Analogic = การใช้สีข้างเคียงที่ติดกันในวงจรสีด้านละสีมาใช้งาน
ตัวอักษร (Type) เป็นส่วนสำคัญไม่แพ้สีเช่นกัน เพราะนักออกแบบบางคนก็ใช้เพียงแค่ตัวอักษร ก็สามารถทำให้สื่อถึงผลงานนั้นได้ดีเยี่ยม มี Proportion ของฟอนต์ 3 แบบ คือ ธรรมดา(Normal) ตัวหนา(Bold) ตัวเอียง(Italic) แต่ละส่วนก็จะแยกย่อยไปอีก บางคนอาจจะกล่าวว่า “แค่ตัวอักษรเอง ทำไม?” แต่ถ้าได้เรียนรู้แล้วจะทำให้ผลงานของเราดียิ่งขึ้น โดยตัวอักษรหลักๆ ที่นิยมใช้กันในปัจจุบันมี 4 แบบ คือ
Serif = เป็นระเบียบ เป็นทางการ
San Serif = อ่านง่าย ดูทันสมัย ไม่เป็นทางการมากนัก
Antique = แสดงถึงความชัดเจน ยุดสมัย
Script = ไม่เป็นทางการ มีความเป็นกันเอง
การเลือกฟอนต์ไปใช้ควรคำนึงถึง ความหมายต้องเข้ากัน และอารมณืของฟอนต์ต้องไปในทิศทางเดียวกัน นอกจากนี้การวางตำแหน่งก็สำคัญเช่นกัน โดยส่วนใหญ่แล้วธรรมชาติของคนไทยจะอ่านจากซ้ายไปขวา บนลงล่าง จุดเด่นควรมีจุดเดียว และไม่ควรใช้ฟอนต์หลายแบบเกินไป
อ้างอิงจากหนังสือ Graphic Design Artwork
Page updated
Google Sites
Report abuse