Building a site using Layout - Australia Assignments

Assignment 3 – Building a site using Layout

Listen

Hide Folder Information

Instructions

Click the Assignment 3 link to access the five associated files for this assignment.

Using the files within the Assignment 3 dropbox, create the web site using nothing but div layout objects (<div>…</div>) and HTML 5 layout tags. You can use HTML 5 specific layout tags like <header>, <section>, <nav>, etc. Remember these are all two sided tags so if you open them…you must not forget to close the tag. This should involve CSS, either embedded and/or external your choice. Detailed instructions are provided below as well as a sample visual aid on what you are working towards.

We will never create a site without some type of layout now that we’ve gone through our first set of textbook tutorials. That layout could be css grids or fixed such as the “Try This” segment in weeks 4 & 5. FOR THIS ASSIGNMENT IT WILL BE YOUR CHOICE on the type of layout…whether it’s responsive using CSS grid layout or Fixed/fluid using pixels or percentages respectively. You’ve had some practice with using div layouts & html 5 layout if you’ve attempted the try this activities from week 4 and 5. Layout structure in a web page begins after the body tag. So when you’re ready to begin structuring the site and putting in images and content, your page will include all of your sandwich parts but after the body tag will look something like this:

LAYOUT FOR THIS SITE WITH HTML 5, YOUR WEB PAGE MAY LOOK SOMETHING LIKE THIS:

<!DOCTYPE html>

<html>

<head>

<title> Sample Title Here </title>

<style….>

Css rules if you choose to use embedded styles

</style>

</head>

<body>

<div>

<nav> This tag will hold your links but you would have had to create css rules for the nav tag

(example: nav{width: 100px;}) to control where the navigation will be placed on the

page.

</nav>

Notice how there’s the use of the section tag which is a layout element tag for HTML 5. Also notice the <div> layout tag contains the navigation and section tags which would hold your content.

HTML 5 uses id and class selectors too but HTML 5 has specific tags intended for layout such as <header>…</header>, <section>…</section>, <article>…</article>, and <nav>…</nav>. So for this assignment, if you choose to do the HTML 5 way of layout for this website, you will likely use some of the aforementioned tags and a div tag to contain them all. Notice the use of the Doctype for HTML 5; you must add the doctype tag as I’ve written it in your code and you must have at least IE 9 or an upper level version of Firefox (like version 17 or 18) to view the results of your HTML 5 layout. Lastly, I encourage you to set background-colors when making rules for the different HTML 5 layout tags you choose to use. This will allow you to see the layout form and where the tags are appearing on the page. You can remove the background-color properties later, after you’ve achieved the layout you want.

This is just one way to do this assignment. There are other ways and other tags you may want to use. Most importantly, know that anything can have a background image. The body tag isn’t the only tag that can have a background image. Making a layout tag have a background image leaves your layout container empty to put content. Trying to use the image tag to put in a picture and then trying to put text on top of that, doesn’t work well. When you want text to appear on top of an image…hint: make that image a background image of your layout container and then place the text you want inside that layout container.

</section>

</div>

</body>

</html>

**********************************************

Assignment 3 Instructions (read these instructions ATTACHED BELOW carefully; they make reference to using divs for XHTML but as expressed above, you are using HTML 5 layout methodology. MAKES REFERENCE TO Assignment 5 or 6 but this is Assignment 3 for you all.)

Zip files containing the images you need (you will be using these images ATTACHED BELOW; do not try to reinvent these images…it’s literally being given to you to use to create the website in question)

Click the attachment below to see an example of the home page (this is a snapshot from an actual browser window of the actual site from the Internet. This is a visual image example, this file is not to be used when actually creating your site, it’s just an example of what the end result will look like. What you see is a centered layout that has ONE background image for the entire page and an additional image and text content on top.)

Click the attachment below to see an example of the faculty page (this is a snapshot from an actual browser window of the actual site from the Internet. This is a visual image example, this file is not to be used when actually creating your site, it’s just an example of what the end result will look like. What you see is a centered layout that has ONE background image for the entire page and an additional image and text content on top.)

Click the A3-Mockup.jpg file below to see what a completed version of the website could look like if viewing on a computer. Ultimately, it is just another visual representation of what you’re attempting to accomplish. KEEP IN MIND, it is just a visual, there are aspects of the example that do not align with the instructions, such as the color of the text. But overall, it shows what pages with text should look similar to and what pages that will not have any text should look similar to.

AGAIN, the above examples are what you are working towards; the examples depict a browser window that shows the background-image of the web page and a centered design & graphic on top. YOU MAY USE DREAMWEAVER or MICROSOFT EXPRESSIONS, IF YOU DESIRE. THE LINKED INSTRUCTIONS MAY ELUDE TO DIV USAGE BUT YOU MAY USE DIVS, AND/OR HTML 5 LAYOUT TAGS.