หลักสูตรวิชาชีพระยะสั้น โรงเรียนฝึกอาชีพกรุงเทพมหานคร Web Design

E-mail : thaveedaj@hotmail.com จำนวนชั่วโมงที่เรียน 75 ชั่วโมง ทฤษฎี 18 ชั่วโมง ปฏิบัติ 57 ชั่วโมง  การประเมินผลการเรียน คะแนนสอบทฤษฎี 30 % คะแนนเก็บระหว่างภาค 70 % อาจารย์ผู้สอน อ.สุพรรณี ทวีเดช E-mail : thaveedaj@hotmail.com

Topic 1 การออกแบบหน้าเว็บ

Topic Outline 1. ความหมายและความสำคัญของเว็บไซต์ - ส่วนประกอบสำคัญในหน้าโฮมเพจ - ประโยชน์ของเว็ปไซต์ 2. การวางแผนและออกแบบเว็บไซต์ - การวางแผนสร้างเว็บไซด์ - การรวบรวมและวิเคราะห์โครงสร้างข้อมูล - การออกแบบและสร้างเว็บไซต์ - ลงมือสร้างและทดสอบ (Construction and Testing) - เผยแพร่และส่งเสริมให้เป็นที่รู้จัก (Publishing and Promotion) - ดูแลและพัฒนา (Maintenance and Innovation) 3. ทฤษฎีของสี

ความหมายและความสำคัญของเว็บไซต์ โฮมเพจ (Home Page) โฮมเพจ คือคำที่ใช้เรียกหน้าแรกของเว็บไซต์ ซึ่งทำหน้าที่เหมือนเป็นปกหนังสือ โดยโฮมเพจจะเป็นเหมือนทางเข้าของเว็บเพจทั้งหมดในเว็บไซต์นั้น โดยโฮมเพจจะสรุปเนื้อหา และเป็นเหมือนสารบัญของเว็บเพจทั้งหมดในเว็บไซต์นั้น เว็บเพจ (Web Page) เว็บเพจ คือ คำที่ใช้เรียกหน้าเอกสารต่างๆ ที่อยู่ในรูปแบบไฟล์ HTML (HyperText Markup Language) เปรียบเสมือนหน้ากระดาษแต่ละหน้าที่มีเรื่องราวต่างๆ แต่แตกต่างกันตรงที่มีการเชื่อมโยง (Link) ซึ่งเราสามารถคลิกไปที่หน้าใดของโฮมเพจก็ได้ เว็บไซต์ (Web Site) เว็บไซต์ คือ คำที่ใช้เรียกกลุ่มของเว็บเพจ โดยใช้เรียกเว็บที่มีขนาดใหญ่และมีการจดทะเบียนชื่อเว็บไซต์นั้นๆไว้ เช่น http://www.yahoo.com เป็นต้น

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

ประโยชน์ของเว็บไซต์ เป็นการเพิ่มช่องทางในการขายสินค้าและบริการของบริษัทอีกช่องทางหนึ่ง ไม่ต้องเสียค่าใช้จ่ายที่สูง สำหรับการที่จะมีเว็บไซต์เพื่อติดต่อกับโลกภายนอก การมีหน้าร้าน (Homepage) ร้านค้าของตนเอง จะเป็นการเปิดตัวสู่ตลาดโลก สะดวก รวดเร็วในเรื่องการติดต่อ โดยใช้อีเมล์ในการติดต่อลูกค้า สามารถซื้อ-ขายสินค้าหรือบริการ ได้ตลอด 24 ชั่วโมง ช่วยในเรื่องการโฆษณาบริษัทฯ หรือองค์กร ให้เป็นที่รู้จักทั้งในประเทศและต่างประเทศ เป็นอีกช่องทางในการส่งเสริมการขายสินค้าและบริการต่าง ๆ ของบริษัท

