Week 3

Exercise 1: Positioning using div tags
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="This is an HTML5 example">
<meta name="keywords" content="Smoothies, SmoothieWorld">
<link rel="stylesheet" href="styles1.css">
</head>
<body>

<div id="wrap">

<div id="masthead">
</div>


<div id="mainnav">
</div>


Week 3
Page 1
<div id="innerwrap">

<div id="sidebar">
<h2>Top Rated Smoothies</h2>
<h3>The Funky Orange</h3>
<p>Submitted by user LJ, this smoothie has recieved over 200 5 star ratings and its <strong>orange juice</strong>
and <strong>banana</strong> base make this a great choice for breakfast!
</p>
<h3>The Tropical KickBack</h3>
<p>Submitted by user MK, this smoothie combines the exotic ingredients passionfruit and mango. The result is an
invigorating and delicious beverage that is great any time of the day.
</p>
</div>


<div id="main">
<h1>SmoothieWorld is your #1 destination for smoothie recipes.</h1>
<h2>Our mission statement </h2>
<p>We here at SmoothieWorld are devoted to making the smoothie beverage a daily part of your life. Whether it be
for breakfast, lunch or even dinner, smoothies are great way to get the nutrition you need and have fun while doing it.</p>
<p>The recipes on our site have all been tested in our lab of smoothie experts. Other smoothie sites might have
more recipes or feature more exotic fruits than you'll find here, but we feel that quality beats out quantity and novelty any
day. We also believe the best recipes come from you the reader, that's why we encourage you to join our smoothie
community. Learn more</p>
</div>

</div>

<div id="footer">
<p>Footer </p>
</div>
Week 3
Page 2


</div>

</body>
</html>
Save as layout.html and preview in the browser
Exercise 2: Styling the wrap div

Create a new file named styles1.css, and enter the following:
#wrap{
background-color: #e0b3b9;
}
View your .html file. The wrap div has encompassed all the content on the page.
Add the following to your #wrap element:
width:960px;
border: 0;
If you resize your browser window now, the text no longer reflows. This can be addressed by adding:
margin: 0 auto;
to #wrap. This ensures that the main div will always appear centred in the browser window.
(this is a margin shorthand rule the 0 defines the top and bottom margins, and the value auto defines right and left.)
Exercise 3: Styling the masthead div

Enter the following to your .html file:
<img src = "images/smoothieworld_logo.png" width = "200" height = "150" alt = "smoothieworld_logo"/>
As you can still see the colour of the wrapper, create a rule in your .css file as follows:
#masthead{
Week 3
Page 3
background-color: #fff;
}
Exercise 4: Styling the nav div

We will do more with this later in the exercise, but for now, add the following to your .css file:
#mainnav{
background-color: #c2c895;
height: 40px;
}
Exercise 5: Styling the sidebar div

#sidebar{
float:left;
width: 300px;
background-color: #ccc;
}
The float property is borrowed from print design, where it is called runaround or text wrap. When an element is floated, it is
removed from the normal flow of the HTML.
Exercise 6: Styling the main div

#main{
width: 600px;
float: right;
background-color: #ada446;
}
Exercise 6: Using the clear property
Week 3
Page 4
Adding the clear property to an object means that no floated elements are allowed to its sides, and you can specify whether
this is right, left or both.
Add the following to your .css file:
#footer{
clear:both;
background-color: #ba2b22;
}
Exercise 7: Creating a list-based navigation

Open your .html file, locate the mainnav div, and enter the following:
<ul>
<li><a
<li><a
<li><a
<li><a
<li><a
<li><a
</ul>
href
href
href
href
href
href
=
=
=
=
=
=
"index.html">Home</a></li>
"about.html">About</a></li>
"recipes.html">Recipes</a></li>
"submitrecipe.html">Submit a Recipe</a></li>
"forum.html">Forum</a></li>
"contact.html">Contact Us</a></li>
In your .css file, add the following:

#mainnav li{
list-style:none;
float: left;
}
(list-style: none removes the bullet points from the list.)
Once you have looked at the updated .html file in the browser, add the following to the mainnav li rule:
width: 120px;
Week 3
Page 5
height: 25px;
background-color: #ccc;
text-align: center;
border-left: 1px black solid;
border-right: 1px black solid;
There is no way to vertically centre objects in CSS, so in this case, we will use the line-height property to move the nav text
downwards.
Add the following to the mainnav li:
line-height: 25px;
Exercise 8: Attaching a second stylesheet

Sometimes we need to attach more than one stylesheet to a document. Alter the stylesheet that you created last week to
read as follows:
body {
font-family: "Trebuchet MS", Tahoma, Arial, sans-serif;
font-size:100%;
}
p
{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 0.875em;
line-height:1.75em;
}
h1
{
font-size: 1.5em;
line-height:1.5em;
font-weight: normal;
Week 3
Page 6
}
h2,h3{
font-size:1.125em;
font-weight:lighter;
text-transform:uppercase;
letter-spacing:0.2em;
}
h3
{
font-size:0.875em;
letter-spacing:0.1em;
}
ul
{
font-size: 0.875em;
list-style-position: inside;
}
ol
{
font-size: 0.875em;
}
Name it base.css and add the following line to the head section of your .html document:
<link rel="stylesheet" href="base.css">
Save and view your .html file.
Week 3
Page 7

Week 3

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Week 3

Hochgeladen von

Copyright:

Verfügbare Formate

Exercise 1: Positioning using div tags

Exercise 2: Styling the wrap div

Exercise 3: Styling the masthead div

Exercise 4: Styling the nav div

Exercise 5: Styling the sidebar div

Exercise 6: Styling the main div

Exercise 6: Using the clear property

Exercise 7: Creating a list-based navigation

In your .css file, add the following:

Exercise 8: Attaching a second stylesheet

Das könnte Ihnen auch gefallen