Transcription

Microsoft Expression WebAbout the TutorialMicrosoft Expression Web is a full-featured professional tool for designing, developing, andpublishing feature-rich websites that conform to web standards. Expression Web uses itsown standard rendering engine, which is different from Internet Explorer's Trident engine.In the following chapters of this tutorial, we will look closely at Microsoft Expression Weband learn how it works.AudienceThis tutorial has been prepared for aspiring web designers to familiarize them with theinterface and features of Microsoft Expression Web.After completing this tutorial, you will gain sufficient knowledge on Microsoft ExpressionWeb from where you can take yourself to the next level.PrerequisitesIt is quite a simple tutorial written in a very user-friendly manner. You can make the mostof it with a very basic knowledge of web designing and web development.Disclaimer & Copyright Copyright 2018 by Tutorials Point (I) Pvt. Ltd.All the content and graphics published in this e-book are the property of Tutorials Point (I)Pvt. Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republishany contents or a part of contents of this e-book in any manner without written consentof the publisher.We strive to update the contents of our website and tutorials as timely and as precisely aspossible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt.Ltd. provides no guarantee regarding the accuracy, timeliness or completeness of ourwebsite or its contents including this tutorial. If you discover any errors on our website orin this tutorial, please notify us at [email protected]

Microsoft Expression WebTable of ContentsAbout the Tutorial . iAudience . iPrerequisites . iDisclaimer & Copyright . iTable of Contents . ii1.EXPRESSION WEB OVERVIEW. 1Microsoft Expression Web History . 1System Requirements . 22.EXPRESSION WEB ENVIRONMENT SETUP. 3Installation . 33.EXPRESSION WEB NEW WEBSITE . 6Create a Website . 64.EXPRESSION WEB BLANK WEB PAGE. 14Create a Blank Page . 14Create a CSS Page . 175.EXPRESSION WEB WEBPAGE LAYOUT . 24 div tag . 24Example . 256.EXPRESSION WEB HTML LAYOUT . 377.EXPRESSION WEB HORIZONTAL NAVIGATION . 428.EXPRESSION WEB VERTICAL NAVIGATION. 60ii

Microsoft Expression Web9.EXPRESSION WEB VALIDATE PAGES . 74Status Bar . 76Compatibility Report . 7810.EXPRESSION WEB DYNAMIC WEB TEMPLATE. 80The Need for Dynamic Web Templates. 80Create a Dynamic Web Template . 8011.EXPRESSION WEB SEARCH PAGE . 86Windows Live Search . 8612.EXPRESSION WEB IMAGES . 9213.EXPRESSION WEB HYPERLINKS . 99Anchor Tag . 9914.EXPRESSION WEB VIDEO . 10915.EXPRESSION WEB SQL DATASOURCE . 11416.EXPRESSION WEB MICROSOFT WORD . 13517.EXPRESSION WEB GRIDVIEW. 14118.EXPRESSION WEB MASTER PAGES . 15019.EXPRESSION WEB DATA TABLE. 15820.EXPRESSION WEB PUBLISH. 16921.EXPRESSION WEB BACKUP WEBSITE . 17622.EXPRESSION WEB ADD-INS. 182iii

1.Expression Web OverviewMicrosoft Expression WebMicrosoft Expression Web is a full-featured professional tool for designing, developing, andpublishing feature-rich websites that conform to web standards. You can use ExpressionWeb to create web pages and sites that let you transfer files between your computer andyour 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 HistoryMicrosoft released the first Community Technology Preview (CTP) version of ExpressionWeb 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 fortesting pages on browsers that cannot be installed on the user's system, such asMac OS X or Linux browsers. It also provides an SEO Checker using which you can analyze already createdwebsites against the best practices for getting the highest possible search enginerankings.Expression Web Service PacksExpression Web 4 Service Pack 1 was released in March 2011 and added support forIntelliSense for HTML5 and CSS.Expression Web 4 Service Pack 2 was released in July 2011. It fixed a number of issuesand 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 ExpressionWeb and Expression Design will now be free products.1

Microsoft Expression WebSystem RequirementsTo create a website using Microsoft Expression Web, your computer should meet thefollowing requirements: You should have at least Windows XP with Service Pack 3 or the latest operatingsystems. 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 x 768 or higher resolution monitor with 24-bit color. Some product features require Firefox 3.0 or later, Internet Explorer 8. So youshould have the same version.Actual requirements and product functionality may vary based on your systemconfiguration and operating system.2

2.Expression Web Environment SetupMicrosoft Expression WebMicrosoft provides a free version of Microsoft Expression Web which can be downloadedfrom spx?id 36179.InstallationStep 1: Before you can install Expression Web, you will need to have .NET Framework 4.0installed.Step 2: Once downloading is complete, run the installer. The following dialog will bedisplayed.Step 3: Click the Accept button.Step 4: Select the Yes radio button and then click Next.3

