| |
Using HTML within Visualizer Album Designer - Part 1.
This is a beginner tutorial that will help you learn some of the basic commands when working with HTML. Don't let the word "coding" scare you. You will be amazed to learn how coding actually makes a lot of sense once you get the hang of it. Take your time to study it and allow yourself to come back again and again until you feel you are beginning to understand it. Enjoy the following Tips n Tricks.
Creating a table for your header and footer section.
When you are creating your photo albums for the web, Visualizer Album Designer let's you add any content to the header and footer area of your html document. Commonly tables are used as we can measure the exact width of the generated album, by calculating the thumbnails per row with the width of the thumbnails. Please note that Visualizer Album Designer will automatically generate a 10 pixel space between each thumbnail. This means that these numbers must also be calculated into the width of your table, if you want your own table width to match the width of your photo album. The math to measure the exact width is straight forward:
Thumbnails per row * Thumbnail width + Thumbnails per row * 10
In the example below you can see what a table looks like when you code it yourself. The following tips will help you to understand how to work with tables and how to make a table suit your needs.
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>INSERT YOUR CONTENT HERE </td>
</tr>
</table>
Adding a new column to your table.
Before you can add any content to a table you will have to add one or more columns. You can add any content to a column whether that being text, images or media. When you add a new column you will placing the content within that column next to your previous column. You will later learn how to seperate the columns by setting the width paramaters. In this table we haven't added any settings, the example below only illustrates how to add a new column within your table.
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>INSERT YOUR CONTENT HERE </td>
<td>INSERT YOUR CONTENT HERE </td>
</tr>
</table>
Adding a new row to your table.
As you learned from the previous tip, you can insert columns that will allow you to work sideways on the page. To work downwards you will need to add a row. When adding a new row you must make sure that the row contains as many columns as your first row. In the example below there is only one column in each row, however, it is not uncommon to see a table with more than one column in each row. In the next tip you will see a table with two columns in each row.
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>INSERT YOUR CONTENT HERE </td>
</tr>
<tr>
<td>INSERT YOUR CONTENT HERE </td>
</tr>
</table>
Creating a table and setting the pixel dimensions.
You can easily change the settings of a table, where you can determine the width of the table itself, the width of each column and the height of each row. In the example below you can see that the width of the table has been set to 500 pixels. You will also see that the width
of the columns in the first and second row, have been set to each their number, numbers when put together equals the width of the table. Notice that each column you add must maintain the same width for each row you add, and the amount of columns must be the same for each row.You can determine the height of the columns in each row you add, but remember you cannot set a column to one particular height and another to a different height within the same row. You can only change the height of a column when you add a new row.
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="300" height="100">INSERT YOUR CONTENT HERE </td>
<td width="200" height="100">INSERT YOUR CONTENT HERE </td>
</tr>
<tr>
<td width="300" height="50">INSERT YOUR CONTENT HERE </td>
<td width="200" height="50">INSERT YOUR CONTENT HERE </td>
</tr>
</table>
Aligning content within your columns.
Sometimes you may need to align the content you have added within a column. There are three different settings to align the content horizontal and three different settings to align the content vertical. When aligning content horizontal we will use the align command and when aligning content vertical we will use the valign command. The examples below will illustrate how you should go about aligning content within a column.
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">INSERT YOUR CONTENT HERE </td>
<td align="right">INSERT YOUR CONTENT HERE </td>
<td align="center">INSERT YOUR CONTENT HERE </td>
<td align="left" valign="top">INSERT YOUR CONTENT HERE </td>
<td align="right" valign="bottom">INSERT YOUR CONTENT HERE </td>
<td align="center" valign="middle">INSERT YOUR CONTENT HERE </td>
<td valign="top">INSERT YOUR CONTENT HERE </td>
<td valign="bottom">INSERT YOUR CONTENT HERE </td>
<td valign="middle">INSERT YOUR CONTENT HERE </td>
</tr>
</table>
Notice in this table we have 9 columns within the row. You can have as many columns within a row as you want, and you can change the settings of each column to match your requirements, just remember you can't have different heights for each column within the same row - it's all or nothing. |
|
|
|
 |
|
Submitted by:
BevB
Popularity: 18 %
Viewed 380 times |
|
 |
|
