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

	การสร้างฟอร์ม (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

การทำลิงค์แบบ Named Anchor

การทำลิงค์แบบ Named Anchor

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

				ขั้นตอนที่ 1 เปิดโปรแกรม Dreamweaver ขึ้นมา และได้สร้างชิ้นงานใหม่ เมื่อเรามีข้อมูลในหน้านั้น ๆ แล้ว แต่ต้องการลิงค์แบบใช้ Named Anchor ในที่นี้ขอสมมุติว่าในเพจของเรามีข้อมูลอยู่เยอะเกิน 1 Screen หน้าจอ (ในที่นี้ขอสมมุติข้อมูลจำนวน 10 บรรทัด แทนจำนวนข้อมูลของเพจ) แ้ล้วเราต้องการทำปุ่มลิงค์ Go to Top ที่บริเวณล่างสุดของเพจ เพื่ออำนวยประโยชน์ให้คนเข้าเว็บได้ใช้ส่วนนี้เพื่อลิงค์กลับขึ้นมาด้านบน ของเพจ (ไม่ต้องเสียเวลาเลื่อน Scrollbar) ดังนั้นเราจะต้องมีการสร้างจุดอ้างอิงค์เสียก่อน ในที่นี้จุดอ้างอิงของเราก็คือส่วนบนสุดของเพจ (เพราะเราจะให้ลิงค์แล้วแสดงส่วนบนของเพจ) ให้เราสร้างNamed Anchor ที่บริเวณนี้ โดยวาง Cursor ที่จุดบริเวณด้านบนสุดของเพจ จากนั้นใช้คำสั่ง Insert ---> Named Anchor ซึ่งจะมีหน้าต่างดังภาพในตำแหน่งที่ 1 ปรากฏขึ้น เพื่อให้เราสร้างชื่อจุดอ้างอิงของ Named Anchor ที่เราจะสร้าง ซึ่งควรตั้งชื่อให้เหมาะสมตามจุดประสงค์ของการใช้งาน ในที่นี้ขอตั้งชื่อว่า "top" (เพราะเป็นจุดอ้างอิงค์ด้านบน) ซึ่งจะได้สัญลักษณ์ Named Anchor ตามภาพที่ 2

	ขั้นตอนที่ 2 วิธีการลิงค์ Named Anchor 2.1 สำหรับการลิงค์ในหน้าเดียวกัน เช่น การสร้างปุ่ม Go to Top ให้เราสร้างข้อความหรือรูปที่จะทำปุ่มลิงค์ที่ด้านล่างสุดของเพจ จากนั้นลิงค์ไปหา Named Anchor ที่เราได้สร้างไว้ในขั้นตอนที่ 1 วิธีการใ่ส่ลิงค์ภายในหน้าเดียวกัน คือใส่ #ตามด้วยชื่อ Named Anchor ตามตัวอย่างนี้ก็จะสามารถระบุลิงค์เป็น #top ตามภาพตำแหน่งที่ 2 2.2 สำหรับการลิงค์ข้ามเพจ เช่น ในหน้านี้เราทำลิงค์เรื่องการสอน Dreamweaver ไว้ เพื่อลิงค์ไปหน้้าชื่อ dreamweaver.html ซึ่งในหน้านั้นจะมีข้อมูลหัวข้อต่าง ๆ มากมายเกี่ยวกับการสอน Dreamweaver รวมทั้งมีหัวข้อเกี่ยวกับสี ซึ่งเราจะลิงค์ไปหน้า Dreamweaver ในเรื่องของสี เราก็สามารถสร้าง Named Anchor ชื่อ color ไว้ในหน้า Dreamweaver ในบริเวณหน้าที่เป็นเนื้อหาหัวข้อเรื่องสี จากนั้นเราก็มาทำลิงค์ในหน้าที่เราต้องการ ตามตัวอย่างในภาพตำแหน่งที่ 3

การใส่ Keyword ให้กับ Web Page โดยใช้โปรแกรม Dreamweaver

การใส่ Keyword ให้กับ Web Page โดยใช้โปรแกรม Dreamweaver   ในการทำ SEO นั้น เราจะต้องมีการใส่ Keyword ให้เว็บเพจ เพื่อให้ผู้ค้นหาข้อมูลจาก Search Engine ได้มีโอกาสเจอเว็บไซต์ของเรา ซึ่งหนึ่งในวิธีการทำ SEO นั้น ก็คือการกำหนดค่า Keyword ให้กับเว็บไซต์ โดยในบทความนี้จะมาสอนวิธีการใส่ โดยใช้โปรแกรม Dreamweaver ค่ะ                 วิธีการใส่ Keyword ให้กับเว็บเพจ ทำได้ง่าย ๆ ดังนี้ ขั้นตอนที่ 1 ให้ทำการเปิดหน้าเว็บเพจที่ต้องการใส่ข้อมูล Keyword โดยใช้โปรแกรม Dreamverver เปิดไฟล์ ขั้นตอนที่ 2 จากนั้นให้ใช้คำสั่ง Insert ---> Head Tag ---> Keywords ตามภาพในตำแหน่งที่ 1 เพื่อเริ่มต้นการใส่ Keyword           ขั้นตอนที่ 3 หลังจากนั้น จะมีหน้าต่าง Keywords ปรากฏขึ้นมา ตามภาพตำแหน่งที่ 2 ให้ทำการใส่ Keyword ที่เกี่ยวข้องกับข้อมูลของเพจนั้น ๆ เช่น           หน้าแรกของเว็บ Thainextstep.com ก็ใส่ Keyword คือ สอน photoshop, สอน php, เขียน HTML ฯลฯ ตามตัวอย่าง ซึ่งจะต้องใส่เครื่องหมายคอมม่า(comma,) คันระหว่าง Keyword แต่ละคำด้วย

เพิ่มความสะดวก เคราะ Space ง่าย ๆ โดยไม่ต้องกด Shift+Ctrl

เพิ่มความสะดวก เคราะ Space ง่าย ๆ โดยไม่ต้องกด Shift+Ctrl   บทความนี้เป็น Tip ของโปรแกรม Dreamweaver ที่จะเพิ่มความสะดวกในการใช้งานโปรแกรม จากที่ปกติใน Dreamweaver เราไม่สามารถเคาะ Space ได้มากกว่า 1 ครั้ง แต่ต้องใช้คีย์ลัด Shift+Ctrl ช่วย ใครที่รำคาญก็มาดูบทความนี้ รับรองแก้ปัญหานี้ให้หมดไปได้ค่ะ         ตามที่เกริ่นไปข้างต้น คนที่เคยใช้โปรแกรม Dreamweaver มาบ้าง ก็คงจะรู้ว่าเมื่อเราจะเคาะ Space ต้องกด Shift+Ctrl ด้วยเสมอ แต่เราสามารถทำให้เคาะ Space แบบปกติได้ ง่าย ๆ ดังนี้                 ขั้นตอนแรก ให้เปิดโปรแกรม Dreamweaver ขึ้นมา จากนั้นใช้คำสั่ง Edit ---> Preferences ดังภาพที่ปรากฏที่ตำแหน่งที่ 1           ขั้นตอนที่ 2 จากนั้นจะมีหน้าต่าง Preferences ปรากฏขึ้นมา ให้สังเกตบริเวณฝั่งซ้ายมือ เลือกเป็น General จากนั้นสังเกตบริเวณฝั่งขวามือ แล้วหาข้อความ "Allow Multiple Consecutive Spaces" เมื่อเจอแล้วให้ทำการคลิกเลือกที่บริเวณด้านหน้าของข้อความนี้ ดังภาพตำแหน่งที่ 2 หลังจากนั้นกด OK   โดยขั้นตอนก่อนหน้านี้ เป็นการเลือกเพื่อให้สามารถเคาะ Space ได้หลายครั้ง เพื่อน ๆ ลองพิมพ์ข้อความทดสอบดูค่ะ ก็จะสามารถพิมพ์ข้อมูล และ เคาะ Space ได้อย่างต่อเนื่อง เหมือน ๆ กับการพิมพ์ข้อความปกติทั่วไป

สร้างการเชื่อมโยงไปยังอีเมล์ (Email Link)

	สร้างการเชื่อมโยงไปยังอีเมล์ (Email Link)
	บทความนี้ เราจะมาใช้โปรแกรม Dreamweaver ทำการสร้างลิงค์ แบบลิงค์อีเมล์ (E-mail Link) เพื่อให้ผู้เยี่ยมชมเว็บไซต์ ได้เขียนอีเมล์ติดต่อถึงเรา

	การทำลิงค์อีเมล์ (Email Link) นี้ จะเป็นการสร้างลิงค์เพื่อส่งอีเมล์ โดยเป็นการเรียกใช้โปรแกรมในเครื่องของผู้ใช้งานเอง เช่น Outlook Express สำหรับวิธีการทำลิงค์ด้วยโปรแกรม Dreamweaver ก็สามารถทำได้ ง่าย ๆ ดังนี้

	ขั้นตอนที่ 1 หลังจากทำการเปิดโปรแกรม Dreamweaver และเปิดไฟล์ที่ต้องการจะสร้างลิงค์ขึ้นมาแล้ว ให้ทำการคลิกที่เครื่องมือ Email Link ตามรูปตำแหน่งที่ 1 หรือ ใช้คำสั่ง Insert ---> Email Link ซึ่งจะปรากฏหน้าต่าง Email Link ตามรูปที่ตำแหน่งที่ 2

	ขั้นตอนที่ 2 ให้กรอกข้อความที่ต้องการจะลิงค์ และ Email Account ปลายทางที่ต้องการส่งอีเมล์ถึงผู้รับ (เมล์เจ้าของเว็บไซต์) หลังจากใส่ข้อมูลเสร็จแล้วก็ให้คลิกปุ่ม OK

บทความ Dreamweaver

บทความ Dreamweaver

สร้างการเชื่อมโยงไปยังอีเมล์ (Email Link) บทความนี้ เราจะมาใช้โปรแกรม Dreamweaver ทำการสร้างลิงค์ แบบลิงค์อีเมล์ (E-mail Link) เพื่อให้ผู้เยี่ยมชมเว็บไซต์ ได้เขียนอีเมล์ติดต่อถึงเรา...  เพิ่มความสะดวก เคราะ Space ง่าย ๆ โดยไม่ต้องกด Shift+Ctrl บทความนี้เป็น Tip ของโปรแกรม Dreamweaver ที่จะเพิ่มความสะดวกในการใช้งานโปรแกรม จากที่ปกติใน Dreamweaver เราไม่สามารถเคาะ Space ได้มากกว่า 1 ครั้ง แต่ต้องใช้คีย์ลัด Shift+Ctrl ช่วย ใครที่รำคาญก็มาดูบทความนี้ รับรองแก้ปัญหานี้ให้หมดไปได้ค่ะ...  การใส่ Keyword ให้กับ Web Page โดยใช้โปรแกรม Dreamweaver ในการทำ SEO นั้น เราจะต้องมีการใส่ Keyword ให้เว็บเพจ เพื่อให้ผู้ค้นหาข้อมูลจาก Search Engine ได้มีโอกาสเจอเว็บไซต์ของเรา ซึ่งหนึ่งในวิธีการทำ SEO นั้น ก็คือการกำหนดค่า Keyword ให้กับเว็บไซต์ โดยในบทความนี้จะมาสอนวิธีการใส่ โดยใช้โปรแกรม Dreamweaver ...  การทำลิงค์แบบ Named Anchor บทความนี้เราจะมาทำลิงค์แบบ Named Anchor ซึ่งเป็นลิงค์แบบกำหนดจุดอ้างอิงค์ในการลิงค์ เชื่อว่าหลาย ๆ คนคงเคยเจอลิงค์แบบนี้กันมาบ้างแล้ว แต่ไม่รู้ว่ามันคืออะไร หรือทำยังไง อยากทำได้เข้าบทความนี้เลยค่ะ...  การสร้างฟอร์ม (Form) ใน Dreamweaver บทความนี้เราจะมาเริ่มต้นสร้างฟอร์มกันค่ะ สำหรับใช้เพื่อต่อยอดในการโปรแกรมภาษา PHP ต่อไป ซึ่งเราสามารถสร้าง Form ในโปรแกรม Dreamweawer ได้ง่าย ๆ ดังนี้...