• Expression Web team blog

    Composing a Webpage Layout Using Expression Design

    • 1 Comments

    Greg Smith's Noggin Hey everybody, I'm Greg Smith, a new tester on the Expression Web team.

    In August of 2008 I was lucky enough to marry the woman of my dreams with a small wedding ceremony in Las Vegas. I really enjoy web design and while I am not a professional web designer, I get to play one at my new job as a software tester on the Expression Web team at Microsoft in Redmond. Because I wanted to learn more about the products in Expression Studio I chose to use them to build a website to commemorate our wedding and to share this event with the world.

    Wedding homepage

    The first step was to compose a homepage. Expression Design turned out to be the perfect tool for this because of its ability to create beautiful scalable vector art and how very easy it is to export web-ready bitmaps from it.

    To read the rest of the post, go to my Blog: http://blogs.msdn.com/gsmith/archive/2008/09/03/designing-a-wedding-page-in-expression-design.aspx.

  • Expression Web team blog

    Website accessibility lawsuit settled by Target

    • 1 Comments

    You may recall that back in 2006 Target was sued because the Target website was not accessible to the blind. Target attempted to have the suit dismissed at one point, but just settled the lawsuit last week.

    The settlement generated some good discussions here on the Expression Web team about what this means for web developers and their clients. The settlement inspired Steve Hebert (Expression Web developer) to blog about why he recently joined the Expression Web team. In his post, he touches upon the Accessibility and Compatibility tools in Expression Web:

    http://codebetter.com/blogs/steve.hebert/archive/2008/08/29/why-i-made-the-switch-or-writing-good-web-code.aspx

    Here are some additional perspectives on the Target settlement:

    Site Point:
    http://www.sitepoint.com/blogs/2008/08/29/target-settles-accessibility-lawsuit-for-6-million/

    the Web Standards Project:
    http://www.webstandards.org/2008/08/28/what-the-target-settlement-should-mean-to-you/

    CNET News:
    http://news.cnet.com/8301-1023_3-10028109-93.html

    WebAIM (Web Accessibility in Mind)
    http://webaim.org/blog/target-lawsuit-settled/

    Webmasterworld
    www.webmasterworld.com/accessibility_usability/3732919.htm

    NorthTemple:
    http://northtemple.com/2008/09/01/the-target-accessibility-lawsuit-and-settlement

    Opera Developer Network:
    http://my.opera.com/ODIN/blog/two-cheers-for-the-target-nfb-accessility-settlement

    What do you think about the settlement of this lawsuit? Should retail websites be required to make their websites accessible? What features would you like us to develop for Expression Web to help you make your websites more accessible? Would you like more Help content that addresses website accessibility? Comment on this blog and let us know! Better yet, if you have any great ideas for Expression Web, submit a suggestion for the program here: https://connect.microsoft.com/expression . Or discuss this topic with others at the Forum for Microsoft Expression Web: http://forums.expression.microsoft.com/en-US/web/thread/5ce63b85-7199-46a1-9fb2-f605c13ec1f5

    Anna

  • Expression Web team blog

    Use a dataview to create a color table from XML

    • 2 Comments

     

    I’m Steve Schermerhorn, one of the new developers on the Expression Web team. Steve Schermerhorn's face

     

    When I’m developing a website or application I’m typically dealing with a wide range of colors throughout my project. On more than one occasion it would have been really handy to have a visual reference that also mapped the colors to their names and hex values. I eventually managed to come up with a solution using an XSL to transform an XML file into a nice little color reference table I could print off and hang on my wall. This little ‘how to’ is going to give you a very hands on example on how you can take an XML file and create an HTML page.

     

    1. The data
      For this example I started with an XML file I that I created referencing the system colors used by Windows. [ http://msdn.microsoft.com/en-us/library/system.drawing.systemcolors.aspx ].

      Code view of XML file
    2. Create a dataview of the XML file
      Next, I created an HTML page in Expression Web, and then simply dragged the ColorTable.xml file from the Folder List task pane into the Design view of the HTML page. When you do that, Expression Web generates an XSL file and JavaScript for you, which display the data in a table.

      Dataview in Design view
      When you save the page, Expression Web prompts you to save the JavaScript and XSL files to your website.

      Save Embedded Files dialog box
    3. Add style to the XML data

      You can format the dataview of your XML file as you would any other table or text in Expression Web. When you format the table or text in a data view, Expression Web automatically updates the XSL file for you. For example, I used the Highlight button in the toolbar to add a color background to the top header row of the table, changed the font of the header cells, and reduced the width of my columns. I also added a new column to the left of the first column.When I saved my page, Expression Web prompted me to save the changes it made to the XSL file.

      Formatted dataview 

      Next I opened up the XSL file that Expression Web generated, located my new blank column, and added the following attribute to the <td> tag for that column:
      bgcolor="{@ColorValue}"
    4. That attribute sets the background column of every cell to the value of the ColorValue specified for that row in the Color Value column.

      clip_image002[9]

  • Expression Web team blog

    Public beta 2 of Internet Explorer 8 is now available!

    • 2 Comments

    A public BETA of Internet Explorer 8 is now available for download at http://www.microsoft.com/ie8.  The Internet Explorer team provides a good overview of what you’ll find in BETA 2 at:

    http://blogs.msdn.com/ie/archive/2008/08/27/internet-explorer-8-beta-2-now-available.aspx

    Especially note these paragraphs under “Platform”  in that post:

    IE8 is more interoperable with other web browsers and web standards. The contribution of CSS 2.1 test cases to the W3C is an important in order to really establish a standard way to assess standards support. We think that CSS 2.1 remains the most important place to deliver excellent interoperability between browsers. We think developers will enjoy the improvements to the built-in tools, as well as the other opportunities to integrate their sites in the user’s daily life with Accelerators and Web Slices. You can find more information at the IE Development Center, http://msdn.microsoft.com/ie.

    After deciding to default IE8 to the most standards-compliant mode available, we wanted to be sure to address compatibility concerns for organizations and individuals. Would websites that expect IE8 to behave the way IE7 does create a problem for end-users? Since March, we’ve been telling developers about a small change they can make to their sites to tell IE8 to show their sites as IE7 does. Many have – but there are a lot of sites that may have not yet addressed this. The Compatibility View button (new to IE8 Beta 2) is a good solution to provide end-users a good experience as the web transitions.

  • Expression Web team blog

    Migrate from FrontPage to Expression Web – New online training

    • 3 Comments

     

    Veteran FrontPage MVPs Tina Clarke and Pat Geary have developed an online class and ebook “Migrating from FrontPage to Expression Web” for FrontPage users that want to get started using Expression Web and update their websites to use today’s web standards. Their online class starts Saturday August 30th, 2008 on Cheryl Wise's website Start to Web.

    Because this is the first launch of this training, the cost is only $39.50, which is 50% less than it normally would be. So if you’re a FrontPage user, sign up today before the class is full!  For more information about this particular course, visit http://starttoweb.com/classes/fp-ew.php 

    Cheryl also offers several other courses at http://starttoweb.com/classes/index.php . If you register for any full-priced class that costs $60, use this coupon code to receive 10% off your registration: mv-fofa   (Thanks Cheryl!)

    I’ve never been a FrontPage user myself but I’ve signed up for the course in order to learn more about the experience of migrating from FrontPage. See you in the virtual classroom on August 30th!

    Anna

    Anna Ullrich's face

  • Expression Web team blog

    Just What is UX Anyway?

    • 0 Comments

    Working with design & authoring software all day, every day for many, many years got me thinking that great UX is just the latest buzzword for user interface design. We all appreciate a well-designed website, a beautiful, immersive game environment, and a computer program that is intuitively designed so you can get started right away with it.

    But all of this assumes that UX only takes place only within the confines of my fine LCD monitor.

    So, it was eye opening for me, to say the least, to hear presentations at UXWEEK.com on creating engaging UX:

    • A Chicago-based theater troupe that takes the philosophy of "try hard, fail fast, try hard again" to engage their audiences with a continual stream of new plays
    • The design of Zipcar's UX, from initial customer contact, through rental/usage of the car, and then follow up
    • A game designer's perspective on the future of happiness through UX
    • Knowing demographics and your user's requirements are not sufficient to design great UX…the essential starting point, yes, but not sufficient

    I'll write more about some of these sessions in future posts (assuming that my editor lets me!).

    What this tells me is:

    • UX is about engagement with your customers and that engagement is based on communication in one form or another, maybe on a computer screen, but just as likely not
    • You, whether you're a technical writer, a user interface designer, or a performer create that user experience or part of it
    • Without your communication skills, your user's experience will be less engaging and your product, whatever it may be, will be less successful.

    So, there you have it. UX is way bigger than I thought and there are many, many more people working on UX in ways that I never thought of. Seems that's the reason they send us to conferences, no?

    As a footnote, the UX Week site is now posting slide decks and other session materials from the conference. Go check them out!

    Ed Meadows' face


    Ed Meadows
    Product Manager, Expression

  • Expression Web team blog

    Cleaning Up Messy HTML

    • 5 Comments

    Updating your site with standards-compliant HTML

    >Pad Gallagher's faceFrontPage helped bring WYSIWYG publishing to the World Wide Web. Since those early beginnings, however, the web has changed; countless new technologies have emerged, evolved, and slipped into obscurity. The World Wide Web Consortium (W3C) has led the way in defining the web’s technological common ground, referred to as web standards. Websites that conform to W3C web standards are referred to as standards-compliant.

    Over the next several articles, I’ll be helping you update your website; migrating away from legacy code and components to newer solutions, based on web standards.

    In this article, we’ll start the migration process by cleaning up the code so that it’s more in alignment with web standards and start moving style and formatting out of the web pages and into a cascading style sheet (CSS).

    Before we begin, I strongly encourage you to make a backup copy of your website.

    DOCTYPE

    Browsers read the DOCTYPE declaration on a page to determine which version of HTML (or XHTML) the page uses. Expression Web uses the DOCTYPE declaration for validation and IntelliSense code completion. Adding a DOCTYPE declaration to your website’s pages makes it easier to create and maintain valid code throughout your project.

    If your project contains no FrontPage web components, set the DOCTYPE to XHTML Transitional. If your project does contain FrontPage web components, you’ll experience fewer problems if you set the DOCTYPE to HTML 4.01 Transitional.

    To set the DOCTYPE for a single page, from the Expression Web Code view:

    1. Press CTRL+HOME – the cursor moves to the head of the page (Line 1, Column 1)
    2. Press CTRL+ENTER – the DOCTYPE menu displays.
    3. Select the appropriate DOCTYPE from the drop-down list.

    Repeat this procedure to set the DOCTYPE for every page in your project.

    Now that the existing pages all have DOCTYPE declarations, this would be an excellent time to set the DOCTYPE for the entire project so that any new documents you add to the site are created with the correct DOCTYPE declaration. Click Tools, and then click Page Editor Options. Select the Authoring tab and set the Document Type Declaration.

    Code cleanup

    Once you've set the DOCTYPE declaration on a page and while you're still in Code view, right-click on the page and select Reformat HTML. This will tidy up the code formatting and attempt to validate the page against the declared DOCTYPE. If there are any code errors, Expression Web will highlight them in yellow. DOCTYPE validation errors are displayed with a squiggly red underline.

    Go through the code and clear up what you can. When you hover your mouse cursor over an error, a tooltip displays with details about the error to help you find a solution.

    Moving the presentation out of the HTML page

    Create an external CSS

    External style sheets are separate files from content pages that will be linked from each of your project’s web pages. This allows you to create a single style definition that controls the appearance of every instance of a style throughout your website.

    Overall, cascading style sheets provide greater flexibility, easier maintenance, and true separation of content from presentation.

    Link the site pages to the CSS

    Each page must include a link to your CSS within the <head> section of the page. You can add this link manually in Code view: <link rel="stylesheet" type="text/css" href="mycss.css">; or you can add it from the Format menu by clicking CSS Styles, and then clicking Attach CSS Style Sheet in Design view.

    Create CSS style definitions

    Here’s a quick refresher for CSS style definitions. A CSS style definition has three parts:

    • A selector – what HTML element this style will apply to.
    • One or more properties – what aspect of the element's appearance will be styled.
    • A value for each property – how the property will style the element.

    The properties and values are contained within curly braces, and properties are separated by semi-colons.

    selector {

         property1: value;

         property2: value;

    }

    A selector can be:

    • An HTML element (p, h1, ol, etc.), which defines properties for that tag everywhere it appears.
    • A class, which defines properties for only those elements to which you assign that class name.

      Class selectors in a CSS begin with a period (for example, .codeview, .caption, and .uitext). Classes can be used with several different elements on a page. For example, the .uitext class can be applied to single or multiple words, entire paragraphs, headings, or specific sections on a page.

    • An ID, which defines properties for a single, unique element in a web page.

    ID selectors in a CSS begin with a pound sign (#). IDs should be unique, and should be applied only once on a web page (this is especially important if you use JavaScript in your project). For example, you might choose to create an ID selector called #header and apply it to a DIV (<div id=”header”>). Remember, the #header ID—or any other IDshould only be used once on a page (though you can use the same ID on other pages). There is, of course, quite a bit more to cascading style sheets than this quick overview. See Expression Web Help for more information. Our objective right now is to create one style definition for each unique style in the website. For example, if every page has a heading in maroon 18pt bold, italic, Tahoma, we would create a style definition in the CSS that looks something like this:

    h1 {

          color: #7F0000;

          font-size: 18pt;

          font-weight: bold;

          font-style: italic;

          font-family: Tahoma;

    }

    Apply CSS styles in Design view

    Once you’ve created the CSS, you can quickly apply styles in Design view using the Apply Styles task pane. (If the Apply Styles task pane isn’t visible, click Task Panes, and then click Apply Styles.) The Apply Styles task pane shows all the available styles in a document. To apply the formatting to different areas of the page, select the text you want to format and then click a style in the Apply Styles task pane.

    In Code view, you’ll see that CSS class and ID attributes have been added to the HTML tags for many formatted sections of text. If you prefer to code by hand in Code view, note that the “.” and “#” characters are omitted from the HTML attributes.

    <p class="uitext">…</p>

    <div id="header">…</div>

    Scrub any leftover inline formatting

    Once you’ve applied CSS styles to each content element in your site, it’s a good idea to go through each of the pages in Code view, clearing out any leftover presentation formatting, such as <font> tags (especially those with attributes, such as <font face=”Tahoma”> or <font color=”#007F00”>).

    A special note about MsoNormal.

    Copying and pasting content directly from Microsoft Word into FrontPage or Expression Web generates Office-specific markup, characteristically set off with an MsoNormal attribute. That markup may be valid (depending on the DOCTYPE declaration) but it adds unnecessary clutter and maintenance headaches.

    Tip: Copy the affected text directly from Word into Notepad and then paste it into the web page. This will strip all inline, Office-specific formatting out of the content, to which you can then apply CSS styles.

    Semantic content markup

    Now that we’ve shifted the appearance of page elements out of the HTML page and into the CSS, the tags have semantic value—they actually describe what’s contained within them. Semantic content markup offers tremendous benefits in accessibility alone. For example, because the formatting and appearance of a standards-compliant web page are handled by the CSS, instead of by inline formatting, visually impaired users no longer have to sit through the screen reader’s tedious and time-consuming itemization of every table element and transparent GIF used in the non-compliant page’s layout tables.

    Another great benefit to semantic content markup is that it can significantly improve search engine optimization. Standards-compliant web pages contain a bare minimum of markup, so when a search engine crawls your site, it encounters a much higher content-to-markup ratio, resulting in more accurate search engine results and higher page ranking.

    One final note about semantic markup: <i> and <b> tags are considered display tags; they change only the appearance of the enclosed content. Use style definitions in your CSS for elements such as code examples or UI text that should be displayed in italics or bold.

    In cases where your intent is to change the meaning of an element, use the standards-compliant <em> (meaning “emphasis”) and <strong> tags instead. Though these tags also correctly apply the desired formatting, their purpose is to provide semantic value, which—among other things—helps screen readers and other accessibility tools correctly interpret and present content enclosed in these tags.

    Conclusion

    DOCTYPE declarations and the separation of content from presentation are fundamental aspects of a standards-compliant website. More importantly, making these changes provides several important benefits: your website is much easier to maintain and extend in a standards-compliant editor such as Expression Web; you can add and expand accessibility features; and your site’s search engines results should improve.

    In my next article, we’ll examine FrontPage web components and ways to replace them with standards-compliant alternatives.

    Until next time!

    Pad Galalgher, Technical Writer

     

  • Expression Web team blog

    newest member of the expression web team: steve hebert

    • 0 Comments

    Steve Hebert recently joined the Expression Web team as a Development Lead and is working out of our new Saint Paul/Minneapolis development office. We’ve added a link from our BLOG ROLL to Steve’s blog at http://codebetter.com/blogs/steve.hebert/ where Steve has been blogging about .NET and development topics for several years. Whenever Steve blogs about something of interest to the Expression Web and web development community, we’ll be sure to mirror his blog post here on the Expression Web team blog.

    Steve Hebert, Expression Web development leadSteve’s development background ranges from manufacturing and control systems to high availability hosted web applications.  Steve authored the dotMath Expression Compiler back in 2004 (still available at http://www.codeplex.com/dotMath), and has done some patent and standards work along the way.  Apparently Steve also has a black belt in karate, which should come in handy when he needs to tackle bugs in the program.  Welcome Steve!

  • Expression Web team blog

    Take the survey of web professionals @ a list apart

    • 0 Comments

    If you subscribe to this blog or are reading this post, chances are very good that you make a living creating websites or contributing to them in some way. If you consider yourself any of these:  “designers, developers, information architects, project managers, writers, editors, marketers, and everyone else who makes websites”, then go represent and fill out the 2nd annual survey of web publishing professionals at A List Apart: The survey closes Tuesday, August 26 so you better scurry!

    http://www.alistapart.com/articles/survey2008

    The Survey, 2008

  • Expression Web team blog

    Getting started with the silverlight 2 media player in expression web 2

    • 2 Comments

    Expression Web 2 has built-in support for Silverlight version 1 in the Insert menu ( Insert > Media > Silverlight) and in the Media category of the Toolbox task pane,
    Media category in Toolbox task pane

    but what if you’ve already moved onto working with Silverlight 2? There’s no need to wait for version 3 of Expression Web - you can get started with Silverlight 2 right now in Expression Web 2.

    The Silverlight 2 Beta SDKs provide a Silverlight ASP.NET server control and also a MediaPlayer ASP.NET server control. We will look at how you can use Expression Web 2 to use the MediaPlayer ASP.NET server control that makes adding video to your website a breeze without writing any code at all.

    Silverlight 2 Media Player in Internet Explorer 7

    Setup

    To work with Silverlight 2 ASP.NET controls in Expression Web 2, you need to install the Silverlight SDK. The Silverlight SDK Betas are available on the Microsoft Downloads site. Take a look at the requirements of each Beta before choosing which SDK beta to install.

    · Beta 1

    or

    · Beta 2  - NOTE: this version requires you to also have Visual Studio 2008 on your system

    Once you have successfully installed one of those Silverlight SDKs, restart Expression Web 2 and take a look at the toolbox – 2 new Asp.Net server controls appear in the AJAX category.

    clip_image002[6]

    1. MediaPlayer Control lets you integrate media sources such as audio (WMA) and video (WMV) into your Web application, without requiring any knowledge of XAML or JavaScript

    2. Silverlight Control is a generic control that enables you to reference XAML that you provide.

    Steps

    When you add the MediaPlayer or Silverlight ASP.NET control to a page in Expression Web, Expression Web 2 adds a Bin folder and Silverlight assembly file to your website. This way your website is ready to be deployed at any time without having to install the SDK on the host server.

    1. Open an ASPX page or create a new one (File > New > ASPX).

    2. Drag a ScriptManager control onto your Aspx Page. The ScriptManager must be the first ASP.NET control on the page and is required at runtime.

    ScriptManager control in Design view

    3. Now click on the red asp:scriptmanager error text shown on the ScriptManager control in Design view to add a Web.config file to your website. Click Yes in the Confirm dialog that appears.

    Confirm dialog box

    4. Drag a MediaPlayer control onto your ASPX page, making sure it appears AFTER the ScriptManager control.

    MediaPlayer control in Design view

    5. Next click on the error on MediaPlayer control to add the Silverlight assembly to your website, and click Yes in the dialog box that appears.

    Bin folder dialog box

    6. This will now render the MediaPlayer control on the Design View. The control looks plain in Design view but there are settings you can use to customize the control’s appearance. But you won’t ever see the custom appearance in Expression Web, you always need to preview the page in a web browser to see the visual changes.

    Media Player control

    7. Click the Preview in Browser button to show the media player with its default skin.  (Your browser may first prompt you to install the Silverlight plug-in. )

    MediaPlayer control in Internet Explorer 7

    8. Now that we have tested that it works, we can set various properties. On the right side of the control, click the flyout arrow and set the following options:

    a. Choose Player Skin – I chose Expression Skin

    b. Choose Media Source – a video File (I picked up a URL to a video on the Channel 9 website)

    c. Choose Placeholder Image  – the main image to show before the video begins.

    9. In the Tag Properties task pane, find the Chapters property and click the ellipses button to bring up the MediaChapter Collection Editor dialog. Use the Position option to set chapter markers (similar to “bookmarks”) according to the number of seconds into the video that you want – and use Thumbnail Source to specify images for those bookmarks, at specified intervals so that one can directly jump to that portion of the video. I simply used screenshots I took in the video at each point of time.

    MediaChapter Collection Editor dialog box

    The code that is generated for you looks like this:

    <asp:MediaPlayer id="MediaPlayer1" runat="server" Height="341px" Width="444px" MediaSkinSource="Expression.xaml"

    MediaSource="BillGStories_ch9.wmv" PlaceholderSource="Placeholder.JPG" Source="Expression.xaml">

    <chapters>

    <asp:mediachapter ThumbnailSource="Chapter1.JPG">

    </asp:mediachapter>

    <asp:mediachapter Position="108" ThumbnailSource="Chapter2.JPG">

    </asp:mediachapter>

    <asp:mediachapter Position="240" ThumbnailSource="Chapter3.JPG">

    </asp:mediachapter>

    <asp:mediachapter Position="420" ThumbnailSource="Chapter4.JPG" Title="Soma">

    </asp:mediachapter>

    </chapters>

    </asp:MediaPlayer>

    10. Now click Preview in Browser again to look at our video – Looks way cooler with the new skin, easy to navigate using chapters and all this without writing any code at all.

    Media Player control in browser

    Wasn’t that easy ???

    When you’re ready to publish your content, check out the free Silverlight Streaming service provided by Microsoft at:
    http://www.microsoft.com/silverlight/overview/streaming.aspx

    Vijay V
    Software Developer Engineer in Test
    Microsoft Expression Web

    Vijay V, Software Developer Engineer in Test for Expression Web

  • Expression Web team blog

    Microsoft sponsors uxweek

    • 1 Comments

    UXweek.com homepage

    We know that great user experience is good business…the more engaging a web site, application, or device is, the more likely we want to spend time with it, buy it, and tell everyone we know about it.

    With this is mind, Microsoft is sponsoring a user experience conference, UxWeek, put on by Adaptive Path, August 12 -15 in San Francisco.

    In addition, we'll be presenting two sessions:

    • "The Challenge of Emotional Innovation," presented by Dennis Wixon of Microsoft Surface Computing, who will talk about how Surface introduces an exciting innovation in user experience. You can find out more about Microsoft Surface here.
    • "The Story of the Ribbon" in Microsoft Office 2007, presented by Jensen Harris, who led the effort to redefine the user experience of millions of Office customers worldwide. You can find out more about Jensen and his work on his blog here.

    You can find out more information about UxWeek here.

    Hope to see you there!

    Ed Meadows, Expression Web Product Manager

    Ed Meadows, Product Manager
    Microsoft Expression Web

  • Expression Web team blog

    Spifftacular borders with CSS3

    • 0 Comments

    I've been reading a lot about CSS3 lately, where it's going and all the cool stuff I can't wait for browsers to implement. My personal favorite at the moment is the ability to easily use graphics for borders. Say I want to go crazy with my borders and create something like this:

    This is my spiffy box with any graphic border I want.

    To give you an idea of how we'd have to do that in CSS 2 world you would need eight individual images, and a big honkin' code block like this.

    xhtml

    <div id="mycontent">
      <div class="tb"></div>
      <div class="bb"></div>
      <div class="lb"></div>
      <div class="rb"></div>
      <div class="trc"></div>
      <div class="tlc"></div>
      <div class="brc"></div>
      <div class="blc"></div>
      <p>This is my spiffy box with any graphic border I want.</p>
    </div>

    CSS2

    #mycontent {
      margin-left: 10px;
      position: relative;
      width: 200px;
      height: 140px;
      padding: 10px;
      float: left;
    }
    #mycontent .tb, #mycontent .bb {
      position: absolute;
      height: 10px;
      width: 200px;
    }
    #mycontent .lb, #mycontent .rb {
      position: absolute;
      height: 140px;
      width: 10px;
    }
    #mycontent .tb {
      background-image:url('images/top.png');
      top: 0;
      left: 10px;
    }
    #mycontent .lb {
      background-image:url('images/left.png');
      top: 10px;
      left: 0;
    }
    #mycontent .bb {
      background-image:url('images/right.png');
      left: 10px;
      bottom: 0;
    }
    #mycontent .rb {
    background-image:url('images/bottom.png');
      top: 10px;
      right: 0;
    }
    #mycontent .trc, #mycontent .tlc, #mycontent .brc, #mycontent .blc {
      position: absolute;
      height: 10px;
      width: 10px;
      background-repeat: no-repeat;
    }
    #mycontent .trc {
      background-image:url('images/topright.png');
      right: 0;
      top: 0;
    }
    #mycontent .tlc {
      background-image:url('images/topleft.png');
      left: 0;
      top: 0;
    }
    #mycontent .brc {
      background-image:url('images/bottomright.png');
      right: 0;
      bottom: 0;
    }
    #mycontent .blc {
      background-image:url('images/bottomleft.png');
      left: 0;
      bottom: 0;
    }
    #mycontent p {
      margin: 10px;
    }

    Whew, that was an exhausting amount of typing, especially if you hunt and peck.

    Additionally, problems with the above method abound. For one it's limited to fixed pixel sizes. So if your content starts pushing the height limits of its box it's not the easiest to fix.

    Here's how it's improved in CSS3. Less code and only one image is needed.

    xhtml

    <div id="mycontentcss3">
      <p>This is my spiffy box with any graphic border I want.</p>
      <p>Only its CSS3 improved</p>
    </div>

    CSS3

    #mycontentcss3 {
      margin-left: 10px;
      float: left;
      width: 180px;
      height: 120px;
      padding: 10px;
      border-width: 10px;
      border-image: url("images/polyborders.png") 10 10 10 10 repeat;
    }
    #mycontentcss3 p {
      margin: 0;
      margin-bottom: 10px;
    }

    Fingers are much less tired in the CSS 3 version.

    If your browser has support for border-image the results below will match the top example. Otherwise you'll see a double blue border:

    This is my spiffy box with any graphic border I want.

    Only its CSS3 improved

    The new CSS3 attribute border-image is where all the magic happens. To break down the anatomy of a border-image property it's as follows:

    1. url to the image you want to use for the border
    2. pixels to use from top of image for top border
    3. pixels to use from right of image for right border
    4. pixels to use from bottom of image for bottom border
    5. pixels to use from left of image for left border
    6. stretch, repeat or round

    At first I was confused by the above too but it actually turns out to be really simple. Basically you create an image that looks like a mini version of your border box. My image was:

    Polygon Borders

    Then you specify in the 2-5 options above how many pixels you need from each edge to form your borders. It automatically does the intersections of the numbers to grab the correct corners. Then you tell it how it should render the border.

    • Stretch will take a single border edge and stretch its height or width to match the pixel dimensions you need.
    • Repeat will repeat the graphic over and over to fill the area.
    • Round will do almost the same as repeat only it will stretch the border segments individually so that you don’t have any one border graphic split in the middle.

    Additionally, unlike the CSS2 border method this has no problem easily resizing and growing based on the content inside the bordered box.

    As of July 2008, Safari and other webkit-based apps are the only browsers supporting it and you have to use the -webkit- prefix to get it. But fingers crossed we'll see other browsers hopping on board and be able to add this to our developer toolbelt.

    Cheers.
    Alex
    Program Manager, Microsoft Expression Web

  • Expression Web team blog

    How to get 60 days out of your free 30 day Expression web 2 trial

    • 0 Comments

    The free trial version of Expression Web 2 is described as a "30 day" free trial on the FAQ for Expression Web 2 and in one of the screens that appears during installation of the program. In theory, after 30 days have passed the program should not start unless you enter a product key that you've purchased.

    In reality, the trial period ends and the trial program stops running at the end of the month that follows the month you installed the program. This means that if you download and install Expression Web 2 on July 1, 2008, the program won't expire until August 31, 2008, or 62 days later. If you install the program on July 31st, the program will also expire August 31...giving you only 32 days with the program. So if you want to get the most out of your free trial period, download the program at the start of the month!

    After the trial version of Expression Web 2 expires, don’t forget that you can get the upgrade version for only $99 if you own any one of the following:

    • Licensed copy of an earlier version of Expression Web
    • Microsoft Office - any version
    • Microsoft FrontPage® - any version
    • Quark QuarkXPress - any version
    • Adobe Creative Suite - any version
    • Adobe/Macromedia Flash or Director - any version
    • Adobe/Macromedia Dreamweaver - any version
    • Adobe GoLive - any version

    Anna

    anna_head_greenbg100

  • Expression Web team blog

    What do YOU want? How about some sweet swag... ?

    • 9 Comments

    Hello faithful readers!

    What would you like to read more about on the Expression Web team blog?  Tutorials? Team profiles? Weather predictions? If you want more tutorial 'how to' content, what would you like to know more about? Let us know what you want to read more about by leaving a comment on this blog post or by sending us an email.

    If we blog about something that you requested here, we'll send you some priceless swag...could be Expression Web-branded, Silverlight-branded, Zune-branded, or some other brand from Microsoft. (Just be sure to enter your email address when you post your comment or email so we can follow up with you!)

    Anna

     Anna Ullrich

  • Expression Web team blog

    Version 2 of Expression Web has arrived !

    • 7 Comments

    The Expression website was relaunched yesterday with a fresh new look and experience to coincide with the release of Expression Studio 2. Now you can get your hands on free trial versions of each program in Expression Studio 2 including Expression Web 2 or buy the program.

    So what's new in Expression Web 2?

    • Efficiently edit your PHP pages with the robust set of PHP editing features, including PHP Include rendering in the design surface
    • Preview your PHP and ASP.NET pages in your browser with a single click of a button, using the built-in Expression Development Server
    • Import Photoshop .PSD files
    • Add Flash or Windows Media files to your pages, and enhanced ActiveX support
    • Drag and drop ASP.NET AJAX controls into your pages
    • Harness the power of ASP.NET 3.5
    • Work with custom ASP.NET controls, such as the controls in the ASP.NET AJAX Control Toolkit, simply by adding the controls to the BIN folder in your website
    • Accurate design view rendering of the CSS Overflow property, and support for the IE 7 CSS Schema
    • Enhanced FTP publishing
    • Improved prebuilt CSS page layouts
    • Byte order mark options
    • Support for Silverlight 1

    You can buy the upgrade for version 2 for only $99 if you own any of the following:

    • 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
    • Corel - any version

     Once you've installed Expression Web 2, discuss the program with others at the newish Expression Web forum., check out learning options at the newish Expression Community website, or checkout the newsgroup for Expression Web. And submit feedback at the Connect website for Expression.

    Anna
     

  • Expression Web team blog

    Free online Training from HP

    • 2 Comments

    Hewlett Packard is providing a free online training for Expression Web 1 (not version 2 of Expression Web) by Virginia O'Connor. Even though the course is for version 1 of Expression Web, I didn't see anything in the content that can't be applied to version 2.

    The training consists of four lessons from May 8 - June 13th, 2008 and their website indicates the training materials will be taken down when the course ends so be sure to sign uo and get the content before June 13th, 2008.

    Here's the course description from the HP website:

    Building websites with Expression Web

    This class covers the basics for creating a website with Microsoft's Expression® Web with features such as toolbars, formatting, page layouts and link creation. With this easy website creation software, you'll apply cascading style sheets, then learn how to create complex queries, how to configure the software for different browsers and how to create interactive web pages with ASP.NET 2.0 capabilities.

    http://h30187.www3.hp.com/sessions/overview/p/courseSessionId/16257

    Anna

    anna_head_greenbg100

  • Expression Web team blog

    Expression newsletter overflows with Expression Web

    • 1 Comments

    The April 2008 edition of the Expression newsletter was published today and contains no less than four articles directly related to Expression Web, including an interview with Eric Meyer who talks about CSS:

    https://www.microsoft.com/expression/news-press/newsletter/2008-04/Default.aspx

    The newsletter also contains articles on Deep Zoom and Silverlight 2.

    To subscribe to the newsletter and receive it in email (approximately every 2 months), click here.

    Anna
    Anna Ullrich

  • Expression Web team blog

    Still on the fence? pricing and upgrade details for Expression Web 2

    • 6 Comments

    For those of you that have been enjoying the trial version of Expression Web 1, but have been sitting on the fence about purchasing it ever since you saw the BETA of Expression Web 2 come out...well now you can safely commit to the purchase because version 2 will be provided to you for FREE if you buy Expression Web 1 sometime between February 24th and June 1st of 2008.

    image

    The Expression website now provides all of the pricing details for Expression Web 2, Expression Studio 2, and all Expression programs.

    The details:

    " If you purchase any Expression product between February 24th 2008 and June 1st 2008 you qualify for a free upgrade to version 2 of the same product (Web 2 for Web, Studio 2 for Studio, etc.). Details on how to get the upgrade will be published on the Expression website on May 1. Product registration and proof of purchase will be required. "

    And just like before, you can get Expression Web for only $99 if you own any of the following:

    • Microsoft Office (any version)
    • Microsoft FrontPage (any version)
    • Adobe/Macromedia Creative Suite (any version)
    • Adobe/Macromedia Dreamweaver (any version)
    • Adobe/Macromedia Flash or Director (any version)
    • Adobe GoLive (any version)

    And note that if you own the Academic version of a program, you will qualify for the upgrade price for the nonacademic version.

    And here's another bonus tip that you will NOT find on the Expression website (at least not at the moment)...you can buy the upgrade version of Expression Media for only $99 if you own Expression Web. Why do you want to own Expression Media? For one thing, you can generate photo galleries for the web with the click of a button and create your own custom photo gallery templates with HTML and CSS. Expression Media also comes with Expression Encoder, which lets you create slide shows and deliver video for the web, and so much more. If all that is of interest to you, perhaps you should invest in the entire Expression Studio while you're at it!

    Anna

    anna_avatar

  • Expression Web team blog

    Transitioning from FrontPage to Expression Web

    • 1 Comments

    If you've been using FrontPage and are ready to embrace the world of standards-based web design with Expression Web, or if you're still unsure and need more convincing, PixelMill has created a helpful series of in-depth articles to help guide you on your way:

    http://www.pixelmill.com/support/al1095.htm

    Anna

     Anna Ullrich

  • Expression Web team blog

    Eric Meyer's CSS Sculptor for Expression Web

    • 1 Comments

    We're pleased to let you know that Eric Meyer's CSS Sculptor for Expression Web is now available for purchase! The add-in works with Expression Web 1, the Expression Web 2 BETA, and will work with the final version of Expression Web 2 when it is released. See our earlier blog post about this add-in for more information about it.

    You can quickly go to the product page for Eric Meyer's CSS Sculptor, as well as many other add-ins for Expression Web, by choosing Help > Extending Expression Web:

    expressionweb_extending

    The Extending Expression Web command takes you to the Add-ins web page for Expression Web at http://www.microsoft.com/expression/community/addin.aspx . ( WebAssist, the company behind Eric Meyer's CSS Sculptor, also provides the PayPal eCommerce Toolkit add-in and the Communication Toolkit for Skype add-in for Expression Web. )

    If you're using Eric Meyer's CSS Sculptor for Expression Web, join a discussion about it in the new forum for Expression Web at http://forums.expression.microsoft.com/en-US/web/threads/ . Or talk to the man himself through his blog at http://meyerweb.com/eric/thoughts/2008/03/06/expressive-sculptor/ .

    Anna

    anna_head_greenbg100

  • Expression Web team blog

    CSS Sculptor by Eric Meyer for Expression Web 1 and Expression Web 2 BETA

    • 3 Comments

    Banner for Eric Meyer's CSS Sculptor 

    We're excited to announce that Eric Meyer (http://meyerweb.com/ and http://www.complexspiral.com/), internationally recognized authority on HTML, CSS, and web standards, and author of some of the essential books on CSS (as if you didn't already know all that!), has released a pre-release version of his CSS Sculptor for Expression Web.

    The CSS Sculptor for Expression Web helps you create custom web standards compliant, CSS-based layouts. Finally, you can confidently and resolutely abandon your antiquated table-based layouts and start churning out CSS layouts like nobody's business!

    To work with the CSS Sculptor, close Expression Web (version 1, or version 2 BETA), download the CSS Sculptor installer, and then run the CSS Sculptor installer. Once the installation is done, start Expression Web (either version 1 or version 2 BETA), and you will have two new menu items. On the Insert menu, you will have a new WebAssist submenu, like this (shown in Expression Web 2 BETA):

    Insert menu with WebAssist submenu in Expression Web 2 BETA

    And on the File menu, you will have a new command named New CSS Sculptor Page, like this:

    New CSS Sculptor Page on File menu

    Keep an eye on this blog for another post in which we walk you through using this cool new tool! After you try the tool out, give Eric your feedback directly by commenting on his own blog post about this tool:

     http://meyerweb.com/eric/thoughts/2008/03/06/expressive-sculptor/

    And join in a discussion about the tool, or seek out help or advice, on the new Expression Web forum:

    http://meyerweb.com/eric/thoughts/2008/03/06/expressive-sculptor/
    correction! The new forum for Expression Web is at: http://forums.expression.microsoft.com/en-US/web/threads/

    And as always, let us know what you think!

    Anna

  • Expression Web team blog

    From Comp, to CSS, to Code - view the talk online

    • 1 Comments

    Tyler Simpson, our Principal Test Manager, and Nishant Kothary, Expression Technical Evangelist, presented a lively talk and demonstration of Expression Web 2 at MIX 2008 earlier this week. The recording of the session is already available online:

    http://sessions.visitmix.com/?selectedSearch=C04 

    Here's the description from the MIX website:

    Explore key features of Microsoft Expression Web through real-world scenario-based exercises focused around building a great blog template. The topics cover PHP support, Photoshop comp import workflow, CSS features, and more.

    Let us know what you think!

    Oh, and hey, have you had a chance to download the Expression Web 2 Beta yet? You haven't? Get on it then! PHP, AJAX, Custom ASP.NET controls, Photoshop support ...and more, await you here: http://www.microsoft.com/expression/products/download.aspx?key=web2beta

  • Expression Web team blog

    Expression Web 2 BETA

    • 11 Comments
    Expression Studio 2 BETA program icons

    Building on the successful launch of Microsoft Expression Web and after listening closely to your feedback, we are excited to announce the release of Microsoft Expression Web 2 Beta. This Beta release expands your toolset beyond HTML, CSS, and JavaScript, by putting PHP, Silverlight, and ASP.NET AJAX within your reach.

    Stacked with new features, Expression Web 2 provides essential tools to design standards-based websites. Web professionals can now author websites on the PHP platform more efficiently with features such as PHP syntax highlighting and statement completion (IntelliSense). Additionally for PHP, we provide an elegant solution that current Expression Web users rave about for previewing ASP.NET pages: Expression Web 2 lets you preview PHP pages locally without a separate development web server! Expression Web 2 supports interactive web content such as Silverlight and Flash, enabling you to easily include this content in your sites. Improved workflow enables you to import Adobe Photoshop designs into your sites with layer visibility control, and reimport changes with layer settings retained. New and enhanced productivity features boost your performance!

    Please install the Expression Web 2 Beta, and let us know what you think!

    Note: You can safely install the BETA of Expression Web 2 on a computer that also has Expression Web 1 on it. If you participated in a private preview program for Expression Web 2, you should uninstall the private preview version of Expression Web 2 before you install the BETA version.

    To download and install the Expression Web 2 Beta, click here.

    To submit suggestions and bugs, click here.

    To discuss the Beta with others, go to the NEW discussion forums here.

    To download other Expression BETA 2 programs, click here.

  • Expression Web team blog

    New Expression Community website

    • 3 Comments

    The Expression team has launched a new Community website where you can learn, share, and be inspired.

     Join us!

    http://expression.microsoft.com

    screenshot of Expression Community homepage

  • Expression Web team blog

    Meet us at MIX 2008 !

    • 1 Comments

    Four members of the Expression Web team are headed to MIX 2008 in Las Vegas, and would like to meet up with anyone who will also be there. Please comment on this post if you'd like to get together and chat with us...we'd love to hear from you.

    MIX 08 bling tag - I'm speaking at MIX 08Tyler Simpson, our Principal Test Manager, will be leading a session at MIX with Nishant Kothary titled "Microsoft Expression Web: From Comp, to CSS, to Code!". They'll be showing how they designed a WordPress blog template with Expression Web for Nishant's Rainy Pixels blog - http://www.rainypixels.com/ . Here's the session's description from the MIX 08 website:

    "Explore key features of Microsoft Expression Web through real-world scenario-based exercises focused around building a great blog template. The topics cover PHP support, Photoshop comp import workflow, CSS features, and more."

    Visit the MIX 08 sessions page to get the location and time of this and other sessions:
    https://content.visitmix.com/public/sessions.aspx

    If you're not going to MIX, you'll be glad to know that the Tyler and Nishant's session will be recorded and available on the MIX website after MIX. We'll blog about it once the recording is available.

    Again, if you're going to MIX, let's get together!

Page 4 of 5 (120 items) 12345