Dreamweaver Tutorials for Beginners

Dreamweaver offers a simple interface for new users

There are a variety of programs available that are intended to help you to build your own website; however, one of the easiest and most professional programs to work with is Dreamweaver. Dreamweaver is a program that is considered to be a “web editor” meaning that it can be used to edit and create web pages by implementing a number of web development aspects. Dreamweaver offers a simple interface and an easy way to implement site management, various scripting languages, template elements and cascading style sheets among other things. While all of these elements can be implemented through various other software programs as well as through a basic text pad document, Dreamweaver offers a visual editor that allows you to view elements as they are implemented. Learning how to use this web editing program can be a little overwhelming for the beginner in web site development; however, a basic walk through of features and functions will quickly get you on your way to creating a professional website.

A Little Background on Dreamweaver

The first version of the Dreamweaver software was released in December of 1997 for Mac systems only and then in March of 1998 for Windows. The very first version of Dreamweaver, as well as the subsequent seven updates, was released by Macromedia - the same company that created Flash; however, in 1995 Macromedia was purchased by Adobe Systems and all subsequent releases were made under the Adobe name. Since Adobe’s acquisition of Macromedia there have been four releases of the Dreamweaver program. Under the Adobe name the Dreamweaver versions were renamed in the same format as Adobe Photoshop with Dreamweaver CS3, CS4, CS5 and CS5.5. The latest version of Dreamweaver – Dreamweaver CS 5.5 was released on the 12^th of April in 2011 and with the previous version also being released on the 12^th of April 2010, it is expected that following releases will follow a similar schedule. Only the latest three versions of Adobe Dreamweaver are still supported by Adobe, those three versions are Dreamweaver CS4, CS5 and CS 5.5 (the current version.)

Benefits of Using Adobe Dreamweaver

The Basics

While there are a number of web page editors available, Dreamweaver has a number of features that make it the program of choice for many designers. One of the most appealing factors of Dreamweaver besides its clean layout is the fact that it allows designers to preview the web pages that they create in local web browsers prior to uploading files through FTP software. This feature helps to prevent overriding existing files with new files that may contain formatting errors or incorrect information. Dreamweaver not only allows for creation of a local directory of files but it also allows for them to be uploaded through the use of FTP, SFTP or WebDAV.

Visual Editing

One of the simpler features of Adobe Dreamweaver that many programmers find to be useful is the ability to view current projects through a coding only view, a visual editor or through a combination of both. While this may seem like a rather simple feature it is actually a feature that is very useful particularly for programmers who are used to working in a coding only view. While web designers often prefer to use web editors that provide a visual of current designs and changes, programmers are generally used to using text editors since many programming languages generally do not create visual results until they are enacted on a live webpage. You may be asking yourself at this point why programmers do not simply stick with using text editors; however, it is important to note that even while using Dreamweaver in a coding view the many premium features that are offered by the Dreamweaver program are still available to the user.

Syntax Highlighting

Syntax highlighting may seem like a confusing or complex term; however, it actually just refers to the ability of Dreamweaver to highlight specific coding languages in different colors or fonts depending upon the category of the coding terms being used. Dreamweaver supports syntax highlighting in a number of programming languages including: ActionScript, Active Server Pages, C#, Cascading Style Sheets, ColdFusion, EDML, Extensible Markup Language, Extensible HyperText Markup Language, Extensible Stylesheet Language Transformations, HyperText Markup Language, Java, JavaScript, PHP: Hypertext Preprocessor, Visual Basic, Visual Basic Script Edition and Wireless Markup Language. In addition to offering syntax highlighting for these languages, Dreamweaver offers the coder the opportunity to implement their own syntax highlighting. Dreamweaver also has a code completion feature for most of the languages listed above, meaning that code will automatically be completed upon typing the first half within a coding view – for example typing <head> will automatically prompt the closing of these tags and auto complete with the </head> tags.

The Local Folder versus the Remote Folder

It is possible to utilize Dreamweaver as a simple HTML editor without implementing the full website setup; however, using the program as it was intended is a much easier solution for most. In order to make the best use out of the Dreamweaver program; however, it is important to understand a few of the elements that you will need to work with – namely the local folder and the remote folder.

The Local Folder

The local folder in Dreamweaver is a folder that is located on your hard drive (in most instances) that you are working directly from. Dreamweaver also refers to this working directory as your “local site.”

The Remote Folder

The remote folder in Dreamweaver is a folder that is running your web server and makes the files that you are working with available on the web.

Creating a site in Dreamweaver is simple in terms of creating your local folder, as you save your new web site document Dreamweaver will ask you to give your new project a name and ask where you want to save files to – the local folder you will be working from. If any additional information is required in terms of setting up your website you will be automatically prompted to fill in this information as it is needed.

Setting up Your Dreamweaver Project Files

The first step in working with your website in Dreamweaver is to set up your project files. This means that any elements that you wish to implement in to your website design - such as images that have already been created – should be made readily available by placing them in the local site folder that you have are going to establish by saving your website template and creating your local folder.

Saving Your Site and Establishing Your Local Site Folder

Once you have all of your files in a designated folder that you want to work directly from you need to create your Dreamweaver document and save it as mentioned above so that Dreamweaver knows where to look for any elements that you want to include in your design. Begin by opening the Dreamweaver program and going to the Site menu and selecting the “new site” option. A menu will now open, this is where you will designate a name for your site, choose any name you like – it does not matter if the website name has a space in it or not. Next you want to click the folder image next to the “Local Site Folder” text box and locate the local folder where your web design elements are located. Select the appropriate folder and click the “Save” button. If you now look over at the “Files” panel located on the Dreamweaver interface you will see that the site that you just created will be listed with the corresponding local folder also being listed as the location where you can find and save elements for your web page design. The file manager panel in Dreamweaver acts similarly to any folder you might open on your desktop meaning that you can open, delete and move folders or files using this panel.

