架設網站使用Google Site協作平台

Q1：記錄個人網站網址（初次建立時）

Q2：簡述當日新增或修改內容附上網站畫面

https://sites.google.com/dcsh.tp.edu.tw/班級座號

EX：https://sites.google.com/dcsh.tp.edu.tw/90101

-------------------------------------

Google Fonts - Noto Color Emoji - 開源字體 - 表情符號圖片

個人專屬網站

內容限制：

遵守 [資訊倫理]. [資訊安全], 可使用老師提供之素材

應用：

履歷. 作品.科展. 社區計劃.活動.課程.訓練.商店

規劃網站主題架構：網頁架構圖

素材儲放位置：

請統一放在個人雲端資料夾

發布：

要求公開搜尋引擎不顯示我的網站

編輯者必須先審查再發布變更內容

建立副本

網首 3 大基本的架構組成：

頁首 (Header) ：品牌 LOGO （增加品牌識別度）. 選單

內容 (Body)：網頁內容

設定：

導覽：側邊 -大量頁面

品牌圖片：

標誌

公告橫幅：

與他人共用：

已發布的網站：（權限設定）：校內使用者可觀看

預覽：

RWD（Responsive Web Design）響應式網站，網站內容會隨著訪客載具(電腦、平版、手機)自動調整成適當的排版(只需一套程式代碼)。

協作平台文件名稱：

對外網站名稱：左上方名稱

(入學年度)班級座號（EX:90101）（EX:11190101）

橫幅：標題名稱. [變更圖片]. [標頭類型]

選擇主題：風格呈現，影響所有頁面

頁面：根據 [網頁結構圖]

橫: gif

新增頁尾：

插入：

文字方塊：字型: Noto Sans

圖片：

明暗（右下三顆星星), 比例瘦身;新增替代文字:無障礙網頁

PowerPoint製作文字圖片：最新公告

Adobe Express:圖片遮罩

與我聯絡：mailto: tel:02-

按鈕：

外框線. 外部連結

多語系：-en. 新增選單專區.新增連結 Language

//-----------------------------------------------------------------------------------------------------//

// Google Drive 相片

//-----------------------------------------------------------------------------------------------------//

https://drive.google.com/file/d/ 照片網址 /view?usp=drive_link

https://drive.google.com/uc?id=

https://drive.google.com/uc?id=1lXMRHJLZF4khmIh6HseWvh85nWbDq3Zd

//-----------------------------------------------------------------------------------------------------//

// Banner輪播外掛使用Swiper Slider 自行編輯HTML與Javascript，可以讓版面更豐富！

//-----------------------------------------------------------------------------------------------------//

<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />

<!-- Demo styles -->
<style>
.swiper {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}
.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
:root {
    --swiper-navigation-size: 44px;
}
.swiper-button-next, 
.swiper-button-prev {
    padding: 0.5em 1em;
    background: white;
    color:black;
    opacity: 0.65;
    border-radius:50%;
}
.swiper-button-next {
    right: 20px;
    /*display: none;*/
}
.swiper-button-prev {
    left: 20px;
    /*display: none;*/
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    display:none !important;
}
.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 1.5rem;
}
.swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center; 
}
.swiper-pagination-bullet {
    background: white;
    opacity: 0.8;
}
.swiper-pagination-bullet-active {
    background: white;
    width: 30px;
    height: 10px;
    border-radius:5px;
}
@media screen and (max-width:1024px) {
    :root {
        --swiper-navigation-size: 33px;
    }
    .swiper-button-next, 
    .swiper-button-prev {
        padding: 0.5em 0.8em;
    }
}
@media screen and (max-width:768px) {
    :root {
        --swiper-navigation-size: 16px;
    }
    .swiper-button-next, 
    .swiper-button-prev {
        padding: 0.5em 0.7em;
    }
    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 1rem;
    }
    .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
    }
    .swiper-pagination-bullet-active {
        width: 20px;
        height: 6px;
    }
}
</style>

