วันอังคารที่ 27 พฤษภาคม พ.ศ. 2551

การสร้างฟอร์ม

การสร้างฟอร์ม ( Form )

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

การสร้างฟิลด์แบบกรอกข้อความ
1.พิมพ์ข้อความที่เกี่ยวข้องกับส่วนที่ต้องการสร้างฟิลด์ลงไป
2.คลิกปุ่ม เพื่อสร้างฟิลด์
3.จะสังเกตได้ว่ามีช่องสำหรับกรอกข้อความปรากฏขึ้น
4.ที่หน้าต่าง Properties เราสามารถกำหนดจำนวนตัวอักษรสูงสุดที่สามารถกรอกได้ลงในช่อง Max Chars
5.คลิกเลือก Type เป็นแบบ Single Line เพื่อสร้างฟิลด์แบบบรรทัดเดียวได้
การสร้างลิสต์รายการ
การสร้างลิสต์รายการนั้นจะช่วยให้ผู้ชมสามารถใช้งานแบบฟอร์มได้สะดวกยิ่งขึ้นเนื่องจากผู้ชมสามารถคลิกเลือกรายการที่ปรากฏไว้โดยไม่ต้องพิมพ์เองให้เสียเวลา
การสร้างลิสต์รายการนั้นมีอยู่ 2 ลักษณะด้วยกันคือ แบบ Menu และแบบ List แต่ที่นิยมใช้และพบเห็นโดยทั่วไปมักเป็นแบบ Menu เนื่องจากใช้พื้นที่น้อยกว่า การสร้างลิสต์แบบ Menu ซึ่งสามารถทำได้ดังต่อไปนี้
1.พิมพ์ข้อความที่เกี่ยวข้องกับส่วนที่ต้องการฟลิต์ลงไป
2.คลิกปุ่ม เพื่อสร้างลิสต์
3.ที่ Type คลิกเลือก Menu
4.คลิกปุ่ม เพื่อสร้างลิสต์รายการ
5.หน้าต่าง List Valurs จะปรากฏขึ้นมา จากนั้นพิมพ์ข้อความที่ต้องการสร้างลิสต์ลงไป
6. คลิกปุ่ม + เพื่อเพิ่มหัวข้อต่อไปในลิสต์เมนู
7. เมื่อพิมพ์หัวข้อครบแล้วให้คลิกปุ่ม
8. ที่หน้าต่าง Properties คลิกเลือกข้อความที่ต้องการให้ปรากฏไว้ในลิสต์ที่ช่อง Initially selected
9. กดปุ่ม เพื่อทดลองใช้งานฟอร์มที่สร้างไว้ เพียงเท่านี้เราก็จะสามารถสร้างลิสต์ได้ตามต้องการ

