Logo

โลโก้ คืออะไร และจำเป็นแค่ไหนสำหรับกิจการ

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

Logo ที่สมาชิกกลุ่มได้ทำขึ้น

นายปุริม บดีเศรษฐ์ 5305600145

น.ส.อารีรัตน์ จิตประสพเนตร 5305600109

น.ส.ปัณฑ์พัสธร ดิลกรัตน์สุชาติ 5305600117

น.ส.ธัญญรัศม์ ดิลกรัตน์สุชาติ 5305600116

นายอรรถชัย ภูมิราช 5305600141

E-book

หนังสืออิเล็กทรอนิกส์ (e-Book)

กว่าจะมาเป็น e-Book

            หนังสือที่มีอยู่โดยทั่วไป จะมีลักษณะเป็นเอกสารที่จัดพิมพ์ด้วยกระดาษ แต่ด้วยความเปลี่ยนแปลงของ ยุคสมัย และความเปลี่ยนแปลงด้านเล็กทรอนิกส์ ที่มีการพัฒนาต่อเนื่องอย่างไม่หยุดยั้ง ทำให้มีการคิดค้นวิธีการใหม่โดยใช้เทคโนโลยีคอมพิวเตอร์เข้ามาช่วย จึงได้นำหนังสือดังกล่าวเหล่านั้นมาทำคัดลอก (scan) โดยที่หนังสือก็ยังคงสภาพเดิมแต่จะได้ข้อมูลอิเล็กทรอนิกส์ที่เป็นแฟ้มภาพขึ้นมาใหม่ วิธีการต่อจากนั้นก็คือจะนำแฟ้มภาพตัวหนังสือมาผ่านกระบวนการแปลงภาพเป็นตัวหนังสือ (text) ด้วยการทำ OCR (Optical Character Recognition) คือการใช้โปรแกรมคอมพิวเตอร์เพื่อแปลงภาพตัวหนังสือให้เป็นตัวหนังสือที่สามารถแก้ไขเพิ่มเติมได้ 
             การถ่ายทอดข้อมูลในระยะต่อมา จะถ่ายทอดผ่านทางแป้นพิมพ์ และประมวลผลออกมาเป็นตัวหนังสือและข้อความด้วยคอมพิวเตอร์ ดังนั้นหน้ากระดาษก็เปลี่ยนรูปแบบไปเป็นแฟ้มข้อมูล (files) แทน ทั้งยังมีความสะดวกต่อการเผยแพร่และจัดพิมพ์เป็นเอกสาร (documents printing) รูปแบบของหนังสืออิเล็กทรอนิกส์ยุคแรกๆ มีลักษณะเป็นเอกสารประเภท .doc, .txt, .rtf, และ .pdf ไฟล์ ต่อมาเมื่อมีการพัฒนาภาษา HTML (Hypertext Markup Language) ข้อมูลต่างๆ ก็จะถูกออกแบบและตกแต่งในรูปของเว็บไซต์ โดยในแต่ละหน้าของเว็บไซต์เราเรียกว่า "web page" โดยสามารถเปิดดูเอกสารเหล่านั้นได้ด้วยเว็บเบราว์เซอร์ (web browser) ซึ่งเป็นโปรแกรมประยุกต์ที่สามารถแสดงผลข้อความ ภาพ และการปฏิสัมพันธ์ผ่านระบบเครือข่ายอินเทอร์เน็ต 
            เมื่ออินเทอร์เน็ตได้รับความนิยมมากขึ้น บริษัทไมโครซอฟต์ (Microsoft) ได้ผลิตเอกสารอิเล็กทรอนิกส์ขึ้นมาเพื่อคอยแนะนำในรูปแบบ HTML Help ขึ้นมา มีรูปแบบของไฟล์เป็น .CHM โดยมีตัวอ่านคือ Microsoft Reader (.LIT) หลังจากนั้นต่อมามีบริษัทผู้ผลิตโปรแกรมคอมพิวเตอร์จำนวนมาก ได้พัฒนาโปรแกรมจนกระทั่งสามารถผลิตเอกสารอิเล็กทรอนิกส์ออกมาเป็นลักษณะเหมือนกับหนังสือทั่วไปได้ เช่น สามารถแทรกข้อความ แทรกภาพ จัดหน้าหนังสือได้ตามความต้องการของผู้ผลิต และที่พิเศษกว่านั้นคือ หนังสืออิเล็กทรอนิกส์เหล่านี้ สามารถสร้างจุดเชื่อมโยงเอกสาร (Hypertext) ไปยังเว็บไซต์ที่เกี่ยวข้องอื่นๆ ทั้งภายในและภายนอกได้ อีกทั้งยังสามารถแทรกเสียง ภาพเคลื่อนไหวต่างๆ ลงไปในหนังสือได้ โดยคุณสมบัติเหล่านี้ไม่สามารถทำได้ในหนังสือทั่วไป 

