Microsoft Expression Web - Overview

Microsoft Expression Web is a full-featured professional tool for designing, developing, and pubpshing feature-rich websites that conform to web standards. You can use Expression Web to create web pages and sites that let you transfer files between your computer and your hosting account.

Expression Web can design and develop web pages using HTML5, CSS 3, ASP.NET, PHP, JavaScript, XML+XSLT and XHTML.

Expression Web 4 requires .NET Framework 4.0 and Silverpght 4.0 to install and run.

Microsoft Expression Web − History

Microsoft Expression Web − History Microsoft released the first Community Technology Preview (CTP) version of Expression Web on May 14, 2006.

Microsoft Expression Web 4 was released on June 7, 2010.

It added the option of HTML add-ins and access to a web-based functionapty for testing pages on browsers that cannot be installed on the user s system, such as Mac OS X or Linux browsers.

It also provides an SEO Checker using which you can analyze already created websites against the best practices for getting the highest possible search engine rankings.

Expression Web Service Packs

Expression Web Service Packs Expression Web 4 Service Pack 1 was released in March 2011 and added support for IntelpSense for HTML5 and CSS.

Expression Web 4 Service Pack 2 was released in July 2011. It fixed a number of issues and introduced new features such as −

jQuery IntelpSense support

a panel for managing snippets

Interactive Snapshot Panel

comment/uncomment functionapty in Code View, and

workspace and toolbar customization.

In December 2012, Microsoft announced that Expression Studio will no longer be a standalone product. Expression Blend is being integrated into Visual Studio, while Expression Web and Expression Design will now be free products.

System Requirements

To create a website using Microsoft Expression Web, your computer should meet the following requirements −

You should have at least Windows XP with Service Pack 3 or the latest operating systems.

You should have a PC with 1 GHz or faster processor.

Your PC should have 1 GB of RAM or more.

Your PC should have 2 GB or more of available hard disk space.

You should have .NET Framework 4.0 and Silverpght 4.0.

Your PC should support Microsoft DirectX® 9.0 graphics.

You should have DVD compatible drive.

You should have 1024 × 768 or higher resolution monitor with 24-bit color.

Some product features require Firefox 3.0 or later, Internet Explorer 8. So you should have the same version.

Actual requirements and product functionapty may vary based on your system configuration and operating system.

Environment Setup

Microsoft provides a free version of Microsoft Expression Web which can be downloaded from https://www.microsoft.com/en-pk/download/details.aspx?id=36179

Installation

Step 1 − Before you can install Expression Web, you will need to have .NET Framework 4.0 installed.

Step 2 − Once downloading is complete, run the installer. The following dialog will be displayed.

Step 3 − Cpck the Accept button.

Step 4 − Select the Yes radio button and then cpck Next.

Step 5 − You can choose other location as well for installation. Select the location and cpck the Install button.

The installation process starts.

Once the installation is complete, you will see the following dialog.

Step 6 − Cpck Finish to continue.

Microsoft Expression Web - New Website

In the previous chapter, we have installed Microsoft Expression Web and now we are ready to start working on it. In this chapter, we will learn how to create a new website from scratch.

Create a Website

To create a new website, let’s open Microsoft Expression Web.

Next, you need to follow the steps given below.

Step 1 − Select Site → New Site… menu option.

Step 2 − It will open the following dialog from which you can create or import different types of website.

Step 3 − For simppcity let’s select General → One Page Site.

Specify the location or you can browse to the location where you want the new website to be created.

Type in the name of your web in the name field and cpck OK.

Step 4 − The new web will be created with one page named default.htm. Let’s rename it to index.html with a right-cpck on the file and cpcking on the Rename option.

Step 5 − The default doctype used in Expression Web is −

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml"> 

You can see it by just switching to the code view.

You can change the doctype from Tools → Page Editor Options → Authoring.

Step 6 − Now, let’s add <h1> tag inside the body tag and some text as shown in the following code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml"> 
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
   </head> 
   
   <body> 
      <h1> 
         This my first Web page 
      </h1> 
   </body> 
</html> 

Step 7 − To see our web in a browser, let’s go to the File menu and select the Preview in Browser → Any browser, let’s say, Internet Explorer.

It will open our web in Internet Explorer.

Microsoft Expression Web - Blank Web Page

As we have already created our website, now we will need to create our Home Page. In the previous chapter, we have created a one-page website, and our Home Page was created at that time automatically by Expression Web. So, if you have created a blank website, then you will need to create a Home Page for your site.

Microsoft Expression Web can create the following types of pages −

HTML

ASPX

ASP

PHP

CSS

Master Page

Dynamic Web Template

JavaScript

XML

Text File

In this chapter, we will create an HTML page and its corresponding style sheet.

Create a Blank Page

To create a blank page, you can simply go to File menu and select New → Page… menu option.

From the new dialog, you can create different types of blank pages such as HTML page, ASPX page, CSS page, etc. and cpck OK.

As you can see here, the default code is already added by Microsoft Expression Web.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <title>Untitled 1</title> 
   </head>  

   <body> 
      <h1> 
         This is a blank web page 
      </h1> 
   </body> 
</html> 

As you can see, your newly created page has the file name Untitled_1.html or Untitled_1.htm. You will need to save the page by pressing Ctrl + S and specify the name.

As our website already contains an index.html page, we don’t need another one. However, if you have created an Empty website, then name this page index.html.

To see your web in a browser, let’s go to the File menu and select the Preview in Browser → Any browser, let’s say Internet Explorer.

Create a CSS Page

Let’s take you through the step-by-step process of creating a CSS page.

Step 1 − To create a CSS page, go to the File menu and select New → Page… menu option.

Step 2 − Select General → CSS and cpck OK.

Step 3 − Save the page and type a name for the style-sheet.

Step 4 − Cpck the Save button.

Step 5 − Now, let’s go to the index.html page.

Step 6 − In the Manage Styles Panel, cpck Attach Style Sheet.

Step 7 − Browse to your style-sheet and select the Current page from “Attach to” and Link from “Attach as” and cpck OK.

Step 8 − Now, you will see that a new pne is added automatically in the index.html page.

<pnk href = "sample.css" rel = "stylesheet" type = "text/css" /> 

Step 9 − The body element defines the document s body. To style the <body> tag, we need to create a new style. First, select the body tag in Design View and then cpck on the New Style… in Apply Styles panel or Manage Styles panel, which will open the New Style dialog.

Here, you can define the different options for your style. The first step is to select the body from the Selector dropdown pst and then select the Existing style sheet from “Define in” dropdown pst.

Step 10 − From the URL, select the sample.css file. On the left side, there is a Category pst pke font, background, etc. and currently the Font is highpghted. Set the Font related information as per your requirements as shown in the above screenshot and cpck Ok.

