Shorecrest Web Design: September 2011

Thursday, September 29, 2011

Web 2

PLACING A HEADER AND FLOATING AN IMAGE:

.header {
    background-image: url(header.gif);
    position: absolute;
    height: 250px;
    width: 700px;
    right: 600px;
    top: 0px;
}

How Elements Float

Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.
A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.
The elements after the floating element will flow around it.
The elements before the floating element will not be affected.
If an image is floated to the right, a following text flows around it, to the left:

Example

img
{
float:right;
}

EC - coming soon.

Tuesday, September 27, 2011

Web Design 1

Making a SC Site using Dreamweaver and Tables:

First we need to make a basic table with 1 column and 5 rows

Then in the 4th row, make another table with 2 columns and 1 row

All of these should have no border etc.

Then off to photoshop to create!

web 2

for a banner:

This is the basics of location etc:

ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }

This is the code that gives your text a border/box/style:

ul.navbar li a {
text-decoration:none;
display:block;
border-top:1px solid #0BB5FF;
padding:5px;
background:#236B8E;
color:#eee
}

This is the code for adding a rollover:

ul.navbar li a:hover {
background:#36DBCA;
color:#000
}

All you need to call to in your HTML is the navbar:

Thursday, September 22, 2011

css containers

example for your .css file

.center_div
{
border:5px dashed black;
margin-left:auto;
margin-right:auto;
margin-top:200px;
width:90%;
opacity: .9;
height:340px;
background-color:#d0f0f6;
text-align:left;
padding:38px;
}
and for your html page: in < > but blogger will not allow them:

div class="center_div"

/div

ALWAYS define a site in DW

Dreamweaver Basics

Today we are getting to know the insert and properties windows on Dreamweaver. We are using them to re-create our summer site, without having to hand code anything.