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.
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.
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>
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>
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>
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>