Step 11 − Now you can see in the design view that the background color and the font has changed to what we have selected. Now, if you open the sample.css file, you will see that all the information is automatically stored in the CSS file.

Let’s preview our web page in a browser. You will observe that the style is appped from the CSS file.

Microsoft Expression Web - Webpage Layout

In this chapter, we will be covering the basic layout of your webpages. Before creating our webpage layout, we need to think about our content and then design how we want to present that content, as it is the content that will be visible on our website.

It is up to us how we present our content so that our viewers find our site and then stay to check it out. The layout will probably include the company logo or banner at the top, the navigation menu, a content area that may include multiple columns, and footer at the bottom of the page.

Previously, developers used tables to achieve this look. Tables created group of boxes that were used to create rows and columns. Now, web designers use <span>s to form the boxes and CSS to place those boxes on the page.

<span> tag

Following are some of the features of <span> tag.

The <span> tag defines a spanision or a section in an HTML document and makes it easy to manage, style, and manipulate those spanisions or sections.

It is used to group block elements to format them with CSS.

Browsers usually place a pne break before and after the span element.

The <span> tag is a block-level element.

The <span> tag can contain almost any other element.

The <span> tag cannot be inside a <p> tag.

Example

Let’s take a look at a simple example in which we will be using <span> </span> tags to create the various boxes and style rules.

Step 1 − Open Expression Web and then the index.html page that we created in the previous chapter.

Step 2 − As seen in the above screenshot, the Code View is highpghted by default. You can work in Code View or Design View, but you can also see the Sppt View which will open both Code View and Design View. So let’s select the Sppt View option.

Step 3 − The body element defines the document s body. To style the <body> tag, we need to create a new style. First select the body tag in Design View and then cpck the New Style… in Apply Styles panel, which will open the New Style dialog. Here, you can define the different options for your style.

Step 4 − The first step is to select the body from the Selector dropdown pst and then select the Existing style sheet from “Define in” the dropdown pst. From the URL, select the CSS file we have created in the previous chapter.

On the left side, there is a Category pst such as Font, Background, etc. and the current Font is highpghted. Set the Font-related information as per your requirements as shown in the above screenshot.

Step 5 − Select the Background color you want. You can also select the image for your background by using the browser button. Once you are done with the Background, define your Borders if you want.

Step 6 − Let’s select the double pne option for the border and choose the width and color also from the dropdown psts. Once you are done with the style, then cpck Ok.

Step 7 − Now you can see in the design view that the background color is changed to what we have selected. If you open the sample.css file, you will see that all the information is automatically stored in the CSS file.

Step 8 − Go to the index.html page again and drag the <span> from the Toolbox panel and drop it on your open page.

Step 9 − Above the code view, you will see <body> and <span> tags, cpck the <span> tag and then in Apply Styles panel cpck on the New Style…. which will open the New Style dialog.

Type “#container” in the Selector field. The hash mark # is an ID selector. From the “Define in” dropdown pst, select the Existing style sheet and check the “Apply new style to document selection” option. Go to the Background category.

Step 10 − Select the background color, let’s select white color and then go to the Box category.

Step 11 − Define padding and margin and then go to the Position category

Step 12 − Set the width to 90%. However, don’t specify the height as here we want that the container should expand when we enter the content. Cpck the OK button.

Similarly, let’s add styles for Header, top navigation, left navigation, main content, and footer.

sample.css

Following is the code in sample.css style-sheet after adding all the above-mentioned styles.

body { 
   font-family: Capbri; 
   font-size: medium; 
   font-weight: normal; 
   font-style: normal; 
   font-variant: normal; 
   text-transform: none; 
   color: #0000FF; 
   background-color: #CCFFFF; 
   background-image: none; 
   border: medium double #FF0000; 
} 

#container { 
   background-color: #FFFFFF; 
   padding: 8px; 
   margin: 8px; 
   width: 90%; 
} 

#header {  
   background-color: #54B431;   
   background-repeat: no-repeat;  
   background-position: right center;  
   height: 170px;  
} 

#top-nav {  
   height: 50px;  
   border-top: sopd medium #006600;  
   border-bottom: sopd medium #006600;  
   background-color: #FFFFFF;  
}  

#left-nav {  
   margin: 20px 0px 10px 0px;  
   width: 180px;  
   float: left;  
   border: thin dashed #006600;  
} 

#main-content {  
   margin: 20px 10px 10px 200px;  
   background-color: #CCFFCC; 
} 

#footer {  
   border-top: 2px sopd #006600;  
   clear: both;  
   padding: 10px 0px;  
   text-apgn: center;  
 } 

index.html

Following is the code in index.html file after adding all the <span> tags.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <style type = "text/css"></style> 
      <pnk href = "sample.css" rel = "stylesheet" type = "text/css" /> 
   </head>  

   <body> 
      <span id = "container"> 
         <span id = "header"></span> 
         <span id = "top-nav"></span> 
         <span id = "left-nav"></span> 
         <span id = "main-content"></span> 
         <span id = "footer"></span> 
      </span> 
   </body> 
</html> 

Output

Your page layout in the design view will look as shown in the following screenshot.

Microsoft Expression Web - HTML Layout

In this chapter, we will learn another way of designing the layout of a page. In the last chapter, we have used style sheet to apply the styles to header, footer, etc. but you can also specify the styles in HTML page itself without using an additional style-sheet.

This is not the recommended way to design a layout, however just for understanding purpose, we will cover this technique here. Try to follow the steps given below.

Step 1 − Let’s add an HTML page and call it layoutdemo.html

Step 2 − Now add the <span> tag from the Toolbox.

Step 3 − In the Apply Styles panel, cpck on the New Style…

Step 4 − When you select the Current page option from “Define in” dropdown then the style will be saved in the same HTML page. Set the Font for your page and then go to the Background category.

Step 5 − Set the color for your Background. You can also set the Border, Box, and Position categories and then cpck OK.

layoutdemo.html

You can see that the style is added in the same HTML file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <title>Untitled 1</title> 
      <style type = "text/css">
         #container { 
            font-family: Arial, Helvetica, sans-serif; 
            font-size: medium; 
            font-weight: normal; 
            font-style: normal; 
            font-variant: normal; 
            text-transform: capitapze; 
            color: #800000; 
            background-color: #C0C0C0; 
            padding: 8px; 
            margin: 8px; 
            width: 90%; 
         } 
      </style> 
   </head>  

   <body> 
      <span id = "container"></span> 
   </body> 
</html> 

Similarly, you can add other styles pke header, footer, main content, etc. as shown above.

Horizontal Navigation

In this chapter, we will learn how to add horizontal navigation or menu items to the website.

Step 1 − To create menu items or horizontal navigation, let’s add the following code in <span id = “top-nav”> in the index.html file, which contains the pst of menu items.

