Site Development, tables and styles

Development of Dynamic Web Templates (DWT)

1. Click on Site, new, empty site to create a new site DWT-example, as shown here.
2. Click on File, New, Page, Dynamic Web Template, as shown here.
3. Once you do this Expression creates the page for you as shown in this other image.
   Please note that it created two editable areas automatically: the page title, and another for data.
   When a page is created using the DWT all content is locked, but what is inside of an editable region.
4. We need, however, to choose an overall page layout using tables, styles, lsayers, frames, etc, before ctreating the fixed and editable parts of the DWT. Therefore lets first delete the editable region created by expression for data and create the page format. Once the page format is created we can enter the common, fixed, information, and create one or more editable regions in thepage, as follows
1. Click on the editable region after the body and press delete in the keyboard, to remove it.
2. We will use a table to format the page (styles, etc, could also have been used). Click on Table, Insert table and select 1 column and two rows, as shown in this image.
3. Select the first row and insert an image and other heading text. To insert an image, click on Insert, Picture from file and select it, as shown in this image.
4. Finally, we will create an editable region in the other table row, completing the example template. To do so select the second row,right-click and select Manage Editable Regions, and give a name to it.
5. Do not forget to save your work, in the example: template.dwt
5. To create pages based on this template we select File, New, Create From Dynamic template. Then select the template.dwt that we developed.
6. Please note that the new page will have the same info than the template, but the fixed part is locked, represented by a red circle with a slash through it. The only place you can place your mouse and not see it is in an editable region. You can see the new page here.
7. Finally, if you make changes to the template expression Web will ask you if you want to make these changes in all pages created with the template.

Developing simple sites from scratch

Developing sites using predefined templates.

1. Click on Site, New, Templates, and select one of them. As you click on a template you see an image of how it will look like. Do not forget to give a name to the site, in our example -- fromtemplate1, as shown in this image.
2. The first thing you should do is to open the master.dwt to see what information you want to change in all pages of the site. If you recall, once you change the DWT it will let you change all other pages.
3. next delete items you may not wish, or so that the number of navigation links match the number of pages you will have in your site. To do so just select the item and use the backspace delete to remove them. In our example I deleted Links and FAQ from the navigation tools. Please note that these are just links used as navigation.
4. now work on the template masterheda: title of the organization, logo, if any, etc., save it and answer yes to make the changes reflected in all other pages that came with the template, as shown here.
5. you can now work in each individual page changing the editable regions without having to worry about navigation, masterhead,etc.
6. open the default.html page and save it as index.html to be sure that all Web servers will recognize this page as a default, index page of you site. You can only edit in this page the image and the text inside the Content, editable region.
7. go back to the template and replace default.html with index.html since we renamed the home page: to do so right-click on the Home navigation, select hyperlink properties and choose index.html, again, when you say OK, the new link will be replaced in the other pages.
8. proceed to update all other pages, including changing their names, etc., but remember if you change a page name, go back and change the template so that all pages are updated.
9. many basic Web sites can be developed using templates, saving hours of development.You can find more templates on the web beyond what came with Expression Web 3.

Using tables and styles to format pages

We have seen tables previously and in the example to create a DWT we saw how to create and use them in Expression Web 3. Simple table manipulation as split and merge cells can be easily done. Lets see a simple example with a left column for navigation, and a righ column divided in two areas to enter data:

1. click on Table, Insert Table and select 2 columns and 2 rows, this will create four cells, when we really need only three: one in the left and two in the right.
2. what we need to do is merge the two left cells in one: place your mouse in the first left cell and move it down to the second as shown here.
3. next, right click in these cells and select modify, merge cells, and you can see the resulty here.
4. you can now right-click in the merged left cell, select cell properties, set a width or 20% and a gray background color (or whatever you may wish) as in this image and the result is shown here.

1. create a new site for this part: click on Site, New, EmptySite, give it a name and press OK, as you did before.
2. then click on File, New Page, CSS layout and select two-columns left fixed,and click OK in our example.
3. Express web 3 will create an html page and a CSS external page
4. save the html page as index.html and the CSS page as masterstyle.css
5. Set a style for the Body tag -- the overall page. Click on the body, then select New Style from the Manage Styles or Apply Styles panel (in the right bottom side)
6. Select a font family, background color for the page, and Box with margin and padding to 0px, as shown in this image.
7. lets add a style to the left column. Click on the left column, then select New Style from the Manage Styles or Apply Styles panel,
   • select as Background color blue,
   • Border width 0 and no style or color,
   • Box padding to 0px and right and left margins equal to 10,
   • Position absolute
   • Layout float left
   as shown in this image
8. this creates a very basic layout for you site, as shown here.

This page is maintained by Al Bento who can be reached at abento@ubalt.edu This page was last updated on April 5, 2010. Although we will attempt to keep this information accurate, we can not guarantee the accuracy of the information provided.