In a previous Article Expression Web 4: Importing a CSS Template you learned
about how to import the CSS template outside the expression web. Now, I am here
to discuss that how you can create a master page using that CSS template and use
this master page to create pages. So to know how you can do this, follow the
steps below:
- Open the previously imported CSS template
in Expression Web:
- From the File menu go to new and click
Page, a dialog box asking to Select a new page type will be opened :
- From the left side list select ASP.NET,
again from the middle list select Master page and click "OK":
- You will see a page opened on your screen
named Untitled1.master, save this page and name it to default.master:
- At this point, you want to build our
design into the master page that will be shared throughout our site, and for
this just copy the code of the content that you would like to have on each
page from the index.html code and paste that code to default.master page.
- To show the sample I have copied the
Header, footer and the sidebar for my master page. And now my Master page
will look like as under:
Note: you can also change the heading; points etc. according to you
but you have to make the changes on the master page only.
- Now you have a layout that you would like
every page of your site to use. However, if you were to start building
content pages now, you wouldn't be able to actually enter any content into
this layout.
- Let' create .aspx content pages from
master page, Go to file --> new --> create from master page. When you select
create from master page a small window appeared asking "select a master
page":
- Click on browse and select default then
click open :
- In your specific master page there is a
path for your content page, hit "Ok".
- You will now get the whole thing of master
page that you want to share on your content page, save this page and name it
as "Default.aspx":
- Now you can add the content to the
default.aspx page and similarly you will be able to add different pages to
your master page:
- After adding the content your page should
be like this: