DREAMWEAVER TUTORIALS Defining a Site in Dreamweaver Defining a Site in Dreamweaver to organize your site's file structure Dreamweaver is a tool

l to create websites. So the first thing you have to do is define a site. This helps Dreamweaver to organize the files used in this site. Step 1 : Create a folder on your hard disk and name it. You can copy in a few images or files if you want. Step 2 : Click on Site>Manage Sites>New. The following window will appear where you can enter the site details under the category Local Info.

- Type in your site name here - This is where all the files for the site are stored, the one which you created earlier. Browse for this folder and click on select. Refresh local file list automatically - It's good to keep this option checked so that any new images or files added to your site will be refreshed automatically and you can access it. HTTP Address - Enter your site url here so that Dreamweaver can check your links Enable Cache - This will be default checked. Next click OK. Another screen will be displayed with your site name in the list. Click done. Step 3 : Now Dreamweaver displays the folder contents in the Files panel on the right side. The files are well organized now and Dreamweaver knows where to search for files. Now you are ready to start developing web pages. The Dreamweaver Template What is a Template? A template is a common structure of a web site that most of your web pages use. Usually web sites follow a standard structure, for e.g. you would have a header, a navigation bar and a footer that is common to all your pages. Imagine that your site has 25 pages. If you need to make one small change, let's say adding a new link, you would need to go to each of those 25 pages and change it manually. But using a template you only need to change it in the template and all

Site Name Local Root Folder

the pages get updated automatically. Here you will learn how to use templates in Dreamweaver. Making a Template in Dreamweaver Step 1: Make your web page as usual with the basic structure of the site. This should be common to most of the pages in your site. Note: Don't put unique content in this page. Step 2: Once you have created the structure go to File and click on Save As Template, give a name to the template and click on Save. Step 3: Notice the blue bar on top says <<Template>>. You now are in the Template. The template is automatically saved under a folder called templates. Note: You can create as many templates as you like. If you are using different layouts for different sections of your site you can use different templates for each of the sections. Step 4: Now you need to make parts of the template editable so that you can put in content and add information that is unique to parts of the site. As the main content of the pages will keep changing let's make that region editable. E.g. The white space in the middle of the Entheos site is obviously an editable region, as this content is unique to each page.To make an area editable you need your cursor to be in that location, then go to Insert/Template Objects/Editable Region, give an appropriate name and if you are successful you will notice a light blue with the name of the editable region in your cursor's location. Using a Template in Dreamweaver Once you have successfully made your Template your job is not yet over. You still need to make sure that all the pages are using the Template so that when you update the Template the pages using the Template will automatically get updated. Here are the steps to Apply a template to a page. Step 1: Once you have created pages which will the same structure as the template all you need to do is, Go to Modify/Template/Apply Template to page Step 2: Once you have applied the specified template to the page you will see a window 'Choose editable region for orphaned content', choose the editable region that you want the content to go into and click on OK. You will see that the template is in yellow and cannot be edited. The only region that is editable is the editable region you have specified in the template. Note: You can apply the template before writing any content or after it. If you do it after writing content you need to choose an editable region where the content will go. Updating a Template in Dreamweaver Once you have made the template and applied it to all the necessary pages, the last step you need to know is how to update a template. This is the magic of using Templates. Any changes that you need to make in the basic structure of the site, you need to do in the Template. So go ahead and make the changes and click on save. If you have applied the Template to any of your site pages you will get a window asking you if you want to 'Update Templates used in the following files'. You must click on Update. If you click on Don't Update, none of the pages using the Template will get updated. This covers all you need to know about using Templates in Macromedia Dreamweaver. Another huge time saver you need to know about is Server Side Includes. For e.g. Though the structure of the Entheos site is the same in all the pages, the header

and the content in some of the menus change according to sections of the site. Find how how we did it using Server Side Includes. Publishing your Site in Dreamweaver Learn how to upload your files to a remote server and make your site live The main step is to Define your site in Dreamweaver. Follow the steps given below and you should be able to upload and publish pages easily and fast. Soon you'll see your site live on the Internet! Steps to Making your Site Live 1. Open Dreamweaver 2. Click on Define Sites.. under the Site drop down menu 3. In the Define Site box that comes up, click on the New button 4. In the next dialog box that you see you need to enter the details of your site: 1. Enter a name for your site e.g. Entheos 2. In the local root folder box choose your local root folder using the folder icon You can ignore the rest of the details required Here's a screenshot of what it should look like 5. 1.

