Web Design Turorial - Cafe Website

Slides for schoo WEB-campus
http://schoo.jp/class/251

Transcript

1. ೥݄೔ TDIPP
   8&#DBNQVT ۚᖒ௚ؽ カ フ ェ のWebサイ ト を作 っ て 8FCσβ Π ϯ ͱ جૅ ٕज़ΛֶͿ ͷ
2. ۚᖒ௚ؽ Naoki Kanazawa http://designless.net
3. 8FCΛθϩ͔Β ࡞ͬͨ ͜ ͱ͕͋Γ ·͔͢ ʁ
4. 8FCΛθϩ͔Β ࡞Δ ͜ ͱͷҙຯͱ ͸ ʁ
5. ख࢓ࣄ
6. 
   ಡΉ 
   ༡Ϳ 
   ࡞Δ 
   ֶͿ Reading Playing Making Studying
7. ಡΉ 
8. IUUQKVTUJOKBDLTPODBXPSET@KBQBOIUNM ͜Ε͸΢ Σ ϒϖʔδͰ͢
9. ઃܭਤ
   ʹ
   ׬੒ਤ
10. HUMAN WEB COMPUTER
11. SERVER CLIENT
12. )5.- $44 +"7"4$3*15 "%0#&
    803%13& 1)1 4,*--
    61
13. 4,*--
    61 
14.  ༡Ϳ
15. IUUQEFTJHOMFTTOFUFEJUPS 8FCσβΠ ϯͷ࠭৔
16. <λά>Hello World!<λά> HTML html, h1, h2, h3 h4, h5, h6, p, ul, li, a, img, div, span, em, strong...
17. <html> <head> ϝλ৘ใ </head> <body> <h1>࠷ॳʹ఻͍͑ͨ͜ͱ</h1> <p>આ໌ͳͲͷจষ</p> <h2>࣍ʹ఻͍͑ͨ͜ͱ</h2> <p>આ໌ͳͲͷจষ</p> <ul> <li>άϧʔϓ</li> <li>άϧʔϓ</li> <li>άϧʔϓ</li> </ul> </body> </html> HTML ίϯϐϡ ʔλʹ఻͑ Δ ͱ ͍͏ ͜ ͱ
18. CSS ηϨΫλ { ϓϩύςΟ : ஋ ;} color, background, font-size, text-align width, height, margin, padding, border float, clear, position...
19. ਓʹ΍͞ ͍͠૷০ͱ Ϩ Π Ξ΢ τ CSS
20. JavaScript Π ϯ λϥΫγ ϣ ϯͳԋग़ͱ֦ு
21. jQuery ˈ(ηϨΫλ) .ϝιου(ύϥϝʔλ) click, hover addClass, removeClass fade, toggle, animate
22. H T M L C S S J S ಺༰ ૷ ০ ԋग़
23. IMAGE
24. index.html style.css flower.jpg CSS images
25. PATH σΟϨΫτϦߏ੒ ϑΥϧμ/ϑΝΠϧ ໊.֦ு ࢠ ../ϑΥϧμ/ϑΝΠϧ ໊.֦ு ࢠ
26.  ࡞Δ
27. TOOL ϒϥ΢β ʴ ΤσΟλ Google Chrome Mozilla Firefox CotEditor terapad
28. IUUQEFTJHOMFTTOFUEBUBTDIPP[JQ ૉࡐͷμ΢ ϯϩʔ υ
29. ϖϦΧϯΧϑΣ _resource _design _www
30. ͳͥɺ Χϑ Σͷ8FCαΠ τ ͳͷ͔ ʁ
31. ๺Ԥ ੨ࢁ Pelican Cafe www.pelican-cafe.com
32. BUSINESS VISUAL CODE CONCEPT
33. HTML = ৘ ใߏ ଄ λάͷೖΕࢠ 1
34. ଐੑ 2 src, href, class, id
35. ϘοΫεϞσϧ 3 reset.css
36. jQuer yϓϥάΠϯ 4 bxslider, colorbox
37. jQuer y࢓ ֻ͚ 5 fade, scroll,
38. Google Map API 6
39. Ϩεϙϯγϒɾ΢Σϒσ βΠϯ 7 media queries, fluid
40.  ֶͿ
41. ࢼߦࡨޡ
42. SANDBOX 8FCσβΠ ϯͷ࠭৔
43. ANNTENA Π ϯϓ ο τͷ࢓૊Έ
44. 8FCαΠ τ ͸Ͳ Μͳϝ σ Ο Ξ ʁ Ϩϙʔ τ՝୊