Inside Page Click to see FTP version

Behind the Scenes of the Zen Garden:  Bobby van der Sluis talks about how he went about making his site in accepting the “zen garden challenge.”  He did some research in the ground rules of the situation, and looked at designs in that category.  Stresses the importance of a good concept from the start.  Draw it out with a pencil and paper, then look at content flow.  This is where the story gets complicated for one such as I.  Once the writers start talking about code, it is hard to follow the narrative; even when you do get the gist of what is being said.
Still:  He had to make sure his concept fit within the existing markup.  In essence all he is changing is the look of the page.  On the other hand I don’t quite see how things like images and graphics can be changed just changing CSS. and it seems like graphics are a part of content.   So maybe the rules are not exactly strictly saying only CSS can be changed.
To Continue…Producing the design he does hand coding in a text editor and brings in the Photoshop images slice by slice.
Finally he test the design, which for him means validating the code.  Since I don’t know what that means, I can’t comment on it.
The whole article is a bit over my head but it does give a sense of what sorts of things I might be concerning myself with if I had any idea of what I was doing.  Sometimes in these “advanced” readings an idea gets into my head which actually is of some help.

Well, I must admit:  I haven’t had a lot of enthusiasm for this FOGE project, but I       guess going through the motions has built up a little bit of extra experience in the  trench.  Since I never got any critique or feedback on my page, I more or less stayed with my original concept; but did incorporate some things I heard about other peoples’ projects.  After all, I haven’t gotten too far from the original FOGE site, but hopefully, I did make a few small improvement. FOGE Homepage FOGE inside page example

Enjoy!!

Index |     Brewing Tea |    About us

Dreamweaver text:
This chapter gives some pretty basic introduction to formatting text with CSS Styles panel.
Shows how to edit the font list.
The Align pop-up menu for images is pretty cool…it sets the text to float around the image.  I notice, however, that in the code there is no “Float” property as mentioned in some of our other reading (See bold text below).  I guess there is more than one way to float something.
Lists: ordered, unordered and defintion.  Select and click option in the property inspector (or Text>list>)…Who knew?  I hope I can remember to use this if I ever have a list…I can just imagine myself doing it all by hand then remembering…Oh! Damn!
Flash Text.  Uses your fonts…they don’t have to be on the users’ computer, can create rollovers within Dreamweaver.
Pretty cool, like most of the stuff we learn here.  Just a little drop in the bucket, but who was it who said, “Give me a place to stand and I’ll move the world.”  One of those Greek fellows, no doubt.

Using CSS for Design
CSS has two parts:  The code and the reference to the code.
The two videos were at least brief.  The first was just introducing basic  understandings about CSS.  The second was giving some specific techniques to use in checking cross browser consitency.  They literally put me to sleep…I had to watch them twice.
CSS allows making global change to a document.
A CSS Rule has two parts:  A selector and a declaration (which has two parts a property and a value)  so I guess it is fair to say a rule has three parts:  A selector, a property and a value.  There are three categories that selectors apply to:  Tag, ID and Class.  ID (you can only have one example of an ID within a document) and Class (used to collect elements into sets) are specific…Tag is more general
Descendant selectors: YOW!  A space between two elements of a selector indicates a descendant relationship.

