Whenever our computer training company runs Dreamweaver training classes, we always ensure that the topic of templates is included. They are such a great time-saving feature. Templates can be used in two ways: firstly, a new page can be based on a template and, secondly, a template can be applied to an existing page. To create a new page based on a template, proceed as follows.

1. Choose New from the File menu.

2. In the first column of the New Document window, choose Blank Template.

3. In the second column, specify the type of page you would like to create (HTML, ASP, ASP.NET, ColdFusion, JSP OR PHP).

4. In the third column, marked “Layout”, you may optionally choose one of Dreamweaver’s excellent CSS layouts.

5. Finally, in the fourth column of the New Document dialog, specify whether you would like your CSS code placed in the head area of the template, in a new CSS file or in an existing CSS file. (Naturally, this option only applies if you choose to use one of the preset CSS layouts.)

If you wish to apply a template to an existing page, perform the following steps.

1. Open the page in question.

2. Choose Modify - Templates - Apply Template to Page.

3. Double-click the name of the template you wish to associate with the page.

Templates use editable regions to mark areas of the page which may be modified whenever the template is used. Editable regions may contain placeholders such as text or graphics. Graphic placeholders are ideal for marking an area of a page where an image is to be inserted. Each time the template is used, a different image can be substituted for the placeholder. To replace a graphic placeholder, do the following.

1. Create or open a page based on a template.

2. Double-click the graphic placeholder.

3. Navigate to the image which will replace the placeholder.

4. Double-click the name of the image.

The name of the template controlling a page is displayed in the top right and the name of each editable region is shown above the appropriate area of the page. The editable region labels compromise the WYSIWYG display of your page slightly by pushing elements down. To switch off the display of template and editable region names, choose View - Visual Aids - Invisible Elements. Use the same command to reinstate them.

Dreamweaver displays a light blue rectangle around editable regions in both templates and documents based on them. It also places a yellow rectangle around any page based on a template. The same yellow highlight also shows up in code view to mark the locked regions of a page based on a template. Dreamweaver allows you to change these highlight colours.

1. Choose Preferences from the Edit menu.

2. Click on the category heading Highlighting on the left of the window.

3. Choose a colour from the pop-up palettes next to Editable regions and Locked Regions

From time to time, you will have pages which you need to treat as independent and which you do not want controlled by a template. Obviously, you can simply avoid attaching a template to such pages. However, you will often find it useful to apply a template to the page, to obtain formatting elements and then to detach the page from the template. To detach a page from its template, choose Modify - Templates - Detach from Template.

You can also update the current page by dragging the appropriate template icon from the Templates section of the Assets panel directly onto the page. This technique can also be used to apply a template to a page or to change the template on which a page is based.

Author’s company runs public courses in Adobe Dreamweaver CS4 in London and throughout the UK.

Macromedia invented the terms “behavior” and “server behavior” back in the days when they owned Dreamweaver. Both elements refer provide a method of adding interactivity to a web page by generating a variety of scripts which would often be time-consuming to create manually. The difference between the two types of behavior, as the names imply, is that server behaviors generate client-side scripts while server behaviors automatically create server-side code.

Behaviors will always generate code written in JavaScript, by far the most common client-side scripting language in use. The code generated by JavaScript behaviors perform a number of useful function such as plug-in and browser detection and form validation. Some of these behaviors are a bit long in the tooth, have not been updated for several versions of Dreamweaver and, in some cases, have been superseded by Spry, Dreamweaver’s implementation of Ajax.

Server behaviors are capable of generating code in any one of the five server-side scripting languages with which Dreamweaver is compatible: ASP, ASP.Net, ColdFusion, JSP and PHP. The language chosen is determined by the language specified as that which should be used on the testing server. This is part of the site definition and dictates the default document type for all new files.

Dreamweaver’s preset server behaviors provide quite a broad range of features but most of them relate to the manipulation of data objects which are the main thrust of Dreamweaver’s server-side development capabilities. One of the first behaviors new Dreamweaver developers will encounter is “Repeat Region”. This allows you to select any element or region of a page and specify that it will repeat for as many items as there are in a given set of data. A classic use of this is the repetition of a table row or list item. Naturally, dynamic data, such as a product name, product image, product description, will also be inserted within the area being repeated.

Another useful series of server behaviors is Show Region which has six different variations on the same theme: “Show Region if Recordset is Empty”,”Show Region if Recordset is not Empty”,”Show Region if First Record”, “Show Region if not First Record”, “Show Region if Last Record” and “Show Region if not Last Record”.

The first two of the Show Region server behaviors allow developers to create a page section which will only be displayed if a given data set is either empty or not empty. So, for example, you would select the entire repeat region mentioned above and use the “Show Region if Recordset is not Empty” behavior. Then you would create a message such as “Sorry, no records match your search criteria.”, highlight it and use the “Show Region if Recordset is Empty” to make its display conditional.

The writer of this article is a developer and trainer with Macresource Computer Solutions, a UK IT training company offering Adobe Dreamweaver Classes in London and throughout the UK.

Dreamweaver’s Properties Inspector is normally displayed at the bottom of the screen and is extremely versatile. It is context sensitive, in that it displays options which are relevant to the currently selected item. These options provide useful feedback and allow you to modify the attributes of the selected element.

The Properties inspector has two different sets of options: HTML and CSS. These may be accessed by clicking on two buttons on the left of the panel. When formatting text, the HTML section contains options which allow you to assign structural attributes to your text. From the Format drop-down menu, you can specify whether the text is a heading (h1, h2, h3, etc.) or a paragraph (p). In the ID box, you have the option of assigning a unique ID to the item which could then be used in CSS or JavaScript to reference the item.

The Class drop-down menu displays any CSS classes which have been defined either within the current HTML page or in a linked external CSS file. These classes or styles can be applied to the selected text simply by choosing one of their names. If an entire paragraph or heading is selected, Dreamweaver will associate the class with the heading or paragraph tag. Thus, your code will read, for example, ‘ p class=”greenpara” ‘. If, on the other hand, only section of a paragraph is selected, Dreamweaver will surround the selected text inside a SPAN element and attach the class to it. Thus, your code will read ‘ span class=”greenpara” ‘.

Below the Class drop-down is the link box, which allows you to convert the selected text into a hyperlink. Dreamweaver offers a number of ways of creating the link. Thus, for example, if the link is to an external website, you can simply enter the entire URL into the link box. If you are linking to one of your own pages, one of the fastest techniques is to use the Point to File button. Simply drag the Point to File icon onto any page listed in your Files panel and Dreamweaver will create a link to it.

The HTML section of the Properties tab also features buttons for Bold and Italic. These cause Dreamweaver to surround the selected text with the strong and em (short for emphasis) elements, respectively. The default rendering for strong is normally bold, in modern browsers, and for em, italic.

The Unordered List icon will convert the selected text into a bulleted list; while Order List converts it into a numbered list. The Text Outdent and Text Indent buttons can be used to promote and demote elements within lists, thus enabling you to create nested lists. If the selected text is not a list item, clicking the Text Indent button converts it into a blockquote element.

Writer conducts Adobe Dreamweaver CS4 training courses and HTML/XHTML training in London and throughout the UK.

To help increase the flow of traffic to your website, nothing beats an autoresponder. These programs can save you a lot of time by answering most of your emails automatically. They can handle customer support questions, product related questions, or wage information about your company and services. If you own an online business ? an autoresponder is something you should definitely invest in.

These days, autoresponders are one of the best tools that you can get for your online business. They are used by some of the biggest and most popular online companies, and for good reason. They simplify your life with your business ? and give you more time to dedicate to other things. If you are planning to submit your website to search engines like Google or Yahoo, you should know that most search engines use autoresponders themselves. Therefore, if you attempt to contact search engines using your autoresponder, theirs will contact yours and you?ll have a never ending reply of emails that will eventually flood both of your email boxes.

A majority of the time, these discussion groups and such will email you updates regarding new information. If you joined with an autoresponder address, your autoresponder will send a response each and every time. This can get very annoying very fast, and a majority of the time you will end up being unsubscribed. In this event, it can be very hard for the administrator or webmaster to determine who is using the autoresponder. Therefore, to make things easier, you should never use your autoresponder with any subscription.

There are some companies out there that completely take advantage of autoresponders. They will use their autoresponder to respond to automated messages, which will automatically subscribe the ?from? address in their mailing list. This is totally the wrong way to use and autoresponder, and those who use it in this manner are displaying a very negative image. Using your auto responder this way will send a negative image rather than positive. Instead of spreading good word about you and your company, people will become upset and spread the word that you should be avoided.

Whenever you use your autoresponder, you should always use courtesy towards your customers and your visitors. Autoresponders are meant to help your company grow, and help you spread information about your services, products, and your company. There are many creative and innovative ways that you can use this tool, providing you do it the right way. Most customers know when they are receiving an autoresponder message, and if you don?t use it the right way they will know it. Although you can always change or add to the preset messages; most contain a unique signature and address that will always be associated with autoresponders.

Autoresponders can help you save a lot of time, although when you use them in the wrong ways, they will eventually get you a negative image. If you know you are using it the wrong way and continue to do so, you will eventually lose a lot of business and your company will suffer a great deal. On the other hand, if you always think in terms of courtesy towards your customers, your autoresponder can help you obtain a lot of business and establish relationships with customers who will always spread the word about your company.

Great information on Webmaster and Business opportunities Tips ? Home business More Webmaster and Home based business opportunities Infos : Webmaster and Business opportunities You are welcome to reprint this article - but get your own unique content version here.

Adobe Dreamweaver CS4 templates are one of the most powerful development aids that the program contains. Basically, a template is a master design which can be copied repeatedly to generate an boundless number of web pages all containing the same shared elements. Unsurprisingly, each time the template generates a new page, the page can be customised and the requisite elements added to it to make it unique. This is achieved by a scheme of locked page regions and editable regions.

When the template is applied to a page, locked regions cannot be modified. (You have to return to the template to alter them.) Only the areas of the page designated as editable regions can have content added to them.

To create an editable region on the template, you simply position the cursor in the desired part of the layout and choose Insert - Template Objects - Editable Region. Enter a name for the region and click OK. One frequent problem experienced by new users of Dreamweaver is the accidental placement of and editable region inside a heading or paragraph tag. This means that when the template is applied to a page, only text can be placed in the editable region. To fix this problem, return to the template, click in the editable region and examine the Tag Selector on the left of the Status bar. Having located the offending tag (usually h1, h2, p, etc.), right-click on it and choose Remove Tag from the context menu.

To associate an existing page with a template, open the page and choose Modify - Templates - Apply Template to Page. Next, double-click on the name of the template to be applied. Strangely enough, there is no Dreamweaver command that enables you to apply a template to several pages at once. However, here are two suggestions for applying a template to multiple pages reasonably quickly.

Begin by selecting multiple pages in the Files panel using the classic techniques of Shift-click or Control-click (Command-click on a Mac). Then, you can right-click one of the selected files and choose Open from the context menu to open all of them. Next, activate the Assets panel (Window - Assets) and click on the Templates button (the second icon from the bottom). Finally, drag the icon of the required template onto each of the open pages. To speed up the process, use Control-Tab to switch from page to page.

To create a brand new page based on a template, choose New from the File menu and, when the New Document window appears, select the Page From Template option, click on the site that contains the template (It should already be highlighted.), then choose the template. To get the most benefit from a template, before clicking the Create button, make sure that the option “Update Page When Template Changes” is activated.

The The Author of this article is a trainer and developer with Macresource Computer Solutions, a UK IT training company offering Adobe Dreamweaver Classes at their central London training centre.

