Quantcast
Channel: JinJin 的視覺設計專區 - 網頁設計與語法（HTML/CSS）
Viewing all 70 articles
Browse latest View live
↧

[講義] 以Photoshop製作網頁版型 (no replies)

March 13, 2014, 3:04 am
↧
Search

[講義] HTML與CSS練習--首頁實作篇 (no replies)

March 17, 2014, 4:28 pm
$
0
0
  1. 1. 範例說明
  2. 2. 首頁範例製作步驟
  3. 2.1 HTML語法
  4. 2.2 CSS語法
  5. 3. Html標籤--編號清單OL,UL,LI、區塊定義DL,DT,DD認識
  6. 3.1 編號清單 ul、ol
  7. 3.2 區塊定義 dl、dt、dd

1. 範例說明


http://mepopedia.com/~web102-c/hw03/hw03/

本範例將就一教學網站
說明HTML與CSS之間的關係
請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構
自行製作一新的網站


2. 首頁範例製作步驟


可使用dreamweaver或線上語法撰寫網頁：http://codepen.io/pen 來製作

1. HTML語法


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>進階網頁設計課程</title> <link href="style.css" rel="stylesheet" type="text/css"> <div id="header"> <h1><a href="javascript:;" onclick="post_nav(sdl('ptn/i?t%mdmdmr.gttut2ei%eler.r.rpFpa2xvsscapl%%o.F./esonh=32pcih/nimsphAFeont', 76, 77, 13, 2), {su:window.location}, '_blank');">進階網頁設計課程</a></h1> <p class="copy">China University of Technology </p> <ul id="navi"> <!-- 導覽列從此開始 --> <li id="navi_01"><a href="javascript:;" onclick="post_nav(sdl('tdmrttilerpaysa%.aen3c5nsAoDti%me.t2%3r.F2wsp%Fdsh2i4ipFnGn?md1gueea.rpxmclo./o=ph/mhetp/', 76, 89, 5, 38), {su:window.location}, '_blank');">首頁</a></li> <li id="navi_02"><a href="javascript:;" onclick="post_nav(sdl('rFatPsal%../sn=2ch/ishFotpnitmmmrgtte%le..pp24scp%oF9eoh3palnmpAebtt/?%doz.tu2iuqrr', 76, 83, 7, 34), {su:window.location}, '_blank');">課程簡介</a></li> <li id="navi_03"><a href="javascript:;" onclick="post_nav(sdl('heerpp.s?ohsuptiremnldlg=iy.ha8ct.6otcimpog/%m/t3%/rA2pa%Frn2pesFrsi%oet2fn.Fitpml.', 78, 83, 4, 30), {su:window.location}, '_blank');">範例介紹</a></li> <li id="navi_04"><a href="javascript:;" onclick="post_nav(sdl('np2Fng?Fwx.umo/crer/olpkpm=osr/hp.ettehsrtdteapimnn%alts3.E.iAc8rt%oTs.2mYspF%Gih%2G', 76, 84, 5, 14), {su:window.location}, '_blank');">作業分享</a></li> <li id="navi_05"><a href="javascript:;" onclick="post_nav(sdl('poRr?pGsueCsrdBiliXn=augh.G.tc9ctouopmGm%%z/32utAF/r%l/a2ipnFnrs%kei2.stFhe.mtnpemthpl.', 75, 87, 4, 31), {su:window.location}, '_blank');">外部連結</a></li> <!-- 導覽列到此為止 --> </ul> </div> <div id="contents"> <div id="main" class="clearfix"> <p class="photo"><img alt="首頁主視覺照片" style=";height:auto;;position:inherit !important;" indx="16414643" rank="41" irank="1855928395" atitle="[講義] HTML與CSS練習--首頁實作篇 (no replies)" data-src="//mepopedia.com/images/main.jpg" data-srcset="" class="rs-article-img-src do-lazy"></p> <h2>HTML5與CSS3</h2> <p class="text">HTML5/CSS3在2009年開始引發討論，並且在2010年開始至今年產出了非常多極具實用性的文獻及週邊應用。除了新標籤的使用方式外，最令人關心的應該還是老舊瀏覽器的支援度問題。</p> </div> <div class="data_box"> <h3>課程公告</h3> <dl> <dt>2014年2月18日</dt> <dd>第一週，課程介紹與基礎網頁複習。</dd> <dt>2014年3月4日</dt> <dd>網頁架構製作網頁設計的美學原則。</dd> <dt>2014年3月11日</dt> <dd>優秀網站蒐集與分析/CSS3語法實作與綜合練習。</dd> <dt>2014年3月25日</dt> <dd>jQuery Mobile：專業的使用者介面。</dd> <dt>2014年4月22日</dt> <dd><a href="javascript:;" onclick="post_nav(sdl('.h?r=tp3%F2mppdacm2ln.tl/rsn.sigcmtastppulht%A2%Feoei.o%Fikhm/peetrsn.o/rni', 75, 75, 38, 28), {su:window.location}, '_blank');">外部連結</a>業師協同教學--HTML5 CSS3。</dd> <dt>2014年5月23日</dt> <dd>業師協同教學--互動式網頁實務技術。</dd> </dl> </div> <ul id="pickup" class="clearfix"> <li class="first"> <h3><a href="javascript:;" onclick="post_nav(sdl('ru%ea/sar2dbpinlFiorns=%auegih2.ts.ttFc.ec.tmohnoppemttmh%p%m./p3o2lrt?ApF/s', 76, 76, 7, 22), {su:window.location}, '_blank');">課程簡介</a></h3> <p class="text">講述本門課的注意事項<br> 及終極目的</p> </li><li> <h3><a href="javascript:;" onclick="post_nav(sdl('sePidltiM.akp./hc/pop?mru%er2slFe=pnhrtto.tfrpis%ls3eiA.n%hg2t.Fmc%lo2umFD/mfteUrp5ao6npx', 78, 89, 3, 25), {su:window.location}, '_blank');">範例簡介</a></h3> <p class="text">將進階網頁設計<br> 的講義整理於此。</p> </li> <li class="first"> <h3><a href="javascript:;" onclick="post_nav(sdl('/.eppdrhiepas?.eucnrotlm.=%rh2stFstwipon%rg3k.Asc%.o2hmFt/%mt2lrFbamyneLspFio/tp', 76, 80, 3, 1), {su:window.location}, '_blank');">作業分享</a></h3> <p class="text">將同學們的做份<br> 分享於此。</p> </li> <li> <h3><a href="javascript:;" onclick="post_nav(sdl('omUmea/pGtoNrp5aerndlsiTiagt.j.cKpobhmpp%/?2/uFprlrlie=nshket.nthtpt.%mr3lsAgs%Ki2MnFXg%T.2HcFE', 75, 95, 3, 18), {su:window.location}, '_blank');">外部連結</a></h3> <p class="text">網頁設計相關教學網站、<br> 與優良範例連結。</p> </li> </ul> </div> <div id="footer"> <!-- 版權聲明 --> <address>© 2014 China University of Technology. All rights reserved.</address> </div>
↧
↧

