Home »
Resources » Dreamweaver CS4 Tutorial
Dreamweaver CS4 Tutorial
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
This forms part of the popular Web Design Week Training Package, which provides a comprehensive introduction to Web Design using the inustry standard tools.
Read more
Posted by Colin Welch in Dreamweaver CS4 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
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.
Read more
Posted by Colin Welch in Dreamweaver CS4 Tutorial on March 5th, 2009 | No Comments »
Part 1.1: Creating a two column Web Page with a Header and Footer
Now we have defined your website we will start to create your first web page. We will create a 2 column page, this means the page will have two vertical columns. Normally the left hand column will contain the site’s navigation menu and the right hand column will contain the site’s main content. All this is covered in our comprehensive Dreamweaver training course.
1: Click ‘File > New’ on the Menu Bar. A window titled ‘New Document’ will appear.
2: This window gives you different default options for laying out your page. Choose “2 column liquid, left sidebar, header and footer” from the ‘Layout’ column of the window by clicking it once.
3: On the right hand side of this window is an item named ‘Layout CSS’. Select ‘Create New File’ from the drop down menu.
The appearance of your site is controlled by ‘CSS’, selecting this option causes Dreamweaver to place all the ‘CSS’ in a separate file. This saves disk space, bandwidth and makes your website more efficient and quicker to download for users.
4: Click ‘Create’ at the bottom of the window to continue
5: A dialog box will appear entitled “Save Style Sheet File As”. Click ‘Save’ to accept the default name and location.
6: Dreamweaver will now create a two column web page containing some dummy content.
7: Dreamweaver CS4 has a slightly different screen layout which depends on the size of your monitor. If you have a large screen resolution, then Dreamweaver will start up in a ‘split’ mode. This means it will show the ‘raw’ code of your web page at the top half of the window and the ‘Design’ view at the bottom half. If you have a smaller screen resolution, then Dreamweaver will start up in ‘Design’ view only.
In order to standardise the Dreamweaver window, click “View > Design” from the menu bar. This will change the window to ‘Design’ mode where only your web page will be viewed. You can however return back to ‘Split’ mode by clicking “View > Code and Design”. Please note that throughout this tutorial, including the screenshots, assume that you are in ‘Design’ mode at all times
You have now created a two column web page with a header and footer.
Read more
Posted by Colin Welch in Dreamweaver CS4 Tutorial on March 13th, 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.
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 labeled “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.
Read more
Posted by Colin Welch in Dreamweaver CS4 Tutorial on March 13th, 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.
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.
Read more
Posted by Colin Welch in Dreamweaver CS4 Tutorial on March 13th, 2009 | No Comments »
Part 1.4: Testing Your Web Page
The next step is to test your web page. This is done by loading it in a web browser. This will let you know whether you have made any mistakes when you entered your details earlier. All this is covered in our comprehensive Dreamweaver course.
Start up your web browser, and type the web address (“URL”) of your site. For example, type “http://www.siliconbeachtraining.co.uk/”
Your webpage should now be visible in your browser.
If you get an error like “No DNS for www.siliconbeachtraining.co.uk” or “Domain not found”, it probably means that your domain name has not yet propagated to your ISP. It can take time for new domain names to be recognised around the world (usually 2 or more days). Some web hosts give you a temporary address which you can use to access your website in the meantime.
If you get the error “404 File Not Found” or you get your web host’s preinstalled default page, you may need to go back and check that you have entered the correct folder in “What folder on the server do you want to store your files in?”.
To fix the error, click “Site > Manage Sites…” and “Edit” and click the “Next” button till you get to the appropriate screen to modify.
If you get no errors at all you have successfully created and uploaded your first web page.
Read more
Posted by Colin Welch in Dreamweaver CS4 Tutorial on March 13th, 2009 | No Comments »
This chapter will concentrate on how you can add logos, photos and other kinds of imagery to your website. All this is covered in our comprehensive Dreamweaver training course.
Getting Images for Your Website
1: ADDING A LOGO: Most websites have a logo that appears on every page of the website. You will need to have a unique image as your site logo in order to complete this chapter.
Make sure your Logo is in a GIF, JPG or PNG image format.
If you don’t already have a logo, you can create one either by drawing them on paper and then scanning them, or by using a drawing program such as Photoshop or Fireworks
2: Other photos for your website
At this point you should also prepare any other images you wish to put on your site. It makes life a lot easier if all the images you need are available before you start.
Again, these images should be in a GIF, JPG or PNG image format.
Now you have the images for your site.
Read more
Posted by Colin Welch in Dreamweaver CS4 Tutorial on March 6th, 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 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 wesite.
Read more
Posted by Colin Welch in Dreamweaver CS4 Tutorial on March 16th, 2009 | 1 Comment »
