From top to bottom: unstyled, illusionary gloss, true glossy menu buttons
“Ooh, look at that website with nice sleek and shiny page tabs. I bet it turns all the geeks heads. Why can’t I be like that guy?”
Recognize those thoughts? Of course you do. We all have feelings of inadequacy at times. Luckily for us regular guys, website sexiness can be learned. With a few easily digested and remembered tips you too will style websites that will make other webmasters sick with envy.
Back in October last year I showed you how to use CSS to highlight HTML elements when specific id and class names coincide on a page. For those who didn’t pay attention or who missed the lesson the original article is here and the example pages with all the required CSS and HTML displayed on them are here.
When I first wrote that guide I intended to follow it up with another one to show how to jazz-up those page tabs. I’ll be honest, I forgot to do it. Will you forgive me if I write that guide now? Please… Pretty please…. Whether you do or do not, I don’t really care because I know that deep down inside, somewhere close to the bottom of your soul you have already forgiven me; and here is that long awaited guide for those who want to know how to create glossy look navigation tabs. As with the previous guide, the HTML and CSS code for each page is printed on the page it effects. So now’s the time for you to switch on some music, relax and read as I show you how to turn this
The basic layout - no jazz
into this
Decorated CSS Controlled Navbar Tab
and this
Real glossy-look navbar buttons
It is advisable for you to look at the old example pages and the new example pages here and here just so you get an idea of where we are headed. The HTML and CSS for each page is included on each page it creates. Instructions to create true glossy tabs follow the simple “illusionary” method
Before we play around with the menu tabs, let’s jazz-up the pages and give them a little style 8-)
Most websites use one background style and image for every page. I think that’s a little bland. Granted, JournalXtra uses one style for nearly every page but JournalXtra is a Wordpress blog and not a finely crafted piece of HTML art. If I wanted to use separate designs for each page of JournalXtra then I would create multiple templates but I’m too lazy to do that for my own blog.
To give each page it’s own distinct look we must give them each an identity. The best place to attach this identity is its <html> tag. For our demonstration pages, we will use
<html id="one">
<html id="two">
<html id="three">
<html id="four">
<html id="five">
<html id="six">
Next we add a CSS control for each <html> tag. The CSS for <html id=”one”> controls the HTML element of page number one and looks like this:
html#one
{
background-image: url(smoke-background-page-one.jpg);
background-position: top left;
background-repeat: no-repeat;
}
That CSS gives the page a nice non-repeated background image which is drawn from the utmost top-left of the page.
The <html> tag for each page with an ID is styled by similar CSS. It looks more complicated than it is. Once you begin to do it you will find it easy to do. Look at the HTML and CSS printed on the example pages to get an idea of how individual HTML tags are written and styled.
The CSS that is common to all <html> tags is written separately to the identified <html> styles, like this:
html
{
width : 100%;
background-color: #000000;
color: #ffffff;
}
Have a look at page number one to see all the HTML and CSS laid out side by side.
Now that’s out of the way, let’s sleek up the navigation bar with glossy tabs
In the original guide we learned to instruct browsers to display page tabs differently according to whether they are active, inactive or hovered over. We did that by specifying a CSS control for the coincidence of two classes, two ID’s or a class and an ID. For example, we can tell a browser to display a red tab for page one when page one is active and blue tabs for all the other pages because they are inactive; and a blue tab for page one when one of the other pages are active and page one is inactive.
The part of the original example page CSS that specifies the button style for the active page looks like this:
body#pageone a#itemone,
body#pagetwo a#itemtwo,
body#pagethree a#itemthree,
body#pagefour a#itemfour,
body#pagefive a#itemfive,
body#pagesix a#itemsix
{
background: red; /* active button's colour*/
color:#000000;
border: 2px ridge #CDD5DA;
}
That CSS instructs a web browser to display a red background for an <a> tag with a specific ID when it is displayed on a <body> tag with a specified ID e.g #pageone and #itemone OR #pagetwo and #itemtwo.
To sleek it up we must change the background setting from a color to an image and give the web browser four instructions:
- which image to display,
- to repeat that image horizontally,
- to not display a border, and
- to use a more suitable text color
In essence, the above CSS becomes:
body#pageone a#itemone,
body#pagetwo a#itemtwo,
body#pagethree a#itemthree,
body#pagefour a#itemfour,
body#pagefive a#itemfive,
body#pagesix a#itemsix
{
background-color: black;
background-image: url(active-glossy-tab.jpg);
repeat: repeat-x;
color: white;
}
Similar edits must also be made to the other elements of the menu that control the design of the inactive button and the hovered over button. Those elements are
a.ment
and
a:hover.ment
We change them to give a more suitable text color, background color, background image and to remove any borders.
Once the border is removed, the menu buttons must be enlarged horizontally by a pixel or two to compensate for the space that was previously taken by it. Without this compensation, the menu will appear slightly shrunken relative to the rest of the page.
To calculate the proper size for each menu item simply divide the width of the menu’s encasing div by the number of tabs within it (in this case 840 pixels divided by 6 menu items). In this the menu case has the ID of #menucase and the width of the button is specified in a.ment
Creating the Buttons
The illusionary method
The easiest way to create a glossy look navbar is to create active, inactive and hover-over buttons with two-tone color graphics (a graphic with one color at it’s top half and another color at its bottom half). Be aware that this method is only a trick of the eye and works for small tabs only.
The illusionary glossy menu
To make two tone graphics we use a simple graphics program like Paint (Windows) or Kolourpaint (Linux). The full instructions are:
- create a canvas 10 pixels wide and 31 pixels high,
- zoom in %800,
- draw a pixel wide line horizontally across the middle of the canvass (15 pixels from the top or 15 pixels from the bottom),
- fill the bottom half of the canvass with one color,
- fill the top half of the canvass with a lighter or darker tone of the color used for the bottom half of the canvass,
- fill the dividing line with either of the colors above or below it.
- resize the canvass so that it is 1 pixel wide and only as high as required for the buttons,
- repeat the process until you have a button background for the buttons’ active, inactive and hover states (you should have 3 graphics in total).
Creating a Two-Tone Graphic with Kolourpaint
Color is the key consideration here, for greatest effect the top and bottom colors shouldn’t be too dissimilar and should not be too dark. The color of the page and the button text also contribute to the effect. Light text colors work best because they impress glint.
For example page one’s CSS, the active button is specified in body#pageone a#itemone the inactive button is specified in a.ment and the hover button is specified in a:hover.ment. a:active.ment is only used to specify the text color of the active tab.
The non-illusionary method
Any image such as a picture, texture or gradient may be used as the background of a button or other HTML element. Were I to really style up those menu buttons I would create a truly glossy graphic with GIMP or Photoshop (I prefer GIMP). To give you the general idea, here is the same menu with buttons created with a gradient (gradient buttons):
The navbar buttons with real gloss
Those buttons were created with GIMP. The method is simple (click the below image to learn the location of the used tools):
- Create a canvass of 20 pixels by 60 pixels,
- Select the gradient tool,
- Choose a foreground color,
- Choose a background color,
- Stretch the gradient over the canvass,
- Save it as the active button graphic,
- Reverse the gradient tools direction,
- Repaint the gradient,
- Save it as the inactive button graphic,
- Create another one for the hover button graphic if required.
Creating a gradient strip with GIMP (click to enlarge)
It really is that easy. The hard part is creating the menu with CSS and HTML and getting the buttons to highlight when selected. But you have nothing to worry about as the CSS and HTML is printed on the example pages 
If you really want to thank me for this guide then please backlink to JournalXtra from your directory or somewhere else.
To what else can we apply this CSS control method
We can use the same principle to affect any HTML tag. For example we can tell a web browser to display a different background image for various <div> boxes whenever a specific page loads. To do that we would assign an ID to the <html> tag of each page and specify a CSS control for the coincidence of an <html> tag with a specific ID and a <div> tag with a specific ID. For example:
html#one div#boxone
{
background-image: url(I-am-a-special-box.jpg);
background-position: top left;
background-repeat: no-repeat;
}
The above CSS would tell a browser to load div#boxone and fill it with the background image “I-am-a-special-box.jpg” whenever the page <html> tag has the ID of “one” (i.e <html id=”one”> ).
It is an amazingly simple CSS control principle to implement that is rarely used beyond navigation bar tabs. It’s a shame because the web would be a much more aesthetically pleasant place were it more frequently applied to other page elements.
Have you ever wanted to make the buttons on your webpages remain highlighted when they are clicked and active? I mean, wouldn’t it be great to use CSS to not only make your buttons and tabs change colour when hovered over but to give them a different appearance once they have been clicked?
The trick to changing the appearance of a clicked button or link and fixing that appearance for the time its page is active is to set a CSS style for the simultaneous occurrence of separate conditions. Don’t worry, it’s easy done than said.
Imagine we have two webpages and a menu that links to both pages; and all we want to do is ensure that whenever the link to Page One is clicked then the “Page One” tab changes from dark red to bright red and whenever the link to Page Two is clicked, the “Page One” tab returns to dark red and the “Page Two” tab becomes bright red. For example:
| STATE | MENU APPEARANCE | |
|---|---|---|
| Neutral | Page One | Page Two |
| Active Tab: Page One | Page One | Page Two |
| Active Tab: Page Two | Page One | Page Two |
To achieve our aim we must give three instructions to web browsers:
1. Whenever it is browsing Page One it must highlight the menu tab for “Page One”;
2. Whenever it is browsing Page Two it must highlight the menu tab for “Page Two”; and
3. It must not highlight tabs for pages it is not browsing.
The third item generally takes care of itself but the first two items require specific CSS instructions that are triggered by the co-incidence of two element IDs within the HTML of affected and effecting pages. To do this, we:
1. Assign an id to the <body> tag, and
2. Assign an id to every <a> tag within our menu.
Remember that IDs are unique within a page so no two tags (elements) can have the same ID.
So we could have tags like these:
<body id=”pageone”>
<a id=”itemone” href=”#”>Page One</a>
<a id=”itemtwo” href=”#”>Page Two</a>
and
<body id=”pagetwo”>
<a id=”itemone” href=”#”>Page One</a>
<a id=”itemtwo” href=”#”>Page Two</a>
Our CSS would look like this:
a
{
background: #a1012e;
}
body#pageone a#itemone,
body#pagetwo a#itemtwo,
{
background: #c66681; /* active button’s colour*/
color:#000000;
border: 2px ridge #cdd5da;
}
For ease of understanding, here’s a quick reference table of the CSS for <body> and <a> IDs:
| ID | body#pageone | body#pagetwo |
| a#itemone | Highlight #itemone | Do nothing |
| a#itemtwo | Do nothing | Highlight #itemtwo |
The CSS tells a browser to check the ID of the <body>, compare it with the ID of the <a> tag and determine whether any specific styling should be applied. It’s like having two light switches and seeing whether they are both on, both off, one’s on and the other’s off or the other is on and the one is off. In our case, when the browser is on Page One it reads the <body> ID as #pageone so highlights the <a> tag with ID #itemone and does nothing with #itemtwo. It does similar when it is on Page Two.
It is a lot easier to impliment than it looks and the same methodology can be applied to any page element i.e it is not restricted to menus, buttons and links, it could easily be applied to pictures or adapted to work when three or more conditions are met such as on a page within a <div> that’s within another <div>.
I’ve created an annotated example site with this method of highlighting active tabs using CSS and HTML in effect. Full CSS and HTML examples are provided for each page to make it easier to follow. You can visit it here
Go to part 2 to learn how to create glossy effect navbar buttons
Just to be clear about this, I didn’t develop the method described above, I found it on another website when I was learning HTML (the description is all my own work). Although it’s a natural development of HTML I’d like pass attribution to the author who taught it to me; unfortunately, I can not re-find his or her website but when I do I will note the details here.
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_a.png?x-id=d491e4b6-ce54-4a84-95a9-19c20ca84b19 "CSS Controlled Page Button Highlighting")
So you’ve seen thousands of websites and now you want to put your creativity to work and turn it to profit by making your own but you’re not sure how to get started. Rest easily, you’ve come to the right place. I’ll tell you the truth: you might make some money; if you’re dedicated, you’ll make a bit more; and if you’re really good and fortune favours you, you’ll make a lot of money.
There are over 100 million registered domain names. Don’t believe me? Have a look at ZookNic to find out the exact number. If you want to get a cut of their visitor traffic then you need to do a bit of work to catch them up. Don’t worry, it’s not so hard when you realise that around 50% of those domain names are either unused or unadvertised.
To help you on your way to webmaster stardom, here are 10 items you need to think about and tips to give you an idea of what you’re getting into:
- The idea
- A Little Time
- A little money
- Your domain name
- Server space (your web host)
- Visitors
- Sponsors (the easy bit)
- A little bit of knowledge
- A few bookmarked reference pages
- As many web support forums as you can join.
The Idea
You already have at least one of these otherwsie you wouldn’t be here. But there’s more to it than knowing what you want to put into your website. You need to decide whether you want a blog or a forum, gallery or a shop,a site for online games or will you be providing information. Estimate the type of visitor your site will attract then calculate how you want them to interact with your website. Ask yourself these three questions:
- What’s the purpose of my website?
- Why will visitors come to my site?
- What’s the best way for my site to satisfy its visitors?
When you’ve answered them you can decide how to present your site. A gallery for a fan site is good but an interactive blog with photos is loads better; a blog teaching php is good but a well marketed forum for visitors to ask and solve problems will always attract more traffic.
Use your ideas to help you name your site. List several names just in case your first choice has been taken. Use something snazzy, easy to remember and relevant to your site’s purpose.
Time
You can run a website in your spare time. A lot of webmasters do. Different types of website take different amounts of time to set-up, update and market. It isn’t always easy. Well used forums require a lot of moderation. Any site that allows visitors to leave comments will need to be monitored for spam and inappropriate comments. A website that allows none to little visitor communication shouldn’t take up too much time, right? Wrong. Anything could go wrong. You might find your server’s off-line or your database becomes corrupt. Thankfully, database and server problems are relatively rare; and server problems are usually down to your host to fix while a database can usually be easily repaired or replaced with a back-up.
So you’re probably wondering why I’ve brought up the time element.
When deciding your website’s format, consider how much time you can devote to its administration. Will you be updating it daily or weekly? Will you be using your own (unique) content or content created for you? Are you willing to do it as a hobby if it doesn’work out as a business?
They are just a few considerations. You wont really know how much or how little time your site will need until you get your hands dirty and create it. You might use an installable package like Wordpress (for blogs), SMF (for forums), Gallery2 (for galleries) or Joomla! (A powerful general purpose package). Such packages are called content management systems (CMS). They require little to no knowledge of html and make website development as simple as installing a game on your desktop PC.
Using a Content Management System will make your life as a webmaster so much easier. Even though little to no knowledge of hmtl is required to use a CMS, it’s better to know a little html or php (both are easy to learn) just in case you want to add an extra tweak but generally, once they’re installed and set-up, you need only moderate, add content and tell the world about your website.
So the three big time eaters are:
- Site moderation (checking for spam and abuse),
- Creating (or finding) content,
- Publicising your site.
And don’t under estimate the amount of time you’ll spend tinkering with settings and templates just to get your site exactly as you want it (which nobody ever does).
Money, Domain Name and Server Space
Now you know what you want your website to do you are ready to invest a little bit of money registering your domain name and paying for hosting space.
There are lots of places where you can register your domain name. Just be careful that you use a reputable company and ensure that you can transfer your domain to another registrar without penalty, should the need arise; and be sure you can edit your domain’s name servers (an IP address that tells browsers where to find your website’s server). Also, bear in mind that you don’t “buy” a domain name, you lease the use of it on a yearly or several yearly basis – consequenty, you lose the use of it when you stop registering it. Don’t register your domain name yet, though, find your hosting provider first because some hosts give away a year’s domain name registration when you lease space from them.
Before you can build your website you’ll need somewhere to store it; somewhere visitors may view it and interact with it; you need a host – a server to hold your site, serve data to web browsers and deal with requests from other computers – your site’s visitors. A server is just a computer (like a desktop PC) that’s dedicated to the task of serving websites (and other data) to whoever or whatever requests it. The hosting provider is something you should give a lot of consideration before handing over any money.
You can use shared hosting or dedicated hosting. When several webmasters share the same server (computer and storage) they are using a shared hosting package. When one webmaster uses one server for his (usually one) site then he is using a dedicated server. Shared hosting is cheaper, dedicated hosting is more secure and will run faster (generally). JournalXtra (this site) is on a shared server.
The most important considerations when leasing server space are:
- Bandwidth – is it restricted? Check whether it’s limited or unlimited.
- Storage – is it restricted? Check whether it’s limited or unlimited.
- Processor usage – is it restricted?
- Content – are there restrictions? Can you host sites with adult content?
- Can more than one site be hosted?
- IP address – do you get a dedicated IP? Can you pay for one? Do you need one?
- Reliability – check the server uptime statistics. You should be gettin 99% uptime plus.
- Linux or Windows – which operatin system will your server use? (Linux is generally faster, more secure and more widely supported).
- Location – is the server in the U.S, Canada, Sweedon, Aaaustralia… Will your website be legal in its location?
- Servers back-ups – are they regular?
- Support – when something goes wrong, how will you contact them? Is the support team fast and efficient?
- Reputation - is the hosting company recommended by other webmasters?
- Scripts and software – what do you get for your money? Is the software you can use restricted?
- Databases – Do you get multiple databases? Do you get only one database? Or do you share a database with other webmasters?
- SSL – is it available? It’s required for secure online payment transactions.
There are many more items you need to consider but they are the main ones.
I use Hostgator to host all my websites on a shared Linux server. I can host unlimited sites, use unlimited databases, use unlimited bandwidth and unlimited storage. They provide a control panel (cPanel) which makes installing software and managing my websites easy. I’ve been with them for 3 years (it’s now 2009) and I do recommend them to all my friends and customers. I don’t always register domain names through them. For domain names I sometimes use Hostgator and other times use 123-Reg. 123-Reg offers a lot of discounts and Hostgator allows me to host unlimited domains for minimal cost so they make a good combination.
So, you now have ideas for your website, your domain name and your hosting provider. Well done! You’re a webmaster (well, o.k, an apprentice webmaster). What’s next?
Visitors
Now comes the easy and fun bit. Build your site. If you want visitors then you need something for them to visit. Fortunately, most web hosts make it easy to make a website by providing near single click installation and set-up of content management software like Wordpress, SMF, Gallery2 and Joomla. Don’t be worried about installing them multiple times – we’ve all done it. JournalXtra was once a blog, then a forum, then another blog then a different forum package before I settled on a Simple Machines Forum. Two years later and I’ve converted it back to a Wordpress blog. It’s all experiance :)
Once you’ve got your hosting package, look around, get use to it, try all the software packages so you know what they all do and how they compare with each other. If you can use html, php or pearl then write a webpage. In other words, get familiar with being a webmaster.
A website without content is a garden without flowers. Content is king supreme when it comes to getting and keeping visitors. There are many ways to get content: one is that you create it, a second is that you get it from somewhere else and a third is that you let your visitors create it. Each has its own merits and demerits: the more original your content the better. People don’t like to keep re-reading the same old same old. From a search engine standpoint, it doesn’t matter whether your content is original or not; it will always serve the page that best suits the given search terms. If the content is duplicated then it’ll just return the page with greater page rank. But remember this: search engines only recognise text. No matter how nice your pictures, videos and audios, a search engine’s crawler will only notice it if it has a textual description.
If you are stuck for content, there are lots of content providers out there. Some charge whereas others give it away. A few are listed at this article’s end.
A website without visitors is a garden without wildlife. To attract visitors you need to do a bit of shouting. Let the world know about your site. Tell friends about it, add your website’s link to the signature you use in emails and forums, submit your website’s address to as many search engines as you can, use social bookmarking to spread the word to people who might be interested in your site, ask other webmasters for reciprocal links (search engines rate websites by links from other websites according to how many websites link to them and how valued those inbound linking sites are to others (as measured by inbound links to them). Reciprocal links are best when arranged through intermediary sites e.g. A to B to C to A). Submit your site’s details to directories (blog, forum, gaming, Gimpsy, Dmoz, to name a few). Get reviewed by review sites. Post comments in blogs and forums. Another way to advertise you site is article writing: write article containing links to a more indepth article on your site, submit it to article bases; even write a press release announcing your site’s opening. You could even pay for advertisement or join a banner exchange. The options are almost limitless.
Sponsors
It’s all about the money.
Turning your hard work building your website into a few dollars is easy but making loads of dosh requires either hard work or your site to cover a very good subject (preferably niche) or, even better, both. You can accept donations, place advertisements, sell site branded merchandise (mugs, t-shirts, pens…), join affiliate schemes and take up many other opportunities. Different sites require different methods. You will learn what will work for your site by trial, error and the application of common sense. For example, when you have a travel blog then it makes sense to join a travel affiliate and sell and advertise travel products and services along side it; when you have a photo gallery, sell cameras; and when you have a forum, target ads and sales according to the subject of the posts in a thread. Stay away from banners – people ignore them; instead, use inline text links; they’re non-intrusive, don’t look like adverts and visitors feel more inclined to click them. Banners are good for brand awareness but little else.
Knowledge
One of the more important needs of any webmaster is a little bit of knowledge and fortunately we have search engines to help us get that. Likelihood is that if you hit a snag then either someone’s already posted a solution for it on the net or someone in one of the many webmaster support forums will be able and willing to help you through it.
When I first started out I installed Joomla onto one of my domains and every time I tried to access my website I was greeted with an error page telling me I didn’t have permission to browse the site’s index. Nobody had told me that before my site could be browsed I’d need to create a file in the installation directory called .htaccess, open it up for editing, type DirectoryIndex index.php, then save it. I had to use Google to find that solution. If you hit a snag, feel free to post a question in the comments on this page; I’m more than happy to help.
Bookmarks, Reference Pages and Webmaster Support Forums
Finally, bookmarks, make space for them because you will collect loads of them. You’ll need bookmarks to html and css guides, clipart and stock images, your content management system’s support pages, sponsors, forums, blogs and many others besides.
The webmaser support forums will become important to you over time. You will build long lasting relationships with other webmasters who’ll advise you on your website’s look, feel and operation. They’ll keep you up-to-date with the latest tips and tricks for attracting traffic and dealing with spammers.
Here are a few of my favorite bookmarks:
Advertisers
Advertisers like these tend to pay per visitor action e.g per click or per impression. These are good for sites with high visitor numbers.
Google Adsense – search for Google Adsense and sign up to display Google’s adverts.
InfoLinks.com – text based ads automatically placed over inline text by a java script.
Adbrite – text, banner and full-page ads. You can even advertise over your videos with their watermarks.
Affiliates
These are companies that “warehouse” affiliates products and services. Service and product providers register with these companies so that you can easily join their affiliate programs ands advertise (or pre-sell) them. These tend to pay commission from your referral’s purchases. Good for both high and low traffic sites.
TradeDoubler – pre-sell electrical goods, services, holidays, insurance etc…
AffiliateFuture- pre-sell electrical goods, services, holidays, insurance etc…
Clickbank.org – sell ebooks and software.
AffiliateWindow – choose from hundreds of companies to affiliate with your website.
Amazon – Set up your own online shop or just sell product specific to an article or website.
Website Design Reference Pages
These are the pages I found most useful when learning html. I will write a guide to html and php soon. Actually, I’ve already written one but I want to make it less technical and more engaging.
Cookwood – Very handy CSS and HTML reference. This compliments a book written by the site’s owner. The contents of the book is available at the Cookwood website. I use this site quite a lot.
HTML.net – Beginners HTML and CSS guide. Very easy to follow.
HTMLDog – An entertaining site tat teaches HTML and CSS in a very relaxed way. I highly recommend htmldog for for people who want to learn html.
Apple.com – A handy guide to webpage layout. A simple, table based layout that’s easy to replicate. Taught in an easy to follow style.
Tizag – Another useful guide to HTML and CSS. This one provides good, followable usage examples. Much better than the examples offered by w3c
Webmaster Forums
My Favourite Host and Domain Registrars
Content Providers
And here’s a link to a book that sounds interesting but I’ve yet to buy (It’s available through Click-Bank):
Confessions of a Lazy Super-Affiliate
This article has been written as a very basic introduction to setting up a website. Its scope is only to point out a few considerations that beginners usually miss. I hope it’s been useful. If your aim is to develop an adult site then leave a message and I’ll offer some guidance.
