วิธีสร้างปุ่มดาวน์โหลด

ผู้เขียน: Bobbie Johnson
วันที่สร้าง: 6 เมษายน 2021
วันที่อัปเดต: 1 กรกฎาคม 2024
Anonim
สอนวิธีการสร้างปุ่ม ด้วยโปรแกรม Button shop 4
วิดีโอ: สอนวิธีการสร้างปุ่ม ด้วยโปรแกรม Button shop 4

เนื้อหา

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

ขั้นตอน

วิธีที่ 1 จาก 2: สร้างปุ่ม HTML

  1. 1 สร้างปุ่มในตัวแก้ไขแหล่งที่มา โปรแกรมแก้ไขข้อความอย่างง่ายเช่น Notepad หรือ TextEdit นั้นใช้ได้ ในเท็กซ์เอดิเตอร์ ให้ป้อนรหัสต่อไปนี้:
  2. 2 อัปโหลดไฟล์ไปยังเซิร์ฟเวอร์ของคุณ หากคุณต้องการเสนอไฟล์สำหรับดาวน์โหลด คุณต้องเก็บไว้ในเซิร์ฟเวอร์ของคุณหรือเชื่อมโยงปุ่มกับไฟล์บางไฟล์ที่อื่นในเครือข่าย ใช้ไคลเอนต์ FTP เพื่ออัปโหลดไฟล์ที่คุณต้องการให้พร้อมใช้งานในเซิร์ฟเวอร์ไซต์ของคุณ
  3. 3 ตรวจสอบให้แน่ใจว่าคุณมีสิทธิ์ของผู้ดูแลเว็บหากคุณต้องการลิงก์ไปยังไฟล์ที่คุณไม่ได้จัดเก็บไว้
  4. 4แทนที่ 'ดาวน์โหลดตำแหน่ง' ด้วย URL ดาวน์โหลดจริงของคุณ อย่าลืมใส่ที่อยู่ในเครื่องหมายคำพูดเดี่ยวและ “window.location =' Download Location ” ในเครื่องหมายคำพูดคู่ เพิ่มคำนำหน้า เช่น HTTP: // หรือ FTP: // และเพิ่มนามสกุลไฟล์ เช่น .webp หรือ .EXE ..
  5. 5 เขียนบนปุ่ม แทนที่ "ข้อความปุ่ม" ด้วยคำที่คุณต้องการให้ปรากฏบนปุ่ม อย่าลืมใส่ข้อความในเครื่องหมายคำพูดคู่ พยายามใช้วลีของคุณสั้น ๆ เพื่อไม่ให้ปุ่มบนหน้าจอดูเทอะทะ
  6. 6 วางซอร์สโค้ดบนหน้าของคุณ คุณสามารถวางซอร์สโค้ดสำหรับปุ่มที่ใดก็ได้บนหน้า และปุ่มนั้นจะปรากฏในตำแหน่งนั้นพอดี อัปโหลดโค้ดเพจใหม่และทดสอบปุ่มใหม่ของคุณ

วิธีที่ 2 จาก 2: สร้างปุ่มเป็นรูปภาพ

  1. 1 วาดปุ่มดาวน์โหลดของคุณ ใช้โปรแกรมแก้ไขรูปภาพที่คุณชอบและวาดปุ่มที่ตรงกับสไตล์ของไซต์ของคุณ คุณสามารถทำให้ปุ่มใหญ่ (หรือเล็ก) ได้ตามต้องการ
  2. 2 อัปโหลดไฟล์และรูปภาพด้วยปุ่มไปยังเซิร์ฟเวอร์ของคุณ หากคุณต้องการเสนอไฟล์สำหรับดาวน์โหลด คุณต้องจัดเก็บไว้ในเซิร์ฟเวอร์ของคุณหรือเชื่อมโยงปุ่มกับไฟล์บางไฟล์ที่อื่นในเครือข่าย ใช้ไคลเอนต์ FTP เพื่ออัปโหลดไฟล์ที่คุณต้องการให้พร้อมใช้งานในเซิร์ฟเวอร์ไซต์ของคุณ
    • อัปโหลดรูปภาพปุ่มไปยังตำแหน่งเดียวกันบนเซิร์ฟเวอร์ที่มีหน้าที่คุณเพิ่มปุ่มนี้
  3. 3 เขียนซอร์สโค้ดสำหรับดาวน์โหลด ปุ่มดาวน์โหลดซึ่งแสดงผลเป็นรูปภาพ ทำงานในลักษณะเดียวกับลิงก์อื่นๆ ทั้งหมดใน HTMLคัดลอกโค้ดต่อไปนี้ลงในโปรแกรมแก้ไขของคุณ:
  4. 4 ป้อนข้อมูลไฟล์และรูปภาพ แทนที่ "ตำแหน่งการดาวน์โหลด" ด้วย URL ดาวน์โหลดจริง รวมถึงคำนำหน้า HTTP: // หรือ FTP: // แทนที่ "ไฟล์รูปภาพ" ด้วยชื่อไฟล์ของรูปภาพปุ่ม หากไฟล์นั้นอยู่บนเซิร์ฟเวอร์ในตำแหน่งเดียวกับเพจ คุณไม่จำเป็นต้องระบุพาธแบบเต็ม
    • แทนที่ "Hover Text" ด้วยข้อความที่ควรปรากฏเมื่อผู้ใช้วางเมาส์เหนือรูปภาพปุ่ม
    • แทนที่ "X" และ "Y" ด้วยความกว้างและความสูงของรูปภาพเป็นพิกเซลตามลำดับ
    • อย่าลืมเพิ่มรายการเหล่านี้ทั้งหมดในเครื่องหมายคำพูดคู่
  5. 5 ป้อนซอร์สโค้ดบนหน้าของคุณ วางรหัสในตำแหน่งที่ปุ่มควรปรากฏ อัปโหลดโค้ดใหม่ จากนั้นเปิดหน้าเว็บของคุณเพื่อดูว่าปุ่มใช้งานได้หรือไม่ ตรวจสอบว่าข้อความคำใบ้ปรากฏขึ้นเมื่อวางเมาส์เหนือและรูปภาพนั้นมีขนาดที่ถูกต้อง

คำเตือน

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