การประมวลผลข้อมูลให้เป็นสารสนเทศ

ความหมายและข้อมูลสารสนเทศ

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

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

สัญลักษณ์ในการเขียนผังงาน

สัญลักษณ์การเขียนผังงาน Flowchart

    การเขียนผังงาน เป็นการเขียนแผนภาพเพื่อแสดงขั้นตอนการทำงาน โดยนำภาพสัญลักษณ์

ต่าง ๆ มาเรียนต่อกัน สัญลักษณ์ที่นิยมใช้ในการเขียนผังงานนั้นหน่วยงานที่ชื่อว่า American

National Standards Institute (ANSI) และ International Standard Organization (ISO)

ได้ร่วมกันกำหนดสัญลักษณ์มาตรฐานเพื่อใช้ในการเขียนผังงานดังนี้

ลักษณะการเขียนผังงาน

       ลักษณะผังงานที่ดี ควรมีลักษณะดังนี้

1. ทุกผังงานต้องมีจุดเริ่มต้นและจุดสิ้นสุดเพียงอย่างล่ะ 1 แห่งเท่านั้น

2. ทุกสัญลักษณ์ของผังงานต้องมีลูกศรชี้ทิศทางเข้าและลูกศรชี้ทิศทางออกอย่างล่ะ 1 ลูกศร

3. สัญลักษณ์จุดเริ่มต้นมีเฉพาะลูกศรชี้ทิศทางออก

4. สัญลักษณ์การตัดสินใจมีลูกศรชี้ทิศทางเข้า 1 ทิศทางมีลูกศรชี้ทิศทางออก 2 ทิศทาง

5. ทิศทางของลำดับขั้นตอนของการทำงานนิยมเขียนจากบนลงล่าง หรือจากซ้ายไปขวา

6. เส้นของลูกศรที่บอกทิศทางของลำดับขั้นตอนวิธีการทำงานไม่ควรเขียนตัดกัน หรือทับกัน

7. ไม่ควรเขียนเส้นของลูกศรเพื่อทำการเชื่อมโยงลำดับขั้นตอนที่อยู่ห่างกันมาก

8. การเขียนผังงานในส่วนของการกำหนดค่า หรือการคำนวณค่านิยมใช้เครื่องหมายลูกศรแทนการ

      ใช้เครื่องหมายเท่ากับ

หลักการเขียนผังงานที่ดี

หลักการเขียนผังงานที่ดี

-ใช้สัญลักษณ์ตามที่กำ หนดไว้

-ใช้ลูกศรแสดงทิศทางการไหลของข้อมูลจากบนลงล่าง หรือจากซ้ายไปขวา

- คำ อธิบายในภาพควรสั้นกะทัดรัด และเข้าใจง่าย

- ทุกแผนภาพต้องมีลูกศรแสดงทิศทางเข้า - ออก

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

ในการเขียนผังงาน เรามีหลักการจัดภาพทิศทางของผังงาน และข้อตกลงดังนี้

1.ทิศทาง เริ่มจากบนลงล่าง และจากซ้ายไปขวา

2. สัญลักษณ์ที่ใช้ต้องเป็นตามมาตรฐาน อาจมีขนาดต่าง ๆ กัน แต่รูปร่างเป็น

สัดส่วนตาม มาตรฐาน

3.หลีกเลี่ยงการโยงเส้นไปมา ในทิศทางที่ตัดกัน ให้ใช้เครื่องหมายแสดงจุด

ต่อเนื่องได้ และทุกจุดในผังงานไม่มีการปล่อยจุดใดจุดหนึ่งไว้ลอย ๆ

4.ใช้คำ อธิบายที่กะทัดรัดและเข้าใจได้ง่าย

5. มีความเป็นระเบียบ เรียบร้อย สะอาด และควรเขียน ชื่อของผังงาน ผู้เขียนวันที่
และเลขลำดับหน้าเสมอ

หลักการและวิธีการแก้ปัญหาด้วยกระบวนการเทคโนโลยีสารสนเทศ

กระบวนการเทคโนโลยีสารสนเทศ

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

กระบวนการเทคโนโลยีสารสนเทศ  เพื่อให้ได้มาซึ่งสารสนเทศที่ดี  มีขั้นตอน ดังนี้

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

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

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

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

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

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

การแก้ปัญหาด้วยกระบวนการเทคโนโลยีสารสนเทศ

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

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