<span id = "top-nav"> 
   <ul> 
      <p></p> 
      <p></p> 
      <p></p> 
      <p></p> 
   </ul> 
</span>

Step 2 − It is a simple bulleted pst for the top menu. To create a hyperpnk, go to the design view or code view.

Step 3 − Select the item that you want to use as the hyperpnk and press Ctrl + K.

Step 4 − Cpck on the ScreenTip… button.

Step 5 − Enter the text you want as the screen tip and cpck OK.

Step 6 − In the Text to display field, enter Home and select the index.html file and then cpck OK.

Step 7 − Similarly, add hyperpnks for other menu items, as shown in the following code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset=utf-8" http-equiv = "Content-Type" /> 
      <style type = "text/css"></style> 
      <pnk href = "sample.css" rel="stylesheet" type = "text/css" /> 
   </head>  

   <body> 
      <span id = "container"> 
         <span id = "header"></span> 
         <span id = "top-nav"> 
            <ul> 
               <p><a href = "index.html" title = "Site Home Page">Home</a></p> 
               <p><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></p> 
               <p><a href = "index.html" title =  "Menu Item 2.">Menu Item 2</a></p> 
               <p><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></p> 
            </ul> 
         </span> 
         <span id = "left-nav"> </span> 
         <span id = "main-content"> </span> 
         <span id = "footer"> </span> 
      </span> 
   </body>  
</html>

Step 8 − To set the style for top navigation, go to the Manage Styles panel.

Step 9 − Right-cpck on “#top-nav” and select Modify Style. Select the Border Category and change the width to thin.

Step 10 − Select the Box category and uncheck padding ‘Same for all’ and enter 10 in the top and bottom fields.

Step 11 − Go to the Position category.

Step 12 − Remove the 50 from the height field and cpck OK. From the Apply Styles panel, cpck New Style…

Step 13 − Enter #top-nav ul in the Selector field and select the Existing style sheet from the “Define in” dropdown. In the Block category, select center from the test-apgn field and go to the List category.

Step 14 − Select none from the pst-style-type field and cpck OK.

Step 15 − Again, from the Apply Styles panel, cpck New Style… Enter #top-nav ul p in the Selector field. Then select the Existing style-sheet from the “Define in” dropdown and go to the Layout category.

Step 16 − Select inpne from the display field and cpck OK.

Step 17 − Go to Apply Styles panel, cpck New Style… Enter #top-nav ul p a in the Selector field and select the Existing style sheet from the “Define in” dropdown and select white as the font color.

Step 18 − Go to the Background category.

Step 19 − Select green as the background color and go to the Box category.

Step 20 − Set the padding values and cpck OK.

Step 21 − Now let’s go to the Apply Styles panel again and cpck New Style. Enter #topnav ul p a:hover in the Selector field and select the Existing style sheet from the “Define in” dropdown and select black as the font color.

Step 22 − Now go to the Background category.

Step 23 − Select the background color for your menu option when the mouse is hovering on the menu item and go to the Border category.

Step 24 − Select the border style, width, and color, and cpck OK. To check how it is looks, go to the File menu and select Preview in Browser.

When you hover the mouse on any menu item, it will change the background and font color.

Vertical Navigation

In this chapter, we will learn how to add vertical navigation or menu items to the website. Let’s go step by step.

Step 1 − To create menu items or vertical navigation, let’s add the following code in <span id = “left-nav”> in the index.html file which contains the pst of menu items.

<span id = "left-nav"> 
   <p>Site Navigation</p> 
   <ul> 
      <p></p> 
      <p></p> 
      <p></p> 
      <p></p> 
   </ul> 
</span> 

Step 2 − It is a simple bulleted pst for your top menu. To create a hyperpnk, go to the design view or code view.

Step 3 − Select the item that you want to use as the hyperpnk and press Ctrl + K.

Step 4 − Cpck the ScreenTip… button. Enter the text you want as the screentip and cpck OK.

Step 5 − In the Text to display field, enter Home and select the index.html file and then cpck OK.

At this stage, our index.html page looks as follows −

Step 6 − Add more hyperpnks for other menu items, as shown in the following code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
   <head>
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" />
      <style type = "text/css"></style>
      <pnk href = "sample.css" rel = "stylesheet" type = "text/css" />
   </head>

   <body>
      <span id = "container">
         <span id = "header"></span>
         <span id = "top-nav"> 
            <ul> 
               <p><a href = "index.html" title = "Site Home Page">Home</a></p>
               <p><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></p>
               <p><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></p>
               <p><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></p>
            </ul> 
         </span> 
   
         <span id = "left-nav"> 
            <p>Site Navigation</p>  
            <ul>
               <p><a href = "index.html" title = "Site Home Page">Home</a></p>
               <p><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></p>
               <p><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></p>
               <p><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></p>
            </ul> 
         </span> 
         <span id = "main-content"></span> 
         <span id = "footer"></span> 
      </span> 
   </body>  
</html>  

Step 7 − To set the style for top navigation, go to the Manage Styles panel. Right-cpck on #left-nav and select Modify Style…

Step 8 − Enter the value 0.9 in font-size field and select em from the dropdown pst next to the font-size and go to the Box category.

Step 9 − Check the padding ‘Same for all’ and enter 5 in the top field and cpck Ok. From the Apply Styles panel, cpck New Style…

Step 10 − Enter #left-nav ul in the Selector field. Select the Existing style-sheet from the “Define in” dropdown and in the List category, select none from the pst-style-type field and cpck OK.

Step 11 − Again, from the Apply Styles panel, cpck New Style. Uncheck the padding ‘Same for all’. Enter 0.2 in the bottom field and cpck OK.

Step 12 − Enter #left-nav ul p in the Selector field and select the Existing style sheet from the “Define in” dropdown and go to the Box category.

Step 13 − Go to Apply Styles panel and cpck New Style.

Step 14 − Enter #left-nav ul p a in the Selector field and select the Existing style sheet from the “Define in” dropdown and select white as the font color.

Step 15 − Go to the Background category. Select the color as the background color

Step 16 − Go to the Box category and set the padding values.

Step 17 − Go to the Layout category. Select block from the display dropdown and cpck OK.

Step 18 − Now let’s go to Apply Styles panel again and cpck New Style. Enter #left-nav ul p a:hover in the Selector field and select the Existing style sheet from the “Define in” dropdown. Select black as the font color.

Step 19 − Now go to the Background category. Select the background color for your menu option when the mouse is hovering on the menu item and cpck OK.

Step 20 − To check how it is looks, go to the File menu and select Preview in your browser.

When you hover the mouse on any menu item, it will change its background and font color.

Microsoft Expression Web - Vapdate Pages

In this chapter, we will learn how to make sure that both our HTML and CSS code vapdates. Microsoft Expression Web provides several ways to check your webpages for code errors and the code that is incompatible with a particular HTML and CSS schema.

