1. University of Sunderland CDM105 Session 5 Web Authoring Tools The past and present A history of web authoring tools and an overview of Macromedia Dreamweaver

2. University of Sunderland CDM105 Session 5 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 !

3. University of Sunderland CDM105 Session 5 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.)

4. University of Sunderland CDM105 Session 5 Example: Hotdog Pro ver.6 ! Latest version available today ! Lots of menus and buttons to add the appropriate HTML to your page

5. University of Sunderland CDM105 Session 5 Pros and Cons of this 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

6. University of Sunderland CDM105 Session 5 After which came the big two... Netscape –Created Netscape Composer Microsoft –Created Microsoft FrontPage Both attempted to implement an interface nearer to a DTP type environment to create Web Pages

7. University of Sunderland CDM105 Session 5 Example: Netscape Composer Note: the HTML is now completely hidden Similar to early Word Processing packages

8. University of Sunderland CDM105 Session 5 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.

9. University of Sunderland CDM105 Session 5 Dreamweaver MX 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

10. University of Sunderland CDM105 Session 5 Dreamweaver Workspace Show code Page title Preview/Debug in Browser Status bar/Tag Selector Properties inspector Panels Insert bar

11. University of Sunderland CDM105 Session 5 Properties Inspectors Properties window: Content reflects which type of object has been selected on the page (i.e. graphics or text etc.)

12. University of Sunderland CDM105 Session 5 Panels Panels: These are dockable

13. University of Sunderland CDM105 Session 5 Changing object properties There is nearly always more than one way to do any task in Dreamweaver! Right mouse click on to display a context menu

14. University of Sunderland CDM105 Session 5 Code View

15. University of Sunderland CDM105 Session 5 Example: Creating a new page (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

16. University of Sunderland CDM105 Session 5 The Site Window Used to manage your web site Manage Sites Expand/ Collapse Button

17. University of Sunderland CDM105 Session 5 Site Definition Wizard 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

18. University of Sunderland CDM105 Session 5 Site Definition Wizard – Step 1 Name the site

19. University of Sunderland CDM105 Session 5 Select No You may learn about server sided languages in the 2nd year! Site Definition Wizard – Step 2

20. University of Sunderland CDM105 Session 5 Select a local folder either A: or E: (USB Memory Pen) Edit on your local account i.e. the PC you are working on! Site Definition Wizard – Step 3

21. University of Sunderland CDM105 Session 5 Used to input information about the Web server you intend to host your site on (when it is finished!) Site Definition Wizard – Step 4

22. University of Sunderland CDM105 Session 5 Select No – If only one person is working on the site Site Definition Wizard – Step 5

23. University of Sunderland CDM105 Session 5 Summary Information Site Definition Wizard – Step 6

24. University of Sunderland CDM105 Session 5 How to modify a Site Definition Defines the home page of the site - without this the Site Window will not display a site map Modify the site information Example: define a home page

25. University of Sunderland CDM105 Session 5 Importing and Exporting a 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 HTML and image files must also be copied onto the new computer)

26. University of Sunderland CDM105 Session 5 Creating HyperLinks Select 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

27. University of Sunderland CDM105 Session 5 Anchor Tags Used to make links with a page (normally long pages!) Create the link using the Properties window Note: Anchor tags are always preceded by a # character

28. University of Sunderland CDM105 Session 5 Inserting Images Place the cursor where you want the image in the document and select the Insert Image Object

29. University of Sunderland CDM105 Session 5 Rollovers Place the cursor where you want the Rollover and select the Rollover Image Object. Then fill in the form. Much easier than JavaScript coding !

30. University of Sunderland CDM105 Session 5 Machine 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.