หลักการแก้ปัญหาด้วยกระบวนการเทคโนโลยีสารสนเทศ

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

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

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

 ซอฟต์แวร์ไมโครซอฟต์แอกเซส(Microsoft Access)  ช่วยแก้ปัญหาการจัดเก็บข้อมูล  โดยจัดเก็บข้อมูลจำนวนมาก
ให้เป็นระเบียบเรียบร้อย  สะดวกต่อการค้นหาและนำมาใช้ 

ซอฟต์แวร์ไมโคซอฟต์เพาเวอร์พอยนต์(Microsoft PowerPoint)  ช่วยแก้ปัญหาการนำเสนองาน  โดยทำให้การ
สร้างงานนำเสนอทำได้ง่าย  และน่าสนใจกว่าการนำเสนองานตามปกติที่ไม่ใช้คอมพิวเตอร์

ซอฟต์แวร์โปรเดสท็อป (Pro/DESKTOP)  ช่วยแก้ปัญหาในการออกแบบและสร้างชิ้นงานจำลอง  โดยอำนวยความสะดวกในการออกแบบและสร้างชิ้นงานจำลองด้วยเครื่องมือต่าง ๆ ที่มีในซอฟต์แวร์ซึ่งมีความแม่นยำ  และทราบ
ผลทันที  รวมถึงประหยัดค่าใช้จ่ายในการซื้อวัสดุ  อุปกรณ์มาเขียนแบบหรือสร้างชิ้นงานจำลอง

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



ภาษาคอมพิวเตอร์	การใช้งาน
ภาษาฟอร์แทน(Fortran)	ใช้แก้ปัญหาด้านการคำนวณทางวิทยาศาสตร์  วิศวกรรมศาสตร์  และงานวิจัยต่าง ๆ
ภาษาโคบอล(COBOL)	ใช้แก้ปัญหาด้านงานธุรกิจ
ภาษาเบสิก(BASIC)	ใช้แก้ปัญหาต่าง ๆ ได้ทุกสาขาวิชา  เหมาะสำหรับผู้ที่ไม่ใช่นักเขียนโปรแกรมอาชีพ  และผู้ฝึกเขียนโปรแกรมใหม่ ๆ
ภาษาปาสคาล(Pascal)	ใช้ในการเรียนเขียนโปรแกรมคอมพิวเตอร์
ภาษาซีและซีพลัสพลัส(C และ C++)	ใช้ในการเขียนโปรแกรมควบคุมการทำงานของอุปกรณ์คอมพิวเตอร์  และเขียนโปรแกรมเชิงวัตถุ
ภาษาวิชวลเบสิก(Visual Basic)	ใช้สร้างโปรแกรมประยุกต์ที่ใช้งานได้หลากหลายบนระบบปฎิบัติการวินโดวส์  และใช้เป็นโปรแกรมแบบรูปภาพ  เช่น  ปุ่มคำสั่งต่าง ๆ
ภาษาจาวา(Java)	ใช้เขียนโปรแกรมประยุกต์สำหรับเชื่อมต่อเข้าสู่อินเทอร์เน็ต  และซอฟต์แวร์ที่ใช้ในอินเทอร์เน็ต
ภาษาเดลไฟ(Delphi)	ใช้ในการเขียนโปรแกรมเชิงจินตภาพเพื่อสร้างส่วนติดต่อผู้ใช้ที่เป็นแบบรูปภาพ  เช่น  ปุ่มคำสั่งต่าง ๆ

โปรแกรมเชิงวัตถุและโปรแกรมเชิงจินตภาพแตกต่างกันอย่างไร

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

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

วิธีการแก้ปัญหา

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

    วิธีการแก้ปัญหาเป็นหนึ่งในขั้นตอนการประมวลผลของกระบวนการเทคโนโลยีสารสนเทศ  ซึ่งแบ่งได้  
ขั้นตอน  ดังนี้

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



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

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

สิ้นสุด

2.2การใช้สัญลักษณ์  เป็นการใช้สัญลักษณ์รูปแบบต่าง ๆ มาเรียงต่อกันเป็นแผนภาพเพื่อสื่อสารให้ผู้ที่พบเห็นเข้าใจตรงกัน  ซึ่งสัญลักษณ์ที่กล่าวถึงนี้ได้กำหนดขึ้นโดยสถาบันมาตรฐานแห่งชาติอเมริกา (ANSI : The American National Standard Institute)  ดังตัวอย่าง

เคล็ดลับการสร้างเว็บ

จิตวิทยาเกี่ยวกับสี

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

