This was recently asked of me. “Is there a way to back up my entire site in one shot?” I explained there are 2 ways to do so. The first way, which almost everyone knows, is to use an FTP Program such as FileZilla to download the entire site. This however doesn’t save your settings and such, and often requires alot of effort should you transfer hosts. We’re gonna discuss the second way of backing up your site in detail here. It requires using your Cpanel for your site.

First off what you need to do is login to your Cpanel.

Once you have logged in, Click on the backup wizard as seen below in red.

This will open the backup wizard seen below.

Click on the backup button, seen below in red

This will open up the backup page where you can select the type of backup you’d like to create.

In our case, we’re wanting to create a full site backup, so click full backup as seen in the image below highlighted in Red.

This will bring you to the full backup page. There are several options you can use, but the easiest is to leave it as the default of Home Directory

Now all you need to do is hit the Generate Backup at the very bottom of the page.

Next you will be taken to a page that simply tells you that once the backup of your site is complete that you will receive an email stating that your site has been backed up. It will look like the following.

Once you receive this email, simply go back to the CPanel Home page, and select Backups as seen in the following image

You will be taken to the backups page, with lots of options, but what we’re looking for is the Download/Generate a Full Website Backup as seen below

Finally you will be on a page that will have either just your backup you just created, or if you’ve done this before, a list of your backups. Choose the most recent backup, and click on it to simply download it.

Do you want to be able to change your entire website’s layout with a simple change? You can do this very easily with CSS.

First, you’re going to want to make some new images. If you’ve got expandable menus, or Navigation areas with images as a background, you’re going to want to create something different using your favorite Photo Editor program. Once you create these images, you can change your whole layout with ease.

Let’s take www.millerwebtechnologies.com as an example. Currently there is a red white and blue theme. However lets say we wanted to create a blue/silver theme. All you need to do to change your entire site is edit the code in your CSS file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

