Bring me the head of Zumo Juice... - Graphic Design Forum and Web Design Forum

zumojuice · #1 (**permalink**) 19-04-2008, 01:09 PM

I am available for design work on both a freelance or permanent basis.

If you have a project or a job, demand my blood: demand the head of zumojuice...

http://bringmetheheadof.zumojuice.me.uk/

flick · #2 (**permalink**) 19-04-2008, 01:20 PM

:) nice one

crazyleaf · #3 (**permalink**) 19-04-2008, 02:02 PM

He he, nice.

PaulClark · #4 (**permalink**) 19-04-2008, 04:30 PM

Nice designs. But what the heck is a 'hypsometer'?

Not so sure about the website though. Frames, AND tables for layout. Strictly 20th century.

OK, truce. Don't beat me up about my total lack of design ability, and I'll go easy on your code.

zumojuice · #5 (**permalink**) 19-04-2008, 05:15 PM

It's a kind of laser product (I have no idea what though).

Well it uses grids, but that translates to tables. As for the frames, if you can show me an easy way to have that menu so I can update it without frames, I'll be open to answers.

I've given google stuff to chunk on that page and links to the navigation should people come in on other pages...

Web design programs are either clunky front end, with nasty code results or back-end code machines with no visual notion at all.

LeadMagnet · #6 (**permalink**) 19-04-2008, 07:25 PM

Several easy ways... none that i can explain easily.

PaulClark · #7 (**permalink**) 19-04-2008, 10:36 PM

Quote:

Originally Posted by zumojuice

if you can show me an easy way to have that menu so I can update it without frames, I'll be open to answers.

Depends what you mean by "easy": easy to create without coding? easy to maintain? inexpensive?

Easy to create the page without coding:

Well, you're going to need a WYSIWYG tool. Dreamweaver's pretty easy to use; CuteHTML is cheap and good. I'm sure people can suggest a bunch of other alternatives. But you're a graphic designer so I'm guessing you've mastered stuff like Illustrator and Photoshop that I find total incomprehensible, so you should be OK to learn your way around most front end development tools.

Easy to maintain:

Easiest way to maintain your site navigation is to integrate your design into a CMS with a good templating engine. That way you get the design the way you want it, and as you add pages to the site the CMS will automatically update the menus for you.

Cheap:

Cheapest is to hand code your HTML in a plain text editor. With a site as simple as yours, no problem. There are plenty of free Open Source CMS around, but you usually have to be pretty comfortable playing with the setup of your server to go down that route. Then there are others - like ours - that are easy and pretty cheap, but not free.

How would I do it? If I were building for a client, it would be CMS every time, so the client can add pages him/herself. If it were my own site and I wanted to do it at minimum cost and host on ultra-cheap hosting, I'd build a plain HTML site with the menu as a list of links styled by CSS. What you need is something like this:

Example page - 'annie-gray.html'

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>My title</title>
        <link rel="stylesheet" type="text/css" href="zumostyles.css" />
    </head>
<body id="page_annie_gray">
        <div id="container">
            <div id="left">
                <img width="224" height="131" src="http://www.zumojuice.me.uk/zumo_navitype.jpg"/>
                <ul id="navigation">
                    <li class="nav_annie_gray"><a href="annie-gray.html">Annie Gray - Website Design & Build.<span class="highlight">*New*</span></a></li>
                    <li class="nav_snug"><a href="annie-gray.html">Snug - Branding & Posters</a></li>
                    <li class="nav_personal_cards"><a href="personal-cards.html">Personal Business Cards</a></li>
                    <!-- Add all the other nav items here -->
                </ul>
            </div>
        <div id="right">
            <p class="highlight">Details:</p>
            <p>Website Design &amp; Build for Annie Gray.</p>
            <p>An academic site for a leading food historian and interpreter.</p>
            <p>Site Live at:<br>
            <a href="http://www.anniegray.co.uk" target="_blank">http://www.anniegray.co.uk</a>
            </p>
        </div>
            <div id="content">
                <img width="410" height="296" border="0" alt="" src="http://www.zumojuice.me.uk/portfolio/anniesite_1.jpg"/><img width="410" height="273" border="0" alt="" src="http://www.zumojuice.me.uk/portfolio/anniesite_2.jpg"/><br/>
                <img width="410" height="278" border="0" alt="" src="http://www.zumojuice.me.uk/portfolio/anniesite_4.jpg"/>
            </div>
        </div>
</body>
</html>

A few things to notice here. First, the selected doctype is 4.01 transitional. If you select a strict doctype and screw up your code, your pages may not display at all. With a transitional doctype the browsers will try harder to figure out what you meant.

