Learning Log Week 06

Learning Log Week 06 (14/12/09)

สิ่งที่ได้เรียนรู้
ได้เห็นงาน WebQuest ของเพื่อนๆแต่ละกลุ่ม และได้ฟังคำแนะนำจากอาจารย์และพี่ TA ถึงสิ่งที่ควรปรับปรุงแก้ไขในงาน WebQuest ของตนเอง เพื่อนำไปพัฒนา WebQuest ให้สมบูรณ์มากยิ่งขึ้น และมีคุณภาพ

สิ่งที่จะปรับปรุงแก้ไข :
- ปรับให้เป็นวัตถุประสงค์เชิงพฤติกรรม
- ใส่ไอคอนหัวข้อเมนูในแต่ละหน้า
- หน้าภาระงาน ใส่ link เชื่อมโยงไปยัง board ระบุ blog ที่ให้ผู้เรียนใช้ในการส่งภาระงาน พร้อมทั้งวิธีการสมัคร blog ดังกล่าว
- แยกหน้า process ไม่ให้แต่ละหน้ามีความยาวมากเกินไป
- resources แยกตามภาระงาน เพิ่มเนื้อหาในส่วนของหลักการเขียนเรียงความ
- Teacher's Page เพิ่มในส่วนของการบูรณาการ
- ตกแต่งเว็บเควสท์ให้สวยงามมากขึ้น

สิ่งที่จะต้องค้นคว้าเพิ่มเติม/ต้องเตรียมมาครั้งหน้า
- ทำ WebQuest ให้เสร็จสมบูรณ์ พร้อมจัดทำเอกสารขั้นตอนการออกแบบ WebQuest นำมาส่งในวันที่ 28 ธ.ค.52
- ปรับปรุงแก้ไข และพัฒนา WebQuest ตามคำแนะนำของอาจารย์
- ทบทวนความรู้ที่ได้เรียนมา เพื่อเตรียมตัวสอบในวันที่ 28 ธ.ค.52

ข้อคิดเห็นอื่นๆ
ได้ฟังคำแนะนำจากอาจารย์และพี่ TA ทำให้เห็นจุดบกพร่องในงาน WebQuest ของตนเองในส่วนที่เรามองไม่เห็น รายละเอียดต่างๆ เล็กๆน้อยๆ เพื่อนำไปปรับปรุงและพัฒนา WebQuest ให้ดียิ่งขึ้น

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

Learning Log Week 04

Learning Log Week 04 (23/11/09)

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

- ทบทวนส่วนประกอบของ WebQuest ซึ่งจะประกอบด้วย Introduction, Task, Process, Evaluation, Conclusion, Resouces, Teacher’s Page และการประยุกต์ WEB 2.0 เข้าไปใน WebQuest เพื่อให้ interactive มากขึ้น ซึ่งจะช่วยเพิ่มประสิทธิภาพในการเรียนรู้แบบสืบสอบของผู้เรียน

- ได้เห็นงานออกแบบ WebQuest ของเพื่อนๆแต่ละคน ซึ่งหลายคนออกแบบได้สวยงาม มีเนื้อหาสาระ และภาระงานที่น่าสนใจ ทำให้เป็นแนวทางในการพัฒนา WebQuest ของตนเองต่อไป และได้ฝึกวิจารณ์งานของเพื่อนๆ และรับฟังข้อคิดเห็นและข้อเสนอแนะต่างๆเพื่อนำมาปรับปรุงงานของเราให้ดียิ่งขึ้น

- ได้เรียนรู้การใช้ Photoshop ในการพัฒนาเว็บไซต์จากคลิปสั้นๆ และฝึกทำไปพร้อมๆกัน

การใช้ Slice ในการสร้างงานเว็บ (Slice คือ การแบ่งภาพออกเป็นชิ้นๆ เพื่อเชื่อมโยงไปยังหน้าอื่นๆ)

วิธีทำ

1.เปิดไฟล์ที่ต้องการ

2.View > Rulers (ctrl+R)

3.ใช้ move tool ดึงลากเส้น Guides ออกมาจากไม้บรรทัด ซึ่งจะช่วยให้การทำ slice ง่ายขึ้น

* undo (ctrl+Z)

4.จากนั้นใช้ slice tool เพื่อทำการ slice ภาพออกเป็นส่วนๆตามความต้องการ

5.Save เป็น .psd

* View > Show > Guides แสดง/ซ่อนเส้น Guides

วิธีการกำหนดการเชื่อมโยงให้กับ Slice

วิธีทำ

คลิกขวาที่ Slice ที่ต้องการเชื่อมโยง เลือก edit slice options

- URL : ระบุที่อยู่เว็บที่ต้องการเชื่อมโยง เช่น home.html , page2.html

- Target : ระบุรูปแบบการเชื่อมโยง เช่น _self , _blank

- Message Text : ระบุข้อความที่แสดงเมื่อเมาส์อยู่เหนือ เช่น หน้าหลัก

- Alt Tag : ระบุข้อความกำกับภาพ เช่น หน้าหลัก

การบันทึก Slice เป็นเว็บเพจ

วิธีทำ

1.File > Save for Web

2.เลือก Jpeg เพราะไฟล์เล็ก และคุณภาพสีดี >> Save [Save as type : HTML and Images (.html)]

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

- งาน WebQuest คู่ ปรับแก้ในบางส่วน เพื่อให้ WebQuest น่าสนใจ และสมบูรณ์มากยิ่งขึ้น และลงรายละเอียด WebQuest ให้มากกว่านี้ โดยทำคู่กับธิรดาค่ะ เรื่อง Six Degree Could Chang The World

- ลองใช้โปรแกรม Swish Max เพราะเป็นโปรแกรมที่น่าสนใจ และใช้งานง่ายในการสร้างแฟลช

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

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