What We Will Cover

• understanding some web terminology
• look at existing web sites with a browser
• look at web site  structure
• discuss wesleyan's web server setup
• naming conventions for sites/directories/pages
• technology available for your website

Terminology

• terms in the webliography

• everyone has been on the web
• creating a website is very different than cruising the web
• creating a web site is a 2 step process
• information architecture
• defines the content of the site
• defines the functionality/navigation of the site
• organizes the site
• web site design
• determines the graphic image of the site
• creates the stylesheet for the site
• creates all graphics needed for the site
• let's look at the architecture of some Existing Web Sites
• http://www.wesleyan.edu/its/web
• notice the address as we go to each page
Addresses or URL's

Uniform Resource Locator

A URL is the address of the server and data stored on the Web. It is the combined form of protocol, name of server and location of file. For example:

     http:// www.wesleyan.edu/wwwdirame/wwwfilename.html
     ____    ________________ __________________________
   protocol     server name         location of file

Generally when accessing any type of protocol there will be a ://between the protocol and the name of the server.
• notice that sometimes there is a name of a file after the directory and sometimes there is not

 
• let's look at Wesleyan's Web Servers
Web Server
A computer directly linked to the Internet whose main function is to store web pages and send them out upon request across the Internet to Web Browser applications worldwide. A Web server is a program that, using the client/server model and the World Wide Web's Hypertext Transfer Protocol (HTTP), serves the files that form Web pages to Web users (whose computers contain HTTP clients that forward their requests).
• Wesleyan has 2 web servers
• condor.wesleyan.edu
• for personal web space
• every faculty staff & student has an account with 10MB of space
• physical structure of machine has /home/userid/public_html
• everything in public_html is by default viewable on the web
• Frontpage puts you directly in your public_html area
• www.wesleyan.edu
• for departmental web space
• every department & WSA funded student group is eligible for a web account
• physical structure /www/dept_name or /www/wsa/student_group
• everything in the directory is by default viewable on the web
• Frontpage puts you directly in your departmental web area

• let's look at Directory Structure
• you will need to create a folder/directory structure for the site
• decide how to organize our data
• html files together?
• graphics together?
• different topics in different folders?
• here are some examples of directory structure ([D] indicates a directory)

example 1 (everything sits in one directory/folder)

[D]department
     course1.gif
     course2.html
     course2.gif
     depthead.jpg
     deptlogo.jpg
     homepage.html
     hours.html
     location.html
     staff.html

example 2 (different 'projects' for the site are in different directories)  

[D]department
     depthead.jpg
     deptlogo.jpg
     homepage.html
     hours.html
     location.html
     staff.html
     [D]course1
          course1.html
          course1.gif
     [D]course2
           course2.html
           course2.gif

example 3 (graphics are put in graphics directories in each area)

     [D]graphics
          depthead.jpg
          deptlogo.jpg
     homepage.html
     hours.html
     location.html
     staff.html
     [D]course1
          course1.html
          [D]graphics
               course1.gif
     [D]course2
          course2.html
          [D]graphics
               course2.gif

example 4 (one graphics folder at the top level for all graphics)

[D]department
     [D]graphics
          course1.gif
          course2.gif
          depthead.jpg
          deptlogo.jpg
     homepage.html
     hours.html
     location.html
     staff.html
     [D]course1
          course1.html
     [D]course2
          course2.html

• no one structure is correct for every project
• the key is to set up the empty directory structure before you start working on your web site
• notice how the structure is similar to your folder set up on your desktop machine
  • on a PC the structure can be seen using Windows Explorer
  • on a Mac look at the structure of your hard drive

• Naming Conventions for your directories/folders
• No spaces in the filenames
• Use all lowercase letters
•  No special characters in the filenames: For example none of the following are acceptable: "!~:&(,
• Be consistent in your naming of files

 
• once you have the file structure in place you can start to create the data or web pages
• let's look at Web Page Structure
Webpage
Documents on the World Wide Web are referred to as Webpages. Webpages are electronic text documents, with added HTML (HyperText Mark-up Language) tags to tell web browsers how to display the page on your computer screeen. HTML tags are instructions that control the placement, sizes and colors of text, and its  background. A web page contains ONLY text. Pictures, sound, animation or video are held in SEPARATE files and associated with the page by means of specific HTML 'tags'.
 
• web pages are text with html tags
• images and sound are separate files
• hints for a user friendly web page
• be brief - most users are 'browsers', they are not there to read a novel
• make each page to stand on its own
• don't use too many images (slow to download)
• put 'alt text' with our images
• be careful with colors
• use a consistent layout
• always link back to your homepage
• spellcheck your page
• Naming Conventions for your Web Pages
• homepages at Wesleyan are named index.html
• No spaces in the filenames
• Use all lowercase letters
• No special characters in the filenames: For example none of the following are acceptable: "!~:&(,
• The files MUST have the proper suffix (.html, .gif, .jpg)
• Be consistent in your naming of files
• here are some examples of using index.html in each directory structure ([D] indicates a directory)

notice that there is an index.html in each directory
example 1 (everything sits in one directory/folder)
[D]department
     course1.gif
     course2.html
     course2.gif
     depthead.jpg
     deptlogo.jpg
     index.html
     hours.html
     location.html
     staff.html

example 2 (different 'projects' for the site are in different directories)

[D]department
     depthead.jpg
     deptlogo.jpg
     index.html
     hours.html
     location.html
     staff.html
     [D]course1
          index.html
          course1.gif
     [D]course2
           index.html
           course2.gif

example 3 (graphics are put in graphics directories in each area)

[D]department
     [D]graphics
          depthead.jpg
          deptlogo.jpg
     index.html
     hours.html
     location.html
     staff.html
     [D]course1
          index.html
          [D]graphics
               course1.gif
     [D]course2
          index.html
          [D]graphics
               course2.gif

example 4 (one graphics folder at the top level for all graphics)

[D]department
     [D]graphics
          course1.gif
          course2.gif
          depthead.jpg
          deptlogo.jpg
     index.html
     hours.html
     location.html
     staff.html
     [D]course1
          index.html
     [D]course2
          index.html
• Technology available for web site creation
• Frontpage has many features
• site license for the client