GetDotted Domains

Freeola Guides

 

Dreamweaver CS4 - Creating a Webpage

Last updated on by Freeola Support

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.

Please Note

This guide was written for Dreamweaver CS4, which is no longer offered by Adobe. However, this guide will remain for those still using the legacy software.

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 is a web site editing program with FTP capabilities built in to allow you to manage a website with or without knowledge of HTML.

Once you have installed Dreamweaver, open it up and click Dreamweaver Site... under the Create New section of the green welcome dialogue 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 enable the advanced server side technologies, so 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, the recommended option Edit local copies on my machine, then upload to server when ready should be used in nearly all cases. This will let you edit your site offline and then upload all at once when you're 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. your Freeola Hosting Server - select FTP from the list, then go grab your FTP details from your MyFreeola Control Panel. You can find this information from the Websites & Hosting > My Websites > Options & FTP Settings menu options.

You will need your FTP Address, Username and Password.

For the Hostname enter your FTP address, your Username will start with either cpvip or sr. Within the Password field, enter your FTP Password.  Then click Next.

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.

Creating the First Page

To create your first HTML page, click HTML under the Create New section of the green dialogue 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 dialogue 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 its 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.

Links

To create links between pages, something called hyperlinks are used. 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'. This page does not exist (yet).

The Second Page

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.

Publishing Your 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, shown below:

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.

Once this process in complete, you can view your website within your chosen web browser.

Open a web browser such as Microsoft Edge or Mozilla Firefox, and type in your web address into the address bar and hit enter. 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.

By default, your new webpage title (or Top Page Text) is set to Untitled Document. You can change this within Dreamweaver, simply 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.


Did you find this article helpful?


Freeola & GetDotted are rated Five stars

Check out some of our customer reviews below:

View More Freeola Reviews

Need some help? Give us a call on 01376 55 60 60

Go to Support Centre
Feedback Close Feedback

It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, Edge, or Opera will provide a better, safer browsing experience for you.