musicWebTemplate

เทมเพลตเว็บไซต์ฟรีที่สร้างขึ้นสำหรับนักดนตรี / ศิลปินเพื่อโปรโมตเพลงและเชื่อมต่อกับผู้ชม

คุณสมบัติ

• รูปภาพฮีโร่ที่ปรับแต่งได้และโมดอลรูปภาพตอบสนอง
• เครื่องเล่นเพลงที่ใช้ Javascript และเครื่องสร้างภาพขนาดย่อของ YouTube ได้รับการปรับให้เหมาะสมสำหรับการโหลดหน้าเว็บ
• รายชื่อผู้รับจดหมายและแบบฟอร์มการติดต่อพร้อมการตรวจสอบความถูกต้องและการบูรณาการส่วนหลัง
• ส่วนเพิ่มเติมรวมถึงส่วนเกี่ยวกับ สินค้า ข่าวสาร และรายการ
• รหัสโครงการตรงตามข้อกำหนดการตรวจสอบ HTML และ CSS W3C (ไม่รวมสกิน css สีดำและสีขาว)

เริ่มต้นใช้งาน

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

วิธีแก้ไขส่วนหัวและการนำทาง:

1. แทนที่ด้วยชื่อศิลปิน / วงดนตรีของคุณในรหัส "โลโก้"
2. อัปเดตลิงก์นำทางเป็นของคุณเอง

วิธีแก้ไขส่วนหน้าแรก:

1. แทนที่ชื่อรูปภาพของคุณในคลาส "hero" ใน style.css
2. แก้ไขแท็กไลน์ คำกระตุ้นการตัดสินใจ (CTA) และลิงก์ CTA ในคลาส "home" ใน index.html

หากต้องการแก้ไขรายชื่อผู้รับจดหมาย:

1. สร้างรายชื่ออีเมล Google ชีตของคุณเองโดยทำตามบทช่วยสอนโดย David McCoy: https://medium.com/@dmccoy/how-to-submit-an-html-form-to-google-sheets-without-google-forms- b833952cc175
2. แทนที่ลิงก์ Google ชีตที่สร้างขึ้นใหม่ด้วย "url" ใน mailingList.js
3. แทนที่คำกระตุ้นการตัดสินใจและสโลแกนของคุณใน index.html

วิธีแก้ไขส่วนเกี่ยวกับ:

1. เปลี่ยนลิงค์โซเชียลมีเดียเป็นของคุณเอง
2. แก้ไขคลาส "เกี่ยวกับ" ใน index.html

วิธีแก้ไขส่วนสินค้า:

1. บีบอัดรูปภาพของคุณและลดพิกเซลเพื่อเพิ่มประสิทธิภาพเวลาในการโหลด
2. คัดลอกรูปภาพของคุณไปที่ dir /pictures/merch
3. แทนที่ชื่อรูปภาพของคุณในคลาส ".a, .b, .c", ect... ใน style.css
4. แทนที่ชื่อรูปภาพของคุณในคลาส "grid" ใน index.html

วิธีแก้ไขส่วนเพลง:

1. แก้ไขคลาส "Music" ใน index.html
2. เปลี่ยนลิงค์เพลงเป็นของคุณเอง
3. แทนที่ชื่อรูปภาพของคุณในคลาส "music-hero" ใน style.css

วิธีเพิ่มเพลงเด่น:

1. แก้ไขเพลงของคุณโดยใช้ DAW ให้เป็นพรีวิวคลิป 30 วินาทีเพื่อเพิ่มประสิทธิภาพเวลาในการโหลดและสตรีมมิ่ง
2. นำเพลงไปไว้ที่ dir /music
3. แก้ไขอาร์เรย์ var "files" ใน musPlayer.js
4. หากต้องการเพิ่มเพลงในอาร์เรย์ ให้ใช้รูปแบบต่อไปนี้: "Your Song Title.mp3"

วิธีแก้ไขส่วนข่าว:

1. บีบอัดรูปภาพของคุณและลดพิกเซลเพื่อเพิ่มประสิทธิภาพเวลาในการโหลด
2. คัดลอกรูปภาพของคุณไปที่ dir /pictures/blog
3. แทนที่ชื่อรูปภาพของคุณในคลาส ".a, .b, .c", ect... ใน style.css
4. แทนที่ชื่อรูปภาพและชื่อบล็อกของคุณในคลาส "grid" ใน index.html
5. เขียนโพสต์บนบล็อกของคุณในหน้า blog_(page) html

วิธีแก้ไขส่วนข่าว:

แก้ไขคลาส "กด" ใน index.html

หากต้องการแก้ไขส่วนวิดีโอ:

1. นำทางไปยังวิดีโอ YouTube ที่คุณต้องการนำเสนอ
2. คัดลอกข้อความหลัง "v=" ในลิงก์ youtube
3. วางข้อความ data-id ในคลาส "youtube-player" ในคลาส "Video" ใน index.html

หากต้องการแก้ไขส่วนรายการ:

แก้ไขคลาส "รายการ" ใน index.html

หากต้องการแก้ไขส่วนรูปภาพ:

1. บีบอัดรูปภาพของคุณเพื่อเพิ่มประสิทธิภาพเวลาในการโหลด
2. คัดลอกรูปภาพของคุณไปที่ dir /pictures/gallery
3. แทนที่ชื่อรูปภาพของคุณในคลาส ".a, .b, .c", ect... ใน style.css
4. แทนที่ชื่อรูปภาพของคุณในคลาส "grid" ใน index.html

วิธีแก้ไขแบบฟอร์มการติดต่อ:

1. ป้อนที่อยู่อีเมลของคุณใน form.php
2. ปรับแต่งข้อความตอบกลับของคุณใน form.php

วิธีแก้ไขส่วนท้าย:

1. อัปเดตลิงก์ส่วนท้ายเป็นของคุณเอง
2. แทนที่ด้วยชื่อศิลปิน/วงดนตรีของคุณใน terms.html

ปรับแต่งด้วยสกิน!

ธีมขาวดำใหม่พร้อมใช้งานแล้ว

1. เปลี่ยนชื่อ css/style_black_white.css เป็น css/style_black_white

หรือ

1. เปลี่ยนลิงก์ href ในส่วนหัวเป็น css/style_black_white.css สำหรับเอกสาร html ทั้งหมด

สร้างด้วย

• HTML5
• CSS3
• jQuery/จาวาสคริปต์/AJAX
• PHP5

มีส่วนร่วม

เมื่อสนับสนุนพื้นที่เก็บข้อมูลนี้ คุณสามารถแยกและส่งคำขอดึงได้ เพิ่มคำอธิบายสิ่งที่คุณกำลังทำ แล้วฉันจะตรวจสอบ

การกำหนดเวอร์ชัน

เวอร์ชัน 2.3.0

ผู้เขียน

• แมทธิว วัลดรอน - (http://waldronmatthew.com)

ใบอนุญาต

โครงการนี้ได้รับอนุญาตภายใต้ใบอนุญาต MIT - ดูรายละเอียดในไฟล์ LICENSE.md

โปรดปฏิบัติตามข้อกำหนดการใช้งานและเครดิตเว็บไซต์

รับทราบ

ขอบคุณมากสำหรับนักพัฒนาทุกคนที่ฉันใช้รหัสลิขสิทธิ์ของ MIT มีการระบุไว้ในหน้า "เครดิตเว็บไซต์"