March, 2010

  • Expression Web team blog

    Using an Access 2007 database with ASP.NET 3.5 and Expression Web 3

    • 14 Comments

    One question that we occasionally hear from Expression Web users is “How do I use my Access 2007 database on my ASP.NET site?”

    First, the not so great news: Expression Web 3 supports ASP.NET 2.0, 3.0, and 3.5. These versions of ASP.NET do not support Access 2007 data connections.

    Now, the great news: ASP.NET 4.0 supports these data connections – and Expression Web 4 (not yet released) supports ASP.NET 4.0. Even better – as we announced at the MIX 2010 Conference, if you have purchased Expression Web 3, you will get Expression Web 4 for free! (See here for details).

    Until Expression Web 4 is available, you can use the following steps to use your Access 2007 database in a site in Expression Web 3.

    1. First, your system and server must have the 2007 Office System Driver: Data Connectivity Components installed. Many ASP.NET hosts have this installed, such as DiscountASP. Once this is installed, you’re ready to start working.
    2. Drag a SqlDataSource control from the Toolbox panel and drop it into the Design view of your page. (The SqlDataSource control is under the Data category in the section of ASP.NET controls,)

      Design view of a SQLDataSource control in a page in Expression Web 3 
    3. In the Design view of your page, next to the SqlDAtaSource control, click Configure Data Source.
    4. On the Choose your Data Connection screen, click New Connection.

      Choose Your Data Connection screen in Expression Web 3 
    5. In the Choose Data Source screen, set Data Source to <other>, and Data Provider to .NET Framework Data Provider for OLE DB, and click OK.

      Choose Data Source screen in Expression Web 3 
    6. In the Connections Properties dialog, click the OLE DB Provider menu and  select Microsoft Office 12.0 Access Database Engine OLE DB Provider. In the Server or file name box, enter the full path to your database, and then click Test Connection”. If your test connection succeeded, you’re on the right path so far! Click OK in the Connection Properties dialog, and then click Next in the Configure Data Source dialog.
      image 
    7. Note: If you just installed the 2007 Office Driver: Data Connectivity Components you’ll need to restart Expression Web 3 before you see “Microsoft Office 12.0 Access Database Engine OLE DB Provider” in the list. Also, you may need to modify your “Server or file name:” information once you upload your site to a server.

    8. Save your new Connection String and click Next.

      Configure Data Source dialog in Expression Web 3 
    9. Now it’s time to configure the query for your database connection.

    10. Select the columns you want to display from your database, and click Next. In my example, I selected Amount, DonorName, and CampaignName.

      Configure the Select Statement screen in Expression Web 3
    11. Click Test Query. If the test was successful, then click Finish.

      Test Query screen in Expression Web 3
    12. Now you’re ready to add any ASP.NET data control to your page and set up the control to your the data source you just added to the page. In the following screensheet, you can see the GridView control that I placed on my page and set to use my SqlDataSource1 data source.

      GridView control in the Design view of a page in Expression Web 3 

      And now I’ll preview my page in SuperPreview to make sure the data is displaying as I want.

      SuperPreview rendering of the page.

      Once Expression Web 4 is available, I’ll write a follow-up post with the (much easier!) steps on how to use an Access 2007 database as a data source in your site.

      dd560693_JustinHarrison(en-us)

      Justin Harrison, Program Manager
      Microsoft Expression Web

  • 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

    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

    Increase your search rankings with better web page titles

    • 0 Comments

    Are you still waiting for a flood of visitors to find your site? Wondering if you need to invest in some online ads or an SEO specialist? Before you do any heavy lifting, first try the simple task of reviewing the titles of your web pages for their search relevance. I just published the following post to introduce you to one basic SEO concept and also show all of the options for efficiently reviewing and editing web page titles in Expression Web.

    Read the entire post here:

    http://blogs.msdn.com/anna/archive/2010/03/11/increase-your-search-rankings-with-better-web-page-titles.aspx

     Anna Ullrich

Page 1 of 1 (4 items)