Introduction For this assignment, you may use any content that you want. I would

ID: 3730503 • Letter: I

Question

Introduction

For this assignment, you may use any content that you want. I would a suggest a topic in which you are interested. The purpose of this assignment is not so much the content, it's using CSS to format that structured content. However, you need to create enough content to satisfy the requirements of the pages.

In this assignment, you will demonstrate familiarity with the following skills:

Referencing style sheets.

Creating simple and complex selectors involving CSS pseudo-elements and pseudo-classes.

Apply complex styles.

General Requirements

You must have at least one external style sheet in a sub-folder named css. All of the pages in the assignment must use this style sheet via a relative reference. Name the style sheet global.css. You might consider creating a second StyleSheet strictly to format the colors. For one of the pages, you will use the Grid960 system. For another, you will use Bootstrap.

The content of each page must be exactly 1024 pixels wide and centered in the page.

Your pages should all belong to a color scheme that you create. You can use any color scheme that you want but you MUST create one. There are several tools to help you: W3 Schools Color Picker. Y (Links to an external site.)Links to an external site.ou must fully implement your chosen color scheme and it must have no less than 4 colors. You should create a color scheme based on either the monochromatic or analogous designs. The styles you create should be based on these colors.

Your content pages should be organized into one or more articles having one or more sections. Those sections in turn should contain paragraphs and other content.

Index Page (Menus)

Your index page must contain a menu that links to the other pages. There will be a link to the current page. That link should be shaded or appear in a slightly different color to indicate that this is the current page. All of the other pages should have an identical menu. All of the menus must have the same look and feel using your chosen color scheme. To get full credit, the menus must have the following:

Your site must have exactly four pages including this index page, so your menu must supply links to those four pages. For each page, the link to the current page should appear shaded in a way that you choose.

I suggest that you implement the menu across the top of the screen using a table with one row and four columns. Then format the table, row, and cells using the same CSS styles from pone page to the next

The menu and items should appear centered withing the 1024 pixel boundary of the page.

Each menu item must have some kind of shading and rounded borders based on your chosen color scheme. You might use a radial-gradient or other gradient. You might implement box shading. You might do both. Each menu item (link in a table cell) must have a rounded border.

The menus (tables) should be enclosed in a parent navigation tag <nav>

In summary, make the menus look the best that you can.

Index Page <Content>

The content for all three of the following pages should be exactly the same. You might have to make a few changes to the content, but if you complete the assignment perfectly, then the only thing that you will change from this page will be to reference different StyleSheets, and add style declarations to various elements

If you want, you can borrow some of the content from other assignments. Your job is to format that content in in different ways using different techniques. The index page should contain absolutely no formatting at all. I'm trying to emphasize the importance of separating content and formatting.

Your content must contain at least the following:

I suggest that you wrap the content in an out <div> tag.

You must nave an <nav> section that contains a menu with three items. These menu items should link to the formatted pages.

One <article> made up of three or more sections. Those articles and sections should have subordinate <h1> and <h2> tags.

You should have an <aside> section that contains bookmarks to the to the three or more sections.

Put paragraphs and other content into each section as you see fit. Your paragraphs must have <strong> and <em> elements somewhere in the text.

In one of the sections, you must have a <table> with a <thead>, <body> and <tfoot>. The <table> should contain no less then 5 rows and 3 columns.

The content page should have a standardized <footer> with a copyright notice and your name.

The footer should contain a logo. You can use the Nevada "N" if you would like: https://www.unr.edu/marcom/university-identity/logos/downloading-logos (Links to an external site.)Links to an external site..

Formatting (Part 1)

Starting with the same content from the index page, create a page named FormttingPart1.htm

Create the global.css external style sheet mentioned above.

On this page, create a link to this external style sheet. Develop the following styles:

The page must be centered on a 1024px wide screen. You should have gutters along on the left and right margins. Your content background color must be different than the gutter background color. Thus, the width of the gutter will vary based on the screen width.

h1 tags must be 1.5 times the base chosen font. The font size of the first letter in the heading should be 1.5 times larger than the font of the rest of the header.

h2 tags must be 1.3 times the base chosen font. The font size of the first letter in the heading should be 1.3 times larger than the font of the rest of the header.

The content of the page should have vertical borders drawn on the left and right side of the windows between the 1024 pixel window and the gutters. Use a 5 pixel solid line. Do not draw a top border. Use a color of your choosing that matches your chosen color scheme.

The default font family for the page should be Tahoma. Use the default font size. To get full credit, all font sizes should be adjusted relative to the default font size. That is, use percentages or ems. You may set borders and padding using fixed sizes.

The footer should use a smaller than default font size. The footer must have a different background color than the background color of the page. The footer should have 25px rounded corners and a 2 pixel border. The image should appear in the footer such that it is floated to the left of the copyright text.