What is it about Adobe Dreamweaver CS4 that makes the program so popular? Dreamweaver is the ideal tool for web designers, coders, and application developers of all levels. Web professionals of every level of experience will find a workspace arrangement to fit their style, or they can create one of their own. The Dreamweaver interface has been updated to fall in line with look and overall functionality of the rest of the Adobe Creative Suite 4 programs. The user interface of Dreamweaver CS4 is both highly efficient and aesthetically pleasing.

Dreamweaver is as useful for build basic sites using web technologies like XHTML, CSS, and JavaScript as well as more complex sites incorporating server-side technologies such as ASP.Net, Coldfulsion and PHP. It also allows you to create web pages driven by a database as well as admin pages for updating and deleting database records, log in pages and server behaviours for restricting access to certain areas of your site.

Dreamweaver is also a very open environment. If you are an experienced web developer and have already web sites using other tools, Dreamweaver opens web pages and web sites that were created in other programs without modifying the code. Dreamweaver allows you to work in Code or Design view or to have a split screen where you can do both. Changes that you make in design view generate clean and standards-compliant code which you can modify in Code view as necessary.

The vast majority of web pages have external files linked to them such as CSS style sheets and JavaScript files. Dreamweaver CS4 makes working with such linked files much easier by giving you access to them from the Related Files toolbar.

Dreamweaver offers some wonderfully easy-to-use features for adding interactivity to your web pages. Dynamic effects like rollovers, pop-up windows and the showing and hiding of page content can be achieved without any programming. Dreamweaver automatically generates the necessary JavaScript for you. Similarly, Adobe’s Spry technology, based on CSS and JavaScript, provides easy access to complex, interactive functionality. Using Spry, you can easily create interactive, drop-down menus, advanced layout elements like tabbed panels and add sophisticated form validation to prevent visitors to your site from submitting forms inappropriate data.

Dreamweaver also incorporates an array of highly sophisticated site management tools. Unless you are mainly concerned with create email newsletters and similar promotional material, your web development will consist of creating and editing pages that work together to form part of a web site. You may also need to work on several such sites simultaneously. Dreamweaver’s site management tools make web site development easy to manage. It has tools for collaboration by a team of people working on the same sites, for synchronising local and live versions of a site, for checking links, and browser compatibility and, naturally it incorporates FTP client software.

Author runs Adobe Dreamweaver CS4 training courses and HTML/XHTML training in London and all over the United Kingdom.

Teaching yourself a new skill is never easy. However, having an individual or a resource to teach you is always a big help. For example, if you’re trying to train yourself or colleagues how to use a sophisticated piece of software like Adobe Dreamweaver, you’ll likely experience better success in your endeavours if you invest in interactive training software or a tutor-led training course. This is because you’ll receive a hands-on training experience, and learn how the program works by using it, rather than reading about how it should work. Knowing the tools of your trade is crucial to your success as a web designer. If you run, or plan to run, a web design or web development business, having employees that are properly trained is essential to the success of your business.

To make sure that your employees are properly trained, you should consider using Adobe Dreamweaver training videos. These will allow everyone to see the program, and learn how it works by demonstration, rather than by just reading and memorizing information. When you have staff members who need to be properly trained, having the right software and training programs can make all the difference. Not everyone prefers to learn from a textbook. In fact, many people simply can’t learn from textbooks at all. They find it difficult to make the connection between written information and the actual use of the program without seeing it in live action.

Adobe Dreamweaver training, whether in the form of a tutor-led course or via the medium of training videos, will ensure that your staff learn what they need to know, by making the program more accessible for them. They will learn how Dreamweaver works by seeing the software in action, which will help them to better understand the logic of the program and remember how to use the product.

Dreamweaver is an essential tool for anyone looking to break into the field of web design or web development. It gives new users a great deal of leverage, allowing them to become productive very quickly. So learning Dreamweaver is a worthwhile exercise. Getting staff trained on Dreamweaver can also save companies thousands of pounds a year in outsourcing. Suddenly, organisations are finding that their own people can start making modifications to their website, start building web pages and, eventually, take over the task of web management and development.

