PixelMill Blog

Adding Content to your Expression Web or SharePoint Designer site.

When moving content from one website to another or adding content from any other source (Word, Outlook, etc.)use notepad so you don't add any extra unwanted code or formatting to your site.

Watch this short video showing how to properly move your content over to your new site.

FrontPage to Expression Web Online Seminar Series

Starting Tuesday, September 18, 2007
10:00 am - 11:00 am PST
This is a 6-Week series designed to give you strong exposure to the new Expression Web software and interface, along with tips for transitioning from FrontPage. This series will feature the following sessions:

• The Expression Web Interface
  Session 1: Sept. 18


• Moving to Standards: Semantic Markup and HTML
  Session 2: Sept. 25


• Introduction to CSS
  Session 3: Oct. 2


• Expression Web and CSS
  Session 4: Oct. 9


• Accessible Sites with Expression Web
  Session 5: Oct. 16


• Scalable Sites for the Future
  Session 6: Oct. 23

Time: 10:00am - 11:00am PDT
Registration: $149
Early Bird: $99 (Register by Sept. 14th)

Act Fast! - Only 25 Seats Available!

Toll-free conference call number provided to U.S. and Canada callers. Long distance charges may apply for international calls. Broadband connection recommended. Utilizes GoToMeeting and GoToWebinar solutions from Citrix.

Buy Expression Web Online

Looking for an easy way to buy Expression Web?

Microsoft now offers the ability to purchase and download Expression Web, and some of the other Expression products, direct from Microsoft. Plus FrontPage users can still get the special $99 upgrade offer when purchasing the direct download.

If you have been holding off because you don't want to go down to the store or wait for a box that you don't want to find a place to store, this is your opportunity to purchase and go. Visit the Expression Web 'Purchase' page to download this valuable new tool today!

Flash Online Image Galleries

Are you looking for an attractive way to display your photography on your site?

We've recently released three Flash-based image galleries that will give you an easy-to-deploy, unique solution for displaying your gallery of photography and images within your web site.

The ImageViewerPlus series (Standard, XL, and XL2 with PayPal Integration) are resizeable online image galleries for showcasing and viewing images in a professional and intuitive interface. The gallery is designed for displaying larger images at a maximum width of 650 pixels and a maximum height of 488 pixels. The entire gallery is designed at a resolution of 1024 x 768 pixels (800 x 600 in Standard version).

PSD files are included for changing the main background design or adding additional elements. All configuration is done by editing a user friendly XML file. This would include options for the following: background image, sound file definition, gallery button labels and large image definitions. Gallery navigation buttons are automatically generated from the information contained in the XML file.

They have support for unlimited categories/galleries. Scroll feature is built in for scrolling menu buttons up or down when there are more buttons than the display area allows. Left and right scroll arrows are provided for moving the thumbnails left or right when there are more thumbnails than the display area allows. A larger thumbnail expands out on mouse over. After clicking on a thumbnail, the larger image is displayed along with a description window in the lower right corner that can be opened or closed.

A slide show option is available for each gallery, along with buttons for displaying Next and Previous images. Images are displayed with a very smooth dissolve transition. The master background image can be defined within the XML file and edited with the included PSD file. Includes a sound on/off button. The MP3 file can be defined within the XML file. Two additional message screens are included for displaying additional information. These can be edited within the included FLA file.

HTML and java script files are included for calling ImageViewerPlus XL in a pop up window or full screen viewing. ImageViewerPlus can be viewed from the web or your local computer. Optimized for 1024 x 768 resolution (800x600 in standard version). FLA source files included.

Requires Flash MX (or higher) to edit some design elements, but is not required for out-of-the-box use. ReadMe file for editing the XML file and adding galleries included.

Learn More...

ImageViewerPlus XL - $165

ImageViewerPlus XL2 w/ PayPal Integration - $195

ImageViewerPlus v1.0(standard) - $125

Want a different music track for your image viewer? Visit PixelMill's Royalty Free Music collection.

Expression Web White Paper

The Expression Web team has published a white paper specifically to help FrontPage users transition to Expression Web and the current environment of web standards.

This white paper:

