Tutorial1 - Part 2

Tutorial 1B
Finishing our website in Komodo Edit

Step 1A:
You MUST have access to the folder called “dropsite” which I have provided.
Please put the folder on your external drive.
Within the “dropsite” folder, there should be another folder called “img”.
Witin the “img” folder there should be 4 images:

bkg.gif

coffee.gif

logo.gif

tower.png

Step 2:
Open Komodo Edit & open your
index.html and styles.css files.

1 Step 3:
Make sure you are on the tab for
index.html

1. Click on the Globe icon, this is
the Preview option.

2 2. A dialogue box will
appear, Select:
“Preview with this file.”
Under Preview Using field, select
“In a Komodo Tab”

This will give you a preview of
your document within Komodo.

At this point your site should look like this:

Step 4:
Go to the index.html tab
We’re going to add the tower div INSIDE the #coffeeinfo div
After the Lorem ipsum text type:

…vestibulum ultrices.

<div id="tower">
<img src="img/tower.png"/>
</div>

Save the file to apply this change.

Step 5:
Go to the styles.css tab
Now we’re going to add position: relative; to #coffeeInfo
Because a page element with relative positioning gives you the control to absolutely
position children elements inside of it.

#coffeeInfo{
height: 226px;
width: 448px;
border: 3px #13A8A2 solid;
padding: 12px 80px 12px 12px;
float: right;
-webkit-border-radius: 5px;
border-radius: 5px;
margin-right: 20px;
position: relative;
}


Tip: In CSS a parent element is an element that contains other elements. All
elements that are contained within that parent are called "child" elements.
http://webdesign.about.com/cs/css/qt/tipcsschild.htm

Step 6:
Now let’s style the #tower div.

#tower{
position: absolute;
top: 70px;
right: -20px;
}


Voilà! 70px

-20px

Step 7:
Make a functioning menu in index.html
Under the logo div create a div with the id nav.
Create an unordered list, with list items that will
be the names of our pages. Then give each list
item an anchor tag to the corresponding html
page (which we will create later).

<div id="nav">
<ul>
<li class="menu"><a href="index.html">Home</a></li>
<li class="menu"><a href="coffee.html">Specialty Coffee</a></li>
<li class="menu"><a href="cafe.html">Cafe</a></li>
<li class="menu"><a href="about.html">About</a></li>
</ul>
</div>


Step 8:
Go to styles.css

1. IMPORTANT: Add position: relative; to #content – so that when we absolutely position
#nav it will be position relative to the #content div & not the <body>

Then style the #nav div.

#nav{
width: 520px;
height: 50px;
border-bottom: 14px solid #13a8a2;
position: absolute;
top: 20px;
right: 20px;
display: block;
}


Step 9:
Go to styles.css

Then style the ul in the #nav div to float right.

#nav ul{
float: right;
}


Step 10:
Now style the links by starting with the li.
Notice we are styling the li’s using the menu class.
The . signifies that we are styling a class.
Why are we using a class instead of an id?
Because we are styling multiple occurrences of an
element on the same page.

#nav li.menu {
display: block;
float: left;
height: 40px;
}
li li li li

Notice that the li is the child
and #nav is the parent.

In essence this code is saying,

“In the instance of the element
with the id of nav, all instances of li
that have the class of menu will
have these following attributes.”

Step 11:
Let’s give our links some room to b r e a t h e
and get rid of the underline.

#nav li.menu a {
text-decoration: none;
padding-left: 30px;
font-weight: bold;
}

30px 30px 30px 30px

TIP:
By default the browser puts an
underline underneath links to
show that it is a link.
Browsers also have a default
ACTIVE color, HOVER color and
VISITED color.

Step 12:
Now let’s style the default colors and create a
rollover effect when we hover over the link.

#nav li.menu a:link, #nav li.menu a:visited {
color: #000;
}

#nav li.menu a:active, #nav li.menu
a:hover, #nav li.menu a:focus {
color: #13A8A2;
}


You just used a pseudo class!

…wait… what?

CSS pseudo-classes are used to add special effects to some selectors.

The syntax of pseudo-classes:
selector:pseudo-class {property:value;}

CSS classes can also be used with pseudo-classes:
selector.class:pseudo-class {property:value;}

A pseudo-class starts with a colon :
No whitespace may appear between a type selector or universal selector and the colon, nor can
whitespace appear after the colon.

selector pseudo-class

a:link {
color: #000;
} property value

a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

a:active MUST come after a:hover in the CSS definition in order to be effective!!

Image via:
http://reference.sitepoint.com/css/pseudoclasses

Link Psuedo-Classes

Image via:
http://www.w3schools.com/cssref/css_selectors.asp

Step 13:
Now let’s add the café info in the index.html
Within the nav div create a div with an id of info.
Within the info div create two spans, one with the id leftInfo
and one with an id of rightInfo then input the information.

<div id="info">
<span id="leftInfo">620 State St. New Haven, CT</span>
<span id="rightInfo">Hours: Monday - Friday 6am - 11pm<br/>
Saturday 9am - 6pm<br/>
Sundays: Closed</span>
</div>


Step 14:
Style #info in styles.css.

#info{
display: block;
width: 520px;
height: 55px;
float: right;
font-weight: bold;
font-size: 11px;
color: #13A8A2;
margin-top: 5px;
margin-left: 20px;
}


Step 15:
Style #leftInfo and #rightInfo.

#leftInfo{
float: left;
}

#rightInfo{
float: right;
}


Now the first page to the website is complete! You also have the styles set for adding other pages to your website.
When you create coffee.html, about.html and cafe.html remember to link to the styles.css file using:

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

Tutorial1 - Part 2

More Related Content

What's hot

Viewers also liked

Similar to Tutorial1 - Part 2

More from hstryk

Recently uploaded

Tutorial1 - Part 2