2. 6. This is the most important step so pay close attention here :) In the category box found on the left choose Remote Info. Here's where you need to fill out your ftp information to establish a connection to the remote server. In the Remote Info panel choose FTP in the Access drop down menu and enter the following details:FTP Host: (your ftp host - it could be an IP address or your web site URL) Login: (username)Password: (password)Host Directory: (this is the directory for your site - it could be the site root folder or a 'www' folder etc.) Here's a screenshot of what it should look like -

7. Once you've entered all the details click on OK 8. If you're sure all the details have been entered correctly you're ready to connect to the remote folder and upload your files. Click on Connect from the Site drop down menu. If all goes well, you should be able to connect to the remote site and see all the remote files in the left pane. 9. Choose the local folder and click on Put from the Site drop down menu to upload the entire site to your remote site. 10. Once the entire local folder is transferred to the remote folder you can check your site online. Note: Get is for downloading files and Put is for uploading files. Dreamweaver Tips & Tutorials Tips and tutorials on tables, forms, CSS Styles, behaviors more We've shared some really cool tips on Macromedia Dreamweaver in this article. They are handy tips that all Dreamweaver users should know about to allow more flexibility and creativity while designing sites in Dreamweaver. Jump Menus, Pop Up Windows and Swap Images The Dreamweaver Behaviors panel makes it easy to create jump menus, pop up windows, swap images and more. Click here to learn more about Dreamweaver Behaviors. CSS Styles Instead of using endless font tags, use CSS Styles in Dreamweaver to format text in your site. You can also use CSS Styles to create text rollovers and remove the underline from links. Learn how to create Style sheets in Dreamweaver Links

Change the link colors from the default blue link color by going toModify>Page Properties. Here you can change the link color, visited link color and active link color. All your links will change to the link color specified. Have you ever wondered how to get a text rollover on a link? The answer is to use the a:hover style! Click here to see how it's done! (Cut 'n' Paste Code is also provided)

You can link to a particular section of a page by using a feature called Named Anchors. E.g. If I want a link to Rollovers I would link to this same page but would add a named anchor to go to the section Rollovers. Here's how you add an anchor. Position your cursor at the point you want the link to go to and click onInsert >Named Anchors. Give the anchor an appropriate name (in this case we would name it 'rollovers'). Now while linking all you need to do is add the # symbol along with the name of the anchor. An anchor is understood by HTML by the # symbol. In this case the link would be: < a href="#rollovers">Rollovers</a>

Customizing Form Objects and Validating Forms You can give a background color and font type to form objects using CSS Styles in Dreamweaver. You can also validate forms using Dreamweaver behaviors. Click here to learn how to customize form objects and validate forms. Tables Making table rows with heights less than 15 pixels sometimes seems impossible. Especially in Netscape! Here's a great tip - all you need to do is insert a transparent gif in your row and all your heights will be fine. You can find a transparent image called a shim in your Fireworks file. This is just a 1 pixel x 1 pixel gif. You could also export a transparent image from Fireworks. Have you ever wondered how to get a nice thin Table with a thin border border instead of the thick border that is automatically generated using the 'border' property? Or have you ever wanted only the table to have a border and not all the cells. Well the answer to this is to make a table with the width you want and 1 as your cell padding. You then have to insert the actual table inside this table with width 100%. More Cool Table Tips 'n' Tricks Custom Submit Buttons Have you ever wondered how to create custom 'Submit' or 'Go' buttons in Dreamweaver? Well, It's really simple. All you need to do is create your custom image, save it and in Dreamweaver click on Insert>Form Object>Image Field, to choose the submit button image. You now have your customized submit button. The code will look like this: <input type="image" border="0" name="imageField3" src="/images/submit.gif"> Rollovers Rollovers are very easy using Dreamweaver. All you need to do is export two images from Fireworks (the image itself and the rollover image). Next, in Dreamweaver, click on Insert>Rollover Image. Give a name to the image, choose the images from the folder icon and finally give the link to the image. That's it! You've now got a great looking effect for your site. Best Time Saving Tips in Dreamweaver The best time saving tips in Dreamweaver are to use Dreamweaver templates and Server Side Includes Check Broken Links Throughout The Site Before uploading your site you need to make sure that there are no dead links in the site. You can do this by going to your site map, right clicking on any of the files and

