DreamWeaver tutorial

How to install Dreamweaver

This is a step-by-step instruction on installing Dreamweaver 8 Trial version on your computer. You do not need any additional programs or pages applied to you operating system on your computer to complete this installation. It is easy and friendly.

You can download installation of Dreamweaver 8 Trial version from the Macromedia/Adobe official web site.

1. Start the installation:

A welcome window will pop up with warnings that this product is protected by copyright law and international treaties. Siteground will advise you not to use any cracked versions of Dreamweaver 8. Click on Next when you are ready.

2. On the next window there is license agreement. Please read it carefully. When you are ready accept the terms in it and click on Next button.

3. On this window you can choose different directory from the default where to place the installation. Bare in mind that Dreamweaver installation requires about 300MB free sapce on your hard drive storage. If you wish you can place shortcuts to Dreamweaver in your quick launch bar or on the desktop.

Click on Next button when you are ready.

4. Dreamweaver 8 can be default editor of file types listed on this window. Select those of them that you want to open with Dreamweaver 8 as default.

5. If every thing went ok, click on Install button to begin the installation.

6. Click on Finish button to complete the installation of Dreamweaver 8

DreamWeaver templates

How to create a template in Dreamweaver

When your web site has a lot of pages and you want they to share certain characteristic, you can create and apply template to them. This way you will save a lot of time instead of creating all pages one by one. If you have group of pages with applied template to it, you can change the information on the group by editing the template and then reapplying it to those pages. You can do that while the unique element of each page remain unchanged, but the template elements.

Define your site and create a page which will be used to create your template.

Once you finish select File -> Save as template. A small window will pop up. Choose the site for which you want to create this template ant type the name of the template to be saved with.

Now you have to create editable region in your template. These regions are placeholders for content that is unique for each page the template is applied to.

Select Insert -> Template Objects -> Editable Regions:

In the window that pop up type the region name:

Now you have a template with editable region in it. You have to apple this template to a page. Open new existing page to apply the template to it. Select Modify -> Templates -> Apply Template to Page …

Choose the template that you want to apply to your page and click on Select button:

On the Inconsistent Region Names window choose template region and click on "Use for all" button. Then click on OK.

Your page is same as the template with its components placed in the editable region. You can now save it.

CSS Styles in DreamWeaver

How to create a CSS Style for your site

The easiest way of formatting text and other web site contents is by using CSS style. You can define positioning and formatting style to text, images, layers, tables and so on. In this tutorial we will show you some basic steps in creating styles.

Open Dreamweaver and create a new document. Select Window -> CSS Style to open CSS palette if it isn't already open. Click on + sign to create a new style:

The following window will appear:

In Selector Type radio buttons group choose type of the style you wish to create. You can create style class that will be applied to content of your choice. These styles can be applied to any tags. With tag selector type you can create styles that will be applied to a particular tag of your HTML code. For example if you choose to define a style for all contents formated by <table> tags, you should choose tag selector type and select <table> from the list menu.

