FreewayTalk

26 replies to this thread. Most Recent

Warner

15 May 2009, 3:49 pm

[Pro] Freewaytalk Website

Hi all,

I would like to put together a website modeled after the freewaytalk website. I am a novice web designer and do not do any hand coding at all. Is it possible to put together a sophisticated site like this one in FW5 pro without a lot of hand coding? If so, can you recommend any sources of information that would help me get started?

Thanks, Warner

waltd

15 May 2009, 4:05 pm

Do you mean modeled after it in terms of layout, or in terms of how it works (subscribing itself to one or more mailing lists, maintaining a “inbox” for each subscribed member where they can read and reply to the proceedings of each mailing list as if it was an ordinary Web forum)?

Walter

On May 15, 2009, at 11:49 AM, Warner wrote:

Hi all,

I would like to put together a website modeled after the freewaytalk website. I am a novice web designer and do not do any hand coding at all.

Freeway user since 1997

http://www.walterdavisstudio.com

Warner

15 May 2009, 4:24 pm

I would like to model a site after the layout but also, to a certain extent, the way it works. I would like to have a number of categories similar to the ActionsDev, FreewayTalk categories on this site that would lead to a list of topics which would, in turn, lead to a discussion thread. If I could get that much going I might look at mailing lists, etc. later.

Warner

waltd

15 May 2009, 6:14 pm

This site is built using a LOT of magic. Every page is different for everyone who visits it, and all the navigation, pages, links, etc. are built on the fly by the server.

On that server, there is a MySQL database containing separate tables for the forums, threads (discussion topics), messages, and people. (There are additional tables that manage the complex inter- relationships between messages and who has read them, too.) When you visit a “page” (air-quotes, because there are no pages in this entire site, only templates and data to fill them) you are setting in motion a complex application that reads the URL, decides what you want, asks the database for the latest content that matches your request, and populates a set of templates with that content. There’s an entire other layer of the application that decides whether you are allowed to see that content in the first place, and doesn’t even show you a link to it if you aren’t, and shows you an error if you try anyway.

If you’re not trying to do the same trick (scrape a mailing list and turn it into a Web site), then you can probably get started with something simpler, like WebYep or sNews, both of which have been written up heavily in this and other Freeway mailing lists.

If you wanted to build one of these things from scratch, you would need a lot of programming experience, and this might be a step too far for a first lesson in server-side application development.

If you want to mimic the layout of the page, that’s incredibly easy in Freeway 5 Pro:

  1. New document, XHTML Strict, 750px wide.
  2. Move to the master page, double-click on the page to access the PageDiv, and select Insert / HTML Item from the main menu. With that element selected, set its width to 100%, and give it a background color (this forms your header bar).
  3. Double-click inside the header so you see a flashing text cursor, and insert another HTML item in it. Give it a width of 750px and margin of auto. This forms the centered header over your page.
  4. Double-click below the header so the flashing text cursor is visible (barely) to the right of your header. Again, Insert / HTML Item. Make its width 100% and give it a white background. This is the middle stripe of the page.
  5. Double-click inside the middle stripe and insert another HTML item inside the stripe (not outside it). Set its width to 750px, and its margin to “auto”. This will form the centered content area for your pages.
  6. Double-click below the middle stripe and add a line of text to form your footer. Set it to align center, and you can use the Space Above setting to give it some “air” above it.
  7. Give the page a background color using the Inspector. This will form the stripe of color behind the footer, and give all pages shorter than the browser window the look of a “shelf” of color at their bottom.

Now you can move to your regular pages, and update them with content. You’ll need to build everything as an inline layout (which is the road this outline takes you down). There are a lot of threads here about that technique, and even some video demos.

Hope this helps,

Walter

On May 15, 2009, at 12:24 PM, Warner wrote:

I would like to model a site after the layout but also, to a certain extent, the way it works. I would like to have a number of categories similar to the ActionsDev, FreewayTalk categories on this site that would lead to a list of topics which would, in turn, lead to a discussion thread. If I could get that much going I might look at mailing lists, etc. later.

Warner

Freeway user since 1997

http://www.walterdavisstudio.com

Warner

15 May 2009, 6:50 pm

Thanks Walter. Trying to recreate the same type of site is definitely way out of my league. The layout part, I understand and I have seen some of the video tutorials that deal with inline layout techniques. It’s the functionality part that I don’t know anything about.

I was hoping there would be a fairly straight forward way of creating functional discussion groups and threads. I’ll give WebYep a look but, like I said, I’m a novice and so far I have not been able to glean the basic understanding of how to implement WebYep, or even what, exactly it is from the threads I’ve read. I guess it’s time to take a closer look.

Thanks for your help. Warner

DeltaDave

15 May 2009, 6:56 pm

An option here is to use a server based solution like YABB http://www.yabbforum.com/ - which many hosting companies offer bundled with their packages.

Not as easy to get to look like your site but no coding as all the hard work has been done for you.

David

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

waltd

15 May 2009, 6:58 pm

There are a lot of different discussion group Web applications out there, many of them are free to use (but take some learning to figure out how to implement them on your server). This site is special, and home-grown, because of the need to support e-mail as a foundation element, not an add-on or sidecar. I have not found another forum software that takes e-mail as seriously as I do.

Other systems you might like:

There are also services that do this sort of thing for you, you supply your templates and pay them a monthly, and they keep the thing running and somewhat spam free. Google for “hosted forum service” for lots of likelies.

Walter

On May 15, 2009, at 2:50 PM, Warner wrote:

Thanks Walter. Trying to recreate the same type of site is definitely way out of my league. The layout part, I understand and I have seen some of the video tutorials that deal with inline layout techniques. It’s the functionality part that I don’t know anything about.

I was hoping there would be a fairly straight forward way of creating functional discussion groups and threads. I’ll give WebYep a look but, like I said, I’m a novice and so far I have not been able to glean the basic understanding of how to implement WebYep, or even what, exactly it is from the threads I’ve read. I guess it’s time to take a closer look.

Thanks for your help. Warner

Freeway user since 1997

http://www.walterdavisstudio.com

Warner

15 May 2009, 7:28 pm

Thanks again Walter. I needed a place to start and these links you provided look promising. I’m not dumb, just ignorant :)

Warner

DeltaDave

15 May 2009, 7:33 pm

Walter said

If you want to mimic the layout of the page, that’s incredibly easy in Freeway 5 Pro:

  1. New document, XHTML Strict, 750px wide.

  2. Move to the master page, double-click on the page to access the PageDiv, and select Insert / HTML Item from the main menu. With that element selected, set its width to 100%, and give it a background color (this forms your header bar).

  3. Doub……….

Walter I was just running through this method and cant seem to quite get it to work following your steps.

Could you post a pic/diagram (one of your famous schematics) showing how the different HTML items will look in the Page/site palette.

David

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

waltd

15 May 2009, 7:50 pm

Sure. I’m making a little demo doc right now.

Walter

On May 15, 2009, at 3:33 PM, DeltaDave wrote:

Walter I was just running through this method and cant seem to quite get it to work following your steps.

Freeway user since 1997

http://www.walterdavisstudio.com

waltd

15 May 2009, 8:06 pm

http://scripty.walterdavisstudio.com/freewaytalk.freeway

I took it a little further, there’s nested boxes inside the main nested box in the middle “slice”. Make sure you look at it with the page hierarchy showing in the Site panel (that’s how I saved it — it should stick).

This took literally minutes, but as with anything to do with the Freeway inline layout model, it helps a lot to have figured out precisely how you want to do things first.

Walter

On May 15, 2009, at 3:50 PM, Walter Lee Davis wrote:

Sure. I’m making a little demo doc right now.

Freeway user since 1997

http://www.walterdavisstudio.com

DeltaDave

15 May 2009, 9:27 pm

It is always the Floats and Clears that get me - never mind the margins - taking your example apart has helped my understanding of it.

Many thanks Walter

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

Ian Halstead

15 May 2009, 10:29 pm

On 15 May 2009, 9:27 pm, DeltaDave wrote:

It is always the Floats and Clears that get me - never mind the margins

D

Here’s a real teaser:

http://www.carnegiehull.co.uk/floattest.html

The upper white box with the padding and border hasn’t expanded to take account of the two inline child boxes, despite the two smaller boxes being properly contained within it. As soon as I give the white box a left float, it expands properly. I now know how to avoid this problem but don’t understand why it occurs!

The two white boxes look identical when viewed on the working Freeway page. Only when they are rendered does the problem manifest itself.

Insanity is hereditary. Your children pass it on to you.

Ian Halstead, web, graphics & artwork

http://www.ianhalstead.com

waltd

15 May 2009, 11:48 pm

Floats “peek” out of their containers unless they are cleared somehow. A floated element may contain other floated elements, and if these “child” elements grow, then the parent will as well. That’s the essence of what you are seeing here.

If you couldn’t float the parent to clear its children, then you can add a break or a rule or some other block-level tag after the last floated element, and that will fix it as well.

Walter

Freeway user since 1997

http://www.walterdavisstudio.com

Ian Halstead

16 May 2009, 7:29 am

On 15 May 2009, 11:48 pm, waltd wrote:

Floats “peek” out of their containers unless they are cleared somehow. A floated element may contain other floated elements, and if these “child” elements grow, then the parent will as well. That’s the essence of what you are seeing here.

If you couldn’t float the parent to clear its children, then you can add a break or a rule or some other block-level tag after the last floated element, and that will fix it as well.

Walter

Ah… got it. That’s why I saw use of invisible rules in a tutorial I spotted the other day. Clever. Thanks Walter.

Insanity is hereditary. Your children pass it on to you.

Ian Halstead, web, graphics & artwork

http://www.ianhalstead.com

Warner

18 May 2009, 4:25 pm

