Chapter 3. Create index (home) page


You can use of course the default template to create and develop both index (i.e. home) and child pages with the help of the powerful and diverse tools of SVERDYSH-HTML Editor.
However, developing a website for your client, you often need to do a quick presentation to the client, to grasp the client's vision of the project etc.
In this case you will need to instantly create a basic website, just like a blueprint of the website, to show the whole idea etc, using it as artist uses a sketch-book.
That's why SVERDYSH-HTML Editor offers you a powerful but straighforward tool to create index page in an automatic way saving a lot of your time on its development.
This tool is called Homepage options dialog and available from:
CreateIndex menu > Make index page > Homepage options
This dialog contains Area 1, Area 2, Area 3. The use of Area 3 is optional!
Just for demonstration purpose, on the image below these areas are marked by big red figures.

Method 1. Apply without filling in any areas whatsoever

According to this method, open Home page options dialog and at once press the Apply button without filling in a single box of the dialog. The dialog will be instantly closed, and you find yourself in the main window of the Editor containing the newly created code (a template) of the index page:

Yes, the functions are empty (no values between quotation marks), but there is the module of the page with the distinct skeleton of the navigation bar (file extensions are already around, but there are no file names). Press the Test button. That's what you see:

The page is already formatted for you: in the left upper corner you can see the pipes of the navigation bar (but without hyperlinks).
Under Method 1, the only thing to do now is to enter values between quotation marks and to enter contents into the body area manually, like you did in Chapter1. It's a very robust and practical method!

Method 2. Filling in textboxes of the dialog

A. Area 1

Area 1 is called "Index page HEAD and BODY". It is absolutely the same as Default template options dialog covered in Chapter 2. You already know how to fill it in, so there is no necessity to repeat this again.
At the picture below you can see how it is looking after the data was entered.
Please note, that background color box is not filled in because the backgroung image will take precedence over it anyway.
Read the text in textboxes and try to visualise how it will look, when tested in browser.

B. Area 2

Area 2 is called "Name child pages". You should enter into the textboxes the names of the child Web pages which you are designing. They will become the names of html files, so don't allow spaces between words (use underscores etc to avoid gaps).
Note: actually child page files will not be created whatsoever! The names are used only to create navigation bar for index page. To create child pages really, you will have to go to CreateSatellite menu, which will be covered in Chapter 4.
There are 14 textboxes.
If you fill in all 14 boxes, then seven hyperlinks will be on one line, and seven hyperlinks will be automatically placed on the next line.
Also, when navigation bar is created (horizontal, at the top ), hyperlinks are divided by pipes (on the keyboard of your computer the pipe character is next to the shift key) as it has been a universal fashion on the Web for many years.
If you use less then 14 child pages, say only six, then you will have to remove excessive remaining pipes, they are not removed automatically.

After area 2 is filled in, you can press the Apply button, returning to the main SVERDYSH-HTML Editor window, and then continue coding (the entire project!) in the body area without using area 3 at all! Because the main Editor window is much more spacious than area 3, you may find it more comfortable to work in. Basically, with filling in area 2, you have already created the navigation bar, which is the main reason for using automatic creation index page at all! This is a very strong argument for this idea (i.e. is not to use area 3 whatsoever, leaving it blank).
C. Area 3 (optional)

Area 3 is called "Write page contents".
This is the body area, the contents of which will show up in browser
and where you for example placed "Hello, world!" text in Chapter1.
As you can make sure, there is already (as an example) some text in body area.
Area 3 is meant only for entering headings and limited quantity of text. But it is not meant for proper coding, because it does not even contain proper controls for this.
What is special about this window is that, getting from one line to the next is done by clicking your mouse and putting cursor there rather than just pressing Enter button of keyboard like you do elsewhere.
To code line break, you should press button Break at the bottom.
Also at the bottom, there is button "Delete" which will clear all the text in body area.

That's how the filled in dialog looks (fragment):

D. Now press the Apply button

After all the necessary boxes are filled in, it's time to press the Apply button.
The dialog disappears and you find yourself in the SVERDYSH-HTML editing area where the dialog has left a lot of newly created code.
In the main area, we have formatted the text entered from Area 3 and added a hyperlink to the last line.


E. View it in browser

We are very close to the end of this chapter, it's time to press the Test button and enjoy the result.
You will see on the page the navigation bar (at the top) with hyperlinks divided by pipes, then three lines of text, and (below) the hyperlink to

F. Last but not least

You can turn this horizontal navigation bar into vertical one to place on the left or right-hand side of the page. This transformation will need of course some change of the code, which is very easy to do. In the long run, the code you've got is meant to build upon, it's not a dogma.
Also, you could paste the vertical navigation bar (or horizontal!) to the child pages, since by default child pages, which you are to create in Chapter 4, do not have navigation bars whatsoever (they basically contain only a link to home (i.e. index) page and a horizontal rule at the top). Many of your clients will prefer to have navigation bars on all pages of the website (and for good reason!).
One way to create a vertical navigation bar is to make a one-column table with 14 rows. And into each row you can place one hyperlink from the horizontal navigation bar. The table will keep them together.

Note: you can find some examples (and ideas) of creating vertical navigation bars in Frames menu.

One more idea. You can use this index page module for creating all of your child pages without resorting to the special child page making facility which will be covered in Chapter 4.

<--- To Contents