Successfully reported this slideshow.
Upcoming SlideShare
×

# Presentation 9 8

13,543 views

Published on

Presentation 2 of ATEC3361

Published in: Education
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Get the best essay, research papers or dissertations. from ⇒ www.HelpWriting.net ⇐ A team of professional authors with huge experience will give u a result that will overcome your expectations.

Are you sure you want to  Yes  No
• Don't forget another good way of simplifying your writing is using external resources (such as ⇒ www.HelpWriting.net ⇐ ). This will definitely make your life more easier

Are you sure you want to  Yes  No
• Longest and best orgasms ever, I love it. And she thinks it's hot, a real turn on for both of us ◆◆◆ https://tinyurl.com/semenax101

Are you sure you want to  Yes  No
• Be the first to like this

### Presentation 9 8

1. 1. ATEC 3361 INTERNET STUDIO Week 2 RIGHT-BRAIN WARM UP BUILDING BLOCKS OF WEB PAGES SEMESTER PROJECT INFLUENCE VS. INSPIRATION ASSIGNMENT INTERNET STUDIO Class 2
2. 2. . 2 K LATERAL THINKING WARM UP
3. 3. II. /4‘; TE? 'é‘I T"-: IIII’(. IIiiIfi; ¥Z ; . Kit . . . . The ﬁsh is done frying. Move two of the four sticks and put the ﬁsh outside the pan (while retaining the pads shape). INTERNET STUDIO Class 2
4. 4. II. /4‘; TE? 'é‘I T"-: IIIK. IIiiIfi; ¥Z ; . Kit . . . . The ﬁsh is done ﬂying. Move two of the four sticks and put the ﬁsh outside the pan (while retaining the pans shape). Answer: INTERNET STUDIO Class 2
5. 5. LATERAL THINKING Can you draw this object in three dimensions? FRONT SIDE The from indicates that the Small The side view tells ‘us that it is a hole. rectangle inside the large one is And that the h°IC 15 3 510‘- either a projection or a hole. INTERNET STUDIO Class 2
6. 6. LATERAL THINKING Here’s one possibility: Here’s a more elegant possibility: INTERNET STUDIO Class 2
7. 7. LESSON IN A TWEET 7732c-W3‘ (I (III-[fZ’I‘c’/7I‘L’ /25/wceiz (rz'fI(z. I/ 1‘/ ;2z'/2/ems‘ mm’ / ‘/.72"/ Ila’/ ‘.I -zv/30 are I‘2'z'/ ,‘z'vrI/ .' one . s‘0/-Empro/9/t’/ /1.x‘, f/ .78 0/E/ am‘ I‘I‘mfc. s‘ f/10112. INTERNET STUDIO Week 2 I‘. I' I‘! ‘II«‘. ’i'I' I
8. 8. BUILDING BLOCKS of WEB PAGES
9. 9. llil-I3lIIE. ’f: i-‘Tia BI_@I: I~’ OIVIIEB I — l r if HYPERTEXT MARKUP LANGUAGE ’- i i CASCADING STYLESHEET '7. i JAVASCRIPT INTERNET STUDIO Class 2
10. 10. H I HYPERTEXT MARKUP LANGUAGE ‘ S CASCADING STYLESHEET J S JAVASCRIPT Content. Structure lN‘I'ﬂWET'S'l‘UDIO class. '2 Km Starnr
11. 11. H I HYPERTEXT MARKUP LANGUAGE ‘ S CASCADING STYLESHEET J S JAVASCRIPT Appearance Layout lMTE| WE| "S'| 'UDIO Class ‘2 Km Starter
12. 12. H I HYPERTEXT MARKUP LANGUAGE ‘ S CASCADING STYLESHEET J S JAVASCRIPT Bebavior Interactivity lMTE| WE| "S'| 'UDIO Class ‘2 Km Starter
13. 13. I I" e V . |"* i HYPERTEXT MARKUP LANGUAGE ' i CASCADING STYLESHEET I‘ ‘ JAVASCRIPT Content Appearance Be/ Javior Structure Layout Interactivity INTERNET STUDIO Class 2
14. 14. WEB DEVELO PER TOOLBAR N. ’-‘ ~ - I E ,4‘ _§‘I r- II i _‘ if inf (pf: i i .1 I . m 1 3 _-E . Q ' 1' , Disable ' Cooknes ' CSS ~ Forms ' Images ' I'I‘orm: It«on ' Vlnscelaceo. -s ' 0-: N: - Res II 1.4 . . K‘, . 4 «All Styles sees J } . I / I View CSS 360C . _ ' ~_. J} T / 1 FOR MOZILLA FIREFOX INTERNET STUDIO Class 2
15. 15. HT HYPERTEXT MARKUP LANGUAGE INTERNET STUDIO Class 2 I-. «=: n htnrzm
16. 16. HT HYPERTEXT MARKUP LANGUAGE Content Structure INTERNET STUDIO Class 2 min Marin: -v
17. 17. 19 mm. ~ ,1 (t. .,. ..t ‘ , (‘A ~ g mm. - L; Itntqu - [ -. .-wum: ~ 0 u'l(rl4.To5‘| ‘ / 0.. -. '< ‘ / Inn v z‘ tum - 0 u-v. s.u. .vn - m Oahu": - Content . 4" l E ‘ u . ‘ I ‘ Structure ~ ‘[71; ifgrslqg-29"” ‘:4: ’, '.. y]_q/ Visit S; S§Z_EDﬂ,3!'. d_€ﬂ-.6911! ' A demonstration of what can be . 'tccontpIisItcd through (LS5-based design. Select any sly]: - sheet from the list to load it mto this page. Download the example and THE ROAD TO ENLICHTENMIENT I. m-: _ng: £lr1£: '<1'¢z§xsm-. To'x'l | _ ‘4 I - , ! um. »-bvo'>; rm. Mu on It-I: tndv um‘ ' I ' Sp i_l_r_| ﬁll lcltct cfbrowscr-spectftc tags. tncompanble L'nwM7—. '.s. We uh I; av r‘; :)_i'; V"f‘lt ‘fit The: 2%; . rn. u:~n Iicmn to . rr wtth r. .1rt'. y. Lr Wm In no (hv: L UR‘-l'l()Xl()r(‘(l lt*<'hntqut-. tn new . - if ‘:2’: -:'im‘. ’.-J--1;: F. -.. -l! *:€<-. -r-. . '!f‘ -. -14:-‘: .-. 4 J mr FIILUOT browwr rrmtors. , ,. .;. §.§Iv; ." 7%, ,‘ 7- fl gt: FA ml rttrntttcnt has been . l(hIt‘V(‘(l thzmks to thr rm-5-«. '1 Jtt: .1" [mr<lt: ;tt¢' on the tmporlant lessons of the Q0 / /HAT IQ THIC AROI IT7 "'5 / INTERNET STUDIO Class 2
18. 18. ontnnn-. |,caauu-ﬁuts-gr-m-awn-nu Iu-mm--. mau-u-/ omu-[nntu-)1u--ovtc~suu-| |ionuuu- Duuhlr Slvlos Oublo AIISMM Y’rA Add User Style Sheet. .. {Mable Browser Delault Styles Display Style lnlomutlott VOV Disable Embedded Stvlu Display Styles Dy Media Type > Disable Inlinc Styles _ usable United Style Sheets Edit CS5 OD _ [cloud Ltnltod 5ty1¢ Shoots {Mable Mm Sryln Use Ioldu Io: Model View CS5 Disable Individual SM: Sheet Visit csszengarden. com Disable styles (option+ O + A) A demonstration of what can be accomplished through CS5-based design. Sclcct any style sheet from the list to load it into this page. Download the example ! and 1 THE ROAD TO ENLIGHTENMENT Littering a dark and dreary road lay the past relics of browser-specific tags, tncompauble DOMS. broken CS5 support. and abandoned browsers. We must clear the mind olthe past. Web enlightenment has been achieved thanks to the tireless elTorts of folk like the W3C, WASP. and the major browser creators. The CSS Zen Garden invites you to relax and meditate on the important lessons of the mastrrs. Begin to see with clarity. Learn to use the timt-—hunurcd techniques in new invigorating fashion. Become one with the web. <0 / /HAT IQ Tl—l| § ARDI IT7 INTERNET STUDIO Class 2 Ken Starzer
19. 19. Content Structure Visit csszengarden. com Disable styles (option+ O + A) HTML Only page INTERNET STUDIO Class 2 Q bum - 1 (oc~¢t - 1 cs: « ﬁ It>'W‘l - ‘:3 «mm: v [ Mtorrralar - 1*. M-scl-‘. 'VI(ou ~ / 0.: re - / ﬁt-size - / Yooii - 0 V-‘E-v5t>. iv<E ' ill Dot: CS8 Zen Garden The Beauty ofCSS Design A ikmntistruiur. (it what can be accomplished through CSS-based Llcsign. Sclcct my style )l'll. ‘L'l {mm the llil to load it into U113 page. Download the eumpic ‘ ‘mi lllt‘ and tn 3-'- The Road to Enlightutmenl lJ| YL'ntl_L' I slut and dreary mid l. iy lhc p. i~t relic: ulbmsucrwpecilic tags, incompatible D0.VlI. brulen (‘SS support. and iibiii-iduncd bmwscn. W: mm: i: Ic. it lht‘ rii nil ntttie p. «'. . Web enlightenment has been ﬂ£h)C1Ed th. iiilit to the tirelcu cllurls M lull. like the W3C. Win53‘. and the major bmwitcr < The CSS Zen G. in2(r. ln‘ltCI you In reliu and mcditiitr nn the imtmrunl lemons of the m1s". cn. Hcglri in set: with cl. inty. Leam tn uxc the time-hnnnmd tccr So What Is This About‘! Then: Li 1 : r~r. t.. ~iiini_: rwed to show the pmwr ofCSS. The Zen Garden . Ilt'l'I‘ to excite. |I‘. ;9|lt. <1lld encourage pamcip-. itioii. To begin. View some at the ¢l| (hit very ; v.ir_r: The HT. ll. remains the same. the only tlimi: that hlh changed it the extcm.1lCSStlle. Yes.1enJly. CS5’ Al: Il um lctt‘ ind total cuntml our the )lVl(‘ or n hyprm-itt iiuciimvnt The only wly Ehll can he illuxtntrd in I wny Ih. it get: people Eltlltd ll by di- llluw mic In uni: hunt) from nini. -iim-. Dcxiitiirn and uidciii alike luv: ucititritmtvd In the hr. -my til the vu-b. we can itlwnyn push it {Ul'| lK'l' Plrddpatlon Stmrir IU. Il tktiyn Pm zlWl| y been our llK'u You an mudilying ihit pnitr. 0 stniriy CSS xltillu . inc ncv; cu. :ry too. but the example liln iur cniiiiiit-med - act‘ the (‘ H 1.‘ '- tur ndiiiiuc-l tutiirinlx . inti tip on working with CSS Ymi . ~.iy modily th< (_l‘ mm in my w. iy you with, but rnt the HTML. Thu nuy wt-rn d. iuntitiy ill lint it you've never wiirkcd tlin may bclure. but itvllm Dounltud the umplc lll‘-ll. and C5 in work on I copy bully. Once you have completed ynur mnterpiccc (itnd plcnsc. don'l submit hiill-linnhnl wurlt) in xchivc of 13.1! lIl(' mil . iiI nuoc; .itcd llCl! .JD|1ll( choose to use it we will dew niu. id ii and place it on our xcrvcr. Beneﬁt: Vniy pi. -tici; i.ii: ? F-at i’O. ‘l§‘, nIll(rI. |r1pll’. I[lm1.. A!Id I l'(Iulﬂ' we em all nrlrr In h0Wﬂf, peoplc how iimalinyt CSS nu-illy can equal p who will be ttiniurmv-. and gallery -it tuturi: l((hnlq| .E we can llll look lorwiud In / ' Requirements ‘ J ‘ u- _‘, .- I V1icr: p0<n‘. blC, Vht would like to sec mostly CSS I 5:. 2 usage. CSS 3 St J should be limited In wtdclyuippcrlcd elements (mi, wnouldl
20. 20. ’m1.'. x . '.vr-; ’- ~: ' ""! lp/ xwwn as 019‘N‘! I)ly’1'3EIZ1103-hypeﬁtll/ 'yp£" I v 0 World Wide Web 'H1c Woddwidcwcb (W3) : 3 vs Idc-Ame hvx‘n'.7-_-x‘ -. to a Luge ur. n'ct. c of documents. : n."orrr. ‘:uon :1-Lnc': :I 11-. :u: x:nc axrmng to gnc unxvcrsal access E'cr)1hing there is onhnc about W3 is Imkcd dimcdy or indimcdy to this document. includmg an cxccuuxc . ~.: :zr. ;;_ oflhc pmpct. .I ' '. ‘1[. s , Pc'. ;.. ' . .'o‘cmhcrs W3 new 5 , Fr». ucniix . -hhcd E‘1(ls-' '¢1t‘C~‘_7 POu1.I: I'S! L) the world‘: onhnc infor! r_a'. inn_i, c;L~ . ’3 &‘! 'C1'! .CKC. on me browser you are using Sofnx . ;.'-: A us: of W'3 prupct components and their an-mm state. (c. g‘ Jill _’; -.‘-I: . ’; X 1 32:2 . Sgnr . To-3!» . .! :1rrbo: .L: *_~m. ') ) _E1;)a’. d0CuI‘mnl. 'x1ion on W} and rtfcrcnccs. A list of some people involved in that project. H: xt.7r3 A summary oflhc history ofzhc pmjccn H9"-« _. cjg 7 If you would lie to suppon the -wt-b_. cud; Gcmng the code b, ;. 3.: _, n;: ;:_E[E .605. bit. |y/ wwwhistory One of the very ﬁrst web pages (November 3, 1992) INTERNET STUDIO Class 2
21. 21. Creation 1991 HTM L+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4 1999 HTML 5 under development Tim Bemers-Lee INTERNET STUDIO Class 2 : ~ v n ‘. I,': ’,‘rx
22. 22. Content h 1 Structure h 2 I3 Visit csszengarden. com P. 3. 3 Disable styles (option+O>+ A) [13 HTML Only page p INTERNET STUDIO Class 2 css Zen Garden: The Beauty in CS5 Design http. //csszerigarden. <om/ Q . ..-' ' ‘C’-I ‘A-’; _._ll_. ~ D: sa: :e ‘ ‘ Coo‘-tic-5 ' CS5 ‘ Forms - W-ages ' mtorrrtition ' ‘As<e| .‘. -eons - 0.: re - Res-ze ‘ css Zen Garden The Beauty of Design A demonstration of what can be accomplished visually through _C_§§_-based design. Select any style sheet from the list to lo: Download the sample t1;tni_t'Lle and §: §_ll. l£I The Road to Enlightenment Littering a dark and dreary road lay the past relics of browser-speciﬁc tags. incompatible _[V)OV. /ls. and broken CS_S suppon. Today. we must clear the mind of past practices. Web enlightenment has been achieved thanks to the tireless efforts of folk and the major browser creators. The css Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Let be) Lime-honored techniques in new and invigorating fashion. Become one with the web. So What is This About? There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite. inspire. and cnoout-. begin. View some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The ct the only thing that has changed is the cxtemal . css file. Yes. malty. CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way excited is by demonstrating what it can truly be. once the reins are placed in the hands of those able tiytebeauty from s examples of neat tricks and hacks have been demonstrated by structurists and coders. Designers hav~ . Qeir mar change. . _ . . . V , I ‘v if I
23. 23. Content Structure Display element information: visually inspect HTML elements on the page INTERNET STUDIO Class 2 Q5,_, :., .‘¢o¢. ¢,. ,;5,. iyWl, -~; _,= m-. m.» 'l"lI <(ﬁUv4-’I'. ‘ll‘-. "l - [mu 0. D wI. Iv Anavrv-mom CSSZen D1D| .wA(cen| (cvs D s: I!: vK-«hots D splay ARIA Qolu The Beauty ofCSS Design 0 , ,.. , 9.. 0 mnsnom D snlay Dw Ovdev A dcmonsxnuar. of mm: (21.1 bu: accomplxsllcd Ihmugh CS5-y - - ~ ' 5'7"’ "' ‘I: II»! to lo-‘J It nil-1 llm II-Ir: D sauy II: A Class Denna Dounlmd mt : umpIc“mfll1rand ~~ 3"‘ o 591;, Lu-.3 Dam; 0 mm Dblen lnlor-mt-on The Road in Enlighlunnenl D splay Srau Lave» D splay Tab Indu lglu-nn_: I an -Ind dxnry mad l. Iy lhc pm n-ht: ulbmwsc D Sﬂljy nble Deplh D splay Tnble lnlomuhon ‘ V W: mm: I: lc. u lhl‘ m m} nllht‘ p. q'. . Wcb rnlughlcnmcnl has I 9 ml" 7,”, MWDU, “ of loin. lm: '. .“. c '. ‘C. . :SP. and '1»: mqor brow-per E 0 solar ToD09raph‘( lnlovmanon I’ ad Duolnze Ids 11 CSS suppxi. and nltandoucd luvuscn. The CSS Zcn mum. ln‘llc you In n-lu and mcdnnlr on In 0 sec huh Cllnf) Lum In u-c mg urn: -honomd Inch So “hat [3 This Ahmt? Vuew Anchol lnlarrralcon V-cw Color lnlorrnauon Then: Li 1 . 'r~r. t.. ~u; nI: rwcd lo ‘hm: um pmwr ofCSS. Th: 2 V-cw Dc-cumenl Oull-nc )u. '2;: p. mIcxp; .uon. To btgin, -Ira some ohhc cxis (hn vrry ; v.Ir_I: The MT. I1. rcm. uns lhc umc. (he only lhulr V-cw Do(um¢Dl Sue (u. really. V-cw Jq. uS<naI '0J CS5’ Allmu um Iclr xm! mu! cunlml mrr lhr uylc 0! a lay] V, " Lmk | ,,a°, ,,, a._, °,. , : Illuslrdltd u_ Lha: gm ptopk‘ cxtm. -d )3 by dc mus: mic In uni: h<. Iul) from nlruclun-. Dcxumrn And us my we“ 1,9 gnyomamn "Int “Ch; Me n ; lu_-5 pukh ll fu. -(. ".tr, View Page lnlorrnano-I Plrtldpatlon V-cw Rtsoons: Headers Slnmr nuul nkuyn Pm zlwIIy hcrn our luau» You an mudnlylng ! hI pnytr. o slnxny CSS xlullu . mc ncu~u. :ry loo. bul Inc cnmplc llln are cmmnrmrd - an‘ ‘hr (‘ H l. ‘ '- fur ndI. :n. ;cd lu'I)n. Il and hp on uotlnnx wnlh CSS Yum . ~-.1) muddy lh< (_lc | h(‘(‘l In my may you wuh, hul rm Ihc HTML. Thu nuy “Tm daunmw nl llm If you've nrvct wurkcd lhn may bclurr. but lnllm Dmnzllud mu: umplc HI‘-ll. Am! C5 In work on I copy bully. Dnrc you hm‘: mmplclcnl your mnusrpnccc (Imd plcxuc. don'l submll hull-llnnlvnl work) 1.1 xchnc of tux lIl(' Ind . IlI nuocmcd um-ls. and If xx: choosc In use ll we vull dour nlu. ul u and plot: IKOI1 our xcrvcr. Bentﬁu V011) pJ. 'T| CI{Ll! .". ‘ F-at rn; np, nmnn, Insplmmn. end I n-mutt: wt an all nrlrr In showmy, people how umallng CSS Ivally can cqual p «ho wll be mmurmv-. and gnllcry ul lumrr ltchnlqhn u: can nll look {orwud In / ' Requlnmmu ‘ J ‘ u- _‘, .- 1 W110: p-: ><w. blc, vn: would llkc Io sec mostly CSS I . & 2 usage. CSS 3 5: J should be llmucd ID wndclyunppcrlcd clcmcnts (ml, wnouldl
24. 24. Content Structure Display element information: visually inspect HTML elements on the page INTERNET STUDIO Class 2 9 D-ulxt - ‘L Cook-n » / css - i Volrvu - HI I. -r. l1e - 1 I-'lt. in-aliur - 1’. VvI(-larva. ) ~ / on m - / no.1: - I ‘am - 0 VrwSu. i'u - m opnm - Qweuomioae. CSS Zen Garden The Beauty of CS_§ Design A dcmonstniuon of what can be accomplished through CSS«hased design. Select any style sheet from the 1:»! to load it into this ptigc. Download the example html_ltL; and L: }, _l| IC "l‘liFRb? £l as Enllihltﬁll Linlning I dart and dnzary mad lay the past relics of bmwscr-speciﬁc tags. "incompatible D0._ls. hmlu: n CSS support. and tihandoncd hmwncts. We must clear the mind of the past. Web cnliglitcnmcnt Int) been achict-ad thanks to the timlcss cﬂorts oflolk like the W3C. WASP. tind the Ituijor DIOWKI‘ creators. The CSS Zen Garden invites you to relax and meditate on the important lessons ofihc masters. Begin to so: with clarity. Lcam to use the time-honorod Icchtiiqucs int So What Is This About? There is a conunuing need to show the povucr of CS5. The Zen Garden aims to excite. inspire. and cncoumge participation. To begin. View some of the citisurig dcsigi this very page. The HTML tvcmains the same. the only thing that has changed is thc cittcninl CSS file. Ycs. really. CSS allow! complete and total control ovcr lh: stylc of: hypertext dmumcnt. The only way this can be Illustrated in I way that gcLs pcoplc cxcitcd is by dcmnriunttt Element lnlon-mt ion DOM Layout (ow role-‘article’ id-’: eri~pr«-c—olc" class-'crr-anole"> l‘Elg’t: lzsox; «tum H3391; </ div> Position Text / — dtaplcy: block; tant-to-wily: ' . ,1 . ‘ ’ . - 25.’; /
25. 25. HT Content Structure View Source (option+O+U) INTERNET STUDIO Class 2 Ken Starzer <l&. “I'YPI’ htlJ> Gin! lug-'cn'> Gab tin aha-not-‘nit! -l"> <uuo>csa Ion Garden: ‘nu Ioulty of C88 DoI1qn</ “€10 «link :01-'sty1o| hoct" nth-"Icroon" In! -' 21lI214.can1v-ha 2013'> <1L| h ml-'|1uzmu' typo-’upp1Lcnt£on/ rnu>: I.I. ' title-‘IE8’ Il. 'Of"| 'h£2l/ lUlV. Ol in I: -'v1.ovpor¢. ' outﬁt-‘width-darken-width, initial-nculo-1.o'> tn I1-‘author’ accent-‘Dave 8hoq'> tn I1-‘description’ accuse-‘A bmnotntion of that can be noezlluhod V1 in I: -‘robots’ outﬁt-'A11'> <l--(it 1: II’ 91> <u-rip: un': - ‘script / bcnlsnbiv. jn '></ script» <l[oadi! )--> </ hub <I-- View source in I lecture, not a bug. Thanks for your curiosity and Intlfllt in pnrticipuingl Doro an the auhlooiou guideline: to: the now and iﬁrovod cnasoogardonaxnn C883? 0! con: -lo! Prefix for ALL browser: when nooooury. go rupoaninp cut your layout at nuleipln ICIOOD Jinn. yout brovlor coating baseline: I894, neon: Grant/ Pitofox/ safari, and ix/ An: Grncolul dogradauon in ocoqtablo, and In tact highly oueourngod. uu cluaol for styling. Don't use lb. nub loan an cool, just lake turn you ban I license to than the (1100. Ion union that are applied via the G8 £110 (10. Googlo Panel) will work (inn, coat that toquln cuum I911. won't. zypuuc in nnpporcod, not the not on I PO90 lot uaago instructions: beeper/ /g1ehub. ccn/ nusoblno/ cu coal Illlll And a low tips on building your C88 (110: —
26. 26. HT Content Structure View Source (option+O+U) I document type declaration tells the browser how to render the code on the P399 INTERNET STUDIO Class 2 Ken Staner <! &.“)'YPI’ hen» Gill. lug-'on'> Qoob {to olu-not-‘nit! -I’> <uuo>csa Ian Gordon: ‘rho Ioouty of C88 Do|1qn</ tin» <l. lnl :91-'etylo| hoct" Q11:-‘Maroon’ inl-"/21ll210.con? v-hng2013'> <l. L|h ml-'|1uzmu' typo-’uppl1ut£on/ rental’ title-‘I38’ Ito! -‘lug: /[IMv. o| <-u I: -'vLovport. ' oontut-‘width-dovloo-width, lnltinl-oculo-1.o'> tn I1-‘author’ accent-‘Deva 8hou'> tin I1-‘description’ cause-‘A hmnotntion of that can be nooalluhod vi the I: -‘rebate’ outﬁt-'n11'> <1--(1: 1: II’ 91> <u-rlpt un: - ‘script / henlsnbiv. jn '></ script» <I[oodi! )--> </ hub <I-- View source in I lecture, not a bug. Thanks for you: curiosity and lacunae la purciclpetlngl Doro an the auhlooiou guideline: to: the now and iﬁrovod cnasoogurdonaxnn C883? 0! coo: -lo! Prefix for ALL browser: when nooooury. go rupoanlnp cut your layout at nulciplo ICIOOD Jinn. yout brovlor coating baseline: I894, nncont Caron: /Pltofox/ safari, and lw/ An: Grocolul dogradaelon in ocoqtablo, and In tact highly oueourugod. uu clause: [or styling. Don't use ids. nub loan on cool, just lake turn you how I license to than the lilac. lost union that no applied via the G8 £110 (10. Googlo Panel) will work (inn, coat that toquln cuum Hill. won't. zypuuc in nnpportod, not the not on I PO90 lot uaogo instructions: beeper/ /g1ehub. oon/ nusobluo/ cu oon/ IIIIII And a low tips on building your C88 lilo: —
27. 27. HT Content Structure View Source (option+<}+U) I document type declaration I html tags code that “markup” the content on the page INTERNET STUDIO Class 2 Ken Starzer <l&. “)'YPI’ htl. l> 0&1 lug-"en"> <heel> its ole: -set-‘int! -I'> <tit. le>c88 ten Garden: The Bounty o! C88 Desi¢n</ tluv <l1eI rel-'sty1ssheet' mile-‘screen’ Ire! -‘I214/21l. cse7v-hsg2013'> <lleh rel-'s. I.ternste' type-'spplicsti. on/ rssu| .l' title-'IB8' I20!-'htQl/ £IlV. cl the I1-'vi. evport' ooetct-"vldth-device-width, initinl-scsle-1.o'> tee I1-'suthor' eoetat-‘Dove 8hes'> the I1-‘description’ eoetset-‘A dsmnstretion of ehst can be socalished vi its I: -‘robots’ oeetat-'s1l'> <1--11: 1: rs 91> <script sro- ‘script / htelsshi V. js '></ script> <l(endii‘)--> </ heeb <I-- View source is s festure, not s hug. Thanks for your curiosity snd interost in psrtioipstingl Here ere the suhission guidelines (or the new snd igroved csssengerdenaxn: C883? 0! course! Prefix for ALL browsers where neoesesry. go responsive: test your lsyout st eultiple screen sises. your hroveer testing bsseline: I894, recent Chroes/ Pirefox/ sstsri, snd ix/ An: Grscelul degrsdstion is secqtsble, snd in tact highly encouraged. use classes for styling. Don't use ids. web fonts are cool, just eske sure you hsvo s license to shnrs the files. losI services thst ere npplied vie the G8 file (is. Google Poets) will work fine, eost thst require oustm Hill. won't. zypuuc is supported, see the rest on I P090 ! or usege instructions: https: //githulhooe/ eessohlue/ css - And s lee tips on building your C88 tile:
28. 28. HT Content Structure View Source (option+<}+U) I document type declaration I html tags I html attributes (bold) associated properties of an html tag; more than one attribute may appear INTERNET STUDIO Class 2 Ken Starzer <. lﬂ. ‘1’YPI’ htl. l> 0&1 Lang-'en'> <heed> the ohareet-'ut£-I‘> <tltle>c88 len Garden: The Beauty of C88 Design</ tlt1e> rel. -'etylesheet' mdia-‘screen’ Ire! -'/214/210.css7v-hag2013'> rel-‘alternate’ type-‘application/ rssunl‘ title-'l88' Ire! -'http: //eev. o| I1-'vi. evport' oeetaet-‘width-device-width, initial-ecsle-1.o'> II: -‘author’ content-‘Dave Bhea'> e: -'desoription' eeeteet-‘A deeonetration of what can he aoooqllsbed vi ax-‘robots’ oeetset-'ell'> Ill! <I--(if lt ll’ 91> <script src- ‘script / htelsshi V. js '></ script> <l(endif]--> </ heab <I-- View source is a feature, not a bug. Thanks for your curiosity and interest in participating! Here aro the subission guidelines for the near and igroved csssengardema-1 C883? or course! Prefix for ALL browsers vhere necessary. go responsivw test your layout at eultiple screen sises. your browser testing baseline: 39¢, recent areas/ Pirefoe/ safari, and ilﬁ/ An: Gracelul degradation is scoqtahle, and in fact highly encouraged. use classes for styling. Don't use ids. web fonts are cool, just aahe euro you havo a license to share the files. Best services that are applied via the as file (is. Google Fonts) will work fine, eost that require custa "ll. won't. bvpexit is supported, see the roots on I P090 (or usage instructions: https: //github. cee/ aessoblue/ css A And a fee tips on building your C88 file:
32. 32. HT Content Structure View Source (option+{}+U) document type declaration html tags html attributes (bold) html attribute value comments content (regular) character entity references special characters not on your keyboard. eg: Ois ⇧ INTERNET STUDIO Class 2 Ken Starzer </11> <e hrof-' 214[” a1eI| -"design-nemo">Ve: de Hoderne</ o> by </11> </ u1> </ eev> </ d\$v> <dLv clone-‘design-archival" id-'de| iqn—aroh1vo| ‘> <hJ clean-“archive: ”>A: ohiveIt</ hJ> <nev role-"navlget1on"> <u1> <18 clans-"noxt'> <3 hrs! -" Z14/gegel”> Next Design: <| pcn clean-”1ndLcator'>bteequo: </open: </ o> </11> <1£ ales: -"v1ew|1l”> <e bro! -"httgx(/ vvw. noaIob1uo. coallengerdonlalldonignll View All Design: </ e> </1L> </ u1> </ nev> </ dLv> <dLv clans-"zen-resources" id-‘ten-roIourooe'> <h3 clean-”: oIourco| ">ReIource| t</ h3> <u1> <1£ clean-‘view-cl| "> <3 bro! -"/214/114.cII' title-‘View the Iourco CB8 £110 of tt View Thin DeIiqn&I8Z17;e <ebbr title-”CaeoedLn¢ Style st </1£> <18 clues-‘col-ro| ourco| '> <0 bro! -”httgx[/ vvw. no: :ob1uo. oou[| engerdon/ reoouroeI/ ' tit] <nbbr title-'CaIoad1ng style Shoot| ">CSs</ nbh: > Roeource </1£> <18 clues-"zen-! aq”> <e hrs! -"httgx[/ vvu. me: Iob1uo. aou[| onge: don/ leg/ ' title-‘A 1 <ehb: title-"Frequently Asked 0uoIt1onn'>P </ Ihbr> </1£> <11 clues-‘son-Iubn1t"> <0 bro! -“htt 1 / vvv. me: Iobluo. oon Ion
33. 33. HT Content Structure View Source (option+{}+U) document type declaration html tags html attributes (bold) html attribute value comments content (regular) character entity references INTERNET STUDIO Class 2 Ken Starzer </1i> <3 href-“ 214[” e13ee-"design-n3me">Verde Hodern3</ e> by </11> </ II1> </ e3v> </ div> <div cieee-‘design-archival‘ id-‘design-arohive| ‘> <hJ ole I-“arohivee'>A: ohiveIt</ hJ> <n3v role-"nevig3tion"> <ul> <li c13|| -"next'> <3 heel-" Z14/g3gel"> Next Design: <| p3n 013:3-"indicetor'>5te3quo; </epee: </ e> </ li> <li eleel-"viewe1l"> <3 href-"httgx(/ vvw. neaIob1ue. coallengerdenlalldeeignel View All Deeiqne </3> </1i> </ u1> </ e3v> </ div> <div e133|- ten-reeouroee" id-‘ten-reeouroee'> <h3 eleee-"reIourcee">ReIource| t</ h3> <ul> <li eleee-‘view-c33"> <3 bro! -"/214/114.cIe' title-"View the source CSS file of tt View Thin De| iqn&IE217;e <3hbr title-'Caeo3din¢ Style st </1i> <1i eleee-‘eel-reeource3'> <3 href-'httgx[/ vvw. ne: :ob1ue. oou[| eng3rden/ reeouroeI/ ' tit] <3bbr title-'Caeoading style sheet3">CSs</3hh: > Reeource </1i> <1i eleee-"zen-! eq”> <3 href-“httgx[/ vvu. me: Iob1ue. aou[| eng3:den/ leg/ ' title-‘A 1 <3hbr title-"Frequently Asked 0ueetione">P </3hbr> </1i> <1i eleee-‘sen-eubnit"> <3 href-”htt 1 / vvv. me: Ioblue. oon sen
34. 34. HT Content Structure CSS ZEN C-ARDEN ‘)3: t. ~ «gr: I . .v AU n . .uN. i Display Element _ dcrlioiulriiliuii ol wlizu an be auomplislicd through CSS-based dc-sign Sclcc. any style ilirel lium lhtr r Ilm in load ll into this pagc HTML source code Download thccxaimplr: }_ and ; THE ROAD TO ENLIGHTENMENT Liuerinx ll dzuk and dreary road lav the past relics of I: _rows<-r-six-tiﬁi. lain. uicoznmuble D0.ts. broken Hementlnlormation I ' I . ..u. ooaylrxss-zen-gurus‘ . .c, .,. .,. M.. , clwlzen-surrwriery . ' DOM Layout ¢> height: 54px; math: 731px; </ V> Position Text display: block: font-fa-«Hy: 'Lbre nasI: ervi11e'. sons-serif; float: none; font-size: 13.t333px; position: static; lmerheightz 26.5667“; INTERNET STUDIO Class2 View Source Ken Srarzer
35. 35. Content Structure Display Element Information another way to view HTML source code INTERNET STUDIO Class 2 Se. ircr- rt‘ Hip "/ '-‘. ’‘v c-. <.zi-no I'Ct‘. ". corn" <body id'~CS’—Zvn-qJId“n'> <div clan: 'piqu—ureppvr'> <u«ction class-‘intro’ id-'zvn-intro'> <hvndrr ro1c~'b4nnvr'> <hl>CSS lcn Cardcn</ hl> <h2>The Beauty of <abbr title-‘Cascading Stylv Shvvts'>CSS</ nhbr> Dcsigm </ hvndPr> <div clans-'nurrtry' id-'zvn—rur try" role-'artic1v"> <p>A demonstration o! what can be accorplinhcd through <abbr title-'Ca: o <p>Dounload the example <a hrot-'t;5;: Rg; A;5' §‘t‘¢'-Tali page’. sou </ div> <div class-"prvirbln' id-‘z~n—p: werblw' role-'xrLic1~'> <h3>Thc Road to Enliqhtcnmcnt</ hJ> <p>Littcring a dark and dreary road lay the past rclicn of browser-npcci <p>wc rust clear the rind of the past. Hob enlightenment has been achiev <p>Thc css zen Garden invites you to relax and ncditatc on the important </ div> </ srction> <div G1!! !-"rain supporting‘ id-': —wupporLinq' role-‘rt-r <div C185!-'vxplin_ ion‘ id- . H xp1:niLion' rolo- - ' <hJ>so what in This About? </h3> <p>Thcrc is a continuing need to show the power of <abhr title-'cx; cxdin <p)<abbr title-‘Cascading Style Sh~~: .">CS\$</ nbbr> allows complete and u </ div>
36. 36. CS CASCADING STYLESHEET INTERNET STUDIO Class 2 men htnrzm
37. 37. CS CASCADING STYLESHEET Appearance Layout INTERNET STUDIO Class 2 min Marin: -v
38. 38. x’) I-ltullwww »~5~-. v./20:3 C-J‘ " www. (ssz¢ngarcen. mm/ Z14/2l4.(ssN-8lw1a- R‘ _ - Q 7- Q *3 O ' amm - Moslvurcd - S<hoc« - ram - Mow» - L«D. 'a'u - ‘ » Crvc: 'n; v"-Frfhz Food - v Q Duqo - E] v . , . Eoo'L. -vrh - '_7 »- ; > ; >: ~ caomu - ‘ L Cc pinmnur‘ [Q Dnblc - J, Cooluu - 1- :55 - ﬁ rovm - {:1 Images ~ I i-*‘o-rv*2X: o' - 6 MIX: .; 'eous - / 0.: -we - / name - I Yoozs Apfearance / - bun css -/ . I -vcbkil—box—ai1ingx bozdo: —box: /' Safaxx/ Chrosc, other Kcbxxt '/ —moz-box—5izinqx boxdcr—box: I‘ Pircfox, other Gecko ‘I [ box-uizinqx bordcr—box: /° Opera/ IE ao 0/ I pnddinqx 0; marqinx O; I body I colors IJZSDSO: background: Ittf: (ant-family: ‘Libru Bnskvrvil1c'. nan: -auril; I font-size: 7o; I I‘L'l.1v body ( I I color: I0dBbal: -vcbkit-Lranuilion: all 0.25: cane-out; —noz-transition: all 0.25s canr-oul: lranuitionn All D.25n canv-out: Lox! -dncoratlcnx nono; axvinilod ( colon Il| S9S21 ) axhovcr, nxtocun ( color: lD599c2: tux: -dvcoxnticnx undcrlinv: ) abbr ( bordoxx none; tr: xt—u'| nulotmx upporcanop font-ulxcx D.9cw; letter-Ipacinqx D.01c: ; hjgpzz [wwyg. c;szengardeg. com(2,1ﬁL2A14,css? y= §may_29_13_ INTERNET STUDIO Class 2
39. 39. Appearance Layout /0 / o / e / u /0 / e css Zen Garden default style - ‘Tranquillc' by Dave Shea - http: //vvv. mozzobluc. conl ‘I css released under Creative Conmons License - http: //crcntivccommons. org/ licenses/ by-nc—sa/1.0/ All associated graphics copyright 2003, Dave Shea '/ Added: May 7th, 2003 0/ IMPORTANT ‘ / This design is not a template. You may not reproduce it elsewhere without the designer's written permission. However, Eoel {roe to study the CSS and use techniques you learn from it elsewhere. '/ The Zen Garden dclsult was the first I put together. and almost didn't make the cut. 1 brictly ll ‘Salmon Cream Cheese‘ as the main style for the Garden, but switched back to this one before lau All graphics in this design were illustrated by me in Photoshep. Google Image Search provided in some of the elements. I did a bit of research on Kanji to come up with the characters on the to; can read that will most likely tell you it nakcs no sense, but the best I could do was putting t characters for ‘beginning’ 'completo' and ‘skill’ to roughly say something like ‘we're breaking It's A stretch. '/ http: L/www. csszengarden. com/214/2 14.css? v=8may2013_ INTERNET STUDIO Class 2
40. 40. cs a 4 Appearance Layout CSS file references HTML tags: html, body. p nun ( margin: 01 gaddinq: 0: (ant: 751 qaorgin, inn: -merit; lino-height: 1.88889: colorx lSS575J; background: lift ur1(/001/b1ousona. jpg) no-repent bottom right; margin: 0; padding: 0; ) margin-top: 0; text-align: justify: ) PI http: L/www. csszengarden. com/214/2 14.css? v=8may2013 INTERNET STUDIO Class 2 Ken SIZIYZGI
41. 41. Appearance Layout CSS ﬁle references HTML tags: html, body. p INTERNET STUDIO Class 2 " " " Mozilla Firefox 4?‘ '9 *3 L_L. _JE; I ﬁg) Dasable ' L Cookncs - / CSS ' _‘ Forms v ‘_‘_ xmaqes - W Informanon - __ _ 'ms(eII.1neous ' , ‘ Ourzne ' 1:1 Iusuze - - http: I/csszengarden. (om/00lI0Ol. <ss V I / ' specific diva '/ Icontainor ( background: url(/001/zen-bg. jpq) no-repeat top left; padding: 0 175px 0 110px; margin: 0; position: relative; I Ilntro ( min-width: 470px; width: IODI; ) / ' using an image to replace text in an hl. This trick courtesy Douglas Bowman, httpx/ /vHv. Itopdesh Upagoﬂcador hl ( background: transparent urlt/ O01/h1.gi£) no-repeat top left: margin-top: lopx; display: block; " A " Source of‘ ht! £'/ Icsszengarden. com/ <body id-"css-zen-qa: don"> (div id-"conta; nvr"> <div id-"inL: o'> (div id-"pag-IIna<: 'rr"> <h1><span>caa zen Gardcn</ Ipan></ h1> <h2><Ipan>The Beauty of (acronym title-"Caucading Stylw \$nﬁnts">CSS</ acronym </ div> <dlv id-“quicksu wary‘) - p1“><rpan>A demonstration of what can be accomplished visually tho 'p2”><apan>Dovnload the aample <a hrof-”/ zen ardrn-sen 1n. hLmZ" tit </ dlv> <div ld- prnarbl~"> <hJ><apan>Thc Road to EnllghLcnmcnt</ epnn></ hJ> <p al 3"><npnn>Littnring a dark and dreary road lay the past rnlica of <p cl 1"><upan>Today, we must clear the mind of past practices. Web cnl <p alaea-"p3"><epan>Thc can ion Garden invitca you to relax and meditate on T; » </ div> </ div> <div ld-"uuuuoxL; nuTvxL'>
42. 42. fcontainor ( background: url(/001/zen-bq. jpq) no-repeat top left: ﬂpfearancg padding: o 175px o 110px; margin: 0; position: relative; Layout , CSS ﬁle references HTML tags: html, body. p References custom elements in HTML attribute values CSS File <div id-'containor“> INTERNET STUDIO Class 2 HTML File Ken Smrzer
43. 43. CS Appearance Layout External ﬁle from HTML INTERNET STUDIO Class 2 ? ‘.I' I‘! ‘ulﬂ/ fI'l
44. 44. CS Appearance Layout <etyle type-"text/ cu" title-‘currentstylﬂ uedla-'acreen"> Oimport "/001/001 . cea"y </ atyle> INTERNET STUDIO Class 2 men . tar7.r. ~r
45. 45. Appearance Layout External ﬁle from HTML May reference image ﬁles INTERNET STUDIO Class 2 'r': ins ins. ins. JPGI PNGI CIF IMAGES
46. 46. @ntnuo-. |,cuus-)Ims-gron---a| m.. -1u-mma-. mu«. um-/ omu-(mn-¢rno--ou«tam-| ||ouuuu- C Arrearame 3 C35 ZEN GARDEN Layout ‘ . . ‘- on. u_/ I. 55 U1.l_EIl External ﬁle from HTML 0 May reference image ﬁles . A demonstration of what can be accomplished through CSS-based design. Sclcct any style sheet from the list to load it into this page. Download the example 1 ' and 1 THE ROAD TO ENLIGI-ITENMENT Littering a dark and dreary road lay the past relics of browser-speciﬁc tags, tncompauble DOMs. brokcn CSS support. and abandoned browsers. We must clear the mind olthe past. Web cnltghtcnmcnt has been achieved thanks to [he urclcss ellons of folk like the W3C, WASP, and the major browser creators. The CSS Zen Garden invites you to relax and meditate on the important lessons of the mast: -rs. Begin to see with clarity. Learn to use the um: -—honurcd lcchniqucs in new and invigorating fashion. Become one with the web. SQ / /HAT IQ Tl—ll§ ARFHI IT7 INTERNET STUDIO Class 2 Ken Starzer
47. 47. CS Appearance Layout External ﬁle from HTML May reference image ﬁles Edit CSS (option+O+ D) INTERNET STUDIO Class 2 Ken Starzer ‘_+ c E i'C’; «IL_. .- Elan» ﬁuosxvtsm¢- Elsa-new ﬁrmer Quanta» ﬁtnanso ‘canny-rung. .. ﬁFood- ﬁuuenetp: IE7 Ejmoo-Iv ct--mI~oh-t-l9r«o-ouv-: 'T2a-aun-i3s--a- @otnue-. |.coakzes-)l~cs-ﬁrou-s-BI-n. ngu-iuuuunm-Qua-Juneau-/ ounnev/ ustn-/ ‘routs Dlsablestyles Add User Style Sheet. .. Display Style Inlormation Display Styles By Media Type . . 0 ( O CSSZencuden Tnesuu Er § r; .w. ».-. csszengarden. com wv ZEN GARDEN Reload Linked Style Sheets Use Border Box Model View CSS A dcmonstmtjon of what can be accomplished through CSS-but-d dcstgn Select any style sheet from the lit (0 load it into this page. Download the cxamplc 1 and 1 THE ROAD TO ENLICHTENMENT Lmcn'ng il dark and dreary road lay the past rl‘l| C3 of browser-spcnﬁc tags. tncompaublc D0.Vls, broken CSS auppon. and abandoned browxtrs. Wc muat clear the mtnd ul lht past. Web cnltghtcnmcnt has been achtrvcd thanks to the ltrclcu clfuru of la like the W3C, WASP, and the FHIJUY browser crtaton The CSS Zen Gudrn xnvitcs you to rrlux and mrdmtr on the ttnportant lcuom of the mastcn Began to Stfl
48. 48. ,-— — . ‘ 1 tv C55 Zen Carder. The 324.. G‘ F C csszengarderuom «. ' _ B- Q ~” , _ Q Q BQVl»' — Non Vtsnted ' School - rave) ~ Movies - Lnbums - t“: . Carvo-ton—Farme Food - Bole Me as 5} Once - Q - q_ , . Bookmark - L3 wqmqhu - Capture - _= Seed v Q DlS3bl¢ - L Cocues - is CSS - ﬁ {arms ' E Images ' I l| ’l’0l'l'VL1hOﬂ ' Q Ml§C£l‘. 'U| €OAS ‘ / Out‘-ne - I Reslze - I Toots - Layout External ﬁle from HTML References images ': ,'. .,. .-r. ,,. .., -,-, .,~u». ~ , ;'Ayr-'. / Edit css I : demonstration of what can be accomplished through CsS~b. nsed design. Select any style sl’lf. ‘CX from the its: to load it tnto this DJHE. Ed: t('_SS S 3 X ‘I 5‘ f Search L-' css Embedded Styles 11, H2 I paddtng: 0 13%; ecrgtnz 3; color: H03: fontmetght: mr-al; } .1 { pcdatng-top: B: INTERNET STUDIO Class 2
49. 49. CS Appearance Layout External ﬁle from HTML References images Edit CSS lMTHlNEl"S'l‘UDlO Class. ‘2 Ken Starzer . .9 , ('1 5Slm(. art1en fhzlenu - + E]'i(- 9 -’. -w-v~csslenqIrden. (om C E Q“ Cc-. v_; : Q § Q ﬁ Q Q mnmu ﬁuouvmua~ : ;sam- ﬁrmu §: uovia- ﬁuonmu ‘(swollen-Same. .. groan ﬁance-hr Le gnugwlc q~-.4 eooumun-Qnt9mgm-ilEeapwa-g}sqn4- Quuu--, Lcoam-ﬁas-Qronns-in-nu- twmm. .n-0usaeuno. a-/ eu: -n-/ uuaa~lvoos- A demumtrutiun 05 what em be netutttplished through (. ‘S5~b. ued dexigtt. Select any style sheet from the int to load it utto tins D‘. lk’L‘. E css Embedded Styles
50. 50. Appearance Layout External ﬁle from HTML References images Edit CSS INTERNET STUDIO Class 2 it C55 Zen Carder. The 324.. G‘ F C csszengarden. com «. ' _ B- Q ~” , _ Q Q Bevin - Most Vts-ted ' School - rave) ~ Movies - Ltbums - t‘_n Carvo-ton—F. ‘|rme Food - Bole Me as 5} Once - Q - Q, .. Bookmark - L3 litqhltqltl - Capture - _= sm: v DISJDIE - L COCHES - is CSS - ﬁ Tovrvts ' E Images ' I Irtlomutlon - ﬂ Mtscettaneous ‘ / Out‘-ne - I Restze - I Toots - ", ‘:, ,-. ',’. (,. :_:5- , ,1 ‘’; x,‘ I, '.. ,l_-U : demonstration of what can be aceomplislted through CsS~b. tsed design. Select any style sI’lf. ‘Cl from the its: to load it tnto this DJHE. EdttC\$S S 3 X ‘I 5‘ f Search L-' css Embedded Styles 41, H2 I paddtng: 0 13%; ecrgtnz 3; color: H03: fontmetght: mr-al; } '11 { pcdatng-too: B;
51. 51. .giI'9.': 3:13;) l)ett'ttt’-xtd (hr . ~ : tnp’r html ﬁlg un.1t‘. << ﬁle -) Select 3 Design; . i. .'t< : t.tI_tir: :: -V. he -. I . . D'. ‘.‘lt; .|'. lt D0‘-I ~ Undertheseal ' by Ercstoltz 3 Make_'n Proud by». na N’r: Agho-I and soon, Jsnﬂer f OfC'lId Beauy ‘ by gun Mg -.25 % {I by Jusl-n Cray ; \$l! iiE2t1_L11 -‘ by Ben awn Kkemm ~ §akura_ ; by lalsaxa Uctda . - run . . . ' Kvo: oForest
52. 52. -- . -.-. y)-, ~-— —~ . - y_, .—. ,-}, p_/ . _‘_ ‘ y ’ ‘ , I -12.”: J‘ -= --~*' x . -, mill ( T/ ‘‘l£| “-ah! ’ . I / _ , ’.‘ "‘, _ A V0 / ,A x. . V as/ *' , ._. . ; _J ,4“ l . Adtmatstrarlanqfwltatcunbrurcumplishedtrisuullu . . . «~_--- - through (.85-based dt>. s1'gvt. Seiertuny style sheet/ ruyt the I li. <rtDt'oadt'tt'n. ’utfIt'spagr. I I . Dmwtntnntzsxstrtz 2 SI’. » t I / ’ “ . t y I . '4 § . ', * Till" RORD TC IT! ‘(L! G)lT}TN. l? i51T littering‘. a dark and dreary road lay the past rr. -lis : 4 of browser-spedﬁc tags, incompatible DOMS, and . V broken CSS support. ‘ W . >ZI. )I(7T A m; .TL"-IN’ ' ' Today. we must clear the mind of past pradices. P . V Web enli; -,hlr. -nment has been achieved thnnlsto . 5,, I 4 the tireless efforts offolk like the W3C, WaSl’ and V by 1-, ”; 5;. -,; ';z the major browser creators. . 2. Make "om Proud by . '». ’teItuel . H‘mI: t/ It'e: /t w ' C from r. -tt‘1 . The as Zen Garden invites you to relax and _me<litatc. ttr1thq. im; mtttnLl~: ssatzs of the masters. -V‘ Begin to see with chant)‘. I1.-uztt to use the (yet to _ . I be) llutr-huuo. -ed tedutiqueain new and r 5’ Orchldgmmy ; _ - A by lwt-tr: _'l. 't. lZ‘Elf'll -4 lmtreﬂtlfv fﬂeiblvnt. He u-mo wall: the mob. . — —v. -V » -’-— Oceanscape by JILSIU. Gl'l. t/ war I t 1;. r - -7.. css Co. ,Ltd. rum _‘u’OU_‘_r_ by Bt'Il)ﬂ”lll1Ait't. V‘llll I—' _ ‘ - 5- Sakura ‘ ‘ X 1. u : _ by '1ul. «tuu Lidtttla , .l—lgrt! l-lut. ... ._, ,,_m
53. 53. A demonstration of what am be aaaornplished uisuaﬁl thrmgh (X-based design. Selzd any style ﬂute! from line E5! to bad it into this page. }_ littering a dark and dreary road lay the past relits of browser-speciﬁc tags. incompatible DOMS. LT; past practices. Web enlightenment has been achieved thank; to W3C, Was? and the major browser creators. - relax and meditate on the important lessons of the masters. GARDEN csszengarden. com M_h, _n"wd so mm is nus noun J b”: ::, yu]Rd(_n , .:: ,.md There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to - use the (yet to be) time-honored techniques in new and with the web. excite, inspire, and encourage participation. To begin, View some of the existing designs in the
54. 54. CS Appearance Layout External ﬁle from HTML References images Change look, without changing HTML With one exception, the HTML code on these three pages are exactly the same. s-—. .ua_ao-u-. n.~p--a.4. __. ... —. -«-3.. .. INTERNET STUDIO Class 2 been Starzrgr
55. 55. CS Apfearance Layout External ﬁle from HTML References images Change look, without changing HTML The CSS file each page uses is different. s-‘.5-_u. .-. ..n. -.. _.. .u. —.. ¢. _n—a—c-. .—. INTERNET STUDIO Class 2 men . tar7.r. ~r
56. 56. CS Appearance Layout External ﬁle from HTML v A References images Change look, without changing HTML The CSS file each page uses is different. each with its unique code and image references. INTERNETSTUDIO Class2 men 5-Inr7.F. 'r
57. 57. I i_ESC}¥3II W WAIEET Separate content from / zzyoz. /t. INTERNET STUDIO Class 2
58. 58. LESSON IN A TWEET Sepamte [017/L’)? /‘ from / zI_V01/1‘. I I T/ I/I L . s‘tI‘z/ ctz/ mas‘ CO NTENT _VOZ/ I“/ D1131’. INTERNET STUDIO Class 2 ‘~ v n ‘H ‘: ',‘r:
59. 59. LESSON IN A TWEET Separate content fro/22 / nyoz. /t. H TML . s‘trz/ ctz/ res CONTENT ~V°”"/ W‘ LAYOUT C S S ﬂy/ ‘nznts mm’ sty/ ex e/ en/ ent_s‘ on your ‘we/ mite. INTERNET STUDIO Class 2 I‘. i' Fl , ‘II«‘. i'f| ' I
60. 60. JS JAVASCRIPT INTERNET STUDIO Class 2 men . ‘IIﬂ(7.I'. 'l
61. 61. JS JAVASCRIPT Be/ .7a= vz'or Interactivity INTERNET STUDIO Class 2 min 5IJr7I? I
62. 62. Bebavior Interactivity Visit . .rr1ar>. s_-9.<. >.c2.¢L| e,. .c. <_>. r_n INTERNET STUDIO Class 2 9 Disable ' L Coo’-ues ' , _., _,, ,v CS5 ' ﬂ Forms ' IE Images ' " u_. .. . f lnforrnatnon ' ff Misceilaneous ' / ' Ouﬁne ' I *Ken : :: Dallas 7 . U _. '3 ‘~” . Z_ 4 Van data :20l4Gooqe Te! _, - a prob
63. 63. .9 Disable - ‘ Cook. “ - CSS - . fovms ' E] Images ‘ I Inlovrrulion - . Miscellaneous ' / ' Outhnc ' I U . G Plugins Contrbuta Evans - - - Be/ savior Interactivity Don't reinvent the wheel: Javascript libraries let you hit the ground running jquery. com VIEW Source on UERY II~_ I‘ vi-lm_ Safaﬁ Opera, '. T.hv: yne_ and WU! ) What is jQuery? INTERNET STUDIO Class 2
64. 64. JS Bebavior Interactivity Don't reinvent the whee| :JavaScript libraries let you hit the ground running mootoo| s.net INTERNET STUDIO Class 2 t- - II ‘J v Q Disable ' ‘ Cookies ' / "3' CSS - . forms ' E Irnaqes v [ Information - . Miscellaneous ' / Outline - I mooroofs a compact Jcivascripv Irameworlt MooTooIs is a compact, modular, ODJQCI-Orieﬂled Javascript framework designed for the intennediate to advanced Javascript developer. It allows you to write powerful, tiexible. and cross—Drowser code with its elegant, well documented, and coherent API. l. ‘r()()TDO S COCO 't', 'Sf}l3f. ‘IS 5'. ’ C’ S'. iIf‘C£I! G'5 3'13 d. ’)f. ‘\$"'. "l'()W . 't. "y '-‘-«I<l"‘ "Q5 IS (. ‘X’. t'? ’lS'Vl'. ‘ ', / EJ£)C. lT'l(, 'I"Yr'. 'C it"‘C "A5 'Y‘(. ‘r'I"tV‘: ;It. VE1"EilfI. £‘ f‘r'i"18:} £1 rL)y' TL) I)'C)'WSE‘ t-Vld El S"d{) IO t1f‘t'}é3'SI£I"G MOOTOOLS mootooIs. net ser Compatibility ools IS compatible and lully tested Wllh Sat‘. -=. ' , at Explorer 6+, “ '(? ‘:2x, L‘; ;:r. -vi, and fl” ‘, "‘>. §. ' ooTools out now! ro ava criptwtt Ready to take your MooTools knowledge to a new level? Then gain .2. r: v:; :y oi ~'~-
65. 65. /1 7_lE‘‘‘‘’‘~’‘it' law A '""ir ‘ri ", ,. “". ,""“"° WEET jcz-vcIScript /22‘z'1zgl‘ extra / E// zctio/ m// ty to n 'I. UL'7[7]§(Ig‘L. ’ t/ ant can / 7£)['(§). /7tL')I7 / ’/Jc’ 1/5(: ’]'. ‘' L L’/ Zgclgt’/ /Zc’/ If nnn’ / nn/ ce t/ ye experie/ zce enyier. INTERNET STUDIO Class 2
66. 66. t F‘ ' . (- , I I HYPERTEXT MARKUP CASCADING JAVASCRIPT V LANGUAGE , I STYLESHEET INTERNET STUDIO Class 2
67. 67. HYPERTEXT MARKUP CASCADING HT LANGUAGE CS STYLESHEET ’AVA5CR'PT Content Appearance Behavior Structure Layout Interactivity INTERNET STUDIO Class 2 i r I] ‘.7 :
68. 68. HYPERTEXT MARKUP CASCADING HT LANGUAGE CS STYLESHEET JAVASCRWT Content Appearance Bebavior Structure Layout Interactivity V BROWSERS INTERNET EXPLORER FIREFOX CHROME SAFARI OPERA adoption 23% 19% 49% 5% 1% latest version: 10 22 27 6 15 INTERNET STUDIO Class 2 i- r n xi w_r; .-,
69. 69. HT HYPERTEXT MARKUP LANGUAGE INTERNET STUDIO Class 2 men . t. tr7.r. ~r
70. 70. HT HYPERTEXT MARKUP LANGUAGE Content Structure INTERNET STUDIO Class 2 men §Inr7.l'. 'l
71. 71. HT Content Structure View Source (option+<}+U) document type declaration html tags html attributes (bold) html attribute value comments content (regular) character entity references INTERNET STUDIO Class 2 Ken Starzer <. lﬂX. ‘!'YPI’ htl. l> Qhl lang-'on'> <haal> {ta chance-'ut£-I'> <tltlo>C88 Ion Oardam 'l'ha Beauty of C88 D¢Ilgn</ tluv ta! -'atylaahaot' mdla-‘screen’ Ira! -'/214/210.caa? v-hag20l3‘> :01-‘alternate’ typo-‘application/ raaunl‘ tltlo-'l88' Ire! -'httg: //vw. o| I1-'vl. ovport' oantant-'rldth-davleo-vldth, lultlal-acalo-1.0'> can-'authox' contact-‘Dave Bhoa'> a: -'doaorlptlon' contact-‘A danooatratlou 0! what can be aoooqllahod V! I1-'robota' contact-'all'> III! <I--(ll It 1]’ 9)) <a¢. -ript an: - ‘ac. -rlpt / htnlsalu" v. 1}: '></ acr. t'. pt> <l[oadJ. !)--> </ Ioab <[-- Vin! aourca la a feature, not a bug. Thanks for you: curiosity and interact in participating! Ban an the auhlaaioa guldcllnoa for the now and iwmvod caaaaagardamccr C883? 0! contact Prefix for Au. brovaata when noooaaary. go tupoaain; teat your layout at multiple acrooa alaaa. your browser toatlng baseline: It9¢, "cont Grout/ Fltolox/ salatl, and lw/ An: Gracolul degradation la accaptabla, and in tact highly encouraged. uu claaaoa for atyllnq. Don't uaa lb. vlb fouta an cool, juat lake nun you ban a licaaaa to abate tba fllaa. Boat an-vicoa that are applied via the G5 lilo (lo. Googlo Poata) will work Lina, noat that roquiro cuatm Dill. won't. lypoxit la anppottod, an the mate on I P090 (or usage lnatructioaar httpar/ /gltIIub. can/ noaaobluc/ can And a {our tips on building your C88 Illa:
72. 72. Content Structure i— start lag —: <tag name> INTERNET STUDIO Class 2
73. 73. Content Structure i— start lag —: <tag name> content INTERNET STUDIO Class 2
74. 74. Content Structure i— staittag —: l— endtag —: <tag name> content </ tag name> INTERNET STUDIO Class 2
75. 75. Content Structure i— staittag —: l— endtag —: <tag name> content </ tag name> A element INTERNET STUDIO Class 2
76. 76. != — startlag —: i— endtag —: comm; <tag name> content </ tag name> Structure A element line 56 <h1>css Zen Garden</ h1> 57 <h2>The Beauty of Design</ h2> 66 <h3>The Road to En1ightenment</ h3> INTERNET STUDIO Class 2
77. 77. Content Structure ﬁne 61 <abbr tit1.e= "Cascading Style Sheets">CSS</ abbr> INTERNET STUDIO Class 2 t i it ‘ll =
78. 78. Content Structure ﬁne 61 <abbr 1:it1e= "Cascaclittg Style Sltee"cs">CSS</ abbr> INTERNET STUDIO Class 2
79. 79. Content Structure start lag ﬁne 61 <abbr tit1e= "Cascatlittg Style Sltee’ts">CSS</ abbr> INTERNET STUDIO Class 2
80. 80. Content Structure start lag ﬁne 61 <abbr tit1e= "Cascatlittg Style Sltee’ts">CSS</ abbt-*> INTERNET STUDIO Class 2
81. 81. Content Structure starting T: send tag-: ﬁne 61 <abbr tit1e= "Cascading Style Shee”cs">CSS</ abba-*> INTERNET STUDIO Class 2
82. 82. Content Structure starting C: send tag-: ﬁne 61 <abbr tit1e= "Cascading Style SI1ee”cs">CSS</ ebb: -*> INTERNET STUDIO Class 2
83. 83. Content Structure content starttag T: send tag-: ﬁne 61 <abbr title= "Cascading Style Sheets">CSS</ abbr> INTERNET STUDIO Class 2
84. 84. Content Structure content starttag T: rend tag-: ﬁne 61 <abbr title= "Cascading Style Sheets">CSS</ abbr-*> INTERNET STUDIO Class 2
85. 85. Content Structure content starttag T: rend tag-: ﬁne 61 <abbr title= "Cascading Style Sheets">CSS</ abbr-*> e element INTERNET STUDIO Class 2
86. 86. Content Structure content starttag end tag element INTERNET STUDIO Class 2 Ken Starzer
87. 87. HT Content Structure content zstzm end tag re atlnbute er 5. (D C1 | —‘ / no :3‘ 9' 8. V. ’ 1; V INTERNET STUDIO Class 2 Ken Starzer
88. 88. Content content S’”"’”"’ starttag C: 2-endtag-: »j attribute - : —— value ﬁne 61 <abbr title= "Cascading Style Sheets">CSS</ abbr> e element INTERNET STUDIO Class 2
89. 89. HT HYPERTEXT MARKUP LANGUAGE HTM L Content Structure INTERNET STUDIO Class 2 men §Inr7.1?l
90. 90. luthtml Cl071f€7’ll‘ <! doctype html) < ) Structure < > charset= "utf—8“> >Hy First rrebpage</ < >Hy First hIebpage</ > Sublime Text < >He1lo. class! </ > TextEdit ( on Mac) Notepad ( on PC ) INTERNET STUDIO Class 2
91. 91. < ! doctype html> Content <lIt| I|'l-> Structure <head> <meta charset= "utf—8“> <title>My First webpage</ title> </ head> <body> <h1>My First webpage</ h1> <p>Hello, class! </p> <! -— a Ken creation -—> </ body> </ html> INTERNET STUDIO Class 2 ‘~ v n ‘H ‘: ',‘r:
92. 92. < ! doctype html> Content <l'It| |Il. > Structure </ html> INTERNET STUDIO Class 2 Ken Starzer
93. 93. < ! doctype html> Content <lItI| I1> Structure <head> </ head> </ html> INTERNET STUDIO Class 2 Ken Starzer
94. 94. < ' <3.= ;><: ’iy; :e. 7T’: ":: ‘.= ;:: » Cbnumt <html> Structure <|1ead> <meta charset= "utf—8“> <title>My First webpage</ title> </ head> <body> <h1>My First Webpage</ h1> <p>Hello, class! </p> <! -— a Ken creation -—> </ body> </ html> INTERNET STUDIO Class 2 Ken Starzer
95. 95. Content Structure <title>My First webpage</ title> INTERNET STUDIO Class 2 ll1|'. ,lv
96. 96. Content Structure <head> <meta charset= "utf—8“> <title>My First webpage</ title> </ head> INTERNET STUDIO Class 2 ? ‘."r‘I *. lr: ’.‘n'r
97. 97. < ! doctype html> Content <lIt| I|'l-> Structure <head> <meta charset= "utf—8“> <title>My First Webpage</ title> </ head> </ html> INTERNET STUDIO Class 2 hr‘ Fl , rlr‘. t'fI'l
98. 98. < ! doctype html> Content <lIt| I|'l-> Structure <head> <meta charset= "utf—8“> <title>My First Webpage</ title> </ head> <body> </ body> </ html> INTERNET STUDIO Class 2 P<"H , l-'IT7I"l
99. 99. < ! doctype html> Content <lIt| I|'l-> Structure <head> <meta charset= "utf—8“> <title>My First webpage</ title> </ head> <body> <h1>My First webpage</ h1> <p>Hello, class! </p> <! -— a Ken creation -—> </ body> </ html> INTERNET STUDIO Class 2 ‘~ v n ‘H ‘: ',‘r:
100. 100. tags you know <! doctype html> <htmI> Content Structure <head> <meta> <tit1e> <body> <h1> heading 1 <p> paragraph <! — conlnents —> try out these tags <h2>. . . <h3> headings <eIn> italics <strong> bo| d no closing tag <hr> horizontal rule <br> line break INTERNET STUDIO Class 2 r. <': n Marin: -i
101. 101. ll'Fl_lsIEllt3iE VS lilSi3li°’i‘fii' ON: ’@= tJR P EEZT INTERNET STUDIO Class 2
102. 102. Il'Fl_l: JEIl€: E INTERNET STUDIO Class 2
103. 103. Hrvie Srrcn 5ll‘['’. r.' LPGALILHV viw. Au cnuxnhvs HAYLJHKO H)5Il. JN' Mugged I An Arllur Featured Showcase: Gal E I Tl f’c. nd~c. bku. ta III'| RI LOGOPON . logopond. com 1 1:, .‘ , ,._ t-.1u: ~.. ;u ' ! h>I{'! I:
104. 104. THE DIFI INF TVE DIEI INF WINF THE DIFLINF AWARDS THF DIEIINF CONFERENCE I I ﬁ W V the worlds #1 package design website about directory robs‘ advertise register sign l"i ‘by Hoogesteger ‘ ': .—. ._ ' L’ I _ ‘ v . e - . J * = " ) Nowvoucansav ~ / ‘ mi i. .-rvi. r IH| t ’M‘1Ii7l‘ lll-'7 I iii i><vIIliHv. . lr‘<l, lA‘_IlI(_' [l'I Ilrlypl K '[ J _- § ilIpliIy» alrll illi-A . ~ aéj J J / ‘by Hoogesteger I5 a lBn'. BSllC JLIC8 Uﬂﬂlt story lrom Holand its a raw brand to: the Dutch mane! aasec aroiinc our big idea ul "Just ptcked and , '.wesse<! ' Since 1955 llull expert Piei Hoogt-zslegt-r has supolied h-5 Inca seasonal ]. AICe to hotels aro res: a.irarrs 0.11 challenge was to create ar‘ honest: siraigrit tormrc brand: to reflect ’IlS uncompromising approach to creating the purest , uices Our brand name: ‘try Hoogeslegef. 3 direct and SUB 9l'. lorward Ou' big idea. ‘[451 picked and pressed : symixxises lmll morphing I'| lO _u. ce and allows Ihe mg. -edieris to speak Icir lhemselves Frum 3" I THE DIELINE : thedieIine. com pausellnrtliouglif smart design for brands wilh purpuse E ‘ : "tit
105. 105. I CSSMAN A LATEST UPDATES (LOOKING FOR COLOURS) _ . .. T . . __r (I r-H-u-—-AI--an-an Wham 0 Salim Rahman ; U T “ } CSS MANIA cssmanIa. com LOFTENBERG ‘ ! *THES| |J| §S* I . DESIGN TO XHTML ERILLIANTIJ’ AFFORDABLE We Dsign 59° Code your Newsletter The real web hosnng iocalec In Sca n No 111! h<>: .nr>g
106. 106. ax Subscﬁbe V Find 'AI-rlclcs ‘ Logos l1lu_-itralians ‘ Websites ‘ Business Cards 4 Photos ‘ Patterns - Fouls 5 I’7m‘TL: 'IvV 'hL~1,oﬂmI“c-nv ‘*v; uq. .« m. .- :5f_1‘I. ~‘, U:: i., :oo. -«; ,I, I'I, --37. 1-, ._. a‘r. »,_g} ¢(-'-_ r,44g_>Ii'I'1'; ;‘, . ~-.0"-‘-Li/ "'§3z. ’u-. -=: i»'. '-‘ T. T: V 43:; -r T Ev. " - 0 :5 T; >: :‘~-y'}w: .t': T"': ’-: ’ "V" V T» T : ii2H?72A4717.. c’f: ’—T4 " I Kg I 1‘! :2 . “~ ‘xi 1 ‘ ‘I I Stock Designs “ ' T 6:; I I‘ V ‘‘. g; & LOGOS -- 7 1 ‘ o _’L ' 6- ‘E To I ‘ Crvsmvc-l'd/ 'IwI1Is I I ' BRILLIANTLY AFFORDABLE ‘ - J You'll Love , ;. LI :41 A / ' OC .1 , THE DESIGN II! SPIR! -Ti0II I I thedesigninspiration. com/ category/ websites ‘ '. .r3'I!1 , ~
107. 107. What are you working on? DnDb": >?e IS show and 1e I for creatwes. Sign up as a apecunom POPULAR HIGHUGHTS EVERYONE DEBUTS PLAYOFFS E cums Gum . .« an-o-on Ivo- Iogo mu5'. .'at on con tyrxmvaphy Cesnnn reruve uu . veb5:2c~ upnon-3 cons web verio' tyne EIDD bL. !!: >r ADS EV DRIDEIIJLE w. - . ... -u a Lead un Designer mtrﬁ n. :«. ».n. _~, 4.vmr; r1n». .gr, .-4, ‘ frxrrn IJIF | 'VL' {car-. ROGUES 4 :3 Curt‘: Stacks! f Adam Korobnko I Qavon Jochsch E Rob Erskine E Matthew Harpin n Amanda Wallace
108. 108. l’(‘l1II| gl1llll Quid: Llnls Hm-~, Pearce as Sam. at AICA/ NV A Cu: 0' Cr. vI|4:4: -. :~ Eco: Opuu tutu-II.1yn: n!n Sarah :1 men Cen: ':I PA w. c~. u~I GI. -nc-no Sax-ah av AIGA Wb: on-sm Amm Mllcv '. u So-: .:| < . u AICA Cm. c4sI»d Da"u. - we. 5 C| cv: k ‘ov an An: 'I<! I.-K I'c: u1cI.1 I’| I :5‘. Ccr‘1.‘LIry 0cm. v~. c IIDN wan Gom And Sam M (. .m: u~. x Nr. -waPcn1agram AIIPOSB -- Ponlobo Partners Omccs Danie-I Weil: Drawing the Process LIko many doslgvs. Pentagram’: Dance-I Weul uses s-Ietchung Io wsualnze. generals and ralnne rzs Ideas Wed has, by rvs estImahon. mo'eI'1an 375 skmchoooks. gov-g all the way back I0 1978 In a new short Illm Irecled by Ncolas Heller Well shale: some 0! I145 recani notebooks aﬁd talks abo. n how dvawung helps hm Imk Ideas Imm subqsms as Moe-(wgmg as Kanonsky and vac. ... I-I cleaners mspmng new lawns and oqacls him In mcsnl Dock lo: an Arcmecl Sun In the him an axe-Izhes Io: Weul : week My Motnorcaro. Bononon ma israol Musoum. Unlod A-«mos anamo Savoy Hotel ‘In a way we nooks n-. -come mm a dusty and record Io: My Ihoughls ma mags I see. me Ihmgs I INNK about. mama desugm | ‘m oes>gnmq, ‘snys Wel 'DIawmg Is adesngmaia Mos! Iundamenlm loot ll .5 nosugx mnklrq made wsnnto ‘ Anmocluv. humus. Puck-O¢"I. Proeuzu. Landau Du-cl wml. Vldoo 01/24/20l)'PvmIIuIn PENTAGRAM LJQ9D§I'Lt31'3;TI_-QQLTI
109. 109. IEEIVI IS INTERNET STUDIO Class 2
110. 110. VLOCK bit. l/hA225l INTERNET STUDIO Class 2 ‘~ v H ‘II ‘: ',‘r:
111. 111. Pentagranfsjames Bib: -r's redesigned Starbucks logo ~—— not used 197! NET STARBUCKS bit. I/ eQNTX INTERNET smono Class 2 _ 7°"
112. 112. Life who D: -r. .-; n any-f» -up u. ... ... » . ., p. ..». y v . .., rm: um , - __. _M, ", N| IMm| Iv. »4v Dvwqn / I'IuI‘-]u| l'r, ‘Jv vv V s. ,.. I.. ~;. D‘-MITWI , ,,W_. ‘,l‘_] '>HI II r. ‘uc. u.~. ... -nwug 0.. ... .” Wm r In) m_; v. ., u. ‘:. m.u_, 1976 1982 I989 I995 1999 1» . E I to ‘n11 1:11 1;. I: ;; - 1' x > : : " - RIO” School Ek_, m,: m|. ‘" Pvtidle ! I.g}I School Cilllujt '~'>rkf: .|:9
113. 113. RAINBOW IN YOUR HAND ’ masa-ka. com/ htmUrainbow. html A INTERNET STUDIO Class 2
114. 114. LESSON IN A TWEET 77.75 . x'0/1/2‘/ an you m~‘zzfu is 0/2/_ 1/ as‘ . s‘fr0/lg ax Z‘/ .78 / >20/2/5//1 yozz '-2'5 (/ é"/ T/I(’('{. INTERNET STUDIO Class 2 I v II ‘M =
115. 115. Inﬂuence / Jappens 7.0/Jen you’re looking for it. Inspiration / Jappens 7.0/Jen you’re not. INTERNET STUDIO Class 2 Ken Starzer
116. 116. INSPIRATION . ..I\$ different for everyone . ..g: an't be scheduled . ..I\$ elusive
117. 117. RATIO I . ,. }.: . , .. .IS E‘zI'I'I'€i'<-2i‘I'I' ror eve I"y0i"I8. 7738/7 a'on’1‘ worry (I/ )0]/ Z‘ -w/ am‘ ~wo2'/ <5‘ for f/ ye/71. Finn’ oz/1‘ -w/ .701‘ Two)‘/ cs / oryoz/ . INTERNET STUDIO Class 2
118. 118. INSPIRATION . ..can't be Scheduled. 77.75/2 ironic. ’ 015)/ >oI‘f1// zifias‘ fo 1'/ It/ ‘czI_s‘c yo; /7‘ c/ .7mza’. s‘ for 1.715]? /.I‘(Iz‘I'0/I. INTERNET STUDIO Class 2 P<"I1 , I-'II'7I"l
119. 119. INSPIRATION . ..| s elusive. 77.78/I / _7(l‘Z’(’ (I /9/an fo (‘(1/51.‘/ /I1’ if. INTERNET STUDIO Class 2 I21‘ I’! ,uII‘. I'fI' I
120. 120. IPAD SKETCHBDOK 5.1;. malts -: c~rv~ E W K S E 0 M FIELD NOTES MEMD BDDK EDWARD TUFTE GRAPH PAPER 4 . -52.. ... .
121. 121. LESSON IN A TWEET I/ g//1/U/ Ia’ 2'5 /7o2‘2‘o‘uw/ , / "m/ >z'mf1'o/ z ix m/ vim’. CIFIIXL’ 0/J/ >o2‘f1/zzif/ "ox fo M/ ‘/7 if, (7/zz/ /.711-1.’: [I / >/(Ill / so ((1/Jfz/21) if. INTERNET STUDIO Class 2 Ia-' n ‘-IF1’, 'I'I