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 ...
Step 2:Open Komodo Edit & open yourindex.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      ...
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:...
Step 5:Go to the styles.css tabNow we’re going to add position: relative; to #coffeeInfoBecause a page element with relati...
Step 6:Now let’s style the #tower div.#tower{    position: absolute;    top: 70px;    right: -20px;}Save the file to apply...
Step 7:Make a functioning menu in index.htmlUnder the logo div create a div with the id nav.Create an unordered list, with...
Step 8:Go to styles.css1. IMPORTANT: Add position: relative; to #content – so that when we absolutely position   #nav it w...
Step 9:Go to styles.cssThen style the ul in the #nav div to float right.#nav ul{    float: right;}Save the file to apply t...
Step 10:Now style the links by starting with the li.Notice we are styling the li’s using the menu class.The . signifies th...
Step 11:Let’s give our links some room to b r e a t h eand get rid of the underline.#nav li.menu a {    text-decoration: n...
Step 12:Now let’s style the default colors and create arollover effect when we hover over the link.#nav li.menu a:link, #n...
CSS pseudo-classes are used to add special effects to some selectors.The syntax of pseudo-classes:selector:pseudo-class {p...
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:ho...
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 di...
Step 14:Style #info in styles.css.#info{    display: block;    width: 520px;    height: 55px;    float: right;    font-wei...
Step 15:Style #leftInfo and #rightInfo.#leftInfo{    float: left;}#rightInfo{    float: right;}Save the file to apply this...
Now the first page to the website is complete! You also have the styles set for adding other pages to your website.When yo...
Upcoming SlideShare
Loading in …5
×

Tutorial1 - Part 2

770 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
770
On SlideShare
0
From Embeds
0
Number of Embeds
311
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Tutorial1 - Part 2

  1. 1. Tutorial 1BFinishing our website in Komodo Edit
  2. 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.gifcoffee.giflogo.giftower.png
  3. 3. Step 2:Open Komodo Edit & open yourindex.html and styles.css files.
  4. 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.
  5. 5. At this point your site should look like this:
  6. 6. 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.
  7. 7. 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 absolutelyposition 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. Allelements that are contained within that parent are called "child" elements.http://webdesign.about.com/cs/css/qt/tipcsschild.htm
  8. 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. 9. 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 listitem an anchor tag to the corresponding htmlpage (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. 10. Step 8:Go to styles.css1. 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. 11. Step 9:Go to styles.cssThen style the ul in the #nav div to float right.#nav ul{ float: right;}Save the file to apply this change.
  12. 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 anelement on the same page.#nav li.menu { display: block; float: left; height: 40px;} li li li liNotice that the li is the childand #nav is the parent.In essence this code is saying,“In the instance of the elementwith the id of nav, all instances of lithat have the class of menu willhave these following attributes.”
  13. 13. Step 11:Let’s give our links some room to b r e a t h eand get rid of the underline.#nav li.menu a { text-decoration: none; padding-left: 30px; font-weight: bold;} 30px 30px 30px 30pxSave the file to apply this change.TIP:By default the browser puts anunderline underneath links toshow that it is a link.Browsers also have a defaultACTIVE color, HOVER color andVISITED color.
  14. 14. Step 12:Now let’s style the default colors and create arollover 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.menua:hover, #nav li.menu a:focus { color: #13A8A2;}Save the file to apply this change.You just used a pseudo class!…wait… what?
  15. 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 canwhitespace appear after the colon. selector pseudo-class a:link { color: #000; } property value
  16. 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/pseudoclassesLink Psuedo-Classes Image via: http://www.w3schools.com/cssref/css_selectors.asp
  17. 17. 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 leftInfoand 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. 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. 19. Step 15:Style #leftInfo and #rightInfo.#leftInfo{ float: left;}#rightInfo{ float: right;}Save the file to apply this change.
  20. 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" />

×