Header-Tiled content-Footer

Freeway
1

Hi all!
After a long time debating between wysiwyg softwares, I’ve decided to chose and stick to a single one and learn it!

Before starting, I’d like to mention that, yes, I did googled and even searched the forum, but despite a lot of threads having to do with tiles, I did not find one that fully answered what I am looking for (of course I might have missed it)

I’m re-designing one of my website (to replace a simple scrolldown page which is starting to annoy me and getting heavy) with photoshop and plan on slicing and using those in FW.
I have no problem on the design side as I am fairly competent with PS.

My problem, after spending several hours trying in FW and searching answers on the web, is that I don’t see how to create a flexible “content” area (in the master page) that will lenghthen as I had content (in each individual pages).

I have a “header”, then the “content” below, and then the “footer” at the bottom.
I want the footer box to stay under the content box and descend along as the content gets longer, but so far my footer stays where I place it and the content just overlap over it.

I want to make the content area a 1px high horizontal line that would get tiled as I add content.

A “step-by-step” answer would be the best, seeing as I’m only beginning with FW and not used to the interface and terms yet.
Oh, and please no going into the html code, I chose a wysiwyg soft precisely to avoid that: I’m on the “design” side, rather than the “code” side :wink:

Thanks in advance and looking forward to see how far I’ll be going with this soft!

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

2

…Anyone?

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

3

Engel,

Is there any way you could upload a .png of the design you’ve laid out in Photoshop? We will be able to help you more once we know what effect you’re after.

Also, welcome to the world of Freeway!

Last but not least, a blatant self-promotion/plug that will save you time and stress: http://freewaysearch.calebgrove.com

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

4

Nice!! This will help lots. :slight_smile:

On Fri, Feb 15, 2013 at 12:33 PM, Caleb Grove email@hidden wrote:

Engel,

Is there any way you could upload a .png of the design you’ve laid out in
Photoshop? We will be able to help you more once we know what effect you’re
after.

Also, welcome to the world of Freeway!

Last but not least, a blatant self-promotion/plug that will save you time
and stress: http://freewaysearch.calebgrove.com

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

5

Thanks for the link, that will definitely come in handy!

Here is a link to the design:
http://www.angeltech.info/Resources/angeltechlayoutex.gif

*Red = part of the Master Page
*Green = content, different for each page, with greatly varying lengths
*Yellow = some on Master, some on individual pages (probably top part Master, and “post-it” texts or images leveled to what it refers to in the content area in individual pages)

The “see-through computer screen” background is what I want to tile, it’s an alpha, as it’s supposed to be a transparent and flexible computer screen.

I was planning on making the entire middle area a tiled, 1px high, horizontal image, on which I would had the left menu, content, and right column, and for the footer to lower down as I had content.

As a last piece of information, I am planning on re-making another website as a sister-site to this one, with the same kind of design (computer screen) only a different color theme (this one is “metal and blue lights”, and it’s opposite will be “carbon and red lights”), that’s why I was asking for step-by-step, in order to be able to replicate it myself ; )

Thanks!

(btw, upon checking the image link, I noticed an awful lot of noise in the image, is that due to the image type (png), how FW handles the upload, something else? the noise only showed up once online, it looks fine in FW)

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

6

Engel,

The easiest way to do what you’re trying to do would be to slice up the image in Photoshop and use those as your building blocks. You’ll want a slice for the header/navigation, another that includes the footer, and a 2px high slice of the entire width of the blue content area.

Do this all on a master page:

  1. Sketch an HTML box in Freeway, move it up to the top of the canvas, and open up the inspector palette. Go the the second tab (the one with the paintbrush) and choose the header slice that you exported from Photoshop. Set it to not tile. The links will have to be made with image maps.

  2. Now, do the same thing for the footer, but move it to the bottom of the page.

  3. Last but not least, sketch in another HTML item for the content area, and use the blue 2px high slice for the background image. Set it to tile vertically. While you have this selected (see the handles?) sketch three HTML boxes in it and arrange them as you like. These will be your content areas. Don’t put any content in the middle area, but add what you want to be global in the other areas.

You’ll have to experiment with the graphics settings to try and find a balance between size and quality, for Freeway will re-process all your images for you. Why did that image came out as grainy? Freeway turned it into a gif. To get the full scoop on how this works, read the manuals that come with Freeway.

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

