The Selected Template
has a fixed page width to ensure a uniform appearance on different
computer screens. The navigation bar is located above the content
container to help easy access to the different webpages on the
webside.
A picture has been placed in the left column to give the website a more stable flow and balance while navigating through the pages (the picture has been set to repeat downward).
There
is a possibility of adding a background picture to the masthead -
e.g. a remote mountain range of tibet. The user got an
option of scrolling down the page since the text information for
each animal is quite substantial. The color range chosen is grayish
and neutral but can be changed unproblematic.
Structure
is based on a dynamic web template (dwt). It enables the website
developer to create a general webpage frame layout which can be used
throughout the pages in the website.
This means a general unchangeable structure strikes throughout the
website - it can be edited in the master.dwt file but not in the
default file which can be left open for the everyday user for
updating information in the website.
A deeper explanation of dwp from Microsoft Office Online:
"A Dynamic Web Template is an HTML-based master copy of a Web page
that you can create to contain settings, formatting, and page
elements such as text, graphics, page layout, styles, and regions of
a Web page that can be modified. You can attach a Dynamic Web
Template to the pages in a Web site, and that template defines the
layout for those pages".
"Dynamic Web Templates are particularly useful in collaborative
environments in which a designer controls the page layouts and other
authors add content to the pages but are not allowed to change the
layout. When it comes to updating the content on your Web pages, you
can do it dynamically!"
The CSS file
is also called cascading style sheets and describes the way one wish to present a HTML/XHTML/XML document in a browser or how to define the layout of a documents as to say. It is used to define heights, fronts, margins, colors etc.
HTML is a structure language while CSS is a layout language. CSS contains more options for layout than HTML and is more precise.
Years ago, HTML also captures the layout part but this part
has now been split out into a separate CSS programming language as
such. It has chosen to have the CSS code in separate files
instead of incorporating the CSS code directly into the individual
HTML-documents. This programming process is more efficient since the
individual HTML-document contains a link to the CSS-file
and the formatting is
hereby
used in a string of HTML-documents instead of just one.
<link href="../styles/style0.css"
is e.g. a css link used in the Tibetan Bear page. There are two
different types of .css files in this website - a layout.css and a
style(x).css. The layout.css is being imported in the style.css
enabling the developer to chose different a style.css (style0.css to
style3.css) if needed. The total amount of programming code is less
and downloading time for the website is lower when using CSS.
Read more about CSS on:
http://en.wikipedia.org/wiki/Cascading_Style_Sheets
http://www.html.net/tutorials/css/?ref=notebox
(high recommendable)
Template Generated layout
Each of the webpages in the website follows basically this
structure:
<html>
</head>
<body>
</body>
</html>
where the heading contains information about the page while the body
part contains information about the elements which makes the page
work as to say (the link to the
CSS-file
is expressed in the head section).
The div- paragraphs: <div> is being used to group one or more
block-elements. For example:
<div id="navigation">
</div>
The navigation bar is selected as a whole and the elements within
are being attached to the following CSS-statement:
#navigation {
margin-left: 160px;
background-color: #DCDBE0;
}
The navigation elements are now transformed due to the CSS commands. The advantage is the simplicity of change on a website scale eg. for changing into a different backgroundcolor for the navitation bar. This statement also tells the margin is located 160 pixel from the left for the navigation menu (there is added one more webpage more to the website than in the original template).
As a test I made a direct picture link for the tibetan bear to the picture on wikipedia instead of downloading the picutre and adding it into the website.
Pictures are selected from Wikipedia.
Here the guidelines for the pictures found on wikipedia:
The Wikimedia Foundation owns almost none of the content on
Wikimedia sites — it is owned by the individual creators.
However, almost all may be freely
reused without
individual permission according
to the terms of the particular license under
which it was contributed to the project. You do not need to obtain a
specific statement of permission from the licensor (unless you wish
to use the work under different terms than the license stated).
In Germany, photo
rights or "Bildrechte" are the copyrights that
are attached to the "author" of the photograph and
are specified in the "Law for Copyright and similar Protection" ("Gesetz
über Urheberrecht und verwandte Schutzrechte [1]").
These rights deal with rights of reproduction, distribution,
modification, attribution, and prohibitions against illegal
modification or reproduction. The ownership rights of a picture are
treated in the broader "art copyright laws". Furthermore, if a museumor
gallery owns a work of art or
a photograph, they are permitted make their own requirements as to
marketing on illustrations and reproductions of their property. This
relates to the German legal concept of the right of owner to
undisturbed possession.
Martin Adserballe
email: martin@adserballe.com
website: www.adserballe.com