ความหมายของ e-Book
        “อีบุ๊ค” (e-book, e-Book, eBook, EBook,) เป็นคำภาษาต่างประเทศ ย่อมาจากคำว่า electronic book หมายถึง หนังสือที่สร้างขึ้นด้วยโปรแกรมคอมพิวเตอร์มีลักษณะเป็นเอกสารอิเล็กทรอนิกส์ โดยปกติมักจะเป็นแฟ้มข้อมูลที่สามารถอ่านเอกสารผ่านทางหน้าจอคอมพิวเตอร์ทั้งในระบบออฟไลน์และออนไลน์        คุณลักษณะของหนังสืออิเล็กทรอนิกส์สามารถเชื่อมโยงจุดไปยังส่วนต่างๆ ของหนังสือ เว็บไซต์ต่างๆ ตลอดจนมีปฏิสัมพันธ์และโต้ตอบกับผู้เรียนได้ นอกจากนั้นหนังสืออิเล็กทรอนิกส์สามารถแทรกภาพ เสียง ภาพเคลื่อนไหว แบบทดสอบ และสามารถสั่งพิมพ์เอกสารที่ต้องการออกทางเครื่องพิมพ์ได้ อีกประการหนึ่งที่สำคัญก็คือ หนังสืออิเล็กทรอนิกส์สามารถปรับปรุงข้อมูลให้ทันสมัยได้ตลอดเวลา ซึ่งคุณสมบัติเหล่านี้จะไม่มีในหนังสือธรรมดาทั่วไป

โปรแกรมที่นิยมใช้สร้าง e-Book
โปรแกรมที่นิยมใช้สร้าง E-Book มีอยู่หลายโปรแกรมแต่ที่นิยมใช้กันมาในปัจจุบันได้แก่
1. โปรแกรมชุด Flip Album
2. โปรแกรม DeskTop Author
3. โปรแกรม Flash Album Deluxe 

ชุดโปรแกรมทั้ง 3 จะต้องติดตั้งโปรแกรมสำหรับอ่าน e-Book ด้วย มิฉะนั้น แล้วจะเปิดเอกสารไม่ได้ ประกอบด้วย

1.1 โปรแกรมชุด Flip Album ตัวอ่านคือ FlipViewer
1.2 โปรแกรมชุด DeskTop Author ตัวอ่านคือ DNL Reader
1.3 โปรแกรมชุด Flash Album Deluxe ตัวอ่านคือ Flash Player    
ความแตกต่างของหนังสืออิเล็กทรอนิกส์ (e-Book) กับหนังสือทั่วไป

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

1. หนังสือทั่วไปใช้กระดาษ หนังสืออิเล็กทรอนิกส์ไม่ใช้กระดาษ 

2. หนังสือทั่วไปมีข้อความและภาพประกอบธรรมดา หนังสืออิเล็กทรอนิกส์ สามารถสร้างให้มี 

    ภาพเคลื่อนไหวได้

3. หนังสือทั่วไปไม่มีเสียงประกอบ หนังสืออิเล็กทรอนิกส์สามารถใส่เสียงประกอบได้

4. หนังสื่อทั่วไปแก้ไขปรับปรุงได้ยาก หนังสื่ออิเล็กทรอนิกส์สามารถแก้ไขและปรับปรุงข้อมูล  

    (update)ได้ง่าย

5. หนังสือทั่วไปสมบูรณ์ในตัวเอง หนังสืออิเล็กทรอนิกส์สามารถสร้างจุดเชื่อมโยง (links) ออก

   ไปเชื่อมต่อกับข้อมูลภายนอกได้

6. หนังสือทั่วไปต้นทุนการผลิตสูง หนังสืออิเล็กทรอนิกส์ต้นทุนในการผลิตหนังสือต่ำ  

    ประหยัด

7. หนังสือทั่วไปมีขีดจำกัดในการจัดพิมพ์ หนังสืออิเล็กทรอนิกส์ไม่มีขีดจำกัดในการจัดพิมพ์ 

    สามารถทำสำเนาได้ง่ายไม่จำกัด

8. หนังสือทั่วไปเปิดอ่านจากเล่ม  หนังสืออิเล็กทรอนิกส์ต้องอ่านด้วยโปรแกรม ผ่านทาง

   หน้าจอคอมพิวเตอร์

9. หนังสือทั่วไปอ่านได้อย่างเดียว หนังสืออิเล็กทรอนิกส์นอกจากอ่านได้แล้วยังสามารถ

   สั่งพิมพ์ (print)ได้

10. หนังสือทั่วไปอ่านได้1 คนต่อหนึ่งเล่ม หนังสืออิเล็กทรอนิกส์ 1 เล่ม สามารถอ่านพร้อมกัน  

    ได้จำนวนมาก (ออนไลน์ผ่านอินเทอร์เน็ต)

11. หนังสือทั่วไปพกพาลำบาก (ต้องใช้พื้นที่) หนังสืออิเล็กทรอนิกส์พกพาสะดวกได้ครั้งละ

    จำนวนมากในรูปแบบของไฟล์คอมพิวเตอร์ใน Handy Drive หรือ CD

12. หนังสืออิเล็กทรอนิกส์เป็นนวัตกรรมที่เป็นมิตรกับสิ่งแวดล้อม       

โครงสร้างหนังสืออิเล็กทรอนิกส์ (e-Book Construction)

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

สรุปโครงสร้างทั่วไปของหนังสืออิเล็กทรอนิกส์ ประกอบด้วย

1. หน้าปก (Front Cover)

 หมายถึง ปกด้านหน้าของหนังสือซึ่งจะอยู่ส่วนแรก เป็นตัวบ่งบอกว่า หนังสือ

เล่มนี้ชื่ออะไร ใครเป็นผู้แต่ง

