Learning Log Week 05

Learning Log Week 05 (30/11/09)

สิ่งที่ได้เรียนรู้

การสร้าง Animation อย่างง่าย โดย Image Ready

1.เลือกเมนู File > Import > Folder as Frames

2.Browse For Folder เลือก Folder ที่เก็บภาพที่ต้องการทำแอนิเมชัน

3.สามารถปรับเวลาในการแสดงแต่ละภาพได้ตามต้องการ ถ้าต้องการเลือกปรับภาพหลายภาพพร้อมกันให้กดปุ่ม Shift สำหรับเลือกภาพแบบต่อเนื่อง หรือ Ctrl สำหรับเลือกภาพแบบไม่ต่อเนื่อง และสามารถปรับว่าต้องการให้วนรอบซ้ำหรือไม่ที่ Once หรือ Forever

4.จากนั้นทดสอบการเคลื่อนไหวของภาพ

5.บันทึกโดยใช้คำสั่ง Save Optimized As เลือกประเภทของไฟล์เป็น Image Only (.gif)

Macromedia Dreamweaver

Lesson 1 การตั้งค่า Site

เป็นสิ่งแรกที่ควรทำก่อนสร้างเว็บไซต์ เพื่อให้ไฟล์ที่สร้างอยู่ในที่เดียวกัน และทำการเชื่อมโยงกับไฟล์ต่างๆ

1.Site > Manage Sites > New Site ระบุชื่อไซต์ที่ต้องการ คลิก Next ตั้งค่า No… เพราะเป็นเว็บไซต์แบบ html ธรรมดา คลิก Next และระบุตำแหน่งที่เก็บเว็บไซต์ คลิก Next เลือก None คลิก Next และ Done

2.จากนั้นที่หน้า Manage Sites เลือกไฟล์ที่สร้างไว้ และคลิก Done

3.ทดลองสร้างเว็บเพจ จากนั้นลองกดบันทึกดู File > Save as จะเห็นว่าไฟล์จะถูกบันทึกไว้ที่โฟลเดอร์ที่เราตั้งไว้ในตอนแรก

Lesson 2 การตั้งค่าภาษา

เพื่อให้เว็บไซต์แสดงภาษาได้สมบูรณ์ ปัจจุบันเปลี่ยนจาก Windows-874 ไปเป็น Unicode (UTF-8) เพื่อให้เป็นมาตรฐานสากล วิธีการตั้งค่าภาษาสามารถทำได้ ดังนี้

1.Page Properties เลือก Title/Encoding

2.ที่ช่อง Encoding ให้เลือกเป็น Unicode (UTF-8) และคลิก OK

Lesson 3 การตั้งค่าเว็บเพจเบื้องต้น

Page Properties

- Appearance : กำหนดค่าแสดงผลทั่วไปของเว็บเพจ เช่น ฟอนต์ มาตรฐานที่ใช้ ขนาด สีของสีตัวอักษร/ภาพ พื้นหลัง ภาพพื้นหลัง รูปแบบการเรียงภาพพื้นหลัง

- Link : กำหนดตัวลักษณะเชื่อมโยงภายในเว็บเพจ เช่น ตัวอักษร สี

- Headings : กำหนดรูปแบบหัวข้อ

- Title/Encoding : ตั้งชื่อหัวเว็บเพจที่อยู่บนเว็บบราวเซอร์ และภาษา

- Tracing Image : การนำภาพมาวางบนหน้าเว็บไซต์ เพื่อใช้เป็นแบบในการออกแบบ โดยภาพนั้นจะเหมือนแผ่นใส ไม่ปรากฏอยู่จริงบนเว็บบราวเซอร์

** สามารถเปลี่ยน Title ได้ที่หน้า Common

Lesson 4 การสร้างตาราง

ช่วยในการจัดวางองค์ประกอบต่างๆ บนหน้าเว็บเพจ

1.Insert > Table หรือ คลิกเครื่องมือ Table ในแถบ Common กำหนดค่าตารางที่ต้องการ

ในที่นี้ให้สร้างตาราง 2 แถว 2 คอลัมน์ ไม่ให้แสดงเส้นตารางให้ปรับ Border เป็น 0

- pixels ความกว้างคงที่ตามค่าที่ระบุ เช่น 700 หรือ 950

- percent ความกว้างเปลี่ยนตามขนาดหน้าจอ

