Tutorials

2 replies to this thread. Most Recent

Ann Amber

4 Oct 2014, 12:35 am

[Pro] Demo Tutorial I can follow

Is there a recent tutorial of PRO7 to follow thru the actual creation of a flexible site? I have the Esperanto Template and torn it apart hoping to find some understanding. Didn’t work so temporarily I changed a site created for a barber in FWexpress to the narrow 320 on 4 pages… as most viewers are that type user. But I still want to make it a flexible site.

(In Esperanto Why are ALL the boxes (holders?) are on the home page (for instance) IF EVERYTHING on each page is controlled by the master, then there would be no individual page creativity as I understand it. I did not find how to alter the master image which is much too large or to replace it.

I’ve downloaded all references I could find but they have me confused. It would help to have a tutorial I can follow step by step with explanations of WHY. In FW5 and 6 I created other sites up to 27 pages but the flexible stuff - wow.

http://jakesbarbershop.com/

Ann Amber

30 Oct 2014, 8:02 am

After weeks of study, testing, destroying and starting over I suggest the The important aspect of site building is HOW one Starts the process. It seems that every item on a responsive page must be in a container. My latest Blank Template TEST site page has these items: PageWrap —(then indented under it are: TopBarWrap, HeaderWrap, CWrap, DWrap. MainWrap and FooterWrap {As I understand it every text or graphic will be inside such a container or box - that’s the means for graphics or text moving (being flexible) or sliding under each other as the device viewing the SITE connects.} Each CONTAINER is given a different soft color which helps later if/when a graphic or text is in that ‘box’ with no padding or margin (which I still do not clearly grasp because at times when I designate it, nothing occurs. (The color can be later removed if desired. But with it there is clearer understanding of the inter-play between elements of the different page aspects. While we often think of starting a new site on the computer, it may be better to start with paper and pencil and draw what containers you need and what graphic or text will you put in what container. That process of having box limits seems very confining in comparison to the full width freedom of a computer screen.

Back to Top

The Big Erns

30 Oct 2014, 12:10 pm

The color can be later removed if desired. But with it there is clearer understanding of the inter-play between elements of the different page aspects.

That is a helpful strategy which I will encourage. The goal, obviously, is to understand what Freeway is doing with the direction you give it and visualize that outcome. Another helpful strategy is to make use of the now popular Developer tools found in current web browsers. My favorite is Safari’s Developer Tools so I will quickly run by those.

To enable the Developer Menu in Safari, open the Preferences - then tab over to the Advanced options - then click the selection at the bottom to show the Developer Menu.

Publish your Freeway project into Safari, then select Show Web Inspector from the new menu. This will show a code-view of the current page in a smaller inset window (although you can also break out the inset to a new window which I prefer). As you mouseover different code elements in the inspector window, they will be highlighted on the browser window (what a great way to learn what those code structures look like!). They will even be shaded to show padding and margin, when present and effective. Meanwhile, when an item is selected in the inspector window, the right side of it can show the CSS codes for that element. And get this… it’s editable! Yes — you can see in real time how changing a style value affects your layout.

Granted, if you’re still allowing Freeway to auto make styles for you, then you will likely have an un-editable crapload of span style spaghetti to lose your mind over… in that case, you’ll probably wish you’d taken the Blue Pill. However, this is an opportunity to see the world as it is and understand not only that everything you do in Freeway has consequences, but that you can manipulate those outcomes as well.

The last thing to add to this very brief discussion of browser developer tools is my favorite shortcut - right-click (control-click, same thing) a visible element in browser window — some text, an image or box, whatever — and you get a Contextual Menu… choose Inspect Element and not only do you get the Web Inspector, but it will try to expose the code base for that element rather than making you toggle open the page hierarchy.

no longer subscribed to this discussion…