2. คำนำ (Introduction)

       หมายถึง คำบอกกล่าวของผู้เขียนเพื่อสร้างความรู้ ความเข้าใจเกี่ยวกับข้อมูล และเรื่องราวต่างๆ ของหนังสือเล่มนั้น  

3. สารบัญ (Contents)

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

4. สาระของหนังสือแต่ละหน้า หมายถึง ส่วนประกอบสำคัญในแต่ละหน้า ที่ปรากฏภายในเล่มประกอบด้วย   

            • หน้าหนังสือ (Page Number)

            • ข้อความ (Texts)

            • ภาพประกอบ (Graphics) .jpg, .gif, .bmp, .png, .tiff

            • เสียง (Sounds) .mp3, .wav, .midi

            • ภาพเคลื่อนไหว (Video Clips, flash) .mpeg,   .wav,   .avi

            • จุดเชื่อมโยง (Links) 

5. อ้างอิง หมายถึง แหล่งข้อมูลที่ใช้นำมาอ้างอิง อาจเป็นเอกสาร ตำรา หรือ เว็บไซต์ก็ได้

6. ดัชนี หมายถึง การระบุคำสำคัญหรือคำหลักต่างๆ ที่อยู่ภายในเล่ม โดยเรียงลำดับตัวอักษร

    ให้สะดวกต่อการค้นหา พร้อมระบุเลขหน้าและจุดเชื่อมโยง

7. ปกหลัง หมายถึง ปกด้านหลังของหนังสือซึ่งจะอยู่ส่วนท้ายเล่ม

Adobe Indesign

Adobe Indesign 

โปรแกรม Adobe Indesign เป็นโปรแกรมสำหรับงานด้านสิ่งพิมพ์ งานออกแบบเอกสาร หรือเรียกกันง่ายๆว่า โปรแกรมจัดหน้ากระดาษนั้นเองค่ะ จุดเด่นของโปรแกรม Indesign คือสามารถทำงานด้านการจัดหน้ากระดาษได้เป็นอย่างดี ซึ่งคล้ายๆกับการนำเอาโปรแกรม Pagemaker มารวมกับโปรแกรม Illustrator

ระบบการทำงานของโปรแกรม Indesign นั้น คุณไม่สามารถใช้ Indesign เดี่ยวๆ ได้ คุณต้องมีความรู้พื้นฐานของ Photoshop และ illustrator ด้วย เพราะคุณต้องมีการเตรียมรูปภาพจาก Photoshop และเตรียมคลิปอาร์ต หรือ Logo ต่างๆ มาจาก illustrator ส่วนข้อความคุณสามารถเตรียมมาจาก โปรแกรมประเภท Word Prospering แล้วเราจึงนำมาประกอบรวมกันเป็นหนังสือ หรือแผ่นพับต่างๆ ใน Indesign เสร็จแล้วเราจึง Export ไฟล์งานของเรานั้นเป็นไฟล์ PDFX1-a หรือ PDFX-3 เพื่อส่งโรงพิมพ์ ทางโรงพิมพ์ก็จะทำ Digital Poof ส่งกลับมาให้เราตรวจสอบความเรียบร้อยก่อนจะทำเพลท และส่งให้โรงพิมพ์ต่อไป

ส่วนประกอบของ Adobe Indesign

เรียนรู้เรื่อส่วนประกอบของโปรแกรม Adobe indesign ไปแล้ว ต่อไปเรามาเจาะลึกเข้าไปในส่วนของ Menu bar กันอย่างละเอียด ซึ่งแถบ Menu bar จะอยู่ทางด้านบนสุดของโปรแกรม

ส่วนประกอบของโปรแกรม Indesign

1. Menu Bar : บรรจุคำสั่งใช้งานต่างๆ การทำงานจะคล้ายๆกับโปรแกรมอื่นๆ เช่น Photoshop , Illustrator 2. Option Bar : บรรจุตัวเลือกกำหนดคุณสมบัติหรือตัวปรับแต่งการทำงานให้กับวัตถุ ( ตัวอักษรหรือภาพ ) ที่เรากำลังเลือกทำงาน 3. Tool Bar : เครื่องมือชนิดต่างๆ ที่ใช้ในการทำงาน 4. Document : พื้นที่เอกสาร สำหรับการทำงาน คล้ายกับกระดาษเปล่าๆ ที่คอยให้เราเติมตัวอักษรหรือภาพลงไปนั้นเองค่ะ 5. Pasteboard : พื้นที่ว่างๆ รอบเอกสาร คล้ายกับโต๊ะทำงาน ที่เราสามารถวางสิ่งของอื่นๆได้ 6. Guide : ไม้บรรทัดสำหรับการวัดระยะหรือสร้างเส้น Guide 7. Palette : หน้าต่างย่อยสำหรับช่วยเสริมการทำงาน เมื่อคลิกลงไปแต่ละปุ่มจะเป็นการเรียกใช้งาน Palette แต่ละชนิด

Menu bar-แถบคำสั่ง

