Week 10

การสร้างฟอร์ม (Form) ใน Dreamweaver
		บทความนี้เราจะมาเริ่มต้นสร้างฟอร์มกันค่ะ สำหรับใช้เพื่อต่อยอดในการโปรแกรมภาษา PHP ต่อไป ซึ่งเราสามารถสร้าง Form ในโปรแกรม Dreamweawer ได้ง่าย ๆ ดังนี้

	สำหรับฟอร์มเพื่อน ๆ ทุก ๆคนคงจะเห็นกันมาบ้างแล้วในเว็บไซต์ต่าง ๆ ซึ่งโดยปกติแล้ว หากเราทำเว็บแบบ Static Page ธรรมดา ๆ คนทำเว็บก็แค่ทำเว็บ และคนเข้าเยี่ยมชมก็จะเห็นข้อมูล แต่จะไม่สามารถตอบสนองกลับไปได้ แต่การนำฟอร์มเข้ามาใช้ร่วมกับ การโปรแกรม จะทำให้ผู้เยี่ยมชมเว็บ สามารถส่งข้อความหรือข้อมูลกลับไปยังเจ้าของเว็บไซต์ได้ ซึ่งเราจะเห็นฟอร์มอยู่บ่อย ๆ ในเว็บไซต์ต่าง ๆ เช่นในส่วนของ การสั่งซื้อสินค้าและบริการ การสืบค้นข้อมูล การถามตอบ และการส่งอีเมล์ เป็นต้น ซึ่งจะมีอีกหลาย ๆ รูปแบบที่เรานำฟอร์มไปใช้ ซึ่งก็ขึ้นอยู่กับจุดประสงค์ของผู้สร้างเว็บไซต์นั่น ๆ เอาล่ะ!! เราก็ได้เกริ่นถึงฟอร์มกันไปบ้างแล้ว ทีนี้ก็มาถึงการเริ่มต้นสร้างฟอร์มกันค่ะ เริ่มแรกเลยก็คือให้เปิดโปรแกรม Dreamweaver ขึ้นมา โดยไปที่ File ---> New ...

	เมื่อสร้างไฟล์ใหม่แล้ว เราก็จะมาเริ่มสร้าง Form ตามขึ้นตอนดังนี้ 1. คลิกที่คำสั่ง Insert--->Form จากเมนูบาร์ ขึ้นตอนนี้คุณจะสังเกตได้ว่าจะมีเส้นปะกรอบสีแดง ๆ เกิดขึ้น ให้สังเกตดูในส่วนของ Properties ที่บริเวณด้านล่าง จะมีส่วนของ Form Name ให้ทำการตั้งชื่อฟอร์มตามวัตถุประสงของการสร้างฟอร์ม ในที่นี้เราจะสร้างฟอร์มเตรียมไว้สำหรับกรอกข้อมูลนักศึกษา จึงขอตั้งชื่อว่า student 2. หลังจากตั้งชื่อฟอร์มเสร็จแล้ว เราจะมาสร้างตาราง (Table) เพื่อเตรียมพื้นที่ในการวางข้อมูล โดยสร้างตารางดังรูปลงในฟอร์ม (สังเกตุ ต้องสร้างข้างในกรอบเส้นปะสีแดงเท่านั้น) พร้อมกับเขียนข้อความตามรภาพที่ 1 ซึ่งฟอร์มที่เราจะสร้างนี้ จะเก็บข้อมูลของนักเรียน ในส่วนของรหัสประจำตัวนักเรียน พร้อมทั้งชื่อและนามสกุลของนักเรียน

	3. เราจะสร้าง Input Form สำหรับกรอกข้อมูล ซึ่งสามารถสร้างได้โดยใช้คำสั่ง Insert--->Form Objects---> Text Field จากเมนูบาร์ โดยสร้างทั้งหมด 3 ฟิลด์ ตามตัวอย่างดังภาพที่ 2 จากนั้นเราจะมากำหนดค่าต่าง ๆ ที่จำเป็นให้กับ Text Field แต่ละอัน ตามรายละเอียดดังนี้ Text Field เป็นการกำหนดชื่อฟิลด์ ให้ตั้งชื่อให้สื่อความหมายในที่นี้ขอตั้งชื่อเป็น id, name, surname ตามลำดับ Char Width เป็นการกำหนดขนาดความกว้างของฟิลด์ในที่นี้ขอตั้งเป็น 20, 35, 35 ตามลำดับ จริง ๆ แล้วในส่วนนี้ก็แล้วแต่จะกำหนด ในการใช้งานจริงก็ขึ้นอยู่กับความกว้างของพื้นที่ ๆ ต้องการแสดงผลเป็นหลัก Max Chars เป็นการกำหนดจำนวนอักขระที่สามารถใส่ได้ในฟิลด์ ซึ่งกำหนดได้ตามความเหมาะสม เช่น หากเป็นรหัสนักเรียนที่ความเป็นจริงมีแค่ 10 หลัก ในช่องนี้เราก็กำหนดค่า Max Chars เท่ากับ 10 Single line เป็นการกำหนดให้ฟิลด์มีแค่แถวเดียว

	4. เราจะสร้าง Form Object อีกแบบนั้นก็คือแบบ ปุ่ม โดยให้เราเพื่อแถวขึ้นมาอีกแถว ดังภาพที่ 4 จากนั้นให้ใช้คำสั่ง Insert--->Form Objects--->ฺีButton จะได้ปุ่มดังรูปที่ 4 จากนั้นเราสามารถเปลี่ยนชื่อปุ่ม เปลี่ยนชื่อข้อความบนปุ่ม และเลือกประเภทการทำงานของปุ่ม ตามภาพที่ 5 การสร้าง Form ก็เสร็จแล้วค่ะ ซึ่งเราจะสามารถนำฟอร์มนี้ไปโปรแกรม เพื่อให้สามารถใช้งานตามวัตถุประสงค์ที่ต้องการได้ สำหรับหน้าตาผลลัพธ์ ก็สามารถดูได้โดยการกดปุ่ม F12 ซึ่งจะได้ผลลัพตามภาสุดท้าย .... แล้วอย่าลืม Save เก็บไว้ด้วยนะค่ะ เดียวเราจะเอาฟอร์มนี้ไปใช้ในการเขียนภาษา PHP เพื่อเก็บข้อมูลลงดาต้าเบสต่อ ติดตามได้ในบทความในส่วนของ PHP & MySQL เร็ว ๆ นี้ค่ะ

ขอบคุณ Web

http://www.thainextstep.com/dreamweaver/dream_article.php?articlecat=1&articleid=95

Week 9 Photoshop

Photoshop

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

ที่มา http://www.kados.th.gs/web-k/ados/Phoshop.html

ลักษณะหน้าต่างของโปรเเกรม


เมื่อเรียกใช้งานโปรแกรม Adobe PhotoShop (ตัวอย่างที่แนะนำคือ Adobe PhotoShop 6.0) จะปรากฏหน้าต่างการทำงาน ดังนี้



1.Title Bar แสดงชื่อโปรแกรม และ/หรือ ชื่อไฟล์ ตลอดจนค่าเกี่ยวกับโหมดภาพ

2.Control Button ปุ่มควบคุมหน้าต่าง ประกอบด้วยปุ่ม Minimize, Maximize/Restore, Close Button


3.Menu Bar แถบคำสั่งควบคุมการทำงาน

4.Toolbox แถบเครื่องมือ

5.Workarea Window หน้าต่างสร้างงาน

6.Screen Area หน้าต่างโปรแกรม


7.Palettes ชุดคำสั่งเฉพาะงาน

8.Status Bar แสดงสถานะการทำงาน

9.Option Bar แสดงชุดคำสั่งย่อยของเครื่องมือที่เลือกใช้งาน



เครื่องมือจากแถบ Toolbars

เครื่องมือต่างๆ ประกอบด้วย

เครื่องมือพื้นฐาน

Zoom ใช้ในการขยายภาพวัตถุเข้า-ออก เพื่อให้เราสามารถมองเห็นงานได้ชัดเจนยิ่งขึ้น
เมื่อต้องการขยายภาพให้ใหญ่ขึ้นให้นำเคอร์เซอร์ไปคลิกที่ภาพ
ถ้าต้องการทำให้ภาพเล็กลง ให้กด ค้างไว้แล้วจึงไปคลิกที่ภาพ
หาก Double Click ที่เครื่องมือ zoom จะเป็นการขยายภาพให้สู่โหมด 100% อย่างรวดเร็ว

Hand ใช้ในการเลื่อนภาพ ในกรณีที่ภาพมีขนาดใหญ่ ไม่สามารถมองได้ทั่วถึง
หากทำการ Double Click ที่เครื่องมือ Hand จะเป็นการปรับหน้าจอภาพ ให้อยู่ในโหมดพอดีกับกรอบภาพ (Actual Size)




Selection เป็นเครื่องมือที่ใช้ในการสร้างขอบเขต ซึ่งจะมีให้หลายแบบ ขึ้นอยู่กับงานที่เราต้องการสร้างสามารถ Double Click เพื่อเปิดหน้าต่างควบคุม (Options) ประกอบการทำงาน เช่น กำหนดค่าความฟุ้งของขอบ (Feather) เป็นต้น

Move ใช้ในการย้ายภาพที่เราทำงานอยู่




การปรับขนาดของภาพ


ภาพที่นำมาใช้ประกอบเว็บ ไม่ควรมีขนาดใหญ่เกินไป หากท่านนำภาพมาใช้งาน และพบว่ามีขนาดใหญ่มาก ควรทำการย่อขนาดของภาพด้วย PhotoShop ก่อนนำไปใช้งานจริง ไม่ควรใช้ Attribute Width & Height ใน TAG ควบคุมขนาด เพราะจะทำให้ การโหลดภาพช้ากว่าปกติ โดยคำสั่งที่ใช้ในการย่อ / ขยายขนาดภาพ คือ Image, Image Size... ซึ่งปรากฏจอภาพทำงานดังนี

การใช้สี



เครื่องมือแรกที่อยู่ใน Tool Bar ที่เกี่ยวกับสีคือ



เมื่อคลิกเข้าไปใน Foreground/Background Color จะเจอกับ Color Picker เพื่อใช้ในการเลือกสีที่ต้องการ




- คลิกเลือกสีที่ต้องการแล้วกดปุ่ม OK
- สามารถกดที่ปุ่ม Default color เพื่อคืนค่าสีเป็น "ขาว/ดำ"
- สามารถกดปุ่ม Swap color เพื่อกลับค่าสีที่เลือก



เรายังสามารถเลือกสีได้จาก Palette Color และ Swatches โดยการเข้าไปที่เมนู Window / Show Color, Show Swatches



คำสั่งปรับแต่งภาพ

ภาพที่ผ่านการสแกน หรือภาพจากแหล่งอื่นๆ ก่อนนำมาใช้งาน มักจะต้องปรับแต่งสีก่อนเสมอ ด้วยคำสั่ง Image, Adjust


Levels เป็นการปรับความสว่าง-มืดของภาพ โดยการเติมสีขาว-ดำลงไป ซึ่งเราจะใช้กราฟ Histogram ในการปรับระดับสี




กด Alt ค้างไว้ จะเปลี่ยนปุ่ม Cancel เป็น Reset ทำให้กลับไปที่ค่าเริ่มต้น


Auto Levels เป็นการปรับความสว่าง-มืดของภาพ โดยอัตโนมัติ ซึ่งจะคำนึงถึงระดับความสว่างและมืดของสีในแต่ละ Channel


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



Curves เป็นการปรับความสว่าง-มืดของภาพ คล้ายกับ Levels โดยการใช้เส้น Curves เป็นตัวกำหนด ซึ่งจะเป็นการเปรียบเทียบระหว่างสีเดิมกับสีใหม่






Color Balance เป็นการปรับแต่งความสมดุลของสีภาพ โดยใช้โหมดสีเป็นตัวกำหนด เช่น CMYK, RGB..


Brightness/Contrast เป็นการปรับค่าความสว่าง-มืด และความแตกต่างของสีโดยรวม



Hue/Saturation เป็นการปรับแต่งโทนสีโดยคำนึงถึงพื้นฐานการมองเห็นของมนุษย์คือ
Hue = ค่าความสะท้อนแสง
Saturation = ความเข้มข้นของสี
Brightness = ความสว่าง-มืด



Desaturate เป็นการเอาค่าสีออกจากภาพให้เหลือแต่สีขาว-ดำ โดยที่โหมดภาพจะยังคงเดิม



Replace Color เป็นการแทนที่สีในภาพด้วยสีใหม่





Channel Mixer เป็นการปรับแต่งโทนสีแต่ละสีโดยใช้โหมดสีเป็นตัวกำหนด เช่น CMYK,RGB

Invert เป็นการปรับสีในภาพให้เป็นสีตรงข้าม


Equalize เป็นการกระจายค่าความสว่าง-มืดของภาพ ให้มีค่าเท่ากัน มักใช้กับภาพที่สแกนมา


Threshold เป็นการเปลี่ยนภาพสี ให้เป็นภาพที่มีแต่สีขาว-ดำ โดยใช้ค่า Threshold เป็นตัวกำหนด


การตัดภาพ

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

1. เตรียมภาพที่ต้องการ และเปิดไว้บนหน้าต่างการทำงานของ Adobe Photoshop
2. ขยายหน้าต่างภาพ ให้เห็นพื้นที่ว่างรอบภาพ

3. เปิดแถบบรรทัด ด้วยคำสั่ง View, Show Rulers

4. เลือกเครื่องมือ Move Tool

5. นำเมาส์ไปชี้ในแถบไม้บรรทัด คลิกปุ่มเมาส์ค้างไว้ แล้วลากเมาส์ (กรณีที่ชี้ที่บรรทัดแนวนอน ก็ให้ลากเมาส์ลงมา และกรณีที่ชี้ในไม้บรรทัดแนวตั้ง ก็ให้ลากเมาส์ไปด้านขวา) จะปรากฏเส้นนำสายตา (Guide Line : มักเป็นสีน้ำเงิน)

6. เลื่อนเส้นนำสายตา ไปยังตำแหน่งที่เหมาะสมของภาพ แล้วปล่อยนิ้วจากเมาส์ เพื่อยืนยันตำแหน่

7. หากต้องการตำแหน่งอื่น ก็ทำขั้นตอนที่ 5 - 6 ซ้ำ จนได้ครบทุกตำแหน่ง

8. ถ้าต้องการปรับตำแหน่งของเส้นนำสายตา ที่วางไว้แล้ว ให้นำเมาส์ไปชี้ที่เส้นนั้นๆ จะพบว่า Mouse Pointer มีรูปร่างเป็นลูกศรสองหัว ให้กดปุ่มเมาส์ค้างไว้ แล้วปรับตำแหน่ง

9. ถ้าต้องการลบเส้นนำสายตาเส้นใด ให้นำเมาส์ลากเส้นนำสายตาเส้นที่ต้องการ ไปปล่อยในแถบไม้บรรทัด


10. หากต้องการลบเส้นนำสายตาทุกเส้น ให้เลือกคำสั่ง View, Clear Guides

11. ตรวจสอบว่าภาพมีการกำหนดเป็น Layer หรือไม่ หากเป็น Layer จะต้องทำการรวม Layer ก่อน ด้วยคำสั่ง Layer, Flatten Image

12. เปลี่ยนเครื่องมือเป็น Selection Tools ที่ต้องการ เช่น

13. กำหนดพื้นที่รอบกรอบที่กำหนดไว้ ทีละกรอบ

14. เลือกคำสั่ง Edit, Copy เพื่อคัดลอกข้อมูลที่เลือก ไว้ใน Clipboard

15. เลือกคำสั่ง File, New เพื่อเปิดพื้นที่งานใหม่ โดยไม่ต้องตั้งค่าใดๆ ให้กดปุ่ม ได้เลย

16. เลือกคำสั่ง Edit, Paste เพื่อวางข้อมูลจาก Clipboard บนหน้าต่างที่เตรียมไว้

17. จัดเก็บงาน ด้วยไฟล์ฟอร์แมตที่ต้องการ

18. ทำขั้นตอนที่ 13 - 17 ซ้ำ กับภาพตำแหน่งอื่น


การใส่ลักษณะพิเศษให้กับข้อความ

ข้อความต่างๆ สามารถเติมลักษณะพิเศษได้ เช่น อักษรนูน, มีเงา เป็นต้น

1. เปิด Layer Palette

2. คลิกเลือกเลเยอร์ที่ต้องการ

3. คลิกที่ปุ่ม Add a Layer Style ด้านล่างของ Layer Palette

4. เลือกรายการ Layer Style ที่ต้องการ

5. ปรากฏหน้าต่าง Layer Style ที่เลือก เช่น เมื่อเลือก Drop Shadow จะปรากฏรายการเลือก ดังนี้

6. ปรับค่าที่ต้องการ สามารถสังเกตผลที่เลือก ได้จากข้อความจริง เมื่อได้ผลที่ต้องการให้คลิกปุ่ม OK

7. การยกเลิก Style ที่เลือก ให้คลิกเอาเครื่องมือถูกออกจากรายการ Style ที่ปรากฏด้านซ้ายมือของหน้าต่าง Layer Style

