ภาษา HTML
หมายเหตุ : สัญลักษณ์ ( ) คือสัญลักษณ์ < >
เปิดโปรแกรม Notepad และเริ่มต้นกันด้วย การพิมพ์ข้อความตามผมดังนี้
(HTML)
(/HTML)
แต่ละข้อความที่พิมพ์มานี้เราเรียกมันว่า แท็ก (Tag) ซึ่งแท็กแรก เป็นแท็กที่ใช้บอกว่าเป็นการเริ่มต้นเอกสาร และต่อมาก็คือแท็กที่ใช้บอกจุดสิ้นสุด การกำหนดว่าแท็กใด เป็นแท็กสิ้นสุด สามารถทำได้โดยการใส่เครื่อง หมาย "/" ไว้ที่หน้าแท็ก เป็นส่วนใหญ่, แต่ก็ไม่ได้หมายความว่าทุกแท็ก จำเป็นจะต้องมีแท็กปิดเสมอไป
เมื่อเรานึกถึง "แท็ก" ก็เหมือนกับว่า เราได้พูดคุยกับ โปรแกรมเบราส์เซอร์ หรือไม่ก็ เป็นการ บอกรายละเอียด ให้กับมัน แล้วอะไรละที่คุณบอก สิ่งแรกก็คือ "นี่คือการเริ่มต้นเอกสาร (HTML) และสิ่งต่อมาก็คือ "นี่คือการสิ้นสุดเอกสาร" (/HTML) เมื่อมาถึงตรง นี้แล้ว สิ่งที่จะต้องทำต่อไปก็คือเริ่มใส่แท็กอื่น ๆ เข้าไปอีก
ในเอกสาร HTML โดยทั่วไปมักจะต้องมีแท็ก HEAD เพื่อกำหนดรายละเอียดในส่วนหัวของเอกสาร
(HTML)
(HEAD)
(/HEAD)
(/HTML)
และรายละเอียดแรกที่เราจะใส่ไว้ในส่วนหัวของเอกสาร (อยู่ระหว่างแท็ก HEAD) ก็คือ แท็กไตเติ้ล TITLE ซึ่งก็คือชื่อเรื่องนั่นเอง
(HTML)
(HEAD)
(TITLE)(/TITLE)
(/HEAD)
(/HTML)
และต่อมาก็คือแท็ก BODY ซึ่งเป็นแท็กที่สำคัญอย่างยิ่ง เพราะต่อไปรายละเอียดต่างๆ ใน เอกสารของเราจะถูกใส่ไว้ภายในแท็กนี้
อ้อ, และอีกสิ่งหนึ่งที่เราจะทำกันก็คือ, ใส่ชื่อหรือไตเติ้ลให้กับเอกสาร
(HTML)
(HEAD)
(TITLE)นี่คือเว็บเพ็จแรกของฉัน!(/TITLE)
(/HEAD)
(BODY)
(/BODY)
(/HTML)
บันทึก ข้อมูลที่พิมพ์มาทั้งหมดโดยเลือก File / Save as แล้วตั้งชื่อเป็น page1.shtml
สำหรับผู้ใช้ windows เวอร์ชั่น 3.11 ให้ตั้งชื่อเป็น page1.htm
ขอแสดงความยินดี! ที่คุณสามารถมีเว็บเพ็จเอาไว้อวดคุณพ่อคุณแม่หรือคนอื่น ๆ ได้แล้ว! และคุณก็สามารถที่ จะอัพโหลดมันไปไว้ที่เครื่องเซริฟเวอร์เพื่อแสดงให้คนทั้งโลกได้ดูผลงานของคุณคุณสามารถดับเบิ้ลคลิกบนไอคอน เพื่อดูผลงานของคุณ ซึ่งสิ่งที่คุณเห็นจะเป็นเพียงหน้าว่างเปล่า แต่มันก็คือเอกสาร HTML ขั้นตอนต่อไปก็คือเริ่มต้นใส่สิ่งต่าง ๆ ลงไปในเว็บเพ็จ
ก่อนที่จะข้ามไปเรียนรู้ในบทต่อไป มีสิ่งจำเป็น 2 ประการที่คุณจะต้องเตรียมก็คือ ประการแรก คุณจะต้องเตรียมข้อมูล พอคร่าว ๆ ว่าเว็บเพจของคุณควรจะมีหน้าตาเป็นอย่างไร และประการที่สองก็คือคุณต้องจำองค์ประกอบพื้นฐานของ เอกสาร HTML ในบทนี้ให้ดี
บทที่ 1 นี้คือเว็บเพ็จหน้าแรกของฉัน
จะว่าไปแล้วก็เหมือนกับการเลี้ยงลูกบาสเก็ตบอลที่กระเด้งได้, ก่อนอื่นให้คุณ เปิดโปรแกรม Notepad และเริ่มต้นกันด้วย การพิมพ์ข้อความตามผมดังนี้
(HTML)
(/HTML)
แต่ละข้อความที่พิมพ์มานี้เราเรียกมันว่า แท็ก (Tag) ซึ่งแท็กแรก เป็นแท็กที่ใช้บอกว่าเป็นการเริ่มต้นเอกสาร และต่อมาก็คือแท็กที่ใช้บอกจุดสิ้นสุด การกำหนดว่าแท็กใด เป็นแท็กสิ้นสุด สามารถทำได้โดยการใส่เครื่อง หมาย "/" ไว้ที่หน้าแท็ก เป็นส่วนใหญ่, แต่ก็ไม่ได้หมายความว่าทุกแท็ก จำเป็นจะต้องมีแท็กปิดเสมอไป
เมื่อเรานึกถึง "แท็ก" ก็เหมือนกับว่า เราได้พูดคุยกับ โปรแกรมเบราส์เซอร์ หรือไม่ก็ เป็นการ บอกรายละเอียด ให้กับมัน แล้วอะไรละที่คุณบอก สิ่งแรกก็คือ "นี่คือการเริ่มต้นเอกสาร (HTML) และสิ่งต่อมาก็คือ "นี่คือการสิ้นสุดเอกสาร" (/HTML) เมื่อมาถึงตรง นี้แล้ว สิ่งที่จะต้องทำต่อไปก็คือเริ่มใส่แท็กอื่น ๆ เข้าไปอีก
ในเอกสาร HTML โดยทั่วไปมักจะต้องมีแท็ก HEAD เพื่อกำหนดรายละเอียดในส่วนหัวของเอกสาร
(HTML)
(HEAD)
(/HEAD)
(/HTML)
และรายละเอียดแรกที่เราจะใส่ไว้ในส่วนหัวของเอกสาร (อยู่ระหว่างแท็ก HEAD) ก็คือ แท็กไตเติ้ล TITLE ซึ่งก็คือชื่อเรื่องนั่นเอง
(HTML)
(HEAD)
(TITLE)(/TITLE)
(/HEAD)
(/HTML)
และต่อมาก็คือแท็ก BODY ซึ่งเป็นแท็กที่สำคัญอย่างยิ่ง เพราะต่อไปรายละเอียดต่างๆ ใน เอกสารของเราจะถูกใส่ไว้ภายในแท็กนี้
(HTML)
(HEAD)
(TITLE)(/TITLE)
(/HEAD)
(BODY)
(/BODY)
(/HTML)
อ้อ, และอีกสิ่งหนึ่งที่เราจะทำกันก็คือ, ใส่ชื่อหรือไตเติ้ลให้กับเอกสาร
(HTML)
(HEAD)
(TITLE)นี่คือเว็บเพ็จแรกของฉัน!(/TITLE)
(/HEAD)
(BODY)
(/BODY)
(/HTML)
บันทึก ข้อมูลที่พิมพ์มาทั้งหมดโดยเลือก File / Save as แล้วตั้งชื่อเป็น page1.shtml
สำหรับผู้ใช้ windows เวอร์ชั่น 3.11 ให้ตั้งชื่อเป็น page1.htm
ขอแสดงความยินดี! ที่คุณสามารถมีเว็บเพ็จเอาไว้อวดคุณพ่อคุณแม่หรือคนอื่น ๆ ได้แล้ว! และคุณก็สามารถที่ จะอัพโหลดมันไปไว้ที่เครื่องเซริฟเวอร์เพื่อแสดงให้คนทั้งโลกได้ดูผลงานของคุณ ถ้าคุณใช้ Netscape ไฟล์ที่คุณ สร้างควรจะมีไอคอนเป็นแบบนี้...
(ถ้าไอคอนของคุณแตกต่างไปจากนี้ก็ไม่ต้องตกใจ, เพราะมันไม่ใช่เรื่องใหญ่)
คุณสามารถดับเบิ้ลคลิกบนไอคอน เพื่อดูผลงานของคุณ ซึ่งสิ่งที่คุณเห็นจะเป็นเพียงหน้าว่างเปล่า แต่มันก็คือเอกสาร HTML ขั้นตอนต่อไปก็คือเริ่มต้นใส่สิ่งต่าง ๆ ลงไปในเว็บเพ็จ
ก่อนที่จะข้ามไปเรียนรู้ในบทต่อไป มีสิ่งจำเป็น 2 ประการที่คุณจะต้องเตรียมก็คือ ประการแรก คุณจะต้องเตรียมข้อมูล พอคร่าว ๆ ว่าเว็บเพ็จของคุณควรจะมีหน้าตาเป็นอย่างไร และประการที่สองก็คือคุณต้องจำองค์ประกอบพื้นฐานของ เอกสาร HTML ในบทนี้ให้ดี
บทที่ 2 กำหนด FONT ที่จะใช้ในเว็บเพ็จ
(HTML)
(HEAD)
(TITLE) นี่คือเว็บเพ็จแรกของฉัน (/TITLE)
(/HEAD)
(BODY)
(FONT FACE="AngsanaUPC")
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(FONT FACE="JasmineUPC")
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(FONT FACE="IrisUPC")
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(/BODY)
(/HTML)
ผลลัพธ์ที่ได้
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
อธิบายคำสั่ง
(FONT FACE = “ชื่อฟ้อนต์ที่ใช้”) เป็นคำสั่งที่ใช้กำหนดฟ้อนต์ที่จะใช้ในเว็บเพจ
(/FONT) เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ
บทที่ 3 การกำหนดรูปแบบของอักษร
(HTML)
(HEAD)
(TITLE) นี่คือเว็บเพ็จแรกของฉัน (/TITLE)
(/HEAD)
(BODY)
Hello World, นี่คือเว็บเพ็จแรกของฉัน(P)
(B) Hello World, นี่คือเว็บเพ็จแรกของฉัน(/B)(P)
(I) Hello World, นี่คือเว็บเพ็จแรกของฉัน(/I)(P)
(S) Hello World, นี่คือเว็บเพ็จแรกของฉัน(/S)(P)
(U) Hello World, นี่คือเว็บเพ็จแรกของฉัน(/U)(P)
ข้อความแบบ Super Script E=MC(SUP)2(/SUP)(P)
ข้อความแบบ Sub Script H(SUB)2(/SUB)O(P)
(/BODY)
(/HTML)
ผลลัพธ์ที่ได้
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
ข้อความแบบ Super Script E=MC2
ข้อความแบบ Sub Script H2O
อธิบายคำสั่ง
(B)(/B) เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวเข้ม
(I)(/I) เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวเอียง
(S)(/S) เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดฆ่า
(U)(/U) เป็นคำสั่งที่ใช้กำหนดรูปแบบตัวอักษร-ตัวขีดเส้นใต้
(SUP)(/SUP) เป็นคำสั่งที่ใช้กำหนดรูปแบบ Super Script
(SUB)(/SUB) เป็นคำสั่งที่ใช้กำหนดรูปแบบ Sub Script
บทที่ 4 การกำหนดขนาดของตัวอักษร
(HTML)
(HEAD)
(TITLE) นี่คือเว็บเพ็จแรกของฉัน (/TITLE)
(/HEAD)
(BODY)
(FONT SIZE=6)
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(FONT SIZE=5)
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(FONT SIZE=4)
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(FONT SIZE=2)
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(/BODY)
(/HTML)
ผลลัพธ์ที่ได้
Hello World, FONT SIZE = 6
Hello World, FONT SIZE = 5
Hello World, FONT SIZE = 4
Hello World, FONT SIZE = 2
อธิบายคำสั่ง
(FONT SIZE=ขนาดตัวอักษร) เป็นคำสั่งที่ใช้กำหนดขนาดตัวอักษรที่จะใช้ในเว็บเพ็จ
ขนาดตัวอักษร สามารถกำหนดได้ตั้งแต่ 1 – 7
(/FONT) เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ
บทที่ 5 การเน้นสีให้กับข้อความหรือตัวอักษร
(HTML)
(HEAD)
(TITLE) นี่คือเว็บเพ็จแรกของฉัน (/TITLE)
(/HEAD)
(BODY)
(FONT COLOR=RED)
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(FONT COLOR=GREEN)
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(FONT COLOR=BLUE)
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(FONT COLOR=VIOLET)
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(FONT COLOR=YELLOW)
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/FONT)
(/BODY)
(/HTML)
ผลลัพธ์ที่ได้
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
อธิบายคำสั่ง
(FONT COLOR="ชื่อสี") เป็นคำสั่งที่ใช้กำหนดสีให้กับตัวอักษรที่จะใช้ในเว็บเพ็จ
(/FONT) เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ
ชื่อสีที่ใช้สามารถใช้ชื่อสีเช่น Blue, White, Red หรือจะใช้เป็นรหัสสีตามเลขฐาน 16 ก็ได้
เช่น #66FFFF, FFFF99, FFCCFF เป็นต้น
บทที่ 6 การกำหนดสีตัวอักษรและสีแบล็คกราวด์
(HTML)
(HEAD)
(TITLE) นี่คือเว็บเพ็จแรกของฉัน (/TITLE)
(/HEAD)
(BODY TEXTCOLOR="black" BGCOLOR="lightblue")
Hello World, นี่คือเว็บเพ็จแรกของฉัน(BR)
(/BODY)
(/HTML)
ผลลัพธ์ที่ได้
Hello World, นี่คือเว็บเพจแรกของฉัน
อธิบายคำสั่ง
(BODY TEXTCOLOR="ชื่อสี" BGCOLOR="ชื่อสี")
TEXTCOLOR ใช้กำหนดสี Default ให้กับตัวอักษรทั้งหมดภายในเอกสาร
BGCOLOR ใช้กำหนดสีแบล็คกราวด์ของเอกสาร กำหนดได้เพียงครั้งละหนึ่งสี
บทที่ 7 การจัดวางตำแหน่งข้อความ
(HTML)
(HEAD)
(TITLE) นี่คือเว็บเพ็จแรกของฉัน (/TITLE)
(/HEAD)
(BODY)
(P ALIGN=LEFT)Hello World, นี่คือเว็บเพ็จแรกของฉัน(/P)
(P ALIGN=CENTER)Hello World, นี่คือเว็บเพ็จแรกของฉัน(/P)
(P ALIGN=RIGHT)Hello World, นี่คือเว็บเพ็จแรกของฉัน(/P)
(/BODY)
(/HTML)
ผลลัพธ์ที่ได้
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
Hello World, นี่คือเว็บเพ็จแรกของฉัน
อธิบายคำสั่ง
(P) เป็นการสั่งให้ขึ้นย่อหน้าใหม่ (ปกติจะอยู่ชิดซ้ายเสมอ)
(P) ALIGN=LEFT) กำหนดให้ข้อความอยู่ชิดด้านซ้าย
(P ALIGN=CENTER) กำหนดให้ข้อความอยู่กึ่งกลางเอกสาร
(P ALIGN=RIGHT) กำหนดให้ข้อความอยู่ชิดด้านขวา
(/P) เป็นคำสั่งปิดที่ต้องใช้คู่กันเสมอ (เมื่อใช้ (P ALIGN))
บทที่ 8 การจัดลำดับหัวข้อและเนื้อหาโดยใช้ (UL)
(HTML)
(HEAD)
(TITLE) นี่คือเว็บเพ็จแรกของฉัน (/TITLE)
(/HEAD)
(BODY)
การจัดหัวข้อโดยใช้ (UL TYPE="disc")(BR)
(UL TYPE="disc")
(LI)INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner(/LI)
(LI)CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด(/LI)
(LI)OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter(/LI)
(/UL)
การจัดหัวข้อโดยใช้ (UL TYPE="square")(BR)
(UL TYPE="square")
(LI)INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner(/LI)
(LI)CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด(/LI)
(LI)OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter(/LI)
(/UL)
การจัดหัวข้อโดยใช้ (UL TYPE="circle")(BR)
(UL TYPE="circle")
(LI)INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner(/LI)
(LI)CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด(/LI)
(LI)OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter(/LI)
(/UL)
(/BODY)
(/HTML)
ผลลัพธ์ที่ได้
การจัดหัวข้อโดยใช้ (UL TYPE="disc")
• INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner
• CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด
• OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter
การจัดหัวข้อโดยใช้ (UL TYPE="square")
INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner
CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด
OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter
การจัดหัวข้อโดยใช้ (UL TYPE="circle")
o INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner
o CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด
o OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter
อธิบายคำสั่ง
(UL) เริ่มต้นลำดับข้อมูล
(TYPE="..") เครื่องหมายลำดับข้อมูล ได้แก่ disc, square และ circle โดยจะมี disc เป็นค่า Default
(LI) เริ่มต้นข้อมูลใน List
(/LI) สิ้นสุดข้อมูลใน List
(/UL) สิ้นสุดการลำดับข้อมูล
บทที่ 9 การจัดลำดับหัวข้อและเนื้อหาโดยใช้ (OL)
(HTML)
(HEAD)
(TITLE) นี่คือเว็บเพ็จแรกของฉัน (/TITLE)
(/HEAD)
(BODY)
การจัดหัวข้อโดยใช้ (OL)(BR)
(OL)
(LI)INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner(/LI)
(LI)CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด
(/LI)
(LI)OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter(/LI)
(/OL)
การจัดหัวข้อโดยใช้ (OL TYPE="A" )(BR)
(OL TYPE="A" )
(LI)INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner(/LI)
(LI)CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด
(/LI)
(LI)OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter(/LI)
(/OL)
การจัดหัวข้อโดยใช้ (OL TYPE="I")(BR)
(OL TYPE="I")
(LI)INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner(/LI)
(LI)CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด
(/LI)
(LI)OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter(/LI)
(/OL)
(/BODY)
(/HTML)
ผลลัพธ์ที่ได้
การจัดหัวข้อโดยใช้ (OL)
1. INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner
2. CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด
3. OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter
การจัดหัวข้อโดยใช้ (OL TYPE="A")
A. INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner
B. CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด
C. OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter
องการจัดหัวข้อโดยใช้ (OL TYPE="I")
I. INPUT UNIT หรือหน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner
II. CENTRAL PROCESSING UNIT (CPU) หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด
III. OUTPUT UNIT หรือหน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter
อธิบายคำสั่ง
(OL) เริ่มต้นลำดับข้อมูล
TYPE="A" กำหนดเครื่องหมายเพื่อใช้ในการลำดับข้อมูล ได้แก่ A, a, I, i ถ้าไม่กำหนดจะเริ่มต้นด้วย 1 เสมอ
(LI) เริ่มต้นข้อมูลใน List
(/LI) สิ้นสุดข้อมูลใน List
(/OL) สิ้นสุดการลำดับข้อมูล
บทที่ 10 การจัดลำดับหัวข้อและเนื้อหาโดยใช้ (DL)
(HTML)
(HEAD)
(TITLE) นี่คือเว็บเพ็จแรกของฉัน (/TITLE)
(/HEAD)
(BODY)
องค์ประกอบที่สำคัญของคอมพิวเตอร์ มีดังต่อไปนี้(BR)
(DL)
(DT)INPUT UNIT(/DT)
(DD)หน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner(/DD)
(DT)CENTRAL PROCESSING UNIT(DT)
(DD)CPU หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด(/DD)
(DT)OUTPUT UNIT(/DT)
(DD)หน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter(/DD)
(/DL)
(/BODY)
(/HTML)
ผลลัพธ์ที่ได้
องค์ประกอบที่สำคัญของคอมพิวเตอร์ มีดังต่อไปนี้
INPUT UNIT
หน่วยรับข้อมูล ได้แก่ Keyboard, Mouse, Scanner
CENTRAL PROCESSING UNIT
CPU หรือหน่วยประมวลผลกลาง ถือเป็นส่วนที่สำคัญที่สุด
OUTPUT UNIT
หน่วยแสดงผล ได้แก่ Monitor, Printer, Plotter
อธิบายคำสั่ง
(DL) เริ่มต้นลำดับข้อมูล
(DT) คำจำกัดความ
(DD) ความหมายหรือคำอธิบาย
บทที่ 11 การใส่รูปภาพประกอบในเว็บเพ็จ
(HTML)
(HEAD)
(TITLE) นี่คือเว็บเพ็จแรกของฉัน (/TITLE)
(/HEAD)
(BODY)
(CENTER)
นี่คือภาพดาราคนโปรดของฉัน(BR)
(IMG SRC="mypic.gif" BORDER=0 WIDTH=120 HIGHT=120 ALT="Super Star")(BR)
ลองทายดูซิว่าเธอคือใคร(BR)
(/CENTER)
(/BODY)
(/HTML)
อธิบายคำสั่ง..
(IMG) เป็นการบอกให้รู้ว่านี่คือแท็กรูปภาพ
SRC="ชื่อไฟล์รูปภาพ" ชื่อของรูปภาพที่จะนำมาประกอบเว็บเพ็จ (ต้องระบุ)
BORDER=0 กำหนดให้มีหรือไม่มีเส้นขอบรอบรูปภาพ 0=ไม่มีเส้นขอบ (ค่าปกติ)
WIDTH=120 กำหนดขนาดความกว้างของรูปภาพ (Pixel) (ไม่ต้องกำหนดก็ได้)
HEIGHT=120 กำหนดขนาดความสูงของรูปภาพ (Pixcel) (ไม่ต้องกำหนดก็ได้)
ALT="คำอธิบาย" คำอธิบายนี้จะแสดงในกรณีที่ไม่สามารถแสดงรูปภาพได้ หรือเมื่อวางเมาส์บนรูปภาพ
แบบทดสอบ
1. HTML ชื่อเต็มที่เป็นภาษาอังกฤษ ข้อใดถูกต้อง
ก. Hypertext Markup Lan
ข. Hypertext Markup Langlan
ค. Hypertext Markup Language
ง. Hypertext Markup Logic
2. Body tags หมายถึงอะไร
ก. ส่วนเนื้อหาที่เราจะใส่
ข.ส่วนต้นของหัวข้อ
ค. ส่วนท้ายของเรื่อง
ง. ส่วนหัวข้อเรื่อง
3. HTML มีไว้เพื่อประโยชน์อย่างไร
ก. เพื่อเข้าเล่นในอินเตอร์เน็ต
ข. เพื่อใช้ดูรูปภาพ
ค. เพื่อใช้ก็อปปี้งาน
ง. เพื่อใช้ในการสร้างเว็บเพ็จ
4. โปรแกรมใดที่ใช้ในการเขียน HTML
ก. Notepad
ข. Microsoft Word
ค. Microsoft Excel
ง. Microsoft Power point
5. HEAD TAGS หมายถึงอะไร
ก. รายละเอียดส่วนกลางเอกสาร
ข. รายละเอียดส่วนท้ายของเอกสาร
ค. รายละเอียดส่วนหัวของเอกสาร
ง. รายละเอียดส่วนรูปภาพ
6. Tags TITLE หมายถึงอะไร
ก. ชื่อเรื่อง
ข. ตัวเรื่อง
ค. ท้ายเรื่อง
ง. ทั้งหมดของเรื่อง
7. โครงสร้างของ HTML ข้อใดถูก
ก. HEAD, BODY, TITLE
ข. HEAD, TITLE, BODY
ค. HEAD, TITLE, BODY
ง. HEAD, TITEL, BODY
8. ตัวอักษรตัวใดที่ใช้กำหนดอักษรตัวเข้ม
ก. A ข. B
ค. C ง. U
9. ตัวอักษรตัวใดที่ใช้กำหนดอักษรตัวเอน
ก. B ข. E
ค. T ง. I
10. ตัวอักษรตัวใดที่ใช้กำหนดอักษรตัวขีดเส้นใต้
ก. B ข. I
ค. T ง. U
11. ตัวอักษรตัวใดที่ใช้กำหนดอักษรตัวขีด
ก. S ข. O
ค. M ง. L
12. BGCOLOR กำหนดได้เพียงกี่สี
ก. 1 ข. 2
ค. 5 ง. 10
13. การกำหนด Tags สิ้นสุด จะใส่เครื่องหมายใด
ก. \ ข. /
ค. // ง. \\
14. Input Unit หรือหน่วยรับข้อมูลได้แก่ข้อใด
ก. Monitor ข. Printer
ค. Keyboard ง. Plotter
15. เวลาที่จะบันทึกให้บันทึกเป็นนามสกุลอะไร
ก.httl ข. htll
ค. htlm ง. html
เฉลยแบบทดสอบ
1. ค. Hypertext Markup Language
2. ก. ส่วนเนื้อหาที่เราจะใส่
3. ง. เพื่อใช้ในการสร้างเว็บเพ็จ
4. ก. Notepad
5. ค. รายละเอียดส่วนหัวของเอกสาร
6. ก. ชื่อเรื่อง
7. ค. HEAD, TITLE, BODY
8. ข. B
9. ง. I
10. ง. U
11. ก. S
12. ก. 1
13. ข. /
14. ค. Keyboard
15. ง. html
วันเสาร์ที่ 6 กันยายน พ.ศ. 2551
วันพฤหัสบดีที่ 4 กันยายน พ.ศ. 2551
โปรแกรม Macromedia Dreamweaver
ส่วนประกอบประกอบต่าง ๆ ของดรีมเวเวอร์
โปรแกรม Dreamweaver เป็นอีกโปรแกรมหนึ่งที่ได้รับความนิยมมากในการสร้างเวบเพจเพราะความสะดวกในการ
ตกแต่งเว็บเพจด้วยวิธีง่าย ๆ นั่นเอง ต่อไปนี้จะได้เรียนรู้วิธีพื้นฐานรวมถึงเทคนิคต่าง ๆ ที่สำคัญในการใช้งานเครื่องมือที่
Dreamweaver เตรียมเอาไว้แล้ว
การใช้งานเบื้องต้น
หลังจากที่เปิดโปรแกรม Dreamweaver 4 จะสังเกตเห็นหน้าจอที่เข้าใจง่ายต่อการออกแบบและปรับเปลี่ยนได้ตามความถนัดของผู้ใช้ การออกแบบจะอยู่ในส่วนที่เรียกว่าหน้า DOCUMENT เมื่อเรานำมาเปิดที่ Browser ก็จะเห็นเหมือนกับที่เราออกแบบไว้ที่หน้า DOCUMENT ซึ่งเป็นการง่ายต่อการออกแบบ
ส่วนประกอบของ Dreamweaver
เมื่อเรียกใช้โปรแกรม Dreamweaver แล้วจะปรากฏหน้าต่างของโปรแกรมดังรูป ซึ่งจะมีส่วนประกอบต่าง ๆ ดังนี้
ไตเติ้ลบาร์
ส่วนที่อยู่บนสุดของหน้าต่างโปรแกรม เป็นส่วนที่แสดงชื่อไฟล์และหัวเรื่องของเว็บเพจ (ปกติจะเป็น Untiled จนกว่าจะมีการ
เปลี่ยนชื่อไฟล์) และกลุ่มของปุ่มทางขวามือซึ่งจะใช้ควบคุมการย่อ/ขยาย/ปิดหน้าต่างที่แสดงอยู่นี้
เมนูบาร์
แถบเมนูคำสั่งที่ใช้จัดการกับเว็บเพจในหน้าต่างเว็บเพจของหน้าต่างโปรแกรม Dreamweaver ซึ่งคำสั่งเหล่านี้จะถูกจัดกลุ่ม
เป็นหมวดหมู่ของคำสั่งที่เกี่ยวข้องกัน เช่น File Edit View Window Help เป็นต้น
หน้าต่างเว็บเพจ
เป็นพื้นที่ทำงานสำหรับการตกแต่ง และใส่ออบเจ็กต์ต่าง ๆ ลงไปในเว็บเพจนั่นเอง หน้าตาของเว็บเพจเมื่อดูจากบราวเซอร์
หรือพิมพ์ออกเครื่องพิมพ์จะมีลักษณะเดียวกับการตกแต่งในพื้นที่ทำงานนี้ด้วย จึงเป็นที่มาของคำว่า WYSIWYG (What - You -
See - Is - What - You - Get) เข้าใจกันง่าย ๆ คือ คุณออกแบบอย่างไร หน้าตาเว็บเพจก็จะออกมาอย่างนั้นด้วย สีฉากพื้นหลัง
(Background Color) ของพื้นที่ทำงานปกติจะเป็นสีขาว คุณสามารถเปลี่ยนได้ภายหลังที่หน้าต่าง Properties
หน้าต่างออบเจ็กต์ (Objects palette)
Dreamweaver ได้เตรียมพร้อมหน้าต่างอบบเจ็กต์ที่มีลักษณะเป็นปุ่ม ซึ่งรวบรวมเอาไว้เป็นหมวดหมู่ที่เกี่ยวข้องกัน สำหรับ
ใส่ออบเจ็กต์ลงในเว็บเพจ เช่น ตาราง รูปภาพ ActiveX เลเยอร์ เป็นต้น เพื่อการตกแต่งและเพิ่มความสามารถให้กับเว็บเพจ
โดยการคลิกที่ปุ่มในหน้าต่างออบเจ็กต์ที่ต้องการ จากนั้นคลิกแล้วลากเมาส์บนเว็บเพจเพื่อนำไปตกแต่งเว็บเพจได้ตามต้องการ การเปิดหน้าต่างออบเจ็กต์โดยการคลิ๊กเมนู Window > Objects ภายในจะมีคำสั่ง 7 หัวข้อให้เลือก
1. Characters เป็นการจัดเกี่ยวกับด้านสัญลักษณ์ต่างๆที่มีปัญหากับเวอร์ชั่นเก่าทำให้สามารถใช้งานได้ง่ายขึ้น
2. Common เป็นObject ที่ใช้งานมากที่สุดเป็นคำสั่งนำรูปภาพมาใช้ ตาราง และพวก Plung in ต่างๆ
3. Forms เป็นการสร้างแบบฟอร์ม เช็คบล๊อค
4. Frames เป็นคำสั่งการแบ่งหน้าจอออกเป็นส่วนๆสมัยก่อนนิยมใช้กันมาก
5. Head เป็นคำสั่งใช้ Link
6. Invisible เป็นการใช้คำสั่งด้านภาษา Script ต่างๆ
7. Special เป็นคำสั่งพิเศษสำหรับมืออาชีพ สำหรับระดับเบื้องต้นยังไม่จำเป็นต้องใช้
หน้าต่างพร็อพเพอร์ตี้ (properties inspecter)
สำหรับกำหนดลักษณะรูปแบบอักษร ขนาด การจัดวาง สีสันของข้อความหรือขนาดของออบเจ็กต์ ที่ใส่ลงไปในเว็บเพจ โดยสามารถสร้างจุดเชื่อมโยงเว็บเพจหรอไปยังเว็บไซต์อื่น ๆ ได้ที่ช่อง ศรืา ในหน้าต่างพร็อพเพอร์ตี้ (properties) และกำหนดคุณสมบัติอื่น ๆ ได้อีกด้วย การเปิดหน้าต่างพร็อพเพอร์ตี้โดยคลิ๊กเมนู Window > Properties
หน้าต่าง Launcher (Launcher Window)
เป็นหน้าต่างที่รวบรวมปุ่มที่เชื่อมโยงการปิดหรือเปิดหน้าต่างใช้งานอื่น ๆ ที่เป็นเครื่องมือสำคัญได้แก่
Site สำหรับอำนวยความสะดวกในการสร้างเว็บเพจใหม่ การแก้ไขเว็บเพจ จัดการกับเว็บไซต์โดยจะแสดงหน้าต่าง ซึ่งจะแบ่งหน้าต่างออกเป็น 2 กรอบ กรอบด้านซ้ายมือจะแสดงโครงสร้างของเว็บไซต์ (Remote site) และไฟล์ต่าง ๆ ที่เชื่อมโยงกันอยู่ด้วย ส่วนกรอบด้านขวาจะแสดงไฟล์ต่าง ๆ ที่อยู่ในเครื่องของคุณนั่นเอง ที่ถูกกำหนดให้ป็น Local Site การเปิดหน้าต่าง Site โดยคลิ๊กที่ปุ่ม Site หรือคลิ๊กเมนู Window > Site Map หรือกด
HTML Styles หน้าต่างกำหนดรูปแบบของการกำหนดคุณสมบัติของอักษรและการจัดวางออบเจ็กต์ภายในหน้าเว็บเพจ การเปิดหน้าต่าง HTML Styles คลิ๊กเมนู Window > HTML Styles หรือกด
Behaviors หน้าต่างสำหรับเพิ่มลูกเล่นให้กับเว็บเพจด้วยการใส่ JavaScript เพื่อควบคุมการทำงานขอบออบเจ็กต์ต่าง ๆ ตามเหตุการณ์ที่เกิดขึ้น เช่น เมื่อคลิกเมาส์ให้เกิดการสลับภาพเป็นภาพอื่น ๆ เมื่อเริ่มเปิดหน้าเว็บเพจด้วยบราวเซอร์ให้ปรากฏ รอบข่าวสารได้ เป็นต้น การเปิดหน้าต่าง Behaviors โดยคลิ๊กที่ปุ่ม Behaviors
หรอคลิ๊กเมนู Window > Behaviors
History คุณสามารถย้อนกลับการทำงานของขั้นตอนในการสร้างเว็บเพจได้โดยการเลื่อนแถบด้านซ้ายมือไปยังขั้นตอน ที่ต้องการ อำนวยความสะดวกดีมากครับ
Code Inspector สำหรับตรวจสอบโค้ดภาษา HTML ที่ควบคุมการแสดงข้อมูลของเว็บเพจในเบื้องหลังนั่นเอง การเปิดหน้าต่าง Code Inspector โดยคลิกที่ปุ่ม Code Inspector หรือคลิ๊กที่เมนู Window > Code Inspector หรือกด
แถบสถานะ
เป็นหน้าต่างแสดงรายละเอียดเกี่ยวกับหน้าต่างเว็บเพจ
ซ้ายมือสุดจะแสดง Tag ที่ใช้กับออบเจ็กต์ที่เลือก
ถัดมาเป็นการกำหนดขนาดของหน้าต่างเว็บเพจ ขนาดปกติจะเป็น 796 x 540 pixel คลิกที่ลูกศรเพื่อเลือกกำหนด ขนาดใหม่ได้
ขนาดของไฟล์เว็บเพจและเวลาที่ใช้ในการเปิดเว็บเพจนี้
Mini-Launcher เป็นหน้าต่าง Launcher ขนาดย่อที่ใช้เรียกหน้าต่างอำนวยความสะดวกนั่นเอง
การสร้างงาน
การสร้าง File งาน
ในที่นี้จะแนะนำการสร้าง File งานอย่างถูกต้องเป็นขั้นตอนและมีระบบเพื่อให้ง่ายต่อการทำงานและสามารถแก้ไขปรับปรุง ได้ในอนาคต
1. ไปที่ Menu Bar เลือกที่ Site จะมีเมนูย่อยให้เลือกที่ New Site
2. จะมีวินโดว์ New Site เกิดขึ้นให้ใส่ข้อมูล
ช่อง Site Name ให้ทำการตั้งชื่อ Site
ในช่อง Local Root Folder ให้เลือกสัญลักษณ์รูปซองเอกสารด้านขวาจากนั้นจะขึ้นวินโดว์ ให้ Click ที่ลูกศรดังภาพจากนั้นให้เลือกที่ Desktop
ให้เลือกที่ Create New Folder จากนั้นให้ตั้งชื่อตามที่ต้องการ แลัว Click ปุ่ม Open แล้ว Click ปุ่ม Select อีกครั้ง จากนั้นจะ กลับเข้าสู่หน้า New Site อีกครั้ง และ Click ปุ่ม Ok ด้านล่าง
หลังจาก Click ปุ่ม Ok แล้วจะกลับมาสู่หน้า Site ด้านซ้ายบนจะมีชื่อ Site Name ที่ได้ตั้งไว้ขึ้นมา และช่อง Local Folder จะมี Folder ที่ได้เลือกไว้เช่นกัน
ขั้นตอนต่อไปเป็นการสร้าง File งาน การสร้าง File แรกจำเป็นต้องตั้งชื่อ File เป็น index.html เสมอเพราะ Browser จะอ่าน File index.html ก่อนเป็นอันดับแรกแต่ในช่อง URL จะไม่แสดง / index.html แต่จะแสดงเพียงชื่อ website เท่านั้นและหลังจากนั้น ถึงจะ Link ไปยัง File งานอื่นซึ่งจะตั้งเป็นชื่ออะไรก็ได้
การสร้าง New File โดยการ Click ที่ File > New File
จากนั้นให้เปลี่ยนชื่อ เป็น index.html
ให้ทดสอบโดยการ ดับเบิ้ล Click ที่ index.html ก็จะปรากฎหน้า Document ที่ชื่อ index.html ที่พร้อมสร้างงานได้ทันที
การตั้งค่าต่างๆ ที่จำเป็นต่อการสร้างงาน
ก่อนที่จะทำการออกแบบเราต้องทราบถึงขนาดหน้าจอว่าว่าเราต้องการออกแบบหน้าจอให้จอภาพขนาดไหนที่สามารถ รับชมเวบของเราได้พอดีกับหน้าจอ ในปัจจุบันจอคอมพิวเตอร์จะอยู่ในระดับ 15 นิ้ว ประมาณ 90 % ที่เหลือจะเป็น 14 และ 17 นิ้ว ในที่นี้แนะนำให้กำหนดขนาดระดับจอภาพ 15 นิ้ว ขนาด 800 x 600 เพราะจอใหญ่กว่าก็สามารถดูได้
การตั้งขนาดให้กับ Document
ตั้งได้โดยการเลือกที่ด้านล่างของหน้างานโดยการ Click ที่ลูกศรจะมีขนาดให้เลือก
หากไม่มีขนาดที่ต้องการให้เลือกที่ Edit Size จะเป็นหัวข้อ Perference ช่อง Status Bar ในหัวข้อ Window Sizes จะมีให้เรา ระบุขนาด ตามต้องการในช่อง Width ใส่ขนาด 800 ส่วนช่อง Height ใส่ขนาด 600 และ Click Ok จากนั้นให้กลับมาเลือกขนาด
จาก Window Size อีกครั้งจะมีขนาดที่ได้ตั้งไว้ปรากฎขึ้นมาและให้ทำการเลือกขนาดที่ได้กำหนดไว้หน้า Document ก็จะเปลี่ยนเป็นขนาด 800 x 600 ทดสอบได้จากการ Click ที่ View >Rulers เลือก Show และเลือกหน่วยเป็น Pixels
การตั้งตัวอักษร
การตั้งให้สามารถใช้ภาษาได้นั้นทำได้โดยการเลือกที่ Edit>Perference>Font Type/Encoding หรือใช้ Ctrl U
เป็นปุ่มลัดก็สามารถเข้าไปที่ Perferences ได้
ในหัวข้อ Font / Encoding ให้ระบุค่าดังนี้
Default Encoding เลือกเป็น Other
Font Setting เลือกเป็น Other
Proportional Font เลือกเป็น Font อะไรก็ได้ที่ใช้ภาษาไทยได้แต่ควรเลือก Font ที่เป็นมาตราฐานหน่อย เพราะถ้า Browser ของผู้ชมไม่มี Font ชนิดที่เราเลือกก็จะไม่สามารถแสดงได้ตามที่เราต้องการ ขอแนะนำให้ใช้ Font ของ Ms Sans Serif ขนาด 10 pt เพราะเป็น Font มาตราฐานที่มีมากับระบบปฎิบัติการ Window
Fixed Font เลือกเหมือนเดิมไม่ต้องเปลี่ยนแปลง
Code Inspector เลือก Ms Sans Serif ขนาดตามต้องการ ( เป็นตัวแสดง html )
Click ok
ทดสอบโดยการพิมพ์ภาษาไทย
การตั้งค่าของ Document
เลือก Modify >Page Properties หรือ Clrt J จะช่วยให้ทำงานได้เร็วขึ้น
Title ใส่ชื่อ
Background Image เป็นการใช้รูปมาทำเป็น backgound ถ้ารูปมีขนาดเล็กทางโปรแกรมจะจัดเรียงเป็น Patten
เรียงรูปซ้ำกันเป็นแบบตาราง
Background สีพื้นของเวบสามารถเลือกสีได้ตามต้องการโดยการ Click ที่ช่องสี จะมีจานสีให้เลือกดังภาพด้านล่าง
Text เป็นสีของตัวอักษรสีมาตราฐานคือสีดำสามารถเลือกได้
Link สีตัวอักษรที่เป็น Link มาตราฐานจะเป็นสีน้ำเงิน
Visited Link เป็นสีสำหรับ Link ที่ไปมาแล้ว
Active Link เป็นสีในขณะที่ Click Link
Document Encoding ให้เลือกเป็น Other
Click Apply
Click Ok
จากนั้นจะกลับมาที่หน้า Document พร้อมกับความเปลี่ยนแปลงของสีพื้นจะเปลี่ยนเป็นสีที่ได้ทำการเลือกไว้
การพิมพ์ตัวอักษร
การสร้างงาน
หลังจากได้เรียนรู้ขั้นตอนการตั้งค่าต่างๆ เป็นที่เรียบร้อยแล้วต่อไปก็จะเริ่มขั้นตอนการสร้างงานจริงๆ ที่สามารถนำไปใช้ได้ จะเริ่มจากขั้นตอนพื้นฐานจนถึงขั้นตอนระดับสูงเป็น Step ขั้นตอนต่างๆ จะเชื่อมโยงกันตลอด
การพิมพ์ตัวอักษร
การพิมพ์ตัวอักษรใน Dreamweaver เหมือนกับการใช้ Microsoft Word หากเคยใช้มาบ้างก็จะเป็นการง่ายในการ ทำความเข้าใจ
การพิมพ์ข้อความ
สามารถพิมพ์เข้าไปในหน้า Document ได้เลย และลอง Preview ดูโดยการกด F12 ( เป็นการจำลอง Browser ) เราจะเห็นได้ว่า ตัวอักษรที่พิมพ์จะเหมือนกันกับที่ Preview ทุกประการ นอกจากนั้นยังมีคุณสมบัติพิเศษที่สามารถปรับแต่งได้ โดยการใช้ Properties
วิธีใช้
Format เป็นรูปแบบของอักษรสามารถเลือกได้ตามต้องการ
Paragraph การพิมพ์แบบต่อเนื่อง
Heading 1-6 การพิมพ์หัวข้อเรื่องตามขนาด Heading 1 เป็นขนาดใหญ่ที่สุดเรียงตามลำดับ การใช้เลือกก่อนพิมพ์
หรือถ้าพิมพ์ไปแล้วจะใช้ได้โดยการ Click Mouse ค้างแล้วป้ายทั้งข้อความที่ต้องการจากนั้นมาเลือกที่ Propreties > Format ตัวอักษรก็จะเปลี่ยนตาม ส่วนตัวอักษรที่ไม่ได้เลือกก็จะไม่มีการเปลี่ยนแปลง
ในหน้า Document เดียวกันเราสามารถใช้ ตัวอักษรหลายแบบโดย Click ที่ลูกศรในช่อง Default Font จะมี Font อื่นให้เลือก ส่วนค่า Default Font จะเป็น Font ที่ได้ทำการ Set ไว้ในตอนต้น
Size ขนาดของตัวอักษร
การใช้ตัวหนา และตัวเอน ตัวหนา Click ที่ B และตัเอน Click ที่ ตัว I
การจัดให้ ชิดซ้าย ชิดขวา หรือกึ่งกลาง ( เหมือน Word ทุกประการ )
การใช้หัวข้อย่อย จะเป็นจุดหรือตัวเลขก็ได้
เปลี่ยนสีตัวอักษร Click ที่ช่องสี่เหลี่ยมจะมีจานสีให้เลือก
ข้อจำกัดของการพิมพ์ตัวอักษร
เนื่องจากการพิมพ์ไม่สามารถเว้นวรรคตัวอักษรได้เกินหนึ่งตัวอักษร ทำให้การจัดรูปแบบการย่อหน้า ไม่สามารถทำได้
วิธีแก้ไขโดยการใช้ Object ในหัวข้อ Character ภายในจะมีเครื่องมือให้ใช้หลายอย่างเป็นเครื่องมือที่ในเวอร์ชั่นเก่าไม่มี
การขึ้นบรรทัดใหม่โดยการกด Enter ในโปรแกรมจะเป็นการเว้น 2 บรรทัด
ถ้าหากต้องการเว้นหนึ่งบรรทัดสามารถทำได้โดยการใช้ Character ในหัวข้อ BR ( Line Break ) หรือกด Shitf ค้างพร้อมทั้งกด Enter
การเว้นวรรคแบบไม่จำกัดทำได้โดยการเลือกที่ Non Breaking Space
Note
Websafe color
คือสีที่ใช้ในการสร้างเวบเพจ HTML ซึ่งเป็นสีที่ถูกระบุเป็นรหัสเลขฐานสิบหก หรือ Hexadecimal value เช่น #FF0000 หรือชื่อสีธรรมดาเช่น RED ตามปกติสีที่ใช่ใน Netscape และ Internet explorer เมื่อใช้ค่าสีใน 256 สี จะเรียกได้ว่าเป็น ค่าสีที่ปลอดภัย ( สามารถดูได้ทุกเครื่องทุกระบบโดยสีไม่ผิดเพี้ยน ) ซึ่งจริงๆ แล้วสีที่ใช้ได้มีเพียงแค่ 212 สีเท่านั้นเอง
การจัดรูปแบบอักษร
Format การจัดรูปแบบตัวอักษร
การจัดรูปแบบตัวอักษรหรือเรียกว่า Format ใน Dreamwearver มีการใช้คำสั่งเหมือนกับ Microsoft word การ Format text ใน Dreamweaver มีสองรูปแบบคือ HTML Tags กับ Style Sheet โดย Css หรือ Style Sheet จะใช้เฉพาะ Browser 4.0 ขึ้นไปเท่านั้น แต่จะขอแนะนำให้ใช้ค่า Css จะดีกว่าการใช้ค่า Css มาช่วยในการทำเวบเพื่อช่วยประหยัดเวลาในการเซ็ท Font ทีละย่อหน้า และเป็นการบังคับให้ผู้ชมเวบใช้ Font ที่เรากำหนดเท่านั้น
Formatting text wirh html tags
คือการเขียน Tags HTML เพื่อช่วยจัดย่อหน้า และขนาดหัวเรื่องเท่านั้นเองการนำไปประยุกต์ใช้งานค่อนข้างจำกัด แต่มีข้อดีคือ Browser ทุกรุ่นจะสามารถ Format ด้วย Tags เหล่านี้ได้
การเรียกใช้ Formatting text with HTML tags
ให้ทดลองพิมพ์ข้อความอะไรก็ได้ลงในหน้าเวบเพจ แล้วลองมาจัดระเบียบด้วยวิธีนี้
พิมพ์ข้อความ ป้ายทับข้อความที่ต้องการจัด
การเรียกใช้ โดยการเลือกที่เมนู Text > Styles หรือคลิกขวาที่ข้อความ
Align เป็นการจัดข้อความให้ชิดซ้าย กลาง หรือขวา
Style เป็นลักษณะของตัวอักษรเหมือนกับ word เช่น ตัวหนา ตัวเอียง ขีดเส้นใต้
Format with Style sheets
Style sheets ก็เหมือนการเก็บค่า Format ในรูปแบบสไตล์ของเราเอาไว้หลาย ๆ แบบไม่ว่าจะ Font, ขนาด, สีที่ใช้, การจัดย่อหน้า (ใช้จดจำโค้ด HTML บางอย่างได้อีกด้วย) เมื่อเราเก็บไว้หลาย ๆ แบบย่อหน้านี้ เราต้องการสไตล์ไหนก็คลิกเลือกได้เลย เมื่อเวบเพจเขียนเสร็จแล้วจะดึงมาเฉพาะค่า Css ที่เราเรียกใช้เท่านั้น Cssจึงนำมาช่วยการออกแบบให้สะดวกมากขึ้น
วิธีสร้าง Style sheets
มาที่เมนู Text > Css Styles > New Style…
จากนั้นจะมี Dialog Box New Style
Neme : ใส่ชื่อ
Type : คลิกเลือก Make Custom Style (class)
Define In : คลิกเลือก New Style Sheets (file)
คลิก OK
จากนั้นจะเป็น Dialog Box : Style Definition เลือก Type ด้านซ้าย ในหัวข้อ Type ด้านขวามีรายละเอียดดังนี้
Font คลิกลูกศรจะมี Font ให้เลือก
Size คลิกลูกศรจะมี Size ให้เลือก
ที่เหลือคงไว้เหมือนเดิม
คลิก Apply
คลิก OK
ทดสอบโดยการพิมพ์ข้อความ จากนั้นเลือกข้อความมาที่เมนูเลือก Text > Css Styles > เลือกชื่อที่ได้ตั้งไว้ (Test) จากนั้นจะเห็นการเปลี่ยนแปลงกับตัวอักษรทดสอบโดยการ Preview กด F12 ทดลองเปลี่ยนขนาดของ Font ใน Browser ลองเปลี่ยนเป็นขนาดใหญ่สุด จะเห็นว่าขนาดตัวอักษรไม่มีการเปลี่ยนแปลงนั้นเป็นการบังคับโดยใช้ Css Styles นั้นเองและยังสามารถใช้ได้กับทุกหน้า Document โดยการใช้ Attach Styles Sheets
การบันทึกและดูโฮมเพจ
การบันทึกโฮมเพจ (Save)
หลังจากสร้างโฮมเพจมาบ้างพอสมควรแล้ว สิ่งที่ไม่ควรลืมก็คือการบันทึกผลงานที่ได้ส้างขึ้นนี้ไว้ในไฟล์นามสกุล .htm หรือ html โดยตั้งชื่อให้สัมพันธืกับเนื้อหาภายในโฮมเพจ ทั้งนี้จะไม่ทำให้เกิดการสับสนได้ในภายหลัง ซึ่งจะมีผลทำให้ง่า ต่อการตรวจสอบ และจัดการเว็บไซต์อีกด้วย ขั้นตอนการบันทึกโฮมเพจด้วยวิธีการที่คุ้นเคย คล้ายกับการบันทึกไฟล์ทั่ว ๆ ไป ดังต่อไปนี้
1. คลิกที่เมนู File > Save หรือกดปุ่ม
2. เมื่อปรากฏไดอะล็อกบ็อกซ์ ใส่ชื่อไฟล์ของโฮมเพจ เช่น "siampage.html" ลงในช่อง File name
3. ดับเบิ้ลคลิกเมาส์เลือกกำหนดไดเร็คทอรี่ที่ต้องการสำหรับเก็บไฟล์ในช่อง Save
4. คลิกปุ่ม Save เพื่อทำการบันทึกไฟล์
ดูโฮมเพจที่สร้างขึ้นด้วย Browser
ในขณะที่ทำการสร้างโฮมเพจอยู่นั้น คุณต้องการที่จะตรวจสอบหน้าตาของโฮมเพจที่สร้างขึ้นนี้ โชคดีที่ Dreamweaver ได้เตรียมขั้นตอน Preview in Browser เอาไว้สำหรับดูโฮมเพจได้ทุกครั้งที่ต้องการ โดยไม่จำเป็นต้องบันทึกโฮมเพจที่กำลังสร้างไว้ในไฟล์ใด ๆ ก่อนดูก็ได้ นอกจากนี้หากมีการใส่ฟังก็ชั่น , JavaScript , VBScript , ActiveX-Control , Plug-in (หากทำการติดตั้งไว้แล้วที่บราวเซอร์) รวมถึงจุดเชื่อมต่อไปยังโฮมเพจอื่น ๆ ลงในโฮมเพจนี้ก็สามารถใช้งานได้อย่างครบถ้วนด้วย
การดูโฮมเพจที่สร้างขึ้นด้วย Browser ทำได้โดยการกด F12
ใส่รูปภาพลงในโฮมเพจ
การทำลิงค์เมล์ Link E-mail
การทำลิงค์เมล์ส่วนมากจะเป็นการให้ผู้ที่ชมเวบไซท์ได้ติดต่อกับเจ้าของเวบไซท์ กล่าวคือก็เป็นการส่งเมล์ธรมดานั้นเองแต่พิเศษอยู่ที่ผู้ชมไม่ต้องพิมพ์ที่อยู่ E-mail Address ของเรา เพียงพิมพ์ข้อความติชมเท่านั้น เหมือนเป็นการส่งเมล์อัตโนมัติโดยไม่ต้องไปที่ผู้ให้บริการเมล์ โดยหลังจากคลิกลิงค์เมล์ทางBrowser จะทำการเปิดโปรแกรมส่งเมล์ให้โดยอัตโนมัติส่วนมากถ้าเป็น IE จะเปิดโปรแกรม Outlook ให้
วิธีลิงค์เมล์
ให้เปิดไฟล์ index.html
ให้พิมข้อความว่า คำติชม
หรืออีกวิธีคือ
ใช้ Object โดยเลือกที่ Insert Email Link
ภายใน Dialog box ให้กำหนดดังนี้
Text ให้ใส่ข้อความ คำติชม
E-mail ให้ใส่ที่อยู่ของเมล์
คลิก OK
จากนั้นทดสอบโดยการกด F12 คลิกข้อความจากนั้นโปรแกรมจะเรียกโปรแกรม Outlook ขึ้นมาให้ใส่ข้อความจากนั้นคลิกส่ง( send )
การใช้รูปภาพเป็นลิงค์
ส่วนมากจะมีสองประเภทใหญ่คือ การใช้ภาพทั้งภาพทำลิงค์ หรืออีกอย่างก็คือการใช้บางส่วนของภาพทำลิงค์โดยใช้ Hotspot เลือกเฉพาะที่
การใช้ภาพทั้งภาพเป็นลิงค์
การใช้ภาพเป็นลิงค์นิยมสร้างภาพขึ้นมาเองทำเป็นรูปปุ่มกดจะใช้ร่วมกับ Rollover คือลักษณะก่อนเอาเมาส์ผ่านจะเป็นอีกรูป พอเอาเมาส์ผ่านหรือวางที่รูปก็จะเปลี่ยนเป็นอีกรูปหนึ่งและยังสามารถเป็นลิงค์ได้อีกด้วย การทำดังกล่าวจะกล่าวถึงในหัวข้อ Rollover ในที่นี้จะกล่าวถึงการทำลิงค์แบบธรรมดา
สร้างรูปเก็บไว้ในโฟลเดอร์ image ที่ได้สร้างไว้
มาที่หน้า Document index.html
คลิก Insert image จาก Object
เลือกรูปจาก Dialog box
คลิก Select
จากนั้นให้คลิกที่รูปภาพในหน้า Document ที่ได้ Insert มา
ให้มาที่ Properties ในช่องลิงค์ให้คลิกที่รูปโฟล์เดอร์เหมือนกับการทำลิงค์ตัวอักษรดังที่ได้นำเสนอไปแล้ว
จากนั้นเลือกไฟล์ที่ต้องการลิงค์ไปหา หรือจะลิงค์ไปยังเวบไซท์นอกก็ได้
เฟรม (Frame) ตอนที่ 1
Frames
Frame overview
Frame คือการแบ่งหน้าต่างของ Browser ออกเป็นส่วนต่างๆ โดยแต่ละส่วนโหลดหน้าเวบได้อิสระและสามารถสั่งลิ้งค์จากทางด้านซ้าย ให้มาเปิดทางด้านขวาได้ด้วย
Frame มีหลักในการทำงาน คือโหลดหน้าเวบเพจมากกว่าสองหน้าขึ้นไปมาใส่ในพื้นที่แต่ละส่วนที่แยกไว้ในหน้าเดียว นิยม ใช้แยกส่วน หน้ารวมลิ้งค์ออกจากหน้าเนื้อหาเมื่อเวลาเรียกเนื้อหา ขึ้นมาก่อนก็จะโหลดอยู่พื้นที่เดียวเท่านั้นซึ่งหน้าเนื้อหาจะมี
แต่ ข้อความไม่ได้ทำการตกแต่งอะไรมาก เป็นการง่ายในการออกแบบช่วยประหยัดเวลาในการทำงาน กล่าวคือหากทำเวบเพจ
10 หน้าแต่จำเป็นต้องใช้ โลโก้เดียวกันใช้ลิงค์ร่วมกัน แต่แตกต่างกันตรงเนื้อหาเพียงอย่างเดียวเพื่อเป็นการง่ายจึงแบ่งออก
เป็นเฟรมและลิ้งค์เปลี่ยนเฉพาะเนื้อหาเท่านั้นและยังสามารถโหลดได้เร็วกว่าการเปิดหน้าใหม่)
Frame แต่ละส่วนก็คือ html แต่ละหน้า เพราะฉะนั้นตัวอย่างนี้เท่ากับเราต้องสร้าง html 4 หน้าคือ
Frame1 Frame 2 Frame 3 และหน้าที่รวม Frame 1,2,3 เข้าด้วยกัน
การสร้างเฟรม
การสร้างเฟรมนั้นสามารถทำได้การใช้ Object ที่คำสั่ง Frames ภายใน Object Frames จะมีเฟรมสำเร็จรูปให้เลือกหลายแบบ ไม่ว่าจะเป็น 2 เฟรม , 3 เฟรม , 4 เฟรม
หลังจากเลือกแบบเฟรมที่ต้องการได้แล้ว แต่ในช่วงการทดลองใช้แนะนำให้เลือกแบบสองเฟรมก่อนเพื่อเป็นการเข้าใจง่าย ขั้นตอนการสร้างเฟรมดังนี้
คลิกเลือกแบบ 2 เฟรม
ในหน้า Document จะเกิดการแบ่งเฟรมให้เลยดังภาพจะแยกเป็นเฟรมซ้ายและขวา
เราสามารถปรับขนาดความกว้างของเฟรมได้โดยการปรับค่าที่ Properties inspector ( Properties เป็นคุณสมบัติของเฟรมสามารถ เรียกได้โดยการคลิกที่เส้นแบ่งระหว่างเฟรม )
Frames Properties
Borders : เลือกว่าจะให้มีขอบของเฟรมหรือไม่ ในที่นี้ไม่ต้องให้มีขอบเลือก No
Border Width : ความกว้างของขอบถ้ากำหนดให้ไม่มีขอบแล้วให้กำหนดความกว้างของขอบเป็น 0 ด้วยเพื่อความต่อเนื่องของเฟรม
Border Color : กำหนดสีของขอบเฟรม
Column : สามารถกำหนดความกว้างของเฟรมโดยการคลิกที่ Row Col Selection ด้านขวาคลิกเลือกให้เฟรมที่เราต้องการ ปรับ Active แต่ที่นิยมปรับกันเฉพาะเฟรมใดเฟรมหนึ่งเพื่ออีกเฟรมจะเป็นส่วนของหน้าจอที่เหลือทั้งหมดเพราะขนาดหน้าจอ ของแต่ละคนไม่เท่ากัน
Save Frames
เป็นขั้นตอนที่สำคัญในการสร้างเฟรมเลยก็ว่าได้เพราะอาจจะเกิดความสับสนได้วิธีการเซฟให้ปฏิบัติดังนี้
คลิกที่บริเวณนอกสุดของหน้า Document ให้ขอบนอกของเฟรมทำงานโดยขึ้นสีเข้มบริเวณรอบขอบนอก
ไปที่เมนู File > Save All Frames
จะเห็นขอบแรเงาบริเวณรอบบริเวณขอบนอก
ภายใน Dialog box ให้ save ชื่อเป็น main_frame
จากนั้นจะเป็นการ save Frame ด้านขวาให้กำหนดชื่อเป็น right_frame
จากนั้นจะเป็นการ save Frame ด้านซ้ายให้กำหนดชื่อเป็น left_frame
ทดสอบโดยการ Preview โดยกด F12
ในการทำงานเกี่ยวกับเฟรมนั้น Dreamweaver เพิ่มความสะดวกให้กับคุณได้ ด้วยการสร้างพาเล็ตต์ขึ้นมาโดยเฉพาะสามารถ
เรียกรูป ขึ้นมาใช้งานโดย คลิกเมนู Window > Frame หรือ Shift F2 การใช้งานโดยการคลิกที่เฟรมที่ต้องการทำงานในเฟรมนั้นๆ
จากที่ผ่านมาคงพอจะเริ่มเข้าใจรูปแบบไฟล์ของโฮมเพจที่ใช้แล้ว โดยจะเห็นได้ว่า หากหน้าโฮมเพจมีสองเฟรม จำเป็นต้องมีไฟล์ สามไฟล์ด้วยกัน คือ เฟรมสองไฟล์ และอีกหนึ่งไฟล์เป็นไฟล์ของเฟรมเซ็ต ที่ใช้เรียกไฟล์ขึ้นมาแสดงนั้นเองการ Save เฟรม ยังสามารถที่จะเลือก Save นอกเหนือจากที่ได้กล่าวมาแล้วคือ
Save Frameset เมื่อต้องการเซฟเฉพาะไฟล์เฟรมเซ็ต
Save Frameset As เมื่อต้องการเซฟเฉพาะไฟล์เฟรมเซ็ตเป็นอีกไฟล์หนึ่ง ( โดยใช้ชื่อไฟล์อื่น )
Save เมื่อต้องการเซฟเฉพาะเฟรมใดเฟรมหนึ่ง ( ต้องคลิกให้เฟรมนั้นทำงาน )
Save As เมื่อต้องการเซฟเฉพาะไฟล์เฟรมใดเฟรมหนึ่ง เป็นอีกไฟล์หนึ่ง (เปลี่ยนชื่อใหม่ )
Save All เมื่อต้องการเซฟไฟล์ทั้งหมด ทุกไฟล์พร้อมกัน โดยไม่ต้องป้อนชื่อใหม่ (แต่ต้องเคยเซฟมาก่อนแล้ว
การกำหนด คุณสมบัติต่างๆ ของเฟรม
เราสามารถกำหนดทุกอย่างได้เหมือนหน้า html หน้าเดียวได้ตามปกติ ไม่ว่าจะเป็นการกำหนดสีพื้น สีตัวอักษร หรือตั้งชื่อ Tilte สามารถทำได้ดังนี้
คลิกที่เฟรมที่ต้องการกำหนดคุณสมบัติ หรือเรียกใช้ Frame Properties โดยกด Shift F2 หลังจากนั้นเลือกเฟรมที่ต้องการ ให้ทำงาน
ให้มาที่ Modify > Page Properties
Dialog box Page Properties ให้ทำการกำหนดค่าตามที่ต้องการ (การกำหนดค่าได้กล่าวมาแล้วเหมือนกับการกำหนดหน้า
Document ทุกประการ )
หลังจากกำหนดแล้วคลิก Apply > Ok
จากนั้นให้ทำการปรับเฟรมที่เหลือ
ฟอร์ม (Form) ตอนที่ 2
Checkbox
รูปแบบคล้ายกับ radio button เพียงแต่สามารถทำเครื่องหมายได้หลายช่องส่วนมาจะใช้ในการสอบถามความต้องการต่างๆ
คลิก Checkbox ใน Form Object
Checked Value ให้ใส่ชื่อให้สอดคล้องกับหัวข้อที่ได้กำหนด จะมีผลในตอนเก็บรวบรวมข้อมูล
Initial State สามารถเลือกได้ว่าจะ Check ไว้ล่วงหน้าหรือไม่
RadioButton
สามารถเลือกได้เพียงช่องเดียว ยกตัวอย่างเช่นการเลือกเพศ เช่น ชาย หรือ หญิง
คลิกที่ Radiobutton ใน Form Object
Checked Value ให้กำหนดข้อมูลที่ต้องการทราบ เช่น Man หรือ Woman
Initial State สามารถกำหนดเลือก Checked ไว้ที่ช่องใดช่องหนึ่งก็ได้
List/menu list
จะเป็น list option ให้เลือกเช่น จำนวนสมาชิกในบ้านท่าน มีให้เลือกแบบ list กับแบบ menu โดยเซ็ตคำที่เลือกได้ใน list value ค่า value จะเป็นค่าที่โปรแกรมนำมาเก็บไว้ในตัวแปร
มาที่ Properties inspector
Type เลือกว่าจะให้เป็นแบบไหนระหว่าง Menu กับ List
คลิกที่ List Value เพื่อกำหนดค่าตัวแปร
คลิกเครื่องหมาย + เพื่อเพิ่มตัวแปร ตัวอย่างเป็นการสำรวจว่าผู้ใช้ส่วนมากใช้ E-mail ที่ใด
คลิก Ok
File Field
ให้ผู้ชม Upload ไฟล์มาเก็บไว้ที่เราได้ เช่น การส่งภาพเข้าประกวด จะสังเกตุได้จากผู้ให้บริการ e-mail จะใช้ในการแนบไฟล์
Image Filed
เลือกรูปมาใช้แทนปุ่ม Submit
Hidden filed
เป็น Form ที่ผู้เข้าชมไม่สามารถมองเห็นได้ ไว้ใช้ comment หรือส่ง Value ให้โปรแกรมเท่านั้น
Jump Menu
ลักษณะการทำงานของ Jump menu จะเหมือนกับการนำคุณสมบัติของ Navigation bar กับ Listbox แบบ menu มาผสมกัน โดยหน้าตาของมันจะเหมือนกับ Listbox ทุกอย่าง คือมีรายการให้เลือกได้ เพียงแต่หลังจากที่ผู้ใช้เลือกรายการเรียบร้อยแล้ว จะลิงค์ไปยังหน้าโฮมเพจอื่นๆ เหมือนกับการลิงค์ที่ Navigation bar นั้นเอง ทันทีที่คลิกปุ่ม Insert Jump menu ก็จะปรากฏ Dialog box ซึ่งใช้สำหรับกำหนดรายการตัวเลือกและหน้าโฮมเพจที่ต้องการลิงค์
เพิ่มรายการตัวเลือกลงในช่อง Menu Items โดยคลิกที่เครื่องหมาย + ที่ปุ่มบนซ้าย
ป้อนชื่อหัวข้อหรือรายการลงในช่อง Text
กำหนดหน้าโฮมเพจที่จะลิงค์ไปในช่อง When Selected Go To URL
ทำซ้ำข้อ 1-3 เพื่อเพิ่มรายการตัวเลือกจนครบ
กำหนดวินโดว์หรือเฟรมที่จะแสดงหน้าโฮมเพจทุกๆ หน้าที่ลิงค์ไปในช่อง Open URL In
กำหนดชื่อของ Jump Menu ในช่อง Menu Name
เลือก Checkbox " Insert Go Button After Menu " หากต้องการกำหนดให้มีปุ่มคลิก GO อยู่ข้างๆ Jump Menu ซึ่งใช้กำหนดว่า หลังจากที่ผู้ใช้เลือกหัวข้อรายการแล้ว จะยังไม่ลิงค์ไปหน้าโฮมเพจอื่น จนกว่าจะคลิกปุ่ม GO
เลือก Checkbox " Select First Item After URL Chang " สำหรับกำหนดให้แทบสีฟ้าแสดงอยู่ที่ตัวเลือกรายการแรก หลังจาก ที่มีการลิงค์ไปยังหน้าโฮมเพจอื่นแล้ว
จากนั้นคลิก OK
เลเยอร์ (layer)
Layer
ใช้ในการกำหนดค่าตำแหน่งส่วนประกอบที่เราจะวาง เมื่อลากเลเยอร์ระบุตำแหน่งในหน้า Document แล้ว เราจะใส่ข้อความ ,รูปภาพ , Plugin , Flash หรือแม้แต่ใส่เลเยอร์ซ่อนอยู่ข้างในอีกชั้นก็สามารถทำได้ และยังสามารถกำหนดว่าจะให้แสดง หรือ ไม่ให้แสดงก็ได้ส่วนมากจะใช้เป็นเทคนิคพิเศษต่าง มากกว่านำมาใช้ทั่วไป เพราะเลเยอร์ใช้กับ Internet Explorer ไม่มีปัญหา แต่ส่วนมากจะมีปัญหากับ Netscape เรื่องตำแหน่งที่วางส่วนมากตำแหน่งจะผิดพลาดและซ้อนทับกัน ในการออกแบบเวบใน ปัจจุบันจะใช้ตารางช่วยในการออกแบบเป็นหลักและเลเยอร์จะเป็นลูกเล่นที่เพิ่มเข้ามาเท่านั้นเอง
การใช้เลเยอร์
การเรียกใช้คำสั่งเลเยอร์ใช้ได้สองวิธีคือ หนึ่งโดยเลือกที่เมนูบาร์มาที่ Insert >Layer หรือใช้ Object เลือกหัวข้อ Common มาที่รูปเลเยอร์แล้ว Click
การใช้ Click Layer ที่อยู่ใน Object palette แล้วลากตำแหน่งและขนาดที่ต้องการของDocument window ได้เลย
เลเยอร์ที่สร้างขึ้นมาแล้ว
เมื่อคลิกข้างในพิมพ์ข้อความหรือรูปได้เลย ถ้าคลิกที่หูเลเยอร์จะเป็นการเลือกเลเยอร์และสามารถย้ายตำแหน่งได้ตามต้องการ และขยายขนาดได้โดยการคลิกที่หูเลเยอร์จากนั้นจะมีปุ่มปรากฎ ลากจุดใดจุดหนึ่งจากเลเยอร์ออกมาได้เลย
ถ้าหากต้องการความมั่นคงโดยการระบุค่าเป็นตัวเลข ให้แก้ไขค่าได้ใน property inspector
เลเยอร์ที่สร้างขึ้นมาถ้าหากต้องการแทรกรูปหรือข้อความ ให้กดภายใน layer หนึ่งครั้ง จะมีเคอร์เซอร์กระพริบอยู่ซ้ายบน เรียก ว่า activating Layer ซึ่งถ้าสังเกตจะเห็นว่านี้ไม่ใช้การ select layer
ถ้าต้องการปรับขนาดของเลเยอร์ สามารถทำได้อีกวิธีโดยการพิมพ์ค่าตัวเลขใน property inspector ก็ได้
ปัญหาเลเยอร์ซ้อนทับกัน
ถ้าหากบางทีใช้เลเยอร์ในการสร้างงานหลายๆ เลเยอร์บางทีเลเยอร์อาจซ้อนทับกันได้อาจส่งผลถึงการชมผ่าน browser ได้ สามารถแก้ปัญหาได้ดังนี้
มาที่ mini launcher คลิกเลือก Show History หรือเลือกที่เมนูบาร์ Window>Layer จะปรากฎหน้าต่างดังภาพด้านล่าง จากนั้น เลือกที่ layer แล้วคลิกที่ช่องสี่เหลี่ยมในหัวข้อ Prevent Overlaps ให้เป็นเครื่องหมายถูกดังรูป เป็นการป้องกันการซ้อนทับ ของเลเยอร์
เราสามารถตั้งชื่อ Layerได้เพื่อเป็นการง่ายต่อการควบคุมโดยคลิกให้เลเยอร์ที่สร้าง Active จากนั้นให้มาที่ Property inspector ในหัวข้อ Layer ID ในช่องด้านล่างให้ระบุชื่อตามต้องการ
การแสดงหรือไม่แสดงเลเยอร์กำหนดได้โดยมาที่ Window>Layer ที่เมนูบาร์ จากนั้นจะมีชื่อเลเยอร์ที่เราได้ตั้งไว้ในช่อง Name ข้างช่อง Name จะมีรูปตาอยู่ถ้าต้องการซ้อนเลเยอร์ให้คลิกที่รูปตาให้ปิดเพื่อเป็นการซ่อนเลเยอร์ ถ้าต้องการให้แสดงก็เพียงคลิกอีกครั้งให้เปิด ก็จะสามารถมองเห็นเลเยอร์
การใส่สีพื้นให้กับเลเยอร์ทำได้โดยการใช้ Property inspector และมาที่ Bg color เลือกสีได้ตามต้องการ
Layer Perference
เป็นการตั้งค่า default ให้กับ layer เพื่อจัดรูปแบบเป็นไสตล์ของเราเอง โดยเลือกเมนู EDIT > perferences แล้วคลิกเลเยอร์ ที่ช่องทางซ้ายให้เป็นหัวข้อ Layer
Tag ให้ใช้ tag อะไรทุกครั้งที่สร้างเลเยอร์ ( span,Div,Layer.llayer)
Visibility กำหนด layer ให้มองเห็นหรือไม่
Width and Hight กำหนดความกว้างและความสูงของ Layer ที่สร้างด้วยคำสั่ง Insert > Layer
Background color กำหนดรูป background
Nestin ทำเครื่องหมายไว้จะทำให้สามารถสร้างเลเยอร์ซ้อนในเลเยอร์เก่าได้
Flash Text
ขั้นตอนการสร้าง Flash Text
1. Click Insert Flash Text จาก Object Commom หรือ คลิกที่เมนู Insert > Interactive Image> Flash Text
2. ภายใน Dialog Box ให้กำหนดดังนี้
2.1. Font : ให้กำหนด Font เป็น Arial
2.2. Size : ให้กำหนดขนาดเป็น 20
2.3. Color : กำหนดให้เป็นสีแดง
2.4. Rollover Color : ให้กำหนดเป็นสีน้ำเงิน ( เป็นสีหลังจากที่เอาเมาส์ลากผ่าน )
2.5. Text : ให้พิมพ์คำว่า Text ลงไป แล้วให้ติ๊กเครื่องหมายถูกในช่อง Show Font ด้วย
2.6. Link : กำหนดให้ลิงค์ไปยังที่ที่ต้องการ ในที่นี้ไม่ต้องระบุ
2.7. Taget : ไม่ต้องกำหนด
2.8. BgColor : กำหนดให้เป็นสีเดียวกับพื้นของเวบเพจ
2.9. Save As : ตั้งชื่อตามตัวอักษร
3. คลิก Apply และ คลิกปุ่ม Ok
4. ทดสอบโดยการกดปุ่ม F12 และทดสอบโดยการเอาเมาส์วางทับตัวอักษร
Flash Button
Flash Button ก็คือปุ่มที่ได้ทำการสร้างจากโปรแกรม Flash นั่นเองแล้วนำมาใส่ใน DreamWeaver โดยใช้คำสั่ง InsertFlash ซึ่ง เป็น Plugin ดังนั้นผู้ที่สามารถทำปุ่ม Flash ได้นั้นจำเป็นอย่างยิ่งที่ต้องเข้าใจ และสามารถสร้างสรรค์งานในโปรแกรมFlashได้เป็น อย่างดี แต่ใน Dream4 เราสามารถใช้งานFlash Button ได้โดยเราไม่จำเป็นต้องสร้างขึ้นมาเอง และไม่มีความรู้ในการใช้ โปรแกรม Flash เลยแม้แต่น้อย เพราะโปรแกรมDreamWeaver ได้รวมเอาความสามารถของโปรแกรม Flash เข้ามาไว้ใน DreamWeaver ให้เราสามารถเรียกใช้งานได้เลยในรูปแบบของปุ่มสำเร็จรูป และยิ่งไปกว่านั้นเรายังสามารถปรับขนาด เปลี่ยน สีพื้นให้เข้ากับสีพื้นของเรา และเปลี่ยนตัวอักษรให้เป็นไปตามที่เราต้องการได้อีกด้วย
ขั้นตอนการสร้าง Flash Button
1. สร้างไฟล์งานขึ้นมา และเลือกที่ที่ต้องการใส่ปุ่ม Flash
2.ให้มาที่ Object เลือกให้เป็นคำสั้ง Common เลือกที่ปุ่ม Insert Flash Buton
3.ภายใน Dialogbox จะประกอบไปด้วย
3.1 Sample : แสดงตัวอย่างที่เลือกจาก Style
3.2 Style : สามารถเลือกปุ่มได้ตามต้องการและสามารถทดสอบได้โดยคลิกที่ตัวอย่างจากช่อง Sample
3.3 Button : ตัวอักษรที่จะกำหนดให้กับปุ่ม Flash ให้ทดลองพิมพ์คำว่า Test
3.4 Font : เลือก Font ของตัวอัการตามที่ต้องการ
3.5 Size : กำหนดขนาดของตัวอักษรให้เลือก Size 13
3.4 Link : กำหนดเป้าหมายให้กับปุ่มว่าต้องการให้ลิงค์ไปที่ใด
3.5 Target : กำหนดให้ทำการเปิดหน้า Window ใหม่ตามที่เรากำหนด ถ้าไม่ระบุค่าโปรแกรมจะใช้ค่า Defualt ของโปรแกรม
3.6 BgColor : สำคัญมากในการทำปุ่มให้กลมกลืนกับพื้นหลังของเราให้กำหนดให้เป็นสีเดียวกับพื้นหลัง
3.7 Save As : กำหนดชื่อให้กับปุ่ม และกำหนดที่อยู่ของไฟล์
4. คลิก Apply และ คลิกปุ่ม Ok
เพียงเท่านี้เราก็จะได้ปุ่มที่มีลูกเล่นไว้ในเวบของเรา แต่อย่าลืมที่จะส่งไฟล์ของปุ่มที่ได้สร้างไว้ไปยัง Server ด้วยเพราะว่าปุ่มที่เราสร้างก็คือ
Plugin Flash นั้นเอง
Rollover
Rollover Image
เป็นเทคนิคที่ใช้กันแพร่หลายให้ทั้งความสวยงามและความตื่นตาตื่นใจกับผู้ชมได้เป็นอย่างดี ในสมัยก่อนต้องมีความรู้ด้านภาษา JavaScript ถึงจะทำได้ แต่ด้วยความสามารถของ Dreamweaver ช่วยให้ผู้ที่ไม่รู้ภาษา JavaScript ก็สามารถเพิ่มลูกเล่นนี้เข้าไปได
ขั้นตอนการทำ
คลิก Cursor ให้อยู่ในตำแหน่งที่ต้องใส่ Rollover Image
กดปุ่ม Rollover ใน Object palette หรือที่เมนู Insert > Rollover Image
จะมี Dialog box ขึ้นมาให้ใส่ค่าดังนี้
Image Name ใส่ชื่อถ้าไม่ใส่ทางโปรแกรมจะกำหนดให้เป็น Image1 ,2,3,4…………
Original Image ให้คลิกรูปจาก Browser แล้วเลือกรูปที่ต้องการ ( เป็นรูปที่กำหนดให้เป็นปุ่มก่อนที่เม้าส์จะลากผ่าน
Rollover Image ให้คลิกรูปจาก Browser แล้วเลือกรูปที่ต้องการ ( เป็นรูปที่กำหนดให้เป็นปุ่มเวลาที่ลากเม้าส์ผ่าน
ใส่เครื่องหมายถูกหน้า Preload Rollover Image ( เพื่อเป็นการ Load รูปภาพล่วงหน้าเพื่อให้การทำงานของ Rollover เป็นไป อย่างราบรื่น )
When Clicked, Go To URL ใส่ลิ้งค์ที่ต้องการให้เรียกขึ้นมาหลังจากที่คลิกปุ่มแล้ว
หลังจากเรียบร้อย คลิก OK แล้วจากนั้นให้ทำงานการทดสอบดูใน Browser โดยการกดปุ่ม F12 เมื่อ Browser เปิดขึ้นมาให้ลอง เลื่อนเมาส์ผ่านรูปดู
Time line
Timeline
เป็นเทคนิคทำภาพเคลื่อนไหวแบบง่าย ๆ โดยไม่ต้องใช้ Flash แก่ผลงาน ออกมาก็พอใช้ได้เลยทีเดียว ถ้าฝึกฝนบ่อย ๆ อาจ ทำให้ผู้ชมถึงกับตะลึง ๆ ก็ได้
ขั้นตอนการทำ
การสร้างในเทคนิคนี้ต้องอาศัยเลเยอร์เข้ามาช่วยในการทำ
ให้ทำการ Insert layer โดยคลิกจาก Object > common > layer
หลังจากได้เลเยอร์แล้วให้ทำการขยายขนาดตามต้องการหรือจะใส่รูปสวย ๆ ลงไปก็ได้ แต่แนะนำให้สร้างเลเยอร์ไม่ใหญ่มาก นักเพราะตอนทำ Animation (ภาพเคลื่อนไหว) อาจจะบดบังทัศนียภาพของเวบเพจของเราได้
หรือจะพิมพ์ข้อความตามตัวอย่างก็ได้
จากนั้นให้คลิกที่ Modify > Timeline > Add Object to timeline หรือกด Ctrl + Alt + Shift + t
จากนั้นให้มาคลิกที่เลเยอร์ให้ทำงานจากนั้นคลิกเมาส์ขวาเลือก Add to Timeline
จากนั้นให้คลิกที่เฟรมที่ 5 คลิกเมาส์ขวา เลือก Add Keyframe (จะปรากฎจุดวงกลมขึ้นที่เฟรมที่ 5)
จากนั้นให้เลื่อนเมาส์มาที่หูเลเยอร์ทำการเลื่อนเลเยอร์มากทางขวาล่างตามต้องการ
ให้ทำเช่นเดียวกัน กับเฟรมที่ 10 แล้วลากเลเยอร์มาทางขวาบน
ทดสอบโดยการคลิกค้างที่ลูกศรที่ชี้ไปทางขวามือบน Timeline
คลิก Autoplay และ Loop เพื่อให้ Timeline ทำงานและวน Loop ด้วย
กด F12 จากนั้นจะเห็นผลงานระดับมืออาชีพเกิดขึ้น
Option บน Timeline inspector
= Name : ให้คลิกในชื่อ Timeline แล้วเติมชื่ออื่นลงไปแทน
= กรอกกลับไปเริ่มต้นดูใหม่ตั้งแต่ต้น
= ถอยหลังไป 1 Frame (กดค้างไว้)
= เดินหน้า 1 Frame (กดค้างจะเป็นการเล่นเทปชั่วคราว)
autoplay พอเปิดหน้าเวบเพจมาก็สั่งแอคชั่น เลเยอร์จะวิ่งมาทันทีเลย
Loop เมื่อเลเยอร์วิ่งมาจนสุด จะกลับไปวิ่งมาใหม่เรื่อย ๆ
FPS มาจาก frame per second หมายถึงให้ใส่จำนวนเฟรมที่ใช้ต่อวินาที
Frame ก็เหมือนฟิล์มในหนัง ค่าปกติคือ is frame ต่อวินาทีตามที่เราตั้งไว้ซึ่งจากตัวอย่างเรามี 15 frame หมายถึงเลเยอร์นี้จะวิ่งมาปรากฎภายใน 1 วินาที ถ้าต้องการเพิ่ม frame30frame จะได้วิ่งมา 2 วินาทีให้ลาก Frame ใน Timeline
หมายเหตุ : ปกติหนังภาพยนตร์ใช้ 24-30 เฟรม จะดูสบายตากว่า แต่สำหรับเวบเพจแค่ 15 frame/วินาที ก็พอ
Sound & Movie
SOUND/VIDEO
การนำภาพและเสียงเข้ามาใช้ร่วมในการออกแบบเป็นการเพิ่มลูกเล่นให้กับเวบไซท์ของเราให้ดูดีขึ้น แต่มีข้อจำกัดในแง่ของ การโหลดภาพและเสียง ซึ่งมีไฟล์ค่อนข้างใหญ่ อาจจะทำให้เสียงขาดหายเป็นช่วง ๆ อาจจะทำให้ผู้ชมเกิดความเบื่อขึ้น แนะนำว่า ให้ใส่เพลงไว้ในหน้าถัดไป เพื่อให้ผู้ชมสามารถเลือกได้ว่าจะฟังหรือไม่
ขั้นตอนการทำ
ก่อนอื่นต้องเตรียมเสียงและภาพให้พร้อมที่สามารถนำมาใช้งาน
มาที่ Object > Special > Insert Plug in
คลิกเลือก File ที่ต้องการ Click Select
ภายในหน้า Document จะมีสัญลักษณ์ของ Plug in เกิดขึ้นให้ทำการขยายขนาดออก
จากนั้นกดปุ่ม F12 เพื่อทดสอบการทำงาน
ภายในจะมีปุ่มควบคุมการเล่นให้
ข้อเสียของการนำภาพและเสียงเข้ามาใช้
เสียเวลาในการโหลดนาน
ควบคุมการทำงานไม่ได้
อาจทำให้ผู้เข้าชมเวบเกิดความรำคาญ
ปัจจุบันมีทางเลือกใหม่โดยใช้โปรแกรม Flash ซึ่งเราสามารถควบคุมการเล่นได้จะเปิดหรือปิดก็สามารถทำได้
โปรแกรม Dreamweaver เป็นอีกโปรแกรมหนึ่งที่ได้รับความนิยมมากในการสร้างเวบเพจเพราะความสะดวกในการ
ตกแต่งเว็บเพจด้วยวิธีง่าย ๆ นั่นเอง ต่อไปนี้จะได้เรียนรู้วิธีพื้นฐานรวมถึงเทคนิคต่าง ๆ ที่สำคัญในการใช้งานเครื่องมือที่
Dreamweaver เตรียมเอาไว้แล้ว
การใช้งานเบื้องต้น
หลังจากที่เปิดโปรแกรม Dreamweaver 4 จะสังเกตเห็นหน้าจอที่เข้าใจง่ายต่อการออกแบบและปรับเปลี่ยนได้ตามความถนัดของผู้ใช้ การออกแบบจะอยู่ในส่วนที่เรียกว่าหน้า DOCUMENT เมื่อเรานำมาเปิดที่ Browser ก็จะเห็นเหมือนกับที่เราออกแบบไว้ที่หน้า DOCUMENT ซึ่งเป็นการง่ายต่อการออกแบบ
ส่วนประกอบของ Dreamweaver
เมื่อเรียกใช้โปรแกรม Dreamweaver แล้วจะปรากฏหน้าต่างของโปรแกรมดังรูป ซึ่งจะมีส่วนประกอบต่าง ๆ ดังนี้
ไตเติ้ลบาร์
ส่วนที่อยู่บนสุดของหน้าต่างโปรแกรม เป็นส่วนที่แสดงชื่อไฟล์และหัวเรื่องของเว็บเพจ (ปกติจะเป็น Untiled จนกว่าจะมีการ
เปลี่ยนชื่อไฟล์) และกลุ่มของปุ่มทางขวามือซึ่งจะใช้ควบคุมการย่อ/ขยาย/ปิดหน้าต่างที่แสดงอยู่นี้
เมนูบาร์
แถบเมนูคำสั่งที่ใช้จัดการกับเว็บเพจในหน้าต่างเว็บเพจของหน้าต่างโปรแกรม Dreamweaver ซึ่งคำสั่งเหล่านี้จะถูกจัดกลุ่ม
เป็นหมวดหมู่ของคำสั่งที่เกี่ยวข้องกัน เช่น File Edit View Window Help เป็นต้น
หน้าต่างเว็บเพจ
เป็นพื้นที่ทำงานสำหรับการตกแต่ง และใส่ออบเจ็กต์ต่าง ๆ ลงไปในเว็บเพจนั่นเอง หน้าตาของเว็บเพจเมื่อดูจากบราวเซอร์
หรือพิมพ์ออกเครื่องพิมพ์จะมีลักษณะเดียวกับการตกแต่งในพื้นที่ทำงานนี้ด้วย จึงเป็นที่มาของคำว่า WYSIWYG (What - You -
See - Is - What - You - Get) เข้าใจกันง่าย ๆ คือ คุณออกแบบอย่างไร หน้าตาเว็บเพจก็จะออกมาอย่างนั้นด้วย สีฉากพื้นหลัง
(Background Color) ของพื้นที่ทำงานปกติจะเป็นสีขาว คุณสามารถเปลี่ยนได้ภายหลังที่หน้าต่าง Properties
หน้าต่างออบเจ็กต์ (Objects palette)
Dreamweaver ได้เตรียมพร้อมหน้าต่างอบบเจ็กต์ที่มีลักษณะเป็นปุ่ม ซึ่งรวบรวมเอาไว้เป็นหมวดหมู่ที่เกี่ยวข้องกัน สำหรับ
ใส่ออบเจ็กต์ลงในเว็บเพจ เช่น ตาราง รูปภาพ ActiveX เลเยอร์ เป็นต้น เพื่อการตกแต่งและเพิ่มความสามารถให้กับเว็บเพจ
โดยการคลิกที่ปุ่มในหน้าต่างออบเจ็กต์ที่ต้องการ จากนั้นคลิกแล้วลากเมาส์บนเว็บเพจเพื่อนำไปตกแต่งเว็บเพจได้ตามต้องการ การเปิดหน้าต่างออบเจ็กต์โดยการคลิ๊กเมนู Window > Objects ภายในจะมีคำสั่ง 7 หัวข้อให้เลือก
1. Characters เป็นการจัดเกี่ยวกับด้านสัญลักษณ์ต่างๆที่มีปัญหากับเวอร์ชั่นเก่าทำให้สามารถใช้งานได้ง่ายขึ้น
2. Common เป็นObject ที่ใช้งานมากที่สุดเป็นคำสั่งนำรูปภาพมาใช้ ตาราง และพวก Plung in ต่างๆ
3. Forms เป็นการสร้างแบบฟอร์ม เช็คบล๊อค
4. Frames เป็นคำสั่งการแบ่งหน้าจอออกเป็นส่วนๆสมัยก่อนนิยมใช้กันมาก
5. Head เป็นคำสั่งใช้ Link
6. Invisible เป็นการใช้คำสั่งด้านภาษา Script ต่างๆ
7. Special เป็นคำสั่งพิเศษสำหรับมืออาชีพ สำหรับระดับเบื้องต้นยังไม่จำเป็นต้องใช้
หน้าต่างพร็อพเพอร์ตี้ (properties inspecter)
สำหรับกำหนดลักษณะรูปแบบอักษร ขนาด การจัดวาง สีสันของข้อความหรือขนาดของออบเจ็กต์ ที่ใส่ลงไปในเว็บเพจ โดยสามารถสร้างจุดเชื่อมโยงเว็บเพจหรอไปยังเว็บไซต์อื่น ๆ ได้ที่ช่อง ศรืา ในหน้าต่างพร็อพเพอร์ตี้ (properties) และกำหนดคุณสมบัติอื่น ๆ ได้อีกด้วย การเปิดหน้าต่างพร็อพเพอร์ตี้โดยคลิ๊กเมนู Window > Properties
หน้าต่าง Launcher (Launcher Window)
เป็นหน้าต่างที่รวบรวมปุ่มที่เชื่อมโยงการปิดหรือเปิดหน้าต่างใช้งานอื่น ๆ ที่เป็นเครื่องมือสำคัญได้แก่
Site สำหรับอำนวยความสะดวกในการสร้างเว็บเพจใหม่ การแก้ไขเว็บเพจ จัดการกับเว็บไซต์โดยจะแสดงหน้าต่าง ซึ่งจะแบ่งหน้าต่างออกเป็น 2 กรอบ กรอบด้านซ้ายมือจะแสดงโครงสร้างของเว็บไซต์ (Remote site) และไฟล์ต่าง ๆ ที่เชื่อมโยงกันอยู่ด้วย ส่วนกรอบด้านขวาจะแสดงไฟล์ต่าง ๆ ที่อยู่ในเครื่องของคุณนั่นเอง ที่ถูกกำหนดให้ป็น Local Site การเปิดหน้าต่าง Site โดยคลิ๊กที่ปุ่ม Site หรือคลิ๊กเมนู Window > Site Map หรือกด
HTML Styles หน้าต่างกำหนดรูปแบบของการกำหนดคุณสมบัติของอักษรและการจัดวางออบเจ็กต์ภายในหน้าเว็บเพจ การเปิดหน้าต่าง HTML Styles คลิ๊กเมนู Window > HTML Styles หรือกด
Behaviors หน้าต่างสำหรับเพิ่มลูกเล่นให้กับเว็บเพจด้วยการใส่ JavaScript เพื่อควบคุมการทำงานขอบออบเจ็กต์ต่าง ๆ ตามเหตุการณ์ที่เกิดขึ้น เช่น เมื่อคลิกเมาส์ให้เกิดการสลับภาพเป็นภาพอื่น ๆ เมื่อเริ่มเปิดหน้าเว็บเพจด้วยบราวเซอร์ให้ปรากฏ รอบข่าวสารได้ เป็นต้น การเปิดหน้าต่าง Behaviors โดยคลิ๊กที่ปุ่ม Behaviors
หรอคลิ๊กเมนู Window > Behaviors
History คุณสามารถย้อนกลับการทำงานของขั้นตอนในการสร้างเว็บเพจได้โดยการเลื่อนแถบด้านซ้ายมือไปยังขั้นตอน ที่ต้องการ อำนวยความสะดวกดีมากครับ
Code Inspector สำหรับตรวจสอบโค้ดภาษา HTML ที่ควบคุมการแสดงข้อมูลของเว็บเพจในเบื้องหลังนั่นเอง การเปิดหน้าต่าง Code Inspector โดยคลิกที่ปุ่ม Code Inspector หรือคลิ๊กที่เมนู Window > Code Inspector หรือกด
แถบสถานะ
เป็นหน้าต่างแสดงรายละเอียดเกี่ยวกับหน้าต่างเว็บเพจ
ซ้ายมือสุดจะแสดง Tag ที่ใช้กับออบเจ็กต์ที่เลือก
ถัดมาเป็นการกำหนดขนาดของหน้าต่างเว็บเพจ ขนาดปกติจะเป็น 796 x 540 pixel คลิกที่ลูกศรเพื่อเลือกกำหนด ขนาดใหม่ได้
ขนาดของไฟล์เว็บเพจและเวลาที่ใช้ในการเปิดเว็บเพจนี้
Mini-Launcher เป็นหน้าต่าง Launcher ขนาดย่อที่ใช้เรียกหน้าต่างอำนวยความสะดวกนั่นเอง
การสร้างงาน
การสร้าง File งาน
ในที่นี้จะแนะนำการสร้าง File งานอย่างถูกต้องเป็นขั้นตอนและมีระบบเพื่อให้ง่ายต่อการทำงานและสามารถแก้ไขปรับปรุง ได้ในอนาคต
1. ไปที่ Menu Bar เลือกที่ Site จะมีเมนูย่อยให้เลือกที่ New Site
2. จะมีวินโดว์ New Site เกิดขึ้นให้ใส่ข้อมูล
ช่อง Site Name ให้ทำการตั้งชื่อ Site
ในช่อง Local Root Folder ให้เลือกสัญลักษณ์รูปซองเอกสารด้านขวาจากนั้นจะขึ้นวินโดว์ ให้ Click ที่ลูกศรดังภาพจากนั้นให้เลือกที่ Desktop
ให้เลือกที่ Create New Folder จากนั้นให้ตั้งชื่อตามที่ต้องการ แลัว Click ปุ่ม Open แล้ว Click ปุ่ม Select อีกครั้ง จากนั้นจะ กลับเข้าสู่หน้า New Site อีกครั้ง และ Click ปุ่ม Ok ด้านล่าง
หลังจาก Click ปุ่ม Ok แล้วจะกลับมาสู่หน้า Site ด้านซ้ายบนจะมีชื่อ Site Name ที่ได้ตั้งไว้ขึ้นมา และช่อง Local Folder จะมี Folder ที่ได้เลือกไว้เช่นกัน
ขั้นตอนต่อไปเป็นการสร้าง File งาน การสร้าง File แรกจำเป็นต้องตั้งชื่อ File เป็น index.html เสมอเพราะ Browser จะอ่าน File index.html ก่อนเป็นอันดับแรกแต่ในช่อง URL จะไม่แสดง / index.html แต่จะแสดงเพียงชื่อ website เท่านั้นและหลังจากนั้น ถึงจะ Link ไปยัง File งานอื่นซึ่งจะตั้งเป็นชื่ออะไรก็ได้
การสร้าง New File โดยการ Click ที่ File > New File
จากนั้นให้เปลี่ยนชื่อ เป็น index.html
ให้ทดสอบโดยการ ดับเบิ้ล Click ที่ index.html ก็จะปรากฎหน้า Document ที่ชื่อ index.html ที่พร้อมสร้างงานได้ทันที
การตั้งค่าต่างๆ ที่จำเป็นต่อการสร้างงาน
ก่อนที่จะทำการออกแบบเราต้องทราบถึงขนาดหน้าจอว่าว่าเราต้องการออกแบบหน้าจอให้จอภาพขนาดไหนที่สามารถ รับชมเวบของเราได้พอดีกับหน้าจอ ในปัจจุบันจอคอมพิวเตอร์จะอยู่ในระดับ 15 นิ้ว ประมาณ 90 % ที่เหลือจะเป็น 14 และ 17 นิ้ว ในที่นี้แนะนำให้กำหนดขนาดระดับจอภาพ 15 นิ้ว ขนาด 800 x 600 เพราะจอใหญ่กว่าก็สามารถดูได้
การตั้งขนาดให้กับ Document
ตั้งได้โดยการเลือกที่ด้านล่างของหน้างานโดยการ Click ที่ลูกศรจะมีขนาดให้เลือก
หากไม่มีขนาดที่ต้องการให้เลือกที่ Edit Size จะเป็นหัวข้อ Perference ช่อง Status Bar ในหัวข้อ Window Sizes จะมีให้เรา ระบุขนาด ตามต้องการในช่อง Width ใส่ขนาด 800 ส่วนช่อง Height ใส่ขนาด 600 และ Click Ok จากนั้นให้กลับมาเลือกขนาด
จาก Window Size อีกครั้งจะมีขนาดที่ได้ตั้งไว้ปรากฎขึ้นมาและให้ทำการเลือกขนาดที่ได้กำหนดไว้หน้า Document ก็จะเปลี่ยนเป็นขนาด 800 x 600 ทดสอบได้จากการ Click ที่ View >Rulers เลือก Show และเลือกหน่วยเป็น Pixels
การตั้งตัวอักษร
การตั้งให้สามารถใช้ภาษาได้นั้นทำได้โดยการเลือกที่ Edit>Perference>Font Type/Encoding หรือใช้ Ctrl U
เป็นปุ่มลัดก็สามารถเข้าไปที่ Perferences ได้
ในหัวข้อ Font / Encoding ให้ระบุค่าดังนี้
Default Encoding เลือกเป็น Other
Font Setting เลือกเป็น Other
Proportional Font เลือกเป็น Font อะไรก็ได้ที่ใช้ภาษาไทยได้แต่ควรเลือก Font ที่เป็นมาตราฐานหน่อย เพราะถ้า Browser ของผู้ชมไม่มี Font ชนิดที่เราเลือกก็จะไม่สามารถแสดงได้ตามที่เราต้องการ ขอแนะนำให้ใช้ Font ของ Ms Sans Serif ขนาด 10 pt เพราะเป็น Font มาตราฐานที่มีมากับระบบปฎิบัติการ Window
Fixed Font เลือกเหมือนเดิมไม่ต้องเปลี่ยนแปลง
Code Inspector เลือก Ms Sans Serif ขนาดตามต้องการ ( เป็นตัวแสดง html )
Click ok
ทดสอบโดยการพิมพ์ภาษาไทย
การตั้งค่าของ Document
เลือก Modify >Page Properties หรือ Clrt J จะช่วยให้ทำงานได้เร็วขึ้น
Title ใส่ชื่อ
Background Image เป็นการใช้รูปมาทำเป็น backgound ถ้ารูปมีขนาดเล็กทางโปรแกรมจะจัดเรียงเป็น Patten
เรียงรูปซ้ำกันเป็นแบบตาราง
Background สีพื้นของเวบสามารถเลือกสีได้ตามต้องการโดยการ Click ที่ช่องสี จะมีจานสีให้เลือกดังภาพด้านล่าง
Text เป็นสีของตัวอักษรสีมาตราฐานคือสีดำสามารถเลือกได้
Link สีตัวอักษรที่เป็น Link มาตราฐานจะเป็นสีน้ำเงิน
Visited Link เป็นสีสำหรับ Link ที่ไปมาแล้ว
Active Link เป็นสีในขณะที่ Click Link
Document Encoding ให้เลือกเป็น Other
Click Apply
Click Ok
จากนั้นจะกลับมาที่หน้า Document พร้อมกับความเปลี่ยนแปลงของสีพื้นจะเปลี่ยนเป็นสีที่ได้ทำการเลือกไว้
การพิมพ์ตัวอักษร
การสร้างงาน
หลังจากได้เรียนรู้ขั้นตอนการตั้งค่าต่างๆ เป็นที่เรียบร้อยแล้วต่อไปก็จะเริ่มขั้นตอนการสร้างงานจริงๆ ที่สามารถนำไปใช้ได้ จะเริ่มจากขั้นตอนพื้นฐานจนถึงขั้นตอนระดับสูงเป็น Step ขั้นตอนต่างๆ จะเชื่อมโยงกันตลอด
การพิมพ์ตัวอักษร
การพิมพ์ตัวอักษรใน Dreamweaver เหมือนกับการใช้ Microsoft Word หากเคยใช้มาบ้างก็จะเป็นการง่ายในการ ทำความเข้าใจ
การพิมพ์ข้อความ
สามารถพิมพ์เข้าไปในหน้า Document ได้เลย และลอง Preview ดูโดยการกด F12 ( เป็นการจำลอง Browser ) เราจะเห็นได้ว่า ตัวอักษรที่พิมพ์จะเหมือนกันกับที่ Preview ทุกประการ นอกจากนั้นยังมีคุณสมบัติพิเศษที่สามารถปรับแต่งได้ โดยการใช้ Properties
วิธีใช้
Format เป็นรูปแบบของอักษรสามารถเลือกได้ตามต้องการ
Paragraph การพิมพ์แบบต่อเนื่อง
Heading 1-6 การพิมพ์หัวข้อเรื่องตามขนาด Heading 1 เป็นขนาดใหญ่ที่สุดเรียงตามลำดับ การใช้เลือกก่อนพิมพ์
หรือถ้าพิมพ์ไปแล้วจะใช้ได้โดยการ Click Mouse ค้างแล้วป้ายทั้งข้อความที่ต้องการจากนั้นมาเลือกที่ Propreties > Format ตัวอักษรก็จะเปลี่ยนตาม ส่วนตัวอักษรที่ไม่ได้เลือกก็จะไม่มีการเปลี่ยนแปลง
ในหน้า Document เดียวกันเราสามารถใช้ ตัวอักษรหลายแบบโดย Click ที่ลูกศรในช่อง Default Font จะมี Font อื่นให้เลือก ส่วนค่า Default Font จะเป็น Font ที่ได้ทำการ Set ไว้ในตอนต้น
Size ขนาดของตัวอักษร
การใช้ตัวหนา และตัวเอน ตัวหนา Click ที่ B และตัเอน Click ที่ ตัว I
การจัดให้ ชิดซ้าย ชิดขวา หรือกึ่งกลาง ( เหมือน Word ทุกประการ )
การใช้หัวข้อย่อย จะเป็นจุดหรือตัวเลขก็ได้
เปลี่ยนสีตัวอักษร Click ที่ช่องสี่เหลี่ยมจะมีจานสีให้เลือก
ข้อจำกัดของการพิมพ์ตัวอักษร
เนื่องจากการพิมพ์ไม่สามารถเว้นวรรคตัวอักษรได้เกินหนึ่งตัวอักษร ทำให้การจัดรูปแบบการย่อหน้า ไม่สามารถทำได้
วิธีแก้ไขโดยการใช้ Object ในหัวข้อ Character ภายในจะมีเครื่องมือให้ใช้หลายอย่างเป็นเครื่องมือที่ในเวอร์ชั่นเก่าไม่มี
การขึ้นบรรทัดใหม่โดยการกด Enter ในโปรแกรมจะเป็นการเว้น 2 บรรทัด
ถ้าหากต้องการเว้นหนึ่งบรรทัดสามารถทำได้โดยการใช้ Character ในหัวข้อ BR ( Line Break ) หรือกด Shitf ค้างพร้อมทั้งกด Enter
การเว้นวรรคแบบไม่จำกัดทำได้โดยการเลือกที่ Non Breaking Space
Note
Websafe color
คือสีที่ใช้ในการสร้างเวบเพจ HTML ซึ่งเป็นสีที่ถูกระบุเป็นรหัสเลขฐานสิบหก หรือ Hexadecimal value เช่น #FF0000 หรือชื่อสีธรรมดาเช่น RED ตามปกติสีที่ใช่ใน Netscape และ Internet explorer เมื่อใช้ค่าสีใน 256 สี จะเรียกได้ว่าเป็น ค่าสีที่ปลอดภัย ( สามารถดูได้ทุกเครื่องทุกระบบโดยสีไม่ผิดเพี้ยน ) ซึ่งจริงๆ แล้วสีที่ใช้ได้มีเพียงแค่ 212 สีเท่านั้นเอง
การจัดรูปแบบอักษร
Format การจัดรูปแบบตัวอักษร
การจัดรูปแบบตัวอักษรหรือเรียกว่า Format ใน Dreamwearver มีการใช้คำสั่งเหมือนกับ Microsoft word การ Format text ใน Dreamweaver มีสองรูปแบบคือ HTML Tags กับ Style Sheet โดย Css หรือ Style Sheet จะใช้เฉพาะ Browser 4.0 ขึ้นไปเท่านั้น แต่จะขอแนะนำให้ใช้ค่า Css จะดีกว่าการใช้ค่า Css มาช่วยในการทำเวบเพื่อช่วยประหยัดเวลาในการเซ็ท Font ทีละย่อหน้า และเป็นการบังคับให้ผู้ชมเวบใช้ Font ที่เรากำหนดเท่านั้น
Formatting text wirh html tags
คือการเขียน Tags HTML เพื่อช่วยจัดย่อหน้า และขนาดหัวเรื่องเท่านั้นเองการนำไปประยุกต์ใช้งานค่อนข้างจำกัด แต่มีข้อดีคือ Browser ทุกรุ่นจะสามารถ Format ด้วย Tags เหล่านี้ได้
การเรียกใช้ Formatting text with HTML tags
ให้ทดลองพิมพ์ข้อความอะไรก็ได้ลงในหน้าเวบเพจ แล้วลองมาจัดระเบียบด้วยวิธีนี้
พิมพ์ข้อความ ป้ายทับข้อความที่ต้องการจัด
การเรียกใช้ โดยการเลือกที่เมนู Text > Styles หรือคลิกขวาที่ข้อความ
Align เป็นการจัดข้อความให้ชิดซ้าย กลาง หรือขวา
Style เป็นลักษณะของตัวอักษรเหมือนกับ word เช่น ตัวหนา ตัวเอียง ขีดเส้นใต้
Format with Style sheets
Style sheets ก็เหมือนการเก็บค่า Format ในรูปแบบสไตล์ของเราเอาไว้หลาย ๆ แบบไม่ว่าจะ Font, ขนาด, สีที่ใช้, การจัดย่อหน้า (ใช้จดจำโค้ด HTML บางอย่างได้อีกด้วย) เมื่อเราเก็บไว้หลาย ๆ แบบย่อหน้านี้ เราต้องการสไตล์ไหนก็คลิกเลือกได้เลย เมื่อเวบเพจเขียนเสร็จแล้วจะดึงมาเฉพาะค่า Css ที่เราเรียกใช้เท่านั้น Cssจึงนำมาช่วยการออกแบบให้สะดวกมากขึ้น
วิธีสร้าง Style sheets
มาที่เมนู Text > Css Styles > New Style…
จากนั้นจะมี Dialog Box New Style
Neme : ใส่ชื่อ
Type : คลิกเลือก Make Custom Style (class)
Define In : คลิกเลือก New Style Sheets (file)
คลิก OK
จากนั้นจะเป็น Dialog Box : Style Definition เลือก Type ด้านซ้าย ในหัวข้อ Type ด้านขวามีรายละเอียดดังนี้
Font คลิกลูกศรจะมี Font ให้เลือก
Size คลิกลูกศรจะมี Size ให้เลือก
ที่เหลือคงไว้เหมือนเดิม
คลิก Apply
คลิก OK
ทดสอบโดยการพิมพ์ข้อความ จากนั้นเลือกข้อความมาที่เมนูเลือก Text > Css Styles > เลือกชื่อที่ได้ตั้งไว้ (Test) จากนั้นจะเห็นการเปลี่ยนแปลงกับตัวอักษรทดสอบโดยการ Preview กด F12 ทดลองเปลี่ยนขนาดของ Font ใน Browser ลองเปลี่ยนเป็นขนาดใหญ่สุด จะเห็นว่าขนาดตัวอักษรไม่มีการเปลี่ยนแปลงนั้นเป็นการบังคับโดยใช้ Css Styles นั้นเองและยังสามารถใช้ได้กับทุกหน้า Document โดยการใช้ Attach Styles Sheets
การบันทึกและดูโฮมเพจ
การบันทึกโฮมเพจ (Save)
หลังจากสร้างโฮมเพจมาบ้างพอสมควรแล้ว สิ่งที่ไม่ควรลืมก็คือการบันทึกผลงานที่ได้ส้างขึ้นนี้ไว้ในไฟล์นามสกุล .htm หรือ html โดยตั้งชื่อให้สัมพันธืกับเนื้อหาภายในโฮมเพจ ทั้งนี้จะไม่ทำให้เกิดการสับสนได้ในภายหลัง ซึ่งจะมีผลทำให้ง่า ต่อการตรวจสอบ และจัดการเว็บไซต์อีกด้วย ขั้นตอนการบันทึกโฮมเพจด้วยวิธีการที่คุ้นเคย คล้ายกับการบันทึกไฟล์ทั่ว ๆ ไป ดังต่อไปนี้
1. คลิกที่เมนู File > Save หรือกดปุ่ม
2. เมื่อปรากฏไดอะล็อกบ็อกซ์ ใส่ชื่อไฟล์ของโฮมเพจ เช่น "siampage.html" ลงในช่อง File name
3. ดับเบิ้ลคลิกเมาส์เลือกกำหนดไดเร็คทอรี่ที่ต้องการสำหรับเก็บไฟล์ในช่อง Save
4. คลิกปุ่ม Save เพื่อทำการบันทึกไฟล์
ดูโฮมเพจที่สร้างขึ้นด้วย Browser
ในขณะที่ทำการสร้างโฮมเพจอยู่นั้น คุณต้องการที่จะตรวจสอบหน้าตาของโฮมเพจที่สร้างขึ้นนี้ โชคดีที่ Dreamweaver ได้เตรียมขั้นตอน Preview in Browser เอาไว้สำหรับดูโฮมเพจได้ทุกครั้งที่ต้องการ โดยไม่จำเป็นต้องบันทึกโฮมเพจที่กำลังสร้างไว้ในไฟล์ใด ๆ ก่อนดูก็ได้ นอกจากนี้หากมีการใส่ฟังก็ชั่น , JavaScript , VBScript , ActiveX-Control , Plug-in (หากทำการติดตั้งไว้แล้วที่บราวเซอร์) รวมถึงจุดเชื่อมต่อไปยังโฮมเพจอื่น ๆ ลงในโฮมเพจนี้ก็สามารถใช้งานได้อย่างครบถ้วนด้วย
การดูโฮมเพจที่สร้างขึ้นด้วย Browser ทำได้โดยการกด F12
ใส่รูปภาพลงในโฮมเพจ
การทำลิงค์เมล์ Link E-mail
การทำลิงค์เมล์ส่วนมากจะเป็นการให้ผู้ที่ชมเวบไซท์ได้ติดต่อกับเจ้าของเวบไซท์ กล่าวคือก็เป็นการส่งเมล์ธรมดานั้นเองแต่พิเศษอยู่ที่ผู้ชมไม่ต้องพิมพ์ที่อยู่ E-mail Address ของเรา เพียงพิมพ์ข้อความติชมเท่านั้น เหมือนเป็นการส่งเมล์อัตโนมัติโดยไม่ต้องไปที่ผู้ให้บริการเมล์ โดยหลังจากคลิกลิงค์เมล์ทางBrowser จะทำการเปิดโปรแกรมส่งเมล์ให้โดยอัตโนมัติส่วนมากถ้าเป็น IE จะเปิดโปรแกรม Outlook ให้
วิธีลิงค์เมล์
ให้เปิดไฟล์ index.html
ให้พิมข้อความว่า คำติชม
หรืออีกวิธีคือ
ใช้ Object โดยเลือกที่ Insert Email Link
ภายใน Dialog box ให้กำหนดดังนี้
Text ให้ใส่ข้อความ คำติชม
E-mail ให้ใส่ที่อยู่ของเมล์
คลิก OK
จากนั้นทดสอบโดยการกด F12 คลิกข้อความจากนั้นโปรแกรมจะเรียกโปรแกรม Outlook ขึ้นมาให้ใส่ข้อความจากนั้นคลิกส่ง( send )
การใช้รูปภาพเป็นลิงค์
ส่วนมากจะมีสองประเภทใหญ่คือ การใช้ภาพทั้งภาพทำลิงค์ หรืออีกอย่างก็คือการใช้บางส่วนของภาพทำลิงค์โดยใช้ Hotspot เลือกเฉพาะที่
การใช้ภาพทั้งภาพเป็นลิงค์
การใช้ภาพเป็นลิงค์นิยมสร้างภาพขึ้นมาเองทำเป็นรูปปุ่มกดจะใช้ร่วมกับ Rollover คือลักษณะก่อนเอาเมาส์ผ่านจะเป็นอีกรูป พอเอาเมาส์ผ่านหรือวางที่รูปก็จะเปลี่ยนเป็นอีกรูปหนึ่งและยังสามารถเป็นลิงค์ได้อีกด้วย การทำดังกล่าวจะกล่าวถึงในหัวข้อ Rollover ในที่นี้จะกล่าวถึงการทำลิงค์แบบธรรมดา
สร้างรูปเก็บไว้ในโฟลเดอร์ image ที่ได้สร้างไว้
มาที่หน้า Document index.html
คลิก Insert image จาก Object
เลือกรูปจาก Dialog box
คลิก Select
จากนั้นให้คลิกที่รูปภาพในหน้า Document ที่ได้ Insert มา
ให้มาที่ Properties ในช่องลิงค์ให้คลิกที่รูปโฟล์เดอร์เหมือนกับการทำลิงค์ตัวอักษรดังที่ได้นำเสนอไปแล้ว
จากนั้นเลือกไฟล์ที่ต้องการลิงค์ไปหา หรือจะลิงค์ไปยังเวบไซท์นอกก็ได้
เฟรม (Frame) ตอนที่ 1
Frames
Frame overview
Frame คือการแบ่งหน้าต่างของ Browser ออกเป็นส่วนต่างๆ โดยแต่ละส่วนโหลดหน้าเวบได้อิสระและสามารถสั่งลิ้งค์จากทางด้านซ้าย ให้มาเปิดทางด้านขวาได้ด้วย
Frame มีหลักในการทำงาน คือโหลดหน้าเวบเพจมากกว่าสองหน้าขึ้นไปมาใส่ในพื้นที่แต่ละส่วนที่แยกไว้ในหน้าเดียว นิยม ใช้แยกส่วน หน้ารวมลิ้งค์ออกจากหน้าเนื้อหาเมื่อเวลาเรียกเนื้อหา ขึ้นมาก่อนก็จะโหลดอยู่พื้นที่เดียวเท่านั้นซึ่งหน้าเนื้อหาจะมี
แต่ ข้อความไม่ได้ทำการตกแต่งอะไรมาก เป็นการง่ายในการออกแบบช่วยประหยัดเวลาในการทำงาน กล่าวคือหากทำเวบเพจ
10 หน้าแต่จำเป็นต้องใช้ โลโก้เดียวกันใช้ลิงค์ร่วมกัน แต่แตกต่างกันตรงเนื้อหาเพียงอย่างเดียวเพื่อเป็นการง่ายจึงแบ่งออก
เป็นเฟรมและลิ้งค์เปลี่ยนเฉพาะเนื้อหาเท่านั้นและยังสามารถโหลดได้เร็วกว่าการเปิดหน้าใหม่)
Frame แต่ละส่วนก็คือ html แต่ละหน้า เพราะฉะนั้นตัวอย่างนี้เท่ากับเราต้องสร้าง html 4 หน้าคือ
Frame1 Frame 2 Frame 3 และหน้าที่รวม Frame 1,2,3 เข้าด้วยกัน
การสร้างเฟรม
การสร้างเฟรมนั้นสามารถทำได้การใช้ Object ที่คำสั่ง Frames ภายใน Object Frames จะมีเฟรมสำเร็จรูปให้เลือกหลายแบบ ไม่ว่าจะเป็น 2 เฟรม , 3 เฟรม , 4 เฟรม
หลังจากเลือกแบบเฟรมที่ต้องการได้แล้ว แต่ในช่วงการทดลองใช้แนะนำให้เลือกแบบสองเฟรมก่อนเพื่อเป็นการเข้าใจง่าย ขั้นตอนการสร้างเฟรมดังนี้
คลิกเลือกแบบ 2 เฟรม
ในหน้า Document จะเกิดการแบ่งเฟรมให้เลยดังภาพจะแยกเป็นเฟรมซ้ายและขวา
เราสามารถปรับขนาดความกว้างของเฟรมได้โดยการปรับค่าที่ Properties inspector ( Properties เป็นคุณสมบัติของเฟรมสามารถ เรียกได้โดยการคลิกที่เส้นแบ่งระหว่างเฟรม )
Frames Properties
Borders : เลือกว่าจะให้มีขอบของเฟรมหรือไม่ ในที่นี้ไม่ต้องให้มีขอบเลือก No
Border Width : ความกว้างของขอบถ้ากำหนดให้ไม่มีขอบแล้วให้กำหนดความกว้างของขอบเป็น 0 ด้วยเพื่อความต่อเนื่องของเฟรม
Border Color : กำหนดสีของขอบเฟรม
Column : สามารถกำหนดความกว้างของเฟรมโดยการคลิกที่ Row Col Selection ด้านขวาคลิกเลือกให้เฟรมที่เราต้องการ ปรับ Active แต่ที่นิยมปรับกันเฉพาะเฟรมใดเฟรมหนึ่งเพื่ออีกเฟรมจะเป็นส่วนของหน้าจอที่เหลือทั้งหมดเพราะขนาดหน้าจอ ของแต่ละคนไม่เท่ากัน
Save Frames
เป็นขั้นตอนที่สำคัญในการสร้างเฟรมเลยก็ว่าได้เพราะอาจจะเกิดความสับสนได้วิธีการเซฟให้ปฏิบัติดังนี้
คลิกที่บริเวณนอกสุดของหน้า Document ให้ขอบนอกของเฟรมทำงานโดยขึ้นสีเข้มบริเวณรอบขอบนอก
ไปที่เมนู File > Save All Frames
จะเห็นขอบแรเงาบริเวณรอบบริเวณขอบนอก
ภายใน Dialog box ให้ save ชื่อเป็น main_frame
จากนั้นจะเป็นการ save Frame ด้านขวาให้กำหนดชื่อเป็น right_frame
จากนั้นจะเป็นการ save Frame ด้านซ้ายให้กำหนดชื่อเป็น left_frame
ทดสอบโดยการ Preview โดยกด F12
ในการทำงานเกี่ยวกับเฟรมนั้น Dreamweaver เพิ่มความสะดวกให้กับคุณได้ ด้วยการสร้างพาเล็ตต์ขึ้นมาโดยเฉพาะสามารถ
เรียกรูป ขึ้นมาใช้งานโดย คลิกเมนู Window > Frame หรือ Shift F2 การใช้งานโดยการคลิกที่เฟรมที่ต้องการทำงานในเฟรมนั้นๆ
จากที่ผ่านมาคงพอจะเริ่มเข้าใจรูปแบบไฟล์ของโฮมเพจที่ใช้แล้ว โดยจะเห็นได้ว่า หากหน้าโฮมเพจมีสองเฟรม จำเป็นต้องมีไฟล์ สามไฟล์ด้วยกัน คือ เฟรมสองไฟล์ และอีกหนึ่งไฟล์เป็นไฟล์ของเฟรมเซ็ต ที่ใช้เรียกไฟล์ขึ้นมาแสดงนั้นเองการ Save เฟรม ยังสามารถที่จะเลือก Save นอกเหนือจากที่ได้กล่าวมาแล้วคือ
Save Frameset เมื่อต้องการเซฟเฉพาะไฟล์เฟรมเซ็ต
Save Frameset As เมื่อต้องการเซฟเฉพาะไฟล์เฟรมเซ็ตเป็นอีกไฟล์หนึ่ง ( โดยใช้ชื่อไฟล์อื่น )
Save เมื่อต้องการเซฟเฉพาะเฟรมใดเฟรมหนึ่ง ( ต้องคลิกให้เฟรมนั้นทำงาน )
Save As เมื่อต้องการเซฟเฉพาะไฟล์เฟรมใดเฟรมหนึ่ง เป็นอีกไฟล์หนึ่ง (เปลี่ยนชื่อใหม่ )
Save All เมื่อต้องการเซฟไฟล์ทั้งหมด ทุกไฟล์พร้อมกัน โดยไม่ต้องป้อนชื่อใหม่ (แต่ต้องเคยเซฟมาก่อนแล้ว
การกำหนด คุณสมบัติต่างๆ ของเฟรม
เราสามารถกำหนดทุกอย่างได้เหมือนหน้า html หน้าเดียวได้ตามปกติ ไม่ว่าจะเป็นการกำหนดสีพื้น สีตัวอักษร หรือตั้งชื่อ Tilte สามารถทำได้ดังนี้
คลิกที่เฟรมที่ต้องการกำหนดคุณสมบัติ หรือเรียกใช้ Frame Properties โดยกด Shift F2 หลังจากนั้นเลือกเฟรมที่ต้องการ ให้ทำงาน
ให้มาที่ Modify > Page Properties
Dialog box Page Properties ให้ทำการกำหนดค่าตามที่ต้องการ (การกำหนดค่าได้กล่าวมาแล้วเหมือนกับการกำหนดหน้า
Document ทุกประการ )
หลังจากกำหนดแล้วคลิก Apply > Ok
จากนั้นให้ทำการปรับเฟรมที่เหลือ
ฟอร์ม (Form) ตอนที่ 2
Checkbox
รูปแบบคล้ายกับ radio button เพียงแต่สามารถทำเครื่องหมายได้หลายช่องส่วนมาจะใช้ในการสอบถามความต้องการต่างๆ
คลิก Checkbox ใน Form Object
Checked Value ให้ใส่ชื่อให้สอดคล้องกับหัวข้อที่ได้กำหนด จะมีผลในตอนเก็บรวบรวมข้อมูล
Initial State สามารถเลือกได้ว่าจะ Check ไว้ล่วงหน้าหรือไม่
RadioButton
สามารถเลือกได้เพียงช่องเดียว ยกตัวอย่างเช่นการเลือกเพศ เช่น ชาย หรือ หญิง
คลิกที่ Radiobutton ใน Form Object
Checked Value ให้กำหนดข้อมูลที่ต้องการทราบ เช่น Man หรือ Woman
Initial State สามารถกำหนดเลือก Checked ไว้ที่ช่องใดช่องหนึ่งก็ได้
List/menu list
จะเป็น list option ให้เลือกเช่น จำนวนสมาชิกในบ้านท่าน มีให้เลือกแบบ list กับแบบ menu โดยเซ็ตคำที่เลือกได้ใน list value ค่า value จะเป็นค่าที่โปรแกรมนำมาเก็บไว้ในตัวแปร
มาที่ Properties inspector
Type เลือกว่าจะให้เป็นแบบไหนระหว่าง Menu กับ List
คลิกที่ List Value เพื่อกำหนดค่าตัวแปร
คลิกเครื่องหมาย + เพื่อเพิ่มตัวแปร ตัวอย่างเป็นการสำรวจว่าผู้ใช้ส่วนมากใช้ E-mail ที่ใด
คลิก Ok
File Field
ให้ผู้ชม Upload ไฟล์มาเก็บไว้ที่เราได้ เช่น การส่งภาพเข้าประกวด จะสังเกตุได้จากผู้ให้บริการ e-mail จะใช้ในการแนบไฟล์
Image Filed
เลือกรูปมาใช้แทนปุ่ม Submit
Hidden filed
เป็น Form ที่ผู้เข้าชมไม่สามารถมองเห็นได้ ไว้ใช้ comment หรือส่ง Value ให้โปรแกรมเท่านั้น
Jump Menu
ลักษณะการทำงานของ Jump menu จะเหมือนกับการนำคุณสมบัติของ Navigation bar กับ Listbox แบบ menu มาผสมกัน โดยหน้าตาของมันจะเหมือนกับ Listbox ทุกอย่าง คือมีรายการให้เลือกได้ เพียงแต่หลังจากที่ผู้ใช้เลือกรายการเรียบร้อยแล้ว จะลิงค์ไปยังหน้าโฮมเพจอื่นๆ เหมือนกับการลิงค์ที่ Navigation bar นั้นเอง ทันทีที่คลิกปุ่ม Insert Jump menu ก็จะปรากฏ Dialog box ซึ่งใช้สำหรับกำหนดรายการตัวเลือกและหน้าโฮมเพจที่ต้องการลิงค์
เพิ่มรายการตัวเลือกลงในช่อง Menu Items โดยคลิกที่เครื่องหมาย + ที่ปุ่มบนซ้าย
ป้อนชื่อหัวข้อหรือรายการลงในช่อง Text
กำหนดหน้าโฮมเพจที่จะลิงค์ไปในช่อง When Selected Go To URL
ทำซ้ำข้อ 1-3 เพื่อเพิ่มรายการตัวเลือกจนครบ
กำหนดวินโดว์หรือเฟรมที่จะแสดงหน้าโฮมเพจทุกๆ หน้าที่ลิงค์ไปในช่อง Open URL In
กำหนดชื่อของ Jump Menu ในช่อง Menu Name
เลือก Checkbox " Insert Go Button After Menu " หากต้องการกำหนดให้มีปุ่มคลิก GO อยู่ข้างๆ Jump Menu ซึ่งใช้กำหนดว่า หลังจากที่ผู้ใช้เลือกหัวข้อรายการแล้ว จะยังไม่ลิงค์ไปหน้าโฮมเพจอื่น จนกว่าจะคลิกปุ่ม GO
เลือก Checkbox " Select First Item After URL Chang " สำหรับกำหนดให้แทบสีฟ้าแสดงอยู่ที่ตัวเลือกรายการแรก หลังจาก ที่มีการลิงค์ไปยังหน้าโฮมเพจอื่นแล้ว
จากนั้นคลิก OK
เลเยอร์ (layer)
Layer
ใช้ในการกำหนดค่าตำแหน่งส่วนประกอบที่เราจะวาง เมื่อลากเลเยอร์ระบุตำแหน่งในหน้า Document แล้ว เราจะใส่ข้อความ ,รูปภาพ , Plugin , Flash หรือแม้แต่ใส่เลเยอร์ซ่อนอยู่ข้างในอีกชั้นก็สามารถทำได้ และยังสามารถกำหนดว่าจะให้แสดง หรือ ไม่ให้แสดงก็ได้ส่วนมากจะใช้เป็นเทคนิคพิเศษต่าง มากกว่านำมาใช้ทั่วไป เพราะเลเยอร์ใช้กับ Internet Explorer ไม่มีปัญหา แต่ส่วนมากจะมีปัญหากับ Netscape เรื่องตำแหน่งที่วางส่วนมากตำแหน่งจะผิดพลาดและซ้อนทับกัน ในการออกแบบเวบใน ปัจจุบันจะใช้ตารางช่วยในการออกแบบเป็นหลักและเลเยอร์จะเป็นลูกเล่นที่เพิ่มเข้ามาเท่านั้นเอง
การใช้เลเยอร์
การเรียกใช้คำสั่งเลเยอร์ใช้ได้สองวิธีคือ หนึ่งโดยเลือกที่เมนูบาร์มาที่ Insert >Layer หรือใช้ Object เลือกหัวข้อ Common มาที่รูปเลเยอร์แล้ว Click
การใช้ Click Layer ที่อยู่ใน Object palette แล้วลากตำแหน่งและขนาดที่ต้องการของDocument window ได้เลย
เลเยอร์ที่สร้างขึ้นมาแล้ว
เมื่อคลิกข้างในพิมพ์ข้อความหรือรูปได้เลย ถ้าคลิกที่หูเลเยอร์จะเป็นการเลือกเลเยอร์และสามารถย้ายตำแหน่งได้ตามต้องการ และขยายขนาดได้โดยการคลิกที่หูเลเยอร์จากนั้นจะมีปุ่มปรากฎ ลากจุดใดจุดหนึ่งจากเลเยอร์ออกมาได้เลย
ถ้าหากต้องการความมั่นคงโดยการระบุค่าเป็นตัวเลข ให้แก้ไขค่าได้ใน property inspector
เลเยอร์ที่สร้างขึ้นมาถ้าหากต้องการแทรกรูปหรือข้อความ ให้กดภายใน layer หนึ่งครั้ง จะมีเคอร์เซอร์กระพริบอยู่ซ้ายบน เรียก ว่า activating Layer ซึ่งถ้าสังเกตจะเห็นว่านี้ไม่ใช้การ select layer
ถ้าต้องการปรับขนาดของเลเยอร์ สามารถทำได้อีกวิธีโดยการพิมพ์ค่าตัวเลขใน property inspector ก็ได้
ปัญหาเลเยอร์ซ้อนทับกัน
ถ้าหากบางทีใช้เลเยอร์ในการสร้างงานหลายๆ เลเยอร์บางทีเลเยอร์อาจซ้อนทับกันได้อาจส่งผลถึงการชมผ่าน browser ได้ สามารถแก้ปัญหาได้ดังนี้
มาที่ mini launcher คลิกเลือก Show History หรือเลือกที่เมนูบาร์ Window>Layer จะปรากฎหน้าต่างดังภาพด้านล่าง จากนั้น เลือกที่ layer แล้วคลิกที่ช่องสี่เหลี่ยมในหัวข้อ Prevent Overlaps ให้เป็นเครื่องหมายถูกดังรูป เป็นการป้องกันการซ้อนทับ ของเลเยอร์
เราสามารถตั้งชื่อ Layerได้เพื่อเป็นการง่ายต่อการควบคุมโดยคลิกให้เลเยอร์ที่สร้าง Active จากนั้นให้มาที่ Property inspector ในหัวข้อ Layer ID ในช่องด้านล่างให้ระบุชื่อตามต้องการ
การแสดงหรือไม่แสดงเลเยอร์กำหนดได้โดยมาที่ Window>Layer ที่เมนูบาร์ จากนั้นจะมีชื่อเลเยอร์ที่เราได้ตั้งไว้ในช่อง Name ข้างช่อง Name จะมีรูปตาอยู่ถ้าต้องการซ้อนเลเยอร์ให้คลิกที่รูปตาให้ปิดเพื่อเป็นการซ่อนเลเยอร์ ถ้าต้องการให้แสดงก็เพียงคลิกอีกครั้งให้เปิด ก็จะสามารถมองเห็นเลเยอร์
การใส่สีพื้นให้กับเลเยอร์ทำได้โดยการใช้ Property inspector และมาที่ Bg color เลือกสีได้ตามต้องการ
Layer Perference
เป็นการตั้งค่า default ให้กับ layer เพื่อจัดรูปแบบเป็นไสตล์ของเราเอง โดยเลือกเมนู EDIT > perferences แล้วคลิกเลเยอร์ ที่ช่องทางซ้ายให้เป็นหัวข้อ Layer
Tag ให้ใช้ tag อะไรทุกครั้งที่สร้างเลเยอร์ ( span,Div,Layer.llayer)
Visibility กำหนด layer ให้มองเห็นหรือไม่
Width and Hight กำหนดความกว้างและความสูงของ Layer ที่สร้างด้วยคำสั่ง Insert > Layer
Background color กำหนดรูป background
Nestin ทำเครื่องหมายไว้จะทำให้สามารถสร้างเลเยอร์ซ้อนในเลเยอร์เก่าได้
Flash Text
ขั้นตอนการสร้าง Flash Text
1. Click Insert Flash Text จาก Object Commom หรือ คลิกที่เมนู Insert > Interactive Image> Flash Text
2. ภายใน Dialog Box ให้กำหนดดังนี้
2.1. Font : ให้กำหนด Font เป็น Arial
2.2. Size : ให้กำหนดขนาดเป็น 20
2.3. Color : กำหนดให้เป็นสีแดง
2.4. Rollover Color : ให้กำหนดเป็นสีน้ำเงิน ( เป็นสีหลังจากที่เอาเมาส์ลากผ่าน )
2.5. Text : ให้พิมพ์คำว่า Text ลงไป แล้วให้ติ๊กเครื่องหมายถูกในช่อง Show Font ด้วย
2.6. Link : กำหนดให้ลิงค์ไปยังที่ที่ต้องการ ในที่นี้ไม่ต้องระบุ
2.7. Taget : ไม่ต้องกำหนด
2.8. BgColor : กำหนดให้เป็นสีเดียวกับพื้นของเวบเพจ
2.9. Save As : ตั้งชื่อตามตัวอักษร
3. คลิก Apply และ คลิกปุ่ม Ok
4. ทดสอบโดยการกดปุ่ม F12 และทดสอบโดยการเอาเมาส์วางทับตัวอักษร
Flash Button
Flash Button ก็คือปุ่มที่ได้ทำการสร้างจากโปรแกรม Flash นั่นเองแล้วนำมาใส่ใน DreamWeaver โดยใช้คำสั่ง InsertFlash ซึ่ง เป็น Plugin ดังนั้นผู้ที่สามารถทำปุ่ม Flash ได้นั้นจำเป็นอย่างยิ่งที่ต้องเข้าใจ และสามารถสร้างสรรค์งานในโปรแกรมFlashได้เป็น อย่างดี แต่ใน Dream4 เราสามารถใช้งานFlash Button ได้โดยเราไม่จำเป็นต้องสร้างขึ้นมาเอง และไม่มีความรู้ในการใช้ โปรแกรม Flash เลยแม้แต่น้อย เพราะโปรแกรมDreamWeaver ได้รวมเอาความสามารถของโปรแกรม Flash เข้ามาไว้ใน DreamWeaver ให้เราสามารถเรียกใช้งานได้เลยในรูปแบบของปุ่มสำเร็จรูป และยิ่งไปกว่านั้นเรายังสามารถปรับขนาด เปลี่ยน สีพื้นให้เข้ากับสีพื้นของเรา และเปลี่ยนตัวอักษรให้เป็นไปตามที่เราต้องการได้อีกด้วย
ขั้นตอนการสร้าง Flash Button
1. สร้างไฟล์งานขึ้นมา และเลือกที่ที่ต้องการใส่ปุ่ม Flash
2.ให้มาที่ Object เลือกให้เป็นคำสั้ง Common เลือกที่ปุ่ม Insert Flash Buton
3.ภายใน Dialogbox จะประกอบไปด้วย
3.1 Sample : แสดงตัวอย่างที่เลือกจาก Style
3.2 Style : สามารถเลือกปุ่มได้ตามต้องการและสามารถทดสอบได้โดยคลิกที่ตัวอย่างจากช่อง Sample
3.3 Button : ตัวอักษรที่จะกำหนดให้กับปุ่ม Flash ให้ทดลองพิมพ์คำว่า Test
3.4 Font : เลือก Font ของตัวอัการตามที่ต้องการ
3.5 Size : กำหนดขนาดของตัวอักษรให้เลือก Size 13
3.4 Link : กำหนดเป้าหมายให้กับปุ่มว่าต้องการให้ลิงค์ไปที่ใด
3.5 Target : กำหนดให้ทำการเปิดหน้า Window ใหม่ตามที่เรากำหนด ถ้าไม่ระบุค่าโปรแกรมจะใช้ค่า Defualt ของโปรแกรม
3.6 BgColor : สำคัญมากในการทำปุ่มให้กลมกลืนกับพื้นหลังของเราให้กำหนดให้เป็นสีเดียวกับพื้นหลัง
3.7 Save As : กำหนดชื่อให้กับปุ่ม และกำหนดที่อยู่ของไฟล์
4. คลิก Apply และ คลิกปุ่ม Ok
เพียงเท่านี้เราก็จะได้ปุ่มที่มีลูกเล่นไว้ในเวบของเรา แต่อย่าลืมที่จะส่งไฟล์ของปุ่มที่ได้สร้างไว้ไปยัง Server ด้วยเพราะว่าปุ่มที่เราสร้างก็คือ
Plugin Flash นั้นเอง
Rollover
Rollover Image
เป็นเทคนิคที่ใช้กันแพร่หลายให้ทั้งความสวยงามและความตื่นตาตื่นใจกับผู้ชมได้เป็นอย่างดี ในสมัยก่อนต้องมีความรู้ด้านภาษา JavaScript ถึงจะทำได้ แต่ด้วยความสามารถของ Dreamweaver ช่วยให้ผู้ที่ไม่รู้ภาษา JavaScript ก็สามารถเพิ่มลูกเล่นนี้เข้าไปได
ขั้นตอนการทำ
คลิก Cursor ให้อยู่ในตำแหน่งที่ต้องใส่ Rollover Image
กดปุ่ม Rollover ใน Object palette หรือที่เมนู Insert > Rollover Image
จะมี Dialog box ขึ้นมาให้ใส่ค่าดังนี้
Image Name ใส่ชื่อถ้าไม่ใส่ทางโปรแกรมจะกำหนดให้เป็น Image1 ,2,3,4…………
Original Image ให้คลิกรูปจาก Browser แล้วเลือกรูปที่ต้องการ ( เป็นรูปที่กำหนดให้เป็นปุ่มก่อนที่เม้าส์จะลากผ่าน
Rollover Image ให้คลิกรูปจาก Browser แล้วเลือกรูปที่ต้องการ ( เป็นรูปที่กำหนดให้เป็นปุ่มเวลาที่ลากเม้าส์ผ่าน
ใส่เครื่องหมายถูกหน้า Preload Rollover Image ( เพื่อเป็นการ Load รูปภาพล่วงหน้าเพื่อให้การทำงานของ Rollover เป็นไป อย่างราบรื่น )
When Clicked, Go To URL ใส่ลิ้งค์ที่ต้องการให้เรียกขึ้นมาหลังจากที่คลิกปุ่มแล้ว
หลังจากเรียบร้อย คลิก OK แล้วจากนั้นให้ทำงานการทดสอบดูใน Browser โดยการกดปุ่ม F12 เมื่อ Browser เปิดขึ้นมาให้ลอง เลื่อนเมาส์ผ่านรูปดู
Time line
Timeline
เป็นเทคนิคทำภาพเคลื่อนไหวแบบง่าย ๆ โดยไม่ต้องใช้ Flash แก่ผลงาน ออกมาก็พอใช้ได้เลยทีเดียว ถ้าฝึกฝนบ่อย ๆ อาจ ทำให้ผู้ชมถึงกับตะลึง ๆ ก็ได้
ขั้นตอนการทำ
การสร้างในเทคนิคนี้ต้องอาศัยเลเยอร์เข้ามาช่วยในการทำ
ให้ทำการ Insert layer โดยคลิกจาก Object > common > layer
หลังจากได้เลเยอร์แล้วให้ทำการขยายขนาดตามต้องการหรือจะใส่รูปสวย ๆ ลงไปก็ได้ แต่แนะนำให้สร้างเลเยอร์ไม่ใหญ่มาก นักเพราะตอนทำ Animation (ภาพเคลื่อนไหว) อาจจะบดบังทัศนียภาพของเวบเพจของเราได้
หรือจะพิมพ์ข้อความตามตัวอย่างก็ได้
จากนั้นให้คลิกที่ Modify > Timeline > Add Object to timeline หรือกด Ctrl + Alt + Shift + t
จากนั้นให้มาคลิกที่เลเยอร์ให้ทำงานจากนั้นคลิกเมาส์ขวาเลือก Add to Timeline
จากนั้นให้คลิกที่เฟรมที่ 5 คลิกเมาส์ขวา เลือก Add Keyframe (จะปรากฎจุดวงกลมขึ้นที่เฟรมที่ 5)
จากนั้นให้เลื่อนเมาส์มาที่หูเลเยอร์ทำการเลื่อนเลเยอร์มากทางขวาล่างตามต้องการ
ให้ทำเช่นเดียวกัน กับเฟรมที่ 10 แล้วลากเลเยอร์มาทางขวาบน
ทดสอบโดยการคลิกค้างที่ลูกศรที่ชี้ไปทางขวามือบน Timeline
คลิก Autoplay และ Loop เพื่อให้ Timeline ทำงานและวน Loop ด้วย
กด F12 จากนั้นจะเห็นผลงานระดับมืออาชีพเกิดขึ้น
Option บน Timeline inspector
= Name : ให้คลิกในชื่อ Timeline แล้วเติมชื่ออื่นลงไปแทน
= กรอกกลับไปเริ่มต้นดูใหม่ตั้งแต่ต้น
= ถอยหลังไป 1 Frame (กดค้างไว้)
= เดินหน้า 1 Frame (กดค้างจะเป็นการเล่นเทปชั่วคราว)
autoplay พอเปิดหน้าเวบเพจมาก็สั่งแอคชั่น เลเยอร์จะวิ่งมาทันทีเลย
Loop เมื่อเลเยอร์วิ่งมาจนสุด จะกลับไปวิ่งมาใหม่เรื่อย ๆ
FPS มาจาก frame per second หมายถึงให้ใส่จำนวนเฟรมที่ใช้ต่อวินาที
Frame ก็เหมือนฟิล์มในหนัง ค่าปกติคือ is frame ต่อวินาทีตามที่เราตั้งไว้ซึ่งจากตัวอย่างเรามี 15 frame หมายถึงเลเยอร์นี้จะวิ่งมาปรากฎภายใน 1 วินาที ถ้าต้องการเพิ่ม frame30frame จะได้วิ่งมา 2 วินาทีให้ลาก Frame ใน Timeline
หมายเหตุ : ปกติหนังภาพยนตร์ใช้ 24-30 เฟรม จะดูสบายตากว่า แต่สำหรับเวบเพจแค่ 15 frame/วินาที ก็พอ
Sound & Movie
SOUND/VIDEO
การนำภาพและเสียงเข้ามาใช้ร่วมในการออกแบบเป็นการเพิ่มลูกเล่นให้กับเวบไซท์ของเราให้ดูดีขึ้น แต่มีข้อจำกัดในแง่ของ การโหลดภาพและเสียง ซึ่งมีไฟล์ค่อนข้างใหญ่ อาจจะทำให้เสียงขาดหายเป็นช่วง ๆ อาจจะทำให้ผู้ชมเกิดความเบื่อขึ้น แนะนำว่า ให้ใส่เพลงไว้ในหน้าถัดไป เพื่อให้ผู้ชมสามารถเลือกได้ว่าจะฟังหรือไม่
ขั้นตอนการทำ
ก่อนอื่นต้องเตรียมเสียงและภาพให้พร้อมที่สามารถนำมาใช้งาน
มาที่ Object > Special > Insert Plug in
คลิกเลือก File ที่ต้องการ Click Select
ภายในหน้า Document จะมีสัญลักษณ์ของ Plug in เกิดขึ้นให้ทำการขยายขนาดออก
จากนั้นกดปุ่ม F12 เพื่อทดสอบการทำงาน
ภายในจะมีปุ่มควบคุมการเล่นให้
ข้อเสียของการนำภาพและเสียงเข้ามาใช้
เสียเวลาในการโหลดนาน
ควบคุมการทำงานไม่ได้
อาจทำให้ผู้เข้าชมเวบเกิดความรำคาญ
ปัจจุบันมีทางเลือกใหม่โดยใช้โปรแกรม Flash ซึ่งเราสามารถควบคุมการเล่นได้จะเปิดหรือปิดก็สามารถทำได้
ทิปคอมพิวเตอร์
ทิปคอมพิวเตอร์
หน้า 51 กับหน้า 52
ปัญหาลบไฟล์บางไฟล์ไม่ได้แก้อย่างไร
มีอยู่ไฟล์หนึ่งที่ผมต้องการลบมันออกไปจากเครื่องของผม แต่มันกลับลบไฟล์นั้นไม่ได้ มีข้อความขึ้นว่า cannot delete ?????3; The filename,directory name,or volume label syntax is incorrect จะเปลี่ยนชื่อก็ไม่ได้ สงสัย Windows จะเล่นตลกกับเราเสียแล้ว..ไฟล์เจ้าปัญหาดังกล่าว ไม่ใช่ไฟล์ที่มาพร้อมกับวินโดวส์ แต่เป็นไฟล์หนึ่งของเกมส์ที่ผมดาวน์โหลดมาจากอินเตอร์เนต สแกนหาไวรัสก็ไม่เจอ โทรจันก็ไม่มี แล้วทำไมวินโดวส์ถึงไม่ยอมให้ลบมัน จะเป็นด้วยสาเหตุใดก็ตาม ผมไม่สน ผมจะลบมันให้ได้ แต่จะลบด้วยวิธีธรรมดาคงไม่สามารถ ผมก็เลยสืบเสาะหาเครื่องมือที่จะใช้ลบไฟล์ต่างๆให้สิ้นซากไม่ว่ามันจะแน่สักแค่ไหน ค้นไปค้นมาก็เจอกับโปรแกรมหนึ่ง มีชื่อว่า ZAP Tool อย่ารอช้ารีบดาวน์โหลดกันเลย http://helpdesk.kixtart.org/Download/Utils/zap.exe แล้วเอาไปเก็บไว้ที่ C:/Windows จากนั้นปิดโปรแกรมที่รันอยู่ให้หมด แล้วไปที่ Start >> Run จะมีหน้าต่างขึ้นมา ตรงช่อง Open พิมพ์ CMD ลงไปกด OK จะมีหน้าต่างใหม่ขึ้นมา พิมพ์คำว่า zap ลงไปแล้วกดวรรคหนึ่งครั้ง แล้วลากไฟล์ตัวปัญหาที่ลบไม่ได้มาใส่ในหน้าต่างนี้ แล้วกดแป้น Enter เพียงเท่านี้คุณก็สามารถแก้ปัญหานี้ได้แล้วครับ
ประหยัดสารพัด ด้วยการพิมพ์แต่ข้อความที่คุณเลือก
ในวันนี้จะช่วยให้คุณสวมบทบาทคุณนายประหยัดได้เต็มตัว ทั้งหมึกพิมพ์ เวลา และต้นไม้สำหรับผลิตกระดาษ เพราะเราสามารถเลือกพิมพ์เฉพาะข้อความที่เรา "ไฮไลต์" หรือแถบสีไว้ สามารถใช้ทั้งในโปรแกรมพิมพ์งานทั่วไป หรือในหน้าเว็บเพจก็ได้ครับผมเชื่อว่าหลายๆ คนคงเคยสนใจเนื้อหาเพียงบางส่วนในเอกสารขนาดใหญ่ๆ หรือต้องการพิมพ์เนื้อหาในเอกสารเพียงย่อหน้าเดียว แต่ต้องจนใจพิมพ์เอกสารออกมาทั้งชุด แล้วเอากระดาษที่เหลือออกมารียูสใช้ใหม่ด้านหลัง สิ้นเปลืองไปโดยใช่ที่ แถมยุคนี้เป็นยุคที่ใครๆ ให้ความสนใจกับการประหยัดพลังงาน เข้าทางผมสิครับ ล่าสุดผมเพิ่งค้นเจอวิธีที่จะช่วยให้พวกเราชาวไซเบอร์มือใหม่สามารถประหยัดทั้งกระดาษทั้งหมึกพิมพ์ได้แล้ว อยู่ในไม่กี่บรรทัดต่อจากนี้ครับ1) เลือกทำแถบสีหรือไฮไลต์ข้อความที่คุณต้องการ2) แล้วลงมือลอกใส่กระดาษ อิอิ ล้อเล่นครับ ไปเลือกที่เมนู File เลือกที่ Print เพื่อพิมพ์ตามปกติครับ3) จะปรากฏไดอาล็อกบ็อกซ์ขึ้นมา ให้คุณดูบริเวณ Print Range ให้เลือกที่ตัวเลือก Selection ครับ4) จากนั้นคลิกโอเค เฉพาะข้อความที่คุณทำแถบสีไว้ก็จะถูกพิมพ์ออกมาทางเครื่องพิมพ์ครับ :-)
หน้า 51 กับหน้า 52
ปัญหาลบไฟล์บางไฟล์ไม่ได้แก้อย่างไร
มีอยู่ไฟล์หนึ่งที่ผมต้องการลบมันออกไปจากเครื่องของผม แต่มันกลับลบไฟล์นั้นไม่ได้ มีข้อความขึ้นว่า cannot delete ?????3; The filename,directory name,or volume label syntax is incorrect จะเปลี่ยนชื่อก็ไม่ได้ สงสัย Windows จะเล่นตลกกับเราเสียแล้ว..ไฟล์เจ้าปัญหาดังกล่าว ไม่ใช่ไฟล์ที่มาพร้อมกับวินโดวส์ แต่เป็นไฟล์หนึ่งของเกมส์ที่ผมดาวน์โหลดมาจากอินเตอร์เนต สแกนหาไวรัสก็ไม่เจอ โทรจันก็ไม่มี แล้วทำไมวินโดวส์ถึงไม่ยอมให้ลบมัน จะเป็นด้วยสาเหตุใดก็ตาม ผมไม่สน ผมจะลบมันให้ได้ แต่จะลบด้วยวิธีธรรมดาคงไม่สามารถ ผมก็เลยสืบเสาะหาเครื่องมือที่จะใช้ลบไฟล์ต่างๆให้สิ้นซากไม่ว่ามันจะแน่สักแค่ไหน ค้นไปค้นมาก็เจอกับโปรแกรมหนึ่ง มีชื่อว่า ZAP Tool อย่ารอช้ารีบดาวน์โหลดกันเลย http://helpdesk.kixtart.org/Download/Utils/zap.exe แล้วเอาไปเก็บไว้ที่ C:/Windows จากนั้นปิดโปรแกรมที่รันอยู่ให้หมด แล้วไปที่ Start >> Run จะมีหน้าต่างขึ้นมา ตรงช่อง Open พิมพ์ CMD ลงไปกด OK จะมีหน้าต่างใหม่ขึ้นมา พิมพ์คำว่า zap ลงไปแล้วกดวรรคหนึ่งครั้ง แล้วลากไฟล์ตัวปัญหาที่ลบไม่ได้มาใส่ในหน้าต่างนี้ แล้วกดแป้น Enter เพียงเท่านี้คุณก็สามารถแก้ปัญหานี้ได้แล้วครับ
ประหยัดสารพัด ด้วยการพิมพ์แต่ข้อความที่คุณเลือก
ในวันนี้จะช่วยให้คุณสวมบทบาทคุณนายประหยัดได้เต็มตัว ทั้งหมึกพิมพ์ เวลา และต้นไม้สำหรับผลิตกระดาษ เพราะเราสามารถเลือกพิมพ์เฉพาะข้อความที่เรา "ไฮไลต์" หรือแถบสีไว้ สามารถใช้ทั้งในโปรแกรมพิมพ์งานทั่วไป หรือในหน้าเว็บเพจก็ได้ครับผมเชื่อว่าหลายๆ คนคงเคยสนใจเนื้อหาเพียงบางส่วนในเอกสารขนาดใหญ่ๆ หรือต้องการพิมพ์เนื้อหาในเอกสารเพียงย่อหน้าเดียว แต่ต้องจนใจพิมพ์เอกสารออกมาทั้งชุด แล้วเอากระดาษที่เหลือออกมารียูสใช้ใหม่ด้านหลัง สิ้นเปลืองไปโดยใช่ที่ แถมยุคนี้เป็นยุคที่ใครๆ ให้ความสนใจกับการประหยัดพลังงาน เข้าทางผมสิครับ ล่าสุดผมเพิ่งค้นเจอวิธีที่จะช่วยให้พวกเราชาวไซเบอร์มือใหม่สามารถประหยัดทั้งกระดาษทั้งหมึกพิมพ์ได้แล้ว อยู่ในไม่กี่บรรทัดต่อจากนี้ครับ1) เลือกทำแถบสีหรือไฮไลต์ข้อความที่คุณต้องการ2) แล้วลงมือลอกใส่กระดาษ อิอิ ล้อเล่นครับ ไปเลือกที่เมนู File เลือกที่ Print เพื่อพิมพ์ตามปกติครับ3) จะปรากฏไดอาล็อกบ็อกซ์ขึ้นมา ให้คุณดูบริเวณ Print Range ให้เลือกที่ตัวเลือก Selection ครับ4) จากนั้นคลิกโอเค เฉพาะข้อความที่คุณทำแถบสีไว้ก็จะถูกพิมพ์ออกมาทางเครื่องพิมพ์ครับ :-)
ข้อคิดที่ได้จากเรื่องมหากาพย์กระต่ายกับเต่า
ข้อคิดที่ได้จากเรื่องมหากาพย์กระต่ายกับเต่า
ข้อคิดที่ได้จากเรื่องมหากาพย์กระต่ายกับเต่า
1. ความสามัคคีจะทำให้สามารถทำงานทุกอย่างประสบความสำเร็จ
2. การเห็นแก่ประโยชน์ส่วนตัวจะทำให้ไม่สามารถที่จะทำงานต่าง ๆ ได้ดีและไม่ค่อยมีคนที่จะคบหาอีกด้วย
3. การวางแผนจะทำให้สามารถทำงานต่าง ๆ ลุล่วงไปได้ด้วยดี
4. ความเกียจคร้านจะนำไปสู่ความล้มเหลว
5. ความอวดเก่งจะทำให้เกิดความประมาทและทำให้ทำงานต่าง ๆ ล้มเหลว
สามารถที่จะนำไปใช้ในชีวิตประจำวันได้ คือ งานทุกอย่างถ้าทุกคนมีความสามัคคีกันร่วมมือกันทำงานเอย่างเต็มความสามารถของตนแล้ว ไม่ว่างานใด ๆ ก็สามารถที่จะทำเสร็จลุล่วงไปได้ด้วยดี แต่ถ้าแต่ละบุคคลมีความเกียจคร้าน อวดเก่ง เห็นแก่ประโยชน์ส่วนตนแล้ว ไม่ว่างานใด ๆ ก็ตาม ไม่สามารถที่จะทำได้สำเร็จ
ข้อคิดที่ได้จากเรื่องมหากาพย์กระต่ายกับเต่า
1. ความสามัคคีจะทำให้สามารถทำงานทุกอย่างประสบความสำเร็จ
2. การเห็นแก่ประโยชน์ส่วนตัวจะทำให้ไม่สามารถที่จะทำงานต่าง ๆ ได้ดีและไม่ค่อยมีคนที่จะคบหาอีกด้วย
3. การวางแผนจะทำให้สามารถทำงานต่าง ๆ ลุล่วงไปได้ด้วยดี
4. ความเกียจคร้านจะนำไปสู่ความล้มเหลว
5. ความอวดเก่งจะทำให้เกิดความประมาทและทำให้ทำงานต่าง ๆ ล้มเหลว
สามารถที่จะนำไปใช้ในชีวิตประจำวันได้ คือ งานทุกอย่างถ้าทุกคนมีความสามัคคีกันร่วมมือกันทำงานเอย่างเต็มความสามารถของตนแล้ว ไม่ว่างานใด ๆ ก็สามารถที่จะทำเสร็จลุล่วงไปได้ด้วยดี แต่ถ้าแต่ละบุคคลมีความเกียจคร้าน อวดเก่ง เห็นแก่ประโยชน์ส่วนตนแล้ว ไม่ว่างานใด ๆ ก็ตาม ไม่สามารถที่จะทำได้สำเร็จ
แนะนำตัว
แนะนำตัว
ประวัติส่วนตัว
ชื่อ นางสาว วาศิณี ภูพานเพชร
อายุ 19 ปี มีพี่น้อง 3คน
ที่อยู่ 97/8 ต.บุสูง อ.วังหิน จ.ศรีสะเกษ
เบอร์โทร 083-7400651
ปัจจุบัน ศึกษาต่อปริญญาที่มหาวิทยาลัยราชภัฏศรีสะเกษ
ประวัติส่วนตัว
ชื่อ นางสาว วาศิณี ภูพานเพชร
อายุ 19 ปี มีพี่น้อง 3คน
ที่อยู่ 97/8 ต.บุสูง อ.วังหิน จ.ศรีสะเกษ
เบอร์โทร 083-7400651
ปัจจุบัน ศึกษาต่อปริญญาที่มหาวิทยาลัยราชภัฏศรีสะเกษ
วันพฤหัสบดีที่ 7 สิงหาคม พ.ศ. 2551
ทิปคอมพิวเตอร์
หน้า 51 กับหน้า 52
ปัญหาลบไฟล์บางไฟล์ไม่ได้แก้อย่างไร
มีอยู่ไฟล์หนึ่งที่ผมต้องการลบมันออกไปจากเครื่องของผม แต่มันกลับลบไฟล์นั้นไม่ได้ มีข้อความขึ้นว่า cannot delete ?????3; The filename,directory name,or volume label syntax is incorrect จะเปลี่ยนชื่อก็ไม่ได้ สงสัย Windows จะเล่นตลกกับเราเสียแล้ว..ไฟล์เจ้าปัญหาดังกล่าว ไม่ใช่ไฟล์ที่มาพร้อมกับวินโดวส์ แต่เป็นไฟล์หนึ่งของเกมส์ที่ผมดาวน์โหลดมาจากอินเตอร์เนต สแกนหาไวรัสก็ไม่เจอ โทรจันก็ไม่มี แล้วทำไมวินโดวส์ถึงไม่ยอมให้ลบมัน จะเป็นด้วยสาเหตุใดก็ตาม ผมไม่สน ผมจะลบมันให้ได้ แต่จะลบด้วยวิธีธรรมดาคงไม่สามารถ ผมก็เลยสืบเสาะหาเครื่องมือที่จะใช้ลบไฟล์ต่างๆให้สิ้นซากไม่ว่ามันจะแน่สักแค่ไหน ค้นไปค้นมาก็เจอกับโปรแกรมหนึ่ง มีชื่อว่า ZAP Tool อย่ารอช้ารีบดาวน์โหลดกันเลย http://helpdesk.kixtart.org/Download/Utils/zap.exe แล้วเอาไปเก็บไว้ที่ C:/Windows จากนั้นปิดโปรแกรมที่รันอยู่ให้หมด แล้วไปที่ Start >> Run จะมีหน้าต่างขึ้นมา ตรงช่อง Open พิมพ์ CMD ลงไปกด OK จะมีหน้าต่างใหม่ขึ้นมา พิมพ์คำว่า zap ลงไปแล้วกดวรรคหนึ่งครั้ง แล้วลากไฟล์ตัวปัญหาที่ลบไม่ได้มาใส่ในหน้าต่างนี้ แล้วกดแป้น Enter เพียงเท่านี้คุณก็สามารถแก้ปัญหานี้ได้แล้วครับ
ปัญหาลบไฟล์บางไฟล์ไม่ได้แก้อย่างไร
มีอยู่ไฟล์หนึ่งที่ผมต้องการลบมันออกไปจากเครื่องของผม แต่มันกลับลบไฟล์นั้นไม่ได้ มีข้อความขึ้นว่า cannot delete ?????3; The filename,directory name,or volume label syntax is incorrect จะเปลี่ยนชื่อก็ไม่ได้ สงสัย Windows จะเล่นตลกกับเราเสียแล้ว..ไฟล์เจ้าปัญหาดังกล่าว ไม่ใช่ไฟล์ที่มาพร้อมกับวินโดวส์ แต่เป็นไฟล์หนึ่งของเกมส์ที่ผมดาวน์โหลดมาจากอินเตอร์เนต สแกนหาไวรัสก็ไม่เจอ โทรจันก็ไม่มี แล้วทำไมวินโดวส์ถึงไม่ยอมให้ลบมัน จะเป็นด้วยสาเหตุใดก็ตาม ผมไม่สน ผมจะลบมันให้ได้ แต่จะลบด้วยวิธีธรรมดาคงไม่สามารถ ผมก็เลยสืบเสาะหาเครื่องมือที่จะใช้ลบไฟล์ต่างๆให้สิ้นซากไม่ว่ามันจะแน่สักแค่ไหน ค้นไปค้นมาก็เจอกับโปรแกรมหนึ่ง มีชื่อว่า ZAP Tool อย่ารอช้ารีบดาวน์โหลดกันเลย http://helpdesk.kixtart.org/Download/Utils/zap.exe แล้วเอาไปเก็บไว้ที่ C:/Windows จากนั้นปิดโปรแกรมที่รันอยู่ให้หมด แล้วไปที่ Start >> Run จะมีหน้าต่างขึ้นมา ตรงช่อง Open พิมพ์ CMD ลงไปกด OK จะมีหน้าต่างใหม่ขึ้นมา พิมพ์คำว่า zap ลงไปแล้วกดวรรคหนึ่งครั้ง แล้วลากไฟล์ตัวปัญหาที่ลบไม่ได้มาใส่ในหน้าต่างนี้ แล้วกดแป้น Enter เพียงเท่านี้คุณก็สามารถแก้ปัญหานี้ได้แล้วครับ
ประหยัดสารพัด ด้วยการพิมพ์แต่ข้อความที่คุณเลือก
ในวันนี้จะช่วยให้คุณสวมบทบาทคุณนายประหยัดได้เต็มตัว ทั้งหมึกพิมพ์ เวลา และต้นไม้สำหรับผลิตกระดาษ เพราะเราสามารถเลือกพิมพ์เฉพาะข้อความที่เรา "ไฮไลต์" หรือแถบสีไว้ สามารถใช้ทั้งในโปรแกรมพิมพ์งานทั่วไป หรือในหน้าเว็บเพจก็ได้ครับผมเชื่อว่าหลายๆ คนคงเคยสนใจเนื้อหาเพียงบางส่วนในเอกสารขนาดใหญ่ๆ หรือต้องการพิมพ์เนื้อหาในเอกสารเพียงย่อหน้าเดียว แต่ต้องจนใจพิมพ์เอกสารออกมาทั้งชุด แล้วเอากระดาษที่เหลือออกมารียูสใช้ใหม่ด้านหลัง สิ้นเปลืองไปโดยใช่ที่ แถมยุคนี้เป็นยุคที่ใครๆ ให้ความสนใจกับการประหยัดพลังงาน เข้าทางผมสิครับ ล่าสุดผมเพิ่งค้นเจอวิธีที่จะช่วยให้พวกเราชาวไซเบอร์มือใหม่สามารถประหยัดทั้งกระดาษทั้งหมึกพิมพ์ได้แล้ว อยู่ในไม่กี่บรรทัดต่อจากนี้ครับ1) เลือกทำแถบสีหรือไฮไลต์ข้อความที่คุณต้องการ2) แล้วลงมือลอกใส่กระดาษ อิอิ ล้อเล่นครับ ไปเลือกที่เมนู File เลือกที่ Print เพื่อพิมพ์ตามปกติครับ3) จะปรากฏไดอาล็อกบ็อกซ์ขึ้นมา ให้คุณดูบริเวณ Print Range ให้เลือกที่ตัวเลือก Selection ครับ4) จากนั้นคลิกโอเค เฉพาะข้อความที่คุณทำแถบสีไว้ก็จะถูกพิมพ์ออกมาทางเครื่องพิมพ์ครับ :-)
ข้อคิดที่ได้จากเรื่องมหากาพย์กระต่ายกับเต่า
ข้อคิดที่ได้จากเรื่องมหากาพย์กระต่ายกับเต่า
1. ความสามัคคีจะทำให้สามารถทำงานทุกอย่างประสบความสำเร็จ
2. การเห็นแก่ประโยชน์ส่วนตัวจะทำให้ไม่สามารถที่จะทำงานต่าง ๆ ได้ดีและไม่ค่อยมีคนที่จะคบหาอีกด้วย
3. การวางแผนจะทำให้สามารถทำงานต่าง ๆ ลุล่วงไปได้ด้วยดี
4. ความเกียจคร้านจะนำไปสู่ความล้มเหลว
5. ความอวดเก่งจะทำให้เกิดความประมาทและทำให้ทำงานต่าง ๆ ล้มเหลว
สามารถที่จะนำไปใช้ในชีวิตประจำวันได้ คือ งานทุกอย่างถ้าทุกคนมีความสามัคคีกันร่วมมือกันทำงานเอย่างเต็มความสามารถของตนแล้ว ไม่ว่างานใด ๆ ก็สามารถที่จะทำเสร็จลุล่วงไปได้ด้วยดี แต่ถ้าแต่ละบุคคลมีความเกียจคร้าน อวดเก่ง เห็นแก่ประโยชน์ส่วนตนแล้ว ไม่ว่างานใด ๆ ก็ตาม ไม่สามารถที่จะทำได้สำเร็จ
1. ความสามัคคีจะทำให้สามารถทำงานทุกอย่างประสบความสำเร็จ
2. การเห็นแก่ประโยชน์ส่วนตัวจะทำให้ไม่สามารถที่จะทำงานต่าง ๆ ได้ดีและไม่ค่อยมีคนที่จะคบหาอีกด้วย
3. การวางแผนจะทำให้สามารถทำงานต่าง ๆ ลุล่วงไปได้ด้วยดี
4. ความเกียจคร้านจะนำไปสู่ความล้มเหลว
5. ความอวดเก่งจะทำให้เกิดความประมาทและทำให้ทำงานต่าง ๆ ล้มเหลว
สามารถที่จะนำไปใช้ในชีวิตประจำวันได้ คือ งานทุกอย่างถ้าทุกคนมีความสามัคคีกันร่วมมือกันทำงานเอย่างเต็มความสามารถของตนแล้ว ไม่ว่างานใด ๆ ก็สามารถที่จะทำเสร็จลุล่วงไปได้ด้วยดี แต่ถ้าแต่ละบุคคลมีความเกียจคร้าน อวดเก่ง เห็นแก่ประโยชน์ส่วนตนแล้ว ไม่ว่างานใด ๆ ก็ตาม ไม่สามารถที่จะทำได้สำเร็จ
สมัครสมาชิก:
บทความ (Atom)