ICCT Wiki

User Tools

Site Tools

Trace:
eg-259:case-studies:1

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
eg-259:case-studies:1 [2007/10/15 22:57] – eechriseg-259:case-studies:1 [2012/02/05 13:29] (current) – [Case Study 1: CSS for Layout] 82.20.153.71
Line 1: Line 1:
 +~~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]]
 +