Microsoft Expression WebStep 5: You can choose other location as well for installation. Select the location and clickthe Install button.4

Microsoft Expression WebThe installation process starts.Once the installation is complete, you will see the following dialog.Step 6: Click Finish to continue.5

3.Expression Web New WebsiteMicrosoft Expression WebIn the previous chapter, we have installed Microsoft Expression Web and now we are readyto start working on it. In this chapter, we will learn how to create a new website fromscratch.Create a WebsiteTo create a new website, let’s open Microsoft Expression Web.Next, you need to follow the steps given below.6

Microsoft Expression WebStep 1: Select Site - New Site menu option.Step 2: It will open the following dialog from which you can create or import differenttypes of website.7

Microsoft Expression WebStep 3: For simplicity let’s select General - One Page Site. Specify the location or you can browse to the location where you want the newwebsite to be created. Type in the name of your web in the name field and click OK.8

Microsoft Expression WebStep 4: The new web will be created with one page named default.htm. Let’s rename itto index.html with a right-click on the file and clicking on the Rename option.9

Microsoft Expression WebStep 5: The default doctype used in Expression Web is: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 xhtml1-transitional.dtd" html xmlns "http://www.w3.org/1999/xhtml" You can see it by just switching to the code view.10

Microsoft Expression WebYou can change the doctype from Tools - Page Editor Options - Authoring.11

Microsoft Expression WebStep 6: Now, let’s add h1 tag inside the body tag and some text as shown in thefollowing code. !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 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 inBrowser - Any browser, let’s say, Internet Explorer.12

Microsoft Expression WebIt will open our web in Internet Explorer.13

4.Expression Web Blank Web PageMicrosoft Expression WebAs we have already created our website, now we will need to create our Home Page. Inthe previous chapter, we have created a one-page website, and our Home Page wascreated at that time automatically by Expression Web. So, if you have created a blankwebsite, then you will need to create a Home Page for your site.Microsoft Expression Web can create the following types of pages: HTMLASPXASPPHPCSSMaster PageDynamic Web TemplateJavaScriptXMLText FileIn this chapter, we will create an HTML page and its corresponding style sheet.Create a Blank PageTo create a blank page, you can simply go to File menu and select New - Page menuoption.14

Microsoft Expression WebFrom 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 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 15

Microsoft Expression WebAs you can see, your newly created page has the file name Untitled 1.html orUntitled 1.htm. You will need to save the page by pressing Ctrl S and specify thename.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.16

Microsoft Expression WebCreate a CSS PageLet’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 menuoption.17

Microsoft Expression WebStep 2: Select General - CSS and click OK.Step 3: Save the page and type a name for the style-sheet.18

Microsoft Expression WebStep 4: Click the Save button.Step 5: Now, let’s go to the index.html page.19

Microsoft Expression WebStep 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 Linkfrom “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" / 20

Microsoft Expression WebStep 9: The body element defines the document's body. To style the body tag, weneed to create a new style. First, select the body tag in Design View and then click on theNew Style in Apply Styles panel or Manage Styles panel, which will open the New Styledialog.Here, you can define the different options for your style. The first step is to select the bodyfrom the Selector dropdown list and then select the Existing style sheet from “Define in”dropdown list.21

Microsoft Expression WebStep 10: From the URL, select the sample.css file. On the left side, there is a Categorylist like font, background, etc. and currently the Font is highlighted. Set the Font relatedinformation 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 haschanged to what we have selected. Now, if you open the sample.css file, you will see thatall the information is automatically stored in the CSS file.22

Microsoft Expression WebLet’s preview our web page in a browser. You will observe that the style is applied fromthe CSS file.23

Microsoft Expression WebEnd of ebook previewIf you liked what you saw Buy it from our store @ https://store.tutorialspoint.com24

Microsoft Expression Web i About the Tutorial Microsoft Expression Web is a full-featured professional tool for designing, developing, and publishing feature-rich websites that conform to web standards. Expression Web uses its own standard rendering engine, which is different from Internet Explorer's Trident engine.File Size: 1MBPage Count: 28Explore furtherMicrosoft Expression Web 4.0 - Downloadmicrosoft-expression-web.updatest Microsoft Expression Web - Quick Guide - Tutorialspointwww.tutorialspoint.comMicrosoft's replacement for Expressions web?social.msdn.microsoft.comExpression web 4.0 free download (Windows)en.freedownloadmanager.orgMicrosoft Expression Web 4 and Windows 10social.msdn.microsoft.comRecommended to you b