Font

ประกวดคลิปสั้นแต่ส่งไม่ทัน เอิ้ก ๆๆ "ภัยเงียบ"

คลิปภัยเงียบโลกไซเบอร์

Web web

ทำเองงับ

ลอกมาจ้า

การออกแบบเว็บไซต์

วิธีการออกแบบเว็บไซต์ หลักๆ


3.หลักการใช้สีสำหรับการออกแบบเว็บไซต์

3.1 จำนวนของสีหลัก

3.2 การใช้สีพื้นหลัง - ภาพ

-ลวดลาย

-สี

3.3 โทนสีโดยรวม -โทนร้อน

-โทนเย็น

3.4 สีกับหมวดหมู่



4. การใช้ตัวอักษรและภาพกราฟฟิก

4.1 สีของตัวอักษร - เข้ม

- กลาง

- อ่อน

4.2 ลักษณะตัวอักษร

4.3 จำนวนของภาพกราฟฟิก

4.4 ตำแหน่งการวางภาพ

4.5 ขนาดของภาพ



5. การใช้สื่อประสม สำหรับออกแบบเว็บไซต์

5.1 การใช้ภาพเคลื่อนไหว

5.2 การใช้วีดีโอ

5.3 การใช้เสียง





Update เพิ่มเติม


การใช้สื่อประสมในการออกแบบ เว็บไซด์


1. แฟ้มเสียง (Audio file)

ระบบของแฟ้มเสียงที่ใช้กันโดยทั่วไปมี 3 ชนิด คือ Digitize Audio, Music Files และ Text to Speech

- Digitize Audio เป็นรูปแบบของแฟ้มเสียงที่ทำงานโดยถูกแปลงจาก Analog ไปเป็น Digital เพื่อให้ใช้กับคอมพิวเตอร์ได้

- Music Files เป็นรูปแบบตัวโน้ตดนตรีที่เรียงสลับกัน เพื่อให้เล่นออกมาเป็นเสียงเพลง

- Text to Speech เป็นเทคนิคในการแปลงข้อความ (Text file)



2. แฟ้มวีดิทัศน์ (Video files)

ปัจจุบัน Digital Video เป็นสิ่งที่ทำให้เว็บเพจมีความทันสมัยและแปลกตายิ่งขึ้น โดยทั้งผู้ผลิตฮาร์ดแวร์และซอฟต์แวร์ และผู้ใช้งาน ต่างให้ความสนใจและพัฒนาเทคโนโลยีสาขานี้เป็นอย่างมาก เพื่อเพิ่มความน่าสนใจให้กับเว็บเพจ อย่างไรก็ตามแฟ้มภาพวีดิทัศน์จะมีขนาดใหญ่มาก ดังนั้นจำเป็นต้องมีการบีบอัดแฟ้มให้มีขนาดเล็กลง โดยผ่านกระบวนการที่เรียกว่า “Codec” (Compression / Decompression) ซึ่งจะกระทำโดยผ่านซอฟต์แวร์ต่าง ๆ ดังนี้ CinePak (Compac Video) เป็นวิธีที่นิยมกันมากที่สุด ใช้ในซอฟต์แวร์ที่ชื่อ Quicktime และ Video for Windows (vfw) Indeo คุณภาพรองจาก CinePak แต่เร็วกว่าใช้ได้ใน Quicktime Version 2.0 และ vfm JPEG นิยมนำมาใช้ทำ Video Capture แล้วใช้ CinePak มาทำ Codec MPEG Codec ได้คุณภาพ ของวีดิทัศน์สมบูรณ์มาก อย่างไรก็ตาม ยังขาดฮาร์ดแวร์ที่สนับสนุนอยู่มาก



3. แฟ้มภาพเคลื่อนไหว (Animation files)

การ สร้างภาพเคลื่อนไหวที่ดีและง่ายที่สุดนั้นก็คือ ใช้คุณสมบัติของแฟ้มภาพ GIF หลาย ๆ ภาพมาเก็บไว้ในแฟ้มเดียวกัน เรียกว่า GIF Animation โดยที่เมื่อแฟ้มเหล่านี้ถูกเรียกใช้งานผ่านโปรแกรมค้นผ่าน รูปภาพทั้งหมดที่เก็บไว้จะถูกแสดงออกมาตามลำดับที่เราเรียงไว้ ทำให้ได้ภาพเสมือนกับเคลื่อนไหวอยู่



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



