Anna Ullrich : Expression Web

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

Test your sites in different versions of Internet Explorer (Part 2) – Introducing SuperPreview (BETA)

Anna — Wed, 18 Mar 2009 22:40:00 GMT

My earlier post Test your websites in different versions of Internet Explorer has received a lot of hits since posted it and so I'm really pleased to submit this follow-up post on a new feature developed by my Expression Web team called SuperPreview that helps with the same problem.

Rather than repeat what others have already written about so far, I'll just post links to their reviews and our articles on SuperPreview:

http://www.sitepoint.com/blogs/2009/03/19/microsoft-superpreview-website-tester/

http://www.webdesignerdepot.com/2009/03/microsoft-announces-superpreview-for-ie-browser-testing/

http://www.istartedsomething.com/20090318/expression-web-superpreview-cross-browser-testing/

http://blogs.msdn.com/xweb/archive/2009/03/18/superpreview-technology.aspx

http://blogs.msdn.com/xweb/archive/2009/03/18/Microsoft-Expression-Web-SuperPreview-for-Windows-Internet-Explorer.aspx

http://expression.microsoft.com/en-us/dd565874.aspx

http://www.designisphilosophy.com/microsoft-expression-web/introducing-expression-web-superpreview-cross-browser-testing-at-your-fingertips-20090318/

Video interview with Erik Saltwell from the Microsoft Expression Web team:

http://visitmix.com/News/Expression-Web-SuperPreview

Download the free public BETA version of SuperPreview here:

http://download.microsoft.com/download/5/6/8/568F0D28-0434-4794-B7FC-FB293BCC98FB/SuperPreview_Trial_en.exe

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

Am I hot or not?

Anna — Tue, 15 Apr 2008 06:47:00 GMT

You've visited the http://www.hotornot.com/ website. You've voted. You've compared your vote to the average of all other voters. (You've wondered if the rumors are true that the founders of hotornot sold it for 20 million.)

Maybe you've also visited http://www.hotcaptcha.com/, but that felt a little cruel and so you went to http://www.hotornotchurchsites.com/ to feel good again.

Then you moved on to more sophisticated websites, including http://kittenwar.com/ and http://www.macbattle.com/ .

But now it's time to get serious folks, and pass judgement on more important things... Like the hotness of websites!

From Technorati founder David Sifry:

http://okorko.com

From a guy in Germany who also maintains a blog devoted to topics about Google:

http://www.hotornotdesigns.com/

From some feisty folks in New York City:

http://commandshift3.com

Fun stuff. So do you know of any more design-oriented 'hot or not' websites? Let me know! Also let me know if you know of any other quirky and silly ones.

This post was inspired by Carl Camera (LOVE that name!) whose vinetype website (created with Expression Web and Expression Design ) was voted best website in January by the commandshift3.com voters. See Carl's blog post about it. Congratulations Carl, very nice!

Flash Magazine review of Expression Web & Eric Meyer's CSS Sculptor

Anna — Tue, 01 Apr 2008 10:05:00 GMT

Good review of Expression Web and Eric Meyer's CSS Sculptor add-in for the program:

http://www.flashmagazine.com/news/detail/eric_meyers_css_sculptor_for_expression_web

Foxy searching

Anna — Wed, 26 Mar 2008 04:22:00 GMT

The first time I hit CTRL+F while using Firefox I thought I had either encountered a bug or the design of the program was flawed because nothing seemed to happen. Where was the Find dialog box that every other program on the planet (including Internet Explorer) pops up in front of you, blocking your view of your program and forcing you out of context, interrupting your flow? It took me a few times of doing this before I noticed the Find bar that appears along the bottom edge of the program:

An elegant solution! Not very noticeable if you're on a high resolution monitor and your browser window is extending the full height of the monitor, but still elegant.

And you also get that feature if you're in the Source of a page in Firefox:

Have you ever wished you had that same functionality in Expression Web? It's already there! The feature is so stealthy, we didn't even know to document it in the version 1 Help. :)