—————————————————————————————————————————————————— ที่มาของข้อมูล : http://www.hellomyweb.com 10 ข้อที่ไม่ละเลยในการทำเว็บไซต์ 1.วางแผนภาพรวมของเว็บไซต์ การวางตำแหน่งของเนื้อหา และเนวิเกชัน โดยอาจวาดรูปร่างคร่าวๆ ของเว็บไซต์ ไว้ก่อนว่าจะจัดวางตำแหน่งอย่างไร ทั้งนี้เพื่อประโยชน์ของผู้พัฒนาเว็บไซต์เองจะได้ไม่เสียเวลาในภายหลังด้วย 2.แทรก Meta tags ในเว็บไซต์ของคุณ เพื่อจะทำให้เว็บไซต์ของเราง่ายต่อการค้นหา 3.อย่าใส่ภาพกราฟิกเคลื่อนไหวได้มากเกินไป ในหลายๆเว็บไซต์จะเห็นได้ว่ามีการใส่กราฟิกภาพเคลื่อนไหวได้ จำนวนมาก ทั้งเป็น Flash หรือ gif เพื่อดึงดูดความสนใจ หรือเพื่อเน้นส่วนต่างๆในเว็บไซต์ แต่การใช้ภาพกราฟิก เคลื่อนไหวมากเกินไป จะก่อนให้เกิดความสับสนต่อผู้ใช้งานได้ ดังนั้นเราจึงควรใช้แต่พอดีเน้นในส่วนที่ต้องการ เน้นเท่านั้น บางเว็บไซต์อาจใช้งาน Javascript เพื่อสร้างความแปลกใหม่ให้กับเว็บไซต์ แต่ถ้าเราใช้งานมากเกิน ไปอาจก่อให้เกิดความสับสน หรือเป็นอุปสรรคในการใช้งานของผู้เข้าชมได้ อีกข้อที่อยากจะเตือนคือ flash , javascript หรือ animations ต่างๆนั้น search engine ไม่ได้ในไปรวมในฐานข้อมูลด้วย  ดังนั้นข้อมูลที่เราแสดงผลด้วยเครื่องมือดังกล่าวนั้นก็จะไม่ถูก นำไปรวมในฐานข้อมูลของ search engine ด้วย จึงควร ระวังในส่วนนี้ให้ดี 4.อย่าให้เว็บไซต์ของคุณ แสดงผลนานกว่า 8 วินาที หรือมีขนาดใหญ่กว่า 40 kb เรื่องนี้เป็นเรื่องที่เคยพูดถึง หลายครั้งแล้ว แต่ก็ถือว่าเป็นเรื่องที่สำคัญมากที่มักจะถูกละเลย ตามที่เราได้เคยกล่าวไปแล้วว่า ไม่มีใครอยาก รอคอย ถ้าเว็บไซต์ของเราแสดงผลนาน ก็เป็นไปได้อย่างสูงว่าผู้ชมอาจปิดเว็บไซต์เราไปก็ได้ ไฟล์ flash , animation , เพลง , ภาพขนาดใหญ่เป็นตัวแปรสำคัญในเรื่องนี้ เราจึงควรลดการใช้งาน ซอยสิ่งเหล่า ในให้ไปอยู่ในหน้าต่างๆ หรือลดขนาดลง และให้ผู้ชมเลือกเองว่าต้องการดูส่วนใด เราเพียงทำลิงค์ หรือภาพขนาด เล็กเพื่อลิงค์ไปหาภาพขยายใหญ่ไว้ให้ 5.ขนาดเว็บไซต์ของคุณ ขนาดเว็บไซต์มีผลอย่างยิ่งกับการแสดงผลในหน้าจอขนาดต่างๆ เราจึงควรกำหนดขนาด เว็บไซต์ไม่ให้เกิน 750px หรือ กำหนดการแสดงผลเป็น % เพื่อลดปัญหาเหล่านี้ 6.อย่าเชื่อใจ WYSIWYG HTML editors อย่างเชน Dreamweaver , Frontpage เพราะการแสดงผลเว็บเพจผ่าน โปรแกรมพวกนี้ กับการแสดงผลผ่าน web browser ต่างๆอาจไม่เหมือนกัน เราจึงควรตรวจสอบก่อนทุกครั้ง และ ตรวจสอบด้วย browser อย่างน้อย 2 ชนิดที่ได้รับความนิยม คือ 1. Internet Explorer 2.Firefox  7.การเว้นช่องว่าง การเว้นช่องว่างระหว่างวัตถุ เช่นช่องว่างของตัวอักษรในตาราง ช่องไฟระหว่างตัวอักษรด้วยกันเอง  เป็นสิ่งที่จำเป็นมาก การเว้นช่องว่างระหว่าง ตัวอักษร จะทำให้เกิดความสาวงาม อ่านสบายตา การเว้นช่องว่างใน ตาราง ทำให้ตารางดูสวยงามขึ้น เราสามารถใช้ CSS ในการควบคุมสิ่งที่กล่าวมาทั้งหมดได้ และควรให้ความสำคัญ กับเรื่องนี้ 8.การใช้สีในเว็บเพจ สีก็เป็นสิ่งที่สำคัญมากในเว็บเพจ สีที่ต่างกันให้อารมณ์ต่างกัน เราจึงควรเลือกสีให้เหมาะ กับเนื้อหา หรือกลุ่มผู้ชม ถ้าเลือกสีฉุดฉาดก็เหมาะกับกลุ่มเด็ก เลือกสีเข้มจะเหมาะกับกลุ่มผู้ใหญ่อ่านเรื่อง จิตวิทยาเกี่ยวกับสีคลิกที่นี่ สำหรับในส่วนสีที่ใช้แสดงเนื้อหานั้น อย่าใช้สีตัวอักษรโทนดำ บนพื้นหลังสีดำ หรืออย่าใช้สีตัวอักษรโทนขาว  ในพื้นหลังโทนขาว เพราะจะทำให้อ่านตัวอักษรได้ยาก สีที่เหมาะจะแสดงตัวอักษรดีสุดคือ ตัวอักษรสีดำ พื้นสีขาว  สีเหลืองเหมาะสำหรับใช้เน้นข้อความสำคัญ 9.ระวังเรื่องหน้าต้อนรับหลายๆเว็บไซต์นิยมจะให้หน้าแรก เป็นหน้ากล่าวคำยินดีต้อนรับ หรือหน้าแจ้งข่าวสาร ต่างๆ ซึ่งเป็นสิ่งที่ไม่ดีสำหรับเว็บไซต์ขนาดเล็ก เพราะจะส่งผลต่อ เนื้อหาของเว็บไซต์ของคุณใน Search Engine  และอันดับที่ปรากฏใน Search Engine  10.Pop upไม่แนะนำให้ใช้ pop up เนื่องมาจากว่า browser ส่วนใหญ่ตอนนี้จะตัดไม่แสดงผล pop up อยู่แล้ว ทำให้ข้อมูลที่อยู่ใน pop up ก็ไม่แสดงผลไปด้วย และการใช้ pop up เหมือนกับการใช้เพื่อโฆษณาซะมากกว่า —————————————————————————————————————————————————— ที่มาของข้อมูล : http://www.hellomyweb.com