In short, Dreamweaver training will soon pay for itself both in terms of the savings made by companies and the profits made by those offering their web design and development services to other companies.

The author is a training consultant with OnSiteTrainingCourses.Coms, an independent computer training company offering Adobe Dreamweaver Classes at their central London training centre.

Hardly any people would argue that Adobe Dreamweaver is one of the most widely used web development packages around. It has gained its popularity by appealing to users with a broad variety of profiles. Its user-friendly interface appeals to inexperienced users with a small amount know-how of the technologies that underpin web pages. At the same time, it allows skilled web developers to interact with code in a variety of practical ways.

Adobe Dreamweaver enables developers to create dynamic web sites whose content is derived from a data source. Such sites feature server-side pages, written in a scripting language such as PHP, ASP or ASP.Net, which need to be executed on the server. It is therefore vital to denote a testing server as part of the site setup while defining such sites within Dreamweaver.

A Microsoft invention, Active Server Pages (ASP) is one of the easiest such languages to configure. Now referred to as classic ASP to distinguish it from ASP.Net, the current incarnation of Active Server Pages, ASP was initially released in the late nineties and revolutionised the way in which web sites were developed. ASP is designed to run on Windows 2000 server and on Windows XP Professional. It is part of Internet Information Services (IIS), an optional Windows component. Once installed, IIS converts your PC into a web server running a default website located in a folder called “wwwroot” which can be accessed with the web address “localhost/”.

Once ASP is up and running, Adobe Dreamweaver is equipped to start creating dynamic web sites. The features on hand in Dreamweaver for generating the necessary server-side content are to be found in three panels: Databases, Bindings and Server Behaviors. The Databases panel is used to create connections to data sources. In the case of ASP, the most frequent solutions are Microsoft Access and the more powerful Microsoft SQL Server. As soon as a connection to the database is in place, the Bindings panel is used to retrieve data into a recordset. The dialogue box which Adobe Dreamweaver uses for creating recordsets automatically generates fragments of SQL as the user interacts with the related data objects. However, some familiarity with SQL (structured query language) is needed to be able to retrieve specifically the data necessary for a given recordset.

The Server Behaviours panel is where nearly all of the action takes place: It contains a wide variety of pre-built scripts which can be used to add dynamic content to web pages. For example, the Insert Record server behaviour can be used to create a form which adds new records to a database table via a web page or it can be used to create an enquiries sheet which adds every enquiry to an enquires table and afterward takes the visitor to a thank you page.

Author is a developer and trainer with Macresource Computer Solutions, an independent computer training company offering Adobe Dreamweaver training courses at their central London training centre.

If you are trying to build a website, it is important for you to know about the difference between web design and web development. Once you understand how the two processes work hand in hand, you can learn how to utilize both of these effectively to give you a solid and highly functional website which will help you promote your business.

There are many times that people will use the two terms when they are discussing the progress of their website. They may talk about design when they mean development. It will probably not hurt the overall site building process if you use design when you mean development but it is always good if you understand the difference so that you can speak about the process properly. It can also help you to outline where any issues or problems have occurred since the issues surrounding design can be very different than those surrounding development.

Web design has more to do with the way a site looks rather than how it works. All of the things that people look at from the style of type that is used to the color of the type itself is related to web design. As well, the placement of navigational buttons, the textures and colors of page backgrounds and even banners and logo positioning fall into this area of website creation.

You may think that a website that is simple may look plain but often it can look quite professional. When you are undergoing the web design portion of your site building, you should be able to give the designer an idea of what you like and what you do not. Often, a designer will give you mock-ups or samples of what your site will look like. You can then approve a design or refine what the designer is trying to do so that you get a site that you can be truly happy with.

Once the look of the site has been determined, the web development process begins. Unlike web design, the development process involves the programming that allows the site to function. It is important because a badly programmed site can actually load improperly. It may also make it difficult to incorporate items such as a shopping cart to allow the selling of products directly to clients directly from the site.

