If you have ever wanted to build your own website, you might not even know where to start. If you’ve done the research and you’re looking for the simplest program for regular users, it’s likely that you’ve heard of Adobe Dreamweaver. This is one of the simplest web design programs to use, and the fact that it includes an HTML editor just makes it that much more useful. It doesn’t matter if you’re looking to create a website for fun or for business. There’s something for everyone in Adobe Dreamweaver, but before you get stuck into design, you need to learn how to use the program properly.

There are so many different books and tutorials out there offering Adobe Dreamweaver training, but you might not know how to choose the right one. First of all, if you want learning the program to be as simple as using it is, you’ll need to leave the books on the shelf.

Reading is great for other things, but when it comes to learning web design, having that hands-on experience can make or break your success in using the program. Just like children, who learn the alphabet much more quickly by seeing it and writing it, our brains are wired to learn things through example and by being shown. It’s human nature for us prefer “show me” rather than “tell me” when it comes to learning.

With computers, hands-on practice is essential to your understanding of everything you learn. If you can’t see the computer screen, you won’t know the difference between the pointer and the cursor, except that one is shaped like an arrow and the other is a blinking line. It’s all essentially common sense. If you use training software to learn Adobe Dreamweaver, your brain will get to observe how the program works, and duplicate it better. If you just read a book, your brain will likely get stuck between the execution and information stages and this is because it hasn’t seen the program in use before.

Adobe Dreamweaver makes website building extremely easy for just about anyone. Taking the time to invest in training software and tutorials that can show you how to succeed in web development with Dreamweaver will make learning the program just as simple as using it can be. It doesn’t matter if you’re already a web designer, or if you just want to build a basic website. You can learn Adobe Dreamweaver much more easily if you take the time to get involved in a hands-on training method.

The author is a trainer and developer with TrainingCompany.Com, an independent computer training company offering Adobe Dreamweaver Classes at their central London training centre.

CSS enhancements

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. For example, the Spry Tooltip widget allows you to create a tooltip which will appear when the mouse is placed over the specified text or object. Since the tooltip is inside a DIV element, this offers tremendous flexibility as to the appearance of the tooltip. For example, it could include an image or a Flash movie.

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.

Additions to Dreamweaver’s Spry Widgets

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.

Inserting Photoshop Smart Objects

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.

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.

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.

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.

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.

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.

The author is a training consultant with TrainingCompany.Com, a UK IT training company offering Adobe Dreamweaver training courses at their central London training centre.

HTML is a markup language used to create documents designed to be accessed across the World Wide Web using browser software such as Internet Explorer or Firefox. The version of HTML in current use is known as XHTML, a stricter, rationalised version of the original HTML specification. One key thing to note about HTML and XHTML pages is that they describe the content and structure of the page rather than the position and presentation of the elements on the page.

The first significant difference between an HTML and XHTML page is the document type definition. There are several ways in which this specification can be done in Adobe Dreamweaver. One of the most convenient is to go to the Modify menu and choose Page Properties. Here, in the category marked Title/Encoding, one of the options reads Document Type (DTD).

There are quite a few options available in the drop-down menu next to this setting, some relating to HTML version 4 and some to XHTML version 1. These DTD settings specify the rules that the mark-up language must follow so that the browsers can render the content correctly. For any new content you may be creating, the best specification to choose is XHTML 1.0 transitional since it uses the current XHTML specification while allowing backward compatibility with slightly older browsers.

When looking at an HTML page, the structural content is perhaps not immediately apparent. However Dreamweaver provides a number of useful ways of keeping tabs on the structure of your web page content. One of these is known as the Tag Selector. Wherever the cursor is positioned, the HTML code relating to that part of the page is displayed in the bottom left of the page on the Status Bar in an area called the Tag Selector.

When the browser reads the page, the tags surrounding text and other elements communicate to the browser the structural importance of each element. Thus, for example, the H1 tag tells the browser that a piece of text is a major heading, while the H2 tag signifies a sub-heading, and so on. When these tags are displayed in the Tag Selector, you can get an idea of the structure of the page and you can also click on any tag to select the element(s) it contains.

Although the tags tell the browser the structural importance of each element, the HTML page doesn’t contain any information that helps the browser decide how each element should be displayed. This is the role of CSS (Cascading Style Sheets). An XHTML page is pretty similar to an HTML page. However, its syntax is stricter. Let’s take a look at some examples…

