主題

網頁學習筆記1：架構初探&客製化按鈕

蜂蜜雪利酒 | 2024-05-23 22:03:25 | 巴幣 4 | 人氣 149

今天工作發生了很不開心的事，寫不下同人文

索性整理一下自學網頁製作的心得筆記～分享給大家，獻醜了

觀前預警：

＊因為是自學+速成+習慣直接實作，對於一些基礎概念或專有名詞並不清楚，

　比方說，我可能把蘋果，說成紅色的果子，但概念應該差不多吧大概可能或許是(也差太多)。

＊本身較感興趣的是網頁美化(CSS)，其餘可能說明不多。

＊我流見解，十分粗淺＋粗暴，誤人子弟，如有理解錯誤，還請見諒。

此篇文章可大致了解到以下內容：

1.構成網頁的三大要素，以及各自作用。

2.製作網頁的環境設置。

3.HTML基本架構和標籤是什麼東東。

4.CSS基本結構。

5.實作一個客製化按鈕：圓角、灰底，滑鼠懸停會變成巴哈顏色(?)。

6.浪費您的時間。

以下正文開始～～

構成網頁的三大要素　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

分別為：HTML、CSS、JavaScript。

以建房子比喻，說明各自作用：

HTML：網頁架構

房子的鋼骨結構，要先有鋼骨，才有房子，如規劃房子裡有幾間房間，要有幾道門。

CSS：網頁外觀

房子的外觀，要怎麼美化，日式風、還是北歐風等，窗戶要多大，牆面要漆成什麼顏色。

JavaScript：網頁交互功能

房子有鋼骨結構和外觀，已經可以住了，但想要加裝一些互動功能，比方說電鈴、電梯，按了電鈴會響，按了電梯可以載運到別的樓層。

製作網頁的環境　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

打人要先有棍子(?)，寫字要先有筆，製作網頁要先有編輯工具。

Visual Studio Code、Sublime Text等，選擇習慣的就可以，再不濟還有記事本可以用呀～(也太克難了～)

我個人常用Sublime，同事則推薦Visual Studio Code。（對不起，推薦這麼多次，我還是用不慣

）

Sublime的安裝，可以參考這位大大寫的教學，寫得超超超棒～

jeasee隨筆：開始撰寫程式碼-程式碼平臺安裝(Sublime)

您如果和我一樣是個懶人，您可以：

1.教學看到安裝套件，就可以了。

2.Sublime有提供portable version，如果懶得安裝，也可以從他首頁右上角Download下載到portable version，解壓縮就能開始用啦～

3.有關安裝套件，我太懶了只裝Emmet，但感覺這樣就可以了。

Hello HTML　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

現在可以開始編寫第一個網頁囉～

以Sublime為例：

1.打開Sublime

2.點選畫面最右下角的Plain Text

3.選單選擇HTML

4.如果您有裝套件Emmet，在畫面上第一行，輸入!按下Tab，便會出現最基本款的HTML格式，如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

</body>
</html>

5.點選畫面最左上角File，選單選擇Save，選擇想要儲存網頁檔案的地方(最好建一個資料夾存放)。

6.打開剛剛存的HTML檔案(副檔名是.html)，就可以看見在瀏覽器呈現的畫面了。

7.以後寫完網頁內容，在網頁畫面按F5刷新，或直接關掉重開，就能看到修改後的模樣。

HTML架構　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

我習慣先看一下整體架構，會比較好搭建概念。

大家請看～～

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我是網頁標題</title>

  
  <script src="<"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">

  
  <link rel="stylesheet" type="text/css" href="style.css">

  <style>
    /*CSS寫在這裡*/
  </style>

</head>
<body>

  

  <script>
    // JavaScript寫在這裡
  </script>

  
  <script src="main.js"></script>

</body>
</html>

從上方的原始碼，可以觀察到網頁架構是階層式，一層包裹著下一層，像是捲餅，我好餓(X)

網頁主要內容是寫在<body></body>之中。

負責外觀的CSS寫在<head></head>之中，用<style></style>再包裹起來。

負責網頁交互的JavaScript寫在<body></body>之中，用<script></script>再包裹起來。

其餘像是引用插件、載入外部CSS、載入外部JavaScript，可以先觀察放的位置，此篇先不會講到這些。

開始動手作　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

我們來「繪製」一個網頁畫面吧～

畫面上有一行標題＋一個空有其表按了沒反應的按鈕(X)

直接上原始碼！

<h1>我是標題標題是我</h1>