• Outlines the differences between FrontPage 2003 and Expression Web.
• Introduces the Expression Web workspace.
• Discusses Web standards.
• Provides information on how to work with your existing site, including FrontPage Web components, themes, and shared borders, in Expression Web.
• Introduces ASP.NET support and data integration available in Expression Web.

From Expression Web blog

Here's the URL to download the document: http://download.microsoft.com/download/f/f/2/ff2d736a-9ec6-4e3b-b094-d782aa7cda72/Microsoft_FrontPage_to_Expression_Web.doc

Expression Web reformats stylesheet

I think I've finally pinpointed an Expression Web bug that has been driving me crazy.

I like to define multiple selectors all at once in stylesheets by separating them with commas. For example -- instead of defining the font color for each heading, like this:

h1 { color: red }

h2 { color: red }

...


... you can list the different selectors with commas to define the font color all at once, like this...

h1, h2, h3, h4, h5, h6 { color: red }

Well, I noticed that at some point (and I didn't know when until today), Expression Web would break out all the selectors into their own individual rules. So my simple CSS code would get turned into this:

h6 { color: red }

h5 { color: red }

h4 { color: red }

h3 { color: red }

h2 { color: red }

h1 { color: red }

I found this pretty aggravating, so today I finally sat down and worked hard to figure out what triggered the bug.

From my testing, it looks like if you copy content from one page in Expression Web and paste the content into another page, the bug will be triggered and your stylesheet reformatted. The unfortunate thing is that there is no way to "undo" the change -- you'd have to go back and manually type out your rules for them to be the way that they used to be.

I've put in a post at the Expression Web newsgroup and will keep you posted if there are any updates on this issue. If you've come across anything else, please post a comment!

In the meantime -- I've saved a copy of my properly formatted stylesheet as "backup.css," and use that to replace my stylesheet if I inadvertently reformat it by copying and pasting (which I do quite often!).

CSS and Expression Web

I've added a new article to our support knowledgebase about how CSS works and is integrated in Expression Web. You can view the full article text here...

If you're a long-time FrontPage user, you're probably used to using the Formatting toolbar to make your text bold, italic, colored, use different fonts, etc. If you ever took a glimpse at the generated HTML code, you would have seen lots of <font> tags -- perhaps something like this:

<h1><font color="#000099" size="5" face="AGaramond, Garamond, Georgia, serif">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </font></h1>
<p><b><font size="2" color="#CC0000" face="Georgia, serif">In volutpat consectetuer nulla.</font></b><font face="Verdana" size="2" color="#CC0000"></font></p>

Expression Web, in keeping with today's web standards, has thrown out the <font> tag altogether and now generates formatting using CSS, or Cascading Style Sheets. (If you need to be convinced that CSS is a good thing, take a look at my Intro to CSS ("A Baking Analogy") article, or "Why CSS?" from the PixelMill newsletter.) With CSS, not only can you end up with cleaner, leaner code, but CSS gives you a lot more options for formatting not just text but the display properties of any object or element on your page.

How a style works

CSS code is different from HTML code, which means it has its own rules. But it was designed to work together with HTML to format your web content.

If you wanted bold red text in a paragraph before (using the formatting toolbar), you would have had HTML code that looked like this:

<b><font color="#ff000">Red text</font></b>

With CSS, you can streamline the code by creating separate CSS code that looks like this:

.red { color: #ff0000; }

In the HTML code, you can then use this "class" as many times as you'd like.

• You could apply the class to the bold tag for bold, red text: <b class="red">Red text</b>
• You could apply the class to a paragraph tag to get an entire paragraph of red text: <p class="red">An entire paragraph of red text</p>
• You could apply the class to a table cell to turn all the text in the table cell red: <td class="red">Everything is red!</td>
• The opportunities are endless!

In FrontPage, applying red text would result in multiple instances of the <font> tag, and if you wanted to change the color later, you'd have to go through every page and select the text and change the color. With CSS, you can simply edit the stylesheet to use a different color:

.red { color: #660000; }

... and ALL the red text in your site will change!

How Expression Web creates CSS code for you

In FrontPage, you could generate CSS using the Style dialog box. Expression Web provides two ways of creating CSS code:

1. Style dialog box
   Expression Web has redone the Style dialog box to allow easier access to properties and brought it front and center with convenient links to create a "new style" or to modify a style via the Apply Styles and Manage Styles task panes. This allows you to create your own custom styles and define as many properties as you'd like. When you use the style dialog box, you have the option of creating the CSS code in the page itself (the style would only be available for that page) or in an external stylesheet (the style would then be available for all pages that link to the stylesheet).
2. Formatting toolbar
   Expression Web will auto-generate CSS code when you apply formatting (colors, fonts, etc.) from the Formatting toolbar. By default, Expression Web will create classes called ".style1", ".style2," etc., in the <head> area of your page. If you use the Formatting toolbar to apply the same property, Expression Web will reuse styles as appropriate. (See Advice and tips below about the Formatting toolbar.)

Advice on transitioning to Expression Web and CSS

If you're totally new to CSS but want to use Expression Web to create standards-compliant sites, I have some advice for you:

• First, accept that you will have to learn at least some basic CSS.
  Expression Web organizes the Style Dialog box options by grouping similar CSS properties. While some of the property names are fairly intuitive to figure out what they do ("color" allows you to change the text color, for example, and "font-size" is pretty obvious!), you'll need to learn what the difference is between "padding" and "margin," how properties can be applied to affect different elements, how CSS rules "cascade" from one element to another, and other basic knowledge about how to best use stylesheets.
• Think "globally."
  In general, using the formatting toolbar creates a lot of new styles that you have to rename and keep track of. You'll have to re-train yourself to think in terms of creating "global" CSS rules that can be either applied by default (without any more page-by-page work on your part) or that can be reused multiple times. As a concrete example, instead of highlighting all the text on your page and then setting the font, text size, and text color, you can create a CSS rule on the body element (in HTML, the body element contains everything else that shows on your page) to set a default font, text size, and color for your entire site. As another example, drawing from my "red text" example above, you can create a global class for ".red" text that can be reused throughout your site and applied to your text, instead of using the Formatting toolbar and ending up with multiple styles that do the same thing.
• Use the Style dialog box instead of the Formatting toolbar.
  By using the Style dialog box, you have more control over how your CSS rules apply to different elements and you have more options than what the Formatting toolbar provides. You can use the Formatting toolbar to learn CSS -- make a change and then look at the generated code to see how the properties are defined in CSS; however, using the Formatting toolbar on a day-to-day basis can create lots of extraneous styles that clutter up your site.

Creating and using CSS in Expression Web

To learn more about creating and using CSS in Expression Web, take a look at "Transitioning to CSS" and scroll down to the section on "Working with CSS Templates in Expression Web."

To learn the basics of CSS, take a look at "Learning CSS." This article gives some sample code of how you can use CSS and provides information on the different CSS properties and what they are used for, but it doesn't go into great detail on actually creating complex layouts with CSS (it's focused more on the kind of CSS you might find in one of our templates). The article is a great place to start to familiarize yourself with CSS, and there are links to other resources if you'd like to learn more.

From CSS and Expression Web, KB101771.

Navigation Structure in Expression Web

It's possible to get Navigation View back into Expression Web, at least temporarily! Here's a great tip from the Microsoft newsgroup for those sites that you want to edit in Expression Web but that use FrontPage link bars or page banners.

1. Open your local site in Expression Web.
2. Go to Tools... Macro... Visual Basic Editor.
3. This launches Visual Basic Editor. Go to View... Immediate Window (or type Ctrl-G) if the Immediate Window isn't showing.
4. Inside the Immediate Window, type this code: ActiveWebWindow.ViewMode = WebViewNavigation
5. Type Enter to run the code.
6. You can close the Visual Basic Editor to return to Expression Web.

What you should see is that the Hyperlinks view has been temporarily replaced with Navigation View. (If you change to a different view, you'll have to run through the process again.) Now you can rearrange link buttons, add pages to the navigation structure, rename pages, etc., to your heart's content!

Looks like I'll have to go through and modify our Expression Web support articles to incorporate this new information!

Of course -- if you're shooting for an XHTML-validated site, you can't use FrontPage Link Bars because the FrontPage webbot-generated code doesn't validate. Eventually you'll want to move towards CSS-formatted text links, either in a Dynamic Web Template, master page, or include page. We have several support resources on this topic for you, including:

• Support article detailing how to replace FP link bar with CSS-formatted link bar
• Free webinar recording detailing the first part of using an include page instead of a link bar
• Premium webinar recording with CSS basics and advanced CSS techniques for formatting link bars

Expression Web Myths

After talking to several PixelMill customers about Expression Web, I've realized that there are a lot of misconceptions and myths about Expression Web that are keeping people from even trying it out. Here, I'll attempt to address some of the ones that have come up.

Myth #1: You must use Expression Web with ASP.NET web sites.

Many of the demo videos on the Microsoft site do show .NET web sites as the samples, but you can use Expression Web to manage any non-ASP.NET web site, just as you would use FrontPage! Expression Web is a general web editor that just happens to include support for .NET controls as well. You can completely ignore the .NET controls and just use Expression Web to edit your normal HTML/XHTML web site.

Myth #2: Expression Web isn't compatible with FrontPage-built sites.

In general, Expression Web is fairly backwards-compatible with FrontPage-built sites. Expression Web works with webs and subwebs the way FrontPage does, in the sense that you can continue to open webs and subwebs (live off the server or on your local computer or development machine). The FrontPage webbot components can be double-clicked and modified within Expression Web.

The only thing that you lose in moving from Expression Web to FrontPage is the ability to change link bars, rename pages, etc. within Navigation View. This is because Expression Web encourages the use of CSS over Themes and encourages XHTML-compliant sites (FrontPage link bars are not XHTML-compliant). I've addressed this issue already in my webinars about going from FrontPage link bars to include pages (free webinar) and CSS formatted link bars (premium webinar) if you'd like to learn more about how to do that.

Myth #3: If I'm not using FrontPage, I should just switch to Dreamweaver instead of Expression Web.

It's no longer true that Dreamweaver is the only "proper" tool to use for "professional" web developers. With Expression Web, it really comes down to a matter of preference. Expression Web gives you the ability to produce professional, validated web sites just as Dreamweaver would. FrontPage users will find the interface of Expression Web more familiar than Dreamweaver. In fact, Expression Web comes with better CSS management tools than the current version of Dreamweaver, with task panes that allow you to rearrange and reorganize styles in stylesheets as well as modify and rename them without mangling your code! Both pieces of software have their own strengths and weaknesses, but both can be used to make scalable, compliant web sites.

Any other gossip or myths you've heard about Expression Web that you'd like to share? Post a comment!

Useful tips for finding and modifying your PixelMill template…

Having trouble finding a template for your existing or new website?

The first thing I tell PixelMill customers, when trying to choose a template, is to start by selecting your layout. Find the layout that will suit your needs the best, regardless of images and color. If you think a design will work perfect for you but it has the wrong image or coloring don’t worry the template can be changed with CSS or with custom services.

So how do I tell if I can make the changes myself or if I need to request PixelMill Custom Services? To determine if you can make the changes or you need to request Custom Services, take a look at the getting started page and see if it’s using CSS for color or is it using graphics. If it is using CSS for the colors you can make these changes with ease. If it is using graphics for some of the layout and coloring, you will need a graphics editor (possibly a specific one) to make the color changes.

Let’s look at a PixelMill Edition template to show how easy it is to recolor a template.

Here is a screenshot of the template we want to recolor. We want to change the red in the template to dark green to match our team colors.

When I click on the red section I see that the div is using the ID #body2. That is where I will need to change my red background to my green color. Expression Web makes it easy to select your color without having to know what your hex color is – however if you have a specific color you want to use to match your logo color or your exact team color you should have your hex color code handy. Here is a link about hex color codes.

I open my style sheet and look for the #body2 that my div tag is using. I already have my hex color code selected from my Color Schemer program. That color is #669933. To change my background color, I go to line 143 and change the background from #990000 to the #669933.

Here I have changed the color on my div id #body2 from red to green. Now every page on my website that used that #body2 tag has the new color applied.

Next I want to change my banner across the top from red to green. This is using an image for the coloring so I will open an image editor to modify the image. This is a PNG file that is in the source folder, so I can open with any image editor. For this example I am using Fireworks.

Here is the image opened in Fireworks. You can see on the right this image is made up of 2 layers. I am going to work with. The second layer is my red box that I want to change to green.

I select that layer, and then I change the color in the color selection box on my graphics editor.

When that is done I export my image back out to my images folder and now my background image has been changed on all of the pages on my website.

A design note…

You should have some knowledge of your graphics program to make this color change. If you are not comfortable with your graphics program or have not been properly introduced to one, check out one of Corrie’s webinars on photoshop.

This article shows a quick color change that our PixelMill customers can do to modify their PixelMill template. If you don’t feel you have the comfort level to make these changes don’t worry we can walk you through these changes (and more) with our one-on-one training and education ($25 per half hour of training/education) or signup to attend our webinars. If you think you need a bit more custom or work on your site, then please contact us and we will be happy to discuss your Custom Services request.

Upcoming webinars for Expression Web and CSS

Replacing FrontPage Link Bars in Expression Web
Expression Web does not give you the ablity to edit and modify FrontPage Link Bars. Corrie Haffly shows you how to replace FrontPage text link bars with CSS-formatted link bars in include pages. This webinar is an essential building block for understanding how to format navigation links using CSS and will continue in a second seminar, Using CSS to Format Navigation Links.
Thursday, January 11, 2007
10:00 AM - 11:00 AM PST
Click here to register: https://www.gotomeeting.com/register/944721389

Using CSS to format navigation links
This webinar continues from a previous webinar, Replacing FrontPage Link Bars in Expression Web. Corrie Haffly demonstrates the many ways that you can use CSS to format navigation links, from basic rectangular buttons to faux "push buttons" to using a combination of images and CSS for a graphical button effect. Users of FrontPage Themes will be able to apply the techniques to maintain easy-to-change graphic buttons in Expression Web. Non-FrontPage and non-Expression Web users will find this topic engaging and applicable to future web sites, as Corrie covers the CSS how-to's for formatting navigation links.
Thursday, January 25, 2007
10:00 AM - 11:00 AM PST
Click here to register: https://www.gotomeeting.com/register/294108578

Webinar: Managing CSS in Expression Web

PixelMill is happy to announce our first in a long series of Webinars and Seminars for Expression Web and SharePoint Designer 2007.

One of the most anticipated features in Expression Web and SharePoint Designer 2007 is the integrated CSS editor use interface. In the session, Corrie Haffly, our resident expert will guide you through managing CSS in these new editors. The title says Expression Web, but the same techniques will also work in SharePoint Designer. Space is limited, so don't miss this opportunity.

Managing CSS in Expression Web
Expression Web comes with great new tools for managing and using CSS. Using Expression Web Beta, Corrie Haffly gives an overview of the new tools and some practical tips on how to use them.
Thurs., Dec 7, 2006
10:00 AM - 10:45 PM PST

Expression Web Designer - Expected Release Update

A recent article about Microsoft's Expression family of products, including Expression Interactive Designer, Expression Graphic Designer, and Expression Web Designer, created some concern about the expected release date of Expression Web Designer. In the article, they reference an announcement by Microsoft that the Expression Suite is going to be pushed back until next summer and likely 2008.

Fortunately, this announcement does not include Expression Web Designer. Our sources at Microsoft reassured us that Expression Web Designer is still scheduled to be released before the end of the year. Microsoft has not set a specific release date for Expression Web Designer (or EWD as we like to call it), but remains confident that the product is still on schedule. From my experience with the products at Mix06 in March, it's apparent that EWD is not strictly tied to Expression Interactive Designer or Expression Graphic Designer, which are more dependent on each other. There are definitely elements that interact between the three products, but EWD can really stand on its own.

Based on this information, PixelMill will continue to move forward with developing and providing education and support information about EWD and continue further development of templates for EWD.

One update we have already made to the site is the addition of product specifications that allow PixelMill Product Developers to mark if a product is compatible with Expression Web Designer. You will start to see products marked as compatible with 'EWD' and/or 'Expression-ready'. These represent that the product has been tested to work with the current beta version of Expression Web Designer. You'll also see that many of these compatible products are also marked as compatible with 'SD 2007' (SharePoint Designer 2007) and/or 'SharePoint Designer-ready,' so these products have also been tested to work in the current beta version of SharePoint Designer 2007.

We hope this clears up any concerns about the expected release date of EWD. We are committed to keeping you informed about future developments with Expression Web Designer and SharePoint Designer 2007. Watch the newsletter and our blog for more.