Week 6

Assignment: List Navigation

Create two examples of navigation blocks using list elements. One will be vertical, the other horizontal. At least one of these examples must use a background image to represent the list bullet. One of the navigation lists must also be an expanding menu (use the effects shown last week to show and hide elements beneath the lists).
Add a link to this assignment on your project portal. I will review this assignment along with your assignment from last week in class next Tuesday.

Reading

Book: CSS Mastery
Chapter: 5
Pages: 86-109

Lecture Notes

Starting with List Default Style Clearing

ul {
   padding:0;
   margin:0;
   list-style-type:none;
}

In Class Exercise Template

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Links + Styling + Hover Effects</title>
		<style type="text/css"><!--
		ul {
		   padding:0;
		   margin:0;
		   list-style-type:none;
		}
		a{
			text-decoration:none;
		}
 
		.vertList {
			list-style-image:url('http://ipirates.net/wp-admin/images/media-button-video.gif');
			list-style-position:inside;
		}
		.vertList ul{
			margin-left:20px;
			display:none;
		}
		.vertList li{
			width:120px;
		}
 
		li:hover ul {
			display:block;
		}
 
		.horzMenu ul{
			display:none;
		}
		.horzMenu li {
			float:left;
			margin-right:10px;
			width:88px;
			height:27px;
			line-height:27px;
			background-image:url('img/navBtn.gif');
			text-align:center;
		}
		.horzMenu li:hover{
			background-image:url('img/navBtn_on.gif');
		}
 
		.horzMenu ul li,.horzMenu ul li:hover{
			background-image:none;
		}
		.horzMenu ul a {
			color:#090;
		}
		.horzMenu ul a:hover {
			color:#F30;
		}
 
 
		.horzMenu a{
			color:#fff;
		}
 
		.horzMenu a:hover{
			color:#0CF;
		}
 
		.horzMenu, .vertList{
			margin:10px;
		}
		.clear {
			clear:both;
		}
        --></style>
	</head>
    <body>
        <ul class="vertList navigation">
                <li><a href="home.htm">Home</a></li> 
                <li><a href="about.htm">About</a></li> 
                <li>
                	<a href="services.htm">Our Services</a>
                    <ul>
                        <li>item 1</li>
                        <li>item 2</li>
                        <li>item 3</li>
                	</ul>
                </li> 
 
                <li><a href="work.htm">Our Work</a></li> 
                <li><a href="news.htm">News</a></li> 
                <li><a href="contact.htm">Contact</a></li> 
        </ul>
 
        <ul class="horzMenu navigation"> 
                <li><a href="home.htm">Home</a></li> 
                <li><a href="about.htm">About</a></li> 
                <li>
                	<a href="services.htm">Our Services</a>
                    <ul>
                        <li><a href="asdf.html">item 1</a></li>
                        <li>item 2</li>
                        <li>item 3</li>
                	</ul>
                </li> 
                <li><a href="work.htm">Our Work</a></li> 
                <li><a href="news.htm">News</a></li> 
                <li><a href="contact.htm">Contact</a></li>
        </ul>
        <div class="clear"></div>
 
        <div id="footer" class="clear">&copy; 2009 AE</div>
    </body>
</html>

CSS Menu

Eric Meyer (css guru) has a great tutorial on a Pure CSS Menu

Server Side Includes

Typically, this is where Seattle Central’s WEB120 class goes through using SSI (server side includes) with .shtml (or “server html” files).
However, the fact is that nobody uses them in the real world.
In the real world, you will use PHP :)

<?php
include('header.php');
?>
<p>page content</p>
<?php
include('footer.php');
?>

Since you can’t run PHP code on the school Windows computers locally, you must either upload your php files to a server to test your code or you can use a LAMP package like Uniform Server, which runs on the school computers :)

Uniform Server

  1. Download the Uniform Server zip file and extract it.
  2. Run Server_Start.bat

This will map a drive (W:) to the ‘udrive’ folder in that directory. If it doesn’t work, use the UniController.exe file to start it on a different drive letter. Your website will be running from W:\www\ (or whichever drive you loaded).

Once you have Uniform Server running, you can access your local server in your browser here: http://localhost

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Web Development Courses, Rants, Tutorials and Hacks