Advanced CSS Layout Lesson 5
Using CSS comments in the style sheet Using CSS background images Creating navigation styles Creating navigation menus Working with absolute positioning Lesson Objective
Navigate to ‘Teacher demo Files’ folder In this lesson, I will show you how to fine-tune the appearance of page by adding graphics, color and additional sections to your TadsTees layout page. Navigate to ‘Teacher demo Files’ folder Then, into ‘tadstees_original’ > into ‘tadstees_assets’ Point and right click inner_wrap_bg.png Copy > paste inside the Images folder of the ‘layout’ folder of your ‘My Tads Tees’ folder.
Cont’d From your ‘Layout’ folder Point and right click ‘04Instructor_layoutstart’ AND ‘styles.css’ Open with BBEdit Preview the html file in Chrome to remind yourself what it looks like Now, comment-out all the background colors with /* */ on either side of the rule. (remember that the css rule might be external, in the styles.css file) Preview in the browser
Cont’d Scroll to the css style section and create a line space below the last rule, if needed. Then type the following gradient background image rule. This is known as a fix that allows a background-image to be placed on a div that has no content – #innerwrap { background-image: url(images/inner_wrap_bg.png); background-repeat: repeat-x; }
Cont’d Then type the following hack (solution) rule – #innerwrap:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
To enhance the CSS navigation bar locate the #mainnav in your CSS style section and delete the slashes & asterisks from the background color Then, replace the existing color with the following - #60668b; Save and preview
Cont’d Repeat the above by deleting the slashes and asterisks from mainnav li to change the background-color to #7D83A4 Save and preview Add the following code at the end of the mainnav li to vertically center the text line-height: 25px; save and preview
Cont’d Then add the following code to style the anchor and hover #mainnav ul li a { color: #ffffff; text-decoration: none; display:block; } #mainnav ul li a:hover { background-color: #29336b; save and preview
The first thing we need to do is to rename the file - To prepare this home page for multiple pages we need to do a couple of things. The first thing we need to do is to rename the file - Go to TadsTees folder > go to layout folder > Rename 04instructor_Lay…. to index.html
Then, scroll up to locate the opening body tag, <body> Cont’d Then, scroll up to locate the opening body tag, <body> Click once after the word body and type <body id="home"> You just added an ID to the body tag which will allow you to set a style that applies to this page only.
Let’s continue styling for all the pages before they are even created. scroll back to the css style section press Enter after the last rule for a line spacing, and add the following - body#home .nav-home, body#about .nav-about, body#browse .nav-browsecatalog, body#contact .nav-contact, { } This rule will target the class nav-home on the page with the ID home and so one..
Cont’d Then, In your now, ‘Index.html’ add the following rule to the div id=“mainnav” unordered list - <li><a class="nav-home" href="index.html"> Home </a></li> <li><a class="nav-about” href="about.html">About </a></li> <li><a class="nav-browse" href="browsecatalog.html"> Browse Catalog </a></li>href="contact.html"> <li><a class="nav-contact” Contact </a></li>
We are now ready to make four page functional website out of the Master page In BBedit From the Menu bar, click File > Save as Name this file about.html and make sure it is saved inside the layout folder.(don’t panic if bbedit closes index.html, it’s inside the folder) Scroll down and locate the h1 (in div id=“main”) and replace the text; ‘Tad’s tees is…’ with the word About Then scroll up to the opening body tag <body> and replace the id for the word Home to about like this - <body id=”about”> Save and preview
Repeat, the previous steps to create a third page from index Repeat, the previous steps to create a third page from index.html, the Master page In BBEdit, open Index.htm From the Menu bar, click File > Save as Name this file browsecatalog.html and make sure it is saved inside the layout folder. Scroll down and locate the h1 (in div id=“main”) and replace the text; ‘Tad’s tees is…’ with Browse a Catalog Then scroll up to the opening body tag <body id=“home”> and replace the id for the word Home to browsecatalog, like this - <body id=”browsecatalog”> Save and preview.
Repeat, the previous steps to create a forth page from index Repeat, the previous steps to create a forth page from index.html, the Master page In BBEdit, open Index.html once again. From the Menu bar, click File > Save as Name this file contact.html and make sure it is saved inside the layout folder. Scroll down and locate the h1 (in div id=“main”) and replace the text; ‘Tad’s tees is…’ with Contact Us Then scroll up to the opening body tag <body id=“home”> and replace the id for word Home to contact, like this - <body id=”contact”> Save and preview > click the navigation menus to ensure all the links work.
This concludes my lesson intro to Lesson 5_Advanced CSS Layout Related activates - 1. Listen to video tutorial Lesson 5 2. Then, Read chapter 5, follow the steps and complete the project > Receive a grade 3. Complete self-study5a and 5b 4. Complete the Review Qs_L5 4. Take Test7_Advanced CSS Layout on Schoology