本文90%参考MDN
以mac电脑为例：
准备工具
文档编辑器，visual studio code
网页浏览器，chrome
图片处理器，Photoshop
版本控制系统工具和平台，git&github
此步骤可跳过
有的复杂网页需要本地网页测试服务端file://：
python -V检测自己是否装有这个工具
cd进入根目录
python -m SimpleHTTPServer
默认测试端口8000. 如果不行换localhost:7800.
网站构想
关于什么内容
呈现的主题是什么
看起来怎么样
- 勾勒框架---用笔和纸简单画个图。
- 配色让内容和色彩搭配起来---文字，主题色，图片，字体选择。
- 字体选择步骤：
1https://fonts.google.com/
2选择哪一种字体模块点击“+”
3对话窗Family Selected右上角"_"点开
4EMBED下面的
<link href="https://fonts.googleapis.com/css?family=xxxxxxxxx" rel="stylesheet">//等后面再html中使用
font-family: 'xxxxxxxxxx', sans-serif;//到后面css修饰使用
处理文件信息
文件内容，代码，样式单，媒体
-
步骤
1在熟悉的目录下建立新文件名index.html（这样做是为了后面部署git网站用的）
2在同一级文件夹中建立images文件存放你要用的图片
3建立styles文件夹用于样式的使用
4建立scripts文件夹用于与网页的交互（就是你可以通过修改其中的script文件达到修改网页的目的） -
5文件路径这一点很重要*
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head><body>
<img src="" alt="My test image">
</body>
</html>
以上的src="",内要选择images文件的路径，因为html和image文件夹在同一目录下，所以为
src="images/xxx.jpg"这里xxx.jpg代表images文件夹里的文件名，当然也可以是.png文件。alt后面指的是，当前面的图片源错误，默认的一个替换选择性的文字描述。当路径错误没有此文件时，会出现My test image。
html简介
它是用来在屏幕显示内容的，包括打开网页顶部显示的名称，对应的是head元素中的内容，正文内容，对应的是body元素，在body元素中会有p元素表示段落，ul元素表示无序列表，li表示顺序圆点，img插入的图片，h1/2/3/4标题大小，a表示锚定的一个内容，加入href可以加入链接。
css简介
在head元素之间加入<link href="xxx.css" rel="stylesheet" type="www/css">这种方式就是把css和html文件链接在一起了，可以在html文件内容的基础上进行样式的修饰美观。
之后的代码在css文件中如
p {
color: red;
width: 500px;
border: 1px solid black;
}
p,li,h1 {
color: red;
}
可以对整个html文件
html {
font-size: 10px; /* px means 'pixels': the base font size is now 10 pixels high */
font-family: placeholder: this should be the rest of the output you got from Google fonts
}
之前我们google字体样式的两个链接就可以拿来用了。
<link href="https://fonts.googleapis.com/css?family=xxxxxxxxx" rel="stylesheet">
font-family: 'xxxxxxxxxx', sans-serif;
javascript简介
同css一样，我们也要有一个引入在body元素之间：
<script src="scripts/main.js"></script>这里main.js是scripts文件夹里的文件
这里js用的是jquery技术，代码如下
var myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello world!';这是替换标题h1的内容为Hello world!
更多的方法在DOM对象的API中找
document.querySelector('html').onclick = function() {};样本网页的一个窗口弹出的应用
var myImage = document.querySelector('img');
myImage.onclick = function() {
var mySrc = myImage.getAttribute('src');
if(mySrc === 'images/firefox-icon.png') {
myImage.setAttribute ('src','images/firefox2.png');
} else {
myImage.setAttribute ('src','images/firefox-icon.png');
}
}点击图片替换的应用
<button>Change user</button>换按钮件
var myButton = document.querySelector('button');
var myHeading = document.querySelector('h1');换标题h1的按钮件
function setUserName() {
var myName = prompt('Please enter your name.');
localStorage.setItem('name', myName);
myHeading.textContent = 'welcome to ' + myName;
}
if(!localStorage.getItem('name')) {
setUserName();
} else {
var storedName = localStorage.getItem('name');
myHeading.textContent = 'welcome to ' + storedName;
}
myButton.onclick = function() {
setUserName();
}
最后通过github来实现
1注册github账号
2创建一个仓库Repository name
3
在initialize this repository with a README边上打钩
回到github页面菜单setting下面就生成了https://xxxxx.github.io/x'x'x'x'x/xxxxx样式的网站
网友评论