เรียนรู้เรื่อส่วนประกอบของโปรแกรม Adobe indesign ไปแล้ว ต่อไปเรามาเจาะลึกเข้าไปในส่วนของ Menu bar กันอย่างละเอียด ซึ่งแถบ Menu bar จะอยู่ทางด้านบนสุดของโปรแกรมส่วนด้านบนสุดของโปรแกรม Indesign จะเป็นแถบรวมคำสั่งหลักของโปรแกรม หรือที่เรียกว่า Menubar ซึ่งลักษณะการทำงานก็จะคล้ายๆ กับ Menubar ของโปรแกรมอื่นๆ เช่น Photoshop , Illustrator เป็นต้น เมื่อคลิกที่หัวข้อที่ต้องการจะมี Dropdown Menu เปิดแสดงคำสั่งย่อย ขึ้นมาให้เราเลือกใช้งานค่ะ

ส่วนด้านบนสุดของโปรแกรม Indesign จะเป็นแถบรวมคำสั่งหลักของโปรแกรม หรือที่เรียกว่า Menubar ซึ่งลักษณะการทำงานก็จะคล้ายๆ กับ Menubar ของโปรแกรมอื่นๆ เช่น Photoshop , Illustrator เป็นต้น เมื่อคลิกที่หัวข้อที่ต้องการจะมี Dropdown Menu เปิดแสดงคำสั่งย่อย ขึ้นมาให้เราเลือกใช้งานค่ะ คำสั่งลัด ( Shortcut ) ในบางคำสั่งของ Menubar จะมี ตัวอักษรทางด้านขวา ซึ่งบอกถึง คำสั่งลัดของเครื่องมือนั้นๆ เพื่อช่วยให้การทำงานรวดเร็ว และคล่องตัว การแก้ไขคำสั่งลัด ( Edit Shortcut ) เราสามารถแก้ไขหรือกำหนดตำแหน่งคีย์ลัดได้เองโดยคลิกที่ Menu Edit > Keyboard Shortcut เพื่อเปิดหน้าต่าง Keyboard Shortcut ขึ้นมาเพื่อแก้ไขหรือกำหนดคีย์ลัดเอง ซึ่งจะประกอบด้วยส่วนต่างๆ ดังนี้

1. ตัวเลือกสำหรับเลือกชุด หรือ set คำสั่งที่เราต้องการใช้งานหรือแก้ไขรายละเอียด 2. ปุ่มสร้างชุดหรือ set คำสั่งคีย์ลัดขึ้นใหม่ ( เมือสร้างแล้วจะแสดงอยู่ในรายการของข้อ 1 ) 3. ปุ่มลบชุดหรือ set คำสั่งคีย์ลัดที่เรากำลังเลือกทำงาน ( ในข้อ 1 ) 4. ปุ่มสำหรับบันทึกผลการแก้ไขให้กับชุดหรือ set คีย์ลัดที่เรากำลังเลือกทำงาน 5. ปุ่มสำหรับแสดงรายละเอียดตำแหน่งคีย์ลัดทั้งหมดของ set ที่เรากำลังเลือกใช้งาน 6. ตัวเลือกสำหรับเลือกหัวข้อของเมนูคำสั่งที่เราต้องการทำงานด้วย ( เช่น เมนู File , Edit , Layout หรือเมนูอื่นๆ ) 7. ช่องสำหรับแสดงรายการและคลิดเลือกคำสั่งที่เราต้องการแก้ไข หรือกำหนดตำแหน่งคีย์ลัดรายการคำสั่งที่แสดงขึ้นมาในช่องนี้ จะขึ้นอยู่กับว่า เรากำลังเลือกทำงานอยู่กับคำสั่งหัวข้อใด ( ในข้อ 6 ) 8. ช่องแสดงตำแหน่งคีย์ลัดของคำสั่งที่เรากำลังทำงาน

9. ปุ่มสำหรับลบตำแหน่งคีย์ลัดของคำสั่งที่เรากำลังทำงาน ( ที่แสดงอยู่ในข้อ 8 ) 10. ช่องสำหรับกำหนดตำแหน่งคีย์ลัดให้กับคำสั่งที่เรากำลังทำงาน ( ในข้อ 7 ) 11. ปุ่มสำหรับตกลงใช้คีย์ลัดใหม่ที่เรากำหนดขึ้นมา ( ในข้อ 10 ) กับคำสั่งที่เรากำลังทำงาน 12. ปุ่ม OK สำหรับจบการทำงาน และปุ่ม Cancel สำหรับยกเลิกการทำงานทั้งหมด

Tool Box

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

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

Icon

Icon คืออะไร

1) ใน graphical user interface (GUI) ของคอมพิวเตอร์ icon (ออกเสียงว่า EYE-kahn ) เป็นภาพที่นำเสนอโปรแกรมประยุกต์ ความสามารถ หรือแนวคิดอื่นหรือเอกลักษณ์เฉพาะด้วยความหมายสำหรับผู้ใช้ ตามปกติ icon สามารถเลือกได้ แต่สามารถเป็นภาพเลือกไม่ได้ เช่น โลโกของบริษัท

2) บนเว็บเพจ icon มักเป็นภาพกราฟฟิกที่นำเสนอหัวข้อหรือหมวดสารสนเทศของอีกเว็บเพจ บ่อยครั้ง icon เป็น hypertext link ไปยังเพจนั้น โดยปกติ icon ได้รับรวบรวมในหนึ่งหรือสองพื้นที่บนเพจ ทั้งเป็นไฟล์กราฟฟิกแยกต่างหากหรือ image map เดี่ยว

3) icon เป็นภาษาโปรแกรมเกี่ยวกับศัพท์ด้วย โดยสามารถคิดถึงการพัฒนาภาษาโปรแกรม SNOBOL

