Web Content Management System

Website Maintenance Demonstration

Introduction to Macromedia Contribute

Jamie Uprichard

Website Maintenance Demonstration

Macromedia Contribute

Web Content Management system Need to keep web content up-to-date Enables users to update web-sites without

having technical skills Browsing the Web Word Processing

Website Maintenance Demonstration

3-Step Cycle

Create a connection to your website Connection Key/ FTP

1. Browse to a page 2. Edit your content 3. Publish your changes

‘Browse - Edit - Publish Cycle’

Website Maintenance Demonstration

Screen Layout

Browser/ Editor Toolbar

Browser Toolbar (Navigation) ‘Edit Page’ button, Address Bar, Back, Forward

Editor Toolbar ‘Publish’ button, Save, Format, File menus

Side Panel Pages panel ‘How Do I’ panel

Website Maintenance Demonstration

Screen Layout (Browser Mode)

Website Maintenance Demonstration

Screen Layout (Edit Mode)

Website Maintenance Demonstration

Screen Layout (Comparison) Browser Mode

Edit Mode

Website Maintenance Demonstration

Edit Text

Browse to desired web page

Enter Edit Mode Click ‘Edit Page’ button

Make changes Save by clicking

‘Publish’ button Confirmation Dialog

Box

Website Maintenance Demonstration

Change An Image

Enter Edit Mode Select Image to be

replaced Insert > Image / ‘Image’

button My Computer My Website

Locate image file

Website Maintenance Demonstration

Change An Image

Insert Image Dialog Box

Website Maintenance Demonstration

Add A Link

Enter Edit Mode Highlight Text OR Image to be used as link Choose Insert > Link / ‘Link’ button Enter web address for Link

Website Maintenance Demonstration

Add A Link

Insert Link Dialog Box

Website Maintenance Demonstration

Insert A Table Row

In Edit Mode, position cursor in current row Select Table > Insert > Insert Row Above/

Insert Row Below

Website Maintenance Demonstration

Delete A Table Row

In Edit Mode, position cursor in row to be deleted

Select Table > Delete > Row

Website Maintenance Demonstration

Add/ Change Email Link

In Edit Mode, highlight text to be converted into an email link

Select Insert > Link > Email Address / Click Link button

Website Maintenance Demonstration

Add/ Change Email Link

Insert Link Dialog Box

Website Maintenance Demonstration

Format Text

Enter edit mode Highlight text to be

formatted Select the Format Menu

Bold, Underline, Italic Style, Font Size, Colour

Website Maintenance Demonstration

Note On Templates

Web sites constructed using Macromedia Dreamweaver templates Facilitates updates

Site administrator has set editable areas Tabs Locked Areas