[Update 12/16/09: Firefox 3.5.6 has fixed the bug so it can again be used in SuperPreview. If you followed the steps below to revert to an earlier version of Firefox, you may now turn auto-updates back on. Firefox will then update to 3.5.6 and continue to work with SuperPreview.]
Unfortunately, this particular Firefox update included a change that broke the ability of 3rd party applications, such as SuperPreview, to embed Firefox on Windows XP and Windows Server 2003.
Those affected by this issue will see the error text: "Attempted to read or write protected memory. This is often an indication that other memory is corrupt."
Until Firefox releases an updated version with the fix, the only solution is to roll back your version of Firefox to 3.5.4 or earlier. To do this you will have to:
Once you've reinstalled you will need to turn off auto-updates for Firefox to ensure it doesn't update back to 3.5.5. To disable the auto-update functionality in Firefox, follow these steps:
NOTE: The above is a temporary workaround as this will also stop you from picking up all further updates of Firefox.
The Firefox team is aware of the bug and has fixed it. However, an updated version of Firefox containing the fix is not yet available. We will update this blog when we have more information.
For those interested in the technical details:
Precise Firefox change that broke other applications:https://bugzilla.mozilla.org/show_bug.cgi?id=521750
Bug logged that fixes the issue caused by the above:https://bugzilla.mozilla.org/show_bug.cgi?id=526586
MSDN article including note on problems with this implementation in XP and 2003: http://msdn.microsoft.com/en-us/library/9w1sdazb(VS.80).aspx
Alex MoskwaProgram ManagerMicrosoft Expression Web
Raena Jackson Armitage , SitePoint Community Leader and hand-coder, recently checked out the code editor and PHP support in Expression Web 3 and wrote up a review of her experience:
http://articles.sitepoint.com/article/expression-web-3-php
Last month we blogged about a Firefox bug our customers encountered using SuperPreview with Firefox version 3.5.5. This bug caused Firefox 3.5 to stop working with SuperPreview on Windows XP and Windows Server 2003. With the newest release of Firefox 3.5.6, the Mozilla team has fixed the aforementioned bug. We recommend that you update to this latest version of Firefox 3.5 to use it again in SuperPreview. If you followed the steps in the previous blog post to revert to an earlier version of Firefox, you may now turn auto-updates back on.
Michelle Rosenthal Microsoft Expression Web
Are you still waiting for a flood of visitors to find your site? Wondering if you need to invest in some online ads or an SEO specialist? Before you do any heavy lifting, first try the simple task of reviewing the titles of your web pages for their search relevance. I just published the following post to introduce you to one basic SEO concept and also show all of the options for efficiently reviewing and editing web page titles in Expression Web.
Read the entire post here:
http://blogs.msdn.com/anna/archive/2010/03/11/increase-your-search-rankings-with-better-web-page-titles.aspx
Anna Ullrich
Update to this blog post – this offer is extended through Jan 31, 2010!
For a limited time there is a discount of 30% on all Microsoft Expression version 3 products (Microsoft Expression Studio + Expression Web, both full and upgrade versions) when purchased through the Microsoft Online Store. A special promo code is NOT required and this is available only in the *US*. This offer is valid through December 28, 2009 11:59 p.m. Check it out:
http://store.microsoft.com/microsoft/Expression-Web-3-Full/product/7AD09DC1
In Part 1 of this blog post topic, I covered the following steps:
At the end of the 4 steps above, my profile page looks like this.
In this blog post, I'm going to share how to style the text in the two content areas highlighted in green. For the content area on the left, I use the following css to style the profile name. In my example, the text would be "Pei Pei".
.nametext { display:table; color:cccccc; font-size: 16px; font-family: Trebuchet MS; margin-left:10px;}
This is how the result looks like:
Next, we want to style the "music type" text below the profile name. In this case the "Indie/Pop/Rock" that is hardly legible. I use the follow css:
td.text strong{ color:cccccc; font-size: 12px; font-family: Trebuchet MS; margin-left:10px;}
Next, I use the following css to style the title in the Blog Entry content area:
btext { color:cccccc; font-size:9pt;}
The downside of styling it this way also style the text in the Friend Space content area. But I prefer to hide that content area anyway.
I used the following css to hide it:
table.friendSpace {display:none;}
That's all for this blog post. In the next post, I'll share how to customize the Contacting <Profile Name> content area.
Sayuri Wijaya GouldProgram Manager in Expression Web
SlapShot is a new extension written for Expression Web 4. For those of you who already use the SnapShot panel (a feature that debuted in Expression Web 3), you will feel right at home with SlapShot.
For those of you who haven’t yet used SnapShot (or who need a quick refresher course), SnapShot is a panel in Expression Web that displays an image of the current page as rendered by the selected browser. It allows you to easily change the browser and browser resolution without having to repeatedly preview in browser to see your changes.
SlapShot is based on the same premise in that you can easily preview a page without loading a browser, however SlapShot extends the features of SnapShot by including full ActiveX support (Silverlight®, Flash®, and so on), as well as interactivity within the page (including navigation).
In the following screenshot, you can see that SnapShot displays only the Install Silverlight message but SlapShot displays (with interaction) the actual Silverlight content.
Slapshot works by listening to the Expression Web ondocumentchanged and ondocumentsaved events (for more information about these events, see The add-in manifest in the Expression Web SDK User Guide). When a page is saved or the active document is changed (for example, the user clicks on the tab of a different page), the SlapShot display updates. Quite nifty.
There are a few conditions that must be met before SlapShot will work correctly:
For more detailed instructions configuring and loading the Development Server see the Previewing documentation.
Version 1 of SlapShot includes default support for the version of Internet Explorer that is installed on your computer.
You can enable Beta (not all features are available yet) Firefox support in the SlapShot panel using the following steps:
The SlapShot add-in uses a fairly large swath of the extensibility layer and, hopefully, can provide a reference about how to get various pieces of data out of Expression Web 4 (as well as be a useful tool). SlapShot is already available on the Expression Gallery.
To install SlapShot
Enjoy!
John DixonExpression Web
Hi, I’m Beck Weinhold, one of the newest testers on the Expression Web team and also a newcomer to the world of CSS layouts. While there have been a couple of excellent posts here recently about writing your own CSS layout from scratch, at my skill level I’m really only ready to get started with the predefined CSS layouts that Expression Web provides. If you're also new to CSS layouts, this post is for you.
First, I should note that in version 2, there have been a few changes to the CSS generated by Expression Web for the predefined CSS layouts. One annoying problem that’s been fixed: with a version 1 layout that includes a footer and more than one column, you could easily find your footer overlapping the side column(s) if the main column content is shorter than the side column content.
To take a look at the possibilities, launch Expression Web and choose File > New > Page. Select the CSS Layouts option in the left column.
As you scroll through the list of layouts in the middle column, the preview on the right changes to show how content will be laid out on the page. Dark grey shading and a solid line across the middle of a region indicates that the region has a fixed width in the page layout, while light grey shading with a dotted, arrow-headed line stretching across it indicates that the region expands to fill the remainder of the browser window.
Choosing the “Header, nav, 2 columns, footer” layout, my Design view looks like this:
If you're working with the Design view of your page, make sure that your Visual Aids (on the View menu) are On as well – in particular, the Empty Containers and Visible Borders options – otherwise you’ll just see a blank page with no hints as to how the page is divided.
The HTML for this looks like:
This layout doesn’t look a whole lot like the preview right now. In fact, I’m tempted to stretch the page_content div, the one that will contain most of the text, just to see how it would look. But if I do that by re-sizing the div in the Design view, I’m effectively telling Expression Web that I’d like the page_content div to fix the layout at that height – even if the content requires a larger container. You can see the result in the HTML below.
Leaving the fixed height on the page_content div for now, I’ve added content to my page to see how the layout looks. I’ve also given background colors to the footer div and the page_content div to highlight the div placement. You can see by the background coloring that the right column content has overflowed the page_content div, which means that although the footer doesn’t overlap with the page_content div, it does overlap with the overflowing text. Not so good.
Next time, instead of stretching the page_content div, I can just put some content into my page first to get a feel for how the layout works. Or I can just remove the height property from the page_content div, as I’ve done in the image below. As you can see, the page_layout div expands to fit the text and there’s no overflowing text to overlap with the footer.
I’m pretty happy with the layout I’ve chosen, but I’ve decided that I don’t need the navigation container.
To do this easily, I’ll start by clicking on one of the navigation links. In order to make sure the entire top_nav div is deleted, I’ll click on the <div#top_nav> breadcrumb at the top of the view (just below the title bar) to select the whole div, then hit the Delete or Backspace key.
In the Code half of the view, I can see that the <div id=”top_nav”> tag and its contents are gone; in the Design view, I can see that it didn’t affect the rest of the layout of the page. And if I add more pages later and need to provide navigation, I can just insert a new top_nav div tag below the masthead div, put my links there, and I’ll be in business.
If you’re feeling bold after this introduction to Expression Web’s predefined CSS layouts, take a look at the recent posts that I mentioned earlier from Steve and Morten. Keep an eye out for my next post, where I’ll make my page prettier by customizing Expression Web’s predefined style sheets!
Register now for MIX 09 which presents a slew of sessions on working with Expression programs, including:
Steve Guttman, Expression Web PRINCIPAL PRODUCT UNIT MANAGER
Come learn how to use Expression Web to build resilient standards-based sites for use across a wide range of browsers and platforms. Hear about the current version of Expression Web and also some sneak peeks at future work that will make creating great sites even easier for designers. With a focus on workflow, you will also see how well Expression Web integrates with ASP.NET and PHP.
Come hear key considerations and best practices for Web form design based on international usability testing, eye-tracking studies, and over ten years of designing Web applications. Learn how the interaction and visual design of Web forms can make the difference between acquiring a customer and completing a transaction or not.
Learn successful workflow models between designers and developers using Microsoft Expression Web, Blend, Design and Encoder. This session specifically focuses on creating rich Internet applications with Silverlight, and shows how the next generation of the Expression suite will make the design workflow faster, easier and richer. Explore how developers and designers can integrate and divide production tasks in a meaningful and harmonious way.
Learn how to encapsulate structure, animation, and logic inside custom controls that handle theming, layout, validation, and data binding. Using Microsoft Visual Studio and Microsoft Expression Blend, explore advanced design, coding, debugging, and testing techniques for building components that work interchangeably in Silverlight and Windows Presentation Foundation (WPF).
Learn how you can leverage Microsoft Expression and Microsoft Visual Studio Team System to improve your overall application lifecycle, decrease your time to market, and ultimately raise the quality of your applications.
Explore how Expression Blend integrates with the design tools from Adobe's Creative Suite. Learn how to use content from Photoshop and Illustrator to efficiently create Windows Presentation Foundation (WPF) and Microsoft Silverlight-based applications, and see a range of useful tips and tricks from one of the core Expression Blend team members.
See demonstrations of how to fine tune your media for best encoding and Microsoft Silverlight playback performance. Learn encoding best practices to make sure your video playback is as fast and smooth as possible.
Hear about the future plans for Expression Blend. See how Expression Blend improves the productivity of visual designers, providing better access to data and enhanced tools for interactivity. Learn how designers can be deeply engaged and remain in control of the creative decisions while enjoying improved collaboration with developers throughout the project lifecycle.
Come learn how to use the XAML graphics features of Expression Blend to create impactful visual content. See how amazing, functional user interfaces can be created without code using a range of powerful features in Expression Blend.
Joe Stegman
Hear about some of the new experience-oriented Silverlight 3 features, and see how to build applications for Silverlight 3 using Microsoft Expression Blend and Microsoft Visual Studio.
And much much more.
http://2009.visitmix.com/Agenda/Sessions.aspx
http://2009.visitmix.com/Agenda/Speakers.aspx
http://2009.visitmix.com/Agenda/Workshops.aspx
SitePoint has released the “first phase” of their JavaScript reference, and they’ve also completely redesigned their Reference Site for improved usability. To coincide with the redesign, they’ve released a handy Firefox add-on called FireScope to integrate their HTML and CSS reference (sadly not their new JavaScript reference) into Firebug and your Firefox browser:
http://tools.sitepoint.com/firescope
Here’s a screenshot of the new Reference panel in Firebug:
Read the list of features on the SitePoint website to learn more about the tool:
http://tools.sitepoint.com/firescope/
Microsoft has released a free BETA version of the Web Platform Installer which corrals together all the free components you need for developing web applications on Windows Vista. To download the installer, go here: http://www.microsoft.com/web/channel/products/WebPlatformInstaller.aspx .
The first screen of the BETA installer lets you select Complete, ASP.NET Developer, or Your Choice:
If you select Your Choice and click Next, you can select just the options you want. You can also select a profile in the Recommendations list on the Web Server tab to distill the options down to the profile that fits your development the best, including ASP.NET Developer, PHP Developer, or Classic ASP Developer:
Anna
Microsoft has released an update for Microsoft Expression Web 2.0. This update fixes a problem that prevents macros from running on a Windows Vista-based client computer.
http://support.microsoft.com/?kbid=957827
Note: If you’ve set Windows to automatically update, the update for Expression Web 2 appears in the Office 2007 list of updates as shown in the following screenshot.
The free trial version of Expression Web 2 is described as a "30 day" free trial on the FAQ for Expression Web 2 and in one of the screens that appears during installation of the program. In theory, after 30 days have passed the program should not start unless you enter a product key that you've purchased.
In reality, the trial period ends and the trial program stops running at the end of the month that follows the month you installed the program. This means that if you download and install Expression Web 2 on July 1, 2008, the program won't expire until August 31, 2008, or 62 days later. If you install the program on July 31st, the program will also expire August 31...giving you only 32 days with the program. So if you want to get the most out of your free trial period, download the program at the start of the month!
After the trial version of Expression Web 2 expires, don’t forget that you can get the upgrade version for only $99 if you own any one of the following:
I've been reading a lot about CSS3 lately, where it's going and all the cool stuff I can't wait for browsers to implement. My personal favorite at the moment is the ability to easily use graphics for borders. Say I want to go crazy with my borders and create something like this:
This is my spiffy box with any graphic border I want.
To give you an idea of how we'd have to do that in CSS 2 world you would need eight individual images, and a big honkin' code block like this.
<div id="mycontent"> <div class="tb"></div> <div class="bb"></div> <div class="lb"></div> <div class="rb"></div> <div class="trc"></div> <div class="tlc"></div> <div class="brc"></div> <div class="blc"></div> <p>This is my spiffy box with any graphic border I want.</p> </div>
#mycontent { margin-left: 10px; position: relative; width: 200px; height: 140px; padding: 10px; float: left; } #mycontent .tb, #mycontent .bb { position: absolute; height: 10px; width: 200px; } #mycontent .lb, #mycontent .rb { position: absolute; height: 140px; width: 10px; } #mycontent .tb { background-image:url('images/top.png'); top: 0; left: 10px; } #mycontent .lb { background-image:url('images/left.png'); top: 10px; left: 0; } #mycontent .bb { background-image:url('images/right.png'); left: 10px; bottom: 0; } #mycontent .rb { background-image:url('images/bottom.png'); top: 10px; right: 0; } #mycontent .trc, #mycontent .tlc, #mycontent .brc, #mycontent .blc { position: absolute; height: 10px; width: 10px; background-repeat: no-repeat; } #mycontent .trc { background-image:url('images/topright.png'); right: 0; top: 0; } #mycontent .tlc { background-image:url('images/topleft.png'); left: 0; top: 0; } #mycontent .brc { background-image:url('images/bottomright.png'); right: 0; bottom: 0; } #mycontent .blc { background-image:url('images/bottomleft.png'); left: 0; bottom: 0; } #mycontent p { margin: 10px; }
Whew, that was an exhausting amount of typing, especially if you hunt and peck.
Additionally, problems with the above method abound. For one it's limited to fixed pixel sizes. So if your content starts pushing the height limits of its box it's not the easiest to fix.
Here's how it's improved in CSS3. Less code and only one image is needed.
<div id="mycontentcss3"> <p>This is my spiffy box with any graphic border I want.</p> <p>Only its CSS3 improved</p> </div>
#mycontentcss3 { margin-left: 10px; float: left; width: 180px; height: 120px; padding: 10px; border-width: 10px; border-image: url("images/polyborders.png") 10 10 10 10 repeat; } #mycontentcss3 p { margin: 0; margin-bottom: 10px; }
Fingers are much less tired in the CSS 3 version.
If your browser has support for border-image the results below will match the top example. Otherwise you'll see a double blue border:
Only its CSS3 improved
The new CSS3 attribute border-image is where all the magic happens. To break down the anatomy of a border-image property it's as follows:
At first I was confused by the above too but it actually turns out to be really simple. Basically you create an image that looks like a mini version of your border box. My image was:
Then you specify in the 2-5 options above how many pixels you need from each edge to form your borders. It automatically does the intersections of the numbers to grab the correct corners. Then you tell it how it should render the border.
Additionally, unlike the CSS2 border method this has no problem easily resizing and growing based on the content inside the bordered box.
As of July 2008, Safari and other webkit-based apps are the only browsers supporting it and you have to use the -webkit- prefix to get it. But fingers crossed we'll see other browsers hopping on board and be able to add this to our developer toolbelt.
Cheers.AlexProgram Manager, Microsoft Expression Web
If you subscribe to this blog or are reading this post, chances are very good that you make a living creating websites or contributing to them in some way. If you consider yourself any of these: “designers, developers, information architects, project managers, writers, editors, marketers, and everyone else who makes websites”, then go represent and fill out the 2nd annual survey of web publishing professionals at A List Apart: The survey closes Tuesday, August 26 so you better scurry!
http://www.alistapart.com/articles/survey2008
Steve Hebert recently joined the Expression Web team as a Development Lead and is working out of our new Saint Paul/Minneapolis development office. We’ve added a link from our BLOG ROLL to Steve’s blog at http://codebetter.com/blogs/steve.hebert/ where Steve has been blogging about .NET and development topics for several years. Whenever Steve blogs about something of interest to the Expression Web and web development community, we’ll be sure to mirror his blog post here on the Expression Web team blog.
Steve’s development background ranges from manufacturing and control systems to high availability hosted web applications. Steve authored the dotMath Expression Compiler back in 2004 (still available at http://www.codeplex.com/dotMath), and has done some patent and standards work along the way. Apparently Steve also has a black belt in karate, which should come in handy when he needs to tackle bugs in the program. Welcome Steve!
Working with design & authoring software all day, every day for many, many years got me thinking that great UX is just the latest buzzword for user interface design. We all appreciate a well-designed website, a beautiful, immersive game environment, and a computer program that is intuitively designed so you can get started right away with it.
But all of this assumes that UX only takes place only within the confines of my fine LCD monitor.
So, it was eye opening for me, to say the least, to hear presentations at UXWEEK.com on creating engaging UX:
I'll write more about some of these sessions in future posts (assuming that my editor lets me!).
What this tells me is:
So, there you have it. UX is way bigger than I thought and there are many, many more people working on UX in ways that I never thought of. Seems that's the reason they send us to conferences, no?
As a footnote, the UX Week site is now posting slide decks and other session materials from the conference. Go check them out!
Ed Meadows Product Manager, Expression
UPDATE - 8/6/07
The survey had ended. Thanks to everyone who took the time to respond to this survey!
Microsoft Expression Web team
END UPDATE - 8/6/07
Members of the Expression Web team have created a survey about the Expression Web Help and the printed guides that were provided in boxed copies of Expression Web. Please fill out this survey to help us provide you with the documentation you need to use Expression Web.
You can access the survey here: https://connect.microsoft.com/ExpressionWeb/Survey/Survey.aspx?SurveyID=3457
You can remain anonymous, or if you want us to know who you are, make sure you click Sign In at the top of the page before you fill out the survey.
thank you!
Expression Web is available starting today to all MSDN Premium subscribers. Expression Blend will also be available shortly after the Expression Studio release.
For more information, see Listening to your feedback - Expression and MSDN. For more on MSDN Premium, see the MSDN Premium Subscription home page.
One of the features of Expression Web is the ability to add xml files to your website and then to style that xml appropriately as html without needing to learn messy technologies like xslt. One of the things we have received feedback about in the product is that it can be hard to figure out how to use this feature with remote xml files - like rss feeds. One of our Program Managers, Andrew Jewsbury, has written a post in his blog about how to do just this. It's pretty neat, you should check it out.
Erik Saltwell
Development Manager - Expression Web