XHTML is case sensitive: HTML is not. In XHTML, tags are always lowercase so the H1 tag has to be written h1. In HTML H1 or h1 can be used.

In XHTML, the closing tag is obligatory: in HTML it is permissible to have an opening tag without a closing tag. One such example is a horizontal rule (hr) which creates a dividing line between two sections on a webpage. This element is represented by a single tag, since it can never be used as a container. In XHTML, there is a special syntax for such elements: a single tag which is both an opening and closing tag (hr/). In HTML, the single opening tag is used with no closing tag (hr).

In summary, XHTML is the current version of HTML and this is the standard that you should use for any new projects. However, existing projects that you may inherit may well contain HTML rather the XHTML. Therefore, you should be aware of both. Remember also that HTML and XHTML describe only the structure of web page content: neither of them should contain information regarding the presentation and display of this content. The display and presentation of web content should be done using CSS.

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.

Working for a company that runs Dreamweaver training courses, I am increasingly finding that there is no longer a typical user of this great web development program. Dreamweaver users now seem to come from all different types of company and from all walks of life: private individuals, financial people, marketing people, people in the health service, academicians It seems everyone needs to learn the basics of web development nowadays.

Just as the use of a graphical interface has changed computing, making it more user-friendly, the use of Adobe Dreamweaver renders people with limited understanding of web construction capable of putting together a quality site. It is also an excellent platform for learning how web sites should be put together. For example, when you create a new page, Dreamweaver lets you choose from a series of standard layouts based on CSS (Cascading Style Sheets), the recommended specification for creating web pages. The code produced by Dreamweaver contains useful comments explaining how the page layout works.

Many small organisations have already learned to rely on Adobe Dreamweaver to build and manage their own website, creating and modifying pages and then uploading them via FTP to make them live and available to the public. Those organisations with a more urgent need to establish a web presence may still turn to a professional web development companies to get them started and then use Adobe Dreamweaver when changes need to be made, often saving themselves a small fortune.

Another way that companies can save a few bucks is by commissioning web designers to create Dreamweaver templates and then using these templates in-house to build the website themselves. This also has the benefit of allowing organizations to maintain control of their site from the outset.

Although Dreamweaver is simple to use, it is unlikely that the average user can simple load it onto their machine and start using it effectively. Most people will benefit from having some Dreamweaver training. This will show them which are the essential aspects of the program and the process of creating a basic site and making it live. A good Dreamweaver training course will also give users an overview of the may web technologies, the underlying code, which Dreamweaver uses as the users visually create their web pages.

One of the best ways to make a site useful for visitors is making it interactive, allowing users to search for the specific content that they want. By attending an advanced Dreamweaver training course, staff within an organization can learn to add database-driven content to their website using technologies such as ASP, PHP or ColdFusion. And, here again, Dreamweaver does the lion’s share of the work, allowing users to create sophisticated search and results pages using the same simply point-and-click and drag-and-drop techniques used to create basic content.

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.

JavaScript is a simple, client-side scripting language which enables you to add exciting and interesting functionality to your HTML pages. It is built in to most web browsers and, although it can be deactivated, most people will have it enabled within their browser. JavaScript’s uses includes the validation of entries within an HTML form and the detection of browser versions and presence or absence of plug-ins. Dreamweaver’s implementation of JavaScript centres on the use of what it calls “behaviors”.

A behavior is simply a pre-written JavaScript function which can be triggered by a given event. To make the Behaviors window visible, choose Behaviors from the Window menu. Next select the element to which you want to attach the JavaScript. Finally, choose one of the available behaviors from the menu in Behaviors window. (The behaviors which are available will depend on the item you have highlighted.)

Whenever you attach a behavior to a web page element, Dreamweaver attempts to guess what the event which should trigger the JavaScript (mouse click, rollover, etc.). If Dreamweaver fails to assign the event that you actually want, simply choose a different event from the drop-down menu next to the event name.

Dreamweaver has a wide selection of behaviors. However, they fall into four main categories: images, windows and alerts, forms and form fields and CSS. To see how behaviors work, let us look at some examples of some behaviors in each of those categories.

Perhaps the most frequently encountered JavaScript function is one that changes the appearance of an image when the mouse passes over it. Dreamweaver creates this functionality with the “Swap Image” behavior. You can also add this behavior automatically by choosing Insert – Image Objects – Rollover Image. Dreamweaver automatically adds a second behavior/function called “Restore Image” which changes the image back to the original when the mouse leaves the image.

As far as alerts and windows behaviors is concerned, as well as the simple “Pop-up Message”, which just causes a system alert box to appear, Dreamweaver also offers the more sophisticated “Open Browser Window”. This Dreamweaver behavior allows you to create a pop-up window of any specified dimension and allows you to choose the attributes of the window: the HTML file it displays, the presence or absence of the title bar, scroll bars, etc.

The most important and useful form-handling behavior is “Validate Form”. This can be triggered either on submission of the form (“onSubmit”) or when a given text field loses focus (“onBlur”). When you assign the behavior, you choose the type of validation you wish to perform: ensuring that the field has not been left blank, contains a valid email address, contains a number or contains a number between two specific values.

An example of a behavior which manipulates CSS attributes is “Show/Hide Elements”. This enables you to control the visibility of the content inside an HTML element, such as a DIV, heading or paragraph, based on user action. So, for example, when if you have a picture of a product, you can create DIVs with information on various aspects of the product and have the appropriate DIV content become visible as the user mouses over various parts of the product image.

Each behavior that you choose will create one or more JavaScript functions within the head area of your page. Part of the process of optimising your website (both in terms of accessibility and search engine compatibility) is to transfer this code to an external JavaScript file and then link the web page to the JavaScript file. To do this, you need to be in Code view and locate the function(s) generated by the behavior(s) you have used on your page. Cut all of the code between the opening and closing SCRIPT tags and place it in a text file which needs to be saved with a .js extension. Next, enter an src attribute inside the opening SCRIPT tag, for example ‘SCRIPT src=”scripts.js”‘.

You can find out more about JavaScript training courses, visit Macresource Computer Training, a UK IT training company offering JavaScript training courses at their central London training centre.

categories: Dreamweaver,Adobe Dreamweaver CS3,JavaScript,behaviors,web development,website accessibility,computers and the internet,computer software

Cascading Style Sheets (CSS) has become as pivotal a technology in the building of websites as HTML. Originally, CSS was mainly used for defining the appearance of text (font, size, colour, etc.). However, with the improvement of browser compatibility with the CSS specification, CSS is now the recommended method of controlling all aspects of the presentation of HTML documents within the browser window.

Adobe Dreamweaver is a very widely used platform for developing web sites and web content and, although used by experienced developers, is also widely used by non-specialists for whom Dreamweaver’s user-friendly visual interface takes the pain out of web site creation. The way in which Dreamweaver implements CSS is very important for the casual user, since it will influence the kind of sites they end up producing.

Dreamweaver CS3 is the first version of the program which assumes that the user will want to use CSS to control the layout of their web pages. To assist inexperienced and would-be web developers, each time a new page is created, the program allows the user to choose allocate a preset CSS layout to the page. There are about 30 such layouts and they come in single, double and three column varieties.

CSS page layout is based in the DIV element, an HTML container which can be used to hold an arbitrary amount of web content. The CSS rules control the appearance and positioning of DIVs on the page. Dreamweaver CS3’s preset CSS layouts create a series of DIVs containing placeholder text and basic formatting. The placeholder text, as well as the code underlying the page, both contain useful explanations of how the page has been constructed and a few tips on how to personalise them.

CSS works most efficiently when you can place all of your CSS code in one external file and link that file to each of your HTML pages. Dreamweaver CS3 still does not make it easy for inexperienced users to create CSS-based pages in this way. If the user creates ten web pages based on Dreamweaver’s preset CSS designs, each will have its own code embedded within the page itself. There is, however, a great feature for moving embedded code across to an external CSS file. You just select a series of CSS definitions, right-click and choose “Move CSS Rules” which is available in the “CSS Styles” section of the context menu.

Although this ability to move CSS around is really great, it’s not something that beginners will necessarily think of doing. It points to the fact that Dreamweaver could still do with a few enhancements to its implementation of CSS.

Another area where Dreamweaver still handles CSS inefficiently is the way in which it generates CSS class styles with names like “style1″, “style2″, etc. whenever the user applies attributes like font, size or colour to highlighted text. This must be really confusing for beginners and can easily be solved by simply removing these “raw” attributes and replacing them with CSS-friendly options.

The writer of this article is a developer and trainer with TrainingCompany.Com, a UK IT training company offering Adobe Dreamweaver training courses in London and throughout the UK.