December, 2008

  • Expression Web team blog

    Holiday Upgrade savings – add Expression Web 2 to your web authoring tool set

    • 1 Comments

    Expression Web 2 boxshot

    For a limited time, customers in the United States can shop the Microsoft Online Store for Microsoft Expression Web, Expression Blend, and Expression Studio and get 50% off.

    Chances are good that you qualify for the Upgrade pricing if you have any existing web design or creative software, or Microsoft Office software, including any ONE of the following:

    • A licensed copy of an earlier version of Expression Web
    • Adobe Creative Suite (any version)
    • Adobe/Macromedia Flash or Director (any version)
    • Adobe/Macromedia Dreamweaver (any version)
    • Adobe GoLive (any version)
    • Microsoft Office (any version)
    • Microsoft FrontPage (any version)
    • Quark QuarkXPress (any version)

    [Note: Pricing and specials are set on a locale-by-locale basis.  This deal applies only to US customers of the Microsoft Online Store and is valid only for a limited time.]

  • Expression Web team blog

    The Quirkiness of Quirks Mode

    • 3 Comments

    Michelle Rosenthal


    Hi, I'm Michelle Rosenthal, a new tester on the Expression Web team.

    My recent work on Expression Web has brought to my attention the importance of document type declarations (referred to as DOCTYPEs) and understanding the effect of these declarations on how content is displayed in different web browsers. There are a handful of DOCTYPEs you can declare at the top of your html that will vary the way a browser interprets your page. Here are a few examples:

    HTML 4.01 Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    XHTML 1.0 Transitional:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    (You can find out more regarding the differences between strict and transitional DOCTYPEs in this article at 24ways.org, as I will not be going into that distinction.)

    A well-formed DOCTYPE will trigger the browser to render the page in “standards” mode (or sometimes the self-explanatory “almost-standards” mode.) If a page does not contain a DOCTYPE declaration (or if the DOCTYPE is incorrectly defined), most browsers will enter "quirks mode". Quirks mode is essentially a backwards-compatibility mode that enables a browser to interpret and display content in the way that pre-"standards-compliant" browsers did. In other words, the browser doesn’t stick to HTML and CSS specifications outlined by W3C (World Wide Web Consortium).

    What better way to demonstrate this than with a personal example. Last year I created a photo portfolio website, coding the HTML and CSS from scratch. Like many web developers, I designed and tested the site with Firefox in mind as the end user’s browser (because Firefox reliably renders standards-compliant pages as they are intended to be rendered). The site was a mess when I previewed it in IE. At the time, I wasn’t aware that I was missing a DOCTYPE or that this omission was causing the browser incompatibility. The following snapshot of the site in IE7 quirks mode shows a few of "quirks" that can manifest.

    First, an IE browser in quirks mode suffers from the Internet Explorer box model bug causing it to interpret padding and borders differently than it would in standards mode. The horizontal panel with thumbnail images is narrower than intended due to quirks mode incorporating padding into its explicit width rather than adding padding on top of that width. Additionally, the CSS trick to center content (setting margin: auto; on the containing div) is not processed:

    NoDoctype

    Once I realized what the problem was, I quickly added a DOCTYPE as the first line to all of my html files. (I chose the default type in Expression Web, XHTML 1.0 Transitional.) Now when I preview it, IE will render my page in “standards mode”:

    Doctype 

    IE and Firefox now show nearly identical illustrations of my site! One problem solved in the fight for complete browser compatibility.

    One great feature in Expression Web is all the calculated information displayed on the status bar at the bottom of the application. Here you can see your document type declaration and the mode in which a browser will display your content:

    xWebStandards

    It will also detect and warn you about incompatibility (the left arrow in the image below):

    xWebQuirks

    You can double-click on the icon on the left and Expression Web will bring you to the incompatible code.

    Once you see that you need to add a DOCTYPE, place your cursor before the <html> tag in Code view and press CTRL-ENTER to bring up a nifty dropdown menu of DOCTYPE code snippets:

    doctypeTrick


    New pages in Expression Web always contain a default DOCTYPE. You can control this default by going to Tools-> Page Editor Options under the Authoring tab:

    authoring

    Here are a few great resources to learn more about quirks mode:

    Quirks Mode Explanation at quirksmode.org
    Mozilla's Quirks Mode Behavior

  • Expression Web team blog

    New online web development training on lynda.com

    • 1 Comments

    Lynda.com has released two new training modules for Expression Web 2, delivered by Brian Wood, including CSS Workflow and Migrating from FrontPage to Expression Web.

  • Expression Web team blog

    CSS Layouts – Oh, the Humanity… ! by Steve Guttman

    • 2 Comments

    Back in the earlier days of the web—like 5 years ago—the standard fashion for laying-out pages was to wrap your page in a table and to use “colspan” and “rowspan” properties to combine table cells into merged entities, and to embed additional tables into those merged cells (when necessary) to hold and position subsidiary pieces of content. A pretty standard 3-column layout w/header and footer, using tables is shown below.

    clip_image002

    This strategy worked “OK,” although the use of tables generally meant that graphics falling at the intersection of rows and columns needed to be sliced up and inserted into individual cells. The complete graphic was reconstituted when the table laid itself out. Also, in many cases, HTML authors had to resort to the evil “single pixel transparent GIF” trick to position elements accurately within these layouts. This lead to HTML code that “worked,” but was bulky, difficult to read and maintain, and was generally not very elegant.

    With the advent of CSS-P, the positioning of content moved from tables to DIVs—with the position of content regions (within DIVs) being specified in the CSS classes applied to each DIV. This has lead to a host of new problems—some of which I’ll talk about here, and some of which really require CSS 3 to address.

    The key to doing CSS layouts is mastering “float” and “clear” CSS properties. I’m going to use a variant of the CSS, 3-column layout included with Expression Web 2. The CSS layouts in Expression Web are found by going to FILE>NEW>PAGE and choose “CSS Layouts” from the left list box. These are good starting points for most page layouts. But, I’m going to create a CSS layout from scratch. If you want to follow along, create a blank HTML page.

    image

    The nice thing about CSS layouts is that the page layout—or arrangement of content on the page—is mostly independent of the content itself. This means that we can start by creating the HTML page structure, first, and then apply CSS classes to get the content into the right positions. The basic structure of the HTML within our body tag is:

    <body>
    <div id=’container’>
    <div id=’header’>
         Here is my header content
    </div>
    <div id=’contentcontainer’>
    <div id=’leftcol’>
         Here is my left column content
    </div>
    <div id=’rightcol’>
         Here is my right column content
    </div>
    <div id=’centercol’>
         Here is my center column content
    </div>
    </div>
    <div id=’footer’>
         Here is my footer content
    </div>
    </div>
    </body>

    There are a few things to note here:

    1. It’s good practice to always wrap your page in a “container” div. This lets you apply page specific styles (if needed) inside the body tag

    2. I give IDs to all the div’s that I’m going to position using CSS. I think this makes it easier to understand your page.

    3. The right and left content columns fall before the main/center content column. This seems a little bizarre. But, it is a necessary part of this particular 3-column layout technique.

    Without any styling at all—this is what my page looks like:

    clip_image002[5]

    So, let’s apply some styling to this structure.

    The strategy for 2 and 3-column layouts is pretty straightforward. Divs—by their nature—have a display style of “block,” which means that they will break a line. If you want to line 3 columns up next to eachother—our center, right and left columns—you need to use the float property. As its name implies, float lets you make specific content layout within the flow of whatever else is happening within a page. This is ideal for things like images, which you may want to display within a text block. If, for example, I insert a photo before a text block, it’s going to display like the screenshot below:

    clip_image002

    If I tag that photo with style=”float:left”, we get the following:

    clip_image004

    Nice, eh? The text flows nicely around the picture. What you need to remember about floats is that the page content following the floated element will flow around it. Any content preceding the floated element will be unaffected.

    So, our trick for creating 3 side-by-side columns follows a similar vein. We apply float:right to the right column and float:left to the left column, we’ll move everything to the correct position. Here’s the HTML layout and markup below:

    image

    #leftcol{
         width: 200px;
         float: left;
    }
    #rightcol{
         width: 200px;
         float: right;
    }
    <body>
    <div id=”container”>
    <div id=”header”>
         Here is my header content
    </div>
    <div id='contentcontainer'>
    <div id='leftcol'>
         Here is my left column content
    </div>
    <div id='rightcol'>
         Here is my right column content
    </div>
    <div id='centercol'>
         Here is my center column content
    </div>
    </div>
    <div id=”footer”>
         Here is my footer content
    </div>
    </div>
    </body>

    However, there are a few problems, here. If we add additional content into the center column, we see we have a bit of an overflow problem.

    clip_image002[5]

    To fix this, we set the right and left margins of the center container to the width of the right and left columns, respectively. This will constraint the text to the area between the left and right columns.

    There will be another issue if the text in the right or left columns happens to run longer than the text in the center column. The footer will run next to the column instead of under it.

    clip_image004[5]

    To eliminate this condition, we add the clear:both property to the footer div. Clear moves the element such that it is below any content, either to the right, left or both sides (depending on the value of the property you apply). Our final markup looks like:

    clip_image006

    #leftcol{
         width: 200px;
         float: left;
    }
    #rightcol{
         width: 200px;
         float: right;
    }
    #centercol{
         margin-right: 200px;
         margin-left: 200px;
    }
    footer {
         clear:both;
    }
    <body>
    <div id=”container”>
    <div id=”header”>
         Here is my header content
    </div>
    <div id='contentcontainer'>
    <div id='leftcol'>
         Here is my left column content
    </div>
    <div id='rightcol'>
         Here is my right column content
    </div>
    <div id='centercol'>
         Here is my center column content.
         Lorem ipsum…
    </div>
    </div>
    <div id=”footer”>
         Here is my footer content
    </div>
    </div>
    </body>

    You can do some really powerful layout tricks with floats and clears. Expression Web 2 has some pretty nice starting markup for columnar layouts. Check them out! There’s an excellent tutorial on floats and clears, here: http://css.maxdesign.com.au/floatutorial/index.htm

  • Expression Web team blog

    Software update for Expression Web 2: KB957827

    • 0 Comments

    Microsoft has released an update for Microsoft Expression Web 2.0. This update fixes a problem that prevents macros from running on a Windows Vista-based client computer.

    http://support.microsoft.com/?kbid=957827

    Note: If you’ve set Windows to automatically update, the update for Expression Web 2 appears in the Office 2007 list of updates as shown in the following screenshot.

    Update for Expression Web 2

  • Expression Web team blog

    Training: Web development essentials

    • 1 Comments

    Joshua Eklnud recently published a series of training videos on how to use Expression Web, including videos on:

    All are available at http://www.microsoft.com/web/search.aspx?tagcb=Expression%20Web

Page 1 of 1 (6 items)