Tutorial1 - Part 2

Tutorial 1BFinishing 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.

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

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

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.

1

2

At this point your site should look like this:

Step 4:Go to the index.html tabWe’re going to add the tower div INSIDE the #coffeeinfo divAfter 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 tabNow we’re going to add position: relative; to #coffeeInfoBecause 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.htmlUnder the logo div create a div with the id nav.Create an unordered list, with list items that willbe 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 childand #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;}

Save the file to apply this change.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:link { color: #000;}

selector 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.

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

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

Link Psuedo-Classes

Step 13:Now let’s add the café info in the index.htmlWithin 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" />

Date post:	30-Nov-2014
Category:	Technology
Upload:	hstryk
View:	751 times
Download:	0 times

Tutorial1 - Part 2

Technology