SiteGround Tutorials

---

Dreamweaver Tutorial

 

DreamWeaver tutorial

These are step-by-step instructions on how to install Adobe Dreamweaver CS4 Trial version on your computer.

You can download the Adobe Dreamweaver CS4 Trial version from the Macromedia/Adobe official web site.

If you have already purchased the full version of Adobe Dreamweaver CS4, you can enter its serial number at the initial installation screen.

Next, you should agree to the Adobe Software License Agreement.

Once you have done that, follow the instructions in the setup program in order to finish the installation of Adobe Dreamweaver CS4.

 

DreamWeaver templates

This tutorial will show you how to create a website template with Dreamweaver. In addition, you can check our other Dreamweaver tutorials for more information on how to create your website.

Easy website upload for DW users with the SiteGround web hosting pack

When your website has a lot of pages and you want them to share certain design features, you can create and apply a template to them. If you have a group of pages with an applied template to it, you can change the information of the group by editing the template and then reapplying it to those pages. You can do that while keeping the unique element of each page unchanged.

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 and type the name of the template to be saved with.

Now you have to create an 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:

Type the region name in the pop-up window:

Now you have a template with an editable region in it. You have to apply this template to a page. Open an 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 the 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 now the same as the template with its components placed in the editable region. You can now save it.

 

CSS Styles in DreamWeaver

Easy website upload with the SiteGround web hosting pack

This tutorial will show you how to add and use CSS files to your pages.

The easiest way of formatting text and other web site content 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 the + icon to create a new style:

The following window will appear:

In the Selector Type radio buttons group choose the type of style you wish to create. You can create style classes that will be applied to content of your choice. These styles can be applied to any tags. With the 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.

The Advanced tap selector is 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 the Define in category you should choose where to define the style. It can be either embedded in the current page or external. If you choose external, a dialog window will appear asking you where to save the .css file.

When you are ready click the OK button.

The following window will appear:

Here you can define style properties such as font, color, background color, border style, etc. When you are ready click OK and your new CSS Style will appear in the CSS Style menu.

From the Style list menu > Properties select the content of your page that you want to apply CSS style to. Then select the style you want to apply.

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

A pop-up window will appear - here you have to choose whether to create a link to this css file or to import its content in the current page.

 

MetaTags

This tutorial will show you how to add meta tags to your HTML code. Meta tags are very important for the search engine optimization of your website. After reading this tutorial you will be able to correctly add meta tags to your website.

How to add meta tags to your pages

The easiest way to increase your site's popularity is to use <meta> tags into its HTML code. This way search engines will index your site correctly. In <meta> tags you can insert keywords about your site and short descriptions informing the search engines how to categorize your site. In this tutorial we will show you how to insert such tags in 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 which describe your website best

Choose your keywords wisely and don't type more than 10 to 15 because some search engines have a limit on the number of keywords they can process.

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 of your page and its contents.

Keep your page description short and simple because some search engines limit the number of characters that can be indexed.

 

 

Website Upload with Dreamweaver

Take advantage of the easy website upload with the SiteGround web hosting pack

This tutorial will show you how to connect Dreamweaver to your existing website or to create a new one from scratch and upload it.

With DreamWeaver you can easily create new pages, open an existing project or just make a connection to an already published web site. The first step is to define your site in Dreamweaver. Select "Site" and click on the "New Site" option:

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

In the Site name field enter the name of your site. Specify the path to the root folder of your site stored on your local computer.

Check the Refresh local file list automatically and Enable cache options.

In the HTTP Address field enter the URL that your remote Web site will use. This way Dreamweaver will be able verify the links within your site.

The next step is very important, so please pay close attention to it. Click on the Remote Info category:

Choose FTP from the Access drop-down menu. In FTP host field type the remote server host name. If your domain name is pointed to the correct host, you can type your domain name instead.

In the Host directory field you should type either public_html or www. This is the directory where you should store your web site.

Enter your FTP login details. You can test your connection by clicking on the Test button. It is very important to check the Use passive FTP option.

In the Testing Server category select the remote server model you wish to use. For example, if your site is hosted on a Linux-based server and you are planning to create and execute PHP scripts using a MySQL database, you should choose PHP MySQL server model.

When you are finished setting your preferences, click OK and that will complete your setup.

In your Dreamweaver workspace there 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 the remote server. From the right list menu you can choose to browse your file either on your local computer or on the remote server. Select a file or directory which you wish to upload and click the up arrow button. If you want to download a file or a directory you should click the down arrow button.

 

