2. Committed to Shaping the Next Generation of IT Experts. Essentials For Design Dreamweaver Level One Julian Rickards Project 2 Building Your First Web Site

3. Copyright (c) 2004 Prentice-Hall. All rights reserved. 2 Objectives Commercial Web site Plan – outlines, storyboards Define a site and create its folders Build basic Web pages Design and code views Simple text formatting Existing page as a template Create links

4. Copyright (c) 2004 Prentice-Hall. All rights reserved. 3 Visual Summary Advanced Tab Basic Tab

5. Copyright (c) 2004 Prentice-Hall. All rights reserved. 4 New Document Dialog Box Category Page type

6. Copyright (c) 2004 Prentice-Hall. All rights reserved. 5 Adding Content Document window – split view Property inspector

7. Copyright (c) 2004 Prentice-Hall. All rights reserved. 6 Browser Check Preview  Design  Source code

8. Copyright (c) 2004 Prentice-Hall. All rights reserved. 7 Exploring The Folder Structure Of A Web Site Organization Root folder Home page Windows and Mac FFolders Unix/Linux DDirectories

9. 8 Browser Information http://www.snapfiles.com/

10. Copyright (c) 2004 Prentice-Hall. All rights reserved. 9 Folder Structure In Address Window

11. Copyright (c) 2004 Prentice-Hall. All rights reserved. 10 Planning And Organizing A Web Site Organizing the content Outlining the site Creating a couple of pages Adding some graphics and links Practice on scratch paper

12. Copyright (c) 2004 Prentice-Hall. All rights reserved. 11 Create A Storyboard Story content Landscape view Outline Navigation system

13. Copyright (c) 2004 Prentice-Hall. All rights reserved. 12 Navigation System Exercise Carvers Store Index card exercise HHome page SStore’s categories OOutline of the products CContact form

14. Copyright (c) 2004 Prentice-Hall. All rights reserved. 13 Defining The Site And Its Folders Create site root folder Create a site definition Create nested folders

15. Copyright (c) 2004 Prentice-Hall. All rights reserved. 14 Site Definition Setup Local folders Manage sites selection

16. Copyright (c) 2004 Prentice-Hall. All rights reserved. 15 Select site operation Site Definition Setup (continued)

17. Copyright (c) 2004 Prentice-Hall. All rights reserved. 16 Site Definition Setup (continued) Server technology Edit and upload choices

18. Copyright (c) 2004 Prentice-Hall. All rights reserved. 17 Site Definition Setup (continued) Navigate to root folder

19. Copyright (c) 2004 Prentice-Hall. All rights reserved. 18 Nested Folders  Root folder  Subfolder 1  Subfolder 2  Sub subfolder a  Sub subfolder b  Subfolder 3

20. Copyright (c) 2004 Prentice-Hall. All rights reserved. 19 Creating Nested Folders

21. Copyright (c) 2004 Prentice-Hall. All rights reserved. 20 Building Your First Web Page Start by creating and saving a new page

22. Copyright (c) 2004 Prentice-Hall. All rights reserved. 21 Create And Save A New Page Type home page of Carver’s Store Choose File>Close Click Yes to save the changes

23. Copyright (c) 2004 Prentice-Hall. All rights reserved. 22 Save As Window Type home.html in the File Name field and click Save

24. Copyright (c) 2004 Prentice-Hall. All rights reserved. 23 Add Text And Graphics Text Graphics

25. Copyright (c) 2004 Prentice-Hall. All rights reserved. 24 Working With Views Code window

26. Copyright (c) 2004 Prentice-Hall. All rights reserved. 25 Views Design window

27. Copyright (c) 2004 Prentice-Hall. All rights reserved. 26 Seeing Changes Windows system  Use Property inspector Mac  Automatic refresh

28. Copyright (c) 2004 Prentice-Hall. All rights reserved. 27 View Source Code To see source code…

29. Copyright (c) 2004 Prentice-Hall. All rights reserved. 28 Source Code Code in Code view Code in Notepad

30. Copyright (c) 2004 Prentice-Hall. All rights reserved. 29 Apply Simple Text Formatting Headings HH1 through H6 Lists NNumbered BBulleted AAlphabetized Paragraphs HHorizontal lines

31. Copyright (c) 2004 Prentice-Hall. All rights reserved. 30 Methods Property inspector Tag editor

32. Copyright (c) 2004 Prentice-Hall. All rights reserved. 31 Using A Web Page As A Template Maintains look and feel throughout site Reduces repetitive tasks Uses “save as” command from completed page Changes file name

33. Copyright (c) 2004 Prentice-Hall. All rights reserved. 32 Changed Text

34. Copyright (c) 2004 Prentice-Hall. All rights reserved. 33 Creating Links External, to another site  Different domain, pathname includes protocol Internal to site  Same domain, one page to another

35. Copyright (c) 2004 Prentice-Hall. All rights reserved. 34 Email Link In the Link field of the Property inspector, type mailto:info@carvers ‑ online.com and press Enter/Return.

36. Copyright (c) 2004 Prentice-Hall. All rights reserved. 35 Summary Plan – outlines, storyboards Define a site and create its folders Build basic Web pages Design and code views Simple text formatting Existing page as a template Create links

37. Copyright (c) 2004 Prentice-Hall. All rights reserved. 36 End-of-Project Exercises Screen ID Multiple Choice Discussion Questions Skill DDefine a Site with the Advanced Tab CCreate a New Page Using the File>New Menu AAdd Another Web Page to Tropiflora Online UUse Copy/Paste to Create New Pages IImport Content from a Microsoft Word Document

38. Copyright (c) 2004 Prentice-Hall. All rights reserved. 37 End-of-Project Exercises Challenge DDesign Your Family’s Web Site PPrint a Web Page and Its Source Code LLearn Techniques from the Code of Another Web Page Portfolio Builder RRecognize How Sites are Structured

39. Copyright (c) 2004 Prentice-Hall. All rights reserved. 38 What Are Your Questions