ZAMBAK_IT_ExpressionWeb2

Creating a dynamic web site foundation

In the previous chapters you have created static web pages, but now most Internet pages are dynamic pages. They use a server-side technology to provide a more powerful and dynamic user experience.

You can display data from a database, create accounts, add robust form validation and dynamic navigation and use AJAX features.

The Microsoft Expression Development Server is used by default for all ASP.NET and PHP pages browsed from a disk-based Web site. Expression Web 2 starts the Microsoft Expression Development Server on a random port when an ASP.NET or PHP page is previewed in your browser.

Create an empty web site naming ‘x-life’.

Select File>New>Web Site, choose Empty Web Site in the Web Site tab and type a name in the Specify the location of the new Web site, and click OK.

A dynamic web site is based on Master pages. A master page is the same as a Dynamic Web Template which is explained in the previous chapter. It is also used to create Web pages that share the same web design or layout. There is only one difference: After making a change in the master page, the other pages connected to the master page are changed immediately. They will not be updated.

Creating an empty Web site

Create a Master Page Layout

Create a Master page prepared from a CSS layout.

Select File>New>Page, choose a CSS layout in the Page tab and click OK

Choosing a CSS layout

122Chapter 7

An HTML page and a CSS page are created.

Save the html page as a Master page.

Select File>Save, choose Master Page in Save as type,

type a name for the master in the File name and click the Save button.

The CSS and HTML pages

Expression Web gives a warning message: ‘The Master page does not have any content regions defined. Do you want to save anyway?’. You will define the content regions later, so you can click the Yes button.

After saving the Master page, Expression Web opens the Save As dialog box again to save the CSS file.

Saving the

CSS file

Creating a Dynamic Web Site 123

Type a text in the footer division.

You filled the elements that will be the same in all pages and these elements can not be modified in other pages. Now you need to add a content region that can be modified in all pages.

Place the cursor in the page_content division.

Right-click and select Manage Microsoft ASP.NET Content Regions.

Adding a content region

Type a name and click the Add button.

The main region is added to the page and the word (main) is written to show the place.

Click the Close button and delete the word (main) inside the main region.

Creating a Dynamic Web Site 125

Creating Styles

Create CSS styles to have a good appearance for your web site.

Click the New Style button in the Manage Styles task pane.

Name the style typing #container in the Selector name, and store this style in the existing file format1.css.

Creating a new style

To place the container division at the center of the window:

Choose Box category and select auto for the left and right margins.

Placing the page at the center

To specify page width, choose Position category and type a value for width.

Specifying page width

To change the background color:

Create a new style and choose body for selector.

Changing the page background color

Specify a background-color in the Background category. Change the colors of the divisions.

126Chapter 7

Saving the page

Create other pages which you need in the same way, types.aspx, each_type.aspx, search.aspx pages.

Creating a Dynamic Web Site 127

Create a database where the information is stored

The information will be stored in an Access database.

Create a new folder named App_Data in the Folder List.

Start the Access database program, create a new blank database, type a name data.mdb and click the Create button to save it in the App_Data..

Saving the database in the

App_Data folder

Create a new table with the following table structure and save it by typing the name, types.

Creating a

new table

Double click the types table to open it and fill in the fields.

Filling data in the fields

128Chapter 7

Creating a connection between the database and the web site

After creating a database, you need to create a connection between the database and the web site.

Open the page where you need to create the connection, types.aspx.

Click the Create Custom Content button to make the main content region active.

Select Task Panes>Data Source Library. The Data Source Library task pane opens.

Click New ASP.NET Connection, choose Data Source and click OK.

Creating a new ASP>NET connection

Choosing a data source

Click the Browse button and select the access database file in the App_Data folder.

Testing the connection

Creating a Dynamic Web Site 129

Click the Test Connection button to check the connection. If the connection has succeeded, you will see the following dialog box, click OK.

In the New Connection dialog box, enter a name for this connection and click OK.

Now you see that there is one connection created.

Displaying data from a database on a web page

Open the Toolbox task pane by selecting Task Panes>Toolbox.

Drag the AccessDataSource control to the page from the ASP.NET Controls>Data section.

Click the ORDER BY button to data.

130Chapter 7