網頁設計！

還有網頁檢查工具（？

專長是做網頁，其他雜七雜八都學一點
Vibe coding 重度使用
學術長但競程很爛
班聯活動長，暑假花了快兩周做了你們之後會看到的網站（？
建中社團資料庫

講師--Eating/正在吃

1 網頁基礎概述

外觀
元素
樣式
控制台
實際使用

2 網頁檢查工具

1.實作

3 專案實作

這份簡報中有 10 個挑戰 和 5 個加分題，每個人都要試著做做看挑戰，加分題當然自由參加。成發的時候，每個小隊要派不同人解釋自己是怎麼完成這些挑戰或加分題的。（也就是說不能 10 個挑戰都是同一個人說明，每個人最多講兩題）

好玩的東西

先問些問題

有人已經會自己寫完整的網頁了嗎

有人有寫過 HTML JS CSS 之類的嗎

有人用過像是 React 或 Vue 這類的框架嗎

有人知道怎麼把自己做好的東西丟到網路上讓大家看嗎

網頁是啥？

– Eating

網頁是透過瀏覽器顯示的網路文件，通常包含文字、圖片和互動元素。

– Claude.ai

所以說，網頁其實就是一個放在網路上的文件（像是這份簡報其實就算是一個網頁）。

那我們要怎麼看到這份文件呢？

這涉及到了三個主要的角色：

網⾴概述

伺服器 (Server)
瀏覽器 (Browser)
搜尋引擎 (Search Engine)

我們拿建中校網來舉例。

要看到校網，我們要先用 搜尋引擎 搜尋"建中"

網⾴概述

伺服器 (Server)
瀏覽器 (Browser)
搜尋引擎 (Search Engine)

要看到校網，我們要先用 搜尋引擎 搜尋"建中"

網⾴概述

伺服器
瀏覽器
搜尋引擎

要看到校網，我們要先用 搜尋引擎 搜尋"建中"，

接下來搜尋引擎會告訴我建中校網的網址。

網⾴概述

伺服器
瀏覽器
搜尋引擎

要看到校網，我們要先用 搜尋引擎 搜尋"建中"，

接下來搜尋引擎會告訴我建中校網的網址。

我點下去之後， 瀏覽器 就會依據那個網址，幫我跟 伺服器 索取我需要的資料。這些資料包含一些文字和圖片，瀏覽器會把他依照 HTML 檔案排好並顯示給使用者看。

網⾴概述

伺服器
瀏覽器
搜尋引擎

網⾴概述-小結

負責幫助你找到網址

搜尋引擎

依照網址去找資料

並且顯示給使用者看

瀏覽器

一個有專屬的地址的倉庫，存放文件

伺服器

Available 24/7

Contact us via email or phone

網頁的歷史？

– Eating

網頁的歷史始於1989年英國科學家提姆·柏內茲-李在瑞士CERN發明全球資訊網 WikipediaNissenTech，1990年他編寫了第一個網頁瀏覽器，1991年向其他研究機構開放全球資訊網 - 維基百科，自由的百科全書，1993年4月30日全球資訊網正式向公眾開放 The World Wide Web became available to the broader public 30 years ago : NPR，從此開啟了現代網路時代。

– Claude.ai

好啦我也不在乎

但有個好東西可以分享

Wayback Machine

這個網站記錄了各種網站過去的歷史紀錄，以 YouTube 為例子，輸入他的網址之後就可以看到過去的紀錄。

像是這個就是 2005 年 4 月 28 日的時候他的樣子 ?

休息！

挑戰０

去剛剛那個網站找個有趣的網站歷史紀錄來看看。

瀏覽器怎麼把資料呈現給使用者

– Eating

好現在的問題是瀏覽器要怎麼展示網頁給使用者。

總不能跟存圖片一樣把網頁弄成一張張圖片存在伺服器吧？太佔空間了而且又不能互動。

所以說，為了顯示酷酷的網頁，人們就想到了一些方法。

HTML-起源

我們回想網頁中會出現的東西：