5.5.6 ปัจจัยที่มีอิทธิพลต่อการแสดงผลของเว็บไซต์

หัวใจ สำคัญอีกประการหนึ่งของการออกแบบเว็บไซต์ ก็คือสามารถแสดงผลได้อย่างเหมาะสมกับหน้าจอของผู้ใช้ทุกคน ซึ่งค่อนข้างเป็นไปได้ยากในทางปฏิบัติ เพราะความแตกต่างทางด้านฮาร์ดแวร์และซอฟต์แวร์ของผู้ใช้แต่ละคน รวมไปถึงการปรับตั้งค่าต่าง ๆ ของเว็บบราวเซอร์ สิ่งแวดล้อมที่แตกต่างกันนี้ จะส่งผลต่อการแสดงผลเว็บเพจด้วยเช่นเดียวกัน ทำให้ผลลัพธ์ที่ได้ไม่มีความแน่นอน เว็บเพจที่ดูดีในหน้าจอของเราอาจดูน่าตกใจในหน้าจอของผู้อื่นก็เป็นได้



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



1. ระบบปฏิบัติการ

ระบบ ปฏิบัติการ (Operating System) ระบบปฏิบัติการคอมพิวเตอร์เป็นปัจจัยสำคัญที่มีผลต่อการทำงานของบราวเซอร์ มาก ระบบปฏิบัติการหลักที่นิยมใช้กันมาก ได้แก่ Windows, Macintosh, Unix และ Linux โดยในแต่ละระบบจะแตกต่างกันในเรื่องของชนิดและรุ่นของบราวเซอร์ที่ใช้ได้ ระดับความละเอียดของหน้าจอ ชุดขอระบบสี และชนิดของตัวอักษรที่มาพร้อมกับระบบ เป็นต้น

ในการออกแบบเว็บเพจ ถ้าหากทราบว่ากลุ่มผู้ใช้เป้าหมายส่วนใหญ่ ใช้ระบบปฏิบัติการใดก็จะเป็นประโยชน์อย่างมาก เพราะจะทำให้สามารถออกแบบได้เหมาะสมกับสิ่งแวดล้อมของผู้ใช้ได้มากขึ้น



2. ความละเอียดหน้าจอ

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

3. ความเร็วในการรับส่งข้อมูล

ความเร็วในการรับ ส่งข้อมูล (Connection Speed) ยังคงเป็นปัญหาหลักที่จำกัดความก้าวหน้าของเทคโนโลยีใหม่ ๆ สำหรับเครือข่ายเว็บ เนื่องจากความเร็วในปัจจุบันยังช้า และไม่ทันใจ ทำให้ผู้พัฒนาต้องมีความพยายามอย่างยิ่งที่จะออกแบบเว็บให้มีขนาดเล็ก เพื่อการส่งผ่านข้อมูลที่

เขียนโดย Pichet Kulawong ที่ 5:21 0 ความคิดเห็น ส่งอีเมลข้อมูลนี้ BlogThis! แบ่งปันไปที่ Twitter แบ่งปันไปที่ Facebook แบ่งปันไปที่ Google Buzz

การใช้อักษรและภาพกราฟิก

การใช้ตัวอักษรบนหน้าเว็บ



ในแต่ละตัวอักษรประกอบด้วยส่วนต่างๆ ที่น่าจะรู้จักไว้ เพื่อที่จะใช้ประโยชน์เมื่อต้องการเปรียบเทียบลักษณะของตัวอักษรแต่ละชนิดได้มีส่วนประกอบหลักๆ ดังนี้ Ascender ส่วนบนของตัวอักษรพิมพ์เล็ก Descender ส่วนล่างของตัวอักษรพิมพ์เล็กที่ต่ำกว่าเส้น Baseline เส้นสมมุติที่ตัวอักษรส่วนใหญ่ตั้งอยู่ Cap height ความสูงจากเส้นความสูงของตัวอักษร x-height ความสูงของตัวอักษร



วิธีการใช้ตัวอักษรและบนหน้าเว็บ



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

