Software & Development Tips

New Additions to Spry Widgets

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.

Brand new 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.

Other new widgets include the Spry Tooltip widget which 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.

Inserting Photoshop Smart Objects

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.

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.

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.

Improvements in working with CSS

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, an independent computer training company offering Adobe Dreamweaver training courses in London and throughout the UK.

HTML is a markup language used to create web pages 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 referred to as XHTML, a stricter, rationalised version of the original HTML specification. One important fact 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 difference between an HTML and XHTML page is the document type definition. There are several ways in which this specification can be made in Dreamweaver. One of the simplest is to go to the Modify menu and choose Page Properties. Here, in the Title/Encoding category, 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 may not be immediately apparent. However Dreamweaver provides a number of useful tools for keeping tabs on the structure of your web page content. One of these is called 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 known as 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.

The tags tell the browser the structural importance of each element but the page doesn’t contain any information that helps the browser decide how each element should be displayed. This job is done by CSS (Cascading Style Sheets). An XHTML page is still basically an HTML page. However, the syntax used is stricter.

One example of this difference is that XHTML is case sensitive while HTML is not. In XHTML, all tags are 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 Classes at their central London training centre.

XML schema definition languages are derived from the recommendations of the World Wide Web Consortium (W3C). They use XML 1.0 syntax and their role is to explicit describe the structure of XML documents and constrain the data which they may contain. They offer a distinct improvement on the more limited schema features offered by the Document Type Definition (DTD) recommendation which formed part of the original XML specification released in 1998. The most widely used schema language is the one defined by the W3C in 2001: W3C XML Schema. However, there are alternatives, such as RELAX NG and Schematron.

Schema documents are the more sophisticated successors to DTDs and overcome some key limitations associated with them. Firstly, DTDs do not support data types. Secondly, DTDs do not support namespaces. Thirdly, DTDs do not allow developers to accurately define the number of permitted occurrences of elements within their parent element.

XML schema documents describe the structure of an XML instance document by defining what each element must or may contain. An element is limited by its type. For example, an element of complex type can contain child elements and attributes, whereas a simple-type element can only contain text. The diagram below gives a first look at the types of XML Schema elements.

Three main purposes are fulfilled by schema documents. Firstly, they can be used to validate XML documents. Secondly, they can be used as a dictionary or grammar for the creation of a given class of XML document. And, thirdly, they can be used to provide documentation for XML documents.

Each XML schema is itself an XML document and contains definitions of all elements and attributes permitted in a given class of XML documents. The schema also specifies the structure or hierarchy to which elements must adhere and the type of content each particular element may contain. Elements may be of the simple or complex type. Complex type elements may contain child elements as well as attributes. Simple type element may only contain data. XML documents using a particular schema are referred to as instances of the schema. An XML instance that correctly adheres to its associated schema is said to be valid.

Validation is usually the principal role of schema documents. Validation offers many benefits. It ensures the consistency of data within a document. It ensures that data has the right structure and internal hierarchy. It ensures that data within the document structure is of the correct type. It allows us to receive data from multiple sources.

Most XML documents are created by programs and scripts designed to extract information held in databases and transform it into XML. However, it is also possible for human beings to create XML documents. Schemas can be used during this process to assist in the document creation process. XML schemas also provide a mechanism for documenting XML documents and form an important part of the specification of XML vocabularies.

The The writer of this article is a training consultant with Macresource Computer Training, an independent computer training company offering XML Classes in London and throughout the UK.

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 organisations can save money is by hiring web designers to create Dreamweaver templates and then basing their website on these templates in-house. This also has the benefit of giving organizations control of their site right from the outset.

Although Dreamweaver is pretty easy to use, it is not likely that many users can simple load it onto their machine and start using it like a pro. Most people will benefit from having some form of Dreamweaver training. This will allow them to learn the essential aspects of the program and the process of creating basic sites and making them live. An effective Dreamweaver training course will also give users an insight into the underlying web technologies and the code which Dreamweaver generates as the users create their pages using visual techniques.

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.

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

Extensible Mark-up Language (XML) has very quickly established itself as a viable technology with a huge range of real-world applications. One of the main reasons for its importance and wide acceptance is the fact that it offers a working solution to one of the key problems faced by software developers and computer users alike: the exchange of incompatible data. Each software environment creates its own unique type of binary file which only it can understand. When data is exported in XML format, it becomes a known quantity, independent of the environment in which it was originated.

