"So what are Web Standards?"
Web Recommendations Standards
- XHTML 1.0 or higher
- CSS Level 1 & CSS Level 2
- DOM Level 1 & DOM Level 2
- ECMAScript 262 (current JavaScript)
http://www.webstandards.org/about/
The word 'Recommendation' is there because the W3C can not force people to follow their suggestions. Therefore, replace the work with "Standards".
Image Replacement
<h1><span>HighEdWebDev05</span></h1>
h1 span {margin-left: -999em;}
h1 {
background: transparent url(images/logo.gif) no-repeat;
height: 106px;}
The benefits of IR is that screen readers (and search engines) can read the content of the page, while still rendering the appropriate display as the design dictates.
UW-Milwaukee Structure
- Four basic elements to UW Milwaukee's webpage:
- Header
- Menu
- Body
- Footer
To begin this project, we looked at the current UW Milwaukee website to see how the page was laid out, to determine the div structure.
Milwaukee, like most websites, has a clear header, menu, body and footer. We laid out these four basic divs, and a wrapper div to enclose everything, and started working.
Header
Two elements to the header: The title and quicklinks
The header has two elements: The title and quicklinks. The title was easy, just an image wrapped in an anchor tag pointing toward UW Milwaukee. I gave the header a height of 72px and a black bottom border of 8px to mimic the current header on UW-Milwaukee
Header
Quicklinks
- IR Technique - "Quick Links"
- LI Technique - two rows of link lists
The quicklinks has two elements, the title "quicklinks" and then the links themselves. For the title, I used the fir technique to replace an h3 with the quicklinks image that's currently on the UW Milwaukee page.
I organized the links in two unordered lists, a top row and a bottom row. Styling the lists, I lined them up and gave them a border left of 1px, so they would be separated like on the current page.
Search
- Repeated background image:
- Styled input tags
- Slanted left border, a styled label tag containing this image:
The next element down the page was the search field. the way that it was set up on the current website, there was a slant on the left side, as well as a bottom black border of 2px. This was hard to replicate, because of the nature of DIV's, If I had done a black bottom border, it would have run past the slanted left border, so I had to do two images, and fake a border.
Title
- IR Technique
- Positioned to line up with the search bar on the right and the side bar on the left
To mimic the title on the UWM webpage, I used the fir technique on an H1, and positioned the h1 to line up to the top and connect with the search bar
Sidebar
- Linked image for the athletics logo
- Styled unordered list with a custom bullet image
- Repeated image to create a faux column
I used the technique described on A List Apart to create the faux column down the left side, and in it, made a styled unordered list and an image linking to the athletics department.
Bottom
A div was placed at the bottom of the content containing the image above to re-create the bottom of UWM's current webpage
Footer
The footer information was placed inside an address tag, which was floated left, and a span, which was floated right.
End Result
The end result is a new CSS design, that will stretch correctly while maintaining the look and feel of the original design.
CSS Ninja attacks UWM
Code Walk-through
Now is the time we look under the hood of the re-design and see what was accomplished.
CSS Ninja Attack
Questions?