文字
圖片
按鈕
輸入框
．．．

那我們是不是只要發明一個特定格式的寫法，標註每個圖片或按鈕在頁面中的位置，就可以省下很多儲存空間了？

HTML-起源

我們回想網頁中會出現的東西：

文字
圖片
按鈕
輸入框
．．．

上面就是人們想出來的標記方法，被稱為 HTML。

HTML 全稱為「超文本標記語言」（HyperText Markup Language），它透過一系列預定義的標籤來描述網頁內容的結構和意義，而不是直接儲存視覺畫面。

HTML-起源

<h1>這是標題</h1>
<p>這是段落文字</p>
<img src="photo.jpg" alt="照片">
<button>點我</button>
<input type="text" placeholder="請輸入文字">

觀察下面的 HTML 寫法

HTML-標籤

<h1>這是標題</h1>
<p>這是段落文字</p>
<img src="photo.jpg" alt="照片">
<button>點我</button>
<input type="text" placeholder="請輸入文字">

每個 "元素" 都是由 "標籤" 組成的。

舉例來說 <h1> 就是所謂的標題標籤。而大部分標籤會有一個結尾標籤，透過在標籤名稱前添加 "/" 來表示，像是 </h1>。標籤中間的文字，我們稱為 "內容" 通常會是實際顯示出來的東西。

有了結尾標籤，我們還可以實現下面這種比較酷的多層效果。

HTML-結尾標籤

<h1>
	<img src="photo.jpg" alt="標題 Logo">
	<button>前往報名</button>
</h1>

<p>這是段落文字</p>

可以看到，透過開始標籤和結尾標籤的使用，我們把圖片和按鈕都包在了標題中。

但像是 <img> 這種標籤就沒有結尾標籤，因為你都放圖片了通常就不會在裡面塞別的東西了吧。

既然提到 <img> 標籤，你會發現他除了 <img> 以外，還在後面寫了像是 src="photo.jpg" 這種怪東西。

HTML-標籤屬性

<h1>
	<img src="photo.jpg" alt="標題 Logo">
	<button>前往報名</button>
</h1>

<input type="text" placeholder="請輸入文字">

像 src 這種寫在標籤中的東東叫做標籤的 "屬性" ，而屬性的 "=" 後面的東東則稱為 "值" 。

像是我們會說，img 標籤中， src 屬性的值是 photo.jpg

所以說我們現在知道了 HTML 就是一個有很多標籤組成的檔案，每個標籤的結構如下：

HTML-標籤小結

<button id="id001" onclick="myFunction()">點我！</button>

標籤架構分解：

開始標籤：<button ... >
屬性名稱 1 : id
屬性值 1 : id001
屬性名稱 2：onclick
屬性值 2："myFunction()"
內容：點我！
結束標籤：</button>

<開始標籤屬性="值" 屬性="值">內容</結束標籤>

我們今天會用到的標籤有下面這些：

<h1> 到 <h6>：標題標籤
<p>：段落
<button>：按鈕
<input>：輸入框
<div>：區塊容器

標籤的用法可以查 "mdn + 標籤名稱" 就會看到完整介紹

HTML-標籤小結

但有了標籤之後，要把它弄成網頁的時候還是發現了問題。

舉例來說有時候我需要引用外部的字體，或是要標註網頁的語言，如果把這些雜七雜八的東西全部用標籤寫在內容中就會變得很亂，瀏覽器也很可能會漏掉東西，所以就發明了統一的格式，來區分真正的內文和其他怪東西。

HTML-架構

head 標籤中放剛剛提到的字體引用或是語言等等。

body 標籤中才是放使用者看的到的內容

HTML-架構

<!DOCTYPE html> <!-- 告訴瀏覽器這是 HTML 格式 -->
<html> <!-- 告訴瀏覽器整份文件的開頭 -->
<head> <!-- 放一些偏向設定的資料 -->
    <meta charset="UTF-8"> <!-- 設定網頁的編碼為 UTF-8，支援中文 -->
    <title>網頁標題</title>

	<!-- CSS 寫在下面這裡 -->
    <style>
    </style>
