HELP with modular page layout

Freeway
1

I’ve been messing around with undefined CSS html boxes. I have been trying to make a layout consisting of two vertical boxes (side by side) and one horizontal box below the two, spanning the width of both (http://www.scriptedlizard.com/files/layout.png).

What I’ve experienced is that for the two top vertical boxes, I can paste any type of image or CSS box inline, and making each of the two main boxes height undefined, the box will shrink/grow when people make the text larger. So that works.

The problem is that for the horizontal box below the two, even if I make that undefined height, and then place all three boxes in one large, undefined height box, the two vertical boxes will grow, but they won’t push the bottom horizontal box down, so when you enlarge the page text, the two vertical boxes just flow over the bottom box.

Is there a way, as I have the layout pictured (http://www.scriptedlizard.com/files/layout.png) to have the undefined height top boxes to push down on the bottom box when they grow? Again, I had these three boxes in one large undefined height box, and I was under the impression if I put any items in an undefined height box, that all items would be pushed down.

Another thing, I noticed that when I start putting CSS html boxes inline, such as a menu, I lose the ability to have those items updated from the master page. The “use master content” and “use master settings” options for the boxes I inline are no longer there. Is there a way when you inline a CSS box to be able to have that info still updated?

The desktop publishing layout style of Freeway Pro is great, however I’m finding that once people start increasing the text size, the layouts can get killed quite quickly. Now I know why Apple doesn’t let people customize their OS too much by way of first-party add-ons!

Are their any Freeway Pro templates out there that maybe show how you can get boxes to push one another down? Maybe in the format I’m looking to do?

Any help will be appreciated.

Thanks,
Bryan

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

2

Hi Bryan

Draw a table > 2 columns by 2 rows > now select the bottom row by clicking on the left most part of the border (this will then highlight the complete row) zoom in a little if the cursor won’t take.

Now hit ‘apple + delete’ or

menu > item > table > join cells.

You will then have the table built from which you can add padding, borders.

Hope this helps

Kind regards
RogerG

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

3

Go to anlabyroad.com

This will in part at least show you how to do this. First thing is to double-click on a blank page to get the flashing cursor, and insert an html item. Auto expand this box widthways, and drag the depth out to the page depth. This secures an overall page container box, and makes cutting and pasting entire page contents from one page to another very easy.

Inside this box, insert three others, a left box, a right box and a footer box, all inline. Float and clear them as the web page. As the text expands in either the left or right boxes, it should push the footer box down.

To get a gap before the footer box, a spacer box needs to be inserted - this is where pre-planning a page comes in! It can be done retrospectively though, by cutting and pasting each item that is below where the spacer box needs to be, onto a blank page. Insert the spacer box (full auto width, depth 20px), then cut the items from the blank page, and paste them back in again, rechecking their clears and floats.

If the left and right boxes needed to have the same background colour, but separate from the footer box colour, they would be inserted into a parent container box stretching full width. This box would then be given the background colour.

As far a master pages go - this box model method breaks automatic updating of content for inline items. Intensely frustrating, but there you are!

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

4

Thanks RogerG. After reading Ian’s post, I now know why I used tables for so long when I was still hand coding… they work.

Thanks for that great explanation Ian. It seems that going through all the trouble of making the pages “super flexible” in terms of resolution, text size, etc, is just going to make my life much more difficult. Basically, following the steps you provide take away one of the best features of Freeway, the ability to automatically update the content from the master page.

Maybe I should just make my page an image… LOL.

As it stands, there is no way I’m going to optimize my pages for the largest of text so everything can freely flow at the expense of wasting all of my time and not being able to do easy updates. I want to only use CSS as it’s much easier to control than tables, and tables I hear are going by the way of dinos.

No offense to people with disabilities, but I think I’m just going to design my pages to handle regular sized text, and maybe one increment of size enlargement. I can’t break the updating of content just to ensure the text can be seen at 600px. I have trouble enough making sure the pages looks good in all the major browsers.

Maybe CSS will get smarter someday and be able to interact with the browser window and “know” when it comes into contact with other CSS objects and move them down the line. Or Freeway designers will think of a clever way to do this by still letting us just drag and drop html boxes on the page.

I will check out the link you gave me Ian.

Thanks a bunch,
Bryan

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

5

Take a look at this link. Although it is three columns instead of two, it is a good example of the same concept from Big Erns that includes a download of the Freeway document to play with.

http://www.thebigerns.com/freeway/stretchilina/

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

6

Thanks chuck, that helped. I looked at the settings and was able to get my home page set up so that no amount of text enlarging breaks the layout. I didn’t have my float and clears set up properly.

The page is here: http://www.securepixels.com

The only downside as Ian pointed out is that my automatic content updating no longer works. So if I have this setup as my main content page template, any time I needed to update my footer menu, I’d have to manually change 20 pages or however many I had. Maybe for the next version, Freeway can auto update any content, no matter inline or otherwise.

I’m going to go experiment more and see what else I can do.

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

7

I wonder in what scenario or by what changes would a table page structured
layout cease to function - and whether this is likely sooner or later?

At the moment it seems it is outmoded as a method only by preference of
professionals. Yet for many uses remains simple quick and very easy with
Freeway.

It is so that peer pressures can make people unwilling to be seen to do the
things that are looked down on.

If anyone can develop a GUI to re-enable a more designer approach to CSS -
it’s Softpress. But the kinds of questions and issues arising here show that
there is a long way to go in some respects.

regards
Brian

Bryan Los said recently:

Thanks RogerG. After reading Ian’s post, I now know why I used tables for so
long when I was still hand coding… they work.

Thanks for that great explanation Ian. It seems that going through all the
trouble of making the pages “super flexible” in terms of resolution, text
size, etc, is just going to make my life much more difficult. Basically,
following the steps you provide take away one of the best features of Freeway,
the ability to automatically update the content from the master page.

Maybe I should just make my page an image… LOL.

As it stands, there is no way I’m going to optimize my pages for the largest
of text so everything can freely flow at the expense of wasting all of my time
and not being able to do easy updates. I want to only use CSS as it’s much
easier to control than tables, and tables I hear are going by the way of
dinos.

No offense to people with disabilities, but I think I’m just going to design
my pages to handle regular sized text, and maybe one increment of size
enlargement. I can’t break the updating of content just to ensure the text can
be seen at 600px. I have trouble enough making sure the pages looks good in
all the major browsers.

Maybe CSS will get smarter someday and be able to interact with the browser
window and “know” when it comes into contact with other CSS objects and move
them down the line. Or Freeway designers will think of a clever way to do this
by still letting us just drag and drop html boxes on the page.

I will check out the link you gave me Ian.

Thanks a bunch,
Bryan

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

8

I must do a test when I get time:

If I create a ‘footer’ box on a Master page, and then replace the entire footer box even for a small change, will that be a big enough change to get passed along the usual Master Page route? In other words, is there a tipping point at which an increasingly large change on a Master page using in-line items, will register that change and pass it down? I’m talking changes to the structure rather than just content here. Just a thought.

If the answer is ‘yes’ then careful master page construction could work. Alternatively, I could try positioning the footer elements in the footer box as non-inline CSS boxes - as per the traditional method of creating children boxes inside the parent footer box. The footer box may be an in-line item, but it’s child contents are not. My guess it that this all may be forlorn hope! I’ll see if I can get some time to mull this over and experiment in the next day or two.

Ideally a future update to Freeway will allow the flexibility we all crave! A prayer to the gods is in order.

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

9

Doing the box-model design approach isn’t that hard once you’ve used it once or twice. You just have to make sure your float’s and clear’s are right and then in this case set the float to none and both for the bottom container. It takes careful planning for the site layout, but even if you first did the site with just dragging and dropping you could convert it to a box-model by dividing your site into sections or boxes and then building it that way.

I often use the grid calculator here to determine my column width’s and such:

http://kematzy.com/blueprint-generator/

Perhaps a better screen-cast would help people understand it.

BTW, I do like the secure pixel’s site.

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

10

No, replacing the entire footer box doesn’t make a difference when
it’s inline. I’ve tried that already. The inline items just don’t
carry over.

But, what you could do is use a server side include and create your
footer on another page, then insert that into your footer . I have a
bunch of archives that get updated and they are across a number of
pages. Updating the master doesn’t work, so I use the server side
include. There are some issues with body tags … I can’t remember it
all, but there was a discussion about this on the list, and there is a
tutorial from Keith Martin here:

http://www.vortex.co.uk/content/tutorials/freeway/ssi/serversideinclud.html

He said it’s an old tutorial, but I followed it and it works great.
I’m using SSIs in a number of places on sites now.

Robin Stark

On Jan 30, 2009, at 12:40 PM, Ian Halstead wrote:

I must do a test when I get time:

If I create a ‘footer’ box on a Master page, and then replace the
entire footer box even for a small change, will that be a big enough
change to get passed along the usual Master Page route? I

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

11

Robin… SSI… haven’t used that in years. I actually used to rely on that back in the day, mid 1990s. With SSI I could change the entire look of my site in a day just by editing my header and footer file. Somewhere along the way I stopped using them, and I use the PHP include statement a little bit here and there.

Reading your post brought back all the great memories and cool things you can do with SSI and PHP include for that matter. That would solve my footer problem in about 2 minutes. In Freeway, within the footer, I would type the PHP command to include the footer file, and I would format that text as I want the footer to show. In my footer.php file, I would have the links I need.

I’m taking notes on all the issues I’m running into and how I solve them. I may do a screen cast on some helpful solutions that I have found out myself and through these forums. Definitely SSI and PHP include would be great for people, giving them a way to easily edit content within inline CSS boxes.

One of the first things I ever used SSI for was my copyright footer. I used to change by hand the year every new year.

I’ve been thinking too much in the future in terms of web design and CSS, etc. I think I’ll take a step back and think about what has worked for me for years. Between Freeway and the little tricks I used to use and all of my experience, I think I can have the best of both worlds-- a site that will “flow” no matter what browser being used or what text size being used to view, and being able to easily update my site. After all, the things I really need easy update access are menus, headers, and footers. Page content is usually unique to the page, and won’t need site-wide updating.

I think I’ll have some time tomorrow. I’m going to try and update some of my pages using the box model and PHP includes. I’ll post any issues.

Bryan

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

12

I love screencasts, Bryan. I wish everyone who made a Freeway
screencast would/could upload them to iTunes so we could subscribe to
them like we can the Freeway Moments.

Robin Stark

On Jan 30, 2009, at 11:19 PM, Bryan Los wrote:

I’m taking notes on all the issues I’m running into and how I solve
them. I may do a screen cast on some helpful solutions that I have
found out myself and through these forums. Definitely SSI and PHP
include would be great for people, giving them a way to easily edit
content within inline CSS boxes.

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

13

Robin- Adding the podcasts to iTunes is very easy. You just need the server to host the screencasts and the RSS feed to send to iTunes. FeedBurner is a great way to do that.

You got me thinking, I just may go ahead and do one and add it to iTunes. My Freeway knowledge is still limited, but if we got a group of people who would want to make some screencasts, I wouldn’t mind hosting them on my server and creating/maintaining the RSS feed. I think this could be a great resource to compliment the Softpress videos.

I’m busy today, but tomorrow I think I’ll play around with making and adding one to iTunes. This would be a win/win for me, as I would be learning something and helping out others.

If anyone is interested in maybe forming a “consortium” of screencasters here, or would like to contribute to something like this, email me at email@hidden. Just add “Freeway Podcast” in the title so I can sort it from the spam. It would be nice to take some cool/complex features of Freeway and make them more understandable, or just show how some of these Freeway actions work. Speaking for myself, I can read a page about how something works, but if I can see it in action I learn much faster.

Once I know more, I may add a new topic on this, so it’s not nested within this one.

Bryan

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

14

Have either of you seen FreewayCast? It’s all Freeway, all the time.
Anyone may upload a video and share it with the community.

Walter

http://freewaycast.com

On Jan 31, 2009, at 1:28 PM, Bryan Los wrote:

Robin- Adding the podcasts to iTunes is very easy. You just need the
server to host the screencasts and the RSS feed to send to iTunes.
FeedBurner is a great way to do that.

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

15

Gee, uh, no, I guess I haven’t seen that. I’ve seen some of the
videos, but I downloaded them from Dan J’s site. Well, I’ll be dipped.
I guess Bryan can load his videos there!

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

16

Sometime around 31/1/09 (at 15:06 -0500) Walter Lee Davis said:

Have either of you seen FreewayCast? It’s all Freeway, all the time.
Anyone may upload a video and share it with the community.

Great stuff it is too. But I think the request for providing video
tutorial content as iTunes-listed video podcasts is a very good one
indeed. Good, as in This Is A Great Idea That Should Be Done.

:slight_smile:

k

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

17

Great stuff it is too. But I think the request for providing video tutorial content as iTunes-listed video podcasts is a very good one indeed. Good, as in This Is A Great Idea That Should Be Done.

Seconded - but iPhone friendly format please. Some of the existing is not and I like to refresh myself in those little moments that arise when I am not at my Mac.

David

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

18

What format’s play on the iPods? Is it MP4 for any generation or what works best? I have all my original screen-cast’s and could just re-encode them to a format playable in a browser and in the iPhone.

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

19

I bet this is more info than you expected,
Three setups from Apple Compressor.

Dave

Name: H.264 for iPod video and iPhone 320x240 (QVGA)
Description: H.264 video @ 600 kbps, progressive, multi-pass. Audio is
44.1 kHz, stereo
File Extension: m4v
Estimated file size: 257.93 MB/hour of source
Device: iPod/iPhone QVGA
Frame sync rate: 5 seconds
Video Encoder
Format: QT
Width and Height: Automatic
Pixel aspect ratio: Square
Crop: None
Padding: None
Frame rate: (100% of source)
Frame Controls: Automatically selected: Off
Codec Type: H.264
Multi-pass: On, frame reorder: Off
Pixel depth: 24
Spatial quality: 50
Min. Spatial quality: 50
Key frame interval: 120
Temporal quality: 50
Min. temporal quality: 50
Average data rate: 0.6 (Mbps)
Maximum data rate: 0.768 (Mbps)
Audio Encoder
Format: MPEG4
Sample Rate: 44.100kHz
Channels: 2
Bits Per Sample: 16
AAC encoder quality: high
Data rate: 128 Kbps

Name: H.264 for iPod video and iPhone 640x480
Description: H.264 video @ 1500 kbps, progressive, multi-pass. Audio
is 44.1 kHz, stereo
File Extension: m4v
Estimated file size: 644.17 MB/hour of source
Device: iPod/iPhone VGA
Frame sync rate: 5 seconds
Video Encoder
Format: QT
Width and Height: Automatic
Pixel aspect ratio: Square
Crop: None
Padding: None
Frame rate: (100% of source)
Frame Controls: Automatically selected: Off
Codec Type: H.264
Multi-pass: On, frame reorder: Off
Pixel depth: 24
Spatial quality: 50
Min. Spatial quality: 50
Key frame interval: 120
Temporal quality: 50
Min. temporal quality: 50
Average data rate: 1.5 (Mbps)
Maximum data rate: 4 (Mbps)
Audio Encoder
Format: MPEG4
Sample Rate: 44.100kHz
Channels: 2
Bits Per Sample: 16
AAC encoder quality: high
Data rate: 128 Kbps

Name: H.264 for Video Podcasting
Description: H.264 video @ 1100 kbps, progressive, multi-pass. Audio
is 44.1 Khz, stereo
File Extension: m4v
Estimated file size: 472.51 MB/hour of source
Device: iPod/iPhone VGA
Frame sync rate: 5 seconds
Video Encoder
Format: QT
Width and Height: Automatic
Pixel aspect ratio: Square
Crop: None
Padding: None
Frame rate: (100% of source)
Frame Controls: Automatically selected: Off
Codec Type: H.264
Multi-pass: On, frame reorder: Off
Pixel depth: 24
Spatial quality: 50
Min. Spatial quality: 50
Key frame interval: 120
Temporal quality: 50
Min. temporal quality: 50
Average data rate: 1.1 (Mbps)
Maximum data rate: 4 (Mbps)
Audio Encoder
Format: MPEG4
Sample Rate: 44.100kHz
Channels: 2
Bits Per Sample: 16
AAC encoder quality: high
Data rate: 128 Kbps

On Jan 31, 2009, at 9:43 PM, Dan J wrote:

What format’s play on the iPods? Is it MP4 for any generation or
what works best? I have all my original screen-cast’s and could
just re-encode them to a format playable in a browser and in the
iPhone.

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

So I need to shrink them down for iPod format to 640x480? I guess out of all the specs that David listed (thanks for that).

How does one get one’s items onto the iTunes store? Would people watch them on their iPhone’s / iPod Touch’s if they were? Would it be beneficial to have a mobile version people could download on Freewaycast?

Just trying to get my video’s and my name out there.

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