Lecture 8: CSCI E-1 Spring 2013

Transcript

1. Computer Science E-1
   Lecture 8: Web Development
   

   View Slide

2. Exam II
   

   View Slide

3. Review 4/22 7:30-8:30pm
   

   View Slide

4. Web Server
   

   View Slide

5. View Slide

6. HTML
   

   View Slide

7. CSCI E-1
   

   View Slide

8. CSCI E-1
   

   View Slide

9. CSCI E-1
   

   View Slide

10. CSCI E-1
    

    View Slide

11. 
    

    View Slide

12. 
    

    View Slide

13. 
    

    View Slide

14. Page title
    

    View Slide

15. 
    

    View Slide

16. 
    
    ...
    ...
    
    

    View Slide

17. Paragraph text
    

    View Slide

18. Bold text
    

    View Slide

19. Italicized text
    

    View Slide

20. Bold and italic
    

    View Slide

21. 
    Item 1
    Item 2
    Item 3
    
    

    View Slide

22. 
    Item 1
    Item 2
    Item 3
    
    

    View Slide

23. 
    
    table cell
    
    
    

    View Slide

24. Google
    

    View Slide

25. 
    

    View Slide

26. Example
    

    View Slide

27. Valid HTML
    

    View Slide

28. http://validator.w3.org/
    

    View Slide

29. CSS
    

    View Slide

30. Selectors
    

    View Slide

31. Selectors
    • p
    

    View Slide

32. Selectors
    • p
    • #foo
    •
    

    View Slide

33. Selectors
    • p
    • #foo
    •
    • .bar
    •
    

    View Slide

34. Rules
    

    View Slide

35. #foo {
    color: blue;
    }
    

    View Slide

36. #foo {
    color: blue;
    }
    

    View Slide

37. #foo {
    color: blue;
    }
    

    View Slide

38. #foo {
    color: blue;
    }
    

    View Slide

39. #foo {
    color: blue;
    }
    

    View Slide

40. #foo {
    color: blue;
    }
    

    View Slide

41. .bar {
    background: red;
    width: 300px;
    }
    

    View Slide

42. p {
    font-size: 18px;
    }
    

    View Slide

43. Box Model
    

    View Slide

44. Box Model
    

    View Slide

45. #navbar a {
    margin: 10px;
    }
    

    View Slide

46. h1, p {
    padding: 10px;
    }
    

    View Slide

47. Block vs. Inline
    

    View Slide

48. <br/>

    View Slide

49. Example
    

    View Slide

50. 
    

    View Slide

51. Example
    

    View Slide

52. Layout
    

    View Slide

53. 
    

    View Slide

54. 
    

    View Slide

55. 
    

    View Slide

56. Example
    

    View Slide

57. Bootstrap
    

    View Slide

58. http://twitter.github.io/bootstrap/
    

    View Slide

59. CSS Grid
    

    View Slide

60. View Slide

61. View Slide

62. Example
    

    View Slide

63. Flat UI
    

    View Slide

64. http://designmodo.github.io/Flat-UI/
    

    View Slide

65. Example
    

    View Slide

66. Setting up a Website
    

    View Slide

67. Setting up a Website
    • find a domain name
    

    View Slide

68. http://instantdomainsearch.com/
    

    View Slide

69. Registrars
    • GoDaddy
    • NameCheap
    • Network Solutions
    • Name.com
    

    View Slide

70. Setting up a Website
    • find a domain name
    • find a web host
    

    View Slide

71. Web Hosts
    • 1&1
    • BlueHost
    • DreamHost
    • HostGator
    • Linode
    

    View Slide

72. Setting up a Website
    • find a domain name
    • find a web host
    • point the domain to the host
    

    View Slide

73. Setting up a Website
    • find a domain name
    • find a web host
    • point the domain to the host
    • upload files via FTP/SFTP
    

    View Slide

74. Computer Science E-1
    Lecture 8: Web Development
    

    View Slide