Please follow all of the steps below exactly – don’t worry if you don’t fully understand the steps you are carrying out at the time – all will become clear as you move through the tutorial. Alternatively we offer a great introduction to Dreamweaver course in Brighton, Sussex.

What you will need:

Dreamweaver CS4:
You can buy Dreamweaver from a number of re-sellers on the web including Amazon – follow this link to purchase the software

You can also download a free 30 day trial from http://www.adobe.com/products/dreamweaver/ that will be suitable for the proposes of this tutorial

A Web Hosting Account:
This is where your website is stored so others can access it on the World Wide Web.  You transfer (upload) your files to the Host’s servers where they can be accessed 24 hours a day by anyone browsing the internet.

A Domain Name:
Although you won’t need it for this tutorial you will need to register a domain name for your site.  This can be anything you like (as long as no-one else has already registered it) like for example www.siliconbeachtraining.co.uk or www.mycompanyname.com.  This gives your website a unique identity  that people can use to access your site.

Setting up your site using Site Manager

1: Open Dreamweaver

2: You will now see the Dreamweaver interface (pictured below) with the menu bar along the top (“File Edit View Insert Modify Format Commands Site Window Help”).  This is where you access most of Dreamweaver’s features.

3: First we need to open the Site Manager.  Click ‘Site’ in the Menu Bar, then choose ‘New Site’ from the dropdown menu that appears.

4: A dialog box titled “Site Definition for Unnamed Site” will appear (there may be a number after this title, don’t worry about this as we will soon be changing the name).

There are two tabs at the top of the dialog box, ‘Basic’ and ‘Advanced’.  At this stage you need to use the ‘Basic’ tab, click the ‘Basic’ tab to ensure that it is selected.

The next stage is to enter a name for your site.  You should see a field named ‘What would you like to name your site?’  Choose a name for your site and enter it in this field.  This is a local name for your own reference and will not show up on your site online, it will allow you to distinguish between them if you are creating more than one site.

For this tutorial enter ‘Example Website’ into this field.

The next field is called “What is the HTTP Address (URL) of your site?”  If you have registered a domain name enter it here.  For example, if you had you had registered ‘siliconbeachtraining.co.uk’ enter ‘http://www.siliconbeachtraining.co.uk’ into this field.

Click ‘Next’ at the bottom of the window to continue.

5: Accept the default on the next screen “No, I do not want to use a server technology” and click ‘Next’.

6: On this screen you can choose where Dreamweaver will save your local files.  If you accept the default Dreamweaver will create a folder with the same name as your website.  You can also specify another folder if you like.  For simplicity we will accept the default by clicking ‘Next’.

7: The next window will ask you “How do you connect to your remote server?”.  Choose ‘None’ from the dropdown menu by clicking the down arrow.  We will change this later but for the time being selecting ‘None’ will allow us to move on quickly.

Click ‘Next’ at the bottom of the window to continue.

8: The final screen shows a ‘Site Definition’ summary.  Click ‘Done’ at the bottom of the window to finish.

You have now defined your site in Dreamweaver.

Add a comment Read more

Posted by Aaron Charlie in Dreamweaver Tutorial on March 5th, 2009 | No Comments »

Part 1.3: Publishing Your First Web Page

Before you do anything else; you will need to publish your first Web Page to your web host. You will now learn how to transfer your web page and its associated files to your web host so that the page becomes “live” on the Internet. All this is covered in our comprehensive Dreamweaver training course in Brighton, Sussex.

How to Publish Your Web Page Using Dreamweaver

1: Start up Site Manager by clicking “Site > Manage Sites…” from the menu. A dialog box entitled “Manage Sites” should open, with your website’s name highlighted in the box in the main part of the window. Click the “Edit…” button.

2: Click the “Next” button until you arrive at the screen with the following question: “How do you connect to your remote server?”
Select “FTP”. Once this has been selected, additional questions will need to be answered.

• “What is the hostname or FTP address of your Web Server?”
• “What folder on the server do you want to store your files in?”
• “What is your FTP login?”
• “What is your FTP password?”

3: This information was provided when you first signed up for a web hosting account.
Your “FTP address” or File Transfer Protocol address is the way in which you transfer your web pages from your own computer to your web host’s computer. This is known as “uploading” or “publishing”.

4: Type the FTP address into the field “What is the hostname or FTP address of your Web Server?”

5: The next question: “What folder on the server do you want to store your files in?” Your files cannot be put into any folder on the web server. You can place your web pages in a folder called “www” or “public_html”. Although others say that you should place them in the default directory that you see when you connect by FTP.

If your web host tells you to upload the files when you connect via FTP, leave the box blank. Otherwise if they tell you that you need to publish your files in a “www” directory or some other folder name, enter in the box given. If the host does not mention this at all, you can leave the box blank.

6: Type your FTP user name into the “What is your FTP login?” field.

7: Enter your FTP password into the “What is your FTP password?” field. If you don’t want to have to keep entering your password every time you publish a page, leave the “Save” checkbox activated (it automatically becomes checked when you type your password). If you are sharing your computer with others, and don’t want Dreamweaver to save your password, click the check mark to uncheck it.

8: If your web host tells you that the information you entered above is for SFTP or “Secure FTP”, click the “Use Secure FTP (SFTP)” checkbox. Otherwise leave it blank.
(Note: if you check the secure FTP option, make sure you double check the information provided by your web host to ensure that the default folder to publish your files is still the same. Some web hosts log you in to a different folder when you connect by SFTP from the one you get when you connect by FTP. You may have to adjust the folder name to account for this if you use the SFTP option. In general, if you are confused or not sure, just leave the box unchecked to use normal FTP.)

9: Click the “Test Connection” button to check that you have entered all the information correctly.
Note: If using Windows Vista, the Windows firewall may display a message asking you to block or unblock the connection. Click the “Unblock” button, or you’ll be blocking FTP connections for Dreamweaver. The interference by the firewall may also cause your first test in Dreamweaver to fail, leading Dreamweaver to issue a dialog box telling you to use Passive connections. Just click OK, and click the “Test Connection” again.
If the “Test Connection” button fails, Dreamweaver will display a dialog box asking you to try connecting with Passive FTP. To do this, look at the top of the dialog box to locate the “Advanced” tab. Click it. Somewhere in the middle of the page is a checkbox for “Use passive FTP”. Click the box to activate it. Then click the “Basic” tab at the top of the dialog box again, to return you to the wizard view. Finally, click the “Test Connection” button again.
If the test continues to fail, it is possible that you have entered some information incorrectly.
If the test succeeds, click the “Next” button until you reach the final Summary page. Then click the “Done” button. Do not click the Cancel button for a shortcut out of this dialog box or you may have to re-enter everything you typed in earlier.

10: Click “Done” again to dismiss the “Manage Sites” dialog box.

11: Then click “Site > Put” to publish your web page.
You might receive a message from Dreamweaver asking you whether it should “Put dependent files?” Click “Yes”. This means it is uploading things like your images and CSS files that are required by your web pages.

You have now published your first web page.

Add a comment Read more

Posted by Aaron Charlie in Dreamweaver Tutorial on March 13th, 2009 | No Comments »

Part 2.1: How to add a logo to your Website

1: Create an ‘Images’ folder in your in your website directory. All this is covered in our comprehensive Dreamweaver course in Brighton, Sussex.

In the right hand panel in Dreamweaver you will see a section named ‘Files’.  In this section there are two tabs, ‘Files’ and ‘Assets’.  Select the ‘Files’ Tab.

In this tab you will see a list of the files used for your website “index.html” & “twoColLiqLtHdr.css”.  We created these files in Part One of this tutorial.

To make the new folder right click just below the two existing files in your site and select ‘New Folder’ from the menu that appears.  This will create a folder called ‘untitled’ – rename this folder ‘images’ by typing over the default folder name.  Hit ‘Enter’ to complete this.

2: Copy your images in to your Images folder

Now we need to copy all the images you have created into this new folder, this is done without using Dreamweaver.  To do this you need to navigate to the folder they are currently held in, select the images you want to use and copy them.  This can be done by right clicking on the images and selecting ‘Copy’ from the menu that appears or by pressing ‘Ctrl + c’ on the keyboard when you have selected the images to copy.

Navigate to the ‘images’ folder you have just created and paste the images here.  This can be done by right clicking in the ‘images’ folder and selecting ‘Paste’ from the menu that appears or pressing ‘Ctrl + p’ on the keyboard.

The images should now appear as icons in the ‘images folder’.

3: Open your Web Page

Go back to Dreamweaver and open your index.html file in the ‘Files’ panel on the right hand side of Dreamweaver.  The page should open in Dreamweaver’s main window.

4: Insert the Image into your Web Page