การวางแผนและออกแบบเว็บไซต์ 1. การวางแผนสร้างเว็บไซด์ โดยมีหลักที่จะต้องกำหนดไว้ในแผนงานดังนี้ 1.1 ระยะเวลาการทำงาน เป็นการกำหนดเวลาที่จะใช้ในการสร้างเว็บ อาจกำหนดเป็นรายวันหรือรายวันหรือรายสัปดาห์ก็ได้ขึ้นอยู่กับองค์ประกอบด้านอื่น ๆ เช่น ความยากง่าย จำนวนผู้ร่วมงาน ประสิทธิภาพการทำงานของแต่ละคน ฯลฯ 1.2 ทีมงานหรือผู้ร่วมงาน ปกติการสร้างเว็บจะต้องทำงานเป็นทีม อย่างน้อยต้องมี 3 ฝ่าย คือ ผู้เชี่ยวชาญด้านภาษา HTML หรือโปรแกรมสร้างเว็บเพ็จ ผู้เชี่ยวชาญด้านการออกแบบและตกแต่งภาพ และผู้เชี่ยวชาญด้านเนื้อหาหรือบรรณาธิการ 1.3 งบประมาณ เป็นการกำหนดค่าใช้จ่าย เช่น ค่าจ้าง ค่าเดินทาง ค่าอุปกรณ์ ฯลฯ 1.4. อุปกรณ์หรือเครื่องมือช่วยงาน กรณีที่สร้างเว็บเพ็จเองจะมีอุปกรณ์ที่สำคัญ เช่น เครื่องคอมพิวเตอร์ เครื่องสแกนเนอร์ กล้องดิจิตอล และรูปภาพประกอบเว็บเพ็จ เป็นต้น 1.5. ปัญหาและอุปสรรค ในแผนการทำงานควรระบุปัญหาและอุปสรรคที่อาจเกิดขึ้นซึ่งจะส่งผลทำให้งานล่าช้าหรือผิดวัตถุประสงค์ เช่น ผู้ร่วมงานป่วยไม่สามารถมาทำงานได้ พร้อมทั้งหาแนวทางแก้ไขปัญหาไว้ล่วงหน้า

การวางแผนและออกแบบเว็บไซต์ (ต่อ) 2. การรวบรวมและวิเคราะห์โครงสร้างข้อมูล การรวบรวมและวิเคราะห์โครงสร้างข้อมูล เป็นขั้นตอนหนึ่งที่ต่อจากการวางแผน คือ เมื่อได้วางแผนงานเสร็จแล้ว ก็เป็นการนำแผนงานไปปฏิบัติ โดยการรวบรวมข้อมูลที่จำเป็นต้องใช้ในการสร้างเว็บ เช่น เว็บไซด์การท่องเที่ยวก็ควรจะรวบรวมข้อมูลแหล่งท่องเที่ยวให้ได้ครบหรือมากที่สุด ทั้งด้านเนื้อหา ภาพ เสียง และ ภาพเคลื่อนไหว เก็บรวบรวมเป็นไฟล์ข้อมูล หรือ ใส่แฟ้มแยกเป็นหมวดหมู่ เพื่อความสะดวกในการหยิบมาใช้งาน - ข้อมูลข้อความ (.doc, .txt) - ภาพถ่าย หรือ ภาพวาด (.gif, .jpg) - ข้อมูลเสียง (.mp3) - ข้อมูลภาพเคลื่อนไหว (.gif ,swf)

การวางแผนและออกแบบเว็บไซต์ (ต่อ) 3. การออกแบบและสร้างเว็บเพ็จ เป็นขั้นตอนการนำเอาข้อมูลทั้งหมดมาสร้างเป็นเว็บไซด์ด้วยภาษา HTML หรือ เครื่องมือการสร้างเว็บอื่น ๆ ขั้นตอนสำคัญในการออกแบบและสร้างเว็บไซด์ คือ 1.กำหนดจุดประสงค์ของเว็บไซด์ โดยวางเป้าหมายว่าเป็นกลุ่มใด เช่น เว็บไซด์ด้านการท่องเที่ยว เว็บไซด์ขายสินค้า เว็บไซด์ขายหนังสือ ฯลฯ ซึ่งเว็บไซด์แต่ละประเภทจะมีกลุ่มคนที่สนใจอยู่กลุ่มหนึ่ง ผู้สร้างเว็บไซด์ควรกำหนดลงไปให้ชัดเจนตั้งแต่แรกว่า ผู้ชมกลุ่มเป้าหมายหลักเป็นใคร จำนวนประมาณเท่าไร 2.เลือกเว็บเบราว์เซอร์ เป็นการเลือกเว็บเบราว์เซอร์ที่ใช้แสดงผลเว็บไซด์ จะได้กำหนดขนาดกว้าง ยาว และลักษณะการวางองค์ประกอบเว็บให้สวยงาม แสดงผลได้เร็ว 3.วางโครงร่างของเว็บไซด์ กำหนดโครงร่างของเว็บไว้ว่าจะมีทั้งหมดกี่เว็บเพ็จ แต่ละเว็บเจพมีเนื้อหาอะไรบ้าง ควรเขียนเป็นแผนผังเว็บไซด์ออกมาบนกระดาษ 4.ออกแบบหน้าตาของเว็บ เป็นขั้นตอนการลงมือสร้างเว็บเพ็จแต่ละหน้าตามที่ได้ออกแบบไว้ พร้อมกับทดสอบผ่านเว็บเบราว์เซอร์ (แบบ offline)

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

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

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

