Dreamweaver tutorials

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… SiteGround Tutorials Dreamweaver Tutorial Dreamweaver is one of the most powerful application for building and managing webpages. With Dreamweaver 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 instruction on installing Dreamweaver 8 Trial version on your computer. Y ou 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:siteground.com/…/printtutorial.php 1/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… 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. W hen 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.siteground.com/…/printtutorial.php 2/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… 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.siteground.com/…/printtutorial.php 3/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… 6. Click on Finish button to complete the installation of Dreamweaver 8 (c) Copyright 2006 SiteGround Dreamweaver Hosting Services. All rights reservedsiteground.com/…/printtutorial.php 4/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… 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 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:siteground.com/…/printtutorial.php 5/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… 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.siteground.com/…/printtutorial.php 6/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… 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 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 isnt already open. Click on + sign to create a new style:siteground.com/…/printtutorial.php 7/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… 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:siteground.com/…/printtutorial.php 8/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… 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:siteground.com/…/printtutorial.php 9/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… 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.siteground.com/…/printtutorial.php 10/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… 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 dont 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. (c) Copyright 2006 SiteGround Dreamweaver Hosting Services. All rights reserved 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 tositeground.com/…/printtutorial.php 11/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… 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 sitesiteground.com/…/printtutorial.php 12/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… 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.siteground.com/…/printtutorial.php 13/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… 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.siteground.com/…/printtutorial.php 14/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… 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. (c) Copyright 2006 SiteGround Dreamweaver Hosting Services. All rights reserved 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:siteground.com/…/printtutorial.php 15/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… 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 dont worry; you dont 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 W indow -> Tag Inspector). In the Behaviors tab, select the list menu and click on "+" button and choose Jump Menu from the menu:siteground.com/…/printtutorial.php 16/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… 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. W hen you are ready with adding options for your Jump Menu just click OK. (c) Copyright 2006 SiteGround Dreamweaver Hosting Services. All rights reserved MySQL Database Setup at Dreamweaver Take advantage of the easy MySQL setup with the SiteGround web hostingsiteground.com/…/printtutorial.php 17/27

2/2/2009 Take SiteGround Dreamweaver Tutorial: Pr… 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 can enter to which database to connect and privileged user details of it.siteground.com/…/printtutorial.php 18/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… 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:siteground.com/…/printtutorial.php 19/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… 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 W indow -> Behavior to open up Behavior property window. Click on the + sign and from the dropdow n menu select Sw ap Image option.siteground.com/…/printtutorial.php 20/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… 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 Brow se button to select a rollover image. W hen you are ready leave Preload images option enabled and click on OK button. (c) Copyright 2006 SiteGround Dreamweaver Hosting Services. All rights reserved Creating Rollover Scriptssiteground.com/…/printtutorial.php 21/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… 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.siteground.com/…/printtutorial.php 22/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… (c) Copyright 2006 SiteGround Dreamweaver Hosting Services. All rights reserved 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 W indow then click on CSS Style. Dreamweavers CSS Style group will appear. Click on the New CSS Rule button: In the window that appears select advanced selector type:siteground.com/…/printtutorial.php 23/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… 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. (c) Copyright 2006 SiteGround Dreamweaver Hosting Services. All rights reserved 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:siteground.com/…/printtutorial.php 24/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… Select the format of your table and click on OK button. Y our 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. (c) Copyright 2006 SiteGround Dreamweaver Hosting Services. All rights reservedsiteground.com/…/printtutorial.php 25/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… 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 W eb 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:siteground.com/…/printtutorial.php 26/27

2/2/2009 SiteGround Dreamweaver Tutorial: Pr… In first three fields type your preferred album name and additional information to it. In Source images folder field, use Brow se 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. Y ou 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 (c) Copyright 2006 SiteGround Dreamweaver Hosting Services. All rights reservedsiteground.com/…/printtutorial.php 27/27

Dreamweaver tutorials

by Anil Kumar

Accessibility

Upload Details

Usage Rights

Statistics

Dreamweaver tutorials Document Transcript