การสร้างเช็คบ็อกซ์
เช็ดบ็อกซ์ ( Check box ) เป็นฟอร์มอีกรูปแบบหนึ่งที่มีลักษณะเป็นตัวเลือก โดยเหมาะในการสร้าฟอร์มที่สามารถตอบได้มากกว่า 1 คำตอบ การสร้างเช็คบ็อกซ์สามารถทำได้ดังนี้
คลิกปุ่ม เพื่อสร้างเช็ดบ็อกซ์
สังเกตว่ากล่องจะปรากฏขึ้น จากนั้นพิมพ์ข้อความลงไป เราสามารถสร้างเช็คบ็อกซ์ได้ตามความต้องการ
การสร้าง Radio Button
การสร้าง Radio Button นั้นเหมาะสำหรับการสร้างตัวเลือกที่ให้ผู้ชมคลิกเลือกเพียงตัวเลือกเดียว มักใช้กับคำถามที่ต้องการคำตอบแบบเฉพาะเจาะจงและสามารถสร้าง Radio Button ได้ทั้งแบบกลุ่มและแบบเดี่ยว การสร้าง Radio Button สามารถทำได้ดังนี้
คลิกปุ่ม เพื่อสร้าง Radio Button
พิมพ์ข้อมความตัวเลือกลงไป เพียงเท่านี้ก็เรียบร้อยแล้ว
การสร้างกรอบสำหรับเลือกไฟล์
หากเราต้องการให้ผู้ชมสามารถส่งไฟล์ข้อมูลหรือรูปภาพให้กับเรา เราสามารถทำได้ดังนี้
พิมพ์ข้อความเกี่ยวกับการส่งไฟล์ภาพลงไป คลิกปุ่ม เพื่อสร้างกรอบสำหรับเลือกไฟล์
การสร้างปุ่มกด ( Button )
คลิกปุ่ม เพื่อสร้างปุ่ม
สังเกตว่ามีปุ่มชื่อ Submit ปรากฏขึ้น
เราสามารถเปลี่ยนชื่อที่แสดงบนปุ่มเป็นคำอื่นได้ โดยพิมพ์ข้อความที่ต้องการลงในช่อง Label เพียงเท่านี้เราก็จะได้ปุ่มตามต้องการ
การสร้าง Jump Menu
โดยส่วนใหญ่การสร้าง Jump Menu จะใช้สำหรับเมนูที่มีหัวข้อรายการมาก ๆ เนื่องจากช่วยให้เราประหยัดพื้นที่ของหน้าเว็บเพจ โดยการทำงานของ Jump Menu จะใช้การกระโดดไปยังหน้าเว็บเพจอื่น ๆ ภายในเว็บไซต์จึงทำให้ผู้ชมสามารถเปิดหาข้อมูลได้อย่างรวดเร็วยิ่งขึ้น วิธีสร้าง Jump Menu สามารถทำได้ดังนี้
เปิดหน้าเว็บเพจที่ต้องการสร้าง Jump Menu ขึ้นมา
คลิกปุ่ม เพื่อกำหนดขอบเขตของฟอร์ม
สร้าง Jump Menu โดยคลิกปุ่ม
หน้าต่าง Insert Jump Menu จะปรากฏขึ้นมา ให้พิมพ์ข้อมความที่ต้องการลงในช่อง Text
คลิกปุ่ม เพื่อกำหนดให้ข้อความสามารถลิงค์ไปยังหน้าเว็บเพจที่ต้องการ
6. คลิกเลือกหน้าเว็บเพจที่ต้องการลิงค์ เสร็จแล้วคลิกปุ่ม
7. คลิกปุ่ม + เพื่อเพิ่มข้อความใหม่ลงไปตามต้องการ
8. ที่ช่อง Open URLs in คลิกเลือก Frame “mainFrame” เนื่องจากเราต้องการให้หน้าเว็บเพจที่ลิงค์ไว้ปรากฏลงใน Main Frame
9. คลิกปุ่ม เพื่อตกลงการทำงาน
10. สังเกตผลลัพธ์ จากนั้นที่ช่อง Type คลิกเลือก Menu เสร็จแล้วเพิ่มข้อความให้สมบูรณ์

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

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