SKIP THE FOLLOWING RANT:
Once upon a time (many years ago {specifically: greater than 100, but less than 1000}) there lived in a cottage three sisters.
Sister one had long (When uncut\otherwise of moderate length) red hair, six missing teeth (which resulted in the loss of two of her suitors, but not the other six [who were indifferent or even attracted to a woman with missing teeth], and a red dress.  Sister two was actually a half sister but was treated better by most of the family than the two other sisters, and had short (once again, between haircuts it could be longer) brown hair and crooked but entirely present teeth.  She had a penchant for blue dresses in spring, red dresses at  christmas and brown dresses at all other times (excluding the festival of the summer solstice, at which time she always wore yellow).  Sister number  three was rarely heard from inasmuch as she lived in the cellar and never wore any clothes at all.  She simply draped herself in whatever rug or sheet was handy according to the season.  Her hair was entirely matted and no one knows the condition of her teeth.  Food was left at the cellar door as was water.  They lived happily ever after.

RESUME NORMAL READING.
If two rules are in conflict CSS will follow the one which is most specific or the one which is latest.
inheritance. a desendent element can inherit the characteristics of a parent element, but inherited characteristics are always overridden by specific directly assigned value.
Every element is contained by a “box.”  An em is related to the font size of the box..margin, padding, border, width.
Floating:  img.illu {float:left, margin 10 px 10px 10 px 10px;}
You can use floating to create columns, but if they get too close together one drops below the other. (a column doesn’t “lay”…it “lies”.  A dog lies by the fireplace, we lay the silverware on to the table) To fix this we can use negative margins.
Floating can cause alignment problems…this problem can be fixed using the “clear” selector.
If you want to float elements within a container, you need to float the container as well. This can result in the box going beyond the page width so the “overflow” property is used.
Lists can be used to create styled navigation bars.
Fonts can be sized in ablsolute or related to the size of the parent box.
Font families create a heirarchy of fonts for a brower to choose, depending on what the brower can display.
This reading took about 90 minutes…you can guess how much of it stuck in my brain.

These articles on CSS more or less cover the same material that was in the Dreamweaver book.  Inasmuch as it is hard to get a handle on CSS, the more different angles you can get on it the better.  At root, CSS doesn’t seem  particularly hard to understand; but the specific terminology and syntax is difficult for me to absorbe.  Just when I think I’m about to understand the relationship between rule, selector, declaration block, property, value, elements, tags, puedo-elements and so forth; another twist to the game rears it’s lovely head and I get all in a dither.  And the little ways these things are represented with commas, brackets, octothorpes and what not I’m sure will some day soon seem obvious and unforgettable; but in the meantime I feel like I’m walking on mental quicksand.  So excuse me if I have to laugh a bit to  myself when the author says CSS is good because it is easy and straitforward.

CSS and Typography:
Why CSS?  Easy, accessiblle, reliable and straightforward.  Sites are full of text and controlling the look is important.
Studies have show that margins and leading have a big influence on speed and comprehension in reading.
Use ems to size text.  go to  http://www.typetester.org/ to test your type…lets you see how different types look side by side and vary the various properties.
FLASH Presentation Typography and CSS. This, once again, goes over the same material in a slightly different way.  The more the merrier!
Readers first respond to layout then get into meaning of the content.
The layout is a balance and interplay of forms, patterns,spaces
Visual Heirarchy:  Relation between headlines and blocks of text, consitently applied cues, graphic accents and variety of emphasis
Differences between print and screeen typography:  Web is lower resolution, less available space, but more variability.
Stylesheets are a set of rules that control the look of a page,  Cascading Style Sheets allow flexibilty, accessiblity, ease of maintainance
and heirarchy in the control of appearance:  Text Properties, more consistent treatment with multiple browsers, block-level elements.

CSS Rules consist of a selector and a declaration block.  A declaration block is made up of a property and a value. A selector is a link between an html document and the style.  All html tags are potential selectors.

CSS groupings:  Multiple selectors, properties and values under one rule.

CSS Rules are stored in the Head of the document:  <head> CssRule </head> as are other things.

psuedo elements are used to address sub-parts of elements, and psuedo-classes address different element types.

Four ways to apply style: local, global, linked, imported.
Local:  Applies to one tag in one page.
Global:  Stylesheet at top of page will affect all the elements of the page
Link to an external stylesheet.
Imported Multiple stylesheets can affect the same document simultaneously

Web pages are about communication, he says and what is more central to communication than the written word?  The qualitites and characteristics are as much about the spaces between the characters as the forms themselves.  Kerning is adjusting the space between two specific letters. Tracking is adjusting the spaces between all the letters in a section of a document.  Leading (as in the metal: lead) is adjusting the spacing between lines.
The parts of a typography are baseline, cap height, crossbar, serif, meanline, bowl, descender, counter, stem, tittle terminal, ascender, leg, ligature, and x-height. All or any of these can be adjusted when designing a font; however we are not about designing fonts, but choosing them.  Mostly we should not use more than four fonts on a web page.  Larger type such as headlines can benefit from serifs inasmuch as the serifs provide a reference baseline…sort of like underlining.  In body text the serifs can clutter up the limited space, so a san-serif font should be chosen.  Other font choices are handwriting, which gives a human warmth without the errors of real handwriting, novelty and monospace.  Not to mention the dingbats, which don’t really seem to me to be fonts…just a bunch of little pictures.  Monospace is a font (such as Courier) in which all the spaces are the same.  Like on a typewriter.  Novelty types are more like bits of artwork, very specific to a particular use.
One can buy or download free fonts online if the fonts included in ones program are inadequate.
Though there are large numbers of fonts available, not all will display on the web.  There are 9 “safe” fonts:  Arial, Arial Black, Courier, Comic, Georgia, Impact, Times New Roman, Trebouche MS, and Verdana.  Using CSS one can create a heirarchy so that if one chooses a font which is not available to some browser, it will drop down the hierarchy until it gets to one of the “safe” fonts.  One way to guarantee that a Font will apear as designed is to publishi it as an “image.”  This can be cumbersome, however, in cases where the content changes often.  There is also a method called sIFR (scaleable Inmann, flash replacement), which used flash programing to present font.

Another major point discussed in the chapter was relative sizing:  the body text is defined and all other text is expressed as an em percentage.   This seems like going back to…could be very useful

In choosing a font, start with a clear idea of the feeling you want to express.  Then lay out maybe a dozen variations of the same text in different fonts.  After this you can begin to narrow the field until you get to what seems your best choice.  Seek some input from other people.

One final note:  Not all characters on the keyboard will work in html coding.  I’m not sure how relevant this is to the topic, but worth noting.