Walter, I don’t want to be a pest but I have a few of questions regarding your instructions for the layout. I tried it on my own first and realized that I don’t know what is controlling the output in several cases. My effort was a failure but when I followed your instructions exactly, it worked perfectly.

  1. Why must you use XHTML Strict?
  2. Am I correct is assuming that setting the parent boxes to 100% but the child (container) boxes to the the actual page width (in this case 750px) results in the header background color and the footer “shelf” color extending to both edges of the browser window?
  3. I don’t understand what setting the margins to “auto” does. You have a 750px box inside a 100% box on a 750px page with the child box margins set to auto.

Thanks, Warner

waltd

18 May 2009, 4:43 pm

No trouble.

On May 18, 2009, at 12:25 PM, Warner wrote:

Walter, I don’t want to be a pest but I have a few of questions regarding your instructions for the layout. I tried it on my own first and realized that I don’t know what is controlling the output in several cases. My effort was a failure but when I followed your instructions exactly, it worked perfectly.

  1. Why must you use XHTML Strict?

No particular reason, it just means one less variable because I haven’t tested it in any other configuration.

  1. Am I correct is assuming that setting the parent boxes to 100% but the child (container) boxes to the the actual page width (in this case 750px) results in the header background color and the footer “shelf” color extending to both edges of the browser window?

Yes, that’s the only reason these elements are there at all. If you don’t need the stripes to go all the way left and right, you can simply get rid of those enclosing elements. The fixed-width child elements will be centered within the PageDiv (which is automatically drawn by Freeway and is always there).

  1. I don’t understand what setting the margins to “auto” does. You have a 750px box inside a 100% box on a 750px page with the child box margins set to auto.

If you set auto margins on left and right of a box, that centers the box horizontally within its parent element (assuming that it has some definite width set, and that width is less than the width of its parent). This trick does not work vertically, before you ask…

Walter

Freeway user since 1997

http://www.walterdavisstudio.com

Warner

18 May 2009, 4:48 pm

OK, I think I’m getting a better picture of what is actually going on. Thanks Walter.

Warner

Warner

18 May 2009, 10:33 pm

Hi Walter, I’m doing my Colombo imitation now, but I have just one more question. I built a page using your instructions but instead of having the color “shelf” at the bottom I have another inline box at 100% with a nested box at 750px.

In the parent I have a graphic footer made in Photoshop. In the child I have some text.

When I add content to the boxes in the middle section of the page (item5 and 6 in your example) the footer is pushed down correctly in FW preview and in Safari but not in Firefox, Opera or Camino. In the latter three, the expanding boxes underlap the footer.

Any idea what is going on?

Thanks, Warner

waltd

18 May 2009, 11:17 pm

Can you post a link to your page somewhere? I may be able to figure it out from that.

Walter

On May 18, 2009, at 6:32 PM, Warner wrote:

When I add content to the boxes in the middle section of the page (item5 and 6 in your example) the footer is pushed down correctly in FW preview and in Safari but not in Firefox, Opera or Camino. In the latter three, the expanding boxes underlap the footer.

Freeway user since 1997

http://www.walterdavisstudio.com

Warner

18 May 2009, 11:33 pm

I’m just testing the layout so far but I posted it at http://www.wenclif.com so you can take a look. It looks like a mess in everything but Safari.

Warner

waltd

18 May 2009, 11:58 pm

Set your outermost 100% width horizontal slices to float left. Remove the clear statements from your innermost boxes (navigation and content) but keep the floats there. In place of the spacer div at the bottom, set either the top margin of the footer or the bottom margin of your middle slice to the same dimension (24px, I think). That did the trick here when I did it in a text editor, at least for FF2.

Walter

Freeway user since 1997

http://www.walterdavisstudio.com

Warner

19 May 2009, 12:12 am

Thanks Walter. It worked. I have no idea why it worked, but it did. You’re the best.

Warner

DeltaDave

21 May 2009, 11:30 pm

If you couldn’t float the parent to clear its children, then you can add a break or a rule or some other block-level tag after the last floated element, and that will fix it as well.

Walter can you revise your example to show this break or rule addition. I am trying to add a border to the ‘center’ item but on preview the border doesn’t enclose the ‘nav’ and ‘body’ items and I cannot seem to add these in the right place.

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final

waltd

22 May 2009, 1:16 am

Hmmm. Do you still have my original there? I just added a black rule to the centered middle element (item4) and it worked just fine. Try opening up my original first and add the border, then look at it in page view and compare with your construction and see if you can spot any differences.

Walter

On May 21, 2009, at 7:30 PM, DeltaDave wrote:

Walter can you revise your example to show this break or rule addition. I am trying to add a border to the ‘center’ item but on preview the border doesn’t enclose the ‘nav’ and ‘body’ items and I cannot seem to add these in the right place.

Freeway user since 1997

http://www.walterdavisstudio.com

DeltaDave

22 May 2009, 10:45 pm

Do you still have my original there?

No - I gave the divs ‘meaningful’ names when I opened originally so (item4) is gone!

D

Glasgow, Scotland

iMac 27 5K El Cap and Pro Final