เบื้องต้น Dreamweaver CS4

ประวัติความเป็นมาของโปรแกรม Dreamweaver

Adobe Macromedia Dreamweaver ผู้พัฒนา อะโดบีซิสเต็มส์ (เริ่มพัฒนาโดย แมโครมีเดีย) รุ่นเสถียร ล่าสุด CS4 (10.0) รุ่นทดลอง ล่าสุด (27 มีนาคม พ.ศ. 2550) โอเอส Windows Mac OS X ชนิด โปรแกรมแก้ไข HTML ลิขสิทธิ์ Closed source เว็บไซต์ http://www.adobe.com/ อะโดบี ดรีมวีฟเวอร์ (Adobe Dreamweaver) หรือชื่อเดิมคือ แมโครมีเดีย ดรีมวีฟเวอร์ (Macromedia Dreamweaver) เป็นโปรแกรมแก้ไข HTML พัฒนาโดยบริษัทแมโครมีเดีย  (ปัจจุบันควบกิจการรวมกับบริษัท อะโดบีซิสเต็มส์) สำหรับการออกแบบเว็บไซต์ ในรูปแบบ WYSIWYG กับการควบคุมของส่วนแก้ไขรหัส HTML ในการพัฒนาโปรแกรม ที่มีการรวมทั้งสองแบบเข้าด้วยกันแบบนี้ ทำให้ ดรีมวีฟเวอร์เป็นโปรแกรมที่แตกต่าง จากโปรแกรมอื่นๆ ในประเภทเดียวกัน ในช่วงปลายปีทศวรรษ 2533 จนถึงปีพ.ศ. 2544  ดรีมวีฟเวอร์มีสัดส่วนตลาดโปรแกรมแก้ไข HTML อยู่มากกว่า 70% ดรีมวีฟเวอร์มีทั้งใน ระบบปฏิบัติการแมคอินทอช และไมโครซอฟท์วินโดวส์ ดรีมวีฟเวอร์ยังสามารถทำงาน บนระบบปฏิบัติการแบบยูนิกซ์ ผ่านโปรแกรมจำลองอย่าง WINEได้ รุ่นล่าสุดคือ  ดรีมวีฟเวอร์ CS4 การทำงานกับภาษาต่างๆ ดรีมวีฟเวอร์ สามารถทำงานกับภาษาคอมพิวเตอร์ในการเขียนเว็บไซต์แบบไดนามิค ซึ่งมีการใช้ HTML เป็นตัวแสดง ผลของเอกสาร เช่น ASP, ASP.NET, PHP, JSP และ ColdFusion รวมถึงการจัดการฐานข้อมูลต่างๆ อีกด้วย และใน เวอร์ชันล่าสุด (เวอร์ชัน CS4) ยังสามารถทำงานร่วมกับ XML และ CSS ได้อย่างง่ายดาย รุ่นต่างๆ Dreamweaver 1.0 (ธันวาคม ค.ศ. 1997) Dreamweaver 1.2 (มีนาคม ค.ศ. 1998) Dreamweaver 2.0 (ธันวาคม ค.ศ. 1998) Dreamweaver 3.0 (ธันวาคม ค.ศ. 1999) Dreamweaver UltraDev 1.0 (มิถุนายน ค.ศ. 2000) Dreamweaver 4.0 (ธันวาคม ค.ศ. 2000) Dreamweaver UltraDev 4.0 (ธันวาคม ค.ศ. 2000) Dreamweaver MX (พฤษภาคม ค.ศ. 2002) Dreamweaver MX 2004 (10 พฤศจิกายน ค.ศ. 2003) Dreamweaver 8 (13 พฤศจิกายน ค.ศ. 2005) Dreamweaver CS3 Dreamweaver CS4

