Readme File
DEVELOPMENT NOTES
This website was developed in 2009 for the Internet and World Wide Web 1 Subject
as part of my Masters of Multimedia at Swinburne University of Technology.
Some small modifications have been made in 2012 to ready the site for web publication.
BROWSER NOTES
The webpage works well using Internet Explorer.
Some links, especially with image maps, do not work using Mozilla Firefox.
Please assess the site for useability in Internet Explorer.
SOURCES
All pictures were created by me, Leigh Canny
All text copy was researched and written by me, Leigh Canny
All html code was created by me, Leigh Canny
HTML PAGES
Home Page
The page is linked to the site's external css file which controls the appearance of various elements of the page. For example, h1 element is controlled to appear with white text and coloured background colour.
Navigation Bar
The navigation bar is a table so that each of the navigation buttons would have a consistent width.
It uses a left float to organise the layout of the page.
The user can make use of the navigation bar by hovering over the anchor text which changes color upon hovering
The css file controls the appearance of the navigation buttons using the navanch class and the navtabtd class.
The currently displaying page is highlighted with a different colour navigation button. This is controlled by the navanch02 class and the navtabtd2 class.
Picture Navigation
The content in the middle is arranged into a 15 column table. This is so cells can span across either 3 columns or across 5 columns to fit all the content neatly.
The pictures use a hover class to indicate which picture can be selected.
Right Navigation
The right navigation panel has unordered lists containing the species name of each featured dinosaur.
It uses a right float to organise the layout.
The user can make use of the navigation bar by hovering over the anchor text which changes color upon hovering
The hyperlinks connect to various anchor points within each of the other html pages.
Other 11 Pages
Each html page above is linked to the external css stylesheet.
Navigation Bar
Same as the the home page (see above).
Picture Navigation
The main image on each html page contains an image map with hyperlinks to the different anchored sections.
Alternative text is used to help identify which sections are linked from the hyperlinked images.
The various parts of the picture are relative hyperlinks to other places within the current page.
The links carry the user to an anchor point at the relevant part of the page.
Each anchored section contains a link to an external website so the user can learn more about each topic.
Occasionally, anchored sections have links to other anchored sections, if a relavant connection can be made. eg. Psittacosaurus links to Triceratops.
Right Navigation
Same as for the home page (see above).
EXTERNAL CSS STYLESHEET
basic html page styles
The h1 tag makes each html page have a consistent h1 sized heading in white text on a black background
The body tag makes each html page have a consistent white background colour.
styles for left navigation buttons
These control the appearance of the table that contains the links to the various html pages.
navtab class contols the basic appearance of the table itself.
navtabtd class controls the appearcnce of each data cell within the table.
navanch class controls the appearnce of the hyperlinks that sit inside the data cells.
navanch hover state controls what the anchors look like if the user's mouse hovers over them.
navtabtd2 contols what the data cell looks like when the page is currently displaying.
navtabtd2 hover state controls a different appearance for a currently selected page if the user's mouse hover sover it.
styles for information boxes
teedee class controls the appearance of the data cells of the content table on each page.
colpara class controls the appearance of the collection information in the collection paragraph on each page.
infopara class controls the appearance of the information in the information paragraph on each page.
extlink class controls the appearance of the hyperlink that links to another website from each page.
extlink hiover state controls the changed appearance of the external hyperlink when the user hovers their mouse over the hyperlink.
Styles for various photo classes
thumb class controls the appearance of the thumbnail pictures on the home page.
thumb hover state controls the changed appearance of the border of the thumbnail pictures when the user hovers their mouse over the thumbnail picture.
bphoto controls the appearance of the big photos with the image maps which appear on each web page
bphoto hover state controls the changed appearance of the border of the hyperlinked image when the user hovers over the image with their mouse.
cphoto class controls the state of the images which do not contain hyperlinks.
Style for Right Navigation division
rightnav class controls the appearance and positioning of the right navigation panel whenever it appears on each section of each page.
rightnavtop class specifically controls the appearance of the data cell at the top of the right navigation panel whenever it appears on each section of each page.
rightnavcol class only controls the width of the left column of the right navigation panel whenever it appears on each section of each page.
rightnav a class is a context selector that controls what each anchor looks like in the right navigation panel whenever it appears on each section of each page.
rightnav a hover state controls what the right navigation hyperlinks look like when the user hovers their mouse over the hyperlink.
rightnav a.rns class controls the appearance of the right navigation hyperlink when its destination page is currently being displayed.
Styles for HOMEPAGE table cells
hometab id controls the appearance of the contents table on the homepage.
teedeetoo id controls the appearance of the data cells within the contents table on the homepage
footer div
foot class controls the appearance of the footer division on each of the website's pages.