2. การออกแบบหน้าเว็บเพ็จหลัก (Index)           หน้าแรกของเว็บเพ็จถือเป็นหน้าหลักสำหรับผู้ชม เป็นหน้าตาของเว็บไซด์  เมื่อผู้ชมเปิดเข้ามาก็จะพบกับหน้านี้เป็นอันดับแรก  โดยปกติหน้าแรกจะมีองค์ประกอบหลัก  คือ  โลโก้องค์กรแถบชื่อองค์กร  รูปภาพ  โฆษณา  และแถบลิงก์เข้าสู่เว็บไซด์  ดังตัวอย่าง

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

3. การออกแบบหน้าโฮมเพจ (Home.html) หน้าโฮมเพจหรือหน้าแรกเป็นหน้าเริ่มต้นของเว็บไซด์  เป็นหน้าสารบัญ ที่จะบอกให้ผู้ชมทราบว่าในแต่ละบทประกอบด้วยเรื่องอะไร  อยู่หน้าไหน  การจะเข้าสู่หน้าอื่น ๆ  จะต้องสร้างลิงก์หรือการเชื่อมโยงเอาไว้  โดยนำหน้า Index  บางส่วนมาใช้  หรืออาจตั้งชื่อindex2.html  เป็น home.html ก็ได้

4. การออกแบบหน้าสินค้าใหม่ (NewProduct.html) หน้าสินค้าใหม่ใช้สำหรับแสดงรายการสินค้าใหม่ ๆ  หรือสินค้าขายดี  เพื่อให้ผู้เยี่ยมชมสนใจเลือกซื้อ  รูปแบบข้อหัวเว็บเพ็จ และเมนู จะยังเหมือนเดิม แต่จะเพิ่มเติมสินค้าใหม่ ดังตัวอย่าง

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

5. การออกแบบหน้าแคตตาล็อก (catalog.html) หน้านี้จะคล้ายกับสินค้าใหม่  แต่จะเป็นหน้าที่รวมสินค้าทั้งหมดไว้  โดยแยกเป็นหมวดหมู่อย่างชัดเจน  มีทุกกลุ่มสินค้าทั้งสินค้าใหม่และสินค้าที่มีจำหน่ายอยู่ปัจจุบัน  ดังตัวอย่าง

6. การออกแบบหน้าข้อมูลบริษัท (Profile.html) เว็บเพ็จหน้านี้จะบรรจุข้อมูลประวัติของบริษัท  หน่วยงาน  ตลอดจนผลงานที่ผ่านมา อาจใช้ชื่อ  about.html มีโครงสร้าง ดังตัวอย่าง

7. การออกแบบหน้าสมัครสมาชิก (mumber.html) เป็นหน้าสำหรับให้ผู้ชมสมัครสมาชิกเว็บไซด์  หรือลงทะเบียนเพื่อรับ สิทธิพิเศษ  เช่น  เมื่อซื้อสินค้าจะมีส่วนลด หรือได้คะแนนสะสม  เป็นต้น หน้าสมัครสมาชิกจะไม่เหมือนกับหน้าอื่น ๆ  เพราะต้องออกแบบให้เป็น ไดนามิก  (Dynamic)  คือต้องรับข้อมูลจากผู้ใช้เข้ามาสู่ฐานข้อมูล  ดังนั้น  การสร้างเว็บเพ็จหน้านี้ต้องใช้แอพพลิเคชันฐานข้อมูล  เช่น  ASP , PHP    เป็นต้น  ตัวอย่างการออกแบบ

