[講義] 以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 Article