[講義] 以Photoshop製作網頁版型 (no replies)
1. 範例說明2. 首頁範例製作步驟2.1 HTML語法2.2 CSS語法3. Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識3.1 編號清單 ul、ol3.2 區塊定義 dl、dt、dd4. 以Photoshop製作網頁版型4. 以Photoshop製作網頁版型 對應[作業02] 網頁格線排版練習 可參考以下範例製作 http://youtu.be/O-Z4GcufNJ0 )
View ArticleClik here to view.
[講義] HTML與CSS練習--首頁實作篇 (no replies)
1. 範例說明2. 首頁範例製作步驟2.1 HTML語法2.2 CSS語法3. Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識3.1 編號清單 ul、ol3.2 區塊定義 dl、dt、dd1. 範例說明 http://mepopedia.com/~web102-c/hw03/hw03/ 本範例將就一教學網站 說明HTML與CSS之間的關係...
View ArticleClik here to view.
[講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果 (no replies)
1. 範例說明2. 首頁範例製作步驟2.1 HTML語法2.2 CSS語法1. 範例說明 http://mepopedia.com/~jinjin/web/hw04a/works.html 本範例延續上個範例http://mepopedia.com/forum/read.php?804,43670 繼續其他內頁的編輯 說明HTML與CSS之間的關係...
View Article[講義] HTML與CSS練習--內頁實作篇--其他頁面完成與CSS3初探 (no replies)
1. 範例說明2. 內頁實作篇-連結頁面3. CSS3語法初探3.1 邊框圓角語法3.2 漸層語法3.3 邊框陰影語法3.4 文字陰影語法1. 範例說明 http://mepopedia.com/~jinjin/web/hw05a http://mepopedia.com/~jinjin/web/hw05a/link.html 本範例延續上個範例...
View ArticleClik here to view.
[講義] HTML5與CSS--網頁版型設定 (no replies)
1. 概述2. 網頁版型的語法2.1 雙欄式網頁版型2.2 三欄式網頁版型2.2.1 HTML5部分2.2.2 CSS部分3. 特別注意1. 概述 HTML網頁的描述是由上到下，逐行的方式顯示，HTML5之前要製作區塊內容都是用div標籤來設計，但在HTML5中新增文件結構功能，讓網頁能以區塊的形式呈現。...
View ArticleClik here to view.
FunTaipei HTML 網頁架構分析 (no replies)
1. 整體設計2. 佈景設計3. 頂部選單4. 頂部細部設計5. 主佈局設計6. 上課影音1. 整體設計 .message-body img { width: 83% } 2. 佈景設計 step1.html FunTaipei body { width:100%; background-image:url(../images/bg.png); overflow:hidden; }...
View ArticleClik here to view.
FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)
step5: 地標設定 重點： CSS絕對定位：position: absolute; CSS定位座標：top, bottom, left, right FunTaipei /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{...
View Article[講義] 網頁探索-切版練習與HTML+CSS設計 (no replies)
1. 參考講義2. 參考講義2. 參考講義 網頁探索-切版練習與HTML+CSS設計 JUDE WANG編輯 http://cute.jude.asia/week-1/ 熟讀學習網站 W3Schools http://www.w3schools.com/...
View Article[講義] 網頁探索-PSD 2 HTML (no replies)
1. 參考講義1. 參考講義 網頁探索-PSD 2 HTML JUDE WANG編輯 http://cute.jude.asia/week-2/ PSD練習檔下載 http://goo.gl/TemDGG 於PSD中選擇欲輸出的圖檔 1.於圖層中按右鍵→複製圖層→新增 2.於新檔案中→影像→修剪 有不同的圖層可以ctrl連選 Sublime Text 3編輯器下載...
View Article[講義] 網頁探索-PSD 2 HTML+CSS (no replies)
1. 參考講義1. 參考講義 網頁探索-PSD 2 HTML+CSS JUDE WANG編輯 http://cute.jude.asia/week-3/ jpg圖檔下載 http://goo.gl/6Wjo6Q 程式碼 http://goo.gl/H8zZfM Sublime Text 3編輯器下載 http://www.sublimetext.com/3 PACKAGE CTRL...
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[參考] 參考網站 (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)
1. 範例HTML原始碼2. 其他參考教學3. 整體設計4. 步驟一佈景設計5. 步驟二頂部選單6. 步驟三頂部細部設計7. 步驟四主佈局設計-動態換頁效果8. 上課影音 8.1 FunTaipei HTML 網頁架構 頂部細部設計STEP1-38.2 FunTaipei HTML 動態效果STEP49. 學長姐範例10. 圖片範例原始碼11. 網頁美感排版設計參考講義12. 設計目的13....
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. 其他參考教學範例 http://ccnt1.cute.edu.tw/hphys/web/hphys/ 1. 範例HTML原始碼 中國科技大學體育室 中國科技大學體育室 最新消息 行政資訊 活動成果 體育教學 運動設施 場地開放時間 法規辦法 表格下載 體育室相簿 中國科技大學體育室 體育室主任：羅主任旭壯 台北校區電話：02-2931-3416#2149...
View Article免費申請網域的好康 (no replies)
「免費申請網域的好康」三步驟： 1.網域申請：https://rs.twnic.net.tw/student.html 進入後點選：一般學生註冊 2.註冊序號：40115EO （後兩碼是英文大寫） 輸入你想要的個人網域名（英文數字都可） 3.填寫個人資料送出～即成功了 請每位同學務必申請
View Article[講義] 常見css設定補充說明（超連結（文字、圖片）） (no replies)
補充常用CSS語法 /*將圖片設定靠左浮動，形成繞圖排文*/ .floatleft { float: left; padding-right: 20px; padding-bottom: 20px; } /*清除浮動設定，取消靠左浮動*/ .clearboth { clear: both; } /*文字超連結樣式設定*/ a { } /*文字超連結，滑鼠移過狀態樣式設定*/ a:hover { }...
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 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 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.
[講義] 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[講義] 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 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[講義] 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 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[講義] 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.
[講義] 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 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多頁網頁編輯 (四) 相簿設定 (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.
[講義] 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 Article