Adobe’s PDF format is another example of a platform-independent data format which has gained wide acceptance. When a document is saved as a PDF file, its format is set in stone, it can viewed and printed with its layout and formatting intact, without the need for the software which created the original file. However, whereas the PDF format concerns itself primarily with the presenting information, XML is used to describe and encapsulate the information itself.

Though XML itself is still fairly new, the idea behind it is not. Back in the 1970s, Standard Generalized Markup Language (SGML) was developed in an attempt to create an application-independent method of describing data. SGML is a text-based language which uses the concept of adding mark-up to data which describes the data itself. An SGML document contains both data and a set of rules defining the structure of the data. SGML is a pretty complex language and, unlike XML, has never become mainstream. In the early 1990s, SGML was used to develop HTML and in the late 1990s, SGML was also used as the basis for the development of XML. So, basically, XML is a restricted form of SGML.

XML has already proved itself to be an excellent medium for storing, describing and transporting data, particularly over the web. It offers developers flexibility, clarity and simplicity. An XML document resembles an HTML document and consists of the same human-readable tags. However, the tags used to markup an HTML document are predetermined: only a fixed set of tags can legitimately be used. XML allows you to create your own markup language and define the tags which are legitimate for your data. It does this via the mechanism of a schema document, which can itself be an XML document. The schema document defines the vocabulary and grammar which may be used within the XML document containing your data.

The fact that, when creating and generating XML documents, you can invent all the rules, means that you never have to force your data into a container which was not designed to hold it. You design tags which reflect the nature of your data; you create a schema document which defines the hierarchical structure of your information; and you specify the type of information each element within your document is permitted to contain. In short, if you end up with an XML documents which is unsuitable for holding your information, you have only yourself to blame!

The writer of this article is part of an organisation that offers web design training courses in London and throughout the UK.

Extensible Stylesheet Language (XSL) is an XML technology which is used to transform XML data. XML file can be used to set the ground-rules for a given body of data and to describe the data itself. XSL allows us to take that input XML data and convert it into information which can be displayed in a web browser window or opened with a text editor. It can also be used to create an XML file which is a modified version of an input XML file.

When displaying elements in a browser window, the XSL elements which enable looping through an XML tree and decision-making really come into their own. One of the key methods used in XSL for looping through XML elements is the “For-each” element. This uses the “select” attribute to specify which element is to be targeted in the loop. The “For-each” element has both an opening and a closing tag and any lines of code placed between the opening and closing tags will be repeated each time the element specified in the “select” attribute is encountered in the XML file.

For example, let’s say we have an input XML file containing a list of companies and the addresses of their websites. Let’s also say that the element which we will be targeting in the XSL “For-each” statement is called “company” and that, for each company element, we have a “name”, “telephone” and “website” element. Before beginning our “For-each” loop, we could output the opening tag of an HTML “ul” element (an unordered or bulleted list).

Inside the “For-each” loop, we could output an HTML “li” element and, between its opening and closing tags, output the contents of the “name” and “telephone” elements from the XML file. The data in the “website” element in the input XML could be used to convert the “name” into a clickable link.

As to the appearance of the data in the resulting HTML output, this would be controlled by a linked CSS file. CSS can be used to format the output in any way we desire, so our bulleted list can take on pretty much any appearance we desire.

The The writer of this article is a trainer and developer with Macresource Computer Training, an independent computer training company offering XML, XSLT, XPATH, XQuery and XSL-FO training courses in London and throughout the UK.

JavaScript is a well-established scripting language which creates code that can execute both an HTML page loads and after it has loaded. It is very efficient since it can run independently on the computers of the visitors to your web site. Thus freeing up your server to do other things. It is so widely used on web sites that, though it is possible for a user to disable JavaScript within their browser settings, most people will need to leave it active if they are to interact with the sites they visit. Adobe Dreamweaver allows web developers to add JavaScript to their pages by using what it refers to as “behaviors”.

Behaviors are editable Dreamweaver resources which generate one or more JavaScript functions. Each behavior needs to be associated with an element on your web page. After highlighting the element, you click on the Window menu and choose Behaviors. In the top left of the Behaviors window, you then click on the Add Behavior button an icon which looks like a plus sign ( ). Choose on of the available behaviors to associate it with the highlighted element.

Dreamweaver attempts to guess the event that you would like to trigger the behavior such as an onMouseOver, onClick or OnDoubleClick. If it guesses the wrong event, simply choose the correct event from the drop-down menu next to the name of the event.

