ICCT Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
~~SLIDESHOW~~


====== Case Study: CSS for Layout ======

**Olde Case-study 1**: Last given on Tuesday 15th February, 2011.

**Lecturer**: [[C.P.Jobling@Swansea.ac.uk|Dr Chris P. Jobling]].

In this case study we shall demonstrate the positioning features of CSS by //theming// a WordPress blog. We will no longer be doing this exercise, instead I have made it and some additional tutorials and resources for WordPress theming available as an optional case study.






===== Case Study: CSS for Layout =====

  * Before you start you should have installed [[eg-259:practicals:1|XAMPP]] and [[eg-259:practicals:2|WordPress]].
  * The introduction to this case-study is based on Chapter 6 of Robert W. Sebasta, //Programming the World-Wide Web//, 3rd Edition, Addison Wesley, 2006. 
  * The case study itself is the [[eg-259:case-studies:1#dissection_of_a_wordpress_theme|Dissection of a WordPress theme]] by John Godley.









===== Contents of this Case Study =====

  * [[eg-259:case-studies:1#introductioncss_for_element_positioning|Introduction: CSS for Element Positioning]]
  * [[eg-259:case-studies:1#dissection_of_a_wordpress_theme|Dissection of a WordPress theme]]
  * [[eg-259:case-studies:1#an_html5_theme|An HTML 5 Theme]]




===== Learning Outcomes ====

//At the end of this case-study you should be able to answer these questions//:

   - What is CSS-P?
   - Describe all of the differences between the three possible values of the ''position'' property.



===== Introduction: CSS for Element Positioning =====

Web Application "Theming" (or "Skinning") and [[eg-259:dhtml|DHTML]] relies on element positioning features of CSS 2.

    * CSS-P was released by W3C in 1997
    * Completely supported by IE6 and NS7
    * The position of any element is dictated by the three style properties: ''position'', ''left'', and ''top''
    * The three possible values of ''position'' are ''absolute'', ''relative'', and ''static''



===== Absolute Positioning =====

<code html>
<!DOCTYPE html>
<!-- absPos.html
Illustrates absolute positioning of elements
-->
<html lang="en">
  <head>
    <meta chaset="utf-8" />
    <title> Absolute positioning </title>
    <style>
      /* A style for a paragraph of text */

      .regtext {
        font-family: Times;
        font-size: 14pt;
        width: 600px
      }
      /* A style for the text to be absolutely positioned */

      .abstext {
        position: absolute;
        top: 25px;
        left: 50px;
        font-family: Times;
        font-size: 24pt;
        font-style: italic;
        letter-spacing: 1em;
        color: rgb(102,102,102);
        width: 500px
      }
    </style>
  </head>
  <body>
    <p class = "regtext">
      Apple is the common name for any tree of the genus Malus, of
      the family Rosaceae. Apple trees grow in any of the temperate
      areas of the world. Some apple blossoms are white, but most
      have stripes or tints of rose. Some apple blossoms are bright
      red. Apples have a firm and fleshy structure that grows from
      the blossom. The colors of apples range from green to very
      dark red. The wood of apple trees is fine-grained and hard.
      It is, therefore, good for furniture construction. Apple trees
      have been grown for many centuries. They are propagated by
      grafting because they do not reproduce themselves.
    </p>
    <p class = "abstext">
      APPLES ARE GOOD FOR YOU
    </p>
  </body>
</html>
</code>



===== Relative Positioning =====

<code html>
<p style = "position: relative;
            left: 5px; top: 10px;">
</code>
    * If no ''top'' and ''left'' properties are specified, the element is placed exactly where it would have been placed if no position property were given
    * But it can be moved later
    * If ''top'' and ''left'' properties are given, they are offsets from where it would have placed without the position property being specified
    * Example: [[/eg-259/examples/css-p/relPos.html|relPos.html]]

----

<code html>
<!DOCTYPE html>
<!-- relPos.html
Illustrates relative positioning of elements
-->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title> Relative positioning </title>
  </head>
  <body style = "font-family: Times; font-size: 24pt;">
    <p>
      Apples are <span style =
      "position: relative; top: 10px;
      font-family: Times; font-size: 48pt;
      font-style: italic; color: red;"> GOOD </span> for you.
    </p>
  </body>
</html>

</code>


===== Static Positioning =====

    * The default value if position is not specified
    * Element is placed as if it had a position value of relative
    * But top or left properties cannot initially be set nor changed afterwards
    * Element cannot be moved if it is made implicitly or explicitly static!






===== Dissection of a WordPress theme =====

Case-study is by John Godley, //WordPress Theme Guide//, [[http://urbangiraffe.com|Urban Giraffe.com]] published on [[http://urbangiraffe.com/themes/guides/|Apr 22, 2005]] 
    * [[http://urbangiraffe.com/2005/04/12/themeguide1/|Pulling a WordPress theme apart]] 
    * [[http://urbangiraffe.com/2005/04/22/themeguide2/|Complete design, header, and footer]] 
    * [[http://urbangiraffe.com/2005/04/30/themeguide3/|The sidebar]] 
    * [[http://urbangiraffe.com/2005/05/20/themeguide4/|The content]] 

I have prepared a [[eg-259:case-studies:cheat-sheet-cssp|cheat sheet]] for myself which summarizes the design steps.

===== An HTML5 Theme =====

  * [[http://themeshaper.com/2010/07/02/toolbox-html5-starter-theme/|Toolbox: An HTML5 WordPress Starter Theme]] -- by Ian Stewart of Automattic.
  * Example theme [[http://toolboxdemo.wordpress.com|toolboxdemo.wordpress.com]]
===== Summary of this Case Study=====

  * [[eg-259:case-studies:1#introductioncss_for_element_positioning|Introduction: CSS for Element Positioning]]
  * [[eg-259:case-studies:1#dissection_of_a_wordpress_theme|Dissection of a WordPress theme]]
  * [[eg-259:case-studies:1#an_html5_theme|An HTML 5 Theme]]



===== Learning Outcomes =====

//At the end of this case-study you should be able to answer these questions//:

   - What is CSS-P?
   - Describe all of the differences between the three possible values of the position property.
   - Expect more to be added to the [[eg-259:review:csslayout|review questions]]!


===== Homework Exercises =====

  - Follow the case-study on your own copy of WordPress. Use the instructions for the fluid layout.
  - Style the menu in the three-column style.
  - Complete the style makeover.

===== What's Next? =====

**Getting Stated with JavaScript**

    * [[eg-259:lecture5#overview_of_javascript|Overview of JavaScript]]
    * [[eg-259:lecture5#object_orientation_and_javascript|Object Orientation and JavaScript]]
    * [[eg-259:lecture5#general_syntactic_characteristics|General Syntactic Characteristics]]
    * [[eg-259:lecture5#primitives_operations_and_expressions|Primitives, Operations, and Expressions]]
    * [[eg-259:lecture5#screen_output_and_keyboard_input|Screen Output and Keyboard Input]]


[[eg-259:practicals:2|Previous Lecture]] | [[eg-259:home]] | [[eg-259:lecture5|Next Lecture]]