Category: microsoft Expression Web

Microsoft Expression Web – Useful Resources ”; Previous Next The following resources contain additional information on Microsoft Expression Web. Please use them to get more in-depth knowledge on this. Useful Video Courses Python Regular Expressions Course with 50 examples 10 Lectures 52 mins Ashokkumar P More Detail Locators, XPath Expressions, CSS Selectors and Locator Tools 91 Lectures 20 hours Arun Motoori More Detail Regular Expressions in Javascript Master course + projects 45 Lectures 4.5 hours DigiFisk (Programming Is Fun) More Detail Advanced Motion Graphics with After Effects Expressions 15 Lectures 1 hours Harshit Srivastava More Detail Complete Practical Regular Expressions (Regex) 34 Lectures 3.5 hours Kyrylo Yefimenko More Detail Building a Parser from Scratch 18 Lectures 2.5 hours Packt Publishing More Detail Print Page Previous Next Advertisements ”;

Microsoft Expression Web – Master Pages ”; Previous Next 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 applied 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 applied 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 functionality by defining the editable areas in the template. However, the application 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 list, select Master Page and click 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 like 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 like 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-click where you want the content on your pages. Let’s say we want to add content in the main-content section and then click the Manage Microsoft ASP.NET Content Regions… Step 7 − In the Manage Content Regions wizard, enter the Region Name and click 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 click OK. Step 11 − Now, a new ASPX page is created and all the layout styles are applied 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. Print Page Previous Next Advertisements ”;

Microsoft Expression Web – Quick Guide ”; Previous Next Microsoft Expression Web – Overview Microsoft Expression Web is a full-featured professional tool for designing, developing, and publishing 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 Silverlight 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 functionality 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 IntelliSense 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 IntelliSense support a panel for managing snippets Interactive Snapshot Panel comment/uncomment functionality 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 Silverlight 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 functionality 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 Microsoft Expression Web Download 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 − Click the Accept button. Step 4 − Select the Yes radio button and then click Next. Step 5 − You can choose other location as well for installation. Select the location and click the Install button. The installation process starts. Once the installation is complete, you will see the following dialog. Step 6 − Click 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 simplicity 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 click 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-click on the file and clicking 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

Microsoft Expression Web – Blank Web Page ”; Previous Next 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 click 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 click OK. Step 3 − Save the page and type a name for the style-sheet. Step 4 − Click the Save button. Step 5 − Now, let’s go to the index.html page. Step 6 − In the Manage Styles Panel, click Attach Style Sheet. Step 7 − Browse to your style-sheet and select the Current page from “Attach to” and Link from “Attach as” and click OK. Step 8 − Now, you will see that a new line is added automatically in the index.html page. <link 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 click 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 list and then select the Existing style sheet from “Define in” dropdown list. Step 10 − From the URL, select the sample.css file. On the left side, there is a Category list like font, background, etc. and currently the Font is highlighted. Set the Font related information as per your requirements as shown in the above screenshot and click 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 applied from the CSS file. Print Page Previous Next Advertisements ”;

Microsoft Expression Web – Video ”; Previous Next 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 simplifies 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 like Silverlight, 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 − Click 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 list 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 click 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 − Click 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. Print Page Previous Next Advertisements ”;

Microsoft Expression Web – SQL Datasource ”; Previous Next 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 list and fill the list by retrieving data from the database using SQL DataSource. Step 1 − Start by creating a new empty website. Let’s call it SQLDataSource. Click 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 click 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 list. 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. Click 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 click Open. Step 11 − Open the MyTestDatabase.mdf. It will display the following dialog. Click OK. Step 12 − Now you can see that the database file is added in the App_Data folder. When you have a control like a dropdown list and Expression Web allows you to bind the data to it, then you will see a little 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 click 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 click OK. Step 15 − Now, we need to specify the connection string. Let’s click the New Connection button. Step 16 − Select the Microsoft SQL Server Database File and click OK. Step 17 − Click the Browse button to locate the database file. Step 18 − Select the database file and click the Open button or double-click the database file. Step 19 − To test the connection, click the Test Connection button. It will display the following screen. Click the OK button. Step 20 − Now, we will configure the data source. Click Next on the following screen. Check the checkbox and click 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 list 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, click Next. Step 23 − Click 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 click 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 = “listID” 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 click Save. Step 26 − Let’s preview this page in a browser. You will see a dropdown list which contains the last name of the students from the Student table. Print Page Previous Next Advertisements

Microsoft Expression Web – Images ”; Previous Next 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 list, right-click 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 click 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-click 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. Click Browse to select a file that contains a longer description of the picture. Location − If you want to link your image to a webpage or larger image, you insert the hyperlink here. Target Frame − If the current page is a frames page, this option indicates which frame the link 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 alignment, 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. Print Page Previous Next Advertisements ”;

Microsoft Expression Web – Gridview ”; Previous Next 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 list. 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. Click 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. Click Next. Step 5 − For the purpose of understanding, let’s select the Student table and click the * checkbox which will retrieve all the columns from the student table. Click Next. Step 6 − In the following wizard, you can test the query, so let’s click the Test Query button. Upon clicking 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. Click the Auto Format… link. In the Auto Format dialog box, there are many predefined schemes. Select a scheme as per your requirement and click OK. Let’s preview the webpage in a browser again. It will look like the following screenshot. Print Page Previous Next Advertisements ”;

Microsoft Expression Web – Search Page ”; Previous Next 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 click the Open button. Step 3 − Let’s add the following code inside the editable region. <form method = “get” action = “http://search.live.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.live.com/”> <img src = “http://search.live.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 click 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 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”> <div style = “border: 1px solid 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 align = “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> </div> </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 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. Print Page Previous Next Advertisements ”;

Microsoft Expression Web – Word ”; Previous Next 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 applied and a table. First, copy this entire document to the clipboard 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 clicking 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 applied 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 like 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 supplied 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 applies 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 line 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 like the following screenshot. Print Page Previous Next Advertisements ”;