網頁前端

BY 周妍希廖姸惁鄭云晶

Index

網頁前端介紹

下載與使用VScord

HTML起手式、文字和常用標籤

CSS基礎介紹

前端基礎概論

什麼是前端?

瀏覽器顯示的內容

處理前端(客戶端)需求

查詢資料

顯示結果

程式主要發揮

功能的地方

前端的內容

圖片

輸入

文字＋按鈕

前端三件套

最常被用來開發前端的三種語言

HTML

如果前端是一個人，HTML 就是人的骨架

負責網頁的內容與結構，決定網頁上有哪些東西。

EX.標題、段落、圖片、按鈕等

一個簡易的輸入帳密介面

Css

CSS就像是人的衣服或飾品

可以為HTML的元素加上各種樣式

如調整字體大小間距透明度等

甚至做出簡單的動畫

一個加上CSS的輸入帳密介面

JS

JavaScript 就像是人的靈魂

使用者可以透過他跟網頁做各種即時互動

如按下按鈕後的指令圖片更換或是更複雜的動畫

Click me:D

開發環境

VScode建置

下載連結

step1.根據電腦的執行系統下載對應檔案

step2.打開安裝執行檔

點選並打開

點選

VScode建置

下載連結

step2.打開安裝執行檔

VScode建置

下載連結

建議勾選

step2.打開安裝執行檔

VScode建置

下載連結

step3.開啟檔案

VScode建置

step3.開啟檔案

VScode建置

輸入

特定檔案名稱：

檔案名.html

檔案名.css

檔案名.js

step4.下載Live Server

VScode建置

搜尋 "Live Server"

安裝

step5.執行

VScode建置

創建成功!!!

VScode建置

補充：中文頁面

與Live Server相同的下載方式

VScode建置

HTML

簡報連結

css

階層樣式表

css

一種結構語言

為結構化文件添增外觀樣式

例: 大小、顏色、距離等

階層樣式表

在<head>裡用<style>表示

如何連結Html

<style>
   p{
    color:red;
   }
</style>

<p style="color:red;">hello</p>

一. 內嵌

1. 新增一個檔案檔名.css

2. 在HTML檔 <head>內加入

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

二. 外部連結

語法

h1 {

color : #AAAAAA ;

}

選擇器

屬性

值

選擇器

指定網頁上的哪些元素的樣式

元素選擇器:

class

例: p、h1、h2

標籤名稱

通用選擇器: * 代表所有元素

只能代表一個元素

代表一個類別，可重複

.class名稱

#id名稱

v.s

屬性值

h1{
   font-size:10px;	
}

字體顏色

color

字體粗細

font-weight

文字大小

font-size

p{
  color:#AAAAAA
}

#apple{
  font-weight:bold;
}

.cat{
  font-famliy:"Georgia";
}

字體

font-family

色碼表

bolder、1-1000浮點數

字元間距

letter-spacing

行距

line-height

背景顏色

background-color

.cat{
  letter-spacing:5px;
}

p{
  line-height:5px
}

div{
   background-color:red;
}

試著把剛剛的html題目

改變字體、顏色、行距!

嗨美女 一個人嗎 [換行][水平線]
（吹口哨）[粗體]
（摘下墨鏡）[粗體]
（挑眉））[斜體]
（撥弄瀏海）[粗體]
（單手撐牆）[粗體]
（右腿彎曲繞到左腿後面））[斜體]
（wink拋媚眼））[斜體]
（閃到你面前）[粗體]
（帥氣轉頭））[斜體]
（眼神堅定）[粗體]
（嘴裡叼著玫瑰花）[斜體]
（閃亮登場）[粗體]
（滑倒）[斜體]
（狼狽檢花））[斜體]
（羞愧離場）[粗體]

https://www.w3schools.com/css/

範例

