Building a Website:Site Management

Fall 2013

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

Typical Folder StructureSite Folder -- home

Index.html

contacts.html

css

global.css

classified

Index.html

images

2004

2005

2006

horoscopes

features

img

home

global

nav

nav_store-f3.gifnav_store-f2.gifnav_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 atwww.uncp.edu/home/lilliec/index.htmlTo get to it you only need to typewww.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.