I wonder why whoever designed this site did not use CSS? What prevents designers from using CSS?
It wasn't until about three years ago that browsers who could handle advanced enough CSS became plentifull enough to design sites in CSS. CSS layouts are only compatible with standards compliant web browsers and Internet Explorer versions 5.0 and newer for PC and Mac. I mentioned Internet Explorer (abbreviated IE) separate from standards compliant because Micro$oft has yet to fix about a thousand freakin' CSS rendering bugs. But CSS layouts are still very feasible with IE.
As for specific browsers, CSS layouts work in:
Internet Explorer 5.01, 5.5, 6.0 on PC, 5.0, 5.1, and 5.2 on MacOS9 and X.
Mozilla versions 1.0 and newer
Firefox and Firebird
Netscape 7.0 (6.2 for the most part)
Safari 1.0 on Mac OS X
Opera 7.0 and newer (6.0 for the most part).
The above browsers cover roughly 98% of the people who surf the Net. The IE 4.0 and older crowd is virtually non-existant and the Netscape 4.0 - 4.8 crowd is simply crazy for using that feces-inspired piece of software :D
The kicker with CSS layouts is that the design is separate from the content. Older browsers don't get the advanced CSS files like the standards crowd does. That means your content is still available to older web browsers, but the design is hidden. On the MJW site I listed above, you could surf that site with IE 2.0 if you wanted and the content would still be available.
Not that a lot of people use IE 2.0 :rolleyes:
Another benefit is that your site could only need three CSS files to completely control the layout and presentation for the screen media, print media, and handheld devices.
You could have 1,000 pages on your site, make a change in one CSS file and every page will exhibit that change. No more opening every HTML page, editing the HTML, and reloading the page on the server one-by-one. That's a huge time saver for the future.
Generally, HTML file sizes can be reduced by 35% or more if you use a table-less CSS layout. The CSS and HTML files equal about the same amount of data, but the CSS files get cached by your Web browser for later use. If you go to a different page that calls for the same CSS file, your browser doesn't have to download the CSS file again. It just uses the same one it downloaded with the previous page.
That saves bandwidth for site owners and download times for users.
And since your markup would be semantic (marking up headlines in heading tags, paragraphs in <p> tags, lists in <UL><LI> tags) it's easier for search engines to tell what the most important content on your page is. The Google search bot all but ignores meta tags anymore. It pays attention to the H1 - H6 tags, P tags, LI tags, and so forth. Text directly inside DIV or SPAN tags gets "read" too by the search bot, but the words inside DIV or SPAN tags are ranked lower in importance because DIV and SPAN tags are meaningless - they are merely containers.
What do you call those areas of left hand scrolling text boxes?
I assume you are talking about the Tour pages. The left-hand scroll boxes are created using a DIV tag and CSS. The DIV tag is set to a height and width, and the overflow property in CSS is set to "auto." That tells the browser to create vertical or horizontal scroll bars, depending on the direction that content overflows the sides of the DIV.
The scroll bar is placed on the left using the CSS text-direction property. Recall that most Western European written languages are read from left to right, but that Hebrew is read from right to left. The text-direction property allows you to set the direction for text for precisely that reason (though the text direction is configurable in IE I believe).
By default, we read text left to right and the horizontal scroll bar is placed on the right. The scroll bar is located where our eyes stop reading a line of text. The scroll bar gets placed on the left by setting the text-direction property to "rtl" (Right To Left). The scroll bar appears where your eyes would stop reading when reading text right to left.
On the tour pages, I set the text direction back to ltf (Left-To-Right) in a DIV that was inside the DIV with the width and height set.
<div id="bodyCopy">
<div id="bodyCopyBox">
<p>This text is scrollable, but read left to right and the
scroll bar is on the left.</p>
</div>
</div>
The bodyCopy DIV has the width and height set. It is also scrollable. I set the text direction to read right-to-left, which places the scrollbar for bodyCopy on the left. In bodyCopyBox, I reset the text direction to left-to-right.
TEMPLATES AND CSS
Templates work very well with CSS. Now we may be thinking about two different types of templates: Dreamweaver and PHP/ASP/JSP templates.
PHP (Hypertext Pre-Processor), ASP (Active Server Pages), and JSP (Java Server Pages) are actually HTML pages with some additional markup that is read by a Web server before the page is sent to the Web browser. And actually, the previous are scripting languages, but the scripts are contained withing PHP, ASP, or JSP tags, much like HTML tags. The server then follows the instructions contained within the additional markup and replaces those instructions with HTML. The browser gets a complete HTML page and doesn't know that the PHP, ASP or JSP markup ever existed. And neither does the user :)
Dreamweaver templates are created by the Dreameaver webpage building program. Altering the templates files causes Dreamweaver to open every page your site and change real HTML pages according to the changes done in Dreamweaver. If you web site has a small number of page, like 20 or so, this would be a pretty easy content management system. If you've got more than 20 pages and numerous sections, go for the server-side approach and use PHP, ASP or JSP. You can dynamically write every aspect of every page and pull the main content from a database if you want. You could do a google search for content management system and see what you get. You might find the SMARTY template engine usefull (http://smarty.php.net/). It runs on PHP and is fairly easy to create templates with. But these templates are not Dreamweaver templates.
Tell your webmaster and web dev committee that Dreaweaver templates are not the best way to go. Use a server-side scripting language like PHP to dynamically write the pages and use a database to store the main content for each page.
Now, back to the topic at hand. CSS-based designs involve four parts: 1) The HTML file. 2) CSS files. 3) JavaScript files, and 4) Multimedia (images, graphics, Flash, etc). The HTML file makes requests to the Web server for the other three types of files. So, you can have a template that tells the browser to fetch a style sheet and have a single style sheet format whatever the template contains. It's really easy.
Help me understand that site a little better. Is it a template?
Nope. Each page is an entity in and of itself. I'd like to make it a template-driven site, but I don't have the time.
I realize CSS and liquid layout, etc. is best.
Yes and No. Read the articles Elastic Design (http://www.alistapart.com/articles/elastic/), Typography Matters (http://www.alistapart.com/articles/typography/), Reading Design (http://www.alistapart.com/articles/readingdesign/) and CSS Design: Size Matters (http://www.alistapart.com/articles/sizematters/) at A List Apart. You want to keep text at about 10 words per line. A liquid layout can create too many words per line (as bad as too small text) or too few words per line. Using the same design philosophy I used at the MJW site, you get around that. The text and layout resizes in proportion to the change in text size. Head to the MJW site and resize the text in your browser via the View menu to see what I'm talking about.
I'm working on transforming the Print Read text to Web Scan text (using bullets, numbered lists, removing "a" and "the" and any unessential words, from "Please consider filling out the form so we'll know you plan to attend this event" to "Fill out form to reserve your seat," for example).
You want to be carefull. Readers want clear and consice writing. That still means complete sentences :) But you've got the right idea.
Stay outta trouble college student.
Dedicate every single brain cell to wisdom, so you can laugh at the losers who've wasted their intellect in partying too hard.
Like me. Ooops. Hope my wife doesn't read this. :)
Beer is for the weekends and bowling on Monday. Sleep is also for the weekends :D
And yet, the first sign of intelligence is knowing what you don't know and finding a way to figure it out, which you've done a fine job at so far :)