为音乐家/艺术家构建的免费网站模板,用于宣传他们的音乐并与观众建立联系。
特征
- 可定制的英雄图像和响应式图片模式
- 基于 Javascript 的音乐播放器和 YouTube 缩略图生成器针对页面加载进行了优化
- 具有验证和后端集成的邮件列表和联系表格
- 其他部分包括“关于”、“商品”、“新闻报道”和“节目”部分
- 项目代码符合 HTML 和 CSS W3C 验证合规性(不包括黑白 CSS 皮肤)
入门
注意:建议您使用使用 php 设置的本地 Web 服务器和邮件服务器来进行完整的测试功能。
编辑标题和导航:
- 在 id“logo”中替换为您的艺术家/乐队名称
- 将导航链接更新为您自己的
编辑主页部分:
- 在 style.css 中的“英雄”类中替换您的图片名称
- 编辑 index.html 中“home”类中的标语、号召性用语 (CTA) 和 CTA 链接
编辑邮件列表:
- 按照 David McCoy 的教程创建您自己的 Google Sheets 邮件列表:https://medium.com/@dmccoy/how-to-submit-an-html-form-to-google-sheets-without-google-forms- b833952cc175
- 通过 mailingList.js 中的“url”替换您新创建的谷歌表格链接
- 替换 index.html 中的号召性用语和标语
编辑关于部分:
- 将社交媒体链接更改为您自己的链接
- 编辑index.html中的“About”类
编辑商品部分:
- 压缩图片并减少像素以优化加载时间
- 将您的图片复制到目录 /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=”后面的文本
- 将“youtube-player”类中的 data-id 文本粘贴到 index.html 的“Video”类中
编辑节目部分:
编辑index.html 中的“Shows”类。
编辑图片部分:
- 压缩图片以优化加载时间
- 将图片复制到目录 /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 文档的 header 中的 href 链接更改为 css/style_black_white.css
内置
- HTML5
- CSS3
- jQuery/JavaScript/AJAX
- PHP5
贡献
向此存储库做出贡献时,您可以分叉并提交拉取请求。添加您正在做的事情的描述,我会审核它。
版本控制
版本2.3.0
作者
- 马修·沃尔德伦- (http://waldronmatthew.com)
执照
该项目已根据 MIT 许可证获得许可 - 有关详细信息,请参阅 LICENSE.md 文件。
请遵守使用条款和网站积分页面。
致谢
非常感谢我使用 MIT 许可代码的所有开发人员。它们列在“网站积分”页面上。