Creating a website in Expression Web

Hi guys, Welcome to Expression Web. In this article I will demonstrate how to create a simple website in Expression Web. Expression Web is a wonderful platform to create highly fascinating and eye catching website. Whatever you can think of is possible to include in your website through Expression Web and this is possible because of the superfluous collection of tools and features richly embedded with Expression Web. To know more about Expression Web tools refer to my last article http://www.c-sharpcorner.com/UploadFile/cd80b9/getting-started-with-expression-web/ So here we start with creating the first website with Expression Web. Follow the steps below.

Step 1 : First of all open Microsoft Expression Web, what you see is a blank screen, this is the default webpage you get with Expression web. Now to create own website go to Site from the main menu bar--> New site.

Step 2 : When you click on the new site menu you find a window opens up showing two things :

General : On selecting  the general option three parts become visible

    

      (i) One page site : If you want to create a single page site you can select this option.

     (ii) Empty Site : This option lands you on a entirely new site for you to work upon. In this you can add your own Folders, images , files etc and   start creating in your own fashion.
 
     (iii) Import site wizard : This option is Very useful for those who want to work on a site that is present on the remote server or on the local disk.   In this method of opening a site all the files and folders from the site are imported at the present location.

Template : Selecting this you will see a number of templates available with Expression Web by default. You can also select any of these available templates and include in your website also you can edit these templates. Here in this website we will be using the "Organization1" template and edit this in our website. Select this template and change the name to whatsoever you would like to save it with.

Step 3 : Now As soon you click Ok button you find that a page name Site View is opened in the webpage and contains a list of files and folders. 

Step 4 : From the list of folders and files find the "Default.html" file and double click to open this file and template or your site front page opens up like this:

When the site view tab opens up you will see few tabs at the bottom screen Named Folder, Publishing, Report and Hyperlinks. Now lets discuss what's these tabs. By default the site view shows the Folder tab content so click on the Publishing tab and the a page, with single hyperlink asking you to add publishing destination, opens up. When you click on the hyperlink then new window opens up. In this window select the destination wherever you wish the website to get published.

On selecting the Report tab the page shows the complete list of all the files and folders hyperlinks, unlinked files, linked files, images etc i.e. this tab gives you the complete report of the webpage.

On selecting the Hyperlink tab the page show all the parts the default.html page is linked to even whichever page has links or hyperlinks they are show here. A complete net of links is visible and also you can directly navigate to the respective page or link by clicking on the link in this page.

Step 5 : You can see this page on the browser, for this go to toolbar and select preview tool and select the browser. The figure below makes it more clear.

Step 6 : On selecting the preview tool the browser displays the page as this. It is quite good to see that all the buttons and hyperlinks in the page works well so we just have to edit their text and links etc.

Step 7 : Another way to see how the page is looking in the browser is by selecting the snapshot option, to do this go to panel and select snapshot and the snapshot of the browser appears at the bottom of the design page. Drag this snapshot window to the right side under the manage style panels. Here you can see every changes you make in the design instantaneously alongside on the snapshot window.

Step 8 : Now double click and open the Master.dwt page from the site view page and start editing the context of the page. This can be done in two ways either in the design mode

Editing through the code.

Step 9 : After this we will edit the css for this but first open the master.dwt page and then go to Format menu--> select CSS Styles --> Manage Style Sheet Links. Now a window opens up.

Step 10 : Here you can add styles and remove styles applied to the master page. I selected style 3 and applied it on the masterpage and the masterpage look like this:

Applying style3 to the master.dwt page.

Step 11 : After you apply the style to the master.dwt page you need to save the changes you have made so far and then open the Default.html page and view the change applied in the browser. you will find that the default.html page has also acquired the changes from the master.dwt page. Similarly you can apply changes in styles to all the pages differently.

After Changing the style

That was all for this article. Hope you find this helpful knowing the Expression Web. Do post your views.