สิ่งที่ได้เรียนรู้
- Adobe Image Ready CS2
1. เปิดโปรแกรม เลือกเมนู File เลือกคำสั่ง Import เลือก Folder as Frames
2. หน้าต่าง Browse For Folder จะปรากฏขึ้นมา เลือก Folder ที่เก็บภาพที่ต้องการทำแอนิเมชันเอาไว้ คลิ๊ก OK
3. เมื่อภาพใน Folder ปรากฎขึ้นมา เราสามารถปรับเวลาในการแสดงผลได้
4. ถ้าต้องการเลือกปรับภาพหลายภาพพร้อมกันให้กดปุ่ม Shift สำหรับเลือกภาพแบบต่อเนื่อง หรือกด Ctrl สำหรับเลือกภาพแบบไม่ต่อเนื่อง
5. บันทึกภาพ โดยไปที่เมนู File เลือกคำสั่ง Save optimized As….
6. ประเภทของไฟล์ เลือก Image Only (GIF) คลิกปุ่ม Save และทดลองเล่นไฟล์
- ขั้นตอนการตั้งค่า Site เป็นสิ่งแรกที่ต้องทำเสมอเพราะจะทำให้ไฟล์ที่สร้างรวมอยู่ในที่เดียวแล้วทำการเชื่อมโยงกับไฟล์ต่าง ๆ
1. เปิดโปรแกรม Macromedia Dreamweaver
2. เลือกเมนู Site จากนั้นเลือกคำสั่ง Manage Sites คลิ๊กปุ่ม New เลือกคำสั่ง Site และระบุชื่อ Site ที่ต้องการแล้วจึงคลิ๊กปุ่ม Next 3. หน้าถัดมาเลือก No คลิ๊กปุ่ม Next และหน้าต่อมาระบุตำแหน่งของหน้าที่จะเก็บไฟล์ต่าง ๆ ของเว็บไซต์ ระบุชื่อ Folder คลิ๊กปุ่ม Next
4. ตั้งค่า Remots server เลือก non และคลิ๊กปุ่ม Next เมื่อตั้งค่าทุกอย่างเรียบร้อยให้คลิ๊กปุ่ม Don 5. จากนั้นกลับมาที่หน้า Manage Sites ที่เราสร้างและคลิ๊กปุ่ม Don และทำการสร้างเว็บเพจขึ้นมาสักเว็บและบันทึกดู
- ขั้นตอนการตั้งค่าภาษา ต้องตั้งค่าภาษาให้ถูกต้องเสียก่อนมิเช่นนั้นเว็บไซต์จะแสดงภาษาไทยไม่สมบูรณ์
1. หลังจากสร้างไฟล์เว็บเพจขึ้นมาใหม่แล้วคลิ๊กปุ่ม Page Properties เลือก Title/Encoding
2. จากนั้นในช่อง Encoding เลือกเป็น Unicode (UTF-8) จากนั้นคลิกปุ่ม OK
- การตั้งค่าเว็บเพจเบื้องต้น
1. คลิ๊กปุ่ม Page Properties
2. ในช่อง Category คำว่า Appearance : ค่าแสดงผลทั่วไปของเว็ป, Link : ตัวเชื่องโยงในเว็บเพจ เช่น ตัวอักษร สี,Heading : กำหนดรูปแบบหัวข้อเอาไว้ใช้ในเว็บเพจ, Title/Encoding : เป็นการตั้งชื่อให้หัวของเว็บเพจ และการตั้งค่าภาษา,Tracing image : เป็นการนำเอาภาพมาวางในหน้าเว็บไซส์ เป็นเหมือนแผ่นใส เมื่อเลือกทุกอย่างได้อย่างลงตัวแล้วก็กดปุ่ม OK
3. สามารถเปลี่ยนหัวของเว็บเพจได้ที่ด้านบนของหน้าต่างการทำงานเช่นเดียวกับที่เราเปลี่ยนใน Title/Encoding
- การสร้างตาราง
1. เลือกเมนู Insert แล้วเลือกคำสั่ง Table อีกทางเลือกหนึ่ง เลือกคลิ๊ก Table ในแถบเครื่องมือ Command ก็ได้
2. สร้างตารางที่มี 2 แถว และสร้าง 2 คอลัม ปรับขนาดของตารางตามเว็บเพจน์ที่เราสร้างขึ้นให้เลือกเป็น พิกเซลความกว้างจะพอดี แต่ถ้าเลือกหน่วยเป็น เปอร์เซ็นความกว้างจะเป็นไปตามขนาดของหน้าจอ
3. กำหนดเส้นขอบของตารางและระยะห่างระหว่างเซลขอให้กำหนดเป็น 0 เพื่อที่จะได้ไม่แสดงผล และคลิ๊กปุ่ม OK
4. คลิ๊กช่องตารางด้านล่างซ้าย และแทรกตาราง 1 คอลัม 6 แถว ซ้อนขึ้นมาเพื่อจัดรูปแบบเมนู ย่อความกว้างของตารางให้เล็กลงทั้งตารางย่อยและตารางหลัก จากนั้นคลิ๊กแถบ Table อันที่ 2 ปรับไลน์ให้อยู่ตรงกลาง
- การใช้ตารางช่วยจัดองค์ประกอบของเว็บเพจ
1. ให้นำภาพที่ต้องการไปใส่ใน Folder อันทำ Site จากนั้นเลือกเมนู Insert แล้วเลือกคำสั่ง Image
2. จะขึ้นหน้าต่าง ระบุให้ใส่ข้อความลำดับภาพ ตั้งค่า กด OK จะเห็นว่าภาพจะขนาดใหญ่กว่าตาราง
3. ฉะนั้นจึงสามารถรวมตารางสองอันบนได้ โดยกด Shift จากนั้นคลิกขวา เลือกเมนู Table เลือกคำสั่ง Merge Cells จะเห็นว่า ตารางกับภาพไม่ตรงกัน ไม่เท่ากัน
4. ฉะนั้นให้ปรับ โดยเลือก Make all Widths Consistent เพื่อทำให้ตารางมีขนาดเท่ากับภาพได้
- การสร้างtemplate – บันทึกหน้าเว็บเป็นTemplate เพื่อลดเวลาสร้างหน้าเว็บทุกๆหน้าให้เหมือนกัน โดยเหลือเพียงแค่เฉพาะส่วนที่ต้องการแก้ไขให้สามารถเปลี่ยนแปลงได้
- การสร้าง Rollover Button – เพื่อใช้เพิ่มความน่าสนใจให้กับหน้าเว็บของเราให้มีการโต้ตอบกับผู้ใช้งาน
- การใส่ Javascript - เพื่อเพิ่มความน่าสนใจให้เว็บเพจมากขึ้น โดยจะใส่ในส่วนระหว่างแท๊ก Head
สิ่งที่ต้องเตรียมมา
งานกลุ่มที่มีความพร้อมมากกว่า 70 % เพื่อให้อาจารย์ตรวจสอบและให้ปรับแก้ตามความเหมาะสม
ข้อเสนอแนะ
จำได้ว่าวันนี้ไม่ได้เข้าเรียน เลยไม่ค่อยรู้เรื่องเท่าไหร่นัก
- Adobe Image Ready CS2
1. เปิดโปรแกรม เลือกเมนู File เลือกคำสั่ง Import เลือก Folder as Frames
2. หน้าต่าง Browse For Folder จะปรากฏขึ้นมา เลือก Folder ที่เก็บภาพที่ต้องการทำแอนิเมชันเอาไว้ คลิ๊ก OK
3. เมื่อภาพใน Folder ปรากฎขึ้นมา เราสามารถปรับเวลาในการแสดงผลได้
4. ถ้าต้องการเลือกปรับภาพหลายภาพพร้อมกันให้กดปุ่ม Shift สำหรับเลือกภาพแบบต่อเนื่อง หรือกด Ctrl สำหรับเลือกภาพแบบไม่ต่อเนื่อง
5. บันทึกภาพ โดยไปที่เมนู File เลือกคำสั่ง Save optimized As….
6. ประเภทของไฟล์ เลือก Image Only (GIF) คลิกปุ่ม Save และทดลองเล่นไฟล์
- ขั้นตอนการตั้งค่า Site เป็นสิ่งแรกที่ต้องทำเสมอเพราะจะทำให้ไฟล์ที่สร้างรวมอยู่ในที่เดียวแล้วทำการเชื่อมโยงกับไฟล์ต่าง ๆ
1. เปิดโปรแกรม Macromedia Dreamweaver
2. เลือกเมนู Site จากนั้นเลือกคำสั่ง Manage Sites คลิ๊กปุ่ม New เลือกคำสั่ง Site และระบุชื่อ Site ที่ต้องการแล้วจึงคลิ๊กปุ่ม Next 3. หน้าถัดมาเลือก No คลิ๊กปุ่ม Next และหน้าต่อมาระบุตำแหน่งของหน้าที่จะเก็บไฟล์ต่าง ๆ ของเว็บไซต์ ระบุชื่อ Folder คลิ๊กปุ่ม Next
4. ตั้งค่า Remots server เลือก non และคลิ๊กปุ่ม Next เมื่อตั้งค่าทุกอย่างเรียบร้อยให้คลิ๊กปุ่ม Don 5. จากนั้นกลับมาที่หน้า Manage Sites ที่เราสร้างและคลิ๊กปุ่ม Don และทำการสร้างเว็บเพจขึ้นมาสักเว็บและบันทึกดู
- ขั้นตอนการตั้งค่าภาษา ต้องตั้งค่าภาษาให้ถูกต้องเสียก่อนมิเช่นนั้นเว็บไซต์จะแสดงภาษาไทยไม่สมบูรณ์
1. หลังจากสร้างไฟล์เว็บเพจขึ้นมาใหม่แล้วคลิ๊กปุ่ม Page Properties เลือก Title/Encoding
2. จากนั้นในช่อง Encoding เลือกเป็น Unicode (UTF-8) จากนั้นคลิกปุ่ม OK
- การตั้งค่าเว็บเพจเบื้องต้น
1. คลิ๊กปุ่ม Page Properties
2. ในช่อง Category คำว่า Appearance : ค่าแสดงผลทั่วไปของเว็ป, Link : ตัวเชื่องโยงในเว็บเพจ เช่น ตัวอักษร สี,Heading : กำหนดรูปแบบหัวข้อเอาไว้ใช้ในเว็บเพจ, Title/Encoding : เป็นการตั้งชื่อให้หัวของเว็บเพจ และการตั้งค่าภาษา,Tracing image : เป็นการนำเอาภาพมาวางในหน้าเว็บไซส์ เป็นเหมือนแผ่นใส เมื่อเลือกทุกอย่างได้อย่างลงตัวแล้วก็กดปุ่ม OK
3. สามารถเปลี่ยนหัวของเว็บเพจได้ที่ด้านบนของหน้าต่างการทำงานเช่นเดียวกับที่เราเปลี่ยนใน Title/Encoding
- การสร้างตาราง
1. เลือกเมนู Insert แล้วเลือกคำสั่ง Table อีกทางเลือกหนึ่ง เลือกคลิ๊ก Table ในแถบเครื่องมือ Command ก็ได้
2. สร้างตารางที่มี 2 แถว และสร้าง 2 คอลัม ปรับขนาดของตารางตามเว็บเพจน์ที่เราสร้างขึ้นให้เลือกเป็น พิกเซลความกว้างจะพอดี แต่ถ้าเลือกหน่วยเป็น เปอร์เซ็นความกว้างจะเป็นไปตามขนาดของหน้าจอ
3. กำหนดเส้นขอบของตารางและระยะห่างระหว่างเซลขอให้กำหนดเป็น 0 เพื่อที่จะได้ไม่แสดงผล และคลิ๊กปุ่ม OK
4. คลิ๊กช่องตารางด้านล่างซ้าย และแทรกตาราง 1 คอลัม 6 แถว ซ้อนขึ้นมาเพื่อจัดรูปแบบเมนู ย่อความกว้างของตารางให้เล็กลงทั้งตารางย่อยและตารางหลัก จากนั้นคลิ๊กแถบ Table อันที่ 2 ปรับไลน์ให้อยู่ตรงกลาง
- การใช้ตารางช่วยจัดองค์ประกอบของเว็บเพจ
1. ให้นำภาพที่ต้องการไปใส่ใน Folder อันทำ Site จากนั้นเลือกเมนู Insert แล้วเลือกคำสั่ง Image
2. จะขึ้นหน้าต่าง ระบุให้ใส่ข้อความลำดับภาพ ตั้งค่า กด OK จะเห็นว่าภาพจะขนาดใหญ่กว่าตาราง
3. ฉะนั้นจึงสามารถรวมตารางสองอันบนได้ โดยกด Shift จากนั้นคลิกขวา เลือกเมนู Table เลือกคำสั่ง Merge Cells จะเห็นว่า ตารางกับภาพไม่ตรงกัน ไม่เท่ากัน
4. ฉะนั้นให้ปรับ โดยเลือก Make all Widths Consistent เพื่อทำให้ตารางมีขนาดเท่ากับภาพได้
- การสร้างtemplate – บันทึกหน้าเว็บเป็นTemplate เพื่อลดเวลาสร้างหน้าเว็บทุกๆหน้าให้เหมือนกัน โดยเหลือเพียงแค่เฉพาะส่วนที่ต้องการแก้ไขให้สามารถเปลี่ยนแปลงได้
- การสร้าง Rollover Button – เพื่อใช้เพิ่มความน่าสนใจให้กับหน้าเว็บของเราให้มีการโต้ตอบกับผู้ใช้งาน
- การใส่ Javascript - เพื่อเพิ่มความน่าสนใจให้เว็บเพจมากขึ้น โดยจะใส่ในส่วนระหว่างแท๊ก Head
สิ่งที่ต้องเตรียมมา
งานกลุ่มที่มีความพร้อมมากกว่า 70 % เพื่อให้อาจารย์ตรวจสอบและให้ปรับแก้ตามความเหมาะสม
ข้อเสนอแนะ
จำได้ว่าวันนี้ไม่ได้เข้าเรียน เลยไม่ค่อยรู้เรื่องเท่าไหร่นัก
ไม่มีความคิดเห็น:
แสดงความคิดเห็น