1 / 26

HTML & CSS – Building Webpages

HTML & CSS – Building Webpages. WRA 210 10 .28.13. Today’s Agenda. Review : external stylesheets Review: transforming a list Intro: the <div> object Intro: the CSS Box Model Activity: build a layout with CSS. Review [yet again]: the DOM. What is it? What does it do?

uriel-petty
Download Presentation

HTML & CSS – Building Webpages

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML & CSS – Building Webpages WRA 210 10.28.13

  2. Today’sAgenda • Review: external stylesheets • Review: transforming a list • Intro: the <div> object • Intro: the CSS Box Model • Activity: build a layout with CSS

  3. Review [yet again]: the DOM • What is it? • What does it do? • What does it make possible? • Who/what uses it?

  4. Review: external style sheets • Describe each: • Inline • Embedded • External • Describe how inheritance works • Link to your stylesheet from the <head> • <link rel="stylesheet" href="style.css">

  5. Review: transforming a list • How did we make a list into a nav menu? • Discuss the manipulation of the list object

  6. New Object Type: <div> • Short for division • Used to contain other objects • can contain any object type • can even contain other <div> objects • Purpose is to group similar/related content • example: header objects • example: footer objects • Can have id and style attributes

  7. Example <div> object <div id="header"> <h1>This is My Cool Website</h1> <ul id="navigation"> <li><a href="index.html">Home</a></li> <li><a href="about.html">About Me</a></li> <li><a href="resume.htm">Resume</a></li> </ul> </div><!-- #header -->

  8. Activity • Download markup test file • Examine content • Discuss: how can we use <div> objects to organize the content into sections? • Create the <div> objects and contain objects • be sure to open and close both tags corrects • be sure to give <div> objects id attributes

  9. Discuss • What do the <div> objects accomplish?

  10. The CSS Box Model • Every object has 5 properties that control size and positioning • margin • padding • border • height • width • Everything (everything!) is a box

  11. Margin :: The CSS Box Model • the space outside the border of an object • creates physical distance between objects • control value of all sides or for individual sides • value managed in pixels • examples: • margin:20px; • margin-bottom:10px

  12. Border :: The CSS Box Model • the solid edge around objects • between margin and padding • can control values for every edge or individual edges • examples: • border:thick dashed blue; • border-top: thin solid red;

  13. Padding :: The CSS Box Model • the space inside the border of an object and the contents of that object • can control values for every edge or individual edges • examples: • padding:20px; • padding-top: 5px;

  14. Width :: The CSS Box Model • The width of an object from padding left to padding right • Does not include values from padding, border, or margin • One value: • width:900px;

  15. Height :: The CSS Box Model • The height of an object from padding top to padding bottom • Does not include values from padding, border, or margin • One value: • height:100px;

  16. The CSS Box Model • The properties of objects that control positioning and size • Allows us to create layouts, move objects around to match our designs

  17. Box Model Experimentation • Add embedded style tags • Add more spacing between list items • Experiment: box model properties on paragraph and header objects? • Experiment: box model properties on the <body> object? • Task: turn list into a navigation menu, consider from box model perspective

  18. Activity: Use Box Model for Layout • Task: create a basic "inverted L" layout • Step-by-step, building it together • Build from scratch • Right now, create an HTML file

  19. The "Inverted L" • Header, left navigation, content right, footer • Built semantically, in pure CSS • Compare against old-school table method

  20. Steps to Building a Layout • Wireframe • Build structure with <div> objects • Populate structures with conent • Use CSS to position <div> objects • Profit

  21. Step 1: Wireframe

  22. Step 2: Build structure with <div> • Notice: all <div> objects have id • Notice: use of nested <div> objects • Notice: indenting to read of structure easier • Notice: using a comment when closing <div> <div id="header"> objects go here </div><!-- #header -->

  23. Step 3: Populate Structure with Stuff • Add the following to your <div> structure • In header, a header and a subheader • In navigation, a list with at least four list items (links) • In content, a subheader and at least three paragraphs • In footer, a paragraph with footer info

  24. Step 4: Position <div> with CSS • Plan of attack: • assign width value to container, center it • assign width to navigation, float it (wut) • position content object to sit next to navigation • make sure margins work • WTF is float??? (store this one away for next week)

  25. Save Everything • You will probably want this for reference. • You can always reuse code.

  26. For Next Time • Research the box model, if you need to • Sketch out div structure for your landing pages (paper is fine) • HTML5 structural objects

More Related