then clicking on 'check links'. Now you can choose to either check links in the entire site or within the selected file or folder. If there are any dead links you can fix them by using the folder icon to select the right files. Spaces If you need to go to the very next line and not to a new paragraph use Shift+Enter instead of Enter. Ctrl + Shift + Space gives you more than one space between characters Bullet Shapes and Types Customize bullets by using the Type attribute in the <ul> or <ol> tag. Point 1 Point 2 E.g. <ul type="square"> would give you a square bullet rather than the default circular bullet. See more examples Resizing Images After resizing an image in Dreamweaver, click on Commands>Optimize Image in Fireworks. You will get a dialog box saying 'Editing image.gif. Do you wish to use an existing Fireworks document as the source of image.gif.' Click on No and then click Update. The image is now updated and optimized in Dreamweaver. This saves you the trouble of opening the image in Fireworks, resizing it and exporting it again. http://www.entheosweb.com/website_design/dreamweaver_tips.asp Dreamweaver Photo Album/ Picture Gallery Requirements: You need the Dreamweaver and Fireworks software and basic knowledge of Dreamweaver In this tutorial you will learn how to create a complete web photo album in Dreamweaver within minutes! The photo album will contain thumbnails that when clicked on will show the larger size of the pictures with navigation to go forward or backward to view the entire album. A web photo album can be used to showcase products, portfolios, art and photography galleries and more. To get started keep all the images you would like to use in one folder. You only need the large size images. Fireworks will automatically create the thumbnails. Once you have all your images stored in a folder, here are the steps you need to follow to create a photo album in Dreamweaver. 1. Open your Dreamweaver site. 2. Create a folder for your photo album (e.g. album) 3. Open any page within the site 4. Choose Commands/Create Web Photo Album from the toolbar 1. Give the album a title (this will show in the thumbnail page only) 2. You can enter subheading info if you like (this will show in the pages with the enlarged pictures) 3. Choose the Source images folder by using the folder icon to browse to the relevant folder (this will be the folder where you have stored all the images) 4. Choose the destination folder (from our example 'album') 5. Choose the thumbnail size from the drop-down menu 6. You can enter the number of columns you would like to display the thumbnails

7. The rest can be left as is or changed according to your requirements for optimization 8. Click on OK 9. You will see Fireworks creating the thumbnails for all the pictures 10. Once this is done, you will receive a message saying that the photo album has been created and you can view the album. 5. The album will now be in it's simple unformatted state. You will have a folder called album under which there will be 3 folders as follows: 1. thumbnails - contains the thumbnails 2. images - contains the images in its original form 3. pages - contains the pages in which the larger images are inserted along with the navigation to navigate between pictures and go back to home 4. index.htm page which will have all the thumbnails with links to the larger images 6. You can now go to the index page and apply your template (if you have one) to format the page and also useCSS Styles to format the text. The gallery now will look like its part of the site. You can do this for all the pages in the pages folder (under the gallery folder). Amazing Photo Gallery Website Templates Free Dynamic Flash & XML Photo Galleries that can be updated using Notepad! Dreamweaver Forms Tips on customizing input boxes, list menus, submit buttons. Also learn how to validate forms using Dreamweaver behaviors. In this tutorial you learn how to: Customize the background color and font properties of text boxes Customize the background color and fonts of drop down lists Validate forms for Required fields Validate Email Addresses Validate Numbers Create a custom submit button - change the background color and font T o Customized Form Objects p Name * o Email f * Phone F o Rating r m Comments

Submit

Using Dreamweaver behaviors this form validates required fields, email addresses and numbers.

Try the form on the right to see how the validation works. The form objects have been customized with a background color and font. Tip : The tip to customizing form objects is using CSS styles! Note : Customizing form objects using CSS styles works only in Internet Explorer and not in Netscape. Customize the background color, input font and color for text boxes 1. The first step is to create a style with the background color and font that you'd like for the text box. Open the Style window by clicking onWindow > CSS Styles. Create a new style by clicking on the '+' icon found at the bottom. Give a name to the style like 'textboxstyle' and click on OK. In the 'Type' category select the font type, size, color and weight. In the 'Background' category select the background color that you'd like for the text box. Click on OK when you've finished. 2. The next step is to insert a text box by clicking on Insert > Form Objects > Text Field. 3. The final step is to apply the style to the text box. Select the text box and from the CSS Styles window select the style 'textboxstyle'. Once the style is applied to the text box click on File >Preview in Browser to preview the text box in Internet Explorer. Please Note: You will not be able to view the style in the text box in Dreamweaver. You can only preview it in Internet Explorer.

Customize the background color and font for drop down Lists This is the same as discussed above. Create a style just like we did for the text box and apply the style to the drop down list box. Validate Forms 1. The first step is to insert a form by clicking on Insert > Form 2. The next step is to insert 3 text boxes for name, email and phone. Choose Insert > Form Objects > Text Field to insert 3 text boxes. Name the first text box 'Name', the second 'Email' and the third 'Phone' in the Properties inspector. 3. Insert a submit button by clicking on Insert > Form Objects > Button 4. Open the behaviors window by choosing Window > Behaviors. Select the form tag and click on the '+' icon in the behaviors window. Choose Validate Form 5. In the pop-up window that appears choose the text field you want to validate and select the required validation. o Select Required for Name o Select Email for Email Address o Select Number for Phone 6. Click on OK. 7. Check the validation clicking on File > Preview in Browser Create a custom submit button 1. The first step is to create a style with the background color and font that you'd like for the submit button. Open the Style window by clicking on Window > CSS Styles. Create a new style by clicking on the '+' icon found at the bottom. Give a name to the style like 'buttonstyle' and click on OK. In the 'Type' category select the font type, size, color and weight. In the 'Background' category select the background color that you'd like for the text box. Click on OK when you've finished. 2. The next step is to insert a text box by clicking on Insert > Form Objects > Text Field.

3. The final step is to apply the style to the text box. Select the text box and from the CSS Styles window select the style 'buttonstyle'. Once the style is applied to the text box click on File >Preview in Browser to preview the text box in Internet Explorer. Please Note: You will not be able to view the style in the text box in Dreamweaver. You can only preview it in Internet Explorer. Learn more cool tricks with Dreamweaver Behaviors! Dreamweaver Image Maps Learn how to link to different pages from the same image using image maps in Dreamweaver. What are image maps? An image map is an image that has been divided into regions, or "hotspots"; when a hotspot is clicked an action occurs, for example a new file opens. The image found at the bottom is an example of an image map. All the links are in one image which are linked to different pages. You can also make circular links and polygon links as shown below.

Steps to creating an image map in Dreamweaver 1. Select the image on which you would like to make multiple links. Click on the rectangular hotspot tool found in the Properties Inspector. Select the rectangle tool and drag the pointer over the image to create a rectangular hotspot. You can also choose the oval or polygon hotspot tool to make an oval or polygon selection.

2. In the hotspot Property inspector's Link field, click the folder icon to browse to the file you want opened when the hotspot is clicked. Alternatively, type the file name.

3. Repeat the above steps to define additional hotspots in the image map. 4. That's it! You have now successfully created an image map. The code will look like this.

<map name="tabsMap"> <area shape="rect" coords="-1,0,46,16" href="/default.asp" alt="w eb de <area shape="rect" coords="46,0,108,16" alt="services" href="/services <area shape="rect" coords="108,0,172,16" alt="templates" href="/w ebsit <area shape="rect" coords="172,0,243,16" alt="portfolio" href="/portfolio <area shape="rect" coords="243,0,295,16" alt="testimonials" href="/testim <area shape="rect" coords="296,0,363,16" href="/contactus.asp" target= </map>

