Adobe Creative Suite and DreamWeaver are the perfect web design tools to build your new website with your VERSION-NEXT Hosting.

Get your Adobe DreamWeaver designed website up and running today with an VERSION-NEXT Hosting plan. Click the order button below and follow our signup page!

The software is available for both the Mac and Windows platforms, but can also be run on Unix-like platforms through the use of emulation software such as Wine.

As a WYSIWYG editor, Dreamweaver can hide the details of pages’ HTML code from the user, making it possible for non-experts to easily create web pages and sites. Some web developers criticize this approach as producing HTML pages that are much larger than they should be, which can cause web browsers to perform poorly. This can be particularly true because the application makes it very easy to create table-based layouts. In addition, some web site developers have criticized Dreamweaver in the past for producing code that often does not comply with W3C standards. However, Macromedia has increased the support for CSS and other ways to layout a page without tables in later versions of the application.

Dreamweaver allows you to pick most browsers installed on your computer to preview websites. It also has some site management tools geared towards novices, such as the ability to find and replace lines of text or code by whatever parameters you specify, up to the entire site. The behaviors panel also allows creation of basic JavaScript without any coding knowledge.

With the advent of version MX, Macromedia incorporated dynamic content creation tools into Dreamweaver. In the spirit of HTML WYSIWYG tools, it allows users to connect to databases (such as MySQL and Microsoft Access) to filter and display content using scripting technologies such as Active Server Pages(ASP), ASP.NET, ColdFusion, JavaServer Pages(JSP), PHP, and more without any previous programming experience.

A highly regarded aspect of Dreamweaver is its extensible architecture. “Extensions”, as they are known, are small programs, which any web developer can write (usually in HTML and Javascript) and anyone can download and install, which provide added functionality to the software. Dreamweaver is supported by a large community of extension developers who make extensions available (both commercial and free) for most web development tasks from simple rollover effects to full featured shopping carts.

Creating Links in Dreamweaver

Links or if you prefer, hyperlinks, create connections to many types of files including html pages, movies, PDFs, sound, etc. Other links may include Anchors, Null links, and email links.

Links can be created a number of ways, i.e. the Site window, document window or via the Property inspector.

Let’s first explore how to create links, then we will look at the types of links.

Document window. From the document window

• Select the word(s) that you would like to become the link
• Right click to bring up the context menu
• Click Make Link
• Browse to the html page and click the Select button

Note: Once your link has been created, you can follow these same steps, and click Change Link to modify a link. You can also click Open Linked Page to open the linked page within Dreamweaver.

Site window and Property Inspector. Depending on workflow, there are sometimes that I use the Site window in conjuction with the Document window or just the Property Inspector.

Linking using only the Property Inspector.

• Selecting the word(s) that you want to become the link
• Type or browse to the page you are linking to using the Property Inspector

Define a New Site in Dreamweaver

The first step in building your website is Defining Your Site. There are several Categories in the Site Definition window; we will focus our attention on the Local Info and the Remote Info. This is key since we will be building our website on our local computer, then publishing it on a remote webserver.

Let’s start by launching Dreamweaver. Open the Site Definition window by selecting Site > New Site from either the Site window or a blank document.

We’ll spend the next couple of minutes here in the Site Definition window. In the first part, we’ll define the Local Info as follows:

Site Name: Make up an intutive name that makes sense to the people who will be working on this website.

Local Root Folder: Use the folder icon to browse to the folder where your files reside on your local computer. Because I have installed PWS (Personal Web Server) on my computer, I generally keep my websites in the C:\Inetpub\wwwroot in their own folder. If you haven’t installed PWS, you should have a designated location for all of the websites that you work on, like C:\websites. For example, I may have 20 websites that I am working on, so for organization, each would have its own folder under C:\Inetpub\wwwroot, in this example the contents of the new site are in the sitebuilder folder.

HTTP Address: This is the final destination of our website; In other words, when I transfer the publish the SiteBuilder website to the web, I will access the website by typing http://www.sitebuilder.ws. Additionally, Dreamweaver will manage our relative links throughout the site.

