封面真香，沒
接下來就是網頁設計的部分了，網頁單純就是文字程式碼執行顯現罷了所以可以直接用記事本修改程式碼，但是這樣不方便
所以還是用軟體來做設計吧，軟體有千百種，我這邊是用Dreamweaver CC 2015(新版不習慣...)
先貼首頁的程式碼，我這邊是用HTML+CSS外觀寫ㄉ
上面的區塊外觀是用Div+Css寫的
<!doctype html>
<html style="height: 100%;">
<head>
<meta charset="utf-8">
<title>測試網頁</title>
<script type="text/javascript">
var mobileAgent = new Array("iphone", "ipod", "ipad", "android", "mobile", "blackberry", "webos", "incognito", "webmate", "bada", "nokia", "lg", "ucweb", "skyfire");
var browser = navigator.userAgent.toLowerCase();
var isMobile = false;
for (var i=0; i<mobileAgent.length; i++){ if (browser.indexOf(mobileAgent[i])!=-1){ isMobile = true;
//alert(mobileAgent[i]);
location.href = '/Index1.html';
break; } }
</script>
<style type="text/css">
#A {
background-color: rgba(255,255,255,0.3);
box-shadow: 0px 0px 15px rgba(0,0,0,0.15);
border: 1px solid rgba(255,255,255,1);
padding: 15px;
border-radius: 10px;
word-wrap: break-word;
word-break: break-all;
}
#B {
background-color: rgba(255,255,255,0.3);
box-shadow: 0px 0px 15px rgba(0,0,0,0.15);
border: 1px solid rgba(255,255,255,1);
padding-top: 15px;
padding-right: 15px;
padding-left: 15px;
padding-bottom: 15px;
border-radius: 80px;
word-wrap: break-word;
word-break: break-all;
text-align: center;
height: auto;
}
body {
background-image: url();
background-color: rgba(195,195,225,1);
}
</style>
</head>
<body style="height: 100%;">
<div class="1" id="A" style="text-align: center"><span style="font-family: Consolas, 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', monospace; font-style: normal; font-weight: 400; font-size: 50px; text-align: center;"><span style="font-weight: 400; font-family: 'Brush Script MT'; color: #FF0000;"><span class="2"><img src="image/Hololive.full.2533167.png" width="300" height="177" alt=""/></span>A</span> <span style="color: #1A01F1">Vtuber</span></span></div><br>
<br>
<div style="text-align: center;"><a href="indexZZ.html" target="_blank" style="font-size: 16px;">舊網頁</a></div>
<div style="text-align: center; font-size: 36px;">
<p><a target="right"href="html/imagehtml/image1.html" >圖片測試</a> <a href="html/Video.html" target="_blank">影片測試</a> <a href="html/audio.html" target="right">音樂測試</a> <a href="https://zh.moegirl.org/zh-tw/虚拟UP主#" target="_blank">Vtuber<br>
</a><a Target="_parent" href="html/Upload.html">檔案上傳</a> <a Target="_parent" href="php/view.php">留言板</a> </p>
</div>
<br>
<br>
<p><br>
</p>
<div class="3" style=" margin:auto; max-width: 1200px; height: 800px; text-align: center;">
<div class="2" id="B" style="height: 100%; text-align: center;"><iframe src="right.html" width="100%" height="800px" NAME="right" style="border-radius: 80px;" noresize></iframe></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
<xxx> </xxx> 代表標籤開始與結束
<head> 標籤用於定義文檔的頭部，它是所有頭部元素的容器。 <head> 中的元素可以引用腳本、指示瀏覽器在哪裡找到樣式表、提供元信息等等。
<title> 定義文檔的標題，它是 head 部分中唯一必需的元素。
<body> 元素定義文檔的主體。<body> 元素包含文檔的所有內容（比如文本、超鏈接、圖像、表格和列表等等。）
<meta charset="utf-8"> //這段是改變網頁編碼、utf-8是萬國碼的一種，把它當作是可以顯示任何國家文字就好了
<script type="text/javascript">
var mobileAgent = new Array("iphone", "ipod", "ipad", "android", "mobile", "blackberry", "webos", "incognito", "webmate", "bada", "nokia", "lg", "ucweb", "skyfire");
var browser = navigator.userAgent.toLowerCase();
var isMobile = false;
for (var i=0; i<mobileAgent.length; i++){ if (browser.indexOf(mobileAgent[i])!=-1){ isMobile = true;
//alert(mobileAgent[i]);
location.href = '/Index1.html';
break; } }
</script>
使用javascript語言，這段是當連進來的機器是手機或著平板就會導向Index1.html 手機專用網頁的判定
巴哈的手機板網頁就是差不多這種的
<style type="text/css">
#A {
background-color: rgba(255,255,255,0.3);
box-shadow: 0px 0px 15px rgba(0,0,0,0.15);
border: 1px solid rgba(255,255,255,1);
padding: 15px;
border-radius: 10px;
word-wrap: break-word;
word-break: break-all;
}
#B {
background-color: rgba(255,255,255,0.3);
box-shadow: 0px 0px 15px rgba(0,0,0,0.15);
border: 1px solid rgba(255,255,255,1);
padding-top: 15px;
padding-right: 15px;
padding-left: 15px;
padding-bottom: 15px;
border-radius: 80px;
word-wrap: break-word;
word-break: break-all;
text-align: center;
height: auto;
}
body {
background-image: url();
background-color: rgba(195,195,225,1);
}
</style>
這東西就是CSS語法了，分為A區塊、B區塊、以及網頁背景
這邊我就不多說了，反正就是顏色+角角圓化+透明度
然後再講一下DIV這東西就是一種區域標籤，很方便把東西丟進去做外觀修改
也可以跟CSS連動，比如說CSS的A區塊對應<div id="A"></div>的id="A"，A是給他一個代號
另外我網頁還有+頁框，就是那個點進去連結主頁面不會換，部分區塊會換頁的那個
語法是<iframe></iframe>，詳細設定就自己去查ㄅ 很複雜
再來就是超連結的方式
| 超連結種類 |
超連結語法 |
呈現結果 |
| 網頁超連結語法 |
<a href="連結網址">連結名稱</a> |
連結名稱 |
| 電子郵件連結語法 |
<a href="mailto:電子郵件信箱">寄信給我</a> |
寄信給我 |
| FTP 超連結語法 |
<a href="FTP 的網址">FTP 名稱</a> |
FTP 名稱 |
以上三個較為常用，請自行嘗試寫寫看，表格最後一欄的呈現結果使用的是所謂的＂假連結＂，也就是寫成「a href="#"」這樣，瀏覽器會自動判斷為假連結，通常用來預覽使用，並沒有真正的超連結效果。
屬性 Target 標籤很有意思，在此可翻譯為目標、指標、對象，意思就是視窗開啟的指定方式。
1."_New" 開啟一個新視窗，後續開啟之新的視窗會蓋掉前面(這個)已開啟的舊視窗。
2."_Blank" 開啟一個新的視窗，後續開啟之視窗會產生另一個新的視窗，不會蓋掉前面已開啟的舊視窗。
3."_Self" 在本視窗內(自己)切換，與不加 Target 相同。
4."_Top" 使用於分割視窗功能 將本身的分割視窗頁關閉，並在原處開啟一個單面的網頁。
5."_Parent" 使用於分割視窗功能 父子關係，也就是您會開啟前一個視窗網頁，與 "_top" 相近。
6."Window Name" 使用於分割視窗功能 將欲開啟的視窗位置，指定在被命名為 "Window Name" 的分割視窗內。
創作內容
網頁1 - 首頁
繪圖 (54)