Second, this is a deliberately minimal implementation to demonstrate some principles. For the benefit of the pedants: yes, I know I've left out alt tags on the images, title tags on the links, could have put the columns in a more semantically perfect order, shouldn't be using 'presentational' names like 'left' and 'right' for the divs, etc etc. Can we get on?

Now the really important thing: notice the BODY element has id="page_annie_gray". I'll explain why this is important when we get to the navigation styles.

Right. So now we need some styles. Here they are:

HTML Code:

/* Minimal stylesheet, mainly to show navigation concepts */

/* Some basic styling for the main blocks of content */

body {
    background-color:grey;
    }

#container {
    width: 960px;
    margin: 10px auto;            /* First value is top and bottom margin; second is left and right.  'Auto' centers */
    padding:10px 0;
    color: grey;
    background-color:white;
    }
    
#left {
    float:left;                        /* Float allows other 'block' elements to go alongside */
    width:230px;
    padding: 0 10px;
    }

#right {
    float:right;
    width:230px;
    padding:150px 10px 0 10px;   /* All padding values stated: top right bottom left */
    }

#content {
    margin: 10px 250px;
    text-align:center;
    }


/* Now the navigation.  Remember, it's just a list of links */

#navigation {
    margin-top:9px;
    list-style:none;    /* Turn of the default list bullets */
    }

#navigation li {
    padding:0;                    /* Remove the default padding */
    margin: 3px 0;            /* Set small vertical margins; zero left and right margin */
    }
    
#navigation li a {
    color:grey;                    /* Set the color of links in the list; overrides default blue */
    text-decoration:none;        /* Turn off default link underlining */
    }

#navigation li a:hover {        /*The :hover pseudo-class is triggered by mouseover */
    color:blue;
    text-decoration:underline;
    }


/* Now the cool bit... */
/* I'm applying a rule for 'selected state' of navigation.  This applies to: */
/* the annie gray nav link only when displayed on the annie gray page, */
/* the snug nav item only when displayed on the snug page, and so on.  */
/* To complete the site, you'd add all the pages and nav items here */

#page_annie_gray #navigation li.nav_annie_gray a,
#page_snug #navigation li.nav_snug a,
#page_personal_cards #navigation li.nav_personal_cards a
 {
    color:#01AFEE;
    text-decoration:none;
    cursor:default;
    }

As explained in the code, the cool navigation trick here is using the id on the body element to say which is the 'current' page, and in that way to apply a 'selected' style to the navigation item. The exact same navigation list can be applied to every page, and depending upon what ID is put on the specific page's BODY element, that will determine the nav item that is in 'selected' state.

What this means is that you don't need any server-side technologies to make the selected navigation item change as you click up and down the nav list, even though you are not varying the navigation page-to-page. And what that further means is that if you know how to do Server Side Includes on your host, you can make the navigation an Include and edit it in one place for every page. Even if you don't know how to do that, a tool like Dreamweaver or CuteHTML - and loads of others - will allow you to do site-wide search and replace, so maintaining the identical nav list across all pages is quick and easy.

Or quicker and easier than bl**dy Photoshop, anyhow.

[EDIT: I've uploaded this HTML and CSS to my server. You can see it here ]

LeadMagnet · #8 (**permalink**) 20-04-2008, 12:40 AM

Yeah, i'm too lazy to read that. Let alone type it out. lol

zumojuice · #9 (**permalink**) 20-04-2008, 08:47 AM

I use Golive and well I was effectively copy and pasting my navigation onto every page (find and replace seemed to **** up more times). Frankly, it just became a bit of a ball-ache, so I opted for the frames solution.

I am interesting much in the front-end visual side of the web, rather than the back end stuff to be honest. I know enough to get by. Much of the odd coding is GoLive's way of doing stuff really...

On a side note, I stuck a page through the W3 mark up checker - 47 errors. I cleaned it on their site and tried again, 38. Barely worth it.

Toon · #10 (**permalink**) 20-04-2008, 10:50 AM

Use

MenuMachine

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Zumo	Toon	Off Topic	15	10-05-2008 07:00 AM
head designs?? anyone up for it?	simpletouch	Graphic Design Competitions	19	19-04-2008 05:40 PM
scratching my head	drewbie_wan	Flash Forum	6	13-02-2008 10:17 PM
This is doing my bald head in	gospastic	Flash Forum	0	05-02-2008 07:24 PM
MP3 may bring the end to the CD.....	Toon	Off Topic	15	10-08-2007 08:11 PM