Chapter 15

  1. Given the above code sample what is the containing element for the h2 and p blocks?

    The sidebar div class.

  2. Clearly and precisely describe in your own words the characteristics and differences in the following CSS positioning properties:

    • Normal flow (static) – basic layout, every block-level element appears on a new line.
    • Relative – you can push elements up, down, left, or right.
    • Absolute – text starts at the top of a page and ignores headers.
    • Fixed – text (heading) that does not move when you scroll up or down.
    • Z-index - allows you to choose which box overlaps the other. Higher the number, the closer it will be.
    • Floating – takes a selection of text or heading and places it left or right, and allows text to flow around it.

  3. What units or values are used to control and define the position and size of elements in fixed width layouts?

    Pixels and percentages.

  4. What are liquid layouts?

    Liquid layouts expand and contract when the browser is made bigger or smaller.

  5. What are the four advantages of layout grids Creates a predictable design that is easy to add more new content in a consistent manner.
  6. Look long and carefully at pages 389-390. It shows some of the possibilities of the grid on which you will build your personal web portal and Wordpress template designs. Just look and notice the different pixel values. Ok, as an answer to this question, just write, “JT, I looked carefully at pages 389-390 carefully.”

    Looked at it. I now understand pixels on a 12 grid layout.

  7. How big is the gap between each column in the 960/12 column grid? And how much gap on the left and right-hand sides of the page?

    Margin is set at 10 pixels, which creates a 20 pixel gap. Gap to the left and right are 10 pixels each.

  8. What are CSS frameworks and what are their advantages and disadvantages?

    CSS frameworks are pre-written codes that can be used (kind of like Bootstrap). The advantage of using a CSS framework is that it saves time and they have been tested for bugs in different browsers. Disadvantages include too much unnecesscary code and use class names that you do not decide.

Chapter 17

Please list out and individually describe how and when you should use these new HTML5 elements:

  • header - This is where the logo and navigation is (at the top).
  • footer - At the bottom of the page. Good place for copyright, contact info, author etc.
  • nav - Typically lives in the header. Contains links to other pages within website.
  • article - Lives in the content portion of a page.
  • aside - Similar to a sidebar or widget.
  • hgroup - A group of headings that are recognized as one title with subtitles.

By way of review and since these new tags will be used in place of div tags, please describe how and when div tags should be used.

Div tags are used as place-markers for containers.