創作內容

4 GP

網頁1 - 首頁

作者:DIS黒き銃神(DIS)│2019-08-13 23:08:21│贊助:8│人氣:163
封面真香,沒


接下來就是網頁設計的部分了,網頁單純就是文字程式碼執行顯現罷了
所以可以直接用記事本修改程式碼,但是這樣不方便
所以還是用軟體來做設計吧,軟體有千百種,我這邊是用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" 的分割視窗內。
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=4494397
All rights reserved. 版權所有,保留一切權利

相關創作

同標籤作品搜尋:windows server|windows|IIS|網站

留言共 1 篇留言

─=≡Σ(((つ〃∀〃)つ
果然很困難。我當初考網頁設計好像沒有用多少語法吧(?),我已經失憶了

08-14 01:14

我要留言提醒:您尚未登入,請先登入再留言

4喜歡★vbnnbv123cs 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:IIS架設+網站教學... 後一篇:看了一下別人的網站教學...

追蹤私訊

作品資料夾

as11df08各位巴友安安
目前本人在做台灣知名遊戲公司介紹(橘子,大宇和宇峻等等),有興趣可以來小物看看歐!看更多我要大聲說昨天21:47


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】