ขออนุญาติเปลี่ยนหัวข้อ.....

เนื่องจากถ้าทำโครงการหลวงทั้งหมด(คงทำไมทัน)จึงขอเปลี่ยนหัวข้อเป็นการแพทย์แทนขอรับกระผม(โครงการหลวงเยอะเกินทำมิทัน) - -*

องค์ประกอบของเว็บ *0*

วางแผนเค้าโครง [โครงงาน]

เรื่องที่จะทำคือ [โครงการหลวง]

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

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

-ประโยชน์ คือ....ทำให้ผู้ที่มาอ่านเว็บเข้าใจในสิ่งที่พระองค์ทำเพื่อชาติมากยิ่งขึ้น

-ขั้นตอนการดำเนินงาน....

-เครื่องมือที่ใช้ คือ....Computer/internet/สารานุกรมไทย

ผู้ดำเนินงาน

1. น.ส. ณัฐา สายชุ่มดี ม.4/4

2. น. พงศธร วิจินวัฒนะ ม.4/3

CSS

การทำ CSS โดย Dreamweaver

เปิดCSS ได้โดยไปคลิกที่เมนูวินโดว์แล้วเลือก CSS Styles แล้วจะปรากฏแถบของCSSขึ้นทางด้านขวาของจอ




1.การสร้างcss styles โดยคลิกปุ่ม+ที่ด้านล่างของแถบcssกำหนดชื่อ ลักษณะรูปแบบของสไตล์แล้วกดโอเค

2.กำหนดลักษณะต่างๆเช่น ฟอนต์ ขนาด ความหนา-บาง และอื่นๆ

3.กด โอเคสามารถใช้สไตล์ได้โดยลากเมาส์ครอบตัวอักษรแล้วดูที่แถบProperties>Stylesแล้วเลือสไตล์ที่ต้องการข้อดีแล้วข้อเสียของcss

ข้อดีของCSS



1.ตัวอักษรมีหลายลักษณะ

2.สามารถสร้างกรอบล้อมรอบได้ ทำให้ดูสนใจมากยิ่งขึ้น

ข้อเสียของCSS



1.มีcssในเว็บ ทำให้ไม่สามารถย่อหรือขยายcssได้2.ถ้าในเครื่องไม่มีฟอนต์ของcssก็ไม่สามารถดูฟอนต์นั้นได้

Frames

ข้อดีและข้อเสียของเฟรม/การนำเฟรมไปใช้
ข้อดีคือ

1.ใช้แบ่งเนื้อที่ของเพจ
2.สามารถเปิดเว็บในส่วนต่างๆของเพจได้

ข้อเสียคือ

1.ยิ่งเฟรมเยอะยิ่งจะทำให้โหลดโหลดเพจนานขึ้น
2.ถ้าเฟรมเยอะเกินไปจะทำให้ดูน่าเกลียด

ใช้เฟรมทำเว็บโดย

1.ใช้สร้างแทปเมนู
2.กำหนดเป็นเทมเพลต(ต้นแบบ)ของเว็บได้

การทำ Q&A

อย่างที่รู้ๆกันว่าจะต้องใช้โค้ดจากDreamwaverนะครับแต่ว่าในที่นี้มีวิธีทำที่ง่ายกว่าการก๊อฟโค้ดจากดรีมเวฟเวอร์ซึ่งก้คือเว็บhttp://www.internetraining.com/Templates/CKQuiz/index.html กระผมจะขอใช้ในเวบนี้แทนนะขอรับ ^^(ง่ายต่อการอธิบาย)
1. ก้เข้าไปในเวบข้างต้นแล้วเลือก Radio Buttons ตรง How many questions in the quiz? ให้ใส่จำนวนของคำถามที่ต้องการจะตั้งลงไปแล้วกด Submit
2. ตรง How many choices per question? ให้ใส่จำนวนตัวเลือกของคำถามที่ต้องการแล้วกดต่อด้วย Submit
3. ใส่หัวข้อคำถามและคำตอบลงไปทางด้านขวามือจะมีจุดขาวๆอยู่ให้เลือกกดจุดตรงคำตอบที่ถูกต้อง
4. เมื่อพิมพ์เสร็จหมดแล้วให้กด See The Code Below แล้วจัดการ Copy Code
5. เปิดเข้าไปในปรับแต่งเทมเพลตเลือดเพิ่มองค์ประกอบของหน้าเลือกหัวข้อ HTML/Java Script
6. ใส่ชื่อหัวข้อแล้ว Paste Code ลงตรงกรอบเนื้อหา
7. กดบันทึกการเปลี่ยนแปลงก็เป็นอันเสร็จ
(ถ้าเป็นFormsจะเป็น
Text Field-ใส่ข้อความ
Textarea-ใส่ข้อความ
Check Box-เลือกตัวเลือก
Radio Button-เลือกตัวเลือก
Radio Group-เลือกตัวเลือก
List/Menu-เลือเมนู แทน)

ปัญหา.....

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

ปล.กระผมขอให้ทุกๆท่านนำความรู้นี้ที่ได้ไปใช้อย่างเป็นประโยชน์นะครับ ^^

Link โดย Dreamwaver ^๐^

- Linkตัวอักษรก็ทำได้โดยการพิมพ์คำที่เราต้องการลงไปแล้วลากคลุมคำนั้นต่อด้วยการใส่Linkในช่องด้านล่าง

และสามารถปรับแต่งสีตัวอักษรได้ด้วย

ตัวอย่าง Maple

- Linkรูปภาพธรรมดา Insert>>Image>>คลิกที่รูปภาพแล้วใส่ Link ตรงด้านล่าง

