Expression Web 4: Importing a CSS Template


Microsoft Expression studio is a collection of professional design tools to create standards based websites, rich desktop applications also enabling designers and developers to create dynamic applications. One of the design tools that I am going to explain over here is known as "Microsoft Expression Web" which is specifically designed to help web developers to create high-quality websites. Expression Web lets you create website live on the server as well as create it offline and then upload to the server.

So let's learn how to use a CSS website template which is downloaded outside the Expression web.

  1. First of all search for a template as many of the sites provide free templates, download any one from them of your choice as I have tried from the link "http://www.freecsstemplates.org/css-templates/ ", where hundreds of templates are given.

    CSS1.gif
     
  2. Choose any one of the template and click on Download:

    CSS2.gif
     
  3. Go to the folder where you have downloaded the template and as it will be a zip file so extract it.
  4. In the extracted folder you got four things:

    CSS3.gif
     
  5. Now open your Expression web:

    CSS4.gif

    Note: If you got anything open then close it from the file menu.
     
  6. From the menu bar click on the Site and then New site as follows:

    CSS5.gif
     
  7. You see a pop-up window appeared asking the properties for your website, so click on empty website and also set the location where you want to save it.

    CSS6.gif
     
  8. If you have done this correctly then your window with a site view open should be like this only:

    CSS7.gif
     
  9. Again from the file menu import the file :

    CSS8.gif
     
  10. From the following window add the downloaded folder from the location where you have saved it and hit "OK".

    CSS9.gif

    CSS10.gif

    CSS11.gif
     
  11. Now you can see the folder you import is in the left hand side corner under the head folder list:

    CSS12.gif
     
  12. Double click on the index.html and you will find your favorite template is there and you can easily change it according to your need:

    CSS13.gif
     
  13. If you want to see/change the code:

    CSS14.gif
     
  14. Last but not the least you can now create a website of your own choice with the help of this template.

Up Next
    Ebook Download
    View all
    Learn
    View all
    F11Research & Development, LLC