สร้างปุ่ม "ย้อนกลับ" วิธีทำปุ่มย้อนกลับบนหน้าเว็บ ปุ่มย้อนกลับ
ในวิดีโอบทช่วยสอนนี้ เราจะดู 3 ตัวเลือกสำหรับวิธีสร้างปุ่ม BACK เพื่อย้ายไปยังส่วนต่างๆ ของไซต์ไปยังหน้าก่อนหน้าในลำดับย้อนกลับ ปุ่มย้อนกลับยังจำเป็นเมื่อลิงก์จากหลายหน้าของไซต์ (A1, A2...อัน) นำไปสู่หน้าเดียวกัน (B) และจากหน้านี้ (B) คุณต้องกลับไปยังหน้าก่อนหน้า (อัน) ของไซต์ที่คุณไปถึงหน้า (B)
ชมวิดีโอบทช่วยสอนใหม่:
รหัสสำหรับปุ่ม "ย้อนกลับ" สำหรับการวางตำแหน่งบนเว็บไซต์:< a href = "#" onclick = > < img src = "assets/back2.png" alt = "กลับ" / > < / a > |
ในบทช่วยสอนแบบวิดีโอนี้ เราจะสร้างปุ่มเพื่อกลับไปยังหน้าก่อนหน้าของไซต์ โปรแกรมอะโดบีรำพึง ปุ่มนี้จะกลับมาตามเส้นทางเดียวกับที่เราติดตามบนไซต์
ปุ่มย้อนกลับ โครงการบทเรียนในการทำบทเรียนนี้ ฉันได้เตรียมโปรเจ็กต์เล็ก ๆ หรือเรียกว่าเล็กไม่ได้ ซึ่งประกอบด้วยหน้าระดับบนสุด หน้าระดับแรก และสำหรับหน้า "หน้า 2" ยังมีลูกอีกหลายคน หน้า และเพื่อความหลากหลาย ฉันจึงสร้างเทมเพลตขึ้นมาสองแบบ ฉันใช้เทมเพลตแรกกับสามหน้าแรก และฉันก็ใช้เทมเพลตที่สองกับคนอื่นๆ
มาเริ่มกันเลย เราจะสร้างปุ่มย้อนกลับใน "เทมเพลต C" เพื่อให้ปรากฏบนหน้าเว็บที่ใช้เทมเพลตนี้ทันที ฉันไปแก้ไขเทมเพลตนี้ และนี่คือที่ที่เราจะแทรกปุ่มย้อนกลับ
ปุ่มย้อนกลับ 3 วิธีเราสามารถแทรกปุ่ม "ย้อนกลับ" ได้สามวิธี ฉันมี ไฟล์พิเศษซึ่งฉันได้เตรียมไว้ในสมุดจดแล้ว และมีสามวิธีสามรหัสซึ่งเราสามารถแทรกปุ่มดังกล่าวบนเว็บไซต์ได้
ปุ่มย้อนกลับ วิธีที่ 1 - ข้อความธรรมดาตัวเลือกแรกเป็นเพียงข้อความ ปุ่มจะอยู่ในรูปแบบข้อความ ฉันคัดลอกรหัสนี้:
< input type = "button" onclick = "history.back();" value = "กลับ" / > |
และฉันก็วางมันลงในเทมเพลต มีลักษณะเช่นนี้ เราแค่มีข้อความและมันถูกเน้นด้วยสีขาว ฉันจะโพสต์ไว้ที่นี่ เพื่อให้เข้าใจว่าทั้งหมดนี้ทำงานอย่างไร เรากดปุ่ม Ctrl+Alt+E เพื่อดูเว็บไซต์ทั้งหมดพร้อมทั้งหน้าทั้งหมดในเบราว์เซอร์ นี่คือลักษณะของหน้าหลักของเว็บไซต์ เราสามารถท่องเมนูเลือกหน้าได้ ที่นี่เรามีเมนูแบบเลื่อนลง และจากหน้าหลักเราไปที่หน้า “หน้า 3” ทันที และที่นี่เรามีปุ่มย้อนกลับ
ปุ่มนี้ใช้งานได้ แต่เมื่อคุณวางเมาส์ไว้เหนือปุ่มนั้น มือที่มีนิ้วจะไม่ปรากฏขึ้น เราสามารถคลิกที่ปุ่มนี้ได้อย่างปลอดภัย และเราจะถูกเปลี่ยนเส้นทางกลับไปยังหน้าหลัก ในทำนองเดียวกันเราสามารถคลิกที่หน้า “หน้า 3” จากนั้นไปที่หน้า “หน้า 4” แล้วคลิกที่ปุ่ม “ย้อนกลับ” มันจะพาเราไปที่หน้า “หน้า 3” และถ้าเราคลิก ที่ปุ่ม “ย้อนกลับ” อีกครั้ง” จากนั้นมันจะพาเราไปที่หน้าหลัก นี่คือการทำงานของปุ่มย้อนกลับ
แต่ปุ่มนี้แทบจะเรียกได้ว่าเป็นปุ่มไม่ได้เนื่องจากเป็นเพียงคำจารึกที่เน้นด้วยสีขาว หากเราต้องการแก้ไขใน Muse เราก็เปลี่ยนได้แต่ขนาดของข้อความ เช่น ผมจะใส่ "36" ไว้ตรงนี้เพื่อให้คุณเห็นได้ดีขึ้น ในความคิดของฉัน เราไม่สามารถเปลี่ยนสีของข้อความได้ ทีนี้ผมจะลองใส่สีแดงดู ฉันเลือกสีแดง แต่สิ่งนี้ไม่ได้ส่งผลกระทบต่อตัวอักษรของเราแต่อย่างใด ดังนั้นเราจึงไม่สามารถเปลี่ยนสีได้ เราสามารถเปลี่ยนขนาดได้ ลองทำให้มันหนาและอยู่ตรงกลาง สิ่งที่เราทำได้คือแก้ไขแบบนี้ หากเราต้องการเติมบล็อกนี้ เช่น ทำให้เป็นสีส้ม ข้อความของเราจะยังคงเน้นเป็นสีขาว และโดยหลักการแล้ว มันดูไม่สวยงามนัก
ปุ่มย้อนกลับ วิธีที่ 2 – ข้อความลิงก์< a href = "#" onclick = "history.back();return false;" >กลับ< / a > |
ตอนนี้เราจะคัดลอกมัน ฉันกด ctrl+C และไปที่โปรแกรม แล้วกด ctrl+V เพื่อวางลงในไซต์ ดูเหมือนลิงค์นี้ครับ ลิงค์ของเราเป็นสีฟ้า ตอนนี้เธอมองไม่เห็นมากนัก เรามาสร้างฟอนต์ตัวที่ 36 เพื่อขยายดูใกล้ๆ กัน ที่นี่เรามีเพียงลิงค์สีน้ำเงิน หากตอนนี้เรากด ctrl+alt+E เราจะเห็นว่าเมื่อดูแล้วจะดูเหมือนลิงก์สีน้ำเงินปกตินี้ ไปดูอีกสองสามครั้งคลิกหนึ่งครั้งสองครั้งกลับมา ลิงค์นี้มีลักษณะเหมือนกับลิงค์ปกติ
เราสามารถใช้รูปแบบลิงก์กับมันใน Adobe Muse ค้นหารูปแบบลิงก์ในส่วน "ไฮเปอร์ลิงก์" เลือก "แก้ไขรูปแบบลิงก์" ฉันมีเวอร์ชันที่เตรียมไว้แล้ว ตอนนี้ผมมีเวอร์ชั่นที่เตรียมไว้แล้ว คุณจะเห็นว่ามันมีสไตล์ที่นำไปใช้กับมัน ใน สภาพมาตรฐานและเมื่อเลื่อนเคอร์เซอร์เมาส์จะเป็นสีน้ำเงิน และเมื่อสถานะแอ็คทีฟเป็นสีแดง คุณเห็นมันในขณะที่ดู สไตล์ที่สองที่ฉันสร้างเป็นเพียงรัฐสีดำทั้งหมด เราสามารถใช้สไตล์นี้กับปุ่มนี้ได้ ตัวอย่างเช่น ฉันจะเลือกและใช้สไตล์ที่กำหนดเองนี้กับปุ่มนี้ แล้วคุณจะเห็นว่าจารึกของเรากลายเป็นสีดำ
ตรงนี้เราสามารถเติมสีได้เช่นกัน เช่น ฉันจะเติมสีส้มอันเดียวกัน ที่นี่คุณสามารถแก้ไขข้อความได้แล้ว มาวางไว้ตรงกลางแล้วทำให้มันเป็นตัวหนา และโดยหลักการแล้ว ตัวเลือกนี้คล้ายกับปุ่มมากกว่าอยู่แล้ว ไม่มีไฮไลต์สีขาวอีกต่อไปแล้วและโดยหลักการแล้วตัวเลือกนี้ค่อนข้างเหมาะสมอยู่แล้ว ขณะเรียกดู (ctrl+alt+E) ให้ไปที่หน้า "page-3" ไปที่หน้า "page-4" แล้วคลิกอีกครั้ง ปุ่มนี้ทำงานเหมือนกับปุ่มแรกทุกประการ แต่มีตัวเลือกเพิ่มเติมสำหรับการแก้ไขการออกแบบ
ปุ่มย้อนกลับ วิธีที่ 3 – ปุ่ม – รูปภาพและตัวเลือกที่สามสำหรับวิธีที่เราจะวางปุ่มก็คือปุ่มนั้นจะเป็นรูปภาพ ฉันคัดลอกรหัสนี้:
< a href = "#" onclick = "history.back();return false;" > < img src = "img.png" alt = "รูปภาพ" / > < / a > |
ฉันไปที่ Muse แล้วคลิก "แทรก" และตัวเลือกที่สามนี้ที่เรามีคือรูปภาพ เพื่อให้เรามีรูปภาพบางประเภทที่นี่ เราจำเป็นต้องดาวน์โหลดไฟล์รูปภาพบางส่วนจากอินเทอร์เน็ตหรือสร้างขึ้นเอง เราเพิ่มรูปภาพผ่านฟังก์ชัน "ไฟล์" ของโปรแกรมเลือก "เพิ่มไฟล์สำหรับการถ่ายโอน" ฉันได้ดาวน์โหลดรูปภาพสองสามรูปจากอินเทอร์เน็ตแล้ว เราสามารถเลือกได้อย่างหนึ่ง มาเลือกอันนี้ด้วยปุ่มย้อนกลับ ตอนนี้ถ้าเราดูในส่วน "ทรัพยากร" เราได้เพิ่มปุ่ม "back2.png" - "ส่ง" เรามีไฟล์นี้สำหรับการโอน< a href = "#" onclick = "history.back();return false;" > < img src = "assets/back2.png" alt = "กลับ" / > < / a >
เพียงคลิก "ตกลง" เราจะไม่เห็นการเปลี่ยนแปลงใด ๆ ใน Muse เอง เราจะเห็นการเปลี่ยนแปลงทั้งหมดเมื่อดูไซต์ในเบราว์เซอร์เท่านั้น ลองกด ctrl+alt+E อีกครั้งเพื่อดูไซต์ในเบราว์เซอร์และลองท่องหน้าเว็บของเรา
ปุ่มย้อนกลับ ดูผลลัพธ์ไปที่หน้า เช่น "หน้า 2-1" ตอนนี้ไปที่หน้า "หน้า-2" ตอนนี้ไปที่หน้า "หน้า 3" จากนั้นไปที่หน้า "หน้า-4" และตอนนี้หากเรากดปุ่มย้อนกลับ เราจะย้อนกลับตามลำดับเพื่อย้อนกลับไปยัง หน้าแรกเว็บไซต์. คลิก "ย้อนกลับ" ย้ายไปหน้า "หน้า 3" ไปที่หน้า "หน้า 2" และที่นี่เราไม่มีปุ่มอีกต่อไป หากเราวางไว้ในเทมเพลตที่ใช้กับหน้า “หน้า 2” เราก็จะมีปุ่ม “ย้อนกลับ” ที่นี่ด้วย เนื่องจากเราไม่มี เราจึงต้องไปที่หน้าหลักโดยคลิกที่ปุ่ม "หน้าแรก" ในเมนูเท่านั้น ตัวอย่างเช่น ไปที่หน้า “หน้า 2-2-2” จากนั้นไปที่หน้า “หน้า 2-2-1” จากนั้นไปที่หน้า “หน้า-3” และ “หน้า-4” และตอนนี้อยู่ในลำดับย้อนกลับ: หน้า "หน้า 3", หน้า "หน้า 2-2-1", หน้า "หน้า 2-2-2" และไปที่หน้าหลัก
แน่นอนว่าคุณไม่จำเป็นต้องวางปุ่มนี้บนเว็บไซต์ของคุณ แต่ใช้ลูกศรปกติในเบราว์เซอร์ของคุณ แต่ถ้าคุณต้องการให้ปุ่มดังกล่าวปรากฏบนเว็บไซต์ของคุณ คุณสามารถทำได้ด้วยวิธีเหล่านี้... และลิงก์ไปยังบทความจะอยู่ใต้วิดีโอนี้ นั่นคือทั้งหมดที่ Dmitry Shapovalov อยู่กับคุณ ชอบวิดีโอนี้ สมัครรับข้อมูลช่อง เขียนความคิดเห็นด้านล่าง และฉันจะบอกลาคุณจนกว่าจะถึงบทเรียนวิดีโอถัดไป
สวัสดีตอนบ่าย ฉันมีคำถามเกี่ยวกับวิธีการย้ายปุ่มกลับและวางไว้ข้างปุ่มถัดไปเมื่อทำการสั่งซื้อ ลงก็หยุดทำงาน โค้ดรับผิดชอบ ..
มีวิธีแก้ไข
สวัสดี มีใครช่วยบอกวิธีทำปุ่มย้อนกลับ เช่น ในตะกร้าสินค้า ให้คนสามารถกลับไปยังหน้าก่อนหน้าได้ไหม
แทรกปุ่มทุกที่ที่คุณต้องการลงในเทมเพลต เช่น นี้
+1
เมื่อฉันกดปุ่มย้อนกลับบนเบราว์เซอร์ สไตล์ทั้งหมดดูเหมือนจะหายไปจนกว่าฉันจะรีเฟรชหน้า ธีมเริ่มต้นควรแสดงดังภาพหน้าจอด้านล่าง) บอกฉันว่าปัญหาคืออะไร
สวัสดี ฉันได้สร้างปุ่ม "ย้อนกลับ" ในรถเข็น ไม่ใช่แค่ปุ่ม แต่เป็นเพียงลิงก์ที่มีโค้ด ย้อนกลับตอนนี้เมื่อกลับขึ้นรถเข็นแล้ว...
มีวิธีแก้ไข
สวัสดีตอนบ่าย! ฉันพบปัญหาต่อไปนี้: เมื่อเพิ่มผลิตภัณฑ์ลงในตะกร้าและกดปุ่ม "ย้อนกลับ" ในเบราว์เซอร์ ข้อมูลเกี่ยวกับผลิตภัณฑ์ในตะกร้า (ใน บล็อกเพิ่มเติม) จะไม่ถูกบันทึกจนกว่าคุณจะรีเฟรชเพจ เหล่านั้น. ไปที่ไซต์ไป...
ไซต์ที่คุณระบุใช้ปลั๊กอินสำหรับรถเข็น คุณสามารถใช้การส่งสินค้าเพิ่มเติมไม่ใช่ไปที่?html=1 แต่ไปที่?html=1&items=1; รถเข็น
สวัสดีตอนบ่าย ในแต่ละขั้นตอนระหว่างการชำระเงิน จะมีการระบุปุ่ม "ถัดไป" ในหัวข้อ "Supreme" ฉันพบรหัสปุ่ม: