Dreamweaver - Creating a Webpage
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.
For the hostname enter your FTP address, for VIP Hosting users it will be something like 'vip9.freeola.net', the folder you want to store files in on the server is htdocs, your username will be something like 'vip0123456' and enter your password. You can find this information here your MyFreeola control panel and then clicking Options & FTP Settings. Then click Next.
Free hosting users
For the hostname enter your FTP address, for free hosting users it will be something like 'freeolaweb1.freeola.net' or 'www.yourwebsite.com', the folder you want to store files in on the server is htdocs, your username will be something like 'sr0123456' and enter your password. You can find this information here your MyFreeola control panel and then clicking Options & FTP Settings. 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.
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!
Freeola & GetDotted are rated
Check out some of our customer testimonials below:
Need some help? Give us a call on 01376 55 60 60
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, or Opera will provide a better, safer browsing experience for you.