On 8 Feb, 21:57, Christopher Glenn <x...@y.zwrote:
I have very basic html skills.
So improve them. C'mon, you're a PhD - How hard can it be? 8-)
It's not a bad site. Could be better, but can't they all. Content
looks OK, and that's where the legwork is. The rest is just
presentation.
I suggest a complete make-over, rather than a quick fix. It's not that
hard, for a few days study you get a new skill and you get a site that
you can build on afterwards. Do it with CSS rather than tables. Good
reading to start with is the O'Reilly "Head First HTML with CSS &
XHTML" , maybe Lie & Bos' "Cascading Style Sheets" too as a reference
to keep around afterwards.
So read the book, get yourself a usable text editor (NOT a WYSIWYG
like Dreamweaver) and a copy of Firefox with the HTML Validator
extension. It'll take you a day to learn what you're doing, and an
hour to fix each page. Web search first for a few ready-built CSS
layouts (bluerobot or glish.com might be handy)
* Start by opening up your page, running the HTML Validator and Tidy's
"Cleanup" on it, then saving it in your new site directory.
* Strip out all the old HTML tags by replacing them with a <ptag.
Change everything inside the <bodyinto a <pexcept for a few: Leave
<i>, </i<band </balone. Leave <aand <imgalone. Replace all
the <font>, <li>, <center>, <brand get every last trace of the
<tablestuff for sure! Leave the <hrfor the minute.
* Lose the presentation attributes from the remaining tags. Everything
from <bodyAnything that says color, align or border. Keep width and
height on <img>
* Add a HTML 4.01 Strict doctype declaration to the top
* Link in your CSS stylesheet (which you downloaded from the "2
column" example site). Put the stylesheet in a separate directory off
root, something like "styles" or "assets"
* Move all the image assets that are common to the whole site (page
background images, graphics) into this directory too. Throw away all
the images that are just decorated text.
* Now take a look at it. You should have a perfectly valid and
rather ugly page. Use Tidy to check and clean it until it's perfect
(turn anything you don't understand into a <p>)
After each step now, check that it's still valid and keep it this way!
* Replace the lists of <alinks for the menu with a proper list as
<ul... <li<a ... ... </a</li... </ul>
* Do the same for the bottom menu. Lose the "|" separator characters
* Lose the <imgfrom the menu items and replace them with plain text.
* Lose the <imgfrom the section headings and replace them with plain
text inside <h2... </h2>
* Replace all repeated <p><pwith a single <p(even stripping
whitespace between them)
* Replace href="http://www.glennresearch.com/gradstud.html" with just
href="gradstud.html"
* Replace href="mailto:cg****@glennresearch.com" with
href="mailto:cglenn@glennresearch.com"
(this reduces some spam-scraping of addresses, although a proper
mailto form handler is better)
* You'll probably have a couple of <divelements to add, according to
how the 2 column stylesheet worked - maybe a big one called <div
class="content" or something wrapping up most of the page apart from
the menu. Add some class attributes. Also put meaningful class names
on the <ulmenu lists.
* Now start working on the semantics of your markup. If there's a
block that makes sense as a conceptual unit, mark it up as such. The
copyright statement in the footer is one, as are the nav menus. Use a
<div(if they haven't already got a suitable element like <ul>
wrapping them). Make sure that these also have suitable class
attributes to identitfy them.
* Adjust the CSS until it looks right. Do the two-column thing first,
based on your example stylesheet (this should be easy, just make sure
you've used the right class names etc.)
* Adjust the CSS for the menus. Make the top menu a vertical list,
with each link in its own bordered box. You don't need those block
images any more.
* Do the CSS for the bottom menu. Use display:inline; etc. to get it
into an inline list (search, you'll find plenty of examples)
* Use your newly learned L33T CSS sk1llz to present the copyright
footer how you want it.
* Style the background by changing the CSS applied to <body>. Now tone
it down a few notches, because it looks a bit 1997 stars-and-stripes
homepage and it really _doesn't_ look like a modern professional
services site.
Do all these CSS changes in the stylesheet, not the page. Keep
validating, and validate that CSS too!
Note the left side table tiles or repeats towards the right side of
the screen, but the text does not, so it cannot be seen under the
graphic.
* Oh, that stuff. Your two column example ought to cope with that, but
if not, then look into the CSS property for background-repeat. Try
this:
body {
background: white url("chris2_bg.jpg");
background-repeat: repeat-y;
background-position: center;
}
* Adjust the CSS for cosmetic effect.
* Read Joe Clark's site on web accessibility and pay attention to it.
You're almost there by now anyway.
* Come back and tell us how it's going.