When the index page opens the blinking text cursor should appear just to the left of your Website’s name in the Header.  If it is somewhere else on the page , left click just to the left of your Website’s name to place the text cursor here, this is where we will insert the logo.

On the menu, click ‘Insert > Image’.  A dialog box should appear containing a list of the folders in your website.  You should see “_notes” and “images”.  Double click the “images” folder to open it.

You should see a list of the images you copied here in step one.  If you are unsure which image you want to use you can left click each of them and a preview will appear at the right hand side of the dialog box.  When you have selected the correct image, click ‘Ok’ at the bottom of the dialog box.

Another dialog box entitled “Image Tag Accessibility Attributes” will appear.  Insert “Example Company’s Logo” into the “Alternate Text” field.

The ‘alternate text’ is a description of the image.  The text appears if a visitor looks at your site with the images disabled in their browser.  The ‘alternate text’ is also indexed by search engines and read by screen readers for the visually impaired.  You don’t need to insert anything into the ‘alternate text’ field but you should do to make your website accessible to the disabled.

Click the ‘Ok’ button at the bottom of the dialog box to continue (you don’t need to enter anything into the ‘Long Description’ field.

Your logo should now appear next to your site name in the header.  If the image is too big or you want to change the image you can select it, hit ‘Delete’ on your keyboard to remove it.  Repeat this stage to insert the new image.

If your logo is designed to fill the whole horizontal space of your site and your website name should be displayed below the logo, click the left mouse button in between the image and your site name.  Press ‘Enter’ or ‘Return’ on your keyboard to move the site name below the logo.

If you don’t like how this looks you can do one of two things.  To undo your last action select ‘Edit > Undo New Paragraph’ from the menu or press ‘Ctrl + z’ on your keyboard.

You can also remake your logo so it includes your website’s name.  If you do this you can delete the text version of your site name.  If you do this make sure you put your site name in the ‘Alternate Text’ of the image (ideally elsewhere on your web page as well).

5: Fixing the spacing between your logo and site name

If your logo fits beside your site name in the header it will probably be too close to the text.  This can be easily remedied.

Click the image once to select it.  At the bottom of the Dreamweaver window you will be able to see a panel entitled ‘Properties’.  With your picture selected the ‘Properties’ panel will show a number of fields you can change to configure your image (see below)

In the ‘H Space’ field enter a value of ‘5’ and press ‘Enter’ or ‘Return’ on your keyboard.  In the main Dreamweaver window you will see space has been added either side of your logo.

You can also adjust the ‘V Space’ value to add space at the top and bottom of your logo.

Change these values until you are happy with the amount of space around your logo.

6: Save and publish your web page

Select ‘File > Save’ from the menu to save your web page.

Then select ‘Site > Put’ from the menu.  You have already set up your site in the previous chapter your web page should upload.  Dreamweaver may ask you if you want to ‘Put Dependent Files’, if so select ‘Yes’.  Dreamweaver will automatically upload all the other files (images, css) that this page uses.

You have now added a logo to your website.

Add a comment Read more

Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | 1 Comment »

Part 2.2: Adding Other Images to your Web Page

To add images into the main body of your web page you should use the same technique described above. All this is covered in our comprehensive Dreamweaver training course in Brighton, Sussex.

Place the text cursor where you wish to insert the image and select ‘Insert > Image’ from the menu.  The same adjustments to the ‘H Space’ and ‘V Space’ can be made by adjusting the values in the ‘Properties’ panel.

You can also align your images to the right or left of your text.  When you insert an image into the text it will probably similar to the image below:

You can align your images so the text flows all around them.  To do this, select the image by left clicking it once.  In the ‘Properties’ panel you should see a drop down menu entitled ‘Align’, it should be set to ‘Default’.  Click the drop down menu and select ‘Left’.

The image should be aligned to the left with the text flowing around it like the image below:

To align the image on the right, select ‘Right’ from the ‘Align’ drop down menu in the ‘Properties’ panel.

Adjust the ‘H Space’ and ‘V Space’ values until you are happy with how the image displays.

When you are happy with the images you have added, save and publish your web page.

You should always test the changes you have made by pointing a browser at your site.  Different browsers (Internet Explorer, Firefox & Opera are a few examples) sometimes display the same web page slightly differently.  You should test your web page in as many browsers as possible to ensure that it displays correctly in all of them

Add a comment Read more

Posted by Aaron Charlie in Dreamweaver Tutorial on March 16th, 2009 | No Comments »