Icon ที่สมาชิกกลุ่มได้ทำขึ้น

นายปุริม บดีเศรษฐ์ 5305600145

น.ส.อารีรัตน์ จิตประสพเนตร 5305600109

น.ส.ปัณฑ์พัสธร ดิลกรัตน์สุชาติ 5305600117

น.ส.ธัญญรัศม์ ดิลกรัตน์สุชาติ 5305600116

นายอรรถชัย ภูมิราช 5305600141

การทำ Gif Animation

มาสร้าง Gif Animation กันเถอะ

ความจริงแล้วการทำ gif อนิเมชั่นมีหลายวิธี แต่ถ้าใครมีPhotoshop และImageReadyอยู่แล้ว ก็ลองทำด้วยวิธีนี้ดู ง่ายดี

ขั้นตอนที่ 1. ตรวจดูว่าเครื่องมี Adobe Photoshop ลงไว้ยัง ปกติถ้าลง Photoshopไว้แล้ว,ก็จะมีImageReady ด้วยอยู่แล้ว
ขั้นตอนที่ 2. เตรียมรูปที่จะนำมาทำ  ตัวอย่างนี้เตรียม 4 รูป ตามด้านล่างเลย


ขั้นตอนที่ 3. เปิดทุกรูปที่จะนำมาทำอนิเมชั่นด้วยPhotoshop จากนั้นลากทุกรูปมารวมกันที่รูปเดียว(ถ้าจะให้ตรงกันเป๊ะให้กดShiftค้างไว้ด้วย)



ขั้นตอนที่ 4. ตอนนี้หากเพื่อนๆทำตามรูป 4 รูปก็จะมาอยู่ไฟล์เดียวกันแล้ว ขั้นตอนต่อไปให้เราคลิกที่ปุ่มImageReadyในPhotoshop เพื่อย้ายไปโปรแกรม ImageReady  แต่ก่อนจะไปเซพไว้ก่อนก็ดี เซฟเป็นPSDนะ


ขั้นตอนที่ 5. พอเข้ามาที่Image Readyแล้ว
ให้เปิดหน้าต่าง Animation  (เลือกwindow=>ติ๊กถูกที่ animation).
จากนั้นคลิกที่ปุ่ม Duplicate เพื่อคัดลอกFrame (ผมก็อปปี้เพิ่มอีก 3 Frameนะ)



ขั้นตอนที่ 6. Frame 1. ให้มันแสดงเฉพาะ picture01 และซ่อนlayerอื่นๆไว้ [ตรงแถบLayerที่เป็นรูปดวงตานะครับ ถ้ามีดวงตาหมายถึงแสดง (show) ถ้าไม่มีแสดงว่าซ่อนครับ], Frame 2. แสดงเฉพาะpicture02, Frame 3. แสดงเฉพาะ picture03, Frame 4. แสดงเฉพาะ picture04. (ลองกดplayดูได้ครับถ้าปรับเสร็จแล้ว) จากนั้นตรงเวลาด้านล่าง0.1sec ให้เราปรับเวลาตามชอบใจ




ขั้นตอนที่ 7. ถ้าปรับแต่งเสร็จเรียบร้อยแ้ล้วให้เซพโดยเลือก Save Optimized As. มันจะเซพเป็นนามสกุล gif



เสร็จแล้ว! แค่นี้ก็เรียบร้อย :)

Gif Animation ที่สมาชิกกลุ่มได้ทำขึ้น

นายปุริม บดีเศรษฐ์ 5305600145

น.ส.อารีรัตน์ จิตประสพเนตร 5305600109

น.ส.ปัณฑ์พัสธร ดิลกรัตน์สุชาติ 5305600117

น.ส.ธัญญรัศม์ ดิลกรัตน์สุชาติ 5305600116

นายอรรถชัย ภูมิราช 5305600141

การออกแบบWebsite

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

องค์ประกอบของการออกแบบเว็บไซต์ ต้องคำนึงถึง 

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

2. ความสม่ำเสมอ ได้แก่ ใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ เช่น รูปแบบของหน้า สไตล์ของกราฟิก ระบบเนวิเกชันและโทนสี ควรมีความคล้ายคลึงกันตลอดทั้งเว็บไซต์ 

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

4. เนื้อหาที่มีประโยชน์ นื้อหาเป็นสิ่งที่สำคัญที่สุดในเว็บไซต์ ดังนั้นควร     

- จัดเตรียมเนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้อง และสมบูรณ์     

 - มีการปรับปรุงและเพิ่มเติมให้ทันเหตุการณ์อยู่เสมอ     

 - เนื้อหาไม่ควรซ้ำกับเว็บไซต์อื่น จึงจะดึงดูดความสนใจ 

5. ระบบเนวิเกชันที่ใช้งานง่าย ต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก      

- ใช้กราฟิกที่สื่อความหมายร่วมกับคำอธิบายที่ชัดเจน     

 - มีรูปแบบและลำดับของรายการที่สม่ำเสมอ เช่น วางไว้ ตำแหน่งเดียวกันของทุกหน้า  

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

7. การใช้งานอย่างไม่จำกัด ผู้ใช้ส่วนใหญ่สามารถเข้าถึงได้มากที่สุด    

 - เลือกใช้บราวเซอร์ชนิดใดก็ได้ในการเข้าถึงเนื้อหา     

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

