1. . Website and file organization

2. How websites work

4. The content is created on the local computer.

6. The content is created on the local computer and stored in a folder. This is what my 282 folder looks like when I open it from the Desktop

7. The content is created on the local computer and stored in a folder. This is my 282 folder as it shows up in Dreamweaver in the Local View

8. To be seen by anyone your website needs to be "UPLOADED “ to a web server.

9. The content is created on the local computer and stored in a folder. Remote Folder on ServerLocal folder on my computer

10. Upload = Put

11. A web address MUST contain http:// to be viewed on the web.

12. If a webpage has an address that starts with C:// file that means it is on the local computer and not on the server. The top image shows a window of the file in Dreamweaver. The bottom image shows the address in the address bar of Firefox.

13. The Process 1.Create webpage on local computer 2.Upload webpage to server 3.Viewer finds webpage on server by using the URL or address 4.Webpage gets downloaded to users local computer

14. World Wide File Management End user viewing My Web Site

15. The Browser uses an Internet connection to "see" what is on the web server and bring it to the local computer. Types of Internet connections can be: –Mobile Phone –Wifi –Land line

16. Many things influence the viewers experience of your webpage. Connection speed computer speed screen resolution browser used additional software used such as screen readers

17. Most of these are outside your control.

18. For an educational website it is important to design in a way that your information is accessible to the largest possible number of people. Begin with the end in mind –End user, end message Good planning is essential

19. Planning Start with brainstorm Mind map Storyboard –Physically draw out and plan content and links of each page –Different methods work best for different people

20. Planning Considerations Does your site have a clear purpose? How often can you update? Is the navigation easy to follow? –(Navigation gives users a clue as to where they are within the site) Are your graphics appropriate? –(Images have alt tags. Every graphic link has a matching text link. Images have user-friendly file size.)

21. File Management

22. Root folder holds the entire website –This is known as the LOCAL site lives on your computer must be organized to match your website organization

23. Folders are containers that store files Files and Folders should be named in a particular way to work best –No special characters –all lower case Spaces and special characters will add unwanted characters to your URL

24. File Names (continued) Spaces and other non-allowable characters in file names create ugliness and awkwardness when viewed in a browser. http://www.w3schools.com/TAGS/ref_urlenco de.asp http://www.w3schools.com/TAGS/ref_urlenco de.asp files are any document such as an image, a text document, a digital video file, or an HTML file

25. File Management File Management is the most important part of web site creation! A web site lives “ locally ” in a “ root ” folder on your hard drive A home page for a web site is an index page (index.html) The index.html file and other html pages are stored at the root level in a folder

26. File Management (cont.) File Management is the most important part of web site creation! Images and media are stored in a series of folders in the root folder A web site available online has a “ remote ” matching root folder on a web server Local root folders and remote root folders MUST match

27. File Management

28. File Management in Dreamweaver Site folder = root folder Dreamweaver allows for local and remote file management

29. The root folder has an address –the address is viewable in Dreamweaver –your website also has an address –the website address will share some elements with the address on your computer.

30. File Management (cont.) The URL of a webpage also reflects the file and folder structure. Remote ServerRemote Root Folder

31. Simplify Things to think about: –Who is your audience? –What information are you sending out? –Does everything support your message and your audience?

32. Navigation A place "home" from every page All links work consistant on every page within the site navigation elements easy to find and use navigation gives visual clues to the user as to where they are within the site Visited links change color to help user links give visual feedback to the user

33. A place for everything Using your storyboard, mind map or other visual plan set up your folders and pages. Folder for site Pages within folder Front page called index.html

34. Linking Internal links link pages within your local site External links link to sites, pages and resources outside of your control

35. Images

36.  Images should be stored in an “Images” folder within your root folder.  Images can be.jpg.gif.png or.psd documents  Images should have a small file size to download quickly

37. ALT tags Alt tags are used to identify images in readers. Dreamweaver builds ALT tags into the image insertion process.