World Animals

About

This site is a collaboration of 2 students of Economics and 1 student of Actuarial Sciences, created as an exercise in the subject of webdesign. The site itself was developed using the Microsoft Expressionweb 4 package. Design and content of the site was developed with these criteria in mind:

·         Template characteristics: The template for the site (“Personal 6”) was chosen for the simple aesthetics of its layout, as an easy overview of site structure was a design goal. The template has a simple navigation-bar in its heading which provides a convenient “dashboard” for navigation and a footer providing direct access to main content. Templates with left- or right-margin menu-boxes were discarded as they disturbed the “window”-style center display of content.

 

·         The “master” .dwt file was edited to allow for all content to be displayed in a fixed width box with flexible height. This was to ease the flow of image- and text-heavy pages without breaking consistency. The “subtitle” was removed to create space for a static title, displaying the sitename on all pages. This serves as an anchor for the user to always return to the title screen while creating the impression of new content replacing old, instead of “changing the page”. The top-menu/footer relationship was changed so that the top menu now displays links to sites with different types of information (about, contact) and the footer provides navigation through subsites displaying the sites main content, animals of the continents.

 

·         The template used provided 4 CSS-styles, of which 2 were used. The template standard was “Style2.css” which provided color and formatting standards of the entire site, providing consistency. “Style2.css” also does a preliminary load of the “layout.css” file, which provided the DIV tag-standards of the site. This is mainly accommodates content accessibility (plaintext & images) during slow load-times and conveniently provides a “reading mode” for text heavy parts, when viewed on Apple iOS devices.

 

·         The “style 2.css” can be summarized as:

o   “Body”-part decides the font-family (Georgia, "Times New Roman", Times, serif) and -size, as well as the standard background image, set as “repeating” to allow for the varying length of the pages.

o   The “container”-statement provides the outline of the entire site and carries the banner, menu, main content and footer. Specifies the grey outline size and white background of the “window”.

o   “Masthead” holds the banner-image and the title-text in place and static on all pages. Later in the code rules (selectors) for title-text font and sizes are specified.

o   “Navigation” specifies the color of the top-navigation and border color/size. The “button” look of the links in the navigation-bar is specified in a selector later in the code that correctly formats any link put inside this style.

o   The next part defines different column-styles, where only the “column_l” part was used in this project, its width adjusted to fill the entire content-box. The “column_r” style was saved in case it was needed.

o   The “content” part only keeps background color consistent and is the main anchor for text and images put on individual pages.

o   “Footer” part provides alignment of the “continent-navigator” at the very bottom of every page. Later in the code, selectors for standard written (<p>) text are specified for consistent color and size.

o   The “typography” part provides quick access to site-standards of headline, plain-text, etc. (<h2>) was mainly used for headlines while plaintext used (<p>) with consistent autostyling.

o   Lastly, the CSS specifies standard (that is, non-menu) styling for “links”. The selectors change the “hover”-color but keeps everything else the same.

 

·         Since the nature of this work is for exercise only and in an academic context, it has neither commercial incentive nor potential for widespread recognition/misattribution of the media provided.  The amount of non-original content on this site was taken only in the amount needed/considered fair for the purpose of the site. This combined with the implied limited lifespan of the site, is in our opinion enough for our non-original reproductions to be considered “Fair-Use” (http://libguides.mit.edu/usingimages). Our use of “Google-images” made it difficult for us to provide citations for content used, so if any creator feels deprived of their work, they are welcome to email us and we will take care to attribute correctly or remove the content altogether.