Mind Map

Project

โครงงานวิชาคอมพิวเตอร์
เรื่อง ฝนหลวง

จัดทำโดย
1. ด.ช.อธิศ สุธัมนาถพงษ์ 4/2 เลขที่ 34
2. นาย พณิต สงวนหมู่ 4/1 เลขที่ 24



1.หลักการและเหตุผล

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

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

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

4.ขั้นตอนการดำเนินงานที่คาดหวัง

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

5.เครื่องมือที่ใช้
1. โปรแกรมคอมพิวเตอร์ต่างๆ เช่น Macromedia Dreamweaver
2. แหล่งข้อมูลต่างๆบนอินเตอร์เน็ท

CSS - Cascading Style Sheet

CSS หรือ Cascading Style Sheet คือสิ่งที่คล้ายๆกับโครงสร้างที่กำหนดหลายๆสิ่งไว้ด้วยกันเช่นฟอนท์, สีฟอนท์, สีแบ็คกราวด์ฯลฯ

วิธีใช้คือ จากDreamweaver เหมือนเดิมนะครับ กดที่แถบเมนู Window แล้วCSS Styles

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

ส่วนการนำไปใช้ให้ไฮไลท์ข้อความที่ต้องการ แล้วคลิกขวาที่Style Sheet ของเราแล้วกดapply

เป็นอันเสร็จสิ้นครับ

ข้อดีและข้อเสีย...

-ไฟล์จะเล็กลง เพราะมีcodeน้อยกว่าเดิม

-ปรับแต่งได้ง่าย

-สามารถใช้กับเว็บเพจหลายๆหน้าได้ด้วยชีทเพียงอันเดียว

~ผู้ที่ไม่มีฟอนท์ในชีทของเรา จะมองไม่เห็นฟอนท์

Frames, Good or Bad?

คราวนี้จะมาคุยเกี่ยวกับข้อดีและข้อเสียของเฟรมกัน

เริ่มจากข้อดีก่อนนะครับ

เฟรมนั้นใช้สำหรับแยกหน้าเว็บเพจออกเป็นหลายๆส่วน เพื่อการใช้งานที่ง่ายขึ้น และการแยกออกเป็นหลายๆหัวข้อ หรือแยกออกมาเป็นเมนูได้อย่างสะดวก

ข้อเสีย

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

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

ถ้าให้เลือก ผมจะใช้สำหรับการทำเมนู เพื่อเป็นความสะดวกของเว็บเพจของตน

Frames

กลับมาอีกครั้งกับDreamweaverนะครับ คราวนี้ทดลองเกี่ยวกับการใช้เฟรม หรือโครงนั่นเอง

ถ้าให้อธิบายง่ายๆ เฟรมคืออุปกรณ์ที่ใช้แยกหน้าออกเป็นหลายๆส่วน เพื่อความสะดวกในการมอง และแยกหัวข้อออกจากกันฯลฯ

คราวนี้จะมาอธิบายเกี่ยวกับการใช้นะครับ รับรองว่าไม่ยาก

คราวนี้ไม่มีภาพประหอบเนื่องจาก... ภาพใหญ่ไปไม่มีเวลาย่อ

อธิบายคร่าวๆ การสร้างเฟรมสร้างได้จากtab Layout

พอกดแล้ว จะมีออพชั่นให้เลือกเกี่ยวกับเฟรม ว่าจะไว้ด้านไหน อย่างไร และใส่ชื่อของเฟรม

แค่นี้ก็ได้เฟรมอย่างง่ายแล้วครับ

เมื่อสร้างเฟรมเสร็จแล้วจะสามารถเปลี่ยนสี, ขนาดบอร์เดอร์ และสีแบ็คกราวด์ได้ต่างๆ

ลิงค์ต่างๆที่ใส่ในเฟรมสามารถเลือกให้เมื่อกดแล้วจะไปเปิดหน้าต่างใหม่ที่ใดได้เช่นกัน

Quized

สัปดาห์นี้ได้ทำหลายอย่างมาก แต่จะอธิบายรวมๆนะครับ

ตอนแรกได้ลองใช้ Dreamweaver อย่างเคย ในการเรียนรู้เกี่ยวกับคำสั่งต่างๆที่เกี่ยวกับการใช้ Form

หลังจากนั้นได้ลองใช้ Functions ต่างๆที่เกี่ยวกับแบบสอบถามเช่น ปุ่ม, กรอบ, Dropdown Menu, Check Box ฯลฯ

Text Field และ Hidden Field คือการใส่กรอบสำหรับเขียนตัวอักษร ส่วนHidden นั้นจะทำการซ่อนเอาไว้

Text Area คือกรอบใหญ่ๆสำหรับใส่ข้อความที่เยอะๆ

Checkbox, Radio Button, Radio Group คือกล่องสำหรับเช็กถูก, จุดหรือวงสำหรับคลิกเพื่อแสดงว่าตอบข้อใด ฯลฯ, Radio Button หลายๆอันในForm เดียวกัน ตามลำดับนะครับ

