COURSE NOTE - ABOUT THIS PAGE AND THIS SITE:

This is an Example Page For Introduction to Web Site Design and as such shows the essential look to the site you are expected to produce as your overall class project (resulting from going through several exercises). Your own site should look pretty much like the example site, without this note, of course.

You obviously don't want the same title, your name isn't Mike Strong and you don't want this little note at the top.

For an older technique, click on this link to see this page using a table for text arrangement.

This is designed with CSS to change shape and arrangements as the display device changes from desktop to tablet to phone. To get an idea of the effect on a phone you can simply narrow the window (drag the right boundary leftward). This kind of morphing has gone by various names, the earliest being to deform gracefully, then responsive design and adaptive design. They have the same basic idea.

Mike Strong's

World Wide Web Site - Lesson Example

In the menu below we've used an unordered list combined with CSS to create a horizontal menu with a dropdown panel. Each link and dropdown is formed within an <li> tag. The CSS for this is covered elsewhere to show you how it works. You will be expected to created a similar menu for your own site.



In the examples below we are using a CSS class we wrote and named "sectionbox" and adding in one or two other CSS classes we wrote to add to the baseline behaviour. The classes all start with a . (dot) as the first character. Also note that I've written a standard behavior for the img tag so every image can be scaled and will show up with a box shadow. I did not write this one as a class so it will affect all image calls.

<style type="text/css">

.sectionbox {
   display: inline-block;
   margin-top: 15px;
   padding: 15px;
   max-width: 840px;
   height: auto;
   border: 1px solid red;
   box-shadow:5px 5px 18px #333333;
}

.colct-2 {
	column-count:2;
}
.colct-3 {
	column-count:3;
}
.colrule {
	column-rule: 1px solid grey;
	column-gap: 20px;
}


img {
    max-width: 100%;
    height: auto;
	margin-bottom: 5px;
	box-shadow:3px 3px 6px #333333;
}

</style>

NOTE: To better see how each of these examples looks on a phone, drag the right side of the window to the left to narrow the window to a phone width.

DIV set up as a single column (the usual which scales better downward to phone sizes)

Uses the class: sectionbox this way
<div class="sectionbox">


Kansas City Two Steppin' on the Vine at the Jazz Museum (photo Mike Strong)

Learn by Copy
Use the View Source Code option to check out how pages operate. Then Copy, Paste and Adapt ("View" menu and "Page Source" option).

Two of the most important reasons why the World Wide Web took off so rapidly and grew faster and more in months than the internet (and its precursors) did in its 20+ years of existence at that point are:
1) browsers were made so that anyone could view the source code and
2) the HTML source code was simple enough that even non-technical people could create pages with simple tools.

Viewing source code is learning by example.

When you see a web page you think is interesting, view the source code - look "under the hood" - to see what makes it work.

This is the home page example for Introduction to Web Design at UMKC (by Mike Strong). It is intended as a very simple starter page to give you an idea of what is wanted for the various exercises in these courses.

The header and links as show above are what I expect to see for your assignment site. Include all the extra material you want. It is your site, after all.

This is a web design course. It includes both the functional mechanics behind certain usages and the graphical appearance of the site

This course use your existing site space at UMKC (all students and staff at UMKC have this, though few know about it or ever use it)./p>


DIV set up as two columns

Uses the classes: sectionbox and colct-2 this way
<div class="sectionbox colct-2">


Kansas City Two Steppin' on the Vine at the Jazz Museum (photo Mike Strong)

Learn by Copy
Use the View Source Code option to check out how pages operate. Then Copy, Paste and Adapt ("View" menu and "Page Source" option).

Two of the most important reasons why the World Wide Web took off so rapidly and grew faster and more in months than the internet (and its precursors) did in its 20+ years of existence at that point are:
1) browsers were made so that anyone could view the source code and
2) the HTML source code was simple enough that even non-technical people could create pages with simple tools.

Viewing source code is learning by example.

When you see a web page you think is interesting, view the source code - look "under the hood" - to see what makes it work.

This is the home page example for Introduction to Web Design at UMKC (by Mike Strong). It is intended as a very simple starter page to give you an idea of what is wanted for the various exercises in these courses.

The header and links as show above are what I expect to see for your assignment site. Include all the extra material you want. It is your site, after all.

This is a web design course. It includes both the functional mechanics behind certain usages and the graphical appearance of the site

This course use your existing site space at UMKC (all students and staff at UMKC have this, though few know about it or ever use it)./p>


DIV set up as three columns

Uses the classes: sectionbox and colct-3 this way
<div class="sectionbox colct-3">


Kansas City Two Steppin' on the Vine at the Jazz Museum (photo Mike Strong)

Learn by Copy
Use the View Source Code option to check out how pages operate. Then Copy, Paste and Adapt ("View" menu and "Page Source" option).

Two of the most important reasons why the World Wide Web took off so rapidly and grew faster and more in months than the internet (and its precursors) did in its 20+ years of existence at that point are:
1) browsers were made so that anyone could view the source code and
2) the HTML source code was simple enough that even non-technical people could create pages with simple tools.

Viewing source code is learning by example.

When you see a web page you think is interesting, view the source code - look "under the hood" - to see what makes it work.

This is the home page example for Introduction to Web Design at UMKC (by Mike Strong). It is intended as a very simple starter page to give you an idea of what is wanted for the various exercises in these courses.

The header and links as show above are what I expect to see for your assignment site. Include all the extra material you want. It is your site, after all.

This is a web design course. It includes both the functional mechanics behind certain usages and the graphical appearance of the site

This course use your existing site space at UMKC (all students and staff at UMKC have this, though few know about it or ever use it)./p>


DIV set up as three columns with vertical rules between columns and a 20-pixel gap between columns

Uses the classes: sectionbox, colct-3 and colrule this way
<div class="sectionbox colct-2 colrule">


Kansas City Two Steppin' on the Vine at the Jazz Museum (photo Mike Strong)

Learn by Copy
Use the View Source Code option to check out how pages operate. Then Copy, Paste and Adapt ("View" menu and "Page Source" option).

Two of the most important reasons why the World Wide Web took off so rapidly and grew faster and more in months than the internet (and its precursors) did in its 20+ years of existence at that point are:
1) browsers were made so that anyone could view the source code and
2) the HTML source code was simple enough that even non-technical people could create pages with simple tools.

Viewing source code is learning by example.

When you see a web page you think is interesting, view the source code - look "under the hood" - to see what makes it work.

This is the home page example for Introduction to Web Design at UMKC (by Mike Strong). It is intended as a very simple starter page to give you an idea of what is wanted for the various exercises in these courses.

The header and links as show above are what I expect to see for your assignment site. Include all the extra material you want. It is your site, after all.

This is a web design course. It includes both the functional mechanics behind certain usages and the graphical appearance of the site

This course use your existing site space at UMKC (all students and staff at UMKC have this, though few know about it or ever use it)./p>

 

Home | Bio | Blog | Pictures | Links | Contact