การสร้างเงาให้ตารางใน Dremweaver

การสร้างเงาให้ตารางใน Dremweaver

การสร้างเงาให้ตารางใน Dremweaver

1. ให้ทำการสร้างไฟล์ Pixels img ขึ้นมาก่อน โดยใช้ Photoshop สร้างไฟล์ใหม่
File --> New แล้วกำหนด Contents = Transparent และปรับความสูงความกว้าง เท่ากับ 5 จากนั้นเราก็จะได้ไฟล์ใหม่ที่มีลักษณะโปร่ง จากนั้นให้ทำการ Save For Web โดย กำหนดให้เป็นไฟล์เป็นนามสกุล Gif เราก็จะได้ไฟล์ pixels.gif (ให้บันทึกชื่อ
pixels)

2. ให้การเปิดโปรแกรม Dreamweaver ขึ้นมาจากนั้นให้ใส่Table 2 Columns โดยคลิ๊กไอค่อนรูป Table หรือใช้คำสั่ง Insert --> Table แล้วให้ตั้งค่าดังตัวอย่าง

3. จากนั้นให้ใส่ Table โดยใช้ขั้นตอนที่2 (หรือทำการคลิ๊กที่Table แล้วทำการ Copy แล้ว Paste อีก 2 บรรทัด) เพิ่มอีก 2 ดังตัวอย่าง

4. ให้ทำการใส่สีพื้นหลัง Table แถวที่ 1. ใน Columns ที่ 1เป็นสีพื้นหลังของเมนู Columns 2. ไม่ต้องใส่. ก็จะได้ดั่งตัวอย่าง.

5. ให้ทำการใส่สีพื้นหลัง Table แถวที่ 2. ใน Columns ที่ 1เป็นสีพื้นหลังของเมนู Columns 2. ไม่ต้องใส่. ก็จะได้ดั่ง ตัวอย่าง.

