Anna Ullrich : Expression Web 2

Lorem Ipsum Code Snippet

Anna — Fri, 08 May 2009 00:51:00 GMT

I just made my first contribution to the newish Gallery section of the Expression Community website where anyone can add content and templates to share. Here’s a screenshot of the current categories:

One of many cool things about the gallery is that you can select a friendly URL name for your contribution and it’s instantly generated. I chose LoremIpsum because I contributed a code snippet that enables Expression Web users to easily insert up to five paragraphs of Latin lorem ipsum filler text into their page.

Here’s the URL of my contribution:

http://gallery.expression.microsoft.com/LoremIpsum

The following is a cropped screenshot of my code snippet page in the Gallery. As you can see, when you’re logged into the site, you can continue to edit, unpublish, or delete any contribution you make to the Gallery. They even provide download statistics:

The Description area at the bottom is where I provide instructions for Expression Web (versions 1 and 2) users to use the Code Snippet. I’ll repeat those instructions here with additional illustrations.

Adding the Lorem Ipsum code snippet to Expression Web (either versions 1 or 2)

This code snippet adds five new snippets to the list of Code Snippets in Expression Web 1 or 2. The snippets enable you to insert one to five paragraphs of lorem ipsum Latin filler text which you can use as a placeholder for content in your web pages.

Here’s how the new code snippets appear within the Code Snippets list in Expression Web after you’ve installed them:

To add this Code Snippet to Expression Web, do the following:

Download the ZIP file from this page and then extract the file. You should have a file named LoremIpsumLatinFillerText.xml .
Copy the LoremIpsumLatinFillerText.xml file to one of the following locations on your computer, depending on your operating system:
- Windows XP:
  C:\Documents and Settings\[your windows user name]\Application Data\Microsoft\Expression\[your version of Expression Web: Web Designer | Web 2]\Snippets
- Windows Vista:
  C:\Documents and Settings\[your windows user name]\AppData\Roaming\Microsoft\Expression\[your version of Expression Web: Web Designer | Web 2]\Snippets
In Expression Web, open a web page, go to the Code view and put your cursor where you want the lorem ipsum text to appear, and press CTRL + ENTER. A list of code snippets should appear, like this:

Type lorem to jump to the lorem ipsum code snippets in the list, and then double click the code snippet that you want.

To learn how to create your own Code Snippet for Expression Web, see this post of mine:

Creating a "content" snippet

Twitter on PHP versus ASP.NET

Anna — Sat, 24 Jan 2009 00:27:00 GMT

NETTUTS is a good website for web development and design tutorials: http://nettuts.com/.

Jeffrey Way, the person behind the NETTUTS website also maintains a NETTUTS profile on both Facebook and Twitter where his latest statuses caught my eye.

Turns out he innocently posted an update to TWITTER in support of ASP.NET with a slight knock against PHP, and apparently that brought a lot of responses from other Twitterers, both ASP.NET and PHP developers on PHP vs. ASP.NET.

Here are NETTUT’s tweets in order of their appearance:

