Step 3: Add elements to the index page

We will add elements to the index page in this section (Video Tutorial - 18:47).

Open the index page by double clicking "index.html" in the Website Explorer.
Drag the image "Sky_Background_With_Green_Grass.jpg" from the Website Explorer or Windows Explorer if it has not been added to the website to the page. You can use your own image if you like. The size of it is 900 x 330. After adding it to the page, move it to 140 pixels from the top and 0 pixel from the left.

Insert a text element to the page by clicking this button

. Double click the newly inserted element to open it in the Text Element Editor. We will use the following text as example. Copy and paste the following text to the editor.

Heading 1 - Vivamus dapib convallis magna sed fringillat taciti sociosqu ad litora torquent per conubia nostra.

....................................................................................................................................................

Heading 2 - Nullam at erat purus, at imperdiet augue. Aliquam in volutpat massa. Suspendisse potenti. Aenean venenatis tempor varius. Curabitur mollis, mauris at accumsan convallis.

Paragraph : Class aptenNullam at erat purus, at imperdiet augue. Aliquam in volutpat massa. Suspendisse potenti. Vivamus dapibus convallis magna sed fringillat taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean venenatis tempor varius. Curabitur mollis, mauris at accumsan convallis.

Paragraph : Mauris ut fringilla est. In pretium porta massa sit amet gravida. Proin sed odio arcu. Curabitur convallis nisi eget elit pretium faucibus hendrerit metus pulvinar. Suspendisse ut dolor augue. Nullam at erat purus, at imperdiet augue. Aliquam in volutpat massa. Suspendisse potenti. Vivamus dapibus convallis magna sed fringilla.

After pasting the text, it will look like the following:

When you click on each line, the combo box at the toolbar should show "Paragraph".

Now click on the line starting with "Heading 1". Select "Heading 1" from the drop down menu which are now showing "Paragraph". After this, the drop down menu will show "Heading 1".

Now click on the line starting with "Heading 2". Select "Heading 2" from the drop down menu which are now showing "Paragraph". After this, the drop down menu will show "Heading 2".

Select the text "Read more >>>" like the following. Press this button

to open the Add Hyperlink Dialog. Select the values from the drop down menus as shown below. In your real website, it should link to the "Read more" page you create. We select "index.html" for demonstration only.

Press "OK" button to add the hyperlink. The text will now look like the following.

Press the "Save and Close" button to add it to the page. Resize the text element to 600 x 390. Move it to 490 pixels from the top and 0 pixel from the left.

While the text element is still selected, right click to bring up the context menu and select "Styles" to open the Styles Dialog. Press the "Add" button to bring up the Select Styles Dialog. We do not have the style we want so press the "New" button to bring up the CSS Style Editor.

Press the "Add" button at the CSS Style Editor. A style with name "style1" will be created automatically. While it is still being selected, press the "Rename" button or "F2" to rename it to "read-more-link".

Click on the "Text" tab and change the values as shown below.

Click on the "Elements" tab and select the options as shown below to apply the styles to the links only.

Create another new style and rename it to "read-more-link-hover" using similar steps above. Click on the "Text" tab and set the values as shown below.

Click on the "Elements" tab and select the option as shown below to apply the styles to links only.

Press the "OK" button to return to the Select Styles Dialog. Select the newly created styles "read-more-link" and "read-more-link-hover". Press "OK" button to add them to the Styles Dialog. Press the "OK" button again to apply these styles to the text element.

After this, the text element will look like the following.

Insert another text element to the page by clicking this button

. Double click the newly inserted element to open it in the Text Element Editor. Copy and paste the following text to the editor.

Heading 2 - Mauris at accumsan

Class aptenNullam at erat purus, at imperdiet augue.

Aliquam in volutpat massa. Suspendisse potenti.

Vivamus dapibus convallis magna sed fringillat.

Curabitur mollis, mauris at accumsan convallis.

After pasting the text, it will look like the following.

Now click on the line starting with "Heading 2". Select "Heading 2" from the drop down menu which are now showing "Paragraph". After this, the drop down menu will show "Heading 2".

Select all other lines together just like the following. Click on this button

to turn them to a list.

Press the "Save and Close" button to save the text to the page. Resize the text element to 290 x 200 and move it to 890 pixels from the top and 0 pixel from the left.

Insert another text element to the page by clicking this button

