Dreamweaver is the industry standard web editor that allows you to design and build websites. It can create anything from a small one-page site to a database driven e-commerce site with thousands of pages. Dreamweaver is a What-You-See-Is-What-You-Get (WYSIWYG) editor, which means you can lay out your website as you want it to look, and Dreamweaver will write the HTML code for you. What’s more, the latest version (CS4) will write code that is compatible with all browsers, or “standards-compliant”.

These hands-on tutorials provide a solid introduction to Dreamweaver basics.

This Dreamweaver Training Tutorial is in seven parts. Each part builds on the last, so you should progress through each section in sequence.

Look at Silicon Beach Training’s really comprehensive tuition in how to build quality sites with Dreamweaver, it’s best to attend an instructor led Dreamweaver training course taught by a professional.

Silicon Beach Training offer a wide range of Web Design Training courses, including a comprehensive 2-day Dreamweaver Training Course in Brighton, Sussex.

This forms part of the popular Web Design Week Training Package, which provides a comprehensive introduction to Web Design using the inustry standard tools.

Add a comment Read more

Posted by Aaron Charlie in Dreamweaver Tutorial on February 18th, 2009 | No Comments »

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.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.

Add a comment Read more

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

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 »