ทำ Link รูปภาพ เราก้กด Insert>>Image>>คลิกรูปภาพแล้วด้านล่างของMapจะมีรูปอยู่

เมื่อนำไปลากใส่รูปภาพจะได้ดังนี้

กดตรงรูปสีฟ้าแล้วใส่Linkตรงช่องด้านล่างก็เป็นอันเสร็จ ^^

- เชื่อมโยงไปยังส่วนต่างๆของเว็บใช้ในกรณีที่มีบทความยาวๆแล้วแบ่งเป็นหลายๆส่วน1.นำเมาส์ไปคลิกที่จะลิงค์ไปยังส่วนนั้นเช่น จะขึ้นไปหน้าจอบนสุดก็คลิกส่วนบนสุดของหน้าจอ2.ดูที่Menu>Insert>Named Anchor3.ตั้งชื่ออะไรก็ได้เช่น top4.ครอบข้อความที่จะลิงค์ไปแล้วดูที่ช่องLink พิมพ์ #ตามด้วยชื่อของNamed Anchor เช่น #top

****ถ้าจะให้กดลิงค์แล้วขึ้นหน้าจอใหม่ทำได้โดยดูที่หน้าต่างpropertiesแล้วเลือกTartget>_blank****

- เชื่อโยงโดยใช้ Jump Menu1.คลิกที่ปุ่มใต้เมนูเปลี่ยนเป็นForms2.คลิกปุ่มJump Menu(อันที่9)3.text-ชื่อรายการ when selected, go to URL-ใส่Urlลงไป กดBrowseเพื่อลิงค์ไปยังไฟล์ของตนเอง4.กด+/- เพื่อเพิ่ม/ลบรายการ กดลูกศรขึ้นลงเพื่อเลื่อรายการขึ้นลง เมื่อทำเสร็จแล้วคลิกOk5.สามารถแก้ไขรายการได้โดยดูที่propertiesแล้วคลิกList Values

Table

การสร้าง Table โดยใช้ Code จาก Macromedia Dreamweaver ใส่ลงไปตรงช่อง แก้ไขHtml ของบล๊อกนะครับ


1. แบบมองเห็นเส้นตารางนะครับ

Black Rose

Ghotic

2. แบบมองไม่เห็นเส้นตารางครับ

กุหลาบดำ	บงบอกถึงรักนิรันดร์

Photoshop 7.0

การปรับแต่งภาพด้วย Photoshop 7.0
before

after

นี่เป็นการปรับภาพโดยใช้ Image>>Adjustments>>Brightness/Contrastครับ(ภาพล่างด้วยนะครับ)

before

after

ภาพต่อไปคือภาพที่ตกแต่งด้วย Filter นะครับ โดยใช้ Blur>>Redial

before

after

Graphic Design

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



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

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

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

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

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


การออกแบบทัศนสื่อสาร (Visual Communication Design)

1. การออกแบบกราฟฟิค (Graphic Design)
เป็นการออกแบบเพื่อให้อ่าน เช่น ออกแบบหนังสือ นิตยสาร โฆษณา บรรจุภัณฑ์ ป้าย ภาพยนร์ โทรทัศน์ โปสเตอร์
แผ่นพับ นิทรรศการ เป็นต้น



2. การออกแบบผลิตภัณฑ์ (Product Design)
เป็นการออกแบบเพื่อให้ใช้ประโยชน์ เช่น ออกแบบเครื่องมือ เครื่องจักรกล ยานพาหนะ โครงสร้าง เป็นต้น



3. การออกแบบสิ่งแวดล้อม (Environmenal Design)
เป็นการออกแบบเพื่อการอยู่อาศัย เช่น ออกแบบตกแต่ง โครงสร้างอาคาร สวน สวนสาธารณะ เมือง เป็นต้น



Credit : Graphic Design

Linkเว็บสวยๆ

วันนี้ผมจะมาแนะนำเว็บสวยๆที่ผมชอบมาให้ดูกันนะครับซึ่งผมคิดว่าทุกคนก็คงชอบเหมือนกัน

เว็บแรกเป็น เว็บคณะทันตแพทศาสตร์จุฬาลงกรณ์มหาวิทยาลัย โดยพ่อผมเองครับ ^0^
ส่วนเว็บนี้สำหรับผู้ที่สนใจสร้างงาน Cai Multimedia นะครับ

เว็บที่สองเป็บเว็บเกมโปรดของผมครับเว็บเกมที่ผมชอบก็มีเยอะนะครับแต่ที่ผมชอบสุดๆจะมีอยู่ 3 เว็บ
ได้แก่ 1.maplestory เป็นเกมที่ผมเล่นบ่อยๆนะครับ
2.ECO เกมใหม่ที่พึ่งเปิดครับ
3.Audition ส่วนเกมนี้ผมชอบเฉพาะเว็บนะครับเพราะ Flash สวยมากๆเลยครับ

เอาล่ะเราลองไปเว็บการ์ตูนกันมั่งดีกว่าเป็บเว็บของตุ๊กตาที่คล้ายๆ Barbie แต่เค้าเรียกกันว่า Dollfie นะครับ

ดอลฟี่แนวโกธิค ซึ่งสมัยนี้เป็นที่นิยมกันมาก
รูปตัวอย่างครับ

เป็นไงครับเท่ห์ใช่ม๊า ^_^
เนื่องจากเว็บส่วนใหญ่ที่ผมเลือกมาทั้งหมดจะเป็น Flash นะครับอาจทำให้โหลดช้าหน่อยแต่ขอบอกว่าสวยมากครับ

WelCoM

ยินดีต้อนรับเข้าสู่บล๊อกของขาพเจ้าน่อ ^0^