As you can see from the code you need to specify the coordinates for the hotspots. Dreamweaver Layers Layers are DHTML components and are similar to tables with a few different properties. Like tables they are containers where you put text or images. Unlike tables layers allow you to position an image or text in a particular point on the page and Dreamweaver automatically derives the x and y coordinates for the layer. You can reposition the layer by selecting and dragging it on the screen. Layers can be hidden or made visible, this is an added advantage in layers. Layers are viewed differently in different browsers. Create and add content to a layer Click on Insert>Layout Objects>Layers from the menu bar. The following image is displayed on the screen. This is the layer into which content will be added.

Click inside the frame and add content or insert an image. Changing properties Go to the properties window where you can give a background color, background image, edit the size of the layer, etc. Naming a layer Dreamweaver gives a generic name such as Layer1, Layer2, etc. when layers are created. You can give your own name for easy reference. To do this goto the Layers panel, if it is not displayed, goto windows and select layers, the panel will appear towards the right. Double click on the name of the layer and enter the new name.

Changing the visibility of a layer In the above image you can see that all the three layers have the open-eye icon, meaning that the three layers are visible. While working on layers, specially overlapped layers, you can hide or show the layers by clicking on the eye icon. Changing the order of the layers The above image shows a column name Z below which are numbers. This column stores the stacking order of the layers, i.e. the order in which they are drawn in a browser. The layer with the highest number will top the stack and that'll be the first layer. You can change this order by dragging the layer names up or down. Another way of doing this is by changing the number of Z-index. Flash Text Rollovers If you have used Fireworks before you must be knowing what are text link rollovers. You can create these rollovers even in Dreamweaver! Follow these steps. Step 1 : Place the cursor where you want the rollover text to be positioned. Click on Insert>Media>Flash Text. The following window will be displayed.

Step 2 : Select a font and size. Click on color option and select a color for the text and next select a rollover color. Type your text in the text box. If your text has a link browse the page. Select a target. If you wish you can give a background color for your text. Lastly save it with an extension .swf and click OK. Step 3: To preview the flash text select the image, you will see a play button in the properties window. Click on the play button and move your mouse over the

text to view the rollover effect after which you can click on stop to end the preview.

Step 4 : Below is my result. Move your mouse over the text for the rollover effect. You can also edit the font type, color and size by clicking on the edit button. Anchors and Email Links Anchors Invisible section bookmarks within a page are called named anchors. You can use the Property Inspector to link to a particular section of a document by first creating named anchors. Named anchors let you set markers in a document, which are often placed at a specific topic or at the top of a document. You can then create links to these named anchors, which will quickly take your visitor to the specified position in the document. The URL (web address) to an anchor looks like this, eg. links.html#para8 (links.html is the file which has an anchor named 'para8' ). Creating anchors and linking to them Step 1 : Place the cursor in the section of the page you want to link to. Step 2 : Select Insert>Named Anchor and type a short descriptive name for that section and click on OK. A yellow anchor icon will appear. If you want to edit it double click on this icon.

Step 3 : At the top of the same page type a link which is going to link to this anchor. With this link selected go to the link box of the property inspector type a # sign followed by the anchor name. If the link is given from another page then the file name has to be given before the anchor name, eg. book.html#para8 Email Links/Mailto An e-mail link opens a new blank message window (using the mail program associated with the user's browser) when clicked. In the e-mail message window, the two text box is automatically updated with the address specified in the e-mail link. A mailto link will only work if the browser supports e-mail and is setup to work with a local e-mail system. Step 1 : In the document window position the insertion point where you want the email link to appear, chooseInsert>Email Link, the Email link window opens. Step 2 : In the first input box enter the text you want to appear in the document as an email link and in the next box type in the email address. Next click on OK.

