University of Sunderland CDM105 Session 5

Web Authoring ToolsWeb Authoring Tools

The past and present

A history of web authoring tools and an

overview of Macromedia Dreamweaver

University of Sunderland CDM105 Session 5

In the beginning….In the beginning….

• Text only editors– such as Notepad, emacs or vi on UNIX

servers

• Advantages– Platform independent skills developed by authors– Low level understanding of HTML acquired which is

required for CGI scripting

• Disadvantages– Time consuming to create complex pages– Easy to make mistakes !

University of Sunderland CDM105 Session 5

Next came...Next came...

• Enhanced HTML text editors• e.g. Hotdog, HTMLPro plus many more• The aim of such packages was simply to

reduce the amount of typing required to create Web pages !

• Remained popular for some time due to the easy with which they could be updated to cope with the ever increasing functionality of HTML (i.e. new tags.)

University of Sunderland CDM105 Session 5

Example:Example:Hotdog Pro ver.6 !Hotdog Pro ver.6 !

Latest version available today !

Lots of menus and buttons to add theappropriate HTML to your page

University of Sunderland CDM105 Session 5

Pros and Cons ofPros and Cons ofthis generation of Toolthis generation of Tool

• Advantages– Reduces the likelihood of making

errors while creating pages

• Disadvantages– The use still needs to understand

HTML. So the tool can not be easily used by main stream computer users without some training

University of Sunderland CDM105 Session 5

After which cameAfter which camethe big two...the big two...

• Netscape– Created Netscape Composer

• Microsoft– Created Microsoft FrontPage

Both attempted to implement aninterface nearer to a DTP typeenvironment to create Web Pages

University of Sunderland CDM105 Session 5

Example:Example:

Netscape ComposerNetscape Composer

Note: the HTML is now completely hidden

Similar to early Word Processing packages

University of Sunderland CDM105 Session 5

And finally… And finally…

• Modern day Web development tools– Macromedia Dreamweaver– Adobe GoLive !

• Advantages– Nearer to full DTP packages– Thus, widely used in the media field

• Disadvantage– Large complex packages which take longer to learn– More bugs, inefficient and incompatible HTML source code

generated.

University of Sunderland CDM105 Session 5

DreamweaverDreamweaverMX 2004MX 2004

• The remainder of this lecture and the following sessions will teach you how to use Dreamweaver

• However, Dreamweaver is a complex package with many additional features and it is vital that you also read the key text book

• SAMS Teach Yourself Macromedia Dreamweaver MX 2004– Author: Betsy Bruce

University of Sunderland CDM105 Session 5

Dreamweaver WorkspaceDreamweaver Workspace

Show codePage title

Preview/Debugin Browser

Status bar/Tag Selector

Properties inspector

PanelsInsert bar

University of Sunderland CDM105 Session 5

Properties InspectorsProperties Inspectors

Properties window:Content reflects whichtype of object has beenselected on the page(i.e. graphics or text etc.)

University of Sunderland CDM105 Session 5

PanelsPanelsPanels:These are dockable

University of Sunderland CDM105 Session 5

ChangingChangingobject propertiesobject properties

There is nearly always more than one way to do any taskin Dreamweaver!

Right mouse click onto display a context menu

University of Sunderland CDM105 Session 5

Code ViewCode View

University of Sunderland CDM105 Session 5

Example:Example:Creating a new page Creating a new page (text only)(text only)

• Enter any text onto the page by simply typing !• Modify the page properties

– select Page Properties under the Modify Menu

• Modify the properties of the text using the Properties window– You can also insert a background image at this point

• Save the page and Preview it in the Browser– Select File and Save As..– Use either the Preview option the file menu or the preview

icon the toolbar

University of Sunderland CDM105 Session 5

The Site WindowThe Site WindowUsed to manage your web site

Manage Sites

Expand/Collapse

Button

University of Sunderland CDM105 Session 5

Site DefinitionWizard

Defines : i) Editing Files – local copy

ii) Testing Files – used to test server sided code e.g. PHP, ASP.Net

iii) Sharing Files – used to enable transfer to central share e.g. group project

University of Sunderland CDM105 Session 5

Site Definition Wizard –Step 1

Name the site

University of Sunderland CDM105 Session 5

Select No You may learn about server sidedlanguages in the 2nd year!

Site Definition Wizard –Step 2

University of Sunderland CDM105 Session 5

Select a local folder either A: or E: (USB Memory Pen)

Edit on your local accounti.e. the PC you are working on!

Site Definition Wizard –Step 3

University of Sunderland CDM105 Session 5

Used to inputinformation about

the Web serveryou intend to

host your site on (when it is finished!)

Site Definition Wizard –Step 4

University of Sunderland CDM105 Session 5

Select No –If only one person is working on the site

Site Definition Wizard –Step 5

University of Sunderland CDM105 Session 5

Summary Information

Site Definition Wizard –Step 6

University of Sunderland CDM105 Session 5

How to modify a How to modify a Site DefinitionSite Definition

Defines the homepage of the site - without this

the Site Windowwill not display

a site map

Modify the site information

Example: define a home page

University of Sunderland CDM105 Session 5

Importing and ExportingImporting and Exportinga Site Definitiona Site Definition

You can import and export site definitions to XML files.

This allows you to transfer the site onto a different computer.

Import the XML definition on another computer to transfer the site information file.Note you also need to copy the web files as well (i.e. all HTMLand image files must also becopied onto the new computer)

University of Sunderland CDM105 Session 5

Creating HyperLinksCreating HyperLinksSelect the text and add the URL into Link field on the

Or use the Point to Folder or Browser method

Point to the file in the Site Window

University of Sunderland CDM105 Session 5

Anchor TagsAnchor TagsUsed to make links with a page (normally long pages!)

Create the link using the Properties windowNote: Anchor tags are always preceded by a # character

University of Sunderland CDM105 Session 5

Inserting ImagesInserting ImagesPlace the cursor where you want the image in the document

and select the Insert Image Object

University of Sunderland CDM105 Session 5

RolloversRolloversPlace the cursor where you want the Rollover and select

the Rollover Image Object.

Then fill in the form. Much easier than JavaScript coding !

University of Sunderland CDM105 Session 5

Machine Based TutorialMachine Based Tutorial

• The tutorial session requires you to learn how to define, develop and manage web sites in Dreamweaver.

• Complete the online exercises.

• Ensure you have read hours (7 to 10) of the key text book (Bruce, B - Sams Teach Yourself Dreamweaver MX 2004 in 24 hours) before the next session.