ที่มา: http://arcm.rmu.ac.th/photoshop/

หลักในการพิจารณาซื้อเว็บไซต์สำเร็จรูป

หลักในการพิจารณาซื้อเว็บไซต์สำเร็จรูป

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

โปรแกรมสำเร็จรูปพร้อมใช้งาน

	สิทธิความเป็นเจ้าของ 100% สามารถแก้ไขปรับปรุงรายละเอียดของโดเมนเนมได้ด้วยตัวเอง (.com, .org, .net)
	ปรับแต่งเว็บไซต์ด้วยโปรแกรม WYSIWYG editor control เป็นโปรแกรมสร้างโฮมเพจแบบเสมือนจริง ไม่ต้องเขียนภาษา HTML เอง
	ระบบทีมเทมเพลทแห่งแรกในประเทศไทย ที่ทำให้คุณปรับแต่งเมนูได้เพียงจุดเดียว แต่เมนูปรับทุกหน้า.
	ไม่ใช่เพียงเลือกเทมเพลท แต่สามารถใส่เทมเพลทเองได้ คุณจะดาวโหลด หน้าตาเว็บไซต์จากที่ใดมาใส่ก็ได้ โดยไม่ต้องออกแบบเอง
	โปรแกรมรับข้อมูลผ่านฟอร์ม ที่คุณสามารถกำหนดช่องรับข้อมูลเองได้ ดังนั้นคุณจึงสามารถออกแบบฟอร์มรับสมัคร ฟอร์มการสั่งซื้อ ฟอร์มรับความคิดเห็น ฯลฯ ได้อย่างอิสระไม่ต้องไปง้อใคร ไม่ต้องเสียค่าใช้จ่ายเพิ่ม
	โปรแกรมระบบตระกร้า คุณสามารถออกแบบหน้าตระกร้าได้เอง ออกแบบระบบอีเมล์ตอบกลับได้เอง รวมทั้งคำตอบโต้ต่าง ๆ กำหนดค่าจัดส่ง กำหนดภาษี ฯลฯ ตัดบัตรเครดิตได้ทันที
	โปรแกรมการค้นหาภายในเว็บไซต์ คุณสามารถออกแบบหน้าการค้นหาได้เอง กำหนดภาพประกอบ และคำตอบโต้ต่าง ๆ ได้เอง
	โปรแกรมติดต่อเรา คุณสามารถออกแบบหน้าการค้นหาได้เอง สามารถส่งข้อมูลพร้อมรูปภาพถึงอีเมล์ของคุณได้อย่างรวดเร็ว
	ระบบสมาชิก คุณสามารถกำหนดรหัสผ่านให้กับหน้าต่าง ๆ ได้ ดังนั้น จึงกำหนดให้หน้าใด ๆ เป็นหน้าสำหรับสมาชิกได้ คนที่รู้รหัสผ่านของคุณเท่านั้นจึงจะมีสิทธิเข้าดูได้
	กำหนดให้หน้าใด ๆ ไม่ต้องแสดงเทมเพลทก็ได้ ดังนั้นคุณจะกำหนดให้เป็นหน้า Intro หรือหน้ารายงานผล หรือ หน้าสำหรับพิมพ์ได้อย่างง่ายดาย
	แต่ละหน้าสามารถเลือกเทมเพลทที่แตกต่างกันได้ ดังนั้นคุณจึงสามารถทำเว็บ 3 ภาษาได้อย่างง่ายดาย
	แต่ละหน้าสามารถหยุดการใช้งานชั่วคราวได้ ดังนั้นคุณจึงสามารถพัฒนาแบบ Realtime ที่หน้าเว็บไซต์ได้ทุกที่ทุกเวลา
	ปรับแต่งเว็บไซต์ได้ผ่านเว็บไซต์ของคุณเอง ไม่ต้องผ่านเว็บไซต์ของบริษัท
	ใส่ JavaScript ได้
	ใส่ Html ได้
	ใส่ Style Sheet ได้
	ออกแบบเมนูได้ถึง 2 วิธี มือใหม่และมืออาชีพ
	Server ความเร็วสูง ควบคุมโดยโปรแกรมที่มีเสถียรภาพจากส่วนกลางจึงมั่นใจได้ว่าเร็วทุกวินาที ข้อมูลมาจาก http://theweb.tht.in/