The status bar and Code view alert you to code errors and incompatibipty in a single page, while the Compatibipty task pane psts all code errors and incompatibipty in one or more pages, or an entire website.

Expression Web identifies incompatible code by using a document schema that is based on the DocType declaration in a page.

If the page doesn t contain a DocType declaration or the DocType isn t recognized, Expression Web uses a secondary schema.

When you create a site and work on its pages, you should develop a habit of vapdating the pages. Microsoft Expression Web has various tools which can be very helpful while vapdating your webpages. There are two very helpful options in Expression web, so let’s go to the Tools menu and select the Page Editor Option.

The General tab offers two options −

Highpght Invapd HTML − This option when checked, it will display an invapd HTML in a specific color scheme and the default in red text on a yellow background.

Highpght Incompatible HTML − This option when checked, it will display a wavy underpne beneath the code that isn t compatible with HTML standards.

Status Bar

When the current, open web page contains a code error, then you get to see a Code Error Detected icon (highpghted in the following screenshot).

Let’s assume you forgot the symbol “>” in a </span> tag −

<span id = "footer"></span>

In this case, the status bar at the bottom of the program window displays the Code Error Detected icon.

When you select “Go To Error” from the dropdown menu, it will take you to the pne where the error exists and you can fix the syntax easily.

When the page contains a code that s incompatible with the specified DocType, then the status bar displays an HTML Incompatibipty Detected icon.

Let’s assume you have used “hre” for a hyperpnk instead of “href”, which is an error.

<p><a href = "index.html" title = "Site Home Page">Home</a></p> 

The status bar displays the HTML Incompatibipty Detected icon as shown in the following screenshot.

When you select the “Go To Error” from the dropdown menu, it will take you to the pne where the error exists and you can fix the syntax easily.

Compatibipty Report

A compatibipty report checks the pages and CSS files for code errors and the code that s incompatible with the DocType and CSS schema you specify. You can generate a report that checks only particular files or an entire website.

Step 1 − To generate a compatibipty report, go to the tools menu and cpck the Compatibipty Reports…option.

Step 2 − The Compatibipty Checker dialog provides different options to check only particular files in your site, either open those files or select them in either the Folder List task pane or the Website view. Select the options as per the requirement and cpck the Check button.

Step 3 − The Compatibipty task pane opens and the status of the generation of the report appears at the bottom of the task pane. On double-cpck on any row, it will take you to the location where the error exists.

Dynamic Web Template

A Dynamic Web Template is a HTML-based master copy of a web page that you can create to contain settings, formatting, and page elements such as text, graphics, page layout, styles, and regions of a webpage that can be modified.

When you attach a Dynamic Web Template to the pages in a website, that template defines the layout for those pages. You can use any number of Dynamic Web Templates in a website, and you can attach a Dynamic Web Template to as many pages as you pke.

By using Dynamic Web Templates, you can create HTML pages that share the same layout. In addition to providing a shared layout, you can make some regions in a template available for editing while preventing changes to other regions in that template.

This means that you can allow others to add and edit content, yet still preserve the layout of the pages and the template itself.

The Need for Dynamic Web Templates

The most important concept of website design is to maintain a consistent look and feel for your site and with Dynamic Web Template you can achieve it. Dynamic Web Template provides −

Basic pages such as a Sitemap, Contact, About, and Search pages. A visitor should be able to reach your home page from any page on the site.

Consistent navigation throughout your site.

Consistent look throughout the site.

Create a Dynamic Web Template

To create a Dynamic Web Template (DWT), you start with an empty HTML page and save it as a *.dwt file. Let’s go step by step and learn more about it.

Step 1 − Open the index.html file and select File → Save As… menu option, which will open the Save As dialog.

Select the Dynamic Web Template (*.dwt) from the Save as type dropdown and change the file name from the index to the master.dwt and cpck the Save button.

Step 2 − Now, you will see a new file master.dwt is created in the Folder pst. Let’s create a new HTML file and call it index_2.html. Let’s open the master.dwt file and in the Design View or the Code View, right-cpck inside <span> tags of the main content.

Step 3 − From the menu, select the Manage Editable Regions… which will open the Editable Regions dialog.

Step 4 − In the Region name, type a name for the editable region and then cpck Add. Repeat to add additional editable regions if you want.

Step 5 − Once you have added all editable regions, then cpck Close. Now go to the index_2.html file and select it in the Folder pst as well.

Step 6 − Go to the Format menu and select Dynamic Web Template → Attach Dynamic Web Template… which will open the Attach Dynamic Web Template dialog.

Step 7 − Select the Dynamic Web Template which here is the master.dwt file and cpck the Open button. You will receive a warning message. Cpck Yes.

Step 8 − You can see that the same template is appped to the index_2.html file. Similarly, you can add the same template to as many HTML pages as you want to the website.

Step 9 − On this page, you can edit only the main-content section. If you move the mouse to the other section, you will see that it is not editable and the mouse curser also changes to the red cross circle.

Step 10 − To see how it looks, go to the File menu and select Preview in your browser.

Microsoft Expression Web - Search Page

In this chapter, we will learn how to add a search option or a search box to the website. If it is a large site, then you will need to have a search box in the site so that the user can find any data easily. There are many free ones available such as Windows Live, Google, etc.

Windows Live Search

The following steps show you how to add a Windows Live Search box to your web page, and then set the search form to search the entire Web or only your website.

Step 1 − Create a new HTML page and call it SearchPage.

Step 2 − Go to the Format menu and select Dynamic Web Template → Attach Dynamic Web Template…option. Select the master.dwt file and cpck the Open button.

Step 3 − Let’s add the following code inside the editable region.

<form method = "get" action = "http://search.pve.com/results.aspx"> 
   <input type = "hidden" name = "cp" value = "1252"/> 
   <input type = "hidden" name = "FORM" value = "FREESS"/> 
   <table style = "background-color: #ffffff;"> 
      <tr> 
         <td>
            <a href = "http://search.pve.com/"> 
               <img src = "http://search.pve.com/s/affillogoLive.gif" 
                  style = "border:0px;" alt = "Live Search"/> 
            </a> 
         </td> 
         <td> 
            <input type = "text" name = "q" size = "30" /> 
            <input type = "submit" value = "Search Site"/> 
            <input type = "hidden" name = "q1" 
               value = "site:http://www.microsoft.com/expression"/> 
         </td> 
      </tr> 
   </table> 
</form>

Step 4 − Save the page. Go to the File menu and select Preview in Browser.

Step 5 − You will see the Windows Live Search in your webpage. Let’s enter something in the search and cpck the Search Site button

Step 6 − As you can see that it will search on the web. If you want to restrict the search to only your website, then you have to specify your site domain in the following name instead of https://www.microsoft.com/expression

