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
www.c-sharpcorner.com 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: