工具篇

达到目标

操作课时:10h
预期目标:本教程会告诉你,如何从零开始做一个简单的web网站,从拿到设计稿开始,PS切图,文本编辑器基本操作,到用Google浏览器进行开发调试,最后通过GIT协作开发发布到公网演示。在这里,你将一次性学会静态web应用会用到的所有的开发工具(PS + ATOM + GOOGLE CHROME + GIT + NGINX)。
最终效果:当韩非打开宝盒的时候,盒子里到底装了几把逆鳞宝剑?
上线预览地址:http://mylee.coding.me/course-1/

原图:

开始之前:

Step1. 使用PS打开设计稿切图

1、用PS打开jpeg图片(一般制作页面会提供PSD设计稿)

2、找到套索工具,并在图层上,勾勒出剑的轮廓

3、使用快捷键command+j(后面统一使用ctrl),右侧图层视图里会多出一个剑的图层

4、找到快速选中工具,可以选中图层,然后进行拖拽,这种效果就是我们之后页面上要实现的效果,随机出现多把逆鳞剑

5、使用快捷键,ctrl+c复制选中图层,ctrl+N新建一个图层,然后进去新建图层,ctrl+v粘贴,逆鳞剑就出现在新建图层中,隐藏白色背景(去掉眼睛),然后依次点击 文件 -> 导出 -> 储存为web所用格式 -> 选择png24(透明无损的图片)保存下来。

6、这样图片就切完了,可用于后面页面开发,如果想看更多细节,查考我写的另外文章《PS日常使用》

Step2. 使用ATOM编辑器开始编写页面

1、新建course-1文件夹,里面放入基本web页面模板,可以自己新建,也可以参考移动端模板

2、插件安装和相关快捷键学习参考ATOM编辑器

3、编写html代码

<div class="nilin-con">
<img src="./images/nilin.jpeg" alt="" class="nilin">
<img src="./images/nilin-jian.png" alt="" class="nilin-jian">
<p class="num"><span id="num">2</span>把逆鳞</p>
</div>

4、编写css代码

.nilin-con{
position: relative;
}
.nilin-con .nilin{
width: 100%;
height: auto;
}
.nilin-con .nilin-jian{
position: absolute;
width: 34.6%;
height: auto;
left: 20%;top: 22%;
transform: rotate(20deg);
}
.nilin-con .num{
position: absolute;
right: 16px;
top: 16px;
color: #fff;
font-size: 16px;
}
.nilin-con .num span{
color: red;
margin-right: 5px;
}

5、编写js代码

window.onload = function() {
// 随机生成剑数
var NUM = parseInt(Math.random()*10);
// 生成多把剑
var dom = document.querySelector(".nilin-con");
for(var i = 0;i < NUM;i++){
// 随机生成剑距离左边的位置 20% - 28%
var leftPos = (0.22 + 0.1*Math.random())*100;
// 随机生成剑距离上边的位置 22% - 28%
var topPos = (0.22 + 0.05*Math.random())*100;
// 随机生成剑距离上边的位置 10度 - 38度
var transformPos = parseInt(10 + 28*Math.random())
dom.innerHTML += '<img src="./images/nilin-jian.png" alt="" class="nilin-jian" style="left:'+ leftPos +'%;top:'+ topPos +'%;transform:rotate('+ transformPos +'deg);">';
}
// 剑数显示
document.getElementById('num').innerHTML = NUM;
}

Step3. 写代码时,用谷歌浏览器进行调试

具体浏览器操作可参考学习GOOGLE浏览器

Step4. 通过GIT,将本地代码放到远程coding网站

具体操作可参考学习GIT版本管理

其他工具

1、Nginx,配置多域名服务器
(待更新…)
具体操作可参考学习nginx

2、API调试工具
(待更新…)
具体操作可参考学习nginx