ASSIGNMENT:

This assignment will allow you to experience what it is like to develop a complete website from scratch. To do this you

will create a fan site of one your favourite subjects; this can be a Movie, TV show, Book, Band, Video Game, or anything

that you have a great interest in$.$ Instructions on specific requirements are as follows;

General Instructions

$1.$ Build a template using the design pattern as

illustrated in Figure $1$: Sample Web Page

Format. This will be used for all pages.

$2.$ Use well$-$formed HTML$5$ and CSS$3$ structure

including use of semantic elements.

$3.$ Keep in mind AODA considerations when

developing your template.

$4.$ Use a logical folder structure to organize

your site;

a$.$ styles

b$.$ pages$/$subpages

c$.$ images

d$.$ thumbnails

e$.$ media

f$.$ any other items

$5.$ The template will contain at a minimum a

two tier navigation bar that will be the

same on all pages. One of these top tier

menu items will have a sub menu. See

figure $2$ for a sample of how the

navigation bar should present itself.

$6.$ Each page is to use the same tab$/$page favicon and tab$/$page title throughout the site defined in the head tag in

the template.

$7.$ Each page is to have a footer. This will also be consistent throughout this site as defined in the template.

$8.$ There will be a main.css file that will control elements that are common throughout the site, i$.$e$.$ navigation

bar, title, navigation area, article area, etc.

$9.$ Ensure that you incorporate a CSS reset $($like normalize.css$)$ at the start of your CSS$.$

a$.$ Each page is to have consistent colouring throughout defined in the main.css$.$

b$.$ Each page is to have consistent font family styling on each page defined in the main.css$.$

c$.$ Use various CSS controls such as hover, focus, etc. to control the appearance of the navigation bar so

that the navigation items are identifiable via colouration when being manipulated.

Figure $1$: Sample Web Page Format

Figure $2$: Two Tier Navigation Bar

$10.$ Each page is to have its own CSS file, specific to unique items within that page.

a$.$ For instance, the image.css will contain CSS to manipulate images within the image.html page.

b$.$ For instance, the table.css will contain CSS to manipulate tables within the table.html page.

$11.$ The left Navigation Area composed of Thumbnail images will consist of the following;

a$.$ The top thumbnail image will link to the home page.

b$.$ Subsequent thumbnail images will provide links for pages that are below the home page, i$.$e$.$ these

would be the top tier of your navigation bar.

c$.$ Each of these thumbnail images will contain a text caption describing the thumbnail.

d$.$ This thumbnail image navigation area will be the same throughout the site.

e$.$ The Thumbnail Navigation Area should be distinguishable from the other areas of your site by colour or

border or both.

$12.$ All images and videos should have a border placed around them.

$13.$ Add your name$/$student number in comments at the top of all the HTML pages.

$14.$ The completed Assignment will be in a Zipped folder and submitted to the appropriate folder in D$2$L$.$

a$.$ The file should be named $--$project.zip, for example Steve

Sutherland's assignment would be named steve$-$sutherland$-$project.zip.

Home Page $($Index$.$html$)-$ This will be based off of your Template.

$1.$ Page will be built using the provided general Instructions in mind.

$2.$ Please create an index.css file for formatting and decorating specific to your index.html file.

$3.$ The Title Area will incorporate the title of your site. It will contain a relevant logo or graphic or image within

the area, this can be left or right justified or both.

$4.$ Use the article to describe what the site is about.

$5.$ The right aside area will be used to provide additional information relevant to your site, i$.$e$.$ a fun facts sections

or perhaps links to other sites that are of a similar theme as yours.