Images and text in DreamWeaver

This tutorial will show you how to insert text and images to your website with Dreamweaver. You may also check our tutorial on How to create CSS styles for your pages.

Inserting text in Dreamweaver

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

 

Inserting images

To insert images to your web site select Insert -> Image. From the pop-up window choose an image from your computer and insert it into the page.

In the image's Properties panel you can set different preferences such as name, size, alternative text, etc.

 

How to create a Jump menu in DreamWeaver

This tutorial will show you how to create jump menus with DreamWeaver. Additionally, you can check our tutorial on How to insert images and text to your website.

Creating a Jump Menu is quite simple. 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. Go to the Tag Inspector menu (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:

A new window will pop up - here 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 the Text field type the option name and in the next field enter the URL that you want to jump to when this option is selected from the menu. When you are ready with the options for your Jump Menu, click OK to save it.

 

MySQL Database Setup at Dreamweaver

Take advantage of the easy MySQL setup with the SiteGround web hosting pack

First you have to create a database and add a privileged user to it from your cPanel -> MySQL Databases. Then you should allow your IP address to access your MySQL databases remotely. You can see your IP address at: http://www.whatismyipaddress.com/.

More information on how to allow your IP to access your databases remotely can be found in our Access Hosts tutorial.

Once you have created your database and added a user to it, you should connect to the remote server where your website and database are located. Then you can continue with setting your connection to the MySQL database.

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

Click on "+" sign and choose MySQL Connection. A new window will pop up - here you should enter the MySQL username, password and database, as well as the MySQL server.

In the first field type a name for the connection. In the "MySQL server" field type localhost. Then enter the MySQL username and password details and the database name as shown in the example. Click OK to connect to your database.

If you have entered all details correctly, you should be able to see your connection listed in the Databases tab:

 

 

Creating Rollover Scripts

Image Rollover: First method

Rollover images is a popular effect used in many websites. You need two images to achieve that effect - one for the Up state (the original image) and one for Over state (the image that will load when the mouse cursor goes over the original image).

Select Insert -> Image Objects and click on Rollover Image:

A new window will pop up:

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

Use the Browse buttons to select the original and the rollover images.

Leave the "Preload rollover image" option checked.

In the "Alternate text" field type a description of the image. This text will be displayed when the mouse cursor goes over the image.

In the last field type the URL to the page that you want to load when the image is clicked.

Click on OK and the rollover image will be created.

You can use this technique for other purposes - for example, you can create stylish rollover buttons.

Image Rollover: Second method

Insert your image from Insert -> Image or use the 'Insert Image' button.

Select your image and give it a name from the Properties panel:

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

A window will pop up 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 the Browse button to select a rollover image. When you are ready, click OK to save your rollover image.

 

Creating Rollover Scripts

Flash Text Rollover

In this tutorial we will show you how to create rollover flash texts.

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 the Browse button to locate the page you want to be loaded when the link is clicked. Select a target to where the page to load - for example, if you choose _blank, the page will be opened in a new window).

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

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

Click OK and you will be able to enjoy your new flash text rollover object.

Creating Rollover Scripts

CSS Rollover

This tutorial will show you how to add a rollover effect to your pages. A CSS Rollover is a simple text that can change its font, color or background when the mouse cursor goes over the text. This trick can be made by using the 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 choose the Advanced selector type:

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

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

Next click "OK".

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

DreamWeaver tables

This tutorial will show you how to add tables to your website with Dreamweaver. You may also check our tutorials on How to insert images and text to your website, How to create Jump menus and How to make a photo album with Dreamweaver.

How to create tables with Dreamweaver

Open Dreamweaver and create a new HTML file. From the Insert drop-down menu choose Table.

A Table property window will appear:

Select the format of your table and click OK. 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 its attributes. Each cell of the table has its own Properties panel. Select the cell that you want to modify and the Properties panel will appear. Alternatively, you can go to Windows -> Properties:

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

 

DreamWeaver Photo Album

In this tutorial we will show you how to create a simple web photo album in a few clicks. You need to have Macromedia Fireworks 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. In it you should enter your preferences on how you would like your album to look like:

In the first three fields type the album name, its subheading and other info about it.

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

The next field is for the Destination folder where your album will be located with all album contents (html documents, image folders).

From the Thumbnail size drop-down menu you can choose the size of the thumbnail pictures which will be displayed on the start page of the album.

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

Click OK and wait until Fireworks creates the thumbnails for your album. Once this is done, you will see your album in its basic unformatted form. You can apply a template to it or a 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