If you want to use the Dreamweaver interface to publish your web page or web design elements you will also need to establish a remote location.

Creating a Remote Site

Creating a remote site is the final step before publishing your webpage or testing sections of your webpage by publishing them live. Obviously there is a lot of design work that goes in to creating a website after creating the local directory and before publishing a site to the web. While it is important to know how to perform a variety of design functions in Dreamweaver, it is also; however, important to understand how to make any design you complete readily available to the net through the use of the Dreamweaver interface.

This next step of the tutorial that focuses on creating a remote site assumes that you have some knowledge of web servers. You will need access to a web server to make information available on the web; this may be a hosting company’s server, your own company’s server or any other variety of server that is made available to you. Some domain registration companies or internet service providers offer hosting services free of charge or for a small fee. The first step in defining the remote server for your website is to select the “Site” option and click “manage sites.” You will now see the option to select a site, select the site that you have been working on – the same site that you set up in the local folder. Select the “Edit” option and a dialog box will now open, you now want to input information that correlates to your servers. Click the “Servers” option on the left side of the window that is open. You will now see an addition sign at the bottom of the empty area in the menu, click this addition sign so that you can add a server. If you are not too familiar with using remote server access you want to stick with “Basic” set up. The basic set up option will ask you to name your server, provide the FTP address, username and password. If you have a secure computer that is only used by you and people that you trust you can instruct Dreamweaver to save your password so that you are not prompted to enter the password each time you use the remote folder. The next step is to test the server information that you have just inputted in to the menu, this is easily done by clicking the “Test” button below the FTP information box. Dreamweaver should have no problem connecting to your server, if there is a problem it is most likely due to using the wrong username or password or both to try to access the server. If you are certain that your information is correct try connecting by selecting SFTP rather than the FTP option and see if that fixed the problem.

Setting the Root Folder

Setting the root folder for your remote site can be difficult for some people. The root folder for your site is the location on your server where you want to install the front page or index of your website once it is uploaded. The path to the root directory will differ depending upon the hosting company that you are using. You can always ask a customer support technician to tell you the root folder for your server, or if you utilize an FTP program like Cute FTP you can directly copy the root folder path from the program window. Some hosting companies use a path that resembles the following: /home/username/public_html and others have no path at all because the server is set up so that you log in directly to the root server.

Underneath the root folder path selection you will be asked to fill in your URL. The URL for your site is the location of where your index for your site will be found, for example http://www.yoursite.com

If you are unfamiliar with working with remote servers avoid changing any of the settings on the advanced tab in the site setup window. Clicking on the advanced tab will reveal that Dreamweaver has automatically selected to synchronize your file information; this means that when you update your remote files Dreamweaver will make a note. It also means that if you choose to use the Site Synchronization feature to make sure that your local and remote folders are synchronized, that you have access to this feature.

Many people want to click the option that allows for files to automatically be uploaded once they are saved in the local folder – this is a mistake. While certain seasoned designers may opt for this selection, it is generally not the right selection if you are newer to web design. Selecting this option will override any live files on your remote server (and hence the internet) whenever you save changes to your local drive. Dreamweaver does not recognize if you have made a mistake in your design and it cannot distinguish whether you really want to upload a changed file or not so it is best not to select this option so you avoid accidentally overriding live files.

Your next step is to select the “save” option to save the new server information that you have assigned to your remote folder.

You will now find that you are returned to the Site Setup menu. Your new server information will appear in the box that was once blank and you will note that the “Remote” checkbox has automatically been checked. The remote checkbox identifies that this server is the server that updates your web site files directly to the internet. The “Testing” checkbox is utilized to identify a server that is used only to test the coding or layout of a design. These two options are used to help you in identification of your servers. It is possible to have both a remote and a testing server but Dreamweaver is only able to access one of these servers at a time so it is up to you to designate which of these servers you will be using while working on your web site. To add a second server simply follow the steps taken above and distinguish the second server from the first either by name or by identifying it as a testing rather than a remote server.

The Site Setup menu also offers you the opportunity to edit FTP information that you have already inserted in to a server definition so if you find that your password changes or if you move hosting companies you will return here to edit your FTP settings. You can also make a copy of a server profile in case you have two servers with very similar information and only need to make a few changes to add a second server profile.

You now want to save the changes you have made which will close out the Site Setup menu and return you to the Manage Sites box. You now want to select “Done” to close out this box too.

Uploading Your Files in Dreamweaver

Once you have set up your local and remote files, uploading your site is easy. In the files panel you want to select the local root folder that you set up before designing your page. With this folder selected click the upward pointing arrow in the toolbar. Dreamweaver will now ask if you want to upload the entire site from your local folder to your remote server, clicking okay will result in all of the folders and data selected being uploaded to the root path of your server that you designated earlier. You do not always have to upload the entire site, after the initial upload you only want to upload files that you have changed.

The last step in uploading your files is to pull up your website in a browser window to ensure that your design appears the way you thought it would! If you need to make changes based on what you see, make these changes in your local files and then upload the changed files to your remote server.

Dreamweaver Makes It Easy

Although reading through tutorials may make using Dreamweaver sound rather complicated, it is actually a rather easy program to use and it makes the web design process much easier in the long run. By enabling all of your information to be accessed through a single panel and assigning a level of organization to your files, Dreamweaver is one of the best ways to begin your web design career!