Stylish Horizontal Navigation List | My Assignment Tutor

ITECH2003: Web DesignCRICOS Provider No. 00103D | RTO Code 4909 Page 1 of 13Lab 05More Complex CSSOverviewThis week’s lab exercises:Stylish Horizontal Navigation List;Breadcrumb Navigation;Fast Rollover Menu Items;Rollover Image Gallery;Continue assignment 1 with the Content Inventory.This tutorial exposes the student to more of the power of CSS. Pure CSS code is investigated via a series of exercisesthat are designed to show the level of control CSS can assert over any styling issue associated with the creation ofwebpages.The images required for the exercises can be found on Moodle and are contained in the Week 05 Lab Files zip file forthis week.Exercise 1: Horizontal Navigation ListBefore doing anything else, create an empty CSS file and a basic structure for an HTML file. Basic structure refers to thestructural tags such as , , menu item 1menu item 2menu item 3menu item 4last oneAnd this is the CSS for the wk5ex3.css file:nav a {display:block;width:120px;margin: 1em 0; padding:7px 0 10px 20px;font: bold 14px/1 sans-serif;color:#c60;background: url(“images/button.gif”) 0 0 no-repeat;text-decoration: none;}nav a:hover {background-position: -157px 0;color: #E9BE75;}nav a:active {background-position: -314px 0;color:white;}Save and test to make sure it looks like the example at the beginning of this exercise.By setting the width to 120 pixels, only the first state of the image button is visible.Using negative positioning for the mouse hover moves the second state into the visible area.ITECH2003: Web DesignCRICOS Provider No. 00103D | RTO Code 4909 Page 9 of 13Exercise 4: Rollover Gallery of ImagesThis exercise is designed to show you how an image gallery could be put together using one image for both the thumbnailand the larger image.You will be given the CSS code in its totality, but the HTML code needs to be extended to complete the matrix of 20images shown in the example below. You will need to find images that can be resized to 200px wide 150px high, which isthe size of the images for this particular gallery. Should you wish to make the images larger, you will need to adjust theCSS to reflect the new size.The first few images are from the weeks lab files, and should be placed in the images folder.First the partial HTML:ITECH2003: Web DesignCRICOS Provider No. 00103D | RTO Code 4909 Page 10 of 13Image Gallery based on Nathan’s Smith’s HoverboxThe complete CSS:* {border: 0;margin: 0;padding: 0;} a{text-decoration: none;}body {background: #fff;color: #777;margin: 0 auto;padding: 50px;position: relative;width: 620px;}h1 {ITECH2003: Web DesignCRICOS Provider No. 00103D | RTO Code 4909 Page 11 of 13background: inherit;border-bottom: 1px dashed #ccc;color: #933;font: 17px Georgia, serif;margin: 0 0 10px;padding: 0 0 5px;text-align: center;} p{clear: both;font: 10px Verdana, sans-serif;padding: 10px 0;text-align: center;}p a {background: inherit;color: #777;}p a:hover {background: inherit;color: #000;}/* —————-Hoverbox Code—————*/.hoverbox {cursor: default;list-style: none;} .hoverbox a {cursor: default;} .hoverbox a .preview {display: none;} .hoverbox a:hover .preview {display: block;position: absolute;top: -33px;left: -45px;z-index: 1;} .hoverbox img {background: #fff;border-color: #aaa #ccc #ddd #bbb;border-style: solid;ITECH2003: Web DesignCRICOS Provider No. 00103D | RTO Code 4909 Page 12 of 13border-width: 1px;color: inherit;padding: 2px;vertical-align: top;width: 100px;height: 75px;} .hoverbox li {background: #eee;border-color: #ddd #bbb #aaa #ccc;border-style: solid;border-width: 1px;color: inherit;display: inline;float: left;margin: 3px;padding: 5px;position: relative;} .hoverbox .preview {border-color: #000;width: 200px;height: 150px;}Try and understand the CSS code and place a comment /* like this */ next to each of the selectors with ashort explanation of what the code does.By understanding how this gallery has been put together it will be easier for you to implement something similar,regardless of the way you wish to display the gallery. Example:o 2 rows of 5 images,o 5 rows of 3 images,o 10 rows of 2 images,o Etc.Extend the gallery to complete the matrix of 20 images shown in the example at the beginning of this exercise. Youwill need to find images that can be resized to 200px wide 150px highThis concludes the CSS exercises.On the next page is an exercise that will help you with Assignment 1.ITECH2003: Web DesignCRICOS Provider No. 00103D | RTO Code 4909 Page 13 of 13Exercise 5: Content Inventory for Assignment 1This exercise is designed to help you continue your Design Document assignment that is due on Friday of Week 7. Todayyou will focus on the Content Inventory which begins section 2 of the design document. The Content Inventory wasdescribed back in Lecture 2.As it indicates on the assignment specifications, the content inventory is a simple list of all the content and their typesneeded for each web page in your website. Each page will contain a number of contents and their labels (based on theassignment specifications), categorised to one of your eight webpages.Begin by reading the Website Overall requirements section from “Assignment 1 Design Document” file in theAssessment section on Moodle, in particular the content requirements needed for each web page on your website, thencontinue with your Design Document you have been writing.3.1. Content InventoryBelow is a small but clear example of a start to a content inventory for a personal websiteNote, this is just an example! You should not write “Etc…” yours should include ALL of your content requirementsfor any content that is global to the entire website, and any content specific to one of the eight webpages.Remember that the home and contact page have very specific requirements, and the other six pages of your ownchoice have a few particular requirements, but overall must relate to the website’s purpose. PageContent TypeLabelAll Pages (Global)TextWebsite title/bannerJPG ImageMy face picture used as a LogoTextCopyright information in footerHyperlinksLinks to pages: Home, Contact, etc, etc, etc…Etc…Etc..HomeTextShort blurb about myselfEtc…Etc…ContactTextLabels for form elements: Name, Email, MessageEtc…Etc…Etc…Etc…Etc… Once you have your content inventory completed, you should start collecting all of the content from this contentinventory. You will need it for Raw Data as described in Lecture 2. This raw data will be ready to use and rework for thewebsite you will build in Assignment 2: Website Development. There should be no excuses about not being able toobtain images or data for your website when you have known all semester about the assignments.In next week’s Lab you will need your completed content inventory so you have a clear idea of the content needed foreach wireframe. You may also want to gather some of the actual content so you can work on your Mock-up.For all assignment work you should make the most of your tutors while they are present in the lab class with you, andshow them your progress as well as see if they have any suggestions. Remember they cannot do the work for you, butthey can give you advice or refer you to online material that could help you.