Transcript Web Site Design - University of North Carolina at Pembroke

Building a Website:
Site Management
Fall 2012
Introduction
• Web page consists of a collection of varied files
–
–
–
–
–
HTML
images
CSS
Flash movies
Etc.
• Must all work together
– Broken link or missing graphic can interfere with the operation of
entire site
• A good site has
– Eash to understand structure
– Content is divided into logical sections with a prominent navigation
bar
Organize via Folders
• One primary folder – the root folder
– Holds all the site’s web pages, graphics, and other
files used in the ssite
– Root folder is subdivided into subfolders for better
organization
Site Folder -- home
Typical Folder Structure
Index.html
contacts.html
css
global.css
classified
horoscopes
features
Index.html
images
2004
2005
2006
img
home
global
nav
nav_store-f3.gif
nav_store-f2.gif
nav_horoscope_f3.gif.gif
Guidelines for Effective site Organization
• Plan for future growth
• Follow the site’s architecture
• Organize files by types
– Create folders for each section of web site
• Add folders for storing other types of files
– Graphics, css, external JavaScript files, PDF files, etc
• Create folder for graphics that appear on home page
– Usually home page is visually distinct from other pages
• Create folder for graphics that appear on other pages
• For example
– images_home folder
– images_global that appear on other pages
Guidelines for Effective site Organization
• Use understandable names
• Don’t use names such as 1a.gif, zDS.html, or
f.css
• Use names like site_logo.gif or directions.html
• Be reasonable with the names
this_is_the_image_that_goes_in_the_upper_right_corner_of_the_home
_page.gif
is probably not a good name
• Be consistent
FAQ
• Why so many files named index.html?
– If you type www.uncp.edu into a web browser, the
browser goes to that location and looks for a file
named index.htm, index.html, index.php. One of
those files are not in that location you will get an
error message. Otherwise you would have to type
www.uncp.edu/filename.html
– For example, my web page is at
www.uncp.edu/home/lilliec/index.html
To get to it you only need to type
www.uncp.edu/home/lilliec/
Site Map
• Local View: shows the files in your local root
folder
• Map View: shows a map of your site
• Remote View: Shows files on the Web server
in the remote root folder
• Testing Server: used when creating dynamic
database driven site
Local View
• Move or rename a file
– Do this within Dreamweaver’s files panel,
Dreamweaver will try to update all files that
reference that name or location.