Dreamweaver contains several types of JavaScript behaviors. Some relate to images, others display windows and messages, others can be used on forms and form fields and still others can be used to manipulate CSS attributes. To get a flavour of how behaviors work, let us examine a behavior in each of the above categories.

There was a time when almost every website featured the rollover effect on its navigation buttons. With the development of CSS, this is no longer the case. However, the facility of having an image change appearance when the mouse passes over it is still useful. Dreamweaver achieves this effect with the “Swap Image” behavior which can either be added to an image or can be created automatically by inserting a rollover image (Insert – Image Objects – Rollover Image) rather than a static one.

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 key behavior relating to forms is called “Validate Form”. It performs simple checks on any text field within a given form. (It ignores any fields other than text fields.) To use it, select a field (the validation will then occur when the user leaves the field) or select the entire form (the validation will then occur when the form is submitted). Choose “Validate Form” form the Behaviors panel menu and specify the type of validation you wish to perform, for example, ensuring that a field has not been left blank.

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.

If you have used several JavaScript behaviors on a page, you may find that the amount of code generated by Dreamweaver becomes quite significant. It is therefore usually a good idea to place all of this code in an external JavaScript file and then link this file to your page. To do this, click on the “Code” button in the top left of the page and locate the SCRIPT tags which contain the JavaScript. Select all of the code between the SCRIPT tags and cut it to the clipboard. Next, create a blank file with the file extension .js and paste all of the code inside it. Finally, to link your page to the .js file, position your cursor inside the opening SCRIPT tag and type src = “myfile.js” substituting the name of your JavaScript file for “myfile.js”.

The author of this article runs Adobe Dreamweaver CS4 training courses and HTML/XHTML training throughout the UK.

Because of its ability to separate design from content, Cascading Style Sheets (CSS) has become an extremely important technology in web development. A single CSS document can contain information regarding the position of elements on all the pages in a web site as well as style information such as font, sizes and colours. In terms of building websites, CSS definitely represents the future.

The range of computer users who have some involvement in building web pages and web sites is vast and a good many of these users choose Dreamweaver as the software tool that helps them create the web content they need without needing to become an expert on underlying technologies such as CSS. Dreamweaver CS3 includes better support for Cascading Style Sheets than previous versions. However, there is still room for improvement.

Previous versions of Dreamweaver assumed that most users would be using tables to control the layout of their web pages. Dreamweaver CS3 is the first version of the program which encourages users to create CSS-based web page layouts. When the users create a new web page, they are offered a series of CSS layouts, on which they can base the new page, consisting of single, double and three column designs.

Pages created using CSS rely heavily on the use of the HTML DIV element, a multipurpose container of web content. Choosing one of the Dreamweaver CSS presets creates a page containing a series of DIV elements complete with placeholder text and the CSS code necessary to control the position and dimension of the DIVs. The placeholder text and HTML code both contain brief explanations of the techniques used and advice on how to customise these basic pages for your own purposes.

The CSS code for pages created using Dreamweaver’s preset layouts is embedded in the page itself. If a user creates a series of such pages, each one will have its own CSS code making updating very time-consuming. It is far more efficient to have all of the CSS code in one external file and link each page to this one file. At present, Dreamweaver doesn’t really make this clear to new users. However, it does have an excellent feature for moving embedded CSS code into an external file. You simply select all of the CSS definitions you wish to externalise then choose Text – CSS Styles – Move CSS Rules.

Moving CSS code into an external file is not something a beginner would be expected to think of doing and is not something that Dreamweaver recommends to new users. So, in spite of the improvements, some familiarity with CSS is still required to get Dreamweaver to handle CSS efficiently.

It is also disappointing that Dreamweaver still automatically generates CSS styles called “style1″, etc. each time the user applies a font or colour to selected text. Surely it would be easier to simply remove these basic attributes and just let the user either apply a style to the selection or, if no styles exist, create a new one. Perhaps this will be introduced in the next release of this excellent program.

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

Adobe Dreamweaver is a widely-used web development tool aimed at inexperienced and experienced users alike. It allows developers to work visually and behind the scenes, it uses standard web technologies such as HTML CSS and JavaScript. Web pages can be introduced into a Dreamweaver site at any time without the danger of the program modifying your code. In the same way, pages that you create in Dreamweaver can be taken out of the Dreamweaver environment and used elsewhere.

