Anna Ullrich : tutorials

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

The vexing hunt for HEX values

Anna — Thu, 12 Feb 2009 10:49:00 GMT

I’ve watched a lot of web developers jumping between their HTML code editor and their page comp in Photoshop to look up the hexadecimal value of colors in the page comp. Should be a simple process but the steps they take are often painful to watch. So I decided to write up some Photoshop tips to show some better ways to look up HEX values in Photoshop.

The musty crusty out-of-the-way Color Picker way

The workflow I see web devs use to look up HEX values in Photoshop is often:

Click a color in your page comp with the Eyedropper tool:
Double-click the foreground color swatch in the Tools panel

to open the Color Picker dialog box.
Select the hex value at the bottom of the Color Picker dialog box, and copy it.
Then return to the code editor and paste.

Bleh, that’s pretty awkward, plus who likes the whole dialog box experience? …suddenly taking you out of your workspace and freezing the entire application to focus on only the dialog. Especially annoying when you’re in the dialog but discover you need to back up and select something else, then reopen the dialog box.

Use the Info panel to look up HEX values

The default INFO panel settings show the RGB and CMYK values of the color under your pointer as well as the XY coordinates and dimensions. But why just accept the default settings? You deserve better, so check this out.

Click the options button in the upper right of the panel and click Panel Options:

to open the Info Panel Options dialog box:
Then click the Mode menu under either the First Color Readout or Second Color Readout, and select Web Color and then click OK.

Voila…now when you move your cursor over an image in Photoshop, the HEX values appear in the readout you just set in the panel options:

One inconvenience is that you can’t copy the values in the INFO panel, you’ll have to hand type the values into the code editor. And second, the values disappear as soon as you move your pointer away.

Use the COLOR panel to look up HEX values

Next method I’ll show you is to use the COLOR panel. By default the panel provides you with RGB sliders:

But again, stop settling for the default settings!

Click the options button in the upper right, and then select Web Color Sliders:

Now after you click on a color with the Eyedropper tool the COLOR panel shows the HEX values:

No musty dialog box required! Plus instead of four steps, all you have to do is one: click with the Eyedropper tool on a color. You could copy and paste each set of HEX values in the COLOR panel, but it’s probably easier to type them manually in the code editor. Or read on…

Use the Copy Color As HTML command…

…In the COLOR panel

The Copy Color as HTML command can be useful in many circumstances. One place to access this command is in the Options menu in the COLOR panel:

When you click Copy Color as HTML, the current hexadecimal color in the COLOR panel is copied, and when you paste into the code editor, you get this:

color="#d09d9c"

Sometimes that’s useful, but not if you need something like

background-color:#d09d9c

or many other things, so would be better if what was copied was just the HEX value instead of Photoshop assuming the property you want.

…In your document

You can also access the Copy Color as HTML command while sampling color with the Eyedropper tool in your document.

Just put the Eyedropper over the color you want to sample, then right-click and select Copy Color as HTML:

Easy smeezy!

Separating the wheat from the chaff: Script & Style helps you find the best web development articles

Anna — Wed, 28 Jan 2009 10:18:00 GMT

The Community Server control panel for my blog purports to show me what site a person was on when they clicked a link and came to my blog. Looking at the panel tonight, I noticed many hits coming to my post “Test your websites in different versions of Internet Explorer” from scriptandstyle.com where my post was included in the queue. So I thought I’d return the love and blog about Script and Style where web developers, web designers, markup monkeys, etc. can submit links to articles they think are interesting and are about “the latest and greatest in XHTML, CSS, and javascript.”

The submissions are all moderated behind the scenes to ensure only good stuff is posted. The latest links to articles include the following:

From webdesignfromscratch.com: This article shows you how to use CSS floats to achieve any column layout, while keeping your most important content highest on the page.
From CSSGlobe.com: New version of the Easy Slider plugin for jQuery is here. It features auto slide, continuous sliding, multiple sliders on one page and more…
From new.uxmatters.com: Beyond Usability: Designing Web Sites for Persuasion, Emotion, and Trust - The next wave in Web site design is persuasive design, designing for persuasion, emotion, and trust. While usability is still a fundamental requirement for effective Web site design, it is no longer enough to design sites that are simply easy to navigate and understand so users can complete transactions. As business mandates for Web site design have grown more strategic, complex, and demanding of accountability, good usability has become the price of competitive entry. So, while usability is important, it is no longer the key differentiator it once was.

And of course my post on testing websites in different versions of Internet Explorer. Good stuff !

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!

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

Webmonkey.com reborn with version 2.0 BETA

Anna — Mon, 02 Jun 2008 05:09:12 GMT

When I first started building websites, I visited webmonkey.com often for its tutorials and to look up stuff but the website appeared to die out several years ago. Apparently the folks at Wired have resurrected the website this past week as Webmonkey 2.0 BETA:

http://www.webmonkey.com/

In 3 and a half minutes, all you need to know about web design and web standards

Anna — Fri, 04 Apr 2008 22:26:00 GMT

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... ;)

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.

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...

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>