</head>
<body> <!--真正放使用者看的到的東西的地方 -->
    <h1>主標題</h1> <!-- 標題 -->
    <p>段落文字</p> <!-- 文字段落 -->

	<!-- JavaScript 寫在下面這裡 -->
    <script>
    </script>
</body>
</html> <!-- 整份文件的結束 -->

那我們要怎麼看到一個網頁背後的 HTML 呢？

– Eating

網頁檢查工具

應該叫做開發者工具俗稱 F12

打開今天的第一個範例網站

F12

HTML標籤介紹

然後按下電腦上的 F12，（mac 或某些 windows 要按 Fn+F12）酷酷

F12

通常打開就是這個 Elements 頁面（如果不是的話幫我點到這個頁面）。

這個頁面 Elements 就是元素的意思，也就是指網頁中的各個標籤。

可以自己亂點看看，但最常用的功能是 "點選並檢查他"

F12

點擊那個有點像滑鼠的按鈕，他會變成藍色的，現在把滑鼠移動到網頁的元素上面就會出現一些資訊。

像是左邊顯示的 p 標籤，長寬是 565.6 x 23.2 px 右邊的代碼也會自動跳到該標籤的位置。

F12-Elements

找到那個標籤後，我們可以直接在右邊點兩下修改他！

像是我可以修改他的內容變成哇哈哈哈哈。

不過更常用的通常還是偷看別人的網站寫了啥？

下面是一些好用的場景

有些圖片被鎖住右鍵，可以直接找到那個元素之後看他的 src 下載圖片
有些 input 的 max 值被鎖住，可以修改他
可以修改成績系統的顯示文字拿來騙人（但後臺其實不會變，該被當掉還是會被當掉）

QR碼產生器：免費、彩色、加LOGO 可能會用到

F12-Elements

自己注意不要侵權

F12-Elements

這樣亂改沒有用系統的分數不會變所以只能自欺欺人

實作！

可以去看看剛剛的範例或是自己隨便找個網站看看然後做下面的挑戰

挑戰１

用 F12 工具查看剛剛範例網站中的 "語法：" 這樣的粗體字是用啥標籤實現的。

挑戰２

剛剛範例網站的下面其實有隱藏了 4 位數密碼是啥？

用 F12 工具看看

挑戰３

去 QR碼產生器：免費、彩色、加LOGO 嘗試下載一個寬高都是1024的 QRcode

加分１

在範例網站中透過 F12 工具插入一張圖片

語法參考

sum/doc.md at main · jx06T/sum

你可能會需要在元素上右鍵叫出選單並選擇第二個 Edit as HTML

但 HTML 看起來沒有標註位置啊？還有顏色要怎麼設定？

– Eating

還記得下面這是剛剛提到的 HTML 框架。

可能有人發現上面有個標籤叫做 <style> 沒錯，這個就是拿來控制像是元素的位置、顏色這種東西的地方。

CSS

<!DOCTYPE html> <!-- 告訴瀏覽器這是 HTML 格式 -->
<html> <!-- 告訴瀏覽器整份文件的開頭 -->
<head> <!-- 放一些偏向設定的資料 -->
    <meta charset="UTF-8"> <!-- 設定網頁的編碼為 UTF-8，支援中文 -->
    <title>網頁標題</title>

	<!-- CSS 寫在下面這裡 -->
    <style>
    </style>
</head>
<body> <!--真正放使用者看的到的東西的地方 -->
    <h1>主標題</h1> <!-- 標題 -->
    <p>段落文字</p> <!-- 文字段落 -->

...

如果說 HTML 像骨架一樣，那 CSS 則是裝飾，是用來把網頁便好看的東東！

左邊是有 CSS 的網站，右邊是沒有 CSS 的網站。

CSS

那 CSS 語法怎麼寫呢。CSS 的語法非常直觀：

選擇器 { 屬性: 值; }