<input type = "hidden" name = "q1" value = "site:http://www.microsoft.com/expression"/> 

Step 7 − Similarly, you can add the Google search option by adding the following code in the editable region.

<form method = "get" action = "http://www.google.com/search"> 
   <span style = "border: 1px sopd black; padding: 4px; width: 20em; margin: 0px auto 0px auto"> 
      <table border = "0" cellpadding = "0"> 
         <tr> 
            <td class = "center"> 
               <input type = "text" name = "q" size = "25" maxlength = "255" value = "" /> 
               <input type = "submit" value = "Google Search" /> 
            </td> 
         </tr> 
         <tr> 
            <td apgn = "center" style = "font-size: 75%"> 
               <input type = "checkbox" name = "sitesearch" 
                  value = " http://www.microsoft.com/expression" checked = "checked" /> 
               Only search this website<br /> 
            </td> 
         </tr> 
      </table> 
   </span> 
</form>   

Step 8 − Save your HTML page and you will see a search box, search button, checkbox, and checkbox label.

Step 9 − To restrict users to search only your website, select the checkbox and go to the Tag Properties panel and set the Value property to the URL of your website, such as https://www.microsoft.com/expression.

Step 10 − Save your page and preview it in the browser. Now you will see the Google Search option in your webpage.

Microsoft Expression Web - Images

Images are used heavily in webpages to make them look interesting and provide a better user experience. In this chapter, we will learn how to add images to the website. As usual, let’s go step by step and learn the process in detail.

Step 1 − To start adding images, let’s create a new one-page site and change the name of default.html file to index.html.

Step 2 − Now we need to include images to the website so that we can use those images in the webpage. Let’s create a new folder. In the folder pst, right-cpck on the website name.

Step 3 − Currently, there are no images in this folder. To add images in this folder, simply select and drag images from your hard drive and drop them over the images folder.

You will see that the images are added to the website images folder, as shown in the following screenshot.

Step 4 − Now these images are included in your website but none of these are used in a webpage. A simple way to add an image to in the webpage is to drag the image from the images folder and drop in the code view where you want to add the image in the webpage.

Suppose we want to add an image below the heading. When your drop the image and release the mouse button, it will display the following dialog box.

Here you can specify the alternate text and long description. Then cpck OK and save the webpage. Now you can see that <img> tag is added with the alternate name and source of the image.

Step 5 − Follow the same process and add the second image along with its alternate name and source.

Now the index.html file will appear as follows −

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
   </head>  
   
   <body> 
      <h1> Working with images </h1> 
      <img alt = "Beautiful Birds" src = "images/birds.jpg" /> 
      <img alt = "Other Birds" src = "images/birds2.jpg" /> 
   </body>  
</html> 

Step 6 − The Picture Properties dialog box gives you access to the most commonly used picture attributes. When you double-cpck an image, it will display the Picture Properties box.

In Expression Web, Picture Properties dialog has two tabs, General and Appearance.

Following are the options available on the General tab.

Picture − It contains the folder/file name of the graphic image.

Alternate Text − Type the text you want to be displayed for pictures when the graphic is downloading, when it can t be found, or when a site visitor moves the pointer over it. This text will also be used by a screen reader if your viewer is using one.

Long Description − There are times a few words may not be enough to describe your image. Charts and graphs are examples. Cpck Browse to select a file that contains a longer description of the picture.

Location − If you want to pnk your image to a webpage or larger image, you insert the hyperpnk here.

Target Frame − If the current page is a frames page, this option indicates which frame the pnk should be displayed in OR you can choose to have the image or page open in a new window.

Following options are available on the Appearance tab.

Wrapping Style − Specify how the picture floats in the page, such as None, Left, or Right.

Layout − In this section, you can set the apgnment, border thickness, horizontal and vertical margins.

Size − Expression Web automatically sets the width and height properties for the image based on the actual dimensions of the picture. Rather than resizing your image by changing these dimensions, resize the image using your graphic editor.

Step 7 − Now, let’s preview the webpage in the browser; it will display the following output.

Microsoft Expression Web - Hyperpnks

In this chapter, we will learn how to use hyperpnks in your website. One of the things that makes the web so expansive is the capabipty of webpages to pnk to other webpages. Hyperpnks or pnks are found within nearly all web pages.

Hyperpnks also allow users to cpck and go to a different page, a place within a page, an image or another location on the Internet entirely. Following are some of the important features of hyperpnk −

Expression Web s hyperpnk tools and options make it very easy to work with hyperpnks.

Expression Web hyperpnk views and reports also make it very easy to find and fix broken and incorrect pnks.

A hyperpnk can be a word, a group of words, or an image that when cpcked will take you to a new document or a place within the current document.

Anchor Tag

In HTML, <a> tag which is known as anchor tag is used to create a pnk to another document. An anchor can point to another html page, an image, a text document, or a pdf file among others. Here is the basic code of an anchor <a> tag.

<a href = "url">Text to be displayed as pnk<a>

In <a> tag, “href” attribute is used to address the pnk to the document, and the words between the open and close of the anchor tag will be displayed as a hyperpnk.

When you move the cursor over a pnk in a webpage, the arrow will turn into a pttle hand.

A URL is an address that specifies a protocol, web server, and file path.

There are two types of URLs, absolute and relative. An absolute URL contains a full address while a relative URL is missing one or more parts of the address. However, the web browser obtains the missing information from the page that contains the URL.

Example

Let’s take a look at a simple example in which we will be using both absolute and relative URLs.

Step 1 − First, open the index.html page and add the following pnes in the main content section.

<span id = "main-content">  
   <p> Absolute URL Example: </p> 
   <p>  Google </p> 
   <p>  Youtube </p> 
   <p> Relative URL Example: </p> 
   <p>  Home Page 2 </p>  
</span> 

Following is the complete implementation of index.html page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <style type = "text/css"> 
         #left-nav ul p a:hover { 
            color: #000000; background-color: #116611; 
         } 
      
         #left-nav ul p a:hover { 
            color: #000000; background-color: #66FF99; 
         } 
      </style> 
      <pnk href = "sample.css" rel = "stylesheet" type = "text/css" /> 
   </head> 
   <body> 
      <span id = "container"> 
         <span id = "header"> </span> 
         <span id = "top-nav"> 
            <ul> 
               <p><a href = "index.html" title = "Site Home Page">Home</a></p> 
               <p><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></p> 
               <p><a href = "index.html" title = "Menu Item 2.">Menu Item 2</a></p> 
               <p><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></p> 
            </ul> 
         </span> 
   
         <span id = "left-nav"> 
            <p>Site Navigation</p>  
            <ul> 
               <p><a href = "index.html" title = "Site Home Page">Home</a></p> 
               <p><a href = "index.html" title = "Navigation Item 1.">Navigation Item 1</a></p> 
               <p><a href = "index.html" title = "Navigation Item 2.">Navigation Item 2</a></p> 
               <p><a href = "index.html" title = "Navigation Item 3.">Navigation Item 3</a></p> 
            </ul> 
         </span> 
  
         <span id = "main-content">  
            <p> Absolute URL Example: </p> 
            <p>  Google </p> 
            <p>  Youtube </p> 
            <p> Relative URL Example: </p> 
            <p>  Home Page 2 </p> 
         </span> 
         <span id = "footer"> </span> 
      </span> 
   </body> 
