If you look through the CSS code I posted here, you’ll see two CSS
“rules” one for an a tag, and the other for the :hover pseudo-class of
that a tag. First, some basic terminology. All CSS tags boil down to
these parts:
selector {
attribute: value;
}
Everything outside of the curly-quotes is the selector – the part of
the rule that does the matching against your document, looking for
things to apply itself to. Everything inside the curly-quotes is
attribute:value pairs, separated by colons and terminated by semicolons.
Selectors have three basic elements: tag names, class names, and IDs.
There’s an additional layer of specificity possible, because you can
have more than one of each separated from the others by a space or a
special character like a + or >. You don’t need to worry about this
part right now, but I mention it because you may see it later. Tag
names are going to be things like p, h1, span, div, td – the basic
building blocks of HTML. Classnames in a selector will be preceded by
a dot, like .foo or .bar. IDs are preceded by an octothorp (#) like
#nav.
Combinations of these selector “nouns” make it possible to make a rule
apply only to very specific elements. For example, you could have a
style called div.foo and another called span.foo. Both have the
classname ‘foo’, but because they are preceded by the exact tag that
they apply to, they can be different rules, with different visual
styles produced.
You might do this in a hand-coded CSS style sheet because you wanted
to cut down on repetition. So you might do this:
.foo { color: blue }
span.foo { text-decoration: underline }
div.foo { font-size: 36px }
And you would end up with both span.foo and div.foo having blue text,
with the other local differences only applying to the div or span
variants of that class. You wouldn’t need to add color:blue to either
of those variants, because it would be covered by the less-specific
classname.
When you’re looking at a CSS rule that you see on the Web or that
someone posts here, you have to do a little bit of translating into
Freeway.
If you’re in the Edit Style dialog, you build up the selector portion
using the Tag and Name fields.
If you’re trying to create a complex selector, such as something you
found on line that was coded long-hand, you would enter the entire
selector into the Tag field, tab into the Name field, delete whatever
was there, and then tab out to leave that field blank. This is
referred to as a tag-only style in Freeway parlance. The other
specific thing about this type of style rule is that you must never
actually apply it to anything. By leaving the name field blank, you
signal to Freeway that it must always publish this rule, and by
building up the selector by hand, you are making the deal with Freeway
that you know what you’re doing and that you are pretty sure that
there are elements in your page that will match.
If you use the Name field, then you’re creating a classname-based
style, and you will need to apply it to something in order for Freeway
to publish it into the page. In that case, you don’t enter the leading
dot in the Name field – Freeway will do that for you. If you choose
or enter a proper name of a tag in the Tag field at the same time,
then you have done something that’s a little bit orthogonal to the way
CSS usually works, but is native to how Freeway works. In Freeway, you
don’t enter the actual HTML tag for a paragraph or a header, you just
type some text and select it and style it. When you create a style
that includes the H3 tag, for example, and you apply it to a block of
text, you’re actually changing that text into an H3, along with
whatever other visual style you add in the process.
Once you’re in the lower half of the Edit Style dialog and are
changing the properties of the style, you are editing the inside part
of the rule – the part found inside the curly braces of any CSS you
find written out. Many of the normal CSS attributes are present in
this dialog, but a few of them are named differently in the interface
than the real CSS attributes. So if you see a rule in CSS that
includes the line-height attribute, you’ll just have to know to
translate that into Leading in Freeway-ese. Space-before in Freeway
equals margin-top, Space-after is margin-bottom.
So if you find yourself unable to locate a particular attribute in the
Freeway interface, you may need to add it yourself (or ask for the
translation).
To use the Extended dialog, simply press the Extended button in the
Edit Style dialog. You’ll see a popup window with a list of existing
attributes (probably none if you’re just starting this process). When
you click New in that window, you’ll get yet another layer of modal
dialog with two fields: Name and Value. You enter the attribute name
(minus the colon) in the Name field, and the value (minus any trailing
semicolon) in the Value field. So if you see a CSS attribute like this:
margin: 0 0 4px 8px;
You would put
margin
in the Name field, and
0 0 4px 8px
in the Value field. Okay out of the stack of dialogs, and preview to
see your new style. Note that you most likely will not see anything
that you entered using Extended within the Design view of Freeway,
only the attributes that you can enter using the normal interface. So
you’ll have to click over to the Preview mode to see them for real.
Now there’s one last wrinkle, getting back to your original question.
I have given you the general case here, which means anything you build
using the Styles palette and its various dialogs and sub-sub-sub-
dialogs.
The Link Style dialog, accessed by clicking on the More… button in
the Link Style segment of the Inspector, presents a subtly different
form of this same Edit Style dialog. Instead of there being the Tag
and Name fields, there’s a list of the cardinal points of a link on
the left, and a cut-down form of the Edit dialog on the right.
Thankfully there is also an Extended button to get you access to the
really tweaky settings.
So to set up the link styles, you’re going in through that door rather
than the general-case Styles palette, and you’re going to choose
a:link, and a:hover from that list on the left, rather than creating
tag-only styles to do the same thing.
Walter
On Feb 22, 2011, at 4:48 PM, Julie Maxwell Allen wrote:
How do you put those in extended?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options