วิธีเพิ่มลิงก์ไปยังรูปภาพใน Adobe Dreamweaver: 7 ขั้นตอน

สารบัญ:

วิธีเพิ่มลิงก์ไปยังรูปภาพใน Adobe Dreamweaver: 7 ขั้นตอน
วิธีเพิ่มลิงก์ไปยังรูปภาพใน Adobe Dreamweaver: 7 ขั้นตอน

วีดีโอ: วิธีเพิ่มลิงก์ไปยังรูปภาพใน Adobe Dreamweaver: 7 ขั้นตอน

วีดีโอ: วิธีเพิ่มลิงก์ไปยังรูปภาพใน Adobe Dreamweaver: 7 ขั้นตอน
วีดีโอ: วิธีใช้ Trello จัดการงานแบบง่ายๆ 2024, มีนาคม
Anonim

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

ขั้นตอน

เพิ่มลิงค์ไปยังรูปภาพใน Adobe Dreamweaver ขั้นตอนที่ 1
เพิ่มลิงค์ไปยังรูปภาพใน Adobe Dreamweaver ขั้นตอนที่ 1

ขั้นตอนที่ 1. เปิด Dreamweaver

เปิดไฟล์ที่มีอยู่หรือกำหนดไซต์ใหม่และสร้างไฟล์ HTML ใหม่ หากคุณยังไม่ได้ดำเนินการดังกล่าว

เพิ่มลิงก์ไปยังรูปภาพใน Adobe Dreamweaver ขั้นตอนที่ 2
เพิ่มลิงก์ไปยังรูปภาพใน Adobe Dreamweaver ขั้นตอนที่ 2

ขั้นตอนที่ 2 เมื่อคุณสร้างไฟล์ HTML ใหม่ Dreamweaver จะสร้างโครงสร้างหน้าเว็บพื้นฐานสำหรับคุณแล้ว

ป้อนเคอร์เซอร์ของคุณที่ใดที่หนึ่งระหว่างแท็ก และ

เพิ่มลิงค์ไปยังรูปภาพใน Adobe Dreamweaver ขั้นตอนที่ 3
เพิ่มลิงค์ไปยังรูปภาพใน Adobe Dreamweaver ขั้นตอนที่ 3

ขั้นตอนที่ 3 แทรกรูปภาพที่คุณต้องการ

มีสามวิธีทางเลือกในการทำเช่นนี้:

  • ไปที่แผง "แทรก" ที่ด้านบน คลิก 'รูปภาพ' และเลือก 'รูปภาพ' จากเมนูย่อยที่ปรากฏขึ้น
  • ทางด้านขวาจะมีแถบที่มีคำว่า 'Insert' และ 'Files' เขียนอยู่ด้านบน คลิก 'เลือก' จากนั้นคลิก 'ทั่วไป' จากเมนูแบบเลื่อนลง ตอนนี้ แทรกรูปภาพโดยคลิก 'รูปภาพ' หากแถบนั้นไม่ปรากฏขึ้น ให้คลิกที่พื้นที่ทำงาน 'กะทัดรัด' หรือ 'ขยาย' ถูกเขียน คลิก 'กะทัดรัด' จากนั้น 'รีเซ็ตขนาดกะทัดรัด' เพื่อรีเซ็ตการตั้งค่าเริ่มต้นของ Dreamweaver
  • กด Ctrl+Alt+I บนแป้นพิมพ์ของคุณ
เพิ่มลิงก์ไปยังรูปภาพใน Adobe Dreamweaver ขั้นตอนที่ 4
เพิ่มลิงก์ไปยังรูปภาพใน Adobe Dreamweaver ขั้นตอนที่ 4

ขั้นตอนที่ 4 ปรับขนาดรูปภาพของคุณโดยป้อนจำนวนพิกเซลในช่อง "ความกว้าง" และ "ความสูง"

เพิ่มลิงค์ไปยังรูปภาพใน Adobe Dreamweaver ขั้นตอนที่ 5
เพิ่มลิงค์ไปยังรูปภาพใน Adobe Dreamweaver ขั้นตอนที่ 5

ขั้นตอนที่ 5. ไปที่โหมด 'ออกแบบ' เพื่อดูว่ารูปภาพของคุณเป็นอย่างไร

คลิก 'สด' เพื่อดูว่าจริง ๆ แล้วจะเป็นอย่างไรในเว็บไซต์ของคุณ

เพิ่มลิงก์ไปยังรูปภาพใน Adobe Dreamweaver ขั้นตอนที่ 6
เพิ่มลิงก์ไปยังรูปภาพใน Adobe Dreamweaver ขั้นตอนที่ 6

ขั้นตอนที่ 6 คลิกที่ภาพ

เพิ่มลิงค์ไปยังรูปภาพใน Adobe Dreamweaver ขั้นตอนที่7
เพิ่มลิงค์ไปยังรูปภาพใน Adobe Dreamweaver ขั้นตอนที่7

ขั้นตอนที่ 7 บันทึกหน้าเว็บของคุณโดยกด Ctrl+S (บันทึก) หรือ Ctrl+⇧ Shift+S (บันทึกเป็น)

เคล็ดลับ

  • หากคุณต้องการให้เป็นเหมือนปุ่มหรือรูปร่างในรูปภาพของคุณ ให้เปลี่ยนพื้นหลังเป็นพื้นหลังที่คล้ายกับบนหน้าเว็บของคุณด้วยโปรแกรมแก้ไขรูปภาพ เช่น Photoshop
  • คลิกที่เล็ก โลก ไอคอนด้านบนเพื่อดูในเบราว์เซอร์ของคุณ

แนะนำ: