Group B Week 3

Download these files.

This Week

Download this.

Templates

Hi, zipped templates folder contains

simple page templates that cover

basic layout

masthead with navigation

CSS based image rollovers

depth ordering of overlaping items

opacity

there is also the completed walkthrough from week 2

plus a sample 'example project folder' which suggests how you might organise your project on disk

enjoy

Mark

The Old Week Three

Click here to download files for the Week Three CSS (Cascading Style Sheet) exercises.

Dreamweaver Intro

I've updated the files to simplify things a bit and included how to notes + a schematic of the site.

Download updated walkthrough files and support material.

Editing the blogger header

To add a background image without unsightly borders lines, gaps and other such stuff.

this is an optional exercise

Is based on using the default 'Minima' template
and a graphic 662*110 pixels

Adding a header Image

In blogger admin
1. go to Layout, Page Elements
2. click on Header
upload your web ready image file
if you don't want the header text choose 'Instead of title and description'
3. preview it to make sure its ok
at this point there will still be the 2 border lines
4. save

Editing the Template

Next to edit the template to loose the border lines.
in blogger admin
1. go to Layout then Edit HTML
2. click on 'Download Full Template'
backup your template before proceeding
remame the file
'blog-template-source.xml'

duplicate the file and rename as
'blog-template-amend.xml'

3. you can either edit the downloaded file or amend the template directly in blogger
scroll down until you come to
/* Header
-----------------------------------------------

there are 4 CSS style rules to amend
these are:

#header-wrapper
#header-inner
#header
#header h1

paste over them with the following:

#header-wrapper {
width:662px;
margin:0 auto 10px; margin:0 auto 0;
border:1px solid $bordercolor; border: 0 none #fff;
background-color: #888;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto; margin: 0;
}

#header {
margin: 5px; margin: 0;
border: 1px solid $bordercolor; border: 0 none #fff;
text-align: center;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0; margin:0 5px 0;
padding:15px 20px .25em; padding:20px 20px .25em;
line-height:1.2em; line-height:3.6em;
text-transform:uppercase; text-transform: none;
letter-spacing:.2em;
font: $pagetitlefont;
font-size: 3.5em;
}

download a commented version of the code

later in the unit (week 2!) some of whats being done here will be made clearer
essentially what I've done is get rid of the borders and adjusted the margins and padding
margins, padding and borders have very specific and distinct attributes and behaviours with CSS

My First Webpage

Click on this to download a completed version of today's 'my first web page' project.

A Post With A Picture

Eye Candy

Yum Yum.