I just received a fantastic series of about 25 ASP.NET (C#) videos that we'll be posting on the site. Really excited to offer these.
People are quick to attack ASP.NET - mostly because of ignorance. Take a look at what corporations are looking for. You won't see much PHP.
Not to say that I don't love PHP; I do...very much so.
Obviously you can still find a job in PHP. But in general, big corporations don't use it. Does your bank use PHP?
@zacharyjohnson - Are you sure you know the definition of "agnostic"? I'm stating facts, not opinions. I love both.
Last tweet. There's more than plenty to go around. Many successful companies use PHP. But, from my experiences, the majority of them don't
I'm sorry I brought it up. I never said that big companies don't use PHP. These are just statistics that I'm reciting. I love PHP too!

LOL!

To read the responses from other Twitterers which NETTUTS was reacting to, check out this search for replies posted the same day:

http://search.twitter.com/search?q=&ands=&phrase=&ors=&nots=&tag=&lang=en&from=&to=&ref=nettuts&near=&within=15&units=mi&since=2009-01-23&until=2009-01-23&rpp=50

Being on the Expression Web team, although I work at Microsoft, I could care less whether you choose PHP or ASP.NET since Expression Web supports both PHP and ASP.NET anyway!

Better error messages “are recommended”

Anna — Sat, 03 Jan 2009 03:18:18 GMT

A code error tip in Expression Web:

“The World-Wide-Web Consortium now regards the attribute ‘[html attribute name]’ as outdated. Newer constructs are recommended.”

Newer constructs are recommended? Who talks like that?! With all due respect, some developers talk like that, that’s who. Technical writers are typically responsible for grooming the text that appears in the user interface of a software program, but sometimes there’s just not enough time to do a quality check of UI text and so we may end up with error messages like that one.

That quoted text appears in a floating tip in the Code view in Expression Web when your web page contains a particular HTML Incompatibility error. When you encounter that tooltip, all you need to know is that you should be using CSS instead of the HTML attribute that Expression Web is flagging. I have never encountered that tooltip in any other scenario and offhand can’t think of another scenario where this tip would be appropriate. So just remember, when you see the tooltip “Newer constructs are recommended”, think CSS!

Perhaps we should change the tooltip to:

“This attribute has been deprecated in favor of style sheets...”

That’s actually a quote from the W3C’s website, in their entry for the bgcolor attribute: http://www.w3.org/TR/html401/present/graphics.html#adef-bgcolor .

HTML Incompatibility errors

So what’s an HTML Incompatibility error? It’s code in your page that doesn’t comply with the guidelines set by the DOCTYPE of your page. (For more info about DOCTYPES, check out this recent blog post by Michelle Rosenthal: http://blogs.msdn.com/xweb/archive/2008/12/17/the-quirkiness-of-quirks-mode.aspx .)

When your web page has an HTML Incompatibility error, the following happens in Expression Web:

The errant code appears with a red squiggly line underneath it in the Code view of your page. For example, look at the line under bgcolor=”aqua” in this screenshot:
When you move your cursor over the errant code, a floating message (aka “tooltip”) appears with some advice, like so:
When an open page contains an HTML Incompatibility error, the following icon appears in the status bar along the bottom of the program:

In addition to those alerts for an open page, you can check your entire website or specified pages for errors by using the Compatibility Checker which is available on the Tools menu:

After you click on Tools > Compatibility Reports, the Compatibility Checker dialog box appears:

After you click the Check button in the Compatibility Checker dialog box, the Compatibility task pane lists all the HTML Compatibility problems, CSS Compatibility problems, and also Code Errors of the pages you checked:

It’s a mighty fine tool to run on your website before you unleash your site on the world. But the tool isn’t very useful if you don’t know how to fix the problems that Expression Web has identified for you – a problem that inspired me to write this post.

There are plenty of other tooltips that appear in Code view when your page contains a code error (code that’s highlighted in color) or code that’s incompatible with the DOCTYPE of your page, and which you may find difficult to decipher. If you encounter any you need help with, comment on this post or send me an email and I’ll do my best to decrypt it for you. For code errors, you’ll need to share the code for your entire page because often the code that is flagged isn’t the problem, it’s code that precedes it that is causing a confusing domino effect!

Who's editing your CSS?

Anna — Mon, 23 Jun 2008 05:21:00 GMT

The vast majority of front end web developers that I've met prefer to write their own markup in the code editor rather than let the program generate the markup for them. In fact, it's a point of pride to hand code because WYSIWYG programs have gotten a reputation for bloated code, mangled tags, and undesirable formatting. Of course this was never the case with Expression Web (for reals!) but once you've been burned by any markup generator, it's hard to trust any program with your code.

So when does Expression Web touch your CSS and how can you take control of it (or avoid it all together)? Come, let me show you the ways...

WHEN

Expression Web generates CSS for you only when you:

Use the formatting buttons in the toolbars, for example, these buttons in the Common toolbar:
Use the formatting options in dialog boxes, for example, the Paragraph dialog box that appears when you choose Format > Paragraph:
Drag in Design view to set the margins, padding, or dimensions of an element, as in the following screenshot in which I'm dragging the shaded area below a heading to set the margin-bottom of the heading:
Use the New Style or Modify Style dialog box:
Use the CSS Properties task pane, Apply Styles task pane, or Manage Styles task pane:

When you use the features I listed in #4 - 5 (New Style dialog, Modify Style dialog, CSS Properties task pane, Apply Styles task pane, Manage Styles task pane), you are essentially writing CSS by hand, just like in the code editor, and generating whatever CSS you specify. But when you use features #1 - 3 (buttons in toolbar, property dialogs, and setting properties directly in Design view), the CSS that Expression Web generates is subject to options you set in the program.

WHAT

So what kind of CSS does Expression Web generate when you use features #1 - 3? By default, either an inline style or a class, according to the current settings on the CSS tab in the Page Editor Options dialog box (Tools > Page Editor Options):

The one exception is the "Page properties on the <body> tag" option, which you can set to either inline styles or "rules". "Rules" means the program will generate a style that uses a tag selector, i.e. the body tag will be the style's selector. (Note to self, file a suggestion to relabel "rules" to something more meaningful!)

WHERE

So where does Expression Web place the styles that the program generates for you when you use features #1 - 3? By default, Expression Web is set to Auto mode (aka Auto Style Application mode). In Auto mode, new styles that Expression Web generates are placed in an embedded style sheet in the head of the page.

What if you want Expression Web to put the new styles in the external CSS file that is attached to your page? I hear a lot of requests for that behavior (and want it myself!) but with versions 1 and 2 of Expression Web there is no way to have new auto-generated styles automatically appear in the external CSS. Keep in mind that this only applies to NEW styles that Expression Web automatically generates for you when you use features #1 - 3. In contrast, new styles that you create from scratch through the New Style dialog box are written wherever you specify, which can be the current page, a new style sheet, or an existing style sheet that's attached to the current page:

REUSE

So what do you do if you don't want Expression Web to generate a new style and instead want the program to update an existing style whenever you do anything with features #1 - 3? In that case, use Manual mode (aka Manual Style Application mode). In Manual mode, you can have Expression Web target an existing style that's in either your embedded style sheet or an external CSS file that's attached to the page, provided the style already targets the current element.

To turn on Manual mode, open a page, then go to the status bar at the bottom of the program window, right-click Style Application, point to Mode, and select Manual.

(Or choose Tools > Page Editor Options, click the CSS tab, and select the Manual Style Application option, and click OK.)

I'll show you how this works using my previous example of dragging in Design view to set the bottom-margin of my heading (h1).

MANUAL STYLE APPLICATION MODE

With the Style Application set to Manual, and my heading (H1) selected in my page, the Style Application toolbar looks like this:

When the program is in Manual Style Application mode, the critical option in the Style Application toolbar is the Target Rule setting. Whatever style is selected in the Target Rule option is the style that Expression Web updates when you use any of the features I described in #1 - 3. For example, with my h1 selected in my page, by default the style named #column_l h1 is selected for the Target Rule. That style is selected by default because it has the highest precedence of all the styles that affect the selected h1. If I use any of the features #1 - 3 while that h1 is selected, the style #column_l h1 is updated.

If I want Expression Web to update a different style when I use features #1 - 3 while that h1 is selected, all I need to do is click the Target Rule drop down and select the style I want to update or the type of new style I want created for me. For example, the Target Rule drop down menu lets me select a style named #container h1, a style named h1, or I can choose to have Expression Web create either a new class or inline style, or I can launch the New Style dialog box to create a new style from scratch myself:

In my current example, the styles happen to be in the style sheet embedded in the current page (hence why "Current Page" appears next to each style in the Target Rule drop down menu). If they were in the external CSS attached to my page, the style sheet's name would appear next to the style instead of "Current Page" and I could still target those styles if I desired.

New users of Expression Web seem to set the program to Manual style application mode because they're under the impression that this mode means that the program will not automatically generate any CSS for them; in fact, Manual mode simply means you can make Expression Web target existing styles that affect the current element instead of generating new styles by default. (Anecdote: during the development of Expression Web version 1, I anticipated that folks would interpret the label "Manual" incorrectly and so suggested it be labeled "Semi-Auto" instead, but that suggestion was rejected in small part because it brings to mind semi-automatic weapons. :) Regardless, I still think the label would be more meaningful and accurate if changed to Semi-Auto.)

To all of you that prefer to generate your CSS by hand, all you need to do is stay away from features #1 - 3 when using Expression Web and you can rest assured that your CSS is all under your control; just stick to using features #4 - 5 as well as, obviously, a page's Code view editor and the code view of a CSS file. For the rest of you, I hope this post helps illuminate how Expression Web generates CSS for you and the options available to you in the program. So who's editing your CSS? If you're using Expression Web, the options I breezed over in this post ensure YOU are in control of your CSS.

BTW, this post was inspired by Expression Web forum user Bruno Nepomuceno who started a thread to ask how to make Expression Web target his external CSS...thanks Bruno!

http://forums.expression.microsoft.com/en-US/web/thread/73c28363-7f12-497f-94e2-aaa04abe904d

plates overflowing with CSS

Anna — Wed, 05 Mar 2008 10:11:00 GMT

I think I'm the only person at Microsoft who brings her own plate to the cafeterias on campus here in Redmond. I've gotten a lot of positive encouragement from other people who notice me and my plate, but I've yet to see anyone else doing this in my two years here. I do this because in many ways, including aesthetically, it's more pleasurable to eat off a ceramic plate than a styrofoam plate, and more importantly, because it's less wasteful. Bringing my own plate to work is a good habit I got into while working at Adobe in Seattle, after seeing a few guys doing this there.

And I don't bring just any ol' plate...I bring a nice green ceramic plate that's divided like a tv dinner plate is (complete with a little circle to put the matching drinking cup on) and that was designed by Belle Kogan. Here's an image of my plate, waiting for its grilled tofu salad at my favorite Microsoft cafeteria:

I started working at Microsoft in January of 2006, and so I estimate that by bringing my own plate to the cafeteria, I've avoided using 490 disposable styrofoam plates! Four hundred and ninety styrofoam plates! What do 490 styrofoam plates look like? Well, I wish I had an image to show you that's as impressive as the photographs of Chris Jordan, but what I can do is show you a stack of 70 styrofoam plates that I photographed at the cafeteria and then cloned 7 times in Photoshop.

Rather than make you scroll the entire web page to view the image, I've instead used the BETA version of Expression Web 2 to put the image into a <div> container, set the height of the div to a much shorter height than the image, and then set the CSS overflow property to scroll. The scroll value masks out the areas of the image that extend beyond the div's dimensions and provides scroll bars so users can scroll the div container without having to scroll the entire web page.

Here it is in action...scroll baby scroll!

Now if you setup your own overflowing div in the first version of Expression Web, you'll discover that the Design view does not render the overflow property correctly. To see the results, you had to preview your page in a browser that supports the property. I'm pleased to report that the Design view of Expression Web 2 does properly render the overflow property.

Here's how to setup an overflowing div like my example above using any tool you want:

Put your content (image, text, whatever you want...) between a set of <div> </div> tags.
Tip for Expression Web users: if the content is already in your page, and you need to wrap the content with a set of <div> </div> tags, then with your content selected, press CTRL + Q to open the Quick Tag Editor, and type <div> and click the Enter button.
Use CSS to set the width and height of the div to the desired dimensions. For example, here's an inline style applied to a div: <div style="width: 450px; height: 375px;"> .

To set these dimensions in the Design view of Expression Web, click the <div> tag in the quick tag selector bar that lies along the top of your page (see image that follows )...this makes sure your <div> tag is selected and not your <img> tag - very important! And then to set the width of the div, drag the square handle (see image that follows) that's in the middle of the right edge of the div, and then to set the height, drag the square handle that's in the middle of the bottom edge of the div. Again, it's important that you do this while the div is selected, otherwise you'll resize the image instead. And it's very important to drag the handle of a side and not to drag the edge on either side of the handle...if you drag the edge then you'll set the margin of the div instead of the dimension.

After you've set the size of the div so that it's smaller than your content, the Design view of your page will show the content extending out of, or overflowing, the div like this:
Now to mask the photograph so that you can only see the portion of it that is showing within the outline of the div, you need to add the overflow property to the style you've applied to your div, and set the property's value to scroll (or to "hidden" if you don't want to provide the user with the option to scroll in the div). To do this in Expression Web, select your div, and then in the CSS Properties task pane, with the inline style (or your own style) selected under Applied Rules in the task pane, locate the overflow property and set it to scroll.

With the overflow property set to scroll, the Design view in Expression Web 2 masks the area of the photograph that goes beyond the area of the div and shows a scroll bar. The scrollbars don't function in Expression Web...you'll have to preview in your browser to test those out. And the Design view shows an outline of whatever content is overflowing outside of your div. For example, look at the white vertical lines extending downward below the selected div...those lines represent the photograph that is being masked by the div.

Power Expression Web user tip: If you want to avoid inline styles, such as the inline style that was created and applied to the div when you dragged the edges of the div in Design view, then change your CSS settings in the Page Editor Options like this: choose Tools > Page Editor Options. In the Page Editor Options dialog box, click the CSS tab, and change the Sizing, positioning, and floating option to CSS (classes). Then next time you drag the square handles of a selected element in Design view, Expression Web will generate a class for you instead of an inline style.