So let me introduce you to the Incremental Search command on the Edit menu in Expression Web:

To use the Incremental Search feature in Expression Web, open a page first (or a CSS file or other document). Then in either the Design view or Code view of your page, select Edit > Incremental Search or just press CTRL+ALT+F. Your cursor changes to a down-pointing white arrow and binoculars . And instead of a Find dialog box or Find toolbar appearing, Expression Web displays the text Incremental Search: in the status bar at the bottom of the program window:

When that appears, just start typing what you want to find. The characters you type appear in the status bar, for example, I've typed hover:

As you type, the first instance of the characters you typed is highlighted in the page and if necessary, the program scrolls the page to display the instance.

If no instances are found, the status bar tells you so:

If the characters you typed are found and there are multiple instances, press F3 to go to the next instance in the page or press SHIFT+F3 to go to the previous instance. When you've gone to a previous instance, the status bar displays Reverse Incremental Search:

When you're ready to stop searching, just click in the page or press either ESC or ENTER.

QUICK & SLICK!

A developer on my team (hey Tomas!) informed me that Visual Studio has had this "forever" but it's accessed in that program through CTRL+I apparently. No matter, everything old is new again... And Tomas also pointed me to an extension for Internet Explorer that adds that kind of search functionality and some extra features too (maybe the IE 8 team will support something like this, hint hint): http://www.ieforge.com/InlineSearch/HomePage

When you need more robust searching intelligence in Expression Web, there's always ye ol' classic Find and Replace dialog box too:

BTW, does anyone say foxy anymore? That's a foxy feature you got there Expression Web. The developer who implemented that feature is a fox! I'm feeling foxy! Such a versatile word... ;)

Creating a "content" snippet

Anna — Tue, 04 Mar 2008 04:05:00 GMT

I was working on a demo to present to a few people earlier today, and wanted to insert some Latin filler text into the page that I was mocking up in Expression Web. So as I usually do, I pulled up http://www.lipsum.com/ in my browser, entered the number of paragraphs I wanted, pressed their Generate Lorem Ipsum button, copied the text in the browser, and then pasted it into my page in Expression Web. Bleh...

Since I would be demoing those same steps in front of other people, I became very aware of how inefficient that all is and then it occurred to me that I could put the text into a Code Snippet instead. Seems obvious in hindsight, but maybe the feature's name "code snippets" kept me from associating it with inserting a snippet of "content"? Actually, this idea had occurred to me before but just not when I needed filler text. Anyhoo...here are the steps to create a snippet of content you can quickly insert into pages in Expression Web:

Do one of the following:

Choose Tools > Page Editor Options, and then in the Page Editor Options dialog box, click the Code Snippets tab.
With your cursor in the Code view of your page, press CTRL + ENTER, and then in the popup list that appears, if the Customize list... option is selected then press ENTER or double-click Customize list...

In the Page Editor Options dialog box, on the Code Snippets tab, click Add.
In the Add Code Snippet dialog box, do all of the following:

In the Keyword box, enter the characters you want to use to jump to this code snippet in the list of code snippets. (I entered lorem.)
In the Description box, you guessed it, describe your code snippet. (I entered lorem ipsum Latin filler text.)
In the last text box, enter as many paragraphs of Latin filler text as you'd like. I entered two paragraphs of text. (Each paragraph of text appears in a single line of text in this dialog box...odd, I know, but it works fine.) And because I typically want paragraph tags around each paragraph, I also put a <p> tag before each paragraph and a </p> tag after each paragraph.
Click OK.

And click OK again, this time in the Page Editor Options dialog box.
Now whenever you want to use your snippet of filler content, just go to the Code view of your page, put your cursor where you want the content, press CTRL + ENTER, and then start typing the keyword that you assigned the code snippet in step 3-1 , and press ENTER as soon as the right snippet is selected.

Ta da! Infinitely easier...

Community website for Expression

Anna — Fri, 29 Feb 2008 06:06:00 GMT

Check out the new Community website devoted to design, creative development, and Expression Studio:

