. Website and file organization

How websites work

How websites work

The content is created on the local computer.

The content is created on the local computer.

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

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

To be seen by anyone your website

needs to be "UPLOADED“ to a web server.

The content is created on the local computer and

stored in a folder.

Remote Folder on Server Local folder on my computer

Upload = Put

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

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.

The Process

1. Create webpage on local computer

2. Upload webpage to server3. Viewer finds webpage on server

by using the URL or address4. Webpage gets downloaded to

users local computer

World Wide File Management

End user viewing

My Web Site

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

Many things influence the viewers experience of your

webpage. • Connection speed• computer speed• screen resolution• browser used• additional software used such as

screen readers

Most of these are outside your control.

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

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

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

File Management

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

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

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_urlencode.asp

• files are any document such as an image, a text document, a digital video file, or an HTML file

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

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

File Management

File Management in Dreamweaver

• Site folder = root folder• Dreamweaver allows for local and

remote file management

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.

File Management (cont.)

• The URL of a webpage also reflects the file and folder structure.

Remote Server Remote Root Folder

Simplify

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

and your audience?

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

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

Linking

• Internal links link pages within your local site

• External links link to sites, pages and resources outside of your control

Images

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

ALT tags

• Alt tags are used to identify images in readers.

• Dreamweaver builds ALT tags into the image insertion process.