2.จากนั้นแทรกตาราง โดยคลิกที่ตารางช่องล่างซ้าย กำหนดเป็น 1 คอลัมน์ 6 แถว เพื่อทำเป็นแถบเมนู ปรับให้ได้ขนาดที่เหมาะสมตามต้องการ

3.จากนั้นที่แถบ Align เลือกเป็น Center เพื่อจัดตารางให้อยู่ตรงกลาง

Lesson 5 การใช้ตารางช่วยจัดองค์ประกอบของเว็บเพจ

1.ใส่ภาพลงใน Folder ที่ได้ตั้งค่าไว้

2.เลือกเมนู Insert > Image หรือคลิกที่แถบเครื่องมือ Image ในแถบ Common

3.ตั้งค่า Alternative Text ให้ตรงกับภาพที่ใส่

** คลิกขวา เลือก Table > Merge Cells

** Make all Widths Consistent เพื่อทำให้ตารางมีขนาดเท่ากับภาพ

** กด <> เพิ่มช่อง Rows หากตารางไม่พอ

** เลือก Align : Center เพื่อปรับให้อยู่ตรงกลาง

** สามารถใส่สี BG ได้ที่แถบ Properties ด้านล่าง หรือใส่เป็นภาพพื้นหลังก็ได้

Lesson 6 การสร้าง Template

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

1.บันทึกเว็บเพจให้เป็น Template ที่ File > Save As Template ตั้งชื่อที่ต้องการ กด Save และกด Yes

2.คลิกเลือกช่องตารางทางด้านขวา Vertical : Top จากนั้นสร้างตารางขนาด 1x1 ลงไป

3.Insert > Template Objects > Editable Region (เป็นพื้นที่ที่สามารถแก้ไขได้) ตั้งชื่อพื้นที่ และกด OK จากนั้นทำการ Save เว็บเพจ

4.วิธีการใช้ สร้างเว็บเพจขึ้นมาใหม่ คลิกที่ File > New

5.เลือก Modify > Templates > Apply Template to Page เลือกTemplate ที่ต้องการ และคลิก Select

Lesson 7 ตัวอย่างเทคนิคการสร้าง Rollover Button

1.เปิดไฟล์ index.html ที่เคยสร้างไว้ เลือกพื้นที่สำหรับใส่วัตถุ ปรับตำแหน่งการจัดวางเป็นกึ่งกลางด้วยคำสั่ง Align

2.คลิกที่ Icon รูปภาพ เลือก Rollover Image ทำการกำหนดค่าต่างๆ เช่น Original Image, Rollover Image, Alternate Text และ link

3.บันทึกไฟล์ และกด Preview

การใส่ Link

ที่หน้า Template คลิกที่ภาพที่เราต้องการลิงค์

Link > Point to File จะปรากฏเป็นลูกศรลากไปยังหน้าเว็บเพจที่เราต้องการลิงค์

Save > Preview

การแทรก Javascript เพื่อช่วยเพิ่มลูกเล่นให้กับเว็บไซต์

Copy Code ที่ต้องการ จากนั้นไปที่โปรแกรม Dreamweaver กดปุ่ม Code นำ script ที่ copy มาวางไว้หลังคำสั่ง title หรือ head

สิ่งที่จะค้นคว้าเพิ่มเติม/ต้องเตรียมมาครั้งหน้า

- เตรียม present WebQuest งานคู่ 70% ในคาบเรียนถัดไป

- ศึกษาและทบทวนการใช้งานโปรแกรม Dreamweaver ให้เข้าใจมากยิ่งขึ้น

- ศึกษาเทคนิคต่างๆเพิ่มเติม ที่จะนำมาใช้พัฒนาเว็บเควสท์ของตัวเอง และหา Web Add-on Tools มาแนะนำเพื่อนๆ

ข้อคิดเห็นอื่นๆ

วันนี้เรียนภาคปฏิบัติในส่วนของโปรแกรม Dreamweaver ศึกษาด้วยตนเองก็เข้าใจดีค่ะ แต่ค่อนข้างสับสนในช่วงที่ปฏิบัติพร้อมกัน ตามไม่ทันบ้าง แต่อาจารย์มาสรุปในช่วงท้าย ทำให้เข้าใจมากขึ้นค่ะ วันนี้เรียนเยอะมากเลยค่ะอาจารย์ และโปรแกรมค่อนข้างยากด้วย ไม่เคยใช้มาก่อน แต่ก็คิดว่าน่าจะพอทำได้ค่ะ