What is the name of this visual aid? RRS feed

  • Question

  • Hi

    Just a quick question about one of the (excellent) visual aids in EW4 - there are blue lines which, when moused over, give useful measurements along with a hand-cursor. I am very fond of them, but I don't know what they are called, and so it is impossible for me to reference them when speaking to others...

    In this picture

    Do they have a name? 


    Wednesday, April 20, 2011 8:26 PM

All replies

  • If I'm understanding what you are seeing, they are called, "Oh dear, you are using layers!  Don't!"

    Please, before you go any further, preview your site in Firefox, and use the Vew -> Zoom menu with Text Only checked.  Hit Ctrl+  a couple times and see if your site breaks.  If you are using layers, the answer is likely to be "yes, it breaks".

    Thursday, April 21, 2011 5:00 AM
  • heh... sorry for the long delay.

    Nope, not layers. I have been using Paint, GIMP, and Notepad++ for my web design for many years, if that gives you an idea of where I am at as a pixelpusher. Lack of standards-compliance is what kept me away from things like Dreamweaver, etc., for so long. Expression has finally lured me back into the WYSIWYG world a bit, because it is so supportive of good practices.

    Just out of curiousity... what are layers? They appear just to be absolute-positioned <div>'s... If that's true, I can see why it would be a problem.


    But, back to my question - these are not draggable or anything, they are purely visual aids. 

    Anyway, I guess it doesn't matter much. I was just curious if there was a name for them. "Visual aids" will have to do :)

    Friday, January 13, 2012 8:16 PM
  • You have to post a link to a page for anyone to guess what you are seeing.  Layers don't have to be absolutely positioned to cause problem, by the way.  And, also, be clear: EW is NOT WYSIWYG.  Design View is a guideline that is not a browser, and can't show some things that browsers can, and won't show you if a use of fixed hight and fixed width containers with text in them, for example, is breaking your site at different browser text size settings.
    • Edited by KathyW2 Friday, January 13, 2012 8:27 PM
    Friday, January 13, 2012 8:25 PM
  • EW and Dreamweaver both require you to know web standards, neither is a WYSIWYG editor. You image isn't helpful, seeing split view with the image and the code would have been marginally more useful. I get blue lines if I have an absolutely positioned div selected or if I have View > Visual Aids > Block Selectors turned on.

    Absolutely positioned content, especially that that contains text will cause display issues when a visitor has other than default fonts set as their base font in their operating system. They can also render differently cross browser/device when the viewport is not what is expected by the person creating the site.

    Free Expression Web Tutorials
    For an Expression Web forum with without the posting issues try
    Friday, January 13, 2012 9:25 PM
  • Since you are investigating EW, and you seem to have the (VERY) mistaken impression that EW is a WYSIWYG tool, you really should read the Prerequisites for Using Microsoft Expression Web, which will give you a realistic picture of what EW is, and more importantly, what it is not. The very first thing that you will find there is this:

    "In order to better set expectations and to prepare Web designers for using Expression Web, we’re making this FAQ available.

    Is Expression Web a What-You-See-Is-What-You-Get (WYSIWYG) tool?
    No. Expression Web does a good job of approximating what your page will look like in any particular browser. However, the Expression Web design surface does not fully support all code that you might be using. For example, CSS pseudo-element styles are not rendered in Design view in Expression Web.

    When you want to see exactly how a particular page will look in a browser, you should preview that page in the desired browser. Expression Web contains a robust feature-set for previewing in multiple browsers at the desired screen resolution."

    In addition to what Kathy pointed out, design view cannot display any CSS-driven dynamic effects (e.g. the :hover and other CSS pseudo-selectors) or script-driven effects. And if anyone  uses layers and z-index, or otherwise employs CSS positioning tricks, they will see those elements stack up and overlay each other in design view.

    Expression Web, every version, is not only standards-driven, it will strive valiantly to dissuade you if you try to use other methods. Its default doctype for new documents, out of the box, is XHTML 1.0 Transitional, and if you try to enter markup which is non-compliant, it highlights it with yellow or with red squiggly underlines. For documents brought in which are not XHTML-compliant, it has a handy right-click "Apply XML Formatting Rules" context menu item. Even things which are technically not deprecated, but which are highly discouraged in modern Web development, are being likewise discouraged in EW, such as the Layout Tables menu item and Properties Panel which were completely eliminated from the EW interface in version EW4.

    In short, EW is about as far from WYSIWYG as you can get and still have a design view at all. And it exposes a CSS application interface, and Intellisense, that make it easy to discover and use appropriate CSS styling. It has zero relationship to Microsoft's former hobbyist tool, other than being released by the same vendor.

    For that matter, as someone who used Dreamweaver from MX up to CS4, I can attest that Dreamweaver was, is, not truly a WYSIWYG tool. You can no more rely upon its design view than you can EW's, and even its LiveView only reflects what you will see in one variant of the Webkit rendering engine.

    I started using its CSS tools when they began to be improved in 2004MX and forward. Yes, if you were so inclined, you could try to use DW as a WYSIWYG tool, and pay the price in cross-browser problems. Or, like me and many others of my knowledge, you could write fully standards-compliant markup, taking advantage of the site management and other productivity tools, and the many specialized extensions, to write better code, faster.

    I am a hand-coder, writing both my own markup and my CSS myself. I take advantage of EW's excellent Intellisense for both technologies to write HTML and CSS with the keyboard far more quickly than it can be done clicking around in the visual interface, selecting options and entering values. And my knowledge and experience permit me to write 100% compliant and compatible code. So much for "WYSIWYG..."  ;-)


    P.S. That "visual aid" looks like it might be a standard block element outline, like this outline of a paragraph behind a floated image:

    Then again, it might not be. Since I never use design view for layout, who am I to say...  ;-)

    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    • Edited by paladyn Saturday, January 14, 2012 4:25 AM
    Friday, January 13, 2012 10:28 PM