看一下吧

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zsisc 31st</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="guide">
        <div class="title">
            <img src="zsisc_logo.png" alt="ZSISC Logo" class="logo">
            <div class="club-name">ZSISC Information Study Club</div>
        </div>
        
        <div class="menu">
            <a href="#about">About</a>
            <a href="#class">Class</a>
            <a href="#activity">Activity</a>
            <a href="#izcc">IZCC</a>
            <a href="https://www.instagram.com/zsisc._.31st/" target="_blank">Instagram</a>
        </div>
    </div>

    <header >
        <h1 class="main-title">ZSISC 31st</h1>
        <h2 class="sub-title">Coding Every Day!</h2>
    </header>

    <section id="about">
        <h2 class="intro-title">社團介紹</h2>
        <div class="intro-box">
            <img src="zsisc_logo.png" alt="ZSISC Logo" class="intro-logo">
            <p><strong>簡稱 : </strong>中山資研/楓資/ZSISC<br>
                <strong>全名 : </strong>中山女高資訊研究社 Zhong Shan Information Study Club<br> 
                <strong>介紹 : </strong>我們是一個中山女高內的學術性社團，
                在社課會教一些關於資訊領域的課程，
                內容以C++為主，會有很多溫柔的學姊帶你從零開始學，
                下學期會加開進階班，讓學妹可以依照自己的能力選擇適合自己的課程。<br><br>

                除了教學課程，我們也分別與建中資訊INFOR、成功電研CKCSC、景美電資CMIOC三校(合稱IZCC)，
                一同合辦許多活動與聯課，並且也會在放學後共同開設課程，
                提供四校學弟妹與友校們交流的機會。<br><br>

                在這裡除了能學到很多有用的程式語言，還能結交到很多朋友，
                歡迎加入楓資大家庭(#´ᗜ`#)!</p>
        </div>
    </section>

    <section id="class">
        <h2 class="class-title">課程內容</h2>
        <div class="class-box">
            <h3 class="class-sub">社課</h3>
            <p><strong>社課</strong>是在每個禮拜四的最後一堂課，
                上課地點在莊敬大樓二樓的電腦教室二，
                會有經驗豐富的學姐在社課中教授一些基礎的程式相關知識，帶你從0開始了解程式語言！
                我們在社課中教學的內容主要為C++，最後一堂課則會有上機考讓學妹們檢視自己的能力！</p>
            
            <h4 class="class-list-title">普通班</h4>
            <ol>
                <li>C++概論、輸入輸出</li>
                <li>條件判斷</li>
                <li>迴圈</li>
                <li>一維、二維陣列</li>
                <li>函式、遞迴</li>
                <li>字串、指標</li>
                <li>排序</li>
            </ol>
    
            <h4 class="class-list-title">進階班（第二學期）</h4>
            <ol>
                <li>佇列堆疊</li>
                <li>貪婪演算法</li>
                <li>動態規劃</li>
                <li>物件導向</li>
                <li>二分搜</li>
            </ol>

            <h3 class="class-sub">放課</h3>
            <p><strong>放課</strong>是在每個禮拜一到五放學後的晚上6:00~8:00跟
                建中、成功、景美在建中共同舉辦，教學內容與社課不盡相同，內容多元且更加進階，
                多了更多實作的部分，如果想要更加精進自己的程式技術，放課會是妳的第一選擇！</p>
            </div>
    </section>

    <section id="activity">
        <h2 class="activity-title">活動介紹</h2>

        <div class="carousel-container">
            <button class="carousel-button left-button">&#10094;</button>

            <div class="carousel">
                <div class="activity-box">
                    <h3>暑訓</h3>
                    <p class="date">📅 2024.8.5 ~ 2024.8.11</p>
                    <p>暑訓是 IZCC 為升高一新生舉辦的第一場大型活動！
                        在為期 7 天的時間裡，我們精心安排了各種 有趣且神秘的活動，
                        讓你在這個夏天收穫滿滿的歡樂與回憶。
                        此外，還有一系列資訊相關課程，
                        帶你從零開始接觸程式設計、電腦等主題，
                        讓你不僅能玩得開心、結識志同道合的朋友，
                        更能學習到許多實用的知識，為未來的資訊學習打下基礎！
                    </p>
                </div>

                <div class="activity-box">
                    <h3>內迎</h3>
                    <p class="date">📅 2024.9.24</p>
                    <p>內迎是 楓資最新推出的活動，
                        專為社內成員設計，讓大家能夠更快熟悉彼此！
                        活動當天，我們將一起享用美味的 Pizza、喝著冰涼的飲料，
                        玩各種有趣的小遊戲，讓你輕鬆融入社團氛圍。
                        這不僅是一場歡樂的聚會，
                        更是與學姊與同屆學妹們建立深厚友誼的好機會。
                        快來參加內迎，讓我們一起歡笑、共享美好時光！</p>
                </div>

                <div class="activity-box">
                    <h3>外迎</h3>
                    <p class="date">📅 2024.10.27</p>
                    <p>外迎是 IZCC 每年最盛大的迎新活動，
                        我們將邀請來自 建中、成功、景美等友社的成員，
                        在戶外舉辦一場超級刺激的大地遊戲！
                        透過團隊合作與競賽，你可以認識更多志同道合的朋友，
                        與學長姊交流高中社團生活的點滴。
                        這不僅是歡迎新血的盛會，更是一個難得的機會，
                        讓你在忙碌的課業之外，放鬆心情、創造回憶！
                        來參加外迎，為你的高中生活增添更多色彩吧！</p>
                </div>

                <div class="activity-box">
                    <h3>秋遊</h3>
                    <p class="date">📅 2024.12.8</p>
                    <p>秋遊是一場讓 IZCC成員遠離繁忙學業，放鬆身心的郊遊活動！
                        我們將安排一趟輕鬆愉快的一日旅程，帶領大家走進大自然，
                        在美麗的秋景中與夥伴們共度歡樂時光。這是個難得的機會，
                        讓你短暫擺脫課業壓力，享受寧靜悠閒的片刻。
                        快來一起踏上這場秋日冒險，留下美好的回憶！</p>
                </div>

                <div class="activity-box">
                    <h3>耶誕晚會</h3>
                    <p class="date">📅 2024.12.20</p>
                    <p>還在煩惱聖誕節該怎麼過嗎？
                        IZCC為你準備了一場四校聯合耶誕晚會，讓你度過最難忘的聖誕節！
                        在這個溫馨的夜晚，我們將舉辦 交換禮物、趣味遊戲、Pizza 聚餐等活動，
                        讓來自不同學校的社員們能夠互動交流，在節日的氛圍中結交新朋友。
                        這是一個充滿驚喜與歡樂的夜晚，趕快來參加，和大家一起迎接最棒的聖誕節吧！</p>
                </div>

                <div class="activity-box">
                    <h3>寒訓</h3>
                    <p class="date">📅 2025.2.3 ~ 2025.2.9</p>
                    <p>寒訓是IZCC舉辦的另一場大型資訊訓練營，內容與暑訓相似，
                        但我們將帶來獨特的課程與挑戰，讓你在短短 7 天內，
                        不僅能提升程式設計能力，還能參與許多有趣的團隊活動。
                        這是一場充滿挑戰與成長的冬令營，讓你在資訊的世界裡探索更多可能性，
                        並與夥伴們一同創造難忘的回憶！</p>
                </div>

                <div class="activity-box">
                    <h3>春遊</h3>
                    <p class="date">📅 Coming Soon...</p>
                    <p>敬請期待！</p>
                </div>

                <div class="activity-box">
                    <h3>茶會</h3>
                    <p class="date">📅 Coming Soon...</p>
                    <p>敬請期待！</p>
                </div>
            </div>

            <button class="carousel-button right-button">&#10095;</button>
        </div>
    </section>
    

    <section id="izcc">
        <h2 class="izcc-title">IZCC</h2>
        <div class="izcc-box">
            <div class="partner">
                <a href="https://www.instagram.com/infor_37th/" target="_blank">
                    <img src="infor_logo.png" alt="建國中學資訊社" class="partner-logo">
                </a>
                <p class="partner-name">建國中學資訊社</p>
                <p class="partner-name-en"><strong>INFOR</strong></p>
            </div>
        
            <div class="partner">
                <a href="https://www.instagram.com/zsisc._.31st/" target="_blank">
                    <img src="zsisc_logo.png" alt="中山女高資訊研究社" class="partner-logo">
                </a>
                <p class="partner-name">中山女高資訊研究社</p>
                <p class="partner-name-en"><strong>ZSISC</strong></p>
            </div>
        
            <div class="partner">
                <a href="https://www.instagram.com/ckcsc37th_dairy/" target="_blank">
                    <img src="ckcsc_logo.png" alt="成功高中電子計算機社" class="partner-logo">
                </a>
                <p class="partner-name">成功電子計算機研習社</p>
                <p class="partner-name-en"><strong>CKCSC</strong></p>
            </div>
        
            <div class="partner">
                <a href="https://www.instagram.com/cmioc_31st/" target="_blank">
                    <img src="cmioc_logo.png" alt="景美女中電腦資訊社" class="partner-logo">
                </a>
                <p class="partner-name">景美女中電腦資訊社</p>
                <p class="partner-name-en"><strong>CMIOC</strong></p>
            </div>
        </div>        
    </section>
    
    <script src="script.js"></script>
</body>
</html>

body {
    background-color: #1e1e1e;
    color: #d4d4d4;
    font-family: "Comic Sans MS", sans-serif;
    margin: 0;
    padding: 20px;
}

.guide {
    background-color: #252526;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    position: fixed;
    width: calc(100% - 80px);
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    border-radius: 15px;
}

.title {
    display: flex;
    align-items: center;
}

.logo {
    height: 50px;
    margin-right: 15px;
    border-radius: 50%;
}

.club-name {
    font-size: 24px;
    font-weight: bold;
}

.menu a {
    color: #d4d4d4;
    text-decoration: none;
    margin: 0 30px;
    font-size: 22px;
    transition: color 0.3s ease;
}

.menu a:hover {
    color: #eab4fe;
}

header {
    text-align: center;
    margin-top: 30px;
    padding: 100px 20px;
}

.main-title {
    font-size: 80px;
    color: #ffffff;
    transition: transform 0.3s ease;
}

.main-title:hover {
    transform: scale(1.05);
    color: #00d9ff;
}

.sub-title {
    font-size: 36px;
    color: #eefa81;
    margin-bottom: 30px;
}

.intro-title,
.class-title,
.activity-title,
.izcc-title {
    font-size: 48px;
    font-weight: bold;
    background-color: #1e1e1e;
    padding: 15px 35px;
    border-radius: 12px;
    color: #78c2f0;
    margin-bottom: 1px;
    display: inline-block;
    position: relative;
    left: 20px;
    margin-top: 15px;
}

.intro-logo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-bottom: 20px;
    margin-top: 20px;
    object-fit: cover;
}

