View
221
Download
1
Embed Size (px)
Citation preview
. 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.