Email Links using Dreamweaver

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 To 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, choose Insert>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:mail@tutorailsforweb.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: mail@tutorailsforweb.com

Read more...

Creating anchors in Dreamweaver

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

Read more...

Building a Flash Animated Website

Step1:Before you begin designing your website, determine what you want to accomplish with it. Map out the information you want to include and make notes of fun Flash ways you can present that info.

Step2:Visit FlashKit.com. Click on "Movies." You'll see many different categories. All of the movies are Open Source, which means that the creator is offering to share their creations with you and you are free to use them and manipulate them however you like.

Step3:Now click on "Interfaces" and from there, go to "Sites." As you look through the different developers' work you'll have many to choose from when designing your site. When you find one you like, you will have the option to "Download.fla" which will save a file to your computer that includes ALL of the files for that particular example. The download will be ZIPPED (which means it's compressed and bundled for ease in downloading). All Windows machines come with a program that will "unzip" a zipped file. Find the file you downloaded, double click on it and your computer will automatically decompress it.

Step4:Open your Flash program. Go to File and find the file you just download. One of the files will end in FLA. That's the one that Flash needs. Once you've opened it in Flash you can change things like text and artwork to make it meet your needs.

Step5:If you run into a snag, or your changes so completely mess up the original file that you can't repair it, just go back to FlashKit and download it again.

Step6:Save your file often! When the movie is done to your satisfaction, choose "File" and then "Export Movie."

Step7:Start Dreamweaver. On a new HTML page, click on the Flash symbol. It will prompt you to find the Flash movie you just created. Click on the name and Dreamweaver will automatically add all the coding you need. Save the webpage you just created.

Step8:Upload the webpage and the Flash movie file to your server. Surf to the URL and check to make sure it works right. Double check in Internet Explorer, Firefox and Netscape.

Read more...

Adding images to web pages

The following article will demonstrate how to use simple HTML code to add an image to a web page. For example, if you are updating your profile page on a site such as Mylot and that site allows HTML, you may want your viewers to see your own images. Here is how to do it.

Step1:The simple HTML code to do this can be seen in this screenshot. Look at the screenshot and write down the code exactly as it appears.

Step2:In the code above where I have denoted URL between quotes, you will insert the URL or Uniform Resource Locator to your own images. These images are typically stored at a hosting website where a direct link can be obtained. Here is a picture example showing what the code should look like now.

Step3:Paste this whole string into the section of your web page that allows HTML code.

Step4:Make sure when using this code that you include all slashes, quotes and other special characters exactly as they appear in the screenshots. Otherwise, this code will not work.

Read more...

Adding SWF Files to a webpage in Dreamweaver

Step1:Either prepare a Flash animation movie yourself or download a free .swf movie from the web to use on your page.

Step2:Open a page in Dreamweaver and place the cursor in the position where you want to insert the movie.

Step3:Choose Insert > Media > SWF. A Select File dialog will open. Navigate to the .swf file and choose it. I suggest that you store the .swf file in the same folder as the .html file in which you are embedding it.

Step4:Fill in Object Tag Accessibility Attributes to give your movie a title for accessibility purposes.

Step5:Dreamweaver inserts the Flash code. You can preview it using the Play button in the Properties panel. Use the Properties panel to set the width and height for the movie and to set Loop and Autoplay the way you want it. Save your work.

Step6:In this process you see a message from Dreamweaver telling you that you need to save the dependent files swffix_modified.js and expressinstall.swf into the Scripts folder. Click OK to do this. When you upload the page to the server, upload the HTML page, The SWF file and the Scripts folder.

Read more...

A redirecting script for webpages using Dreamweaver

A redirect script in the coding of your webpage is a good idea if you have a page that still gets hits but you no longer want to maintain it, or you want to take advantage of the hits on another page, or if you are making a transition from one website to another.

A redirect script will automatically change to another web page within a certain time. No clicks or other hassles.

Step1:Open your webpage in an editing program. Some web hosts have built in HTML editors. I use Dreamweaver but you can also use Notepad.

Step2:Find the Head code. Find the Head code. HTML is just a language like English or French or Spanish - don't be intimidated! At the top of the page of HTML coding find the HEAD code. There may already be stuff written between the open and closing sections.

Step3:Type the META tag that you see in blue in the image to the left or you can cut and paste it below adding the brackets to the beginning and end.

meta http-equiv="refresh" content="N; URL=other-web-address"

Instead of the words "other-web-address" you should type in the URL of the webpage you want your visitors to go to.

The URL is the address you can see in the bar at the top of your web browser. It usually begins with http.

Change the N to how many seconds you want the browser to wait before it takes your visitor to the new page. I usually just want them to go immediately so I put a zero in place of the N. You may want them to read something first, in which case you could put 10 or even 30 in place of the zero. Test it and see how fast you want the page to refresh.

Step4:Save your page being sure to retain the extension. The extension is the end part after the period. It might be HTM or HTML or SHTM. Now upload it to your host server and test it live online. It should automatically refresh and load a new page in place of the original page.

Step5:You can have your page refresh to any URL - web page address - you want.

Read more...

Creating frames based web page with Dreamweaver

Frames allow you to divide a page into parts and display certain information, such as a navigation bar or a table of contents, at all times. Frames are really "pages within a page"; you specify which pages are visible in which frames. In Dreamweaver 3, once you create a frames-based page, you can either add content directly to the empty frame or import an existing page.

Creating a Frames-Based Page

Step1:Start Dreamweaver and locate the Objects palette.

Step2:Click on the downward pointing arrow next to the palette's visible section (usually Common) and choose Frames.

Step3:Select the type of frameset (frame layout) to be used from the options listed.

Step4:Click on one of the empty frames to begin inserting content into the frame.

Step5:When finished, choose Save from the File menu to save the frame. Give the frame an appropriate name, such as topframe.html or sidebar.html, for easier editing later on.

Step6:Choose Frame from the Window menu to open the Frame Inspector. Use the Frame Inspector to make changes to the frame, adjusting such aspects as width, height and border thickness.

Using Existing Pages as Frames

Step1:Make sure the Frame Inspector is open. In the Frame Inspector window, click on the frame where the existing page will be located.

Step2:Open the Properties palette by opening the Window menu and selecting Properties, or by pressing Ctrl+F3.

Step3:Locate the Source (SRC) field and type the name of the file to be used in the frame, or click the Folder button to browse your hard drive for the file.

Step4:Make any other formatting changes to the frame, then click on another frame in the Frame Inspector window to insert a file or add content directly.

Step5:When finished, save the frames-based page by selecting Save All from the File menu. If you haven't made any changes to the pages themselves and only want to save the frameset, choose Save Frameset from the File menu.

Step6:Preview the page by choosing Preview in Browser from the File menu.

Read more...

Text Effects using CSS in Dreamweaver

Cascading Style Sheets (CSS) Styles are very useful for maintaining a web site since its appearance (controlled by properties of HTML tags) can be updated from just one file. They are also used to enhance your site's look. In this article you will learn how to make cool text effects using CSS Styles using Macromedia Dreamweaver. Read our CSS Styles Tutorial

1. Text Links Rollover

This effect is got by using the hover property for the tag or any named css style used for links. For defining the default text link rollover throughout the site you can set the a:hover style. Open your site in Dreamweaver and do the following:

1. Open any page of your site and select window > CSS Styles and Click the New CSS Style button (+ icon), a pop-up window will show up.

• Setting a:hover - Select Advanced in the Selector Type. Now select a:hover from the Selector list box.
• Setting any other link style's hover - if you have already created a css style called say "links", to set the links:hover style - Select Advanced in the Selector Type. Now type links:hover in the Selector list box space. [To use this style just select and right click the tag in the tag selector located at the bottom left of the Document window. For the Set Class attribute select links from the list.]

2. Define the style in an existing Style Sheet, a new Style sheet or embedded in your current Document, and click OK.

3. In the CSS Style Definition pop-up window that appears give the Text specifications in the Category: Type. Now try the following effects separately or together:

• Tick the checkbox none if you don't want any underline to appear for the links on rollover.
• Tick underline if you want it to appear (this is usually used if the a:link or .links style is given the none property for no underline to appear for the links without rolling over them).
• Give the weight as bold.
• Change the link color property to something other than the a:link color.

2. Text Case Setting

In case you want a style that always displays in upper or lower case no matter how the text is typed you can set the Case property to capitalize, uppercase or lowercase in the Category:Type text specifications.

3. Text Spacing

To make the text appear neatly spaced on your site and for easy readability you can set the Line Height property in the Category:Type text specifications.
Tip: Set the line height to approximately 1.5 (one and a half) times the font size for it to look smart. The content in our site has a font size of 11 and line height of 16.

4. Line-through Effect

If you are selling products on your site you might want to give a discount and show the old and new prices (example: $100 $50). To give a strike through effect for the old price you can make a style with the Line-through property in the Category:Type text specifications ticked.

Read more...

Including sound files to web pages

How to Play sound using Dreamweaver Behaviors?

1. Select the link (either text / link) to play sound and open the Behaviors panel.

2. Click Add (+) button and select the 'Play Sound' option from the Actions pop-up menu.

3. Select the sound file by clicking the browse button, or enter the filename path in the 'Play Sound' text box and click Ok.

4. Select the desired event to play the music/sound. For more events, change the target browser in the 'Show Events For' pop-up menu.

5. The coding necessary to play the selected sound file is automatically generated by Dreamweaver.

6. Save and test your file in a web browser. That's it you've learnt how to play music/sound in a web page when an event is triggered.

Read more...

Pop-up Menus using Dreamweaver

How to create & edit Pop-Up Menus

Pop-Up Menus can be easily created using the Show Pop-Up Menu of the Dreamweaver behaviors panel (similar to the Fireworks pop-up menu). The options can be set using the dialog box to create either a horizontal or a vertical pop-up menu. You can use this dialog box to set or modify the color, text, and position of a pop-up menu.

For Example: See our Top Links - Services, Portfolio, Rates & Deals, Web Products, Free Resources and About Us

1. To create a pop-up menu for an link (either text / image), create a link, select it and open the Behaviors panel (Shift+F3).
2. Click the Add (+) button and select Show Pop-Up Menu from the Actions pop-up menu.
3. Set options for the pop-up menu with the help of the dialog box that appears using the following tabs:

• Contents - to set the name, structure, URL, and target of individual menu items.
• Appearance - to set the appearance of the menu's State (Up / Over) and to set font choices for menu item text.
• Advanced - to set the properties of the menu cells, say width, height, color, border width, text indention, and the length of delay before the menu appears after the user moves the pointer over the trigger.
• Position - to set position of the menu relative to the triggering image or link.

4. To edit a pop-up menu, first select the link and then double-click the Pop-up Menu in the Actions column of the Behaviors panel.
5. Save and test your file in a web browser. That's it you've learnt how to create pop-up menus using Dreamweaver Behaviours.

Read more...

Pop-up Windows using Dreamweaver

How to create & edit Pop-Up Windows

Pop-Up Windows can be easily created using the 'Open Browser Window' of the Dreamweaver behaviors panel. You can give the URL and set the window properties using the 'Open Browser Window' dialog box.

For Example:

1. To create a pop-up window for any link, create the link (either text / image) using '#', select it and then open the Behaviors panel (Shift+F3).
2. Click the Add (+) button and select 'Open Browser Window' from the Actions pop-up menu.
3. Select the URL to be opened and set the window properties, say width, height, attributes (Navigation toolbar, Location toolbar, Status bar, Menu bar, Scrollbars as needed, Resize handles) and a name.
4. To edit a pop-up window, select the link and then double-click the 'Open Browser Window' in the Actions column of the Behaviors panel to make the necessary changes.
5. Save and test your file in a web browser. That's it you've learnt how to create pop-up windows using Dreamweaver Behaviours.

Read more...

Rollover Buttons using Dreamweaver

Introduction

Using Rollover Buttons & Images is one of the most common web design ideas adapted by designers the world over because of its simplicity. Creating Rollover buttons or images using Adobe Fireworks or Adobe Dreamweaver is very easy. Read on!

Example 2: This example uses Rollover Images, Vector Shapes, Paste Inside, Drop Shadow

Example 1: This example uses Swap Images, Rollover Buttons, Curves, Vector Shapes, Paste Inside, Drop Shadow. View/Buy complete site using this design: Template 7 - Food

What it does

In Rollovers, a button or image changes (swaps) itself on rolling over it (onMouseOver event) and reverts back to the original image on rolling out of the web object (onMouseOut event). The on-rollover images are preloaded into the page when it is loading, this ensures that the rollovers are displayed quickly. Place your mouse over the Buttons in Example 1 and the Images in Example 2 to see their rollover effect.

How it works

The whole functionality is controlled by the JavaScript functions automatically generated by Fireworks or Dreamweaver. These functions are very optimized and you can always trust the code generated by Adobe Software :-) If you are a programmer-cum-designer it is good to know what the code does: There are 4 functions generated MM_preloadImages, MM_swapImage, MM_swapImgRestore and MM_findObj. Their names are self explanatory to what they do.
Create your own attractive Rollover Buttons and Images

Using Macromedia Fireworks: Create a new file in Fireworks and follow these steps:

• Position the initial buttons/image to be displayed correctly and place it in a layer named "buttons" or "links" in Frame 1.


• Duplicate the buttons/images layer once. Double click the new layer name and rename it to "rollovers". Tick the "share across frames" option which is seen while naming the layer and then click outside. Lock and make invisible the buttons/images layer.


• In layer "rollovers", change the color/effect of the rollover buttons or rollover images.


• Open the Frames panel, you will see just one frame called Frame1". Duplicate the frame once. Go back to Layer Panel(make sure the frame 1 selected before going back to layer panel)


• Open the "Web Layer" and insert separate slices for all the buttons/images. Open the Behaviors Panel. Now, select all the rollover buttons/images slices and click the (+) button in the behaviors panel, select Simple Rollover from the list. Another way to do it is, select individual slices, right click and select Add Simple Rollover Behavior from the list.


• View how they work in the preview window and then export your PNG file. Fireworks will automatically create your html file and images in the directory specified. While exporting just check if the HTML and images option is selected in the 'Save as Type' list box and the export slices option is selected in the 'Slices' list box. Test your HTML file in your browser.

You have just learnt to create your very own rollover buttons and rollover images using Macromedia Fireworks!

Using Macromedia Dreamweaver:

1. Design your buttons/images and their rollovers in any graphic editor. Export them to your site's images folder.

2. Now in your web page, click Insert > Image Objects > Rollover Image. In the pop-up window that appears give your rollover a name, alt tag, link and browse to locate the Original Image and Rollover Image. Click on OK.

That's it, you have just learnt to create your very own rollover buttons and rollover images using Macromedia Dreamweaver!

Read more...

Publishing a site in Dreamweaver

Define your Dreamweaver site : Local and Remote

To set up your local and remote sites in dreamweaver, create a Dreamweaver site definition to allow you to manage the files within Dreamweaver.

1. Select Site > Manage Sites, the Manage Sites dialog box appears.

2. click New, and select Site from the pop-up menu. The Site Definition dialog box appears. If the dialog box is showing the Advanced tab, click Basic.

3. The first screen of the Site Definition Wizard appears, enter a site name to identify your site within Dreamweaver.

4. The next screen of the wizard appears, asking if you want to work with a server technology. Select the No option to indicate that for now, unless you have dynamic pages and know your technology.

5. The next screen of the wizard appears, asking how you want to work with your files. Select the option labeled "Edit local copies on my machine, then upload to server when ready (recommended)." Click the folder icon next to the text box and locate your site root folder locally.

6. The next screen of the wizard appears, asking how you connect to your remote server. Select FTP/SFTP for a remote server or Local/Network for an intranet site.

7. If you selected FTP, enter the following options:

* Enter the hostname of the server (such as ftp.smartwebby.com).
* In the text box that asks what folder contains your files, enter the path on the server from the FTP root folder to the remote site's root folder. If you're not sure, consult your system administrator. In many cases, this text box should be left blank.
* Enter your user name and password in the appropriate text boxes.
* If your server supports SFTP, select the Use Secure FTP (SFTP) option.
* Click Test Connection.
* If the connection is unsuccessful, consult your system administrator.

8. If you selected Local/Network, click the folder icon next to the text box and browse to the remote site's root folder. You may want to deselect the Refresh Remote File List Automatically option for improved speed.

9. Click Next. Don't enable file check-in and check-out for the site. Click Next.

10. Click Done to finish setting up your local and remote sites.

Upload your files to the remote site server

To make your pages publicly accessible, you must upload your pages to your site. After setting up your local and remote sites, you can upload your files from your local folder to the web server.

1. In the Files panel (Window > Files), select the site's local root folder.

2. Click the blue Put Files arrow icon in the Files panel toolbar.

3. Dreamweaver copies all the files to the remote site folder you defined. This operation may take some time, as Dreamweaver must upload all the files in the site.

4. Open your remote site in a browser to make sure everything uploaded correctly.

That's it, you have successfully completed our tutorial on publishing your site!

Read more...

Useful tips while using Adobe Dreamweaver

1.Use CSS Styles (Tutorial)Format text throughout your Dreamweaver site easily. Read more in cool text effects using css styles and links without underline.

2.Switch to the Code View by pressing F10.

3.In the Design View of Dreamweaver you can View your page in the default browser by pressing F12.

4.Insert a line break tag by pressing Shift+Enter.

5.Give non-breaking space by holding down Ctrl+Shift and clicking Space. Instead of clicking the space bar continuously (you will get characters one after the other), release the Ctrl+Shift between clicks to the space bar. You will get the desired space in half the number of characters (better HTML code).

6.Use different kinds of bullets to make your lists look attractive. Read our tutorial on Bullets.

7.Use a common structure (template) for your site pages - Learn how to create Dreamweaver Templates.

8.Place common code into include files - Learn how to create and use Server Side Includes (SSI)

9.Create rollover buttons/images in Dreamweaver.

10.Use In-built optimized client side javascript scripting generated by dreamweaver called Dreamweaver Behaviors. The most Useful Behaviors are as follows:

* Check Browser

* Check Plug-in

* Go to URL

* Jump Menu

* Open Browser Window

* Play Sound

* Popup Message

* Preload Images

* Show Pop-Up Menu

* Swap Image/Swap Image Restore

* Validate Form

Read more...

Server Side Includes (SSI)

What are Server Side Includes?

Server Side Includes are files that have some commonly used code that can be reused by many pages in your site. When you use a SSI file the server takes the entire content of the file and inserts it into the page, replacing the include code. As an example, imagine you have a large portal web site with links at the top, bottom and sides common to all pages (or a section of pages). To make the site easy to maintain you can have the header, footer, right menu and/or left menu as include files. So when there is a change to be made you just need to make the changes, save and upload the corresponding include file and not the many files using it.

How are Server Side Includes better and different from frames?

Though frames are sort of similar to Server Side Include files, we do not recommend their use as not all browsers support them. In frames each frame is a separate page with its own tags (unlike SSI where they cannot have these tags) and is called in the main page where the frames are defined.

Create your own SSI file and call it by using the given code

Create a file which contains the reusable code with the extension .htm, .html, .asp or .php

Very Important: If you are using highly confidential ASP/PHP 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/.php so that no one can open the include file and see your code.

You cannot use include files in HTM or HTML files, You can use them only in SHTML, ASP, PHP pages, etc. - that support include files.

Now go to the page that will use the include and add the following code in the appropriate place:

SHTML or ASP:
PHP:

Calling Server Side Includes into your page using Macromedia Dreamweaver

In your page, keeping your cursor in the place where the include file should come, Click on Insert > HTML > Script Objects > Server Side Includes (for MX 2004) or Insert > Server Side Includes (for Dreamweaver 4). In the pop-up window that appears select your include file, give the path as relative to Site Root (for ASP) and click OK.

Read more...

Dreamweaver Templates

What is a Dreamweaver Template? Why are Templates necessary?

A Template is basically a structure used commonly for many items (pages in a web site in our context). A Dreamweaver Template is a common structure created and used for all or some pages of a web site using the Adobe Dreamweaver tool. There can be any number of dreamweaver templates for a web site. That is, each section of a web site can have its own template with variations in structure or color from the others.

As an example, lets say you want to built a web site which has 20+ pages with a lot of content. For this we recommend using a common template or templates - where all pages or a group of pages have one basic design and only the content varies. This way even if your site is a little distracting due to necessary design effects, your design is noted once (hopefully with a appreciative eye :-) and then the visitor focuses on the content automatically.

Tip: A clean consistent layout with a neat navigation that uses a lot of white space will enhance your site's look, readability and stickiness factor.

What are the advantages of using Dreamweaver Templates?

In the current web design & development world Adobe Dreamweaver has become the top tool used globally by designers and web programmers. One of the main attractive feature of Dreamweaver which has made it so popular IS? Yes you guessed it right, The Dreamweaver Template and the ease with which these templates can be created and used by even beginners.

The Adobe team keep all current technology developments into play with their upgrades. We recommend their latest offering - Adobe Dreamweaver CS3 - to anyone who wants to create or maintain web sites efficiently - even with little or no past knowledge. In a nutshell, all you need to do is:

Design the common structure and save it as a Dreamweaver Template with the content area(s) editable.

Apply it to all your web site pages or create new pages using the template and insert your content in the editable area(s). No kidding, its that simple!

Another huge advantage of using Dreamweaver Templates is when you want to modify the common elements of your pages. All you need to do is make your changes to the template and save it. All the pages using the template are automatically updated without you having to check and modify each page. Thus dreamweaver templates save a lot of precious development and maintenance time!

For Developers and Clients: The key advantage dreamweaver templates provide is separation of design & code from content for pages using templates. This means that :

Developers and their clients can breath easy knowing that the code and design cannot be messed up by inexperience in handling the prepared web pages as non-editable regions are locked and cannot be edited from within Dreamweaver.

This helps Clients to confidently make changes to their web site pages (created by their web designers) without having to go back and forth for every minor content change. Furthermore with just a little practice they can create web pages (using the prepared template) and maintain their own web site easily. One real life example is our very own Dreamweaver Template clients, who with a limited budget purchase & download a top quality ready-to-use Dreamweaver Template from our web site, then customize, upload and set live their cool web site within a couple of days.

How to create a Dreamweaver Template?

Design your web site with a common structure in mind that features in all the pages.

Tip: Follow a simple header, footer, side menu(s) & common navigation design approach for visitors to easily identify with your web site - at least for your inside pages.

The next step is to save this common structure as a Dreamweaver Template. For this, open File and and click on Save As Template. Give it a name (usually just 'template') and click on Save.

This template file will be saved under the folder called Templates (which is automatically created by the Dreamweaver) with a .dwt extension.

In case you get a message saying that your dreamweaver template doesn't have any editable regions, just ignore it as it is a new template without any pages under it. You can add the editable regions after saving the template (.DWT) file.

How to create an Editable Region for a Dreamweaver Template?

An Editable region is a named region in a Dreamweaver Template where content can vary from page to page. These Editable regions can contain text or media specific to that particular page. To create an editable region in a Dreamweaver Template, place your cursor in the template where you need an editable region and then go to Insert >> Template objects >> New Editable region. Give it a name. Click OK. You will find the name of the editable region surrounded in a light blue box in the place where you inserted it.

Tip: Make sure your editable region tag is not within a paragraph or other block tag as it will not let the text you insert in your actual pages format properly.

How to create a new web page using your dreamweaver template?

Now you are all set to use the template in your pages.

For Dreamweaver MX and Above: Click File New.. In the pop-up window that appears go to the Templates tab and select the desired template.

For Dreamweaver 4: Click New from Template and select the desired template from the pop-up window.

To fill the content for that page, go to the editable region(s) and enter your page specific content. Remember you can edit only the editable region(s) in the page and not the elements included within the template.

How to apply the Template to your existing template based or non-template web pages?

For Dreamweaver MX and Above: To apply the template to an existing page, select Modify >> Templates >> Apply template to Page..

For Dreamweaver 4: To apply the template to an existing page, select Modify >> Templates >> Apply template to Page..

In case your pages already used a dreamweaver template you can safely apply another template by specifying the editable regions into which the existing editable regions should be copied. Your task is made simple - you are not asked to do this - if you have the same editable region names in both templates.

Tip: Thus, to easily toggle between your dreamweaver templates use a common naming convention for all your editable regions. For example use 'content' for the content area, 'right_menu', 'left_menu' or just 'menu' for the possible menu areas, etc.

For non-template pages just instruct dreamweaver to place all non-editable region content that could get kicked out into the content area editable region - this way you don't loose any data stored in the original page.

How to Modify & Update a Dreamweaver Template?

So you have made the template and the pages using it. How do you modify the common elements of your template pages? All you need to do is make your changes to the dreamweaver template and save it. All pages are automatically updated on request. Simple!

Tip: Use Server Side Includes in your Dreamweaver Template

We highly recommend the use of Server Side Includes (SSI) with dreamweaver templates for large websites. Include files save you the trouble of updating and uploading numerous pages having the same content. For example in your dreamweaver web site if you navigation links are in an include file you can change your navigation at any time and will have to upload only that single include file.

How to make a Dreamweaver Template XHTML Compliant?

Open the dreamweaver template file (example: template.dwt) under your Templates folder in Dreamweaver (MX & above).

Now choose File > Convert > XHTML

Next just save it and update the template for all files using it.

Read more...

Jump menus in Dreamweaver

Creating a Jump Menu is quite simple.

Step 1:Create a new basic html document and insert a form area:


Step 2:Next you have to insert a List/Menu form object. Select Insert -> Form and click on List/Menu:
Step 3: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:
Step 4:A new window will pop up - here you have to add options for your drop-down jump menu.Step5: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.

Read more...

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.

Read more...

Layers in Dreamweaver

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 dreamwever 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.
1.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.

2.Changing properties

Go to the properties window where you can give a background color, background image, edit the size of the layer, etc.

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

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

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

So now you have learnt how to create layers.

Read more...

Templates in Dreamweaver

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

Read more...