– Presentations of week 1 questions
– delicious and wikis
For next week:
Create a Liquid three column layout
Create a liquid layout with three columns using the following layout:
Your layout has to
– Load the same background image in three different pages.
– Position a background image in the right hand column away from the text
– Align the text in the Header to the left
– Align the text in the right hand column to the right
– Remove the line under all links, change their color to a color of your choice.
– Specify the width of the right and left column to be 300 px
– Make sure you use padding and margin to create the same text flow as in the example.
—-
As a group create the layout and develop a presentation that explains how you did it.
Post your answer as a comment to this post.
Here are some questions to get you started:
1: What is CSS and how does it work. (How do you use CSS to control the style and layout of multiple Web pages all at once. What is the correct HTML for referring to an external style sheet?)
2: What does the style attribute do and what do declaration, property and values refer to?
3: What is the CSS box model?
4: what is an element? How do you add a background color for all <h1> elements? How do you Set the background color of different elements?
How do you set an image as the background of a page?
5: What is a liquid layout? How do you build a liquid layout with css?
6: What is the difference between inline and block-level elements? How do you use them?
7: How do you size blocks, what do you need to know?
8: Explain the different ways to position elements on the screen. What is CSS floating?
CSS stands for Cascading Style Sheet
CSS would define how the HTML elements are displayed when you view the web page.
CSS was created for storing the all the formatting tags that were being put into HTML pages.
HTML only intends to define the content of a document and the World Web Consortium created CSS to for the purpose of stylizing the HTML elements.
Styles are saved in external .css files, web creators are allowed to change the appearance and layouts just by editing one single file.
you can control the style and layout of multiple web pages all at once by inserting the above code into the HTML and CSS pages at the very top.
The correct HTML for referring to an external style sheet is link below
this is always added to the head section.
Declaration refers to the style attributes and it consists of property and value.
Property refers to the style attributes you would like to change, for example “color”.
Value is the amount of pixels or the colour value that is set for the property to change into.
CSS box model refers to the design and layout. It consists of margins, borders, padding and the HTML content.
An element is the CCS or HTML syntax, for example
,
You can select a background colour for an element by changing the colour code in the body selector.
i.e h1 {background-color:#6495ed}
You can add a background image to an element by inserting the following link under a specific selector.
i.e. body {background-image:url(‘paper.gif’)}
Liquid Layout will comply with the viewport on the computer screen when you maximize or minimize the size of you window.
It moves in and out and is utterly based on its percentages in the entire window layout set by the developer.
When creating a liquid layout with CSS, you need to:
1. start with a layout grid.
-Determine how many columns you want and how wide it will be.
-Convert pixel-based measurements into percentage units.
-the percentage measurements will be calculated by the browser
-Divide the grid into columns and gutters and set the percentages for these elements in advance.
-Gutters prevent the columns becoming too wide in wide browser windows.
2. convert the columns into
-Add float, width, margin-left values into the CSS code when creating the columns.
i.e. (borrowed from http://www.maxdesign.com.au/presentation/liquid/#definitions)
#col1
{
float: left;
width: 48%;
margin-left: 3%;
}
#col2
{
float: left;
width: 20%;
margin-left: 3%; }
#col3
{
float: left;
width: 20%;
margin-left: 3%;
}
3. Add header and footer
-apply #header {margin-bottom: 10px;} at the very top of CSS code
-as for the footer, insert #footer {clear: both;} at the very bottom of CSS code.
4. Apply padding to the text with the container
i.e. (borrowed from http://www.maxdesign.com.au/presentation/liquid/#definitions)
h2, p { margin-left: 7px; margin-right: 7px;}
A block element would take up the full length and width available.
For example if you hover your mouse on a link, the area around the actually text would also be highlighted and clickable.
An inline element does the oppose as it would only take up necessary width.
You can change how an element is displayed by inserting the following exaple link:
li {display:inline}
When positioning the content on the webpages, you can either do static positioning that’s set by default.
Or you can do fixed positioning, so that the text will not move when the window is scrolled.
Example:
p. pos_fixed {position:fixed; top:30px; right:5px;}
CSS float allows an element to be pushed to the left or right, it’s often for the purpose to clear spaces for readable text that might be otherwise blocked or hard to covered up by the image.
Elements can only float horizontally, not vertically.
The elements after the floating element will comply with the movement and move around it.
For example, if an image goes to the right, the text after it will move to the left.
You can also float more than one element, several images can be set right next to each other using the following code:
.thumbnail
{ float:left; width:110px; height:90px; margin:5px; }
You can turn off float by inserting the {clear:both;} code to stop the elements from floating.
Sources
http://www.w3schools.com/Css/default.asp
http://www.maxdesign.com.au/presentation/liquid/
–Jessica P. Ren
Here is the link to our groups Liquid Layout post:
Included are 2 completed layouts and a PDF outlining our process.