Building a Website: Site Management

1. Building a Website:Site Management Fall 2013

2. 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 • Each to understand structure • Content is divided into logical sections with a prominent navigation bar

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

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

5. Layout for Small Web Sites • lilliec – This is the root folder for my site • images – subfolder • All images on he site go here • scripts – subfolder • This is where I put layout.css • page2 – subfolder with .html files for page 2 • page3.html – the file that will display in browser window • Other files and folders for page2 • page3 – subfolder with .html files for page 3 • page3.html – the file that will display in browser window • Other files and folders for page2 • index.html – the file that is loaded when a user enter www.uncp.edu/home/lilliec in the browser address space

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

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

8. 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. If 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/

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

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