[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.


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

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.


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

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.


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