# 網站文章編輯技巧
## 前提要求
1. 會最基礎的 HTML，知道如果修改標簽內的內容即可；
2. 認識 Bootstrap 的布局原理；
3. 熟悉常用的 Bootstrap 樣式和組件；
4. 熟悉 WOW 的動效樣式設置。
## 準備工作
1. Bootstrap3 在線編輯器：http://www.ibootstrap.cn/
2. 全面的 Bootstrap CSS 和組件參考：https://v3.bootcss.com/css/
2. EditPlus 本地編輯器安裝和使用
鏈接：https://pan.baidu.com/s/1WNE6hKcCK6H7DWSR654iTw 密碼：80js
3. 圖片優化處理工具：http://zhitu.isux.us/
4. 優酷視頻客戶端安裝：http://pd.youku.com/pc
5. WOW 動效參考 https://www.cnblogs.com/yangjunfei/p/6746926.html
## 關于如何上傳圖片視頻資源
1. 登陸 https://signin.aliyun.com/1537137460361421/login.htm
子賬號： dodoke@1537137460361421 密碼：12345678
3. 左側找到「對象存儲 OSS」，選擇 dodoke1 ，在右側標簽中選擇文件管理
4. 文件目錄創建和命名規范：不允許出現中文，空格，只允許字母小寫數字和下劃線，目錄和文件都一樣，上傳完成以后，點擊預覽可以看到文件的訪問地址
## 開始學習
### HTML 基礎
模板 HTML
~~~
<!DOCTYPE html>
<html lang="zh_CN" class="">
<head>
<link href="http://www.dodoke.com/static-dist/app/css/bootstrap.css?version=8.2.23" rel="stylesheet" />
<link href="http://www.dodoke.com/static-dist/app/css/main.css?version=8.2.23" rel="stylesheet" />
<link href="http://www.dodoke.com/static-dist/app/css/main-v2.css?version=8.2.23" rel="stylesheet" />
<link href="http://www.dodoke.com/static-dist/app/css/main-red-light.css?version=8.2.23" rel="stylesheet" />
<link href="http://www.dodoke.com/static-dist/zerotheme/css/main-red-light.css?v=3.1.8?version=8.2.23" rel="stylesheet" />
</head>
<body class="es-main-red-light es-nav-white custompage">
<div class="es-wrap">
<div id="content-container" class="container">
<div class="es-section">
<div class="section-header">
<h1>學校有住宿嗎？有食堂嗎？</h1>
</div>
<div class="editor-text">
<!-- 頁面自定義部分的開始（粘貼到編輯器源碼從這里開始） -->
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<div class="content-container">
<!-- 實際的內容填充區域開始 -->
<!-- 實際的內容填充區域結束 -->
</div>
<script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>
<script>
var wow = new WOW({
boxClass : 'wow',
animateClass : 'animated',
offset : 0,
mobile : true,
live : true
});
wow.init();
</script>
<!-- 頁面自定義部分的結束 -->
</div>
</div>
</div>
</div>
<script src="/bundles/translations/translator.min.js?version=8.2.23"></script>
<script src="http://www.dodoke.com/static-dist/libs/base.js?version=8.2.23"></script>
<script src="http://www.dodoke.com/static-dist/app/js/common.js?version=8.2.23"></script>
<script src="http://www.dodoke.com/static-dist/app/js/main.js?version=8.2.23"></script>
<script src="http://www.dodoke.com/static-dist/jianmotheme/js/main.js?version=8.2.23"></script>
<script src="http://www.dodoke.com/static-dist/app/js/default/header/index.js?version=8.2.23"></script>
</body>
</html>
~~~