8. คุณภาพในการออกแบบ การออกแบบและเรียบเรียงเนื้อหาอย่างรอบคอบ สร้างความรู้สึกว่าเว็บไซต์มี….คุณภาพ ถูกต้อง และเชื่อถือได้  

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

ขั้นตอนการออกแบบเว็บเพจ  

    ก่อนจะลงมือสร้างเว็บ จำเป็นต้องผ่านกระบวนการออกแบบให้ดีก่อน นอกจากความสวยงามแล้วสิ่งที่ต้องคำนึงถึงคือ

 1.  มีสารบัญแสดงรายละเอียดของเว็บเพจนั้น 

 2. เชื่อมโยงข้อมูลไปยังเป้าหมายได้ตรงกับความต้องการ  

3. เนื้อหากระชับ  สั้น  ทันสมัย  

4. สามารถตอบโต้กับผู้ใช้ได้ทันท่วงที  

5. มีรูปภาพประกอบการนำเสนอที่ดี ไม่ควรมีรูปภาพมากเกินไป  

6. เข้าสู่กลุ่มเป้าหมายได้อย่างถูกต้อง  

7. ใช้งานง่าย  

8. เป็นมาตรฐานเดียวกัน
ขั้นตอนการพัฒนาเว็บเพจ 

1. วางแผน/กำหนดข้อหัว และเนื้อหาที่นำเสนอ 
2. สร้างผังความสัมพันธ์ของข้อมูลแบบรากต้นไม้  
3. กำหนดชื่อไฟล์ของเอกสารเว็บ

 การตั้งชื่อไฟล์และโฟลเดอร์ ชื่อและนามสกุลไฟล์ ตลอดจนโฟลเดอร์ต่างๆ ควรใช้อักษรภาษาอังกฤษตัวพิมพ์เล็ก หรือผสมกับตัวเลข 0-9 หรือเครื่องมือขีดลบ/ขีดล่าง ถ้ามีไฟล์จำนวนมากที่มีชื่อ และนามสุกลเป็นตัวพิมพ์ใหญ่ หรือผสม สามารถดาวน์โหลดโปรแกรมเปลี่ยนชื่อไฟล์ตัวพิมพ์ใหญ่ เป็นตัวพิมพ์เล็กจากเว็บ www.nectec.or.th/coursewareเพื่อช่วยแปลชื่อได้


 4. สร้างโฟลเดอร์เฉพาะสำหรับเอกสารเว็บแต่ละชุด/เรื่อง ในโฟลเดอร์ที่สร้าง สามารถสร้างโฟลเดอร์ย่อย เพื่อเก็บไฟล์ให้เป็นระบบระเบียบได้ 

5. จัดหาภาพหรือสร้างภาพที่เกี่ยวข้องกับเนื้อหา ได้แก่
     สร้างภาพด้วยโปรแกรมกราฟิก เช่น Adobe PhotoShop
     คัดเลือกจาก Clipart fot Web เช่น CD-ROM รวมภาพสำหรับเว็บ 
6. ภาพที่เลือกใช้ทั้งหมด ต้องเก็บไว้ในโฟลเดร์ที่สร้างไว้ก่อนแล้ว 
7. สร้างเอกสารเว็บ โดยลงรหัส HTML หรือใช้โปรแกรมสร้างเว็บช่วย       
7.1 การสร้างเว็บเพจ โดยลงรหัส HTML
     - ใช้ภาษา HTML โดยป้อนคำสั่งภาษา HTML ด้วยโปรแกรม Text Editor เช่น NotePad
     - ใส่คำสั่งได้ตามต้องการ  - ไม่เหมาะสำหรับผู้พัฒนาในระดับต้น        
7.2 .ใช้โปรแกรมสร้างเอกสร้างเว็บ เช่น Macromedia Dreamweaver
         - ไม่ต้องศึกษาภาษา HTML
         - จุดด้อยคือ โปรแกรมจะไม่รู้จักคำสั่ง HTML ใหม่ๆ 
8. ภาษาไทยกับการสร้างเว็บ เลือกรูปแบบการเข้ารหัสภาษาไทยที่ถูกต้อง Windows-874 หรือTIS-620
9. กำหนดฟอนต์ให้กับข้อมูล เพื่อให้แสดงผลภาษาไทยได้ถกต้อง เช่น MS San Serif, Thonburi เป็นฟอนต์ที่เหมาะสมที่สุดในการแสดงผลภาษาไทย เช่น การเว้นวรรค เป็นระยะในประโยคเพื่อให้เบราเซอร์แสดงผลภาษาไทย  
10. ไฟล์เอกสาร HTML ทุกไฟล์ต้องบันทึกไว้ในโฟลเดอร์ที่สร้างไว้ก่อน รวมกับรูปภาพที่จัดเตรียมไว้แล้ว 
11. ตรวจสอบผลเอกสาร HTML ด้วยเบราเซอร์ซึ่งมีหลายค่ายหลายรุ่น เว็บเบราเซอร์แต่ละค่าย แต่ละรุ่น จะรู้จักคำสั่ง HTML ไม่เท่ากัน 
12. ส่งข้อมูลขึ้นเครื่องคอมพิวเตอร์แม่ข่าย (server)
13. ตรวจสอบผลของเครื่องคอมพิวเตอร์ลูกข่ายที่เรียกดูข้อมูลจากเครื่องแม่ข่าย


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

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

