–– workshop home ––

Workshops

Advanced Web, Part 2: Exercises

Background Images

  1. Download background.html.
  2. Add silver.jpeg as a background to the floatbox.
  3. Make the background repeat to fill the floatbox.
  4. Add n800.jpg as a background to the body.
  5. Make the background repeat vertically.
  6. Change that to repeat horizontally.
  7. Make the body background position at 200px horizontally and 100px vertically.
  8. Add no-repeat.
  9. Add background-attachment: fixed and see what happens when you scroll the window.
  10. Remove the background from the body but keep the floatbox background.
  11. Put the n800 background on the table instead.
  12. Remove it from the table. Put it on the table headings instead.

File Transfer

  1. Open FileZilla and get logged in. You might want to write down the steps you followed.
  2. Download the mars folder and everything under it (it's in the files folder)
  3. Upload all the files (but not the mars folder itself) to your personal folder.
  4. What happens when you try to upload a file to some other folder?

Server-side Includes

Building the Mars Technical College website

Overview

  1. Build the home page first. Add the main menu, header, and footer as divs.
  2. Once you have the formatting right, pull the content out into include files and add the appropriate directives.
  3. Put the styles into main.css
  4. Validate
  5. Create the secondary pages, adding specialty styles as needed
  6. Validate
  7. Create print.css.
  8. Validate

Setup

  1. Download all of /mars to your desktop
  2. Upload all of that folder to your assigned number on boisestate.edu/webcenter/workshops/advanced2/yournumber
  3. Browse to your new MTC home page

From now on, you will be editing locally, uploading to this location and viewing this location

First Steps

  1. Edit main.css and add a body section. Set margins to zero, select a sans-serif font family, and set the line-height to 2.5ex.
  2. Edit index.shtml and add a link to the stylesheet. The link needs to be to your folder on the server (see above, Setup).
  3. Upload the files to the correct folders.
  4. View

All subsequent editing will follow this same basic cycle.

Styling the home page

Set some more standard styles
a {
	color: #841;
	text-decoration: none;
}
a:hover {
	color: #eeb;
	text-decoration: underline;
}
table {
	border-collapse: collapse;
}

No need to upload yet because nothing in the above would yield any viewable change.

Create the Includes

Normally you would create these elements directly in the home page and then extract them to separate include files. I'm saving you the typing.

  1. Add header.inc to the home page. Where will you put it?
  2. Add footer.inc to the home page. Where will you put it?
  3. Upload index.shtml and main.css to their respective folders.
  4. View
  5. Make sure you recognize the header and footer.
  6. Make sure the link in the footer exhibits proper behavior on hover.
  7. Now add mainmenu.inc. Where will you add it?
  8. Upload and View
  9. Add an include call to slogan.inc inside the header.
  10. Upload (you'll be uploading header.inc) and View

This gives us our includes, but the layout is all wrong. We need to do some styling!

Style the Includes
Footer

Add these lines to the main stylesheet:

/* Footer */
div#footer {
	border-top: 3px double #500;
	border-bottom: 1px solid #500;
	clear: both;
	margin-top: 5ex;
	text-align: center;
}
div#footer h6 {
	font-size: 1em;
	letter-spacing: .1em;
	margin: 1.5ex;
}

The border and such did not appear because while we have an include file called footer, and we have a style with that name in the main stylesheet, we have not actually invoked the div. We need to edit footer.inc.

  1. Edit footer.inc
  2. Add a div with the correct id
  3. Upload and view. Aha!
Header

Add to main.css:

/* Header Styles */
div#header {
	height: 75px;
	text-align: center;
}
div#header h1 {
}

Then add the div to header.inc, same as you did for the footer.

Navigation

This one is trickier. Here's the code:

/* Navigation */
div#mainnav {
	float: left;
	margin-right: 1em;
}
div#mainnav ul {
	list-style-type: none;
}
div#mainnav li {
	font-weight: bold;
}

Once again, you'll have to add the call to the style in mainmenu.inc for it to work. And upload, of course.

Main Content Area

Next comes the main content. We need to make it flow around the main menu.

/* Content Styles */
div#content {
	margin-left: 27%;
	margin-right: 2em;
}

In this case, we need to add the div directly to the index.shtml file and upload that (as well as the edited stylesheet).

The Feature Box

You can call it newsbox or featurebox or floatbox. Doesn't matter. It's the first of our specialty styles, so we'll put it at the end of the stylesheet.

/* Specialty Styles */
div#featurebox {
	border: 1px solid #000; 
	background-color: #fed; 
	float: right; 
	font-size: .8em; 
	line-height: 2ex;
	opacity: .6; 
	margin-top: 5ex; 
	margin-left: .8em;
	padding-left: .7em; 
	padding-right: .7em; 
	width: 21em; 
}

Once again, we need to add the appropriate div statement into index.shtml so the style takes effect.

Slogan

This is another specialty style. I've made it a class because the slogan may get used more than once on a page.

.slogan {
	font-style: italic;
	font-size: 1em;
	font-variant: small-caps;
	font-weight: bold;
	letter-spacing: .3em;
}
A Little Background

Finally, let's add a background to the page, on the body tag.

	background-image: url(/webcenter/workshops/advanced2/files/mars/images/marsbg.jpg);

Extending the Site

Add the necessary code to style all the other pages at the site.

There will be some specialty styles you will need to add.

  1. Staff Table
  2. Caption for the picture on the Undergraduates page.

Stylesheets for Printers

  1. Add a call to print.css to all the files.
  2. View each file and then Print Preview each file