Earlier this week I launched my new web design sales website.  All web design packages are based on a pay as you go pricing model so that start small businesses (my target market) do not have such high startup costs to get online.

Check out www.sprydesign.co.uk and see what you think :)

Something I am going to be offering clients from now on is a custom facebook landing page.  Having a custom landing page is a fantastic opportunity to tell facebook users all about your business, service or event and really makes a good first impression.

To see one in action please go check out the Herbal Lin facebook page.

Been developing a directory site using joomla.  Users will be able to search for local business, venues, events and attractions.  Users can list their own items for free or for a small fee can become a “featured listing” which will push them to the top of the listing, as well as highlighting their listing with a lovely red box!

Watch this space..

If you are familiar with CSS but would like to work on the same example site from our earlier tutorials you can download it here.

Lets get started

Open up your CSS file and add the following code:

.sidemenu{
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 180px;
}

Setting the list-style attribute to none gets rid of the discs (bullet points) and setting the width to 180px gives you the overall width of your buttons.  If you have a wide sidebar, you may want to increase this a little.

Add the following code to your css file:

.sidemenu li{
	margin-bottom:5px;
}

Setting the bottom margin on the list item (li) adds a bit of spacing in between buttons.  Adjust this according to taste.

Add the following code to your css file:

.sidemenu li a{
	background: #9fb1fd;
	display: block;
	color: white;
	width: auto;
	padding: 5px 0;
	text-indent: 8px;
	text-decoration: none;
	border-width:1px;
	border-style:solid;
	border-color:#c4cffe;
}

.sidemenu li a:visited, .sidemenu li a:active{
	color: white;
}

Set the background to the color you want for your buttons while they are not being hovered over and set border to a lighter version of your background colour.  Also, make sure you set the color attribute for the text to a colour that contrasts well with your background.

Add the following code to your css file:

.sidemenu li a:hover{
	background: #506ff5;
	color: white;
	border: 1px solid #3f5ee2;
}

Set your background and border to the colour you want for when the mouse is hovering over your button.  I have gone for a darker version of the regular color, but feel free to experiment with different color combinations here.

We pick up where we left off in the last tutorial “How to make a very basic table based template in dreamweaver“.  So by now, you should have a table based template with a logo, a menu and a content area that looks something like this.

If you are already familiar with how to create a table based template, you can download a working copy of the example site here.

Before we start

In the last tuturial, we set a background color for the page.  We will be setting the background color using CSS in this tutural, so before we get going we need to remove the background color settings from our template.

Click on “modify >> page properties” and then on background color.  Remove the value and press ok.

1) Create a new stylesheet

The first thing we need to do is a create a blank css file.

Click: File >> New >> Blank Page >> CSS >> Create

Save this blank css file in a folder called css.  Call it style.css

2) Attach the stylesheet to your template

Open your template file and then click: Format >> CSS Styles >> Attach Stylesheet

Browse for your newly created css file and press ok.

This will mean that any changes you make to your css file will instantly be applied to your site.

3) Set the background color

Here we are setting the background color for the whole page.  Any time you want an attribute applied to the whole of your web page you can apply it to the body tag.

Type the following code into your style.css file:

body{
	background-color:#CCC;
}

You will notice that after you type in the first sqiggly bracket (brace) and go onto a new line that you are presented with a list of all attributes that can be attached to the body tag.  As you start to type you will see that dreamweaver will jump down the list and help you search for the attribute you want.  This is useful as quite often you have a rough idea of what something is called but are not 100% sure.  At any time you can press enter and dreamweaver will add the selected attribute.

When you press the colon button ‘:’ you will notice that the color picker pops up.  You can either click on a color, or type in a value if you know already know what color you want.

You must finish each line off with a semi-colon.  This just tells the browser that you have finished talking about this particular rule.  On a new line close the bracket and save the document.  You should notice that the background  has now changed to a light grey.

4) Set the global font

Here we are setting the font for the whole page, so we add the font attribute/rule to the body tag in our style.css file.

body{
	background-color:#CCC;
	font-family:Tahoma, Geneva, sans-serif;
}

