Newbie with questions. . . HTML & Graphic

I’ve built a page that contains both html and graphic features. It looks fine as long as you don’t increase the size of the (html) text. If you enlarge the text, it “breaks” the graphic that is serving as an outline of that part of the page. I’d like the outline of the page to move with the text and vice-versa. . . is that possible?

To further complicate matters, I am working with several text boxes. I plan to add a text box of links in the left column of the page. I tried using just html boxes, but whenever they overlap, I lose my text. I’m sure there is a way to accomplish what I’m trying to do. . . unfortunately, I’m still in the early stages of learning FW.

Here’s the page in question: http://home.comcast.net/~buck-test-site/newhere.html

All suggestions and/or insights are appreciated!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Take a look at this thread - http://www.freewaytalk.net/thread/view/39884

There are two sample files you can download and play with to see how it was put together. Pay attention to how all the html boxes are inside (inline) one main box. This is basically what you want to do. The issue that is still going to defeat you is the graphic text. Graphics do not increase in size when you enlarge text as you have seen. If you absolutely have to use graphic text then plan your site as a grid keeping the graphic text elements in separate boxes that stay out of the way of text boxes. Overlapping boxes shouldn’t be necessary if you plan wisely.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks for the reply, Chuck. I checked out the thread you suggested, and I am doing my best to understand it. A quick question for you. . . You mentioned that all the html boxes are inside (inline) one main box. Is that main box a graphic box, or an html box?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It is an html box.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’m trying to wrap my mind around all of this, but much of it is still quite new to me. Check out this website, which serves as much of my inspiration for my own:

How did they manage to get the graphic image (picture of the people) to fit right up to what is under it. . . namely, the gray outlined boxes that serve as the containers/frames for the html text that is inside? More specifically, how does that container expand to accommodate the text if you increase it’s size?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ok, the simplest way to begin thinking about a site like this is to break it down into a grid made of boxes. This site has a header area with a text menu, lets call that the first box. Next comes the BIG graphic button below it in the second box. Below that are boxes 3 and 4 side by side with the one on the left having only a text menu, and the one on the right having the bulk of the text content. Below those is the 5 box or the footer area. And to keep them all related to each other they are all inside one box that covers the entire page.

I was going to write a long explanation about how to do this page, but instead lets do something very simple just to get used to the “box model” kind of page design.

  1. Starting on blank Freeway page draw an html box that covers the whole page. Lets call that the parent box. Click inside the parent box so that you get a flashing cursor, then got to the Insert menu and insert an 4 html boxes.

  2. Select the first box and set it’s width to 100% in the Inspector pallet, and its background color to red. This would be the header area on your page.

  3. Select the second box and in the Inspector pallet set its Float to Left and it’s width to 40%. Set it’s background color to blue if you like.

  4. Select the third box and in the Inspector pallet set it’s Float to Right and it’s width to 60%.

  5. Select the fourth box and in the Inspector pallet set it’s Float to Left, it’s width to 100%, and it’s Clear to Both.

Once that is done, select the parent box and click on the height setting icon in the Inspector pallet so that the box height can shrink to fit the content.

That is a whole page layout in very simplistic terms. You can add anything to each of those boxes you want including graphics objects. For example, you could put that giant graphic button in the top box by inserting a graphic object inside of it, then import the photo inside the graphic object.

Play with the concept. The boxes can be any size, just keep them in a “grid”. It takes some getting used to using Float and Clear but you’ll get the hang of it with a little experimenting.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Ah. . . thanks for putting the cookies on the lower shelf. I think I’m starting get the hang of what you’ve been describing. I downloaded the sample files you referenced (purl-design) and can see how you’ve laid out everything. I love the the moo: Effect on Load! Is that an Action that’s available for anyone? Very cool!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The Effect on Load is part of the MooTools Suite action. http://www.coastalrugs.com/Actions/

Very handy and well written. Downside to it is the fact that the javascript library it uses is incompatible with the Scriptaculous library that Freeway comes bundled with. It’s a minor problem, you just have to remember to not use both libraries on the same page at the same time.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On Sep 23, 2008, at 11:53 AM, chuckamuck wrote:

The Effect on Load is part of the MooTools Suite action. http://
www.coastalrugs.com/Actions/

Very handy and well written. Downside to it is the fact that the
javascript library it uses is incompatible with the Scriptaculous
library that Freeway comes bundled with. It’s a minor problem, you
just have to remember to not use both libraries on the same page at
the same time.

So to get the effect in concert with other Freeway effects, you could
use the Attention FX Action (core in Freeway 5). There’s a setting
for when the effect should fire, and you can make that “On Page
Load”, which will get you the desired timing.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walter. . .

Do you have time for another question? On the below page (see link), if you click on Location and Service Times under THE BASICS, why doesn’t the link formatting work? I used the Text Link Style Action and have the hover set to a different color and underline, and the active set to a different color.

The link itself works, but no formatting. Am I using the wrong action?

http://home.comcast.net/~buck-test-site/newhere.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The link style action (and Freeway 5’s native link styling, too)
doesn’t work with graphic text. If you want to use this action,
you’ll need to turn this link into a normal text link.

The Action itself is only needed in Freeway 4 and previous. Freeway 5
allows you to set object-level link styles: just click on the
containing text frame and click around in the Inspector until you see
the link styles section.

Walter

On Sep 24, 2008, at 1:55 PM, Buck wrote:

Thanks Walter. . .

Do you have time for another question? On the below page (see
link), if you click on Location and Service Times under THE BASICS,
why doesn’t the link formatting work? I used the Text Link Style
Action and have the hover set to a different color and underline,
and the active set to a different color.

The link itself works, but no formatting. Am I using the wrong
action?

http://home.comcast.net/~buck-test-site/newhere.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Got it! Thanks!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Chuck, how would you set up your boxes if you wanted three columns under that big pic box that goes across the top?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 29 Sep 2008, 5:30 pm, Robert Bovasso wrote:

Chuck, how would you set up your boxes if you wanted three columns under that big pic box that goes across the top?

Make the first two column boxes Float Left with no clear, then make the last column Float Right and Clear left. The trick to making them fit side by side is the width percentage. Play with different amounts till you find the one that works.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Actually, making the last box Float Right Clear Left makes it jump down a bit. Float Right Clear None makes it fit on the same line as the other two boxes.

Will that work OK?

I’m really trying to make an attempt to use the CSS Box Model method, but there doesn’t seem to be a lot of flexibility when designing. It seems hard to add or insert things after the fact.

Now, with these boxes made, do you insert more boxes to add text and graphics or add them to these boxes directly?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Try Float Right for the first box you add, then Float Left for the second box you add. Clear is optional on both of these. If you want to add a third box, to appear below both of these boxes (regardless which one is tallest), make it Float Left, Clear Both.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

OK. Basically I want a box at the top, 3 columns (boxes), and a box at the bottom.

Is it better to use percentages rather than pixels?

Should the heights be clicked off to alow for them to grow if someone makes the text bigger?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Actually, making the last box Float Right Clear Left makes it jump down a bit. Float Right Clear None makes it fit on the same line as the other two boxes.

Will that work OK?

Yep, that works.

I’m really trying to make an attempt to use the CSS Box Model method, but there doesn’t seem to be a lot of flexibility when designing. It seems hard to add or insert things after the fact.

Yes the box model takes more rigid planning based on the concept of using a grid to form your layout, but the benefit is any size increase in text content does not destroy your layout. It merely grows to fit size increase.

Now, with these boxes made, do you insert more boxes to add text and graphics or add them to these boxes directly?

I don’t think I understand the distinction you mentioned between the two, but yes keep inserting. Does not have to be html objects. Graphics or tables can be inserted into html divisions just as Action items can be.

Just to be clear, the point of inserting in-line objects in html boxes is so that they stay oriented to each other even when text around and within them grows.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks, Chuck…

What I mean as far as to insert or not, can I start typing in any of these boxes I have just made or bring in a graphic, or should I insert another box into one of these already made and type or bring a graphic into that one?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Is it better to use percentages rather than pixels?

I wouldn’t say better no, it is just more flexible for widths of browser windows which you have no control over. You can use pixel amounts also.

Should the heights be clicked off to alow for them to grow if someone makes the text bigger?

Yep.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options