การวางแผนและออกแบบเว็บไซต์ (ต่อ) 4. ลงมือสร้างและทดสอบ (Construction and Testing) เป็นขั้นตอนที่เว็บจะถูกสร้างขึ้นทีละหน้า โดยอาศัยเค้าโครงและองค์ประกอบที่ออกแบบไว้ เนื่อหาต่าง ๆ จะถูกนำมาใส่และจัดรูปแบบ ลิงค์ เมื่อลงมือสร้างอาจพบสิ่งออกแบบบางอย่างไม่เหมาะสม สามารถใช้โปรแกรมต่าง ๆ ปรับแต่งเว็บได้ เช่น Macromedia Dreamweaver , Microsoft Front Page และ Adobe เว็บไซต์ที่สร้างขึ้นมาจะได้รับการทดสอบก่อนออกนำเผยแพร่ เช่น เรื่องของความถูกต้องของเนื้อหา การทำงานของลิงค์ ตรวจหาความผิดพลาดของโปรแกรม เพื่อให้สามารถชมเว็บไซต์ได้อย่างสมบูรณ์และมีประสิทธิภาพ 5. เผยแพร่และส่งเสริมให้เป็นที่รู้จัก (Publishing and Promotion) เว็บไซต์ที่ประสบความสำเร็จ ต้องมีเนื้อหาที่ดี มีการวางโครงสร้างและการออกแบบ ยังต้องได้รับการโฆษณาและส่งเสริมให้เป็นที่รู้จักในกลุ่มเป้าหมาย เช่น การจัดงานเปิดตัว การลงโฆษณาบนเว็บไซต์อื่น ในสิ่งพิมพ์ วิทยุและโทรทัศน์ 6. ดูแลและพัฒนา (Maintenance and Innovation) เว็บไซต์ที่ได้รับการเผยแพร่ ควรดูแลและปรับปรุงเพื่อให้ผู้ชมรู้สึกวว่ามีการเปลี่ยนแปลง มีความใหม่ทันสมัยอยู่ตลอด โดยตรวจสอบจากสถิติของการเข้าชมว่ามีผู้ชมมากและเป็นที่นิยมของกลุ่มเป้าหมาย

ทฤษฎีของสี สีเป็นเรื่องที่มีความสำคัญมากต่อการทำเว็บไซต์ การเลือกสีให้เข้ากับเนื้อหา จะทำให้เว็บไซต์มีความน่าสนใจและสวยงามซึ่งจะทำให้ดึงดูดให้คนเข้าชมได้มากยิ่งขึ้น โหมดสีคืออะไร? โหมดสี คือ รูปแบบการผสมสีด้วยเทคนิค หรือวิธีการต่าง ๆ เพื่อให้ได้มาซึ่งสีที่ใช้แสดงออกทางจอ หรือเครื่องพิมพิ์ ซึ่งสามารถแบ่งได้เป็น 3 โมเดลหลัก ๆ ดังนี้ คือ 1. โมเดลสีแบบ RGB โมเดลสีแบบ RGB เป็นรูปแบบของสีที่เกิดจากการผสมแม่สีทางแสงสามสีคือ สีแดง(Red) สีเขียว(Green) และสีน้ำเงิน(Blue) รูปแบบนี้นิยมใช้ในการแสดงผลทางหน้าจอมอนิเตอร์ หน้าจอโทรทัศน์ หรืออุปกรณ์ที่ใช้การกำเนิดสีโดยใช้แสงเป็นหลัก ข้อเสียของรูปแบบนี้คือ จำนวนสีทั้งหมดที่สร้างขึ้นมา จะมีเพียงบางส่วนเท่านั้นที่จะสามารถพิมพ์ออกทางงานพิมพิ์ได้ เนื่องจากสีบางสีไม่สามารถสร้างขึ้นได้จริงด้วยหมึกพิมพ์ได้ การกำหนดค่าสี จะมีค่าตั้งแต่ 0 คือ ไม่มีแสงสีเลย จนถึง 255 คือ มีแสงสีอยู่เต็ม ถ้าแสงทุกสีมาผสมกันจะทำให้เกิดแสงสีขาว และในทางกลับกันถ้าไม่มีแสงสีใดเลย จะทำให้เกิดแสงสีดำแดง (Red)เขียว (Green)น้ำเงิน (Blue)

ทฤษฎีของสี (ต่อ) แดง (Red) เขียว (Green) น้ำเงิน (Blue) โมเดลสีแบบ RGB

