* Learning Log Week 05 *
(30 พฤศจิกายน 2552)
สิ่งที่ได้เรียนรู้
หัวข้อ การสร้าง Animation อย่างง่ายโดย Image Ready ในที่นี้ใช้ VER.CS2
· เปิดโปรแกรม เลือกเมนู File เลือกคำสั่ง Import จากนั้นเลือก Folder as Frames
· ที่คำสั่ง Browse For Folder เลือก Folder ที่เก็บภาพที่ต้องการทำแอนิเมชันเอาไว้ กด OK
ภาพทั้งหมดจะปรากฏ สามารถปรับเวลาในการแสดงผลได้
· ถ้าต้องการเลือกปรับภาพหลายภาพพร้อมกันให้กดปุ่ม Shift สำหรับเลือกภาพแบบต่อเนื่อง หรือกด Ctrl สำหรับเลือกภาพแบบไม่ต่อเนื่อง จากนั้นลองตรวจสอบ
· จากนั้นก็บันทึกภาพ โดยไปที่เมนู File เลือกคำสั่ง Save optimized As….
· ประเภทของไฟล์ เลือก .GIF คลิกปุ่ม Save และทดลองเล่นไฟล์
Lesson 1 ขั้นตอนการตั้งค่าไซต์
· เปิดโปรแกรม Dreamweaver Ver.8 เลือกเมนู Site แล้วเลือก Manage Sites…
· จากนั้นคลิกปุ่ม New เลือกคำสั่ง Site จากนั้นระบุชื่อไซต์ที่ต้องการ แล้วคลิกปุ่ม Next แล้วเลือก No,I do not…… เพราะเราต้องการสร้างเว็บไซต์ธรรมดา คลิกปุ่ม Next
· หน้าต่อมา ให้ระบุตำแหน่งที่ใช้ในการเก็บไฟล์ คลิกปุ่ม Next ตั้งค่า Remote Server ในที่นี้ให้เลือก None เพราะเราต้องการสร้างเว็บ HTML ธรรมดา คลิกปุ่ม Next และ Done ตามลำดับ
· จากนั้นจะกลับมาหน้า Manage Sites.. ให้เลือกที่ไฟล์ที่สร้าง แล้วคลิกปุ่ม Done
· ให้ลองสร้างเว็บเพจสักเว็บ แล้วลองบันทึกดู โดยไปที่ File ….Save as
· จะเห็นว่าไฟล์ที่ทำ จะถูกบันทึกไว้ที่โฟลเดอร์ที่เราตั้งไว้แต่ตอนแรก
Lesson 2 ขั้นตอนการตั้งค่าภาษา
· เลือกปุ่ม Page Properties ทางด้านล่าง ในช่อง Category เลือก Title/Encoding
· ในช่อง Encoding เลือกเป็น Unicode (UTF-8) จากนั้นคลิกปุ่ม OK
Lesson 3 การตั้งค่าเว็บเพจเบื้องต้น
· เลือกปุ่ม Page Properties ทางด้านล่าง ในช่อง Category
· Appearance : ค่าแสดงผลทั่วไปของเว็ป
· Link : ตัวเชื่องโยงในเว็บเพจ เช่น ตัวอักษร สี
· Heading : กำหนดรูปแบบหัวข้อเอาไว้ใช้ในเว็บเพจ
· Title/Encoding : เป็นการตั้งชื่อให้หัวของเว็บเพจ และการตั้งค่าภาษา
· Tracing image : เป็นการนำเอาภาพมาวางในหน้าเว็บไซส์ เป็นเหมือนแผ่นใส
· ปรับค่าหมดแล้ว สามารถเปลี่ยนหัวของเว็บเพจได้ ที่ด้านบนของหน้าต่างการทำงาน
Lesson 4 การสร้างตาราง
· เลือกเมนู Insert แล้วเลือกคำสั่ง Table สร้างตาราง (ในที่นี้ให้สร้าง 2 แถวและ 2 คอลัมน์) ปรับขนาดตามต้องการ
· ควรเลือกเป็น ไฟล์ Pixels เพื่อจะได้คงที่เสมอตามค่าที่ระบุไว้ Border หรือเส้นขอบตาราง เลือก 0 แล้วกด OK
· คลิกช่องตารางด้านล่างซ้าย แทรกตาราง 1 คอลัมน์ 6 แถว เพื่อจัดรูปแบบเมนู
· ย่อตารางให้เล็กลงทั้งย่อยและหลัก จากนั้นด้านล่างคลิกแถบ Align เลือก Center
Lesson 5 การใช้ตารางช่วยจัดองค์ประกอบของเว็บเพจ
· ให้นำภาพที่ต้องการไปใส่ใน Folder อันทำ Site จากนั้นเลือกเมนู Insert แล้วเลือกคำสั่ง Image
· จะขึ้นหน้าต่าง ระบุให้ใส่ข้อความลำดับภาพ ตั้งค่า กด OK จะเห็นว่าภาพจะขนาดใหญ่กว่าตาราง
· ฉะนั้นจึงสามารถรวมตารางสองอันบนได้ โดยกด Shift จากนั้นคลิกขวา เลือกเมนู Table เลือกคำสั่ง Merge Cells จะเห็นว่า ตารางกับภาพไม่ตรงกัน ไม่เท่ากัน
· ฉะนั้นให้ปรับ โดยเลือก Make all Widths Consistent เพื่อทำให้ตารางมีขนาดเท่ากับภาพได้
· จากนั้นก็ลากภาพมาใส่ในช่องที่เราตั้งไว้ ถ้าตารางไม่พอให้แก้ที่แถบ Table ด้านล่าง เพื่อเพิ่มแถว
· สามารถปรับสีในช่องได้ โดยเลือกช่องตารางด้านขวาที่ว่าง ปรับ BG ที่คำสั่งด้านล่าง หรืออาจจะใส่ภาพเป็นพื้นหลังได้อีกด้วย ที่คำสั่งหลังช่อง BG ครับ
Lesson 6 การสร้าง Template เพื่อให้หน้าเว็บไซต์เหมือนกัน
· บันทึกเว็บเพจ เป็น Template โดยเลือกเมนู File คำสั่ง Save asTemplate ตั้งชื่อ Template ช่องล่างสุด แล้วกด Save จากนั้นกด YES
· จากนั้นคลิกเลือกช่องตารางทางด้านขวา เลือก TOP ที่ช่อง Vertical.. สร้างตารางขนาด 1x1 ลงไป ที่ช่องตารางด้านขวา
· จากนั้นเลือกเมนู Insert เลือกคำสั่ง Template Objects แล้วเลือก Editable Region เพื่อให้ตารางที่นำมาสามารถปรับแก้ไขได้ ตั้งชื่อพื้นที่ และคลิกปุ่ม OK บันทึก Webpage โดยไปที่ Save as
· จากนั้นไปที่คำสั่ง New เลือกชนิดของ เว็บเพจแล้วกดปุ่ม Create
· จากนั้นเลือกไปที่เมนู Modify เลือก Templates และเลือก Apply Template to Page.. เลือก Template ที่ต้องการแล้วกดปุ่ม Select
· Template ที่สร้างจะปรากฏขึ้น และจะสามารถแก้ไขได้เฉพาะส่วย ที่มี Edit region เท่านั้น ซึ่งจะส่งผลให้เปลี่ยนแปลงทั้งหมด โดยการ Save ปรับแก้ไข ทำให้สามารถจัดการเว็บไซต์ได้สะดวกขึ้น
Lesson 7 ตัวอย่างเทคนิคการสร้าง Rollover Button
· เปิดไฟล์ Index.html ที่ทำไว้ เลือกพื้นที่สำหรับใส่วัตถุ แล้วปรับตำแหน่งการจัดวางเป็นจัดกึ่งกลาง
· คลิกที่ลูกศร ด้านข้าง เครื่องมือรูปภาพ เลือกคำสั่ง Rollorver image
· จากนั้น ระบุภาพที่จะแสดงเริ่มต้น ระบุภาพที่จะแสดงเมื่อเมาส์ไปอยู่ด้านบน ระบุข้อความกำกับภาพ และระบุ URL ที่จะให้เชื่อมโยงไปเมื่อคลิกเมาส์
· ลองพรีวิว เว็บเพจเพื่อทดสอบผลลัพท์ที่ได้ โดยต้องบันทึกไฟล์ก่อนที่จะทำการพรีวิว คลิก YES
นอกจากนี้ยังได้เรียนการทำลิ้งค์ต่างๆ เพิ่มเติม เพื่อให้งานมีความน่าสนใจ และนำไปใช้กับการทำเว็บเควสต่างได้อีกด้วย
สิ่งที่จะต้องค้นคว้าเพิ่มเติม/ต้องเตรียมมาครั้งหน้า
เตรียมการนำเสนอและอภิปรายขั้นตอนการทำ Project (ทั้งภาคทฤษฎีและปฏิบัติ) และ project ต้องเสร็จประมาณ 70% มีหน้าหลักและหน้าย่อยครบทุกหน้า
เรื่องของโปรแกรม Dreamweaver ต้องศึกษาเพิ่มเติม เพื่อจะได้เข้าใจการใช้งานมากยิ่งขึ้น รวมทั้งต้องศึกษาเทคนิคต่างๆ เพี่อให้งานของเรามีอะไรที่แปลกใหม่และน่าสนใจเพิ่มขึ้นด้วย
ทบทวนบทเรียนทั้งหมด เพื่อเตรียมตัวสำหรับการสอบ Midterm Examination
ข้อคิดเห็นอื่นๆ
ผมอยากให้เน้นภาคปฏิบัติมากกว่าภาคทฤษฏีครับ เรียนแบบออนไลน์ แล้วสมาธิ ไม่ค่อยมี งงกับขั้นตอนบางขั้นตอนครับ
อยากให้มีงานหรือกิจกรรมในห้องน้อยลงกว่านี้หน่อยครับ เพราะจำได้ไม่หมด สับสนมากครับ
เรื่องของการส่งงานออกแบบที่เป็นเพาเวอร์พอย งานคู่อะครับ ที่ผมส่งช้าไป 2 ชั่วโมง ไม่อยากให้หักคะแนนนะครับอาจารย์ เนื่องจากเกิดข้อผิดพลาดทางเทคนิคเล็กน้อยนะครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น