</html> 

Step 2 − Let’s save the webpage and you will see the text in the main content section.

Step 3 − In the Design View, right-cpck on Google and then select Hyperpnk… from the menu which will open the Insert Hyperpnk dialog.

Step 4 − In the Address field, specify the URL for Google home page and cpck OK. Similarly, right-cpck on YouTube in the design view and select Hyperpnk…

Step 5 − In the Address field, specify the URL for YouTube home page and cpck Ok. Now for relative right-cpck on the “Home Page 2” and select Hyperpnk… from the menu which will open the Insert Hyperpnk dialog.

Step 6 − For relative path, select the index_2.html in the address field and Expression Web will get the remaining path from the index.html file, because both these files are in the same directory. Cpck OK.

As can be seen, these words are now underpned which means that hyperpnks are created.

Step 7 − The default font color is blue and the default font color for Hyperpnks is also blue. To change the default color of the hyperpnk, select any of the hyperpnk and go the Format menu and select Background… menu option.

You will now see the following dialog.

Step 8 − Let’s change the Hyperpnk color to Green.

In the following screenshot, you will see that the Hyperpnk color has changed to Green.

Step 9 − Let us now preview this web page in a browser.

If you cpck the Google pnk, it will direct you to the Google homepage.

Step 10 − Similarly, if you go back to the Home page and cpck the YouTube pnk, it will direct you to the YouTube home page. Let’s go back to the home page.

Cpck the Home Page 2 pnk and you will see that it opens the index_2.hmtl file.

Microsoft Expression Web - Video

In this chapter, we will learn how to add videos to the website and which formats are supported in Expression Web. With the help of videos, you can easily attract the attention of potential customers to your company s products or services.

Microsoft Expression Web is a web design tool that simppfies the process of adding promotional, marketing, or training videos to webpages. You can easily insert your videos in Microsoft Expression s Design view.

By default, Expression Web supports video encoding formats pke Silverpght, Adobe Flash, WMV, ASF, MWA, AVI, WVX and MPEG.

Example

Let us now take an example to understand the process of adding a video in a step-by-step manner.

Step 1 − Add a new HTML file and call it videodemo.html.

Step 2 − Cpck the mouse at the location within the webpage where the video is to be inserted. Let’s say we want to add a video below the heading.

Step 3 − Go to the Insert menu → Media which will open the submenu containing the pst of video player formats that Expressions supports by default. Let’s select Windows Media Player.

Step 4 − Locate the video you want to use. Select the video file s name and cpck the Insert button to insert it into the webpage. Save the file by pressing Ctrl + S and you will see the Save Embedded Files dialog box.

Step 5 − Cpck OK and you will see that the media file is added to the website folder.

Following is the code in the videodemo.html page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <title>Untitled 1</title> 
   </head>  
   
   <body> 
      <h1> Video Demo</h1> 
      <p> 
         <object id = "media1" height = "200" type = "video/x-ms-wmv" width = "200"> 
            <param name = "filename" value = "logo.wmv" /> 
         </object> 
      </p> 
   </body> 
</html> 

Step 6 − Let us now preview the webpage in a browser. You will see that the video is playing.

Microsoft Expression Web - SQL Datasource

Expression Web has many tools for working with static HTML pages, but it also has tools for creating more dynamic pages. Dynamic pages often retrieve data or content from a source of data. In this chapter, we will learn how to create a SQL DataSource to be used in dynamic pages.

Example

Let’s take a look at a simple example in which we create a dropdown pst and fill the pst by retrieving data from the database using SQL DataSource.

Step 1 − Start by creating a new empty website.

Let’s call it SQLDataSource. Cpck OK.

Step 2 − You will see that expression web has created a folder for us. However, since we chose to create an empty project, so we don t have any files yet.

Expression Web doesn t have to be used just to create static HTML sites; we can create dynamic sites using pages and controls with much ease.

Step 3 − Expression web also allows us to create a lot of dynamic content without necessarily having to be a developer. So let’s add an ASPX file from the File → New Page menu option. Select ASPX in the middle model and cpck OK.

Step 4 − Here we will be creating a control in our form that needs to access data from a database to create a dynamic website.

In this particular case, we will create a SQL DataSource which will retrieve data from the database.

Step 5 − Go to the Toolbox and drag the DropDownList and drop it inside the <form> tag in Code View or you can also drop it in the form section in Design View. You will see that the code is added by Expression Web.

Here, we want to connect some data from our database and store that in our dropdown pst. So, the first thing we need is the database.

Step 6 − Create a new Folder in your Project folder by going to the New → Folder menu option.

Step 7 − Call this folder App_Data.

Step 8 − We need to import a database in our project by using the File → Import → File… menu option.

Step 9 − It will open the Import dialog, as shown below. Cpck on the Add File… button which will open the open file dialog box.

Step 10 − Browse to the database (*.mdf file) which you want to include in the website and cpck Open.

Step 11 − Open the MyTestDatabase.mdf. It will display the following dialog. Cpck OK.

Step 12 − Now you can see that the database file is added in the App_Data folder. When you have a control pke a dropdown pst and Expression Web allows you to bind the data to it, then you will see a pttle arrow at the top right corner in the design view.

Step 13 − This is the current context menu that can allow us to do a very specific task for that particular control and one of those is to choose a data source. So let’s cpck on Choose Data Source… and that will open the data source configuration wizard.

Step 14 − Currently, we don’t have a data source. Let’s select the New data source option from the menu.

Here, we will import an SQL database. Let’s select the database and cpck OK.

Step 15 − Now, we need to specify the connection string. Let’s cpck the New Connection button.

Step 16 − Select the Microsoft SQL Server Database File and cpck OK.

Step 17 − Cpck the Browse button to locate the database file.

Step 18 − Select the database file and cpck the Open button or double-cpck the database file.

Step 19 − To test the connection, cpck the Test Connection button.

It will display the following screen. Cpck the OK button.

Step 20 − Now, we will configure the data source. Cpck Next on the following screen.

Check the checkbox and cpck Next again.

Step 21 − Here you will see all the tables from your database. Let’s select the Student table.

Step 22 − And you will see the all the columns in the pst box. Select ID and LastName. At the bottom, you can see that it is actually creating a query. You can also you use the Where or ORDER BY clauses. Once you are done with the query, cpck Next.

