Tugas Pertemuan 14 (Responsive)

Tugas Pertemuan 14 Merancang Responsive WEB HTML5 http://www.onlywebpro.com/2013/03/18/design-your-own-responsive-web-template/ Dalam pertemuan ini a an dirancang !
"# yang dapat merespons user$ misalnya pada gambar di bawah:
#anya Device yang diguna an oleh pengguna untu mem-browsing internet dengan u uran layer yang macam-macam$ seperti gambar bawah:
#eri ut adalah lang ah untu membuat responsive !"#
WEB Design
Step 1: The HTML Strucutre

%ere is the %&'( structure )or the responsive website. *n this e+ample$ we have a basic %&'(, page layout with a header$ page content container$ sidebar and a )ooter.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text html! cha"#et=ut$-%" > <title>&T'() *e#pon#ive Demo +e, De#i-n . only+e,P"o/com< title> < head> <,ody> <div id="#ite01"appe""> <heade" id="heade""> <h-"oup> <h2>Demo3 &T'() *e#pon#ive +e, De#i-n . only+e,P"o/com< h2> <h4>5 ,lo- $o" 1e, de#i-ne"# 6amp! 1e, develope"#< h4> < h-"oup> <nav id="main0nav"> <ul> <li cla##="cu""ent"><a h"e$="http3 111/only1e,p"o/com cate-o"y html)-#ho1ca#e ">&T'() 7ho1ca#e< a>< li> <li><a h"e$="http3 111/only1e,p"o/com cate-o"y tuto"ial# html-c## ">&T'( 6amp! C77 Tuto"ial< a>< li>
WEB Design
<li><a h"e$="http3 111/only1e,p"o/com cate-o"y tuto"ial# c"ipt Tuto"ial< a>< li> <li><a h"e$="http3 111/only1e,p"o/com cate-o"y tuto"ial# content ">'o,ile Content Tuto"ial< a>< li> <li><a h"e$="http3 111/only1e,p"o/com cate-o"y tuto"ial# Tuto"ial< a>< li> <li><a h"e$="http3 111/only1e,p"o/com cate-o"y tuto"ial# optimi:ation ">7EO Tuto"ial< a>< li> < ul> < nav> < heade">
8ava#c"ipt ">9ava7 mo,ilephp ">P&P #ea"ch-en-ine-
<#ection id="pa-e0content"> <a"ticle> <heade"> <h<>&T'() *e#pon#ive +e, De#i-n Tuto"ial< h<> <p>;o1aday#= u#e"# no lon-e" 8u#t ,"o1#e 1e, on thei" de#>top/ ?#e"# no1 u#e mo,ile device# #uch a# iPhone= iPad o" 7am#un@alaxy Ta, to vie1 the 1e,#ite/ 7o a# a 1e, de#i-ne" o" 1e, develope"= 1e #houldnAt de#i-ned the 1e, pa-e in $ixed 1idth anymo"e/ Thi# tuto"ial 1ill #ho1 you ho1 to c"eate a c"o##-,"o1#e" "e#pon#ive de#i-n 1ith &T'() 6amp! C77< media que"ie#/ <a h"e$="http3 111/only1e,p"o/com 4B2< B< 2% de#i-n-you"-o1n"e#pon#ive-1e,-template ">*ead tuto"ial< a> < p> < heade"> < a"ticle> < #ection> <a#ide id="#ide,a""> <h<>Collo1 ?#< h<> <ul> <li><a ta"-et="0,lan>" h"e$="http3 111/$ace,oo>/com pa-e# Connect-1ithonly+e,P"o 2DEE2FGG%<G%B4)">Cace,oo>< a>< li> <li><a ta"-et="0,lan>" h"e$="http3 111/t1itte"/com only+e,P"o">T1itte"< a>< li> <li><a ta"-et="0,lan>" h"e$="http#3 plu#/-oo-le/com 2BBE2B)D<F<)44D2BEE2)">@oo-le Plu#< a>< li> < ul> < a#ide> <$oote">
<p>Copy"i-ht 4B2< only+e,P"o/com< p> < $oote"> < div> < ,ody>
Step 2: !!ing Meta Tag

!e need a viewport meta tag to tells the browser to use the device width as viewport width and disable the initial scale.
WEB Design 3
-meta name./viewport/ content./width.device-width$ initial-scale.1.0/
Step ": Provi!e #a$$%ac& Support #or 'E

%&'(, tag such as -hea!er0$ -nav0$ -section0$ -artic$e0$ -asi!e0$ -(ooter0 are not supporte! in 'nternet E)p$orer * or o$!er$ so we have to provide )allbac support )or users using *".

Step 4: The +SS

