# 網頁製作 僑光科技大學 資訊科技系 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|繳交期中作業、期中報告說明|作業10% |8|期中上台個人報告(第1-25組)| |9|期中上台個人報告(第26-50組)|報告30% ---- | 週 | 後 9 週上課目標 |作業 |:-:|:----------|:-: |10|素材收集、AI生成視覺圖片| |11|首頁封面、產品介紹實作| |12|關於我們、聯絡方式實作| |13|多層導覽列、頁面連結實作| |14|期末報告說明、隨堂測驗|小考10%| |15|SEO設定、期末個人報告準備| |16|期末上台成果報告(第1-16組)| |17|期末上台成果報告(第17-32組)| |18|期末上台成果報告(第33-48組)|報告40% ---- ### 評分標準(100%) * 期中成績：40% * 隨堂作業：10% (第8週) * 期中報告：30% (第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 ---- ### 第1次作業(10%) * 請每1位同學尋找現有網站內容 * 網站類型為飲料、餐廳等小型網站 * [一沐日](https://www.aniceholiday.com.tw/)、[肉多多](https://www.twrododo.com/)、[萬客什鍋](https://www.wankeshabu.com/) * 用WORD撰寫，輸出為PDF檔，並上傳至平台 * 每1章作業寫1題，每次繳交多章作業 * 準時繳交60-100分，遲交40-59分，未交30分 * 題目分配：請參考網路教學平台 * 作業繳交：請直接上傳網路教學平台 ---- ### 第1次小考(10%) * 請同學閱讀課本及上面所附的練習題 * 4選1單選題為50題，每題2分，共100分 * 同學不一定要買課本，可與同學共用 * 也可以和學長姐購買二手課本 * 也可以直接參考w3schools.com資料 ---- ### 期中報告(30%) * 每1個人都要上傳網頁、口頭報告 * 報告時間：每1個人至少1分鐘，最多2分鐘 * 請善用簡報工具，如PPT、Canva、Prezi等 * 報告重點： * 網站主題、大綱、網頁選單架構 * 每頁設計重點、使用區塊說明 * 網站設計特色 * 使用心得及Moborise限制 * 文字、圖片資料來源 ---- ### 期末報告(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://mobirise.com/mobirise-free-win.zip) * 安裝後使用免費版本，不用註冊或登入 * 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/) * 提示詞說明(請修改※※※的內容) * 請幫我規劃一個網站的架構，主題是一個※※※的形象網站，內容包括品牌、商品、門市和聯絡我們，請列出各網頁的清單，含網頁名稱和描述，請參考其它※※※網站的功能，並建議還需要什麼功能頁面，有助於加強網站功能？ ---- * 提示詞說明(以品牌故事為例) * 請幫我規劃其中一個頁面品牌故事的內容，介紹飲料店的創立理念、品牌精神、原料堅持（如茶葉來源、鮮奶選用等），傳達品牌價值。請提供文字描述、圖片說明和背景配色等，並建議在該網頁可以加入什麼內容可以加深品牌的情感連結？ ---- ### Google Keep使用說明 * 使填寫Google Forms表單：[連結](https://docs.google.com/forms/d/1qhwX3OvgL3_6HKowLE-i2dtmeZNPZFaxpZ7UL1Xu0FQ/) * 其中請留下你的GMAIL信箱 * 請使用Google Keep記事本：[連結](https://keep.google.com/) * 將收到一個協作的記事本