7

I recommend at least a 25px slice in either direction, depending on the axis of tiling. 2px asks a lot of the local computer, browser, and video card, because it has to generate a full-size image out of many many slices, rather than only a few.

Walter

On Feb 16, 2013, at 12:51 PM, Caleb Grove wrote:

and a 2px high slice of the entire width of the blue content area

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

8

No problems with boxes sizing/positioning, and I tested links with image maps and so far so good.

2 problems though:

  1. the only place I can import a background image and have the tile option is the page background. There is no import and tile options for html/graphic boxes?
    I can still import slices through drag’n’drop in the boxes, but that still doesn’t give me the tile option for boxes in the inspector.
    I could just tile the background and put the header and footer on top of course, but I was hoping to be able to change the background independently
    (Also, if I tile the entire background, the tiled image shows up above and below the header and footer: I can solve that by not using alpha transparency anymore, but I’d still like to know how to tile just a boxe).
    After researching the matter (thanks to that very handy link), I get the feeling it should be possible to set individual background for each boxes, but I couldn’t find where/how.
    Also, in the “window” drop-down at the top, there are “tile”,“tile vertically”, and “stack” options, but these don’t seem to do anything except resize my work area, no matter what boxe I have selected?

  2. How do you get the footer to stay at the bottom?
    I can’t see an option to set the height to 0 from the bottom, or to have the footer box stay under the content when it stretches or something.
    The content just ends up overlapping over the footer which stays at it’s set height?

Here’s the link to the site:
http://www.angeltech.info/

I’m using it for testing and screenshots display purpose for the time being:
The first image is with a boxe for the content.
The second image is with no boxe for content but directly on the background: looks okay except the tiled background shows up in the top and bottom corners due to transparency…I’m probably better off forgetting transparency and going with a set background aren’t I?

I’ll keep searching and testing in the meantime, including image quality which I though I had figured out…until I uploaded my screenshots -.-’ …needs a bit more tweaking

I feel like a total noob… I’m usually pretty good at self-teaching myself softwares through tutorials and internet researches, but FW is giving a much harder time than I though. (still a lot easier than DW though :P)

I really appreciate you guys taking the time to help me, thank you!

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

9

Needs to be an Html box to allow tiling backgrounds.

David

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

10

For the footer, the best answer I found is that I have to manually drag it down as I increase page content (in Express) or use css (in Pro), but I want to stay away from css so I’ll stick to dragging it down on each page.
On that subject, can the page size increase by itself along with the content, or do I have to adjust it manually in the inspector as I have been doing so far?

@DeltaDave:

Well, unless there is a way to make an html box other than to use the “draw html item” command, I always have been using html boxes to begin with (which automatically turn into graphic box when I drag an image in it btw).

This is making me go crazy … -_-’ Everywhere I look on the net it says to just select my box, then in the inspector select my image and activate tile…but I don’t have a “select image” or “tile” option in my inspector, the only times I have it is when selecting the background. If it wasn’t for drag’n’drop, I wouldn’t even be able to insert an image in those boxes!

What the hell am I missing?! Is there some preferences to set up? Some “action” thingy to download? Are those options absent from the demo versions? (I tried both Express and Pro, same problem. if it’s just absent from the trial, I’ll buy a license, that’s not the problem here). I am at a total loss, it’s like I’m told “click X” but “X” doesn’t exist! HELP!

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

11

I think this is what you need

https://www.evernote.com/shard/s81/sh/83af9884-8932-408f-a6bd-2eed47248c5e/049d0a2f735bf298d388d2e8a3ff8364/deep/0/Screenshot%2018/02/2013%2018:00.jpg

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

12

Engel,

I just created a super-fast screencast that should answer your questions: - YouTube

I believe you can only do this in Freeway Pro, which is well worth the investment (you will never regret it), especially at the new $150 price point.

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

13

“I believe you can only do this in Freeway Pro” …Confirmed!

THAT is what was driving crazy, and opening my FWE file in FWP was the reason it didn’t work when I tried Pro before.

I just did it again, but with a NEW file directly in FWP, and it works…

THANK YOU!!! T_T * tears of joy *

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

14

Glad that I could help!

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

15

and opening my FWE file in FWP was the reason it didn’t work when I tried Pro before.

