如何製做一個漂亮的生日祝福網頁

 在線製做地址：

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/

命令參考：

完