As with the background, you will notice that when you push the colon you are presented with a range of options for the selected attribute.  In the case of font-family you are given a selection of different fonts to chose from.

You will notice that dreamweaver is offering you sets of three fonts.  This is to guarentee that no matter what browser (internet explorer, firefox, chrome ect) or operating system (Windows, OSX, Linux ect) that you have a font that at the very least looks similar to the one you want them to see.  Not everyone has all the fonts you are likely to use, so the code here is basicly saying:

Choose Verdana

If you dont have Verdana, use Geneva instead.

Not got Geneva or Verdana? Use sans serif.

Save the code and look at one of your pages.  You should notice that the font has now changed.

Add a couple of extra style attributes to the body tag:

body{
	background-color:#CCC;
	font-family:Tahoma, Geneva, sans-serif;
	color:#333;
	font-size:14px;
}

The color attribute changes the color of the font, and the font-size attribute changes its size.  Save your stylesheet again and take a look at the changes.

5) Style your links

Add the following style rules to your stylesheet.

a{
	color:#CC0;
	text-decoration:none;
}

a:visited{
	color:#CC0;
	text-decoration:none;
}

a:hover{
	color:#FC0;
	text-decoration:underline;
}

a sets the appearance of links. I’m not entirely sure why a is for link, it just is. a:visited is for links that you have visited.  Most modern websites set this to be the same as the link, but if you want to show users which pages they have previously looked at you can set the visited color to be different from the regular links. a:hover sets how links will look when a user is hovering over them with the mouse.

By default, most browsers set links to be underlined.  In the code above, using text-decoration we have turned the underline off, but left it on for when the link is being hovered over.

6) Change the color of your menu

Now that we have changed the color of our links, the menu items may not necessarily match the color we chose for our menu bar.  To style the color of the menu links but keep the page links how they are we need to create a custom class.

Add the following style rules to your stylesheet:

.menu a{
	color:#fff;
	text-decoration:none;
}

.menu a:visited{
	color:#fff;
	text-decoration:none;
}

.menu a:hover{
	color:#0FF;
	text-decoration:underline;
}

What we are doing with this code is creating a class called menu, and then changing how the links are displayed for that class. Save your stylesheet and switch over to your template.

Next select your list by clicking on one of the list items and then clicking on <ul> on the code bar.

Click on the class drop down menu.  You should see that your new style called “menu” is available to select.  Chose menu and save your template.

Once the template has been applied preview one of your pages and notice that the links in your menu are now styled differently to the links on the rest of your page.

In a forthcoming tutorial I shall show you how to make your menu links into buttons using css.

7) Style Your Headings

To ensure that your content has a consistent look and feel for your headings html has built in tags for headings ranging from H1 for big headings down to h6 for small ones.  Go through your content and make sure that all pages have a page heading set to H1 (Heading1) and that any sub headings are set to H2 (Heading2).  If you have the need for headings within headings, set them to h3,h4 and so on.

In your stylesheet add the following css rules:

h1{
	color:#000;
	font-size:36px;
}

h2{
	color:#000;
	font-size:24px;
}

h3{
	color:#000;
	font-size:18px;
}

Your headings should now be black, which will make them stand out from the dark grey we set earlier.  However this ma not go with your layout, so feel free to experiment!

Check back later for tutorials that will further enhance the look of your page.

Click here to download a printer friendly version of this tutorial

Click here to download a working version of the template and stylesheet

Just finished working on the Morph PR and Marketing site redesign.  This one was a modification of an existing template by rocketththeme to make it fit in with the existing branding.  It uses the smart flash header component by projoom for all the rotating images and uses docman for the downloads section along with docman paypal ipn component for paid downloads.

However before I start i’d just like to say that before I get a torrent of comments about how this isn’t 2001 anymore and we should all be using divs, that I know and I agree!   I run the website and online resources for a High School, and the ICT teachers asked me to come up with a basic tutorial for them to show their classes.  Hopefully one day I will get them all using CSS based templates, but that day is not today!

Lets get Started..

1) Make a new File

The first thing we need to do is create a new template file.

Click: File >> New >> HTML Template >> Create

