Today’s featured website:
http://www.staggeringbeauty.com/
Drawing activity
Pick a website and do a quick sketch of its layout, paying attention to columns and other clearly defined sections of the page. You are only drawing page sections using lines and boxes.
CSS Continued
Today we are going to practice using CSS to create page layouts. You will learn how to create div sections of your webpage- how to position them with CSS and how to use them in HTML.
We will begin with a simple page that has a skinny sidebar section on the left and a larger section on the right for content.
To begin:
– Open Notepad++
– Create a new page by going to File, New
– Copy and paste the following code into Notepad++. Don’t forget to delete and replace the quotation marks.
– Please save this as csslayout1.html
<html>
<head>
<title>CSS Layout Practice</title>
<style type=”text/css”>
#sidebar {
position: absolute;
top: 0;
left: 0;
width: 20em;
}
#content {
margin-left: 20em;
}
</style>
</head>
<body>
<div id=”sidebar”>
<ul>
<li><a href=”#”>Boring link #1</a></li>
<li><a href=”#”>Help me be more interesting!</a></li>
<li><a href=”#”>Another boring link</a></li>
</ul>
</div>
<div id=”content”>
<h1>Boring Headline</h1>
<p>I’m a paragraph in bad need of a cool font!</p>
<p>I’m another sad paragraph.</p>
</div>
</body>
</html>
How can we…
– Change the font?
– Make the links more interesting?
– Change the background color of the different sections or even have two different background images?
– Add another section or change the size or locations of the current ones?
– Add a border around a section?
Remember, you can copy and paste things from your previous files into this one!
What happens if…
You switch the div tags in the HTML?