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.
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.
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?
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?
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.
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.
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.
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.
Select the third box and in the Inspector pallet set it’s Float to Right and it’s width to 60%.
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.
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!
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.
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.
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?
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?
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.
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?
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.
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.
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?