ทฤษฎีของสี (ต่อ) 2. โมเดลสีแบบ CMYK โมเดลสีรูปแบบนี้เป็นการผสมสีโดยใช้แม่สี ซึ่งประกอบด้วย สีฟ้า (Cyan) สีบานเย็น (Magenta) สีเหลือง (Yellow) และสีดำ (Black) แม่สีเหล่านี้เกิดจากหลักการดูดซับสีของวัตถุ แล้วปล่อยสีที่ไม่สามารถดูดซับได้ออกมา เช่นสีฟ้าเกิดจากการที่แสงสีแดงถูกดูดซับไว้โดยหมึกสีฟ้า แล้วปล่อยแสงสีน้ำเงิน และเขียวให้สะท้อนออกมา จึงผสมกันเกิดเป็นสีฟ้าขึ้นมา เมื่อแม่สีทั้งสามถูกนำมาผสมกันอย่างเท่า ๆ กัน จึงทำให้เกิดเป็นสีดำจริง ๆ ได้ ทำให้สีดำเป็นสีหลัก (Key Color) ของโมเดลสีชนิดนี้ รูปแบบนี้ไม่สามารถแสดงสีได้ทุกสีตามธรรมชาติ แต่จะสามารถพิมพ์ได้จริง การกำหนดค่าสีรูปแบบนี้จะวัดเป็นเปอร์เซ็นต์ความเข้มของแต่ละสีตั้งแต่ 0 ถึง 100 เปอร์เซ็นต์ เมื่อมีค่าน้อย ๆ สีจะสว่าง เมื่อมีค่ามาก ๆ สีจะมีความเข้มหรือมืดมาก บานเย็น (Magenta) ฟ้า (Cyan) เหลือง (Yellow)

ทฤษฎีของสี (ต่อ) โมเดลสีแบบ CMYK ฟ้า (Cyan) เหลือง (Yellow) บานเย็น (Magenta) ฟ้า (Cyan) เหลือง (Yellow) โมเดลสีแบบ CMYK

ทฤษฎีของสี (ต่อ) 3. โมเดลสีแบบ HSB โมเดลสีรูปแบบนี้ เป็นการสร้างสีโดยจำลองวิธีการมองเห็นภาพของตามนุษย์ ดังนั้นจึงสามารถสร้างสีที่ใกล้เคียงกับการมองเห็นของมนุษย์มากที่สุด แต่รูปแบบนี้จะมีปัญหาในตอนที่นำไปใช้ในงานพิมพ์จริง ๆ เนื่องจากการสังเคราะห์สีของเครื่องพิมพ์ไม่สามารถสร้างสีบางสีขึ้นมาได้ สีในโมเดลนี้เกิดจาก H มาจาก Hue S มากจาก Saturation และ B มาจาก Brightness Hue คือ สีที่เกิดจากการสะท้อนแสงจากผิวของวัตถุ ค่า Hue สามารถกำหนดได้จากมุมที่หมุนไปในวงล้อสีมาตราฐาน มีหน่วยเป็นองศา ตั้งแต่ 0-360 องศา ตามปกติจะเรียกค่า Hue นี้เป็นสีออกมาเลย เช่น สีแดง สีเขียว เป็นต้น Saturation คือ ค่าความบริสุทธิ์ หรือความอิ่มตัวของเนื้อสี เป็นการกำหนดว่าสีนั้น ๆ จะมีสีเทาปนมากน้อยแค่ไหน มีหน่วยวัดเป็นอัตราส่วนระหว่างสีจริงกับสีเทา ถ้าหาก S เท่ากับ 100 เปอร์เซ็นต์ หมายถึง มีสีจริงอยู่ทั้งหมดไม่มีสีเทา แต่หาก S เท่ากับ 0 เปอร์เซ็นต์ แสดงว่าไม่มีสีจริงอยู่เลยนอกจากสีเทา Brightness คือ ค่าความสว่างของสี โดยมีหน่วยวัดเป็นเปอร์เซ็นต์ คือถ้าหาก B เท่ากับ 0 เปอร์เซ็นต์ สีที่ได้จะมืดหรือเป็นสีดำ แต่ถ้าหากมีค่างมากขึ้นเรื่อย ๆ จนถึง 100 เปอร์เซ็นต์ แสดงว่าจะสว่างขึ้นเรื่อย ๆ จนเป็นสีขาว

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

จบ