–– workshop home ––

Workshops

Advanced Web, Part 2: Presenter Notes

Introduction

Background Images

Concepts

Just as you can set a background color, you can also set a background image, for any block-level element.

Options and Syntax

The default is that the image will tile to fill the viewport, but there are options that let you control this.

[element] {
   background-image: url([path]/[file].[ext]);
}

Note that there are no quote marks around the filename.

Examples

div.featurebox {
	background-image: url(/webcenter/images/somepic.jpg);
}
body {
	background-image: url(/webcenter/images/bg3.gif);
	background-repeat: repeat-x;
}

Background properties:

Exercise

File Transfer

Concepts

You edit files locally then upload to a server.

Ideally you upload to a test server, approve, then publish to production. But we don't have that environment in place yet.

FTP = File Transfer Protocol
SFTP= Secure File Transfer Protocol

There are many programs that do one or both. At Boise State we require SFTP.

The program we'll use in this workshop is FileZilla.

You set up a profile, which holds your user name, the name of the server, and optionally the path to both the remote and the local folders that hold your files. Then all you need do is click on the profile name.

Once connected, you get two windows: one local, one remote. File transfer is then simple.

Some FTP programs warn you when you are about to overwrite a file; others don't.

Setup for this Workshop

Server name is: www.boisestate.edu

Port: 22

Protocol: sftp (also SSH)

Username: your user name

All else stays at default

Exercise

Server-Side Includes

Concepts

Text or HTML or even scripts that gets included by the web server prior to the page being sent to the browser.

This lets you develop a library of standard pieces that get re-used by multiple pages across the site. When the standard piece changes, all pages using that piece appear to update automatically (on Refresh).

Syntax

	<!--#include virtual="/[path]/[file].inc"-->

The best way to show you this is to look at a completed site. I now introduce you to Mars Technical College.

Here is the completed site:
Mars Technical College

SSI Exercise

Building the Mars Technical College website

Review of the Files

Setup

First Steps

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

I'm anticipating on the colors. In real development you'll wind up futzing with these values. But turning off underlining and then activating it on hover, that's a behavior I use in nearly all my websites.

Collapsing the borders on tables is another standard practice, so common that I make it part of my "starter" stylesheet.

The Home Page

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;
}
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

Concepts

CSS supports many media types, including projection devices and printers.

A print stylesheet probably should be in place for any and all of your pages.

A projection stylesheet would be useful for pages used in a classroom setting; alas, few browsers handle that media type. Once they do, I would use it to limit image size (for example).

Exercise: add a print stylesheet to the Mars site.