114網頁設計&實作專題

--- title: #114-1網頁設計&創意實作專題教學筆記 tags: Templates, Talk description: by Fefe --- <style> h1{ color:#FC7A57 !important; } h2{ color:#ff7e6b !important; } h3{ color:#ffa69e!important; } </style> # 114網頁設計&實作專題 <div style="color:rgb(201 78 71);font-size:2em;">   [114各組回報區](https://docs.google.com/spreadsheets/d/1-fz-TGRxml4KFqd5Z58zCjtbFam-va1pbgICqBKevgo/edit?usp=sharing) [114各組檔案上傳下載區](https://drive.google.com/drive/folders/1hMbYpDQ1H0eyLHirk4bZDNzQW-o3pOC7?usp=sharing) [討論padlet](https://padlet.com/iamfefe/web-class-activities-sustainability-ddajepq7fdlxz6by) </div> [ [gink](https://github.com/geovens/gInk/releases/) | [ZoomIt](https://learn.microsoft.com/en-us/sysinternals/downloads/zoomit) | [wacom](https://cdn.wacom.com/u/productsupport/drivers/win/professional/WacomTablet_6.4.3-1.exe) ] --- --- # 網頁設計&創意實作專題概念 - 點名選小老師 :muscle: - 座位表填寫 - 課程介紹 - 網頁設計基本觀念 --- # 課室英語練習 > ## 「Attention, please. It is class time.（請注意，上課時間到了。）」 Okay. / Got it. / Yes, teacher. I’m ready. / We’re ready. Sorry. I’ll be quiet now. One moment, please. I’m finishing up. > ## 「Are you ready?（妳/你準備好了嗎？）」 Yes, we are. / Yes, I am. Not yet. Give me a minute, please. Almost. I just need a pen/book. Could you wait a second, please? I think so. / I’m good to go. > ## 「I’m going to call the roll.（我要點名了。）」 Here. / Present. / Yes. I’m here. / Over here. Present, teacher. / Here, Ms./Mr. [姓氏]. That’s me. / Speaking. Could you repeat my name, please? > ## 「Is anybody absent today?（今天有人缺席嗎？）」 Yes, [Name] is absent. [Name] isn’t here today. No, everyone is here. I’m not sure. [Name] will be late. / [Name] is on leave. > ## 讓我們開始吧。 Let's get started. # 單元一課程介紹 ### 我是Fefe :joy_cat:  --- ## 課程綱要 1 透過線上課程教材，學習網頁設計技術與創意專題製作 2 UI/UX介面與互動設計 3 網頁語言HTML、CSS、bootstrap教學 4 實作型小論文分組撰寫 5 互動媒體與網站亮點結合 6 網站套件jquery.js、chart.js、wow.js語法 7 專題報告完成 8 融入雙語教學資源 --- ## 預期成果 1 團隊完成一個商業實用型可執行的網站，並建置在學校的伺服器。 2 課程進行同步使用HackMD完成個人學習線上筆記。 3 文件製作，依系統報告的格式撰寫，可參加競賽、或充實學習歷程平台。 --- - [科課程架構](https://www.clvsc.tyc.edu.tw/var/file/0/1000/img/68/113.jpg) --- - 課程進度參考-作業與考試配合課堂進度宣佈 > - [網頁設計](https://drive.google.com/file/d/16hmr016qC1kxJh8Ogg7dQfEn9yQy2PFI/view?usp=sharing) > > - [創意實作](https://drive.google.com/file/d/19ufi7amy1P7U7MRP4NlGbgrgL6EjXZar/view?usp=sharing) --- ## 課堂要求 > - 平時：上課隨堂練習與加分 > - 期中期末：專題+網站實作(電子書) > - 期末：課堂筆記+心得反思 > 註台科大備審資料要求 > https://www.admission.ntust.edu.tw/p/405-1052-93244,c9997.php?Lang=zh-tw > 註升學計分方式說明 > https://www.techadmi.edu.tw/111new/page.php?pid=165 > - Seize the day & 先求有再求好 --- ## 網頁作品欣賞 [網站互動繪本作品 The Boat](https://www.sbs.com.au/theboat/) > 請幫我摘要這個網站的內容與劇情,分段列出中文,並且以高中生可以理解的用語https://www.sbs.com.au/theboat/ > ChatGPT 說： > 以下是我整理的《The Boat》互動漫畫網站的內容與劇情摘要，使用中文分段說明，並採取高中生易懂的語言： > > 作品介紹與背景 > > 作品類型與主題 > 這是一部由 SBS 澳洲電視台製作的互動式圖像小說（interactive graphic novel），改編自越南裔澳洲作家 Nam Le 的短篇《The Boat》，講述 16 歲的少女梅（Mai）在西貢淪陷後，被父母送上一艘船逃往澳洲的故事。 > SBS > MATT HUYNH > Communication Arts > > 藝術創作與多媒體特色 > 融合了 222 張手繪插圖、59 段動畫、11 張照片與 1 支影片。聲音設計與動畫效果加入，使讀者更有沉浸感。 > MATT HUYNH > Communication Arts > > 製作團隊與技術手法 > 由 Nam Le 編劇、Matt Huynh 插畫、Kylie Boltin 製作、Matt Smith 規劃與開發、音效由 Sam Petty 設計。使用 Photoshop、Illustrator、After Effects、Pro Tools、JavaScript、WebGL 等技術實現。 > MATT HUYNH > Communication Arts > > 製作背景意義 > 上線時間正值西貢淪陷與越南難民（Boat People）移民澳洲 40 週年，具歷史紀念與社會反思意義。 > MATT HUYNH > The Middle Spaces > > 互動體驗與感官設計 > > 瀏覽方式 > 讀者透過滑動（scrolling）操作故事，有自動播放與手動控制兩種閱讀模式，可以依自己的節奏深入體驗。 > Medium > Communication Arts > > 動畫效果呈現船的晃動與風暴 > 在第一章「風暴」中，畫面晃動、文字與圖像被「甩動」模擬船被風浪襲擊的感覺，氣氛非常緊張。 > Medium > Communication Arts > > 音效與氛圍融合 > 風雨声、船體嘎吱作響、母親的越南民謠、鳥叫、市場聲、青蛙叫、水聲……不同場景配上不同音效，加強代入感。 > Medium > The Middle Spaces > > 視覺語言風格 > 插圖採用類似水墨風格，線條流動強烈，黑白為主，部分場景（如花朵）以彩色呈現，突出情感；圖文有時漂浮、散落，創造不安感與情緒張力。 > The Middle Spaces > Medium > ### 劇情大綱 > 1. Mai leaves her parents and gets on the boat alone. > > 1. A big storm hits the boat and people are very scared. > > 1. Mai meets Quyen and her little son Truong on the boat. > > 1. People have little food and water, and they feel very weak. > > 1. Truong dies from sickness, and his body goes into the sea. > > 1. The boat reaches land, but the hard memories stay with Mai. > > 反思與文化意義 > > 數位互動展現難民經驗 > 故事不是讓你「看完就算了」，而是讓你感受到每個動作與情緒：滑動代表你也在推動梅，圖像搖晃讓你身歷其境。 > The Middle Spaces > Communication Arts > > 讓閱讀不只是娛樂，而是倫理責任 > 作品挑戰讀者：當你消費這個故事，是不是也應該對現實中的難民產生關心與共鳴？不只是感動，更應該有社會行動。 > The Middle Spaces > > ### 小結表格（高中生理解版） > | 項目 | 簡述 | > | -------- | -------- | > | 形式 |互動圖像小說（滑動、動畫、音效、畫面）| > |主角 |16 歲的梅（Mai）| > |經歷 |暴風、飢渴、失去、抵達| > | 情感氛圍 |無助、恐懼、悲傷、憐憫| > |創作者背景 |越南裔作者與藝術家，融合個人歷史與文化表達| > |目的 |感同身受難民故事，激起同理與責任感| ## [SEDGs](https://futurecity.cw.com.tw/article/1867) > https://sdgs.un.org/goals ## :joystick:實作 [說說你的關注什新聞吧](https://padlet.com/iamfefe/padlet-ve2vk6uv37hm4g3r)? # 單元二發掘問題 - [桃園巿文化資產](https://nchdb.boch.gov.tw/city/Taoyuan) - [全國專題得獎作品](https://vtedu.k12ea.gov.tw/nss/s/business/505) - [網界博覽會得獎作品](http://cyberfair.taiwanschoolnet.org/global_award) - [你也可以做到的程度](https://www.clvsc.tyc.edu.tw/p/412-1000-1036.php?Lang=zh-tw) --- # 單元二-1 專題的架構 ![image](https://hackmd.io/_uploads/rknnf3r9ex.png) --- # 單元二-2 參考網頁型[得獎專題](https://vtedu.k12ea.gov.tw/nss/s/business/505) > [吹糖](https://drive.google.com/file/d/1Dp8OKtrPg-6FKmggUeQ0O3Q_yUpvcZ4V/view?usp=sharing) > [塑膠活動](https://drive.google.com/file/d/1r3GaSuLMR4YFvkz1AzFUvsE4fJhjTGG8/view?usp=sharing) > [茶園行銷](https://drive.google.com/file/d/1ZFalnji3TXMKwrX8cMLcLWrhh8stIusY/view?usp=sharing) > [木匠](https://drive.google.com/file/d/1qGgseYpbPSAQ4M5Bh6sGFxsVvhKM_1gM/view) > [柚小農行銷](https://drive.google.com/file/d/1MKT_JQKHtiKHa7esiPUhfsYut8tw7LUX/view) > [芭樂行銷](https://drive.google.com/file/d/1dnRSq5yyLyHaqPgVefu1NQqbfDOj2IcU/view) > [客家APP](https://drive.google.com/file/d/1Usf2ukRAqQl99AFMp-EU_3-r9noNDtmD/view) > [雷雕與借用系統應用](https://drive.google.com/file/d/13YCULIuiLbF8H9nnljax1E-KpSJKxZw8/view) > [剩食](https://drive.google.com/file/d/1HXMprrZeq-cqd6zZrgokJbbHp_6z-hZv/view) > [早市女裝-自營店可參考](https://drive.google.com/file/d/16QRU5LEDKMjIUGvnqjFbHRVPnowGkIIY/view) > [電電租](https://drive.google.com/file/d/1ZH00U1fTX-dQLC9PXeeSbiCkH3zDLrDi/view) > [神轎-廟宇組可參考](https://drive.google.com/file/d/1SsQRl1GxcYjzeM7vp04h3HRKK8SBVZXF/view) > [書法-可與壢商寫春聯活動結合](https://drive.google.com/file/d/1dTjq0x-HnHVx16VEbAFF1D3AwMul8XLX/view) > [銀髮族互動遊戲](https://drive.google.com/file/d/1cIsH3l6TmrWyNlkkkn7iU5yndTjEJi3B/view) > [畫糖](https://drive.google.com/file/d/1TIjiBTglq_bvjx6yiXzjpxdQOugfNKzz/view) > [織道教材](https://drive.google.com/file/d/1LE0gtjLhiMwJhn8BZVZCRPtgA36focEn/view?usp=drive_link) > [曾甜社群](https://drive.google.com/file/d/1tIp_I6J0kH7D3goq0fOUv4PcBEBJDAVL/view?usp=drive_link) > [懶灶咖創業](https://drive.google.com/file/d/1OUznwpGIXgHPIMrJx1tUlCBRxHOkHYVu/view?usp=drive_link) --- [其他群別的專題](https://sites.google.com/fhvs.ntpc.edu.tw/tradeart/%E9%A6%96%E9%A0%81?authuser=0) --- # 單元二-3 專題的好處 # 單元二-4 題目檢視 #### S具體的　目標要清楚明確。要達到怎樣的目的？用怎樣的方法？ #### M可量化　資料可收集得到？ #### A可達成　方法是否做得到？組員能力？工具？時間？（跨科／域？校內？科大？業界？） #### R相關的　是否與商業相關？與主題相關？ #### T有期限　時間內做得完嗎？ --- > 「不要製作一個沒有需要且不實用的東西， > 但如它確實是有『需要』又實用的東西時， > 不要猶豫也讓它變得很美麗吧。」 ## 白板-靈感牆 ### 仰山為例 ### :joystick:實作1 下載至少3份你最想參考的得獎專題、2份老師提供的相專題 ### :joystick:實作2 討論並在靈感牆中建構以下項目 > 1.Title: > 2.Key feature: > 3.Are you SMART? > * Specific > * Measurable > * Achievable > * Relevant > * Time limit --- # 單元三設計思維ewant ### 1. AEIOU空間觀察 > #### Activities > 讀者在自習區安靜閱讀與做筆記，使用筆電撰寫報告。 > 館員辦理借還書、上架新書，並帶領新生導覽。 > #### Environments > 自習區：單人座位、檯燈與插座充足，設有安靜標示與時鐘。 > 兒童閱覽區：彩色地墊、低矮書架、故事角，牆面張貼主題書展海報。 > #### Interactions > 讀者與館員：讀者詢問館藏位置與館際互借流程，館員提供檢索與申請協助。 > 讀者彼此：在小組討論室以小聲討論分工並共享資料。 > #### Objects > 設備與資源：館藏書籍、期刊、電子資料庫、影印機與自助借還機。 > 學習工具：耳機、充電線、書架擋板、螢幕閱讀器與助讀放大鏡。 > #### Users > 一般讀者：大學生與自學者，長時間使用自習區與電子資源。 > 館方人員：參考館員與系統管理員，負責讀者服務、館藏管理與設備維護。 > ### 問題分類 > 最需要>次要>不急迫 > ### 2. 採訪記錄-模擬採訪 > 提醒[研習報名](https://docs.google.com/forms/d/e/1FAIpQLSfdFdu-5uhEjuKXpRtlshIzSr87_G4zWInvdczcjtj4yBi4Bw/viewform) > 報告完成 ### 3. 5W1H > Who > Why > Where > When > What > How ### 4. Empathy Map ![image](https://hackmd.io/_uploads/SkqaDXTqxe.png) Photo By edco.global ### 5. HMW How might we #### 使用者____需要_____因為____(洞見)對他很重要 # 單元三-1 成果檢核 > 本週完成以下工作 > 1. ewant影片看到1-5完成 > 2. 完成簡報: > P1:題目 > P2:AEIOU > P3:設計思考的結論HMW > P4:專題特色 > 3. 問卷設計完成,本週發放 > 4. 蒐集各類資料,下週開始製作報告與電子書 ## 命題的檢查 > 可以參考以下提示詞 > * 一個傳統的工藝師傅,如果希望他的技藝能夠傳承下去,身為一個商管群資料處理科的電腦相關專業的高中生,可以為他做哪些專題的應用?請列出十個 > * 如果這組的同學希望探討的是使用者_邱師傅需要這個手藝讓更多人看見,因為傳承技藝對他很重要,那最適合的專題命名請列出十個 > * "看見邱師傅：傳統工藝的數位擴散專案",如果想以這個為題,這是一個以傳統賭博四色牌,卻能變成工藝藝術品,會有的專題特色是什麼? > * 如果我想探討一般大眾為什麼對這個主題很陌生,以及背後會有的可突破點,讓它可以普及甚至是有機會商業化,我應該怎麼設計問卷題目,請給我一個至少二十題的例子 ## 其他問法 > #### 請參考這幾份資料,幫我確認這個專題的命名是否可以有其他想法更好"「布」可思議!「戲」興樂無窮-年輕視角下的布袋戲數位行銷，以泰興樂掌中藝術團為例" > #### 承上,請參考剛剛上傳的四份檔案,為這個題目"「布」一樣的經典：「戲」速擴散—泰興樂的數位品牌經營專案"訂出研究的架構與大致的內容 # 單元三-2 專題研究的框架 ## 各組預計開發項目 ![](https://hackmd.io/_uploads/rycQy7YJT.jpg) ## chatAI提示詞 > #### 1. 你是一個專題企畫,針對爆米香這個以米製成的傳統點心,希望能設計具有創意巧思的包裝,讓一個個人店鋪可以有些創新的行銷手法,幫助他提昇銷量,並且加入網站的行銷,針對這個專題的目的、sedgs關聯、製程研究、包裝手法、網站設計與行銷、問卷與結論建議等,設計一個十頁的簡報,每個簡報要有標題與詳細內容 > #### 2. 承上,請幫我整理出十頁的簡報內容,以傳統布袋戲的主題,並且為泰興樂掌中藝術團進行年輕化角度的行銷方案,預計要做出的品為網站,年輕化的週邊商品與應用,教學產品,電子書或是AR與VR等新興科技的應用,以這樣一個專題,設計一個十頁的簡報,每頁一個小主題,每個頁面的主題大致為以下:題目背景的分析,與SEDGS的關聯,商業的分析,問卷使用,網站設計架構,結論與建議等,每頁的內容請詳細列出 ## 用[google notebookLM](https://notebooklm.google.com/)整理架構 ## 使用[gamma](https://gamma.app/signup?r=lbx9kk524p7ou07)產生專題架構 > #### 請以吹糖文化為主題,吹糖是一項傳統的民間技藝,可以將糖加熱,吹出各種形狀,希望據以創作出繪本與互動動畫網站,以這樣一個專題,設計一個十頁的簡報,每頁一個小主題,每個頁面的主題大致為以下:題目背景的分析,與SEDGS的關聯,商業的分析,問卷使用,網站設計架構,結論與建議等,每頁的內容請詳細列出 > #### 以下是以吹糖文化為主題的十頁簡報設計，針對每一頁的內容進行詳細列出，涵蓋題目背景的分析、SEDGS的關聯、商業分析、問卷使用、網站設計架構、結論與建議等小主題。 > 頁面 1: 吹糖文化的背景分析 > 內容: > 吹糖的定義：介紹吹糖的基本概念及其技藝。 > 歷史背景：吹糖技藝的起源與發展，從古代到現代的演變。 > 文化意義：吹糖在民間藝術中的地位，如何體現地方文化特色。 > 頁面 2: 吹糖文化與SEDGS的關聯 > 內容: > SEDGS（可持續發展目標）概述：簡要介紹SEDGS的背景與重要性。 > 吹糖文化的貢獻： > 文化保護：如何透過吹糖技藝保護與傳承地方文化。 > 社會參與：吹糖活動如何促進社區凝聚力與參與感。 > 經濟增長：吹糖作為商業活動對當地經濟的影響。 > 頁面 3: 吹糖文化的商業潛力 > 內容: > 市場分析：當前吹糖產品的市場需求與消費趨勢。 > 商業模式：吹糖產品的銷售渠道（如市集、網路商店等）。 > 競爭優勢：吹糖文化的獨特性如何吸引消費者，與其他甜品的比較。 > 頁面 4: 問卷調查設計 > 內容: > 調查目的：了解消費者對吹糖文化的認知、興趣與需求。 > 問卷設計： > 主要問題示例（如對吹糖的了解程度、參與意願、喜愛的形狀等）。 > 問卷格式（選擇題、開放式問題等）。 > 預期的調查對象與樣本規模：針對不同年齡層與背景的消費者。 > 頁面 5: 問卷結果分析 > 內容: > 統計數據：展示問卷調查的基本數據與圖表（如餅圖、柱狀圖）。 > 主要發現：消費者對吹糖文化的認知程度與興趣分析。 > 意見反饋：消費者對於吹糖產品的建議與期望。 > 頁面 6: 互動動畫網站的設計構思 > 內容: > 網站目的：透過互動動畫網站推廣吹糖文化，吸引更多人了解與參與。 > 主要功能： > 教學動畫：教導使用者吹糖的基本技巧與過程。 > 互動遊戲：設計與吹糖相關的遊戲，增強參與感。 > 社群平台：提供使用者分享作品與經驗的空間。 > 用戶體驗設計：簡潔易用的介面設計，適合各年齡層使用。 > 頁面 7: 網站設計架構 > 內容: > 網站架構圖：展示網站的主要頁面與功能（首頁、教學、遊戲、社群、聯絡我們等）。 > 每個頁面的功能介紹：如首頁的簡介、教學頁的內容、遊戲頁的互動設計等。 > 技術需求：網站開發所需的技術與工具（如HTML、CSS、JavaScript等）。 > 頁面 8: 推廣策略 > 內容: > 宣傳計劃：如何透過社交媒體、線下活動推廣網站與吹糖文化。 > 合作機會：與學校、社區組織合作的潛在方案。 > 目標受眾：針對不同年齡層與興趣群體的推廣策略。 > 頁面 9: 結論 > 內容: > 吹糖文化的重要性：總結吹糖文化在社會、經濟與文化上的貢獻。 > 對於未來的展望：吹糖文化如何在現代社會中持續發展與創新。 > 鼓勵更多人參與與支持吹糖文化的活動。 > 頁面 10: 建議 > 內容: > 對於推廣吹糖文化的具體建議： > 增加社區活動與工作坊，吸引更多人參與。 > 利用數位平台加強文化傳承與教育。 > 建立吹糖文化的品牌，提升市場認知度。 > 如何持續收集反饋與改進推廣策略。 > 這樣的簡報設計能夠全面展示吹糖文化的各個方面，並提供具體的推廣與發展建議，促進觀眾對這項傳統技藝的理解與支持。每一頁的內容可根據具體需求進行進一步的調整與擴展 # :joystick:實作完成十頁簡報包含內容如下: > 封面 > 研究動機 > 研究目的 > 研究方法 > 研究步驟 > 文獻探討 > (Sdgs) > 研究分析 > 研究結果 --- # 單元四-電子書 --- # 單元四-1 電子書平台 > ### 設計書本的過程時記得也同時修正網站的整體美感 > ### :triangular_flag_on_post:第16屆電子書大賽注意報名的組別 > https://16thebook.gogofinder.com.tw/ > > ### 第15屆電子書大賽注意報名的組別 > https://15thebook.gogofinder.com.tw/ > > ### 第14屆電子書大賽 > 版面設計與專題靠近 > https://1thebook.gogofinder.com.tw/ > > ### 分組與報名 > ### 工作內容總頁數 10X人以上 > * 請以A4直式製作(Canva或PPT) > * 封面設計音樂設定 > * 前言 / 研究動機 > * 隔頁設計 ➫ 整本書架構 > * 重要特色 / 內容介紹 / 案例至少三項 +旁白10項 +動畫10項 > * 問卷與分析結果 / 地點 / 地圖 / 相關影片 / 採訪記錄 / 語音檔 > * 總結 > * Q & A > * 小組成員 & 製作心得 &指導老師 > * 參考資料來源 > * 封底設計 > > # 單元四-2 電子書內容 > ### 推薦作法 > 找[華藝線上圖書館](https://www.airitilibrary.com/)以書轉電子書，資料來源記得放 > ### 如何擬大綱 > 方法一起承轉合 > 方法二參考得獎作品 > 方法三參考[ChatGPT](https://openai.com/blog/chatgpt/)或[v2.chateverywhere.app](https://v2.chateverywhere.app/)大綱 > > ##### 如果我想製作一本介紹布袋戲的電子書,成為上述專題的延伸商品,我可以如何規劃我的電子書內容,希望至少包含的內容有:封面設計、前言 / 研究動機、隔頁設計、重要特色 / 內容介紹 / 案例、問卷與分析結果 / 地點 / 地圖 / 相關影片 / 採訪記錄 / 語音檔、總結、Q & A、小組成員 & 製作心得、參考資料來源、封底設計 > 以下提供一本「布袋戲」主題電子書的完整規劃藍本（章節架構＋每頁重點＋素材與版型建議）。可直接作為目錄與製作清單，後續我也能幫你把各章內容填寫成初稿。 > > 一、封面設計 > > 元素：主標「布一樣的經典」，副標「泰興樂掌中藝術團的年輕化行銷專案—電子書版」、品牌Logo、角色主視覺（高對比近景）、色票（品牌主色＋點綴色） > 設計重點：1張角色近景＋局部金線/布紋特寫；加入掃碼QR（連網站/影片集） > 版式建議：大圖全幅＋中上區塊標題＋右下作者/學校/日期 > > 二、前言／研究動機 > > 內容要點：布袋戲文化價值、年輕族群觸達困境、專題目標（看見→理解→參與→轉化） > 引文或金句：師傅語錄或團長寄語 > 圖文比例：文字6成、圖4成（歷史老照片/劇照） > > 三、隔頁設計（章節分隔頁模板） > > 每章開頭用同款模板：角色立像半透明做背景＋章名大標＋一句話摘要 > 視覺統一：章首頁統一色條與頁碼位置，利於導航 > > 四、重要特色／內容介紹／案例（主體篇章） A. 布袋戲簡史與美學 > > 內容：起源發展、地域流派、偶的結構（頭、手、衣）、舞台與樂隊 > 圖表：偶的結構解剖圖、服飾紋樣放大圖 B. 泰興樂掌中藝術團介紹 > 故事年表、代表角色、經典橋段 > 圖片：團隊合照、演出高光、道具特寫 C. 年輕化內容矩陣（案例） > 短影音三類：高光橋段／後台揭秘／角色宇宙（各給1個案例縮圖＋QR） > 文創週邊：貼紙、明信片、掛軸、體驗包（實拍圖＋設計稿） > 教學產品：體驗課SOP摘要、課綱截圖 D. 新興科技應用 > 電子書互動元素示範（內嵌短片、3D旋轉圖） > AR試玩、360°導覽QR，使用教學3步驟 > > 五、問卷與分析結果 > > 研究設計：樣本結構（年齡、身分）、量表、發放通路 > 核心發現圖表化： > 認知度/好感度長條圖 > 內容偏好雷達圖（短影音/後台/AR/VR） > 轉化意願漏斗圖（觀看→追蹤→報名/購買） > 重點洞察：阻礙因子Top 3、有效鉤子句類型、可接受價格帶 > 短評：對策略的影響（例如：強化後台揭秘＋角色宇宙） > > 六、地點／地圖（場域篇） > > 內容：排練空間／演出場館／合作學校／市集據點 > 地圖：Google My Maps擷圖＋各點QR > 動線建議：看戲路線、工作坊路線（步行/大眾運輸） > > 七、相關影片（影音索引） > > 依類別列清單：高光橋段、後台揭秘、角色宇宙、師傅口述 > 每支包含：縮圖、標題、30字亮點、QR > 建議播放順序（從入門到進階） > > 八、採訪記錄／語音檔 > > 訪談對象：團長/資深師傅/年輕操偶手/資深粉絲 > 重點摘錄：每位3–5條金句＋對應照片 > 語音檔：雲端連結或QR（附簡短轉錄摘要與主題標籤） > 版權聲明：已徵得同意，限學習使用 > 九、總結 > > 三句結論：1) 看見是一切的開始 2) 內容×體驗驅動年輕化 3) 教學產品與AR/VR是差異化關鍵 > 成效摘要：社群KPI、報名轉化、合作數 > 後續計畫：內容工廠化、會員與CRM、校園/館舍策展、IP聯名 > > 十、Q & A > > 常見問題（每題1–2行）： > 初學者要如何入門？需要哪些器材？ > 可以在哪裡看到演出？費用？ > 週邊與體驗包如何購買？是否有校園合作方案？ > 影片或素材可否轉載？授權方式？ > 附對應連結/聯絡方式/客服信箱 > > 十一、小組成員＆製作心得 > > 成員名單與分工（研究、影像、設計、前端、企劃、資料分析） > 心得亮點（挑戰與突破、從傳統到新媒體的學習） > 幕後花絮照片拼貼 > > 十二、參考資料來源 > > 書籍/論文/網站/訪談日期與人物 > 影片來源與攝影註記 > 引用規範（APA或MLA簡化），外加素材授權與免責聲明 > > 十三、封底設計 > > 視覺：角色背影或舞台側幕，延續封面色票 > 置入：行動呼籲CTA（追蹤社群＋官網）、演出資訊、贊助/合作單位Logo > 版權資訊：© 年份／團隊名稱／聯絡方式 > 製作規格與工具建議 > > 版面尺寸：A4橫式或16:9電子閱讀版 > 字體與語言：標題字重清晰；中文可用思源黑體系；英數用無襯線 > 互動格式：PDF（內嵌連結/影片封面+超連結）、或Web電子書（Notion/Readymag/Canva/Google Sites） > 多媒體收納：雲端資料夾分層（img/video/audio/docs），命名規範YYYYMMDD_類別_版本 > 無障礙：替代文字（ALT）、對比值達標、重要資訊文字化 > 交付清單（可直接落地） > > 目錄.md（本架構） > 素材清單.xlsx（每頁需要的圖、影片、QR、圖表） > 版型模板（封面、章節頁、內頁、圖表、索引頁） > 互動QR對照表（影片、AR、地圖、語音） > 參考文獻.bib或來源表 > 需要的下一步，我可以： > > 依此大綱產出各章「可直接上版」的文字初稿（每章300–600字） > 幫你做封面與章節頁模板（色票/字型/排版） > 匯整問卷圖表（長條、雷達、漏斗）與結論敘述 > 生成可下載的PDF電子書版本或Web電子書版本（你若需要，我再幫你排成檔案） > ### [顏色感覺](https://deerlight.design/color-feeling/) > 1. 黑色 - 權威、高雅、創意、低調、冷漠、防禦 > 2. 白色 - 純潔、神聖、善良、信任、疏離、夢幻 > 3. 灰色 - 誠懇、沉穩、考究、智慧、成功、沉靜 > 4. 藍色 - 智慧、希望、理想、獨立、誠實、信賴 > 5. 深藍 - 權威、保守、務實、呆板、無趣 > 6. 棕色 - 安定、沉靜、平和、親切、沉悶、老氣 > 7. 紅色 - 熱情、性感、權威、自信、血腥、暴力 > 8. 粉紅色 - 溫柔、甜美、浪漫、灑脫、大方 > 9. 橘色 - 親切、坦率、開朗、健康、安適、放心 > 10. 黃色 - 信心、聰明、希望、天真、嬌嫩、招搖 > 11. 綠色 - 自由、和平、舒適、清新、活力、知性 > 12. 紫色 - 優雅、浪漫、高貴、神秘、狂野、華麗 > ### 以[coolors](https://coolors.co/)看顏色效果及[adobe 色環](https://color.adobe.com/zh/create/color-wheel)選擇色彩調和,調配出你的專題主色、協調色、強調色 > ### [字型感覺](http://www.cjc116.com/article/article14.html) > ### 版面設計 > https://i03piccdn.sogoucdn.com/ca04091cddebb62f ![](https://i.imgur.com/qTxDfie.png) > ### 設計技巧整理 > 1. 運用色塊方形、旋轉、點圖(或圓形、三角) 可創造律動感 > 1. 運用點圖、大的英文字橫排裝飾 > 1. 顏色可選擇主圖上有的配色、清爽的配色 > 1. 深底配白字、淺底配深字(不要用全黑) > 1. 可留下大膽留白 > 1. 可運用商品的去背效果並加入陰影 > 1. 色塊透明做出毛玻璃效果 > 1. 放大插圖搭配白色的字給人強烈印象 > 參考書目：[留白的設計美學](https://drive.google.com/drive/folders/1-1KjhNKDdWBQP6HmFFpdlD-JZcM2IB4y?usp=sharing) > > ### 優秀作品參考 > [第一名-魚腥草AR行銷](https://edu.gogofinder.com.tw/gogofinderReader/index.php?bid=117435508&p=0#page/0) https://edu.gogofinder.com.tw/gogofinderReader/index.php?bid=117435107&p=0 https://edu.gogofinder.com.tw/gogofinderReader/index.php?bid=117435108&p=0#page/0 # 單元四-3 電子書素材 > ### 確認各組小論文完成 > ### [各類chatGPT工具](https://www.youtube.com/watch?v=9Pv_9yZ4VaI) > ### 工具 canva教育版 > ### 參賽手冊(必看電子書製作秘笈) > [14屆參賽手冊](https://edu.gogofinder.com.tw/book/content.php?id=117434803) > [多媒體版操作手冊](https://edu.gogofinder.com.tw/book/content.php?id=5) > ### 電子書好用素材 > * 向量插圖 https://www.freepik.com/home > poster當關鍵字,選free > * 轉檔請用media encoder > * 動畫運用 > 作法一 > [gifpy](https://giphy.com/explore/free-download) (例如搜尋 blink/右鍵/另存/再匯入平台) [lordicon](https://lordicon.com/)質感好,**勾free** [flaticon](https://www.flaticon.com/animated-icons)也不錯 > 作法二 > ＊以canva gif設計動畫後下載成gif > ＊背景設計同色系,或是匯出gif後,再上傳[unscreen](https://www.unscreen.com/upload)去背 > 作法三 > 動畫可用ppt,canva,Cartoon Animate(拉入圖片成道具,做動畫,專案設定100(動畫長度)),輸出影片gif > * 作品需包含動畫gif、配音、影片、超連結 > * 配樂 https://www.jamendo.com/ > > ### 其他補充 > [職務大辭典](https://careermaster.1111.com.tw/list)、通過率、技優入學與加分 > [以前的學生作品參考](https://docs.google.com/spreadsheets/d/1K52-6cePMo07HsYW_zlUriV1GIHOGu4EXpK_m11DZeA/edit?usp=sharing) ### 上架提醒 1. 基本設定/要勾上架 (注意版權與列在參考資料) 2. 進階功能/刊物設定 (設背景音樂與翻書方式) 3. 基本設定/目錄設定 [範例](https://edu.gogofinder.com.tw/book/content.php?id=328) 4. 重新檢視參賽資料與個人資料是否已填 5. 上傳授權書（以後要提早一週請家長簽） 3. 截稿之後有人氣投票 7. 提醒：每人10頁計算 ## 關於聲音 # 單元四-4圖書資源 ### 完成小論文前三章,申請國資圖數位資源,至少引用三份 ### 到[國資圖](https://ebook.nlpi.edu.tw/)或[數位資源入口網](https://ers.nlpi.edu.tw/?domain=default)找靈感 > 關鍵字KONO可以看當期雜誌、AEB可以看英文雜誌 ### 其他 > * [國資圖電子書](https://ebook.nlpi.edu.tw/) > 可以按分類去逛相關的書,或關鍵字ex手作 > * [華藝線上圖書館](https://www.airitilibrary.com/) > 1.含電子期刊、博碩士論文、會議論文三大資料庫，大多可全文下載。 > 2.授權期限至2024，在本校IP搜尋。 > 3.請於Google搜尋輸入「華藝線上圖書館」或點擊下方網址進入 > * [碩博士論文](https://ndltd.ncl.edu.tw/cgi-bin/gs32/gsweb.cgi/ccd=vgBl6F/login?jstimes=1&loadingjs=1&o=dwebmge&ssoauth=1&cache=1664755544348) > * [博客來電子書](https://viewer-ebook.books.com.tw/viewer/index.html?readlist=all) > 調速或混音可用Adobe Audition > ### [ttsmaker](https://ttsmaker.com/zh-hk) > ### 變音 > [線上變音平台voicechanger](https://voicechanger.io/) > [變音軟體clownfish](https://clownfish-translator.com/voicechanger/download.html#google_vignette) > 用內建錄音機測試 > 配音(自己錄更好) > 或是用雅婷https://tts.yating.tw/ --- # 單元五專題報告書 > 1. 下載word檔進行編輯 > 2. [參考文獻寫法](https://www.ymsh.tp.edu.tw/wp-content/uploads/doc/ym180/112-1%E5%B0%8F%E8%AB%96%E6%96%87%E5%BC%95%E8%A8%BB%E5%8F%8A%E5%8F%83%E8%80%83%E6%96%87%E7%8D%BB%E6%A0%BC%E5%BC%8F%E8%AA%AA%E6%98%8E.pdf) > 3. 【重要預告】115年專題實作及創意競賽複賽將提前 > 4. 競賽公告的[檔案格式](https://vtedu.k12ea.gov.tw/nss/p/0603) > 5. 以google NotebookLM寫出參考,記得餵他得獎的專題跟你們找到的文獻 > **請以"推廣旗袍之美"的專題目標,並參考我所提供的pdf格式與研究的架構,寫出專題的摘要、研究動機、研究目的、研究方法、文獻探討** --- # 期中考作品檢查10/28 截止日 # [1009商業分析](https://drive.google.com/drive/folders/1hMbYpDQ1H0eyLHirk4bZDNzQW-o3pOC7?usp=sharing)簡報與文件 # [1030問卷](https://forms.gle/bPd6L3KUbSktFLG99) 1. 專題簡報 20% > (主題與特色需中英文呈現,含SDGS) > We care about SDG #____ because... > This issue matters to us since.... 2. 專題報告書 50% | [報告繳交區](https://drive.google.com/drive/folders/1j4bYOeLDvNr2nmJiE2Cd9qajRK-2PRJ9?usp=sharing) > 摘要、研究動機、研究目的、研究方法、文獻探討、商業分析(STP、SWOT、4P/4C、7P、PEST、五力分析、商業模式九宮格) 3. 專題電子書 30% ## 校內專題時程桃園市立中壢商業高級中等學校114學年度校內專題競賽實施計畫（草案）一、依據：全國高級中等學校專業群科專題實作及創意競賽實施計畫第捌條第一項辦理。二、說明：藉由校內競賽拔擢優秀學生，激發技高學生專題實作能力，配合全國專題實作及創意競賽時程，請相關教師指導，期進入全國複賽及決賽，增強學生研究發展能力。三、競賽期程：配合商管群科中心及全國決賽辦理時程，訂定114-115年重要時程如下： ### 第一階段書面審查：競賽報名：114/11/24-114/11/28 競賽收件：114/12/1-114/12/5 第一階段成績公告：114/12/12(五) ### 第二階段口頭報告：競賽收件：114/12/29-114/1/1 口頭競賽：115/1/2(五) 第二階段成績公告：115/1/6(二) 註：115年1月中左右繳交複賽書面資料，依群科中心來文辦理。四、參賽對象：(1)高二「專題實作」課程學生 (2)有意願參加全國賽的高三學生五、參賽方式及地點： (一) 競賽分專題組及創意組，由任課老師推薦每班1~3組專題作品，並自行選擇參賽組別後參加校內初賽。 (二) 第一階段聘請科大教授進行書面審查，選出入圍第二階段口頭報告之作品，每組擇優最多錄取12組。第二階段學生需繳交簡報，學生進行現場口頭報告，由校內教師評審，每組擇優最多錄取6組(得從缺)。 (三) 校內評分標準如下：第一階段：書面審查100% 專題組評分項目 ![image](https://hackmd.io/_uploads/S1Xp-SXpxx.png) 六、獎勵辦法：得獎優秀作品，每位學生記嘉獎壹支及頒發獎狀以資鼓勵。 20% --- # 單元六網際博覽會準備 ### 大會網站 >http://globalschoolnet.org/gsncf/ >**如果已有現成的專題研究題目,如何與這個比賽結合,例如我想介紹台灣的布袋戲,網站可以有哪些內容規劃** > > 好的，如果您已經有一個專題研究題目，例如「台灣的布袋戲」，要將它與 CyberFair 比賽結合，這是一個絕佳的起點。CyberFair 強調的是以專題式學習 (project-based learning) 的方式，透過原創研究和數位媒體，向國際觀眾介紹您在地的社區特色。 CyberFair 的時間軸涵蓋了幾個階段： > 1. 研究、創作與發布： 10 月到隔年 3 月。 > 2. 專案評估（Peer Review）： 4 月進行。 > 3. 分享與慶祝： 5 月宣布獲獎者並分享成果。 > 因此，如果您計畫參與，應該在 10 月份留意並開始進行註冊程序以下是如何將「台灣布袋戲」這個主題與 CyberFair 比賽結合，並規劃網站內容的具體建議： ### **第一步：將主題與 CyberFair 類別對應** 首先，您需要將「台灣布袋戲」這個主題對應到 CyberFair 的八個主要類別之一。 * **最適合的類別**：**第八類：地方音樂與藝術形式 (Local Music and Art Forms)**。這個類別專門探討對社區具有重要意義的藝術與文化形式，例如舞蹈、節慶、歌曲、雕塑、繪畫和工藝等，布袋戲完全符合這個範疇。 * **其他可能的類別**： * **第一類：地方領袖 (Local Leaders)**：如果您的研究聚焦在某位知名的布袋戲大師或劇團領袖。 * **第三類：企業與組織 (Businesses and Organizations)**：如果您的研究重點是介紹某個特定的布袋戲劇團或相關的商業組織。 * **第四類：地方特產 (Local Specialties)**：如果布袋戲偶的製作是您所在社區的一項特殊工藝或特產。 **建議**：選擇一個最核心的類別，並在專案中清晰地闡述您的主題如何與該類別連結。 ### **第二步：定義專案範疇與目標** 在開始製作網站前，明確定義您的**專案範疇 (Project Scope)** 是非常重要的一步，這有助於避免目標過於龐大而無法完成。 * **專案目標 (Project Goal)**：簡要說明您想透過這個網站講述什麼故事。例如：「本專案的目標是向全球觀眾介紹台灣布袋戲的歷史、藝術特色及其在現代社會中的傳承與創新。」 * **專案交付成果 (Project Deliverables)**：列出具體的成果。例如：「我們將製作一個包含五個主要單元的網站、採訪一位布袋戲師傅並剪輯成三分鐘的影片、拍攝並展示 20 張高清的戲偶照片。」 * **專案限制 (Project Constraints)**：列出您面臨的挑戰。例如：「我們需要在三個月內完成專案，且團隊中缺乏專業的影片剪輯軟體和技術指導。」 ### **第三步：規劃網站內容架構** 一個好的 CyberFair 網站不僅內容豐富，而且**結構清晰、易於導覽**，能吸引對您主題一無所知的國際觀眾。參考其他得獎專案的架構，例如「守護台灣兩棲類動物」、「Xizhou Tribe」和「THE FLAME OF DEMOCRACY」，您的布袋戲網站可以包含以下內容： #### **A. 首頁 (Home Page)** * **專案標題**：一個吸引人的標題，例如「掌中乾坤：探索台灣布袋戲的魅力」。 * **專案簡介**：用 2-3 句話清楚說明網站的目的和內容。 * **視覺元素**：放上最精彩的布袋戲照片或影片，立即吸引訪客的目光。 #### **B. 核心內容頁面 (Content Pages)** 您可以將研究內容分成幾個子主題，每個子主題就是一個獨立的頁面或區塊。 * **研究動機 (Research Motivation)**：說明為什麼選擇布袋戲作為主題，是什麼激發了你們的好奇心？這部分可以讓評審和觀眾感受到你們的熱情。 * **布袋戲的歷史淵源 (History)**：介紹布袋戲的起源、如何傳入台灣，以及在不同時期的發展與演變。 * **藝術形式解析 (The Art Form)**： * **戲偶 (Puppets)**：介紹生、旦、淨、末、丑等不同角色的戲偶，它們的雕刻、服飾和道具特色。可以搭配大量的**原創照片或影片**。 * **操偶技巧 (Manipulation)**：透過影片或圖文解說，展示布袋戲師傅如何用手掌賦予戲偶生命。 * **音樂與口白 (Music and Narration)**：介紹後場的文武場音樂，以及前場師傅一人分飾多角的口白藝術。 * **重要人物與劇團 (Key Figures and Troupes)**：介紹歷史上或當代重要的布袋戲大師和知名劇團，可以**進行真人採訪 (Live Interviews)**，這是 CyberFair 非常鼓勵的原創研究方式。 * **現代的傳承與創新 (Modern Inheritance and Innovation)**：探討布袋戲在當代的挑戰與機會，例如與電視、電影的結合，或是在校園中的推廣教育。 * **我們的行動與發現 (Our Actions and Findings)**：展示你們的**實地參訪 (Field Visits)** 過程，例如參觀劇團、訪問師傅、觀看表演的紀錄。可以放入活動紀錄照片、訪談筆記或心得反思。 #### **C. 專案資訊頁面 (Mandatory Project Information Page)** 這是 CyberFair 要求的必要頁面，非常重要。 * **聯絡資訊 (Contact Information)**：提供一個聯絡方式，讓訪客可以提問或給予回饋。 * **版權與引用來源 (Copyright Credits and Citations)**：清楚列出所有非原創內容（圖片、音樂、文字資料）的來源。這是對智慧財產權的尊重，也是評分的重要標準。 * **專案敘事 (Project Narrative)**：這是 CyberFair 競賽的核心部分，用來解釋專案的幕後故事，包括團隊如何組成、如何研究、使用了哪些科技、遇到了什麼困難等。 #### **D. 互動與推廣 (Interaction and Outreach)** * **社群媒體連結 (Social Media)**：可以建立一個專案的社群媒體頁面 (如 Facebook, YouTube)，分享幕後花絮並與更多人互動。 * **回饋與交流 (Feedback)**：邀請網站訪客留下他們的評論或問題。 * **藝廊或多媒體 (Gallery/Multimedia)**：設立一個專區，集中展示你們拍攝的照片、影片或錄製的音樂。 ### **總結** 將現成的專題研究題目與 CyberFair 結合的關鍵在於，**不僅是呈現資料，更要說一個引人入勝的故事**。您需要透過**原創的研究方法**（如採訪、實地探訪）、**高品質的數位媒體**（網站、影片），以及**深刻的反思**（專案敘事），來向世界展示您社區文化的獨特之處，並記錄下團隊在這個過程中的學習與成長。 ### 網博作品參考 http://203.72.100.60/109_project/Data/Web_Design/423/index.html --- # 網站版型 https://templatemo.com/ https://themewagon.com/theme-price/free/ https://bootstrapmade.com/free-website-templates/ https://html5up.net/ https://templatesjungle.com/ # 設計視覺參考 https://relab.cc/articles/ ## 網站還可以有的形式 * 海報設計 / 通知書設計 / DM摺頁設計 * 社群圖文設計 / 貼圖設計 * 吉祥物 / Vtuber介紹 * 產品型錄設計 * 資訊圖表 * 活動設計 * 懶人包 * 心理測驗 / 測驗 * 互動投票 * 小遊戲 * 簡報 / 電子書 * 動畫設計 --- # 單元七開發練習與資源 the resources ## 網頁基本知識 - UI/UX 設計師 https://www.youtube.com/watch?v=M3w9793_JVw https://www.youtube.com/watch?v=S3nTbkmKfhk https://www.youtube.com/watch?v=w9ihl_Z1-DE ## 網頁開發工具 - Google Chrome與網頁開發 - f12,改色,改字,下程式 - 4 步驟取得網頁長截圖(capture full size screenshot) 步驟一：在要截圖的網頁按 f12 鍵步驟二：按 ctrl 鍵 + shift 鍵 + P 鍵步驟三：輸入 full 或 capture 步驟四：按 Enter 鍵抓全頁畫面 - alert("跳出視窗訊息") - https://popcat.click/ - 貼入小程式 ``` var event = new KeyboardEvent('keydown', { key: 'g', ctrlKey: true }); setInterval(function(){ for (i = 0; i < 100; i++) { document.dispatchEvent(event); } }, 0); ``` --- - 學習工具 - [codecombat](https://codecombat.com/students?_cc=TopDeskNose) 遊戲式網頁程式學習 ## hackmd超好用 ### :joystick:實作請以HackMd或Canva建一個你的專屬筆記，請在回報區回報你的筆記連結 --- --- # 單元七-1 第一個網頁the first website > 開index.html the file name > html:5 tab > ctrl+S存檔 save file > 按下面的go live即時發佈觀看 publish # 單元七-2 使用vscode工具 tool - VS code https://code.visualstudio.com/ - 常用套件 html,live server,prettier,chinese,HTML format html:5按tab h1按tab 啟用live sever - **[常用快速鍵](https://vocus.cc/article/62473ca3fd8978000197653f)** --- ## 使用語法 HTML practice * 標題標籤語法練習 H1 H2 H3 H4 H5 * Hello world!! * [W3 school](https://www.w3schools.com/)有語法教學與實驗區 :fire: <strong style="color:red">HOT</strong> * [w3 school中文版](https://www.w3school.com.cn/html/html_basic.asp) # 單元七-3 相關資源 how to design ## 設計靈感 ideas [pinterest](https://www.pinterest.com/) ![](https://i.imgur.com/JcSrDcv.png) [Tumblr](https://www.tumblr.com/) [Behance](https://www.behance.net/) [Dribble](https://dribbble.com/) [cssline](https://cssline.com/) [io3000](https://io3000.com/) [sankou](https://sankoudesign.com/) [bookma](https://bookma.org/)-有分類 https://81-web.com/ https://muuuuu.org/ https://responsive-jp.com/ https://www.zzrock.net/ 搜尋關鍵字**2025網頁設計趨勢** keywords:website design 一些不錯的酷設計 cool ideas https://fanfan.fan/?ref=cssline.com https://www.michaelspeichert.com/?ref=cssline.com https://theatreshowcase.boston/?ref=cssline.com ### :joystick:實作蒐集你的靈感牆 create your ideas wall --- ## 各種素材 some resources for webdesign ### :fire: **HOT** 營隊報名 the invitation > [鼓勵參加，觀摩企業商用網站作法與國手訓練的故事，證明加分並可放多元學習歷程！] > 預告接下來會有六次課程有其他老師資源引入，商業分析 ### 素材下載區 pictures and illustrations [pexels](https://www.pexels.com/)：可抓高質感圖片或影片 > 使用規則 https://www.pexels.com/zh-tw/license/ [freepik](http://www.freepik.com/)：向量設計 [openpeeps](ttps://www.openpeeps.com/)：黑白組合插畫 [Humaaans](https://www.humaaans.com/)：人物角色與場景插畫 use with blush [OpenDoodles](https://www.opendoodles.com/)：可愛的人物角色插畫 [unDrawn](https://undraw.co/illustrations)：簡報利器插畫圖庫 [Glaze](https://www.glazestock.com/)：精緻向量插畫 [manypixels](https://www.manypixels.co/)：可自行定義配色 [mixkit-Art](https://mixkit.co/free-stock-art/)：充滿藝術感的精緻插畫 [illlustrations](https://illlustrations.co/)：生活物品插畫 [isoflat](https://isoflat.com/)：最大的免費立體投影插畫網站 [插畫AC](https://www.ac-illust.com) [soco-st](https://soco-st.com) [experience japan pictograms](https://experience-japan.info/en/) [flaticon design](http://flat-icon-design.com) --- ### 配色,底色與插圖網站 about color [coolors](https://coolors.co/)：配色網站 [webgradients](https://webgradients.com/)：改背景,改box背景,改字顏色等-超美漸層產生器 > <body style=""> [Paaatterns](https://products.ls.graphics/paaatterns/)：Patterns 圖樣插畫 ### 其他 [Colour Contrast Checker](https://colourcontrast.cc/)顏色對比色弱檢查 --- ## 其他基礎練習 other practice - 鍵盤指法 - 打字練習英打[typing.com](https://www.typing.com/) 中打[倉頡之星](https://www.csjh.kh.edu.tw/asp/upfile/view.asp?ID=135&Page=11&Item=11&Unit=%C2%B2%A8%7D%BF%D9%AEv) - wix/Spark/canva個人介紹作品檢查與評分 # 單元七-4 平台式網頁設計工具 webdesign plateform Canva 免費設計 https://www.canva.com/ canva教育版 Spark https://spark.adobe.com/sp Wix 免費網站設計平台 https://www.wix.com/ > 參考學生的[個人作品集網站](https://ccxkoozz.weebly.com/)  ## :joystick: 個人筆記請補充以下項目 - 專題網頁UIUX設計(標題) - 工作分配 / 個人貢獻度報告 - 製作心得 - 製作畫面截圖3張 - 網站網址+QRcode --- --- # 單元八-網頁語法 # 單元八-1 HTML ## 工具 [vscode](https://code.visualstudio.com/) 或 [codepen](https://codepen.io/pen/) - VS code ### 常用vscode套件 * html * live server * chinese * HTML format * bootstrap4 ### 存檔時自動排版設定點左邊下面![image.png](https://hackmd.io/_uploads/r1kWPZYXa.png)設定 ![image.png](https://hackmd.io/_uploads/rJsbDZKX6.png) 勾存檔時格式化Format On Save” > 將它打勾 ![image](https://hackmd.io/_uploads/B1S3C08kWx.png) !按tab h1按tab 打Hi~~ 啟用live sever --- ## 寫在前面 - [速打Emmet技巧]( https://docs.emmet.io/cheat-sheet/) - 假圖[lorem image](https://picsum.photos/) > https://picsum.photos/200/300 寬高數字可改 - [Code-combat](https://codecombat.com/students?_cc=TopDeskNose) 體驗程式樂趣 - 英打練習網站 https://www.typing.com/student/lessons - [w3c 自學看Html與CSS](https://www.w3schools.com/html/) --- ## 基本語法練習 > !按tab 基本頁面 > > h1...h6 大標題 > p 段落 > lorem 假字 > br 換行 > pre 預設排版 > a 超連結 > href 放連結,或是#段落命名 > target _self 在同一個標籤頁跳轉 _blank 另開標籤頁 > b 粗體 > em 斜體 > 或是 b 粗體 i 斜體 u 底線 > span 段落裏的小片段 > ul>li*5 項目符號 > ol>li*3 項目編號 > < !-- 註解 - - > 中間無空格，ctrl+/ > table 表格 > tr 列 > td 欄 (colspan跨欄,rowspan跨列) > img 圖片 `<img src="https://picsum.photos/100/100" alt="">` > div 盒子 > ### 其他 > <link rel="icon" href="123.jpg"> 圖示寫法 > > title 改網站標題 ```htmlembedded= <html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head>  <body> Hello fefe <h1>我是大標題1</h1> <h2>我是大標題2</h2> <h3>我是大標題3</h3> <h4>我是大標題4</h4> <h5>我是大標題5</h5> <h6>我是大標題6</h6> <h1>昀澤介紹</h1> <img src="https://picsum.photos/800/200" alt="" /> <hr /> <p> <b>Lorem ipsum</b> <br />dolor sit amet consectetur adipisicing elit. Est debitis sit ad facilis, consectetur doloribus quod similique neque, provident necessitatibus mollitia voluptatibus, architecto reiciendis aspernatur. Ea sunt voluptates neque debitis! Voluptatibus placeat quas quod aperiam tempora aliquid harum consectetur saepe deleniti, quo corrupti nulla ab enim et error quaerat architecto minus fuga molestiae atque, ad ea consequatur facilis. Architecto, explicabo. Magni, <br />voluptatibus vero quisquam temporibus laboriosam consequuntur atque voluptatem dolores natus commodi deserunt facere neque sit voluptas dolor. Totam, placeat beatae? Magni molestias minus itaque maiores deleniti ipsum cupiditate corporis. </p> <hr /> <p> <i>Lorem ipsum dolor sit amet consectetur</i> adipisicing elit. Est debitis sit ad facilis, consectetur doloribus quod similique neque, provident necessitatibus mollitia voluptatibus, architecto reiciendis aspernatur. Ea sunt voluptates neque debitis! Voluptatibus placeat quas quod aperiam tempora aliquid harum consectetur saepe deleniti, quo corrupti nulla ab enim et error quaerat architecto minus fuga molestiae atque, ad ea consequatur facilis. Architecto, explicabo. Magni, voluptatibus vero quisquam temporibus laboriosam consequuntur atque voluptatem dolores natus commodi deserunt facere neque sit voluptas dolor. Totam, placeat beatae? Magni molestias minus itaque maiores deleniti ipsum cupiditate corporis. </p> <hr /> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Est debitis sit ad facilis, consectetur doloribus quod similique neque, provident necessitatibus mollitia voluptatibus, architecto reiciendis aspernatur. Ea sunt voluptates neque debitis! Voluptatibus placeat quas quod aperiam tempora aliquid harum consectetur saepe deleniti, quo corrupti nulla ab enim et error quaerat architecto minus fuga molestiae atque, ad ea consequatur facilis. Architecto, explicabo. Magni, voluptatibus vero quisquam temporibus laboriosam consequuntur atque voluptatem dolores natus commodi deserunt facere neque sit voluptas dolor. Totam, placeat beatae? Magni molestias minus itaque maiores deleniti ipsum cupiditate corporis. </p> <hr /> <h3>特色產品</h3> <ul> <li>魚腥草</li> <li>雞蛋</li> <li>葱油餅</li> </ul> <br /> <h3>寄送方式</h3> <ol> <li>郵寄</li> <li>冷凍貨運</li> <li>自取</li> </ol> <a href="http://tw.yahoo.com"> yahoo </a> <a href="mailto:iamefe@gmail.com"> Fefe </a> <pre> 45645645 454654654sddd 45455 </pre> <img src="image1.tif" alt=""> <img src="https://picsum.photos/id/237/600/300" alt=""> </body> </html> ``` [老師的codepen](https://codepen.io/iamfefe/pen/vYjMoJj) --- ## 結構型HTML 注意網頁的基本結構 ``` html head meta style link body ``` | 標籤名稱 | 簡單說明 | | -------- | -------- | | `<header>` | 頁首，經常包含 logo、標題、導航列或介紹文字 | | `<nav>` | 網站操作導航列| | `<aside>` | 跟主要內文沒有直接聯繫的側欄，常用來做功能按鈕設計與輔助說明文字| | `<main>` | 主要內容| | `<article>` | 文章| | `<section>` | 章節段落| | `<footer>` | 網頁結尾，經常包含版權資訊、聯絡方式| --- # 單元八-2 CSS * 語法不熟可用[CSS產生器]( https://webcode.tools/generators/css/)或查google,w3c * 字型網站 https://fonts.google.com/ ### CSS語法練習 > width 寬 > height 高 > border 框 1px solid red 粗度，實線，紅色 > > color 顏色 **有4種寫法**:寫英文,rgb,rgba,#色碼 > background-color 背景顏色 > background-image 背景圖片 > url("img/2.jpg") 路徑與檔名 > > font-size 字大小 > font-family 字型 > font-weight 字重 > text-shadow 字陰影(box-shadow 方塊陰影) > letter-spacing 字間距 > > padding內距上左下右 > margin外距 [border三者差別] > > display 佈局 flex彈性盒子 df > justify-content 對齊主軸內容 jcc > align-items 對齊交錯軸內容 aic > /* 註解*/ ctrl+/ > > transform [變形說明](https://ithelp.ithome.com.tw/articles/10200713) > transform 3d > filter [濾鏡說明](http://blog.shihshih.com/css-filter/) > animate [動畫說明](https://www.w3schools.com/css/css3_animations.asp) > position:absolute 絕對定位 > position:relative 相對定位 > position:fixed 固定定位 > overflow:hidden 溢出隱藏 > z-index 圖層順序 > transition:all 2s ease 動畫速度全部 2秒 > ### 動畫參數 > ease(平滑動畫) ease-in(由慢到快) ease-out(由快到慢) ease-in-out(由慢到快再到慢) linear(平均速度) 貝茲曲線參考：https://cubic-bezier.com/ 運作方式參考：https://cssreference.io/property/transition-timing-function/ ### 網頁佈局 [flex排版好用神器](https://ithelp.ithome.com.tw/articles/10267398) [青蛙排版練習](https://flexboxfroggy.com/#zh-tw) [flex細節](https://www.oxxostudio.tw/articles/201501/css-flexbox.html) ### 單位寫法 :triangular_flag_on_post: 重要!! | 單位 | 簡述 | | -------- | -------- | |px |絕對的度量單位，1px 就等於一個像素 |em |相對的度量單位，數值來至於上一個元素的文字大小 |rem| 相對的度量單位，數值來至於 HTML(root)的文字大小 |% |相對的度量單位，數值來至於上一個區塊的百分比 |vh |相對的度量單位，數值來至於螢幕的高度 |vw |相對的度量單位，數值來至於螢幕的寬度 ### 實作 ```htmlembedded= <!DOCTYPE html>  <html lang="en">  <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* *代表全部都要套用 */ * { /* 動畫速度0.5秒減速 */ transition: all 0.5s ease; font-family: 微軟正黑體; margin:0px; padding:0px; } body { /* background-color: rgb(222, 216, 216); */ background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); } h1 { color: rgb(74, 3, 3); font-size: 100px; } h1:hover { letter-spacing: 20px; color: chocolate; text-shadow: 5px 5px 10px black; } img { width: 150px; height: 150px; /* 切圓角 */ border-radius: 50%; } img:hover { border: 5px solid rgb(255, 255, 255); } .pics { /* bgc,df,jcc,aic */ background-color: #fff; display: flex; justify-content: center; align-items: center; /* 高度固定400 */ height:400px; /* 寬度60% */ width:60%; /* 邊界自動 */ /* margin:auto; */ /* 邊界:上左下右 */ /* margin:100px 60px 200px 90px; */ margin-left:200px; /* 圓角邊 */ border-radius: 20px; } .pics:hover{ /* margin:100px 160px 200px 390px; */ margin-left:300px; box-shadow: 0px 0px 20px yellow; } .pics img,.pics2 img{ margin:1vw; } .pics2 { /* bgc,df,jcc,aic */ display: flex; justify-content: center; align-items: center; /* 高度固定400 */ height:400px; /* 寬度60% */ width:60%; /* 邊界自動 */ /* margin:auto; */ /* 邊界:上左下右 */ /* margin:100px 60px 200px 90px; */ margin-left:200px; /* 圓角邊 */ border-radius: 20px; } section{ /* padding:4vw; */ padding-left:4vw; padding-right:4vw; } nav{ /* 背景顏色 */ /* background-color: rgb(83, 62, 3); */ background-image: linear-gradient(to top, #09203f 0%, #537895 100%); /* 顏色(字) */ color:#fff; width:100%; } nav ul{ list-style:none; /* 讓項目符號變彈性,就可以橫排 */ display: flex; } nav ul li{ font-size: 20px; font-weight: 400; margin:20px; } nav ul li:hover{ font-size: 24px; font-weight: 800; margin-top:15px; transition: all 0.2s ease; } </style> </head>  <body> <header> <nav>  <ul> <li class="logo"><ion-icon name="diamond-outline"></ion-icon></li> <li>按鈕</li> <li>按鈕</li> <li>按鈕</li> <li>按鈕</li> </ul> </nav> </header> <section> <h1><ion-icon name="diamond-outline"></ion-icon>123</h1> <p> <b>Lorem</b> <em>ipsum</em> dolor sit amet, consectetur adipisicing elit. Ipsam dolores laboriosam officiis quod natus quisquam molestiae laudantium id ut vero. Molestias quos eveniet ducimus reprehenderit aut deleniti accusantium soluta fuga? <span>Suscipit laudantium asperiores mollitia</span>, alias aliquid quisquam itaque! Harum, commodi dolores voluptatum mollitia libero repudiandae hic assumenda beatae ab voluptatem numquam accusamus sapiente nesciunt ratione. Voluptate hic reiciendis dolores veritatis? Quasi voluptatum necessitatibus nulla, explicabo expedita adipisci nisi animi iste numquam, soluta facere, obcaecati consequuntur! Sit minima, odit mollitia autem expedita repellat? Debitis quidem quaerat consequuntur nulla dignissimos neque expedita? <br> <em>----by fefe</em> </p>  <div class="pics"> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> </div> </section> <section> <h1>123</h1> <p> <b>Lorem</b> <em>ipsum</em> dolor sit amet, consectetur adipisicing elit. Ipsam dolores laboriosam officiis quod natus quisquam molestiae laudantium id ut vero. Molestias quos eveniet ducimus reprehenderit aut deleniti accusantium soluta fuga? <span>Suscipit laudantium asperiores mollitia</span>, alias aliquid quisquam itaque! Harum, commodi dolores voluptatum mollitia libero repudiandae hic assumenda beatae ab voluptatem numquam accusamus sapiente nesciunt ratione. Voluptate hic reiciendis dolores veritatis? Quasi voluptatum necessitatibus nulla, explicabo expedita adipisci nisi animi iste numquam, soluta facere, obcaecati consequuntur! Sit minima, odit mollitia autem expedita repellat? Debitis quidem quaerat consequuntur nulla dignissimos neque expedita? <br> <em>----by fefe</em> </p>  <div class="pics2"> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> </div> <div class="pics"> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> </div> </section> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> </body> </html>  ``` ### 選擇器 :triangular_flag_on_post: 重要!! > 1.寫標籤 > 如改**主體標籤**<body>背景顏色 ```htmlembedded body{ background-color:#fff; } ``` > 2.寫樣式 > 如改樣式style="pics" 的內容 ```htmlembedded .pics{ background-color:#fff; } ``` > 3.寫名稱 > 如改命名id="a2" 的內容 ```htmlembedded #a2{ background-color:#fff; } ``` ### 虛擬類別選擇器 1. :hover 滑鼠移入 1. :first-child 第一個元素 1. :last-child 最後一個元素 1. :nth-cild(2n) 數學公式2*n計算 1. :nth-child(odd) 奇數元素 1. :nth-child(even) 偶數元素 ### 偽元素 1. ::before 之前 1. ::after 之後可用於加字做news,取出部份內容,加入特殊陰影與樣式等[好用的地方](https://www.webdesigns.com.tw/CSS_before-after.asp) ### 選擇器優先排序 id選擇器 > class 選擇器 > 元素選擇器 > 全域選擇器 ### !important 優先套用只要在屬性後面加入「!important」及會擁有最高優先級，但也可被其他 !important 取代(若其他優先級高) * 實作練習 ```htmlembedded <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin:0px; padding:0px; transition: all 0.5s ease; } body{ /* background-color: #cccccc; */ background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); height: 100%; } nav{ background-color: black; color:white; display: flex; position: fixed; width: 100%; font-family:微軟正黑體; } nav ul{ display: flex; } nav ul li{ padding:10px 20px 10px 20px; list-style-type: none; padding-right:20px; border-bottom: 5px solid black; } nav ul li:hover{ border-bottom: 5px solid white; margin: bottom -5px; color:orangered; font-weight: 800; } nav ul a{ color:white; text-decoration: none; } h1{ padding:60px 0px 20px 0px; font-size: 60px; text-shadow: 2px 2px 5px #aaaaaa; } h1:hover{ color:orangered; font-weight: 600; letter-spacing: 3px; } article{ margin:auto; width:70%; } .pics{ display: flex; justify-content:space-around; } .pics img{ border-radius: 100px; } .pics img:hover{ filter: contrast(200%); transform: rotate(360deg); } .pica{ animation: pmove 1s ease infinite; } @keyframes pmove{ 0%{ margin-left:0px; } 50%{ margin-left:200px; } 100%{ margin-left:0px; } } </style> </head> <body> <nav> <ul> <a href="#a1"><li>按鈕</li></a> <a href="#a2"><li>按鈕</li></a> <li>按鈕</li> <li>按鈕</li> <li>按鈕</li> </ul> </nav> <article id="a1"> <h1>我是大標題</h1> <p><span style="font-size:50px">L</span>orem ipsum dolor sit amet consectetur adipisicing elit. Architecto culpa, unde autem quidem minus possimus earum cum esse saepe sit incidunt commodi nobis fuga debitis doloribus voluptatem necessitatibus officia laboriosam. Id, tempora quisquam repellat voluptatibus incidunt quod minus ipsa tenetur necessitatibus illo quae eveniet nulla natus porro assumenda officiis. Tempore culpa sint exercitationem aspernatur illum! Sed ab inventore nesciunt similique. Cum, perspiciatis? <br><br><b>Cumque explicabo fugiat iste et consectetur dolorem velit dolores soluta neque blanditiis praesentium illo ab corrupti dolore necessitatibus rerum adipisci aspernatur quasi est, voluptates ut. Numquam, doloremque at.<b> </p> <p align="right"><em>--by fefe</em></p> <div class="pics"> <img src="https://picsum.photos/200/200" alt=""> <img src="https://picsum.photos/200/200" alt=""> <img src="https://picsum.photos/200/200" alt=""> </div> </article> <article id="a2"> <h1>我是大標題</h1> <p><span style="font-size:50px">L</span>orem ipsum dolor sit amet consectetur adipisicing elit. Architecto culpa, unde autem quidem minus possimus earum cum esse saepe sit incidunt commodi nobis fuga debitis doloribus voluptatem necessitatibus officia laboriosam. Id, tempora quisquam repellat voluptatibus incidunt quod minus ipsa tenetur necessitatibus illo quae eveniet nulla natus porro assumenda officiis. Tempore culpa sint exercitationem aspernatur illum! Sed ab inventore nesciunt similique. Cum, perspiciatis? <br><br><b>Cumque explicabo fugiat iste et consectetur dolorem velit dolores soluta neque blanditiis praesentium illo ab corrupti dolore necessitatibus rerum adipisci aspernatur quasi est, voluptates ut. Numquam, doloremque at.<b> </p> <p align="right"><em>--by fefe<em></p> <div class="pica"> <img src="https://picsum.photos/200/200" alt=""> </div> </article> </body> </html> ``` --- ## 圖示寫法 :triangular_flag_on_post: 重要!! ### 作法一 > [fontawesome](https://fontawesome.com/) 1.CDN ``` <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> ``` 2.點想要的圖示,貼在需要的地方 `<i class="fa-solid fa-cat"></i>` 3.可以微調變大或加動畫,[寫法參考](https://docs.fontawesome.com/web/style/size) ### 作法二 > [Ionicons](https://ionic.io/ionicons) 著名框架Ionic所開源的icon圖庫，完全商用且免費於各大平台。點usage 貼這兩行在/body前 ```htmlembedded <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> ``` > 就可以拷貝語法寫圖示![](https://i.imgur.com/4cGVyZc.png) 以用在按鈕、插圖等，語法如下: ```htmlembedded <ion-icon name="chatbubble-ellipses-outline"></ion-icon> ``` ```htmlembedded= <!DOCTYPE html>  <html lang="en">  <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* *代表全部都要套用 */ * { /* 動畫速度0.5秒減速 */ transition: all 0.5s ease; font-family: 微軟正黑體; margin: 0px; padding: 0px; font-size: 30px; } body { /* background-color: rgb(222, 216, 216); */ background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); } h1 { color: rgb(74, 3, 3); font-size: 100px; } h1:hover { letter-spacing: 20px; color: chocolate; text-shadow: 5px 5px 10px black; } img { width: 150px; height: 150px; /* 切圓角 */ border-radius: 50%; } img:hover { border: 5px solid rgb(255, 255, 255); } .pics { /* bgc,df,jcc,aic */ background-color: #fff; display: flex; justify-content: center; align-items: center; /* 高度固定400 */ height: 400px; /* 寬度60% */ width: 60%; /* 邊界自動 */ /* margin:auto; */ /* 邊界:上左下右 */ /* margin:100px 60px 200px 90px; */ margin-left: 200px; /* 圓角邊 */ border-radius: 20px; } .pics:hover { /* margin:100px 160px 200px 390px; */ margin-left: 300px; box-shadow: 0px 0px 20px yellow; } .pics img, .pics2 img { margin: 1vw; filter:grayscale(1) blur(3px); } .pics img:hover{ filter:grayscale(0); transform:rotate(60deg) scale(1.3); } .pics2 { /* bgc,df,jcc,aic */ display: flex; justify-content: center; align-items: center; /* 高度固定400 */ height: 400px; /* 寬度60% */ width: 60%; /* 邊界自動 */ /* margin:auto; */ /* 邊界:上左下右 */ /* margin:100px 60px 200px 90px; */ margin-left: 200px; /* 圓角邊 */ border-radius: 20px; } section { /* padding:4vw; */ padding-left: 4vw; padding-right: 4vw; } nav { /* 背景顏色 */ /* background-color: rgb(83, 62, 3); */ background-image: linear-gradient(to top, #09203f 0%, #537895 100%); /* 顏色(字) */ color: #fff; width: 100%; /* 固定在上面 */ position: fixed; } nav ul { list-style: none; /* 讓項目符號變彈性,就可以橫排 */ display: flex; } nav ul li a{ font-size: 20px; font-weight: 400; margin: 20px; color:white; text-decoration: none; display: flex; } nav ul li:hover { font-size: 24px; font-weight: 800; margin-top: 15px; transition: all 0.2s ease; } @keyframes movetgo{ 0%{ color:#09203f; } 33%{ margin-left:100px; } 100%{ color:rgb(113, 5, 163); } } #movet{ animation: movetgo 1s ease infinite; } table{ width:80%; background-color: #fff; margin:auto; margin-top:20px; } /* 列:第一個 */ tr:first-child{ background-color:aqua; } p::first-letter{ font-size: 100px; color:#09203f; } td{ /* 文字對齊置中 tac */ text-align: center; } p:nth-child(odd){ color:#537895; } #s1{ padding-top: 60px; } </style> </head>  <body> <header> <nav>  <ul> <li class="logo"> <ion-icon name="diamond-outline"></ion-icon> </li> <li><a href="#s1">前言</a></li> <li><a href="#s2">特色</a></li> <li><a href="#s3">商品</a></li> <li><a href="#s4">與我聯絡</a></li> </ul> </nav> </header>  <section id="s1"> <h1> <ion-icon name="diamond-outline"></ion-icon>123 </h1> <p> <b>Lorem</b> <em>ipsum</em> dolor sit amet, consectetur adipisicing elit. Ipsam dolores laboriosam officiis quod natus quisquam molestiae laudantium id ut vero. Molestias quos eveniet ducimus reprehenderit aut deleniti accusantium soluta fuga? <span>Suscipit laudantium asperiores mollitia</span>, alias aliquid quisquam itaque! Harum, commodi dolores voluptatum mollitia libero repudiandae hic assumenda beatae ab voluptatem numquam accusamus sapiente nesciunt ratione. Voluptate hic reiciendis dolores veritatis? Quasi voluptatum necessitatibus nulla, explicabo expedita adipisci nisi animi iste numquam, soluta facere, obcaecati consequuntur! Sit minima, odit mollitia autem expedita repellat? Debitis quidem quaerat consequuntur nulla dignissimos neque expedita? <br> <em>----by fefe</em> </p>  <div class="pics"> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> </div> </section> <section id="s2"> <h1 id="movet">123</h1> <p> <b>Lorem</b> <em>ipsum</em> dolor sit amet, consectetur adipisicing elit. Ipsam dolores laboriosam officiis quod natus quisquam molestiae laudantium id ut vero. Molestias quos eveniet ducimus reprehenderit aut deleniti accusantium soluta fuga? <span>Suscipit laudantium asperiores mollitia</span>, alias aliquid quisquam itaque! Harum, commodi dolores voluptatum mollitia libero repudiandae hic assumenda beatae ab voluptatem numquam accusamus sapiente nesciunt ratione. Voluptate hic reiciendis dolores veritatis? Quasi voluptatum necessitatibus nulla, explicabo expedita adipisci nisi animi iste numquam, soluta facere, obcaecati consequuntur! Sit minima, odit mollitia autem expedita repellat? Debitis quidem quaerat consequuntur nulla dignissimos neque expedita? <br> <em>----by fefe</em> </p>  <div class="pics2"> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> </div> <div class="pics"> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> </div> </section> <section id="s3"> <h1>456</h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis, perferendis assumenda maiores commodi excepturi esse debitis odit neque libero eligendi laborum itaque, quia laboriosam minus? Fuga expedita quisquam quas! Quam nihil, esse autem aut dolor cum! Atque, nostrum voluptates alias accusamus voluptatum aliquam ipsum? Velit esse, dolore quisquam deserunt necessitatibus earum eaque ipsa eligendi porro debitis vero, facere sint? Reprehenderit exercitationem nemo, ex sed aliquam et suscipit! Velit, ea nobis? Ab dicta asperiores, soluta at aut natus assumenda libero saepe alias voluptatum dolorem animi neque, provident, illo nemo ducimus! </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis, perferendis assumenda maiores commodi excepturi esse debitis odit neque libero eligendi laborum itaque, quia laboriosam minus? Fuga expedita quisquam quas! Quam nihil, esse autem aut dolor cum! Atque, nostrum voluptates alias accusamus voluptatum aliquam ipsum? Velit esse, dolore quisquam deserunt necessitatibus earum eaque ipsa eligendi porro debitis vero, facere sint? Reprehenderit exercitationem nemo, ex sed aliquam et suscipit! Velit, ea nobis? Ab dicta asperiores, soluta at aut natus assumenda libero saepe alias voluptatum dolorem animi neque, provident, illo nemo ducimus! </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis, perferendis assumenda maiores commodi excepturi esse debitis odit neque libero eligendi laborum itaque, quia laboriosam minus? Fuga expedita quisquam quas! Quam nihil, esse autem aut dolor cum! Atque, nostrum voluptates alias accusamus voluptatum aliquam ipsum? Velit esse, dolore quisquam deserunt necessitatibus earum eaque ipsa eligendi porro debitis vero, facere sint? Reprehenderit exercitationem nemo, ex sed aliquam et suscipit! Velit, ea nobis? Ab dicta asperiores, soluta at aut natus assumenda libero saepe alias voluptatum dolorem animi neque, provident, illo nemo ducimus! </p> <div> <table> <tr> <td>標題</td> <td>標題</td> <td>標題</td> </tr> <tr> <td>內容</td> <td>內容</td> <td>內容</td> </tr> <tr> <td>內容</td> <td>內容</td> <td>內容</td> </tr> <tr> <td>內容</td> <td>內容</td> <td>內容</td> </tr> <tr> <td>內容</td> <td>內容</td> <td>內容</td> </tr> <tr> <td>內容</td> <td>內容</td> <td>內容</td> </tr> </table> </div> </section> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> </body> </html>  ``` --- ## HTML與CSS練習成果 ```htmlembedded= <!DOCTYPE html>  <html lang="en">  <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* *代表全部都要套用 */ * { /* 動畫速度0.5秒減速 */ transition: all 0.5s ease; font-family: 微軟正黑體; margin: 0px; padding: 0px; font-size: 30px; } body { /* background-color: rgb(222, 216, 216); */ background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); } h1 { color: rgb(74, 3, 3); font-size: 100px; } h1:hover { letter-spacing: 20px; color: chocolate; text-shadow: 5px 5px 10px black; } img { width: 150px; height: 150px; /* 切圓角 */ border-radius: 50%; } img:hover { border: 5px solid rgb(255, 255, 255); } .pics { /* bgc,df,jcc,aic */ background-color: #fff; display: flex; justify-content: center; align-items: center; /* 高度固定400 */ height: 400px; /* 寬度60% */ width: 60%; /* 邊界自動 */ /* margin:auto; */ /* 邊界:上左下右 */ /* margin:100px 60px 200px 90px; */ margin-left: 200px; /* 圓角邊 */ border-radius: 20px; } .pics:hover { /* margin:100px 160px 200px 390px; */ margin-left: 300px; box-shadow: 0px 0px 20px yellow; } .pics img, .pics2 img { margin: 1vw; filter: grayscale(1) blur(3px); } .pics img:hover { filter: grayscale(0); transform: rotate(60deg) scale(1.3); } .pics2 { /* bgc,df,jcc,aic */ display: flex; justify-content: center; align-items: center; /* 高度固定400 */ height: 400px; /* 寬度60% */ width: 60%; /* 邊界自動 */ /* margin:auto; */ /* 邊界:上左下右 */ /* margin:100px 60px 200px 90px; */ margin-left: 200px; /* 圓角邊 */ border-radius: 20px; } section { /* padding:4vw; */ padding-left: 4vw; padding-right: 4vw; } nav { /* 背景顏色 */ /* background-color: rgb(83, 62, 3); */ background-image: linear-gradient(to top, #09203f 0%, #537895 100%); /* 顏色(字) */ color: #fff; width: 100%; /* 固定在上面 */ position: fixed; } nav ul { list-style: none; /* 讓項目符號變彈性,就可以橫排 */ display: flex; } nav ul li a { font-size: 20px; font-weight: 400; margin: 20px; color: white; text-decoration: none; display: flex; } nav ul li:hover { font-size: 24px; font-weight: 800; margin-top: 15px; transition: all 0.2s ease; } @keyframes movetgo { 0% { color: #09203f; } 33% { margin-left: 100px; } 100% { color: rgb(113, 5, 163); } } #movet { animation: movetgo 1s ease infinite; } table { width: 80%; background-color: #fff; margin: auto; margin-top: 20px; } /* 列:第一個 */ tr:first-child { background-color: aqua; } p::first-letter { font-size: 100px; color: #09203f; } td { /* 文字對齊置中 tac */ text-align: center; } p:nth-child(odd) { color: #537895; } #s1 { padding-top: 60px; } </style> </head>  <body> <header> <nav>  <ul> <li class="logo"> <ion-icon name="diamond-outline"></ion-icon> </li> <li><a href="#s1">前言</a></li> <li><a href="#s2">特色</a></li> <li><a href="#s3">商品</a></li> <li><a href="#s4">與我聯絡</a></li> </ul> </nav> </header>  <section id="s1"> <h1> <ion-icon name="diamond-outline"></ion-icon>123 </h1> <p> <b>Lorem</b> <em>ipsum</em> dolor sit amet, consectetur adipisicing elit. Ipsam dolores laboriosam officiis quod natus quisquam molestiae laudantium id ut vero. Molestias quos eveniet ducimus reprehenderit aut deleniti accusantium soluta fuga? <span>Suscipit laudantium asperiores mollitia</span>, alias aliquid quisquam itaque! Harum, commodi dolores voluptatum mollitia libero repudiandae hic assumenda beatae ab voluptatem numquam accusamus sapiente nesciunt ratione. Voluptate hic reiciendis dolores veritatis? Quasi voluptatum necessitatibus nulla, explicabo expedita adipisci nisi animi iste numquam, soluta facere, obcaecati consequuntur! Sit minima, odit mollitia autem expedita repellat? Debitis quidem quaerat consequuntur nulla dignissimos neque expedita? <br> <em>----by fefe</em> </p>  <div class="pics"> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> </div> </section> <section id="s2"> <h1 id="movet">123</h1> <p> <b>Lorem</b> <em>ipsum</em> dolor sit amet, consectetur adipisicing elit. Ipsam dolores laboriosam officiis quod natus quisquam molestiae laudantium id ut vero. Molestias quos eveniet ducimus reprehenderit aut deleniti accusantium soluta fuga? <span>Suscipit laudantium asperiores mollitia</span>, alias aliquid quisquam itaque! Harum, commodi dolores voluptatum mollitia libero repudiandae hic assumenda beatae ab voluptatem numquam accusamus sapiente nesciunt ratione. Voluptate hic reiciendis dolores veritatis? Quasi voluptatum necessitatibus nulla, explicabo expedita adipisci nisi animi iste numquam, soluta facere, obcaecati consequuntur! Sit minima, odit mollitia autem expedita repellat? Debitis quidem quaerat consequuntur nulla dignissimos neque expedita? <br> <em>----by fefe</em> </p>  <div class="pics2"> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> </div> <div class="pics"> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> <img src="https://picsum.photos/100/100" alt=""> </div> </section> <section id="s3"> <h1>456</h1> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis, perferendis assumenda maiores commodi excepturi esse debitis odit neque libero eligendi laborum itaque, quia laboriosam minus? Fuga expedita quisquam quas! Quam nihil, esse autem aut dolor cum! Atque, nostrum voluptates alias accusamus voluptatum aliquam ipsum? Velit esse, dolore quisquam deserunt necessitatibus earum eaque ipsa eligendi porro debitis vero, facere sint? Reprehenderit exercitationem nemo, ex sed aliquam et suscipit! Velit, ea nobis? Ab dicta asperiores, soluta at aut natus assumenda libero saepe alias voluptatum dolorem animi neque, provident, illo nemo ducimus! </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis, perferendis assumenda maiores commodi excepturi esse debitis odit neque libero eligendi laborum itaque, quia laboriosam minus? Fuga expedita quisquam quas! Quam nihil, esse autem aut dolor cum! Atque, nostrum voluptates alias accusamus voluptatum aliquam ipsum? Velit esse, dolore quisquam deserunt necessitatibus earum eaque ipsa eligendi porro debitis vero, facere sint? Reprehenderit exercitationem nemo, ex sed aliquam et suscipit! Velit, ea nobis? Ab dicta asperiores, soluta at aut natus assumenda libero saepe alias voluptatum dolorem animi neque, provident, illo nemo ducimus! </p> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis, perferendis assumenda maiores commodi excepturi esse debitis odit neque libero eligendi laborum itaque, quia laboriosam minus? Fuga expedita quisquam quas! Quam nihil, esse autem aut dolor cum! Atque, nostrum voluptates alias accusamus voluptatum aliquam ipsum? Velit esse, dolore quisquam deserunt necessitatibus earum eaque ipsa eligendi porro debitis vero, facere sint? Reprehenderit exercitationem nemo, ex sed aliquam et suscipit! Velit, ea nobis? Ab dicta asperiores, soluta at aut natus assumenda libero saepe alias voluptatum dolorem animi neque, provident, illo nemo ducimus! </p> <div> <table> <tr> <td>標題</td> <td>標題</td> <td>標題</td> </tr> <tr> <td>內容</td> <td>內容</td> <td>內容</td> </tr> <tr> <td>內容</td> <td>內容</td> <td>內容</td> </tr> <tr> <td>內容</td> <td>內容</td> <td>內容</td> </tr> <tr> <td>內容</td> <td>內容</td> <td>內容</td> </tr> <tr> <td>內容</td> <td>內容</td> <td>內容</td> </tr> </table> </div> </section> ``` # 單元八-3 bootstrap ## 無網路環境以可以Dreamweaver範本做網頁 ## 一般使用教學 [使用教學與元件中文版](https://bootstrap5.hexschool.com/) [使用教學與元件官方英文版](https://getbootstrap.com/docs/5.2/getting-started/introduction/) [範例下載](https://getbootstrap.com/docs/5.2/examples/) [練習用圖與課堂進度範例程式](https://drive.google.com/drive/folders/148Ba2gwZWG9bZKsOOZF_yn04gmMw0pHT?usp=sharing) ## 基本定義 * 如何CDN ## 基本功 * 先打上註解比較好辨認並注意縮排 * 切圖片與定義大小,PS->記得先點網頁 * 自定義-色彩,間距等自己加<script>或使用內建,如增加間距 ```htmlembedded= <style> .container{ margin-top: 10vh; } </style> ``` 或在container 套用 mt-5 ```htmlembedded= <div class="container mt-5"> ``` ## 常用結構 * 元件-navbar導覽列 * 元件-carousel輪播 * 排版-container容器 * 排版-欄-獨立column class * 排版-網格-混合和匹配 * 內容-table表格 * 元件-card卡片 * 元件-accordion手風琴 * 表單-排版 * 範例-footer ## :triangular_flag_on_post: 重要提示!! * 每個區塊開始建議先加 div.container * 如果要浮動設計,再加 div.row * 浮動設計 col-lg-大視窗數字 large col-md-中視窗數字 medium col-sm-小視窗數字 small 例： col-lg-4 col-md-6 col-sm-12 =>總數12格 >圖解 >![](https://i.imgur.com/ziiXBUY.png) * 大標題 h1.display-1 * 固定上方選單列作法— nav裏加fixed-top ![](https://i.imgur.com/0TmyuYx.png) * 上方加空格 mt-5 * 圖片寬度自動佔滿 w-100 * 可利用前面教的圖示當插圖或按鈕 ### 修改導覽列作法超連結類別增加gogo,並改 href="#p1" href="#p2" href="#p3" 依此類推 ![](https://i.imgur.com/8l6F9Aw.png) 原來的HTML檔案每段要被連到的地方要加 id="p1" id="p2" id="p3" 依此類推 ```htmlembedded= <div class="gohere" id="p1"></div> ``` 網頁最後一段新增 ```htmlembedded= <script> $(".gogo").click(function(){ var t=$(this).attr("href"); var st=$(t).offset().top; $("html,body").animate({ scrollTop:st },500); }); </script> ``` 網頁前自訂樣式加（</head>前）新增 ```htmlembedded= <style> .gohere{ display:flex; background-color: pink; height: 50px; width: 100% } </style> ``` # [示範程式](https://drive.google.com/file/d/1iaw4l9iHciu5GoCXTvfJuvd1kFsOqtQp/view?usp=sharing) ### 修改導覽列字顏色與間距 ![](https://i.imgur.com/y9YVOk6.png) > 後面要加 !important 才可以強制改變壓過預設值 ### 修改導覽列背景 ```htmlembedded= .navbar{ background-color:red !important; } ``` ### 背景聲音 ![](https://i.imgur.com/SqttNAv.png) * controls出現播放器 * autoplay自動播放 * 注意音樂放的置要對 * 下載音樂的方法找無版權youtube,刪掉網址ube,下載成mp3 ## 做對話框modal ### 按鈕要加 > data-toggle="modal" data-target="#fefe1" 新版的是寫 > data-bs-toggle="modal" data-bs-target="#fefe1" ### 在下方加入modal對話框的設計 ```htmlembedded= 要記得id後面要跟上面的target對應 <div class="modal fade" id="fefe1"> <div class="modal-dialog modal-content"> 以下內容區可自行設定,樣式也可不用 <div class="modal-header">標題</div> <div class="modal-body">內容區</div> <div class="modal-footer"> 有個關閉按鈕比較好,也可以用圖示設計 <button type="button" class="close" data-dismiss="modal"> 關閉 </button> 或是 <button type="button" class="close" data-bs-dismiss="modal"> </div> </div> </div> ``` --- ## 背景色與與背景圖片 - 改背景,改box背景,改字顏色等-超美漸層產生器[webgradients]( https://webgradients.com/) - 改插圖-超好用插圖 [freepik](https://www.freepik.com/) 免費插圖 [Humaaans](https://www.humaaans.com/)：人物角色與場景插畫 use with blush [OpenDoodles](https://www.opendoodles.com/)：可愛的人物角色插畫 [unDrawn](https://undraw.co/illustrations)：簡報利器插畫圖庫 [Glaze](https://www.glazestock.com/)：精緻向量插畫 [manypixels](https://www.manypixels.co/)：可自行定義配色 [mixkit-Art](https://mixkit.co/free-stock-art/)：充滿藝術感的精緻插畫 [illlustrations](https://illlustrations.co/)：生活物品插畫 [isoflat](https://isoflat.com/)：最大的免費立體投影插畫網站 [Paaatterns](https://products.ls.graphics/paaatterns/)：Patterns 圖樣插畫 # 專題網站 [交這裏](https://drive.google.com/drive/folders/1hMbYpDQ1H0eyLHirk4bZDNzQW-o3pOC7?usp=sharing) * 架構有導覽功能可點選 10% * 橫幅設計(輪播) 10% ( 圖片需以canva或ps設計 ) * 內容豐富性 30% ( 含研究主題、電子書與各bootstrap元件應用 ) * 漸層色運用與整體美感 5% * font awesom使用 * SDGs標語 5% * 網頁中英文日說明與連結 10% * 其他創意 10% ( 例如動畫互動 ) * 心得與分工 5% * 影片嵌入 5% * 地圖嵌入 5% # [公告] 12/6專題課程指定作業各組需完成專題網站，於適當的位置加入英文與日文版網站架構圖與網站簡介(動機與大綱之類)，建議可以另外新增一頁，以超連結的方式說明。[網站介紹可參考範例](http://203.72.100.60/113_projects/web/t3/#) 組長請練習口頭英文網站導覽，12/11需向日本參訪同同學介紹並採訪網站回饋意見。(組長可以先預習一下[日文輸入法的安裝方式](https://www.youtube.com/watch?v=tSo8pw6vvVw)) 考量報告書完成度後，網頁組確認推派參加校內賽組為：布袋戲、昀澤包裝、旗袍，請這三組將報告書完善後於12/6前上傳完成，逾時會被淘汰喔！大家加油！其他組把企畫書整理好，可以開始準備投其他比賽。（[參考老師整理的比賽區](https://docs.google.com/spreadsheets/d/1-fz-TGRxml4KFqd5Z58zCjtbFam-va1pbgICqBKevgo/edit?usp=sharing)） --- # 單元九台日交流篇 --- # Introduction --- みなさんこんにちは、フェフェですこれから2時間、私が授業を指導します。 Korekara 2-jikan, watashi ga jugyō o shidō shimasu. 最初の授業では、台湾の学生がプロジェクトウェブサイトの成果を紹介しました。 Saisho no jugyōde wa, Taiwan no gakusei ga purojekuto u~ebusaito no seika o shōkai shimashita. 2回目のレッスンは、日本人と台湾人の学生が共同で行います。ウェブサイトの内容についてフィードバックをお寄せください。 2-Kai-me no ressun wa, nihonjin to Taiwan hito no gakusei ga kyōdō de okonaimasu. U~ebusaito no naiyō ni tsuite fīdobakku o o yose kudasai. 完成したインタビュー質問は、CANVAを使用して1ページのプレゼンテーションにまとめる作業を協力して行いますので、順番にご報告ください。 Kansei shita intabyū shitsumon wa, CANVA o shiyō shite 1 pēji no purezentēshon ni matomeru sagyō o kyōryoku shite okonaimasunode, junban ni go hōkoku kudasai. --- > 12/11 10:00-12:00 > 共同為網站加入日文版說明 > 以目前各組的專題網站成果，做為文化交流的主題，讓學生與日本好友合作做成一頁日文版的專題網站介紹。 > :flag-jp: 現在の各グループのプロジェクトサイトの成果を文化交流のテーマとして、日本の友達と協力して日本語版のプロジェクトサイト紹介を1ページ作成します。 > 暖身：先作一份英文版準備 ## 日本好朋友的交流 1. 向日本好友介紹你的網站(可使用chateverywhere等工具 > :flag-jp:皆さん、日本の友達にあなたのサイトを紹介してください。 2. 詢問他的感想： > :flag-jp:ご意見とフィードバックしてみてください。 * 最喜歡的地方 > :flag-jp:このサイトで好きな部分。 * 可以改進的方法 > :flag-jp:このウェブサイトのデザインをどのように改善すればよいでしょうか?。 * 請他使用Canva為你寫一段日文介紹圖文（記得先為他安裝日文輸入法） --- Sample [here](https://www.canva.com/design/DAG6nhbK6ZE/fRoxGOwZS9ESQhJTthrMyw/view?utm_content=DAG6nhbK6ZE&utm_campaign=designshare&utm_medium=link2&utm_source=uniquelinks&utlId=h4043ac064d) --- > :flag-jp:Canvaというプラットフォームを使用して、日本語の紹介画像をデザインし、台湾の学生が彼のサイトに掲載できるようにしてください。 > 格式參考如下: > ![日文版](https://hackmd.io/_uploads/ByF357pMlx.jpg) > 可加入以下程式 ```htmlembedded=   <button onclick="document.getElementById('Modal名字').style.display='block'">日本語</button>  <div id="Modal名字" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:#0008;z-index:999;"> <div style="background:#fff;padding:20px;margin:15% auto;width:70%;text-align:center;"> <p>這是日文版介紹Modal內容</p> <img src="圖片路徑/圖片檔名.jpg">這是日文版介紹Modal內容</img> <button onclick="document.getElementById('Modal名字').style.display='none'">關閉</button> </div> </div> ``` ### 修正版 ![image](https://hackmd.io/_uploads/HkEV82pzll.png) --- # 12/17 1. 網站中英文與日文回饋 2. 網站完成 :triangular_flag_on_post: :triangular_flag_on_post: :triangular_flag_on_post: 4. 檢查部落格(可參考最後筆記) 5. 校外賽經驗分享（創意性&AI運用很吃香） 6. 恭禧校內賽入選三組 7. markdown語法教學 ![image](https://hackmd.io/_uploads/Bk79EcAG-l.png) --- # 進度預告-又放掉兩次...:cry: 12/18 報告準備、校外賽報名完成 12/24 各組報告 > 簡報與報告書放進**0-報告書裏** > 口頭報告 > 網站成果放進**0-期末專題網站** 12/31 檢查期末學習歷程 01/07 上機複習、電子書傳上平台 01/08 LINE講座（需要用手機） 01/14 上機考 01/15 期末報告—第二次 ---  --- # 補充 📚 Hexo 部落格搭建與客製化主題 — 綜合詳細指南這份指南整合了您所有的操作指令和佈景主題配置流程，旨在提供一個從環境準備到最終部署的完整、詳盡步驟。 ## 🎯 階段一：環境準備與專案初始化 ### 1. 安裝 Node.js * **操作：** 下載並安裝 **Node.js (LTS 版本)**。 ### 2. 安裝 Hexo * **操作：** 在終端機中執行全域安裝 Hexo CLI。 ```bash npm install -g hexo-cli ``` ### 3. 配置 PowerShell 執行策略 (Windows / 選用) * **原筆記指令：** ``` set_executionPolicy_scope CurrenUser RemoteSigned ``` * **標準指令與說明：** 如果您在 Windows PowerShell 中遇到腳本無法執行的錯誤，請執行以下指令來允許執行本地簽署的腳本。 ```powershell Set-ExecutionPolicy RemoteSigned -Scope CurrentUser ``` ### 4. 安裝 Git * **操作：** 下載並安裝 **Git for Windows/x64 Setup**。 ### 5. 初始化 Hexo 專案 (首次建立) * **操作：** 選擇工作目錄，執行初始化指令。 ```bash hexo init fefe(站名) ``` ### 6. 重複初始化指令（依原筆記保留） * **原筆記指令：** ``` 終端/新增終端 hexo init fefe ``` * **說明：** **(此為原筆記指令，通常不需重複)** 如果您的環境需要再次確認或重新初始化專案，請保留此步驟。 --- ## 💻 階段二：本地測試與基礎操作 ### 7. 進入專案並啟動伺服器 * **操作：** 進入專案資料夾 (`fefe`)，並啟動本地伺服器。 ```bash # 檔案/開啟資料夾/fefe cd fefe # 啟動伺服器 hexo s ``` * **測試：** 按 **`Ctrl + 點擊`** 網站連結 (`http://localhost:4000/`) 查看結果。 * **中斷：** 按 **`ctrl+c`** 中斷伺服器。 * **其他指令：** `hexo --help` 可查看所有可用指令。 ### 8. 建立新文章 * **操作：** 在專案目錄下執行指令建立 Markdown 文件。 ```bash hexo new "Learn-hexo-blog" ``` * **位置：** 文章檔案會出現在 `source/_posts/` 資料夾內。 * **編輯與確認：** 利用 **Markdown 語法**編輯內容，並使用 `hexo s` 確認結果。 --- ## 🎨 階段三：佈景主題客製化配置 ### 9. 瀏覽與下載佈景主題 * **原筆記指令：** `hexo thems` (官方網站：[Hexo Themes](https://hexo.io/themes/)) * **下載主題：** 在您的 Hexo 專案根目錄下，將主題複製 (Clone) 到 `themes/` 資料夾。 ```bash cd themes git clone [主題的 Git 連結] [主題資料夾名稱] ``` ### 10. 啟用新的佈景主題 * **操作：** 開啟您的 Hexo 專案根目錄下的主要配置檔 **`_config.yml`**。 * **修改：** 將 `theme:` 屬性改為您下載的主題資料夾名稱。 ```yaml # 專案根目錄下的 _config.yml theme: [主題資料夾名稱] ``` ### 11. 配置主題選項 (客製化) * **操作：** 根據主題的官方文件，修改其**主題配置檔** (`themes/[主題名稱]/_config.yml`) 進行客製化。 * **推薦：** 建議使用**覆蓋配置**方式 (在專案根目錄建立 `_config.[主題名稱].yml`)，以利於主題未來更新。 --- ## 🚀 階段四：GitHub 部署配置 ### 12. 註冊 GitHub 與建立 Repository * **操作：** 註冊 GitHub 帳號。 * **建立 Repository：** * **名稱格式：** 必須為 `iamfefe-web.github.io`（即 `[您的 GitHub 帳號].github.io`）。 * **動作：** 複製此 Repository 的 HTTPS 網址。 ### 13. 配置部署設定檔 * **操作：** 回到您的 Hexo 專案根目錄，開啟 **`_config.yml`** 檔案，修改 `deploy:` 區塊： ```yaml # 專案根目錄下的 _config.yml deploy: type: git # 請貼上您複製的 HTTPS 網址 repo: [https://github.com/iamfefe-web/iamfefe-web.github.io](https://github.com/iamfefe-web/iamfefe-web.github.io) branch: main # 或 master，依據 GitHub 倉庫的主分支設定 ``` ### 14. 設定 Git 資訊與安裝部署套件 * **原筆記指令：** ``` 終端下: npm install hexo_deplyer_git hexo d git config --global user.email "信箱" git config --global user.name "名字" ``` * **修正與說明 (依原筆記保留，並修正套件名稱)：** * `hexo d` (部署指令) 應在安裝套件和設定 Git 資訊之後執行。 * 部署套件的正確名稱為 `hexo-deployer-git`。 ```bash # (A) 安裝 Hexo Git 部署套件 (僅需執行一次) npm install hexo-deployer-git # (B) 設定 Git 提交者資訊 git config --global user.email "信箱" git config --global user.name "名字" ``` ### 15. 生成並部署網站 * **操作：** 執行部署指令，將部落格內容和主題更改上傳到 GitHub Pages。 ```bash # 部署指令 (建議加上 clean 和 generate 確保最新內容) hexo clean && hexo g && hexo d ``` ### 16. 確認網站上線 * **操作：** 透過 `iamfefe-web.github.io` 網址查看最終部落格站點。 --- --- # 單元十學習歷程報告 ## 參考資料 ### [技高學習成果呈現建議](https://issuu.com/convofuture/docs/230807_) > 上傳區有去年優秀學長姊作品可參考，但請務必照以下建議修改 > ## 建議內容 ### 封面 > 標題：多元選修-網頁設計專題製作 > **專題技術特色**與對應頁碼 > 組員貢獻度說明（組員、%、工作內容說明，各組需討論同一版本我才會認證） > 個人姓名 > 指導老師 ### 中英文簡介 ### 組員心得 > 如果失憶了可以看看上下學期的課程筆記發揮 ### 個人學習成長與相關成就（如比賽經歷與獲獎） ### 專題報告 ### 網站程式畫面網站網址如下: http://203.72.100.60/114_project/web/t1/ > 畫面與程式可個別截圖＋說明 > 網站全頁截圖看全貌 > 網站操作錄成影片先放自己的頻道,若有解說更好 > 可設為知道連結皆可觀看，轉QR-code放報告 ### 貢獻度寫法 ![image](https://hackmd.io/_uploads/ry8m9IHfel.png) ![image](https://hackmd.io/_uploads/HkSFcLSMlx.png) --- # :triangular_flag_on_post: [1/6前交期末學習歷程檔案放置處](https://drive.google.com/drive/folders/1hMbYpDQ1H0eyLHirk4bZDNzQW-o3pOC7?usp=sharing) > 檔名：學號.pdf > 請先讓老師看過打平常成績，通過再上傳到系統 > :warning: 很重要**事關升學一定要傳**！ > :warning: 可著重程式能力展現 > :warning: 如果很多件數可以勾選的人，可以把專題與網頁併在一起傳專題 > :warning: 如果件數很少的人，也可以把專題與網頁分開兩個科目傳，未來自己要記得勾選上傳中央資料庫 > :warning: 有得獎獎狀可以在課程成果裏，多元表現也可以再放一次，增加能見度 --- # 術科考試準備 [素材](https://drive.google.com/drive/folders/1hMbYpDQ1H0eyLHirk4bZDNzQW-o3pOC7?usp=sharing) https://youtu.be/HOe5sDSmkqQ https://youtu.be/rA0PAhmndz8 https://youtu.be/lhuRPKt-8BY 6表格與設計 https://youtu.be/LyGZeFeSPUU 5開檔與固定式飄動廣告 https://youtu.be/NxSq-uILrGY 7表單設計 https://youtu.be/zbk1RHA3Tbc 8 超連結到新頁 https://youtu.be/HWtDVdy24_U ### 表單 https://www.webtech.tw/info.php?tid=89 ```htmlembedded= <form action="資料傳送目的地" method="資料傳遞方式"> 表單內容與表單元素 </form> ``` ```htmlembedded= 標籤 <label>內容</label> 文字 <input type="text" name="" value=""> 密碼 <input type="password" name="" value=""> 下拉選單 <select name=""><option value=""></option></select> 如 <select id="gender" name="gender"> <option value="male">男性</option> <option value="female">女性</option> <option value="other">其他</option> </select> 選項按鈕 <input type="radio" name="" value=""> 核取方塊 <input type="checkbox" name="" value=""> 文字輸入欄位 <textarea name=""></textarea> 隱藏欄位 <input type="hidden" name="" value=""> 按鈕 button <input type="button" name=""> 送出表單按鈕 <input type="submit" name="" value="送出表單"> 重設表單按鈕 <input type="reset" name="" value="送出表單"> ``` ### 注意 * checked可指定預設 * 注意單選時命名相同 * [更多寫法](https://www.runoob.com/tags/att-input-type.html)例如date,color,file,number,range的用法 * 可以透過chatgpt檢查修正 :joystick: 實作任務 ![](https://i.imgur.com/bGmjiOT.jpg) --- # AI應用幫助設計網站的AI工具 https://www.ibest.com.tw/news-detail/best-AI-tools-for-web-designers-2023/ 遊戲開發 coding-impact.github.io 資料爬蟲應用 https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Promise https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Asynchronous/Introducing https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Statements/async_function chatgpt與網站連動 https://runjs.app/blog/chatgpt-javascript-api 網站監控功能寫在手機上看 https://scriptable.app ---  ---

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.