SELFPHP Produktempfehlung
Windows Server 2008	SQL Server 2008	Microsoft Expression

Previewing a Page
Next, you’ll preview a page in the baseline browser, as well as in the comparison browsers you’ve chosen. Additionally, you’ll begin to work with the visual aids within the SuperPreview workspace.

1. Based on the previous steps, your baseline browser is IE8 on the bottom-left column; you should see the label Internet Explorer 8. To confirm that your first comparison browser is Firefox, click on the Firefox logo and the comparison view (in this case, Firefox 3.5) will appear on the right.
   Whenever a comparison browser is selected, the icon will be highlighted and the name of the browser appears in the bottom-right hand column.
2. Click the Zoom pull-down menu and zoom out to 50% so you can see the entire page in both views. SuperPreview has synchronized zooming so you can easily compare the same layout in your two browsers.
   Notice that there is very little difference between the pages as rendered in these two browsers.
3. Click the Internet Explorer 8-7 icon in the lower left of your screen to change the comparison browser on the right hand screen to Internet Explorer 7.
   Now there is a minimal, but noticeable difference in the text between browsers, specifically in the Lucerne Publishing header. If this is not immediately obvious, click back and forth between IE7 and Firefox several times. SuperPreview is designed to quickly identify visual changes using this method.
4. Click the words Lucerne Publishing in the baseline browser screen. The text will highlight in blue in this screen, and in green in the comparison screen. Notice that the text in IE7 does not reach as far as it does in IE8. This helps identify an issue with the rendering of this text.
   
   
        
   
   Comparing IE8 to Firefox exposes a slight difference in how this text is displayed.
   
   
5. Click the button for Internet Explorer 6 to compare this browser against your baseline.
   While the header difference still exists, a more substantial problem is exposed by this comparison. The Case Studies section has completely wrapped to the next section below in Internet Explorer 6.
6. Mouse over the different elements of the Case Studies section in your Baseline Browser view. Notice the blue outlines that appear as you hover over different sections. What you are seeing is SuperPreview detecting the various elements in this section. Layout in html often consists of various nested elements such as divs, headings, paragraphs and others. Because CSS styling is built on a box model, the elements of a page will be highlighted as a rectangle or square of some sort.
   
   
   
   
   Continue mousing over this area until you see the blue border around the Case Studies section. Click the Case Studies section in the baseline screen, and notice that this section is again highlighted in both screens. However, on the IE6 side there is no content here because the entire section has broken down to the next row.
7. You can not only see this visually, but SuperPreview has additional visual aids to help you confirm and measure the difference. In the lower left corner of each screen are the quick position displays. These boxes show you the size and position of a selected element. Because there are differences in both on the IE6 side, these are highlighted in red.
   
   
        
   

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.