如何制做一个漂亮的生日祝福网页

 在线制做地址：

http://blessing.code996.cn

 

开始前

完成本教程须要如下技能要求：

1. 熟悉Git

2. 熟悉HTML及HTML5

3. 熟悉Css及Css3

4. 熟悉JavaScript

5. 熟悉JQuery

6. 了解PhotoShop

7. 了解SVG动画

若是您拥有以上技能，可在3到5小时内完成做品。

正式开始

步骤一：网页制做

1. 收集素材
2. 制做html页面
3. 添加样式
4. 添加照片
5. 添加音乐
6. 添加其余
7. 本地预览
8. 调整样式
9. 支持微信

步骤二：上传到静态服务器：

1. 注册任意一个代码托管网站，如码云，地址：https://gitee.com/
2. 建立项目仓库，参考：https://gitee.com/help/articles/4120
3. 下载安装git，上传你的代码，git命令参考：https://www.code996.cn/post/2016/git-base/
4. 打开pages服务，参考： https://gitee.com/help/articles/4136
5. 等待部署成功，打开项目地址，查看。
6. 完成

步骤详解

1. 素材包括生日快乐歌，作背景音乐；漂亮的图片；相片；动画；好看的字体文件等 请在各素材网站根据口味获取，这里就不提供了。

2. HTML框架

3.手机端隐藏滚动条

<meta name="viewport" content="width=device-width, initial-scale=1">

4.手机端防止拖动

5.mp3播放相关函数

6.烟花

7.蛋糕动画svg

8.背景图片样式

9.样式

略

10.HTML

HTML是超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于建立网页的标准标记语言。您可使用 HTML 来创建本身的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

CSS是层叠样式表 (Cascading Style Sheets)样式定义如何显示HTML元素，样式一般存储在样式表中 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题，外部样式表能够极大提升工做效率 外部样式表一般存储在 CSS 文件中，多个样式定义可层叠为一。

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可普遍用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 JavaScript 是脚本语言，JavaScript 是一种轻量级的编程语言。JavaScript 是可插入 HTML 页面的编程代码。JavaScript 插入 HTML 页面后，可由全部的现代浏览器执行。

11.码云 码云是开源中国社区2013年推出的基于 Git 的彻底免费的代码托管服务，这个服务是基于 Gitlab 开源软件所开发的，咱们在 Gitlab 的基础上作了大量的改进和定制开发，目前已经成为国内最大的代码托管系统，致力于为国内开发者提供优质稳定的托管服务。

码云主要功能 码云除了提供最基础的 Git 代码托管以外，还提供代码在线查看、历史版本查看、Fork、Pull Request、打包下载任意版本、Issue、Wiki 、保护分支、代码质量检测、PaaS项目演示等方便管理、开发、协做、共享的功能。

码云 Pages 是一个免费的静态网页托管服务，您可使用 码云 Pages 托管博客、项目官网等静态网页。若是您使用过 Github Pages 那么您会很快上手使用码云的 Pages服务。目前码云 Pages 支持 Jekyll、Hugo、Hexo编译静态资源。

12.Git Git是一种版本控制工具，是一种记录一个或若干文件内容变化，以便未来查阅特定版本修订状况的系统。在本书所展现的例子中，咱们仅对保存着软件源代码的文本文件做版本控制管理，但实际上，你能够对任何类型的文件进行版本控制。若是你是位图形或网页设计师，可能会须要保存某一幅图片或页面布局文件的全部修订版本（这或许是你很是渴望拥有的功能）。采用版本控制系统（VCS）是个明智的选择。有了它你就能够将某个文件回溯到以前的状态，甚至将整个项目都回退到过去某个时间点的状态。你能够比较文件的变化细节，查出最后是谁修改了哪一个地方，从而找出致使怪异问题出现的缘由，又是谁在什么时候报告了某个功能缺陷等等。使用版本控制系统一般还意味着，就算你乱来一气把整个项目中的文件改的改删的删，你也照样能够轻松恢复到原先的样子。但额外增长的工做量却微乎其微。

详情参考： http://git.oschina.net/progit/

命令参考：

完