<!-- Swiper -->
<div class="swiper mySwiper">
    <div class="swiper-wrapper">
        <!-- Woody Begin -->

<div class='swiper-slide'><a href='https://www.google.com/'><img src='https://lh3.googleusercontent.com/pw/AP1GczMiMA6c58-jMOovWSri6PudFOBpc4r3Na2HJioCA2oeAtThKn1ChpVKe1M3rTbHaCwoJe3YaIlpKhxxnmOUK3Zvs3Z5pBr5-9oSZnDSOokDsX244SuuWhwGC2nPYU3u4FUxauFP_dWVo8bWp-aewLXz8w=w1024-h378-s-no?authuser=0'></a></div>
<div class='swiper-slide'><a href='https://makecode.microbit.org/'><img src='https://lh3.googleusercontent.com/pw/AP1GczM-lRjg748ab1XF6k1nDEhntZOVztgsReQNT_eoWYLts25zET0RTxsB3o5Xf0szpBR73I_4UTWSzdGUjtf9sM8iX8oSJdt-g5qPu_dd8QwmFswArj-QQP2bbMVLgX8P2_yPCq3QTBOjSmJXW-K_KkJsdw=w1024-h360-s-no?authuser=0'></a></div>
<div class='swiper-slide'><a href='https://www.officeplus.cn/PPT/template/?keywords='><img src='https://lh3.googleusercontent.com/pw/AP1GczOrzv2Nmkk611M_dLwrPU-CcgZzbfefqmWRKIWL9ZoqjDFSwYYRH58AeIpzPX8EiCc9kdeW9lQyJQ3CW4rVNmrLr_SfS2c6edDbbg7O5xdwOtsuzzoRnHhAn0Koo_i12cw9MB7yvlv56f2P4uiUIrOagg=w1024-h190-s-no?authuser=0'></a></div>
<div class='swiper-slide'><a href='https://colab.research.google.com/'><img src='https://lh3.googleusercontent.com/pw/AP1GczPRK1ef37S6d0sdpFi1mh72T_XwynMEdCePbyyYZA0BHCJvpMiM2sG6JWmOjACQSUxGmbGgGxKRHgw_T-OsxWOildcM3vZjOrjU6THHf54fjxo7Li4ZZEXfJqqncH6BvHc0TmsmntvTvxhl83mUpAe32w=w1024-h504-s-no?authuser=0'></a></div>
<div class='swiper-slide'><a href='https://www.programiz.com/python-programming/online-compiler/'><img src='https://lh3.googleusercontent.com/pw/AP1GczPCQII3nkbGDfGBbYwADd0cOevZd9RyKB8uWM0Vgb0G6XTJWI7apCJ13QqCfUC6_nD0mB9pZIQArf90Hb0fIw1IoOG74I0hn_IGRIWwH8dYqHg4o9_IzTQZWIxNkCOi9ASiOxA7fEVwpqBZ8Vy7QZtBBQ=w1024-h557-s-no?authuser=0'></a></div>
<div class='swiper-slide'><a href='https://scratch.mit.edu/projects/editor/?tutorial=getStarted'><img src='https://lh3.googleusercontent.com/pw/AP1GczPAm4koBY1UyFnnoDtVIMG-muK9GPKiF81Xvqh0Nlv5msBS_lJTCVSSlu-D7RJR_Of8U0JnPQ-k9NIMujuRmcbgxvFSJuMxynFCQFpbXxcfi2tAbbKg3AOLmpCO2qnM4rkfF11IU-GL9xdq-1dHKZWQfg=w1024-h248-s-no?authuser=0'></a></div>
        <!-- Woody End -->
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-pagination"></div>
</div>

<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 3600,
            disableOnInteraction: false,
        },
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
</script>

資科Woody量子互動

架設網站使用Google Site協作平台

張貼者： LiveSciTech

聯絡表單