選擇器 (Selector)：你要對「誰」做這件事？（例如：所有的 <p> 標籤）
屬性 (Property)：你要改變它的什麼？（例如：文字顏色 color）
值 (Value)：你要把它改成怎樣？（例如：紅色 red）

CSS

...
	<!-- CSS 寫在下面這裡 -->
    <style>
		p{
			color: red;
		}
    </style>
...

這段 CSS 會讓所有 <p> 標籤的文字都變成紅色

那現在有另一個問題了，網頁中那麼多個 <p> 標籤，我如果只要讓其中一個變紅色怎麼辦？

答案是，除了直接寫標籤名稱當作選擇器外，也可以用 id 和 class 當作選擇器！

Id：通常一個元素只會有一個唯一的 id，通常用來標註特定唯一的元素。id 就像你的學號一樣一人一個。
Class：一個元素可能會有很多個 class，一個 class 也可以對應到很多個元素，通常拿來讓 CSS 針對不同的元素做出不同的樣式。就像班級或年級一樣，很多人同一個。

CSS

寫 id 和 class 的方法很簡單，他就是一個 HTML 的屬性

寫法跟其他屬性一樣就是在標籤名稱的後面用 id="某某id" 這種方式寫出來。特別的是在 class 中會用空格隔開不同的 class 名稱。

CSS

...
<style>
  /* 選取 id 為 header 的元素 */
  #header {
    color: blue; /* 藍色文字 */
  }

  /* 選取 class 為 red 的所有元素 */
  .red {
    background-color: red; /* 紅色背景 */
  }
</style>
...
<body>
  <div id="header" class="red bold">標題</div>
  <p class="red">紅色段落</p>
</body>
...

在 css 中則是 #id 或 .class 來選取元素，右邊的程式就會讓 id 是 header 的元素變成藍色。

怎麼排版？

CSS

...
<style>
  div {
	margin:8px;
    padding:20px;
  }
</style>
...
<body>
  <div>Content</div>
</body>
...

在 css 中除了可以修改文字和背景的圖片以外，我們還可以設定元素之間的距離。

怎麼排版？

CSS

...
<style>
  div {
	margin:8px;
    margin-left:2px;
    padding:20px;
  }
</style>
...
<body>
  <div>Content</div>
</body>
...

在 css 中除了可以修改文字和背景的圖片以外，我們還可以設定元素之間的距離。

2px

那 CSS 也可以用 F12 查看嗎？

當然可以。選中元素後在下面的 Style 面板也可以查看或修改。

CSS + F12

可以用旁邊的勾勾取消或應用樣式

或是自己打，如果打在 #dd 下面他就會覆蓋所有 #dd 的樣式

CSS + F12

其他 CSS 屬性可以查 "css 想知道的屬性 w3s" 通常都可以查到。

CSS

實作！

可以去看看剛剛的範例或是自己隨便找個網站看看然後做下面的挑戰

挑戰４

用 F12 工具修改將 google 翻譯的某些元素的 background-color 屬性改成紅色 (red);讓他變上面那樣。

background-color: red;

挑戰５

用 F12 工具修改 CSS 找到範例網站中藏起來的東西是啥。

加分２

用 F12 工具修改 CSS 讓 "所有的" h2 標題變成左上角那樣。

語法參考

sum/doc.md at main · jx06T/sum

但現在好像還是沒有辦法和她互動啊

– Eating

還記得下面這是很久以前提到的 HTML 框架。

可能有人發現上面有個標籤叫做 <script> 沒錯，這個就是拿來寫 JS 讓網頁可以互動的地方。

JS

<!DOCTYPE html> <!-- 告訴瀏覽器這是 HTML 格式 -->
<html> <!-- 告訴瀏覽器整份文件的開頭 -->
<head> <!-- 放一些偏向設定的資料 -->
  ...
</head>
<body> <!--真正放使用者看的到的東西的地方 -->
    <h1>主標題</h1> <!-- 標題 -->
    <p>段落文字</p> <!-- 文字段落 -->

	<!-- JavaScript 寫在下面這裡 -->
    <script>
    </script>