1.การใช้สีวรรณะเดียว ความหมายของสีวรรณะเดียว (tone) คือกลุ่มสีที่แบ่งออกเป็นวงล้อของสีเป็น 2วรรณะ คือ 

1.1 วรรณะร้อน (warm tone) ซึ่งประกอบด้วย สีเหลือง สีส้ม สีแดง สีม่วง สีเหล่านี้ให้อิทธิพล ต่อความรู้สึก ตื่นเต้น เร้าใจ กระฉับกระเฉง ถือว่าเป็นวรรณะร้อน   

1.2  วรรณะเย็น (cool tone) ประกอบด้วย สีเหลือง สีเขียว สีน้ำเงิน สีม่วง สีเหล่านี้ดู เย็นตา  ให้ความรู้สึก สงบ สดชื่น (สีเหลืองกับสีม่วงอยู่ได้ทั้งสองวรรณะ)
     การใช้สีแต่ละครั้งควรใช้สีวรรณะเดียวในภาพทั้งหมด เพราะจะทำให้ภาพความเป็นอันหนึ่งอันเดียวกัน  (เอกภาพ) กลมกลืน มีแรงจูงใจให้คล้อยตามได้มาก  

2.การใช้สีต่างวรรณะ    หลักการทั่วไป ใช้อัตราส่วน 80% ต่อ 20% ของวรรณะสี คือ ถ้าใช้สีวรรณะร้อน80% สีวรรณะเย็นก็ 20% เป็นต้น ซึ่งการใช้แบบนี้สร้างจุดสนใจของผู้ดู ไม่ควรใช้อัตราส่วนที่เท่ากันเพราะจะทำให้ไม่มีสีใดเด่น ไม่น่าสนใจ 3.การใช้สีตรงกันข้าม      สีตรงข้ามจะทำให้ความรู้สึกที่ตัดกันรุนแรง สร้างความเด่น และเร้าใจได้มากแต่หากใช้ไม่ถูกหลัก หรือ ไม่เหมาะสม หรือใช้จำนวนสีมากสีจนเกินไป ก็จะทำให้ความรุ้สึกพร่ามัว ลายตา ขัดแย้ง ควรใช้สีตรงข้าม ในอัตราส่วน 80% ต่อ20% หรือหากมีพื้นที่เท่ากันที่จำเป็นต้องใช้ ควรนำสีขาว หรือสีดำ เข้ามาเสริม เพื่อ ตัดเส้นให้แยกออก จาก กันหรืออีกวิธีหนึ่งคือการลดความสดของสีตรงข้ามให้หม่นลงไป สีตรงข้ามมี 6 คู่ได้แก่ 

สีเหลือง     ตรงข้ามกับ     สีม่วง     

สีแดง        ตรงข้ามกับ     สีเขียว       

สีน้ำเงิน      ตรงข้ามกับ     สีส้ม      

สีเขียวเหลือง     ตรงข้ามกับ     สีม่วงแดง  

สีส้มเหลือง        ตรงข้ามกับ     สีม่วงน้ำเงิน      

สีส้มแดง           ตรงข้ามกับ     สีเขียวน้ำเงิน 

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

1. Dreamweaver

2. FrontPage

3. HomeSite

4. HotDog Pro

5. GoLive

6. NetObjects Fusion

7. CoffeeCup