ที่มาของข้อมูลและภาพ : http://pirun.ku.ac.th/~g5166298/lesson5.html ความสามารถของโปรแกรม Dreamweaver  ในการเขียนเว็บเพจ จะมีลักษณะคล้ายกับการพิมพ์งานในโปรแกรม Text Editor ทั่วไป คือว่ามันจะเรียงชิดซ้ายบน ตลอดเวลา ไม่สามารถย้าย หรือ นำไปวางตำแหน่งที่ต้องการได้ทันที่เหมือนโปรแกรมกราฟิก เพราะฉะนั้นหากเรา ต้องการจัดวางรูปแบบตามที่เราต้องการ ก็ใช้ตาราง Table เข้ามาช่วยจัดตำแหน่ง ซึ่งเมื่อมีการจัดวางรูปแบบที่ ซับซ้อนมากขึ้น การเขียนภาษา HTML ก็ซับซ้อนยิ่งขึ้นเช่นกัน โปรแกรม Dreamweaver อาจจะไม่สามารถเขียนเว็บ ได้ตามที่เราต้องการทั้งหมด วิธีการแก้ไขปัญหาที่ดีที่สุดคือ ควรจะเรียนรู้หลักการของภาษา HTML ไปด้วย ซึ่งถือว่า เป็นสิ่งที่จำเป็นมากสำหรับผู้ที่ต้องการประกอบอาชีพ Webmaster แบบจริงจัง อาจจะไม่ต้องถึงกับท่องจำ Tag ต่าง ๆ  ได้ทั้งหมด แต่ขอให้รู้ เข้าใจหลักการก็พอแล้ว เพราะหลาย ๆ ครั้งที่เราจะเขียนเว็บใน Dreamweaver แล้วกลับได้ ผลผิดเพี้ยนไป ไม่ตรงตามที่ต้องการ ก็ต้องมาแก้ไข Code HTML เอง และความสามารถของ Dreamweaver สรุปได้ดังนี้ 1. สนับสนุนการทำงานแบบ WYSIWYG (What You See Is What You Get) หมายความว่า เว็บที่เราเขียนหน้าจอ Dreamweaver ก็จะแสดงแบบเดียวกับเว็บเพจจริงๆ ช่วยให้เราเขียนเว็บเพจง่ายขึ้น ไม่ต้องเขียน Code HTML เอง 2. มีเครื่องมือในการช่วยสร้างเว็บเพจ ที่มีความยืดหยุ่นสูง 3. สนับสนุนภาษาสคริปต์ต่างๆ ทั้งฝั่ง Client และ Server เช่น Java, ASP, PHP, CGI, VBScript 4. มีเครื่องมือในการ Upload หน้าเว็บเพจไปที่เครื่อง Server เพื่อทำการเผยแพร่งานที่เราสร้างในอินเทอร์เน็ต โดยการส่งผ่าน FTP หรือ โดยการใช้โปรแกรม FTP ภายนอกช่วย เช่น WS FTP 5. รองรับมัลติมีเดีย เช่น การใส่เสียง, การแทรกไฟล์วิดีโอ, การใช้งานร่วมกับโปรแกรม Flash , Fireworks ที่มาของข้อมูล : http://aster.spu.ac.th/ การใช้งานเบื้องต้น (สิ่งที่ควรทราบ) 1. ภาษา HTML เป็นภาษาที่ออกแบบสำหรับการแสดงผลเท่านั้น! ไม่สามารถประมวลผล หรือ ใช้เขียนเว็บ แอพพลิเคชั่นได้ 2. หากต้องการเพิ่มลูกเล่น หรือ เทคนิคพิเศษ เช่น Effect ต่าง ๆ ต้องนำภาษา JavaScript มาเสริม HTML อีกที 3. การจัดรูปแบบใน Code เช่นการขึ้นบรรทัดใหม่ การเว้นวรรค ไม่มีผลต่อการแสดงผลทาง Web Browser 4. การขึ้นบรรทัดใหม่ ต้องใช้ Tag <BR> หรือ กดปุ่ม Shift+Enter 5. การขึ้นย่อหน้าใหม่ ต้องใช้ Tag <P> หรือ กดปุ่ม Enter 6. การเว้นวรรค ต้องใช้ Tag พิเศษ คือ &nbsp; หรือ กดปุ่ม Ctrl+ Shift + Spacebar 7. หลักการอ่าน Tag ของภาษา HTML จะอ่านค่าจาก Tag ที่อยู่ด้านในก่อน 8. ไฟล์ HTML และ Script ต่างๆ สามารถเปิดแก้ไขในโปรแกรม Text Editor ทั่ว ๆ ไป ไม่จำเป็นต้องแก้ไขใน  Dreamweaver เพียงอย่างเดียว 9. การแทรกข้อความ และ การปรับแต่งค่าต่าง ๆ ให้คลิกตำแหน่งที่ต้องการ แล้วพิมพ์ข้อความตามต้องการ หรือให้เลือกข้อความเมื่อต้องการกำหนดค่าต่าง ๆ เพิ่มเติม ที่มาของข้อมูล : http://aster.spu.ac.th/ ส่วนประกอบต่างๆ ของโปรแกรม Dreamweaver

