csswebvisiomockups

Something similar to CSS in Microsoft Visio 2010?


I'm looking for something similar to CSS in MS Visio 2010 for UI mockups for a website. I'm currently using the Visio Wire Frame to create the individual web app page mockup screens. However, it's turning into a massive amount of different screens with no way of tying commonalities between the screens together. I'd like to be able to snap-in different parts of the screen that applies across all of the screens. For instance, the nav bar would apply to all screens. It would be helpful if I could just snap that in or import it to every screen so that when I need to modify it, it automatically applies across all the screens I've created. In other words, something similar to Cascading Style Sheets. If anybody knows if there is a way to do this in MS Visio 2010, I would appreciate some steps in how to pull this off. Much appreciated!


Solution

  • Take a look at 'Background' pages a layers. Any page can be set as a background page (select 'Page Setup' from the page tab context menu) onto which you can drop shapes. You can then set other 'foreground' pages to use a particular background page and this will give you the ASP.NET master page style you're describing. Have a look at this post for more info on background pages:

    Applying a background or border design in Visio - Visio Team Blog

    You might also find layers useful. Shapes can be assigned to different layers and a layer's visibility can be toggled on and off as required. Bear in mind that Visio layers don't work in quite the same way as Photoshop layers. The Visio system of layers is more akin to tagging. This means that a shape can belong to multiple layers. Something to think about regarding visibility. For more info on layers:

    Assigning shapes and masters to layer - MSDN

    Working with layers - Office.com