</body>
</html> <!-- 整份文件的結束 -->

那 JS 怎麼寫？

相信大家學過 C++ 了都對程式語言有基礎的概念，剛好 JS 和 C++ 非常的像！

一個程式語言通常要能夠

定義變數、陣列
做加減乘除、字串操作
定義函式
跑回圈
邏輯判斷 if else

以下我們來比較 JS 和 C++ 的差異

JS

定義變數、陣列

可以看到 JS 完全不用定義類型，陣列的初始化也比較隨興。

JS

// 定義變數
let x = 10;
let x = "abc";

// 定義陣列
let arr = [1,2,3,4,"a","b"]

// 定義變數
int x = 10;
string x = "abc";
// 要指定類型!

// 定義陣列
int arr[] = {1,2,3,4}
int arr[] = {1,2,3,4,"a","b","c"} 
// 混在一起放會報錯!

做加減乘除、字串操作

可以看到 JS 用 console.log 輸出，C++ 則是用奇怪的方法。

然後 JS 每一行的結尾其實不一定要加分號

JS

// 定義變數
let name = "Eating";
let a = 6
let b = 13
let ans = a + b

console.log("Hello "+name,"ans:" + ans)
// 輸出 Hello Eating ans:19

// 定義變數
string name = "Eating";
int a = 6;
int b = 13;
int ans = a + b;

cout << "Hello " << name << " ans:" << ans;
// 輸出 Hello Eating ans:19

定義函式

可以看到 JS 依然不用指定類型，改成用 function 定義新的函式。

JS

function add(a, b) {
	return a + b; 
}

console.log(add(10,30))

int add(int a, int b) {
	return a + b; 
}

cout << add(10,30) ;

跑回圈

可以看到 JS 還是不用指定類型，其他都跟 C++ 一樣。

JS

for (let i = 0; i < 5; i++) {
  ... 
}

 for (int i = 0; i < 5; i++) {
 	... 
 }

邏輯判斷

這個真的一模一樣了

JS

if (x > 0) {
	... 
} else {
	... 
}

if (x > 0) {
	... 
} else {
	... 
}

其他

陣列的操作上，JS 使用 arr.push("新元素") 來新增東西，讀取元素也是用 arr[3] 但 JS 讀取超出範圍的東西不會報錯。（其他操作自己看，今反正天不會用到連結）

另外為了讓網頁動起來，JS 還有很多專門操作網頁元素的方法！

JS

操作網頁元素的方法

document.getElementById( 元素 id )：透過 id 取得要操作的元素，通常會把它存在一個變數裡面
某某元素.textContent：取得或修改元素的內容
某某元素.value：取得或修改輸入框的值
某某元素.style.屬性名稱 = "屬性值"：設定元素的樣式
某某元素.classList.{add/remove/toggle}(class名稱)對某元素新增/移除/切換指定的 class

JS

其他重要方法

console.log("某些文字")：在控制台輸出資訊方便 deBug
parseInt(某字串)：將字串轉成整數，例如 parseInt("123.2") = 123
alert("某些文字")：直接彈出一個視窗顯示指定文字

JS

JS + F12

控制台在 Elements 的右邊

JS + F12

首先我可以直接在這寫程式，用 Shift + Enter 可以換行

下面那個是算 0~99 的平方數相加

JS + F12

我也可以直接在這用 JS 操作元素

HTML 部分

全部串起來

 <input type="text" id="nameInput" placeholder="請輸入姓名" />
 <button onclick="sayHello()">打招呼</button>
 <p id="output">結果會顯示在這裡</p>

JavaScript 部分

function sayHello() {
  // 印出字串確定 JS 有在工作
  console.log("嗨!");

  // 取得輸入框這個元素
  let nameInput = document.getElementById("nameInput");

  // 取得輸入框的值
  let name = nameInput.value;

  // 取得要顯示結果的元素
  let output = document.getElementById("output");

  // 設定文字內容
  output.textContent = "你好，" + name + "！";

  // 設定文字顏色
  output.style.color = "white";
}

全部串起來

 <input type="text" id="nameInput" placeholder="請輸入姓名" />
 <button onclick="sayHello()">打招呼</button>
 <p id="output">結果會顯示在這裡</p>

運作流程：

使用者在輸入框輸入姓名
點擊按鈕時，HTML 中寫的 onclick="..." 會執行 JS 中定義的 sayHello() 函式
在控制台印出 "嗨"

function sayHello() {
  // 印出字串確定 JS 有在工作
  console.log("嗨!");

  // 取得輸入框這個元素
  let nameInput = document.getElementById("nameInput");

  // 取得輸入框的值
  let name = nameInput.value;

  // 取得要顯示結果的元素
  let output = document.getElementById("output");

  // 設定文字內容
  output.textContent = "你好，" + name + "！";

  // 設定文字顏色
  output.style.color = "white";
}

全部串起來

 <input type="text" id="nameInput" placeholder="請輸入姓名" />
 <button onclick="sayHello()">打招呼</button>
 <p id="output">結果會顯示在這裡</p>

運作流程：

document.getEle...取得輸入框這個元素
透過 .value 取得輸入的值
再次透過 getEle...取得要顯示結果的元素
用 .textContent 設定文字
並用.style.color 設定文字顏色

function sayHello() {
  // 印出字串確定 JS 有在工作
  console.log("嗨!");

  // 取得輸入框這個元素
  let nameInput = document.getElementById("nameInput");

  // 取得輸入框的值
  let name = nameInput.value;

  // 取得要顯示結果的元素
  let output = document.getElementById("output");

  // 設定文字內容
  output.textContent = "你好，" + name + "！";

  // 設定文字顏色
  output.style.color = "red";
}

全部串起來

實作！

可以去看看剛剛的範例或是自己隨便找個網站看看然後做下面的挑戰

挑戰６

在 F12 工具的控制台中，計算費氏數列前100項的合

挑戰７

在 F12 工具的控制台中，定義一個 function ，這個 function 被呼叫的時候會執行 alert("你好")

加分３

把剛剛寫好的 function 綁定到按鈕上面。

那我到底要怎麼自己做出一個網頁

– Eating

相信大家都會了？

裝 vs code

相信大家也都會

新增資料夾

右鍵選擇以 Code 開啟

用 vs code 開啟

不然開了vs code 後選擇 Open Folder 也可以

安裝 Live Server 擴充

點到左邊擴充功能的地方，搜尋 Live Server 選第一個按下 Install ，我裝好了所以沒有 Install 按鈕。

新增 index.html

點到檔案列表，按下新增檔案，檔名取叫做 index.html

打好框架

點進檔案後，輸入 ! 然後選擇第一個按下 Enter，然後存檔

開啟 Live Server

回到左邊，右鍵點擊檔案，選擇 Open with Live Server

開啟 Live Server

應該會彈出一個全白的網站，你可以開始亂改了

對吼網址不一定是長這樣但反正開了就好

實作！

可以去看看剛剛的範例或是自己隨便找個網站看看然後做下面的挑戰

挑戰７

依照剛剛的步驟開一個空白的網站。

加分４

在剛剛的網站隨便寫點東西。

大實作時間！

目標是做出一個猜數字遊戲。

完成的範例：猜數字遊戲

可以先隨便畫個設計圖，然後用 HTML 做出來。

先做 HTML

<h1>

<input>

<p>

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜數字遊戲</title>
</head>

<body>
    <h1>猜數字遊戲</h1>
    <input type="number" id="in">
    <button id="btn">猜猜看</button>
    <p id="re">太小了！</p>
</body>

</html>

可以先隨便畫個設計圖，然後用 HTML 做出來。

再做 CSS

置中，大

置中

置中，上間距

置中，顏色

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜數字遊戲</title>
    <style>
        h1{
            text-align: center;
        }
        input{
            margin-left: auto;
            margin-right: auto;
            display: block;
        }
        button{
            margin-left: auto;
            margin-right: auto;
            display: block;
            margin-top: 16px;
        }
        p{
            text-align: center;
        }
    </style>
