Part 1.2: Introduction to the Home Page
The first page that you will design will be the ‘Home Page’. This is the main page of your website that visitors will view once they have entered your domain name in their browser. For example, if you type in the domain name http://www.siliconbeachtraining.co.uk you will automatically be forwarded to the ‘Home Page’ on the site.
All this is covered in our comprehensive Dreamweaver course in Brighton, Sussex.
The ‘Home Page’ main function is to include important information relating to your website, including a short description about what the site is all about and relevant links to useful pages.
If you look at http://www.siliconbeachtraining.co.uk, the home page instantly tells you what product it is selling and the service it provides. It is easy to navigate because it points visitors to specific locations where they can find more information about a certain training course or service. This also relates to personal websites, because you still need the main page to give the visitor a good idea of what your website entails.
How to Design the Home Page of Your Website in Dreamweaver CS4
1: Using the template we selected before, Dreamweaver generates a two column web page. You will see a horizontal bar across the top of your page labelled “Header”. Insert the name of your website here. Under the header there are two columns. The narrow left column, called the “sidebar”, is where you will eventually place your navigation menu. The wide right column, entitled “Main Content” is where you will place the bulk of your web page’s content.
2: Directly above “Header”, there is a section that says “Title:” followed by a field that contains “Untitled Document”. This field is the text that the search engines will show as being the title of your web page when it displays the results of a search. It is also the text shown by a web browser in the title bar of the browser window when it displays your page.
Highlight the words ‘Untitled Document’, and type in your website name.
Please note the web browser does not display it in the body of your web page because it is an internal field. As mentioned above, the field is only shown in the title bar of the browser window itself. Although it doesn’t show in the body of a web page, it is an important part of the page, so it should not be left as “Untitled Document”.
3: Now we move on to the visible part of your web page. Highlight the word “Header” and replace it with the name of your website.
4: Next, replace the “Main Content” section of the web page with your real content. Highlight the “Main Content” text, press delete and replace with some appropriate content.
Once this is done, replace the “Lorem ipsum dolor” with your own words by clicking anywhere in the top line. Typing and editing text in Dreamweaver works the same as if you were using a word processor.
The “H2 level heading” subtitle is there to show you that you can have subtitles in your documents as well. Replace it, along with the text below, or whatever you want.
Please take a look at the following example text:
Welcome
Silicon Beach Training offer quality, cost effective training to industry and individuals. Our training courses allow beginners and professionals to expand their IT, business and management skills. Small classes allow clients plenty of individual assistance from our experienced trainers.
Featured Product
Popular courses include Project Management, Dreamweaver training, Photoshop training, Systems Development and Business Analysis courses, Leadership training and Web Design training.
5: You do not need to change anything in the left column (sidebar). You will be adding a navigation menu to this section in later chapters
6: Scroll down to the bottom of the page and locate the horizontal bar labelled “Footer”. Replace the word “Footer” with anything you like e.g. a copyright notice. The copyright symbol, ©, can be inserted by clicking “Insert > HTML > Special Characters > Copyright” from the menu.
7: Once you are happy with your web page, save it by clicking “File > Save As…”. Type “index.html” (without the quotation marks) into the “File name” field and click the “Save” button.
IMPORTANT: the name “index.html” must be typed exactly as shown, in lowercase letters and no spaces between the words. Do not use any other name. Files with the name “index.html” are regarded as special files by most web servers. Published correctly, when a visitor accesses your website by just the domain name, like http://www.siliconbeachtraining.co.uk the web server will automatically deliver to them the “index.html” file in your site’s main folder.
You have now created your home page.