<button>你不要點我啦</button>

代表註解，電腦不會執行註解裡面的東西。那可以做什麼用呢？

1.作為提醒自己此段原始碼是幹嘛用的小抄。
大家可能想說，啊我自己寫過的東西怎可能會忘記，相信我，就是會忘記

2.除錯時，暫時把一段原始碼註解起來不執行。

標題的標籤是<h1></h1>

大家可能會問，有1是不是有2，沒有錯喔～除了<h1></h1>，還有<h2></h2>、<h3></h3>等。

數字越小，字體越小，共同點是都是粗體，然後是標題（不要廢話）。

按鈕的標籤是<button></button>

標題的內容和按鈕要顯示的文字，包在標籤裡面就可以喔～

好了，做完了。

網頁畫面呈現如下：

不好看，讓我們把按鈕送去美容一下，要美化網頁，有請美容師CSS

CSS結構　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

先看一下CSS的結構，他是用<style></style>包裹起來的，並且要放在<head></head>之間。

<head>
  <style>
    button {
      color: blue;
    }
  </style>
</head>

其邏輯是點名要做變化的物件，並將想顯示的變化效果用大括弧{}包起來。

其中包含三大要素：

選擇器：告訴電腦指定讓哪一種標籤做變化，以此例來說button。

屬性：要做出的變化，如調整文字顏色、大小、邊框等，以此例來說color。

值：具體做出的變化，如：文字顏色調整為藍色，其中，藍色就是值，以此例來說blue。

CSS選擇器有很多種，常用的有Class 選擇器、ID選擇器、類別選擇器，這篇先不累述。

屬性不用背，要用的時候再Google就好。

美化按鈕

此次美化目標是讓按鈕有以下效果：

圓角邊、按鈕底色為灰色、文字為白色、2rem大小的字、文字和按鈕邊緣有間距

好，開始做 ?(ˊ?ˋ*)?

/*請將以下內容放在style標籤之中*/
button {
  font-size: 2rem;  /*文字大?。?rem*/
  color: white;  /*文字顏色：白色*/
  background-color: #A6A6A6;  /*背景顏色：灰色*/
  border: none;  /*邊框：不顯示*/
  border-radius: 50px;  /*邊框圓角：50px*/
  padding: 5px 20px;  /*內距(讓文字和外框保留距離)：上下5px、左右20px*/
  transition: .5s;  /*轉場漸變(讓滑鼠懸停變色效果，顯示更絲滑)：0.5秒*/
  cursor: pointer;  /*滑鼠游標滑上去變成手指形狀*/
}

這段原始碼，是告訴電腦，我要把標籤叫做button的，加上{}裡的外觀效果。

而外觀效果的咒語(x)，固定格式是長這樣，我是屬性: 我是值;

整個完整的寫法，便會是

我是選擇器 {

　我是屬性1: 我是值1;

　我是屬性2: 我是值2;

}

/* */

這行是CSS版本的註解，作用和body裡面的註解一樣喔～

最後存檔按F5刷新網頁，就會得出一個這樣外觀的按鈕：

滑鼠懸停效果

如果要讓滑鼠移到按鈕上方時變色(懸停效果)呢？

那就再新增一個選擇器button，後面加上:hover，就是專門設計滑鼠懸停效果用的喔。

這邊我們讓按鈕背景變色。

button:hover {
background-color: #11AAC1; /*背景顏色：巴哈色*/
}

存檔按F5刷新網頁，測試一下效果～

好耶～

最後完整的原始碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>我是網頁標題</title>

  <style>
    button {
      font-size: 2rem;  /*文字大小：2rem*/
      color: white;  /*文字顏色：白色*/
      background-color: #A6A6A6;  /*背景顏色：灰色*/
      border: none;  /*邊框：不顯示*/
      border-radius: 50px;  /*邊框圓角：50px*/
      padding: 5px 20px;  /*內距(讓文字和外框保留距離)：上下5px、左右20px*/
      transition: .5s;  /*轉場漸變(讓滑鼠懸停變色效果，顯示更絲滑)：0.5秒*/
      cursor: pointer;  /*滑鼠游標滑上去變成手指形狀*/
    }

    button:hover {
      background-color: #11AAC1;  /*背景顏色：巴哈色*/
    }
  </style>

</head>

<body>

  
  <h1>我是標題標題是我</h1>
  
  <button>你不要點我啦</button>

</body>
</html>

內容就到這邊了，辛苦了，非常感謝您的觀看

希望寫的還算讓人看得懂