When you open an Express file in Pro the settings remain as they were when you set them in Express.

But you can change this.

An item that has a Blue bounding box is a Table positioned item and you cannot apply background images to it.

Instead - with the item selected - look in the Inspector and there is a check box where you can turn it into a Layered item and apply you bg image. (If it is an html item)

David

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

16

Hi again! Thank you all for your previous help!

After finally finding some time to work on my site this weekend, and thanks to you guys, the documentation, and that very handy FWsearch engine, I managed to get most of my Master as I want, however there is still one thing that I can’t figure out and that I need to get right before I start with the actual content:

As I have it now, my footer is stuck to the bottom of the -browser- window, not the actual -content- itself, which visually is pretty cool as when you move the browser window size you can “open and close” the “computer screen” of my design, however that effect wasn’t actually intended! I need the footer to stay where a footer is supposed to be, that is -under- the content.

To make it easier to understand I’ve uploaded the website, it’s easier to see on the “Creations” page: reduce your browser window height and then scroll down with the mouse. the content is -under- the footer, but the content is fine, it’s the footer that should stick under the content, not just at the bottom of the window

http://www.angeltech.info

I’ve also stuck a screenshot of the Master on the home page in case this helps.
I started not knowing that blue boxes meant FW was in table mode, so I checked layer in all the boxes afterwards and have now activated the css blue button. (I wanted to try making my page size automatic relative to content instead of having to manually adjust it on each page, hope that wasn’t a bad idea)

I hope you can understand what I’m trying to say :stuck_out_tongue:

(On a totally different topic, I was curious to know: can FW be considered a CMS? everytime I upload, does it upload everything, or just the changes I’ve made?)

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

17

Oh yeah, I forgot, I also wanted to ask if there was a way to spread out the menu to a specified width (to fill the space where it is). I went with a css menu rather than map link to image (for simplicity, I decided to do all text directly in FW rather than make it part of the .psd graphic)

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

18

I think your bordering on having to use an inline design, meaning boxes nested inside boxes. This design helps to make everything flow on the page, thus pushing your footer down with the content.

Short of that, you can use the RPL Action which simulates this inline design on output.

Are you in the Pro version? I think you mentioned bother earlier.

Bob

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

19

A reminder, here is a basic Freeway Pro 6 inline layout file you can use as
introduction to the subject:
http://cssway.thebigerns.com/products/inline-basic-layout/

–
Ernie Simpson

On Mon, Feb 25, 2013 at 10:09 AM, Robert B email@hidden wrote:

I think your bordering on having to use an inline design, meaning boxes
nested inside boxes. This design helps to make everything flow on the page,
thus pushing your footer down with the content.

Short of that, you can use the RPL Action which simulates this inline
design on output.

Are you in the Pro version? I think you mentioned bother earlier.

Bob

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

20

http://www.angeltech.info/ (maybe have to refresh)

left screen shot is the inline layout example inspector from the above post (thanks for the link btw :), right screenshot is from my inspector after attempting to use the same hierarchy.

I think I am totally missing something (probably the very meaning of “inline”, and quite possibly a lot of other things too), as no matter what I do I always have “layer”, “lock”, etc… whereas the inline example file has “css” instead? If i knew how to use css, I would’ve stuck with DW :stuck_out_tongue:

Also, I’ve read while researching about inlines that they aren’t compatible with MasterPage, is that actually true? Because my whole concept REQUIRES a master page, so if inlines don’t get along with master, then forget inline. MasterPage is the reason I choose FW in the first place.

I just need my footer to stay under my content as I expand said content, if that’s too complicated to do without some fancy tricks, please tell me right now: I was hoping to make a fully automatic Master on which I would only have to modify content on each pages, but if there’s no easy way around it, then I’ll just have to drag it down manually on each pages…

@Robert B

Since a few posts above, I’ve deleted the express demo and using the Pro demo instead. I gave myself the duration of the demo to manage to create a fully usable MasterPage, after which I’ll buy a license since I have to make another site using the same concept, and both site are the kind that gets updated a few times a year, and I’m planning on using FWP for that (hence one of the above questions, does FW re-uploads everythings, or just the modified files (cms-like)?). If I can’t even make a masterpage in a month, well… no point in wasting money on something I dunno how to use, right?

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