ผู้เขียน:
Bobbie Johnson
วันที่สร้าง:
6 เมษายน 2021
วันที่อัปเดต:
1 กรกฎาคม 2024
![สอนวิธีการสร้างปุ่ม ด้วยโปรแกรม Button shop 4](https://i.ytimg.com/vi/3uy23DvNLAw/hqdefault.jpg)
เนื้อหา
ปุ่มดาวน์โหลดจะช่วยให้ไซต์ของคุณดูเป็นมืออาชีพมากกว่าแค่ลิงก์เพื่อดาวน์โหลด ปุ่มมีส่วนต่อประสานที่สะอาดตา และหากคุณออกแบบบางสิ่งด้วยตนเอง ปุ่มของคุณอาจกลายเป็นส่วนสำคัญของการออกแบบเพจได้ ทำตามบทช่วยสอนนี้เพื่อสร้างปุ่ม HTML หรือปุ่มที่คุณกำหนดเอง
ขั้นตอน
วิธีที่ 1 จาก 2: สร้างปุ่ม HTML
1 สร้างปุ่มในตัวแก้ไขแหล่งที่มา โปรแกรมแก้ไขข้อความอย่างง่ายเช่น Notepad หรือ TextEdit นั้นใช้ได้ ในเท็กซ์เอดิเตอร์ ให้ป้อนรหัสต่อไปนี้:
2 อัปโหลดไฟล์ไปยังเซิร์ฟเวอร์ของคุณ หากคุณต้องการเสนอไฟล์สำหรับดาวน์โหลด คุณต้องเก็บไว้ในเซิร์ฟเวอร์ของคุณหรือเชื่อมโยงปุ่มกับไฟล์บางไฟล์ที่อื่นในเครือข่าย ใช้ไคลเอนต์ FTP เพื่ออัปโหลดไฟล์ที่คุณต้องการให้พร้อมใช้งานในเซิร์ฟเวอร์ไซต์ของคุณ
3 ตรวจสอบให้แน่ใจว่าคุณมีสิทธิ์ของผู้ดูแลเว็บหากคุณต้องการลิงก์ไปยังไฟล์ที่คุณไม่ได้จัดเก็บไว้
4แทนที่ 'ดาวน์โหลดตำแหน่ง' ด้วย URL ดาวน์โหลดจริงของคุณ อย่าลืมใส่ที่อยู่ในเครื่องหมายคำพูดเดี่ยวและ “window.location =' Download Location ” ในเครื่องหมายคำพูดคู่ เพิ่มคำนำหน้า เช่น HTTP: // หรือ FTP: // และเพิ่มนามสกุลไฟล์ เช่น .webp หรือ .EXE ..
5 เขียนบนปุ่ม แทนที่ "ข้อความปุ่ม" ด้วยคำที่คุณต้องการให้ปรากฏบนปุ่ม อย่าลืมใส่ข้อความในเครื่องหมายคำพูดคู่ พยายามใช้วลีของคุณสั้น ๆ เพื่อไม่ให้ปุ่มบนหน้าจอดูเทอะทะ
6 วางซอร์สโค้ดบนหน้าของคุณ คุณสามารถวางซอร์สโค้ดสำหรับปุ่มที่ใดก็ได้บนหน้า และปุ่มนั้นจะปรากฏในตำแหน่งนั้นพอดี อัปโหลดโค้ดเพจใหม่และทดสอบปุ่มใหม่ของคุณ
วิธีที่ 2 จาก 2: สร้างปุ่มเป็นรูปภาพ
1 วาดปุ่มดาวน์โหลดของคุณ ใช้โปรแกรมแก้ไขรูปภาพที่คุณชอบและวาดปุ่มที่ตรงกับสไตล์ของไซต์ของคุณ คุณสามารถทำให้ปุ่มใหญ่ (หรือเล็ก) ได้ตามต้องการ
2 อัปโหลดไฟล์และรูปภาพด้วยปุ่มไปยังเซิร์ฟเวอร์ของคุณ หากคุณต้องการเสนอไฟล์สำหรับดาวน์โหลด คุณต้องจัดเก็บไว้ในเซิร์ฟเวอร์ของคุณหรือเชื่อมโยงปุ่มกับไฟล์บางไฟล์ที่อื่นในเครือข่าย ใช้ไคลเอนต์ FTP เพื่ออัปโหลดไฟล์ที่คุณต้องการให้พร้อมใช้งานในเซิร์ฟเวอร์ไซต์ของคุณ
- อัปโหลดรูปภาพปุ่มไปยังตำแหน่งเดียวกันบนเซิร์ฟเวอร์ที่มีหน้าที่คุณเพิ่มปุ่มนี้
3 เขียนซอร์สโค้ดสำหรับดาวน์โหลด ปุ่มดาวน์โหลดซึ่งแสดงผลเป็นรูปภาพ ทำงานในลักษณะเดียวกับลิงก์อื่นๆ ทั้งหมดใน HTMLคัดลอกโค้ดต่อไปนี้ลงในโปรแกรมแก้ไขของคุณ:
4 ป้อนข้อมูลไฟล์และรูปภาพ แทนที่ "ตำแหน่งการดาวน์โหลด" ด้วย URL ดาวน์โหลดจริง รวมถึงคำนำหน้า HTTP: // หรือ FTP: // แทนที่ "ไฟล์รูปภาพ" ด้วยชื่อไฟล์ของรูปภาพปุ่ม หากไฟล์นั้นอยู่บนเซิร์ฟเวอร์ในตำแหน่งเดียวกับเพจ คุณไม่จำเป็นต้องระบุพาธแบบเต็ม
- แทนที่ "Hover Text" ด้วยข้อความที่ควรปรากฏเมื่อผู้ใช้วางเมาส์เหนือรูปภาพปุ่ม
- แทนที่ "X" และ "Y" ด้วยความกว้างและความสูงของรูปภาพเป็นพิกเซลตามลำดับ
- อย่าลืมเพิ่มรายการเหล่านี้ทั้งหมดในเครื่องหมายคำพูดคู่
5 ป้อนซอร์สโค้ดบนหน้าของคุณ วางรหัสในตำแหน่งที่ปุ่มควรปรากฏ อัปโหลดโค้ดใหม่ จากนั้นเปิดหน้าเว็บของคุณเพื่อดูว่าปุ่มใช้งานได้หรือไม่ ตรวจสอบว่าข้อความคำใบ้ปรากฏขึ้นเมื่อวางเมาส์เหนือและรูปภาพนั้นมีขนาดที่ถูกต้อง
คำเตือน
- ห้ามอัปโหลดไฟล์ที่ละเมิดกฎหมายลิขสิทธิ์ เนื่องจากอาจส่งผลให้ต้องเสียค่าปรับจำนวนมากหรือถึงขั้นจำคุก
- เป็นการดีกว่ามากที่จะอัปโหลดไฟล์ไปยังเซิร์ฟเวอร์ของคุณเองและแชร์ไฟล์เหล่านั้นในภายหลัง แทนที่จะต้องพึ่งพาไซต์อื่นๆ ที่จัดเก็บไฟล์เหล่านั้น หากคุณคัดลอกลิงก์ไปยังตำแหน่งไฟล์จากเว็บไซต์อื่น ปุ่มดาวน์โหลดที่คุณสร้างจะใช้งานได้ตราบใดที่ลิงก์นั้นยังใช้ได้ คุณจะต้องตรวจสอบการทำงานของปุ่มหรือลิงก์บนไซต์ที่คุณใช้เป็นระยะเพื่อให้แน่ใจว่าผู้ใช้จะสามารถดาวน์โหลดไฟล์ได้เมื่อคลิกที่ปุ่ม และจะไม่คลิกที่ลิงก์เสียเนื่องจาก ความจริงที่ว่าไฟล์นั้นไม่มีอยู่อีกต่อไป