Learning Log Week5 (30NOV09)

สิ่งที่ได้เรียนรู้: วันนี้ได้เรียนรู้การใช้โปรแกรม Macromedia Dreamweaver ค่ะ

• การตั้งค่า Site:

1.เปิดโปรแกรม Macromedia Dreamweaver 8

2.เลือก เมนู site> Manage Sites> New> Sites

3.ระบุชื่อ Site ที่ต้องการ > Next> เลือก No> Next

4. ระบุที่จะเก็บไฟล์ต่างๆของ Site > Next

5. ตั้งค่า Remote Server ให้เลือก None> Next

6.Done

7.จะกลับมายังหน้า Manage Site> เลือก Site ที่เราสร้างไว้> Done

**โดยSite ที่เราสร้างไว้ จะถูกเก็บไว้ในโฟลเดอร์ที่เราเลือกไว้ในตอนแรก **

• การตั้งค่าภาษา:

1. คลิก Page Properties

2. เลือก Title/ Encoding > Ecoding> Unicode (UTF8)

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

1. คลิกปุ่ม Page Properties:

- Apperance: จะเป็นการกำหนดค่าแสดงผลทั่วไปของเว็บเพจ เช่น กำหนดชุด Fonts มาตรฐานที่จะใช้ ขนาดและสีตัวอักษร, ภาพพื้นหลัง เป็นต้น

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

- Heading: เป็นการรูปแบบหัวข้อที่จะใช้ในเว็บเพจ

- Title/Encoding : เป็นการตั้งชื่อให้หัวของเว็บเพจที่อยู่บนเว็บเบราเซอร์

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

** เมื่อปรับค่าตามต้องการแล้ว คลิก OK **

** อย่างไรก็ตามสามารถเปลี่ยนหัวข้อของเว็บเพจได้ที่ Tab Title

• การสร้างตาราง:

1.เลือก Menu Insert > Table หรือ จะคลิก icon Table บน แถบเครื่องมือ Common ก็ได้
2.สร้างตาราง ( 2แถว 2 คอลัมน์) ปรับค่าความกว้างของตารางตามขนาดของเว็บเพจ, กำหนดเส้นขอบของตาราง (กำหนดเป็น0) เพื่อที่จะได้ไม่แสดงผล > OK
3. คลิกตารางด้านล่างซ้าย> แทรกตารางขนาด 1 คอลัมน์ 6 แถว ซ้อนขึ้นมา เพื่อจัดรูปแบบเมนู
4. ย่อความกว้างตารางให้เล็กลง ทั้งตารางย่อยและตารางหลัก

5. คลิก แถบ Table อันที่2 ปรับ Align เพื่อให้ตารางมาอยู่ตรงกลาง(Center)

• การใช้ตารางเพื่อสร้างองค์ประกอบเว็บเพจ:

1.ใช้ตารางที่สร้างไว้จากบทเรียนที่แล่ว
2. เลือกเมนู insert > Image หรือจะคลิกที่ icon บทแถบเครื่องมือ common ได้เหมือนกัน หรืออีกทางเลือกนึงคือดึงจาก File จากหน้าต่างด้านข้างขวาได้เลย โดยจะมีหน้าต่างขึ้นให้ระบุข้อความกำกับภาพ > OK
3. หากภาพมีขนาดใหญ่ตารางให้ Merge cell มารวมกันได้ โดย กด Shift เพื่อเลือกตารางทั้งสอง คลิกขวา เลือก Table> Merge Cell ถ้าตารางยังมีขนาดไม่พอดีกับที่ตั้งไว้ สามารถคลิก ตัวเลขที่ด้านล่าง เลือก Make All Widths Consistent เพื่อทำให้ตารางมีขนาดเท่ากับภาพได้
4.นำไฟล์รูปภาพเมนูที่สร้างไว้ มาใส่ด้านซ้ายของตาราง หากจำนวนตารางไม่พอ ให้คลิก แถบ Table ของตารางที่สอง แล้วแก้จำนวนแถวที่หน้าต่าง Properties ด้านล่าง โดยแถวของตารางก็จะเพิ่มขึ้นมา ที่นี่ก็สามารถนำภาพมาใส่ห้ครบได้เลยค่ะ
** ในแต่ละช่องของตาราง เราสามารถจะปรับสีได้ตามความพอใจ**
5. ลองเลือกช่องตารางด้านขวาที่ว่าง คลิกปุ่ม Background color (ด้านล่าง) เลือกสีที่ต้องการ นอกจากนี้ยังสามรถใส่รูปภาพให้เป็นพื้นหลังได้เช่นกัน

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

1. เมนู File > Save as Template > ตั้งชื่อ Template > Save > Yes

2. เลือกข่องตารางทางขวา ปรับตำแหน่งข้อความให้ไปอยู่ด้านบน โดยเลือก Top ที่ช่อง Vertical

3. สร้างตารางขนาด 1*1 ลงไป

4. เมนู Inset > Template Object> Editable Region > ตั้งชื่อ พื้นที่ > OK

5. บันทึกเว็บเพจให้เรียบร้อย > File > Save

6. สร้างเว็บเพจใหม่ขึ้นมา เพื่อทดสอบ Templateโดย คลิก File > New

7.เลือก Modify> Template>Apply Template to pages> เลือก Template ที่ต้องการ คลิก Select

• เทคนิคการสร้าง Rollover button:

1. Downlaod และแตก File ที่เตรียมไว้ให้ ใน Folder Image

2. เปิดไฟล์ Index.html ที่เคยสร้างไว้

3. เลือกพื้นที่สำหรับใส่วัตถุ > ปรับตำแหน่งการจัดวางเป็นจัดกึ่งกลาง

4. คลิกที่ลูกศรข้างๆ icon รูปภาพ > Rollover Image > ระบุภาพที่จะแสดงเริ่มต้น....> OK

5. บันทึก File ก่อน Preview

สิ่งที่ต้องเตรียมมา: ทำโปรเจคงานคู่ให้เสร็จ ^^


ข้อเสนอแนะ: สนุกดีค่ะ ได้เรียนรู้และลองทำในสิ่งที่ไม่เคยทำ อย่างโปรแกรม Dreamweaver แต่บางทีก็ยังงง งง เพราะบางทีคนสาธิตเองก็ยังงงงง ทำให้หนูยิ่ง งง งง ค่ะ >_______<