Advanced tap selector are a particular combination of tags (for example, "td" "h1" applies whenever an h1 header appears inside a table cell), pseudo-class selectors such as a:hover, a:link, a:visited, a:active and a specific ID attribute (for example, #style applies to all tags that contain the attribute-value pair id="style").

In Define in category you have to choose where to define the style. It can be either embedded in the current page or external. If you choose to be external, a dialog window will appear where to save .css file that can be applied to other pages further.

When you are ready with choosing what type of CSS style you wish to create click on OK button.

The following window will appear:

In this window you can define your style properties, such as font, color, background color, border style and etc. When you are ready click on OK and your new CSS Style will appear in CSS Style palette.

Select the content of your page that you want to apply CSS style to from the Properties panel from Style list menu choose the style that you desire to apply.

You can attach CSS style file to a particular page by clicking on attach button from CSS Style palette:

A dialog popup window will appear where you have to choose either to create a link to this css file or to import its content in the current page.

MetaTags

How to insert Metatags with Dreamweaver

The easiest way to advertise your site on the net is to insert <meta> tags into its HTML code so the search engines can find it on their own and correctly index your site. In <meta> tags you can insert keywords of your site and short descriptions letting the search engines to understand how to categorize your site. In this tutorial we will show you how to insert such tags in to your HTML code.

To insert Keywords to a page select Insert -> HTML -> Head Tags -> Keywords. This option opens a small window where you can type words that reflect on contents of a your page

Make a wise choice of your keyword and don't type more than 10 to 15, because many search engines limit the number of keywords.

To insert description of you page select Insert -> HTML -> Head Tags -> Description. This option opens a small window where you can type a short description to let the search engines to describe the contents of your page in their listings.

As it was mentioned, keep your page description short and simple, because many search engines limit the number of characters indexed.

Website Upload

How to upload your files using DreamWeaver

Open Dreamweaver. You can create a new page, open an existing project or just to make a connection to already published web site. The first step you have to do is to define your site in Dreamweaver. Select "Site" and click on "New site" option:

When the Site Definition window appears, please select the Advanced -> Local Info category:

In the Site name field, enter you site name of your choice. Specify the path to the root folder of your site components stored on your local disk storage.

Enable Refresh local files list automatically and Enable cache option.

In the HTTP Address field, enter the URL that your remote Web site will use, so that Dreamweaver can verify links within your site.

Next step is most important, so please pay close attention to it. Please click on Remote info category:

Choose access method to be FTP. In FTP host field type the remote server host name or just type your domain name.

Host directory is either public_html or www. This is the directory where you want to store your web site.

Enter your login details provided you from SiteGround.com. You can test your connection by clicking on Test button. It is very important to enable passive FTP option.

In Testing Server category, please select the remote server technology you wish to use from the list menu on the top of the window. For example if your site is hosted on linux based server and you planning to create and execute PHP scripts using MySQL database you should choose PHP MySQL server model.

When you have done setting your preferences, just click OK and that will complete your setup.

In your Dreamweaver workspace should be a window like this:

Choose your site from the list menu located on the top left corner and click on the button to connect to remote server. From the right list menu you can choose to browse your file either on your local storage or on the remote server. Select a file or directory which you wish to upload and click on the arrow pointing upward. Or if you want to download file or directory you should your other arrow button.

Images and text in DreamWeaver

Inserting text in Dreamweaver

In the Dreamweaver Design work area type any text of your choice. Select it and from Properties panel set formatting attributes for your text, such as font, color, size and etc.

You can make this text a hypertext link if you type link location in Link field or you can apply any css style to it.

Inserting images

To insert images to your web site select Insert -> Image. From the dialog window that pop up choose an image from your local hard disk storage to insert it in the page.

Use Properties panel of this image to apply any preferences to it, such as name, size, alternative text and etc.

Jump Menu

How to create jump menu in Dreamweaver

Creating a Jump Menu is really an easy job. Create a new basic html document and insert a form area:

Next you have to insert a List/Menu form object. Select Insert -> Form and click on List/Menu:

Now you have to apply a Jump To java script to your List/Menu object. But don't worry; you don't have to have any java script skills to do that, because Dreamweaver will do that for you. Just go to Dreamweaver Tag Inspector applete (if it is not open click on Window -> Tag Inspector). In the Behaviors tab, select the list menu and click on "+" button and choose Jump Menu from the menu:

A window will appear where you have to add options for your drop-down jump menu.

To add a new link click on '+', or to remove a link click on '-'. In Text field type the option name and in the next field the URL that you want to jump when this option is selected from the menu. When you are ready with adding options for your Jump Menu just click OK.

MySQL Database

How to connect to your MySQL database

Open Dreamweaver. There are few steps before setup the connection to your database. First you have to create such a database and to add privileged user to it from your cPanel -> MySQL Databases. After you create it, you have to allow your IP address to have rights to access your MySQL databases. You can see your IP address at:

http://www.whatismyipaddress.com/

Type that IP address in the field placed in the Host Allowed category on the bottom of cPanel->MySQL Databases tab.

Also you have to have established site connection to your web site stored on the remote server where databases are located too. See "Establish connection with remote server and upload files" tutorial.

After you have done this simple preparation steps you can continue with setting your connection to MySQL database.

Select Window -> Database to open up Database property window:

Click on "+" sign and choose MySQL Connection option. The following window will appear where you can enter to which database to connect and privileged user details of it.

In first field type your connection name, it can be any name of your choice but only letters without any spaces. In the "MySQL server" field please type "localhost". Then enter MySQL username and password details and the database name as shown in the example. When you setup your connection click the "OK" button.

You should see your connection listed in Database property window if everything worked as it should be:

Creating Rollover Scripts

Image Rollover: First method

Rollover images are one of the most common techniques used in web sites. This is mouse-over effect that gives eye pleasing look for the site visitors. You need two images to do that, one for the Up state (original image when site load) and one for Over state (image that load when mouse cursor is over the image).

Select Insert -> Image Objects and click on Rollover Image and a window will appear:

Choose a name for you image rollover and type it in the Image name field.

Use the Browse button to select an image that will be original and a rollover image that original one will be swapped with when the mouse curser is over the image.

Leave "Preload rollover image" option selected as default.

In the "Alternative test" type a descriptive name of the image. This text will be displayed when the mouse cursor is over the image.

In the last field type the link to the page that you want to be loaded when the image is clicked.

Click on OK and rollover image will be created. You can use this technique to create a nice looking rollover buttons.

Image Rollover: Second method

Insert you image where you want it to be on your page. Do that from Insert -> Image or use 'Insert Image' button.

Select your image and name it from Properties panel:

Select Window -> Behavior to open up Behavior property window. Click on the + sign and from the dropdown menu select Swap Image option.

A window appears where you will see a list of names applied to your images. Choose the name of the image on which you want to apply behavior. Use Browse button to select a rollover image. When you are ready leave Preload images option enabled and click on OK button.

Creating Rollover Scripts

Flash Text Rollover

In this tutorial we will show you how to create rollover flash texts without using Fireworks of Flash.

Create a new html document and save it. Select Insert -> Media and click on Flash Text option:

The following window will appear:

Select the font you prefer and the size for the text. Choose an original color for it and a rollover color. When the mouse cursor is over the text its color will be changed to the selected rollover color.

Use Browse button to locate the page that you want to be loaded when the link is clicked. Select a target to where the page to load.

If you wish you can set a background color for the text.

In the last field using Browse button select a path to save the flash file using extension .swf.

Once you have done click on OK button and enjoy your new flash text rollover object.

Creating Rollover Scripts

CSS Rollover

A CSS Rollover is a simple text that can change its font, color or background when the mouse cursor is over and out the text. This trick can be made by using a:hover style.

Open Dreamweaver and create a new html document. Go to Window then click on CSS Style. Dreamweaver's CSS Style group will appear. Click on the New CSS Rule button:

In the window that appears select advanced selector type:

From the Selector drop-down menu choose a:hover style.

In the Define in radio buttons group you can choose either to create this style for this site only or to create a CSS Style file which can be applied to other pages henceforth.

Next click "OK".

In this window you can define your style. You can choose your font, size, color, style underline and etc. for your rollover text. After you finish this click on OK button and apply the style to your hypertext links.

DreamWeaver tables

Building tables with Dreamweaver

Open Dreamweaver and create new basic html file. From the Insert dropdown menu choose Table option.

A Table property window will appear:

Select the format of your table and click on OK button. Your table will be created in your page. Select the table and look at its Properties panel:

Here you can modify your table by changing it attributes. Each cell of the table has their own Properties panel. Select the cell that you want to modify and the Properties panel will appear, if not select Windows -> Properties:

Here you can select a style for the cell, background color, border size and color, text alignment and so on.

DreamWeaver Photo Album

Easy Creation of Photo Album with Dreamweaver

In this tutorial is explained how to create a simple web photo album with a few clicks. You have to have Macromedia Fireworks product installed on your computer to be able to complete this tutorial.

Follow the steps to learn how to create your web photo album.

Open Dreamweaver and create new html basic page. Select Commands -> Create Web Photo Album and a window will appear where you have to enter you preferred options on how you would like your album to look like:

In first three fields type your preferred album name and additional information to it.

In Source images folder field, use Browse button to locate the folder where original pictures are stored.

Next field is for the destination folder where your album will be located on your local hard disk storage with all albums' contents (html documents, image folders).

From the Thumbnail size list menu you can choose the size of the thumbnail pictures which will be displayed in the start page of the album.

Enter the column number you would like to display the thumbnails.

SiteGround recommends the format of thumbnails to be GIF in order faster load of the album page.

Click OK and wait until Fireworks create the thumbnails for your album. Once this is done, you can see your album in its simple unformatted form. You can apply a template to it or CSS style to format the text.

Please, feel free to contact us if you have any questions or recommendations about this tutorial at: tutorials 'at' siteground.com