Creating Templates in Expression Web 4

Introduction

It's a pleasure finding you reading this article in a good state. In my previous article you saw how to add a predefined template into your site and make modifications in the contents but in this article you will learn how to create a template by yourself. It is very simple in Expression Web 4 because there is a predefined page type available in Expression Web 4 known as a Dynamic Web Template. To know all these in a refined way follow the steps below.

Step 1 : Start your Expression Web 4 application and in the welcome screen, Go to File and select new option and then Page option.

Step 2 : On selecting the page option a window opens up, On the left part it shows different types different technology that the page will adopt and on the middle is the option that the respective technology has to make the starting page into. Then on the right side is the description of the options selected in the middle. Here select the General category in the left and Dynamic Web Template in the middle and press OK.

Step 3 : On selecting the Dynamic Web Template option and pressing OK the screen is split into two parts i.e. Code part and the design part. In case it is not split you can select the split option from the bottom to view the piece of code that has been added on selection of the Dynamic Web Template option.

Step 4 : Now you can design the page as you wish to or whatsoever look and feel you want your template to inherit. For example in this example I have divide the page into tables,rows and columns. First insert a table into the body tag.

Step 5 : now insert a image into this table. Go to insert-> picture--> from file. when you select the image from the storage drive the application prompts to add alternative text. This is to display the alternative text in case the image is not loaded properly.

Step 6 : Add one more table below the table1 and divide it into three columns here I have added two panels so that I add content that is not editable by the user adding this template in his application.

Step 7 : To add panel see the figure below. In panels write any content or add button or any control you want to use in your template. I have just added few contents.

You can do some changes in the default look of the panel, lets say change the background and fore ground of the panels. For this go to the tag properties of the panel and change the properties here.

Step 8 : Now add another table below the first table and above the recently added table.

I have added this table to add one more image in it so that my template give a total look and feel of c-sharpcorner website. Do the same as in adding other table with a little difference that here we have to Right click on the first table and select insert row below to add a table below the present table.

Step 9 : Now its time to set the space for the user to add his own content in the template. To make this space we do a little more thing by right clicking in the middle column on the table containing panels and selecting "Manage Editable Regions" then give this region a name and close the window and a space is created and high lightened. You may add <div> tag from the HTML properties window in this high lighted area so that the content that the user would add starts from the top and not from the middle part of the table.

Step 10 : Now save the project by any name but with " .DWT extension "which gives it a recognition as a dynamic web template, here I have named it as "mydynamictemplate.dwt"

Step 11 : Now its time check the dynamic web template. Go to File--->New--> Create from Dynamic Web Template. This asks you to select the Dynamic Web Template from which you want to create your site. Select the Template that was saved by "mydynamictemplate.dwt". or select the file "mydynamictemplate".

Step 12 : As soon as you select the template a page opens up named "untitled" and you will find that you have no power to make changes in the rest of the space in the page except the region that was set for user content. see the figure below :

Step 13 : See the result in the explorer select the preview button and the output is as shown in figure below: