1. Web Content Management System Website Maintenance Demonstration Introduction to Macromedia Contribute Jamie Uprichard

2. 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

3. 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’

4. 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

5. Website Maintenance Demonstration Screen Layout (Browser Mode)

6. Website Maintenance Demonstration Screen Layout (Edit Mode)

7. Website Maintenance Demonstration Screen Layout (Comparison) Browser Mode Edit Mode

8. 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

9. 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

10. Website Maintenance Demonstration Change An Image Insert Image Dialog Box

11. 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

12. Website Maintenance Demonstration Add A Link Insert Link Dialog Box

13. Website Maintenance Demonstration Insert A Table Row In Edit Mode, position cursor in current row Select Table > Insert > Insert Row Above/ Insert Row Below

14. Website Maintenance Demonstration Delete A Table Row In Edit Mode, position cursor in row to be deleted Select Table > Delete > Row

15. 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

16. Website Maintenance Demonstration Add/ Change Email Link Insert Link Dialog Box

17. Website Maintenance Demonstration Format Text Enter edit mode Highlight text to be formatted Select the Format Menu Bold, Underline, Italic Style, Font Size, Colour

18. Website Maintenance Demonstration Note On Templates Web sites constructed using Macromedia Dreamweaver templates Facilitates updates Site administrator has set editable areas Tabs Locked Areas