|
GRAYSCALEarts.com
a website designed for photographer Trevor Gray, November 2005 by Fredrick Zal of Atelier Z The following is an explanation of the website's infrastructure, with instructions for maintenance, management and future modification.
Note: all URL addresses listed below need to be preceded with "http://www.grayscalearts.com/" to become a viewable data link. [i.e. "default.htm" needs to become "http://www.grayscalearts.com/default.htm".] The "def-" prefix on the x.htm file names [i.e., def-blank.htm] is a shortened version of the word "default", which is the standard folder viewing file as established by this particular Internet Service Provider. By appending this prefix to the file names it allows them to nest in the file tree for easy FTP and coding operation. The further "frame-" prefix [i.e., def-frame-shows.htm] notates which file is the parent 'file' [the one that formats the frames lay-out] and which is referenced within the frame composition [def-shows.htm] as primary content. Other nesting prefixes are mentioned below as required for explanation. A: Splash Page The first thing that is seen upon entering the site is a "Splash Page". The URL address for this page is <default.htm>. 
This page is composed of a simple table, for fast loading speed on all types of connections [28.8, Wi-Fi, T1, DSL, Cable, etc.] Since a specific font was chosen, it is required to use images instead of actual text for these words. The font is "Long Cool Mother" <zip file>, and was downloaded for free from FontFreak.
Due to the Splash Page being a simple html table format instead of a 'frames' page, it was necessary to create four (4) distinct "Gateways" [via each of the four links] to the frames area of the site. Each of these Gateways have similar coding, but have different content based upon the 'topic area' of their entry point. The viewer is not aware of the different Gateways, except that the URL address will appear differently at the top of the page. Once inside of the Gateway, this original URL will remain, but all content seamlessly cross-links without any further difference between the entry points. Typical Frames Lay-Out As mentioned above, there are four [4] distinct "Gateways" to the frames area of the site from the original Splash Page.
After entering one of the Primary Content Areas through the frames "Gateway", the areas are composed using a series of simple sub-frame elements for their content. This is the typical lay-out for all content areas on the site: 
Please see below for further explanation of each "Body" [#4] Area: Image Gallery; Shows; About the Artist; and Contact / Sales. If, in the future, additional primary content areas are desired, then two things need to happen: 1) a new "mouse-on" / navigator button needs to be inserted, and 2) the base code can be copied from one of the "Gateway" and cooresponding "Body" x.htm files [i.e., <def-frame-gallery.htm> and <def-gallery-blurb.htm>], saved-as a different name, and slightly modified for limitless Gateway access points to Primary Content Areas. For image portfolio areas, thumbnail images, alt tag text and image links will be required. <Back to Top> B. Image Gallery 
The image Gallery starts with a default inner-splash page <def-gallery-blurb.htm> that describes the theory and historical aperture, which the photographic work endeavors to capture. On the left side of the screen in Area #3, there is a navigation bar <def-gallery-nav.htm> to take the viewer into the image portfolio areas. Once a viewer clicks on one of these portfolio subject areas, the "Body" [4] content is further sub-divided into two areas to present content with a wider lens. The parent frame file [i.e., <def-gallery-frame-color.htm>] calls up two sub-frames:
Note: This is different then the "Gateway" link to the Image Gallery <def-frame-gallery.htm>, which was discussed earlier. 4a. Thumbnails and 4b. Images + Data Each Portfolio Work has three [3] components:
Notes: Image Naming Conventions: To assist in organizing the images and portfolio pages, each name is given a prefix:
Images Sub-Folder </images> To make it impossible for non-authorized surfers to view this folder on-line and thereby secure the copyrighted images of Trevor Gray and Grayscale Images from casual downloading, a "Jump" script is contained as the default, and the viewer will be bounced back to the splash page if they try to view it. This folder contains all of the buttons, thumbnails, images and portfolio pages. <Back to Top> C. Shows This content area <def-shows-frame.htm> composes two parts:  The left side of the screen [Area #3] is blank, while the right side [Area #4] has a simple table of data <def-shows.htm> about past, current and/or upcoming gallery showings and events related to the professional work of the artist. Area 4b has some eye-candy [perspective photograph of exhibition venue, etc], a narrative description of the event and pertinenet information [what/where/when/why/how] with a link to the venue if available. <Back to Top> D. About the Artist This content area <def-about-frame.htm>
composes two parts:  The left side of the screen [Area #3] is blank, while the right side [Area #4] has a wonderful narrative biography <def-about.htm> about the artist. The "About the Artist" page also has two sub-links for resumes. 1) "View the Resume" links to an in-line text document, that can be altered in MS-Word and uploaded via FTP to over-write the existing file. It only contains text data. <resume.htm> 2) "Download PDF" links to a portable data format [pdf] version of the resume, which may potentially contain images. It is recommended to next exceed 2Megabytes in size for the document. <Gray.pdf> <Back to Top> E. Contact / Sales This content area <def-contact-sales-frame.htm> composes two parts:  The left side of the screen [Area #3] is blank, while the right side [Area #4] <def-contact-sales.htm> has contact information for the artist and his sales agent. <Back to Top> |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
