写在前面的话
参加工作后因为工作需要，博主暂时不搞计算机视觉和深度学习，转向Web开发了。这篇博客是学习Web开发的第一篇博客，记录下自己设计的第一个网站blateyang.github.io的过程，以后会不定时进行更新。以下是网站的截图:
一、安装基础软件
需要的基础软件主要有：
- 代码编辑器
本人倾向使用代码编辑器VSCode进行编辑，界面简洁美观，具有自动缩进和自动补全等功能，当然浏览器本身就是一个很好的代码编辑和调试工具，此外还有一些前端代码在线编辑网站（例如CodePen,HTML/CSS/JS在线工具）。 - 浏览器
本人倾向使用火狐浏览器或谷歌浏览器。 - Web服务器（非必须）
比如java的tomcat，可用于本地发布，若要发布到互联网，可通过github托管，后文会详细介绍。
二、对网站进行初步的设计和构思
三、设计文件的结构
|- 项目主目录
| |-images
| |-scripts
| |-styles
| |-my-web-projects
| | |-bound-ball
| | |-gallery-start
| | |-jokes-generator
| |-index.html
四、编写网站主页的HTML
HTML的作用是对网页内容进行结构化并赋予语义（标题、段落、列表等），如果拿房屋装修来类比，HTML就好比是毛坯房，有不同功用的房间，比如客厅、卧室、厨房、卫生间等。如下是网站主页的HTML代码index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blateyang的第一个网站</title>
<link href="styles/style-table-layout.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel = "shutcut icon" href="images/sunflower.jpg">
<script src="scripts/main.js" async></script>
</head>
<body>
<h1>Blateyang的第一个网站</h1>
<img id="HomeImg" src="images/sunflower2.JPG" alt="HomePage image">
<p id="hint">点击图片试一试</p>
<p> 这是我制作的第一个网站，主要分了以下几步：
<ol>
<li>安装Web开发软件:编辑器（如VScode)、浏览器还有Web服务器(python的django,java的tomcat等）</li>
<li>对项目进行初步的设计和构思</li>
<li>设计文件的结构</li>
<li>编写html呈现内容</li>
<li>编写CSS规定内容的样式style</li>
<li>编写javascript脚本用于网页交互</li>
<li>最后发布网页</li>
</ol>
</p>
<p>参考链接：<a href="https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web">HTML基础：学习web开发</a></p>
<p>我练习过的其它一些项目:</p>
<div class="project">
<div class="img-div">
<img id="jokesImg" src="images/jokes-generator.PNG" alt="">
</div>
<div class="project-desc">
<a href="my-web-projects/jokes-generator/index.html"><p class="project-name">笑话生成器</p></a>
<ul>
<li>点击“随机生成笑话”按钮时生成一则笑话。</li>
<li>若“生成”按钮按下之前，你在“输入自定义的名字”文字框中输入了一个自定义名字，那么生成的笑话中原有的名字（李雷 / Bob）将被取代。</li>
<li>通过选择国家名称的单选按钮来确定界面语言以及笑话中温度和重量的制式。</li>
<li>点一次按钮，生成一个新故事。</li>
</ul>
</div>
</div>
<div class="project">
<div class="img-div">
<img src="images/gallery.PNG" alt="" >
</div>
<div class="project-desc">
<a href="my-web-projects/gallery-start/index.html"><p class="project-name">图片画廊</p></a>
<ul>
<li>点击缩略图可展示不同的图片</li>
<li>点击左上角的变暗/变亮可调整图片亮度</li>
</ul>
</div>
</div>
<div class="project">
<div class="img-div">
<img id="ballImg" src="images/evilCircle.PNG" alt="">
</div>
<div class="project-desc">
<a href="my-web-projects/bound-ball/index.html"><p class="project-name">恶魔圈</p></a>
<ul>
<li>小球相撞后会改变颜色</li>
<li>小球碰到恶魔圈后会被它吃掉</li>
<li>若为电脑端，可通过W（上）S（下）A（左）D（右）键控制恶魔圈在屏幕中移动</li>
<li>若为移动端，可直接拖动恶魔圈</li>
<li>所有小球被恶魔圈吃掉后游戏结束，会显示花费的时间，看你要花多少时间</li>
</ul>
</div>
</div>
</body>
</html>
五、编写CSS样式表
CSS（Cascade Style Sheet）是一种样式规则语言，用于对网页进行修饰（比如设置文字字体、大小、颜色等），好比对毛坯房进行装修（铺地砖、刷墙等），它也可以为网页添加一些简单的动画效果，例如鼠标悬浮在某些文字上改变颜色。以下是网站主页的css代码style.css：
@charset "UTF-8";
html {
/* 发布到github上的网页要与在本地浏览器显示的一致，本地浏览器显示比例要缩放到25% */
font-family: 'Roboto', sans-serif;
/* background-color: #3f87ed; */
}
h1 {
margin: 0;
/* rem：相对于html根元素的字体大小， 1rem默认为16px */
padding: 2rem 0;
color: #3f87ed;
font-size: 6rem;
text-align: center;
text-shadow: 3px 3px 1px black;
}
#HomeImg {
display: block;
margin: 0 auto;
width: 20%;
/* width: 90%; */
}
p,
ol {
font-size: 2rem;
line-height: 2rem;
letter-spacing: 1px;
margin: 4px auto;
}
#hint {
font-size: 2rem;
color: #164e9e;
text-align: center;
}
body {
background-color: #FF9500;
}
.project {
/* 浮动布局 */
float:left;
width: 33%;
}
.img-div {
/* 采用表格布局的形式让图片居中 */
display:table-cell;
vertical-align: middle;
text-align: center;
height: 45rem;
}
.img-div img {
max-width: 90%;
}
a .project-name{
font-size: 3rem;
text-align: center;
margin: 4px auto;
}
ul{
font-size: 2rem;
margin: 0 4px;
}
注意为了让网页中不同尺寸的图片能够居中对齐，img-div采用了表格布局并将高度设置为了固定值。
利用CSS实现图片居中的一般方法（参考CSS居中图片）是
先给父级元素设置样式：
a、设定宽度和高度width、height
b、设置text-align:center vertical-align:middle
c、设置display:table-cell
再给图片设置max-width和max-height
六、编写JavaScript代码
JavaScript是一种动态脚本语言，用于给网页添加动态效果，实现用户和网站的动态交互，好比房屋装修好后给它通上水、电、网络。以下是网站主页的JavaScript代码main.js：
let myIm = document.querySelector("img");
myIm.onclick = function (){
let myImSrc = myIm.getAttribute("src");
if(myImSrc === "images/sunflower.jpg"){
myIm.setAttribute("src", "images/mozilla.jpg");
}
else{
myIm.setAttribute("src", "images/sunflower.jpg");
}
}
七、移动端适配
为了移动端也能访问本网站，在main.js前面增加下面一段代码，利用IsPC函数判断访问网站的设备是PC端还是移动端，若是移动端，将网页文本的字体大小进行修改。
// PC网页移动端适配
function IsPC(){
var userAgentInfo = navigator.userAgent;
var Agents = new Array("Android", "iPhone");
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) { flag = false; break; }
}
return flag;
}
if(!IsPC()){
document.documentElement.style.fontSize = "5px";
alert("为保证视觉效果，请将手机屏幕横过来");
}
另外还要注意在样式表中的长度单位尽量使用rem（相对html根元素的大小）和百分比，这样也便于网站内容根据设备尺寸进行自动调整。
要在浏览器中观察移动端的呈现效果可以按F12然后点击下面的图标查看
八、通过github发布网站
如果有github账号的话，直接在github中新建一个repository，将名字命名为username.github.io，其中username是你自己的用户名，然后将网站文件夹里面的所有内容拖放到repository中，最后commit提交即可。具体可参考通过github发布网站
如果这篇文章对你有帮助，请点个赞^_^。有兴趣的话，也可访问项目地址下载源码，也不要忘了给个star。
参考资料：
