Clik here to view.
[講義] Google Fonts 網路中文字型應用 (no replies)
1. Google Fonts 網路中文字型2. 使用Google fonts黑體（思源黑體）3. 使用Google fonts圓體字型4. 使用Google fonts仿宋字型1. Google Fonts 網路中文字型 Google Fonts https://fonts.google.com Google 推出 5 款免費的中文網頁字型 1. cwTeXKai (Chinese...
View ArticleClik here to view.
[講義] RWD多頁網頁編輯 (四) 相簿設定 (no replies)
1. 期末範例2. 網站基本架構--相簿篇3. 相簿3.1 滿版型相簿（四欄）3.2 一般型相簿（四欄）1. 期末範例 上課期末作業範例線上瀏覽--相簿 http://mepopedia.com/~jinjin/web/final/gallery.html 上課期末範例下載 2. 網站基本架構--相簿篇 3. 相簿 選擇其中適合的相簿頁設計型式，作為期末作業相簿頁設計 1. 滿版型相簿（四欄）...
View ArticleClik here to view.
[講義] RWD多頁網頁編輯 (二) 網頁架構 / 列表頁 / 內容頁 / (no replies)
1. 期末範例2. 網站基本架構3. 須製作之頁面4. 麵包屑breadcrumb5. 圖片列表頁6. 上課影音1. 期末範例 上課期末作業範例線上瀏覽 http://mepopedia.com/~jinjin/web/final/ 上課期末範例下載 2. 網站基本架構 3. 須製作之頁面 1.首頁，包含導覽列之介紹頁、列表頁、文章頁、相簿列表頁等 2.介紹頁：了解大概的內容...
View ArticleClik here to view.
[講義] RWD多頁網頁編輯 (一) skin / navigation / Menu / video (no replies)
1. 本單元範例下載1.1 head需修改之項目1.2 skins/css/網頁主色設定1.3 等待動畫page-loader1.4 Toggle navigation行動版導覽列/桌機版logo圖檔1.5 導覽列設定/navbar/dropdown1.6 首頁video影片設定 / videowrap影音區塊 / script1. 本單元範例下載 ✱ 範例下載 學長姐參考範例：...
View Article[講義] Figma資源分享 (no replies)
https://www.figma.com 線上工具 1.作業二連結範例 https://www.figma.com/file/JPhJ1ZQLQSgPz9J31KyrwyEA/3-elements （以此元素製作新的版面設計） 2. Keynote講義: https://www.figma.com/file/gDlzx0U0sUl7tCgdMP2vwCJX/class-2-keynote 3....
View ArticleClik here to view.
[講義] OnePage網頁實作解析(二） (no replies)
1. 相片分類與燈箱效果2. 地圖設定1. 相片分類與燈箱效果 html Show All We Design Printing We Development SEO Optimization Eligendi optio cumque webdesign為分類。 col-sm-4為分欄大小，目前為三欄。 準備兩張照片，一為顯示大小550x480，一為燈箱照片大小820x620。...
View Article[講義] OnePage網頁實作解析(一） (no replies)
1. 前置設定html lang / meta tag 1.1 html lang 語系與字元編碼設定1.2 什麼是 meta tag ?2. 輪播圖Flexslider / Jumbotron 2.1 Flexslider－－方便好用的圖片輪播、滑動切換套件3. Grid system 網格系統3.1 Grid system 網格系統概述3.2 960 網頁格線排版系統4. Reset CSS...
View Article[講義] 使用圖示字體(icon font) Font Awesome (no replies)
1. 圖示字體(icon font) 2. 使用圖示字體(icon font) Font Awesome3. Font Awesome基本操作4. Font Awesome5新增樣式5. FontAwesome CDN6. 舊版Font Awesome練習1. 圖示字體(icon font) 網頁設計常需要設計小ICON作為辨識內容與增加美觀之用，也為一般所稱之 UI（User Interface...
View Article[講義] RWD-OnePage設計 概念篇 (no replies)
1. 圖示字體(icon font) 2. 使用圖示字體(icon font) Font Awesome3. Font Awesome基本操作4. Font Awesome5新增樣式5. FontAwesome CDN6. 舊版Font Awesome練習7. OnePage一頁式網頁概述8. 免費版型資源9. 免費圖庫資源10. 應用類型10.1 畢業專題網站應用10.2 活動網站10.3...
View ArticleClik here to view.
[講義] EDM/Newsletter製作 (no replies)
1. EDM設計原則2. HTML與CSS寫在同一個檔案裡2.0.1 範例：2.1 將css寫在head裡2.2 css inline2.2.1 範例：2.2.2 css inline範例：2.2.3 圖片絕對路徑：2.3 EDM/Newsletter免費版型2.4 課堂範例1. EDM設計原則...
View Article[講義] Free templates及LongPage版型製作初探 (no replies)
1. Free templates for your websites2. 應用類型在經過基礎html及css語法的洗禮後，是否期待能製作更多不同的版型？ 應用在更多不同的設計上，以因應更多的需求。 目前網路上有許多免費的版型可供下載製作。 接下來同學們可以瀏覽與尋找自己喜歡與適合的版型，試著做做看期末的主題。 1. Free templates for your websites...
View ArticleClik here to view.
[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)
1. step5: 地標設定2. 學長姊範例3. 2015/5/28上課影音1. step5: 地標設定 上課範例 http://mepopedia.com/~css104-2c/hw08/ex/hw08-1025445070 2. 學長姊範例 http://mepopedia.com/~css104-2c/hw08/ex/final-1015445215...
View ArticleClik here to view.
[講義] jQuery動態換頁效果 (no replies)
1. step5: 地標設定2. 學長姊範例3. 2015/5/28上課影音4. jQuery參考網站5. jQuery動態換頁效果範例6. 製作步驟6.1 步驟一佈景設計6.2 完整index.html6.3 完整style.css[講義] jQuery動態換頁效果 4. jQuery參考網站 http://jquery.com/ 介面：https://jqueryui.com/...
View Article[講義] 常見css設定補充說明（超連結（文字、圖片）） (no replies)
補充常用CSS語法 /*將圖片設定靠左浮動，形成繞圖排文*/ .floatleft { float: left; padding-right: 20px; padding-bottom: 20px; } /*清除浮動設定，取消靠左浮動*/ .clearboth { clear: both; } /*文字超連結樣式設定*/ a { } /*文字超連結，滑鼠移過狀態樣式設定*/ a:hover { }...
View Article免費申請網域的好康 (no replies)
「免費申請網域的好康」三步驟： 1.網域申請：https://rs.twnic.net.tw/student.html 進入後點選：一般學生註冊 2.註冊序號：40115EO （後兩碼是英文大寫） 輸入你想要的個人網域名（英文數字都可） 3.填寫個人資料送出～即成功了 請每位同學務必申請
View Article[講義] 輪播頂圖製作 (no replies)
1. 範例HTML原始碼2. 其他參考教學範例 http://ccnt1.cute.edu.tw/hphys/web/hphys/ 1. 範例HTML原始碼 中國科技大學體育室 中國科技大學體育室 最新消息 行政資訊 活動成果 體育教學 運動設施 場地開放時間 法規辦法 表格下載 體育室相簿 中國科技大學體育室 體育室主任：羅主任旭壯 台北校區電話：02-2931-3416#2149...
View ArticleClik here to view.
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)
1. 範例HTML原始碼2. 其他參考教學3. 整體設計4. 步驟一佈景設計5. 步驟二頂部選單6. 步驟三頂部細部設計7. 步驟四主佈局設計-動態換頁效果8. 上課影音 8.1 FunTaipei HTML 網頁架構 頂部細部設計STEP1-38.2 FunTaipei HTML 動態效果STEP49. 學長姐範例10. 圖片範例原始碼3. 整體設計...
View Article[講義] 網頁美感排版設計 (no replies)
1. 範例HTML原始碼2. 其他參考教學3. 整體設計4. 步驟一佈景設計5. 步驟二頂部選單6. 步驟三頂部細部設計7. 步驟四主佈局設計-動態換頁效果8. 上課影音 8.1 FunTaipei HTML 網頁架構 頂部細部設計STEP1-38.2 FunTaipei HTML 動態效果STEP49. 學長姐範例10. 圖片範例原始碼11. 網頁美感排版設計參考講義12. 設計目的13....
View Article[參考] 參考網站 (no replies)
1. 首頁2. 列表3. 文章4. 個人頁面5. 登入6. EVENT7. 行動版/響應式1. 首頁 http://www.eslitecorp.com/index.aspx?a=tw&l=b http://www.esliteliving.com/ http://tudesignoffice.com/ http://2think.com.tw/...
View Article[講義] 網站設計新技術需求 (no replies)
0.1 長網頁(Long Page Design)0.2 資訊式頁尾(Informative Fat Footer)0.3 巨型導覽選單(Mega Menu)0.4 扁平化介面設計(Flat UI Design)網站設計新技術需求 1.網站版面需有響應式設計(Responsive Web Design),使不同瀏覽裝置皆可獲得最佳之瀏覽體驗。 http://mediaqueri.es/...
View Article
![[LoliHouse] 黑猫与魔女的教室 / Kuroneko to Majo no Kyoushitsu - 24 [WebRip 1080p...](http://files.seeusercontent.com/2026/04/13/rW0x/Kuroneko_800.webp)
![[JMAX] [2026.09.21] BanG Dream! 一家Dumb Rock! - 微笑みの爆弾 (Cover) [FLAC 96kHz/24bit]](http://i.ibb.co/3mnVf2Fn/Cover.jpg)
