menu

วันอาทิตย์ที่ 15 พฤศจิกายน พ.ศ. 2558

การแทรกพื้นหลังเว็บเพจ

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

    ภาพพื้นหลังนั้นเรานิยมใช้ภาพขนาดเล็ก นำมาเรียงต่อกันจนเต็มเว็บเพจ เพื่อความรวดเร็วในการแสดงผลเว็บเพจด้วย ดังตัวอย่างพื้นหลังด้านล่าง 

รูปที่ใช้ทำพื้นหลัง 



เว็บเพจที่ใส่พื้นหลังเรียบร้อยแล้ว 



ใส่ภาพพื้นหลัง ให้เว็บเพจ
    1.เปิดหน้าเว็บเพจที่ต้องการปรับแต่ง 

    2.ไปที่ Menu เลือก Modify > Page Properties 

    3.จะมีหน้าต่างขึ้นมาดังรูปด้านล่าง 

    4.ที่ categoty ทางซ้ายมือเลือก appearance จะมีหน้าจอให้ปรับดังรูป 



    5.Background image ใช้กำหนดภาพพื้นหลังของเว็บเพจ โดยคลิกที่ Browse จะมีหน้าต่างให้เลือกภาพที่จะใช้แสดงเป็นพื้นหลัง 

    6.Repeat ใช้กำหนดการแสดงผลของภาพพื้นหลัง โดยมีคำสั่งดังนี้ 

        1.no-repeat ให้แสดงผลภาพพื้นหลังเพียงครั้งเดียว 

        2.repeat ให้แสดงผลภาพพื้นหลังซ้ำกันหลายๆครั้งจะเต็มพื้นที่เว็บเพจ 

        3.repeat-x ให้แสดงผลภาพพื้นหลังซ้ำกันเฉพาะในแนวนอนเท่านั้น 

        4.repeat-y ให้แสดงผลภาพพื้นหลังซ้ำกันเฉพาะในตั้งนอนเท่านั้น 

ถ้าไม่กำหนดในหัวข้อ Repeat ภาพพื้นหลังจะแสดงผลเต็มพื้นที่เว็บเพจอัตโนมัติ

วันจันทร์ที่ 9 พฤศจิกายน พ.ศ. 2558

สร้างการเชื่อมโยงโดยใช้ Rollover Image ใน Dreamweaver CS3

ในการเข้าเว็บไซต์บางที่ เมื่อเราเลื่อนลูกศรไปที่ปุ่มหรือคำสั่งใดๆ แล้วปุ่มหรือคำสั่งนั้นๆ มีการ เปลี่ยนรูปร่าง เช่น ปุ่มนูนขึ้น เปลี่ยนสี ลักษณะนี้ในโปรแกรม Dreamweaverเรียกว่า Rollover Image
1. ปุ่มโดยปกติเมื่อไม่ชี้เมาส์ที่ปุ่ม
2. เมื่อเลื่อนเมาส์ผ่าน ปุ่มจะเปลี่ยนเป็นอีกแบบหนึ่ง

วิธีสร้าง Rollover Image
1. คลิกตำแหน่งที่ต้องการแทรกปุ่ม
2. คลิกเมนู Insert>>Image Objects>>Rollover Image
3. ในกรอบข้อความที่ปรากฏขึ้นมา ให้กำหนดค่าดังนี้
Original Image ให้คลิกเลือกภาพที่จะให้ปรากฏบนจอตามปกติ คลิกปุ่ม Browse แล้วคลิก เลือกภาพ เช่น b_home.jpg
Rollover Image ให้คลิกเลือกภาพที่จะมีการเปลี่ยนแปลงเมื่อเลื่อนเมาส์ผ่าน หรือชี้ที่ภาพ นั้นๆ ให้คลิกเลือกภาพ b_home2.jpg
- Alternate Text ให้ระบุข้อความ หน้าหลัก เพื่อเป็นอีกทางเลือกหนึ่ง ในกรณีภาพมีปัญหา ไม่ปรากฏบนจอ ก็ยังมีข้อความให้ผู้ใช้เข้าใจได้ว่า ตัวเลือกนั้นคืออะไร
- When Clicked,GO To URL เมื่อคลิกจะให้เชื่อมโยงไปเว็บเพจใดก็คลิกและพิมพ์ชื่อลงไป เช่น index.php
4. กำหนดค่าเสร็จแล้ว คลิกปุ่ม OK
5. การกำหนดค่าปุ่มอื่นๆ กำหนดตามตัวอย่าง
ปรับแต่งคุณสมบัติลิงค์ใน Dreamweaver CS3


เปลี่ยนสีข้อความที่ได้สร้างลิงค์
1. ลิงค์ที่ได้สร้างการเชื่อมโยงไว้
2. ลิงค์ที่ถูกคลิก สีของข้อความจะเปลี่ยนเป็นอีกสีหนึ่ง

วิธีปรับแต่ง
1. คลิกเมนู Modify>>Page Properties
2. กำหนดค่า โดยแต่ละส่วนให้คลิกเลือกตามต้องการ
Link Color สีปกติของลิงค์ก่อนถูกคลิก
Visited links สีข้อความ เมื่อคลิกที่ลิงค์นั้นๆ แล้ว
Active links ลิงค์ที่กำลังเลือกอยู่ ในขณะนั้น