• Expression Web team blog

    Styling MySpace profile page using Expression Web Part 1

    • 5 Comments

    As most of you already know, MySpace.com is a popular social networking Web site where individuals, bands/musicians and businesses can have a presence on the Internet without the need to have their own Web site. It's very easy to create a profile on MySpace and it's easy to "skin" the public profile page by using one of the themes provided on MySpace or by applying one of the many profile page theme templates available on the internet. However, to customize the profile page theme beyond that is not a straightforward task.

    Recently, I created a musician profile for myself on MySpace. Since I'm in the Web design/development industry, I couldn't live with the Myspace profile theme templates available on the internet. MySpace doesn't provide themes for musician profile anyway. I want to fully customize my profile page look & feel so that it reflect me and my music 100% or as close as my design ability allows me to. So I started looking around for ways that I can do that. From reading postings on the internet, I learned that styling a MySpace profile page is all about overwriting the default CSS. It's very similar to styling a SharePoint site or a Blogger site. After I wrestled with MySpace CSS for about a week, I thought I'd share what I learned so that. hopefully, other MySpace users can style their profile page in a shorter amount of time that I took.

    There is a lot to share on this topic so I'm going to split the content up into multiple blog posts. In this blog post, I'm going to show you how to set a background image, background color and text color to your MySpace profile page. In the upcoming blog posts, I'm going to show you how to tweak the style in more detail by adding padding and by creating custom contact table.

    My profile looks like this before I customize it:

    I created a background image and I uploaded it to my 3rd party hosting account. Then I use the following CSS to set the background color and image for my profile page:

    <style> 

    body, .bodyContent {
     background-color: 000000;
     background-image: url('http://www.yourhostingdomain.com/floral_background.jpg');
     background-position: Center;
     background-attachment:scroll;
     background-repeat: repeat-y;
    }

    </style>

    To apply it to my profile page, I have to do a little hack since for a musician profile, MySpace doesn't provide any user interface for me to apply custom CSS. So I clicked on Profile -> Edit Profile on the top navigation. Then I clicked on the Musician Profile tab.

     

    Then I clicked on the Edit link for the Musician Bio field and pasted the code above into that field. After I submitted the changes, my profile page looks like this:

    As you can see, the background image has been applied but the white background for the middle section still applies. So I used the following CSS, in bold, to clear the background:

    <style> 

    table, tr, td {
     background-color:transparent;
     border-style:none;
     border-collapse:collapse;
     background-image:none;
    }
     

    body, .bodyContent {
     background-color: 000000;
     background-image: url('http://www.yourhostingdomain.com/floral_background.jpg');
     background-position: Center;
     background-attachment:scroll;
     background-repeat: repeat-y;
    }

    </style>


    After I added the above block of markup into the Musician Bio field, my profile page looks like this:

    Now the white background is cleared but the text is illegible. So we have to set the background color for the content boxes. I used the following CSS to set the background color for the context boxes tables.

     table table table {
      border-style: solid;
      border-width: 1px;
      border-color: #FF9999;
      background-color: #800000;
     }

     table table table table {
      background-color: #800000;
      border-style: none;
     }

    And the following CSS to set the text color and size.

     body, .bodyContent,table , tr, td, li, p, div {
      color: cccccc;
     }

     a:link {
      color: ff6600;
     }
     
     a:hover {
      color: cc3300;
     }

     a:visited {
      color:lime;
     }

    Note: Paste the last two blocks of CSS markup after the first two blocks.

    And now my profile page looks like this:

    Now my profile page looks much better. But we can still tweak the style by adding padding in some areas. I'll cover that in the next blog post.

    Sayuri Wijaya Gould
    Program Manager in Expression Web

  • 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

    SuperPreview and Firefox 3.6 release

    • 4 Comments

    SuperPreview users probably want to know if the newly released Firefox is compatible with our application.  Currently, SuperPreview does not support Firefox 3.6 due to changes in Firefox that require engineering work on our end.  However, we made specific updates in our Expression Web 3 Service Pack 1 in preparation for precisely this circumstance.  In Service Pack 1 we added the ability to do incremental updates to our browser support outside our normal release cycle.  These changes mean we can release browser support updates in a matter of weeks rather than months.

     

    We've already done a lot of the necessary leg work with the Firefox 3.6 beta and RC builds.  We're waiting on some final 3.6 related items to be released from the Firefox team, then we'll enable support for Firefox 3.6 in SuperPreview.  Be on the lookout for another post to this blog when a downloadable update is available.

     

    In the meantime, if you haven’t already updated, install Expression Web 3 Service Pack 1.

     

    Alex Moskwa

    Program Manager

    Microsoft Expression Web

     

  • 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

    Suggest and vote on new features for SuperPreview!

    • 4 Comments

    The SuperPreview team is always looking for new ways to reach you, our customers. We want to continue to create a product that will solve your cross-browser testing and web development needs.

    Another way you can reach us is through the new SuperPreview User Voice site.

    Here you can submit your feature ideas and also vote on the ideas others have submitted.  Through this we will continue to grow our understanding of you, our users, and create a product that does what you want.

    Let us know what you think and be heard.

    Alex Moskwa
    Program Manager
    Expression Web and SuperPreview

  • 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

    Hosting and Publishing Survey

    • 4 Comments

    The Expression Web team is conducting a survey on hosting and publishing to learn more about how web professionals publish and host websites. The survey is anonymous and does not collect any personal information.

    All feedback is used to help improve future versions of Expression Web.

    The survey is located on Microsoft Connect:

    http://connect.microsoft.com/ExpressionWeb/Survey/Survey.aspx?SurveyID=4181

    We appreciate your time and feedback. Thank you for helping us make Expression Web a better product.

  • Expression Web team blog

    Expression Web Language Packs now available

    • 4 Comments

    [Updated 12/23/2008 - fixed the hyperlink to the topic's new online location]

    You can now check spelling for multiple languages by using Expression Web Language Packs. The Expression Web Language Packs also enable displaying the Expression Web interface, including the Help topics, in the languages supported by the language pack. For more information, see How to check the spelling of different languages in Expression Web.

  • Expression Web team blog

    Steve Krug on creating usable web pages

    • 4 Comments

    A few of us from the Expression Web team attended a talk by Steve Krug, usability consultant and author of Don't Make Me Think, at an event hosted by the Puget Sound Special Interest Group on Computer-Human Interaction (SIGCHI) in Seattle.

    Steve believes there is a short list of design conventions that make some web pages inherently more usable than others, and his talk presented two of these conventions:

    1. Effective "You Are Here" indicators
    2. Prominent and well-placed page titles

    Effective "You Are Here" indicators

    Steve suggests that subtle design distinctions that some designers love to craft simply don't work in practice and are less effective than "louder" design choices that clearly establish where you are in a website. To demonstrate how quickly website visitors can plow through a website and overlook subtle design elements, he showed an interesting video of software that tracked his eye movements as he navigated a website in search of information. The software drew red lines all over the web pages, showing the paths of his eye movements, how fast his eyes scanned the page and where his eyes dwelled.

    Steve is a big fan of tab-based site navigation, especially when the tab color blends into the page color. For good examples, he pulled up http://www.stumbleupon.com/ with this tabbed navigation:

    Stumble Upon website's tabbed navigation

    and http://www.cnet.com/ with this navigation:

    Based on usability studies he's reviewed, Steve contends that subtler global navigation menus that are placed on the edge of a web page, such as this:

    horizontal navigation bar

    are often overlooked by users, who will click around within the main content area of the page and not discover the main navigation menu until some time later.

    Prominent and well-placed page titles

    Steve's second recommendation to help improve the usability of your websites is to simply ensure each page has a primary heading that is bigger (although not necessarily the biggest) and bolder than other headings in the page, and clearly identifies the title or content of the page. He'll give you bonus usability points if your website supports "WYCIWYG" or "what you click is what you get" which means a hyperlink's label and the title of the destination page are the same or virtually the same.

    -  Anna

  • Expression Web team blog

    Service Pack 1 for Expression Web 1.0

    • 3 Comments

    Microsoft Expression Web Service Pack 1 (SP1) delivers important customer-requested stability and performance improvements for Expression Web 1.0, while incorporating further enhancements to user security. You can download the SP1 for Expression Web and get more details about it on this page:

     http://www.microsoft.com/downloads/details.aspx?FamilyId=4C840D64-C95A-4328-9D80-47DC681741AD&displaylang=en

  • Expression Web team blog

    Looking for data on web designers

    • 3 Comments

    In order to help us understand web designers better, the team has created a very short (15 questions) anonymous survey about web designers.  If you fall into that category, and would like to help influence the future direction of Expression Web please take a minute and go fill it out.  It can be found at http://connect.microsoft.com/ExpressionWeb/Survey/Survey.aspx?SurveyID=3456.

     Thanks,

    Erik

  • 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

    New Expression Community website

    • 3 Comments

    The Expression team has launched a new Community website where you can learn, share, and be inspired.

     Join us!

    http://expression.microsoft.com

    screenshot of Expression Community homepage

  • Expression Web team blog

    The Quirkiness of Quirks Mode

    • 3 Comments

    Michelle Rosenthal


    Hi, I'm Michelle Rosenthal, a new tester on the Expression Web team.

    My recent work on Expression Web has brought to my attention the importance of document type declarations (referred to as DOCTYPEs) and understanding the effect of these declarations on how content is displayed in different web browsers. There are a handful of DOCTYPEs you can declare at the top of your html that will vary the way a browser interprets your page. Here are a few examples:

    HTML 4.01 Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    XHTML 1.0 Transitional:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    (You can find out more regarding the differences between strict and transitional DOCTYPEs in this article at 24ways.org, as I will not be going into that distinction.)

    A well-formed DOCTYPE will trigger the browser to render the page in “standards” mode (or sometimes the self-explanatory “almost-standards” mode.) If a page does not contain a DOCTYPE declaration (or if the DOCTYPE is incorrectly defined), most browsers will enter "quirks mode". Quirks mode is essentially a backwards-compatibility mode that enables a browser to interpret and display content in the way that pre-"standards-compliant" browsers did. In other words, the browser doesn’t stick to HTML and CSS specifications outlined by W3C (World Wide Web Consortium).

    What better way to demonstrate this than with a personal example. Last year I created a photo portfolio website, coding the HTML and CSS from scratch. Like many web developers, I designed and tested the site with Firefox in mind as the end user’s browser (because Firefox reliably renders standards-compliant pages as they are intended to be rendered). The site was a mess when I previewed it in IE. At the time, I wasn’t aware that I was missing a DOCTYPE or that this omission was causing the browser incompatibility. The following snapshot of the site in IE7 quirks mode shows a few of "quirks" that can manifest.

    First, an IE browser in quirks mode suffers from the Internet Explorer box model bug causing it to interpret padding and borders differently than it would in standards mode. The horizontal panel with thumbnail images is narrower than intended due to quirks mode incorporating padding into its explicit width rather than adding padding on top of that width. Additionally, the CSS trick to center content (setting margin: auto; on the containing div) is not processed:

    NoDoctype

    Once I realized what the problem was, I quickly added a DOCTYPE as the first line to all of my html files. (I chose the default type in Expression Web, XHTML 1.0 Transitional.) Now when I preview it, IE will render my page in “standards mode”:

    Doctype 

    IE and Firefox now show nearly identical illustrations of my site! One problem solved in the fight for complete browser compatibility.

    One great feature in Expression Web is all the calculated information displayed on the status bar at the bottom of the application. Here you can see your document type declaration and the mode in which a browser will display your content:

    xWebStandards

    It will also detect and warn you about incompatibility (the left arrow in the image below):

    xWebQuirks

    You can double-click on the icon on the left and Expression Web will bring you to the incompatible code.

    Once you see that you need to add a DOCTYPE, place your cursor before the <html> tag in Code view and press CTRL-ENTER to bring up a nifty dropdown menu of DOCTYPE code snippets:

    doctypeTrick


    New pages in Expression Web always contain a default DOCTYPE. You can control this default by going to Tools-> Page Editor Options under the Authoring tab:

    authoring

    Here are a few great resources to learn more about quirks mode:

    Quirks Mode Explanation at quirksmode.org
    Mozilla's Quirks Mode Behavior

  • Expression Web team blog

    Migrate from FrontPage to Expression Web – New online training

    • 3 Comments

     

    Veteran FrontPage MVPs Tina Clarke and Pat Geary have developed an online class and ebook “Migrating from FrontPage to Expression Web” for FrontPage users that want to get started using Expression Web and update their websites to use today’s web standards. Their online class starts Saturday August 30th, 2008 on Cheryl Wise's website Start to Web.

    Because this is the first launch of this training, the cost is only $39.50, which is 50% less than it normally would be. So if you’re a FrontPage user, sign up today before the class is full!  For more information about this particular course, visit http://starttoweb.com/classes/fp-ew.php 

    Cheryl also offers several other courses at http://starttoweb.com/classes/index.php . If you register for any full-priced class that costs $60, use this coupon code to receive 10% off your registration: mv-fofa   (Thanks Cheryl!)

    I’ve never been a FrontPage user myself but I’ve signed up for the course in order to learn more about the experience of migrating from FrontPage. See you in the virtual classroom on August 30th!

    Anna

    Anna Ullrich's face

  • Expression Web team blog

    Service Pack 2 for Expression Web 3

    • 3 Comments

    The team has released a second free service pack for Expression Web 3, which provides the following improvements:

    • The SuperPreview feature now supports Firefox 3.6. If Firefox 3.6 is installed on your
      computer, it will be available in SuperPreview.
    • When editing PHP files, you may have been asked to update  related hyperlinks on the page. If you did so, some PHP tags may have been removed. PHP tags are no longer removed when you update related hyperlinks.
    • When you renamed a PDF file from the Folder List panel, the PDF file 
      became corrupted and could not be opened. PDF files now save normally.
    • Expression Web 3 would crash if the list-style-image property 
      was used in a CSS file. Using the list-style-image property in a CSS file no 
      longer causes Expression Web to crash.
    • SuperPreview sometimes crashed while launching because of a 
      problem that occurred when locating Firefox on your computer. SuperPreview 
      no longer crashes while locating Firefox.

    You can install Service Pack 2 if you have Expression Web 3 or Expression Web 3 Service Pack 1 installed on your computer.

  • Expression Web team blog

    SuperPreview Technology

    • 3 Comments

    Hi, I'm a Program Manager for SuperPreview and wanted to blog a bit about how the technology of SuperPreview works. My goal is to help our users better understand the capabilities of SuperPreview and some of its limitations.

    SuperPreview captures an image rendering and DOM after a web page loads.

    SuperPreview relies on the locally installed browser rendering engines to take a snapshot in time of how the page is rendered. In taking this snapshot we do a few things to provide the most complete picture possible.

    • Capture key information from the Document Object Model of the browser. We provide users with information that will help them indentify their elements and diagnose problems. For every visible element on the page this information includes:
      • ID and Class
      • Height & Width
      • Position on page from top left corner.
    • Scroll the viewport to get a full rendering of the web page regardless of the page's length.

    It is important to note, this is a snapshot in time, so interactive elements such as Javascript roll-over or accordion menus will not manifest in SuperPreview.

    Javascript support through onLoad in SuperPreview

    Through exhaustive testing we found that many sites use Javascript to do fix ups on their pages to address cross browser problems. To support web designers and developers using these types of fixes SuperPreview runs Javascript up thru the onLoad event of the page. After the onLoad Javascript runs we take our snapshot rendering of the page to get the most accurate picture possible of how your site will present itself to your users.

    How the available browser list is built.

    To do comparisons, SuperPreview for Internet Explorer uses your locally installed browser versions. It also includes a copy of Internet Explorer 6, allowing users to escape the neccessity of a virtual machine for testing IE 6. Depending on which version of IE you have installed different browser versions will appear available in SuperPreview.

    Installed Internet Explorer Version Browser Choices Available
    IE 6 IE 6
    IE 7 IE 6, IE 7
    IE 8 IE 6, IE 8, IE 8 (Compatibility View)

    Known Issues

    We are currently aware of problems with IE 6 not showing up on Win 7 and are actively investigating. For other known issues please review the Release Notes (readme.en.htm in your install directory.)

    Links

    Download SuperPreview for Internet Explorer

    Hopefully this post will help you better understand what SuperPreview does and how you can incorporate it into your workflow to more easily design cross-browser compatible sites.

    Thanks,
    Alex Moskwa

  • Expression Web team blog

    Solve Expression Web installation problems

    • 3 Comments

    The team that provides technical support for Expression Web maintains a very helpful blog at http://blogs.msdn.com/xwebsupport, which I’ve just added to our blog roll. Their latest post provides solutions for solving problems with installing Expression Web 2:

    http://blogs.msdn.com/xwebsupport/archive/2009/04/21/known-causes-for-expression-web-2-installation-crashes.aspx

  • Expression Web team blog

    "Page Cannot Be Found" Issue when Previewing via Expression Development Server

    • 2 Comments

    When you use the Preview in Browser feature in Expression Web for an ASP.NET or PHP page, Expression Web runs the Microsoft Expression Development server to preview your content in an environment that emulates a real-world web server.

     Microsoft Expression Development Server

    Microsoft released a signature update to Windows Defender and Microsoft Forefront Security on March 9, 2009 that modifies your system’s hosts file to address a vulnerability. One of the side effects of this update is that an entry for localhost may have been removed from your system hosts file.

    This means that, when you preview your application using the ASP.NET Development Server, your browser will simply show a “Page cannot be displayed” (or equivalent) message.

    To fix this problem, open C:\Windows\System32\drivers\etc\hosts in Notepad, and add the following entry:

    127.0.0.1       localhost

    For example, here is what a system host’s file looks like (note, if you are not running Windows 7, the below lines may not be commented out):

    system host's file in Notepad

    A subsequent signature update to both Windows Defender and and Forefront Client Security, released on the same day as the earlier update, should not cause this problem.

    The original source for this information comes from the Visual Web Developer Team’s blog post on this topic.

  • 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

    Free Internet Explorer debugging tool: Microsoft Expression Web SuperPreview for Windows Internet Explorer

    • 2 Comments

    Expression Web SuperPreview for Internet Explorer is a free stand-alone visual debugging tool that makes it faster and easier to migrate your sites from Internet Explorer 6 to Internet Explorer 7 or 8. Expression Web SuperPreview for Internet Explorer shows your web pages rendered in Internet Explorer 6 and either Internet Explorer 7 or Internet Explorer 8, depending on which version you have installed on your machine.

     Microsoft Expression Web SuperPreview for Windows Internet Explorer

    You can view the pages side by side or as an onion-skin overlay and use rulers, guides and zoom/pan tools to precisely identify differences in layout. You can even compare your page comp to how the targeted browsers render the page.

    Expression Web SuperPreview for Internet Explorer not only shows a high-fidelity rendering of how pages will look on different browsers, but it also identifies the element’s tag, size and position, applied styles, and location in the DOM (Document Object Model) tree so you can quickly fix the error.

    To download Microsoft Expression Web SuperPreview for Windows Internet Explorer, see:

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


    If you’d like to debug your pages for both Internet Explorer and Firefox, download the free 60-day trial of Microsoft Expression Web.

    Please note: DirectX must be installed on your computer before you can compare a web page to a PSD image. To install DirectX on your computer, visit the DirectX download page.

    To discuss SuperPreview or Expression Web with others, try our forum at:

    http://social.expression.microsoft.com/Forums/en-US/web/threads

  • 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

    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

    Public beta 2 of Internet Explorer 8 is now available!

    • 2 Comments

    A public BETA of Internet Explorer 8 is now available for download at http://www.microsoft.com/ie8.  The Internet Explorer team provides a good overview of what you’ll find in BETA 2 at:

    http://blogs.msdn.com/ie/archive/2008/08/27/internet-explorer-8-beta-2-now-available.aspx

    Especially note these paragraphs under “Platform”  in that post:

    IE8 is more interoperable with other web browsers and web standards. The contribution of CSS 2.1 test cases to the W3C is an important in order to really establish a standard way to assess standards support. We think that CSS 2.1 remains the most important place to deliver excellent interoperability between browsers. We think developers will enjoy the improvements to the built-in tools, as well as the other opportunities to integrate their sites in the user’s daily life with Accelerators and Web Slices. You can find more information at the IE Development Center, http://msdn.microsoft.com/ie.

    After deciding to default IE8 to the most standards-compliant mode available, we wanted to be sure to address compatibility concerns for organizations and individuals. Would websites that expect IE8 to behave the way IE7 does create a problem for end-users? Since March, we’ve been telling developers about a small change they can make to their sites to tell IE8 to show their sites as IE7 does. Many have – but there are a lot of sites that may have not yet addressed this. The Compatibility View button (new to IE8 Beta 2) is a good solution to provide end-users a good experience as the web transitions.

  • Expression Web team blog

    Use a dataview to create a color table from XML

    • 2 Comments

     

    I’m Steve Schermerhorn, one of the new developers on the Expression Web team. Steve Schermerhorn's face

     

    When I’m developing a website or application I’m typically dealing with a wide range of colors throughout my project. On more than one occasion it would have been really handy to have a visual reference that also mapped the colors to their names and hex values. I eventually managed to come up with a solution using an XSL to transform an XML file into a nice little color reference table I could print off and hang on my wall. This little ‘how to’ is going to give you a very hands on example on how you can take an XML file and create an HTML page.

     

    1. The data
      For this example I started with an XML file I that I created referencing the system colors used by Windows. [ http://msdn.microsoft.com/en-us/library/system.drawing.systemcolors.aspx ].

      Code view of XML file
    2. Create a dataview of the XML file
      Next, I created an HTML page in Expression Web, and then simply dragged the ColorTable.xml file from the Folder List task pane into the Design view of the HTML page. When you do that, Expression Web generates an XSL file and JavaScript for you, which display the data in a table.

      Dataview in Design view
      When you save the page, Expression Web prompts you to save the JavaScript and XSL files to your website.

      Save Embedded Files dialog box
    3. Add style to the XML data

      You can format the dataview of your XML file as you would any other table or text in Expression Web. When you format the table or text in a data view, Expression Web automatically updates the XSL file for you. For example, I used the Highlight button in the toolbar to add a color background to the top header row of the table, changed the font of the header cells, and reduced the width of my columns. I also added a new column to the left of the first column.When I saved my page, Expression Web prompted me to save the changes it made to the XSL file.

      Formatted dataview 

      Next I opened up the XSL file that Expression Web generated, located my new blank column, and added the following attribute to the <td> tag for that column:
      bgcolor="{@ColorValue}"
    4. That attribute sets the background column of every cell to the value of the ColorValue specified for that row in the Color Value column.

      clip_image002[9]

Page 2 of 5 (120 items) 12345