แถบคำสั่ง (Menu Bar) เป็นแถบที่ใช้เก็บคำสั่งทั้งหมดของโปรแกรม • แถบคำเครื่องมือ (Toolbar) รวบรวมปุ่มคำสั่งที่ใช้งานบ่อย • แถบวัตถุ (Object Palette) เป็นกลุ่มเครื่องมือต่างๆ ที่ใช้ในการควบคุมวัตถุ บนชิ้นงาน เอกสารเว็บ เช่น เส้นกราฟิก  (Horizontal Rule), ตาราง, รูปภาพ, เลเยอร์ (Layer) • แถบแสดงสถานะ (Status Bar) คอยแสดงสถานะการทำงานต่างๆ ของเรา • แถบควบคุมการทำงาน (Properties Palette) เป็นรายการที่ปรับเปลี่ยนได้ ตามลักษณะการเลือกข้อมูล เช่น หากมีการ เลือกที่จะพิมพ์ หรือแก้ไขเนื้อหา รายการก็จะเป็น ส่วนทำงานที่เกี่ยวกับอักษร, การจัดพารากราฟ ถ้าเลือกที่รูปภาพ  รายการในแถบนี้ ก็จะเป็นคำสั่งต่างๆ ที่เกี่ยวกับ การควบคุมเรื่องรูปภาพ • ส่วนของ Panel Group เป็นกลุ่มของแถบเครื่องมือที่สามารถเรียกใช้งานได้อย่างรวดเร็ว เพื่อให้ง่ายในการสร้าง  Application บนอินเทอร์เน็ต เช่น การแทรก Code ของ JavaScript และ VBScript ลงในเว็บเพจได้อย่างง่ายๆ  โดยสามารถเรียกใช้งานได้จาก Panel Group

การใช้งาน Dreamweaver 8

ความรู้พื้นฐานก่อนการสร้างเว็บไซต์

1. ความรู้เบื้องต้นเกี่ยวกับอินเทอร์เน็ต

          อินเทอร์เน็ต (Internet)  เป็นเครือข่ายคอมพิวเตอร์ที่ใหญ่ที่สุดในโลก    ซึ่งรวมเอาเครือข่ายย่อยเป็น
จำนวนมากต่อเชื่อมภายใต้มาตรฐานเดียวกันจนเป็นเครือข่ายคอมพิวเตอร์ขนาดใหญ่ ทำให้ทั่วโลกเชื่อมโยงกัน เป็นเครือข่ายเดียวกันได้ในรูปแบบ ของ เวิลด์ ไวด์ เว็บ (World Wide Web)

ลักษณะของเวิล์ด ไวด์ เว็บ (World Wide Web)

          เวิล์ด ไวด์ เว็บ (World Wide Web – www) หรือเรียกย่อ ๆ ว่าเว็บ (Web) เป็นอินเทอร์เน็ตชนิดหนึ่ง ที่อยู่ในรูปแบบของกราฟิก (Graphic) และมัลติมีเดีย (Multimedia) ซึ่งประกอบด้วยข้อความ (Text)  ภาพ (Image)  เสียง (Sound) และ ภาพเคลื่อนไหว (Movie) เป็นต้น ผู้ใช้ทั่วไปสามารถเข้าไปในเว็บได้ง่ายและจะได้รับข้อมูลครบถ้วนปัจจุบันถ้าพูดถึงอินเทอร์เน็ต คนทั่วไปจะเข้าใจว่าหมายถึงเว็บ ทั้งที่จริงแล้วเว็บเป็นส่วนหนึ่งของอินเทอร์เน็ตเท่านั้น

เว็บไซต์ (Website)  และเว็บเพจ (Webpage)

          เอกสารหรือส่วนที่ติดต่อกับผู้ใช้ในเว็บ เรียกว่า เว็บเพจ (Webpage)  หมายถึง เอกสารหนึ่งหน้า
การใช้เว็บก็คือ การเปิดอ่านหรือเปิดใช้เว็บแต่ละหน้านั่นเอง  เว็บเพจอาจสร้างขึ้นด้วยภาษาคอมพิวเตอร์  เช่น  HTML,  ASP,  PHP,  JAVA ฯลฯ 
          เมื่อนำเว็บเพจหลาย ๆ หน้ามารวมกันและระบุอยู่ในอินเทอร์เน็ต หรือ ยูอาร์แอล (Uniform Resource Locator – URL) ให้กับเว็บเพจกลุ่มนั้นจะเรียกว่า เว็บไซต์ (Web Site)
          เมื่อเปิดเว็บไซต์ขึ้นมาจะพบกับหน้าแรกของเว็บไซต์   ซึ่งเรียกว่า โฮมเพจ (Homepage)  ซึ่งเป็นหน้าที่สำคัญที่สุดและเป็นหน้าที่จะเชื่อมโยงไปยังเว็บเพจและเว็บไซต์อื่น ๆ

เว็บเบราว์เซอร์ (Web Browser) 

          เว็บเบราว์เซอร์ (Web Browser) คือ โปรแกรมที่ใช้สำหรับเปิดเว็บเพจหรือรับส่งข้อมูลตามที่เครื่องลูกข่ายร้องขอเมื่อเราเปิดเข้าสู่อินเทอร์เน็ต  เว็บเบราว์เซอร์ที่ได้รับความนิยมปัจจุบันมีหลายโปรแกรม 
เช่น  Microsoft Internet Explorer (IE),  Google Chrome, Mozilla Firefox  และ Opera

ภาษา  HTML

          ภาษา  HTML  ย่อมาจากคำว่า  Hypertext Markup Language  เป็นภาษาที่ใช้สำหรับสร้างเว็บเพจ  โดยจะได้รับการแปลหรือการแสดงผลโดยเว็บเบราว์เซอร์ซึ่งสามารถแสดงได้ทั้งข้อความ  ภาพ  และเสียง

โดเมนเนม  (Domain Name)

          โดเมนเนม (Domain Name) หรือที่เข้าใจกันทั่วไป คือ ชื่อเรียกเว็บไซต์นั่นเอง  การจดทะเบียนโดเมนเนมจึงเป็นการลงทะเบียนชื่อให้กับเว็บไซต์ของเราในโลกอินเทอร์เน็ต  โดเมนเนมที่ขอจดทะเบียนจะต้องไม่ซ้ำกับคนอื่น  และควรตั้งให้เกี่ยวข้องกับเนื้อหาภายในเว็บไซต์  หรือเกี่ยวข้องกับสินค้าและ