2) Insert the main container table.

When you look at most modern websites on the web the content is usually contained within a fixed width box. This box is not always visible but is very rare for a website to allow its content to take up the entire width of the monitor.  This is especially important these days as widescreen monitors are becoming more and more popular and these screens a whole paragraph could end up taking less than one line if allowed to spread out.

Click: Insert >> Table

Make sure you have three rows and one column.  The top row will be for the header, the middle row will be for the main content and the menu and the bottom row will be for a footer.  You should also set the width to 960 pixels.  A width of 960 will fit comfortably on all monitors and will give a consistent look to your site no matter what resolution it is being viewed in.

3) Center the container table

Most websites these days have their content centered, so thats exactly what we are doing.  If you want to experiment with left or right aligned tables later on, feel free to do so.

Click somewhere in your table.  Then click on the <table> tag on the code bar.

Set the alignment to “center”

4) Insert the content/sidebar table

Click somewhere in the middle row of your table.  Then Click: Insert >> Table

Make sure you have one row and two columns.  The left hand column will be used as a navigation sidebar and the right hand column will be where your main content will be placed.  You should set the table width to 100%, this will mean that the table will make use of all the available space (960 pixels, set by the main container table).  Set the cell padding for 10 pixels, this will put a bit of space between your sidebar and the text and will give your site a bit of “white space”.

Click in the left hand column of your new table.  Then click on the <td> tag on the code bar

Set the width of this column to somewhere between 150 and 280.   This is down to personal taste and will depend on what you want to use this sidebar for.  If it is purely for navigation and not info boxes or adverts then chose something like 180 like I have.  You should also make sure that you set your vertical alignment to top, this will prevent your menu floating in the middle of your sidebar when you put your content into your template.

5) Insert your logo

Insert your logo, make sure it has a solid background color (we will experiment with gradients in another tutorial) and that it is not much taller than 150px.

Click in the top row of your container table. Then click: insert >> Image

Browse for your logo graphic and press OK

6) Use the Color Picker to make your header and footer bars.

Click in the top row of your container (but not on your logo graphic).  Then click on the <td> tag

Next click on the background box.  This should bring up a color picker tool that looks something like this

Using the color picker click on the background color of your logo.

Repeat this step, but click in the bottom row of your table rather than the top one.  Your page should now look something like this.

7) Use the color wheel to select a sidebar color

Click in the sidebar column and click the <td> tag.  Then click the background box and use the color picker tool to select the logo background color.  Click the background box again, but this time click on the “system color picker”. which is a color wheel icon that looks something like this:

Drag the right hand slider up very slightly.  This will bring the color closer to white and will give you a lighter version of your background color.

8) Set the background of your content to white

Click in the sidebar column and click the <td> tag.  Then click the background box and select white.

You will not notice any difference at this stage, but we will soon be selecting a background color for the page and this cell is currently transparent.  You should also make sure your verticle alignment is set to top for this cell.

9) Set the page background color

Click on “modify >> page properties” and then on background color.  Select a light grey for “background color”.

Your page should look something like this:

10) Add your sidebar links

Click on the sidebar and type out a few links your pages.  Don’t worry if you haven’t got any pages to link to yet we can make these click-able later on.  Highlight these links and press the “unordered list” button in the properties tab.  It looks something like this:

In a later tutorial we will use some CSS to make these look modern and much more interactive.  But for now we have a nice bullet point list.

11) Insert your editable Region

Click in the content cell.  Then click: Insert >> Template Objects >> Editable Region.

A window will pop up and ask you to give it a name.  Call it content.

12) Sit back and admire your handywork!

Thats it, you now have a lovely looking template you can use to make your website with.  In the next tutorial I will show you how to use CSS to give the site a bit more of a professional look.

If you need help working with templates, check out this tutorial..

I usually end adapting an existing theme when I do a project in joomla, this one however is based on a brand new joomla template I am developing from scratch called “transparent”.  Which will allow for custom backgrounds, while still keeping all the border and background gradients.  I have a lot of work to do on my podlogs themes first, but I am hoping that this theme will be ready for public release by the end of May.