ส่วนใหญ่มีแค่นี้ล่ะครับ วันนี้ขอจบแค่นี้ก่อน

Progress -----> Improvement

ให้พูดง่ายๆคือครั้งนี้จะสรุปเกี่ยวกับงานที่ทำมานะครับ

Week 1

อาทิตย์แรกเลยจริงๆเป็นการปฐมนิเทศ แต่จะเริ่มจากที่เรียนเลยละกัน โดยที่พวกเราได้สร้างบล็อกไว้ใน http://www.blogger.com/

หลังจากที่แต่ละคนได้สร้างบล็อกเสร็จแล้ว ได้ทำการค้นหาเว็บเพื่อวิจารณ์โดยให้เขียนลงบล็อกของเรา.....จบอาทิตย์1^^

Week 2

หลังจากที่มีบล็อกกันแล้ว ในการทำงานเราจึงได้นำมาเขียนวิธีการลงบล็อก

และงานแรกคือ การอธิบายเกี่ยวกับงาน Graphics Design ซึ่งพวกเราได้ไปหาข้อมูล รูปภาพ และทำการอ้างอิง กันหมดทุกคน

เมื่องานเสร็จจึงไปคอมเมนต์คนอื่น เพื่อฝึกการวิจารณ์ และจะทำต่อไปในงานอื่นๆด้วย

Week 3

งานนี้ได้เริ่มทำงานกัน โดยใช้ Adobe Photoshop นะครับ โดยแต่ละกลุ่มได้มีงานของแต่ละคน และที่ผมทำคือการใช้Filter

นอกจากนี้ก็มีการปรับแสง เพื่อให้ภาพดูสว่าง หรือมืด แล้วนำมาเขียนวิธีทำ+ภาพตัวอย่างที่ทำลงบนบล็อก

Week 4

งานครั้งนี้ ได้เปลี่ยนจากโฟโต้ช็อปมาเป็น Macromedia Dreamweaver ซึ่งก็คือโปรแกรมทำเว็บไซต์นั่นเอง

ที่สอนนั้น มีการสร้างตาราง ซึ่งได้ลองทำตารางทั้งขนาดเล็กและใหญ่ หลายๆขนาด ไว้ โดยมีข้อความในตาราง และสีต่างๆเช่น สีขอบตาราง สีตัวอังษรในตาราง หรือแม้แต่ สีของพื้นหลังในตาราง

Week 5

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

จบแล้วนะครับ ที่เรียนมาทั้งหมดนี้ ได้ฝึกการใช้คอมพิวเตอร์ด้วยโปรแกรมต่างๆมากมายเช่น Macromedia Dreamweaver หรือ Adobe Photoshop โดยแต่ละครั้งที่ทำงานได้ฝึกการวิจารณ์ โดยการวิจารณ์งานที่เพื่อนๆได้เขียนไว้

กรสร้างHyperlink ใน Macromedia Dreamweaver

เริ่มจากการใส่ Hyperlink นะคับ หรือLink นั่นเอง
เริ่มที่หน้าจอให้ใส่ข้อความอะไรก็ได้ที่ต้องการลิงค์ไป
ไฮไลท์ข้อความทั้งหมดนั้นแล้วดูตรงProperties ด้านล่างจะมีกรอบที่เขียนว่า Link อยู่
ให้ใส่ Url ที่ต้องการลิงค์ไปแล้วก้อเสร็จแล้วล่ะครับ
อย่างที่บอกมาตอนแรกเป็นวิธีง่ายๆนะ ถ้ายากๆก็เขียน HTML Code เองเลย อิอิ
ต้อไปก็ใส่ภาพเป็นลิงค์นะคับ คล้ายๆแบบเดิม แต่แทนที่จะไฮไลท์ข้อความก็คลิกที่ภาพ
แล้วตรงProperties ให้ใส่ Url ของเราไป
บางคนคงสงสัยต่อ แล้วพวกที่ทำเป็นแผนที่โลกนี่แยกภาพมาประกอบกันเป็นคนละลิงค์หรืออะไร
ไม่ใช่นะคับ มันมีวิธีแยกลิงค์ในภาพหรือในDreamweaver จะเรียกว่า Hotspot
แถบHotspotอยู่ใน Properties นั่ลล่ะคับ ที่เป็นรูปสี่เหลี่ยม วงกลม กับโพลิกอน
ให้คลิกซักอันแล้วในภาพของเราก็ลากตรงส่วนที่จะทำลิงค์ พอวาดเสร็จแล้วจะมีขึ้นมาให้ใส่Urlของเรา
เสร็จไปอีกอย่างละ หุหุ