จัดชิดซ้าย ตัวอักษรที่ถูกจักให้ชิดขอบซ้าย จะมีปลายด้านขวาไม่สม่ำเสมอเนื่องจากตัวอักษรในแต่ละบรรทัด มีความยาวไม่เท่ากัน แต่ก็สามารถหาจุดเริ่มต้นของแต่ละบรรทัดได้ง่ายกว่า

จัดชิดขวา การจัดตัวอักษรให้ชิดขวา จะดูน่าสนใจแต่จุดเริ่มต้นในของแต่ละบรรทัดที่ไม่สมำเสมอ ทำให้อ่านยากเนื่องจากผู้อ่านต้องหยุดชะงัก เพื่อหาจุดเริ่มต้นของแต่ละบรรทัด

จัดกึ่งกลาง การจัดตัวอักษรให้อยู่กึ่งกลาง ใช้ได้ผลดีกับข้อมูลที่มีปริมาณไม่มาก เหมาะสมกับรูปแบบที่เป็นทางการอย่างเช่น คำประกาศ หรือ คำเชื้อเชิญ

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

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



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

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



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



การใช้งานภาพกราฟฟิก



ประเภทของไฟล์รูปภาพ

ไฟล์รูปภาพที่ใช้อยู่ในปัจจุบันนี้มีหลายประเภท แต่ไม่สามารถนำมาใช้กับเว็บเพจได้ทุกประเภท ประเภทของไฟล์รูปภาพที่นิยมมาใช้กับเว็บเพจมี 3 ประเภทคือ



1. ไฟล์ประเภท GIF (Graphics Interchange Format)

เป็นไฟล์ภาพที่มีขนาดเล็ก คุณภาพต่ำ เนื่องจากถูกบีบอัดข้อมูลให้มีขนาดเล็ก แสดงสีได้ 256 สี แต่เป็นที่นิยมสำหรับผู้เขียนเว็บเพจเป็นอย่างมากเนื่องจากสามารถทำเป็นภาพเคลื่อนไหว (Animation) และกำหนดให้แสดงภาพแบบโปร่งแสง มองทะลุไปด้านหลังได้ ไฟล์ประเภทนี้ส่วนใหญ่จะเป็น รูปวาด ภาพการ์ตูน รูป icon, emotion, ป้ายโฆษณาแบนเนอร์ และภาพที่ไม่ต้องการความละเอียดมากนัก



รูป emotion ต่างๆ



สามารถทำภาพแบบโปร่งแสงได้ เมื่อนำไปวางบนพื้นหลังสีอะไร ด้านหลังรูปจะเป็นสีตามพื้นหลัง



2. ไฟล์ประเภท JPEG หรือ JPG (Joint Photographics Expert Group)

เป็นไฟล์รูปภาพที่มีการบีบอัดข้อมูลน้อยกว่าไฟล์ประเภท GIF สามารถแสดงสีได้ 16.7 ล้านสี ภาพที่ได้จะมีความคมชัดมาก ไฟล์ประเภทนี้เหมาะกับภาพที่ต้องการความละเอียดสูง เช่น ภาพถ่ายจากกล้องดิจิตอลหรือ ภาพที่ได้จากการสแกน ภาพที่แสดงการไล่เฉดสี เป็นต้น



3. ไฟล์ประเภท PNG (Portable Network Graphic)

เป็นไฟล์ภาพที่นำมาใช้แทนที่ไฟล์ประเภท GIF เนื่องจากสามารถแสดงภาพได้เร็วกว่า แต่ยังไม่ค่อยแพร่หลายมากนักเนื่องจากไม่สามารถทำเป็นภาพเคลื่อนไหวได้ และมีข้อเสียที่ไม่สามารถใช้กับเว็บเบราเซอร์รุ่นเก่าได้



PNG-8 เป็นรูป แบบที่ใช้สีได้เพียง 256 สี และมีคุณสมบัตคล้ายกับไฟล์ GIF จึงเหมาะสำหรับใช้ทำภาพที่มีสีเรียบๆ เช่น ภาพโลโก้, การ์ตูน สามารถกำหนดพื้นหลังให้โปร่งแสงได้



PNG-24 เป็นรูป แบบที่ใช้สีได้ 16.7 ล้านสี เช่นเดียวกับไฟล์ JPG เหมาะสำหรับภาพถ่าย