網頁設計

HTML, CSS, JavaScript

我素誰

廖姸惁

人稱文靜知性萌妹

楓資32屆教學

興趣是看小說看電影

我素誰

加我哀居加我低吸

IG：zsisc32_.ys

DC：ys._1021

目錄

介紹網頁架構

安裝VSCode

HTML

CSS

JAVASCRIPT

網頁架構

使用者

前端

後端

手機電腦等

資料庫

HTML, CSS, JS

網頁架構

能看到的文字圖片等都屬於前端

網頁架構

HTML

CSS

JS

前端三件套

網頁架構

HTML

網頁的架構

可以理解為一個人的骨架

網頁架構

CSS

網頁的外觀

可以理解為一個人的長相

網頁架構

JS

網頁的行為

可以理解為一個人的行為

網頁架構

以電風扇來舉例的話

HTML就是底座 支架 扇葉

CSS就是顏色 大小 有幾片扇葉

JS就是按鈕 控制風的大小 擺頭

安裝VSCODE

安裝VSCODE

安裝VSCODE

檔名.html

檔名.css

檔名.js

檔名想打什麼都行

通常會打成上面那樣

但如果你有自己的想法也是沒關係的ㄛ

安裝VSCODE

找到這個東西

按Install下載

有了這個才能讓你寫的程式出現在網頁上

按右下角的GO Live就可以了

安裝VSCODE

有需要的人再下就行了

可以把畫面變中文

方法跟前面一樣不會可以往前翻

HTML

起手式

打！＋ tab

使瀏覽器使用 HTML5 的標準來解析文件

設定頁面上所有文字的語言

包住的是文件的資訊，不直接顯示在頁面

告訴瀏覽器這份文件使用的是 UTF-8 編碼

網頁標題

設定視窗寬度為裝置寬度，設定視窗寬度為裝置寬度（不放大也不縮小）

包住文字圖片之類的

HTML

文字和常用標籤

<h1>別墅裡面唱k</h1>
<h2>水池裡面銀龍魚</h2>
<h3>我送阿叔茶具</h3>
<h4>他研墨下筆直接給我四個字</h4>
<h5>大展鴻圖大師親手提筆字</h5>
<h6>大展鴻圖搬來放在辦公室</h6>

標題大小，1到6是大到小，如圖。

HTML

文字和常用標籤

功能 ​程式碼
註解 <！--內容-->
文字 <p>內容</p>
換行 <br/>
水平線 <hr/>
​粗體字 <b>內容</b>
斜體 <i>內容</i> 
<！--內容-->
<p>內容</p>
內容<br/>內容
內容<hr/>內容
<b>內容</b>
<i>內容</i>
<a href="網址/檔名">要顯示的字</a>
<img src="圖片連結/檔名"/>
連結 <a href="網址/檔名">要顯示的字</a>
圖片 <img src="圖片連結/檔名"/>

HTML

題目

染柳煙濃，吹梅笛怨，春意知幾許。

出自於李清照的《永遇樂．落日熔金》

憬彼淮夷，來獻其琛。

出自於《泮水》

染柳煙濃，吹梅笛怨，春意知幾許。
出自於李清照的《永遇樂．落日熔金》

憬彼淮夷，來獻其琛。
出自於《泮水》

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>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1><b>染柳煙濃，吹梅笛怨，春意知幾許。</b></h1>
    <h3>出自於李清照的《永遇樂．落日熔金》</h3>
    <hr/>
    <h1><b>憬彼淮夷，來獻其琛。</b></h1>
    <h3>出自於《泮水》</h3>

    <script src="script.js"></script>
</body>
</html>

CSS

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

連結到CSS檔

CSS

在html的<head>裡面加上<style>

<style>
    h1 {
      color: blue;
    }
</style>

或者 在css直接打

h1 {
  color: blue;
}

簡潔乾淨 更推薦用下面這種

<h1 style="color: blue;">文字</h1>

CSS

選擇器

h1{
	color: black;
}

屬性

值

CSS

常見選擇器 常見屬性
h1 color
.class font-size
#id background-color
width/height
text-align
padding

顏色

文字大小

背景顏色

寬/高

文字水平對齊

內容與邊框之間的距離

CSS

p {
    color: red;
    font-size: 24px;
    background-color: lightblue;
    width: 200px;
    height: 100px;
    text-align: center;
    padding: 20px;
    }

CSS

color & background-color

顏色有很多種表示方法，這裡舉三種較常見的：

p {
    color: blue;
}

顏色名稱

十六進位顏色值

h1 {
    color: #3498db;
}

RGB顏色值

h1 {
    color: rgb(255, 0, 0 / 0.5);
    /* 紅色帶 50% 透明度 */
}

CSS

px：一種單位

font-size、width、height等都可以使用

p {
    font-size: 24px;
}

CSS

class id
分類群組樣式
給多個元素使用		 給單一元素唯一識別符號
可以重複用在多個元素上 一個 HTML 頁面中只能出現一次
開頭加. 開頭加#

CSS

ID像身分證，每個人只能有一個，不能重複。

CLASS像制服，很多人可以穿同一種衣服。

<p id="title">我是標題</p>
<p class="highlight">我是重點段落</p>
<p class="highlight">我也是重點段落</p>
#title {
      color: red;
      font-size: 30px;
}

.highlight {
      background-color: yellow;
}

CSS

題目

我今早被車撞了，我連忙拉著想帶我到醫院的朋友，邊吐著血邊說：「快……快帶我去看獸醫……」 ，朋友大惑不解，於是我嘴角含笑地解釋：「因為我是(稚楚)的貓！」

人名可替換

我今早被車撞了，我連忙拉著想帶我到醫院的朋友，邊吐著血邊說：「快……快帶我去看獸醫……」 ，朋友大惑不解，於是我嘴角含笑地解釋：「因為我是(稚楚)的貓！」
#2ed9f0 藍色
#fff282 黃色
#333 文字顏色

CSS

解答

body {
  background-color: #2ed9f0;
  padding: 40px;
}

p {
  background-color: #fff282;
  padding: 20px;
  color: #333;
  font-size: 18px;
}

javascript

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

連結到js檔

javascript

在html的<head>裡面加上<script>

<script>
	console.log("Hello world!");
</script>

或者 在js直接打

console.log("Hello world!");

簡潔乾淨 更推薦用下面這種

javascript

函式

function 函式名稱(參數1, 參數2, ...) {
    //函式主體（要執行的程式碼）
    return 回傳值; //可以有也可以沒有
}

javascript

舉例函式

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

        const input1 = prompt("請輸入第一個數字：");
        const input2 = prompt("請輸入第二個數字：");

        const a = Number(input1);
        const b = Number(input2);

        const result = add(a, b);

        alert("加總結果是：" + result);

javascript

題目

請輸入年齡，若滿 18 歲就顯示「可以看限制級」，否則顯示「不行喔！」

提示:可以使用if&else喔

javascript

解答

let age = prompt("請輸入你的年齡");
if (age >= 18) {
  alert("可以看限制級！");
} 
else {
  alert("不行喔！");
}

THANKS

Made with Slides.com