Developing Web Sites Using Microsoft Expression Web

and Visual Studio 2005

Tanapat YimsooTechnical Consult, The Enterprise Resources Training Co., Ltd (ERT)

Agenda

• Introductions to Expression Studio

• Expression Web Overview

• Accessing data in Expression Web

• Creating and using web user controls

• Creating and using web services

• Reporting and publishing in Expression Web

• Ten reasons to get hooked on Expression

2

Introductions

• Microsoft Expression Studio, a suite of tools for creative designers that

gives you the freedom to bring your vision to reality and boosts developer collaboration in the delivery of rich user experiences for the Web, Windows Vista applications and beyond.

3

Microsoft Expression Studio

Expression Web Expression Design

Expression Blend Expression Media

Expression Studio

4

Expression Web

• Expression Web is a professional design tool to create modern, standards-based sites which deliver superior quality on the Web.

– Standards-based Web Sites

– CSS Based Layout

– Rich Data Presentation

– Powerful Server Technology

5

Expression Blend

• Expression Blend is the professional design tool to create engaging, Web-connected, user experiences for Windows.

– Efficient Collaboration

– Tools for Creativity

– Codeless Interactivity

– Deliver Better Experiences

6

Expression Design

• Expression Design is a professional illustration and graphic design tool that lets you build compelling elements for both Web and desktop application user interfaces.

– Flexible Vector Drawing

– Dynamic Live Effects

– Expanded Workflow

– Innovative Design Environment

7

Expression Media

• Expression Media is a professional asset management tool to visually catalog and organize all your digital assets for effortless retrieval and presentation.

– Effortless Organization

– Seamless Workflow Integration

– Image and Video Editing

– Professional Presentation

8

Expression Web Overview

• Using Expression Web

• Understanding Design View

• Understanding Code View

• Using Dynamic Web Templates

9

10

Using Expression Web

• Create professional web sites

• High-quality, standards-based web sites

• Flexible and customisable UI

• Sophisticated design features

– Visual designers e.g. for layout of controls

– Specialized task panes e.g. for tag properties

– Toolbars e.g. for control of layout and formatting

• Clean and efficient code

– Supports industry standards – XHTML, XML, CSS

• Provides templates for standardized sites

11

Understanding Design View

• Task panes ease page creation and management

• By default

– 4 task pane panels

– Displays the 6 most common task panes

• Task panes can be detached and reattached

• Default settings can be restored easily

• Additional task panes are available

12

Understanding Code View

• Represents a coded view of the page design

• Standards-based

– HTML 4.01

– XHTML 1.0, 1.1

– CSS 1.0, 2.0, 2.1, IE6

• Synchronized with Design View and vice versa

• Code snippets allow easy entry of common code sections

13

Using Dynamic Web Templates

• Allow designers to quickly create high quality web sites

• 4 families of template

– Event

– Organizational

– Personal

– Small Business

• Support for HTML and ASP .NET pages

14

DEMO Expression Web OverviewIn this demonstration, you will see how to explore the functionality of Design View

And Code View.

Accessing Data in Expression Web

• Using ASP .NET controls to manage data

• Using XML and XSL to manage data

15

16

Using ASP.NET controls to manage data

• Data sources

– AccessDataSource

– SitemapDataSource

– SQLDataSource

– XmlDataSource

• Data bound controls

– Standard controls e.g. DropDownList control

– Data controls e.g. GridView control

– Navigation controls e.g. Menu control

17

Using XML and XSL to manage data

• XML data can be accessed using XMLDataSource

• Easy-to-use drag-and-drop functionality

• XSL style sheets are used to format XML data

18

DEMO Accessing Data in Expression WebIn this demonstration, you will see how to configure an AccessDataSource and how

to bind controls to a data source in Expression Web And you will learn how XML

data can be easily incorporated in web pages and how it can be formatted using

XSL.

Creating and using web user controls

• What are web user controls?

• Why use web user controls?

• Reusing user interface and code

• Creating web user controls

19

What are web user controls?

• ASP .NET pages – essentially just HTML

• .ascx file extension

• Must be hosted in a .aspx page

20

Why use web user controls?

• Self-contained

• Can be reused easily

• Language independent

• Can be used in all pages within a single web site

• Wide range of uses

– Navigation controls

– Page headers

– Repeated page controls

21

22

Reusing user interface and code

control.ascx

application.aspx

default.aspx

Web site A Web site B

login.aspx

Creating web user controls

• User interface

– Created by designers in Expression Web

– Created by developers in Visual Studio 2005

• Functional code

– Created by designers in Expression Web – client-side

– Created by developers in Visual Studio 2005 – server-side

23

24

DEMO Creating and using web user controlsIn this demonstration, you will see how a simple web user control can be created in

Expression Web and Visual Studio 2005.

25

Creating and using web services

• What are web services?

• Why use web services?

• Creating web services

• Using web services

26

What are web services

• Programmable logic accessible across the Internet

• Allow applications to send and receive information

• Language and platform independent

• Stateless

• Can be asynchronous

27

Why use web services?

• Shared code

• Standards based

• Easy to create and use

28

Creating web services

• Use Visual Studio 2005

– Create a web service web site

– Create .asmx files

– Create web methods of the XML Web service

• Can be customised for additional security

29

Using web services

• Web references in web sites

• Programmatic functionality available over the web

• Code-behind pages written by developers

30

DEMO Creating and using web servicesIn this demonstration, you will see how to create web services using Visual Studio

2005 and how to use web services in web sites

31

Reporting and publishing in Expression Web

• Reporting options

– CSS reports

– Accessibility reports

– Compatibility reports

• Publishing options

32

Reporting options

• CSS reports– Reports styles in use

– Report style errors

– Page or site wide

– Allows use of filters

• Accessibility reports– Improve visitor experience

– Based on W3C and WCAG standards

– Reports displayed as a web page

– Hyperlinks allow easy access to HTML

• Compatibility reports– Check HTML/XHTML compatibility against different browsers

– Check CSS compatibility against different definitions

33

Publishing options

• A variety of scenarios

– Work locally and publish to remote production server

– Work on remote staging server and publish to remote production server

– Work directly on remote production server

• A variety of protocols

– FTP

– WebDav

– FrontPage Server Extensions

• Optimize HTML

34

DEMO Reporting and publishing in Expression WebIn this demonstration, you will see how to use reporting and publishing in

Expression Web

Ten reasons to get hooked on Expression

• Professional Design UI

• Standards-Based Site Design

• CSS Layout

• CSS Management

• Page Rendering

35

• Rich Data Presentation

• ASP.NET 2.0

• ASP.NET Development Server

• Reporting

• Visual Studio Integration

For more information

• http://www.microsoft.com/Expression

• http://blogs.msdn.com/expression/

• http://blogs.msdn.com/xweb/

• http://en.wikipedia.org/wiki/Microsoft_Expression_Web

36