| |
Create the perfect template with Visualizer Album Designer.
Visualizer Album Designer is designed to help you make your own personal photo albums fast and easy, without any HTML experience. At the same time Visualizer Album Designer will also help the advance users to generate templates with their own HTML data included, whether that being the bodies header, footer or the head area for the entire document.
In this tutorial I will walk you through some of the basics that will help you understand the Header and Footer areas, and at the same we will be looking at the Head area of the HTML document.
Understanding SEO and getting your pages ranked higher.
SEO (Search Engine Optimization) is very important if you want to be seen and visited on the web. VIG's years of experience working with SEO has of course also been included within Visualizer Album Designer, making sure the end user will get the maximum and best end result when generating photo albums for the web. Visualizer Album Designer isn't just any album designer, though it may look simple once you generate your photo album. The coding of pages, css stylesheets and javascripts it automatically generates for you, are at the highest quality level for when you want to share your work within your local community and throughout the world. The XHTML coding it generates is also cross browser compatible, so you are absolutely sure when you design an album with Visualizer Album Designer, that it can be seen by all users, no matter which web browser they may be using.
Setting up your template.
Before we move on to the header and footer area, let's start by titling our pages and adding the meta descriptions and keywords. Make sure to always read the top area of the guide, as it can provide you with some useful help.
The Web album section of Visualizer album Designer.
Adding a short but descriptive title is very important, as it makes it even easier for people to find your photo album, when people are searching through various search engines.
Make sure to add a description that describes the content of your photo album. Proper descriptions also plays an important role when you want to rank yourself higher through search engines.
Not all search engines will rank your photo albums based on keywords, but some will - therefore it is important that you also add the proper keywords which match the content of your photo album.
I highly recommend using the title as album file names. As you can see on the image above, I have added a title and enabled the title file names. This means that Visualizer Album Designer will generate the file names for my photo album naming them we-took-a-walk-by-the-lake-(x number).html, which also makes them even easier to search for.
The footer and header section.
Let's start by understanding what a footer and header area means. Basically it's two sections that allow you to place data in the top and bottom area of your document(s). The following album example will give you an idea of what I mean.
Example album.
As you can see I have added a header section to the top area which displays a title and my name. Below the thumbnails I have added a footer section, which displays any additional data I want to share.
The header and footer area can be used for just about anything you feel like placing there. It could be an ad banner, a menu system or anything else you would like to add, there are no limits. Of course, understanding a little bit of HTML will help you a lot, however, should you have pages you have generated elsewhere, with a standard header or footer area, you can copy and paste these data into the areas of your choice.
Standard HTML commands.
Tables are probably one the most standard html commands we come across. The reason why is that it allow us to split an area of a document into columns and rows.
Let's give it a try, by creating a table with two rows, which we will add to the header area of our document. We will give our table a fixed width and each row their own fixed height. We will also add some text to each row.
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="50" align="left">Hello world!</td>
</tr>
<tr>
<td height="20" align="left">Isn't it a great day...</td>
</tr>
</table>
As you can see we have given the table a width of 600 pixels, and the first row a height of 50 pixels and the second row a height of 20 pixels. We have added a text to each column within the rows, the first being "Hello world!" and the second being "Isn't it a great day...".
Let's take it even further by adding font styles to our text, by using another standard HTML command <span>.
The span command will allow you to add styles to pretty much anything within an HTML document, which could be text or an image. We will be using it by changing the styles of the text we added within our tables. First let's have a close look at a typical span command line for styling text.
<span style="font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#006699">Hello world!</span>
We have added a font to our style which is the standard Arial font, then we have chosen a size of 24 pixels for our font, and set the color for our font (which in this case is a darker blue).
Now let us go ahead and change the table we developed earlier, by adding styles to our fonts.
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="50" align="left"><span style="font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#006699">Hello world!</span></td>
</tr>
<tr>
<td height="20" align="left"><span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#999999">Isn't it a great day...</span></td>
</tr>
</table>
As you may have noticed, we also changed the font style for the text which is located in the second row of our table. We changed the size and the color.
You can play around with this, by changing the variables as you feel like, to get a better feeling of what these features can do for your future templates.
The head section of the document.
The more advance users would probably also like to add additional data to the head section of the document, whether that being additional CSS Stylesheets, Javascripts or meta data.
To add these data you can click on the advance button, and fill in the Additional document <head> information. As you can see I have added some data to inform search engines how to go about the documents Visualizer Album Designer is about to generate.
<meta name="rating" content="Safe for Kids" />
<meta name="expires" content="never" />
<meta name="language" content="english" />
<meta name="distribution" content="Global" />
<meta name="robots" content="INDEX,FOLLOW" />
You can copy and paste these data into your <head> tag area, if you feel like using them.
Final word.
You have been introduced to a more advance way to go about designing photo albums for the web, I would highly recommend studying this tutorial again and again until you feel you are beginning to understand what the different settings can do for your future display on the Internet. Don't be afraid to ask if you have questions, and feel free to start your own thread in the Web design and Scripting area, if you would like to learn more about coding with HTML.
If you have generated a web album you would like to share, let's see it in the Review my website.
Have fun! |
|
