• Expression Web team blog

    More info on FPSE bot removal

    • 10 Comments

    There has been quite a bit of discussion about our last blog post, so I wanted to take a few minutes to respond to some of the persistent themes found in people’s comments. Specifically, I wanted to address the following two concerns:

    1. That Includes should not have been removed along with the rest of the bot functionality.
    2. That Page Transitions should have been removed.

    First, let’s talk about Includes. When we first planned to remove bots, we knew that customers would find some pieces of functionality missing that they would want put back into the product (though not necessarily in the same form). Our plan has been that some of these components (for example Includes and the Photo Gallery) would be seen again in future releases of the product, though after redesigns that gave them additional functionality and/or made them more designer-friendly (in other words, fixing the issues that caused us to remove the features in the first place.

    We agree, though, that this may not be enough in the case of Includes, since:

    1. They are already standards-compliant
    2. They do not require FPSE to be used correctly
    3. They are extremely useful for keeping large sites maintainable.

    For this reason, we will be providing an Add-In after RTM that re-enables the ability to insert new Includes in Expression Web. In the mean time you can use Cheryl Wise’s snippet-based workaround for adding Includes, which can be found at http://by-expression.com/quick-bits/includes/index.aspx. Finally, in a future release you should expect to see a version of Include-like functionality re-integrated directly into the product.

    Now, let’s turn to Page Transitions. It was our original intent to remove page transitions, but for technical reasons we decided that removing this feature was too risky this late in the release cycle. Please note, though, that we very well may remove this feature from one of our next releases.

  • Expression Web team blog

    SuperPreview online service Beta adds Internet Explorer 9 Beta and Safari 5.

    • 4 Comments

    This week we bring two more browsers to our online service Beta.

    Internet Explorer 9 Beta Safari 5 for Mac

    If you’ve already signed up for the online service you will receive notification of these new browsers the next time you launch SuperPreview.  You can then choose them from the browser selection screen and begin previewing your sites with the new browsers.

    If you haven’t signed up yet, you can do it right inside SuperPreview.  Just click the Sign up button on the toolbar.

    Access to the SuperPreview online service Beta is available to users who’ve purchased or upgraded to Expression Web 4.  If you still haven’t upgraded from Expression Web 3, version 4 is a free upgrade with many improvements.

    Alex Moskwa
    Program Manager
    Expression SuperPreview Team

  • Expression Web team blog

    Getting started with the silverlight 2 media player in expression web 2

    • 2 Comments

    Expression Web 2 has built-in support for Silverlight version 1 in the Insert menu ( Insert > Media > Silverlight) and in the Media category of the Toolbox task pane,
    Media category in Toolbox task pane

    but what if you’ve already moved onto working with Silverlight 2? There’s no need to wait for version 3 of Expression Web - you can get started with Silverlight 2 right now in Expression Web 2.

    The Silverlight 2 Beta SDKs provide a Silverlight ASP.NET server control and also a MediaPlayer ASP.NET server control. We will look at how you can use Expression Web 2 to use the MediaPlayer ASP.NET server control that makes adding video to your website a breeze without writing any code at all.

    Silverlight 2 Media Player in Internet Explorer 7

    Setup

    To work with Silverlight 2 ASP.NET controls in Expression Web 2, you need to install the Silverlight SDK. The Silverlight SDK Betas are available on the Microsoft Downloads site. Take a look at the requirements of each Beta before choosing which SDK beta to install.

    · Beta 1

    or

    · Beta 2  - NOTE: this version requires you to also have Visual Studio 2008 on your system

    Once you have successfully installed one of those Silverlight SDKs, restart Expression Web 2 and take a look at the toolbox – 2 new Asp.Net server controls appear in the AJAX category.

    clip_image002[6]

    1. MediaPlayer Control lets you integrate media sources such as audio (WMA) and video (WMV) into your Web application, without requiring any knowledge of XAML or JavaScript

    2. Silverlight Control is a generic control that enables you to reference XAML that you provide.

    Steps

    When you add the MediaPlayer or Silverlight ASP.NET control to a page in Expression Web, Expression Web 2 adds a Bin folder and Silverlight assembly file to your website. This way your website is ready to be deployed at any time without having to install the SDK on the host server.

    1. Open an ASPX page or create a new one (File > New > ASPX).

    2. Drag a ScriptManager control onto your Aspx Page. The ScriptManager must be the first ASP.NET control on the page and is required at runtime.

    ScriptManager control in Design view

    3. Now click on the red asp:scriptmanager error text shown on the ScriptManager control in Design view to add a Web.config file to your website. Click Yes in the Confirm dialog that appears.

    Confirm dialog box

    4. Drag a MediaPlayer control onto your ASPX page, making sure it appears AFTER the ScriptManager control.

    MediaPlayer control in Design view

    5. Next click on the error on MediaPlayer control to add the Silverlight assembly to your website, and click Yes in the dialog box that appears.

    Bin folder dialog box

    6. This will now render the MediaPlayer control on the Design View. The control looks plain in Design view but there are settings you can use to customize the control’s appearance. But you won’t ever see the custom appearance in Expression Web, you always need to preview the page in a web browser to see the visual changes.

    Media Player control

    7. Click the Preview in Browser button to show the media player with its default skin.  (Your browser may first prompt you to install the Silverlight plug-in. )

    MediaPlayer control in Internet Explorer 7

    8. Now that we have tested that it works, we can set various properties. On the right side of the control, click the flyout arrow and set the following options:

    a. Choose Player Skin – I chose Expression Skin

    b. Choose Media Source – a video File (I picked up a URL to a video on the Channel 9 website)

    c. Choose Placeholder Image  – the main image to show before the video begins.

    9. In the Tag Properties task pane, find the Chapters property and click the ellipses button to bring up the MediaChapter Collection Editor dialog. Use the Position option to set chapter markers (similar to “bookmarks”) according to the number of seconds into the video that you want – and use Thumbnail Source to specify images for those bookmarks, at specified intervals so that one can directly jump to that portion of the video. I simply used screenshots I took in the video at each point of time.

    MediaChapter Collection Editor dialog box

    The code that is generated for you looks like this:

    <asp:MediaPlayer id="MediaPlayer1" runat="server" Height="341px" Width="444px" MediaSkinSource="Expression.xaml"

    MediaSource="BillGStories_ch9.wmv" PlaceholderSource="Placeholder.JPG" Source="Expression.xaml">

    <chapters>

    <asp:mediachapter ThumbnailSource="Chapter1.JPG">

    </asp:mediachapter>

    <asp:mediachapter Position="108" ThumbnailSource="Chapter2.JPG">

    </asp:mediachapter>

    <asp:mediachapter Position="240" ThumbnailSource="Chapter3.JPG">

    </asp:mediachapter>

    <asp:mediachapter Position="420" ThumbnailSource="Chapter4.JPG" Title="Soma">

    </asp:mediachapter>

    </chapters>

    </asp:MediaPlayer>

    10. Now click Preview in Browser again to look at our video – Looks way cooler with the new skin, easy to navigate using chapters and all this without writing any code at all.

    Media Player control in browser

    Wasn’t that easy ???

    When you’re ready to publish your content, check out the free Silverlight Streaming service provided by Microsoft at:
    http://www.microsoft.com/silverlight/overview/streaming.aspx

    Vijay V
    Software Developer Engineer in Test
    Microsoft Expression Web

    Vijay V, Software Developer Engineer in Test for Expression Web

  • Expression Web team blog

    Twitter on PHP VERSUS ASP.NET

    • 2 Comments

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

    For all the dirty details, see my complete blog post here http://blogs.msdn.com/anna/archive/2009/01/23/twitter-on-php-versus-asp-net.aspx

  • Expression Web team blog

    Create useful, professional-Looking add-ins for Expression Web 4

    • 4 Comments

    Expression Web 4 enables developers familiar with web technologies such as HTML, JavaScript, and CSS to easily extend the functionality of the product.  A useful add-in that was demoed at the product launch lets you insert a Bing map into your web page.  In this blog post, I’ll provide a detailed look at this add-in which is available for free on our community site.

    A Quick Look at the finished Add-in

    After downloading the Bing Map add-in, you need to install the add-in in Expression Web 4. To install the Bing Map add-in, choose Tools > Add-ins, click Install, and follow the onscreen instructions. After you install the Bing Map add-in, the Bing Map command appears on the Insert menu and displays the Insert Bing Map dialog box.

    menu

    dialog

    The dialog contains a functional Bing map that you can pan and zoom. In addition, you can specify a location to center the map around and create a pushpin.  Once you have selected the desired location, zoom, and perspective, press the Insert button to add the HTML and JavaScript that will display your interactive map.

    Notice that the Bing Map add-in’s dialog has a color theme that matches the look of the Expression Web application.  I’ll show you how to get the same look for your own add-in in a bit.

    To see your map in action, press F12 to view the current page in your browser.  The browser will show the map with the same location, perspective and zoom that you specified in the Insert Bing Map dialog.  The map also provides controls that allow a visitor to your page to move around the map.

    preview

    Let’s take a look at how we created this addin.

    Defining the Add-in

    Expression Web add-ins require a manifest file which is an XML file named addin.xml.  This file provides the basic description about the add-in as well as some of the ways the add-in introduces functionality into the application.  Here’s the addin.xml file for the insert Bing Map add-in:

    addin-xml

    The addin.xml file requires a single <addin> element at the root level.  At a minimum, it must also include a <name> element.  Optional descriptive elements, such as author, description, guid, homepage, minversion and version, help users identify your add-in in the Manage Add-ins dialog.

    For example, here’s how the Insert Bing Maps add-in appears in the Manage Add-ins dialog:

    addins-dialog

    Commands

    To add a menu item or toolbar button to Expression Web for your add-in, use the <command> element in your add-in’s manifest file. 

    Let’s look at the command we added to Expression Web for the Bing Map add-in.  At first glance, this part of the manifest file may appear complicated, but after breaking it down, you’ll see it’s really quite simple.

    command

    Each menu command is defined by a command element which requires a unique id attribute to identify the command for Expression Web.  To help ensure your command is unique, try to use an id that identifies what your command  does.  For example, in the Bing Map add-in, we used the id “InsertMap”. 

    Next, you need to define what happens when your command is executed.  That’s where the onclick attribute comes in.  Much like an onclick JavaScript event handler, you use the onclick attribute to define the JavaScript code that runs when the user selects the toolbar button or menu item.

    In this example we need to launch a new dialog.  To do this, we use the Expression Web API function xweb.application.showModalDialog. This function takes 3 parameters:

    1. an html page which provides the UI for the dialog,
    2. a title for the dialog,
    3. a string containing dialog options (such as size and scrolling). 

    You’ll note that the html page in this example is specified as “addin:index.html”.  This tells Expression Web to look for the file relative to your addin.xml file.  So in this case, there should be a file called index.html in the same directory as the addin.xml file.  We’ll have a look at some things in this file in a moment.

    The final attribute of the command element is filetype, which tells Expression Web to make the add-in’s command available only for files that have an HTML DOM, such as HTML, ASP, and PHP files.  This makes our command disabled when the user is editing other types of files (such as CSS and JS).  If your add-in does not have a similar restriction, you can omit this attribute.

    Within the command element is a menuitem element, which tells Expression Web to add a new menu item for triggering the add-in’s command.  The menuitem element requires you to specify the parent menu your command should appear under as well as a label for the menu item.  Notice in our example the label attribute has a value of “_Bing Map…”.  The underscore character (“_”) is optional and tells Expression Web to define a hotkey for the letter ‘B’.

    Defining the Dialog UI

    Let’s have a look at how we created the dialog UI with the file index.html, which the xweb.application.showModalDialog function references.  The good news is most of this file should look very familiar as it simply uses standard web technologies.  I won’t focus on things like basic HTML such as hyperlinks, buttons, and text fields, but  I will highlight things in this file which are unique to developing Expression Web Add-ins.

    JavaScript and CSS

    The Bing Map add-in’s index.html includes references to standard JavaScript libraries such as jQuery as well as custom JavaScript developed for this add-in.  As these references suggest, you can leverage powerful JavaScript libraries like jQuery, and your own custom JavaScript, to help you write your add-ins.

    The index.html file also references some stylesheets, which work just as CSS does with any normal HTML page.  Take special note of the following CSS reference:

    expression-css

    This expression.css file defines the standard color schemes that match the Expression Web application color schemes.  To give your add-in a professional, built-in look and feel, make sure you use this this CSS file as well as the style classes defined within it.  You can use the version of this CSS file from the Bing Map add-in in your add-ins.

    Inserting Markup and Script

    To understand what the add-in does to insert the map, have a look at the file prepare.js within the addi-in’s js folder.  This file contains a function called handleInsertButton which defines the behavior of the Insert button in the Insert Bing Map dialog box.  This function makes heavy use of the jQuery JavaScript framework to define what happens when the pointer hovers over the button and presses it.

    This function does quite a bit, so I’ll break some of it down.

    append-script-reference

    These two lines of code show how the Bing Map add-in adds JavaScript references to the current page.  In both of these examples, we point to remote script resources using the API function call xweb.document.appendScriptReference. In fact, we not only use jQuery to build the functionality in our add-in, we also use it to build the map functionality in our page.  By using this approach the API will protect you from adding a reference to the same resource more than once.

    The next interesting property of the handleInsertButton function is xwebdocument.selection which uses the Expression Web API to locate a suitable home for the map within our HTML markup.  This gives you access to the current cursor location or selection in the current document in Expression Web.

    The code uses this property to determine if the current cursor location or selection is within a DIV element with a proper ID.  If it is, it will use that element.  Otherwise, the add-in adds a new DIV with an ID.  Notice, that while this code is using Expression Web-specific APIs, working with the DOM of the current document is very similar to working with the DOM in a regular HTML page.

    find-a-div

    The remainder of the function is standard JavaScript that generates the JavaScript code added to the HEAD element of the document being edited in Expression Web.  Finally, towards the end of the onclick function handler for insert, you see the following code:

    insert-and-close

    Again, we use the xweb.document API to address the DOM of the page being edited to locate the HEAD element and use the DOM-standard approach of appending html to the innerHTML property of this node.  Finally, we need to close the dialog.  To do this, we use the xweb.appliation.endDialog function.  The argument to this function is what is returned to the original call to xweb.application.showModalDialog which displayed the dialog.  In this particular case it goes unused.

    Handling Keys

    To add the final polish of a professional application as well as to support accessibility, it’s important to make sure your add-in responds well to keyboard interactions.  The insert Bing map add-in shows some examples of how to do this.

    Hotkeys

    Notice how the Insert button in the Insert Bing Map dialog has a the letter “I” underlined.  This signifies that the button is wired to the hotkey of Alt-I.  This functionality needs to be added by our add-in.  To see how this is done, check out the setupKeys function in prepare.js.  Specifically, notice the following code:

    insert-hotkey

    This uses jQuery to wire an event handler to the keyup event on the body of the dialog’s page.  When an Alt-I is detected, a click event is manually sent to the insert button

    Tab Order

    Another subtle, yet important key function is the use of tabs to cycle through input field selection.  Tab should select the next logical input field.   While shift tab should select the previous logical input field.  In the insert Bing map dialog we’ve chosen the logical order to be

    1. Location text box (id ‘txtWhere’)
    2. More information link (id ‘hp’)
    3. Insert button (id ‘insert’)
    4. Close button (id ‘close’)

    To assist in this, we added a function called handleTab which takes an event, a previous control id and a next control id.  The function uses a jQuery selector to send focus to the next or previous control if tab or shift tab is pressed respectively.

    handletab

    Wiring in our tab functionality is as easy as adding the following code to the setupKeys function:

    tabs

     Summary

    I hope you’ve found this overview of the insert Bing map add-in useful.  Be sure to download the add-in and make use of it.  It’s not only a great extension of Expression Web, it’s also a great example of how to make a professional looking add-in.

  • Expression Web team blog

    Moving to Web Standards with SuperPreview

    • 0 Comments

    Internet Explorer 8 was an important release because it signaled a renewed emphasis on Web Standards at Microsoft. My team—which develops the authoring tool, Expression Web—is also pretty emphatic about Web Standards. We’re in the process of doing significant tooling (and retooling) so we can support existing and emerging specifications, reliably.

    The Expression Web team recently shipped SuperPreview for Internet Explorer a FREE tool for performing cross-browser debugging in multiple versions of Internet Explorer, as well as helping migrate sites from earlier versions of IE to Web Standards in IE8. This is a subset of the full version of SuperPreview (which also supports Firefox) and which ships with Expression Web 3. You can download SuperPreview for Internet Explorer  here: http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677 or the full version of SuperPreview with Expression Web 3 here: http://www.microsoft.com/downloads/details.aspx?FamilyID=0a73a3a7-3e06-4125-b3c6-f9c10387e9cc&displaylang=en

    Expression Web SuperPreview in vertical Side-by-Side mode 
    Expression Web SuperPreview in vertical Side-by-Side mode

    As part of our product planning process, we talk to, and observe web developers in their “natural habitats.” During these sessions, it was clear that designing web pages for multiple browsers was a major pain point (and a major pain). In addition to the time it takes developers to preview pages in multiple browsers, there are a host of other issues:

    • Most browsers can’t have multiple versions installed side-by-side. The newest version replaces older versions. So, you can’t have IE6 and IE7 on the same machine (unless you’re using virtual machines or unstable registry hacks).
    • The ergonomics of browser testing is awkward. Many devs load their site on a staging server and have a battery of machines running different browsers. They have to manually load a page in each machine and then walk to each individual machine to compare the different monitors.

    We built SuperPreview to simplify the process of testing and debugging layout issues across different web browsers and platforms. With SuperPreview you can view your pages in multiple browsers simultaneously or view how a page renders in a browser and compare it to a comp or mock-up image of a page. SuperPreview helps web site authors address an important part of that problem—namely, how to identify and fix cross-browser layout issues.

    By default, SuperPreview comes up in side-by-side mode with the Selection tool active. This tool highlights the bounds of HTML elements using the extents calculated by the browser when it renders the page. Note, the element size and position are shown in the lower left of each screen, and the positions of the selected element are shown by the shaded outlines.

    The overlay view shown below allows users to “onion-skin” two renderings together, which helps highlight significant differences. In either of these modes, I can click on any of the other browsers in the browser list (at the screen bottom) and instantaneously see that browser rendering. Additionally, if I have based my page layout on a PSD design, I can load up the Photoshop™ file as one of my comparison “browsers.”

    SuperPreview in Overlay (Onion skin) Mode 
    SuperPreview in Overlay Mode

    In this example, there was clearly an issue with the position of the Expression logo. This appeared to be an issue with IE6.

    In the SuperPreview UI, we drew inspiration from browser-based development/debugging tools like the IE Dev toolbar. SuperPreview provides similar DOM views of the baseline and comparison browser pages. You access the DOM view by clicking on the DOM tab at the bottom of the page. Like the IE Dev toolbar, the DOM view can be used as a navigation tool by using the arrow keys, as well as a means for gathering information.

    SuperPreview in horizontal Side-by-Side mode showing the DOM tree
    SuperPreview in horizontal Side-by-Side mode showing the DOM tree

    In doing cross-browser debugging, it’s pretty easy to spot differences between pages. But, identifying the offending page element can be trickier. It’s not immediately apparent whether an element, its parent, or even a sibling is causing the problem. In the case of the misplaced logo, I used the DOM view to check the <div> containing the logo and its parent <div> for peculiarities. I also confirmed that the logo was rendering correctly in, IE7 and IE8. The position of the logo is about twice as far from the left margin as it should be when displayed in IE6.

    Since, I was clearly dealing with an IE6-specific issue, I visited one of my favorite sites that compiles IE peculiarities, positioniseverything.com (http://positioniseverything.net/explorer.html). There, right in the table of contents, was the Doubled Float-Margin bug. I’ve also had good luck with Chris Coyier’s CSS-tricks site, http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/.

    Doubled Float-Margin Bug

    As it turns out, in IE6, if you add margin to a floated element in the same direction that element is floated (float:left, margin-left, or float:right, margin-right), IE6 will double the margin width. Go figure… Fortunately, the solution is bizarre, but very simple. Setting the CSS display property to display:inline, fixed the problem.

    Expression Web SuperPreview gives Web authors a powerful tool for visualizing and debugging cross-browser layout issues. And, SuperPreview for IE is free, providing a potent way for developers to move their pages forward in a Standards-consistent fashion. Please give it a try! To learn more about Expression Web and SuperPreview, check out:

    Download SuperPreview for Internet Explorer: http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677

    Somasegar’s blog on Expression Web 3: http://blogs.msdn.com/somasegar/archive/2009/06/05/expression-web-3.aspx

    Erik Saltwell on Expression Web SuperPreview:

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

    Expression Web learning resources:

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

    - Steve Guttman, Product Unit Manager, Expression Web

  • Expression Web team blog

    CSS Layouts – Oh, the Humanity… ! by Steve Guttman

    • 2 Comments

    Back in the earlier days of the web—like 5 years ago—the standard fashion for laying-out pages was to wrap your page in a table and to use “colspan” and “rowspan” properties to combine table cells into merged entities, and to embed additional tables into those merged cells (when necessary) to hold and position subsidiary pieces of content. A pretty standard 3-column layout w/header and footer, using tables is shown below.

    clip_image002

    This strategy worked “OK,” although the use of tables generally meant that graphics falling at the intersection of rows and columns needed to be sliced up and inserted into individual cells. The complete graphic was reconstituted when the table laid itself out. Also, in many cases, HTML authors had to resort to the evil “single pixel transparent GIF” trick to position elements accurately within these layouts. This lead to HTML code that “worked,” but was bulky, difficult to read and maintain, and was generally not very elegant.

    With the advent of CSS-P, the positioning of content moved from tables to DIVs—with the position of content regions (within DIVs) being specified in the CSS classes applied to each DIV. This has lead to a host of new problems—some of which I’ll talk about here, and some of which really require CSS 3 to address.

    The key to doing CSS layouts is mastering “float” and “clear” CSS properties. I’m going to use a variant of the CSS, 3-column layout included with Expression Web 2. The CSS layouts in Expression Web are found by going to FILE>NEW>PAGE and choose “CSS Layouts” from the left list box. These are good starting points for most page layouts. But, I’m going to create a CSS layout from scratch. If you want to follow along, create a blank HTML page.

    image

    The nice thing about CSS layouts is that the page layout—or arrangement of content on the page—is mostly independent of the content itself. This means that we can start by creating the HTML page structure, first, and then apply CSS classes to get the content into the right positions. The basic structure of the HTML within our body tag is:

    <body>
    <div id=’container’>
    <div id=’header’>
         Here is my header content
    </div>
    <div id=’contentcontainer’>
    <div id=’leftcol’>
         Here is my left column content
    </div>
    <div id=’rightcol’>
         Here is my right column content
    </div>
    <div id=’centercol’>
         Here is my center column content
    </div>
    </div>
    <div id=’footer’>
         Here is my footer content
    </div>
    </div>
    </body>

    There are a few things to note here:

    1. It’s good practice to always wrap your page in a “container” div. This lets you apply page specific styles (if needed) inside the body tag

    2. I give IDs to all the div’s that I’m going to position using CSS. I think this makes it easier to understand your page.

    3. The right and left content columns fall before the main/center content column. This seems a little bizarre. But, it is a necessary part of this particular 3-column layout technique.

    Without any styling at all—this is what my page looks like:

    clip_image002[5]

    So, let’s apply some styling to this structure.

    The strategy for 2 and 3-column layouts is pretty straightforward. Divs—by their nature—have a display style of “block,” which means that they will break a line. If you want to line 3 columns up next to eachother—our center, right and left columns—you need to use the float property. As its name implies, float lets you make specific content layout within the flow of whatever else is happening within a page. This is ideal for things like images, which you may want to display within a text block. If, for example, I insert a photo before a text block, it’s going to display like the screenshot below:

    clip_image002

    If I tag that photo with style=”float:left”, we get the following:

    clip_image004

    Nice, eh? The text flows nicely around the picture. What you need to remember about floats is that the page content following the floated element will flow around it. Any content preceding the floated element will be unaffected.

    So, our trick for creating 3 side-by-side columns follows a similar vein. We apply float:right to the right column and float:left to the left column, we’ll move everything to the correct position. Here’s the HTML layout and markup below:

    image

    #leftcol{
         width: 200px;
         float: left;
    }
    #rightcol{
         width: 200px;
         float: right;
    }
    <body>
    <div id=”container”>
    <div id=”header”>
         Here is my header content
    </div>
    <div id='contentcontainer'>
    <div id='leftcol'>
         Here is my left column content
    </div>
    <div id='rightcol'>
         Here is my right column content
    </div>
    <div id='centercol'>
         Here is my center column content
    </div>
    </div>
    <div id=”footer”>
         Here is my footer content
    </div>
    </div>
    </body>

    However, there are a few problems, here. If we add additional content into the center column, we see we have a bit of an overflow problem.

    clip_image002[5]

    To fix this, we set the right and left margins of the center container to the width of the right and left columns, respectively. This will constraint the text to the area between the left and right columns.

    There will be another issue if the text in the right or left columns happens to run longer than the text in the center column. The footer will run next to the column instead of under it.

    clip_image004[5]

    To eliminate this condition, we add the clear:both property to the footer div. Clear moves the element such that it is below any content, either to the right, left or both sides (depending on the value of the property you apply). Our final markup looks like:

    clip_image006

    #leftcol{
         width: 200px;
         float: left;
    }
    #rightcol{
         width: 200px;
         float: right;
    }
    #centercol{
         margin-right: 200px;
         margin-left: 200px;
    }
    footer {
         clear:both;
    }
    <body>
    <div id=”container”>
    <div id=”header”>
         Here is my header content
    </div>
    <div id='contentcontainer'>
    <div id='leftcol'>
         Here is my left column content
    </div>
    <div id='rightcol'>
         Here is my right column content
    </div>
    <div id='centercol'>
         Here is my center column content.
         Lorem ipsum…
    </div>
    </div>
    <div id=”footer”>
         Here is my footer content
    </div>
    </div>
    </body>

    You can do some really powerful layout tricks with floats and clears. Expression Web 2 has some pretty nice starting markup for columnar layouts. Check them out! There’s an excellent tutorial on floats and clears, here: http://css.maxdesign.com.au/floatutorial/index.htm

  • Expression Web team blog

    Previewing your Web Pages in Safari

    • 5 Comments

     

    Web designers now have one more web browser to test their websites in: Safari for Windows

    [[UPDATE 11/21/2007: The 3.0.4 release of Safari for Windows fixes the problem described in the rest of this blog post. If you have version 3.0.4 or later of Safari for Windows, you can preview your web pages from Expression Web in Safari without pointing to the batch file provided in this blog post. To add Safari to your list of browsers in Expression Web, go to File > Preview in Browser > Edit Browser List. In the Edit Browser List dialog box, click Add and select the Safari.exe file on your computer.]]

    You can setup the Preview in Browser feature in Expression Web to include Safari 3 Beta, but you’ll discover that instead of displaying the page you try to preview­, Safari 3.0.3 will display your browser homepage.

    To get around this, you could start Safari and manually open your page by using the browser’s File > Open File command. But the quickest and most convenient way to get around this Safari 3 Beta flaw is to point the Expression Web Preview in Browser feature to a batch file that forces Safari to display the web page you specify. To do that, follow these instructions:

    1. Download safari-xweb.bat from https://connect.microsoft.com/ExpressionWeb/Downloads/DownloadDetails.aspx?DownloadID=7392 to your computer.

      Note: If you installed Safari somewhere other than C:\Program Files\Safari\, use a text editor to open the xweb-safari.bat file and replace the text “C:\Program Files\Safari\Safari.exe” with the path to the Safari.exe file on your computer.
    2. In Expression Web, choose File > Preview in Browser > Edit Browser List.

    3. In the Edit Browser List dialog, click Add.  
    4. Screenshot of Edit Browser List dialog box

    5.   In the Add Browser dialog, click Browse.
    6. screenshot of Add Browser dialog box

    7. In the Add Browser dialog, next to the File Name box, change the drop down menu from Program Files to All Files. Navigate to the folder that contains the safari-xweb.bat file that you downloaded in step 1, select the safari-xweb.bat file and click Open.

      screenshot of Add Browser dialog box
        
    8.  In the Add Browser dialog, in the Name box, type a name for the browser, such as "Safari Beta" and click OK.

      screenshot of Add Browser dialog 
    9. In the Edit Browser List dialog, click OK.

      screenshot of Edit Browser List dialog

      Note: The Additional window sizes options won't work for Safari.

    When you use File > Preview in Browser > Safari Beta, a command window quickly opens and closes, and then Safari opens and displays your web page.

  • Expression Web team blog

    How to register your custom Site Template with Expression Web 1,2 or 3

    • 4 Comments

    A few months ago, I went to Paul, who is one of our Lead Developer to suggest, what I thought is a great new feature, that we should enable our users to register their own Site Templates so that they will be available on the New Site dialog.Then Paul kindly told me that I can do that today. I was pleasantly surprised. But when he patiently walked me through the process, I thought "How would anyone, like me, know how to do this without any instruction?".

    After doing some searches online, I noticed that some of you already figured this out. But for others I hope these insights help. It requires you to do many steps manually and you have to have administrator rights to your machine. Hopefully, in future versions of Expression Web, we are able to improve the experience.

    So here it is:

    The Site templates shipped with Expression Web can be found in a folder like this, depending where it is installed. C:\Program Files\Microsoft Expression\Web 3\en\WEBS. Out of the box, the folder has the following contents.

     

    Here's an example contents of a template (*.tem) folder:

     

     

    On the New Site Dialog, you can see the list of out-of-the-box Site Templates:
     

     

    Here's the contents of the ORG1.INF file:

     

    So, here's the workflow to register your custom Site Templates in Expression Web 1, 2 or 3:

    1. Create a folder in C:\Program Files\Microsoft Expression\Web 3\en\WEBS folder for your template. Your folder must have a suffix ".tem" for template.
    2. Drop the files for your Site template into the folder you just created. The file structure should be flat and should have any sub-folder.
    3. Note that the image files will be created inside a sub-folder named "Images" when a Site is created based on your template so adjust the code for your files accordingly.
    4. Create an INF file using notepad or other program with the format like the above ORG1.INF example.
    5. Specify the template name, description and the thumbnail image to display on the New Site Dialog.
    6. List out all the files in your Site template and for each file, specify its destination folder.
    7. If your Site template is in a language other than US English, you can also change the LCID from 1033 (for en-us) to the appropriate Language ID. See LCID chart on MSDN.
    8. Take a screen capture of the home page of your template Site and save it in this folder as well. This image will be use as the preview thumbnail for your Site template in the New Site dialog. Specify the name of this image in the preview field in the INF file as well.

    To test this out, I added a Site template I downloaded from Zen Garden and here's how my New Site dialog looks like:

     

     

    Sayuri Wijaya Gould
    sayuriw@microsoft.com
    Expression Web Program Manager

  • Expression Web team blog

    Manage your FPSE Site permissions without using FrontPage 2003

    • 2 Comments

    When former FrontPage users first start using Expression Web, a common question is “How do I edit the permissions to my Website or subweb?”.

     

    While FrontPage 2003 provides users the ability to manage permissions to their FPSE Website through an Administration Website linked to from the application, Expression Web doesn’t provide the same level of integration. 

     

    When using FrontPage 2003 to edit your FPSE Website or subweb, users can manage its permissions by using the Tools -> Server -> Permissions menu. That will bring up the Administration Website for your FPSE Website on your Web browser.

     Managing FPSE Web site permission via FrontPage 2003

    When using Expression Web to edit your FPSE Website or subweb, you can browse to http://[Server_Name]/[FPSE_Web_site_Name]/[Subweb_Name]/_vti_bin/_vti_adm/fpadmdll.dll on any browser after substituting [Server_Name], [FPSE_Web_site_Name] and  [Subweb_Name], with the appropriate strings.

     

    For example:

     

    To edit the permission for the FPSE Website http://xweblab01sql/SurfHaven, just use your browser to browse to http://xweblab01sql/SurfHaven/_vti_bin/_vti_adm/fpadmdll.dll and you'll be prompted for the appropriate username and password if needed.

     

    To edit the permission for the subweb "Hawaii" in the FPSE Website http://xweblab01sql/SurfHaven, browse to http://xweblab01sql/SurfHaven/Hawaii/_vti_bin/_vti_adm/fpadmdll.dll

    FPSE Administration Web site

    On this Administration Website, you can specify the following:

    • To use the same permission as the parent Website or not
    • If you decided to use a different set of permission as the Parent Website, you can fine-tune your Website or subweb permissions by:
      • Allowing or disallowing anonymous access 
      • Managing its users 
      • Managing its user roles

    Sayuri Wijaya
    sayuri.wijaya@microsoft.com
    Expression Web Program Manager

     

     

     

  • Expression Web team blog

    Spifftacular borders with CSS3

    • 0 Comments

    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.

    xhtml

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

    CSS2

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

    xhtml

    <div id="mycontentcss3">
      <p>This is my spiffy box with any graphic border I want.</p>
      <p>Only its CSS3 improved</p>
    </div>

    CSS3

    #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:

    This is my spiffy box with any graphic border I want.

    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:

    1. url to the image you want to use for the border
    2. pixels to use from top of image for top border
    3. pixels to use from right of image for right border
    4. pixels to use from bottom of image for bottom border
    5. pixels to use from left of image for left border
    6. stretch, repeat or round

    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:

    Polygon Borders

    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.

    • Stretch will take a single border edge and stretch its height or width to match the pixel dimensions you need.
    • Repeat will repeat the graphic over and over to fill the area.
    • Round will do almost the same as repeat only it will stretch the border segments individually so that you don’t have any one border graphic split in the middle.

    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.
    Alex
    Program Manager, Microsoft Expression Web

  • Expression Web team blog

    Give your feedback on Expression Web

    • 17 Comments

    In order to help everyone get the answers and information they need as quickly as possible, we’ve removed the Email feature from this blog. Instead, please use the following two resources to communicate with the Expression Web team and with the entire community of web designers that are using Expression Web:

  • Expression Web team blog

    Rule over the true powers of Find

    • 2 Comments

    A guest post for the Expression Web Team Blog by Morten Rand-Hendriksen

    If you use Expression Web or most any text editing and reading software, you likely already use the Find feature to search for text. But if you’re one of the few who is not using the Find feature in Expression Web, you are likely wasting time doing repetitive tasks the program can do for you far more efficiently. I don’t know about you but for me time = money and I like to spend as little of the former to get as much of the latter as possible. And to that end Find is an important tool in my toolbox. In this post, I’ll breeze over the basic Find features everyone should already be using, and then dive deeper into a few scenarios for using more advanced Find options called HTML Rules.

    Simple search is the tip of the Find iceberg

    The basic operation of the Find tool in Expression Web is simple: hit Ctrl+F on your keyboard and the Find and Replace dialog pops up.

    Find and Replace dialog box in Expression Web

    From here you enter the string you want to find and click either Find Next or Find All. Using Find in this manner is an efficient way to dig through your long pages. For bigger problems that reside throughout multiple pages, read on

    Simple search across multiple pages

    The majority of my work revolves around WordPress which is a fairly small CMS. Even so the current installation of WordPress running on this computer contains an astounding 3,475 files sorted in 375 folders. Finding a particular string of code in that pile of files by opening and searching each page one at a time would take hours if not days even if I managed to narrow down my search to just a few folders. Solution: select the “All pages” option to search every page in your site. If you are searching text that appears in the code of your page, make sure “Find in source code” is also selected in the Advanced column.

    "All pages" and "Find in source code" options in the Find and Replace dialog box in Expression Web

    Example of simple search saving me an extraordinary amount of work

    While working on a site I discovered that the WordPress function called wp_list_pages() wasn’t really doing what I wanted it to. To get it to work for my purposes I needed to find the file in which that function was defined but I also needed to know if there were any other elements currently using that function that would be affected by any change I made. In other words I needed to sort through my 3,475 files and find every instance where the string “wp_list_pages” showed up.

    Find 1 panel with search results

     

    From these search results in the Find panel, I was able to ascertain not only where the original function was defined – the very first Find result in wp-includes/post-template.php – but I now also had a clear idea of exactly what other pages would be affected if I were to change the function. Since the search produced 109 results in 72 pages and only 5 of these were the original function definition, it’s safe to say altering the original function was not the best idea so I decided to write a new function with a new name based on the original. To get to the original function all I had to do was double-click on the search result and Expression Web opened up the file and highlighted the entry I was looking for.

    Example of replacing what you find

    Under my current WordPress work environment I have 20 individual themes I’m working on. Each theme controls the look and functionality of a separate site. In each of the themes there is a file called sidebar.php that defines what the sidebar should look like. This template is called by a custom WordPress function called get_sidebar() and shows up in all the templates as <?php get_sidebar() ?>. What if I wanted to change these function calls to a more generic php include function? A quick Find of the string “get_sidebar” tells me there are 213 occurrences of the function call in 213 pages so that’s a lot of work. Unless I use Find and Replace.

    Replace tab in the Find and Replace dialog box

    I hit Ctrl+F to open the Find and Replace dialog, and then I click the Replace tab. In the Find what box I enter the target string <?php get_sidebar() ?> and in the Replace with box I enter the new string <?php include ('fileName.php'); ?> . If you have more than one page selected in your site or if you check the “All pages” option, the Find and Replace dialog also provides the Replace All or Find All buttons. To make a sweeping change of all the calls to the get_sidebar() function I clicked the Replace All button and Expression Web made the substitutions on 213 pages for me in less than 30 seconds. The only thing I have to worry about is making sure I replaced the right function with the right new function.

    Use HTML Rules for targeted searches

    So far we’ve looked at simple text searches. But from time to time you may need to do more specific searches to dig out particular instances of a query. For example, you may want to find only those links that have particular attributes, or content wrapped with a specific tag within a certain part of your site. Using global search for this is not particularly productive because you may end up sifting through hundreds or thousands of search results. To help you zero in on what you are looking for, Expression Web lets you apply HTML Rules to your search, which enable you to include or exclude results based on conditions you specify.

    HTML Rules dialog box in Expression Web 3

    Once you’ve entered your search term in the Find and Replace dialog, click on the HTML Rules button to open the HTML Rules dialog. From here you can define a single or a series of conditions, nested or individual, to refine your search. To add a condition click New rule and a drop-down menu appears. The drop-down menu gives you the basic conditions you can use: With Attribute, Without Attribute, Containing, Not Containing, Inside Tag and Not Inside Tag. These are all Boolean (true or false) conditions. To see how it works in the real world consider the following two examples.

    HTML Rules Example 1: Target nested list items only in the sidebar

    Most websites, including Wordpress blogs, have separate sections including a header, content, sidebar, and footer plus others. Let’s say I want to add a class to all the individual list items in my Wordpress sidebar. But there are two problems: First of all, there are other lists outside the sidebar area in my page, so those lists need to be excluded. Secondly, my sidebar actually features two sets of nested unordered lists. So to target only the list items I want, I need to create a condition that finds only the list items contained in the sidebar and then only those that are nested within another list item.

    To make this conditional search, I click the HTML Tags tab in the Find and Replace dialog, and select “li” in the Find tag menu. In the Replace action menu, I select Set attribute value. This reveals two new options in the dialog. For Attribute select class and in To write “newClass”. This will add “class=”newClass” to each of the list items found.

    With the query and variables defined the HTML Rules button is available. I click HTML Rules to open the HTML Rules dialog and select New rule. First I need to target only the list items within my sidebar. The sidebar is contained within a div with the id “sidebar” so the first condition should be Inside tag

    This reveals a new drop-down where I can define my target tag, in this case div.

    Under the rule I just created there is now a new indented New rule option that lets me make a sub-rule. I set the condition to With attribute, the attribute to id, the next box to equals and the last box to sidebar. Combined these two rules will now target only instances of the <li> tag that are housed within a <div id=”sidebar”> tag.

    Settings in HTML Rules dialog box 

    To target only list items within list items, I also need to create a new rule with the condition Inside tag and the tag set to li. After clicking OK in the HTML Rules dialog box, my two rules appear in the Find and Replace dialog box.

    HTML Rules in the Find and Replace dialog box

    When I click Find Next, Expression Web finds only the list items that are children of another list item that is housed inside the div with the id #sidebar. Since this is a conditional search and replace (or in this case find and add attribute) by clicking Replace I add the .newClass class to only these list items.

    Warning: The HTML Rules you create will apply to all of your subsequent searches within the same document until you either alter the HTML Rules or click the Clear Rules button in the Find and Replace dialog box.

    HTML Rules Example 2: Find links with missing title attributes

    HTML Rules also lets you search for things that are missing, such as required attributes. For a web page to be fully accessible, all hyperlinks require a title attribute to generate ScreenTips. Let’s say you noticed that some of your category links that start off each of your articles don’t have the necessary title attribute. Searching for this missing attribute is hard because your pages will likely be littered with hyperlinks in the header, sidebar and footer as well as within each post. What’s needed is a set of HTML Rules that target only the article heads, and only links without the title attribute.

    The easiest way to come up with the correct set of HTML Rules is to spell your search out by answering this question: What are you looking for? In this case the answer is: I am looking for all the links (a tags) that don’t have the title attribute that are contained within divs with the class .meta-tag.

    Hit Ctrl+F to open the Find and Replace dialog and select the HTML Tags tab. Set Find tag to a and Replace action to (none). If any HTML Rules are currently in effect click the Clear Rules button to remove them.

    Click HTML Rules to open the HTML Rules dialog and create a New rule. As the answer said earlier you are looking for all the a tags with a missing title attribute so in the condition select Without attribute and set the attribute to title.

    To search only within divs with the class .meta-tag create a new rule, set the condition to Inside tag and the tag to div. Create a new sub-rule and set the condition to With attribute, the attribute to class, leave the next box on equals and type out the value entry-meta. With the HTML Rules defined click OK to close the dialog and click Find Next to search your page.

    Settings in HTML Rules dialog box

    As with the examples earlier in this article HTML Rules searches can be done on the current document, selected pages or all pages in the site. Combined these techniques along with some smart find strategies makes this an enormously powerful tool.

    Save your query

    If you’ve made an unusually complicated set of HTML Rules you might want to tweak later and reuse, or you have a Find and/or Replace query you know you will need again, save  your search query by clicking the Save icon in the Find and Replace dialog.

    Make Find a part of your work process

    Find is one of those tools you have to use a few times before you realize its full potential. Off the bat it just looks like any old find and replace text tool, but when you start using it you’ll quickly realize its way more capable than that, especially if you work with larger sites or ones you didn’t code yourself. There are caveats of course, most importantly that if you make sweeping site-wide changes to your code like in my last example you better make sure you are targeting the right string and replacing it with the correct one, otherwise you can do a lot of damage with a single mouse click.

    Morten Rand-Hendriksen

    Morten Rand-Hendriksen

  • Expression Web team blog

    Add custom toolbars to Expression Web 4

    • 10 Comments

    Expression Web 4 provides eleven toolbars on the View > Toolbars menu, organized around particular activities, such as editing in Code view, and working with styles or tables. The default toolbars are sensible unless you regularly use only a few buttons from each toolbar; in that case, the default toolbars may clutter and waste valuable space in the application, especially when your favorite buttons are on three or more different toolbars. To the rescue: the free Custom Toolbars add-in for Expression Web 4 lets you create one or more toolbars to organize your favorite buttons and commands in Expression Web 4.

    Install the Custom Toolbars add-in for Expression Web 4

    1. If Expression Web 4 is open, quit the application.
    2. Download the Custom Toolbars add-in from the Expression Gallery at http://gallery.expression.microsoft.com/en-us/CustomToolbars.
    3. Double-click the CustomToolbars.msi file, and follow the onscreen instructions to install the add-in.

      Microsoft Expression Web 4 Custom Toolbars Add-in
    4. Start Expression Web 4.
    5. The Favorites toolbar, labeled Customize Toolbars, appears below any open toolbars at the top of Expression Web 4. Select View > Toolbars > Favorites to close this toolbar. This “Favorites” toolbar that appears is known to be buggy if you try to customize it so we recommend closing it and creating a new custom toolbar from scratch, as demonstrated in the following steps.

      The Favorites toolbar  

    Create a custom toolbar

    1. In Expression Web 4, on the Tools menu, click Customize Toolbars.

       Customize dialog box
    2. Click New, enter a name for your custom toolbar, and click OK.

      New Toolbar dialog box
    3. In the Customize dialog box, in the column on the left, select the items you want to add to your toolbar, and click Add. To change the order of items in your toolbar, in the column on the right, select an item you want to move, and then click the up or down arrows. When you are done editing your toolbar, click OK.

      Customize dialog box

    Your custom toolbar now appears below other toolbars open in Expression Web 4, with all of your favorite buttons at the ready! To show or hide your toolbar, select the toolbar’s name from the View > Toolbars menu.

    image

    Expression Web team

  • Expression Web team blog

    Looking up HEX values in Photoshop

    • 1 Comments

    I've written up a few tips on quick ways to look up hexadecimal values in your document in Photoshop. Check it out:

    http://blogs.msdn.com/anna/archive/2009/02/11/the-vexing-hunt-for-hex-values.aspx

    Anna

  • Expression Web team blog

    Adding symbols and characters to your web page

    • 1 Comments

    Expression Web 4 includes a new Symbol dialog box that enables you to insert symbols and characters in either the Design view or Code view of your web page. You can browse all available characters or choose a subset of characters from the Type menu.

    Symbols dialog in Expression Web 4

     For quick access the Special Characters tab lists only the most commonly-used characters, such as the copyright symbol, em dash, en dash, registered and trademark symbols:

    Special Characters tab of the Symbol dialog box in Expression Web 4 

    Unlike earlier versions of the Symbol dialog box, the Symbol dialog box in Expression Web 4 inserts only the entity name for the character you select and adds nothing else; the Symbol dialog does not add paragraph or span tags, and does not apply a font and style to the character you insert. Consider that reason #11 to get your (potentially free) copy of Expression Web 4 today!

  • Expression Web team blog

    Expression Web 3 Sneak Peek

    • 0 Comments
    Curious about what's coming for Expression Web 3, and our latest progress on SuperPreview? S. Somasegar, Senior Vice President, Developer Division has posted a summary of several key new features in Expression Web 3 on his blog. Click here to read his post.
  • Expression Web team blog

    Migrating from Microsoft FrontPage to Microsoft Expression Web - Part1

    • 1 Comments

    Updating your site with standards-compliant HTML

    Pad Gallagher's faceFrontPage helped bring WYSIWYG publishing to the World Wide Web. Since those early beginnings, however, the web has changed; countless new technologies have emerged, evolved, and slipped into obscurity. The World Wide Web Consortium (W3C) has led the way in defining the web’s technological common ground, referred to as web standards. Websites that conform to W3C web standards are referred to as standards-compliant.

    Over the next several articles, I’ll be helping you update your website; migrating away from legacy code and components to newer solutions, based on web standards.

    In this article, we’ll start the migration process by cleaning up the code so that it’s more in alignment with web standards and start moving style and formatting out of the web pages and into a cascading style sheet (CSS).

    Before we begin, I strongly encourage you to make a backup copy of your website.

    DOCTYPE

    Browsers read the DOCTYPE declaration on a page to determine which version of HTML (or XHTML) the page uses. Expression Web uses the DOCTYPE declaration for validation and IntelliSense code completion. Adding a DOCTYPE declaration to your website’s pages makes it easier to create and maintain valid code throughout your project.

    If your project contains no FrontPage web components, set the DOCTYPE to XHTML Transitional. If your project does contain FrontPage web components, you’ll experience fewer problems if you set the DOCTYPE to HTML 4.01 Transitional.

    To set the DOCTYPE for a single page, from the Expression Web Code view:

    1. Press CTRL+HOME – the cursor moves to the head of the page (Line 1, Column 1)
    2. Press CTRL+ENTER – the DOCTYPE menu displays.
    3. Select the appropriate DOCTYPE from the drop-down list.

    Repeat this procedure to set the DOCTYPE for every page in your project.

    Now that the existing pages all have DOCTYPE declarations, this would be an excellent time to set the DOCTYPE for the entire project so that any new documents you add to the site are created with the correct DOCTYPE declaration. Click Tools, and then click Page Editor Options. Select the Authoring tab and set the Document Type Declaration.

    Code cleanup

    Once you've set the DOCTYPE declaration on a page and while you're still in Code view, right-click on the page and select Reformat HTML. This will tidy up the code formatting and attempt to validate the page against the declared DOCTYPE. If there are any code errors, Expression Web will highlight them in yellow. DOCTYPE validation errors are displayed with a squiggly red underline.

    Go through the code and clear up what you can. When you hover your mouse cursor over an error, a tooltip displays with details about the error to help you find a solution.

    Moving the presentation out of the HTML page

    Create an external CSS

    External style sheets are separate files from content pages that will be linked from each of your project’s web pages. This allows you to create a single style definition that controls the appearance of every instance of a style throughout your website.

    Overall, cascading style sheets provide greater flexibility, easier maintenance, and true separation of content from presentation.

    Link the site pages to the CSS

    Each page must include a link to your CSS within the <head> section of the page. You can add this link manually in Code view: <link rel="stylesheet" type="text/css" href="mycss.css">; or you can add it from the Format menu by clicking CSS Styles, and then clicking Attach CSS Style Sheet in Design view.

    Create CSS style definitions

    Here’s a quick refresher for CSS style definitions. A CSS style definition has three parts:

    • A selector – what HTML element this style will apply to.
    • One or more properties – what aspect of the element's appearance will be styled.
    • A value for each property – how the property will style the element.

    The properties and values are contained within curly braces, and properties are separated by semi-colons.

    selector {

         property1: value;

         property2: value;

    }

    A selector can be:

    • An HTML element (p, h1, ol, etc.), which defines properties for that tag everywhere it appears.
    • A class, which defines properties for only those elements to which you assign that class name.

      Class selectors in a CSS begin with a period (for example, .codeview, .caption, and .uitext). Classes can be used with several different elements on a page. For example, the .uitext class can be applied to single or multiple words, entire paragraphs, headings, or specific sections on a page.

    • An ID, which defines properties for a single, unique element in a web page.

    ID selectors in a CSS begin with a pound sign (#). IDs should be unique, and should be applied only once on a web page (this is especially important if you use JavaScript in your project). For example, you might choose to create an ID selector called #header and apply it to a DIV (<div id=”header”>). Remember, the #header ID—or any other IDshould only be used once on a page (though you can use the same ID on other pages). There is, of course, quite a bit more to cascading style sheets than this quick overview. See Expression Web Help for more information. Our objective right now is to create one style definition for each unique style in the website. For example, if every page has a heading in maroon 18pt bold, italic, Tahoma, we would create a style definition in the CSS that looks something like this:

    h1 {

          color: #7F0000;

          font-size: 18pt;

          font-weight: bold;

          font-style: italic;

          font-family: Tahoma;

    }

    Apply CSS styles in Design view

    Once you’ve created the CSS, you can quickly apply styles in Design view using the Apply Styles task pane. (If the Apply Styles task pane isn’t visible, click Task Panes, and then click Apply Styles.) The Apply Styles task pane shows all the available styles in a document. To apply the formatting to different areas of the page, select the text you want to format and then click a style in the Apply Styles task pane.

    In Code view, you’ll see that CSS class and ID attributes have been added to the HTML tags for many formatted sections of text. If you prefer to code by hand in Code view, note that the “.” and “#” characters are omitted from the HTML attributes.

    <p class="uitext">…</p>

    <div id="header">…</div>

    Scrub any leftover inline formatting

    Once you’ve applied CSS styles to each content element in your site, it’s a good idea to go through each of the pages in Code view, clearing out any leftover presentation formatting, such as <font> tags (especially those with attributes, such as <font face=”Tahoma”> or <font color=”#007F00”>).

    A special note about MsoNormal.

    Copying and pasting content directly from Microsoft Word into FrontPage or Expression Web generates Office-specific markup, characteristically set off with an MsoNormal attribute. That markup may be valid (depending on the DOCTYPE declaration) but it adds unnecessary clutter and maintenance headaches.

    Tip: Copy the affected text directly from Word into Notepad and then paste it into the web page. This will strip all inline, Office-specific formatting out of the content, to which you can then apply CSS styles.

    Semantic content markup

    Now that we’ve shifted the appearance of page elements out of the HTML page and into the CSS, the tags have semantic value—they actually describe what’s contained within them. Semantic content markup offers tremendous benefits in accessibility alone. For example, because the formatting and appearance of a standards-compliant web page are handled by the CSS, instead of by inline formatting, visually impaired users no longer have to sit through the screen reader’s tedious and time-consuming itemization of every table element and transparent GIF used in the non-compliant page’s layout tables.

    Another great benefit to semantic content markup is that it can significantly improve search engine optimization. Standards-compliant web pages contain a bare minimum of markup, so when a search engine crawls your site, it encounters a much higher content-to-markup ratio, resulting in more accurate search engine results and higher page ranking.

    One final note about semantic markup: <i> and <b> tags are considered display tags; they change only the appearance of the enclosed content. Use style definitions in your CSS for elements such as code examples or UI text that should be displayed in italics or bold.

    In cases where your intent is to change the meaning of an element, use the standards-compliant <em> (meaning “emphasis”) and <strong> tags instead. Though these tags also correctly apply the desired formatting, their purpose is to provide semantic value, which—among other things—helps screen readers and other accessibility tools correctly interpret and present content enclosed in these tags.

    Conclusion

    DOCTYPE declarations and the separation of content from presentation are fundamental aspects of a standards-compliant website. More importantly, making these changes provides several important benefits: your website is much easier to maintain and extend in a standards-compliant editor such as Expression Web; you can add and expand accessibility features; and your site’s search engines results should improve.

    In my next article, we’ll examine FrontPage web components and ways to replace them with standards-compliant alternatives.

     

  • Expression Web team blog

    Simplify Your Add-In Development with the Extensibility Tester Add-In

    • 1 Comments

    I created the Extensibility Tester add-in to provide Expression Web 4 developers a way to test out ideas and troubleshoot their add-ins without the endless cycle of edit, save, and refresh.

    ExtensibilityTesterPanel

    The add-in panel lets developers evaluate JavaScript expressions from within the panel, giving access to the full extensibility model.  This allows add-in developers to interact with the Expression Web application while seeing all output, errors, and events that come from the interaction.

    Click here to download the Extensibility Tester add-in. Once you’ve downloaded it, you can install it from within Expression Web 4 via the Add-Ins Manager under the Tools menu.

    Using the Extensibility Tester Add-In

    Once you have installed the Extensibility Tester add-in you can display it via Tools -> Extensibility Tester. Enter any JavaScript expression into the Input box and click Evaluate. The resulting output or error messages appear in the Output and Error boxes, respectively. Extensibility events are logged into the Events box as they are fired, with the most recent event on the top. The Clear All button clears all the textboxes if you want to start from a clean slate.

    The JavaScript expression is evaluated within the global scope, so variables you create are available from evaluation to evaluation (instead of falling out of scope after the evaluation is completed and not being available). This can save you quite a bit of typing, but comes with one small gotcha: these variables are properties of the window object and must be declared without ‘var’ (see example in image above).

    Here are a few expressions you can try to see some of the cool stuff you can do with the extensibility model:

    • xweb.document.selection.set(10,100);
    • Xweb.document.selection.insert(“text”);
    • xweb.application.newdocument("HTML 4.01 STRICT");
    • xweb.document.getElementsByTagName("div").length;
    • xweb.document.getScriptElementByCode("var foo = 1");
    • xweb.document.replaceRange(15, 20, "replacement");

    Let me know what you think!

    Erik Mikkelson
    Software Development Engineer in Test, Expression Web

  • Expression Web team blog

    CSS Layouts without the headache

    • 0 Comments

    Beck WeinholdHi, 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.

    blog_1_new_dlg

    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:

    blog_2_design_view

    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:

    blog_html_pre_stretch

    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.

    blog_html_post_stretch

    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.

    blog_3_design_view

    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.

    blog_4_design_view

    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.

    blog_5_split_view_with_notes

    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.

    blog_6_split_view

    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!

  • Expression Web team blog

    CSS Sculptor by Eric Meyer for Expression Web 1 and Expression Web 2 BETA

    • 3 Comments

    Banner for Eric Meyer's CSS Sculptor 

    We're excited to announce that Eric Meyer (http://meyerweb.com/ and http://www.complexspiral.com/), internationally recognized authority on HTML, CSS, and web standards, and author of some of the essential books on CSS (as if you didn't already know all that!), has released a pre-release version of his CSS Sculptor for Expression Web.

    The CSS Sculptor for Expression Web helps you create custom web standards compliant, CSS-based layouts. Finally, you can confidently and resolutely abandon your antiquated table-based layouts and start churning out CSS layouts like nobody's business!

    To work with the CSS Sculptor, close Expression Web (version 1, or version 2 BETA), download the CSS Sculptor installer, and then run the CSS Sculptor installer. Once the installation is done, start Expression Web (either version 1 or version 2 BETA), and you will have two new menu items. On the Insert menu, you will have a new WebAssist submenu, like this (shown in Expression Web 2 BETA):

    Insert menu with WebAssist submenu in Expression Web 2 BETA

    And on the File menu, you will have a new command named New CSS Sculptor Page, like this:

    New CSS Sculptor Page on File menu

    Keep an eye on this blog for another post in which we walk you through using this cool new tool! After you try the tool out, give Eric your feedback directly by commenting on his own blog post about this tool:

     http://meyerweb.com/eric/thoughts/2008/03/06/expressive-sculptor/

    And join in a discussion about the tool, or seek out help or advice, on the new Expression Web forum:

    http://meyerweb.com/eric/thoughts/2008/03/06/expressive-sculptor/
    correction! The new forum for Expression Web is at: http://forums.expression.microsoft.com/en-US/web/threads/

    And as always, let us know what you think!

    Anna

  • Expression Web team blog

    Improve Your Site’s Search Ranking

    • 2 Comments

    Expression Web 4 (released last week!) has a powerful new Search Engine Optimization (SEO) reporting tool that identifies potential SEO problems in your site. This tool makes it very convenient to automatically locate mark-up patterns that might be compromising your page rankings. But all versions of Microsoft Expression Web have a range of features you can use to drive SEO improvements into your mark-up. Let’s take a look at them!

    A Simple Way to Think About SEO Guidance

    SEO guidance on the Web tends to fall into one of the following categories:

    • Don’t confuse the crawler
    • Maximize useful content
    • Don’t look like a bad guy

    To expand on these, your mark-up should be clean and well-constructed, so that crawlers can understand and crawl it efficiently. You should exercise every available opportunity to describe and differentiate your page content to search engines (including non-user-facing information such as meta tags that provide a description). Finally, you should avoid looking like you’re attempting to game the system by misrepresenting your content or artificially inflating page ranking via SEO spam. I’ll cover all these points eventually; this post is dedicated to the first bullet.

    Don’t confuse the crawler!

    One consistent (but not necessarily the most critical) component of SEO involves the mark-up or code of your web pages. Search engines employ programs called crawlers to retrieve and index content on the web. If your pages contain code errors or otherwise confuse the crawler, search engine results can be compromised and not in your site’s favor. Good quality mark-up also increases the usability of your site, resulting in happy visitors that stick around longer.

    Here’s a simple list of rules you can use to help crawlers successfully index your site.

    • Fix obvious code problems in your site
    • Link consistently
    • Define clear crawling boundaries

    Your pages should be well-formed and free of coding issues. Page hyperlinks should point to existing content and written in a consistent way (that is, all links to the same destination should be identical in case and syntax). Finally, large sites should provide an index or robots.txt file that describes the site content you want crawled. I will cover the first two bullets below.

    Fix Code Problems with Expression Web Diagnostics

    If you are not already practicing web standards, the SEO benefits of using web standards might help motivate you. If your markup is syntactically correct and adheres to the rules of your page’s doctype declaration, you reduce the work required to crawl your content. The faster a crawler can get through your site, the faster results for new content will be available to web searches. Expression Web makes it very easy to keep tabs on the quality of your HTML. Open up any page in the tool and both the status bar (at the bottom of the application) and code editor provide immediate feedback regarding the presence or absence of mark-up errors.

    In the following screenshot, I’ve opened up a version of http://msn.com in the Expression Web code editor. The status bar shows me right away that there is a mark-up error on the page. If you click the warning icon in the status bar, you’ll get a pop-up menu that allows you to jump to the coding problem or run a complete compatibility check. If you choose to jump to the code editor and there are multiple code errors, you can press F8 to jump to the next code error.

    Code Error icon in the Expression Web 4 status bar

    To run a comprehensive report for your site, select Compatibility Checker from the Tools menu, which opens the following dialog.

    Compatibility Checker dialog in Expression Web 4

    This dialog lets you check your HTML/XHTML and CSS compatibility against a number of different doctypes and browser versions. You can also easily restrict results to the current page, all open pages, or your entire site. Choose your settings and click the ‘Check’ button to send the code checker on its way. Results pop up in the Compatibility panel.

     Compatibility panel

    You can double-click compatibility errors in the output panel to jump directly to the problematic code. Hover over the highlighted issue with your pointer, and a pop-up tooltip describes the problem diagnostic and guidance for resolving it. You can also use the F8 key to move forward and back through report results on the current page (F8 moves to the next problem, Shift-F8 will take you back).

    Reaping the Rewards of Consistency

    As in many things, there is a place in SEO work for being consistent as well as a place for differentiating yourself. When it comes to putting links in mark-up, there is a particular value on standardizing on a consistent format for URLs.

    Search engine algorithms are complicated and constantly evolving but all modern engines analyze links to pages as a critical part of indexing pages and providing page ranks. Links tell the search engine there is other site content it should crawl, and links build a map of inter-relatedness that defines the relative value of page. A large number of incoming links to a target page is a sign that the destination represents especially valuable or authoritative content. This is true both for links coming from other sites and links that originate within your own site. (Numerous high-quality external incoming links, of course, are most valuable for elevating search rank.) For best search results, you should insure that links point to content that actually exists. It’s also important that links are expressed in a consistent way. Components of a URL are, technically, case-sensitive; crawlers can therefore potentially divide page rankings between URLs that are identical except for casing or other differences (described below).

    Expression Web provides help for both these problems. First, you should regularly run the broken links report. To do this, open your site in Expression Web. Click the Site View tab and then click Reports at the bottom of this view to see a list of reports that Expression Web can run for you, including several that relate to hyperlinks in your site.

    Site Summary in Expression Web 4

    Next, click the report titled ‘Broken hyperlinks’ and you’ll see the following screenshot. In the example below, I’ve neglected to properly format an external hyperlink. Expression Web has also determined that a link to an embedded image is in good shape.

     

    Hyperlinks report in Expression Web 4

    To fix the problem, double-click the reported problem in the report to open a more powerful version of the Edit Hyperlink dialog.

    Edit Hyperlink dialog box

    This dialog lets you jump to the link in the page itself for correction (just click the ‘Edit Page’ button). Or you can the correct URL in the dialog and apply the link fix to all pages or a subset.

    Once you’ve fixed all broken links in your site, you should review all internal links to insure they are expressed in a consistent way. As mentioned previously, most parts of a URL are case-sensitive. Web servers that run non-Microsoft operating systems might return entirely different content for http://contoso.com/mypage.html than http://contoso.com/MYPAGE.HTML. Search engines can therefore rightly regard these links as unique (depending on other factors). If the links actually point to the same content, search results are split between them, diluting the rank of each URL. A good practice, therefore, is to case all URLs in a consistent way, such as using all lower-case capitalization.

    There are several other URL formatting issues you should be aware of (and fix in your site):

    • Web servers have a notion of a default document for a URL. http://contoso.com and http://contoso.com/default.html for example are two URLs that can resolve to the same page. Using both of these URLs throughout a site to link to your homepage is bad for SEO. Page ranking for incoming references to a single page can be split into two, making the SEO value of each URL weaker than if they were considered one. So you should pick one form of the URL and use it consistently throughout your site.
    • Another subtle problem involves trailing slashes. http://contoso.com and http://contoso.com/ are treated as two distinct URLS by crawlers, even if each URL resolves to the same page. For best SEO results, you should consistently either avoid or include a trailing slash in your internal links.
    • Many sites support URLs with and without a leading ‘www’ hostname prefix. For sites like this, URLs such as http://constoso.com/mycontent.html and http://www.contoso.com/mycontent.html split page ranking, so use only one or the other to link to your content.

    There are several ways to resolve the problem of inconsistent hyperlinks. The most straightforward method is to manually review and correct all internal links in the Hyperlinks report. To display the Hyperlinks report, go to the Site View tab, and click Reports in the bottom tab. Select Site Summary from the drop down menu in the upper left, and click Hyperlinks. Notice the status bar reports the number of broken links that have been found so far and also differentiates between internal and external links.

    Hyperlinks report in Expression Web 4

    Click the ‘Hyperlink’ column name to sort by the link destination and more easily compare and identify problematic URLs. (To reduce the number of links in the report, you can click the green arrow on the Destination column to create a custom filter that ensures the list only contains Internal URLs.) If you find any problem URLs, double-click the URL in the list to correct and apply your hyperlink changes to all files across your site, in a single step.

    Edit Hyperlink dialog

    You can also use Expression Web’s Find and Replace functionality to scan and modify internal hyperlinks. Hit CTRL-F or choose Edit > Find to open the Find and Replace dialog. The HTML Tags tab provides special search functionality that uses mark-up to locate and modify values:

    Find and Replace dialog in Expression Web 4

    Pull down the ‘Find tag’ dropdown and select ‘a’ in order to run a simple query for all <a> tags in your site. Be sure to select ‘All pages’ under ‘Find where’. Expression Web presents the results in the Find panel, which you can review for URL consistency issues. Double-clicking a result opens the associated page in the editor and jumps to the appropriate code for editing.

    Find panel in Expression Web 4

    The Expression Web Find and Replace dialog has additional useful and powerful capabilities. Let’s say you have a mixture of internal references to your web site both with and without a trailing slash and you’d like to correct that. You can use the Find and Replace dialog to locate all <a> tags with a particular href attribute value and make them uniform. To do so, in the Find and Replace dialog box, on the HTML Tags tab, select <a> as before in the ‘Find tag’ dropdown. Now, let’s refine the search rule by clicking the ‘HTML Rules…’ button to open the HTML Rules dialog:

    HTML Rules dialog in Expression Web 4

    Click ‘New rule…’ and then select ‘With attribute’ from the dropdown menu. Next, specify the attribute (‘href’) and attribute value (the URL you’d like to correct) that should be used to filter results. Here’s what the dialog looks like using the example case I’ve provided above:

    HTML Rules dialog

    The search tool will now scan all pages looking for <a> tags with an href value equal to http://contoso.com. Now, let’s specify that these should be updated to an attribute value of http://contoso.com/ (which has a trailing slash). Click ok in the ‘HTML Rules’ dialog. In the ‘Find and Replace’ dialog, select ‘Set attribute value’ in the ‘Replace action’ dropdown. Specify ‘href’ in the ‘Attribute’ dropdown and populate ‘To:’ with the value you’d like as a replacement value, like so:

    Find and Replace dialog

    Click ‘Replace All’ and you’re on your way. Note the ‘Match case’ option in the ‘Advanced’ section. This option will allow you to easily locate and correct casing problems in URLs. Simply specify the URL you’d like to find, make sure ‘match case’ is not enabled, and provide a replacement value. The search tool will locate all occurrences of the URL in a case-insensitive way and apply a consistently cased value that you specify.

    What Next?

    After cleaning up obvious mark-up issues that confuse the crawler, it is time to think about how to increase the useful information in your mark-up that will maximize your page rank and the likelihood that a user will click-through to your site. Expression Web can help with this, too, a topic that I will cover in a post to be published shortly.

    Michael Fanning
    Principal Architect, Microsoft Expression Web

  • Expression Web team blog

    4 Sale @ NEW Expression website

    • 11 Comments

    Expression Web is now for sale! You can view the latest pricing information and other product announcements at the beautiful new Expression website:

    http://www.microsoft.com/products/expression/en/expression-web/default.mspx

     

  • Expression Web team blog

    Styling MySpace profile page using Expression Web Part 2

    • 0 Comments

    In Part 1 of this blog post topic, I covered the following steps:

    1. Clear the default page background and table borders
    2. Set the custom background color and image
    3. Set the background color for the context boxes tables
    4. Set the text color and size

    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;
    }

    This is how the result looks like:

    Next, I use the following css to style the title in the Blog Entry content area:

    btext {
        color:cccccc; 
        font-size:9pt;
    }

    This is how the result looks like:

     

    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 Gould
    Program Manager in Expression Web

  • Expression Web team blog

    Lorem Ipsum Code Snippet on Expression Community Gallery website

    • 1 Comments

    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:


    categories of the Gallery section of the Expression Community website

    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 are the new code snippets as they appear in the Code Snippets list of of Expression Web:

    list of Code Snippets with custom Lorem Ipsum code snippets

    Here’s the URL of my contribution:

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

    To read the rest of my blog post, in which I show you how to install and use the Code Snippet, and link to a post on how to create your own code snippet, see my post Lorem Ipsum Code Snippet.

    Anna

Page 2 of 5 (120 items) 12345