Sponsored Ads

การพัฒนาเว็บไซท์

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

 

การเลือกภาพใน Dreamweaver CS3


ก่อนจะจัดการกับไฟล์ภาพที่นำเข้ามาต้องคลิกเลือกก่อน
1. คลิกเลือกภาพที่ต้องการ
2. ภาพที่ถูกเลือกจะมีจุดโดยรอบ
3. การเลือกมากกว่า 1 ภาพให้คลิกภาพแรกก่อน กดปุ่ม Ctrl ที่แป้นพิมพ์ค้างไว้
4. คลิกเลือกภาพที่ต้องการทั้งหมด แล้วปล่อยปุ่ม Ctrl

 

 

เครื่องมือปรับแต่งคุณสมบัติของภาพใน Dreamweaver CS3

ก่อนจะใช้เครื่องมือนี้ให้คลิกที่ภาพที่ต้องการปรับแต่งเสียก่อน เพื่อเลือกภาพนั้นๆ
1. ชื่อภาพ ให้คลิกและพิมพ์ชื่อภาพลงไป (ไม่จำเป็นต้องทำก็ได้)
2. Map เครื่องมือช่วยสร้าง Image map เป็นการกำหนดให้พื้นที่บนภาพ เป็นลิงค์ที่สามารถคลิก เพื่อเชื่อมโยงไปยังเว็บเพจอื่นๆ ได้
3. W ขนาดความกว้างของภาพ
4. H ขนาดความสูงของภาพ
5. V Space ระยะห่างระหว่างภาพกับข้อมูลอื่นๆ ในแนวนอน
6. H Space ระยะห่างระหว่างภาพกับข้อมูลอื่นๆ ในแนวตั้ง
7. Src ที่เก็บไฟล์ภาพและชื่อไฟล์ภาพที่นำมาใช้
8. Link สำหรับกำหนดการเชื่อมโยง โดยใช้ไฟล์ภาพนั้นๆ
9. Target ในกรณีที่มีการสร้างการเชื่อมโยง ก็ต้องกำหนดตำแหน่งที่จะให้โปรแกรมแสดงข้อมูล จะให้แสดงในหน้าจอเดิม หรือแสดงข้อมูลในหน้าจอใหม่
10. Low Src ตัวเลือกสำหรับการนำไฟล์ที่มีขนาดเล็กกว่า มาแสดงแทนภาพจริง เพื่อความเร็วใน การแสดงผลให้ผู้ชมเห็น แต่เมื่อผู้ชมคลิกที่ภาพก็จะเปลี่ยนเป็นภาพที่ใหญ่กว่า ชัดเจนกว่า
11. Alt เป็นการใช้คำอธิบายเกี่ยวกับภาพนั้นๆ เป็นอีกทางเลือกถ้าเครื่องผู้ใช้ไม่แสดงภาพก็จะมี คำอธิบายว่าภาพนั้นๆ เป็นภาพอะไร แสดงเป็นข้อความแทนภาพ
12. Edit เป็นกลุ่มเครื่องมือไว้ปรับแต่ง แก้ไขภาพ
13. Border สำหรับใส่กรอบภาพ โดยระบุความหนาลงไป
14. ปุ่มจัดตำแหน่ง ย่อหน้า
15. Align คำสั่งจัดตำแหน่ง ข้อความกับภาพ เช่น Baseline, Top, Middle เป็นต้น
16. Class คำสั่งสำหรับการเรียกใช้งานสไตล์ CSS ที่ได้สร้างไว้

 

การจัดตำแหน่งภาพกับข้อความใน Dreamweaver CS3

ภาพเล็กๆ ที่นำมาสร้างเป็นไอคอนหน้าหัวข้อเช่น เกี่ยวกับเรา จะใช้การจัดเข้ากับข้อความ
1. คลิกด้านหน้าหัวข้อที่ต้องการเช่น กลับหน้าหลัก
2. แทรกภาพเข้ามาด้วยคำสั่ง Insert>>Image
3. จะได้ภาพดังตัวอย่าง ภาพจะอยู่เยื้องขึ้นไปด้านบน
4. คลิกที่ภาพที่ต้องการเพื่อเลือกภาพก่อน ภาพที่ถูกเลือกจะปรากฏจุดสีดำที่ภาพ
5. ในส่วน Align ให้คลิกเลือกคำสั่งจัดตำแหน่งแบบต่างๆ เช่น Aling=Absolute Button
6. คลิกที่ว่างๆ ก็จะได้ผลดังตัวอย่าง

 

กำหนดระยะห่างระหว่างภาพกับข้อความใน Dreamweaver CS3

1. เลือกภาพ โดยคลิกที่ภาพ
2. ในช่อง V Space และ H Space คลิกและลองพิมพ์ตัวเลขลงไป แล้วกด Enter
3. ภาพที่กำหนดระยะห่างไว้ 5 pixels