Upload
osborne-long
View
221
Download
0
Embed Size (px)
Citation preview
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
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
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
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
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.