Step 3 : Now you'll see the text as an email link in your document. In the property inspector the Link input box will contain the text 'mailto:jessie@entheosweb.com' To create an e-mail link using the Property inspector: Step 1 : Select the text or an image in the Document window's Design view. Step 2 : In the Link text box of the Property inspector, type mailto: followed by an e-mail address. (Do not type any spaces between the colon and the e-mail address) eg. mailto:jessie@entheosweb.com Server Side Includes Make Easy site-wide changes with Server Side Includes If you are developing big web sites with parts of the web pages having repetitive content, you absolutely must use Server Side Includes(SSI). Notice in this site all the sections have the same header, site search and left menu. If Written by we were to make a change any of these areas we would have to manually Rachna change it in all the pages or if we were using templates or libraries we would have to FTP all the pages every time we make a change. As we are using Includes we need to make the change only in the Include and it automatically gets reflected in all the sites that are using that Include. Best of all it reduces our FTP time by more than 200% as we only need to FTP one file and not all the pages using the Include (If you are familiar with using templates and libraries you will know that though using templates and libraries cuts down your development time a lot you still have to FTP all the files that use the library or template. This is not the case when using SSI's). What are Server Side Includes? Server Side Includes allow you to write some commonly used code once and have the server insert it into the pages for you. In other words an include file has code that you would like to reuse. Any ASP or SHTML page that wants to use the code in the include file will have a special line that indicates the place holder for the code.This code looks like: <!-#include virtual="/path" --> This results in the server taking the entire content of the file and inserts it into the page, replacing the <! -- #include ..--> line. How do you use Server Side Includes Server Side Includes are very easy to use. All you need to do is create a .htm, .html or .asp file which contains the reusable code. Take the header in our site as an example. We make the header an html file (Important: This should not contain any HTML, HEAD or BODY TAGS). In this case the code will start and end with the TABLE tag. Very Important: If you are using highly confidential ASP code (or any other web technology), like your database connection string or some business logic, in your include file then make sure the include file is named .asp so that no one can open the include file and see your code. Once you have made the Include file all you need to do is, include it in all the pages that will use this code (In the case of our site header, the whole site uses it so we have included it in the Template). Go to the page that will use this include and add the following code in the appropriate place:

<!--#include virtual="/path" --> Replace path with the path of the Include file. That's it! Its as easy as that! Now whenever you make a change in the Include it will automatically get reflected in all the pages using the Include and you will need to only FTP one page instead of hundreds of pages. Important points to remember while using Server Side Includes All the pages using Server Side Includes must be .asp or .shtml files. The Include itself must not have any < HTML>, <HEAD> or <BODY> tags. The file should only contain the code that has to be included into a file. If you are using ASP code in your include file then make sure the include file is named .asp so that no one can open the include file and see your code. All paths used in the code of an Include file (i.e. images, links, etc.) must be relative to Site root and not relative to document. When you use an Include within a file it must be included relative to Site Root and not relative to Document. Using Server Side Includes in Dreamweaver It is very easy to use Server Side Includes in Dreamweaver. Once you have made your Include file all you need to do is Click on Insert > Server Side Includes, choose the file you need, make sure the path is relative to Site Root and insert it. We hope you have found this time saving tip useful. If you aren't already using Templates while developing web sites you may interested in reading our article on Using Templates in Dreamweaver (Another big Time saving tip!). Dreamweaver Behaviors Use the Dreamweaver behaviors panel to create jump menus, swap images, pop-up windows, play sound, validate forms and more. Dreamweaver behaviors make it easy to add interactivity to your site. Try out all the cool stuff possible using Dreamweaver behaviors. Written by What are behaviors? Rachna Behaviors allow visitors to interact with a Web page to change the page in different ways. While using behaviors you need to specify the action and also the event that triggers that action. Favorite Behaviors Pop-Up Windows The 'Open browser Window' behavior can be used for promotional ads, zooming in to pictures etc. It allows you to open a browser window in any size you specify. Sample: Click here. Learn how its done Play Sound Play sound on rollovers, on page load etc. Sample: Rollov er to play sound Click here to learn how its done Swap images Use swap images to liven up your site and add a bit of

Jump Menus If you have a lot of links on a page and don't have enough of space to fit them all a simple way to add the links is to create a jump menu. Sample:
Dreamw eaver Tips

Click here to see how its done

interactivity. Sample: Rollov er the links on the right to view the swaps. Click here to learn how to create swaps in Fireworks