6. ให้ทำการใส่สีพื้นหลัง Table แถวที่ 2. Columns ที่ 2. เป็นสีพื้นของเงา (โคสสี #C0C0C0) แล้วใส่ Table แถวที่ 3. Columns 2. เป็นสีเงาเหมือน แถวที่ 2. ดังตัวอย่าง

7. เมื่อเราได้โครงร่าง Table ดังตัวอย่างแล้วหลังจากนั้นให้ทำการปรับแต่งโดยการกำหนดความกว้างภายใน Columns แต่ ละ Columns และ ใช้ pixels.gif กำหนดความสูงความกว้างในแต่ละ Columns โดยมีขั้นตอนดังต่อไปนี้

7.1 ให้การทำงานมาอยู่ที่ table แถวที่1. จากนั้นให้เคอร์เซอร์อยู่ใน Columns ที่1. แล้วให้ใส่ไฟล์pixels.gif ไป โดย คลิ๊กเลือกไอค่อนรูปภาพ แล้วปรับความกว้างในColumns ที่ 2. เท่ากับ 5 จากนั้น Table ก็จะหมดความขนาดของ pixels.gif ดังตัวอย่าง.

7.2 จากนั้นให้การทำงานอยู่ที่ Table แถวที่2. แล้วให้พิมพ์ข้อมูลลงไปใน Columns ที่1. แล้วใส่ Pixels.gif ลงไปใน Columns ที่2. แล้วใสความกว้างของ Columns = 5 ลักษณะ Table ก็จะหดตัวดังตัวอย่าง

7.3 จากนั้นให้การทำงานอยู่ที่ Table แถวที่3. แล้วให้ทำการใส่ Pixels.gif ลงไปในColumns ทั้งสองแล้วปรับค่าความ กว้างของ Colums แรก เท่ากับ 5 แล้ว Table ก็จะหดตัวเท่ากับความสูงของ pixels.gif

จากนั้นเราลองทำการแสดงผลที่ Browser ก็จะเห็นเมนูมีลักษณะมีเงาลอยออกมาจากพื้นดังตัวอย่าง ก็เป็นอันเสร็จกระบวนการ.

การทำโฆษณาแบบพับเก็บได้

การทำโฆษณาแบบพับเก็บได้

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

ขั้นตอนการทำ

1. เตรียมรูปภาพ โดยอาจจะวาด หรือเขียนปุ่มปิดไว้ในรูปด้วยโปรแกรมให้เรียบร้อย ดังภาพตัวอย่าง

2. จากนั้นวาด Layer ลงในเว็บเพจ 1 Layer พร้อมตั้งชื่อ "ads" ดังภาพ

3. จากนั้นนำรูปภาพที่เตรียมไว้วางใส่ลงไปใน Layer ใช้ Hotspot สร้างส่วนที่จะให้ผู้ใช้กดปุ่มปิดหน้าต่าง ดังภาพ

4. เลือกเครื่องมือ Behaviors (Shift+F3) ใช้ Action เครื่องมือ Show-Hide Layers สั่งให้ซ่อน Layer "ads" ดังภาพ
* ถ้า Show-Hide Layers ไม่ขึ้นให้เลือกที่จุด Hotspot ที่เราสร้างไว้ตอนแรกก่อน

5. จากนั้นให้สังเกตุที่เครื่องมือ Behaviors สถานะของ Mouse อยู่ที่ onMouseOver ให้เราทำการเปลี่ยนเป็น onClick ดังภาพ
* ถ้าไม่มีให้เลือกให้ไปแก้ที่โค้ดแทนก็ได้

 <== ก่อนที่ยังไม่ได้แก้

 <== หลังที่ได้ทำการแก้ไขโค้ดแล้ว

6. จากนั้นก็ทำการใส่ Link ให้กับรุปภาพตามปกติ (จะลิงค์มาที่ http://www.webthaidd.com/ ก็ได้นะครับ)

7. จากนั้นก็ลองทดสอบการทำงานดูครับ (รับรองว่าโปรแกรมอะไรก็มา Block ไม่อยู่)

HTML คืออะไร?

HTML คืออะไร?

HTML (ย่อมาจาก Hyper Text Markup Language)   เป็นภาษาประเภท Markup Language ที่ใช้ในการสร้างเว็บเพจ   มีแม่แบบมาจากภาษา SGML (Standard Generalized Markup Language) ที่ตัดความสามารถบางส่วนออกไป เพื่อให้สามารถทำความเข้าใจและเรียนรู้ได้ง่าย   ปัจจุบันมีการพัฒนาและกำหนดมาตรฐานโดยองค์กร World Wide Web Consortium (W3C)

ภาษา HTML ได้ถูกพัฒนาขึ้นอย่างต่อเนื่องตั้งแต่ HTML Level 1, HTML 2.0, HTML 3.0, HTML 3.2 และ HTML 4.0    ในปัจจุบัน ทาง W3C ได้ผลักดัน รูปแบบของ HTML แบบใหม่ ที่เรียกว่า XHTML ซึ่งเป็นลักษณะของโครงสร้าง XML แบบหนึ่ง ที่มีหลักเกณฑ์ในการกำหนดโครงสร้างของโปรแกรมที่มีรูปแบบที่มาตรฐานกว่า   มาทดแทนใช้ HTML รุ่น 4.01 ที่ใช้กันอยู่ในปัจจุบัน

HTML มีโครงสร้างการเขียนโดยอาศัย Tag ในการควบคุมการแสดงผลของข้อความ รูปภาพ หรือวัตถุอื่น ๆ แต่ละ Tag อาจจะมีส่วนขยาย เรียกว่า Attribute สําหรับจัดรูปแบบเพิ่มเติม

การสร้างเว็บเพจ โดยใช้ภาษา HTML สามารถทำโดยใช้โปรแกรม Text Editor ต่างๆ เช่น Notepad, EditPlus หรือจะอาศัยโปรแกรมที่เป็นเครื่องมือช่วยสร้างเว็บเพจ เช่น Microsoft FrontPage, Dream Weaver ซึ่งอํานวยความสะดวกในการสร้างหน้า HTML ในลักษณะ WYSIWYG (What You See Is What You Get)

แต่มีข้อเสียคือ โปรแกรมเหล่านี้มัก generate code ที่เกินความจำเป็นมากเกินไป ทําให้ไฟล์ HTML มีขนาดใหญ่ และแสดงผลช้า ดังนั้นหากเรามีความเข้าใจภาษา HTML จะเป็นประโยชน์Sให้เราสามารถแก้ไข code ได้ตามความต้องการ และยังสามารถนำ script มาแทรก ตัดต่อ สร้างลูกเล่นสีสันให้กับเว็บเพจของเราได้

การเรียกใช้งานหรือทดสอบการทำงานของเอกสาร HTML จะใช้โปรแกรม Internet Web Browser เช่น Internet Explorer (IE), Mozilla Firefox, Safari, Opera, และ Netscape Navigator เป็นต้น

ส่วนประกอบที่สําคัญของภาษา HTML

ได้แก่ Tag และ Attribute
Tag คือ คําสั่งที่ใช้ในภาษา HTML อยู่ในเครื่องหมาย < และ > ใช้สําหรับจัดรูปแบบข้อความ ภาพหรือ วัตถุอื่นๆ ซึ่ง tag ในภาษา HTML ส่วนมาก จะมี tag เปิด และ tag ปิด เช่น
<h1>…</h1>  ใช้เน้นหัวข้อเรื่อง
<p>…</p>  ใช้จัดพารากราฟ
<b>…</b>  ใช้กำหนดให้ตัวอักษรเป็นตัวหนา
แต่บาง tag ก็ไม่มี tag ปิด เช่น
<hr> ใช้สร้างเส้นคั่น
<br> ใช้สําหรับการขึ้นบรรทัดใหม่

Attribute เป็นส่วนขยายใน tag ใช้สําหรับจัดรูปแบบเพิ่มเติม เช่น ขนาด สี ระยะห่าง เป็นต้น ค่าของ attribute จะอยู่ในเครื่องหมาย "…"  เช่น
<p align="center">ข้อความในพารากราฟนี้จัดวางอยู่กึ่งกลางหน้าจอ</p>
<hr width="200" color="red" noshade> ใช้สร้างเส้นคั่นยาว 200 pixel สีแดงทึบ
ในการเขียน tag, attribute และค่าของ attribute  จะใช้์เป็นตัวอักษรพิมพ์เล็กหรือพิมพ์ใหญ่ก็ได้  แต่เพื่อให้เป็นไปตามมาตรฐานของ (X)HTML รุ่นใหม่ ขอให้ใช้เป็นตัวอักษรพิมพ์เล็กทั้งหมด และสำหรับ tag ที่ไม่มี tag ปิด ให้ใส่ เป็น " / >" เช่น <hr />, <br />

ซอฟต์แวร์ประยุกต์ (Application Software)

ซอฟต์แวร์ประยุกต์ (Application Software)
ซอฟต์แวร์ประยุกต์สามารถจำแนกได้เป็น 2 ประเภท คือ
ซอฟต์แวร์สำหรับงานเฉพาะด้าน (Special Purpose Software)
จะมีความเหมาะสมกับงานเฉพาะด้าน เช่น โปรแกรมด้านการคำนวณราคาค่าน้ำของแต่ละบ้าน จะมีประโยชน์กับงานด้านการประปา หรือโปรแกรมสำหรับฝากถอนเงิน ก็จะมีประโยชน์กับองค์กรเกี่ยวกับการเงิน เช่น ธนาคาร ซอฟต์แวร์สำหรับงานเฉพาะด้านส่วนมากจะไม่มีการจำหน่ายอยู่ทั่วไป องค์กรที่ต้องการใช้งานมักจะต้องพัฒนาด้วยตนเอง หรือว่าจ้างบริษัทซอฟต์แวร์พัฒนาให้โดยเฉพาะ อย่างไรก็ตามถึงแม้จะมีบริษัทซึ่งพัฒนาซอฟต์แวร์เฉพาะด้านมาวางจำหน่ายก็มักจะมีราคาสูง รวมทั้งมีข้อเสนอในการพัฒนาเพิ่มเติมเพื่อให้เหมาะสมกับองค์กรต่าง ๆ ด้วย

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

• ซอฟต์แวร์สำหรับงานทั่วไป (General purpose Software)

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

• ซอฟต์แวร์ตารางวิเคราะห์แบบอิเล็กทรอนิกส์ (Electronic Spreadsheet)ธุรกิจในสมัยก่อนนั้นการทำงบประมาณ หรือการวางแผนต่าง ๆ ต้องใช้กระดาษบัญชีและเครื่องคิดเลขเท่านั้น สำหรับสมัยนี้ด้วยซอฟต์แวร์ตารางวิเคราะห์แบบอิเล็กทรอนิกส์ ผู้ใช้สามารถพิมพ์หัวข้อหรือชื่อของข้อมูล และตัวเลขข้อมูลต่าง ๆ เข้าในคอมพิวเตอร์ โดยที่ในคอมพิวเตอร์จะมีตารางที่เปรียบเสมือนกระดาษบัญชีขนาดใหญ่ ซึ่งสามารถคำนวณได้ตามสูตรที่ผู้ใช้ทำการกำหนด โดยที่สูตรเหล่านั้นจะไม่ปรากฏในช่องของข้อมูลเลย ยิ่งไปกว่านั้นหากผู้ใช้เปลี่ยนตัวเลขหรือข้อมูลใด ๆ ก็ตาม จะเห็นการเปลี่ยนแปลงข้อมูลอื่นที่เกี่ยวข้องกันในทันที ปัจจุบันมีผู้ใช้ประโยชน์ของตารางวิเคราะห์แบบอิเล็กทรอนิกส์มากมาย ไม่เฉพาะแต่ในทางบัญชีเท่านั้น แต่ยังนิยมใช้ในการวิเคราะห์ข้อมูลทางสถิติ บริหารการเงิน และอื่น ๆ อีกมาก
• ซอฟต์แวร์ประมวลผลคำ (Word processing)ปัจจุบันเครื่องคอมพิวเตอร์มากกว่า 85 เปอร์เซ็นต์ ต้องติดตั้งโปรแกรมสำหรับงานพิมพ์เอกสารรวมอยู่ด้วย ซึ่งโปรแกรมนี้ทำให้คอมพิวเตอร์เป็นเครื่องมือสำหรับสร้าง แก้ไข ตรวจสอบ พิมพ์ และจัดเก็บข้อความต่าง ๆ หนังสือที่จำหน่ายในท้องตลาดในปัจจุบันนี้ ส่วนมากก็เริ่มต้นจากการพิมพ์ข้อความลงในคอมพิวเตอร์ด้วยซอฟต์แวร์ที่ประมวลคำ
• ซอฟต์แวร์การพิมพ์แบบตั้งโต๊ะ (Desktop Publishing)ในสมัยก่อนการจัดทำหนังสือพิมพ์ หรือวารสารต่าง ๆ นั้นต้องผ่านกระบวนการต่าง ๆ มากมายหลายขั้นตอนซึ่งรวมเรียกว่าการเรียงพิมพ์ โดยที่จะต้องมีผู้ตัดต่อรูปภาพที่ต้องการ วาดกรอบของภาพหรือกรอบหัวเรื่อง และเขียนข้อความ และนำข้อความ ภาพ และกรอบมาประกอบกันตามแบบที่ออกแบบไว้ การทำงานที่ยุ่งยากเหล่านี้นี่เองที่ทำให้เอกสารเหล่านั้นมีราคาแพง แต่ในปัจจุบันนี้ขอเพียงมีคอมพิวเตอร์ และโปรแกรมการจัดพิมพ์แบบตั้งโต๊ะ เท่านั้น ก็สามารถที่จะออกแบบงานหรือเอกสารให้เป็นที่น่าสนใจได้ โดยซอฟต์แวร์การพิมพ์แบบตั้งโต๊ะจะมีความสามารถด้านการจัดการเอกสาร ความสามารถด้านการเรียงพิมพ์ รวมทั้งการจัดสีที่สูงกว่าซอฟต์แวร์ประมวลผลคำ
• ซอฟต์แวร์นำเสนอ (Presentation Software)เป็นซอฟต์แวร์ที่ใช้ในการนำเสนอข้อมูลด้วยคอมพิวเตอร์ โดยอาจประกอบด้วยตัวอักษร รูปภาพ แผนผัง รายงาน ตลอดจนภาพเคลื่อนไหว เป็นต้น นิยมใช้ในการเรียนการสอน หรือการประชุม เพื่อนำเสนอข้อมูลให้การบรรยายนั้นน่าสนใจยิ่งขึ้น
• ซอฟต์แวร์กราฟิก (Graphic Software)เป็นซอฟต์แวร์สำหรับสร้างภาพกราฟิกแบบต่าง ๆ การใช้งานในระดับเบื้องต้นอาจนำไปใช้ประกอบการสร้างเอกสาร หรือการนำเสนอข้อมูล ส่วนการใช้ในระดับสูงอาจใช้สำหรับการตกแต่งภาพหรือรูปถ่าย หรือใช้สำหรับงานด้านศิลปกรรม สถาปัตยกรรม วิศวกรรม เป็นต้น
• ซอฟต์แวร์ฐานข้อมูล (Database)โปรแกรมฐานข้อมูลเป็นโปรแกรมสำหรับสร้างแฟ้มข้อมูลต่าง ๆ เก็บไว้ในสื่ออิเล็กทรอนิกส์ โดยโปรแกรมจะมีเครื่องมือต่าง ๆ ในการอำนวยความสะดวกเกี่ยวกับการจัดการแฟ้มข้อมูล เช่น มีเครื่องมือสำหรับการเพิ่มหรือแก้ไขข้อมูลที่จัดเก็บอยู่ หรือสามารถเรียกแฟ้มข้อมูลนั้นขึ้นมาแสดงบนจอภาพโดยกำหนดเงื่อนไขให้เลือกข้อมูลมาแสดงเพียงบางส่วน เป็นต้น
• ซอฟต์แวร์สื่อสารโทรคมนาคม (Telecommunication Software)ถ้าผู้ใช้ต้องการติดต่อกับคอมพิวเตอร์ที่อยู่ห่างไกลออกไป สามารถทำได้โดยใช้ซอฟต์แวร์สำหรับติดต่อสื่อสารข้อมูล ซอฟต์แวร์ประเภทนี้จะจำลองเครื่องคอมพิวเตอร์ให้เป็นเทอร์มินัล (terminal) ที่สามารถติดต่อไปยังระบบคอมพิวเตอร์ขนาดใหญ่ที่มีผู้ใช้หลายคนได้โดยใช้สายโทรศัพท์ในการโทรติดต่อ และเมื่อติดต่อได้แล้วก็จะสามารถใช้งานระบบต่าง ๆ ที่อยู่ในเครื่องนั้นได้ เสมือนกับนั่งใช้เครื่องอยู่ข้าง ๆ เครื่องที่เราติดต่อเข้าไป การใช้งานที่ได้รับความนิยมในปัจจุบัน เช่น ร่วมคุยกับกลุ่มที่สนใจเรื่องเดียวกัน แลกเปลี่ยนจดหมายกับผู้อื่นในระบบหรือแม้กระทั่งจองตั๋วเครื่องบินและจองโรงแรมผ่านทางจอคอมพิวเตอร์ เป็นต้น


โปรแกรมสื่อสารโทรคมนาคม
ซอฟต์แวร์ค้นหาข้อมูล (Resource Discovery Software)หมายถึงซอฟต์แวร์ที่เป็นเครื่องมือสำหรับค้นหาข้อมูลที่ต้องการ จากแหล่งข้อมูลในที่ต่าง ๆ เนื่องจากปัจจุบันนี้ความนิยมในการใช้การติดต่อสื่อสารผ่านเครือข่ายคอมพิวเตอร์ เช่น อินเตอร์เนต หรือเครือข่ายเชิงพาณิชย์อื่น ๆ ช่วยให้สามารถเรียกค้นข้อมูลที่ต้องการทราบได้จากทั่วโลก ตัวอย่างซอฟต์แวร์ประเภทนี้ เช่น Archie , Gopher และ World Wide Web เป็นต้น

การสร้างเงาให้ตารางใน Dremweaver

การสร้างเงาให้ตารางใน Dremweaver

การสร้างเงาให้ตารางใน Dremweaver

1. ให้ทำการสร้างไฟล์ Pixels img ขึ้นมาก่อน โดยใช้ Photoshop สร้างไฟล์ใหม่
File --> New แล้วกำหนด Contents = Transparent และปรับความสูงความกว้าง เท่ากับ 5 จากนั้นเราก็จะได้ไฟล์ใหม่ที่มีลักษณะโปร่ง จากนั้นให้ทำการ Save For Web โดย กำหนดให้เป็นไฟล์เป็นนามสกุล Gif เราก็จะได้ไฟล์ pixels.gif (ให้บันทึกชื่อ
pixels)

2. ให้การเปิดโปรแกรม Dreamweaver ขึ้นมาจากนั้นให้ใส่Table 2 Columns โดยคลิ๊กไอค่อนรูป Table หรือใช้คำสั่ง Insert --> Table แล้วให้ตั้งค่าดังตัวอย่าง

3. จากนั้นให้ใส่ Table โดยใช้ขั้นตอนที่2 (หรือทำการคลิ๊กที่Table แล้วทำการ Copy แล้ว Paste อีก 2 บรรทัด) เพิ่มอีก 2 ดังตัวอย่าง

4. ให้ทำการใส่สีพื้นหลัง Table แถวที่ 1. ใน Columns ที่ 1เป็นสีพื้นหลังของเมนู Columns 2. ไม่ต้องใส่. ก็จะได้ดั่งตัวอย่าง.

5. ให้ทำการใส่สีพื้นหลัง Table แถวที่ 2. ใน Columns ที่ 1เป็นสีพื้นหลังของเมนู Columns 2. ไม่ต้องใส่. ก็จะได้ดั่ง ตัวอย่าง.

6. ให้ทำการใส่สีพื้นหลัง Table แถวที่ 2. Columns ที่ 2. เป็นสีพื้นของเงา (โคสสี #C0C0C0) แล้วใส่ Table แถวที่ 3. Columns 2. เป็นสีเงาเหมือน แถวที่ 2. ดังตัวอย่าง

7. เมื่อเราได้โครงร่าง Table ดังตัวอย่างแล้วหลังจากนั้นให้ทำการปรับแต่งโดยการกำหนดความกว้างภายใน Columns แต่ ละ Columns และ ใช้ pixels.gif กำหนดความสูงความกว้างในแต่ละ Columns โดยมีขั้นตอนดังต่อไปนี้

7.1 ให้การทำงานมาอยู่ที่ table แถวที่1. จากนั้นให้เคอร์เซอร์อยู่ใน Columns ที่1. แล้วให้ใส่ไฟล์pixels.gif ไป โดย คลิ๊กเลือกไอค่อนรูปภาพ แล้วปรับความกว้างในColumns ที่ 2. เท่ากับ 5 จากนั้น Table ก็จะหมดความขนาดของ pixels.gif ดังตัวอย่าง.

7.2 จากนั้นให้การทำงานอยู่ที่ Table แถวที่2. แล้วให้พิมพ์ข้อมูลลงไปใน Columns ที่1. แล้วใส่ Pixels.gif ลงไปใน Columns ที่2. แล้วใสความกว้างของ Columns = 5 ลักษณะ Table ก็จะหดตัวดังตัวอย่าง

7.3 จากนั้นให้การทำงานอยู่ที่ Table แถวที่3. แล้วให้ทำการใส่ Pixels.gif ลงไปในColumns ทั้งสองแล้วปรับค่าความ กว้างของ Colums แรก เท่ากับ 5 แล้ว Table ก็จะหดตัวเท่ากับความสูงของ pixels.gif

จากนั้นเราลองทำการแสดงผลที่ Browser ก็จะเห็นเมนูมีลักษณะมีเงาลอยออกมาจากพื้นดังตัวอย่าง ก็เป็นอันเสร็จกระบวนการ.

การตัดภาพในโปรแกรม PHOTOSHOP

การตัดภาพในโปรแกรม PHOTOSHOP

การตัดภาพในโปรแกรม PHOTOSHOPนั้น สามารถทำได้หลากหลายวิธี โดยวิธีที่นักเรียนทราบไปแล้วคือ MARQUEE ในการตัดภาพ ดังนั้นวิธีตัดภาพด้วยเครื่องมืออื่นๆ จะเน้นที่การสร้าง SELECTION แบบต่างๆ
1. การตัดภาพด้วย MAGIC WAND TOOL
เครื่องมือนี้จะทำการเลือก SELECTION โดยการเลือกเอาส่วนที่เป็นสีแลลเดียวกันไว้ด้วยกัน

เครื่องมือ MAGIC WAND TOOL

เลือกวัตถุในภาพที่มีสีเดียวกัน ในขอบเขตเดียวกัน

สามารถทำการเลือกเพิ่มได้ โดยการกด SHIFT ค้างไว้

สามารถตัดภาพ โดยดึงออกโดยใช้ครื่องมือ MOVE TOOL 
2. ตัดภาพโดยใช้ LASSO TOOL
เครื่องมือนี้นำมาใช้สำหรับในการเลือกพื้นที่ของภาพทีเราต้องการจะนำไปใช้ เครื่องมืออันนี้จะอยู่ในหมวด LASSO เครื่องมือ POLYGONAL นี้เป็นเครืองมือที่ 2 การใช้งานคล้ายๆ กับ LASSO

ตัวอย่างการใช้งาน
การเลือกส่วนที่เป็นตาของเป็ด
1> ให้เราเปิดภาพเป็ดขึ้นมา ดังภาพ

2> หลังจากนั้นเลือกเครื่องมือ POLYGONAL LASSO แล้วใช้เครื่องมือคลิกให้รอบส่วนที่เราต้องการ ดังภาพ

3> หลังจากนั้นเราก็สามารถนำส่วนที่เราเลือกไปใช้กับงานที่เราต้องการได้
3. การตัดภาพโดยใช้ PEN TOOL
PEN TOOL จะอยู่ในรูปของปากกา

เลือกทำการปรับเปลี่ยนลักษณะเป็น PATH

ทำการวาดเส้นรอบวัตถุที่จะทำการเลือกตัด จนได้เป็นเส้นปิด

กด CTRL + ENTER เพื่อสร้าง SELECTION และใช้ MOVE TOOL ในการตัดเลื่อนวัตถุ

Animation Process - ขั้นตอนการสร้างการ์ตูนเคลื่อนใหว

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

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

ก่อนที่เราจะมาเริ่มการสร้าง อนิเมชั่น นั้น เราต้องมีการวางแผนก่อน ไม่ว่า เนื้อเรื่อง, เสียง, อุปกร์ณการวาด, โปรแกรม ที่ใช้งานในการตัดต่อ. ทำไมต้องวางแผน ต้องเตรียมการ? หากมีการเตรียมการ จะเป็นการสะดวกทำให้เรารู้ว่าจะทำอะไรต่อเป็นขั้นๆไป

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

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

2.1 STORY - เนื้อเรื่องหลังจากได้แนวความคิดตอนนี้ก็มาเขียนเนื้อเรื่อง โดยเอาแนวคิดหลักๆมาขยายความ ในการเขียนเนื้อเรื่องตอนนี้ก็เหมือนกับเขียนนิยาย คิอไม่ใช่มีแต่เนื้อเรื่อง ต้องมีบทพูดด้วยเช่นกัน ไล่เป็นฉากๆ บทๆ ไป ขั้นตอนนี้ เอกสารจะเป็น แค่ ตัวอัก`ษรเท่านั้น. เพิ่มเติม บ.อนิเมชั่นที่ญี่ปุ่น การนำการ์ตูนเอามาทำอนิเมชั่นเค้าก็เขียนบทขึ้นมาใหม่อีกรอบโดยมี เนื้อเรื่องในการ์ตูนเป็นพื้นฐาน. พอได้เนื้อเรื่องก็จะนำเอามาให้ทีมงานอ่านกันเพื่อแก้ไข ไม่ว่าจะเป็น คำพูด เนื้อเรื่อง ว่าเหมาะสมกับกลุ่มมั้ย ไม่ใช่สักแต่ว่าเขียนไป.

2.2 STORY BOARD - สตอรี่บอร์ด
นำเนื้อเรื่องที่ทำการเรียบเรียง มาให้ทีมงานอ่านกัน เพื่อเอาไปเขียนสตอรี่บอร์ด, คนที่เขียนสตอรี่บอร์ดไม่จำเป็นต้องมีแค่คนเดียว แบ่งงานเป็น ฉากๆไป. ขั้นตอนนี้นั้น คือการนำเอาเนื้อเรื่องมาวาดเป็นภาพ มาเรียงต่อกันเป็นฉากๆ แล้วเอามาแปะใว้บนที่บอร์ด(ถึงเรียกว่า สตอรี่บอร์ด). แล้วเอามาเขียนมาแก้กันเพิ่มมุมมองฉากใหน แก้มุมใหน ขั้นตอนนี้จะสำคัญเพราะมีผลสืบเนื่องถึงขั้นตอน วาด อนิเมชั่น ถ้าทำไม่ดี จะเป็นปัญหาอย่างมาก.

3 AUDIO and SOUND - เสียง
เมื่อเอาสตอรี่บอร์ดมาเรียงกันเป็นหนังอย่างหยาบๆ (หรือที่คนเรียกกันอย่างหรูว่า อนิเม-ทริก ความละเอียดตรงนี้ขึ้นอยู่กับตอนวาดสตอรี่บอร์ดว่าละเอียดขนาดใหน)แล้วเอามาอัดเสียง ไม่ว่าจะเสียงพาค์ย เสียงเอฟเฟค เสียงฉากหลัง ทำให้หมด. มันจะเป็นการง่ายมาก หากเราทำเสียงแล้ว มาวาดให้ตรงกับเสียง มากกว่า ทำเสียงให้ตรงกับภาพ.

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

5. EDIT - แก้ไขหลังจากวาดอนิเมชั่นแล้ว ตัวหนังยังแยกกันเป็นส่วนๆ ในขั้นตอนนี้จะนำมาต่อรวมกัน เพื่อเป็นหนังใหญ่. แล้วต้องนำมาดูกันเพื่อ พิจารณาว่า ทั้งเนื้อเรื่องดูลงตัวมั้ย ต้อง ตัดฉากใหนออก. ในขั้นตอนนี้มีหนังอนิเมชั่นไม่น้อย ที่ต้องตัดออกไป 3-4 ฉาก เพื่อความลงตัว ให้เหมาะสม.

6. FINAL OUTPUT - การผลิดขั้นสุดท้าย
เมื่อ หนัง ทั้งเรื่อง เสร็จเป็นอันที่เรียบร้อยแล้วนั้น ก็สู่การนำไปแสดงหรือเผยแพร่. ตรงนี้ขึ้นอยู่กับผู้จัดทำว่าจะเอาไปทำอะไร(ที่คิดใว้ในขั้นตอนที่ 1 แนวคิด) ส่วนมากคือการนำงานไปเสนอตาม บ. ต่างๆเพื่อ นำไป เผยแพร่ หรือ นำไปผลิต ก็ตามแต่ นโยบายของผู้จัดทำ.

เพิ่มเติม
ความละอียด และ ขนาด นั้นเป็นสิ่งจำเป็นเพราะการนำไปใช้เพื่อทำอะไรนั้น ขนาดจะไม่เท่ากัน อย่าง ฉายในจอเงิน จอแก้ว ในเวป หรือ แม้แต่หน้าจอคอมพิวเตอร์.

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