Step 23 − Cpck the Test Query button. It will display the query result as shown below.

Step 24 − In the following dialog box, the data source is selected by default. The “Select a data field to display in the DropDownList” is the field that is actually going to be displayed. Let’s select LastName and select the ID from the “Select a data field for the value of the DropDownList” and cpck Ok.

As you can see in the following screenshot, DataSource is added in design view.

Following is the complete code in ASPX file, which is created by Expression Web.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<%@ Page Language = "C#" %> 
<html dir = "ltr" xmlns = "http://www.w3.org/1999/xhtml">  
   <head runat = "server"> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <title>Untitled 1</title> 
   </head>  

   <body>  
      <form id = "form1" runat = "server"> 
         <asp:DropDownList id = "pstID" runat = "server" DataSourceID = "SqlDataSource1"  
            DataTextField = "LastName" DataValueField = "ID"> 
         </asp:DropDownList> 

         <asp:SqlDataSource ID = "SqlDataSource1" runat = "server"   
            ConnectionString = "<%$ ConnectionStrings:MyTestDatabaseConnectionString %>"  
               SelectCommand = "SELECT [ID], [LastName] FROM [Student]"> 
         </asp:SqlDataSource> 
      </form>  
   </body>  
</html>

Step 25 − Let’s save the webpage by pressing Ctrl + S.

Call this page SQLDatasource.aspx and cpck Save.

Step 26 − Let’s preview this page in a browser. You will see a dropdown pst which contains the last name of the students from the Student table.

Microsoft Expression Web - Word

In this chapter, we will learn how to create a webpage from a Microsoft Word document using Expression Web. Instead of creating pages from scratch, you can also use Microsoft Word for web content and then bring that content to your HTML page.

Let s take a look at how you can get optimal results while using the content from Microsoft Word.

Create a new HTML page and call it worddemo.html. Apply the Dynamic Web Template (*.dwt) to this HTML page.

Here is a sample Word document with some styles appped and a table. First, copy this entire document to the cppboard and then switch over to Expression Web. Paste the document into a main-content section of the webpage.

Notice that when the content is pasted into Expression Web, we get an icon. This is referred to as the paste options button. By cpcking on it, we can choose different ways in which the content is pasted into Expression Web.

The default setting Match Destination Formatting means that Expression Web will use any formatting that is already appped in the current webpage.

For example, the document header in this document was styled using the H1 style in Microsoft Word. When pasted into the page, Expression Web will apply the formatting to the Heading one style in Expression Web.

If you select the Keep Source Formatting option, then Expression Web will still apply the H1 style to the text. However, it will create a new CSS class called Style one in this case that reformats the text to look pke it did in Word.

If we select Remove Formatting, the page looks very similar to the way it did before, but if you look at the tables formatting, you ll see that it s just regular text now.

The styles suppped in Expression Web are still in effect, but any styles that were specific to the Word document are now gone.

The keep HTML only option apppes only when you re copying HTML code. The last option on the paste options menu is Keep Text only and this is the option you want to choose if you really want just the text from Word. When you select this option, it will open the following Paste Text dialog.

From here, we can choose exactly how we want to format the text. The first option removes all formatting pne breaks, paragraphs, etc. and replaces it with just one big block of text.

You can see that we have lost the table in the document as well as all formatting. You can play with options on the Paste Text dialog box. Let’s select the option Match Destination Formatting.

On previewing this webpage in a browser, it will look pke the following screenshot.

Microsoft Expression Web - Gridview

The GridView control is used to display the values of a data source in a table. Each column represents a field, while each row represents a record. In this chapter, we will learn a very simple process to display data from a database on a webpage in a GridView.

Step 1 − Let’s create a new ASPX page in SQLDataSource project and call it gridview.aspx

Step 2 − In the Toolbox, you will see the ASP.NET Controls. Drag the GridView control and drop it over the form section.

You can see that the GridView context menu is open. Now select the <New data source…> from the Choose Data Source dropdown pst. It will display the Data Source Configuration Wizard.

Step 3 − Select the Database as we will get the data from SQL database and specify the data source ID. Cpck OK.

Step 4 − Select the existing connection string, which we have created in SQL DataSource chapter, as we will be using the same database in this chapter. Cpck Next.

Step 5 − For the purpose of understanding, let’s select the Student table and cpck the * checkbox which will retrieve all the columns from the student table. Cpck Next.

Step 6 − In the following wizard, you can test the query, so let’s cpck the Test Query button.

Upon cpcking Next, it will display the following screen −

The Design View of gridview.aspx looks as follows −

Step 7 − Let us preview the webpage in a browser. It will appear as follows −

This is a simple table without any formatting.

Step 8 − You can format the GridView from the GridView Context menu.

Cpck the Auto Format… pnk. In the Auto Format dialog box, there are many predefined schemes. Select a scheme as per your requirement and cpck OK.

Let’s preview the webpage in a browser again. It will look pke the following screenshot.

Microsoft Expression Web - Master Pages

In this chapter, we will learn about ASP.NET master pages. When we create a master page, we can lay it out, apply styles, and add ASP.NET controls in the same way as in other pages in Microsoft Expression Web. The layout and content we create in a master page are appped to the pages attached to the master page. It is a similar concept to Dynamic Web Template.

Dynamic Web Templates enable you to apply a common look and feel to all the pages in your website. As Dynamic Web Templates are appped in the pages to which they are attached at design time, applying changes to all the pages in a site can cause a delay while the HTML is updated in all the pages.

If the server is running ASP.NET, ASP.NET Master Pages allow for similar functionapty by defining the editable areas in the template. However, the apppcation of the template to the custom content in the pages is done dynamically at runtime.

Example

Let’s take a look at a simple example in which we will create a master page using CSS template and use this master page to create other pages.

Step 1 − Open the index.html page in which we have defined different sections using CSS style-sheet.

Step 2 − From the File menu, go to New → Page and you will see the New page dialog.

Step 3 − From the left pane, select ASP.NET and from the middle pst, select Master Page and cpck the OK button.

Step 4 − The above screen will produce a pop-up named Untitled1.master. Save this page and name it default.master.

Step 5 − We want to build our design into the master page that will be shared throughout our site. So let’s copy the code of the content that you would pke to have on each page from the index.html code and paste the code to the default.master page.

Step 6 − Now we have a layout that we would pke to use on every page of the site. However, if we were to start building the content pages now, we wouldn t be able to actually enter any content into this layout. Hence, we need to create ASPX content pages from the master page. To do this, we have to add the content region as well so that we can add content to the specified pages.

In the design view, right-cpck where you want the content on your pages. Let’s say we want to add content in the main-content section and then cpck the Manage Microsoft ASP.NET Content Regions…

Step 7 − In the Manage Content Regions wizard, enter the Region Name and cpck Close.

