HTML 4: Starting With WYSIWYG

This section of the notes gives an introduction to wysiwyg authoring tools, in particular Dreamweaver as an alternatives means of generating HTML.

WYSIWYG and the Web--some history

The concept of a user-friendly HTML code editor (commonly called WYSIWTG editors–What You See Is What You Get) is as old as the Web itself. The first HTML browser, written by Tim Berners-Lee on a NeXT computer in 1990, was also an editor. It was called, rather confusingly WorldWideWeb (without any spaces). Later it was renamed Nexus in order to save confusion.

As you've seen in Berners-Lee's book 'Weaving the web', the idea that users should be able to edit, as well as view, HTML documents was a founding principle of his World Wide Web, and one that echoes the work of early pioneers such as Vannevar Bush who envisaged users being able to "add marginal notes and comments" and "build(ing) . . trail(s)".

The sophistication of the current state of practice in the web design world might seem a million miles away from the idealistic notion that viewing, editing and publishing documents would be a collaborative experience. However the evidence of that early idealism is there in some of the current tools. The File menu in Netscape has an option Edit Page and even Microsoft's Internet Explorer has an Edit option in the File menu (although it links to Microsoft Word whose 'Convert to HTML' functionality produces very poor code).

Unlike Internet Explorer, Netscape has a built in WYSIWYG editor, 'Composer'. It is a true browser / editor in the way that Berners-Lee's Nexus was.

Industry standards?

Despite what the makers of the various HTML editors might say, there is no such thing as a standard in the industry. Many organisations have developed their own tools for web production, particularly those publishers who are producing large, dynamic sites for whom off-the-shelf solutions are simply not flexible or powerful enough. For example:

• The Times' online publishing department use a sophisticated content management system, 'Story server' provided by Vignette
• BBC News Online developed their own content management system to produce their sites
• Country Life online, as we heard from Carla Passino yesterday, commissioned a specialist software developer to write a content management system some of their online publishing ventures.

For smaller scale projects and as part of the development of large site, WYSIWYG editors can be very useful–in particular:

• As a means of automating tedious processes–such as checking for broken links as well as allowing authors to generate pages more quickly by the automatic generation of markup.
• As a creative tool–allowing the web author to manipulate and position elements on screen quickly and dynamically without having to worry about the code
• By facilitating collaborative working via the use of templates etc.

Of the large number of editors available the most useful for you to learn is probably Macromedia's Dreamweaver, it usually comes out top comparative tests. However do be aware that although it is nearer to being an industry standard than any other product, our industry has a greater variety of production tools in use than, for example, the print business where QuarkExpress dominates (The BBC's large web production department use Claris Homepage).

WYSIWYG : a word of warning

Human error– although there can be considerable advantages to using WYSIWYG editors beware–the code that they produce is not necessarily compliant with the relevant standards or even compatible with all browsers. And even if it is, you may well see better way of marking up a particular set of data: using fewer tags for example so that the page downloads more quickly. Editors have been programmed by human beings making value judgements and as such are bound to be flawed. For example if you create an imbedded or linked style sheet with Dreamweaver and want to apply a single style to multiple HTML tags, you need to add in a comma to correct the code that Dreamweaver produces.

Mixed metaphors. In an attempt to make their products easy to use the designers of HTML editors often come up with 'helpful' metaphors to describe the interface / work area. These can be confusing, especially when the metaphor uses the same name as a term that already has a meaning

Good design – the ease at which HTML pages can be created by WYSIWYG editors can sometimes lead to sloppy design. The time required to hand code an HTML page imposes a certain discipline which may lead to mark-up that is more well formed and standards compliant.

Learning Dreamweaver

Macromedia's Dreamweaver is a powerful and complex piece of software that takes time to master. Macromedia themselves state that before taking their 'Dreamweaver Certification' examination students should have, amongst other things, "at least one year experience using Dreamweaver". Nevertheless it is possible to be up and running quickly and get some useful results.

Dreamweaver can be found on the CSD XP build in Programs > Departmental Software > Informatics > Macromedia > Macromedia Dreamweaver 4 > Dreamweaver 4

It is also available in the Journalism labs.

Making use of the advantages of WYSIWYG editors

As we mentioned earlier one of the major advantages of using WYSIWYG editors like Dreamweaver is their ability to speed up tedious markup / coding processes. One such example is the creation of image maps.

HTML image maps are a useful technique for creating hotspots (of regular or irregular shapes) on images used in a web page. There are two types of image map, client (browser) side and server-side. Client-side image maps are generally preferable because they are:

• Easier to author
• Easier for browsers to execute
• Less demanding on the browser
• Aesthetically more pleasing in Netscape (the destination of the hyperlinks rather than co-ordinates are shown at the bottom of the browser window).

An example of the client-side code for an image map is shown below.

As you can see although the code is not difficult, each hyperlink area requires a number of co-ordinates to specify the shape and dimensions of the area and its position on the image map. Three shapes can be specified:

• rec (rectangle) - where the top left and bottom right co-ordinates are required,
• circle - where the x,y co-ordinates of the centre of the circle and the radius are required ,
• poly (polygon) - where each set of co-ordinates makes up a point in the polygon with lines between each successive point and the last connected to the first.

Although the code is not conceptually difficult it can be tedious to locate the x,y coordinates. Without the help of an editor such as Dreamweaver you'd have to find the co-ordinates of the areas on the image that you want to be hyperlinks by using a package such as Photoshop where you would Goto: window > show info and read of the x,y co-ordinates of any pixel in the image.

In Dreamweaver it's simply a case of loading an image and using the properties window (windows > properties) to generate the image map code (you may need to expand the properties window in order to see the relevant dialogue boxes.)

Practical work

Work your way through the attached handout "Session 1: Introduction to Macromedia Dreamweaver". This tutorial will give you a basic understanding of the Dreamweaver work area and show you how to:

• Define a site
• Create and open HTML documents,
• Add text and insert objects (like tables or images),
• Set document properties (like background colour),
• Create links.

Fourth Assessment

Creating a small site in Dreamweaver using image maps

In http://www.staff.city.ac.uk/~neilt/fwt/week4/ you'll find 6 images (GIF). Using Dreamweaver, create a small website. The first page should contain the image ''menuwhit.gif'. The name of each wine on this image should be clickable (using image maps) and should link to the relevant subpage. The Back button on each subpage should return you to the menu page. Set the Document properties so that the background colour of each page matches as closely as possible the purple colour that forms the background to the images. Each image should be centred horizontally and aligned to the top of the page. Make sure you add some alt text to the HTML page so those users who have images turned off or are visually impaired will see something.

You should make sure that you have created a local site and imported all the pictures into an 'Assets' folder.