Part 1.1: Creating a two column Web Page with a Header and Footer
Now we have defined your website we will start to create your first web page. We will create a 2 column page, this means the page will have two vertical columns. Normally the left hand column will contain the site’s navigation menu and the right hand column will contain the site’s main content. All this is covered in our comprehensive Dreamweaver training course in Brighton, Sussex.
1: Click ‘File > New’ on the Menu Bar. A window titled ‘New Document’ will appear.
2: This window gives you different default options for laying out your page. Choose “2 column liquid, left sidebar, header and footer” from the ‘Layout’ column of the window by clicking it once.
3: On the right hand side of this window is an item named ‘Layout CSS’. Select ‘Create New File’ from the drop down menu.
The appearance of your site is controlled by ‘CSS’, selecting this option causes Dreamweaver to place all the ‘CSS’ in a separate file. This saves disk space, bandwidth and makes your website more efficient and quicker to download for users.
4: Click ‘Create’ at the bottom of the window to continue
5: A dialog box will appear entitled “Save Style Sheet File As”. Click ‘Save’ to accept the default name and location.
6: Dreamweaver will now create a two column web page containing some dummy content.
7: Dreamweaver CS4 has a slightly different screen layout which depends on the size of your monitor. If you have a large screen resolution, then Dreamweaver will start up in a ‘split’ mode. This means it will show the ‘raw’ code of your web page at the top half of the window and the ‘Design’ view at the bottom half. If you have a smaller screen resolution, then Dreamweaver will start up in ‘Design’ view only.
In order to standardise the Dreamweaver window, click “View > Design” from the menu bar. This will change the window to ‘Design’ mode where only your web page will be viewed. You can however return back to ‘Split’ mode by clicking “View > Code and Design”. Please note that throughout this tutorial, including the screenshots, assume that you are in ‘Design’ mode at all times
You have now created a two column web page with a header and footer.
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 13th, 2009 | No Comments »
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.
Read more
Posted by Aaron Charlie in Dreamweaver Tutorial on March 13th, 2009 | No Comments »