ตารางจะทำให้การจัดเว็บเพ็จดูเป็นสัดส่วน เป็นระเบียบ สวยงามและน่าใช้งาน ในตารางสามารถแทรกข้อความ แทรกรูปภาพ การกำหนดสีพื้น รวมทั้งการใช้ Cascading Style Sheet (CSS)
แทรกตาราง ด้วยแทบ Common เลือกไอคอน Insert Table
ช่อง Rows กำหนดจำนวนแถวที่ต้องการ ช่อง Columns กำหนดจำนวนคอลัมน์ที่ต้องการ คลิกปุ่ม OK
แต่ละช่องของตารางเรียกว่า เซลล์
ตารางสามารถแทรก ลบ แถวหรือคอลัมน์ได้
ต้องการแทรก ลบ แถวหรือคอลัมน์ นำ Cursor ไปยังเซลล์ที่ต้องที่ต้องการแทรกหรือ ลบ คลิกขวา เลือก Table แล้วเลือกรายการที่ต้องการ
การรวมเซลล์
ลากเม้าส์เพื่อทำไฮไลท์แถว หรือ คอลัมน์ที่ต้องการรวมเซลล์ คลิกขวา เลือก Table>Merge Cells
สามารถซ้อนตาราง (Nested Table)
นำ Cursor ไปยังเซลล์ที่ต้องที่ต้องการสร้างตาราง เลือกไอคอน Insert Table ขึ้นหน้าจอ Insert Table ให้กำหนดจำนวนแถวและคอลัมน์ตามที่ต้องการ
การใส่รูปภาพและข้อความลงในตาราง
การใช้ตารางใส่รูปภาพและข้อความจะช่วยให้มีการกำหนดขอบเขตการวางภาพได้การใส่รูปภาพและข้อความนั้นใช้วิธีการเดียวกับที่การใส่ภาพธรรมดา
ซึึ่งมีวิธีการดังต่อไปนี้
1. คลิกช่องตารางที่ต้องการใส่ภาพ
2. คลิกปุ่ม ค้างไว้จากนั้นเลือก Image
3. คลิกเลือกไฟล์ภาพที่ต้องการ เสร็จแล้วคลิกปุ่ม

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


การใส่สีให้กับตาราง
1. คลิกเลือกที่ตาราง
2. คลิกปุ่ม Bg color จากนั้นเลือกสีที่ต้องการ
3. สังเกตผลลัพธ์ ตารางก็จะเปลี่ยนสีตามต้องการ

การกำหนด Site

การกำหนด Site
ขั้นตอนนี้มีความสำคัญมาก เนื่องจากการกำหนด Site เป็นการกำหนดชื่อขึ้นมาเป็นตัวแทน ของพื้นที่ที่เก็บไฟล์เว็บเพ็จต่าง ๆ รวมทั้งไฟล์ที่เกี่ยวข้องกับเว็บเพ็จ เช่น ไฟล์รูปภาพ ไฟล์กำหนดการติดต่อกับฐานข้อมูล ซึ่งไฟล์เหล่านี้จะอยู่บนเครื่องของผู้พัฒนา(Local) และอยู่บนเครื่อง Web Server (Remote) ทั้ง Local และ Remote พื้นที่ที่เก็บเว็บเพ็จ คือ DocumentRoot หรือ DocumentRoot ตามด้วยพื้นที่ย่อยที่ผู้พัฒนากำหนด
การพัฒนาเว็บเพ็จจะอ้างถึงชื่อ Site ก็จะเห็นรายชื่อไฟล์เว็บเพ็จและไฟล์ที่เกี่ยวข้องกับเว็บเพ็จ
สร้าง Site
เลือกเมนู Site>New Site หรือเลือกแถบ Files แทบ Site คลิก เลือก Edit Sites คลิกปุ่ม New
คลิกแทบ Advanced CategoryLocal InfoSite Name ให้ตั้งชื่อ
Siteโดยทั่วไปจะตั้งชื่อให้ตรงกับระบบงานที่พัฒนาเพื่อจำได้ง่ายLocal Root Folder ให้เลือกโฟลเดอร์ ที่เก็บเว็บเพ็จ ที่อยู่ระหว่างการพัฒนากำหนดทุกอย่างเรียบร้อยให้คลิกปุ่ม OK
Remote Info ระหว่างพัฒนาAccess เลือก None พัฒนาเสร็จนำไปใช้งานจริงAccess เลือก FTP
FTP Host ชื่อ FTP Server เช่น IP Address หรือ Domain Name
Host Directory พื้นที่เก็บ Web Pages ที่ใช้งานจริง
Testing ServerServer Model ให้เลือก PHP ADODBAccess ให้เลือก Local/Network
Testing Server Folder ให้เลือกโฟลเดอร์ ที่เก็บเว็บเพ็จ ที่อยู่ระหว่างการพัฒนา
URL Prefix ให้พิมพ์ชื่อ Server หรือ Host ที่เป็น Web Server เช่น localhost หรือ IP Address หรือ Domain Nameตามด้วยชื่อโฟลเดอร์ที่เก็บเว็บเพ็จ ที่อยู่ระหว่างการพัฒนากำหนดทุกอย่างเรียบร้อยให้คลิกปุ่ม OK

