# 網頁製作 僑光科技大學 資訊科技系 2025/09/17 ~ 2026/01/14 上課學期：114學年第1學期 上課班級：日資科114孝 授課老師：高吉隆 電子信箱：[kevinkao888@gmail.com](mailto://kevinkao888@gmail.com) [專業教室使用規則](https://hackmd.io/@nu1gpWVGTf2ERQf4G8_eUg/S1hjuuNLB#/) ###### tags: `課程大綱` --- ## 課程介紹 * 課程大綱 * 每週目標 * 評分標準 * 自編教材 ---- ### 課程大綱 * 了解網頁製作的規劃與實作 * 選擇以下軟體實作網頁製作：[mobirise](https://www.mobirise.com) * 主旨在熟悉製作網頁工具 * 將網頁成果發佈至學生個人網頁 * 包括演示、實作、作業、小考、報告 ---- ### 每週目標 * 18 週上課目標 * 課程說明、網站概念 * 上課演示、實務操作 * 功能介紹、隨堂作業 * 網站規劃、期中報告 * 概念理解、隨堂測驗 * 上課測驗、期末報告 ---- |週| 前 9 週上課目標 |說明 |:-:|:-----------|:----: |1|課程說明、網站概念|點名10% |2|Mobirise 軟體介面與基礎設定| |3|網站發佈、測試、維護與更新| |4|各種區塊介紹、自訂區塊| |5|選定主題、使用雲端工具協作| |6|擬定選單、文案及繪製網站地圖| |7|繳交期中作業、期中報告說明|作業20% |8|期中上台個人報告(第1-25組)| |9|期中上台個人報告(第26-50組)|報告20% ---- | 週 | 後 9 週上課目標 |作業 |:-:|:----------|:-: |10|素材收集、AI生成視覺圖片| |11|首頁封面、產品介紹實作| |12|關於我們、聯絡方式實作| |13|多層導覽列、頁面連結實作|作業15% |14|期末報告說明、隨堂測驗|小考10% |15|SEO設定、期末個人報告準備| |16|期末上台成果報告(第1-16組)|報告25% |17|期末上台成果報告(第17-32組)| |18|期末上台成果報告(第33-48組)| ---- ### 評分標準(100%) * 期中成績：40% * 期中作業：20% (第7週) * 期中報告：20% (第9週) * 期末成績：60% * 上課互動：10% (每週點名) * 隨堂測驗：10% (第14週) * 期末報告：40% (第18週) ---- ### 上課點名(10%) * 依學校點名系統計分方式計算，佔總分10% * 若無任何請假(不含公假)、缺曠，可拿100分 * 計分方式：2節x18週=36堂 * 原則2節課只點1節 * 點名缺曠每1節扣1.5點，請假扣1點 * 若無法到課，請務必請假 * 累積達2/9即扣8點，即達<預警> * 若扣8點，約可拿75分 * 累積達1/3即扣12點，即達<扣考> * 若扣12點，約可拿60分 * 若扣超過12點，不再點名，分數為50 ---- ### 期中作業(20%) * 每1位同學皆完成一份網站計劃書 * 主題：餐飲、服務、工作室、專業或住宿 * 如飲料、便當、咖啡、美髮、健身、婚紗、按摩、攝影、手作、設計、律師、會計、顧問、建設、房仲、飯店或民宿等 * 網頁數：至少8頁，請明確定義每頁名稱 * 內容：每1頁需明確列出所有文字、圖片 * 工具：Google Gemini、Google 文件等 * 規範：PDF檔、於10/29下課前繳交 * 評分：完整性、版面編排、創意獨特性 * 繳交：請直接上傳網路教學平台([連結](https://tronclass.ocu.edu.tw/)) ---- #### 期中作業未交同學 * 11119871 陳冠羽 * 11415115 蔡丞禹 * 11415204 呂諺柏 * 11415227 劉肯捷 * 11415231 黃秉渝 * 11415246 宋侑澤 * 11415252 黃冠宇 ---- ### 期中報告(20%) * 每1位同學皆要上傳簡報檔、並上台口頭報告 * 報告時間：每1個人至少2分鐘，最多3分鐘 * 內容：頁數不限，請節錄重點說明 * 工具：如Google 簡報、Canva等 * 規範：PDF檔、於11/05上課前繳交 * 評分：完整性、版面編排、口語表達 * 報告重點： * 簡報封面：班級、學號、姓名 * 網站主題：名稱大綱、網頁架構 * 設計重點：每頁文字、圖片說明 * 製作心得、資料來源、使用工具 ---- ### 第1次小考(10%) * 請同學閱讀課本及上面所附的練習題 * 4選1單選題為50題，每題2分，共100分 * 同學不一定要買課本，可與同學共用 * 也可以和學長姐購買二手課本 * 也可以直接參考w3schools.com資料 ---- ### 期末報告(40%) * 請運用Mobirise製作主題式網站 * 至少20頁，每頁至少使用1個區塊 * 請更換所有預設的文字和圖片 * 個人或名人可以公開的資訊 * 請於第15週上課前上傳至OCU學生網站FTP空間 * 主機(Host): rs2.ocu.edu.tw * 連接埠(Port): 21(或不填) * 帳號(Username)：s+學號(s11415XXX) * 密碼(Password)：僑光OCU信箱密碼 * 路徑([root floder])：www/work1 * 網址：rs2.ocu.edu.tw/~s11115XXX/work1 ---- ### 自編教材 * 書名：自編教材 * 出版社：無 * 作者：高吉隆 --- ## Mobirise 軟體介面與基礎設定#1 * 為何選擇Mobirise？ * Mobirise的下載、安裝、註冊和登入 * 以各種類型的區塊方式建立網頁 * 設定各區塊的每個選項 * 預覽各種裝置顯示方式 * 單機預覽 ---- ### 為何選擇Mobirise？ * Mobirise基本功能 * 支援RWD響應式設計(即時切換各種裝置) * 操作超簡易(拖拉式操作) * 有無限期免費版本(部分功能限制) * Mobirise特殊功能 * 以區塊為單位建立頁面，可以視覺化調整 * 完全免使用程式碼(No Code設計) * 可輸出為完整網頁檔案(HTML/CSS/JS) * Mobirise付費功能 * 增加許多不同風格的版型設計和區塊功能 * 可使用程式碼(可以修改原始碼客製化) ---- ### Mobirise的下載、安裝、註冊和登入 * Mobirise網址：[連結](https://mobirise.com/) * Mobirise下載：[下載](https://download.mobirise.com/Mobirise6.exe) * 安裝後使用免費版本，不用註冊或登入 * Mobirise的安裝步驟：{%youtube xgHhwGQla5s %} ---- ### 以各種類型的區塊方式建立網頁 * 建立一個網站，並建立一個空白網頁 * 以各種區塊拖拉至網頁中 * 如選單、導覽頁、產品介紹、地點、頁尾等  ---- ### 設定各區塊的每個選項 * 調整各區塊中，各類的選項設定 * 各種尺寸大小的設定(上下邊界等) * 顯示或隱藏的設定(標題、文字、按鈕等) * 各背景的顯示形式(圖片、顏色、影片等)  ---- ### 預覽各種裝置顯示方式 * 電腦螢幕、平板橫式、平板直式、手機  ---- ### 單機預覽或發佈至各種管道 * 單機預覽：將檔案下載至電腦的暫存資料夾 *  --- ## 網站發佈、測試、維護與更新#2 * 發佈至Mobirise的子網域 * 發佈至電腦指定資料夾 * 發佈至FTP伺服器 * 從FTP伺服器下載 ---- ### 發佈至Mobirise的子網域 * 使用亂數產生的子網域：xxx.mobirisesite.com * 命名子網域：ocu114150011.mobirisesite.com  ---- ### 發佈至電腦指定資料夾 * 指定資料夾：D:\Web\Mobirise\ocu11415001  ---- ### 發佈至FTP伺服器 * 主機(Host): rs2.ocu.edu.tw * 帳號(Username)：s+學號(s11415xxx) * 密碼(Password)：僑光OCU信箱密碼 * 路徑([root floder])：www/work1 * 網址：rs2.ocu.edu.tw/~s11115xxx/work1 |  |  | | -------- | -------- | ---- ### 從FTP伺服器下載 * 開啟FileZilla應用程式由站台管理員新增站台 * 一般設定/主機(H)：rs2.ocu.edu.tw * 使用者(U)：s+學號(s11415xxx) * 密碼(W)：僑光OCU信箱密碼 * 進階設定/預設遠端目錄：www * 由遠端站台的work1資料夾下載至本地站台  --- ## 製作網站規劃書一 * 選定主題 * 餐飲：飲料店、便當店、咖啡店 * 服務：美髮店、健身房、婚紗店、按摩店 * 工作室：攝影師、手作店、設計師 * 專業：律師、會計、顧問事務所 * 建設：建設公司、房仲門市 * 住宿：飯店、民宿、汽車旅館 * 撰寫計劃書 * 使用Google Gemini、ChatGPT ---- ### Google Gemini使用說明 * 請使用Google Gemini製作：[連結](https://gemini.google.com/) * 提示詞說明(請修改※※※的內容) * 請幫我規劃一個網站的架構，主題是一個※※※的形象網站，內容包括品牌、商品、門市和聯絡我們，請列出各網頁的清單，含網頁名稱和描述，請參考其它※※※網站的功能，並建議還需要什麼功能頁面，有助於加強網站功能？ ---- * 提示詞說明(以品牌故事為例) * 請幫我規劃其中一個頁面品牌故事的內容，介紹飲料店的創立理念、品牌精神、原料堅持（如茶葉來源、鮮奶選用等），傳達品牌價值。請提供文字描述、圖片說明和背景配色等，並建議在該網頁可以加入什麼內容可以加深品牌的情感連結？ ---- ### 網站架構