&he 122 )or the website is simple. 3ote that we have divided the 122 into 3 parts: 4 #orwser 2ettings$ #ase 2tructure 5 3avigation. *6m not going to get into the details o) #rowser 2ettings$ instead we will )ocus on the #ase 2tructure 5 3avigation sections.
<#tyle type="text c##"> KKK L"o1#e" 7ettin-# KKK ,ody M ,ac>-"ound3 N$$$! colo"3 N<<<! $ont-#i:e3 2<px! $ont-$amily3 "(ucida 7an# ?nicode"= "(ucida @"ande"= #an##e"i$! line-hei-ht3 2/D! O h2 M
O h4 M
colo"3 NBBB! $ont-#i:e3 4Bpx! $ont-1ei-ht3 ,old! ma"-in3 B!
O h< M
colo"3 NEEE! $ont-#i:e3 2<px! $ont-1ei-ht3 no"mal! ma"-in3 B B 2Bpx!
WEB Design
colo"3 N444! $ont-#i:e3 2Gpx! $ont-1ei-ht3 ,old! ma"-in3 B! O a M colo"3 NBEC! text-deco"ation3 none! O a3hove" M colo"3 N<<<! O KKK La#e 7t"uctu"e KKK N#ite01"appe" M ma"-in3 B auto! 1idth3 EBP! O Npa-e0content M $loat3 le$t! 1idth3 G)P! paddin-3 B )P <P B! O N#ide,a" M $loat3 "i-ht! 1idth3 <BP! O $oote" M O
clea"3 ,oth! 1idth3 2BBP!
KKK ;avi-ation KKK Nmain0nav M po#ition3 "elative! ma"-in3 4Bpx B DBpx! O Nmain0nav ul M ma"-in3 B! paddin-3 B! O Nmain0nav ul li M di#play3 inline-,loc>! li#t-#tyle-type3 none! ma"-in3 B )px 2Bpx! paddin-3 B! O Nmain0nav ul li a3hove" M colo"3 N<<<! O
WEB Design
Nmain0nav ul li/cu""ent a M colo"3 N<<<! ,o"de"-"adiu#3 )px! O < #tyle>
7esponsive design is percentage based layout$ instead o) using )i+ed pi+el value$ we used percentage value )or the width o) all base structures. !e aligned the main navigation button to le)t by speci)ying 8!isp$a,:in$ine-%$oc&8.
Step5: The Responsive

3ow here is the magic that turns our website into responsive. The +SS me!ia .ueries is the &e, component (or responsive /e% !esign$ it tells the browser how to render the page )or speci)ied viewport width. *) you are not )amilar with media 9ueries$ please be sure to read previous article on media 9ueries.
<#tyle type="text c##"> Qmedia #c"een and Rmax-1idth3 G)BpxS M Nheade" M hei-ht3 auto! O Npa-e0content M 1idth3 auto! $loat3 none! ma"-in3 4Bpx B! O N#ide,a" M 1idth3 2BBP! $loat3 none! ma"-in3 B! O KKK ;avi-ation KKK Nmain0nav M po#ition3"elative! min-hei-ht3 <Bpx! O Nmain0nav ul M ,ac>-"ound3 N$$$! ,o"de"3 2px #olid Nddd! paddin-3 )px B! po#ition3 a,#olute! 1idth3 DBP!
WEB Design
O Nmain0nav ul li M di#play3 none! ma"-in3 B! O Nmain0nav ul li/cu""ent M di#play3 ,loc>! O Nmain0nav ul li a= Nmain0nav ul li/cu""ent a M ,ac>-"ound3 B! di#play3 ,loc>! paddin-3 )px 2Bpx! O Nmain0nav ul li/cu""ent a M colo"3 N<<<! O Nmain0nav ul3hove" li M di#play3 ,loc>! O O
:n ;,0p+ brea point$ we removed 8($oat8 property )or page content container and sidebar. !e try to hide all main navigation by speci)ying 8!isp$a,:none8$ but e+cept )or the 80current8 button. &hen when users touch / mouse over on the main naigation$ we set the main navigation buttons bac to 8!isp$a,:%$oc&8$ this will turn the main navigation into a dropdown bo+. 2ave all your )iles and view it on browser. &hen resi<e your browser window$ you should see your website automatically ad=ust its layout to suit your window.
+onc$usion
>ou =ust learned how to design your own responsve web template. !e hope you en=oyed this tutorial and loo )orward to your )eedbac ?
WEB Design

Tugas Pertemuan 14 (Responsive)

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Tugas Pertemuan 14 (Responsive)

Загружено:

Авторское право:

Доступные форматы

Tugas Pertemuan 14 Merancang Responsive WEB HTML5 http://www.onlywebpro.com/2013/03/18/design-your-own-responsive-web-template/ Dalam pertemuan ini a an dirancang !

"# yang dapat merespons user$ misalnya pada gambar di bawah:

#eri ut adalah lang ah untu membuat responsive !"#

Step 1: The HTML Strucutre

8ava#c"ipt ">9ava7 mo,ilephp ">P&P #ea"ch-en-ine-

Step 2: !!ing Meta Tag

-meta name./viewport/ content./width.device-width$ initial-scale.1.0/

Step ": Provi!e #a$$%ac& Support #or 'E

Step 4: The +SS

colo"3 NBBB! $ont-#i:e3 4Bpx! $ont-1ei-ht3 ,old! ma"-in3 B!

colo"3 NEEE! $ont-#i:e3 2<px! $ont-1ei-ht3 no"mal! ma"-in3 B B 2Bpx!

clea"3 ,oth! 1idth3 2BBP!

Nmain0nav ul li/cu""ent a M colo"3 N<<<! ,o"de"-"adiu#3 )px! O < #tyle>

Step5: The Responsive

Вам также может понравиться