Viewing details of messages, sorted by time of last reply ("sticky messages" first)
CSS editor -- the easy way
Creating a style sheet is no different. Alll the pros use special purpose software to create their style sheets, so why shouldn't you.
I'm not saying this tool is the best. However, it covers most basic needs and it is FREE.
TopStyle Lite .
The HELP panels provide some basic info to get you started.
Michael....
Watching web pages load
I've been adding comments to a thread in the Eons Advisors group on Eons Slow Loading
Eons Slow Loading
I thought members of this group might be interested in seeing details on how web pages load and a performance measuring tool that helps commercial sites fine tune their pages to give a better customer experience.
I was using a free tool called free version of HttpWatch, which monitors how each of the resouces on a page loads as well as the overall time it takes a page to load. Page load time is affect by a number of things including connect time, download time, and various wait times. The HttpWatch tool displays each of the timing increments in a different color.
First, here is the color chart to identify the various time increments per resource.
color chart
The free tool doesn't generate an HTML version of the report, so I had to capture it via screen grabs. The report shows the sequence in which the resources on the web page were requested, the time increment from the initial request [remember the browser downloads the HTML first, then issues additional requests base on what's inside], and the time increments for each resource load. Near the bottom it shows the total load time for the page and number of bytes loaded. In this case, 20.047 seconds to load 78271 bytes of resource data.
These first two screens shots show the basic load information.
screen 1
screen 2
In this second set of screen shots, I'm using the same data as above, but have elongated the time charts to better see the colored time increments.
screen 1 expanded
screen 2 expanded
Michael....
Photobucket -- off topic
Several of you have mentioned that you use Photobucket. I'm kind of a "how it works" guy, so I thought I would pass this How Photobucket Works link along for any of you Photobucket users.
Also, near the top right of the first page is a link to play a video about the 'Incredible Photosynth' -- a nice preview of photography in the future.
Michael....
Using the sandbox you already have
Using the sandbox you already have
[Place your text here]
Did you ever wish you had a place to store a web page or snippet of code so that you could experiment with HTML or CSS? Maybe create content and refine it over several days before posting? Good news! You already have such a place -- your computer.
'Web browser' is a misleading term because it implies that it is [only] for reading documents stored on the Internet. More accurately, it should be called 'software that processes and displays documents containing HTML and CSS, no matter where they are stored'.
The documents you view in your web browser do not need to be on the Internet! They can also 'live' on your PC/MAC hard disk.
Try this experiment:
1] Surf to Michael's sandbox page -- [www.botos.com/eons/sandbox.html]
2] In your browser, click on FILE | SAVE PAGE AS and save the web page on your hard disk.
note: Exact process varies slightly by browser and PC/Mac. Use a name like 'sandbox.html' .
3] Next, open up the document you just saved in your favorite editor
4] Change the 'Place your text here' words on line #11 with anything you want.
5] SAVE your changes and CLOSE your editor
6] Then open the file in your browser [usually you can do this by just double clicking the file name in your folder display].
7] You should see the changes to the document that you just made.
8] Enjoy your sandbox !!
Michael....
Graphic examples of style affects on a page
CSS [that first 'S' is for STYLE] tells a browser how to present/display the various parts of your HTML document. How should the browser present a header? Color? Font? Size? etc. And the same with all the other document parts.
This is one of the best sites I've seen to help get this concept across. www.w3schools.com/CSS/demo_default.htm On the left hand side, slowly click each of the 'with style' links, 1 thru 5 and notice how the presentation changes but the content stays the same.
If you are working on an entire website, you usually create a single 'style sheet' that you reference on each page of your site. If you are just doing single pages or postings, you can use 'in-line' style commands that only affect the given page or a section of the page.
Michael....
CSS 'Drop Cap' example
This is my Drop Cap example....
Basic code copied from www.mandarindesign.com/troops.html# alphabetblocks
Do 'view source' to see the code necessary to accomplish this. Experiment with the settings in the STYLE definition. The M example has the style keywords on separate lines to help you identify them. The 'Michael' example makes some glaring changes to be sure you notice them!
M ichael likes to play with little snippets of code. Here is a sample. I set the overall paragraph width to 400 pixels. Next I placed unique styles on the SPAN tag, to control the presentation of the character 'M', which is the first letter in my name. I could also do my entire name. [see below] Just a little more text here so that you can see how it wraps around the drop cap.
Michael likes to play with little snippets of code. Here is a sample. I set the overall paragraph width to 400 pixels. Next I placed unique styles on the SPAN tag, to control the presentation of the characters 'Michael'.
Getting started with CSS
Cascading Style Sheets is a main entry point to CSS info on the About.com site. Lots of links here to good CSS info.
One of the links not to miss at the above site is the How to Start Work on a CSS Web Page link.
Or, if you are just looking for some 'neat' style ideas you can use on your own site, you should check out
Using CSS to Do Anything: 50+ Creative Examples and Tutorials
Michael...
