음악가/아티스트가 자신의 음악을 홍보하고 청중과 소통할 수 있도록 구축된 무료 웹사이트 템플릿입니다.
특징
- 사용자 정의 가능한 히어로 이미지 및 반응형 사진 모달
- 페이지 로딩에 최적화된 자바스크립트 기반 음악 플레이어 및 YouTube 썸네일 생성기
- 검증 및 백엔드 통합이 포함된 메일링 목록 및 문의 양식
- 정보, 상품, 뉴스 보도 및 프로그램 섹션을 포함한 추가 섹션
- 프로젝트 코드는 HTML 및 CSS W3C 유효성 검사 규정을 준수합니다(흑백 CSS 스킨 제외).
시작하기
참고: 전체 테스트 기능을 위해서는 PHP로 설정된 로컬 웹 서버와 메일 서버를 사용하는 것이 좋습니다.
헤더와 탐색을 편집하려면:
- ID "로고"에서 아티스트/밴드 이름으로 바꾸세요.
- 탐색 링크를 자신만의 것으로 업데이트하세요.
홈 섹션을 편집하려면:
- style.css의 "hero" 클래스에서 사진 이름을 대체하십시오.
- index.html의 'home' 클래스에서 태그라인, 클릭 유도 문구(CTA) 및 CTA 링크를 편집하세요.
메일링 리스트를 편집하려면:
- David McCoy의 튜토리얼(https://medium.com/@dmccoy/how-to-submit-an-html-form-to-google-sheets-without-google-forms-)에 따라 나만의 Google 스프레드시트 메일링 리스트를 만드세요. b833952cc175
- mailingList.js의 "url"을 통해 새로 생성된 Google 시트 링크를 교체하세요.
- index.html에서 클릭 유도 문구와 태그라인을 대체하세요.
정보 섹션을 편집하려면:
- 소셜 미디어 링크를 자신의 링크로 변경하세요.
- index.html에서 "정보" 클래스 편집
상품 섹션을 편집하려면:
- 사진을 압축하고 픽셀을 줄여 로드 시간을 최적화하세요
- 사진을 dir /pictures/merch에 복사하세요.
- style.css에서 클래스 ".a, .b, .c" 등의 사진 이름을 대체하세요.
- index.html의 "grid" 클래스에서 사진 이름을 대체하십시오.
음악 섹션을 편집하려면:
- index.html에서 클래스 "음악" 편집
- 음악 링크를 자신만의 것으로 변경하세요.
- style.css의 "music-hero" 클래스에서 사진 이름을 대체하십시오.
추천곡을 추가하려면:
- DAW를 사용하여 노래를 30초 클립 미리보기로 편집하여 로드 및 스트리밍 시간을 최적화하세요.
- dir /music에 노래를 넣으세요
- musPlayer.js에서 배열 var "files" 편집
- 배열에 노래를 추가하려면 "Your Song Title.mp3" 형식을 사용하십시오.
뉴스 섹션을 편집하려면:
- 사진을 압축하고 픽셀을 줄여 로드 시간을 최적화하세요
- 사진을 /pictures/blog 디렉토리에 복사하세요.
- style.css에서 클래스 ".a, .b, .c" 등의 사진 이름을 대체하세요.
- index.html의 "grid" 클래스에서 사진 이름과 블로그 제목을 대체하세요.
- blog_(page) html 페이지에 블로그 게시물을 작성하세요.
언론 섹션을 편집하려면:
index.html에서 클래스 "Press"를 편집합니다.
비디오 섹션을 편집하려면:
- 추천하고 싶은 YouTube 동영상으로 이동하세요.
- YouTube 링크에서 "v=" 뒤의 텍스트를 복사하세요.
- index.html의 "Video" 클래스에 있는 "youtube-player" 클래스에 data-id 텍스트를 붙여넣습니다.
프로그램 섹션을 편집하려면:
index.html에서 "Shows" 클래스를 편집하세요.
사진 섹션을 편집하려면:
- 사진을 압축하여 로드 시간을 최적화하세요
- 사진을 dir /pictures/gallery에 복사하세요.
- style.css에서 클래스 ".a, .b, .c" 등의 사진 이름을 대체하세요.
- index.html의 "grid" 클래스에서 사진 이름을 대체하십시오.
문의 양식을 편집하려면:
- form.php에 이메일 주소를 입력하세요
- form.php에서 응답 메시지를 사용자 정의하세요.
바닥글을 편집하려면:
- 바닥글 링크를 자신만의 것으로 업데이트하세요.
- terms.html에서 아티스트/밴드 이름으로 바꾸세요.
스킨으로 맞춤 설정하세요!
새로운 흑백 테마를 지금 사용할 수 있습니다.
- css/style_black_white.css의 이름을 css/style_black_white로 바꿉니다.
또는
- 모든 HTML 문서에 대해 헤더의 href 링크를 css/style_black_white.css로 변경합니다.
다음으로 제작됨
- HTML5
- CSS3
- jQuery/자바스크립트/AJAX
- PHP5
기여
이 저장소에 기여할 때 풀 요청을 포크하고 제출할 수 있습니다. 수행 중인 작업에 대한 설명을 추가하면 검토하겠습니다.
버전 관리
버전 2.3.0
저자
- 매튜 월드론 - (http://waldronmatthew.com)
특허
이 프로젝트는 MIT 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 LICENSE.md 파일을 참조하세요.
이용약관 및 웹사이트 크레딧 페이지를 준수하시기 바랍니다.
감사의 말
MIT 라이센스 코드를 사용한 모든 개발자에게 큰 감사를 드립니다. 이는 "웹사이트 크레딧" 페이지에 나열되어 있습니다.
