CD202 Interface,

Representation & Sequence

Problem solving internet design issues

Course created by Sarah Phillips

sphillips@lecturers.billyblue.edu.au

BBCD Melbourne BAPDCOM Version 1 – April 2013.

http://bbcdcomdes.weebly.com/

Video

Moving from Photoshop to Fireworks to a web prototype

http://webdesign.tutsplus.com/videos/fireworks-videos/fireworks-pro-series-from-photoshop-to-fireworks-to-the-web/

Intro to CSS

CSS Basics

CSS stands for Cascading Style Sheets and controls the style and formatting of your content.

CSS can allow for different viewing on different platforms including mobile, text readers and what your page will look like when printed.

CSS Basics

CSS Zen Gardenhttp://www.csszengarden.com/

Intro to CSS

Embedding an external style sheet

<link rel=”stylesheet” type=”text/css” href=“styles.css” />

This goes in the HEAD section of your HTML file.

CSS Basics

All CSS is written in the format:

selector { property: value }

CSS Basics

When you nest one element inside another, the nested element will inherit the properties assigned to the containing element. Unless you modify the inner elements values independently.

A font declared in the body will be inherited by all text in the file no matter the containing element, unless you declare another font for a specific nested element.

CSS basics – The ID selector

The id Selector The id selector is used to specify a style

for a single, unique element. The id selector uses the id attribute of the

HTML element, and is defined with a "#”.

HTML: <div id=“wrapper”></div>CSS: #wrapper{

property:value;}

CSS Basics – The Class selector

The class Selector The class selector is used to specify

a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

This allows you to set a particular style for any HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a "."

CSS Basics – The Class selector

ExampleHTML: <div

class=“column”></div>CSS:

.column{property:value;

}

When do you use each?

Use an ID selector for elements that only appear once per page (eg header, menu, footer etc)

Use a class selector for elements that will be used multiple times (eg. Paragraphs, columns etc)

Common properties

color:#ffffff background:url(image.jpg) #ffffff; font-family:Verdana, Geneva, sans-serif; font-size:10px; margin-left:auto;

Commenting within CSS/* This is a comment */

You can find a more comprehensive list here: http://w3schools.com/css/css_reference.asp

CSS & DIV tags

DIV tagsYou can style a DIV tag and use CSS that affects all the content within it. For example

<div id=”container”> Site contents go here</div>

The CSS file contains this:#container{ width: 500px; margin-left: auto; margin-right:auto; padding: 20px; border: 1px solid #666; background: #000000;}

CSS Basics

Spans Spans are very similar to divisions

except they are an inline element versus a block level element. No line break is created when a span is declared.

You can use the span tag to style certain areas of text, as shown in the following: <span class=”italic”>This text is italic</span>

CSS basics

Combining selectors:

h1, h2, h3, h4, h5, h6 {color: #009900;font-family: Georgia, sans-serif;

}

CSS Exercise

Creating a horizontal navigation bar When creating a horizontal navigation bar,

best practice is to use an unordered HTML list, styled with CSS. Sounds ridiculous, but with a few css styles, it works.We need to style both the list itself (<ul>) and the list items (<li>) For example...

ul#navigation { float:left margin: 0; padding: 0; width: 100%; background-color: #039;

}

CSS Exercise cont.

List items are normally block elements, but by switching the display from block to inline, you force the list elements to line up next to one another.

ul#navigation li { display: inline; }

The following code changes the link colour when you hover over.

ul#navigation li a {color:#333; } ul#navigation li a:hover { color: #999;}

Floating vs absolute positioning

Absolute positioning allows you to set a position to the pixel.

Can use absolute positioning to make divs overlap. Eg http://www.bouliste.com.au/

Floats are used with dynamic content or flexible layouts.

Floats

Source: http://css-tricks.com/all-about-floats/

Floats

Read me!http://css-tricks.com

/all-about-floats/

Google Fonts

http://www.google.com/fonts/

Google have a range of webfonts that are easy to use within your website. You can download the font to design with it in Photoshop and they also give you the code to stick into your HTML/CSS files to implement it.

CSS Exercise

Create a new HTML & CSS file and link them together.

In the HTML file, create a header div, a navigation div, 3 columns of content and a footer. (With dummy content please!)

In CSS, use floats to position all of your content.

Use a minimum of 10 CSS styles to style the look of your content.

Use a font from Google Fonts

Supplementary links

http://www.cssbasics.com http://w3schools.com/css/

css_reference.asp