body {
 
background: url(http://www.millerwebtechnologies.com/gfx/bg_july4.gif) repeat-x;
 
padding:0px;
 
margin:0px;
 
font-family: verdana, arial, sans-serif;
 
font-size: 80%;
 
color: #FF0000;
 
}

As you will note in the preceding CSS, the background image contains an _july4 to denote that it was intended for the 4th of July. You can change this really easily by changing the CSS to simply read background: url(http://www.millerwebtechnologies.com/gfx/bg.gif) repeat-x; and as long as your image is named correctly you have just changed the background image for the entire site.

You can do this with your other images as well. This way, you only need to change the CSS file to reflect the new images that will create a completely new look for your site. You’ll save lots of time if you use CSS, and you can control your whole site with some simple CSS changes.

If you want to know more about CSS changes you can make, feel free to comment this post, or use our contact form, and send us an email and we will be happy to offer any assistance we can!

The Insane Webmaster
Miller Web Technologies

For tonights topic, we’re going to create some Expandable menu’s with css. These can contain links, or just text. You’ll need a basic knowledge of CSS and HTML for editing these. You’ll also need some sort of Photo Editing Software, I personally use Photo Shop CS2.

There are several things going on here, so I will break things down, then at the very end of the post I’ll post the whole code. Also, I’ll include a link to this menu in action.

First, you’re going to need to make 3 Image, a Top, Middle, and Bottom. The sizes you use can be adjusted to suit your needs, here’s the images and sizes I used.

Top Image:

Size: 193 x 46
Middle Image:

Size: 193 x 40
Bottom Image:

Size: 193 x 35

Now comes the fun part, putting it all together. We’ll Start with the top image and it’s CSS attributes.

As you see in the code below, you put the url for your image as the background, with a top left no-repeat attribute. This insures the image starts at the top left, and isn’t repeated. You can toy around with the height here to make it work for your particular image, but I found 30px does great with this sample image.

Next take a look at your font css. This will allow you to change the font of the text within this “header” of your menu. This is usually just 1 line of code. In the example here, I chose the text “Store Categories:” as my header text. You can change your font, sizes, and colors to suit your needs and make it flow with your particular website.

The last part of this is your padding at the top. You can adjust this to suit your needs as well, depending on your background image, and font size. This merely adjusts your “header” down away from the top of the “Header” background image.

1
2
3
4
5
6
7
8
9

dt {    
height: 30px;   
padding-top: 15px;   
background: url(http://www.millerwebtechnologies.com/gfx/expandtop_sample.gif)  top left no-repeat;   
font-size: 1.3em;   
font-weight: bold;   
text-align: center;   
color: #00FF00;   
}

Next, we’ll address the middle image, which actually holds the “content” of your menu. With the middle image it’s slightly different with the css, as you want the middle image to repeat downward with the content…the more content you have, the longer the middle section will be. So same as before you set the image’s url as the background, but you put it in as top left repeat-y which allows the image to be repeated downward, but not side to side.

Now we’ll talk about the padding. The padding here plays a completely different role. You don’t need padding on the top or bottom of the image because you have your “header” image above, and the closing image below; but you want padding on either side so your text isn’t pushed to the outsides of your image. So, here’s what you do, set your padding to 0 for top and bottom, and set the sides to 20px. You can of course adjust this to your liking depending on your background image as well. You might be ok with less padding, you might need more.

Set your Text alignment to Justify, pic your color for your text within the “content” section, and you’re all done with the “content” section of your menu.

1
2
3
4
5
6

dd {   
padding: 0 20px 0 20px;    
text-align: justify;   
background: url(http://www.millerwebtechnologies.com/gfx/expandmid_sample.gif)  top left repeat-y;    
color: #FFFFFF;   
}

Now comes your “footer” or bottom image. This one is pretty simple. You set the image as a background once again. You want the alignment to be bottom left no-repeat. Then set the padding to padding-bottom to keep your content text away from the bottom of your image. See, quick simple and easy for this one.

1
2
3
4

dl {    
background: url(http://www.millerwebtechnologies.com/gfx/expandbtm_sample.gif) bottom left no-repeat;   
padding-bottom: 30px;    
}

Now that we have the images in place we can talk about the other elements. I chose to have this menu 50px from the left, 25px from the top, and the width is 194px to contain your image.

1
2
3
4
5

dl {   
left: 50px;   
top: 25px;   
width: 194px;    
}

You want to make sure all 3 images line up so you need to set the overall margin and padding to 0. You do so like this:

1
2
3
4

dl, dt, dd {    
margin: 0;   
padding: 0;   
}

And that should take care of all the CSS elements of your Expandable Menu created with CSS. Below is what all the CSS put together in your stylesheet should look like.

CSS:

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

dl {   
left: 50px;   
top: 25px;   
width: 194px;    
}       
dl, dt, dd {    
margin: 0;   
padding: 0;   
}       
dl {    
background: url(http://www.millerwebtechnologies.com/gfx/expandbtm_sample.gif) bottom left no-repeat;   
padding-bottom: 30px;   
}       
dt {   
 height: 30px;   
padding-top: 15px;   
background: url(http://www.millerwebtechnologies.com/gfx/expandtop_sample.gif)  top left no-repeat;   
font-size: 1.3em;   
font-weight: bold;   
text-align: center;   
color: #00FF00;   
}       
dd {   
padding: 0 20px 0 20px;    
text-align: justify;   
background: url(http://www.millerwebtechnologies.com/gfx/expandmid_sample.gif)  top left repeat-y;    
color: #FFFFFF;   
}

Now for the HTML part of this menu. This part is really simple. There’s really one 3 parts to it on the HTML side. The DL tag starts your menu much like the TABLE tag does for starting a table. Next is your DT tag. This is your “header” we talked about above. Inside your DT tag, you put the heading of your menu. Then comes the DD tag. This is your “content” area. This is where you put your links, or text whichever you’ve created this expandable menu block for. Close your DD tag, then your DL tag, and you’re done. Below is what the HTML will look like.
HTML:

1
2
3
4
5
6
7
8
9
10
11

<dl> <dt>Store Categories:</dt> <dd>
 
<a href="http://www.millerwebtechnologies.com/store/agora.cgi?product=Banners&amp;xm=on">Banner Graphics</a>
 
<a href="http://www.millerwebtechnologies.com/store/agora.cgi?product=Dedicated_Servers&amp;xm=on">Dedicated Servers</a>
 
<a href="http://www.millerwebtechnologies.com/store/agora.cgi?product=Hosting&amp;xm=on">Hosting Solutions</a>
 
<a href="http://www.millerwebtechnologies.com/store/agora.cgi?product=Reseller_Packages&amp;xm=on">Reseller Hosting</a>
 
<a href="http://www.millerwebtechnologies.com/store/agora.cgi?product=Business_Site_Services&amp;xm=on">Developer Solutions</a> </dd> </dl>

Here’s what your Menu Should look like if you created it properly.

To see the menu in action in various ways visit Miller Web Technologies

Ok for tonights topic, we’ll cover the Keyword and description tags in the <head> section of your HTML pages.

First we’ll talk about the “Description” tag. Completed as follows:

<meta name=”description” content=”Miller Web Technologies is a company based in Peoria IL. We specialize in E-Commerce, Hosting Solutions, and Banner Graphics. Consider Miller Web Technologies as your next Web Developer.”>

28 words, 187 characters (we’ll discuss this in a little bit)

Basically, the description is self explanatory. It is a short description of your website. This is used by search engines in their description they publish of your site. Use this space wisely, and be as descriptive as you can about your company, organization or whatever your website is about.

Next we’ll discuss the “Keywords” tag in the meta tag. It is produced as follows:

<meta name=”keywords” content=”Peoria, Web Developer, hosting solutions, E-Commerce, Banner Graphics”>

8 words, 70 characters (again, we’ll discuss this in a minute)

This is your chance to help boost your SEO. Pick your keywords and phrases carefully. Don’t be too broad, but don’t be too specific either. You’ll want words that actually pertain to your site. If you start putting in irrelevant words, and a search engine finds this out, it could wreak havoc on your chances in the search engines.

Now, for the word count/character count. You don’t want more then 200 characters in your description nor your keyword section. Anymore then this, and it will hurt you more then it will help you. So do the best you can in the space you have, and you will be pleased with your outcome, and glad that you took the time to add these to your site when you go to look at the search engines.

Well for my first tutorial I’m going back to the Basics of HTML. Linking…

There’s several reason to use links. Creating links to your pictures, link to news stories on your website, there are many more reasons why you might want to use links, but that’s not the point of this post.

Take the following example:

1
2

<a href="http://www.millerwebtechnologies.com" target="_blank" class="copyright_link">
Miller Web Technologies</a>

The Href part defines where to send the web browser to; in this case it’s going to www.millerwebtechnologies.com. You can define this link however you wish, as long as the URL placed inside is valid. It can be a website, a photo, a blog, facebook/myspace or anything else you want to link to.

The next part within this link is the Target. this defines the action taken when the link is clicked on. There are several options available, they are as follows:

_blank opens the link in a new browser window.

_parent opens the link in the immediate frameset parent.

_self opens the link in the frame with focus

_top opens the link in the full window without frames.

The most commonly used are _blank and _top.

The next part is the Class, this is mainly used in CSS, and allows you to control font, color, text decorations among many other things. If you are not using CSS then you really don’t have a need for the Class part of the tag. If you’re using CSS, use the Class to define the CSS Classification of your link. Most Web designers use several on their sites, creating different specifics for copyright links, header links, sidebar links, so on and so fourth.

That about wraps it up for this tutorial, if you have any questions please feel free to contact me, and I will do my best to get back with you.

The Insane Webmaster