教學--html製作導航網站
簡單教你如何用html製作個人的導航網站!
準備
- 網域名(免費可以用us.kg)(可選)
- Vercel
- 安裝npm
首頁
底下是首頁基本程式碼(index.html)
(記得更改成你要的網站樣式)1
2
3
4
5
6
7
8
9
10
11
12
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>網站名稱</title>
</head>
<body>
<h1>大標題</h1>
<p>文字</p>
</body>
</html>
這只是個基本的範例，若要改成功能性多，記的加入其他的html代碼如超連結1
<a href="網址" target="_blank">文字</a>
接者就開始打造你的導航頁吧
背景圖
做完之後會發現網站非常醜，別急，在後面新增背景圖就好看了不少
- 找張你喜歡的圖片，丟上圖庫，並取得圖片網址(結尾是.png的，不是圖庫網址)
- 改html在title底下新增我自己做的↓
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<style>
body {
margin: 0;
padding: 0;
background-image: url('網址');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
color: white;
font-family: Arial, sans-serif;
}
a {
color: #ffd700;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
新增第二頁面
若想在做第二個頁面只須新增另一個html檔案(檔名為網域名)然後以html指向第二個網頁即可，以下代碼放在首頁 這樣就可以實現第二網頁了，然後一樣寫html 若網頁不想被別人輕鬆點開，可以考慮添加一個密碼網頁 第二頁如下(修改成你要的) 這樣當別人如果直接點擊網址而沒有cookie就會被趕回首頁 網站打好後，開始部屬到vercel，先註冊vercel帳戶，後在電腦終端輸入 再輸入 按照提示輸入你的電子郵件地址，並確認連結。 vercel會出現網站部屬連結，到時再綁定dns紀錄到你的域名幾即可1
<a href="檔名" target="_blank">文字</a>
加密
首先先在網路上算出你要的密碼哈希函數256位元(以免點f12就被破解)
之後先新增password.html
程式碼如下(由GPT生成)(記得修改)1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>密碼保護頁面</title>
</head>
<body>
<h1>保護頁面</h1>
<p>請輸入密碼來訪問內容。</p>
<script>
// 設定正確的密碼的 SHA-256 哈希值
const correctHash = '哈希'; // 你提供的 SHA-256 哈希值
// 計算 SHA-256 哈希
async function hashPassword(password) {
const encoder = new TextEncoder();
const data = encoder.encode(password);
const hashBuffer = await crypto.subtle.digest('SHA-256', data);
const hashArray = Array.from(new Uint8Array(hashBuffer));
const hashHex = hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');
return hashHex.toUpperCase(); // 保證計算的哈希值是大寫
}
// 密碼輸入框及驗證
function promptForPassword() {
const password = prompt('請輸入密碼');
if (password) {
hashPassword(password).then(hash => {
if (hash === correctHash) {
// 密碼正確，設置 cookie，並跳轉到第二頁
document.cookie = "password_valid=true; path=/; max-age=3600"; // 設置 cookie，有效期為 1 小時
window.location.href = "第二頁.html"; // 跳轉到第二頁
} else {
alert('密碼錯誤！');
}
});
}
}
// 當頁面加載時，要求用戶輸入密碼
window.onload = function() {
promptForPassword();
}
</script>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>標題</title>
</head>
<body>
<h1>從這邊開始修改</h1>
<script>
// 檢查 cookie 是否存在
function checkPasswordCookie() {
const cookies = document.cookie.split(';');
const passwordCookie = cookies.find(cookie => cookie.trim().startsWith('password_valid='));
if (passwordCookie && passwordCookie.split('=')[1] === 'true') {
// 密碼驗證通過，顯示內容
alert('你已通過密碼驗證！');
} else {
// 密碼驗證失敗，跳轉回密碼頁面
alert('請先輸入正確密碼！');
window.location.href = "index.html"; // 跳回密碼頁面
}
}
// 檢查 cookie
window.onload = function() {
checkPasswordCookie();
}
</script>
</body>
</html>
效果如下:
開始部屬
1
npm install -g vercel
1
vercel login
再輸入1
vercel --prod
leaftech (leaftech)