. Double click the newly inserted element to open it in the Text Element Editor. Copy and paste the following text to the editor. Apply the steps as shown above to this one.

Heading 2 - Proin sed odio arcu

Curabitur convallis nisi eget elit pretium faucibus hendrerit metus pulvinar.

Suspendisse ut dolor augue. Nullam at erat purus, at imperdiet augue.

Aliquam in volutpat massa.

Suspendisse potenti.

Vivamus dapibus convallis magna sed fringilla.

The final results should look like this.

Resize it to 290 x 200 and move it to 890 pixels from the top and 320 pixels from the left.

Insert another text element to the page by clicking this button

. Double click the newly inserted element to open it in the Text Element Editor. Copy and paste the following text to the editor. Apply Step 4 above for "Heading 2". Also apply the "Heading 2" style to the dates "2010 Jun 4" and "2010 Mar 21". Apply Step 3 above to add hyperlink to "Read more>>>".

Heading 2 - Lastest News

2010 Jun 4

Paragraph : Mauris ut fringilla est. In pretium porta massa sit amet gravida. Proin sed odio arcu. Cras lacinia molestie est, at tincidunt lectus rhoncus vitae.

The results will look like the screenshots below.

Now click on the "Read more>>>" link and select "Text" from the drop down menu which is now showing "Paragraph". Apply this also to the next "Read more>>>" link. The "Paragraph" has a bottom padding of 1em. As we do not need the padding here, we mark those two links as "Text".

Press "Save and Close" button to add the text to the page. While the text element is still selected, right click to bring up the context menu and select "Styles" to open the Styles Dialog. Press the "Add" button to open the Select Styles Dialog. Select both "read-more-link" and "read-more-link-hover". Press "OK" button to add these styles to the Styles Dialog. Then press "OK" button again to apply these styles to the text element.

Resize the text element to 230 x 390. Move it to 490 pixels from the top and 660 pixels from the left. After this, the text element will look like this.

We are going to create a rounded rectangle image for the background. Select Tools -> Image Editor from the main menu. Click on the down arrow of this button and then New Image -> Blank to create a new image. Set the image size to 250 x 250.
Click on this button to open the Add Shape Dialog. Select the "Shape" tab. Set the values as shown below.

Click ont the "Style" tab and set the color to #F7F7F7.

Press the "OK" button to create the shape. Press the "Insert to Page" button to open the Insert Image Dialog. When asked whether to save the current image to an external file, press the "No" button.

When the above dialog is closed, the following Insert Image Dialog will be opened. Set the values as shown below.

Press the "OK" button to insert the shape to the current page. Move it to 890 pixels from the top and 650 pixels from the left.
Drag the image "House.png" from the Website Explorer or Windows Explorer if it has not been added to the website to the page. You can use your own image if you like. The size of it is 50 x 50. After adding it to the page, move it to 900 pixels from the top and 660 pixel from the left. It will now be over the "location-background.png" image.
Insert a text element to the page by clicking this button . Double click the newly inserted element to open it in the Text Element Editor. Enter the text "Location" into the editor. While the cursor is still on the first line. Select "Heading 3" from the drop down menu.

Press the "Save and Close" button to save the text to the page. Resize the text element to 150 x 30 and move it to 910 pixels from the top and 720 pixels from the left.
Insert another text element to the page by clicking this button . Double click the newly inserted element to open it in the Text Element Editor. Copy and paste the following text to the editor.

New City, Country 21

Aliquam Street Second Floor

New City 21210

Tel : 000-0000-0000

Fax : 000-0000-0000

After pasting the text, it will look like the following:

Press the "Save and Close" button to insert this text to the page. Resize the text element to 210 x 170 and move it to 960 pixels from the top and 670 pixels from the left. The results will look like this.
Click this button to save all the pages. Actually you should click this button or this one to save the pages more frequently so that when your computer crashes for whatever reason, you will not lose all your changes.
You may like to change the title and add description and keywords to the page. Select Edit -> Page -> Page Properties from the main menu or right click on the page or select "Page Properties" from the context menu. Replace the title "Untitled Page" with the one that reflects the contents of this page. Also add your description and keywords to the fields provided. Though adding contents to these two fields are not mandatory but they are important for search engine optimization.
This tutorial has completed. You can add other pages. As there is only one template page, it will be used automatically when you create new pages.