สิ่งที่ได้เรียนรู้
วันนี้ได้เรียนรู้ความรู้ต่างๆดังนี้
การสร้าง Animation อย่างง่ายด้วย Image Ready
ถือว่าเป็นการสร้างภาพ Animation ที่ง่าย ขั้นตอนไม่ซับซ้อน เพียงแค่เราเปิดรูปที่ต้องการขึ้นมาแล้วก็กำหนดเวลาการเคลื่อนไหวของภาพ ซึ่งยิ่งเวลาน้อยเท่าไหร่ ภาพก็จะยิ่งเคลื่อนไหวเร็วมากเท่านั้น หลังจากปรับค่าตามที่ต้องการได้แล้ว ก็ทำการ Save รูปภาพด้วยการคลิกที่ File>Save optimized as แล้วเลือก Save เป็นนามสกุล (*.gif) ถือเป็นการทำภาพ Animation ที่เสร็จสมบูรณ์
เริ่มต้นสร้างเว็บด้วยโปรแกรม Macromedia Dreamweaver
การตั้งค่าไซต์
เป็นสิ่งที่แรกที่ควรจะทำเสมอก่อนที่จะสร้าง Dreamweaver
- เปิดโปรแกรม แล้วเลือกเมนู Site > Manage Site
- คลิกปุ่ม New > Site
- ระบุชื่อ Site ที่ต้องการ แล้วคลิกปุ่ม Next
- ระบุตำแหน่งที่ใช้เก็บไฟล์ + ระบุชื่อโฟลเดอร์ (ถ้ามีอยู่แล้วก็ไม่ต้อง) และคลิกปุ่ม Next
- พบกับการตั้งค่า Remote Server เลือก None เพราะเราต้องการสร้างเว็บไซต์ html แบบธรรมดา
- คลิกปุ่ม Next แล้วตามด้วย Done
- จะกลับมาสู่หน้า Mange Site แล้วคลิกปุ่ม Done
- คลิกเลือกเว็บเพจขึ้นมาสัก 1 เว็บ แล้วทำการบันทึก เลือกคำสั่ง Save As
- ไฟล์จะถูกบันทึกลงโฟลเดอร์ที่เราตั้งค่า Site ไว้ รวมถึงรูปภาพต่างๆที่เราใช้ก็จะถูกบันทึกลงโฟลเดอร์นี้เช่นกัน
การตั้งค่าภาษา
ก่อนที่จะทำเว็บไซต์ทุกครั้งต้องมีการตั้งค่าภาษาก่อน เพราะมิเช่นนั้นจะแสดงภาษาไทยที่ไม่สมบูรณ์ และไม่สามารถกลับมาแก้ไขได้อีก ปัจจุบันเปลี่ยนจากการใช้ระบบ Window 874 ใช้ระบบ Unicode และ Utf 8 เพื่อความเป็นสากล
หลังจากมีไฟล์เว็บเพจแล้ว ให้คลิกเลือกคำสั่ง Page Properties (อยู่ด้านล่างตรงกลางของหน้ากระดาษ) เลือก Title/Encoding หลังจากนั้นตรง Encoding เลือก (Unicode UTF-8) คลิกปุ่ม OK ถือว่าเสร็จสิ้นการตั้งค่าเป็นภาษาไทยเรียบร้อย
การตั้งค่าเว็บเพจเบื้องต้น
การตั้งค่าเว็บเพจในขั้นแรกให้คลิกเลือกปุ่ม Page Properties จะมีคำสั่งมากมายปรากฏอยู่ที่กรอบของคำสั่ง Category โดยแต่ละคำสั่งมีรายละเอียดดังนี้
- Appearance การกำหนดค่าแสดงผลทั่วไปของเว็บเพจ เช่น กำหนดชุดฟอนต์ ขนาด สีของตัวอักษร สีของพื้นหลัง ภาพของพื้นหลัง เป็นต้น
- Links เป็นการกำหนดลักษณะการเชื่อมโยงภายในเว็บเพจ เช่น สีตัวอักษร
- Headings เป็นการกำหนดรูปแบบหัวข้อเอาไว้ใช้ในเว็บเพจ ใช้ Tag และตามด้วยรูปแบบที่จะใช้ได้เลย
- Title/Encoding เป็นการตั้งชื่อให้หัวของเว็บเพจที่อยู่บนเว็บ Browser
- Tracing Image เป็นการนำเอาภาพมาวางบนหน้าเว็บไซต์ เพื่อใช้เป็นแบบในการออก แบบ ภาพนี้จะเปรียบเสมือนแผ่นใส คือ เมื่อนำไปเปิดจริงแล้วภาพนี้จะไม่ปรากฏบนเว็บของเรา เมื่อปรับค่าทั้งหมดที่ต้องการแล้วให้กดปุ่ม OK เพื่อยืนยัน หากต้องการเปลี่ยนหัวของเว็บเพจก็สามารถเปลี่ยนได้ที่ด้านบนตรงคำว่า Title
การสร้างตาราง
ในการสร้างเว็บเพจ เราจะจัดวางวัตถุในรูปแบบเรียงต่อกันเท่านั้น จึงต้องมีการใช้ตารางเข้ามาช่วยในการจัดวางวัตถุต่างๆ วิธีการสร้างตาราง คือ Insert >Table หรือ คลิก Icon Table ในหน้าต่าง Common หลังจากนั้นปรับค่าตารางตามขนาดของเว็บเพจเรา
TIPS :
- ถ้าเลือกหน่วยเป็น Pixel ตารางจะมีความกว้างคงที่ตามที่เราตั้งไว้ แต่ถ้าเลือกเป็นเปอร์เซนต์ ตารางจะเปลี่ยน แปลงตามขนาดของหน้าจอ เช่น 100 % คือเต็มหน้าจอ
- กำหนดเส้นขอบ เลือก 0 เพื่อจะได้ไม่เห็นเส้นขอบในตอนแสดงผล
- หลังจากนั้นย่อตารางตาม Pattern ที่เราต้องการให้หน้าเว็บเราเป็น หลังจากนั้นปรับ Align ตามที่ต้องการ เช่น Center คือ ตรงกลาง
การใช้ตารางช่วยในการจัดองค์ประกอบของเว็บเพจ
นำโฟลเดอร์รูปภาพของเรามาไว้ในโฟลเดอร์ที่เราตั้งค่า Site ไว้ แล้วปฏิบัติตามขั้นตอนดังนี้
1. เลือก Insert > Image
2. ลากรูปที่เราต้องการใช้ลงไปในส่วนต่างๆ เช่น รูป Header ก็นำมาวางไว้ด้านบนสุด หลังจากนั้นจะปรากฎกล่องเพื่อใส่ข้อความเกี่ยวกับรูปนั้น แล้วกด OK
TIPS : หากภาพมีขนาดใหญ่กว่าตาราง เราสามารถทำให้ตารางรวมกันได้ โดยกด Shift คลิกขวาเลือก Table>Merge cell และหากตารางยังมีค่าไม่เท่ากับภาพ เราสามารถเปลี่ยนค่าตารางได้โดยเลือกที่ตัวเลขด้านล่างสุด เลือกคำสั่ง Make All Widths Consistent
การสร้าง Template
การทำหน้าให้เป็น Template มีประโยชน์ตรงที่เราจะได้ป้องกันการแก้ไขในส่วนที่เราไม่ต้องการแก้ไข ขั้นตอนการทำ Template มีดังนี้
1. เลือกหน้าที่เราต้องการให้เป็น Template แล้วกด File>Save as Template แล้วตั้งชื่อ Template แล้วกด Save
2. ให้คลิกที่ช่องตารางด้านขวา Insert ตารางขึ้นมาขนาด 1*1 แล้วเลือกที่ Vert. ให้เป็น Top เพื่อให้ตารางอยู่ด้านบน
3. หลังจากนั้นคลิกขวาที่ตาราง เลือกคำสั่ง Template Objects > Editable Region ตั้งชื่อพื้นที่แล้วกด Ok
4. บันทึกเว็บเพจให้เรียบร้อย (Save as) แล้วเปิดหน้าใหม่ขึ้นมาเพื่อทดสอบเว็บเพจ (New)
5. นำ Template ที่สร้างไว้มาใช้ เลือกเมนู Modify > Template > Apply template to page ให้เลือก template ที่ต้องการแล้วกด Select
6. Template ที่เปิดมาใหม่นี้จะแก้ไขได้เฉพาะพื้นที่บริเวณ Editable Region เท่านั้น
7. หลังจากนั้นเมื่อแก้ไขเสร็จแล้ว ควรจะบันทึกทุกครั้ง
การสร้าง Rollover Button
เปิดไฟล์ Index.html แล้วเลือกพื้นที่ที่จะใส่วัตถุ ปรับตำแหน่งการจัดวางด้วยคำสั่ง Align หลังจากนั้นคลิกที่ Icon รูปภาพ (บริเวณที่มีเครื่องหมายชี้ลง) แล้วเลือกคำสั่ง Rollover Image หลังจากนั้นเลือกรูปที่จะปรากฏบนหน้าเว็บเพจ (original image) และรูปที่จะปรากฏขณะเอาเมาส์ไปชื้ (Rollover image) และระบุข้อความที่จะปรากฏขณะเอาเมาส์ไปชี้ หลังจากนั้นกด OK และบันทึกไฟล์ หลังจากนั้นกด Preview จะปรากฏผลงาน
การแทรก Javascript
การแทรก Javascript นั้นไม่ยากมาก เพียงแต่เราไปหา Code ตามเว็บไซต์ต่างๆ เช่น Sanook.com แล้ว Copy Code มา หลังจากนั้นมาที่หน้าต่างโปรแกรม Dreamweaver แล้วกดที่ปุ่ม Code จะปรากฏ Code html ขึ้นมาเรานำ Code ที่เรา Copy มาไปวางไว้หลังคำสั่ง
สิ่งที่ต้องค้นคว้าเพิ่มเติม
1. หา Java script สวยๆเหมาะกับงานเว็บของตัวเองจากเว็บไซต์ต่างๆ
2. หาเทคนิค Dreamweaver ใหม่ๆมาแนะนำเพื่อนๆ
3. ทบทวนความรู้ใหม่ทั้งหมด เพื่อเตรียมทำเว็บของตัวเอง
ข้อเสนอแนะ
เนื้อหาหนักมากค่ะอาจารย์ อยากให้อาจารย์มีการเบรคให้สักหน่อยค่ะ
สมัครสมาชิก:
ส่งความคิดเห็น (Atom)
ไม่มีความคิดเห็น:
แสดงความคิดเห็น