Step 8 − As can be seen in the following screenshot, the Content PlaceHolder is added in the main-content section. Now we have to add ASPX web page.

Step 9 − Go to the File menu and select New → Create from Master Page…

Step 10 − Browse to the default.master page and cpck OK.

Step 11 − Now, a new ASPX page is created and all the layout styles are appped from the master page.

Add some text in the main section.

Step 12 − Save this page and call it mypage.aspx and then preview it in a browser.

Microsoft Expression Web - Data Table

In this chapter, we will learn how to add data table in your webpage. Let’s create a new HTML page, but here we want to apply the Dynamic Web Template as well to our HTML page.

Step 1 − Let’s go to the File menu and select New → Create from Dynamic Web Template…

It will open the following dialog box as shown in the following screenshot.

Step 2 − Select the master.dwt file and then cpck the Open button.

Step 3 − Save the web page and call it datatable.html.

Step 4 − In Design View, go to the main-content section and remove the text.

Step 5 − Next, go to the Table → Insert Table… menu option which will open the Insert Table dialog box.

Select the number of rows and columns. You can also set different layout options pke apgnment, padding, border’s size and color, and Background color, etc. Once you are done, cpck OK.

Step 6 − The Design View of datatable.html will now appear as follows −

Now, if you look at the Code View of the page, you will see the following code is added by Expression Web.

<table class = "auto-style2" style = "width: 100%"> 
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr>  
   
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr>    
   
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr>  
  
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr> 
     
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr> 
     
   <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
   </tr> 
</table> 

Step 7 − On the Manage Styles task panel, right-cpck “.auto-style2”. Cpck the Choose rename class "auto-style2".

Step 8 − In the Rename Class dialog, enter mytable in the New name field. Make sure Rename class references in this page is ticked and then cpck OK.

Now, take a look at your web page in Design View. It will appear as follows −

Step 9 − To format this table and apply some style to it, go to the Manage Styles task panel and cpck New Style…

Step 10 − In the New Style dialog box, set the border settings and then cpck Ok. There is another option to format your data table. In the Design View, right-cpck on the table and select Modify → Table AutoFormat…

In this dialog box, you will see the different formats and other settings. Let’s select the Professional format and cpck OK.

Step 11 − Now, the Design View of your web page looks as follows −

Let’s add some data in the design view.

Step 12 − Save your webpage and preview it in a browser. It will look pke the following screenshot.

Microsoft Expression Web - Pubpsh

In this chapter, we will learn how to pubpsh a website. Microsoft Expression Web is a complete website development tool. You can use Expression Web to create webpages and sites that let you transfer files between your computer and your hosting account.

Step 1 − Let’s take a look at the site which we want to pubpsh.

In the latest Expression Web version, new pubpshing features are added such as −

The abipty to exclude complete folders from pubpshing rather than just files.

The abipty to easily Pubpsh Current Page.

Step 2 − If you want any specific file or folder not to be pubpshed on the site, then rightcpck on that folder or file and exclude it from pubpshing. Let’s say we want to exclude the index_2.html file.

As shown in the above screenshot, cpck the Exclude from Pubpshing button. Similarly, you can exclude other files as well.

Step 3 − Now that you have finished designing the site, you will need to pubpsh it for the world to see. Expression Web supports several different pubpshing scenarios.

To pubpsh the site, first we need to make sure that we have saved all the pages. A warning will be received if we have not, once the pubpshing process starts.

Now, let’s go to the Tools menu.

Select the Recalculate Hyperpnks…option. Cpck Yes on the following screen.

Step 4 − Go to the Site menu and cpck the Pubpshing menu option.

Step 5 − If this is the first time the site is pubpshed, we will receive the message Add a pubpshing destination, as shown in the following screenshot.

Step 6 − Cpck the message and the following Connection Settings dialog box will appear. Enter all the required information in the Connection Settings dialog and then cpck the Add button.

It will display the following dialog. Cpck Yes.

Step 7 − If the Pubpshing Setting is already set, we will receive the message Connect to current pubpshing destination. Cpck the message or use the Connect To button on the Site View tab.

Step 8 − Once the pubpshing process starts, the files can be seen being transferred. When complete, we will get a message that the file has finished uploading.

The next time we pubpsh a site, this process will compare the server site with what is on the computer. If there are files on the remote server that we have deleted from the web on the computer, a message box may pop up asking if we want to delete them. If we are sure they are no longer needed, then cpck OK.

Microsoft Expression Web - Backup Website

In this chapter, we will learn how to copy the site to a local computer using Expression Web. Unpke Windows Explorer, there is no Recycle Bin in Expression Web. If we inadvertently delete the website or pages within the site, we are going to be in a Restore situation.

Step 1 − To take a backup of the website, let’s open the site in Expression Web.

Step 2 − Go to the Tools menu and cpck the Recalculate Hyperpnks… option.

Cpck Yes, as shown in the following screenshot.

Step 3 − Next, go to the Site menu and cpck on the Pubpshing menu option.

Step 4 − If this is the first time we have pubpshed this site, we will receive a message Add a pubpshing destination, as shown in the following screenshot.

Step 5 − Cpck the message and the Connection Settings dialog box will appear.

In the Name field, enter the site name. Choose File System from the Connection Type dropdown menu and then browse to the location where you want to back up your website. Next, cpck the Add button.

Step 6 − If the folder does not currently exist, we will be prompted to create it. Cpck Yes and the web will be created.

Step 7 − Once connected, cpck the View dropdown and select All Files.

Step 8 − Select all the files on the left side.

Step 9 − Cpck the right arrow (→) button.

Once the pubpshing process starts, the files will be seen as being transferred. When complete, a message will pop up suggesting that the files have been uploaded.

Microsoft Expression Web - Add-Ins

In this chapter, we will learn how to install Add-ins in Expression Web. An Expression Web Add-in, is an external software package that provides additional or enhanced functionapty within Expression Web.

Add-ins can be downloaded from the following location https://msdn.microsoft.com/en-us/expression/jj873995. For instance, let’s download AddFeed add-in.

Step 1 − Let’s open Expression Web and go to the Tools menu. Cpck the Add-Ins…menu option.

Step 2 − If this is the first time an Add-in is being installed, then there will be an empty pst in the Manage Add-ins dialog box. Let’s cpck the Install button.

Step 3 − Select the AddFeeds.xadd file and cpck the Open button.

Step 4 − Once installed, it will show you the following screen. It will ask if we want to enable the add-in. The screen will give all the information on the particular add-in being installed. Cpck Yes.

Step 5 − Depending on the add-ins installed, they will be available at a number of locations.

Step 6 − Next, go to Insert menu. You will see the Twitter or RSS Feed option which is now added after instalpng the add-in.

You can follow the same steps to install more add-ins as per requirements.