งานต่อไป(ที่รับสั่งมา)
คือการใส่Ankor นั่นเอง เคยเห็นใช่ใหมที่เวลาอ่านบทความยาวๆในหน้าเดียวกัน จะมี
กระโดด(jump- -)ไปที่บทอื่นๆ ก็คือใส่Ankor ไว้ซึ่งคล้ายกับHyperlink แต่ลิงค์ไปที่หน้าเดียวกันแต่เลื่อนลงหรือขึ้นอีก ที่เห็นเยอะที่สุดคือกลับข้างบนหรือ Topนั่นเอง
ในแถบเครื่องมือด้านบนจะมีรูปสมออยู่นะคับ ให้เลื่อนเคอเซอร์ไปที่ๆต้องการใส่ไว้ก่อน แล้วกดปุ่มสมอนั่นล่ะคับ จะมีหน้าต่างขึ้นมาให้ใส่ชื่อนะ สำคัญมากๆ
แล้วอยากใส่ลิงค์ไปตรงไหนก็ให้ใส่ข้อความแล้วลิงค์ไปตามชื่อของสมอของเรา
แล้วพอลองกดดูก็จะไปที่ๆสมอของเราอยู่นั่งเอง สังเกตว่าเวลาeditจะเห็นสมอแต่เวลาดูจะหายไป เพราะฉะนั้นถ้าทำให้ข้อความเลื่อนไปหน่อยไม่เป็นไรคับ เพราะของจริงจะไม่มีผลกระทบ
วันนี้จบแค่นี้ก่อนละกันๆ
เ

การสร้างตาราง

ลองเปลี่ยนจาก Photoshop มาเป็น Dreamweaver มั่งดูนะคนับ

ภาพหน้าจอคร่าวๆนะ

ส่วนเรื่องที่จะบอกก็คือ วิธีทำตารางนั่นเอง

ลองอธิบายแบบใหม่ๆดู

ก็จะได้ตารางขนาด 2*2 อย่างง่ายมา

Filter >>> Filtered + Light or Darkness?

วันนี้นั่งทำ Photoshop นะคับ หัวข้อคือการใช้ฟังก์ชั่น Filter

คล้ายๆกับการใส่ Art Effect ล่ะคับ ง่ายมากๆ มาดูผลงานกันหน่อยๆ ^^

วิธีทำง่ายๆครับ อัพโหลดภาพที่จะทำลงPhotoshop แล้วกดที่tab Filter ข้างบน จะสังเกตุว่ามีให้เลือกเยอะมากๆ ย้ำว่ามากนะ อเลือกได้ก็จัดการภาพได้เลยครับ จะมีหน้าต่างใหม่ให้ทำเองโดยมีออฟชั่นอื่นๆอีกมากมาย

ก่อนการฟิลเตอร์นะคับและนี่คือหลัง - -"

ดูไม่ออกเลยล่ะสิ ใส่ไปไม่กี่ออฟชั่นเองนะ แค่ Liquify, Artistic Neonglow, Solarize เอง




ต่อจากครั้งที่แล้วนะคับ Photoshop เหมือนเคย แต่ครั้งนี้มาเปลี่ยนแสงให้เป็นสีอื่นๆกันดีกว่า
อันนี้ก็ทำไม่ยากครับ กดตรงปุ่มที่เป็นวงกลม ขาว-ดำ ที่หน้าต่าง Layer แล้วเลือก Levels จะเห็นว่ามีออฟชั่นให้เยอะเหมือนกัน เลือกเปลี่ยนสีได้ตามต้องการครับ
ดูกันได้เลยนะคับ

<<<ก่อนนะคับ และหลัง>>>>

Graphics Design(er)?

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

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

จากภาพที่เห็นด้านบน เป็นตัวอย่างงานกราฟฟิลดีไซน์ของปกหนังสือ "The Book of Kellis" ซึ่งมีความแปลกใหม่ และน่าสนใจ ทำให้มีผู้อ่านสนใจมากมาย

ภาพจากhttp://en.wikipedia.org/wiki/Graphic_design#In_Journalism

New Update***

ตอนนี้อัพเดทชื่อของเพื่อนๆแล้วนะ อยู่ด้านซ้ายของหน้านี้ ลองไปดูของคนอื่นๆกันได้

6.44

หลายคนงง6.44 ไรหว่า - - เกมนะคับ หรือที่รุกจักกันใน DotA 5556(หัวเราะนะ - -")



เอาไปดูเล่นก่อนๆ ตัวใหม่6ตัว


Scourge




Far Seer

Pit Lord

Undying






Sentinel







Storm Seeker










Templar Assassin











Secred Warrior







คราวหน้าถ้าว่างๆ จะลงข้อมูลให้นะๆ
Layout ยังไม่ดี เดี๋ยวมาทำให้ใหม่นะๆ

Web Comment....

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



ไปดูเว็บที่คอมเม้นไว้...

หัดใช้blogspot นะคับ ไม่เก่งมาก วิจารณ์ได้ไม่ต้องเกรงใจเลย

Test...test...หนึ่ง..สอง..สาม

ทดสอบบล็อก No.1