SELFPHP Produktempfehlung
Windows Server 2008	SQL Server 2008	Microsoft Expression

Importing a Mockup into SuperPreview
You’ll now use SuperPreview to compare the baseline browser view to your original mockup. The assumption for this exercise is that the source of the design for this page was created in an image editing program. This is referred to as a mockup and is being used as reference for the final design. At the beginning of the design phase, mockups are used as starting points for building a web page, however in this case, you are using the mockup as if you were in the intermediate or final stages of creating your page. By comparing your web page to the mockup you can determine how closely the page and the mockup correspond. Additionally, you can make this comparison between multiple browsers as well.

1. In the comparison screen to the right, click the Open Image button.
2. In the Open Image window that appears, navigate the 02_SuperPreview_baselinebrowsers folder.
3. Open the file lucerne_mockup.png from within this folder.
4. Zoom out if necessary by using the zoom menu at the top of the screen, and note the difference between the two previews.
   On the left is the page previewed in Internet Explorer 8, and on the right is your image mockup. The most glaring difference is between the rendering of the header text ‘Lucerne Publishing’ in the two previews. There are both typeface and spacing discrepancies between the two headers.
   
   
   
   
   You’ll now use guides to make the differences more apparent.
5. Click in the vertical ruler on the right hand side of the screen, and drag out a guide so that it lines up with the ‘L’ in ‘Lucerne’ in the baseline screen.
6. Now click and drag another guide so that it lines up with the end of the Lucerne Publishing header.
   
   
   
   
   The guides show that there is clearly a problem with the baseline browser’s rendering of this type. It is too wide compared to the area in the mockup.

Downloads

• Prototypen erstellen mit Hilfe von SketchFlow in Expression Blend 3 – Einführung
  http://go.microsoft.com/?linkid=9690582
  
  
• Browsergame mit Hilfe von Behaviors in Expression Blend 3 erstellen
  http://go.microsoft.com/?linkid=9690583
  
  
• Funktionen von SuperPreview in Expression Web 3 – Einführung
  http://go.microsoft.com/?linkid=9690584
  
  
• Silverlight Unterstützung in Expression Web 3
  http://go.microsoft.com/?linkid=9690585

Copyright © 2010 Microsoft Deutschland GmbH Alle Rechte vorbehalten.