If you have elements such as a shopping cart, you also need to make sure that this feature will also work well. The last thing you want is for clients to be unable to accomplish the business they need to do using your website. You can see how important proper web development is to the success of your site in general.

Experience is important when it comes to selecting the company that will create your site. If you can, make sure that you have one where there is both a designer and a developer on staff. This means that sound design principals can be used in order to make a beautiful looking site and the development staff can programming things properly so that everything works as it should.

The right company can mean the difference between a site which attracts customers and a site which can actually drive them away. By understanding the importance of both web design and web development you stand a better chance of getting that seamless and visually beautiful website you have always wanted.

Vancouver Web Design is a full service design firm that have both the technical expertise and experience needed to provide the solutions to convert audiences into your customers. Toronto Web Design Company: Acro Media First Canadian Place, 100 King Street West, Suite 5700, Toronto, ON M5X 1C7(416) 915-3136‎ - (877) 763-8844‎

Dreamweaver’s New Related Files facility

The Property Inspector can be used to change the attributes of any element you select on an HTML page. In previous versions of Dreamweaver, changing the attributes of highlighted text would cause the program to create CSS classes with names like “Style1″, “Style2″, etc. in the head area of the current page. This random creation of styles was often responsible for getting new web developers into bad habits.

Whenever you open a file which contains linked files, Dreamweaver displays each of the linked files in the Related Files Bar. To access a related file just click on its name. If you make any changes to a related file and asterisk appears next to its name in the Related Files Bar to remind you to save your changes. When you do, the impact of the changes is immediately visible in the main file.

Photoshop Smart Objects

Spry is Dreamweaver’s Ajax solution which uses JavaScript and CSS to add sophisticated interactivity to your web pages. Dreamweaver CS4 includes some useful additions to its existing range of Spry widgets. The Spry Validation Password widget allows you to specify the minimum and maximum number of characters, numbers, uppercase and special characters which can be included in the password entered. The Spry Validation Confirm widget checks that the entries in two fields are identical and displays a customizable error is they are not. This makes it ideal for creating “Password/Confirm Password” or “Email/Confirm Email” functionality.

Photoshop images are can be inserted using the same techniques as inserting any other image file: Insert - Image; dragging from the Files panel; dragging from the Assets panel; or using the Insert toolbar. A Photoshop-style Optimise window automatically appears and you can choose the settings appropriate for that particular image usually GIF, JPEG or PNG.

Once the image has been imported, an icon is displayed in the upper left of the image indicating that it is a smart object. Also, in the Property Inspector, the location of the original PSD file is shown in a box marked “Original”.

The fact that the image is a smart object means that if we resize it in Dreamweaver, it will automatically be re-optimised and a new version of the image will be generated with the new dimensions. (In previous versions, resizing an image would mean that the browser was responsible for resizing leading to poor image quality.

Related Files

HTML is a notoriously sparse environment which relies on files created with other technologies to add functionality to web pages. Typical examples of related files are server-side includes, CSS, JavaScript and XML. Dreamweaver now includes a feature called “Related Files” which enables you to edit the content of such files, without having to open them separately, and to instantly see the effect of your changes on the main file.

The Photoshop integration which was begun in Dreamweaver CS3 has been enhanced in CS4 to offer via the use of Adobe’s Smart Objects technology. A Photoshop file can be imported directly into Dreamweaver and will automatically come in as a smart object.

New ways to edit CSS

Once the image has been imported, an icon is displayed in the upper left of the image indicating that it is a smart object. Also, in the Property Inspector, the location of the original PSD file is shown in a box marked “Original”.

In Dreamweaver CS4, the Property Inspector contains buttons which allow you to switch between HTML and CSS options. When working in the CSS options, you can now target a specific CSS rule before choosing an attribute or, if necessary, create a new rule.

Author is a developer and trainer with TrainingCompany.Com, a UK IT training company offering Adobe Dreamweaver training courses at their central London training centre.