Now that you have completed your home page, it's time to create the rest of your site. To do this, we will take advantage of the facilities provided by Expression Web to simplify the creation and maintenance of multiple pages.
As implied by the previous paragraph, this article assumes that you have done the earlier chapters of the Expression Web tutorial. Complete newcomers to web design should probably start at the beginning, with How to Create Your Own Website.
By the end of this chapter, you will have created most of the pages of your site. You will also have learnt ("learned" in US English) how to use Expression Web's Dynamic Web Templates to efficiently create and update those pages.
Up until now, your website has only one page. As such, any time you wanted to change its design, you only had to make it in one file. Things are not so simple when your site grows beyond that single page: for example, what happens if you want the navigation menu to have an additional button? Does it mean that you have to go through every single page to add that button?
This is where Expression Web's Dynamic Web Template (or "DWT" for short) comes in. It is a "template" in the normal English meaning of the word, with some additional features. When you create a new page based on that template, it will take on the appearance of the latter, so that all you need to do is to add the content that is specific to that page. Even better, when you have a change of heart, and want to modify the design, all you need to do is to modify the template. Expression Web will automatically notice that your site's design has changed, and update all the relevant pages with that new design.
Open your home page in Expression Web, if it is not already open.
Click "File | Save As..." from the menu.
In the familiar "Save As" dialog box, click the drop-down box for the "Save as type" field and select "Dynamic Web Template (*.dwt)" from the list offered.
The "File name" field will now read "index.dwt". This DWT file will be the template for your entire site. You can either leave its name at "index.dwt" or change it to some other name, but with a ".dwt" extension. For example, if you want to change it to "mydesign", type "mydesign.dwt", without the quotation marks. The name doesn't really matter though, since you are not going to put this file onto your website. It's just an internal file used by Expression Web.
For the purpose of this tutorial, so that I can concisely refer to the file, I will assume that you left the name at "index.dwt".
Click the "Save" button.
Look at the tabs just above your page. Instead of the usual "Site View" and "index.html" tabs, you should now see "Site View" and "index.dwt", with the latter being the current tab (see picture below). Your "index.html" is not gone; it's still on the hard disk, but you are now working on your template file.
Bear this in mind as you work from now on. That is, be conscious of which file you are actually working on. When you want to change the design of your entire site, you need to modify the DWT file. When you want to add content to an individual page, it needs to be done on the HTML page itself.
By default, Expression Web assumes that every part of the page in a template is part of the design. This is of course not correct. You only want the basic two column layout, the navigation menu and the top horizontal strip containing your logo to be standard across all your pages. The bulk of the right column (where your content lives) will probably vary from page to page (unless you really want every page to be an identical copy of your home page).
In order for Expression Web to know which region of your page is part of the site's design, and which portion contains unique content, you need to specifically indicate it in your template. Otherwise, the editor, being unable to read your mind, will default to treating everything as the invariant part of the design.
Essentially, what you will be doing now is setting up what Expression Web calls "editable regions". These are the sections of your page that will have different content on different pages of your site. You can have multiple editable regions on each page, and they can be separated by portions that is part of the fixed design, or they can be contiguous with other editable regions.
To mark a region of your web page as editable, first drag your mouse over that section to select it.
Note that if you want the entire content column to be editable, that is, if it is
to be completely different on every page (as is quite likely), it may be simpler to select the
entire column instead of individually highlighting each paragraph, one at a time. To do this,
click to put your text cursor somewhere in the right column. Then look at the series of tabs just
underneath the "Site View" and "index.dwt" tabs. Click the "div#tswcontproper" tab
(see picture below). The entire right column should now be selected.
Some of you may be wondering what the difference between div#tswcontproper (used above)
and div#tswcontent (used in chapter 3 to change the background colour) is.
Although both refer to the right column, div#tswcontproper only holds the content in the right column,
while div#tswcontent holds both div#tswcontproper and a narrow border around the latter.
It provides a sort of margin, an area of blank space, so that your words don't go right up to the edge of the screen,
making things difficult to read.
Click "Format | Dynamic Web Templates | Manage Editable Regions..." from the menu.
A dialog box with the title "Editable Regions" will appear. You will be required to give this region a name. Presumably, this name is meant to jog your memory in the future so that you know what the region is supposed to contain. The name can be anything you like. For example, if you have selected the entire right column, type into the "Region name" field the words "Page content" or "Content" or "Page-specific stuff" or whatever you want. (Yes, you can use spaces in the name.) This name will be displayed when you edit the page, but will not be shown to a visitor when he/she sees your site in a browser.
Having said that, the names of your template file (ie, "index.dwt") and all editable regions will also be embedded into your web page. It will just be invisible to your visitors when browsing your site normally. However, if they take the trouble to use their browser's "View Source" facility, they can see the names you have chosen. In other words, don't put secret things (like your bank password) as the names of your editable regions. Things like "Content", "Product Description" or "Price" are fine. It should be obvious from your page that it's the "content", "product description" or "price" that they're reading anyway, otherwise you have bigger problems than dreaming up these names.
To summarize, type in some word or words into that field that describe the section. Or, if naming things gives you a massive headache, just type in "region 1", "region 2", "region 3", etc.
After you type in the name, the "Add" button will be enabled. Click it. The name will be added to the list of names in the box below. If this is the first time you're adding a name, this will result in two names being in the list: the one you just added and "doctitle".
Click the "Close" button to dismiss the dialog box.
Notice that the section that you previously selected will now be marked with the name you entered.
Repeat the process for the other parts of the page that should be changeable. For example, if you have placed a copyright notice in the footer, you may want to make the year portion an editable region, since it's possible that you will create new pages in future years too. Yes, you can select a single word and add it as an editable region if you like.
You don't need to make your logo (in the masthead) and the navigation menu (in the left column) editable regions. These are after all supposed to be part of the design that is the same across your site. Not making a part of the page an editable region has the following effect:
That portion of the page cannot be changed on the individual pages derived from this template. It will be the same on every page. That's what you want, since it is supposed to be part of the design.
If you want to change those sections, you will need to change it in the DWT file itself.
Whenever you change these non-editable regions in your template, Expression Web will automatically update all the pages derived from it with the new design.
When you have finished adding editable regions to your page, click "File | Save".
You now have a template from which you can derive new pages. However, before we do this, we have to deal with your home page. Remember that the latter was manually created by you, independent of any template. As such, Expression Web does not view that page as having been derived from your new DWT file. If we don't do something about this, in the future, when you change your site's design, the editor will not automatically update the home page, since as far as it is concerned, it is not connected with the template at all.
The simplest way to associate the home page with the template, is to replace your old "index.html" file with a new one that is made from the template. This doesn't require much work, since the template is based on your home page, and when you created it, you didn't make any change to its appearance or content. All you did was to mark certain sections as editable regions. Any page made from it will therefore look exactly like your home page by default. This similarity, however, is only skin deep. Under the hood, it has invisible markers that tell Expression Web that it was made from your template, which is what we want.
Close the template with "File | Close". This avoids confusion later where you might accidentally end up changing the wrong file, since both your template and home page look identical.
Click "File | New | Create from Dynamic Web Template...".
Click your template file (eg, "index.dwt") in the "Attach Dynamic Web Template" dialog box that appears.
Click the "Open" button to accept your choice.
A new page that looks exactly like your template and old home page will appear, along with a dialog box that says "(1 of 1) files updated." Click the "Close" button in that dialog box.
Without making any changes to the page, immediately click "File | Save As..." from the menu.
In the "Save As" dialog box that appears, click your home page (ie, "index.html") to select it. Yes, as mentioned above, you are overwriting your existing home page.
Click the "Save" button.
Click "Yes" in the "Confirm Save As" dialog box to allow Expression Web to replace your old index.html with the new one.
Since this is the same page that you have already completed in chapter 6, there is nothing more to do here. Just click "File | Close".
That's it. As of now, whenever you change the non-editable sections of your template file, Expression Web will automatically update your home page as well.
The process of creating the other pages of your website is similar to that of recreating your home page, except that there are a few extra steps to take.
We will start with the site map.
A site map is essentially a comprehensive index of all the pages on your website. You can see an example of it by looking at thesitewizard.com's Site Map. As you can see, the entire page consists of links pointing to all the articles on my site. It is the web equivalent of an exhaustive table of contents that you find in a physical book. Visitors looking for something, but don't know how to get to it, can consult this map. In other words, it serves to improve your your website's usability. Another benefit is that it helps search engines discover all the pages on your site.
Incidentally, don't be distracted by the 3 columns that I used in my site map. Since I had hundreds of pages to list, I put it into multiple columns to make the page appear shorter. (It seemed a good idea at the time.)
I realise that you don't have many pages at this point to list. However, you should still create this, since you will eventually have more. If you don't do it now, when the job is easy, and put it off till you have hundreds of pages, you'll decide at that time that it's too hard to do. If you create the map at the very beginning, you can simply add a new link to it every time you add a page, making it a trivial and doable task.
Click "File | New | Create from Dynamic Web Template...".
Select your template file and click "Open".
Click the "Close" button to get rid of the pointless dialog box telling you "(1 of 1) files updated".
Click "File | Properties" from the menu. The "Page Properties" dialog box that you first met in chapter 1 will appear.
Change the "Title" field to say either "Site Map", "Site Map (Example Co)" or "Example Co's Site Map" (of course replacing "Example Co" with the name of your site). Although no one will stop you from saying whatever you want, it's best to have the words "Site Map" somewhere in the title field here, since, by convention, that is the term used for the kind of page you are about to design.
Click the "OK" button.
Now replace the content of the page. Since you made the content into an editable region, Expression Web will let you modify it without issue.
Start by putting a heading of "Site Map" somewhere at the top of the page, replacing whatever heading you had previously.
Then create a link
to each page of your site on a separate line. Since you don't have many pages at this time, just create 2 or 3 links. Start by
putting a link to the Home page on one line. Then put one to the Contact (or Support or Feedback) Form on another. The link to
the Contact form should point to either "feedback.html" (if you are using relative URLs) or
"http://www.example.com/feedback.html" (if you are using absolute URLs; remember to replace "example.com" with
your own domain), otherwise when you
actually create your feedback form in the last chapter, your site map will not link to it correctly. If you want an
About Us page, create a link for that too (eg, with "about.html" for the filename portion).
Note that unlike your navigation menu, the link to the home page does not have to be at the top. In fact, you can arrange your links in any order you want, eg, alphabetically or grouped by topics or whatever.
Since hitting the ENTER key after each line creates a new paragraph, leaving far too much space between each link, you will want to use a different method for moving each link to a new line. One way is to use Shift+ENTER on the keyboard after each line, that is, hold down the Shift key while hitting ENTER. Whatever you type next will go onto a new line in the same paragraph.
When you have finished populating the page with links, click "File | Save As..." and type "sitemap.html"
into the "File name" field. Remember that this is the name you used in your
navigation menu
(see chapter 6), so if you enter something different here, your navigation menu button will lead nowhere.
Click the "Save" button.
You should return here to add a new link each time you create another page. You will probably not appreciate the site map very much since, as the webmaster, you are already intimately familiar with your website. But your visitors will find it helpful, especially when your site grows to have many pages.
The "About Us" page is used by webmasters to tell their visitors a bit about the company or people behind the site. If you are running a business, selling either products or services, you probably should create one. The page is optional for people running personal or hobby websites. Whatever your situation may be, remember that the things you write here can be read by anyone, from lunatics and criminals living in your neighbourhood to your future employers, so be circumspect as to what you reveal.
If you don't want to have an "About Us" page, just skip to the next section.
Click "File | New | Create from Dynamic Web Template...".
Select your template file and click "Open".
Click the "Close" button to dismiss the message telling you "(1 of 1) files updated".
Click "File | Properties" to get the "Page Properties" dialog box and change the "Title" field to "About Us (Example Co)", "About Example Co", "About Us", "About Me" or words to that effect.
Modify the content in the editable regions to say the things you want to say. If you are adding photos to this page, remember that you have to copy them into the images folder as you did in chapter 2.
Save the file as "about.html" or whatever name you used earlier in your Site Map and
navigation menu.
Now that you're familiar with creating new pages from the template, having already done it 2 or 3 times, you should proceed to create the rest of your site. Remember to set the title field of each page you create. In addition, you may also want to read my article on how to create good filenames for your web pages to avoid long term problems.
Note: do not create the contact form yourself. I will deal with that at length in chapter 9. Forms are a bit more complicated than the usual web page.
If the page you are creating is an important one, consider putting a button in your navigation menu pointing to it. As mentioned before, whether a page is important or not depends on the purpose of your site. However, since you probably didn't put the navigation menu in an editable region of your web page (for good reason), you will need to modify the template itself to insert the button. This is the subject of the next section.
If you are changing your website's design in some way, whether to accommodate a new button on the navigation menu or to alter its colour scheme or some other thing, you will need to make your changes in the template itself.
Save and close all open files in Expression Web.
Open your template file by doubleclicking the "index.dwt" line in Expression Web's Site View pane.
Make your changes to the non-editable regions.
Click "File | Save" from the menu.
You will get a dialog box saying "There are [number] files attached to index.dwt. Would you like to update them now?", where [number] is some numeral depending on how many files you have created based on the template.
Click "Yes".
Expression Web will then proceed to change all the files derived from the template. When it is done, it will report on the number of files that it has modified. If you like, you can click the "Show Log" checkbox to see the list of files affected.
Click the "Close" button when you are done with the report.
Click "File | Close" to close the template.
If you open one or more of your other pages, you will see that the changes you made to the template have indeed percolated to all the dependant files.
In the next chapter, you will transfer your website onto the Internet. (Don't worry. I know that you still haven't created your contact form. The reason for doing things in this order will be explained in the next chapter.)
Copyright © 2016-2018 Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
You are here:
Top » Getting Started with Your Website »
How to Create / Make Your Own Website: The Beginner's A-Z Guide » List of All Expression Web Tutorials »
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Create and Manage Multiple Pages on Your Website with Expression Web