วันจันทร์ที่ 26 พฤษภาคม พ.ศ. 2551

ใส่ภาพและการเชื่อมโยงลิงค์ในเว็บเพจ

ใส่ภาพและการเชื่อมโยงลิงค์ในเว็บเพจ

การใส่ภาพในเว็บเพจ
การนำรูปภาพต่างๆเข้ามาประกอบในเว็บเพ็จนอกจากจะช่วยทำให้เกิดความสวยงามและดึงดูดความสนใจให้กับผู้ที่เข้ามาชมเว็บแล้ว ยังสามารถทำเป็นจุดเชื่อมโยงได้ ( link )
ชนิดของรูปภาพที่นิยมนำมาใช้ประกอบในเว็บเพ็จ คือ
.gif หรือ .png-8 เป็นภาพที่โปร่งแสง ภาพชนิดนี้จะมีขนาดและจำนวนสี 256 สี (8 บิท) น้อยกว่า .jpg จะมีลักษณะทั้งรูปแบบภาพนิ่ง และภาพเคลื่อนไหว แสดงผลบนเว็บเพ็จได้เร็วกว่า .jpg
.jpg หรือ .jpeg เป็นภาพที่มีจำนวนสี 16.7 ล้านสี จะมีลักษณะเป็นภาพนิ่ง หรือเป็นการถ่ายภาพมาโดยตรงจากกล้องดิจิตอล
. png-24 มีลักษณะเป็นภาพนิ่งที่มีลักษณะโปร่งแสง จะมีขนาดและคุณภาพ มากกว่า .jpg
นอกเหนือจากนี้ ยังมีรูปภาพแบบอื่นๆ อีก เช่น .bmp, .pcx ฯลฯ รวมทั้งไฟล์จาก Flash หรือ Shockwave (.swf ) มาใช้กับเว็บเพ็จได้ด้วย โดยเฉพาะไฟล์นามสกุล .swf จะทำให้การโหลดเว็บเพ็จได้เร็วขึ้น
ขนาดของไฟล์รูปภาพต้องไม่ใหญ่จนเกินไปเพราะจะทำให้การแสดงผลบนเว็บเพ็จช้า
วิธีแทรกรูปภาพ
แทบ Common คลิกไอคอน Image หรือ คลิกเมนู Insert > Image จะปรากฏหน้าจอ
Select Image Source ขึ้นมา หลัง Look in เลือกพื้นที่ที่เก็บรูปภาพ แล้วคลิกเลือกไฟล์รูปภาพที่ต้องการ หลังจากนั้นคลิกปุ่ม OK
เว็บเพ็จจะปรากฏรูปภาพที่เราเลือกแสดงให้เห็น ดังนี้
การสร้างจุดเชื่อมโยง (Link)
เป็นการเชื่อมโยงระหว่างหน้าเว็บเพ็จหรือระหว่างเว็บไซต์ ซึ่งมีหน้าที่ในการเปิดหน้าเว็บเพ็จนั้นๆ ตามที่ได้กำหนดไว้ การเชื่อมโยงเว็บเพ็จเป็นการสั่งให้เว็บเบราเซอร์ไปทำงานที่อีกเว็บเพ็จหนึ่ง หรือไปทำงานที่เว็บไซต์อื่นๆ หรือภายในเว็บเพ็จเดียวกัน โดยเราสามารถสร้างจุดเชื่อมโยงแบบต่างๆ ได้ ดังนี้
เชื่อมโยงด้วยข้อความ
เชื่อมโยงด้วยรูปภาพ
เชื่อมโยงด้วยแผนที่
เชื่อมโยงด้วยอีเมล์
เชื่อมโยงไปยังไฟล์ดาวน์โหลด
เชื่อมโยงภายในเว็บเพ็จเดียวกัน
เชื่อมโยงภายในเว็บไซต์เดียวกัน
เชื่อมโยงไปยังเว็บไซต์อื่นๆ
การนำภาพมาเป็นภาพพื้นหลัง
นอกจากการใส่สีพื้นหลังให้กับเว็บแล้ว เรายังสามารถนำภาพที่ต้องการมาเป็นภาพพื้นหลังได้อีกด้วย ดังต่อไปนี้
1. คลิกเมนู Modify>Page Properties จากนั้นคลิกปุ่ม Browse..
2. คลิกเลือกไฟล์ภาพ Background ที่เราต้องการ เสร็จแล้วคลิกปุ่ม O.K.
3. จะสังเกตได้ว่าชื่อไฟล์ภาพที่เราเลือกไว้จะปรากฏขึ้นที่ช่อง Background image
4. คลิกปุ่ม O.K เพื่อตกตงการทำงาน
การลบภาพพื้นหลัง
การลบภาพพื้นหลังสามารถทำได้ง่าย ๆ โดยคลิกเมนู Modify > Page Properties จากนั้นแดรกเมาส์ลบชื่อภาพพื้นหลังออกไป เสร็จแล้วกดปุ่ม
ส่วนประกอบต่าง ๆของโปรแกรม
Welcome window จะปรากฏครั้งเดียวจากการที่เรียกใช้งาน Dreamweaver MX ครั้งแรกหลังจากการติดตั้ง ให้เลือก Design เพราะการสร้างเว็บเพ็จ จะใช้การหน้าจอ Design (ออกแบบ) เป็นหลัก
Menu การทำงานบน Dreamweaver MX สามารถสั่งผ่านทางเมนู
Insert bar ประกอบด้วยไอคอน Object ต่างๆ แต่ละ Object จะมีคุณสมบัติเฉพาะ ผู้พัฒนาต้องรู้คุณสมบัติของแต่ละ Object ซึ่งผู้พัฒนาสามารถแทรก Object ต่าง ๆ ลงในเว็บเพ็จ เช่น ข้อความ รูปภาพ ตาราง ฟอร์ม ฯ ลฯ ซึ่ง Object เหล่านี้ เมื่อแทรกลงในเว็บเพ็จ ก็คือการแทรกแท็ก HTML ลงไปนั่นเอง ผู้พัฒนาสามารถใช้เมนู Insert แทนการคลิกปุ่ม Object ต่างๆ บน Insert bar ได้เช่นเดียวกัน
Document toolbar ประกอบด้วยไอคอนที่เกี่ยวข้องกับ Document window เช่น ไอคอน การออกแบบ ( Show Design view ) การเขียนโค้ด ( Show Code view )
Document window เป็นพื้นที่ในการสร้างเว็บเพ็จ ประกอบด้วย Show Design view ใช้ในการออกแบบเว็บเพ็จ และ Show Code view ใช้ในการเขียนโค้ด หน้าจอทั้งสองนี้สำคัญมาก เพราะการสร้างเว็บเพ็จจะสร้างจากหน้าจอทั้งสองนี้เป็นหลัก
Property inspector ดูหรือแก้ไข คุณสมบัติของ Object บนเว็บเพ็จ
Panel groups คือกลุ่มของแถบ ( Panel ) ซึ่งเป็นกลุ่มที่รวบรวมการทำงานที่เกี่ยวข้องกันไว้ที่เดียวกัน ผู้พัฒนาจะใช้แถบเหล่านี้ในการสร้างเว็บเพ็จ
File panel คือ กลุ่มแถบไฟล์ประกอบ Site ที่เก็บเว็บเพ็จต่างๆ ที่อยู่ระหว่างการพัฒนา
Tag selector สำหรับคลิกเพื่อเลือกแท็กในตำแหน่งที่ต้องการบนเว็บเพ็จ
นอกเหนือจากนี้ Dreamweaver MX ยังมีแถบ ( Panel) และเครื่องมืออื่นๆ ที่ไม่ได้แสดงให้เห็นในหน้าจอนี้ เช่น Design Panel , Code Panel และ Application Panel เป็นต้น แต่สามารถเรียกใช้ได้ผ่านเมนู ของโปรแกรม

