(View PDF file)
Home page is the first page a visitor will see
when he visits your website. It is like the front of a shop. There are many
ways to layout your homepage. To layout your homepage you will first select a
page interface. Then, decide what content and how it will be displayed on the
You may select any of the 8 available interfaces
for your homepage. Spend enough time to think before you pick an interface.
This must be done before you add the content to it. If you change the page
interface after you have added the content, the homepage might not look right.
The page interface is the arrangement of columns
of the webpages of a category. The center column of some interfaces contains 2
extra elements. These elements are normally boxes of headlines (or titles). The
following pictures show these page interfaces and how they look on the actual
Page Interface 2
Page Interface 3
Page Interface 4
Page Interface 5
Page Interface 6
Page Interface 7
Page Interface 8
To layout out your Homepage, you must first
select one of the above interfaces. Next, you will decide which content to be
shown and it is presented.
Layouts of a Homepage
Following are some common layouts for a homepage:
In this article, you will practice doing some homepage
layouts. What you learn here will help you in creating your own homepage. If
you know how to utilize the functions of your website, you may create a layout
that is quite different from the following examples.
You will use “Page Interface 1” for the first
three examples and “Page Interface 6” for the 4th example.
Here’s how to do it:
You will enter a screen that shows different
sections of your web page. Go to the “Center”
section and click on “UC_OnePage”.
This element will become orange and an “Edit”
button will appear. Click the “Edit” button. A small screen will appear.
Leave the first 2 boxes as is. In the “Detail
Page Display” section, uncheck all the boxes in this table. Click “OK” to accept the changes. You will be
back to the “Edit page layout”.
Click the “Save”
Finally, click the “Update” button of the category record.
Now, let’s add an article and select category
“Homepage” for it.
This layout will show a few latest news (or
articles) from a specific category.
This example assumes that your Homepage will
show the latest articles in the category “Writings”.
The category record of “Writings”, after
changing, will look like this.
This layout will present some pictures that tell
about your business or organization in the form of a slide show.
With this special layout, you will use the advertisement display type to create a
slide show. This is the easiest way to get it done.
If you want to have a line of text above (or
under) the picture, you can enter it in this box. You can align this text to
the center by clicking the text then click the “Align center” icon in the tool box.
Insert one slide show picture here, similar to
the way you would insert an advertisement image. After the image is inserted,
you need to align it to the center. Click on the image to select, then click
the “Align center” icon in the tool
This layout highlights some products or services
of your business or organization. In this example, the owner of the website
wants to emphasize on the three activities. These three activities may already
exist in the Left Menu (or Top Menu) but they are more emphasized in this
In this example, the homepage shows the 3 items
which are the 3 sub-categories hidden in the Left Menu.
This layout is simply an article which contain a
table with 3 columns and 2 rows. We will put 3 banners in the top row, and 3 descriptions
in the bottom row. Therefore, the Homepage
category will use the “One page” content type.
You will enter a screen that shows the sections
of your web page. Go to the “Center”
section and click on “UC_OnePage”.
This element will become orange and an “Edit” button will appear. Click the
“Edit” button. A small screen will appear.
NOTE: The banner images you are inserting into the top
cells should be as wide as the width of each cell. If the image is too wide,
your table will look bad on the web page.
In this example, the banner image should be 235 pixels wide.
The “Description” box will look like this after
the third image was inserted.
Next, you will insert text into the cells in the
lower row. The “Description” will look like this after inserting the text.
NOTE: If you look closely, you will find that the
first line of text of the last cell does not align with those of the other two
cells. The reason is: the three text blocks are not of equal length. We should
align the first lines of these text blocks. Do as follow.
To align the text in these cells:
- Click anywhere in this text cell.
- Next, click the mouse’s right button. When a small list of tasks appears on the
screen, you can release your finger.
- Move the mouse cursor over the “Cell” line,
another list will appear.
- Click on “Table
cell properties”. You will see a screen with many options.
- Click the “Vertical alignment” box, then select “Top” in the list. This choice means the
text will be aligned at the top.
- Next, you must apply this alignment to all the text
blocks. Click the box near the bottom left corner which is showing “Update
current cell” at this moment. Then, select “Update
all cells in a row”.
- Finally, click the “Update” button to complete
- Highlight the text in the cell, then click the “B” button in the editor’s tool box.
- Next, highlight the number at the beginning of
the text. Click on “Font size” then
select “18pt” in the drop down list.
Until now, you have practiced doing some layouts
for your Homepage.