หลักการออกแบบ webpage 1. รูปภาพ (Graphic or Photo) การใช้รูปภาพในเว็บไซต์มีอยู่ 2 จุดประสงค์ คือ เพื่อเพิ่มความสวยงามและดึงดูดความสนใจในการเข้าชมเพื่อแสดงข้อมูล และรายบละเอียดต่าง ๆ ของสินค้า ทั้งนี้รูปภาพดังกล่าวจะมีทั้งรูปที่เป็นภาพจริง (Photo) และภาพที่วาดขึ้นโดยใช้เทคนิคต่าง ๆ (Graphic) โดยรูปภาพดังกล่าวจะสามารถใช้เป็นจุดเชื่อมโยงได้อีกด้วยโดยที่สามารถทำการสร้างจุดเชื่อมโยงได้หลายจุดในภาพ 1 ภาพ (เรียกว่าImage map) หรือการแม็ปภาพ  2. แบบฟอร์ม (Form) ในการส่งข้อมูลผ่าน Web Site นอกเหนือการเขียน e-mail ยังสามารถส่งข้อมูลในแบบฟอร์มที่จัดทำอยู่ใน Web Site ได้โดยมีข้อดีคือทางผู้ใช้จะตอบเฉพาะคำถามที่ทางผู้ดูแล Web Site ต้องการทราบเท่านั้น โดยจะประหยัดเวลาทั้งสองฝ่ายในการเก็บข้อมูลดังกล่าว ทั้งนี้แบบฟอร์มต่าง ๆ จะมีอยู่ในหลายรูปแบบเช่น Check Box, Radio Button หรือ Scroll Bar ก็ได้  3. ภาพยนตร์และเสียงประกอบ (Movie and Sound) การเพิ่มภาพยนตร์และเสียงประกอบจะทำให้ Web Site มีความน่าสนใจและดึงดูดใจผู้เข้าชมมากขึ้น นอกจากเพิ่มความสวยงามและความสมจริงของข้อมูลแล้ว ยังเป็นการง่ายต่อผู้ใช้ที่จะรับรู้ข้อมูลข่าวสารต่าง ๆ ด้วยหรืออาจจะทำการแสดงแฉพาะเสียงประกอบเพียงอย่างเดียวก็ได้ เช่น เสียงเพลงประกอบตลอดเวลาที่ผู้ใช้ดูข้อมูลอยู่ใน Web Site
 4. ตัวนับ (Hit Counter) ใช้นับจำนวนผู้เข้าชม Web Site (โดยมีพื้นฐานมาจากการใช้ CGI Script) และทำการวัดประสิทธิภาพของการโฆษณาและประชาสัมพันธ์ 5. กรอบ (Frame) เพื่อความสวยงามและความสะดวกในการใช้งาน ผู้ออกแบบสามารถทำการแบ่งจอภาพออกเป็นหลายๆส่วน ในกรณีที่ Web Site มีขนาดใหญ่ และมี Linkหลายๆชุดต่อกันออกไปทำให้การที่จะกลับมาที่จุเริ่มต้นสามารถทำได้โดยง่าย หรือการที่ต้องการข้อมูลบางอย่างแสดงผลภาพบางอย่างอยู่ตลอดเวลาใน Web Site
 6. CGI Script เป็นการประมวลผลข้อมูลจากผู้ใช้ด้วย CGI หรือ Common Gateway Interface จะเป็นตัวกลาง ที่ทำหน้าที่เชื่อมโยง Web Site กับผู้ใช้เพื่อใช้ในการเก็บข้อมูลและนำไปประมวลผลส่งกลับให้กับผู้ใช้หรือให้กับผู้ดูแล Web Site (Web Master) เพื่อนำไปใช้ประโยชน์อื่น ๆ ต่อไป เช่น การสำรวจความคิดเห็น ทำ Poll การสั่งซื้อสินค้าทางอินเตอร์เนต การสมัครสมาชิกและอื่น ๆ (หมายเหตุ: ข้อมูลที่ประมวลผลแล้วสามารถนำกลับมาเพื่อแสดงใน Web Site ได้ในภายหลัง) 
 7. จาวา (Java) เป็นภาษาที่สามารถทำงานโดยไม่ขึ้นกับแพลตฟอร์ม (หมายความว่าJava สามารถทำงานได้แม้ในลักษณะของโปรแกรมที่แตกต่างกัน ไม่ว่าจะทำงานบนWindows NT หรือ UNIX ก็เหมือนกัน) โดย Java จะนำมาใช้สำหรับการโต้ตอบกับระบบ Multimedia เพื่อเพิ่มความน่าดึงดูดใจของ Web Site เช่นการใส่เสียงเพลง เป็นต้น รวมทั้งการใช้งานด้านความปลอดภัย เช่นการส่งข้อมูลของบัตรเครดิต เป็นต้น นอกจากนี้ยังใช้เป็นคำสั่งในการประมวลผลในลักษณะเดียวกันกับ CGI Script อีกด้วย สรุปการออกแบบเว็บและโฮมเพจต้องอาศัยความเข้าใจเบื้องต้นได้แก่ 1.รูปแบบการเชื่อมโยงที่นิยมใช้ในการพัฒนาเว็บ ( Link ) ซึ่งได้แก่
     - การเชื่อโยงในไฟล์เดียวกัน
     - การเชื่อโยงระหว่างไฟล์  HTML และไฟล์ HTML ด้วยกัน
     - การเชื่อโยงจากไฟล์ HTML ไปยังเว็บอื่นๆ 2. การจัดทำภาพข้อความเพื่อนำเสนอในรูปแบบตั้งแต่เบื้อต้นจนถึงระดับที่สวยงามเร้าใจ
     - ภาพที่ใช้ควรอยู่ในตระกูล jpg - gif แต่ในปัจจุบันโปรแกรมทั่วๆไปมีความสามารถแปลงไฟล์ให้ได้จากหลายสกุล
     - การใช้ข้อความควรคำนึงถึงฟอนต์ ( Font ) ซี่งถ้าต้องการความสวยงาม ขนาดคงที่ และแน่ใจว่า ผู้ใช้จะเห็นอย่างนั้นแน่นอนควรจัดทำเป็น Image Text ( ข้อความที่แปลงเป็นภาพ ) เสียก่อนที่จะนำมาเสนอบนเว็บ จะช่วยได้มาก 3.  การออกแบบไฟล์เริ่มต้นของ   Homepage ในชื่อ index.htm หรือ .htm และเก็บไฟล์เป็นชุดหมวดหมู่เพื่อเรียกใช้งานง่ายและไม่เกิดปัญหาในการหาไฟล์ไม่พบ แล้วแสดงผลผิดพลาด 4. การทำเฟรม ( Frame ) การจัดทำเฟรมเป็นการคำนึงถึงผู้ใช้ จึงออกแบบให้เกิดการใช้งานได้สะดวกยิ่งขึ้นคือ
     - ลดการคลิกเลื่อนจอภาพ ( Scrolling ) เพื่ออ่านข้อมูลยาวๆ ในหน้าจอได้
     - จัดแบ่งพื้นที่บนจอให้เกิดระเบียบสวยงามน่าใช้และเป็นสัดส่วนอิสระจากกัน