.intro-box,
.class-box,
.carousel-container,
.izcc-box {
    background-color: #252526;
    padding: 10px 50px 50px;
    border-radius: 20px;
    margin: 80px auto;
    width: 85%;
}

.intro-box {
    font-size: 28px;
}


.class-box {
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 28px;
}

.class-sub {
    font-size: 45px;
    color: #f894b7;
    font-weight: bold;
    margin-left: 5px;
    text-align: left;
}

.class-list-title {
    color: rgb(144, 204, 234);
    font-size: 30px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
}

.carousel-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 90%;
    margin: 80px auto;
    gap: 40px;
    overflow: hidden;
}

.carousel {
    display: block;
    margin: 0 auto;
}

.activity-box {
    min-width: 350px;
    min-height: 400px;
    background-color: #252526;
    padding: 50px;
    border-radius: 20px;
    text-align: left;
    font-size: 28px;
    transition: transform 0.3s ease;
}


.carousel-button {
    background-color: #3e3e42;
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    transition: background 0.3s ease, transform 0.2s ease;
    z-index: 10;
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%);
}

.carousel-button:hover {
    background-color: #007acc;
    transform: scale(1.2);
}

.carousel-button.left-button {
    left: 20px;
}

.carousel-button.right-button {
    right: 20px; 
}

.izcc-box {
    display: flex;
    justify-content: space-evenly;
    width: 85%;
    margin: 80px auto;
    text-align: left;
    gap: 40px;
}

.partner {
    text-align: center;
    padding: 20px;
}

.partner-logo {
    height: 90px;
    transition: transform 0.3s ease;
    margin-bottom: 15px;
    border-radius: 50%; 
    width: 100px;  
    height: 100px; 
    object-fit: cover; 
}

.partner-logo:hover {
    transform: scale(1.1);
}

.partner-name {
    font-size: 20px;
    color: #d4d4d4;
    margin-bottom: 5px;
}

.partner-name-en {
    font-size: 30px;
    color: #0f2f99;
    font-weight: bold;
    margin-bottom: 15px;
}

網頁前端

Index

前端基礎概論

瀏覽器顯示的內容

處理前端(客戶端)需求

查詢資料​

顯示結果

程式主要發揮

功能的地方

前端的內容

圖片

輸入

文字＋按鈕

前端三件套

HTML

Css

JS

開發環境

HTML

css

css

如何連結Html

一. 內嵌

二. 外部連結

選擇器

屬性 值

範例

HTML

CSS

網頁前端

More from zsisc32

查詢資料

屬性值