Welcome to the Freeola Internet customer support pages. This guide is designed to help with setting up your first website in Adobe Dreamweaver and uploading it to a Freeola web space. For more internet help topics please visit our main Support Page.

If you would like to learn how to create your first website in Dreamweaver then hopefully this article will be of some use to you. Dreamweaver in case you did not know is a web site editing program with FTP capabilities built in to allow you to manage a website with or without knowledge of HTML. You can download a free 30 day trial from Adobe's website.

Once you have installed Dreamweaver, open it up and click "Dreamweaver Site..." under the "Create New" section of the green welcome dialog box. A "Site Definition" window will then open. Give your site a name so that it can be referenced and type in the website address, so if you own the domain name "foobar.com" you would enter "http://foobar.com". Click "Next" to continue.

Since this is a beginners tutorial to using Dreamweaver we will not go into the murky depths of using server side technologies to keep the next option set to "No, I do not want to use a server technology", and click "Next".

You will then be asked how you would like to work with your files during development, my advice would be to select the recommended option "Edit local copies on my machine, then upload to server when ready". This will let you edit your site offline and then upload all at once when your ready. You then need to select where you are going to store the files on your local computer. Now click "Next".

You will then be asked how you want to connect to the remote server, I.E. the web hosting you have with us, select "FTP" from the list, then go grab your FTP details from your MyFreeola control panel. You will need your FTP address, username and password.

Since you will be the only person editing this site you can select the "No, do not enable check in and check out." and click "Next".

Double check your settings on the following page and go back to edit any if you can see any mistakes, otherwise click the "Advanced tab", select "Remote Info" on the left hand category menu, and make sure "Use passive FTP" is ticked. This will make the FTP uploading work with your security software on your computer. Then click "OK".

Now here comes the fun part! To create your first HTML page, click "HTML" under the "Create New" section of the green dialog box. You will then most likely be presented with a split view of both code and design view, the code view being on top and the design view beneath it. Since we are not going in depth into HTML you can click the "Design" button to the top left of the code view. This will hide the HTML code.

Now let us start by adding some text, a page header for example. To give a section of the page some meaning we should wrap it in a divider tag. To insert a divider tag, click "Insert Div Tag" in the insert window panel on the right hand side of your screen. The following dialog box will then open:

Give the div a class called "header" and click "OK". Now replace the filler text by highlighting it and typing a suitable header like "My first dreamweaver page", highlight the text and in the properties window just below design view change the "Format" to "Heading 1". Then add another line beneath it but still inside the div. Type something like "By Your Name" and change it's format to "Paragraph" to make it a paragraph. Now save the page by going to "File" > "Save", give your homepage the File name of "index.html" and click "Save".

Time for an image! Click beneath the div and insert another div, give it the class name of "content". Highlight the filler text again and click "Images" in the insert window panel, then select "Image". Find an image you want to add to the page, select it, and click "OK". It will then ask if you wish to copy the image to your website folder, click "Yes" and click "Save" again. It will then ask for you to add for "Alternative text", type in a short description of the image, leave the "Long description" blank and click "OK" to insert your image. If the filler text has not disappeared, you can delete it now.

Feel free to make a new line beneath the image and add some filler text of your own.

To create links between pages, hyperlinks are used to navigate the web. Before we create another page lets add some navigation to the homepage. Navigation usually comes above or beside the main content so lets insert another div just after the header div. To do so click just after the end of the content of the header div and click the "Insert Div Tag" button again. Name this div "nav" (for navigation). Now replace the filler text with one line that says "home" and another that says "second". Highlight both lines and then click the bullet point button in the properties window. Now just select "home" and change the "Link" value in the properties window to "index.html". This will turn the "home" word into a hyperlink. Select second and do the same again but this time set the "Link value to "second.html". But this page does not exist?

Now lets create a second page by using "Save As". To do so whilst you have "index.html" open go to "File" > "Save As" and rename the File name to "second.html" and click "Save".

You can now change the page content to anything to distinguish the difference between the two pages.

So how do we get these two linking web pages online? To do so the synchronise feature is the tool of choice, in the Files window on the right hand side beneath the Insert window there should be a circle icon made up of 2 arrows.

Click this icon and make sure the "Direction" option is set to "Put newer files to remote" and click "Preview". Check that only your image, "index.html" and "second.html" are on the file list to be put on the server and click "OK".

Now let view your website in a web browser! Open a web browser such as Internet Explorer or Mozilla Firefox, and type in your web address into the address bar of your browser and hit enter. You should then see your website online! Try clicking the links, they should both go to the correct pages and no errors should appear, if you get a 404 error make sure the "Link" values of the hyperlinks within Dreamweaver are correct.

One more thing, have you noticed your web browser's title for the pages is set to "Untitled Document"? You can change this on Dreamweaver, go to each document one at a time and look above the Design view window, there should be a text input set to "Untitled Document", change this to what you want, save the pages and synchronize again. Check your website and there you go!