Siteground Dreamweaver Tutorial

SiteGround Tutorials

Dreamweaver Tutorial

Dreamweaver is one of the most powerful application for building and managing webpages. WithDreamweaver you can create tables, forms, CSS styles; you can create your own templates and use

them to edit hundreds of pages on your website with a single mouse click. Pages created with

Dreamweaver typically result in cleaner HTML code, and they look almost perfect in Internet Explorer,

Netscape, and Opera.

Dreamweaver tutorial has useful tips about:

How to install Dreamweaver on your computer;

How to create templates using Dreamweaver;

How to create CSS styles for your pages;

How to add meta tags to your web site;

How to upload your website and publish it online;How to insert images and text into your webpage;

How to create Jump menus;

How to connect to your MySQL database;

How to create Rollover effect - with Flash and with CSS;

How to create tables in Dreamweaver;

How to make a photo album with Dreamweaver;

With SiteGround Dreamweaver hosting services you can easily create and upload your website with

Dreamweaver!

DreamWeaver tutorial

How to install Dreamweaver

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

You can download installat ion of Dreamweaver 8 Trial version from the Macromedia/Adobe official website.

1. Start the installat ion:

2/2/2009 SiteGround Dreamweaver Tutorial: Pr…

siteground.com/…/printtutorial.php 1/27

A welcome window will pop up with warnings that this product is protected by copyright law andinternational 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 acceptthe 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 drivestorage. If you wish you can place shortcuts to Dreamweaver in your quick launch bar or on thedesktop.



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 thatyou 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

(c) Copyright 2006 SiteGround Dreamweaver Hosting Services. All rights reserved



DreamWeaver templates

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

When your website has a lot of pages and you want they to share certain characteristic, you can createand 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 contentthat 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

Easy website upload with the SiteGround web hosting pack

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 showyou 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 pairid="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.




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 advert ise your site on the net is to insert <meta> tags into its HTML code so thesearch engines can find it on their own and correctly index your site. In <meta> tags you can insertkeywords of your site and short descript ions letting the search engines to understand how tocategorize 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 asmall 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 engineslimit the number of keywords.

To insert descript ion of you page select Insert -> HTML -> Head Tags -> Descript ion. This optionopens a small window where you can type a short descript ion to let the search engines to describe thecontents of your page in their listings.

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


Website Upload with Dreamweaver

Take advantage of the easy website upload with the SiteGround web

hosting pack

To setup the website uploading options, please open Dreamweaver. You can create a new page, open

an existing project or just make a connection to an 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 panelset 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 cssstyle to it.

Inserting images

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

Use Propert ies panel of this image to apply any preferences to it , such as name, size, alternative textand 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'thave to have any java script skills to do that, because Dreamweaver will do that for you. Just go toDreamweaver Tag Inspector applete (if it is not open click on Window -> Tag Inspector). In theBehaviors 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 inthe next field the URL that you want to jump when this option is selected from the menu. When youare ready with adding options for your Jump Menu just click OK.


MySQL Database Setup at Dreamweaver

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



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

pack

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 canenter 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 thatgives eye pleasing look for the site visitors. You need two images to do that, one for the Up state (originalimage 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 beswapped with when the mouse curser is over the image.

Leave "Preload rollover image" option selected as default.

In the "Alternative test" type a descript ive name of the image. This text will be displayed when the mousecursor 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 rolloverbuttons.

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 Propert ies panel:

Select Window -> Behavior to open up Behavior property window. Click on the + sign and from thedropdown 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 imageon which you want to apply behavior. Use Browse button to select a rollover image. When you are readyleave Preload images option enabled and click on OK button.





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:


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 atarget 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.





CSS Rollover

A CSS Rollover is a simple text that can change its font, color or background when the mouse cursor isover 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 tocreate 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 andetc. for your rollover text. After you finish this click on OK button and apply the style to your hypertextlinks.


DreamWeaver tables

Building tables with Dreamweaver

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

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. Selectthe table and look at its Propert ies panel:

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

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




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 tohave 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 Albumand a window will appear where you have to enter you preferred options on how you would like youralbum to look like:



In first three fields type your preferred album name and addit ional 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 storagewith all albums' contents (html documents, image folders).

From the Thumbnail size list menu you can choose the size of the thumbnail pictures which will bedisplayed 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 seeyour album in its simple unformatted form. You can apply a template to it or CSS style to format thetext.

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




Date post:	10-Apr-2015
Category:	Documents
Upload:	sitegroundcom-inc
View:	2,109 times
Download:	8 times

Siteground Dreamweaver Tutorial

Documents