รู้จักกับ Dreamweaver MX 2004

รู้จักกับ Dreamweaver MX 2004
Macromedia Dreamweaver MX คือโปรแกรม หรือเครื่องมือ ที่ใช้ในการพัฒนาเว็บไซด์ระดับมืออาชีพ มีความสามารถ ในการใช้สร้าง ออกแบบ เขียนโค้ด เว็บเพ็จ บริหารจัดการเว็ บไซต์ และเว็บแอพพลิเคชั่น ได้อย่างมีประสิทธิภาพ ช่วยลดงาน ลดเวลาในการพัฒนาเว็บเพ็จ โดยสามารถสร้างโค้ดได้หลายภาษา เช่น HTML, PHP, ASP, JSP ฯ และสามารถติดต่อกับฐานข้อมูลได้หลายฐานข้อมูล เช่น MySQL, PostgreSQL, MS Access, MS SQL Server ฯ โดยที่ผู้ออกแบบเว็บเพ็จ ไม่จำเป็นต้องมีความความรู้ด้านภาษาและการจัดการฐานข้อมูล หรือมีความรู้เพียงเล็กน้อยก็สามารถสร้างเว็บเพ็จได้อย่างรวดเร็ว
การสร้างเว็บเพ็จด้วย Dreamweaver MX เครื่องคอมพิวเตอร์ต้องมีโปรแกรมเหล่านี้เป็นอย่างน้อย
Operating System (OS) เช่น Windows, Linux (SQL Database Server)
Web Server คือ Apache
PHP
Dreamweaver MX
การเข้าสู่โปรแกรม Dreamweaver MX 2004
1. คลิกที่ไอคอน
2.เมื่อดับเบิลคลิกเข้าสู่โปรแกรมแล้ว จะปรากฏหน้าต่างแบบนี้ขึ้นมา ให้คลิกเมนู File>New เพื่ออเริ่มสร้างงานใหม่

การสร้างหน้าเพจใหม่ในโฟลเดอร์
คลิกเมาส์ขวาที่โฟลเดอร์ จากนั้นเลือกคำสั่ง New File
ตั้งชื่อไฟล์ เสร็จแล้วกดปุ่ม บนคีย์บอร์ด ( อย่าลืมใส่ .htm ) เพียงเท่านี้ก็เสร็จเรียบร้อย
ดับเบิ้ลคลิกที่ชื่อไฟล์ เพื่อเปิดหน้าเว็บเพจขึ้นมาใช้งาน
นอกจากนี้เรายังสามารถสร้างโฟลเดอร์ใหม่ได้ โดยคลิกที่โฟลเดอร์จากนั้นเลือกคำสั่ง New Folder

การจัดเก็บไฟล์และโฟลเดอร์สำหรับเว็บไซต์
สิ่งหรึ่งที่สำคัญมากก่อนการเริ่มต้นใช้งานโปรแกรมก็คือการกำหนดไซต์หรือการกำหนดการจัดเก็บไฟล์ข้อมูลให้รวมอยู่ในโฟลเดอร์เดียวกัน เพื่อการเรียกใช้ไฟล์งานได้อย่างมีประสิทธิภาพ ซึ่งเราสามารถทำได้ดังนี้
1. คลิกเมนู Site>Manage Sittes
2. คลิกปุ่ม New... จากนั้นเลือก Site เพื่อสร้างไซต์ใหม่
3. คลิกแท็บ Advanced จากนั้นตั้งชื่อไซต์ที่ต้องการในช่อง Stite Name
4. คลิกปุ่ม O.K เพื่อตกลง