2. 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
4. 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.
6. 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.
7. 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;
}
Save the file to apply this change.
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
8. Step 6:
Now let’s style the #tower div.
#tower{
position: absolute;
top: 70px;
right: -20px;
}
Save the file to apply this change.
Voilà! 70px
-20px
9. 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>
Save the file to apply this change.
10. 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;
}
Save the file to apply this change.
11. Step 9:
Go to styles.css
Then style the ul in the #nav div to float right.
#nav ul{
float: right;
}
Save the file to apply this change.
12. 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.”
13. 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
Save the file to apply this change.
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.
14. 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;
}
Save the file to apply this change.
You just used a pseudo class!
…wait… what?
15. 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
16. 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
17. 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>
Save the file to apply this change.
18. 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;
}
Save the file to apply this change.
19. Step 15:
Style #leftInfo and #rightInfo.
#leftInfo{
float: left;
}
#rightInfo{
float: right;
}
Save the file to apply this change.
20. 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" />