The program does not rely on its own unque solutions which will only work in the Dreamweaver environment. Although Dreamweaver is not necessarily the best environment for creating all types of website, it is not an environment which one easily outgrows. It can be used both for creating basic, static content consisting of client side pages as well as more sophisticated dynamic content including server side pages. In other words, it is suitable for developing the content found on the vast majority of websites. So, let’s examine this content in more detail.

Most web sites are hosted on web servers run by specialist hosting companies. A large website may have a dedicated server or even servers, whereas most typical websites will be sharing space on a server with other sites. Visitors to a website are sometimes called clients.

Clients gain access to the content on web servers using a variety of different operating systems and different browsers. They normally find this content either by clicking on links from search engines and other locations or by simply typing a URL into the address bar of their browser.

The content that clients access on websites can be divided into two main categories: client-side and server-side. The term client-side refers to web content which is compatible with the user’s browser, material which the browser software can actually open, display or execute (in the case of scripts).

The main element in client-side content is HTML, or as it’s known in its current incarnation, XHTML; a stricter and more consistent version of the original HTML specification. HTML is a fairly simple markup language which is used to describe the content of web pages for the benefit of the client’s browser. CSS and JavaScript are used in close conjunction with HTML.

CSS stands for Cascading Style Sheets and is used for describing the layout and presentation of web content. JavaScript is an easy-to-learn scripting language which can be used to add interactivity to web pages. For example, when someone is filling out a form on a website and information entered into a field is inappropriate, JavaScript can be used to notify them that the content must be changed.

All modern web browsers are fully capable of understanding XHTML, CSS and JavaScript content. With the addition of extra software known as plug-ins, other technologies can be added to web pages. Two of the most popular are Flash and Adobe Acrobat PDF files. All of this content then is fully compatible with the client’s browser; hence the term client-side content.

The author is a training consultant with Macresource Computer Solutions, an independent computer training company offering Adobe Dreamweaver training courses in London and throughout the UK.

Core XML

XML seems to be popping up everywhere nowadays; but what exactly is it? Extensible Markup Language (XML) is a specification by the Worldwide Web Consortium (W3C) for creating markup languages such as XHTML. The XML specification is being used in an increasingly wide range of applications for exchanging data between different environments, platforms and media. One of the main reasons for its rapidly growing popularity is its flexibility. It allows developers to define their own hierarchy of tags which reflect the structure of their data. In addition to the core XML specification, a number of other technologies have been developed for working with XML projects.

XML Schema

Closely linked with XML documents, we have XML schema. XML schema documents and schema languages are used to validate and document XML markup languages. They allow developers to explicitly lay down the syntactical and structural ground rules for particular classes of XML documents. A number of schema languages have been developed but perhaps the two most important are those defined by the W3C: Document Type Definition (DTD) which was built into the original XML specification and the more XML schema language developed a few years later.

XSL, XSLT AND XSL-FO

Extensible Stylesheet language (XSL) comprises two parts: XSL Transformations (XSLT) and XSL Formatting Objects (XSL-FO). XSLT stylesheets are essentially XML documents which transform a given class of XML document (referred to as the source tree) into a different class of XML document (referred to as the output tree). XSLT documents can be compared to CSS documents but are much more powerful. XSL-FO documents are written in XML and control the formatting layout in an output document in a very detailed manner. It allows the definition of layout masters from which are derived page sequences for generating the final document pages. Flow objects are then used to bind data to the various regions of pages.

XPath, XLink, XPointer and XQuery

XPath, XML Linking Language (XLink), and XML Pointer Language (XPointer) are all provide solutions for linking and addressing when working with XML documents. XPath is a declarative language which uses expressions that resemble the directory paths used to describe locations in computer file systems. XPath expressions are used in XSLT documents to address specific nodes within the hierarchy of the XML source document.

XLink is essentially a method of creating hyperlinks within XML documents. It overcomes some of the limitations of the hyperlinks used in XHTML, such as the fact that each hyperlink has only one source and one destination. XPointer allows you to create links which point to very specific points within the hierarchy of an XML document by including XPath expressions in its syntax. XQuery is designed to query XML data in much the same way that SQL is used to query databases. It uses XPath expressions to extract elements and attributes within the structure of an XML document.

The author is a training consultant with Macresource Computer Training, an independent computer training company offering XML training courses in London and throughout the UK.