http://expression.microsoft.com/

You'll find all sorts of stuff there for inspiration, learning, and community, and I'll be there too:

NEW Expression community discussion forums

Anna — Thu, 21 Feb 2008 04:58:00 GMT

The Expression family of products has a new and greatly improved discussion forum:

http://forums.expression.microsoft.com

The new forums have many new features including a tag cloud, user avatars, richer ux, and official forum moderators from the product teams, including yours truly.

The previous discussion forums (http://www.microsoft.com/communities/newsgroups/en-us/default.aspx?dg=microsoft.public.expression.webdesigner&cat=&lang=en&cr=US) will remain open and available while its threads are ported over to the new forums. But please use the NEW forums instead.

Join me over in the new forums!

Center a page (horizontally) by using CSS

Anna — Wed, 20 Feb 2008 03:53:00 GMT

I often see posts in the Microsoft Expression Web discussion forum, asking how to make a web page appear centered in the web browser. One simple method is to surround the contents of your page with a div (if it isn't already), set the div's width, and then set the div's left and right margins to auto. This tutorial shows you how to do all that step-by-step by using the design surface in Expression Web and CSS. The final markup appears at the very end.

[ Note: after posting this tutorial, a colleague pointed out that this solution may not work in Internet Explorer 6. I'll look into this in a few weeks, when I have more time, and either update this post or post a separate addendum. ]

If your entire page is already wrapped by a div tag that has a defined width, then you can jump to step 9.
Put your cursor in your page in Design view.
In the quick tag selector bar that lies along the top of your page, right-click the <body> tag and click Select Tag Contents. This ensures you've got everything in the body of your page selected, including tags.
Do one of the following to wrap your page contents in a <div> tag:

In the Toolbox task pane, under HTML > Tags, right-click <div> and click Wrap.
tag in Toolbox task pane" style="WIDTH: 186px; HEIGHT: 275px" height=275 alt="context menu of
tag in Toolbox task pane" src="http://blogs.msdn.com/photos/posts/images/7799086/original.aspx" width=186 mce_src="http://blogs.msdn.com/photos/posts/images/7799086/original.aspx">
Press CTRL+Q to display the Quick Tag Editor dialog box. In the dialog box, set the pull down menu to Wrap Tag, type <div> on the right, and press Enter to accept your changes and close the dialog.

In the status bar that lies along the bottom of the program window, make sure Visual Aids is set to On. If Visual Aids is set to Off, then double-click Visual Aids in the status bar to turn them on.
In the status bar, right-click Visual Aids and make sure the Block Selection visual aid is selected. When a visual aid is selected, its icon appears orange in the list of visual aids.
In the quick tag selector bar, click the <div> that's directly to the right of the <body> tag, just to make sure it's selected.
In the Design view of your page, on the right edge of your selected div, a square handle appears in the middle. Drag this handle to the left until the div is the desired width. Be careful to drag the square handle and NOT the edge of your div; if you drag the edge of your div you will set the margin of your div instead of its width and that's not what we want to do here. As you drag, the dimensions of the div appear in a floating box. I stopped dragging when the width was 395px...not a practical size for a web page but it's a good size for a screen capture that will fit in this blog post. :)

If you're having trouble getting the precise width you want, with your <div> still selected, go to the CSS Properties task pane, and set the width for the selected style. When you drag in Design view to set the width of an element, you set the width in pixel dimensions, but you could set the width of your div to a % value instead if you want the page's width to change relative to the browser window's width. (Note - by default, the selected style will be an inline style on the <div> tag, but if you've modified your CSS options in the Page Editor Options, the selected style is a class. Or if your Style Application mode is set to Manual (not recommended for novices!), you might have a class or tag selector selected.)
Make sure your outer <div> is still selected (in the quick tag selector bar, click the <div> that's to the right of the <body> tag), and not a different <div> or anything else within it.
In the CSS Properties task pane, find the margin-left and margin-right attributes and set both to auto. If you preview your page in your browser, the page should appear centered no matter the width of your browser window.

Here's the final markup of my page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
.style1 {
 background-color: #CC0066;
}
</style>
</head>
<body style="background-color: #CCCCFF">
<div style="width: 395px; margin-left: auto; margin-right: auto;">
 <p class="style1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut nonummy. 
Suspendisse mi risus, dignissim id, ornare ultricies, venenatis in, 
sapien. Praesent quis nunc. Sed dapibus. Pellentesque elementum blandit
 dui. Curabitur elit. Aenean auctor euismod sem. Etiam quis justo id lectus
 commodo interdum. Maecenas suscipit, ligula ut adipiscing ullamcorper,
 augue diam suscipit est, et tristique neque nunc quis nulla. Nunc eu mi 
facilisis lacus cursus elementum. Morbi risus ipsum, dictum non, iaculis 
imperdiet, ultricies id, neque. Curabitur ac mauris. Nulla sit amet diam.
 Duis porttitor. </p>
</div>
</body>
</html>

Interactive buttons - a better way using CSS

Anna — Mon, 18 Feb 2008 05:33:00 GMT

My inaugural blog post is a tutorial that I promised to create for an Expression Web user a long (too long!) while ago. I promised to show him how easy it is to use CSS instead of the Interactive Buttons feature he relies on in Expression Web. The Interactive Buttons feature generates simple button images and JavaScript for you, and lets you select the font properties, size, color, and interactive behavior of your buttons. But why bother with images and all that script when you can get the same results with HTML and CSS?

Using HTML and CSS instead of the Interactive Buttons feature has many advantages, including:

More control over and options for the appearance of your buttons
Browsers don't need to download images for each button and button state
Easily reuse the buttons throughout an entire website by attaching a single CSS file to each page
Easily change the appearance of your buttons by editing that one CSS file
The markup has semantic value (http://www.alistapart.com/articles/grokwebstandards/)

If you're new to CSS or to using Expression Web, this tutorial should be useful. Please let me know what you think and if you encounter any problems. If you're not new to CSS, I'd love to hear from you too...what do you think of the CSS I'm using? If you don't want to follow all the steps and just want the final results, you can see the final markup at the end of the tutorial.

Here's what we're going to create:

Start by creating a bulleted list for your menu.
Display the Style toolbar: View > Toolbars > Style. The Style toolbar provides an easy way to both create and assign classes and ids to elements in your page or apply existing classes and ids to elements.
With your cursor in your bulleted list, click the <ul> tag in the quick tag selector bar that lies along the top of your page. This ensures the ID that we assign in the next step is applied to the entire list instead of to only a single list item.
In the Style toolbar, in the ID text box, type a name for your menu, and press Enter. I typed nav_menu. The ID should now be applied to the selected list (i.e. to the ul tag).
On the Format menu, click New Style. (You can also select this command by clicking the New Style button on either the Apply Styles task pane or the Manage Styles task pane, or in the CSS Properties task pane by right-clicking in a blank area in the Applied Rules area.)
In the New Style dialog box, delete everything in the Selector text box, and then type a # sign and then the name that you gave your list in step 4, followed by a space and the tag li. For my example, I typed #nav_menu li in the Selector text box. By using this selector, the style we create will affect any li tag (the tag for a single list item) that is within an element that uses the ID nav_menu but won't affect any list items that are elsewhere on the page.
In the New Style dialog box, under Category, select List. On the right, set list-style-type to none, and then click Apply to see the results in your page but without leaving the dialog. By setting the list-style-type to none, we get rid of the bullets next to each list item.
To make the navigation menu lie horizontally instead of vertically, under Category, select Layout, and then on the right, set float to left. Click Apply to see the results. You'll notice that the list items have no space between them now, but we'll fix that next.
Under Category, select Position. On the right, set width to the desired width for your buttons. I set the value to 4 and the units to em. I used em for units so that if a user changes the text size in their browser, the buttons will expand in size along with the text. Click Apply to see the results.

Time to give the buttons some color and jazz things up...
Under Category, select Background, and then set background-color to the color you want your buttons to be. I set the color to a purple hue: #800080. Click Apply to see the results.

Next, we'll make the text appear centered within each button.
Under Category, select Block. On the right, set text-align to center.
If you want space between your buttons, in the Box category, next to margin, clear the box next to Same for all, and then set right and left to the values you want. I set each value to 1 and the units to px. Click Apply to see the results.
If you want a border around the buttons, select the Border category on the left, and set the properties you want on the right. I set border-style to solid, border-width to 2px, and border-color to #000000.
We're done with that style, so click OK to close the dialog box.
Next, we'll make hyperlinks out of the buttons.
Select the text of one of your buttons, press CTRL+K to open the Insert Hyperlink dialog box, enter the URL you want in the Address text box, and click OK. Repeat for each button in your navigation menu. Now your text probably looks pretty horrible like mine...we'll fix that next.
On the Format menu, click New Style.
In the New Style dialog box, in the Selector text box, type # and the ID of your navigation menu (named in step 4), followed by a space and the letter a (i.e. for the anchor tag.) For example, I entered #nav_menu a. With this selector, our style will affect hyperlinks that are within an element with the id nav_menu and won't affect hyperlinks anywhere else in the page.
Under Category, select Font, and then set all the properties you want on the right. I set font-family to Arial, Helvetica, sans-serif, color to #FFFFFF, and then so the text in my menu isn't underlined, I set text-decoration to none.
Click OK.

Now it's time to create a hover effect so when someone puts their pointer over one of the buttons, the button changes color.
On the Format menu, click New Style.
In the New Style dialog box, next to Selector, type # and the ID of your navigation menu, followed by a space and then li:hover. In my example, I typed #nav_menu li:hover. With this selector, the style we create affects any list item (i.e. the li tag) the visitor's pointer is hovering over but only if the list item is in an element that uses the ID "nav_menu". Any other list items on the page aren't affected.
Select the Background category, and set the background-color to a different color than the background color of your buttons. I set the background-color to a pink hue: #FF0066. You can set other properties too if you want them to change when someone hovers over a button, such as the text color or font.
Click OK.

Let's test this in the browser and see what we have...
Either click the Preview in Browser button in the toolbar or press F12. If you're prompted to save your page, click Yes to save it. (Here's a bonus tip: if you want to prevent that dialog prompt from appearing and want to automatically save your page whenever you click the Preview in Browser button, then choose File > Preview in Browser > Edit Browser List. In the Edit Browser List dialog box, select the option Automatically save page before previewing and click OK.)
In your browser, notice that when you put your pointer over any of your buttons, the background color changes no matter where your pointer is on the button...this is by design, BUT you can't click the hyperlink unless your pointer is directly over text in a button. We'll fix that next...
Open the CSS Properties task pane. Put your cursor in one of your buttons in your page, and then in the CSS Properties task pane, under Applied Rules, click the style you created in step 16-17. In my example, the style is #nav_menu a.
In the CSS Properties task pane, locate the property named display and then set its value to block.
Save your changes and preview your page in the browser. Each button should now respond as a hyperlink no matter where your pointer is on the button.

Here's the final markup from this tutorial:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
#nav_menu li {
 border: 2px solid #000000;
 list-style-type: none;
 float: left;
 width: 4em;
 background-color: #800080;
 text-align: center;
 margin-right: 1px;
 margin-left: 1px;
}
#nav_menu a {
 font-family: Arial, Helvetica, sans-serif;
 color: #FFFFFF;
 text-decoration: none;
 display: block;
}
#nav_menu li:hover {
 background-color: #FF0066;
}
</style>
</head>
<body>
<ul id="nav_menu">
  <li> <a target="_blank" href="http://blogs.msdn.com/anna">one</a></li> 
  <li> <a target="_blank" href="http://blogs.msdn.com/anna">two</a></li> 
  <li> <a target="_blank" href="http://blogs.msdn.com/anna">three</a></li> 
</ul>
</body>
</html>