# 网站文章编辑技巧
## 前提要求
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>
~~~