</head>
...

JS

先設定一個答案。

寫一個猜的 function ，綁定到 button 上。

把這個 function 功能寫完整。

JS

<body>
    <h1>猜數字遊戲</h1>
    <input type="number" id="in">
    <button onclick="g()" id="btn">猜猜看</button>
    <p id="re">---</p>

    <script>
        let ans = 44;

        function g() {
            let inputEle = document.getElementById('in')
            let g = parseInt(inputEle.value)
            
            if (g > ans) {
                document.getElementById('re').textContent = "太大了"
            }else if (g < ans){
                document.getElementById('re').textContent = "太小了"
            }else {
                document.getElementById('re').textContent = "猜對了"
            }
        }
    </script>
</body>

實作！

可以去看看剛剛的範例或是自己隨便找個網站看看然後做下面的挑戰

挑戰８

做出自己的猜數字網站！樣式不限，只要能夠依據使用者輸入給出太大、太小、猜對就好

挑戰９

可以試試看完成以下東西，善用 google

隨機設定答案
太大和太小不同顏色提示
背景顏色?
猜對用 alert 告訴使用者
對於輸入超過 100 的數字給出不同回復
重新開始遊戲的按鈕

加分５

遊戲時間計時
最佳成績記錄
不同難度等級
多人遊戲
更炫的視覺效果和動畫

網頁設計！

講師--Eating/正在吃

目錄

1

網頁基礎概述

2

網頁檢查工具

3

專案實作

好玩的東西

先問些問題

有人已經會自己寫完整的網頁了嗎

有人有寫過 HTML JS CSS 之類的嗎

有人用過像是 React 或 Vue 這類的框架嗎

有人知道怎麼把自己做好的東西丟到網路上讓大家看嗎

網⾴概述

網⾴概述

網⾴概述

網⾴概述

網⾴概述

網⾴概述-小結

搜尋引擎

瀏覽器

伺服器

Available 24/7

Contact us via email or phone

好啦我也不在乎

休息！

挑戰０

去剛剛那個網站找個有趣的網站歷史紀錄來看看。

HTML-起源

HTML-起源

HTML-起源

HTML-標籤

HTML-結尾標籤

HTML-標籤屬性

HTML-標籤小結

HTML-標籤小結

HTML-架構

HTML-架構

網頁檢查工具

應該叫做 開發者工具 俗稱 F12

F12

F12

F12

F12

F12-Elements

F12-Elements

F12-Elements

F12-Elements

F12-Elements

實作！

可以去看看剛剛的範例或是自己隨便找個網站看看然後做下面的挑戰

挑戰１

用 F12 工具查看剛剛範例網站中的 "語法：" 這樣的粗體字是用啥標籤實現的。

挑戰２

剛剛範例網站的下面其實有隱藏了 4 位數密碼是啥？

用 F12 工具看看

挑戰３

去 QR碼產生器：免費、彩色、加LOGO 嘗試下載一個寬高都是1024的 QRcode

加分１

在範例網站中透過 F12 工具插入一張圖片

CSS

CSS

CSS

CSS

CSS

CSS

CSS

CSS + F12

CSS + F12

CSS

實作！

可以去看看剛剛的範例或是自己隨便找個網站看看然後做下面的挑戰

挑戰４

用 F12 工具修改將 google 翻譯的 某些元素的 background-color 屬性改成紅色 (red);讓他變上面那樣。

挑戰５

用 F12 工具修改 CSS 找到範例網站中藏起來的東西是啥。

加分２

用 F12 工具修改 CSS 讓 "所有的" h2 標題變成左上角那樣。

應該叫做開發者工具俗稱 F12

用 F12 工具修改將 google 翻譯的某些元素的 background-color 屬性改成紅色 (red);讓他變上面那樣。

做出自己的猜數字網站！樣式不限，只要能夠依據使用者輸入給出太大、太小、猜對就好