การบริการ ตลอดจนใช้คำง่าย ๆ ให้จำได้  เช่น  sanook.com  และ yahoo.comเป็นต้น

บทที่ 1 ทำความรู้จักกับ Dreamweaver

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

การเปิดใช้งานโปรแกรม

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

         1. คลิกที่ปุ่ม  Start  บนทาสก์บาร์

         2. เลือกคำสั่งย่อย  Programs >> Macromedia >> Macromedia Dreamweaver 8 เรียกผ่านไอคอน บนเดสก์ทอป

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

หน้าจอการทำงานของโปรแกรม Dreamweaver 8

หลังจากที่เลือก การทำงานในส่วนที่ 2 แล้ว เลือก  HTML  เราจะพบกับหน้าต่างการทำงาน ซึ่งประกอบด้วย

 1.Title Bar คือ ส่วนที่แสดงชื่อโปรแกรม และชื่อไฟล์ที่กำลังทำงานอยู่

 2.Menu Bar คือ ส่วนที่รวมคำสั่งการทำงานทั้งหมด แล้วแบ่งย่อยตามประเภทและในคำสั่งหลักมักจะมีเมนูลัดให้กดด้วย

3.Object Palette คือ แถบแสดงปุ่มต่างๆของโปแกรม

 



หากเราคลิกปุ่ม Show as Tabs ก็จะเป็นการแสดงเครื่องมือดังนี้

 

4.Toolbar คือ แถบเครื่องมือสำหรับการใช้งานด้าน HTML และอินเตอร์เน็ท ประกอบด้วย

 Show Code View แสดงการทำงานในรูปแบบ HTML

Show Code and Design Views แสดงการทำงานแบบ HTML ควบคู่กับแสดงพื้นที่ออกแบบ

 Show Design View แสดงการทำงานแบบแสดงพื้นที่ออกแบบ

 Document Title ตั้งชื่อของเว็บเพจ

 Check Errors ตรวจสอบข้อผิดพลาดจาก Browser

  File Management จัดการกับไฟล์ๆ ที่อยู่ในเว็บเพจ

  Preview / Debug in Browser ทดลอง ดูเว็บเพจทาง Browser หรือกด F12

  View Options มุมมองในการทำงานเพิ่มเติม

5.หน้าต่างออกแบบเว็บเพจ ใช้พิมพ์ข้อความและจัดเรียงรูปภาพ

6.Tag Selector ใช้ควบคุมการทำงานในรูปแบบ HTML



7.Window Size กำหนดพื้นที่ใช้งานตามต้องการ

8.Estimate Download Time แสดงเวลา ที่ใช้ในการดาวน์โหลด


 9.Properties ใช้กำหนดรูปแบบต่างๆ ของตัวอักษร และรูปภาพ รวมถึงการสร้างลิงค์

 หน้าต่าง Proties สามารถจะเปิดปิดได้ตามต้องการด้วยการคลิกที่ เพื่อขยายหน้าต่างการทำงานให้มากขึ้น
หรือคลิกที่ Window > properties ก็ได้เช่นกัน

 

10. Dockable Window เปิดหน้าต่างที่รวบรวมเครื่องมืออำนวยความสะดวกเอาไว้  โดยคลิกที่ เพื่อเปิด-ปิดได้ เช่นเดียวกับ Properties

ไฟล์ภาพชนิดใดสามารถนำมาใช้ในเว็บเพจได้บ้าง

1. ไฟล์.gif  เป็นไฟล์ชนิดแรกที่แสดงผลบนบราวเซอร์ได้ทุกชนิด โดยส่วนใหญ่ไฟล์ .gif มีเป็นรูป

ประเภท ที่มีสีพื้นเป็นส่วนใหญ่ ไม่มีการไล่สี เช่น รูปโลโก้  รูปการ์ตูน ไฟล์รูปที่กำหนดพื้นหลังเป็น

แบบโปร่งใส หรือไฟล์ภาพเคลื่อนไหว

2. ไฟล์ .jpg เป็นไฟล์ชนิดแรกที่แสดงผลบนบราวเซอร์ได้ทุกชนิด เช่นกัน  ไฟล์รูปชนิดส่วนใหญ่ 

เ็ป็นภาพถ่าย  หรือภาพที่มีรายละเอียดการไล่สีเยอะ ๆ 

3. ไฟล์.png เป็นไฟล์ที่เพิ่งมีการพัฒนาขึ้นมาใช้บนบราวเซอร์ แต่ยังไม่ได้รับความนิยมมากนัก