In the external style sheet, format the table such that the header and footer row appear emphasized. Format alternating rows in a different color. Table should be 80% of the width of the partment window. Again, use your chosen color scheme.

Format the strong and emphasized text such that it follows your color scheme. I suggest that you use a dark color from your color palette.

Formatting (Part 2)

For this part (page), you must use the grid 960 system along with your own styles.

Using the grid 960 system, put the <nav> section in two columns on the left, then 10 columns to render the <article> then 2columns on the right to display the bookmarks for the <aide>

Put the footer along the bottom. The footer should occupy all 12 columns. The logo should again be formatted so that it floats left of the text.

Use the same formatting styles that you used in part 1. Thus, you will be importing (linking) both the grid 960 style and your own global.css file. If you cannot get the styles to mesh up perfectly, you may use embedded styles or inline styles. But try to keep them to a minimum.

Formatting (Part 3)

For this part (page), you must use BootStrap along with your own styles.

Start with the clean html file from part 1.

Using the manner of your choosing, import the bootstrap files.

Format the table such that it format's alternating rows differently, and supports hover.

Use the bootstrap technique to create the same 2-column grid from part 2.

Create the 1-column grid below the 2-column grid. This 1-column grid should render the footer.

Explanation / Answer

Global.css

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : Mar 23, 2018, 3:48:00 PM
Author : Prashant Tomer
*/

iframe
{

border:2px solid black;
margin-left: 1px;
padding: 1px;
}

table
{
background-color: #00ffcc;
font-family: sans-serif;
font-size: 12px;


}
body
{

background-color:#99ccff;
}
ul
{
margin: 0;
padding: 0;
list-style: none; /* for remove default bullet from list display */
width: 350px;
}
ul li a
{
display: block; /* display contents in block looks statndard */
text-decoration: none;
color:Black;
background: #00cccc;
border:2px solid #ccff66; /* decorate the border with color */
border-bottom: 0;

}

ul
{
margin: 0;
padding: 0;
list-style: none; /* for remove default bullet from list display */
width: 320px;
}


li:hover ul
{

display: block;
}

a:hover
{

background-color: aqua;
}
footer
{
background-color: black;
font-size: 12px;
color: aliceblue;

}

formtting.html

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="global.css">

</head>
<body>

<table>
<th ><a href="UseFrames.html">Home</a></th>|<th><a href="services.html">Services</a></th>|<th><a href="products.html">Products</a></th><th><a href="contactus.html">Contact us</a></th>
</table>

<iframe srcdoc="<center><h3>E-Learning System</h3></center>" name="Headerframe" width="90%" height="70"></iframe>
<iframe src="nav.html" name="NavigationFrame" width="25%" height="500"></iframe>
<iframe name="ContentFrame" width="65%" height="500"/>
</iframe>




<footer>Copyright@ABC Consultancy</footer>
</body>

</html>

services.html

<!DOCTYPE html>

<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table>
<th ><a href="UseFrames.html">Home</a></th>|<th><a href="UseFrames.html">Services</a></th>|<th><a href="UseFrames.html">Products</a></th><th><a href="UseFrames.html">Contact us</a></th>
</table>

<p>Panchatantra stories are the oldest surviving fables from Ancient India. These colourful stories from the Panchatantra have spread all over the world for centuries, especially as bedtime stories for kids. We present here, a list of our versions of 60 such popular short stories from the Panchatantra, in English. Although dividing the Panchatantra into individual stories takes off the essence of its nested interludes, the following short stories include pictures and moral messages, especially for kids.</p>
<footer>Copyright@ABC Consultancy</footer>
</body>
</html>

products.html

contactus.html

<!DOCTYPE html>

<html>
<head>

<link rel="stylesheet" type="text/css" href="global.css">
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table>
<th ><a href="UseFrames.html">Home</a></th>|<th><a href="UseFrames.html">Services</a></th>|<th><a href="UseFrames.html">Products</a></th><th><a href="UseFrames.html">Contact us</a></th>
</table>
<p>Panchatantra stories are the oldest surviving fables from Ancient India. These colourful stories from the Panchatantra have spread all over the world for centuries, especially as bedtime stories for kids. We present here, a list of our versions of 60 such popular short stories from the Panchatantra, in English. Although dividing the Panchatantra into individual stories takes off the essence of its nested interludes,
the following short stories include pictures and moral messages, especially for kids.</p>

<footer>Copyright@ABC Consultancy</footer>
</body>
</html>

Navigate

Introduction For this activity, you will visit one of two sites and record your

Introduction For this lab, you will be using the do-while loop. The structure fo

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Introduction For this assignment, you may use any content that you want. I would

Question

Explanation / Answer

Related Questions

Navigate