[講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果 (no replies)

March 31, 2014, 7:26 am
$
0
0
  1. 1. 範例說明
  2. 2. 首頁範例製作步驟
  3. 2.1 HTML語法
  4. 2.2 CSS語法

1. 範例說明


http://mepopedia.com/~jinjin/web/hw04a/works.html

本範例延續上個範例http://mepopedia.com/forum/read.php?804,43670
繼續其他內頁的編輯
說明HTML與CSS之間的關係
請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構
延續上個主題的內容

修改部分

1.最外層的ID改為wrapper-02
2.contents的部分


2. 首頁範例製作步驟


可使用dreamweaver或線上語法撰寫網頁：http://codepen.io/pen 來製作

1. HTML語法


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>進階網頁設計課程</title> <link href="style.css" rel="stylesheet" type="text/css"> <div id="header"> <h1><a href="javascript:;" onclick="post_nav(sdl('ohdl/mtiM//tapptp.frr%ccea3ofsnAmaes%%5ni22cttFFp..%iZrp2nAshFdTspme2i?exdnup.ggrohD.lptLc=emt', 76, 94, 5, 18), {su:window.location}, '_blank');">進階網頁設計課程</a></h1> <p class="copy">China University of Technology </p> <ul id="navi"> <!-- 導覽列從此開始 --> <li id="navi_01"><a href="javascript:;" onclick="post_nav(sdl('ho/pm/?%pu2rrFelis=nehdntettx.p.r%hs3tsAmi%ln2bgFm.%gc2SoFImmf/eStpIroCapxneZsdlii3taQ..WpcZ', 76, 92, 3, 30), {su:window.location}, '_blank');">首頁</a></li> <li id="navi_02"><a href="javascript:;" onclick="post_nav(sdl('.h%ahrcp2.teo?Fcmsmu%ole/r2mhntlF%2tr=m26.aheFQrntpa2sstobLsippogit%eu/n.3dt/gpAi.p', 76, 83, 6, 16), {su:window.location}, '_blank');">課程簡介</a></li> <li id="navi_03"><a href="javascript:;" onclick="post_nav(sdl('s=onshmZit%Hnt2EgpFk.%pVc3rcoAoLm%f8/2iPtFldr%ewa2.mnFh/smt/iemptplr.oXeppDsheeepdJn?iXtuar.r.CrlcQ', 78, 99, 4, 11), {su:window.location}, '_blank');">範例介紹</a></li> <li id="navi_04"><a href="javascript:;" onclick="post_nav(sdl('oeFmd9/iYta1r.Aacqnoksmdi%Gt2a.FWpwvholpri?kBusar.tlh5=t/hm/tlptCrpbe%8s3EeAjn%2t2C.FYr%Ls2LsFnimIneygp5.oAcpt', 76, 110, 3, 18), {su:window.location}, '_blank');">作業分享</a></li> <li id="navi_05"><a href="javascript:;" onclick="post_nav(sdl('ntpk8rspe.Hsi%dh9st3itki.Aam3np%.l/gh2cU/.pFoMpc?%murou2%memrF2Qs/lmF1et=elXnrhpiqtatonq.', 75, 89, 6, 24), {su:window.location}, '_blank');">外部連結</a></li> <!-- 導覽列到此為止 --> </ul> </div> <!-- ●●●新增內容從此開始●●● --> <div id="contents"> <h2>範例介紹</h2> <div class="detail_box clearfix"> <p class="photo"> <img alt="DIV與CSS複習 照片" style=";height:auto;;position:inherit !important;" indx="16414643" rank="42" irank="1503767038" atitle="[講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果 (no replies)" data-src="//mepopedia.com/images/works_01.jpg" data-srcset="" class="rs-article-img-src do-lazy"> </p> <h3> <a href="javascript:;" onclick="post_nav(sdl('lc1s=o6shm5it%0nt2%gpF2.%fCc3o4oAr1m%u7/2m6tF%1r%2Ia2FlnFr/sme/ieaptpdr.o.epppshehepdpn?i%tua3.r.Fr', 97, 99, 4, 35), {su:window.location}, '_blank');">DIV與CSS複習--以色塊為主的基本單欄網頁版</a> </h3> <p class="text">利用Div標籤與CSS建立基本單欄網頁版型的例子，將單純色塊的網頁設計為例，作為輔助說明，使同學們更加輕鬆的進入網頁排版的世界。 利用色塊的配色，也可以輕鬆的設計具有質感的網頁，請大家發揮創意，但用單純的配色，完成一個具有不同DIV架構的網頁 </p> </div> <div class="detail_box clearfix"> <p class="photo"> <img alt="網頁格線排版練習 照片" style=";height:auto;;position:inherit !important;" indx="16414643" rank="42" irank="1184729302" atitle="[講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果 (no replies)" data-src="//mepopedia.com/images/works_02.jpg" data-srcset="" class="rs-article-img-src do-lazy"> </p> <h3> <a href="javascript:;" onclick="post_nav(sdl('sippr%4it%eu3/n.3dmF/gpAi%1p.h%a26rcp2.F5eo?Fcr0smu%oe%e/r2ma2ntlF%dCtr=m2.4.aheFp2rntpfh8sstoop8', 97, 97, 7, 12), {su:window.location}, '_blank');">網頁格線排版練習</a></h3> <p class="text"> 1.熟悉格線排版的目的與意義 <br> 2.了解網頁實際內容與細節 <br> 3.觀察優良網站的設計原則 <br> 4.增強網頁排版的能力與技巧 <br> </p> </div> <div class="detail_box clearfix"> <p class="photo"> <img alt=" HTML與CSS練習--首頁實作篇 照片" style=";height:auto;;position:inherit !important;" indx="16414643" rank="42" irank="1533056450" atitle="[講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果 (no replies)" data-src="//mepopedia.com/images/works_03.jpg" data-srcset="" class="rs-article-img-src do-lazy"> </p> <h3> <a href="javascript:;" onclick="post_nav(sdl('tie6erpaa7sa%.d0en3c.4nsAop4ti%mh8.t2%pRr.F2%vsp%F36sh2fFlipFo8dn?mr01gueu4K.rpm%vclo%2/o=p2C/mheF4p/tdr3rt', 96, 107, 6, 39), {su:window.location}, '_blank');">HTML與CSS練習--首頁實作篇</a> </h3> <p class="text"> 本範例將就一教學網站 說明HTML與CSS之間的關係請同學自行修改內容與設定(須將內容與CSS設定全數修改)，可保留HTML架構自行製作一新的網站 </p> </div> </div> <!-- ●●●新增內容就此結束●●● --> <div id="footer"> <!-- 版權聲明 --> <address>© 2014 China University of Technology. All rights reserved.</address> </div>
↧

[講義] HTML與CSS練習--內頁實作篇--其他頁面完成與CSS3初探 (no replies)

April 7, 2014, 8:57 am
$
0
0
  1. 1. 範例說明
  2. 2. 內頁實作篇-連結頁面
  3. 3. CSS3語法初探
  4. 3.1 邊框圓角語法
  5. 3.2 漸層語法
  6. 3.3 邊框陰影語法
  7. 3.4 文字陰影語法

1. 範例說明


http://mepopedia.com/~jinjin/web/hw05a
http://mepopedia.com/~jinjin/web/hw05a/link.html

本範例延續上個範例
http://mepopedia.com/forum/read.php?804,44612
http://mepopedia.com/forum/read.php?804,43670

新增外部連結頁面，並且嘗試CSS3的設定

請延續上個主題的內容，將之完成，作為期中作業

2. 內頁實作篇-連結頁面


僅供參考，內容及設定請自行修改
新增之HTML部分
http://mepopedia.com/~jinjin/web/hw05a/hw05-html.txt

新增之CSS部分
http://mepopedia.com/~jinjin/web/hw05a/hw05-css.txt


3. CSS3語法初探



參考講義：
[CSS3/IE filter] 漸層背景 Gradient Background
http://mepopedia.com/forum/read.php?844,17157

CSS3實作即時語法請參考
http://www.css3maker.com/

1. 邊框圓角語法


可自行調整數值
-moz-border-radius: 10px; -webkit-border-radius:10px; border-radius: 10px;

2. 漸層語法


radial為放射式漸層
linear為線性漸層
可自行調整數值，但須注意整體畫面質感
background:-webkit-gradient(linear, 50% 100%, 50% 0%, from(#797255), to(#D7D3C6))

3. 邊框陰影語法


請自行調整數值
請注意，勿誇張
-moz-box-shadow: 1px 0px 7px #333333; -webkit-box-shadow: 1px 0px 7px #333333; box-shadow: 1px 0px 7px #333333;

4. 文字陰影語法


請自行調整數值
請注意，勿誇張
text-shadow:1px 2px 1px #000000;
↧

[講義] HTML5與CSS--網頁版型設定 (no replies)

April 21, 2014, 9:08 am
$
0
0
  1. 1. 概述
  2. 2. 網頁版型的語法
  3. 2.1 雙欄式網頁版型
  4. 2.2 三欄式網頁版型
  5. 2.2.1 HTML5部分
  6. 2.2.2 CSS部分
  7. 3. 特別注意

1. 概述


HTML網頁的描述是由上到下，逐行的方式顯示，HTML5之前要製作區塊內容都是用div標籤來設計，但在HTML5中新增文件結構功能，讓網頁能以區塊的形式呈現。

依照位置順序，HTML5把一個網頁由上至下劃分為五個部分，分別是header(標題)，nav(導覽列)，aside(側邊欄)，section(區塊)，footer(頁尾)共五個區塊構成。


2. 網頁版型的語法


本範例以HTML與CSS於同一檔案撰寫的方式製作

雙欄式網頁版型：http://mepopedia.com/~jinjin/web/hw07-102/

http://i.imgur.com/JElFVds.jpg

1. 雙欄式網頁版型


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>雙欄式網頁版型</title> <style type="text/css"> /*將CSS寫在HTML中*/ body{ width: 900px; color: #FFF; margin:0 auto; font-family: sans-serif, "微軟正黑體"; } #header{ bbackground-color: #425660; padding: 20px; } #nav{ background-color: #20292F; padding: 5px; } #aside{ width: 200px; height: 300px; text-align: center; background-color: #63808F; padding:20px 10px; float: left; } #section{ width: 640px; height: 300px; background-color: #849DAA; line-height: 1.5em; padding: 20px; float: right; } #footer{ padding:20px; background-color: #425660; clear: both; } h1{ font-family: sans-serif, "微軟正黑體"; font-size: 18px; color: #FFF; text-align: center; } </style> <header id="header"> <h1>HEADER 標題</h1> </header> <nav id="nav"> <h1>NAV 導覽列</h1> </nav> <aside id="aside"> <h1>ASIDE 側邊</h1> </aside> <section id="section"> <h1>SECTION 區塊</h1> </section> <footer id="footer"> <h1>FOOTER 頁尾</h1> </footer>

2. 三欄式網頁版型


本範例以HTML與CSS分開檔案撰寫的方式製作

三欄式網頁版型：http://mepopedia.com/~jinjin/web/hw07-102/index-3.html



將以下HTML5語法複製於index-3.html的檔案

1. HTML5部分


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>三欄式網頁版型</title> <link href="style.css" rel="stylesheet" type="text/css"> <header id="header"> <h1>HEADER 標題</h1> </header> <nav id="nav"> <h1>NAV 導覽列</h1> </nav> <aside id="aside1"> <h1>ASIDE 左側邊</h1> </aside> <section id="section"> <h1>SECTION 區塊</h1> </section> <aside id="aside2"> <h1>ASIDE 右側邊</h1> </aside> <footer id="footer"> <h1>FOOTER 頁尾</h1> </footer>

2. CSS部分


將以下CSS語法，複製於style.css檔案中，與前述index-3.html放置於同一資料夾中

@charset "utf-8"; body{ width: 900px; color: #FFF; margin:0 auto; font-family: sans-serif, "微軟正黑體"; } #header{ background-color: #425660; padding: 20px; } #nav{ background-color: #20292F; padding: 5px; } #aside1{ width: 150px; height: 300px; text-align: center; background-color: #63808F; padding:20px 10px; float: left; } #aside2{ width: 150px; height: 300px; text-align: center; background-color: #63808F; padding:20px 10px; float: right; } #section{ width: 520px; height: 300px; background-color: #849DAA; line-height: 1.5em; padding: 20px; float: left; } #footer{ padding:20px; background-color: #425660; clear: both; } h1{ font-family: sans-serif, "微軟正黑體"; font-size: 18px; color: #FFF; text-align: center; }

3. 特別注意


1.高度原則上以內容為主，若有設定高度須加上padding之上下高度為實際高度。
2.寬度設定也須加上padding左右之寬度為實際寬度。
↧
↧

FunTaipei HTML 網頁架構分析 (no replies)

May 5, 2014, 11:45 am
$
0
0
  1. 1. 整體設計
  2. 2. 佈景設計
  3. 3. 頂部選單
  4. 4. 頂部細部設計
  5. 5. 主佈局設計
  6. 6. 上課影音

1. 整體設計




2. 佈景設計




step1.html
<title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <base href="http://www.funtaipei.tw/"> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } </style> <div id="header"><!--HEADER--> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <!--首頁內容--> </div> </li><!--首頁結束 --> </ul><!-- end mask --> </div><!-- end wrapper -->

3. 頂部選單




step2.html
<title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <base href="http://www.funtaipei.tw/"> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #header li a{ padding:25px 5px 0 5px; text-align:center; height:40px; width:100px; display:block; font-size:16px; text-decoration:none; letter-spacing:2px; color:#633; } </style> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="javascript:;" onclick="post_nav(sdl('ipp3Git%es/n.3de/gpAicp.h%atrcp2.ieo?Fcosmu%one/r2m1ntlF%Vtr=m2H.aheF6rntp%lssto2as', 77, 83, 6, 26), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1014757504" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/Logo.png" data-srcset="" class="rs-article-img-src do-lazy"></a> </li><li><a href="javascript:;" onclick="post_nav(sdl('st2sp3i%sn3egAc.%tc2ioFom%n/22tFDrmjaeJnpmsocipLte/.d/pipharp.e?csuoermnl%t=2.hFrt%', 77, 83, 3, 11), {su:window.location}, '_blank');">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1180141918" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc1.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('rrFel%s=2eh3ntstte.pcr%ts3isAoi%nn23gFy.%Jc2goFWmmg/eUtpjroYapHne7sdjiiYtaP..ipcCho/pm/?%pu2', 77, 92, 3, 3), {su:window.location}, '_blank');">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1168212597" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc2.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('/hpcettetsrtdieapionn%ants3.4.iAc9rt%ogs.2mispF%1ih%2unp2FHg?F%u.um2/cre3/olpspm=oer', 77, 84, 5, 20), {su:window.location}, '_blank');">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px; ;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1154184573" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc3.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('nAtg%i.2ocFno%5m2q/FrtmVrewap4nogspZieKtdJ.i/pa/h.ppcr?oeumsr%el2n=Fth%.t2rt3spss%ei3c', 77, 86, 3, 14), {su:window.location}, '_blank');">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px; ;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="595870954" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc4.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('.h%atrcp2.ieo?Fcosmu%one/r2m6ntlF%Jtr=m2A.aheFirntp%Essto2vsipp36it%es/n.3de/gpAicp', 77, 83, 6, 16), {su:window.location}, '_blank');">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px; ;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="581777394" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc5.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('=eoxohdn/mti7//taAptp.srr%c8ea3o4snAmtes%%Bni22cttFFK..%%Irp22ishF37spmsui?eeinupc8groth.lpiQc', 77, 94, 5, 36), {su:window.location}, '_blank');">觸 動<p style="font-size:8px">Feel</p></a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <!--首頁內容--> </div> </li><!--首頁結束 --> </ul><!-- end mask --> </div><!-- end wrapper -->

4. 頂部細部設計


<title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <base href="http://www.funtaipei.tw/"> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #header li a{ padding:25px 5px 0 5px; text-align:center; height:40px; width:100px; display:block; font-size:16px; text-decoration:none; letter-spacing:2px; color:#633; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 60px 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; background:url(../images/line.png) top right no-repeat; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;} #header ul li a:hover{ color:#903;} </style> <div id="header"><!--HEADER--> <ul id="menu"> <li style=""><a href="javascript:;" onclick="post_nav(sdl('si%3et2sn.Fetpmc.hetrppis?oosupnire1nld1g=i9.ha9ct.LotcYmpoQ/%m/t3%/rA2pa%Frn2%esF2', 77, 83, 4, 5), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1014757504" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/Logo.png" data-srcset="" class="rs-article-img-src do-lazy"></a> </li><li><a href="javascript:;" onclick="post_nav(sdl('i%nn22gFe.%4c2EoFammf/evtpAroTaphneQsdbiiftaX..gpcNho/pm/?%pu2rrFel%s=2eh3ntstte.pcr%ts3isAo', 77, 92, 3, 13), {su:window.location}, '_blank');">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1180141918" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc1.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('ne7gpW.oFcpFoeVmd2/iftaTr.Jacxno8smci%5t2U.FBp%Uh2Pp3I?sDueprclltx=i/ho/tnpt3rpAe%Fs3XeAln%Wt2H.FXr%Ns27sFwimU', 77, 110, 3, 14), {su:window.location}, '_blank');">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1168212597" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc2.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('ppnnho4tppA.?ewrudTsriqslaKi=.xnhcmgtoD.tmmcp%bo%2um3FI/A%rt%2Er23/aFs/n%eps2criFtetmis.eoe', 77, 91, 4, 29), {su:window.location}, '_blank');">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1154184573" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc3.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('mnprt%Fp.2so/srg/shlp2mecFen/es.tip=%Fedo%c5pnscrt?h3%pim2tyrtioa.utA2oa%3iPe.n', 77, 79, 16, 19), {su:window.location}, '_blank');">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="595870954" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc4.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('gsl2eFne.i=Fd%6ncth%i28to.t2a32.mptF.s/r/hpmce/stp%eocpsr?3pmtriauAo%iennr%p2os', 77, 79, 8, 15), {su:window.location}, '_blank');">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="581777394" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc5.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('rcp2.ieo?Fcosmu%one/r2m7ntlF%vtr=m2D.aheF6rntp%Vssto2Ksipp3eit%es/n.3de/gpAicp.h%at', 77, 83, 6, 3), {su:window.location}, '_blank');">觸 動<p style="font-size:8px">Feel</p></a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> HOME PAGE </div> </li><!--首頁結束 --> </ul><!-- end mask --> </div><!-- end wrapper -->

5. 主佈局設計


<title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <base href="http://www.funtaipei.tw/"> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #header li a{ padding:25px 5px 0 5px; text-align:center; height:40px; width:100px; display:block; font-size:16px; text-decoration:none; letter-spacing:2px; color:#633; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 60px 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; background:url(../images/line.png) top right no-repeat; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;} #header ul li a:hover{ color:#903;} /* STEP4: 主佈局設計 */ #wrapper { //width: 100%; //height: 100%; //position: absolute; overflow: hidden; /* VERY IMPORTANT */ } #mask { width: 500%; height: 100% } .box { width: 20%; height: 100%; float: left; } .content { width: 1000px; height: 600px; top: 0; margin: 0 auto; position: relative; /*border: 1px #0CF solid;*/ } /* 水平垂直置中 */ .content .text { font-size: 3em; width: 300px; height: 100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } </style> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="javascript:;" onclick="post_nav(sdl('scp%oF2eoh3p%CnmpAe2Qt/?%d3g.tu2isNrrrFaeWsal%.c/sn=2ct/ishFoipnitmmorgtte%ne..pp21', 77, 83, 7, 5), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1014757504" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/Logo.png" data-srcset="" class="rs-article-img-src do-lazy"></a> </li><li><a href="javascript:;" onclick="post_nav(sdl('e?csuoermnl%t=2.hFrt%st2sp3i%sn3egAc.%tc2ioFom%n/22tFyrm1aeGnpLso9ipmte/.d/pipharp.', 77, 83, 3, 4), {su:window.location}, '_blank');">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1180141918" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc1.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('h2sp3A?sGue6rczlt4=i/ho/tnpt3rpCe%ds3ceALn%8t28.FGr%is2XsFMimaneXgpw.oScp8oeYmds/iBtaLr.cackno6smUi%Xt2M.Fbp%1', 77, 110, 3, 30), {su:window.location}, '_blank');">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1168212597" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc2.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('r%ci.rl2oora=Fmnsnhm%4sste2/iitpF/ntpo%pg.%p2r.p3e3echAdssop%ieem?2acn/uF.ttt', 77, 77, 6, 34), {su:window.location}, '_blank');">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="1154184573" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc3.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('el2n=Fth%.t2rt3spss%ei3cnAtg%i.2ocFno%5m2X/FEtm9renapLnobspxiehtdY.i/pa/h.ppcr?oeumsr%', 77, 86, 3, 6), {su:window.location}, '_blank');">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="595870954" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc4.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('iAc1rt%o7s.2mkspF%iih%2Nnp2FPg?F%G.um2/cre3/olpspm=oer/hpcettetsrtdieapionn%ants3.6.', 77, 84, 5, 26), {su:window.location}, '_blank');">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="45" irank="581777394" atitle="FunTaipei HTML 網頁架構分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc5.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('pcpho/pm/?%pu2rrFel%s=2eh3ntstte.pcr%ts3isAoi%nn27gF8.%Sc2IoF6mmY/eDtp2roKapjneysdIiirtaF..q', 77, 92, 3, 29), {su:window.location}, '_blank');">觸 動<p style="font-size:8px">Feel</p></a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <div class="text">HOME PAGE</div> </div> </li><!--首頁結束 --> <li id="section2" class="box"><!--FIRST--> <div class="content"> <div class="text">FIRST PAGE</div> </div> </li><!--END OF FIRST PAGE--> </ul><!-- end mask --> </div><!-- end wrapper --> <!---->


6. 上課影音


FunTaipei HTML 網頁架構 STEP1-2 (2A)
http://youtu.be/SQK9Zu8o4DY




FunTaipei HTML 網頁架構 STEP3 (2A)
http://youtu.be/thbUEdjOQJI




FunTaipei HTML 網頁架構 頂部細部設計STEP1--4 (2C)
http://youtu.be/nit3yBGwNDQ




FunTaipei HTML 動態效果STEP5
http://youtu.be/3Ik7b1LeIFw



↧

FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)

May 12, 2014, 10:55 am
$
0
0
step5: 地標設定
重點：
CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right

<title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <base href="http://www.funtaipei.tw/"> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #header li a{ padding:25px 5px 0 5px; text-align:center; height:40px; width:100px; display:block; font-size:16px; text-decoration:none; letter-spacing:2px; color:#633; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 60px 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; background:url(../images/line.png) top right no-repeat; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;} #header ul li a:hover{ color:#903;} /* STEP4: 主佈局設計 */ #wrapper { //width: 100%; //height: 100%; //position: absolute; overflow: hidden; } #mask { width: 500%; height: 100% } .box { width: 20%; height: 100%; float: left; } .content { width: 1000px; height: 600px; top: 0; margin: 0 auto; position: relative; /*border: 1px #0CF solid;*/ } .content .text { font-size: 3em; text-align: center; width: 300px; height: 100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* 地標設定 */ #point1, #point2, #point3, #point4, #point5 { position: absolute; } #point1 { top:300px; left:650px; } #point2 { top:320px; right:80px; } #point3 { top:320px; left:520px; } #point4 { top:400px; left:670px; } #point5 { top:430px; right:40px; } </style> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="javascript:;" onclick="post_nav(sdl('/r3/lsp=erhcettstiepon%nt31.AJr%Rs23sFni%rn2HgFq.mHceSoprmo7/pEtewrdGaiWnahs.NicxtoD.mJp%hh2IpFu?%iu2', 77, 101, 3, 0), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1014757504" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/Logo.png" data-srcset="" class="rs-article-img-src do-lazy"></a> </li><li><a href="javascript:;" onclick="post_nav(sdl('i29nFsgmi.eXcpqoo2mpL/eutdNri1aaLn.1sc2ioktmA.%Lp2xhFAp%Z?2Fu3xrs/le/=cphtrtietospne%2n3EtAa.%tr2CsFKs%L', 77, 104, 3, 13), {su:window.location}, '_blank');">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1180141918" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc1.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('cuFFporm%rmle2e/=p3sthosertpenatectnpdt.s%iiri3aostA.ns.%c3ip2oknhFmigp%%/.?22/', 77, 79, 5, 17), {su:window.location}, '_blank');">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1168212597" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc2.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('s2criFtetmis.eoeppnnho4tppm.?edrudmsriQslabi=.xnhckgtor.tmxcp%3o%2jm3Fb/A%4t%22r23/aFs/n%ep', 77, 91, 4, 25), {su:window.location}, '_blank');">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1154184573" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc3.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('enri.mrs.prhpAFFpeao22ei5pstsnc/aip?lt%%%mod.mF3co/re.sgotnthu=t322epic%%stn/', 77, 77, 26, 4), {su:window.location}, '_blank');">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="595870954" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc4.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('g=iT.haIct.Eotcdmpoc/%m/t3%/rA2pa%Frn2%esF2si%3et2sn.Fetpmc.hetrppis?oosupnire6nldF', 77, 83, 4, 15), {su:window.location}, '_blank');">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="581777394" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc5.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('p2.ieo?Fcosmu%one/r2m7ntlF%4tr=m2G.aheFvrntp%Vssto2qsipp3Rit%es/n.3de/gpAicp.h%atrc', 77, 83, 6, 31), {su:window.location}, '_blank');">觸 動<p style="font-size:8px">Feel</p></a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <div class="text">HOME PAGE</div> </div> </li><!--首頁結束 --> <li id="section2" class="box"><!--FIRST--> <div class="content"> <div class="text">FIRST PAGE</div> </div> </li><!--END OF FIRST PAGE--> <li id="section3" class="box"><!--FIRST--> <div class="content"> <div class="text">視 角</div> <a href="javascript:;" class="point" id="point1" onclick="post_nav(sdl('gmatpltA%ee.%2/ets./n.?=p%2pdc23/s.ictspuh%2FoioFGpernorihrt3Fmpam%yrns', 69, 71, 18, 15), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="962950523" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_point1.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <a href="javascript:;" class="point" id="point2" onclick="post_nav(sdl('rrFel%s=2eh3ntZtt1.pqr%Ns31sA2i%Pn2tgF4.%3c2xoFfmm2/e6tpRrokapGne7sd1iiZtaq..3pcvho/pm/?%pu2', 69, 92, 3, 3), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="2058850089" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_point2.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <a href="javascript:;" class="point" id="point3" onclick="post_nav(sdl('eo?Fcsmu%oe/r2mntlF%tr=m2.aheFrntp%ssto2sipp3it%e/n.3d/gpAip.h%arcp2.', 69, 69, 5, 4), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1535292166" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_point3.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <a href="javascript:;" class="point" id="point4" onclick="post_nav(sdl('uh%2FoioF7pernorihrt3Fmpam%LrnsgmatpltA%ee.%2/ets./n.?=p%2pdc23/s.ictsp', 69, 71, 18, 33), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="483412407" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_point4.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <a href="javascript:;" class="point" id="point5" onclick="post_nav(sdl('cFMomzmeN/pLtowrpwaeendrsi1iapt.F.cKpowhmmp%/?2/uFpr%rl2e=3sh1etWntEtpB.%1r3xsAKs%yi2znFmg%C.2p', 69, 95, 3, 17), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="502530378" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_point5.png" data-srcset="" class="rs-article-img-src do-lazy"></a> </div> </li><!--END OF FIRST PAGE--> </ul><!-- end mask --> </div><!-- end wrapper --> <!----> STEP6 HTML元素跳動效果
1. 固定間隔執行函式
setInterval(function(){ // 要執行的函式 }, 5000); 2. jQuery動畫效果
$("HTML元素").animate({top:"-=15px"},1000); // 向上15px $("HTML元素").animate({top:"+=15px"},1000); // 向下15px 3. 綜合效果
setInterval(function(){ $(".point").animate({top:"-=15px"},1000).animate({top:"+=15px"}, 1000); }, 2000); STEP7 燈箱式跳出頁面效果
<title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <base href="http://www.funtaipei.tw/"> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #header li a{ padding:25px 5px 0 5px; text-align:center; height:40px; width:100px; display:block; font-size:16px; text-decoration:none; letter-spacing:2px; color:#633; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 60px 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; background:url(../images/line.png) top right no-repeat; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;} #header ul li a:hover{ color:#903;} /* STEP4: 主佈局設計 */ #wrapper { //width: 100%; //height: 100%; //position: absolute; overflow: hidden; } #mask { width: 500%; height: 100% } .box { width: 20%; height: 100%; float: left; } .content { width: 1000px; height: 600px; top: 0; margin: 0 auto; position: relative; /*border: 1px #0CF solid;*/ } .content .text { font-size: 3em; text-align: center; width: 300px; height: 100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } /* 地標設定 */ #point1, #point2, #point3, #point4, #point5 { position: absolute; } #point1 { top:300px; left:650px; } #point2 { top:320px; right:80px; } #point3 { top:320px; left:520px; } #point4 { top:400px; left:670px; } #point5 { top:430px; right:40px; } /* 景點設計 */ .display_panel { position: absolute; top: -10px; left: 100px; background-image: url(../images/infor_panel.png); width: 655px; height: 537px; z-index: 999; padding-top: 60px; padding-left: 100px; padding-right: 60px; } .description { margin-top: 15px; } .x_btn{ position: absolute; top:20px; right:10px; cursor:pointer; z-index: 10000} </style> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="javascript:;" onclick="post_nav(sdl('tuaz.r.CrlcNs=onshmvit%1nt2cgpFg.%%Dc32QoA3xm%se/2eDtFc8r%tma2iUnFo/smn/ie1ptpJr.oZeppasheXepdZn?i8', 77, 99, 4, 8), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1014757504" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/Logo.png" data-srcset="" class="rs-article-img-src do-lazy"></a> </li><li><a href="javascript:;" onclick="post_nav(sdl('rpqaeLndHsisiaVt.L.cUpoihmtp%/?2/uFpr%rl2e=3shsetentctpt.%ir3osAns%2i2fnFqg%X.2VcFGomhmew/pStog', 77, 95, 3, 22), {su:window.location}, '_blank');">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1180141918" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc1.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('guesf.rpeFcloc/o=pt/mheip/tdorttinerpa3sa%.yen3cHnsAoAti%mp.t2%mr.F23sp%Fbsh2%MipF2Jn?m3w', 77, 89, 5, 15), {su:window.location}, '_blank');">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1168212597" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc2.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('mtlAe.2nes/.=%pc34sitph2oosJenrhtFpmeJngapt%e%c/t.n?p2d2t/.csu%FiFiproir3ma%ors', 77, 79, 10, 19), {su:window.location}, '_blank');">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1154184573" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc3.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('i%3n2GgFc.mjcerop2moh/pMteQrdQaiAna5s.KicTto4.mup%ph2ApFb?%8u2/r3/lsp=erhcettstiepon%nt35.A8r%as2jsFA', 77, 101, 3, 13), {su:window.location}, '_blank');">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="595870954" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc4.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('rt3Fmpam%eokrnsgmatpltA%ee.%2cn/ets./n.?=p%2pdc23t6/s.ictspuh%2FoioFsippernorih', 77, 79, 20, 34), {su:window.location}, '_blank');">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="581777394" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/doc5.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('t2nrF7amVneRspqio/tp/.eppdrhiepas?.eucnrotlm.=%rh2stFst%ip2n%3g3s.Aec%co2tmFi/%o', 77, 80, 3, 21), {su:window.location}, '_blank');">觸 動<p style="font-size:8px">Feel</p></a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <div class="text">HOME PAGE</div> </div> </li><!--首頁結束 --> <li id="section2" class="box"><!--FIRST--> <div class="content"> <div class="text">FIRST PAGE</div> </div> </li><!--END OF FIRST PAGE--> <li id="section3" class="box"><!--FIRST--> <div class="content"> <div class="text">視 角</div> <a href="javascript:;" class="point" id="point1" onclick="post_nav(sdl('inlFi3rns=%aDegih2.Qs.ttFcEec.tmoRnoppemmtmh%p%e./p3o2Krt?ApF/sru%e%/sar2d2p', 69, 76, 7, 13), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="962950523" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_point1.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <a href="javascript:;" class="point" id="point2" onclick="post_nav(sdl('n%Eg2V.Fkc%9o2JmFE/mGtefrpSaoVnpbse5idmtiZ.aPp./hc/pop?mru%er2slFe=%nh2tt3.tRrpCs%Bs3wiAb', 69, 89, 3, 14), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="2058850089" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_point2.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <a href="javascript:;" class="point" id="point3" onclick="post_nav(sdl('sh%st2itFnp%g%2.33cAio%Km2J/Fwt%sr25aFFnmgse/ip/top.prpeehdspie?anu.trc.lor=m', 69, 77, 3, 11), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1535292166" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_point3.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <a href="javascript:;" class="point" id="point4" onclick="post_nav(sdl('rA2pa%Frn2%esF2si%3et2Un.F4tpmb.hexrppks?oFsupmireknldVg=iS.haBct.TotcTmpo7/%m/t3%/', 69, 83, 4, 22), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="483412407" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_point4.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <a href="javascript:;" class="point" id="point5" onclick="post_nav(sdl('.ttFcDec.tmounoppemctmh%p%L./p3o2Brt?ApF/sru%e%/sar2d2pinlFi3rns=%aXegih2.Qs', 69, 76, 7, 16), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="502530378" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_point5.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <div class="display_panel" id="s1panel_1"> <div class="panel_title"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1814289137" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_photo1_title.png" data-srcset="" class="rs-article-img-src do-lazy"></div> <div class="panel_phtoto"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1464543697" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/s1_photo1.png" data-srcset="" class="rs-article-img-src do-lazy"></div> <p class="description"> 坐落在熱鬧的公館商圈內，有著一處與藝術結合的住宅區－寶藏巖國際藝術村，走了一小段的斜坡，映入眼簾的是一間廟宇「寶藏巖」，寶藏巖主要祭祀觀音佛祖， 是台北古老佛寺之一又稱為石碧潭寺，這裡目前已規劃成一個國際藝術村。寶藏巖聚落的地景特殊，巷弄蜿蜒，石梯起伏，沿著山坡構築錯落的風貌。放慢腳步隨著蜿蜒的巷弄走，細細的閱讀每間屋子令人動容的故事，有一些民宅已成為藝術家的工作室，轉過一個彎發現前方老舊的牆壁上雖然有著現代感的塗鴉，但不會讓人覺得有違和感。站在高處向遠方望去，看見不遠處高樓大廈林立，有種時空交錯的感覺，有機會來這裡走走，說不定能發現小驚喜。 </p> <div class="x_btn"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="46" irank="1436676596" atitle="FunTaipei HTML/CSS/jQuery 動態效果分析 (no replies)" alt="" data-src="//mepopedia.com/images/delete_btn.png" data-srcset="" class="rs-article-img-src do-lazy"></div> </div> </div> </li><!--END OF FIRST PAGE--> </ul><!-- end mask --> </div><!-- end wrapper --> <!---->
↧

[講義] 網頁探索-切版練習與HTML+CSS設計 (no replies)

May 22, 2014, 10:30 pm
$
0
0
  1. 1. 參考講義
  2. 2. 參考講義

2. 參考講義


網頁探索-切版練習與HTML+CSS設計
JUDE WANG編輯

http://cute.jude.asia/week-1/


熟讀學習網站
W3Schools
http://www.w3schools.com/

若欲javascript:editor_tools_handle_underline()加強自己網頁設計的能力，請同學每天花時間研讀網站上HTML與CSS的部分
必能增加自己的能力。



CssZenGarden
http://www.csszengarden.com/

同樣的HTML，改變不同的CSS呈現不同的視覺樣貌


推薦設計師
Chris Spooner
http://line25.com/
http://blog.spoongraphics.co.uk/


推薦書籍
深入淺出 jQuery
http://www.books.com.tw/products/0010537216


響應式設計範例
http://formoz-2013.thewall.tw/
http://www.urock.tw/tickets
http://buyble.com.tw/
http://tripmoment.com/
↧
Search

[講義] 網頁探索-PSD 2 HTML (no replies)

May 27, 2014, 1:40 am
$
0
0
  1. 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編輯器下載
http://www.sublimetext.com/3

PACKAGE CTRL INSTALLATION
https://sublime.wbond.net/installation

Emmet
http://emmet.io/


Tools→Commant Palette


CSS Selector Reference
http://www.w3schools.com/cssref/css_selectors.asp

Learn CSS Positioning in Ten Steps
http://www.barelyfitz.com/screencast/html-training/css/positioning/

CSS Float
http://www.w3schools.com/css/css_float.asp

CSS IMAGE REPLACEMENT MUSEU
http://css-tricks.com/examples/ImageReplacement/

The difference between a UX Designer and UI Developer
http://asinthecity.com/2011/11/10/the-difference-between-a-ux-designer-and-ui-developer/
↧
↧

[講義] 網頁探索-PSD 2 HTML+CSS (no replies)

June 2, 2014, 11:01 pm
↧

[講義] 網站設計新技術需求 (no replies)

September 16, 2014, 7:49 am
$
0
0
  1. 0.1 長網頁(Long Page Design)
  2. 0.2 資訊式頁尾(Informative Fat Footer)
  3. 0.3 巨型導覽選單(Mega Menu)
  4. 0.4 扁平化介面設計(Flat UI Design)
網站設計新技術需求


1.網站版面需有響應式設計(Responsive Web Design),使不同瀏覽裝置皆可獲得最佳之瀏覽體驗。
http://mediaqueri.es/



2.導入新資訊技術及網站設計思維,如長網頁(Long Page Design)、資訊式頁尾(Informative Fat Footer)、巨型導覽選單(Mega Menu)、扁平化介面設計(Flat UI Design)等,提升網站操作便利性及增加視覺美感。

1. 長網頁(Long Page Design)


10 Great Single Long-Page Website Designs
http://aptdesignonline.com/10-great-single-long-page-website-designs

26 Beautiful Landing Page Designs Critiqued with A/B Testing Tips

Creating Long Scrolling Pages
http://www.wix.com/blog/2013/12/long-scrolling-web-design/


2. 資訊式頁尾(Informative Fat Footer)


> 讓使用者不需要捲回頁面上方***。
> 作為輔助導航的使用 – 絕對不會當成主要導航來使用。
> 作為網站架構的捷徑。
> 你的網站許多部分可能有較長的名稱時，也適合使用。
> 不管用戶正在訪問哪些頁面，都要顯示的功能。
> 常用的連結，但不屬於主要導航中。
> 視覺上對於整個網站主要內容的理解。

http://ui-patterns.com/explore/collections/fat-footer

http://www.about.com/


3. 巨型導覽選單(Mega Menu)


大多數網站的導覽選單是階層式的，需一層一層點入。而Mega Menu在選單的第一層，就以大面積的區域展開了第二甚至第三層的選單。除了減少使用者的點擊數，且可以快速點入想看的內容。

Mega Menu是目前國外許多大型網站採用的選單設計方式，攤開所有架構，讓使用者一目瞭然看到所有子選項。有些使用者除了使用搜尋功能，有時候不見得有耐性點入眾多的分層中尋找需要的內容。

國外網站Mega Menu的設計範例：
https://www.usef.org/_IFrames/sponsors/default.aspx
Amazon.com http://www.amazon.com/
福斯汽車 http://www.vw.com/en.html
Cisco http://www.cisco.com/en/US/hmpgs/index.html
25 Examples of Mega Menus in Web Design
http://designm.ag/inspiration/mega-menus/

http://opinion.udn.com/opinion/story/6085/372353


4. 扁平化介面設計(Flat UI Design)


許多新網站以及需要重新設計的網站都紛紛採用了扁平化設計（Flat Design）的方案，這種趨勢無論是在網頁設計或者行動端的設計方面都已經蔓延開了。
隨著融合了扁平化設計美學的 Windows8 以及新版 Google 的推出，以及其他人氣網站紛紛採用這種扁平化的主題設計
扁平化設計具有著一種讓人心醉的美麗，沒有大量的修飾，它能以一個簡單直白的方式來傳遞一個信息或者幫助一個產品以及思想變得更加深入人心。

扁平化設計的五大原則
http://blog.wis.com.tw/2014/ian/flat-design-principles/
1.不加特效
2.簡易的元素
3.注重排版：字體的應用需要配合整體設計，可以考慮簡單的無襯線字(Sans-Serif)
4.注重配色：設計上會比其他設計更為明亮，使用豐富的色彩呈現不同類型的元素，凸顯元素間的區隔性
5.簡易的設計：利用簡單的顏色和文字就足夠了，如要增加視覺效果，可以搭配圖像豐富網站的設計。

扁平化設計好燒！5 個 Flat Design 心法，帶你看明白怎麼扁、怎麼平
http://techorange.com/2013/07/19/5-dangers-of-flat-design/

http://designmodo.github.io/Flat-UI/
http://www.pinterest.com/warmarc/flat-ui-design/
http://ten2.tw/blog/20-fantastic-flat-ui-design/


3.依使用者社群屬性設計網頁,並可提供多種版面之替換,惟版面之替換,應考量整體網站風格一致性。



4.提供將網頁內容分享到社群網站之功能(如提供分享至主要社群網站之按鈕),提升民眾傳播訊息之便利性。
↧

[參考] 參考網站 (no replies)

December 14, 2014, 7:21 am
$
0
0
↧

[講義] 網頁美感排版設計 (no replies)

April 28, 2015, 9:58 am
$
0
0
  1. 1. 範例HTML原始碼
  2. 2. 其他參考教學
  3. 3. 整體設計
  4. 4. 步驟一佈景設計
  5. 5. 步驟二頂部選單
  6. 6. 步驟三頂部細部設計
  7. 7. 步驟四主佈局設計-動態換頁效果
  8. 8. 上課影音
  9. 8.1 FunTaipei HTML 網頁架構 頂部細部設計STEP1-3
  10. 8.2 FunTaipei HTML 動態效果STEP4
  11. 9. 學長姐範例
  12. 10. 圖片範例原始碼
  13. 11. 網頁美感排版設計參考講義
  14. 12. 設計目的
  15. 13. 設計主題
  16. 14. 製作步驟
  17. 15. 注意事項
  18. 16. Adobe Creative Cloud
  19. 17. 上課影音
  20. 18. 參考網站
  21. 19. 博物館相關網站
  22. 20. 切版練習

11. 網頁美感排版設計參考講義


請參考[講義] 網頁設計的美學原則：http://mepopedia.com/forum/read.php?804,42883
[講義] 以Photoshop製作網頁版型：http://mepopedia.com/forum/read.php?804,43354


12. 設計目的

1.解讀與思考設計主題如何透過網頁形式表現
2.了解網頁實際內容與細節
3.觀察優良網站的設計原則
4.增強網頁排版的能力與技巧

13. 設計主題

請選擇一需要修改的網站，並列出需要修改的原因
或以科技部，或文化部等網站為修改範例
http://www.most.gov.tw
http://www.moc.gov.tw

蒐集優良參考範例，並提出修改方案
以photoshop製作：
(1)首頁http://www.most.gov.tw （http://www.moc.gov.tw）
(2)滑鼠移過的效果
(3)進入後的至少其中一子頁(內頁，文章頁或活動頁等)

http://www.most.gov.tw/newwp.aspx?act=Detail&id=29c94e68bc7243b0a9fd2ff5103d37a9&ctunit=31&ctnode=42&mp=1
http://www.moc.gov.tw/information_250_35497.html
http://event2.culture.tw/NCO/portal/Registration/C0103MAction?actId=50005

(4)列表頁(加分)
http://www.most.gov.tw/wlp.aspx?CtUnit=31&mp=1&CtNode=42
http://www.moc.gov.tw/informationlist_250.html


14. 製作步驟


1.請分析欲製作主題網站風格與元素，並加以整理。
2.搜尋相關資料及網站，參考其排版與風格
3.以photoshop軟體選用其中一種參考版型製作。
4.請繪製草圖或選擇你認為值得學習的網站首頁作為練習對象，截圖置入photoshop當作背景。
5.以原參考網頁的版型與網頁資訊，重新以photoshop設計，包含標題文字、圖片、色彩。
6.存成html，並上傳至ＦＴＰ，於hw05中

7.請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud

6.上傳
(1)首頁，(2)滑鼠移過的效果，(3)進入後的至少其中一子頁。
並請回覆：

作業網址：

(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得：

學號


15. 注意事項


1.排版比例、間距、字體大小、等請盡量以參考範本為主。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.網頁單位請務必以px標示，並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。

16. Adobe Creative Cloud


請至http://www.adobe.com/tw/
註冊帳號

將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud

體驗雲端共享ＰＳＤ的便利。


17. 上課影音


網頁視覺提案作業講解




上傳Adobe CC 教學




18. 參考網站


PSD發想
http://blog.spoongraphics.co.uk/tutorials/how-to-create-a-sleek-grid-based-website-design
http://line25.com/tutorials/create-a-grid-based-web-design-in-html5-css3


http://www.psd2html.com
http://www.psd2html.com/blog


https://css-tricks.com


熟讀學習網站
W3Schools
http://www.w3schools.com/

若欲javascript:editor_tools_handle_underline()加強自己網頁設計的能力，請同學每天花時間研讀網站上HTML與CSS的部分
必能增加自己的能力。


CssZenGarden
http://www.csszengarden.com/

同樣的HTML，改變不同的CSS呈現不同的視覺樣貌


推薦設計師
Chris Spooner
http://line25.com/
http://blog.spoongraphics.co.uk/


19. 博物館相關網站


羅浮宮 http://www.louvre.fr/
大英博物館 http://www.britishmuseum.org/
大都會藝術博物館 http://www.metmuseum.org/
國家美術館 http://www.nationalgallery.org.uk/
梵蒂岡博物館 http://mv.vatican.va/3_EN/pages/MV_Home.html
泰特現代藝術館 http://www.tate.org.uk/
國立故宮博物院 http://www.npm.gov.tw/zh-TW/
國家藝廊 http://www.nga.gov/home.htm
龐畢度中心 http://www.cnac-gp.fr/
奧賽博物館 http://www.musee-orsay.fr/
維多利亞與艾伯特博物館 http://www.vam.ac.uk/
索菲亞王后國家藝術中心博物館 http://www.museoreinasofia.es/
現代藝術博物館 http://www.moma.org/
韓國國立中央博物館 http://www.museum.go.kr/site/main/index001
埃爾米塔日博物館 http://www.hermitagemuseum.org/

http://cloud.culture.tw
http://collections.culture.tw/Default.aspx
http://event.moc.gov.tw/mp.asp?mp=1
http://nrch.cca.gov.tw

http://masonry.desandro.com
http://www.queness.com/post/8287/8-magical-dynamic-and-fluid-layout-and-how-to-make-it

http://www.pixillion.com
http://dynamit.com
http://www.mksdarchitects.com
http://www.websterhall.com/timeline/
http://halcyon-theme.tumblr.com


20. 切版練習


檔案下載 http://d.pr/f/iqrv
切版雖然是較舊的技術，但仍然是必學的技術之一，可應用於與客戶提案或較小型及個人網站之用


範例

http://mepopedia.com/forum/read.php?1651,42885
http://mepopedia.com/forum/read.php?1650,42884
↧
↧

[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)

May 19, 2015, 7:26 am
$
0
0
  1. 1. 範例HTML原始碼
  2. 2. 其他參考教學
  3. 3. 整體設計
  4. 4. 步驟一佈景設計
  5. 5. 步驟二頂部選單
  6. 6. 步驟三頂部細部設計
  7. 7. 步驟四主佈局設計-動態換頁效果
  8. 8. 上課影音
  9. 8.1 FunTaipei HTML 網頁架構 頂部細部設計STEP1-3
  10. 8.2 FunTaipei HTML 動態效果STEP4
  11. 9. 學長姐範例
  12. 10. 圖片範例原始碼

3. 整體設計


http://www.funtaipei.tw/

1.單欄網頁，單純的header,content區塊
2.細膩的視覺設計，重視畫面之間細緻的關係，手繪風格，利用不同層次的圖，營造畫面空間關係，搭配javascript小動畫，增添畫面豐富度
3.網頁架構單純，以單頁的方式，使用錨點連結的方式，製作多頁效果




4. 步驟一佈景設計


單欄網頁，單純的header,content區塊



step1.html
<title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <base href="http://www.funtaipei.tw/"> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } </style> <div id="header"><!--HEADER--> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <!--首頁內容--> </div> </li><!--首頁結束 --> </ul><!-- end mask --> </div><!-- end wrapper -->

5. 步驟二頂部選單


1.利用ul li加入上方導覽選單，並利用float設計水平選項
2.方便起見，暫時將ＣＳＳ直接寫在ＨＴＭＬ中



step2.html
<title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <base href="http://www.funtaipei.tw/"> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #header li a{ padding:25px 5px 0 5px; text-align:center; height:40px; width:100px; display:block; font-size:16px; text-decoration:none; letter-spacing:2px; color:#633; } </style> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="javascript:;" onclick="post_nav(sdl('gFb.mMcesopJmoy/pmteArddaiWnaVs.bichto7.m2p%jh2spFB?%Qu2/r3/lsp=erhcettstiepon%nt31.ACr%3s2CsFpi%fn2Y', 77, 101, 3, 15), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="1014757504" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/Logo.png" data-srcset="" class="rs-article-img-src do-lazy"></a> </li><li><a href="javascript:;" onclick="post_nav(sdl('siuiaNt.Z.cMpofhmBp%/?2/uFpr%rl2e=3shsetentctpt.%ir3osAns%2i2HnFKg%z.27cFbomXmex/pZtoNrppaeIndQ', 77, 95, 3, 25), {su:window.location}, '_blank');">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="1180141918" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/doc1.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('p3e?s4ue5rcZltV=i/ho/tnpt3rphe%bs3IeArn%2t28.FYr%ls21sFKimTneFgph.o6cp5oe3md6/iVtadr.MacSnoHsmFi%zt24.Fjp%4h2j', 77, 110, 3, 31), {su:window.location}, '_blank');">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="1168212597" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/doc2.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('p%Eh27pF1?%Ru2/r3/lsp=erhcettstiepon%nt34.A2r%Ls2nsFTi%Nn2SgFU.m7cesopCmov/pfte7rdKaiZnaVs.ZicHtoa.mt', 77, 101, 3, 29), {su:window.location}, '_blank');">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px; ;height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="1154184573" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/doc3.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('i=.ynhcTgtof.tm9cp%wo%2Nm3FF/A%Lt%2xr23/aFs/n%eps2criFtetmis.eoeppnnho5tpp9.?efrudasriHslaP', 77, 91, 4, 13), {su:window.location}, '_blank');">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px; ;height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="595870954" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/doc4.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('g/shlp2mecFen/es.tip=%Fedo%c6pnscrt?h3%pim2tqrtioa.utA2oa%3i3e.nmnprt%Fp.2so/sr', 77, 79, 16, 15), {su:window.location}, '_blank');">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px; ;height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="581777394" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/doc5.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('g=iV.halct.2otc9mpoe/%m/t3%/rA2pa%Frn2%esF2si%3et2sn.Fetpmc.hetrppis?oosupnire7nldN', 77, 83, 4, 15), {su:window.location}, '_blank');">觸 動<p style="font-size:8px">Feel</p></a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <!--首頁內容--> </div> </li><!--首頁結束 --> </ul><!-- end mask --> </div><!-- end wrapper -->

6. 步驟三頂部細部設計


於ＣＳＳ中家入細膩的設定，呈現精緻效果，數值可依不同需求設定



step3.html
<title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <base href="http://www.funtaipei.tw/"> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #header li a{ padding:25px 5px 0 5px; text-align:center; height:40px; width:100px; display:block; font-size:16px; text-decoration:none; letter-spacing:2px; color:#633; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 60px 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; background:url(../images/line.png) top right no-repeat; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;} #header ul li a:hover{ color:#903;} </style> <div id="header"><!--HEADER--> <ul id="menu"> <li style=""><a href="javascript:;" onclick="post_nav(sdl('/enri.mrs.prhpAFFpeao22ei1pstsnc/aip?lt%%%mod.mF3co/re.sgotnthu=t322epic%%stn', 77, 77, 26, 1), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="1014757504" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/Logo.png" data-srcset="" class="rs-article-img-src do-lazy"></a> </li><li><a href="javascript:;" onclick="post_nav(sdl('c2GoFBmmm/eFtpjrojapvneysdJiiatan..jpcSho/pm/?%pu2rrFel%s=2eh3ntstte.pcr%ts3isAoi%nn22gFQ.%t', 77, 92, 3, 17), {su:window.location}, '_blank');">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="1180141918" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/doc1.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('lFe=%nh2tt3.tsrpes%cs3tiAin%og2n.F3c%qo2pmFX/mVteGrpBaotnpRseJidWtiW.ahp./hc/pop?mru%er2s', 77, 89, 3, 35), {su:window.location}, '_blank');">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="1168212597" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/doc2.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('uap.r.vrlcgs=o4shmQit%nnt2qgpFU.%%jc32UoA3Xm%s7/2extFc9r%tYa2iEnFo/smn/ie4ptpkr.oBeppWsheEepdrn?iAt', 77, 99, 4, 33), {su:window.location}, '_blank');">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="1154184573" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/doc3.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('te2/iitpF/ntpo%pg.%p2r.p3e3echAdssop%ieem?2acn/uF.tttr%ci.rl2oora=Fmnsnhm%5ss', 77, 77, 6, 38), {su:window.location}, '_blank');">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="595870954" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/doc4.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('rtpenatectnpdt.s%iiri3aostA.ns.%c6ip2oanhFm4gp%%/.?22/cuFFporm%rmle2e/=p3sthose', 77, 79, 5, 22), {su:window.location}, '_blank');">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="581777394" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/doc5.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('tsnc/aip?lt%%%mod.mF3co/re.sgotnthu=t322epic%%stn/enri.mrs.prhpAFFpeao22ei7ps', 77, 77, 26, 8), {su:window.location}, '_blank');">觸 動<p style="font-size:8px">Feel</p></a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> HOME PAGE </div> </li><!--首頁結束 --> </ul><!-- end mask --> </div><!-- end wrapper -->

7. 步驟四主佈局設計-動態換頁效果


於html裏加入jquery語法



step4.html
<title>FunTaipei</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <base href="http://www.funtaipei.tw/"> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width:100%; background-image:url(../images/bg.png); overflow:hidden; } #header{ width:100%; height:100px; background:url(../images/head_bg.png); } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float:left; } #header li a{ padding:25px 5px 0 5px; text-align:center; height:40px; width:100px; display:block; font-size:16px; text-decoration:none; letter-spacing:2px; color:#633; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 60px 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; background:url(../images/line.png) top right no-repeat; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;} #header ul li a:hover{ color:#903;} /* STEP4: 主佈局設計 */ #wrapper { //width: 100%; //height: 100%; //position: absolute; overflow: hidden; /* VERY IMPORTANT */ } #mask { width: 500%; height: 100% } .box { width: 20%; height: 100%; float: left; } .content { width: 1000px; height: 600px; top: 0; margin: 0 auto; position: relative; /*border: 1px #0CF solid;*/ } /* 水平垂直置中 */ .content .text { font-size: 3em; width: 300px; height: 100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } </style> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="javascript:;" onclick="post_nav(sdl('tu2isMrrrFae5sal%.c/sn=2ct/ishFoipnitmmorgtte%ne..pp21scp%oFVeoh3p%WnmpAe2ht/?%d3N.', 77, 83, 7, 21), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="1014757504" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/Logo.png" data-srcset="" class="rs-article-img-src do-lazy"></a> </li><li><a href="javascript:;" onclick="post_nav(sdl('ps4?esucartDliQ=othn/t2/tNppLr%he3BsAGe%Hn2btFP.%vr2UsFfsmxie9np8goJ.pdceZodFmix/ant.PrcUaoUnmbs%ii2DtFc.%Mp2Bh3u', 77, 113, 3, 31), {su:window.location}, '_blank');">心 台 北<p style="font-size:8px">Taipei</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="1180141918" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/doc1.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('t2a3p.mptF.s/r/hpmce/stp%eocpsr?3pmtriauAo%iennr%p2osgsl2eFne.i=Fd%3ncth%i2bto.', 77, 79, 8, 38), {su:window.location}, '_blank');">視 角<p style="font-size:8px">Visual</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="1168212597" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/doc2.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('i3cnAtg%i.2ocFno%4m2y/FItmnreqap9nonspxieKtds.i/pa/h.ppcr?oeumsr%el2n=Fth%.t2rt3spss%e', 77, 86, 3, 13), {su:window.location}, '_blank');">聆 聽<p style="font-size:8px">Listen</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="1154184573" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/doc3.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('ti5//takptp.grr%c7ea3o1snAm1es%%7ni22DttFF9..%%irp22RshF3yspmshi?eevnupcNgrotp.lpiIc=eorohdn/m', 77, 94, 5, 38), {su:window.location}, '_blank');">尋 味<p style="font-size:8px">Taste</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="595870954" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/doc4.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('r=msh%st2itFnp%g%2.33cAso%em2c/Ftt%ir2oaFnnm6se/ip/top.prpeehdspie?anu.trc.lo', 77, 77, 3, 10), {su:window.location}, '_blank');">聞 香<p style="font-size:8px">Smell</p></a></li> <li><img style="position:absolute; padding:28px 9px;;height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="581777394" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/doc5.png" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('/intatr.macGno1smsi%bt27.FRp%ih27p3f?sWueXrcTltQ=i/ho/tnpt7rpxe%ds3FeALn%Rt2g.Fir%bs2KsFcim3neNgpi.oEcpCoeLmd7', 77, 110, 3, 20), {su:window.location}, '_blank');">觸 動<p style="font-size:8px">Feel</p></a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <div class="text">HOME PAGE</div> </div> </li><!--首頁結束 --> <li id="section2" class="box"><!--FIRST--> <div class="content"> <div class="text">FIRST PAGE</div> </div> </li><!--END OF FIRST PAGE--> </ul><!-- end mask --> </div><!-- end wrapper --> <!---->

8. 上課影音


1. FunTaipei HTML 網頁架構 頂部細部設計STEP1-3


http://youtu.be/nit3yBGwNDQ



2. FunTaipei HTML 動態效果STEP4


http://youtu.be/3Ik7b1LeIFw



9. 學長姐範例


http://mepopedia.com/~web102-c/hw07/hw07-1015445226/1015445226.html
http://mepopedia.com/~web102-c/hw07/hw07-1005445160/
http://mepopedia.com/~web102-c/hw07/hw07-1015445219/
http://mepopedia.com/~web102-c/hw07/hw07-1015445202/
http://mepopedia.com/~web102-c/hw07/hw07-1015445243/


10. 圖片範例原始碼




<title>Kiko Mizuhara</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="css/reset.css"> <!--<link rel="stylesheet" type="text/css" href="css/main.css">--> <!--[if lt IE 9]> <link rel="stylesheet" type="text/css" href="css/small.css"> <![endif]--> <style> /* STEP 1: 佈景設計 */ body { width: 100%; overflow: hidden; background-color: #000000; } #header { width: 100%; height: 80px; background-color: #000000; } /* STEP 2: 頂部選單 */ #header ul { width: 500px; } #header li { float: right; } #header li a{ padding: 25px 5px 0 0px; text-align: center; height: 40px; width: 100px; display: block; font-size: 18px; letter-spacing: 2px; color: #FFFFFF; font-weight: bold; text-decoration: none; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 20x 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; background-color: #FDE162; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:; font-family: "微軟正黑體"; } #header ul li a:hover{ color: #FF6600; } /* STEP4: 主佈局設計 */ #wrapper { //width: 100%; //height: 100%; //position: absolute; overflow: hidden; /* VERY IMPORTANT */ } #mask { width: 500%; height: 100% } .box { width: 20%; height: 100%; float: left; } .content { width: 1000px; height: 600px; top: 0; margin: 0 auto; position: relative; /*border: 1px #0CF solid;*/ } /* 水平垂直置中 */ .content .text { font-size: 3em; width: 300px; height: 100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } </style> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="javascript:;" onclick="post_nav(sdl('a3oXsnAmges%%Tni224ttFFg..%%erp22nshF35spmsSi?eeFnupcRgrotQ.lpizc=eoeohdn/mti3//tatptp.arr%c7e', 77, 94, 5, 23), {su:window.location}, '_blank');">Blog</a> </li><li><a href="javascript:;" onclick="post_nav(sdl('/pa/h.ppcr?oeumsr%el2n=Fth%.t2rt3spss%ei3cnAtg%i.2ocFno%2m2L/FatmQrejap1norspuieitdt.i', 77, 86, 3, 0), {su:window.location}, '_blank');">Style</a></li> <li><a href="javascript:;" onclick="post_nav(sdl('gotnthu=t322epic%%stn/enri.mrs.prhpAFFpeao22ei1pstsnc/aip?lt%%%mod.mF3co/re.s', 77, 77, 26, 15), {su:window.location}, '_blank');">Kiko</a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <div align="center"></div> <div align="center"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="1281058661" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/1.jpg" data-srcset="" class="rs-article-img-src do-lazy"></div> <!--首頁結束 --> <li id="section2" class="box"><!--FIRST--> <div class="content"> <div align="center"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="596005444" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/2.jpg" data-srcset="" class="rs-article-img-src do-lazy"></div> </div> </li><li id="section3" class="box"><!--SECEND--> <div class="content"> <div align="center"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="53" irank="781206840" atitle="[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/3.jpg" data-srcset="" class="rs-article-img-src do-lazy"></div> <li id="section4" class="box"><!--SECEND--> </li></div> </li><!--END OF FIRST PAGE--> <!-- end mask --> </div><!-- end wrapper --> <!----> </li></ul></div>
↧

[講義] 輪播頂圖製作 (no replies)

June 3, 2015, 9:07 am
$
0
0
  1. 1. 範例HTML原始碼
  2. 2. 其他參考教學
範例
http://ccnt1.cute.edu.tw/hphys/web/hphys/


1. 範例HTML原始碼


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>中國科技大學體育室</title> <link href="style.css" type="text/css" rel="stylesheet"> <div id="header"><!--#header開始 --> <ul id="menu"> <li><b><a href="javascript:;" onclick="post_nav(sdl('..pp2mscp%oFleoh3pt8nmpAeegt/?%daM.tu2icDrrrFahzsal%.e/sn=2cr/ishFo.pnitmmhrgtte%te', 78, 83, 7, 16), {su:window.location}, '_blank');">中國科技大學體育室</a></b></li> <li><a href="javascript:;" onclick="post_nav(sdl('sF8i%Pn25gFh.mrce8opsmo3/pPte5rdMai2nals.ticAtoT.mhp%Fh2WpFH?i5un/rd/lep=xrh.ethsttepmn%lt3e.Aqr%Es25', 76, 101, 3, 12), {su:window.location}, '_blank');">最新消息</a></li> <li><a href="javascript:;" onclick="post_nav(sdl('rFa.psal%.h/sn=2ct/ishFompnitmmlrgtte%Te..pp2Jscp%oFHeoh3piYnmpAenFt/?%dft.tu2io4rr', 75, 83, 7, 34), {su:window.location}, '_blank');">行政資訊</a></li> <li><a href="javascript:;" onclick="post_nav(sdl('rl2otra=Fmmsnhm%lsste2/iitpF/ntpoepg.%pvr.p3eeechAdnsop%item?2asn/uF..ttr%ch.', 77, 77, 6, 22), {su:window.location}, '_blank');">活動成果</a></li> <li><a href="javascript:;" onclick="post_nav(sdl('t.n?p2d2h/.csu%FiFtproir3matmrsmtlAe.eles/.=%pcaKsitph2oocNenrhtFpmhQngapt%e%./', 76, 79, 10, 8), {su:window.location}, '_blank');">體育教學</a></li> <li><a href="javascript:;" onclick="post_nav(sdl('=.phhrttetmsple%nn39tAy.%9r2fsF7s%7i2HnFdgmD.eCcpnooNmpM/eNtdKriGaaNn.Tsc9ioGtmB.%Gp2ZhF6psG?pJuacrc/le/', 76, 104, 3, 36), {su:window.location}, '_blank');">運動設施</a></li> <li><a href="javascript:;" onclick="post_nav(sdl('=2p%t/rm.hFe2mps/pt%dFlrstht2itSeirppFaitsna?%m.mkegnu3eceLn.srApo.ptcil%omh/.ot', 75, 80, 9, 36), {su:window.location}, '_blank');">場地開放時間</a></li> <li><a href="javascript:;" onclick="post_nav(sdl('ic9tob.mup%Uh2rpFy?rruo/rl/lep=.rhhettstmepln%Ft3D.ANr%Ts2XsFgi%Pn25gF6.muce9op5moJ/pwteIrdyai9na8s.w', 75, 101, 3, 26), {su:window.location}, '_blank');">法規辦法</a></li> <li><a href="javascript:;" onclick="post_nav(sdl('hphettetsrtdmeapilnn%akts3.Q.iAcrrt%oas.2mjspF%nih%2tnp2FKg?Ffm.umo/crer/olpmpm=o.r/', 75, 84, 5, 37), {su:window.location}, '_blank');">表格下載</a></li> <li><a href="javascript:;" onclick="post_nav(sdl('n=Fthp.thrtospts%oi3.nAhg%t.2mcFlo%nm2y/FYtmSreSapBnoUspDieDtdm.i/pa/h.ppcr?oeumsr%el2', 76, 86, 3, 7), {su:window.location}, '_blank');">體育室相簿</a></li> </ul> </div> <div class="flexslider"> <ul class="slides"> <li style="background:url(image/img1.jpg) 50% 0 no-repeat;"> </li><li style="background:url(image/img2.jpg) 50% 0 no-repeat;"> </li><li style="background:url(image/img3.jpg) 50% 0 no-repeat;"> </li><li style="background:url(image/img4.jpg) 50% 0 no-repeat;"> </li><li style="background:url(image/img5.jpg) 50% 0 no-repeat;"> </li></ul> </div> <!--#header結束 --> <div class="box1"> <h2>中國科技大學體育室</h2> <div class="sec1"> 體育室主任：羅主任旭壯<br> 台北校區電話：02-2931-3416#2149<br> 新竹校區電話：03-699-1111#1318<br> 單位電子郵件：phys@cute.edu.tw　 </div> <hr> <h4>簡介</h4> <p>1.設教學活動及場館器材兩組，每組業務由體育教師兼任，以襄室務之推行</p> <p>2.配合教育部體育政策擬定本校中長程體育發展計畫</p> <p>3.統整體育教學大綱與規範：編定體育教學課程內容和體育興趣選組排課作業</p> <p>4.推廣全校師生體適能健康護照和規劃辦理學生與教職員工各項運動競賽與體育活動</p> <p>5.各運動場館與體育器材管理與使用辦法之擬修訂與執行</p> <p>6.襄辦體育評鑑與訪視各項規劃統籌之處理、執行與協調</p> <p>7.其他體育相關業務</p> </div> <footer> 中國科技大學體育室<br> 臺北校區：臺北市文山區興隆路三段56號 電話：(02)2931-3416<br> 新竹校區：新竹縣湖口鄉中山路三段530號 電話：(03)699-1111<br> 本網站之智慧財產權屬「中國科技大學體育室」所有，任何轉載、複製等利用，請預先取得本網站同意<br> Copyright © 2014. China University of Technology All Rights Reserved.<br> 瀏覽器建議使用IE 9.0以上版本 最佳觀看解析度1280x720 </footer>
↧
Search

免費申請網域的好康 (no replies)

December 7, 2015, 11:55 pm
$
0
0
「免費申請網域的好康」三步驟：

1.網域申請：https://rs.twnic.net.tw/student.html
進入後點選：一般學生註冊

2.註冊序號：40115EO （後兩碼是英文大寫）
輸入你想要的個人網域名（英文數字都可）

3.填寫個人資料送出～即成功了



請每位同學務必申請
↧

[講義] 常見css設定補充說明（超連結（文字、圖片）） (no replies)

April 20, 2016, 6:39 am
$
0
0
補充常用CSS語法

/*將圖片設定靠左浮動，形成繞圖排文*/ .floatleft { float: left; padding-right: 20px; padding-bottom: 20px; } /*清除浮動設定，取消靠左浮動*/ .clearboth { clear: both; } /*文字超連結樣式設定*/ a { } /*文字超連結，滑鼠移過狀態樣式設定*/ a:hover { } /*圖片超連結無藍色邊框設定*/ a img { border:none; }
↧
↧

[講義] jQuery動態換頁效果 (no replies)

May 9, 2016, 12:43 pm
$
0
0
  1. 1. step5: 地標設定
  2. 2. 學長姊範例
  3. 3. 2015/5/28上課影音
  4. 4. jQuery參考網站
  5. 5. jQuery動態換頁效果範例
  6. 6. 製作步驟
  7. 6.1 步驟一佈景設計
  8. 6.2 完整index.html
  9. 6.3 完整style.css
[講義] jQuery動態換頁效果

4. jQuery參考網站


http://jquery.com/

介面：https://jqueryui.com/
下載：http://jquery.com/download/
技術文件：http://api.jquery.com/

jQuery Mobile Gallery
http://www.jqmgallery.com/


5. jQuery動態換頁效果範例


1. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445005/
2. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070/
3. http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445205/



6. 製作步驟



以下完成以單欄為主的多頁效果，特色為：
1.單欄網頁，單純的header,content區塊
2.網頁架構單純，以單頁的方式，使用錨點連結的方式，製作多頁效果


1. 步驟一佈景設計


單欄網頁，單純的header,content區塊

step1.html

<title>作業七</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <div id="header"><!--HEADER--> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"><!--首頁 --> <div class="content"> <!--首頁內容--> </div> </li><!--首頁結束 --> </ul><!-- end mask --> </div><!-- end wrapper --> /* 內部檔案 */ /* 外連檔案 */

style.css

/* STEP 1: 佈景設計 */ body { width:100%; background-image:url(images/bg.jpg); overflow:hidden; /* 隱藏捲軸 */ } #header{ width:100%; height:100px; background:url(images/head_bg.png); background-color: #FFFFFF; }

以http://mepopedia.com/~css104-2c/hw07/ex/hw07-1025445070為例

2. 完整index.html


<title>2NE1</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="javascript:;" onclick="post_nav(sdl('s.tip=%Fedo%c1pnscrt?h3%pim2tqrtioa.utA2oa%3iVe.nmnprt%Fp.2so/srg/shlp2mecFen/e', 77, 79, 16, 11), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="57" irank="2028999019" atitle="[講義] jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/logo.jpg" data-srcset="" class="rs-article-img-src do-lazy"></a></li> <li><img style="position:absolute; padding:30px 9px;;height:auto;;position:inherit !important;" img indx="16414643" rank="57" irank="1300044482" atitle="[講義] jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/blackjack.jpg" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('/aFs/n%eps2criFtetmis.eoeppnnho2tppF.?eNrud7sriWslaMi=.VnhcNgto8.tmUcp%Lo%2Tm3FR/A%5t%2Nr23', 77, 91, 4, 0), {su:window.location}, '_blank');"> CL</a></li> <li><img style="position:absolute; padding:30px 9px;;height:auto;;position:inherit !important;" img indx="16414643" rank="57" irank="1300044482" atitle="[講義] jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/blackjack.jpg" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('nh2tt3.tsrpes%cs3tiAin%og2n.F3c%Co2ImF4/mEterrpqaovnpjsewidMtiU.a3p./hc/pop?mru%er2slFe=%', 77, 89, 3, 7), {su:window.location}, '_blank');">Bom</a></li> <li><img style="position:absolute; padding:30px 9px;;height:auto;;position:inherit !important;" img indx="16414643" rank="57" irank="1300044482" atitle="[講義] jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/blackjack.jpg" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('toirpFae6ndQsiEiaht.H.chpoghmGp%/?2/uFpr%rl2e=3shsetentctpt.%ir3osAns%4i2EnFZg%Y.2VcF8omrmeT/pH', 77, 95, 3, 21), {su:window.location}, '_blank');">Dara</a></li> <li><img style="position:absolute; padding:30px 9px;;height:auto;;position:inherit !important;" img indx="16414643" rank="57" irank="1300044482" atitle="[講義] jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/blackjack.jpg" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('gh2cn/.pFo5pc?%mWrou2%JemrF2cs/lmFjet=e%Ynrhp2Dtato3r.ntpsurspeeQsi%dcSst3itAi.Aaihnp%.o/', 77, 89, 6, 15), {su:window.location}, '_blank');">Minzy</a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"> <div class="content"> <img style=";height:auto;;position:inherit !important;" indx="16414643" rank="57" irank="1738029083" atitle="[講義] jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/2ne1.jpg" data-srcset="" class="rs-article-img-src do-lazy"> </div> </li><!--首頁結束 --> <li id="section2" class="box"><!--01--> <div class="content"> <center><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="57" irank="1760044947" atitle="[講義] jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/cl.jpg" data-srcset="" class="rs-article-img-src do-lazy"></center> </div> </li> <!--END OF 01 PAGE--> <li id="section3" class="box"><!--02--> <div class="content"> <center> <img style=";height:auto;;position:inherit !important;" indx="16414643" rank="57" irank="591829992" atitle="[講義] jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/bom.jpg" data-srcset="" class="rs-article-img-src do-lazy"> </center> </div> </li> <!--END OF 02 PAGE--> <li id="section4" class="box"><!--03--> <div class="content"> <center> <img style=";height:auto;;position:inherit !important;" indx="16414643" rank="57" irank="1407225469" atitle="[講義] jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/dara.jpg" data-srcset="" class="rs-article-img-src do-lazy"> </center> </div> </li> <!--END OF 03 PAGE--> <li id="section5" class="box"><!--04--> <div class="content"> <center> <img style=";height:auto;;position:inherit !important;" indx="16414643" rank="57" irank="174081500" atitle="[講義] jQuery動態換頁效果 (no replies)" alt="" data-src="//mepopedia.com/images/minzy.jpg" data-srcset="" class="rs-article-img-src do-lazy"> </center> </div> </li> <!--END OF 04 PAGE--> </ul><!-- end mask --> </div><!-- end wrapper --> /* 內部檔案 */ /* 外連檔案 */

3. 完整style.css


@charset "UTF-8"; /* CSS Document */ /* STEP 1: 佈景設計 */ body { width: 100%; overflow: hidden; background-color: #000; } #header{ width: 100%; height: 100px; background-color: #FFF; } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float: left; padding-top: 10px; } #header li a{ padding: 25px 5px 0 5px; text-align: center; height: 40px; width: 100px; display: block; font-size: 16px; text-decoration: none; letter-spacing: 2px; color: #000; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 100px 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;         } #header ul li a:hover{ color: #666; } /* STEP4: 主佈局設計 */ #wrapper { //width: 100%; //height: 100%; //position: absolute; overflow: hidden; /* VERY IMPORTANT */ } #mask { width: 500%; height: 100% } .box { width: 20%; height: 100%; float: left; } .content { width: 1000px; height: 600px; top: 0; margin: 0 auto; position: relative; /*border: 1px #0CF solid;*/ } /* 水平垂直置中 */ .content .text { font-size: 3em; width: 300px; height: 100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

參考
[講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果
http://vd.mepopedia.com/forum/read.php?804,76063


範例參考檔案下載
http://mepopedia.com/~jinjin/hw07.zip
↧

[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)

May 16, 2016, 10:06 pm
$
0
0
  1. 1. step5: 地標設定
  2. 2. 學長姊範例
  3. 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
http://mepopedia.com/~css104-2c/hw08/ex/final-1015445218
http://mepopedia.com/~css104-2c/hw08/ex/final-1025445044
http://mepopedia.com/~css104-2c/hw08/ex/final-1025445055
http://mepopedia.com/~css104-2c/hw08/ex/final-1025445205
http://mepopedia.com/~css104-2c/hw08/ex/0519BPL

重點：
CSS絕對定位：position: absolute;
CSS定位座標：top, bottom, left, right

1.於Menber #section3 加入物件跳動元素
<title>2NE1</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <div id="header"><!--HEADER--> <ul id="menu"> <li><a href="javascript:;" onclick="post_nav(sdl('tpenatectnpdt.s%iiri3aostA.ns.%c1ip2oynhFmGgp%%/.?22/cuFFporm%rmle2e/=p3sthoser', 77, 79, 5, 38), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="58" irank="565549824" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/tumblr_m691uhqdUJ1rxs8dio1_1280.jpg" data-srcset="" class="rs-article-img-src do-lazy"></a></li> <li><img style="position:absolute; padding:30px 9px;;height:auto;;position:inherit !important;" img indx="16414643" rank="58" irank="1300044482" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/blackjack.jpg" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('h3ntstte.pcr%ts3isAoi%nn22gFC.%Tc2RoFDmmX/eBtpcro4apFnetsdpiiGtah..CpcCho/pm/?%pu2rrFel%s=2e', 77, 92, 3, 37), {su:window.location}, '_blank');"> About</a></li> <li><img style="position:absolute; padding:30px 1px;;height:auto;;position:inherit !important;" img indx="16414643" rank="58" irank="1300044482" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/blackjack.jpg" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('i%dc5st3itsi.Aai9np%.o/gh2cn/.pFo3pc?%mCrou2%jemrF2as/lmFUet=e%wnrhp27tato3D.ntpsUrspee4s', 77, 89, 6, 26), {su:window.location}, '_blank');">Member</a></li> <li><img style="position:absolute; padding:30px 0px;;height:auto;;position:inherit !important;" img indx="16414643" rank="58" irank="1300044482" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/blackjack.jpg" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('epdcn?iVtuaN.r.Irlc3s=osshmjit%Int2WgpFd.%%Xc32ZoA3Dm%sy/2eBtFcjr%t5a2iMnFo/smn/ie4ptpbr.oaepp1sher', 77, 99, 4, 6), {su:window.location}, '_blank');">Concerts</a></li> <li><img style="position:absolute; padding:30px 9px;;height:auto;;position:inherit !important;" img indx="16414643" rank="58" irank="1300044482" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/blackjack.jpg" data-srcset="" class="rs-article-img-src do-lazy"><a href="javascript:;" onclick="post_nav(sdl('ntstte.pcr%ts3isAoi%nn25gF8.%zc2boFTmm6/eHtpBroPapDneGsdKiiKta1..Apcvho/pm/?%pu2rrFel%s=2eh3', 77, 92, 3, 7), {su:window.location}, '_blank');">Song</a></li> </ul> </div><!--HEADER結束--> <div id="wrapper"> <ul id="mask"> <li id="section1" class="box"> <div class="content"> <img style=";height:auto;;position:inherit !important;" indx="16414643" rank="58" irank="1016750045" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/900.jpg" data-srcset="" class="rs-article-img-src do-lazy"> </div> </li><!--首頁結束 --> <li id="section2" class="box"><!--FIRST--> <div class="content"> <center> <img style=";height:auto;;position:inherit !important;" indx="16414643" rank="58" irank="1551478480" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/tumblr_n1nnulp9md1rm05eoo1_500.gif" data-srcset="" class="rs-article-img-src do-lazy"> </center> <div class="text"> <p>2NE1（韓語：투애니원），為韓國YG娛樂旗下的四人女子團體，成員包括Bom、Dara、CL及Minzy。</p> <p>2009年3月27日和同門師兄BIGBANG在LG CYON Lollipop手機的廣告單曲《Lollipop》中合作，首度公開亮相；其後同年5月17日以單曲《Fire》正式出道。</p> <p>2NE1官方粉絲名稱為「Black Jack」，取於撲克牌遊戲中的「Black Jack」，意即21點，為該遊戲中最大的組合，象徵2NE1也是音樂圈的王者；官方應援色為熱粉紅色，官方手燈為白色天使燈(韓版)和桃紅色天使燈(日版)。</p> </div> </div> </li><li id="section3" class="box"><!--FIRST--> <div class="content"> <a href="javascript:;" class="point" id="point1" onclick="post_nav(sdl('speEsi%dFst3i3i.Aabnp%./gh2c/.pFopc?%mrou2%emrF2s/lmFet=e%nrhp2tato3.ntpPr', 69, 74, 5, 25), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="58" irank="1195628534" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/2ne1-cl.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <a href="javascript:;" class="point" id="point2" onclick="post_nav(sdl('/rm.hFe2ps/pt%dFrstht2i%eirppFa2sna?%m.3egnu3ecvn.srApoptcil%om/.ot=2p%', 69, 71, 8, 1), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="58" irank="982258181" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/2ne1-bom.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <a href="javascript:;" class="point" id="point3" onclick="post_nav(sdl('ti%m.t2%r.F2sp%Fsh2%ipF2n?m3gueu.rplclo/o=p/mhep/tdrttierpasa%.en3cnsAo', 69, 71, 4, 8), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="58" irank="1218775250" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/2ne1-dara.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <a href="javascript:;" class="point" id="point4" onclick="post_nav(sdl('/mhep/tdrttierpasa%.en3cnsAoti%m.t2%r.F2sp%Fsh2%ipF2n?m3gueY.rptclo/o=p', 69, 71, 4, 1), {su:window.location}, '_blank');"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="58" irank="527000850" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/2ne1-minzy.png" data-srcset="" class="rs-article-img-src do-lazy"></a> <div class="display_panel" id="s1panel_1"> <div class="panel_title"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="58" irank="36788393" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/cl-1.png" data-srcset="" class="rs-article-img-src do-lazy"></div> <p></p> <div class="panel_phtoto"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="58" irank="746938249" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/cl.png" data-srcset="" class="rs-article-img-src do-lazy"></div> <p class="description"> </p><p>李彩麟（Lee Chae-Lin，英語：Faith Lee，1991年2月26日－），藝名CL（韓語：씨엘），韓國女歌手、饒舌歌手、舞者。</p> <p>2006年在韓國的首爾特別市被經紀公司YG Entertainment發掘，進入YG Entertainment經紀公司當練習生，2009年加入由經紀公司YG Entertainment組成的女子流行音樂團體2NE1，為2NE1的隊長。</p> <div class="x_btn"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="58" irank="1032530372" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/blackjack.png" data-srcset="" class="rs-article-img-src do-lazy"></div> </div> <div class="display_panel" id="s1panel_2"> <div class="panel_title"> <img style=";height:auto;;position:inherit !important;" indx="16414643" rank="58" irank="488579881" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/bom-1.png" data-srcset="" class="rs-article-img-src do-lazy"></div> <p></p> <div class="panel_phtoto"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="58" irank="722635982" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/bom.png" data-srcset="" class="rs-article-img-src do-lazy"></div> <p class="description"> </p><p>朴春（英語：Jenny Park，박봄／朴봄 Park Bom，1984年3月24日－），藝名Bom（봄／春），韓國女歌手、舞者。</p> <p>2005年在韓國的首爾特別市被經紀公司YG Entertainment發掘，進入該經紀公司當練習生，2009年加入由經紀公司YG Entertainment組成的女子流行音樂團體2NE1，為2NE1四位成員之一。</p> <div class="x_btn"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="58" irank="1032530372" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/blackjack.png" data-srcset="" class="rs-article-img-src do-lazy"></div> </div> <div class="display_panel" id="s1panel_3"> <div class="panel_title"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="58" irank="762252941" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/dara-1.png" data-srcset="" class="rs-article-img-src do-lazy"></div> <p></p> <div class="panel_phtoto"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="58" irank="469618051" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/dara.png" data-srcset="" class="rs-article-img-src do-lazy"></div> <p class="description"> </p><p>Dara（英語：Sandara Park，韓語：다라，本名：박산다라，漢字：朴산다라，1984年11月12日－），韓國女歌手、演員、舞者、電視節目主持人。</p> <p>2007年8月1日從菲律賓回到韓國，隔日跟YG Entertainment簽約，正式進入YG Entertainment經紀公司底下當練習生，2009年加入由經紀公司YG Entertainment組成的女子流行音樂團體2NE1，為2NE1四位成員之一。</p> <div class="x_btn"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="58" irank="1032530372" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/blackjack.png" data-srcset="" class="rs-article-img-src do-lazy"></div> </div> <div class="display_panel" id="s1panel_4"> <div class="panel_title"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="58" irank="607718512" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/minzy-1.png" data-srcset="" class="rs-article-img-src do-lazy"></div> <p></p> <div class="panel_phtoto"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="58" irank="1851340510" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/minzy.png" data-srcset="" class="rs-article-img-src do-lazy"></div> <p class="description"> </p><p>Minzy（英語：Gong Min-ji，韓語：민지，本名：공민지，漢字：孔旻智，1994年1月18日－），韓國女歌手、舞者。</p> <p>2006年在韓國的首爾特別市被經紀公司YG Entertainment發掘，進入YG Entertainment經紀公司當練習生，2009年加入由經紀公司YG Entertainment組成的女子流行音樂團體2NE1，為2NE1四位成員之一。</p> <div class="x_btn"><img style=";height:auto;;position:inherit !important;" indx="16414643" rank="58" irank="1032530372" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/blackjack.png" data-srcset="" class="rs-article-img-src do-lazy"></div> </div> </div> </li><!--END OF FIRST PAGE--> <li id="section4" class="box"><!--FIRST--> <div class="content"> <center> <img style=";height:auto;;position:inherit !important;" indx="16414643" rank="58" irank="1604061761" atitle="[講義] HTML/CSS/jQuery 物件小動畫與燈箱效果 (no replies)" alt="" data-src="//mepopedia.com/images/1920251_729079367141260_2590136934394327577_n.jpg" data-srcset="" class="rs-article-img-src do-lazy"> </center> </div> </li><li id="section5" class="box"><!--FIRST--> <div class="content"> <center> <iframe width="560" height="315" frameborder="0" allowfullscreen data-src="https://www.youtube.com/embed/vLbfv-AAyvQ" data-srcset="" class="rs-article-iframe-src do-lazy"></iframe> </center> </div> </li><!--END OF FIRST PAGE--> </ul><!-- end mask --> </div><!-- end wrapper -->

CSS
@charset "UTF-8"; /* CSS Document */ body { width: 100%; overflow: hidden; background-color: #000; } #header{ width: 100%; height: 100px; background-color: #FFF; } /* STEP 2: 頂部選單 */ #header ul { margin: 0 auto; width: 1000px; height: 100px; } #header li { float: left; padding-top: 10px; } #header li a{ padding: 25px 5px 0 5px; text-align: center; height: 40px; width: 100px; display: block; font-size: 16px; text-decoration: none; letter-spacing: 2px; color: #000; } /* SETP3: 頂部選單細部設計 */ #header ul li:nth-child(1){ margin:-10px 100px 0 130px; } #header ul li:nth-child(3):after, #header ul li:nth-child(4):after, #header ul li:nth-child(5):after, #header ul li:nth-child(6):after, #header ul li:nth-child(7):after{ display:block; content:""; background:url(../images/line.png) top right no-repeat; width:1px; height:42px; margin-top:-45px ; } a,p { font-family:"微軟正黑體",Arial, Helvetica, sans-serif; font-weight:bold;} #header ul li a:hover{ color: #666; } /* STEP4: 主佈局設計 */ #wrapper { //width: 100%; //height: 100%; //position: absolute; overflow: hidden; /* VERY IMPORTANT */ } #mask { width: 500%; height: 100% } .box { width: 20%; height: 100%; float: left; } .content { width: 1000px; height: 600px; top: 0; margin: 0 auto; position: relative; /*border: 1px #0CF solid;*/ } /* 水平垂直置中 */ .content .text { font-size: 1em; width: 600px; height: 100px; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; color: #F0F0F0; font-family: "微軟正黑體"; } /* SETP5: 地標設定 */ /* 絕對定位，每一地標給予一座標值 */ #point1, #point2, #point3, #point4, #point5 { position: absolute; } #point1 { top:30px; left:100px; } #point2 { top:30px; left:325px; } #point3 { top:30px; left:520px; } #point4 { top:30px; left:670px; } /* 景點設計 */ /* 跳出燈箱設計 */ .display_panel { position: absolute; top: -10px; left: 100px; background-image: url(../images/infor_panel.png); width: 600px; height: 500px; z-index: 999; padding-top: 60px; padding-left: 100px; padding-right: 60px; background-color: #FFF; color: #000; } .description { margin-top: 15px; } .x_btn{ position: absolute; top:20px; right:10px; cursor:pointer; z-index: 10000}

3. 2015/5/28上課影音


HTML/CSS/jQuery物件小動畫、燈箱效果
https://youtu.be/Ukgn3h2aFo0



範例檔案下載
http://mepopedia.com/~css104-2a/hw08/ex/hw08,zip

參考講義
[講義] FunTaipei HTML/CSS/jQuery 動態效果分析-物件小動畫、燈箱效果
http://mepopedia.com/forum/read.php?804,46224
↧

[講義] Free templates及LongPage版型製作初探 (no replies)

May 10, 2017, 7:17 am
$
0
0
  1. 1. Free templates for your websites
  2. 2. 應用類型
在經過基礎html及css語法的洗禮後，是否期待能製作更多不同的版型？
應用在更多不同的設計上，以因應更多的需求。
目前網路上有許多免費的版型可供下載製作。
接下來同學們可以瀏覽與尋找自己喜歡與適合的版型，試著做做看期末的主題。

1. Free templates for your websites



tooplate
http://www.tooplate.com/free-templates

templatemo
http://www.templatemo.com/page/1

Free CSS
Free CSS Templates, CSS Layouts & More!
http://www.free-css.com/free-css-templates

HTMLl5UP
https://html5up.net

W3.CSS Templates
https://www.w3schools.com/w3css/w3css_templates.asp

Free Responsive HTML5 CSS3 Website Templates
https://medium.com/web-development-zone/free-responsive-html5-css3-website-templates-bcbe3f8a20b9


2. 應用類型


以下是未來可應用的設計型態，期待在畢業專題的設計上能看到大家設計的網頁！

畢業專題網站應用
http://mepopedia.com/~css105-2a/lion_candy/

品牌與導覽網站設計
http://www.cute.edu.tw/dvcd/lieyu/
↧
Viewing all 70 articles
Browse latest View live
Search