Let’s move on to the next step by clicking Remote Info in the Category column.

Now we will define our Remote Info. In other words, the place where our website will be hosted. It could be any number of places, but most likely at an ISP, or on your company’s webserver. In this example, we will be using an ISP and publishing our web pages via FTP.

One of the cool things about Dreamweaver is that it has a FTP client built right in, which makes it easy to publish web docs. By default, FTP is set to disconnect at 30 minutes. You can change this setting by going to Edit>Preferences>Site.

(Note: these settings will vary depending on where your website is hosted, your ISP or Web Administrator should provide the FTP Host, Host Directory, Login, and Password information)
Access: Select FTP from the drop down box.
FTP Host: Enter the hostname or IP address of your FTP site
Host Directory: Make sure that identify where you content will go. This website will go into the root directory. My isp has assigned my websites root directory as a folder called web, therefore, the setting is web
Login/Password: Enter the information that your ISP or System Administrator gave you.
Check In/Out: This is a good feature if your are collaborating with other web professionals on this website. Since we are working alone, we will leave this box cleared.

Behaviors

In addition to page layout, Dreamweaver has the capacity to add interactivity to a page with the use of ‘Behaviors’. This can be anything from controlling a Shockwave movie, to opening a browser window, to displaying a status bar message.

What are behaviors? They are Javascript events that are applied to a specific HTML tag. While you don’t need to know Javascript in order to use them in Dreamweaver, it is a good idea to understand a little of how it works.

Javascript is called by certain events that happen during the browser session. The way to determine these events is with the use of Event Handlers, such as onClick or onMouseover. Dreamweaver uses these event handlers within the Behaviors Palette, and they are used to determine when the behavior will go into effect.

In this section you will learn how to use Dreamweaver Behaviors, how to apply them to specific HTML tags, and how to use some of the behaviors that are built in to Dreamweaver.

The Behaviors Palette

The Behaviors Palette is accessed from the Window Menu by selecting ‘Behaviors’, or by pressing F8 on the keyboard.

There are several components of the palette:

Inserting Fireworks HTML into a Dreamweaver Webpage

In this tutorial we are going to insert a table that was created in Fireworks (be sure to check out the Fireworks tutorial on Creating a Navigation Bar). Once we have inserted the Fireworks HTML into our Dreamweaver document, we will add the corresponding links using the Point-to-File method we learned about in an earlier tutorial.

Let’s get started!

In this example, I have created a page with a couple of tables. The top table is 760 x 86 pixels and contains the header graphics. The second table, which we will use for the navigation and body text, is 760 pixels wide and has 2 cells, 150 pixels (navigation) and 610 pixels (body).

Behavior Events

There are several events that can trigger your Behaviors. There is a complete listing in the Dreamweaver Help section. Here are a few of the more common events:

To change the Event, highlight the existing event by clicking once, then bring down the menu that will give you a list of other available events.

Creating a Behavior

To create a behavior, you must first decide which HTML tag it will be applied to. This decision will depend on the type of behavior you would like to add. Once you have decided on the tag, you must select it. This can be done by placing the cursor within the element on your page, or by selecting from the Tag list at the bottom:

If you aren’t familiar with HTML tags, take a look at TagReference.com to find out which tags are which.

Once you have selected the tag, click on the + button on the Behaviors Palette. This will bring up a list of the Behaviors available to Dreamweaver. Click on the one you wish to use, and a dialog box will come up. The dialog box varies depending on the Behavior you wish to use.

Once the Behavior has been created, it will appear in the Behaviors Palette.

You can now modify the Action of the Behavior by double clicking on the text within the Action field. For the above example, that text would be ‘Go To URL’. This will bring up the same dialog box with the information already filled in.

You can also change the Event that will trigger the Behavior. We will now talk about the different events that can be used and when to use them.

Popup Windows

Popup Windows can easily be created with Dreamweaver, the following example shows how to create a popup window.

(lower left corner) before setting your behavior and follow the same steps as above.